/* Weblion · gemeinsames Aussehen aller Seiten. Fassung 5 (10.11.2026): Farbwelt A „Löwengold & Waldgrün“, von Tilo gewählt.
   Tiefes Waldgrün für Kopf und Kopfbereich, Elfenbein als Seitengrund, Gold als Handlungs- und Hervorhebungsfarbe.
   Token-Namen bleiben aus früheren Fassungen (blau = Hauptgrün, orange = Gold), damit alle Seiten ohne Umbau folgen.
   Schrift: Plus Jakarta Sans (SIL Open Font License) auf dem eigenen Server, keine Verbindung zu Google beim Besuch. */
@font-face { font-family: "Plus Jakarta Sans"; src: url("schrift/plus-jakarta-sans.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --bg: #F6F0E2; --seite: #FBF7EE; --flaeche: #FFFDF7; --tinte: #13352A; --leise: #4F6A5E;
  --blau: #1F6B4A; --blau-hell: #E4F0E7; --linie: #E4DAC4;
  --tuerkis: #2E8B63; --tuerkis-hell: #E2F0E7; --auf-akzent: #FFFDF7; --fehler: #B3261E; --fehler-hell: #FBEAE8;
  --orange: #E8B04B; --orange-tief: #B9801C; --orange-hell: #FBF0D9; --auf-orange: #10291F;
  --sonne: #E8B04B; --sonne-hell: #FBF0D9;
  --held: #0E3B2E; --held-text: #F7F1E3; --held-leise: #C9D8CE;
  --display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --text: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #0B2219; --seite: #0D271D; --flaeche: #123326; --tinte: #F3EDE0; --leise: #B8C9BF;
  --blau: #7ACFA2; --blau-hell: #183D2E; --linie: #25463A;
  --tuerkis: #6FD3A0; --tuerkis-hell: #163A2B; --auf-akzent: #0B2219; --fehler: #F2867E; --fehler-hell: #3A1E1C;
  --orange: #F0BE5E; --orange-tief: #F0BE5E; --orange-hell: #3A2F17; --auf-orange: #10291F;
  --sonne: #F0BE5E; --sonne-hell: #3A2F17;
  --held: #0A2A20; --held-text: #F7F1E3; --held-leise: #B8C9BF; color-scheme: dark } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* sonst gewinnt .knopf { display:block } und versteckte Knöpfe bleiben sichtbar */
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--tinte); font-family: var(--text); font-size: 17px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
a { color: var(--blau); }
h1, h2, h3 { font-family: var(--display); font-weight: 800; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(30px, 8vw, 44px); line-height: 1.08; letter-spacing: -.01em; }
h2 { font-size: clamp(24px, 6.4vw, 30px); line-height: 1.15; }
.rahmen { max-width: 560px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: env(safe-area-inset-top, 0px) 0; }
.rahmen.breit { max-width: 760px; }
.marke { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: -.01em; color: var(--blau); text-decoration: none; }
.marke span { color: var(--leise); font-weight: 600; }
.marke { display: inline-flex; align-items: center; gap: 8px; }
.wortmarke { display: block; height: 22px; width: auto; }
.unter { color: var(--leise); margin: 8px 0 20px; }
.kennung { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tuerkis); }
.hinweis { font-size: 14px; color: var(--leise); margin-top: 10px; }
:focus-visible { outline: 3px solid var(--tuerkis); outline-offset: 2px; }

.knopf { display: block; width: 100%; text-align: center; text-decoration: none; border: 0; border-radius: 12px; background: var(--blau); color: var(--auf-akzent);
  font: 600 17px var(--text); padding: 16px; cursor: pointer; }
.knopf.zweit { background: none; color: var(--blau); padding: 8px; font-size: 15px; }
.knopf.rand { background: var(--flaeche); color: var(--blau); border: 1.5px solid var(--blau); }
.knopf:disabled { opacity: .45; cursor: default; }

.fusszeile { margin-top: auto; padding-block: 28px 24px; font-size: 14px; color: var(--leise); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fusszeile a { color: var(--leise); }

/* Rechtstexte */
.text { padding-block: 24px 8px; }
.text h1 { font-size: clamp(28px, 7vw, 36px); margin-bottom: 16px; }
.text h2 { font-size: 20px; margin: 26px 0 8px; }
.text p, .text li { max-width: 65ch; }
.offen { background: var(--fehler-hell); color: var(--tinte); border-radius: 6px; padding: 0 4px; }

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