/* Etappe 0 — Anmeldung und Empfang.
   Bewusst AUTARK: keine Abhaengigkeit auf /static/ds/ oder app.css, damit die Anmeldeplattform
   auch dann vollstaendig aussieht, wenn von der uebrigen Oberflaeche noch nichts hochgeladen ist.
   Die Werte sind aus dem Design-System (static/ds/00-primitive.css, 10-semantik.css) uebernommen —
   beim Umstieg auf die volle Oberflaeche (Etappe 1) ersetzt das DS diese Datei. */

:root {
  color-scheme: dark;
  /* --gold faerbt Schrift und Linien, --gold-flaeche die Knopfflaeche. Getrennt, weil dieselbe
     Goldstufe nicht in beiden Bildern lesbar ist (Messwerte: docs/DESIGN-SYSTEM.md, Pruefbericht). */
  --gold:#E0C692; --gold-flaeche:#E0C692; --gold-flaeche-hover:#F0DDB4; --knopf-text:#16140F;
  --gold-hell:#F0DDB4; --gold-tief:#C9A96A; --forest:#003624;
  --grund:#0C0B0A; --karte:#1E1C1A; --karte-2:#232120; --aktiv:#2A2724;
  --text-1:#F5F1EA; --text-2:#CFC8BD; --text-3:#9A948B; --text-label:#8D877E; --tinte:#16140F;
  --rand:rgba(245,241,234,.08); --rand-stark:rgba(245,241,234,.2);
  --gruen:#6FBF8E; --gruen-flaeche:rgba(78,140,106,.12); --gruen-rand:rgba(78,140,106,.35);
  --amber:#E7CF9E; --amber-flaeche:rgba(216,161,58,.12); --amber-rand:rgba(216,161,58,.35);
  --rot:#F2B8A8; --rot-flaeche:rgba(196,85,59,.12); --rot-rand:rgba(196,85,59,.35);
  --blau:#A9BCD6; --blau-flaeche:rgba(91,143,185,.14); --blau-rand:rgba(91,143,185,.35);
  --rund:12px; --rund-klein:8px; --ziel:44px;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;   /* Schritt 200: Text = Systemschrift wie ds/00 */
  --display:"Montserrat","Segoe UI Semibold","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,Consolas,"Cascadia Mono",monospace;
  --schatten:0 1px 2px rgba(0,0,0,.25); --schatten-hoch:0 8px 30px rgba(0,0,0,.45);
}
[data-optik="hell"] {
  color-scheme: light;
  --grund:#F6F2EA; --karte:#FFFDF9;   /* Schritt 200: kein reines Weiß als Fläche */
  --karte-2:#F8F5EE; --aktiv:#ECE7DD;
  --text-1:#1D2B23; --text-2:#2E3A33; --text-3:#626A64; --text-label:#626A64;
  --rand:rgba(29,43,35,.12); --rand-stark:rgba(29,43,35,.28);
  /* Schrift-Gold eine Stufe dunkler als die Flaeche: 75592C erreicht 6.4:1 auf Weiss,
     8E6E3A als Flaeche traegt weisse Schrift mit 4.7:1. */
  --gold:#75592C; --gold-flaeche:#8E6E3A; --gold-flaeche-hover:#75592C; --knopf-text:#FFFFFF;
  --gold-hell:#B08A4E; --gold-tief:#75592C;
  --gruen:#2F6B4C; --amber:#8A5A00; --rot:#9C3A26; --blau:#243A5A;
  --schatten:0 1px 3px rgba(0,0,0,.07); --schatten-hoch:0 8px 30px rgba(0,0,0,.14);
}

* { box-sizing: border-box; }
html { font-size: 16px; }
@media (min-width: 900px) { html { font-size: 17px; } }
body {
  margin: 0; font-family: var(--ui); font-size: 1rem; line-height: 1.5;
  background: var(--grund); color: var(--text-1);
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.2; margin: 0; }
a { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- Marke */
.marke { font-family: var(--display); font-weight: 700; letter-spacing: .06em; display: flex; align-items: center; gap: .5rem; }
.marke .hex { color: var(--gold); font-size: 1.3em; line-height: 1; }
.marke .gold { color: var(--gold); font-weight: 600; letter-spacing: .02em; }

/* ---------------------------------------------------------------- Anmeldung */
.anmelde-seite {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(224,198,146,.08), transparent 60%),
    radial-gradient(800px 400px at 50% 110%, rgba(0,54,36,.35), transparent 60%),
    var(--grund);
}
.anmelde-karte {
  width: 100%; max-width: 420px; background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--rund); box-shadow: var(--schatten-hoch); padding: 32px 28px 24px;
}
.anmelde-karte .marke { font-size: 1.35rem; justify-content: center; }
.anmelde-karte .ort { text-align: center; color: var(--text-3); font-size: .85rem; margin: 6px 0 24px; }
.stufe-titel { font-size: .95rem; color: var(--text-2); margin: 0 0 16px; }

