/* perplexa.de - statische Seite auf dem Strato-Webspace.
   Bewusst eigenständig: keine Abhängigkeit vom Hub, damit ein
   Ausfall der Anwendung diese Seite nicht betrifft.
   Markenfarben identisch zum Hub. */

:root {
  --ink: #231F20;
  --muted: #5F5B5C;
  --paper: #F4F3F1;
  --surface: #FFFFFF;
  --rule: #DEDBD7;
  --accent: #A6D71C;
  --accent-hover: #96C40F;
  --accent-deep: #5C7A0F;
  --step: 0.5rem;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F2F0EE;
    --muted: #A8A2A0;
    --paper: #1A1719;
    --surface: #232022;
    --rule: #383336;
    --accent-hover: #B6E52C;
    --accent-deep: #A6D71C;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.shell {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: calc(var(--step) * 6) calc(var(--step) * 3);
  text-align: center;
}

/* Für Screenreader sichtbar, optisch nicht. Nicht display:none - das
   würde den Text auch dem Vorleseprogramm entziehen. */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.logo { width: 240px; max-width: 80%; height: auto; display: block; margin: 0 auto calc(var(--step) * 6); }
/* Im Dunkelmodus wird der anthrazitfarbene Schriftzug aufgehellt. */
@media (prefers-color-scheme: dark) {
  .logo { filter: invert(1) hue-rotate(180deg); }
}


a { color: var(--accent-deep); }

.knopf {
  display: inline-block;
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: 1rem;
  padding: calc(var(--step) * 1.5) calc(var(--step) * 3.5);
  background: var(--accent);
  /* Weiß auf diesem Grün ergibt nur 1,7:1 - daher Anthrazit. */
  color: #231F20;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}
.knopf:hover { background: var(--accent-hover); color: #231F20; }
.knopf:focus-visible, a:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; }


@media (max-width: 34rem) {
  .shell { padding: calc(var(--step) * 6) calc(var(--step) * 2.5) calc(var(--step) * 4); }
  .logo { width: 180px; }
}