/* ══ Kalamo — die Unterseiten ══════════════════════════════════════
   Dieselbe Anlage wie kalamo.css, nur ohne Film.

   Die Startseite ist ein ganzer Schultag. Eine Unterseite ist keiner
   — sie ist EINE Stunde daraus. Jede steht deshalb auf genau einem
   Lichtstand, fest und ohne Skript:

     09:05  Erste Stunde      An der Schule
     11:00  Tageslicht        Impressum · Nutzungsbedingungen
     13:40  Nachmittag        Kontakt
     16:30  Nach der Schule   Datenschutz
     20:10  Lampenlicht       Seite nicht gefunden

   Alles andere ist identisch: dieselben Marken, dieselbe Schrift,
   dieselbe Kopf- und Fußzeile, derselbe Falz durch die Mitte.

   Diese Datei lädt NACH kalamo.css und setzt sie voraus.
   ═════════════════════════════════════════════════════════════════ */

/* ── 1. Die Lichtstände als feste Stände ───────────────────────────
   Dieselben Zahlen wie die Tabelle STOPS in kalamo.js. Ohne
   Klasse steht die Seite auf „Tageslicht" — dem Ausgangswert aus
   kalamo.css und zugleich der Markenpalette.
   ───────────────────────────────────────────────────────────────── */
html.stand-erste-stunde{           /* 09:05 */
  --ground:#CDC5B7; --ground-rgb:205,197,183; --paper:#F5F1E9;
  --ink:#37312A; --ink-soft:#52493C;
  --hair:rgba(56,50,43,.17); --hair-strong:rgba(56,50,43,.32);
  --accent:#A5793E; --accent-ink:#855F28;
  --sun:#F0DDBA; --sun-x:30%; --sun-y:26%; --sun-spread:74vmax; --sun-a:.50;
  --tint:.10; --grade:1; --veil-open:.30; --veil-photo:.20; --veil-leaf:.08;
}
html.stand-nachmittag{             /* 13:40 */
  --ground:#E3DCCF; --ground-rgb:227,220,207; --paper:#F8F4EC;
  --ink:#382F26; --ink-soft:#625546;
  --hair:rgba(56,50,43,.16); --hair-strong:rgba(56,50,43,.31);
  --accent:#B0793F; --accent-ink:#885622;
  --sun:#FFF0D4; --sun-x:68%; --sun-y:12%; --sun-spread:76vmax; --sun-a:.50;
  --tint:.07; --grade:1.04; --veil-open:.20; --veil-photo:.14; --veil-leaf:.05;
}
html.stand-nach-der-schule{        /* 16:30 */
  --ground:#D6CBB8; --ground-rgb:214,203,184; --paper:#F4EDE0;
  --ink:#372E24; --ink-soft:#5E5040;
  --hair:rgba(56,46,36,.18); --hair-strong:rgba(56,46,36,.34);
  --accent:#A66434; --accent-ink:#80481C;
  --sun:#F5CE92; --sun-x:84%; --sun-y:40%; --sun-spread:64vmax; --sun-a:.48;
  --tint:.12; --grade:1.06; --veil-open:.28; --veil-photo:.18; --veil-leaf:.07;
}
html.stand-lampenlicht{            /* 20:10 */
  --ground:#100E0B; --ground-rgb:16,14,11; --paper:#1D1913;
  --ink:#E8DCC6; --ink-soft:#A2937B;
  --hair:rgba(224,168,92,.20); --hair-strong:rgba(224,168,92,.36);
  --accent:#E0A85C; --accent-ink:#E9B871;
  --sun:#E0A85C; --sun-x:86%; --sun-y:88%; --sun-spread:46vmax; --sun-a:.32;
  --tint:.30; --grade:.92; --veil-open:.66; --veil-photo:.46; --veil-leaf:.26;
}

/* ── 2. Kopfzeile ─────────────────────────────────────────────────
   Auf der Startseite kommt der Knopf erst, wenn die Eröffnung vorbei
   ist — dafür braucht es das Skript. Hier steht er von Anfang an.
   ───────────────────────────────────────────────────────────────── */
