/* Lea & Jonas — die Leseansicht.

   Die Farben stammen aus wuwgeschichte.cls, dem Satzsystem des Buchs. Damit
   sehen Druck und Seite wie dasselbe Werk aus, und wer eine Farbe aendern
   will, aendert sie an der Quelle und nicht zweimal. */

/* Die Schriften liegen unter schrift/ und kommen von diesem Rechner. Vorher
   holte sie jeder Besucher bei Google, was dessen Adresse dorthin trug.

   Es sind variable Schriften: ein Bereich statt dreier Schnitte, eine Datei
   fuer 400, 500 und 600. Literatas optische Achse steckt in der Datei und
   wird vom Browser nach der Schriftgroesse gestellt.

   Die unicode-range sind von Google uebernommen und kein Zierat: ohne sie
   laedt der Browser auch latin-ext, wo keines seiner Zeichen vorkommt. */

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(schrift/literata-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(schrift/literata-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(schrift/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(schrift/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --vwl: #2B5FA5;  --vwl-hell: #D9E6F5;  --vwl-dunkel: #1E4A85;
  --bwl: #B83280;  --bwl-hell: #FBE4F0;  --bwl-dunkel: #8B1F5A;
  --recht: #3D7C35; --recht-hell: #D6EDCF; --recht-dunkel: #2A5A24;
  --hist: #7A6000; --hist-hell: #FEF9D9;
  /* Modul Privatrecht, aus wuwsv.sty. Paedagogisches Orange traegt dort
     Lernziel, Aufgabe und Einstiegsszene; das Graublau den Laenderblick. */
  --ped: #E07624;  --ped-hell: #FBE8D4;  --ped-dunkel: #C0611A;
  --laender: #4A5568; --laender-hell: #EDF0F4;
  --creme: #FDF3DC;
  --grau: #6B7280; --grau-hell: #E8EAED;
  --ink: #1A1A1A;  --ink-weich: #4B5563;
  --papier: #FCFCFB;
  --linie: #E3E3E0;
  --kopfhoehe: 5.6rem;

  --ton: var(--vwl); --ton-hell: var(--vwl-hell); --ton-dunkel: var(--vwl-dunkel);
  --lese: "Literata", Georgia, "Times New Roman", serif;
  --ui: "Archivo", "Segoe UI", system-ui, sans-serif;
}

.d-vwl   { --ton: var(--vwl);   --ton-hell: var(--vwl-hell);   --ton-dunkel: var(--vwl-dunkel); }
.d-bwl   { --ton: var(--bwl);   --ton-hell: var(--bwl-hell);   --ton-dunkel: var(--bwl-dunkel); }
.d-recht { --ton: var(--recht); --ton-hell: var(--recht-hell); --ton-dunkel: var(--recht-dunkel); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--papier); color: var(--ink);
  font-family: var(--lese); font-size: 1.0625rem; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body:not(.ueberbild) { padding-top: var(--kopfhoehe); }

.skip { position: absolute; left: -9999px; background: var(--ink); color: #fff;
  padding: .6rem 1rem; z-index: 60; }
.skip:focus { left: 1rem; top: 1rem; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

/* ------------------------------------------------------------------- Kopf */

.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(252,252,251,.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--linie);
  transition: background .25s, border-color .25s, color .25s;
}
/* Ueber einem dunklen Bild: halbtransparent und weiss, bis gescrollt wird.
   Nicht ganz durchsichtig — ueber einem Foto braucht weisse Schrift einen
   Traeger, sonst wird sie an hellen Stellen des Bildes unlesbar. Ein Hauch
   Dunkel plus Weichzeichner reicht und bleibt luftig. */
/* Fast durchsichtig. Ein sichtbarer Balken schneidet das Bild optisch ab —
   bei Nora lag ihr Haar direkt an der Kante. Statt eines Traegers bekommt die
   Schrift einen weichen Schatten; der haelt sie auch ueber hellen Stellen
   lesbar, ohne das Bild zu zerteilen. */
.ueberbild .kopf { background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent; color: #fff;
  text-shadow: 0 1px 10px rgba(8,11,16,.85), 0 1px 3px rgba(8,11,16,.7); }
.ueberbild .kopf.fest { text-shadow: none; }
.ueberbild .kopf:not(.fest) .anmelden { border-color: rgba(255,255,255,.55);
  box-shadow: 0 1px 10px rgba(8,11,16,.45); }
.ueberbild .kopf.fest { background: rgba(252,252,251,.94); color: var(--ink);
  border-bottom-color: var(--linie); }

.kopf-dienst, .kopf-haupt {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0 clamp(1rem, 4vw, 3rem);
  max-width: 84rem; margin: 0 auto;
}
.kopf-dienst { height: 2.1rem; font-family: var(--ui); font-size: .78rem;
  border-bottom: 1px solid var(--linie); }
.ueberbild .kopf:not(.fest) .kopf-dienst { border-bottom-color: rgba(255,255,255,.18); }
.kopf-dienst nav { display: flex; gap: 1.25rem; }
.kopf-dienst a { text-decoration: none; opacity: .75; }
.kopf-dienst a:hover { opacity: 1; }
.werkzeuge { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.lupe, .anmelden {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--ui); font-size: .78rem; font-weight: 500;
  background: none; border: 0; color: inherit; cursor: pointer;
  padding: .3rem .6rem; border-radius: 3px; text-decoration: none;
}
.lupe:hover, .anmelden:hover { background: rgba(0,0,0,.06); }
.ueberbild .kopf:not(.fest) .lupe:hover,
.ueberbild .kopf:not(.fest) .anmelden:hover { background: rgba(255,255,255,.16); }
.anmelden { border: 1px solid currentColor; opacity: .85; }
.anmelden:hover { opacity: 1; }

.kopf-haupt { height: 3.5rem; }
.marke { text-decoration: none; display: flex; flex-direction: column; gap: .05rem; }
.marke-name { font-family: var(--ui); font-weight: 600; font-size: 1.06rem; letter-spacing: -.01em; }
.marke-unter { font-family: var(--ui); font-size: .72rem; opacity: .65; letter-spacing: .02em; }
.haupt-nav { margin-left: auto; display: flex; gap: 1.75rem;
  font-family: var(--ui); font-size: .89rem; font-weight: 500; }
.haupt-nav a { text-decoration: none; padding: .2rem 0; border-bottom: 2px solid transparent; }
.haupt-nav a:hover { border-bottom-color: currentColor; }

/* Auf dem Telefon bricht die Hauptnavigation in eine eigene Zeile.
   Anlass gemessen: mit vier Eintraegen — seit «Modul Privatrecht» dazukam —
   endet die Leiste bei 375 Pixel Breite erst bei 414. «Für Lehrpersonen»
   stand also ausserhalb des Bildschirms, ohne dass irgendetwas gescrollt
   haette. Die Zeile rollt jetzt seitwaerts, statt abgeschnitten zu werden. */
@media (max-width: 46rem) {
  .kopf-dienst nav { display: none; }
  .kopf-haupt { height: 5rem; flex-wrap: wrap; align-content: center; gap: 0 1rem; }
  .haupt-nav { margin-left: 0; width: 100%; gap: 1.15rem; font-size: .82rem;
    overflow-x: auto; scrollbar-width: none; padding-bottom: .1rem; }
  .haupt-nav::-webkit-scrollbar { display: none; }
  .haupt-nav a { white-space: nowrap; }
  .marke-unter { display: none; }
  .anmelden span, .lupe span { display: none; }
  :root { --kopfhoehe: 7.1rem; }
}

/* ------------------------------------------------------------------ Suche */

.suchfeld { position: fixed; top: var(--kopfhoehe); left: 0; right: 0; z-index: 49;
  background: var(--papier); border-bottom: 1px solid var(--linie);
  box-shadow: 0 12px 28px rgba(0,0,0,.07); max-height: 78vh; overflow-y: auto; }
.suchfeld-innen { display: flex; gap: .5rem; max-width: 52rem; margin: 0 auto;
  padding: 1rem clamp(1rem, 4vw, 3rem) .6rem; }
#suchwort { flex: 1; font-family: var(--ui); font-size: 1.05rem; padding: .7rem .9rem;
  border: 1px solid var(--linie); border-radius: 3px; background: #fff; color: var(--ink); }
#suchwort:focus { outline: 2px solid var(--vwl); outline-offset: 0; border-color: var(--vwl); }
.zu { background: none; border: 0; font-size: 1.7rem; line-height: 1; cursor: pointer;
  color: var(--ink-weich); padding: 0 .5rem; }
.treffer { max-width: 52rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem) 1.5rem; }
.treffer .zahl { font-family: var(--ui); font-size: .8rem; color: var(--ink-weich);
  padding: .4rem 0 .6rem; }
.treffer a { display: block; padding: .7rem 0; border-top: 1px solid var(--linie);
  text-decoration: none; }
.treffer a:hover { background: var(--vwl-hell); }
.treffer .wo { font-family: var(--ui); font-size: .76rem; color: var(--vwl); font-weight: 600; }
.treffer .satz { font-size: .95rem; color: var(--ink-weich); line-height: 1.5; }
.treffer mark { background: #FDF0A8; color: inherit; padding: 0 .1em; }

/* -------------------------------------------------------------- Grundmasse */

main { padding: 0 clamp(1rem, 4vw, 3rem); }
.seitenkopf, .teile, .kapitel, .staffel, .miniaturliste, .fliess,
.zweispalt, .hinweis, .dateien, .haltung-innen { max-width: 46rem; margin: 0 auto; }
.start main { padding: 0; }
.start .teile, .start .haltung-innen { padding-left: clamp(1rem, 4vw, 3rem);
  padding-right: clamp(1rem, 4vw, 3rem); }

.eyebrow { font-family: var(--ui); font-size: .76rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ton); margin: 0 0 .6rem; }
h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); line-height: 1.15; letter-spacing: -.015em;
  margin: 0 0 1rem; font-weight: 600; text-wrap: balance; }
