/* ═══════════════════════════════════════════════════════════════════════
   seite.css — eigenständige Hülle für alle Nebenseiten
   ═══════════════════════════════════════════════════════════════════════
   Trägt: die statischen Seiten (impressum.html, datenschutz.html,
   danke.html, 404.html), die serverseitig gerenderten Function-Seiten
   (Task 7: /anmelden, /bestaetigen, /austragen) und die Anmeldeseite
   (lib/anmelde-seite.js, Klassen zugang-*). Bewusst OHNE Abhängigkeit von
   landing.css (Ruling R1) — die paar gebrauchten Design-Tokens (Farben,
   Schrift, Radien) sind unten aus der App-CSS abgeschrieben, nicht
   importiert. index.html nutzt diese Datei NICHT (dort gilt landing.css +
   eigen.css).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens: dunkel als Vorgabe, html.light hellt auf (wie die App) ──────── */
:root{
  --c-bg:10 14 23;
  --c-surface:17 24 39;
  --c-border:55 65 81;
  --c-ink:241 245 249;
  --c-muted:148 163 184;
  --c-faint:100 116 139;
  --la-solid:#A67C00;
  --la-grad:linear-gradient(105deg,#A67C00,#D4AF37 46%,#F0E0B0);
  --la-glow:rgba(212,175,55,.42);
  --la-tint:rgba(212,175,55,.12);
  --la-line:rgba(212,175,55,.30);
  --fehler:248 113 113;
  --radius-karte:20px;
  --radius-feld:11px;
  color-scheme:dark;
}
html.light{
  --c-bg:234 241 248;
  --c-surface:252 253 254;
  --c-border:216 224 234;
  --c-ink:15 23 42;
  --c-muted:51 65 85;
  --c-faint:100 116 139;
  --la-solid:#8A6A28;
  --la-grad:linear-gradient(105deg,#8A6A28,#C49A3A 50%,#EBD08A);
  --la-glow:rgba(196,154,58,.22);
  --la-tint:rgba(196,154,58,.10);
  --la-line:rgba(196,154,58,.32);
  --fehler:220 38 38;
  color-scheme:light;
}

/* ── Schrift: dieselben @font-face-Regeln wie die App, nur die Gewichte,
   die diese Seiten wirklich brauchen (Latin-1-Ausschnitt reicht für
   deutsche Umlaute) ───────────────────────────────────────────────────── */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/e4af272ccee01ff0-s.p.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2212}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/e4af272ccee01ff0-s.p.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2212}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/e4af272ccee01ff0-s.p.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2212}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.seite-body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:rgb(var(--c-bg));
  color:rgb(var(--c-ink));
  font-family:Inter,system-ui,sans-serif;
  font-size:15.5px;
  line-height:1.6;
}
a{color:inherit}
img{max-width:100%;display:block}

