/* Keelwake — Lexikon- und Schein-Seiten.
 *
 * WARUM EIN EIGENES STYLESHEET: Beide Seitentypen leihen sich die Klassen der
 * Wissensartikel (wissen-prose, wissen-article-section, wissen-liste). Deren
 * Maße sind für EINEN langen Artikel gemacht — 52 px Überschrift, 78 px
 * Abstand, Aufzählungen als Karten. Auf einer Lexikonseite stehen aber
 * dreizehn kurze Begriffe untereinander; dieselben Maße lassen die Seite
 * gepresst und schreierisch wirken.
 *
 * Alles hier ist auf .lexikon-page bzw. .schein-page eingegrenzt. Die
 * Bestandsseiten unter /wissen/ laden diese Datei nicht und können davon
 * nicht betroffen sein.
 *
 * FARBEN: der helle Lesebereich hat eine EIGENE Palette (--wk-*). Die Token
 * --ink, --ink-soft und --muted aus styles.css sind Werte für DUNKLE Flächen
 * (#c8d5da und heller). Wer sie hier benutzt, bekommt hellgrauen Text auf
 * hellem Grund: gemessen 1,33:1 Kontrast, praktisch unlesbar. Genau das ist
 * mir im ersten Anlauf passiert. Hier gilt --wk-ink, --wk-copy, --wk-rule
 * und die Literale, die knowledge-2026.css im hellen Bereich verwendet.
 *
 * Gemessen am 28.08.2026 auf keelwake.de/lexikon/navigation.html.
 */

/* ── Gemeinsame Typo-Skala ────────────────────────────────────────────────
 * Vorher 52 → 18,7 → 17 px: der Sprung von der Überschrift zur Unterebene war
 * so groß, dass dazwischen keine Hierarchie mehr sichtbar war. Jetzt liegen
 * die Stufen in einem Verhältnis, das man beim Lesen als Ebene erkennt.     */

.lexikon-page .wissen-prose p,
.schein-page .wissen-prose p {
  font-size: 16.5px;
  line-height: 1.72;
}

.lexikon-page .wissen-prose p + p,
.schein-page .wissen-prose p + p {
  margin-top: 16px;
}

/* ── Lexikon: der Begriff ist eine Überschrift, kein Plakat ─────────────── */

.lexikon-page .wissen-prose h2 {
  max-width: 34ch;
  margin-bottom: 6px;
  font-size: clamp(25px, 2.4vw, 29px);
  letter-spacing: -.022em;
  line-height: 1.2;
}

/* Die Zusammenfassung stand mit 16 px unter einem 17-px-Fließtext — eine
   Kurzfassung, die kleiner ist als das, was sie zusammenfasst, liest sich
   wie eine Fußnote. */
.lexikon-page .wissen-prose .wissen-lead {
  max-width: 62ch;
  margin: 0 0 22px;
  color: #4e5d60;
  font-size: 17.5px;
  line-height: 1.6;
}

.lexikon-page .wissen-prose h3 {
  margin: 26px 0 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.35;
}

/* ── Lexikon: ein Begriff, ein Block ──────────────────────────────────────
 * Vorher trennten 78 px Leere die Begriffe — viel Weiß, aber keine Kante.
 * Eine Haarlinie plus knapperer Abstand macht sichtbar, wo ein Begriff endet
 * und der nächste beginnt, und spart gleichzeitig halbe Bildschirmhöhen.   */

.lexikon-page .wissen-prose .wissen-article-section {
  margin: 0 0 38px;
  border-bottom: 1px solid var(--wk-rule);
  padding-bottom: 38px;
}

.lexikon-page .wissen-prose .wissen-article-section:last-of-type {
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 0;
}

/* ── Lexikon: Aufzählungen sind Text, keine Karten ────────────────────────
 * `wissen-liste` gibt jedem Eintrag eine Fläche mit 17/20/17/48 px Polster.
 * Bei drei Stichpunkten wirkt das ruhig, bei dreizehn Begriffen mit je drei
 * Punkten entsteht die Blockwand, die auf dem Bildschirm auffiel.          */

