/* HoMi — Glass-UI im Petreechor-Look */

:root{
  --bg:#141414;
  --panel:#1d1c19;
  --card:#2b2a27;
  --ink:#e8e3da;
  --soft:#d1cfc0;
  --softer:#8e8a83;
  --accent:#d1cfc0;
  --line: color-mix(in srgb, #e8e3da 14%, transparent);
  --kasten-fuellung:#ffffff03;
  --kasten-stapel: 0 0 8px #00000008, 0 2px 6px #00000014,
    inset 3px 3px .5px -3.5px #ffffff17, inset -3px -3px .5px -3.5px #ffffffd9,
    inset 1px 1px 1px -.5px #fff9, inset -1px -1px 1px -.5px #fff9,
    inset 0 0 6px 6px #ffffff1f, inset 0 0 2px 2px #ffffff0f,
    0 0 12px #00000026;
  --glas-unschaerfe: 14px;
  --gruen:#65be6a;
  --rot:#f47f73;
  --radius: 1.4rem;
}

*{ box-sizing:border-box; }

html{
  /* Damit Antworten nie unerreichbar hinter der schwebenden Prüfen-Leiste landen,
     wenn der Browser sie ins Bild scrollt (Tastatur, Sprungmarken, Autofokus). */
  scroll-padding-bottom: 7rem;
}

html,body{
  margin:0;
  min-height:100%;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body{
  position:relative;
  min-height:100vh;
  padding: 0 1.1rem 6.5rem;
  overflow-x:hidden;
}

/* weiche Lichtflecken im Hintergrund, wie auf der Hauptseite */
body::before,
body::after{
  content:"";
  position:fixed;
  z-index:-1;
  border-radius:50%;
  filter: blur(90px);
  pointer-events:none;
}
/* Kräftiger als zuerst gewählt: bei 22 % war auf dem dunklen Grund praktisch nichts
   zu sehen, die Seite wirkte flach. Jetzt trägt das Licht die Tiefe. */
body::before{
  width:60vw; height:60vw; min-width:420px; min-height:420px;
  top:-18vw; left:-14vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--soft) 48%, transparent), transparent 68%);
  opacity:.5;
}
body::after{
  width:50vw; height:50vw; min-width:340px; min-height:340px;
  bottom:-12vw; right:-10vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--soft) 34%, transparent), transparent 68%);
  opacity:.42;
}

/* .karte ist der Hausname für den Kasten (haushalt), .kasten der von der Website.
   Beide sind hier dasselbe Ding, damit übernommene Muster nicht nackt aussehen. */