/* ── Kopfleiste ────────────────────────────────────────────────────────── */
.seite-kopf{border-bottom:1px solid rgb(var(--c-border)/.5)}
.seite-kopf-inner{
  max-width:900px;
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.seite-wortmarke{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:1.05rem;
  text-decoration:none;
  color:rgb(var(--c-ink));
}
.seite-wortmarke img{width:26px;height:26px}
.seite-theme-knopf{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgb(var(--c-border)/.7);
  background:rgb(var(--c-surface)/.6);
  color:rgb(var(--c-muted));
  cursor:pointer;
  transition:border-color .15s ease,color .15s ease;
}
.seite-theme-knopf:hover{border-color:var(--la-solid);color:rgb(var(--c-ink))}

/* ── Inhaltsspalte (Rechtstexte, Formulare) ───────────────────────────── */
.seite-huelle{flex:1 0 auto;width:100%;max-width:760px;margin:0 auto;padding:48px 24px 80px}
.seite-huelle-mittig{display:flex;align-items:center;justify-content:center;min-height:64vh;padding-top:24px;padding-bottom:24px}
.seite-zurueck{display:inline-flex;align-items:center;gap:6px;margin-bottom:28px;font-size:.9rem;color:rgb(var(--c-faint));text-decoration:none}
.seite-zurueck:hover{color:rgb(var(--c-muted))}
.seite-huelle h1{font-size:clamp(1.6rem,4vw,2.1rem);font-weight:700;letter-spacing:-.01em;margin:0 0 20px}
.seite-huelle h2{font-size:1.15rem;font-weight:700;margin:32px 0 10px}
.seite-huelle p{margin:0 0 14px}
.seite-huelle ul{margin:0 0 14px;padding-left:1.25em}
.seite-huelle li{margin:6px 0}
.seite-huelle a:not(.btn){color:var(--la-solid);text-decoration:underline;text-underline-offset:2px}
.seite-huelle code{font-size:.9em;padding:1px 6px;border-radius:5px;background:rgb(var(--c-surface)/.8);border:1px solid rgb(var(--c-border)/.6)}
.seite-stand{margin-top:32px;padding-top:16px;border-top:1px solid rgb(var(--c-border)/.5);font-size:.85rem;color:rgb(var(--c-faint))}

/* ── Status-Karte (danke.html, 404.html) ──────────────────────────────── */
.seite-karte{
  width:100%;
  max-width:440px;
  margin:0 auto;
  padding:40px 32px;
  border-radius:var(--radius-karte);
  border:1px solid rgb(var(--c-border)/.6);
  background:rgb(var(--c-surface)/.7);
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  text-align:center;
}
/* p.seite-code statt .seite-code: braucht mehr Spezifität als die
   allgemeine .seite-karte p-Regel weiter unten, sonst gewinnt deren
   Farbe/Abstand und der Goldverlauf verschwindet. */
.seite-karte p.seite-code{margin:0 0 6px;font-size:2.4rem;font-weight:800;letter-spacing:-.02em;background:var(--la-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.seite-karte h1{font-size:1.4rem;margin-bottom:14px}
.seite-karte p{color:rgb(var(--c-muted));margin-bottom:26px}

/* ── Function-Seiten (lib/seiten.js): Fehlertext und Bestätigungs-Formular ── */
.seite-karte p.seite-fehlertext{color:rgb(var(--fehler))}
.seite-karte form{margin:0}
.seite-knopf{font-family:inherit}

/* ── Fußzeile ──────────────────────────────────────────────────────────── */
.seite-fuss{border-top:1px solid rgb(var(--c-border)/.5)}
.seite-fuss-inner{max-width:900px;margin:0 auto;padding:20px 24px;display:flex;gap:20px;flex-wrap:wrap;font-size:.85rem}
.seite-fuss-inner a{color:rgb(var(--c-faint));text-decoration:none}
.seite-fuss-inner a:hover{color:rgb(var(--c-muted))}

/* ── Buttons (auch von lib/anmelde-seite.js genutzt: btn/btn-primary/
   btn-large/zugang-knopf) ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 26px;
  border-radius:999px;
  border:1px solid transparent;
  font-family:inherit;
  font-weight:700;
  font-size:.95rem;
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;
}
.btn-primary{background:var(--la-grad);color:#241a04;box-shadow:0 8px 24px -10px var(--la-glow)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-large{padding:16px 30px;font-size:1rem}

/* ── Anmeldeseite (lib/anmelde-seite.js) ──────────────────────────────── */
.zugang-body{min-height:100vh}
.zugang-huelle{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.zugang-karte{width:100%;max-width:420px;padding:38px 32px 30px;border-radius:var(--radius-karte);border:1px solid rgb(var(--c-border)/.6);background:rgb(var(--c-surface)/.85);box-shadow:0 20px 60px rgba(0,0,0,.3);text-align:center}
.zugang-schloss{width:48px;height:48px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;border-radius:14px;border:1px solid rgb(var(--c-border)/.8);background:rgb(var(--c-bg)/.5);color:var(--la-solid)}
.zugang-titel{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin:0 0 10px}
.zugang-titel .text-gradient{background:var(--la-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.zugang-text{font-size:.92rem;line-height:1.6;color:rgb(var(--c-muted));margin:0 0 22px}
.zugang-fehler{display:flex;align-items:flex-start;gap:9px;text-align:left;margin:0 0 18px;padding:12px 14px;border-radius:var(--radius-feld);border:1px solid rgb(var(--fehler)/.4);background:rgb(var(--fehler)/.1);color:rgb(var(--fehler));font-size:.87rem;line-height:1.5}
.zugang-form{text-align:left}
.zugang-label{display:block;margin:0 0 7px;font-size:.8rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:rgb(var(--c-muted))}
.zugang-feld{width:100%;padding:13px 15px;border-radius:var(--radius-feld);border:1px solid rgb(var(--c-border)/.85);background:rgb(var(--c-bg)/.4);color:rgb(var(--c-ink));font-family:inherit;font-size:1rem}
.zugang-feld:focus{outline:none;border-color:var(--la-solid);box-shadow:0 0 0 3px var(--la-tint)}
.zugang-merken{display:flex;align-items:center;gap:9px;margin:16px 0 22px;font-size:.86rem;color:rgb(var(--c-muted));cursor:pointer}
.zugang-merken input{width:17px;height:17px;flex:0 0 auto;accent-color:var(--la-solid);cursor:pointer}
.zugang-knopf{width:100%;justify-content:center}
.zugang-zurueck{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:8px;font-size:.85rem;color:rgb(var(--c-faint));text-decoration:none}
.zugang-zurueck:hover{color:rgb(var(--c-muted))}

@media(max-width:520px){
  .seite-karte,.zugang-karte{padding:32px 22px 26px}
}

/* ── Admin-Übersicht /privat (functions/privat.js): breite Spalte, kompakte Tabelle ── */
.admin-huelle{max-width:980px}
.admin-zahlen{color:rgb(var(--c-muted))}
.admin-tabelle-huelle{overflow-x:auto;margin-top:18px;border:1px solid rgb(var(--c-border)/.6);border-radius:12px}
.admin-tabelle{width:100%;border-collapse:collapse;font-size:.88rem}
.admin-tabelle th,.admin-tabelle td{padding:9px 12px;text-align:left;white-space:nowrap;border-bottom:1px solid rgb(var(--c-border)/.4)}
.admin-tabelle th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:rgb(var(--c-faint))}
.admin-tabelle tr:last-child td{border-bottom:0}
.admin-form{margin:0}
.admin-loeschen{font-family:inherit;font-size:.82rem;padding:5px 12px;border-radius:999px;border:1px solid rgb(var(--c-border)/.8);background:transparent;color:rgb(var(--c-muted));cursor:pointer}
.admin-loeschen:hover{border-color:rgb(var(--fehler));color:rgb(var(--fehler))}
.admin-leer{color:rgb(var(--c-muted))}