.lexikon-page .wissen-prose .wissen-liste {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.lexikon-page .wissen-prose .wissen-liste li {
  position: relative;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0 0 0 22px;
  color: #435156;
  font-size: 16px;
  line-height: 1.62;
}

.lexikon-page .wissen-prose .wissen-liste li::before {
  position: absolute;
  top: .72em;
  left: 2px;
  width: 9px;
  height: 1.5px;
  background: var(--wk-aqua-dark);
  content: "";
  opacity: .8;
}

/* Querverweise („Siehe auch", „In der App") — eine Fußzeile am Begriff,
   nicht noch ein Absatz im selben Gewicht. */
.lexikon-page .wissen-prose .wissen-quelle {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.6;
}

/* ── Lexikon: der Kopf trug eine leere Spalte ─────────────────────────────
 * Das Raster der Artikelseiten ist zweispaltig (Text + Kurzantwort). Die
 * Lexikonseiten haben keine Kurzantwort, die zweite Spalte blieb also leer —
 * das war die große Lücke rechts neben „Navigation".                        */

.lexikon-page .wissen-article-hero-grid {
  display: block;
  /* 720 px, nicht in ch gerechnet: die Überschrift läuft mit 79 px, der
     Container erbt aber die Grundschrift — 46ch ergaben 449 px, und schon
     „Hochsee (SSS/SHS)" braucht bei dieser Größe gemessene 667 px. Fünf von
     sieben Kategorienamen wären umgebrochen. */
  max-width: 720px;
}

.lexikon-page .wissen-article-hero h1 {
  margin-bottom: 10px;
}

/* Der Kopfbereich liegt auf dunklem Grund — hier gilt die dunkle Palette,
   nicht die des Lesebereichs darunter. */
.lexikon-page .wissen-article-hero .wissen-lead {
  color: rgba(255, 255, 255, .64);
}

/* ── Schein-Seiten: Abschnittsüberschriften eine Stufe leiser ─────────────
 * 52 px sind die Größe für die EINE Überschrift eines Wissensartikels. Auf
 * den Schein-Seiten stehen sechs bis sieben davon; in dieser Größe schreien
 * sie den kurzen Absatz darunter nieder.                                    */

.schein-page .wissen-prose h2 {
  max-width: 24ch;
  margin-bottom: 22px;
  font-size: clamp(30px, 3.1vw, 38px);
  letter-spacing: -.038em;
  line-height: 1.1;
}

.schein-page .wissen-prose .wissen-article-section {
  margin-bottom: 62px;
}

.schein-page .wissen-prose h3 {
  margin: 26px 0 8px;
  font-size: 17px;
  font-weight: 700;
}

/* Die Fakten-Aufzählungen (Zusammensetzung, Mindestpunkte) bleiben Karten —
   dort ist jede Zeile eine eigene Angabe und darf eine Fläche haben. Nur das
   Polster wird knapper, damit drei Zeilen keine halbe Seite füllen. */
.schein-page .wissen-prose .wissen-liste li {
  padding-top: 13px;
  padding-bottom: 13px;
  font-size: 15.5px;
}

/* ── Der Lesebereich braucht Luft nach dem dunklen Kopf ───────────────────
 * Gemessen: das Lesegitter begann exakt am Pixel, an dem der dunkle Block
 * endete — 0 px Abstand, die Überschrift stand 24 px darunter. Dadurch wirkte
 * der Übergang gepresst. Die Bestandsartikel unter /wissen/ haben an dieser
 * Stelle 205 px; das ist für eine dichte Lexikonseite zu viel, null ist zu
 * wenig. 110 px lesen sich als bewusster Abschnittswechsel.                 */

.lexikon-page .wissen-reading-grid,
.schein-page .wissen-reading-grid {
  padding-top: clamp(56px, 7.5vw, 110px);
  padding-bottom: clamp(56px, 7vw, 100px);
}

/* Das klebende Verzeichnis darf nicht unter der Kopfleiste hängenbleiben. */
.lexikon-page .wissen-toc,
.schein-page .wissen-toc {
  top: 104px;
}

/* ── Beide: Lesespalte etwas schmaler ─────────────────────────────────────
 * 800 px bei 16,5 px Schrift sind rund 95 Zeichen je Zeile. Angenehm liest
 * sich zwischen 60 und 75; darüber verliert das Auge den Zeilenanfang.      */

.lexikon-page .wissen-prose,
.schein-page .wissen-prose {
  max-width: 74ch;
}

/* ── Übersichtsseiten: Karten mit gleichmäßigem Rhythmus ──────────────────
 * Die Kacheln erben min-height 280px aus dem Wissensbereich, wo sie ein Bild
 * tragen. Hier tragen sie drei Zeilen Text und stehen dadurch zu weit
 * auseinander.                                                              */

.lexikon-page .wissen-karte,
.schein-page .wissen-karte {
  min-height: 0;
  padding: 26px 28px 28px;
}

.lexikon-page .wissen-karte h3,
.schein-page .wissen-karte h3 {
  /* Ebenfalls zweizeilig gedeckelt. Die Differenz von 31 px auf /scheine/ kam
     nicht vom Beschreibungstext, sondern von den laengeren Kartentiteln
     („SBF Binnen — Sportbootfuehrerschein Binnen"), die in eine dritte Zeile
     liefen. */
  display: -webkit-box;
  overflow: hidden;
  margin-top: 16px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: clamp(21px, 2.1vw, 26px);
  line-height: 1.18;
}

.lexikon-page .wissen-karte > p,
.schein-page .wissen-karte > p {
  /* Auf zwei Zeilen begrenzt: sonst ist die Karte mit dem laengsten Text
     31 px hoeher als die uebrigen (gemessen auf /scheine/), und die Kachelwand
     bekommt eine Delle. Der volle Text steht auf der Zielseite. */
  display: -webkit-box;
  overflow: hidden;
  margin-top: 9px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14.5px;
  line-height: 1.6;
}

.lexikon-page .wissen-karten,
.schein-page .wissen-karten {
  gap: 14px;
}

/* ── Inhaltsverzeichnis: näher am Text ──────────────────────────────────── */

.lexikon-page .wissen-toc nav a,
.schein-page .wissen-toc nav a {
  min-height: 50px;
  font-size: 13.5px;
}

/* ── Schmale Bildschirme ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .lexikon-page .wissen-article-hero-grid { max-width: none; }
  .lexikon-page .wissen-prose h2 { max-width: none; }
  .schein-page .wissen-prose h2 { max-width: none; }

  /* Das Inhaltsverzeichnis steht auf schmalen Bildschirmen VOR dem Text.
     Als gestapelte Liste mit 50 px je Zeile sind das bei dreizehn Begriffen
     rund 650 px, an denen man vorbeiscrollt, bevor der erste Begriff kommt.
     Als umbrechende Marken passt dasselbe in einen Bruchteil davon. */
  .lexikon-page .wissen-toc nav,
  .schein-page .wissen-toc nav {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
    border-top: 0;
  }

  .lexikon-page .wissen-toc nav a,
  .schein-page .wissen-toc nav a {
    display: inline-flex;
    min-height: 0;
    align-items: center;
    border: 1px solid var(--wk-rule);
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 13px;
    line-height: 1.2;
  }

  /* Die Nummern tragen in der Marke keine Information mehr — der Begriff
     steht ja daneben. Fuer Vorlesegeraete bleiben sie erhalten. */
  .lexikon-page .wissen-toc nav a span,
  .schein-page .wissen-toc nav a span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ── Kontrast: zwei Werte aus dem Bestand nachgeschärft ───────────────────
 * Querverweise (#687572) und Inhaltsverzeichnis (#66726f) landen auf dem
 * hellen Grund bei 4,25:1 bzw. 4,42:1 — knapp unter den 4,5:1, die für
 * Fließtext gelten. Auf diesen beiden Seitentypen wird beides eine Spur
 * dunkler; die Bestandsseiten unter /wissen/ bleiben unberührt.            */

.lexikon-page .wissen-prose .wissen-quelle,
.schein-page .wissen-prose .wissen-quelle {
  color: #566260 !important;
}

.lexikon-page .wissen-toc nav a,
.schein-page .wissen-toc nav a {
  color: #56615e;
}

/* ── Karten-Meta: Kürzel und Kennzahl trennen ─────────────────────────────
 * Im Wissensbereich trägt die Meta-Zeile genau eine Angabe, deshalb steht sie
 * dort auf `flow-root` und das gesetzte `gap` läuft ins Leere. Auf den
 * Schein-Karten stehen zwei Angaben („SBF Binnen" und „300 amtliche Fragen")
 * und klebten dadurch aneinander — gemessen 0 px Abstand.                   */

.lexikon-page .wissen-karte .wissen-card-meta,
.schein-page .wissen-karte .wissen-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
}

.lexikon-page .wissen-karte .wissen-card-meta span + span::before,
.schein-page .wissen-karte .wissen-card-meta span + span::before {
  margin-right: 10px;
  content: "·";
  opacity: .5;
}

/* ── Skripte ──────────────────────────────────────────────────────────────
 * Eigene Bausteine, die es im Lexikon nicht gibt: Kapitelzähler, Lehrbild mit
 * Bildunterschrift, Merkkasten. Alles auf .skript-page eingegrenzt.
 *
 * Farben aus der HELLEN Palette (--wk-*). Die Token --ink und --muted sind
 * Werte für dunkle Flächen; wer sie hier nimmt, bekommt hellgrau auf hell.
 */

/* Die Übersichtsseite ist kein Artikel und bekommt deshalb ein eigenes
   Raster. Ohne diese Abgrenzung landete ihre einzige Textspalte in der
   245-px-Inhaltsverzeichnis-Spalte der Wissensartikel. */
.skript-page .skript-hub-intro,
.skript-page .skript-hub-library {
  background: var(--wk-paper);
}

.skript-page .skript-hub-intro {
  padding: 96px 0 76px;
}

.skript-page .skript-hub-intro-grid {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: 72px;
}

.skript-page .skript-hub-intro-heading h2 {
  max-width: 13ch;
  margin: 18px 0 0;
  color: var(--wk-ink);
  font-size: 42px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.08;
}

.skript-page .skript-hub-intro-copy {
  max-width: 760px;
  color: #435156;
  font-size: 17px;
  line-height: 1.72;
}

.skript-page .skript-hub-intro-copy > p {
  margin: 0 0 18px;
}

.skript-page .skript-hub-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 38px;
  border-top: 1px solid var(--wk-rule);
  padding-top: 28px;
}

.skript-page .skript-hub-facts h3 {
  margin: 0 0 8px;
  color: var(--wk-ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}

.skript-page .skript-hub-facts p {
  margin: 0;
  color: #5f6d70;
  font-size: 14.5px;
  line-height: 1.62;
}

.skript-page .skript-hub-library {
  padding: 12px 0 112px;
}

.skript-page .skript-hub-library-heading {
  display: grid;
  grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr);
  gap: 72px;
  margin-bottom: 34px;
  border-top: 1px solid var(--wk-rule);
  padding-top: 54px;
}

.skript-page .skript-hub-library-heading .wissen-kicker {
  grid-column: 1;
  margin: 0 0 -38px;
}

.skript-page .skript-hub-library-heading h2 {
  grid-column: 1;
  margin: 0;
  color: var(--wk-ink);
  font-size: 42px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.08;
}

.skript-page .skript-hub-library-heading > p:last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  max-width: 620px;
  margin: 0;
  color: #5f6d70;
  font-size: 16px;
  line-height: 1.65;
}

.skript-page .skript-hub-grid {
  display: grid;
  gap: 18px;
}

.skript-page .skript-hub-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  overflow: hidden;
  min-height: 390px;
  border: 1px solid var(--wk-rule);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.skript-page .skript-hub-card--text {
  grid-template-columns: 1fr;
  min-height: 0;
}

.skript-page .skript-hub-card--text .skript-hub-card-copy {
  min-height: 360px;
}

.skript-page .skript-hub-card:hover,
.skript-page .skript-hub-card:focus-visible {
  border-color: rgba(10, 171, 167, .65);
  box-shadow: 0 18px 44px rgba(7, 22, 32, .08);
  transform: translateY(-2px);
}

.skript-page .skript-hub-card:focus-visible {
  outline: 3px solid rgba(10, 171, 167, .28);
  outline-offset: 3px;
}

.skript-page .skript-hub-card-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 44px 46px 42px;
}

.skript-page .skript-hub-card .wissen-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin: 0 0 28px;
  color: #718084;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.skript-page .skript-hub-card .wissen-card-meta span + span::before {
  margin-right: 12px;
  content: "·";
  opacity: .55;
}

.skript-page .skript-hub-card h3 {
  max-width: none;
  margin: 0;
  color: var(--wk-ink);
  font-size: 46px;
  font-weight: 500;
  hyphens: auto;
  letter-spacing: 0;
  line-height: 1.06;
  overflow-wrap: break-word;
}

.skript-page .skript-hub-card-copy > p {
  max-width: 57ch;
  margin: 24px 0 0;
  color: #566568;
  font-size: 15.5px;
  line-height: 1.65;
}

.skript-page .skript-hub-card-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 28px;
  color: var(--wk-aqua-dark);
  font-size: 14px;
  font-weight: 700;
}

.skript-page .skript-hub-card-link b {
  font-size: 18px;
  font-weight: 500;
}

.skript-page .skript-hub-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
  background: #eef0eb;
}

.skript-page .skript-hub-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .skript-page .skript-hub-intro { padding: 68px 0 58px; }

  .skript-page .skript-hub-intro-grid,
  .skript-page .skript-hub-library-heading {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .skript-page .skript-hub-intro-heading h2,
  .skript-page .skript-hub-library-heading h2 {
    max-width: 16ch;
    font-size: 36px;
  }

  .skript-page .skript-hub-library-heading .wissen-kicker,
  .skript-page .skript-hub-library-heading h2,
  .skript-page .skript-hub-library-heading > p:last-child {
    grid-column: 1;
    grid-row: auto;
  }

  .skript-page .skript-hub-library-heading .wissen-kicker { margin: 0 0 -16px; }

  .skript-page .skript-hub-card {
    grid-template-columns: 1fr;
  }

  .skript-page .skript-hub-card-media {
    min-height: 300px;
    grid-row: 1;
  }
}

@media (max-width: 620px) {
  .skript-page .skript-article .wissen-article-hero h1 {
    font-size: 36px;
    hyphens: auto;
    letter-spacing: 0;
    line-height: 1.04;
    overflow-wrap: break-word;
  }

  .skript-page .skript-hub-intro { padding: 52px 0 44px; }
  .skript-page .skript-hub-library { padding-bottom: 76px; }
  .skript-page .skript-hub-facts { grid-template-columns: 1fr; gap: 22px; }
  .skript-page .skript-hub-library-heading { padding-top: 42px; }
  .skript-page .skript-hub-card { min-height: 0; }
  .skript-page .skript-hub-card-media { min-height: 230px; }
  .skript-page .skript-hub-card-copy { padding: 30px 26px 32px; }
  .skript-page .skript-hub-card h3 { max-width: none; font-size: 30px; }
  .skript-page .skript-hub-card .wissen-card-meta { margin-bottom: 20px; }
}

.skript-page .skript-kapitelnr {
  margin: 0 0 10px;
  color: var(--wk-aqua-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.skript-page .skript-kapitelnr span {
  color: #7c8a8e;
  font-weight: 500;
  letter-spacing: .04em;
}

/* Der Kapitelabstand ist größer als im Lexikon: dort trennt die Linie kurze
   Begriffe, hier trennt sie Kapitel, die man am Stück liest. */
.skript-page .wissen-prose .wissen-article-section {
  margin: 0 0 56px;
  border-bottom: 1px solid var(--wk-rule);
  padding-bottom: 56px;
}

.skript-page .wissen-prose .wissen-article-section:last-of-type {
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 0;
}

.skript-page .wissen-prose h2 {
  max-width: 22ch;
  margin-bottom: 14px;
  font-size: clamp(28px, 2.9vw, 35px);
  letter-spacing: -.032em;
  line-height: 1.12;
}

.skript-page .wissen-prose h3 {
  margin: 34px 0 10px;
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -.005em;
}

.skript-page .wissen-prose ol {
  margin: 14px 0 0;
  padding-left: 22px;
  color: #435156;
  font-size: 16px;
  line-height: 1.62;
}

.skript-page .wissen-prose ol li { margin-bottom: 8px; }

/* Lehrbild. Es steht auf eigener Fläche und nicht randlos im Text, damit der
   helle Bildgrund (#f3f1ea) nicht mit dem Seitengrund verschwimmt. */
.skript-page .skript-bild {
  position: relative;
  margin: 30px 0 8px;
}

.skript-page .skript-bild img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--wk-rule);
  border-radius: 8px;
}

.skript-page .skript-bild figcaption {
  margin-top: 10px;
  color: #6a777b;
  font-size: 13.5px;
  line-height: 1.55;
}

.skript-page .skript-bild-zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 6px;
  background: rgba(6, 23, 27, .84);
  color: #fff;
  cursor: pointer;
  font: 700 23px/1 system-ui, sans-serif;
  opacity: .78;
  transition: background-color .18s ease, opacity .18s ease;
}

.skript-page .skript-bild-zoom:hover,
.skript-page .skript-bild-zoom:focus-visible {
  background: var(--wk-aqua-dark);
  opacity: 1;
  outline: 3px solid rgba(72, 216, 206, .35);
  outline-offset: 2px;
}

.skript-page .skript-lightbox {
  width: min(1500px, calc(100vw - 40px));
  max-width: none;
  height: min(920px, calc(100dvh - 40px));
  max-height: none;
  margin: auto;
  border: 0;
  padding: 0;
  background: #071b20;
  color: #fff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
}

.skript-page .skript-lightbox::backdrop {
  background: rgba(3, 12, 15, .82);
  backdrop-filter: blur(3px);
}

.skript-page .skript-lightbox[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.skript-page .skript-lightbox-scroll {
  width: 100%;
  min-height: 0;
  overflow: auto;
  padding: 56px 24px 22px;
}

.skript-page .skript-lightbox img {
  display: block;
  width: min(1200px, 100%);
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
  background: #f3f1ea;
}

.skript-page .skript-lightbox p {
  width: min(1200px, 100%);
  margin: 14px auto 22px;
  color: #b7c2c4;
  font-size: 14px;
  line-height: 1.5;
}

.skript-page .skript-lightbox-close {
  position: fixed;
  z-index: 2;
  top: max(28px, env(safe-area-inset-top));
  right: max(28px, env(safe-area-inset-right));
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 6px;
  background: rgba(6, 23, 27, .92);
  color: #fff;
  cursor: pointer;
  font: 400 30px/1 system-ui, sans-serif;
}

@media (max-width: 700px) {
  .skript-page .skript-bild-zoom {
    top: 8px;
    right: 8px;
    width: 38px;
    height: 38px;
    opacity: .92;
  }

  .skript-page .skript-lightbox {
    width: 100vw;
    height: 100dvh;
  }

  .skript-page .skript-lightbox-scroll {
    padding: 64px 16px 20px;
  }

  .skript-page .skript-lightbox img {
    width: 960px;
    max-width: none;
    margin: 0;
  }

  .skript-page .skript-lightbox p {
    width: auto;
    max-width: none;
    margin: 14px 16px 20px;
  }

  .skript-page .skript-lightbox-close {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
  }
}

/* Merkkasten: die Antwort, die in der Prüfung erwartet wird. Bewusst ruhig —
   ein gelber Kasten mit Ausrufezeichen liest sich nach Nachhilfeheft. */
.skript-page .skript-merke {
  margin: 22px 0 0;
  border-left: 3px solid var(--wk-aqua-dark);
  padding: 2px 0 2px 18px;
  color: #3c4a4e;
  font-size: 15.5px;
  line-height: 1.6;
}

.skript-page .skript-merke span {
  display: block;
  margin-bottom: 3px;
  color: var(--wk-aqua-dark);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Kapitelabschluss: keine zweite Inhaltskarte, sondern eine klare Lernzone am
   Ende des Leseflusses. Zusammenfassung und Pruefungshinweise stehen
   vergleichbar nebeneinander; die Merksaetze bilden den verbindlichen Sockel. */
.skript-page .skript-kapitelabschluss {
  display: block;
  margin-top: 48px;
  border-top: 2px solid var(--wk-ink);
  padding-top: 32px;
}

.skript-page .skript-kapitelabschluss > .wissen-kicker {
  margin-bottom: 9px;
}

.skript-page .wissen-prose .skript-kapitelabschluss > h3 {
  margin: 0 0 28px;
  color: var(--wk-ink);
  font-size: 24px;
  letter-spacing: 0;
  line-height: 1.2;
}

.skript-page .skript-lernfelder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 42px;
}

.skript-page .skript-kapitelabschluss h4 {
  margin: 0 0 14px;
  color: var(--wk-aqua-dark);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: uppercase;
}

.skript-page .skript-kapitelabschluss ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.skript-page .skript-kapitelabschluss li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 20px;
  color: #3f4d51;
  font-size: 15px;
  line-height: 1.58;
}

.skript-page .skript-kapitelabschluss li::before {
  position: absolute;
  top: .72em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wk-aqua-dark);
  content: "";
}

.skript-page .skript-pruefung {
  border-left: 1px solid var(--wk-rule);
  padding-left: 40px;
}

.skript-page .skript-pruefung h4 { color: #a33b2c; }
.skript-page .skript-pruefung li::before { background: #c8402c; }

.skript-page .skript-merksaetze {
  margin-top: 28px;
  background: var(--wk-ink);
  padding: 25px 28px 15px;
}

.skript-page .skript-merksaetze h4 { color: var(--wk-aqua); }

.skript-page .skript-merksaetze ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 34px;
}

.skript-page .skript-merksaetze li {
  color: rgba(255, 255, 255, .82);
}

.skript-page .skript-merksaetze li::before { background: var(--wk-aqua); }

@media (max-width: 720px) {
  .skript-page .skript-lernfelder,
  .skript-page .skript-merksaetze ul {
    grid-template-columns: 1fr;
  }

  .skript-page .skript-lernfelder { gap: 24px; }

  .skript-page .skript-pruefung {
    border-top: 1px solid var(--wk-rule);
    border-left: 0;
    padding-top: 24px;
    padding-left: 0;
  }

  .skript-page .skript-merksaetze { padding: 23px 22px 13px; }
}

/* Inhaltsverzeichnis mit Kapitelnummern statt Aufzählungspunkten. */
.skript-page .skript-toc {
  margin: 0;
  padding: 0;
  list-style: none;
}

.skript-page .skript-toc li { margin-bottom: 11px; }

.skript-page .skript-toc a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #4e5d60;
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
}

.skript-page .skript-toc a:hover { color: var(--wk-aqua-dark); }

.skript-page .skript-toc-nr {
  flex: none;
  color: var(--wk-aqua-dark);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Skript: Zeichentafel ─────────────────────────────────────────────────
 * Die amtlichen Abbildungen sind klein (Median 132 px) und haben einen weißen
 * Grund. Auf dem hellen Lesegrund verschwimmen ihre Ränder, deshalb bekommt
 * jede Kachel eine eigene weiße Fläche mit Haarlinie.
 *
 * Feste Kachelbreite statt Prozent: die Zeichen sind unterschiedlich hoch und
 * breit; ohne feste Spalte stünden sie wie hingeworfen. Die Bedeutung darunter
 * darf umbrechen — sie ist bei manchen Zeichen zwei Zeilen lang.
 */

.skript-page .skript-tafel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 20px 18px;
  margin: 26px 0 8px;
}

.skript-page .skript-tafel figure {
  margin: 0;
}

/* Feste Höhe für die Bildfläche, das Zeichen darin zentriert. Die amtlichen
   Abbildungen sind unterschiedlich hoch — hochkant, quer, quadratisch. Ohne
   feste Fläche stünden die Bildunterschriften auf verschiedenen Höhen, und
   die Tafel läse sich wie eine Pinnwand statt wie eine Übersicht. */
.skript-page .skript-tafel img {
  display: block;
  width: 100%;
  max-width: 132px;
  height: 108px;
  object-fit: contain;
  border: 1px solid var(--wk-rule);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.skript-page .skript-tafel figcaption {
  margin-top: 9px;
  color: #435156;
  font-size: 13.5px;
  line-height: 1.5;
}

/* Der Hinweis, dass ein Skript noch im Aufbau ist. Er steht im dunklen Kopf —
   dort gilt die helle Schrift, nicht die Palette des Lesebereichs. */
.skript-page .skript-stand {
  display: inline-block;
  margin-top: 18px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 7px 16px;
  color: rgba(255, 255, 255, .74);
  font-size: 13.5px;
  line-height: 1.5;
}

/* ── Skript: Schallsignale als Notation ───────────────────────────────────
 * Die amtlichen Abbildungen sind 38 bis 115 px breit — hochskaliert unscharf.
 * Die Signale sind aber Notation, kein Bild: eine Folge aus langen (—) und
 * kurzen (●) Tönen. Als Text gesetzt sind sie in jeder Größe scharf, lassen
 * sich vorlesen und im Druck-PDF vergrößern.
 */

.skript-page .skript-schall {
  display: grid;
  gap: 1px;
  margin: 26px 0 8px;
  border: 1px solid var(--wk-rule);
  border-radius: 10px;
  background: var(--wk-rule);
  overflow: hidden;
}

/* Zwei feste Spalten statt umbrechendem Flexlayout: bei langen Bedeutungen
   („Hafen oder Nebenwasserstraße; Ein- oder Ausfahrt mit Kursänderung nach
   Steuerbord.“) rutschte der Text sonst unter die Notation, und die Treppe aus
   Strichen und Punkten — der ganze Zweck der Tafel — war unterbrochen. */
.skript-page .skript-schall > div {
  display: grid;
  grid-template-columns: 148px 1fr;
  align-items: baseline;
  gap: 6px 18px;
  background: #fff;
  padding: 13px 16px;
}

@media (max-width: 460px) {
  .skript-page .skript-schall > div {
    grid-template-columns: 1fr;
  }
}

.skript-page .skript-noten {
  flex: none;
  min-width: 132px;
  color: var(--wk-ink);
  font-size: 17px;
  letter-spacing: .16em;
  line-height: 1.3;
  white-space: nowrap;
}

.skript-page .skript-schall > div > span + span {
  color: #435156;
  font-size: 14.5px;
  line-height: 1.5;
}