.lead { font-size: 1.15rem; color: var(--ink-weich); line-height: 1.6; margin: 0 0 1.5rem; }
.seitenkopf { padding: clamp(2.5rem, 7vw, 4.5rem) 0 2rem; }

/* --------------------------------------------------------------- Aufschlag */

.aufschlag { position: relative; background: #0E1218; }
.folien { list-style: none; margin: 0; padding: 0; position: relative;
  min-height: max(min(88vh, 48rem), 32rem); }
.folie { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease;
  pointer-events: none; }
.folie.an { opacity: 1; pointer-events: auto; position: relative; }
.folie-bild { width: 100%; height: max(min(88vh, 48rem), 32rem); object-fit: cover;
  object-position: 50% 0%; display: block; }
/* Zwei Verlaeufe: einer von unten fuer den Text, einer schwach von oben fuer
   den Kopf. Ohne den oberen steht die Navigation ueber hellem Himmel. */
.folie::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(10,13,18,.92) 0%, rgba(10,13,18,.72) 26%,
                    rgba(10,13,18,.20) 58%, rgba(10,13,18,.05) 80%),
    linear-gradient(to bottom, rgba(10,13,18,.45) 0%, rgba(10,13,18,0) 22%); }
.folie-text { position: absolute; z-index: 2; inset: var(--kopfhoehe) 0 0 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 clamp(1rem, 4vw, 3rem) clamp(2.75rem, 7vw, 5.5rem);
  max-width: 46rem; color: #fff; }
.folie-text > * { flex: none; }
.folie-text .eyebrow { color: #fff; opacity: .82; }
.folie-text h1 { color: #fff; font-size: clamp(2.2rem, 6vw, 3.6rem); margin-bottom: .8rem; }
.folie-text .lead { color: rgba(255,255,255,.9); max-width: 34rem; }
@media (prefers-reduced-motion: reduce) { .folie { transition: none; } }

.knopf { display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ui); font-weight: 600; font-size: .95rem;
  border: 1px solid currentColor; padding: .75rem 1.35rem; border-radius: 2px;
  text-decoration: none; transition: background .2s, color .2s; }
.folie-text .knopf { color: #fff; }
.folie-text .knopf:hover { background: #fff; color: var(--ink); }

.folien-steuer { position: absolute; z-index: 3; bottom: clamp(1.2rem, 3vw, 2rem);
  left: clamp(1rem, 4vw, 3rem); display: flex; align-items: center; gap: .9rem; }
.pfeil { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35);
  color: #fff; width: 2.1rem; height: 2.1rem; border-radius: 50%; cursor: pointer;
  font-size: 1.1rem; line-height: 1; display: grid; place-items: center; }
.pfeil:hover { background: rgba(255,255,255,.3); }
.punkte { display: flex; gap: .45rem; }
.punkte button { width: .5rem; height: .5rem; border-radius: 50%; border: 0; padding: 0;
  background: rgba(255,255,255,.42); cursor: pointer; transition: background .2s, width .2s; }
.punkte button.an { background: #fff; width: 1.4rem; border-radius: .25rem; }

/* ---------------------------------------------------------------- Startseite */

.teile { padding: clamp(3rem, 7vw, 4.5rem) 0 1rem; }
h2.klein { font-family: var(--ui); font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-weich);
  margin: 0 0 1.25rem; padding-bottom: .6rem; border-bottom: 1px solid var(--linie); }
.kacheln { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.kachel { display: block; text-decoration: none; border: 1px solid var(--linie);
  border-top: 3px solid var(--ton); padding: 1.25rem; background: #fff; }
.kachel:hover { border-color: var(--ton); }
.kachel.leer { background: var(--papier); }
.kachel h3 { font-family: var(--ui); font-size: 1.02rem; margin: 0 0 .5rem; font-weight: 600; }
.kachel p { font-size: .94rem; line-height: 1.55; color: var(--ink-weich); margin: 0 0 .75rem; }
.kachel .stand { font-family: var(--ui); font-size: .74rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ton-dunkel); margin: 0; }
.kachel.leer .stand { color: var(--grau); }

.haltung { background: #fff; border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie); margin-top: 4rem; }
.haltung-innen { padding: clamp(3rem, 7vw, 4.5rem) 0; }
.haltung h2 { font-size: 1.5rem; margin: 0 0 1rem; font-weight: 600; }
.haltung p { margin: 0 0 1rem; color: var(--ink-weich); }

/* ------------------------------------------------------------- Kapitelbaum */

.mitnehmen { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0 0; }
.mitnehmen a { font-family: var(--ui); font-size: .84rem; font-weight: 500;
  border: 1px solid var(--linie); padding: .5rem .9rem; text-decoration: none; border-radius: 2px; }
.mitnehmen a:hover { border-color: var(--vwl); color: var(--vwl); }

.staffel { margin-bottom: 3.5rem; scroll-margin-top: calc(var(--kopfhoehe) + 1rem); }
.staffel-kopf { border-bottom: 2px solid var(--ton); padding-bottom: .7rem; margin-bottom: .25rem; }
.staffel-kopf .kennung { font-family: var(--ui); font-size: .76rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ton); margin: 0 0 .2rem; }
.staffel-kopf h2 { font-size: 1.6rem; margin: 0; font-weight: 600; letter-spacing: -.01em; }
.staffel-kopf .umfang { font-family: var(--ui); font-size: .82rem; color: var(--ink-weich); margin: .3rem 0 0; }
.kapitelliste { list-style: none; margin: 0; padding: 0; }
.kapitelliste a { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 0 1rem;
  align-items: baseline; padding: .85rem 0; border-bottom: 1px solid var(--linie);
  text-decoration: none; }
.kapitelliste a:hover { background: var(--ton-hell); }
.kapitelliste .nr { font-family: var(--ui); font-size: .82rem; font-weight: 600; color: var(--ton); }
.kapitelliste .titel { font-size: 1.03rem; }
.kapitelliste .art { font-family: var(--ui); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-weich); margin-left: .5rem; }
.kapitelliste .beiwerk { font-family: var(--ui); font-size: .78rem; color: var(--ink-weich);
  white-space: nowrap; }
.kapitelliste .mini { margin-left: .6rem; color: var(--hist); }

/* ---------------------------------------------------------------- Kapitel */

.kapitel { padding: clamp(2rem, 6vw, 3.5rem) 0 4rem; }
.kapitel-kopf { margin-bottom: 2.25rem; }
.ort { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
  font-family: var(--ui); font-size: .8rem; color: var(--ink-weich); margin: 0 0 .9rem; }
.ort a { color: var(--ton); text-decoration: none; font-weight: 600; }
.ort a:hover { text-decoration: underline; }
.ort .kennung { font-weight: 600; letter-spacing: .06em; }
.ort .dauer::before { content: "·"; margin-right: 1rem; color: var(--linie); }

.lesetext p { margin: 0 0 1.15rem; }
.lesetext h2 { font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em;
  margin: 2.75rem 0 .9rem; border-top: 1px solid var(--linie); padding-top: 1.5rem;
  scroll-margin-top: calc(var(--kopfhoehe) + 1rem); }
.lesetext h3 { font-family: var(--ui); font-size: 1rem; font-weight: 600; margin: 1.9rem 0 .6rem; }
.lesetext ul, .lesetext ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
.lesetext li { margin-bottom: .4rem; }
.lesetext blockquote { margin: 1.5rem 0; padding-left: 1.2rem;
  border-left: 3px solid var(--linie); color: var(--ink-weich); font-style: italic; }

figure { margin: 2rem 0; }
figure img { width: 100%; height: auto; display: block; border-radius: 2px; }
figure.zitat { border-left: 3px solid var(--ton); padding-left: 1.2rem; }
figure.zitat blockquote { border: 0; margin: 0; padding: 0; font-style: italic; }
figure.zitat figcaption { font-family: var(--ui); font-size: .82rem; color: var(--ink-weich); margin-top: .4rem; }

aside { margin: 2rem 0; padding: 1.15rem 1.35rem;
  scroll-margin-top: calc(var(--kopfhoehe) + 1rem); }
aside h4 { font-family: var(--ui); font-size: .92rem; font-weight: 600; margin: 0 0 .6rem; }
aside h4 .art { display: block; font-size: .7rem; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 600; opacity: .8; margin-bottom: .15rem; }
aside p:last-child, aside ul:last-child, aside ol:last-child { margin-bottom: 0; }
aside.pointe { background: none; border-left: 3px solid var(--ton);
  padding: .2rem 0 .2rem 1.2rem; font-style: italic; color: var(--ink-weich); }
aside.miniatur { background: var(--hist-hell); border-left: 3px solid var(--hist); }
aside.miniatur h4 { color: var(--hist); }
aside.portrait { background: var(--grau-hell); border-left: 3px solid var(--grau); }
aside.projekt { background: var(--bwl-hell); border-left: 3px solid var(--bwl); }
aside.projekt h4 { color: var(--bwl-dunkel); }
aside.wasbleibt { background: var(--recht-hell); border-left: 3px solid var(--recht); }
aside.wasbleibt h4 { color: var(--recht-dunkel); }
.stichwort { margin: 0 0 .6rem; }

/* -------------------------------------------------- Modul Privatrecht */

aside.kernbegriff { background: var(--recht-hell); border-left: 3px solid var(--recht); }
aside.kernbegriff h4 { color: var(--recht-dunkel); }
aside.lernziel, aside.aufgabe { background: var(--ped-hell); border-left: 3px solid var(--ped); }
.aufgabenfeld { margin-top: 1.1rem; }
.aufgabenfeld label { display: block; font-family: var(--ui); font-size: .78rem;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ped-dunkel); margin-bottom: .35rem; }
.aufgabenfeld textarea { width: 100%; box-sizing: border-box; resize: vertical;
  font: inherit; font-size: .95rem; line-height: 1.55; padding: .7rem .85rem;
  border: 1px solid var(--ped); border-radius: 4px; background: var(--papier);
  color: var(--ink); }
.aufgabenfeld textarea:focus { outline: 2px solid var(--ped-dunkel);
  outline-offset: 1px; }
.aufgabenfeld .zeile { display: flex; align-items: center; justify-content: flex-end;
  gap: .9rem; margin-top: .5rem; }
.aufgabenfeld .zaehler { font-family: var(--ui); font-size: .74rem; color: var(--grau); }
.aufgabenfeld .zaehler.voll { color: var(--ped-dunkel); font-weight: 600; }
.aufgabenfeld button { font-family: var(--ui); font-size: .82rem; font-weight: 500;
  padding: .48rem 1rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ped-dunkel); color: #fff; }
.aufgabenfeld button:hover:not(:disabled) { background: var(--ped); }
.aufgabenfeld button:disabled { background: var(--grau-hell); color: var(--grau);
  cursor: default; }

aside.lernziel h4, aside.aufgabe h4 { color: var(--ped-dunkel);
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; }
aside.praxis { background: var(--creme); border-left: 3px solid rgba(224,118,36,.4); }
aside.praxis h4 { color: var(--ink-weich); }
aside.einstiegsszene { background: var(--creme); border-left: 3px solid var(--ped);
  font-style: italic; }
aside.laenderblick { background: var(--laender-hell); border-left: 3px solid var(--laender); }
aside.laenderblick h4 { color: var(--laender);
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; }

.land { font-size: .95rem; }
.land b { display: inline-block; min-width: 2.1rem; color: var(--laender);
  font-family: var(--ui); font-size: .78rem; letter-spacing: .06em; }
.nichtdas { font-size: .95rem; font-style: italic; color: var(--ink-weich); }
.nichtdas b { font-style: normal; }
.szenenort { font-family: var(--ui); font-size: .78rem; color: var(--ink-weich);
  font-style: normal; }
.szenenort::before { content: "— "; }

/* Marginalie. Im Springer-Satz ein leeres Makro — dort gibt es keinen
   Marginalienrand. Hier steht sie links neben der Spalte, wie in einem
   Schulbuch, und verschwindet, sobald der Platz dafuer fehlt: unter dem
   Text wiederholte sie nur das Wort, das zwei Zentimeter weiter rechts
   ohnehin schon fett steht. */
.randwort { display: none; }
@media (min-width: 78rem) {
  .randwort { display: block; float: left; clear: left;
    width: 10.5rem; margin: .15rem 0 .4rem -12rem;
    font-family: var(--ui); font-size: .74rem; line-height: 1.35;
    text-align: right; color: var(--ton); font-weight: 600;
    letter-spacing: .01em; }
}

/* Tabellen laufen im Netz nicht ueber die Seitenbreite hinaus, sondern in
   ihrem eigenen Kasten. Eine Tabelle, die den ganzen Text nach rechts
   schiebt, macht das Kapitel unlesbar — die Spalte bleibt, die Tabelle
   rollt. */
.tabellenrolle { overflow-x: auto; margin: 1.8rem 0; }
.tabellenrolle table { border-collapse: collapse; width: 100%;
  font-family: var(--ui); font-size: .86rem; line-height: 1.5; }
.tabellenrolle th { text-align: left; font-weight: 600; color: var(--ton-dunkel);
  border-bottom: 2px solid var(--ton); padding: .5rem .8rem .45rem 0;
  vertical-align: bottom; white-space: nowrap; }
.tabellenrolle td { border-bottom: 1px solid var(--linie);
  padding: .55rem .8rem .55rem 0; vertical-align: top; }
.tabellenrolle tr:last-child td { border-bottom: 0; }
aside .tabellenrolle { margin: 1rem 0 0; }
aside .tabellenrolle th { border-bottom-color: currentColor; }

figure.abbildung { margin: 2.4rem 0; }
figure.abbildung img { background: #fff; border: 1px solid var(--linie);
  padding: .8rem; }
figure.abbildung figcaption { font-family: var(--ui); font-size: .8rem;
  color: var(--ink-weich); margin-top: .5rem; }

/* ------------------------------------------------ Inhaltsverzeichnis */

.verzeichnis { max-width: 46rem; margin: 0 auto 4rem; }
.tocteil { margin-bottom: 3rem; }
.tocteil h2 { font-family: var(--ui); font-size: 1.15rem; letter-spacing: -.01em;
  border-bottom: 2px solid var(--ton); padding-bottom: .4rem; margin: 0 0 .4rem; }
.tocteil h2 .nr { color: var(--ton); margin-right: .5rem; }
.tocteil h2 a { text-decoration: none; }
.tocteil h2 a:hover { text-decoration: underline; }
/* Die Themenkette unter der Kapitelüberschrift. Sie steht nur im Modul: das
   Lehrmittel führt sie nicht. */
.tocteil > .unterzeile { font-family: var(--ui); font-size: .8rem;
  color: var(--ink-weich); margin: .5rem 0 .2rem; line-height: 1.5; }

.tockapitel { border-bottom: 1px solid var(--linie); padding: .85rem 0; }
/* NICHT «kopf» nennen: `.kopf` ist der Seitenkopf, position fixed, top 0.
   Zweiundsechzig Verzeichniszeilen lagen deshalb uebereinander im
   Kopfbereich, und nur auf diesen beiden Seiten, weil nur sie die Zeile
   benutzen. */
.tockapitel .zeile { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .5rem; margin: 0; }
.tockapitel .zeile .nr { font-family: var(--ui); font-size: .8rem; font-weight: 600;
  color: var(--ton); letter-spacing: .03em; min-width: 3.2rem; }
.tockapitel .zeile .titel { font-weight: 600; flex: 1 1 14rem; }
.tockapitel .zeile .titel a, .tockapitel li a { text-decoration: none; }
.tockapitel .zeile .titel a:hover, .tockapitel li a:hover { text-decoration: underline; }
/* Der Sprung in die Erzaehlung steht rechts und leise: er ist ein Angebot,
   nicht die Hauptsache dieser Zeile. */
.tockapitel .dazu { font-family: var(--ui); font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  color: var(--vwl); border: 1px solid var(--linie); padding: .15rem .45rem; }
.tockapitel .dazu:hover { background: var(--vwl-hell); border-color: var(--vwl); }
.tockapitel ul { list-style: none; margin: .45rem 0 0; padding: 0 0 0 3.7rem;
  font-family: var(--ui); font-size: .82rem; color: var(--ink-weich); }
.tockapitel li { margin: .1rem 0; }
.tockapitel li .nr { color: var(--ton); font-weight: 600; margin-right: .4rem; }
@media (max-width: 32rem) {
  .tockapitel ul { padding-left: 0; }
}

/* ------------------------------------------------------------- Register */

.alphabet { display: flex; flex-wrap: wrap; gap: .3rem; max-width: 46rem;
  margin: 0 auto 2.5rem; font-family: var(--ui); font-size: .82rem;
  font-weight: 600; }
.alphabet a { display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.9rem; padding: .3rem .35rem; text-decoration: none;
  border: 1px solid var(--linie); color: var(--recht); }
.alphabet a:hover { background: var(--recht-hell); border-color: var(--recht); }

.register { max-width: 46rem; margin: 0 auto 5rem; }
.register h2 { font-family: var(--ui); font-size: 1.1rem; color: var(--recht);
  border-bottom: 2px solid var(--recht); padding-bottom: .3rem;
  margin: 2.5rem 0 .2rem; scroll-margin-top: calc(var(--kopfhoehe) + 1rem); }
.register dl { margin: 0; }
/* Begriff und Fundstelle nebeneinander, solange Platz ist. Untereinander
   waeren es bei 210 Eintraegen 420 Zeilen — eine Liste, durch die niemand
   scrollt. */
.register dt { font-weight: 600; padding: .55rem 0 0; }
.register dd { margin: 0 0 .1rem; padding-bottom: .55rem;
  border-bottom: 1px solid var(--linie); }
.register dd a { display: inline-block; font-family: var(--ui);
  font-size: .78rem; color: var(--ink-weich); text-decoration: none;
  margin-right: .9rem; }
.register dd a:hover { color: var(--recht); text-decoration: underline; }
.register dd .nr { font-weight: 600; color: var(--recht);
  letter-spacing: .03em; margin-right: .35rem; }
@media (min-width: 46rem) {
  .register dl { display: grid; grid-template-columns: 15rem 1fr;
    align-items: baseline; }
  .register dt { padding: .55rem 1rem .55rem 0;
    border-bottom: 1px solid var(--linie); }
  .register dd { padding: .55rem 0; }
}

.untertitel { font-family: var(--ui); font-size: .88rem; color: var(--ink-weich);
  margin: .6rem 0 0; line-height: 1.5; }


.vorausblick { font-family: var(--ui); font-size: .92rem; color: var(--ink-weich);
  border-top: 1px solid var(--linie); padding-top: 1.5rem; margin: 3rem 0 1.5rem; font-style: italic; }
.vorausblick span { display: block; font-size: .72rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ton); font-style: normal; font-weight: 600; margin-bottom: .3rem; }
.weiter { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.weiter a { display: block; padding: .95rem 1.1rem; border: 1px solid var(--linie); text-decoration: none; }
.weiter a:hover { border-color: var(--ton); background: var(--ton-hell); }
.weiter .richtung { display: block; font-family: var(--ui); font-size: .72rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ton); font-weight: 600; margin-bottom: .2rem; }
.weiter .ziel { font-size: .98rem; }
.weiter .vorwaerts { text-align: right; }

/* -------------------------------------------------------------- Miniaturen */

.miniaturliste { list-style: none; margin: 0 auto 5rem; padding: 0; }
.miniaturliste a { display: block; padding: .9rem 0 .9rem 1rem;
  border-bottom: 1px solid var(--linie); border-left: 3px solid var(--hist); text-decoration: none; }
.miniaturliste a:hover { background: var(--hist-hell); }
.miniaturliste .titel { display: block; font-size: 1.03rem; }
.miniaturliste .herkunft { display: block; font-family: var(--ui); font-size: .78rem;
  color: var(--ink-weich); margin-top: .15rem; }

/* ---------------------------------------------------------- Textseiten */

.fliess { padding-bottom: 5rem; }
.fliess h2 { font-size: 1.35rem; margin: 2.5rem 0 .8rem; font-weight: 600; }
.fliess .stand { font-family: var(--ui); font-size: .82rem; color: var(--grau);
                 margin-top: 3rem; }
.fliess p { margin: 0 0 1.1rem; }
.zweispalt { display: grid; gap: 2rem 3rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-bottom: 2.5rem; }
.haken { list-style: none; margin: 0; padding: 0; font-size: .98rem; }
.haken li { position: relative; padding-left: 1.6rem; margin-bottom: .7rem; }
.haken li::before { content: "✓"; position: absolute; left: 0; color: var(--recht); font-weight: 600; }
.haken.schloss li::before { content: "🔒"; font-size: .8em; top: .1em; }
.hinweis { background: #fff; border: 1px solid var(--linie); border-left: 3px solid var(--vwl);
  padding: 1.5rem 1.7rem; margin-bottom: 5rem; }
.hinweis h2 { font-size: 1.15rem; margin: 0 0 .7rem; font-weight: 600; }
.hinweis p { margin: 0 0 .9rem; color: var(--ink-weich); }
.hinweis .stand { font-family: var(--ui); font-size: .82rem; color: var(--vwl); margin: 0; }

.dateien { list-style: none; margin: 0 auto 5rem; padding: 0; }
.dateien a { display: grid; grid-template-columns: 4.5rem 1fr; gap: .2rem 1rem;
  padding: 1.1rem 0; border-top: 1px solid var(--linie); text-decoration: none; }
.dateien li:last-child a { border-bottom: 1px solid var(--linie); }
.dateien a:hover { background: var(--vwl-hell); }
.dateien .art { grid-row: span 2; font-family: var(--ui); font-size: .76rem; font-weight: 600;
  letter-spacing: .08em; color: var(--vwl); padding-top: .2rem; }
.dateien .was { font-size: 1.03rem; }
.dateien .wozu { font-family: var(--ui); font-size: .84rem; color: var(--ink-weich); line-height: 1.5; }


/* ---------------------------------------------------------- Bildkopf */

/* Dieselbe Behandlung wie der Aufschlag der Startseite, nur flacher: das Bild
   liegt hinter dem Kopf, der Text steht links darauf in Weiss. Flacher, weil
   hier jemand begruesst und nicht die ganze Seite anfaengt. */
.bild-oben main { padding-top: 0; }
.bildkopf { position: relative; background: #0E1218;
  margin: 0 calc(-1 * clamp(1rem, 4vw, 3rem)); }
.bildkopf img { width: 100%; height: max(min(76vh, 40rem), 30rem);
  object-fit: cover; object-position: 50% 0%; display: block; }
/* Links kraeftiger als beim Aufschlag: diese Bilder sind heller, und der Text
   steht ueber der Fensterseite. Wer ein Bild abdunkeln will, dreht hier und
   nicht in der Datei. */
.bildkopf::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(10,13,18,.88) 0%, rgba(10,13,18,.70) 34%,
                    rgba(10,13,18,.25) 62%, rgba(10,13,18,.05) 85%),
    linear-gradient(to bottom, rgba(10,13,18,.42) 0%, rgba(10,13,18,0) 24%); }
/* Oben Platz fuer den fixierten Kopf, sonst verschwindet die Rubrikzeile
   dahinter — genau das ist beim ersten Bau passiert. */
.bildkopf-text { position: absolute; z-index: 2; inset: var(--kopfhoehe) 0 0 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 clamp(1rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4rem);
  max-width: 40rem; color: #fff; }
.bildkopf-text > * { flex: none; }
.bildkopf-text .eyebrow { color: #fff; opacity: .82; }
.bildkopf-text h1 { color: #fff; margin-bottom: .7rem; }
.bildkopf-text .lead { color: rgba(255,255,255,.9); margin-bottom: 0; }
.bild-oben .zweispalt, .bild-oben .fliess { padding-top: clamp(2.5rem, 6vw, 4rem); }

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

.fuss { border-top: 1px solid var(--linie); margin-top: 4rem; background: #fff;
  padding: 2.5rem clamp(1rem, 4vw, 3rem) 2.5rem;
  font-family: var(--ui); font-size: .84rem; color: var(--ink-weich); }
.fuss-innen { max-width: 46rem; margin: 0 auto; display: grid; gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.fuss p { margin: 0 0 .35rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; text-underline-offset: .25em; }
.fuss-marke { font-weight: 600; color: var(--ink); }
.fuss .lizenz { max-width: 46rem; margin: 2rem auto 0; padding-top: 1.2rem;
  border-top: 1px solid var(--linie); color: var(--grau); font-size: .78rem; }

@media print {
  .kopf, .suchfeld, .weiter, .skip, .folien-steuer { display: none; }
  body { background: #fff; font-size: 11pt; padding-top: 0; }
}