/* Trauly Platzhalterseite. Gestaltung nach design/design-system.md (Fassung 2).
   Regeln: Farben nur als var(--…), Schrift Systemschrift (Geist-Dateien liegen
   noch nicht im Projekt, kommen mit 1.0b/1.4), 4 px Ecken, keine Schatten,
   keine Großbuchstaben-Zeilen. Mobile first: Grundwerte gelten für 375 px. */

/* Farb-Tokens hell (Design-System §3) */
:root {
  --kopf: #413CDD;
  --akzent: #413CDD;
  --link: #2C26D9;
  --grund: #F4F4FD;
  --weiss: #FFFFFF;
  --linie: #C9C8EF;
  --ink: #1E1C54;
  --mute: #5A57A2;
  --auf-kopf: #FFFFFF;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Farb-Tokens dunkel: folgt der Einstellung des Geräts */
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0C0B1E;
    --weiss: #13122B;
    --linie: #26244C;
    --ink: #EDEDF7;
    --mute: #9A99C2;
    --link: #9693EC;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--grund);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 25px;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Logo-Leiste (§6.1): vollflächig Indigo, Logo weiß. Handy 56 px, ab 720 px 64 px */
.leiste {
  background: var(--kopf);
  color: var(--auf-kopf);
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.logo {
  color: var(--auf-kopf);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.035em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

main {
  flex: 1;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 40px 16px;
}

/* titel-1 (Handy 27/32) */
h1 {
  margin: 0 0 16px;
  font-size: 27px;
  line-height: 32px;
  font-weight: 600;
}

/* titel-2 (22/28) */
h2 {
  margin: 32px 0 8px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}

p { margin: 0 0 16px; max-width: 70ch; }

.klein { font-size: 14px; line-height: 21px; color: var(--mute); }

a { color: var(--link); text-decoration: underline; }

/* Sichtbarer Fokus, doppelt (§6.12) */
a:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Fußzeile: Trennlinie, Link mit Tippfläche mindestens 44 px */
footer {
  border-top: 1px solid var(--linie);
  padding: 8px 16px;
}

footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Angaben im Impressum als Zeilen mit Trennlinie, keine Kästen */
.angaben { margin: 0 0 16px; padding: 0; list-style: none; max-width: 70ch; }
.angaben li { padding: 12px 0; border-top: 1px solid var(--linie); }
.angaben li:last-child { border-bottom: 1px solid var(--linie); }

/* Fehlende Angaben sind sichtbar markiert, damit sie nicht live gehen */
.luecke { font-weight: 600; text-decoration: underline; }

@media (min-width: 720px) {
  .leiste { height: 64px; padding: 0 24px; }
  main { padding: 40px 24px; }
  h1 { font-size: 34px; line-height: 39px; }
  footer { padding: 8px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}