/* Auf der Startseite liegt die Kopfzeile über einem dunklen Foto —
   dort darf ihr Schleier weich sein. Hier läuft Fließtext darunter
   hindurch, und der Schleier muss die Zeile selbst tragen. */
.masthead::before{background:linear-gradient(180deg,var(--ground) 52%,transparent 100%)}

.btn-sm{padding:10px 18px;font-size:12px}
.masthead .btn-sm{margin-left:auto}
.masthead nav + .btn-sm{margin-left:0}
@media(max-width:460px){.masthead .btn-sm{margin-left:auto}}
@media(max-width:400px){.masthead .btn-sm{padding:9px 14px;font-size:11px}}
.masthead nav a[aria-current="page"]{opacity:1}
.masthead nav a[aria-current="page"]::after{
  content:"";display:block;height:1px;margin-top:5px;
  background:var(--accent);
}

/* ── 3. Das Blatt ─────────────────────────────────────────────────
   Eine Unterseite ist ein einzelnes Blatt, kein Buch: ein Kopf, ein
   Satz Abschnitte, ein Abbinder. Der Falz aus der Lichtanlage läuft
   genau durch die Rinne zwischen Marginalie und Text — deshalb ist
   das Raster 1fr 1fr und nicht schmal/breit.
   ───────────────────────────────────────────────────────────────── */
.blatt{
  position:relative;z-index:1;
  padding:calc(var(--s-7) + 34px) var(--bleed) var(--s-6);
}
.blatt-in{width:min(100%,1180px);margin-inline:auto}

.blatt-kopf{max-width:none}
.blatt-kopf .d2{max-width:16ch}
.blatt-kopf .lead{margin-top:var(--s-3)}
.blatt-kopf .prose{margin-top:var(--s-3)}

/* Der Stand des Lichts, in dem diese Seite steht. Dieselbe Marke wie
   die Uhrzeit eines Taktes auf der Startseite. */
/* Die Schiefertafel bricht als Ganzes um, nicht mitten im Namen des
   Lichtstands. */
.blatt-kopf .slug,.verirrt .slug{flex-wrap:wrap;row-gap:6px;margin-bottom:var(--s-3)}
.slug .hh,.slug .hh + span{white-space:nowrap}

/* ── 4. Die Akte ──────────────────────────────────────────────────
   Links der Abschnitt, rechts der Text. Auf breiten Fenstern bleibt
   die Überschrift stehen, solange ihr Abschnitt gelesen wird — die
   Marginalie eines Buches, nicht eine klebende Leiste.
   ───────────────────────────────────────────────────────────────── */
.akte{
  margin:var(--s-6) 0 0;
  border-top:1px solid var(--hair-strong);
}
.akte-teil{
  display:grid;
  /* minmax(0,…) statt 1fr: Sonst hält eine lange Adresse in der
     Spalte die Spalte auf ihrer Mindestbreite und die Seite läuft
     auf dem Handy über. */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--g-3);
  padding:var(--s-4) 0;
  border-bottom:1px solid var(--hair);
}
.akte-teil > h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(21px,1.9vw,28px);
  line-height:1.18;letter-spacing:-.008em;
  color:var(--ink);
  max-width:17ch;
  text-wrap:balance;
  align-self:start;
  position:sticky;top:calc(var(--s-4) + 62px);
}
.akte-text{color:var(--ink-soft);max-width:56ch;overflow-wrap:break-word}
/* Was im Seitenkopf steht, endet am Falz — genau dort, wo darunter
   die Marginalspalte endet. */