.kasten,
.karte{
  background: var(--kasten-fuellung);
  backdrop-filter: blur(var(--glas-unschaerfe)) saturate(200%) brightness(1.05);
  -webkit-backdrop-filter: blur(var(--glas-unschaerfe)) saturate(200%) brightness(1.05);
  box-shadow: var(--kasten-stapel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ---------- Zugangs-Gate ---------- */
#gate[hidden], #app[hidden]{ display:none !important; }

/* Aufbau und Verhalten sind das Haus-Muster aus haushalt („Tor"): .tor > .karte,
   beschriftetes Pflichtfeld, .mangel-Satz, .haupt-Knopf. Die Farben bleiben die
   dieser Seite, damit das Gate nicht aus dem Rest herausfällt. */
.tor{
  min-height: 78vh;
  display: grid;
  place-items: center;
  padding: 16px;
}
.tor .karte{
  width:100%;
  max-width: 380px;
  margin: 0;
  padding: 1.4rem;
}
.tor h1{
  font-size:1.35rem;
  margin: 0 0 4px;
}
.hinweis{
  color: var(--softer);
  font-size: .86rem;
  margin: 4px 0 0;
  line-height:1.5;
}
.abstand{ margin-top: 12px; }
.reihe{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
label{
  display:block;
  font-size:.86rem;
  margin-bottom:6px;
  color: var(--ink);
}
/* Ein WORT, kein Sternchen — und bewusst nicht in Gefahrfarbe: Ein Pflichtfeld ist
   eine Angabe, keine Beanstandung. Rot wird es erst, wenn wirklich etwas fehlt. */
.pflicht{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: var(--softer);
  vertical-align: middle;
  margin-left:.35rem;
}
.tor input[type="password"]{
  width:100%;
  min-width:0;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--card) 60%, transparent);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  /* 16px Mindestgröße: Alles darunter lässt iOS Safari beim Fokus hineinzoomen,
     danach steht die Seite verschoben. */
  font-size: 16px;
  outline:none;
}
.tor input[type="password"]:focus{ border-color: var(--soft); }
.tor input[aria-invalid="true"]{ border-color: var(--rot); }
.mangel{
  color: var(--rot);
  font-size: .82rem;
  margin-top: 4px;
}
.tor .haupt{ width:100%; margin:0; }
/* .haupt ist der Hausname für den tragenden Knopf, .btn der hiesige — gleiche Optik. */
.btn,
button.haupt{
  appearance:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:.95rem;
  font-weight:600;
  padding:.85rem 1.4rem;
  border-radius: 999px;
  background: var(--soft);
  color:#2a2823;
  transition: transform .15s cubic-bezier(.22,1,.36,1), box-shadow .15s;
  width:100%;
  margin-top:1.4rem;
}
.btn:hover, button.haupt:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px -12px #0008; }
.btn:active, button.haupt:active{ transform: translateY(0px) scale(.98); }

/* ---------- Kopfbereich ---------- */
header.top{
  max-width: 760px;
  margin: 2.4rem auto 1.6rem;
  padding: 1.6rem 1.6rem;
  text-align:center;
}
header.top h1{
  margin:0 0 .3rem;
  font-size:1.5rem;
}
header.top p{
  margin:0;
  color:var(--softer);
  font-size:.9rem;
}

.fortschritt-wrap{
  max-width:760px;
  margin: 0 auto 1.4rem;
  padding: 0 .2rem;
}
.fortschritt-leiste{
  height:8px;
  border-radius:999px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  overflow:hidden;
  margin-bottom:.4rem;
}
.fortschritt-fuellung{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--soft), var(--gruen));
  border-radius:999px;
  transition: width .35s cubic-bezier(.22,1,.36,1);
}
.fortschritt-text{
  font-size:.78rem;
  color:var(--softer);
  text-align:right;
}

main{
  max-width: 760px;
  margin: 0 auto;
}

.teil-titel{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--softer);
  margin: 2.2rem 0 .6rem .3rem;
}
.teil-titel:first-of-type{ margin-top:0; }

.fall-block{
  margin-bottom: 1.4rem;
  padding: 1.4rem 1.4rem 0.4rem;
  /* 🔴 Die Seite ist mit 88 Fragen sehr lang, und jede Glas-Karte kostet den Browser
     einen backdrop-filter (Weichzeichnen des Hintergrunds). Ohne das Folgende
     zeichnet er ALLE gleichzeitig — auf dem Handy ruckelt das Scrollen dann.
     content-visibility überspringt, was gerade nicht im Bild ist. */
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
.fall-titel{
  font-size:1.05rem;
  font-weight:700;
  margin: 0 0 .5rem;
}
.fall-sachverhalt{
  font-size:.9rem;
  line-height:1.6;
  color: var(--soft);
  background: color-mix(in srgb, #000 18%, transparent);
  border-radius: .9rem;
  padding: .9rem 1rem;
  margin-bottom: 1rem;
}

.frage-karte{
  border-top: 1px solid var(--line);
  padding: 1.2rem 0 1.3rem;
}
.frage-karte:first-of-type{ border-top:none; }

.frage-text{
  font-size:.98rem;
  font-weight:600;
  line-height:1.5;
  margin: 0 0 .8rem;
}

.antworten{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.antwort-option{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  padding:.7rem .9rem;
  border-radius: .9rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, #fff 2%, transparent);
  cursor:pointer;
  transition: background .15s, border-color .15s, transform .1s;
  font-size:.9rem;
  line-height:1.45;
}
.antwort-option:hover{
  background: color-mix(in srgb, var(--soft) 8%, transparent);
  border-color: color-mix(in srgb, var(--soft) 40%, transparent);
}
.antwort-option input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:20px; height:20px;
  min-width:20px;
  border-radius:6px;
  border: 1.5px solid var(--softer);
  background: transparent;
  margin-top:.1rem;
  cursor:pointer;
  position:relative;
  transition: border-color .15s, background .15s, transform .12s;
}
.antwort-option input[type="checkbox"]:checked{
  background: var(--soft);
  border-color: var(--soft);
}
.antwort-option input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  left:6px; top:2px;
  width:5px; height:10px;
  border: solid #2a2823;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.antwort-option input[type="checkbox"]:active{ transform: scale(.9); }
/* Ausgewählt heißt: sichtbar eingerastet. Der kurze Impuls ist die Belohnung fürs
   Antippen — ohne ihn fühlt sich eine Auswahl in einer langen Liste "unquittiert" an. */
.antwort-option.gewaehlt{
  border-color: color-mix(in srgb, var(--soft) 65%, transparent);
  background: color-mix(in srgb, var(--soft) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soft) 22%, transparent);
  animation: einrasten .22s cubic-bezier(.22,1,.36,1);
}
@keyframes einrasten{
  40%{ transform: scale(1.012); }
  100%{ transform: scale(1); }
}

/* Teilergebnis pro Fall — Erfolg in kleinen Häppchen motiviert mehr als eine
   einzige Endnote über 88 Fragen. */
.fall-punkte{
  float:right;
  font-size:.78rem;
  font-weight:700;
  padding:.22rem .6rem;
  border-radius:999px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--soft);
}
.fall-punkte.stark{ background: color-mix(in srgb, var(--gruen) 22%, transparent); color: var(--gruen); }
.fall-punkte.schwach{ background: color-mix(in srgb, var(--rot) 20%, transparent); color: var(--rot); }

.ergebnis-prozent{
  font-size:.95rem;
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Auswertungszustände (barrierefrei: Farbe + Symbol + Text) */
.antwort-option.eval-richtig-gewaehlt{
  border-color: var(--gruen);
  background: color-mix(in srgb, var(--gruen) 16%, transparent);
}
.antwort-option.eval-falsch-gewaehlt{
  border-color: var(--rot);
  background: color-mix(in srgb, var(--rot) 16%, transparent);
}
.antwort-option.eval-verpasst{
  border-color: color-mix(in srgb, var(--gruen) 55%, transparent);
  background: transparent;
  border-style: dashed;
}
.eval-marke{
  margin-left:auto;
  padding-left:.6rem;
  font-size:.78rem;
  font-weight:700;
  white-space:nowrap;
}
.eval-marke.gut{ color: var(--gruen); }
.eval-marke.schlecht{ color: var(--rot); }

.frage-status{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.02em;
  padding:.25rem .6rem;
  border-radius:999px;
  margin-bottom:.6rem;
}
.frage-status.richtig{ background: color-mix(in srgb, var(--gruen) 22%, transparent); color: var(--gruen); }
.frage-status.falsch{ background: color-mix(in srgb, var(--rot) 22%, transparent); color: var(--rot); }

/* ---------- Prüfen-Leiste ---------- */
.pruef-leiste{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:50;
  display:flex;
  justify-content:center;
  padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, #141414 55%, transparent);
  pointer-events:none;
}
.pruef-leiste-innen{
  pointer-events:auto;
  width:100%;
  max-width: 500px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.6rem .8rem;
  padding: .6rem .7rem .6rem 1.1rem;
}
.pruef-leiste-text{
  font-size:.82rem;
  color: var(--softer);
  flex:1;
}
.pruef-leiste-text b{ color: var(--ink); }
.pruef-btn{
  width:auto;
  margin:0;
  padding: .8rem 1.5rem;
  white-space:nowrap;
}
.reset-btn{
  background: transparent;
  color: var(--softer);
  border: 1px solid var(--line);
  border-radius:999px;
  padding:.7rem 1rem;
  font-size:.85rem;
  cursor:pointer;
  font-family:inherit;
}
.reset-btn:hover{ color: var(--ink); border-color: var(--soft); }

footer.fuss{
  max-width:760px;
  margin: 2.5rem auto 0;
  text-align:center;
  color: var(--softer);
  font-size:.74rem;
  line-height:1.6;
  padding: 0 1rem;
}

@media (max-width: 480px){
  header.top{ margin-top:1.4rem; padding:1.2rem 1rem; }
  .fall-block{ padding:1.1rem 1rem 0.2rem; }
}