/* D2D-Planer — ein Tokensatz für alle Seiten.
   Drei Zustände: keine Stempelung (System), [data-thema="hell"], [data-thema="dunkel"]. */
:root {
  --grund:      #F2F5F1;
  --flaeche:    #FFFFFF;
  --flaeche-2:  #E4EAE3;
  --tinte:      #14190F;
  --tinte-leise:#5E6B5F;
  --linie:      #D3DCD1;
  --signal:     #4FD48C;
  --signal-satt:#12794A;
  --gut:        #12794A;
  --knapp:      #B8701A;
  --kritisch:   #B5342A;
  --schatten:   0 1px 2px rgba(20,25,15,.06), 0 8px 24px rgba(20,25,15,.07);
  --auf-signal: #0B1A12;
  --logo-signal:#12794A;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund:#0F1410; --flaeche:#18201A; --flaeche-2:#232D25;
    --tinte:#E9F1E9; --tinte-leise:#93A195; --linie:#2D3830;
    --signal:#3FC781; --signal-satt:#6FE0A6;
    --gut:#5BD494; --knapp:#E0A050; --kritisch:#E0796E;
    --schatten:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --auf-signal:#0B1A12; --logo-signal:#4FD48C;
    color-scheme: dark;
  }
}
:root[data-thema="dunkel"] {
  --grund:#0F1410; --flaeche:#18201A; --flaeche-2:#232D25;
  --tinte:#E9F1E9; --tinte-leise:#93A195; --linie:#2D3830;
  --signal:#3FC781; --signal-satt:#6FE0A6;
  --gut:#5BD494; --knapp:#E0A050; --kritisch:#E0796E;
  --schatten:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --auf-signal:#0B1A12; --logo-signal:#4FD48C;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Ein Element mit [hidden] muss verschwinden - sonst gewinnt jedes
   display:grid/flex einer Klasse gegen die schwache Vorgabe des Attributs. */
[hidden] { display: none !important; }
body {
  margin:0; background: var(--grund); color: var(--tinte);
  touch-action: manipulation;          /* kein Zoom per Doppeltipp */
  -webkit-text-size-adjust: 100%;      /* keine eigenmaechtige Schriftvergroesserung */
  font-family:"Public Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-family: Archivo, ui-sans-serif, system-ui, sans-serif; text-wrap:balance; margin:0; }
a { color: var(--signal-satt); }
:focus-visible { outline:3px solid var(--signal-satt); outline-offset:2px; border-radius:4px; }

.etikett { font-size:.68rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--tinte-leise); }

.tafel {
  min-height:100dvh; display:grid; place-items:center; padding:var(--s5) var(--s4);
}
.karte {
  width:100%; max-width:400px; background:var(--flaeche); border:1px solid var(--linie);
  border-radius:18px; box-shadow:var(--schatten); padding:var(--s6) var(--s5) var(--s5);
  display:grid; gap:var(--s4);
}
.karte-logo { color:var(--tinte); height:38px; margin-bottom:var(--s2); }
.karte-logo svg { height:100%; width:auto; }
.karte h1 { font-size:1.35rem; font-weight:800; letter-spacing:-.01em; }
.karte > p { margin:0; color:var(--tinte-leise); font-size:.92rem; }

.feld { display:grid; gap:5px; }
.feld label { font-size:.84rem; font-weight:600; }
.feld .hinweis { font-size:.76rem; color:var(--tinte-leise); font-weight:400; }
input[type=text], input[type=email], input[type=password], input[type=number], select {
  font:500 1rem/1.3 "Public Sans", sans-serif; padding:12px 13px; width:100%;
  border:1.5px solid var(--linie); border-radius:10px; background:var(--flaeche); color:var(--tinte);
}
input:focus, select:focus { border-color:var(--signal-satt); }

.knopf {
  font-family:Archivo, sans-serif; font-weight:700; font-size:1rem; padding:14px; width:100%;
  border:0; border-radius:12px; cursor:pointer; background:var(--signal); color:var(--auf-signal);
  transition:filter .18s ease, transform .12s ease;
}
.knopf:hover { filter:brightness(1.06); }
.knopf:active { transform:translateY(1px); }
.knopf[disabled] { opacity:.55; cursor:default; }
.knopf.stumm { background:var(--flaeche-2); color:var(--tinte); font-size:.88rem; padding:11px; }

.meldung {
  border-radius:10px; padding:10px var(--s3); font-size:.88rem;
  background:color-mix(in srgb, var(--kritisch) 12%, var(--flaeche)); color:var(--kritisch);
}
.meldung[hidden] { display:none !important; }

/* Thema-Schalter — drei Zustände, überall gleich */
.thema { display:flex; gap:2px; background:var(--flaeche-2); padding:3px; border-radius:9px; }
.thema button {
  flex:1; border:0; background:transparent; cursor:pointer; border-radius:7px; padding:6px 4px;
  font:600 .76rem/1 "Public Sans", sans-serif; color:var(--tinte-leise);
}
.thema button[aria-pressed="true"] { background:var(--flaeche); color:var(--tinte); box-shadow:0 1px 2px rgba(20,25,15,.12); }

.fuss-zeile { text-align:center; font-size:.8rem; color:var(--tinte-leise); }

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