.blatt-text{max-width:calc(50% - var(--g-3) / 2)}
.blatt-kopf .merk{max-width:calc(50% - var(--g-3) / 2)}
/* Die Karten stehen als Paar über den Falz: Er läuft durch die Rinne. */
.blatt-kopf .karten{max-width:none;gap:var(--g-3)}
.akte-text > :first-child{margin-top:0}
.akte-text p{margin:20px 0 0;text-wrap:pretty}
.akte-text strong{color:var(--ink);font-weight:500}
.akte-text h3{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(19px,1.4vw,22px);
  line-height:1.3;color:var(--ink);
  margin:var(--s-3) 0 0;
}
/* Verweise tragen die volle Tinte und werden vom Akzent unterstrichen.
   Der Akzent selbst wäre als Schriftfarbe im Fließtext zu schwach —
   3,5:1 statt der nötigen 4,5:1. */
.akte-text a,.blatt-kopf a,.merk a{
  color:var(--ink);
  overflow-wrap:anywhere;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:var(--accent);
  text-underline-offset:.16em;
  transition:text-decoration-color var(--t-hover) var(--e-cut);
}
.akte-text a:hover,.blatt-kopf a:hover,.merk a:hover{text-decoration-color:var(--ink)}

@media(max-width:900px){
  /* Auf schmalen Spalten trennt Deutsch selbst — sonst reißen die
     Komposita die Zeile auf. */
  .akte-text,.merk,.karte p{hyphens:auto}
  .akte-teil{grid-template-columns:minmax(0,1fr);gap:var(--s-2);padding:var(--s-3) 0}
  .akte-teil > h2{position:static;max-width:24ch}
  .akte-text{max-width:none}
  .blatt-text,.blatt-kopf .merk{max-width:none}
  .blatt-kopf .karten{gap:var(--s-2)}
}

/* ── 5. Listen ────────────────────────────────────────────────────
   Der Gedankenstrich ist das Aufzählungszeichen der Seite — dieselbe
   Marke wie im Register der Startseite. Zahlen sind Mediävalziffern
   im Akzent.
   ───────────────────────────────────────────────────────────────── */
.akte-text ul,.akte-text ol{margin:20px 0 0;padding:0;list-style:none}
.akte-text li{position:relative;padding-left:30px;margin:12px 0 0}
.akte-text ul li::before{
  content:"—";position:absolute;left:0;top:0;
  color:var(--accent);
}
.akte-text ol{counter-reset:satz}
.akte-text ol li{counter-increment:satz;padding-left:38px}
.akte-text ol li::before{
  content:counter(satz);position:absolute;left:0;top:0;
  font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.06em;
  color:var(--accent-ink);
  line-height:2.2;
}

/* ── 6. Der Satz ──────────────────────────────────────────────────
   Begriff und Erklärung, zeilenweise. Der Begriff steht in der
   Versalzeile — dieselbe Technikschrift wie Uhrzeit und Bildlegende.
   ───────────────────────────────────────────────────────────────── */
.satz{margin:22px 0 0;border-top:1px solid var(--hair)}
.satz dt{
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.20em;text-transform:uppercase;
  color:var(--ink-soft);
  padding-top:14px;
}
.satz dd{
  margin:4px 0 0;padding-bottom:14px;
  overflow-wrap:anywhere;
  border-bottom:1px solid var(--hair);
  color:var(--ink);
}

/* ── 7. Der Merksatz ──────────────────────────────────────────────
   Was auf der Startseite ein Registerblatt ist, ist hier die
   eingelegte Notiz: heller als der Grund, mit einer Kante aus Licht.
   ───────────────────────────────────────────────────────────────── */
.merk{
  margin:24px 0 0;
  background:var(--paper);
  border:1px solid var(--hair);
  border-top:2px solid var(--accent);
  padding:var(--s-3) var(--s-4);
  color:var(--ink-soft);
}
.merk > :first-child{margin-top:0}
.merk p{margin:16px 0 0;text-wrap:pretty}
.merk strong{color:var(--ink);font-weight:500}

/* Die einzige Handschrift der Unterseite — genau wie auf der
   Startseite kommt sie einmal vor und nie zweimal. */
.handnote{
  font-family:var(--hand);
  font-size:clamp(25px,2.6vw,34px);
  line-height:1.3;color:var(--ink);
  margin:var(--s-3) 0 0;
}

/* ── 8. Zwei Karten ───────────────────────────────────────────────
   Für die Kontaktseite: dasselbe Blatt wie die Preisangebote der
   Startseite, nur ohne Preis.
   ───────────────────────────────────────────────────────────────── */
.karten{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s-2);margin:24px 0 0;
}
@media(max-width:640px){.karten{grid-template-columns:minmax(0,1fr)}}
.karte{
  border:1px solid var(--hair-strong);
  padding:var(--s-3);
  display:flex;flex-direction:column;
}
.karte .k{
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.20em;text-transform:uppercase;
  color:var(--ink-soft);
}
.karte .v{
  font-size:clamp(19px,1.5vw,23px);
  margin:8px 0 0;color:var(--ink);
}
.karte p{margin:14px 0 0;font-size:17px;color:var(--ink-soft)}

/* ── 9. Die fehlende Seite ────────────────────────────────────────
   20:10, Lampenlicht. Die Zahl steht als Wasserzeichen hinter der
   Schrift — ein Blatt, das im Buch fehlt.
   ───────────────────────────────────────────────────────────────── */
.verirrt{
  position:relative;z-index:1;overflow:hidden;
  min-height:calc(100svh - 160px);
  display:flex;align-items:center;
  padding:calc(var(--s-7) + 34px) var(--bleed) var(--s-6);
}
.verirrt-in{position:relative;width:min(100%,1180px);margin-inline:auto}
.verirrt .zahl{
  position:absolute;right:0;top:50%;
  transform:translateY(-50%);
  font-size:clamp(160px,26vw,380px);
  line-height:.8;letter-spacing:-.03em;
  color:var(--ink);opacity:.07;
  pointer-events:none;user-select:none;
}
.verirrt .d2{position:relative;max-width:14ch}
.verirrt .lead{position:relative}
.verirrt .actions{position:relative}
@media(max-width:760px){
  .verirrt .zahl{right:auto;left:0;top:auto;bottom:0;transform:none;opacity:.05}
}

/* ── 10. Aufschlag ────────────────────────────────────────────────
   Eine Unterseite lädt ohne Skript. Der Auftritt ist deshalb reines
   CSS — und er beginnt nicht bei Deckkraft 0, sondern läuft von
   dort los: Fällt die Animation aus, steht der Inhalt trotzdem da.
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  .blatt-kopf,.akte-teil,.verirrt-in{
    animation:aufschlag var(--t-settle) var(--e-fall) backwards;
  }
  .akte-teil:nth-child(1){animation-delay:60ms}
  .akte-teil:nth-child(2){animation-delay:120ms}
  .akte-teil:nth-child(n+3){animation-delay:180ms}
}
@keyframes aufschlag{
  from{opacity:0;transform:translate3d(0,var(--d-near),0)}
  to{opacity:1;transform:none}
}

/* ── 11. Druck ────────────────────────────────────────────────────
   Rechtstexte werden ausgedruckt und in Ordner geheftet. Dann fällt
   die Lichtanlage weg und das Raster wird zur Spalte.
   ───────────────────────────────────────────────────────────────── */
@media print{
  .rig,.masthead,.skip{display:none}
  html{background:#fff}
  body{color:#000;font-size:11pt}
  .blatt{padding:0}
  .akte-teil{grid-template-columns:1fr;gap:6pt;break-inside:avoid}
  .akte-teil > h2{position:static}
  .akte-text,.merk,.karte p{color:#000}
  .merk{background:none;border:1pt solid #999}
  a{text-decoration:underline}
  .akte-text a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .akte-text a[href^="/"]::after,.akte-text a[href^="#"]::after{content:""}
}

/* ── 12. Hoher Kontrast ───────────────────────────────────────── */
@media (forced-colors: active){
  .rig{display:none}
  .merk,.karte{border:1px solid CanvasText}
  .akte-teil > h2{position:static}
}