/* =====================================================================
   Quire · Bausteine
   ===================================================================== */

/* ---------------------------------------------------------------------
   Die Lagenmarke — das Erkennungszeichen der App

   Eine Lage ist der Stapel gefalzter Bogen, aus dem ein Buch gebunden
   wird. Jedes Dokument trägt an seiner Vorderkante die eigene Lage,
   von der Seite gesehen: ein Strich je angefangene zwanzig Seiten.

   Das ist kein Ornament, sondern eine Angabe. Wer die Bibliothek
   überfliegt, sieht am Strichbild sofort, was ein Handzettel und was
   ein Lehrbuch ist, ohne eine Zahl zu lesen.

   Die Anzahl steckt in der Klasse und nicht in einem style-Attribut:
   die Content-Security-Policy verbietet Inline-CSS, und das ist gut so.
   --------------------------------------------------------------------- */

.lagenmarke {
  flex: none;
  height: 30px;
  align-self: center;
  border-radius: 1px;
  background-image: repeating-linear-gradient(
    90deg,
    currentColor 0, currentColor 1px,
    transparent  1px, transparent 3px
  );
  color: var(--satz-2);
}
.lagenmarke--1  { width:  1px }
.lagenmarke--2  { width:  4px }
.lagenmarke--3  { width:  7px }
.lagenmarke--4  { width: 10px }
.lagenmarke--5  { width: 13px }
.lagenmarke--6  { width: 16px }
.lagenmarke--7  { width: 19px }
.lagenmarke--8  { width: 22px }
.lagenmarke--9  { width: 25px }
.lagenmarke--10 { width: 28px }

/* Dieselbe Marke trägt im Durchgang den Fortschritt: beantwortete
   Fragen stehen in Leinengrün, offene in Grau. */
.laufmarke {
  display: flex; gap: 2px; align-items: flex-end;
  height: 14px;
}
.laufmarke i {
  flex: 1 1 0; min-width: 1px; height: 100%;
  background: var(--falz);
  border-radius: 1px;
  transition: background var(--zeit) var(--kurve);
}
.laufmarke i.getan   { background: var(--leinen) }
.laufmarke i.hier    { background: var(--tinte) }

/* ---------------------------------------------------------------------
   Gruppierte Liste — der tragende Baustein
   --------------------------------------------------------------------- */

.gruppe { margin-bottom: var(--m8) }
.gruppe > .rubrik { padding: 0 var(--m1) var(--m2) }

.liste {
  background: var(--bogen);
  border-radius: var(--radius);
  box-shadow: var(--heb-1);
  overflow: hidden;
}
.liste > * + * { border-top: 1px solid var(--falz) }

.zeile {
  display: flex; align-items: center; gap: var(--m4);
  width: 100%; min-height: 56px;
  padding: var(--m3) var(--m4);
  text-align: left;
  color: inherit;
  transition: background var(--zeit) var(--kurve);
}
.zeile:where(button):active { background: var(--lage) }
@media (hover: hover) { .zeile:where(button):hover { background: var(--lage) } }

/* Die Zeileninhalte sind <span>, damit sie in einem <button> stehen dürfen
   (ein <button> darf kein <div> enthalten). Sie müssen deshalb ausdrücklich
   als Blöcke gesetzt werden, sonst laufen Name und Unterzeile ineinander. */
.zeile .inhalt { display: block; flex: 1; min-width: 0 }
.zeile .name {
  display: block;
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zeile .unter { display: block; margin-top: 1px }
.zeile .pfeil { flex: none; color: var(--satz-2) }
.zeile .rechts { flex: none; color: var(--satz); text-align: right }

/* ---------------------------------------------------------------------
   Knöpfe — genau drei Arten, mehr verwirrt nur
   --------------------------------------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--m2);
  min-height: 48px; padding: 0 var(--m5);
  border-radius: var(--radius-s);
  font-size: var(--gr-brot); font-weight: 590;
  letter-spacing: -.01em;
  transition: opacity var(--zeit) var(--kurve), background var(--zeit) var(--kurve);
}
.knopf:active { opacity: .72 }
.knopf[disabled] { opacity: .38; pointer-events: none }
.knopf--breit { display: flex; width: 100% }

.knopf--tragend { background: var(--leinen); color: var(--bogen) }
@media (prefers-color-scheme: dark) { .knopf--tragend { color: #10201b } }

.knopf--still {
  background: var(--bogen); color: var(--tinte);
  box-shadow: inset 0 0 0 1px var(--falz);
}
.knopf--text { color: var(--leinen); padding: 0 var(--m2); min-height: 44px }
.knopf--warnend { color: var(--oxblut) }

/* ---------------------------------------------------------------------
   Felder
   --------------------------------------------------------------------- */

.feld { display: block; margin-bottom: var(--m4) }
.feld > .marke {
  display: block; margin-bottom: var(--m2);
  font-size: var(--gr-neben); font-weight: 500; color: var(--satz);
}
.feld input[type="email"],
.feld input[type="password"],
.feld input[type="text"],
.feld select {
  display: block; width: 100%;
  min-height: 48px; padding: 0 var(--m4);
  background: var(--bogen); color: var(--tinte);
  border: 1px solid var(--falz);
  border-radius: var(--radius-s);
  appearance: none;
  transition: border-color var(--zeit) var(--kurve);
}
.feld input:focus { border-color: var(--leinen) }
.feld .hinweis { margin-top: var(--m2) }

/* ---------------------------------------------------------------------
   Der Regler für die Fragenzahl

   Sein Höchstwert ergibt sich aus den gewählten Lagen und dem Schwerpunkt
   und ändert sich mit jeder Auswahl. Der Server rechnet dieselbe Grenze
   unabhängig nach — hier steht nur der Vorschlag.
   --------------------------------------------------------------------- */

.regler { padding: var(--m4) }
.regler .ablesung {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--m3);
}
.regler .wert { font-family: var(--auszeichnung); font-size: 30px; font-weight: 600 }
.regler .wert span { font-size: var(--gr-neben); font-weight: 400; color: var(--satz); margin-left: 2px }

.regler input[type="range"] {
  display: block; width: 100%; height: 28px;
  background: none; appearance: none;
}
.regler input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: var(--falz);
}
.regler input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 28px; height: 28px; margin-top: -12px;
  border-radius: 50%; background: var(--bogen);
  box-shadow: var(--heb-1), 0 0 0 .5px rgba(26,26,24,.14);
}
.regler input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--falz) }
.regler input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: var(--bogen); box-shadow: var(--heb-1), 0 0 0 .5px rgba(26,26,24,.14);
}
.regler .begruendung { margin-top: var(--m3) }

/* Mehrfachauswahl in einer Liste (welche Unterlagen abgefragt werden). */
.haken-quadrat {
  flex: none; width: 22px; height: 22px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px var(--falz);
  display: grid; place-items: center;
  color: transparent;
  transition: box-shadow var(--zeit) var(--kurve), background var(--zeit) var(--kurve);
}
.zeile[aria-pressed="true"] .haken-quadrat,
.haken-quadrat.gewaehlt {
  background: var(--leinen); box-shadow: none; color: var(--bogen);
}
@media (prefers-color-scheme: dark) {
  .zeile[aria-pressed="true"] .haken-quadrat,
  .haken-quadrat.gewaehlt { color: #10201b }
}

/* ---------------------------------------------------------------------
   Schwerpunkt — Auswahl als Segmente
   --------------------------------------------------------------------- */

.schwerpunkte { display: grid; gap: 1px; background: var(--falz) }
.schwerpunkt {
  display: flex; align-items: flex-start; gap: var(--m3);
  padding: var(--m4);
  background: var(--bogen); text-align: left;
}
.schwerpunkt .haken {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--falz);
  display: grid; place-items: center;
  color: transparent;
  transition: box-shadow var(--zeit) var(--kurve), background var(--zeit) var(--kurve);
}
.schwerpunkt[aria-pressed="true"] .haken {
  background: var(--leinen); box-shadow: none; color: var(--bogen);
}
.schwerpunkt .inhalt { display: block; flex: 1; min-width: 0 }
.schwerpunkt .titel { display: block; font-weight: 500 }
.schwerpunkt .unter { display: block; margin-top: 1px }

/* ---------------------------------------------------------------------
   Durchgang: Frage und Antwortmöglichkeiten
   --------------------------------------------------------------------- */

.frage {
  font-family: var(--auszeichnung);
  font-size: 23px; line-height: 1.34; letter-spacing: -.012em;
  font-weight: 500;
  max-width: var(--leseweite);
  margin: var(--m5) 0 var(--m8);
}

.antworten { display: flex; flex-direction: column; gap: var(--m2) }

.antwort {
  display: flex; align-items: flex-start; gap: var(--m3);
  width: 100%; padding: var(--m4);
  background: var(--bogen);
  border: 1px solid var(--falz);
  border-radius: var(--radius);
  text-align: left; line-height: 1.42;
  transition: border-color var(--zeit) var(--kurve), background var(--zeit) var(--kurve);
}
.antwort .kennung {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--falz);
  font-family: var(--ziffer); font-size: 12px; font-weight: 600;
  color: var(--satz);
}
.antwort[aria-pressed="true"] { border-color: var(--tinte) }
.antwort[aria-pressed="true"] .kennung {
  background: var(--tinte); color: var(--bogen); box-shadow: none;
}

.antwort.richtig { border-color: var(--leinen); background: var(--leinen-2) }
.antwort.richtig .kennung { background: var(--leinen); color: var(--bogen); box-shadow: none }
.antwort.falsch  { border-color: var(--oxblut); background: var(--oxblut-2) }
.antwort.falsch .kennung  { background: var(--oxblut); color: var(--bogen); box-shadow: none }

/* Erläuterung nach dem Beantworten, mit Belegstelle */
.erlaeuterung {
  margin-top: var(--m5); padding: var(--m4);
  background: var(--bogen); border-radius: var(--radius);
  border-left: 2px solid var(--leinen);
  max-width: var(--leseweite);
}
.beleg { margin-top: var(--m3); color: var(--satz-2) }

/* ---------------------------------------------------------------------
   Durchgang: Kopf und Fuß

   Der Durchgang hat keine Tab-Leiste. Wer übt, soll nicht nebenbei
   irgendwohin klicken können — hinaus geht es nur über das Kreuz.
   --------------------------------------------------------------------- */

.seite--durchgang {
  display: flex; flex-direction: column;
  min-height: 100dvh;
  padding-bottom: 0;
  background: var(--lage);
}

/* width:100% ist hier nicht überflüssig: .laufkopf und .laufuss tragen
   zugleich .blatt mit margin:0 auto. Ein Flex-Element mit automatischen
   Seitenrändern schrumpft auf seinen Inhalt statt sich zu dehnen — ohne
   width:100% steht die Leiste zusammengeschoben in der Mitte. */
.laufkopf {
  position: sticky; top: 0; z-index: 40;
  width: 100%;
  display: flex; align-items: center; gap: var(--m4);
  min-height: 52px;
  padding-top: max(var(--m2), env(safe-area-inset-top));
  padding-bottom: var(--m2);
  background: color-mix(in srgb, var(--lage) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.laufkopf-schliessen { flex: none; color: var(--satz); min-width: 30px }
.laufkopf-mitte { flex: 1; min-width: 0 }
.laufkopf-zaehler { flex: none }

/* Eigene Klasse, nicht „> .blatt": Kopf und Fuß tragen ebenfalls .blatt und
   bekämen den Abstand sonst mit. */
.laufinhalt {
  padding-top: var(--m5);
  padding-bottom: 96px;   /* Luft für den klebenden Fuß */
}

.laufuss {
  position: sticky; bottom: 0;
  width: 100%;
  margin-top: auto;
  padding-top: var(--m4);
  padding-bottom: max(var(--m4), env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--lage) 62%, transparent);
}

/* ---------------------------------------------------------------------
   Auswertung
   --------------------------------------------------------------------- */

.ergebnis { text-align: center; padding: var(--m10) 0 var(--m8) }
.ergebnis .quote {
  font-family: var(--auszeichnung);
  font-size: 76px; line-height: 1; font-weight: 600;
  letter-spacing: -.03em;
}
.ergebnis .quote .prozent { font-size: .42em; margin-left: .06em }
.ergebnis .von { margin-top: var(--m3) }

/* ---------------------------------------------------------------------
   Das Tor: Anmelden, Konto anlegen, Passwort
   --------------------------------------------------------------------- */

.body--tor { background: var(--bogen) }

.tor {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  justify-content: center;
  padding-top: var(--m12); padding-bottom: var(--m10);
  max-width: 24rem;
}
.tor-marke { color: var(--leinen); margin-bottom: var(--m6) }
.tor-titel {
  font-size: 40px; letter-spacing: -.025em;
  margin-bottom: var(--m2);
}
.tor-beisatz { max-width: 21rem; margin-bottom: var(--m10) }
.tor-form .knopf--tragend { margin-top: var(--m5) }

.tor-wechsel {
  display: flex; justify-content: space-between;
  margin-top: var(--m2);
}
.tor-fuss { margin-top: var(--m10) }

/* Auf dem Tor stehen die Felder auf Papier, nicht auf dem Grund —
   deshalb hier ein Feldhintergrund mit Kontrast. */
.body--tor .feld input { background: var(--lage); border-color: transparent }
.body--tor .feld input:focus { background: var(--bogen); border-color: var(--leinen) }

/* ---------------------------------------------------------------------
   Leere Zustände — eine Aufforderung, keine Stimmung
   --------------------------------------------------------------------- */

.leer {
  padding: var(--m12) var(--m6);
  text-align: center;
  background: var(--bogen);
  border-radius: var(--radius);
  box-shadow: var(--heb-1);
}
.leer h3 { margin-bottom: var(--m2) }
.leer p  { max-width: 26rem; margin: 0 auto var(--m6) }

/* ---------------------------------------------------------------------
   Hinweise
   --------------------------------------------------------------------- */

.hinweis {
  padding: var(--m3) var(--m4);
  border-radius: var(--radius-s);
  background: var(--lage);
  font-size: var(--gr-neben); line-height: var(--zl-neben);
}
.hinweis--fehler { background: var(--oxblut-2); color: var(--oxblut) }
.hinweis--merk   { background: var(--leinen-2); color: var(--leinen) }

/* ---------------------------------------------------------------------
   Dialog
   --------------------------------------------------------------------- */

dialog.blattdialog {
  width: min(30rem, calc(100vw - var(--m8)));
  padding: var(--m6);
  border: 0; border-radius: var(--radius);
  background: var(--bogen); color: var(--tinte);
  box-shadow: var(--heb-2);
}
dialog.blattdialog::backdrop { background: rgba(26,26,24,.4) }

/* ---------------------------------------------------------------------
   Kleinteiliges
   --------------------------------------------------------------------- */

/* Erläuternder Nachsatz unter einer Gruppe oder einem Knopf. */
.fussnote {
  margin-top: var(--m4);
  padding: 0 var(--m1);
  max-width: var(--leseweite);
}
.abstand-oben  { margin-top: var(--m6) }
.abstand-unten { margin-bottom: var(--m6) }

/* ---------------------------------------------------------------------
   Kurzmeldung
   --------------------------------------------------------------------- */

.meldung {
  position: fixed; z-index: 60;
  left: 50%; translate: -50% 0;
  bottom: calc(var(--tableiste) + var(--m4));
  max-width: calc(100vw - var(--m8));
  padding: var(--m3) var(--m5);
  border-radius: 999px;
  background: var(--tinte); color: var(--bogen);
  font-size: var(--gr-neben);
  box-shadow: var(--heb-2);
  opacity: 0; pointer-events: none;
  transition: opacity var(--zeit) var(--kurve);
}
.meldung.sichtbar { opacity: 1 }