/* ============================================================================
   Lernakte · Platzhalterseite
   ----------------------------------------------------------------------------
   Leitbild: eine gepflegte Akte. Ein Blatt (--blatt) liegt auf einer Ablage
   (--papier), der Deckel (--deckel) rahmt oben und unten.

   Zwei Stimmen, keine dritte:
     Serife    = Aussage  (was ein Mensch geschrieben hat)
     Monospace = Feld     (was in einer Registratur auf ein Formular gehoert)

   VERBOTEN und hier nirgends verwendet:
     - Deckkraft, Filter, Saettigung, Graustufen oder Transform als Rangskala
     - Rot/Gruen als Gut-Schlecht-Paar, Ampeln, Balken, Punktwerte
     - --siegel als Stufenfarbe: --siegel ist ein MATERIALTON (Ordnungszahl,
       Kartenoberkante, Registeretikett), nie eine Bewertung
     - --akzent fuer Ueberschriften: --akzent heisst ausschliesslich "Verweis"

   Alle Farbwerte tragen denselben warmen Farbtonkanal (H 33-41), damit kein
   Warm-Kalt-Bruch entsteht. Ausnahmen: --akzent (H 228) und --siegel (H 22-24).
   ========================================================================== */

/* ---------------------------------------------------------------- Tageslicht */

:root {
  color-scheme: light dark;

  --blatt:        #FCF9F3;
  --papier:       #F2EDE3;
  --register:     #EAE1D1;
  --deckel:       #DCD1BB;

  --tinte:        #221E17;
  --tinte-feld:   #4B4334;
  --tinte-luft:   #5F5646;

  --linie:        #DBD2C0;
  --linie-stark:  #6E6555;
  --marke-tinte:  #6E6555;

  --akzent:       #31417F;
  --akzent-fokus: #1E2B60;
  --siegel:       #7E4322;

  --schatten:     0 1px 1px rgba(34,30,23,.05), 0 10px 28px -18px rgba(34,30,23,.35);

  /* Zwei Stimmen. ui-serif/ui-sans-serif/ui-monospace loesen auf Windows 11
     nachweislich NICHT auf; ui-monospace bleibt fuer macOS an erster Stelle,
     Consolas vor Cascadia Mono (6 % schmaler, weniger Terminal-Charakter). */
  --schrift-akte: Georgia, "Palatino Linotype", "Times New Roman", serif;
  --schrift-feld: ui-monospace, "SF Mono", Consolas, "Cascadia Mono", Menlo, monospace;

  /* Acht Stufen. Gemessen gerendert: 12/14/15/17/20/22/28/44 px.
     Die beiden engsten Nachbarschaften (14->15 = 1,07 und 20->22 = 1,10)
     sind KEINE Groessenstufen: 14 ist Mono, 15 ist Serife; 20 ist 600er
     Serife, 22 ist 400er Serife. Sie trennen sich ueber Familie bzw.
     Schnitt, nicht ueber den Grad. Die uebrigen liegen bei 1,13 bis 1,57. */
  --grad-feld-klein: .75rem;      /* 12 px  Mono, Versalien */
  --grad-feld:       .875rem;     /* 14 px  Mono */
  --grad-klein:      .9375rem;    /* 15 px  Serife */
  --grad-text:       1.0625rem;   /* 17 px  Serife, Fliesstext */
  --grad-unter:      1.25rem;     /* 20 px  Serife 600, h3 */
  --grad-vorspann:   1.375rem;    /* 22 px  Serife 400, Anriss/Zitat */
  --grad-kapitel:    1.75rem;     /* 28 px  Serife 600, h2 */
  --grad-titel:      clamp(1.85rem, 1.15rem + 2.9vw, 2.75rem);  /* 29,6-44 px, h1 */

  /* Abstandshierarchie, bewusst NICHT flach:
     Abschnitt (72-104) >> Block (28) > Absatz (18). */
  --mass:   38rem;
  --raum:   clamp(1.35rem, 5vw, 2.75rem);
  --luft:   clamp(4.5rem, 9vw, 6.5rem);
  --block:  1.75rem;
  --absatz: 1.125rem;
  --rund:   3px;
}

/* -------------------------------------------------------------- Lampenlicht */
/* Kein Negativ des Hellmodus: --blatt liegt HELLER als --papier. Im
   Lampenlicht liegt das beleuchtete Blatt auf einem dunkleren Tisch. */

@media (prefers-color-scheme: dark) {
  :root {
    --papier:       #171511;
    --blatt:        #211D18;
    --register:     #2C271F;
    --deckel:       #39332A;

    --tinte:        #F2ECE0;
    --tinte-feld:   #C9C0AF;
    --tinte-luft:   #A79E8B;

    --linie:        #3A342B;
    --linie-stark:  #9A9180;
    --marke-tinte:  #9A9180;

    --akzent:       #A9B7EB;
    --akzent-fokus: #D2DAF7;
    --siegel:       #DE9A6E;

    --schatten:     0 1px 1px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.8);
  }
}

/* ------------------------------------------------------------------ Grundriss */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 var(--grad-text)/1.62 var(--schrift-akte);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.huelle {
  max-width: var(--mass);
  margin-inline: auto;
  padding-inline: var(--raum);
}

/* ------------------------------------------------------------------ Verweise */
/* --akzent bedeutet ausschliesslich "das ist ein Verweis". */

a {
  color: var(--akzent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--akzent-fokus);
  outline-offset: 3px;
  border-radius: 2px;
}

.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 40;
  font: 600 var(--grad-feld)/1 var(--schrift-feld);
  letter-spacing: .02em;
  background: var(--blatt);
  color: var(--tinte);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund);
  padding: .9rem 1.2rem;
  box-shadow: var(--schatten);
  text-decoration: none;
}
.sprung:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
}

/* ---------------------------------------------------------------- Kopfband */
/* --register statt --deckel: das Etikett ist 12-px-Mono, und auf --deckel
   erreicht --tinte-feld nur 6,45:1. Auf --register sind es 7,52:1 — damit
   haelt auch diese Zeile AAA. Regel: --deckel traegt keinen Text unter 15 px. */

.kopfband {
  background: var(--register);
  border-bottom: 1px solid var(--linie-stark);
}
.kopfband .huelle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  flex-wrap: wrap;
  padding-block: 1.05rem;
}

.marke {
  margin: 0;
  font-family: var(--schrift-akte);
  font-size: var(--grad-unter);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
}
.marke a { color: inherit; text-decoration: none; }
.marke a:hover { text-decoration: underline; text-decoration-thickness: 1px; }

/* Registeretikett: Materialton, keine Wertung. --deckel traegt keinen
   Kleintext unter 15 px als Fliesstext; dies ist eine Einzelzeile mit
   4,5:1-Deckung (gemessen 6,45:1 fuer --tinte-feld auf --deckel). */
.etikett {
  margin: 0;
  font: 400 var(--grad-feld-klein)/1.45 var(--schrift-feld);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinte-feld);
}

/* ------------------------------------------------------------------ Bildband */

.bildband {
  margin: 0;
  background: var(--deckel);
  border-bottom: 1px solid var(--linie-stark);
}
.bildband img {
  display: block;
  width: 100%;
  height: clamp(130px, 25vw, 290px);
  object-fit: cover;
  object-position: 50% 62%;
}
.bildband figcaption {
  max-width: var(--mass);
  margin-inline: auto;
  padding: .85rem var(--raum) .95rem;
  font-family: var(--schrift-akte);
  font-size: var(--grad-klein);
  line-height: 1.6;
  color: var(--tinte-feld);
}

/* --------------------------------------------------------------- Das Blatt --- */
/* Der gesamte Inhalt liegt als Blatt auf der Ablage. */

.blatt {
  background: var(--blatt);
  border-inline: 1px solid var(--linie);
  max-width: calc(var(--mass) + 2 * var(--raum));
  margin-inline: auto;
  padding-bottom: var(--luft);
  box-shadow: var(--schatten);
}
@media (max-width: 46rem) {
  .blatt { border-inline: 0; box-shadow: none; max-width: none; }
}

/* ----------------------------------------------------------------- Aufmacher */

.aufmacher { padding-block: clamp(2.5rem, 6vw, 5rem) 0; }

h1 {
  margin: 0 0 1.4rem;
  font-family: var(--schrift-akte);
  font-size: var(--grad-titel);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.018em;
}
/* Drei Saetze, drei Zeilen — als Bloecke, nicht mit <br>, damit die
   Sprachausgabe drei Saetze liest und text-wrap: balance greift. */
h1 .zeile { display: block; text-wrap: balance; }
h1 .zeile-leise { color: var(--tinte-luft); }

.anriss {
  margin: 0;
  font-family: var(--schrift-akte);
  font-size: var(--grad-vorspann);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.005em;
  color: var(--tinte-luft);
}

/* ----------------------------------------------------------------- Abschnitt */
/* Die Abschnittsgrenze ist die groesste Luecke der Seite — nicht die
   kleinste. Registerreiter oben, Haarlinie darunter. */

section { padding-block: var(--luft) 0; }

.reiter {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 1.15rem;
  border-bottom: 1px solid var(--linie);
  padding-bottom: .8rem;
}
.reiter-zahl {
  flex: none;
  display: inline-block;
  background: var(--register);
  border: 1px solid var(--linie);
  border-radius: var(--rund) var(--rund) 0 0;
  padding: .2rem .55rem;
  font: 400 var(--grad-feld-klein)/1.45 var(--schrift-feld);
  letter-spacing: .09em;
  color: var(--siegel);
  font-variant-numeric: tabular-nums;
}
.reiter-wort {
  font: 400 var(--grad-feld-klein)/1.45 var(--schrift-feld);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinte-feld);
}

h2 {
  margin: 0 0 .9rem;
  font-family: var(--schrift-akte);
  font-size: var(--grad-kapitel);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--tinte);
  text-wrap: balance;
}

h3 {
  margin: var(--block) 0 .5rem;
  font-family: var(--schrift-akte);
  font-size: var(--grad-unter);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.005em;
}

p { margin: 0 0 var(--absatz); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }

/* Ausgehobener erster Satz eines Abschnitts. */
.schlag {
  margin: 0 0 var(--absatz);
  font-size: var(--grad-vorspann);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.005em;
  color: var(--tinte);
  text-wrap: balance;
}

/* ------------------------------------------------------------ Fragen (Liste) */
/* Ordnungszahlen im Materialton. Alle Zeilen gleich gross, gleich schwer,
   gleiche Farbe — eine Reihenfolge, keine Rangfolge. */

.fragen {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: f;
  border-top: 1px solid var(--linie);
}
.fragen li {
  counter-increment: f;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--linie);
}
.fragen li::before {
  content: counter(f, decimal-leading-zero);
  font: 400 var(--grad-feld)/1.55 var(--schrift-feld);
  letter-spacing: .02em;
  color: var(--siegel);
  font-variant-numeric: tabular-nums;
  padding-top: .12rem;
}

/* -------------------------------------------------------------- Klassenkarten */
/* Alle vier Karten identisch behandelt. Die Stellungnahme des Anbieters
   bekommt bewusst dasselbe Gewicht wie die drei Verfasserklassen —
   Gleichrangigkeit ist hier eine Gestaltungsaussage. */

.klassen {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: var(--block) 0 0;
  padding: 0;
}
.klassen > div {
  background: var(--register);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--siegel);
  border-radius: 0 0 var(--rund) var(--rund);
  padding: 1.05rem 1.15rem 1.15rem;
}
.klassen dt {
  margin: 0 0 .35rem;
  font: 400 var(--grad-feld)/1.55 var(--schrift-feld);
  letter-spacing: .02em;
  color: var(--tinte-feld);
}
.klassen dd {
  margin: 0;
  font-size: var(--grad-klein);
  line-height: 1.6;
  color: var(--tinte);
}

.nachsatz {
  margin: 1rem 0 0;
  font-size: var(--grad-klein);
  line-height: 1.6;
  color: var(--tinte-luft);
}

/* -------------------------------------------------------------------- Kasten */
/* Traegt --deckel und deshalb keinen Text unter 15 px. */

.kasten {
  margin: var(--block) 0 0;
  background: var(--deckel);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund);
  padding: 1.3rem 1.4rem;
}
.kasten p { margin: 0; }
.kasten .schlag { margin: 0 0 .7rem; }

/* --------------------------------------------------------------- Standliste */

.stand {
  list-style: none;
  margin: var(--block) 0 0;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  overflow: hidden;
}
.stand li {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: .2rem 1.25rem;
  padding: 1rem 1.15rem;
  background: var(--blatt);
  border-bottom: 1px solid var(--linie);
  align-items: start;
}
.stand li:nth-child(odd) { background: var(--register); }
.stand li:last-child { border-bottom: 0; }
.stand b {
  font: 400 var(--grad-feld-klein)/1.45 var(--schrift-feld);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinte-feld);
  padding-top: .28rem;
}
.stand span { font-size: var(--grad-klein); line-height: 1.6; }
@media (max-width: 34rem) {
  .stand li { grid-template-columns: 1fr; gap: .3rem; }
  .stand b { padding-top: 0; }
}

/* -------------------------------------------------------------- Kontaktkarte */

.kontakt {
  margin: var(--block) 0 0;
  background: var(--register);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--siegel);
  border-radius: 0 0 var(--rund) var(--rund);
  padding: 1.3rem 1.4rem 1.4rem;
}
.kontakt p { margin: 0 0 .5rem; font-size: var(--grad-klein); color: var(--tinte); }
.kontakt .anschrift {
  margin: 0;
  font: 400 var(--grad-unter)/1.4 var(--schrift-akte);
}

/* -------------------------------------------------------------------- Fuss */

footer {
  background: var(--deckel);
  border-top: 1px solid var(--linie-stark);
  padding-block: 1.6rem 2.25rem;
}
footer nav {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
  font-family: var(--schrift-feld);
  font-size: var(--grad-feld);
  letter-spacing: .02em;
}
footer p {
  margin: 0;
  max-width: 34rem;
  font-size: var(--grad-klein);
  line-height: 1.6;
  color: var(--tinte-feld);
}

/* -------------------------------------------------------------- Rechtstexte */
/* Impressum und Datenschutz: gleiche Stimme, ruhigerer Takt. Der Inhalt
   dieser beiden Seiten ist unveraendert. */

.rechtstext { padding-block: var(--luft) 0; }
.rechtstext h1 { margin-bottom: 1.1rem; }
.rechtstext h2 {
  margin-top: 2.75rem;
  font-size: var(--grad-unter);
  padding-top: .9rem;
  border-top: 1px solid var(--linie);
}
.rechtstext h1 + h2 { margin-top: 2rem; }
.rechtstext .anriss { margin-bottom: .5rem; }
.rechtstext small {
  display: inline-block;
  margin-top: 1rem;
  font: 400 var(--grad-feld)/1.55 var(--schrift-feld);
  letter-spacing: .02em;
  color: var(--tinte-feld);
}