label { display: block; margin-bottom: 16px; font-size: .85rem; color: var(--text-label); font-weight: 600; }
input[type=text], input[type=password], input[type=tel] {
  display: block; width: 100%; margin-top: 6px; min-height: var(--ziel); padding: 10px 12px;
  font: inherit; font-size: 1rem; color: var(--text-1);
  background: var(--karte-2); border: 1px solid var(--rand-stark); border-radius: var(--rund-klein);
}
input:focus { border-color: var(--gold); }
input.code-feld { font-family: var(--mono); font-size: 1.3rem; letter-spacing: .3em; text-align: center; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: var(--ziel); padding: 10px 18px; width: 100%;
  font: inherit; font-weight: 600; cursor: pointer;
  border-radius: var(--rund-klein); border: 1px solid transparent;
  background: var(--gold-flaeche); color: var(--knopf-text);
  transition: background 180ms cubic-bezier(.2,0,0,1);
}
.knopf:hover { background: var(--gold-flaeche-hover); }
.knopf:disabled { opacity: .45; cursor: default; }
.knopf.zweit { background: transparent; color: var(--text-2); border-color: var(--rand-stark); width: auto; }
.knopf.zweit:hover { background: var(--aktiv); }
.knopf.klein { min-height: 36px; padding: 6px 14px; font-size: .9rem; width: auto; }

.meldung { margin: 16px 0 0; padding: 10px 12px; border-radius: var(--rund-klein); font-size: .9rem; border: 1px solid; }
.meldung.fehler { background: var(--rot-flaeche); border-color: var(--rot-rand); color: var(--rot); }
.meldung.erfolg { background: var(--gruen-flaeche); border-color: var(--gruen-rand); color: var(--gruen); }
.meldung.warnung { background: var(--amber-flaeche); border-color: var(--amber-rand); color: var(--amber); }
.meldung.info { background: var(--blau-flaeche); border-color: var(--blau-rand); color: var(--blau); }

.fusszeile { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rand); font-size: .78rem; color: var(--text-3); text-align: center; }
.fusszeile p { margin: 4px 0; }
.schloss { color: var(--gruen); }
.schloss.offen { color: var(--amber); }
.nebenlink { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: .85rem; color: var(--gold); cursor: pointer; text-decoration: underline; }

/* ---------------------------------------------------------------- Empfang */
.kopf {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px; background: var(--karte); border-bottom: 1px solid var(--rand);
}
.kopf .marke { font-size: 1.05rem; }
.kopf .luecke { flex: 1; }
.wer { text-align: right; line-height: 1.25; }
.wer .name { font-weight: 600; font-size: .95rem; }
.wer .rolle { font-size: .78rem; color: var(--text-3); }
.symbolknopf {
  min-width: 40px; min-height: 40px; display: grid; place-items: center;
  background: transparent; color: var(--text-2); border: 1px solid var(--rand-stark);
  border-radius: var(--rund-klein); cursor: pointer; font: inherit; font-size: 1.05rem;
}
.symbolknopf:hover { background: var(--aktiv); }

.inhalt { max-width: 900px; margin: 0 auto; padding: 32px 20px 64px; }
.begruessung { font-size: 1.6rem; margin-bottom: 4px; }
.begruessung-unter { color: var(--text-3); margin: 0 0 32px; }

.karte {
  background: var(--karte); border: 1px solid var(--rand); border-radius: var(--rund);
  box-shadow: var(--schatten); padding: 20px 22px; margin-bottom: 20px;
}
.karte > h2 { font-size: 1.05rem; margin-bottom: 4px; }
.karte > .unter { color: var(--text-3); font-size: .88rem; margin: 0 0 16px; }
.karte.zutun { border-color: rgba(224,198,146,.45); box-shadow: 0 0 0 1px rgba(224,198,146,.18), var(--schatten); }

.zeilen { list-style: none; margin: 0; padding: 0; }
.zeilen li { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rand); }
.zeilen li:first-child { border-top: 0; }
.zeilen .bez { color: var(--text-label); font-size: .85rem; font-weight: 600; min-width: 150px; }
.zeilen .wert { color: var(--text-1); }

.abzeichen { display: inline-flex; align-items: center; gap: .35rem; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; border: 1px solid; }
.abzeichen.gut { background: var(--gruen-flaeche); border-color: var(--gruen-rand); color: var(--gruen); }
.abzeichen.offen { background: var(--amber-flaeche); border-color: var(--amber-rand); color: var(--amber); }
.abzeichen.aus { background: transparent; border-color: var(--rand-stark); color: var(--text-3); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.etappen { list-style: none; margin: 0; padding: 0; }
.etappen li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rand); }
.etappen li:first-child { border-top: 0; }
.etappen .haken { font-size: 1.1rem; line-height: 1.3; width: 1.4rem; flex: none; text-align: center; color: var(--text-3); }
.etappen .fertig .haken { color: var(--gruen); }
.etappen .laeuft .haken { color: var(--gold); }
.etappen .spaeter { opacity: .55; }
.etappen .was { font-weight: 600; font-size: .95rem; }
.etappen .dazu { color: var(--text-3); font-size: .85rem; }

.schluessel {
  display: block; font-family: var(--mono); font-size: 1.05rem; letter-spacing: .12em; word-break: break-all;
  background: var(--karte-2); border: 1px solid var(--rand-stark); border-radius: var(--rund-klein); padding: 10px 12px; margin: 12px 0;
}
.qr { background: #FFFFFF; padding: 12px; border-radius: var(--rund-klein); display: inline-block; margin: 12px 0; }
.qr svg { display: block; width: 190px; height: 190px; }
.codeliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
.codeliste li { font-family: var(--mono); background: var(--karte-2); border: 1px solid var(--rand); border-radius: var(--rund-klein); padding: 8px; text-align: center; }

.seitenfuss { max-width: 900px; margin: 0 auto; padding: 0 20px 40px; color: var(--text-3); font-size: .8rem; }

@media (max-width: 560px) {
  .kopf { padding: 10px 14px; gap: 10px; }
  .inhalt { padding: 24px 14px 48px; }
  .zeilen li { flex-direction: column; gap: 2px; }
  .zeilen .bez { min-width: 0; }
  .knopf.zweit, .knopf.klein { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }