/* Entwurf Torsten Eil: gemeinsames Stylesheet für alle Seiten

   DAS SYSTEM (gilt für jede Regel in dieser Datei)

   Spaltenraster
     12 Spalten, Fuge 24px, Satzspiegel höchstens 1176px (Spalte 76px), Seitenrand mindestens 24px.
     Unter 1224px Fensterbreite bleiben es 12 Spalten mit 24px Fuge, die Spalten werden schmaler.
     Kopfleiste, Inhalt und Fuß stehen auf demselben Satzspiegel.

   Inhaltsbreiten (immer mittig, immer auf Spaltenlinien)
     12 Spalten  Kartenreihen, Videos, Text neben Bild
      8 Spalten  Abschnittsüberschrift (höchstens), Unterzeile, Kartenpaare
      6 Spalten  die Lesespalte: Titelschild, Vorspann, Lesetext, Einzelkarte, Aufklappliste, Formular
      4 Spalten  Zierlinie, Preiskarte
     Eine Lesespalte je Seite: Fließtext, Einzelkarte und Aufklappliste stehen immer auf denselben sechs
     Spalten und damit auf derselben Kante, auch über aufeinanderfolgende Abschnitte hinweg.
     Text neben Bild teilt die 12 Spalten in 6 + 5 (Querformat), 7 + 4 (Hochformat)
     oder 5 + 6 (Auftakt der Startseite); dazwischen bleibt immer genau eine Spalte frei.
     768 bis 1023px: die Lesespalte hat 8 Spalten, Überschriften höchstens 10, Kartenpaare 12;
     Text und Bild stehen untereinander, Dreierreihen laufen zu zweit.
     Unter 768px: eine Spalte, alles in voller Breite.

   Zeilenmodul
     1 Zeile = 28px = Zeilenhöhe des Fließtexts. Jede Zeilenhöhe und jeder senkrechte Abstand
     ist ein ganzes Vielfaches davon. Abstandsstufen: 0, 1, 2 und 4 Zeilen (28, 56, 112px).
       1 Zeile   zwischen Absätzen, zwischen Überschrift, Unterzeile und Vorspann, zwischen Kartenreihen,
                 Innenabstand der Karten oben und unten
       2 Zeilen  zwischen Abschnittskopf und Inhalt, vor Knopfzeilen nach Karten, über dem Seitenkopf
       4 Zeilen  zwischen Abschnitten (unter 768px: 3 Zeilen)
     Halbe Zeilen (14px) gibt es nur im Inneren von Bedienelementen (Knopf, Aufklapper, Menüzeile);
     nach außen ist jedes Element ganze Zeilen hoch.
     Rahmenlinien werden als Schatten oder Kontur gezeichnet und verändern keine Höhe.
     Bilder sind bei jeder Fensterbreite ganze Zeilen hoch (auf die nächste Zeile gerundet).
     Kopfleiste: 3 Zeilen, unter 768px 2 Zeilen.
     Einzige Ausnahme ist der Videobereich: Er behält auf Torstens Wunsch die Proportionen des
     ersten Entwurfs (Vorschaubilder 16:9, eigene Abstände und Schriftgrößen).

   Schriftgrade (gestuft, nicht fließend)
     Klein          15/28   Hinweise, Fuß, Navigation
     Text           18/28   Fließtext, Listen, Vorspann
     Zwischentitel  22/28   h3, Kartentitel, Unterzeile, Zwischentitel im Lesetext (unter 768px: 20/28)
     Abschnitt      36/56   h2 mit Zierlinie darüber und darunter, Preise
                            (unter 768px: h2 24/28, Preise 32/56)
     Knopf          16/28
     Das Titelschild ist ein Schild und kein Schriftgrad: sechs Spalten breit, Titelzeile 40px,
     Kopfzeile 24px; nur Titel mit mehr als 19 Zeichen (Kopfzeile: mehr als 30) werden kleiner,
     damit sie mit etwa einer Fuge Luft ins Schild passen.

   Ausrichtung
     Seitentitel (Titelschild), Abschnittsüberschriften, Vorspann und Kartentitel stehen mittig.
     Lesetext steht linksbündig; Überschriften im Lesetext stehen auf der Textkante.

   Seitenrand
     Der Rand neben dem Satzspiegel bleibt frei. Einzige Ausnahme ist der Eckknopf zum Übetagebuch: ein kleiner
     roter Knopf unten rechts, das mit dem Fenster mitläuft.
     Der Fuß steht auch auf kurzen Seiten am unteren Fensterrand.

   Tippziele
     Alleinstehende Links (Menü, Fuß, Kontaktwege) sind auf Tablet und Handy mindestens anderthalb Zeilen hoch (42px).

   Umbruchpunkte
     Stehen in em, weil alle Maße in rem stehen: Mit größerer Grundschrift im Browser wächst das ganze
     Raster mit, und die Umbrüche kommen entsprechend früher.
*/

:root {
  /* Farben aus Pergament und Thumbnails abgenommen */
  --pergament: #f0e2bf;
  --pergament-hell: #f8efd6;
  --elfenbein: #fcf7ea;
  --ochsenblut: #6d0f15;
  --ochsenblut-tief: #4a070c;
  --gold: #b98a3c;
  --gold-hell: #e9cd8b;
  --gold-dunkel: #7a5520;
  --tinte: #3b2411;
  --tinte-blass: #6b4a2a;
  --klavierlack: #15100c;
  --saal-text: #eadcb8;
  --saal-blass: #cdbb90;
  --linie: rgba(185, 138, 60, .75);

  /* Kapitälchen für Überschriften wie auf den Schildern, serifenlos für den Text */
  --schild: "Playfair Display SC", "Playfair Display", Georgia, serif;
  --text: "Source Sans 3", system-ui, sans-serif;
  --goldverlauf: linear-gradient(135deg, #8a6225 0%, #e9cd8b 22%, #b98a3c 45%, #f3dfa6 62%, #9c7230 80%, #d9b76c 100%);
  --saal-grund: radial-gradient(ellipse at 50% 0, rgba(185, 138, 60, .22), transparent 60%), var(--klavierlack);

  /* Raster: in rem, damit es mit der Schriftgröße des Browsers mitwächst (1rem = 16px) */
  --zeile: 1.75rem;   /* 28px */
  --fuge: 1.5rem;     /* 24px */
  --rand: 1.5rem;     /* 24px */
  --satz: 73.5rem;    /* 1176px = 12 × 76 + 11 × 24 */
  --kopfhoehe: calc(3 * var(--zeile));

  /* Breiten in Spalten; die Prozente beziehen sich auf den Satzspiegel */
  --s4: calc((100% - 11 * var(--fuge)) / 3 + 3 * var(--fuge));
  --s6: calc((100% - 11 * var(--fuge)) / 2 + 5 * var(--fuge));
  --s8: calc((100% - 11 * var(--fuge)) * 2 / 3 + 7 * var(--fuge));
  --s10: calc((100% - 11 * var(--fuge)) * 5 / 6 + 9 * var(--fuge));

  /* Schriftgrade */
  --klein: .9375rem;
  --normal: 1.125rem;
  --zwischen: 1.375rem;
  --gross: 2.25rem;
  --abschnitt-abstand: calc(4 * var(--zeile));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopfhoehe) + var(--zeile)); }
body {
  margin: 0;
  font-family: var(--text);
  font-size: var(--normal);
  line-height: var(--zeile);
  color: var(--tinte);
  background-color: var(--pergament);
  /* Papierkorn: feines Rauschen über der Grundfarbe */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .3  0 0 0 0 .12  0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
  /* Kurze Seiten füllen das Fenster: Der Inhalt nimmt die übrige Höhe, der Fuß steht unten */
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ochsenblut); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a, button, summary, select, [role="button"], input[type="checkbox"], label.einwilligung { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--ochsenblut); outline-offset: 3px; border-radius: 2px; }
.kopfleiste :focus-visible, .saal :focus-visible, .fuss :focus-visible { outline-color: var(--gold-hell); }
p { margin: 0 0 var(--zeile); }
ul { margin: 0; padding: 0; list-style: none; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; }

/* ───── Satzspiegel und Inhaltsbreiten ───── */
.rahmen { width: min(var(--satz), 100% - 2 * var(--rand)); margin-inline: auto; }
.breite-8 { width: var(--s8); margin-inline: auto; }
.breite-6, .textblock, .klappen, .artikel, .vorspann-block, .nachwort { width: var(--s6); margin-inline: auto; }
.breite-4 { width: var(--s4); margin-inline: auto; }
/* In einem schmaleren Block füllen Lesetext und Aufklapplisten dessen Breite */
:is(.breite-8, .breite-6, .breite-4, .textblock, .tb-text, .tb-bild) :is(.textblock, .klappen, .vorspann-block) { width: auto; }

/* ───── Senkrechter Rhythmus ───── */
.seitenkopf { padding-top: calc(2 * var(--zeile)); text-align: center; }
.seitenkopf > .rahmen > * { margin-block: 0; }
.seitenkopf > .rahmen > * + * { margin-top: var(--zeile); }
.seitenkopf > .rahmen > .text-bild { margin-top: calc(2 * var(--zeile)); text-align: left; }
.abschnitt { padding-top: var(--abschnitt-abstand); }
.abschnitt--ohne-titel { padding-top: calc(2 * var(--zeile)); }
main > :last-child:not(.saal) { padding-bottom: var(--abschnitt-abstand); }
:is(.textblock, .tb-text, .karte, .klappe-inhalt, .vorspann-block, .artikel, .breite-6, .breite-8) > :last-child { margin-bottom: 0; }
.luft-oben { margin-top: calc(2 * var(--zeile)); }

/* ───── Überschriften: Kapitälchen wie auf den Schildern ───── */
h1, h2, h3, h4 { font-family: var(--schild); margin: 0; font-weight: 900; overflow-wrap: break-word; }
h2 {
  font-size: var(--gross); line-height: calc(2 * var(--zeile));
  color: var(--ochsenblut);
  text-shadow: 0 1px 0 rgba(255, 245, 215, .7);
  text-wrap: balance; text-align: center;
  /* Getrennt wird nur auf schmalen Bildschirmen und nur bei Wörtern ab 18 Zeichen, mit mindestens sechs Zeichen je Teil */
  -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6;
  hyphenate-limit-chars: 18 6 6;
}
/* Kapitälchen ohne Ligaturen (fi, fl), sie wirken in Versalien wie Satzfehler */
h1, h2, h3, .unterzeile-gross, .knopf, .kopfleiste, .karte-marke, .klappe summary, .kennzahlen b, .betrag, .termin-datum, .status, .fuss-titel, .tagebuch-knopf {
  font-variant-ligatures: no-common-ligatures;
}
h3, .karte-titel { font-size: var(--zwischen); line-height: var(--zeile); font-weight: 700; color: var(--ochsenblut); letter-spacing: .01em; text-wrap: balance; }
/* Kartentitel als h2 (Karten ohne Abschnittsüberschrift direkt unter dem Seitentitel): sieht aus wie der Zwischentitel,
   ohne Schatten und Silbentrennung der Abschnittsüberschrift */
.karte-titel { text-shadow: none; hyphens: manual; }
h4 { font-family: var(--text); font-size: var(--normal); line-height: var(--zeile); font-weight: 700; color: var(--tinte); }

/* Abschnittskopf: Zierlinie, Überschrift, Zierlinie. Jede Zierlinie belegt genau eine Zeile. */
.abschnitt-kopf { margin-bottom: calc(2 * var(--zeile)); text-align: center; }
/* Keine Überschrift ist breiter als die schmale Lesespalte (sechs Spalten, darunter acht, auf dem Handy die volle Breite):
   längere Titel laufen ausgewogen in mehrere Zeilen */
.abschnitt-kopf > h2 { max-width: var(--s6); margin-inline: auto; text-wrap: balance; }
.abschnitt-kopf > .unterzeile-gross, .abschnitt-kopf > .vorspann-block { margin-top: var(--zeile); }
.zierlinie {
  display: flex; align-items: center; gap: var(--fuge);
  width: var(--s4); height: var(--zeile); margin-inline: auto;
  color: var(--gold);
}
.zierlinie::before, .zierlinie::after { content: ""; flex: 1; height: 5px; border-block: 1px solid currentColor; }
.zierlinie svg { width: 34px; height: 18px; flex: none; }
.unterzeile-gross {
  font-family: var(--schild); font-weight: 700; font-size: var(--zwischen); line-height: var(--zeile);
  color: var(--tinte); text-align: center; text-wrap: balance;
  width: var(--s6); margin: 0 auto;
}
.vorspann-block { text-align: center; }
.vorspann { font-style: italic; }
.nachwort { text-align: center; margin-top: calc(2 * var(--zeile)); margin-bottom: 0; }
.mittig { text-align: center; }
/* Einzelne Zeilen im Seitenkopf laufen höchstens acht Spalten breit wie die Unterzeile, längere ausgewogen in zwei Zeilen */
.seitenkopf > .rahmen > p.mittig { max-width: var(--s8); margin-inline: auto; text-wrap: balance; }
/* Wortgruppe, die beim Umbruch beisammen bleibt, solange sie in die Zeile passt (Datum, Uhrzeit) */
.zusammen { display: inline-block; }
/* Alleinstehender Textlink als Tippziel: anderthalb Zeilen hoch, ohne die Zeile zu verschieben */
.tippziel { display: inline-block; padding-block: calc(var(--zeile) / 4); margin-block: calc(var(--zeile) / -4); }

/* Lesetext: Zwischentitel stehen auf der Textkante, davor zwei Zeilen, danach eine.
   Leitet der Zwischentitel eine Liste ein, folgt sie ohne Abstand. */
:is(.textblock, .tb-text, .artikel) > :is(h2, h3) { text-align: left; margin-bottom: var(--zeile); }
:is(.textblock, .tb-text, .artikel) > h3:has(+ .liste), :is(.textblock, .tb-text, .artikel) > h4 { text-align: left; margin-bottom: 0; }
:is(.textblock, .tb-text, .artikel) > * + :is(h2, h3) { margin-top: calc(2 * var(--zeile)); }
:is(.textblock, .tb-text) > .karte { margin-bottom: var(--zeile); }
/* Hervorgehobener Satz: gleiche Größe, gleiche Kante, nur kräftiger und rot */
.these { font-weight: 600; color: var(--ochsenblut); }
/* Groß und rot hervorgehobener Satzteil am Ende eines Absatzes (YouTube-Seite), als eigene Zeile */
.gross-rot { display: block; margin-top: calc(var(--zeile) / 2); font-family: var(--schild); font-weight: 900; font-size: min(var(--gross), 1.875rem); line-height: calc(1.5 * var(--zeile)); color: var(--ochsenblut); text-wrap: balance; }
/* Zeilenfolge ohne Absatzabstand */
.kette { margin-bottom: var(--zeile); }
.kette p { margin: 0; }
.knopfzeile { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--zeile) var(--fuge); margin-top: var(--zeile); }
.knopfzeile--links { justify-content: flex-start; }
:is(.karten, .text-bild, .textblock, .breite-8) + .knopfzeile { margin-top: calc(2 * var(--zeile)); }
.hinweis-klein { font-size: var(--klein); color: var(--tinte-blass); font-style: italic; }
.platzhalter {
  display: inline-block; font-size: var(--klein); font-style: normal; letter-spacing: .02em;
  padding: 0 .75rem; border-radius: 99px; background: var(--gold-hell); color: var(--klavierlack);
  vertical-align: top;
}
.verbandslogo { width: 11rem; height: calc(2 * var(--zeile)); object-fit: contain; margin-inline: auto; } /* zwei Spalten, zwei Zeilen */

/* ───── Knopf: rot mit Goldrand, zwei Zeilen hoch ───── */
.knopf {
  display: inline-block;
  font-family: var(--schild); font-weight: 700; font-size: 1rem; letter-spacing: .03em; line-height: var(--zeile);
  text-align: center;
  color: var(--pergament-hell); text-decoration: none;
  padding: calc(var(--zeile) / 2 - 2px) var(--zeile);
  border: 2px solid transparent;
  background-image: linear-gradient(#7d141b, var(--ochsenblut-tief)), var(--goldverlauf);
  background-origin: border-box; background-clip: padding-box, border-box;
  border-radius: 2px;
  box-shadow: 0 2px 0 rgba(60, 30, 5, .35), 0 8px 16px -10px rgba(60, 30, 5, .6);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
  transition: box-shadow .15s, filter .15s;
  /* Nie breiter als der umgebende Kasten: sehr lange Wörter brechen notfalls um */
  max-width: 100%; overflow-wrap: break-word;
}
.knopf:hover { filter: brightness(1.08); box-shadow: 0 2px 0 rgba(60, 30, 5, .35), 0 12px 20px -10px rgba(60, 30, 5, .7); }
.knopf:active { filter: brightness(.95); box-shadow: 0 1px 0 rgba(60, 30, 5, .35); }
.knopf--hell {
  color: var(--ochsenblut);
  background-image: linear-gradient(var(--pergament-hell), #ecd9a8), var(--goldverlauf);
  text-shadow: none;
}
.knopf--klein { padding-inline: 1.25rem; font-size: var(--klein); }
.knopf[aria-disabled="true"] { opacity: .7; pointer-events: none; cursor: default; }

/* ───── Kopfleiste: Braun wie der Videobereich, immer sichtbar, auf dem Satzspiegel ───── */
.kopfleiste {
  position: sticky; top: 0; z-index: 40;
  background: var(--saal-grund);
  border-bottom: 3px solid transparent;
  border-image: var(--goldverlauf) 1;
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .8);
}
.kopfleiste-zeile {
  display: flex; align-items: center; gap: var(--fuge);
  height: calc(var(--kopfhoehe) - 3px);
}
/* Das Logo steht frei auf dem Klavierlack, linke Kante auf der ersten Spaltenlinie. Ein heller Goldrand folgt
   seiner Kontur: vier harte Schatten ohne Unschärfe, die zusammen eine Linie von 2px um die Kartusche legen. */
.marke {
  flex: none; display: flex; align-items: center;
  --kontur: #f1dfae;
}
.marke img {
  width: 10rem;
  filter: drop-shadow(2px 0 0 var(--kontur)) drop-shadow(-2px 0 0 var(--kontur)) drop-shadow(0 2px 0 var(--kontur)) drop-shadow(0 -2px 0 var(--kontur));
}
.marke:focus-visible { outline-color: var(--gold-hell); outline-offset: 4px; }
/* Die Menüpunkte stehen mittig zwischen Logo und den beiden Punkten rechts (Log-in und Kontakt) */
.hauptnav { flex: 1; }
.hauptnav > ul { display: flex; align-items: center; gap: 0 .75rem; }
.hauptnav > ul > :first-child, .hauptnav > ul > .nav-rechts { margin-left: auto; }
.hauptnav a, .hauptnav button, .hauptnav .nav-folgt {
  font-family: var(--schild); font-weight: 700; font-size: var(--klein); line-height: var(--zeile); letter-spacing: .02em; white-space: nowrap;
  color: var(--saal-text); text-decoration: none;
  background: none; border: 0; padding: 0; box-shadow: 0 2px 0 transparent;
}
.hauptnav a:hover, .hauptnav button:hover, .hauptnav [aria-current="page"], .hauptnav .aktiv > button {
  color: var(--gold-hell); box-shadow: 0 2px 0 var(--gold);
}
.nav-zweizeilig { display: inline-block; }
.nav-zweizeilig .nav-wort { display: block; line-height: 1.125rem; text-align: center; }
.mit-untermenue { position: relative; }
.mit-untermenue > button { padding-right: 3px; } /* Platz für die gedrehte Pfeilspitze */
.mit-untermenue > button::after {
  content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .45em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.2em) rotate(45deg); transition: transform .2s;
}
.mit-untermenue > button[aria-expanded="true"]::after { transform: translateY(.05em) rotate(-135deg); }
.untermenue {
  position: absolute; left: 50%; top: calc(100% + var(--zeile) / 2); transform: translateX(-50%);
  min-width: 15rem; padding: calc(var(--zeile) / 2) 0;
  background: var(--klavierlack); box-shadow: inset 0 0 0 1px var(--gold), 0 18px 30px -12px #000;
  display: none;
}
.untermenue::before { /* unsichtbare Brücke, damit das Menü beim Überfahren offen bleibt */
  content: ""; position: absolute; inset: calc(var(--zeile) / -2) 0 auto; height: calc(var(--zeile) / 2);
}
.mit-untermenue:hover > .untermenue, .mit-untermenue > button[aria-expanded="true"] + .untermenue { display: block; }
.hauptnav .untermenue a { display: block; padding: calc(var(--zeile) / 4) var(--fuge); box-shadow: none; }
.untermenue a:hover, .untermenue a[aria-current="page"] { background: rgba(233, 205, 139, .1); }
.hauptnav .untermenue .ebene2 a { padding-left: calc(2 * var(--fuge)); position: relative; }
.untermenue .ebene2 a::before { content: "–"; position: absolute; left: 1.6rem; color: var(--gold); }
/* Menüpunkt ohne Ziel (Log-in folgt): gesetzt wie ein Link, aber nicht anklickbar */
.hauptnav .nav-folgt { opacity: .6; cursor: default; }
.hauptnav .nav-folgt::after {
  content: "folgt"; margin-left: .35em; font-family: var(--text); font-size: .625rem; line-height: 1.4; letter-spacing: .04em;
  display: inline-block; padding: 0 .4rem; border-radius: 99px; background: var(--gold-hell); color: var(--klavierlack); vertical-align: .15em;
}
.menueknopf {
  display: none; margin-left: auto;
  font-family: var(--schild); font-weight: 700; font-size: var(--klein); line-height: var(--zeile); color: var(--gold-hell);
  background: none; border: 0; box-shadow: inset 0 0 0 1px var(--gold); border-radius: 2px; padding: calc(var(--zeile) / 4) 1rem;
}

/* ───── Titelschild: oben Ochsenblut mit heller Schrift, unten Pergament mit roter Schrift ─────
   Sitzt auf jeder Seite gleich: mittig, sechs Spalten breit, 5 Zeilen hoch (einzeilig 3 Zeilen). */
.schild-wrap { font-size: 1rem; line-height: var(--zeile); }
.schild {
  display: block;
  container-type: inline-size;
  width: var(--s6); margin-inline: auto;
  padding: 8px;
  background: var(--goldverlauf);
  box-shadow: 0 14px 30px -18px rgba(50, 25, 5, .75), 0 2px 0 rgba(60, 35, 5, .5);
  border-radius: 3px;
  font-weight: 900;
}
.schild-innen { display: block; border: 2px solid #3a2208; box-shadow: 0 0 0 1px rgba(255, 240, 190, .6); }
.schild-oben, .schild-unten { display: block; text-align: center; white-space: nowrap; overflow: hidden; }
.schild-oben {
  font-size: min(4.286cqw, calc(132cqw / var(--n, 30)));
  line-height: calc(3.125rem - 4px); letter-spacing: .04em;
  color: var(--pergament-hell);
  background:
    radial-gradient(ellipse at 50% 0, rgba(255, 190, 150, .16), transparent 65%),
    linear-gradient(#7a1219, var(--ochsenblut-tief));
  text-shadow: 0 .04em 0 #2a0305, 0 .09em .12em rgba(0, 0, 0, .55);
  border-bottom: 4px solid transparent;
  border-image: var(--goldverlauf) 1;
  box-sizing: content-box;
}
.schild-unten {
  font-size: min(7.143cqw, calc(136cqw / var(--n, 19)));
  line-height: calc(5.625rem - 28px); letter-spacing: .005em;
  color: var(--ochsenblut);
  background: radial-gradient(ellipse at 50% 50%, #fbf3dc, #ecdcb1 95%);
  text-shadow: 0 .03em 0 rgba(255, 250, 230, .9), 0 .07em .1em rgba(60, 20, 5, .35);
}
.schild-unten:first-child { line-height: calc(5.25rem - 28px); }
/* Zeichenzahl langer Schildzeilen, vom Generator vergeben */
.n20 { --n: 20; } .n21 { --n: 21; } .n22 { --n: 22; }
.n23 { --n: 23; } .n24 { --n: 24; } .n25 { --n: 25; } .n26 { --n: 26; } .n27 { --n: 27; }
.n28 { --n: 28; } .n29 { --n: 29; } .n30 { --n: 30; } .n31 { --n: 31; } .n32 { --n: 32; }
.n33 { --n: 33; } .n34 { --n: 34; } .n35 { --n: 35; } .n36 { --n: 36; }
/* Zusatzzeile im hellen Feld (Startseite): kleiner, in Ochsenblut; Titelzeile und Zusatz zusammen so hoch wie Titelzeile und Fußband vorher */
.schild-unten.mit-zusatz { line-height: calc(5.625rem - 28px - .75rem); padding-bottom: calc(.75rem + 6px); }
.schild-zusatz {
  display: block; font-size: min(1.375rem, 4cqw); line-height: var(--zeile); letter-spacing: .06em; font-weight: 700;
  margin-top: -.375rem;
}

/* ───── Prunkrahmen (Titelschild, Eingangsbild): profilierte Goldleiste mit Körnung, an den Ecken Voluten,
   oben und unten mittig eine Palmette, wie die Zierrahmen in den Video-Vorschaubildern.
   Grafiken in zier/, erzeugt von quelle/zier.py. Die Zier ragt etwas über die Leiste hinaus. ───── */
.prunk {
  position: relative; padding: 0; border-radius: 0;
  border: 12px solid #8e6421; border-image: url(zier/leiste.svg) 12 / 12px stretch;
  background: none;
  box-shadow: 0 20px 36px -24px rgba(40, 20, 5, .85);
}
.prunk .zier { position: absolute; width: 72px; height: 72px; background: url(zier/ecke.svg) center / contain no-repeat; pointer-events: none; }
.prunk .zier--ol { top: -21px; left: -21px; }
.prunk .zier--or { top: -21px; right: -21px; transform: scaleX(-1); }
.prunk .zier--ul { bottom: -21px; left: -21px; transform: scaleY(-1); }
.prunk .zier--ur { bottom: -21px; right: -21px; transform: scale(-1); }
.prunk .zier--oben, .prunk .zier--unten { width: 96px; height: 29px; left: calc(50% - 48px); background-image: url(zier/mitte.svg); }
.prunk .zier--oben { top: -25px; }
.prunk .zier--unten { bottom: -25px; transform: scaleY(-1); }
.gemaelde.prunk img { box-shadow: 0 0 0 1px #2a1a04; }

/* Bilder im Goldrahmen, gerade und auf Spaltenbreite */
.gemaelde {
  margin: 0; padding: 8px;
  background: var(--goldverlauf);
  box-shadow: inset 0 0 0 1px rgba(80, 50, 10, .55), 0 20px 36px -24px rgba(40, 20, 5, .85);
}
.gemaelde img { width: 100%; box-shadow: 0 0 0 1px #3a2208; object-fit: cover; }
.heft, .heftreihe img { width: 100%; background: #fff; box-shadow: 0 0 0 1px #b9a37a, 0 20px 34px -22px rgba(40, 20, 5, .8); object-fit: cover; }
/* Im Prunkrahmen entfällt der alte Goldrand: Die Leiste ist 12px breit, das Bild liegt direkt darin */
.gemaelde.prunk { padding: 0; background: none; box-shadow: 0 20px 36px -24px rgba(40, 20, 5, .85); }
/* Bilder belegen bei jeder Fensterbreite ganze Zeilen: Die Höhe ergibt sich aus der Spaltenbreite mal dem
   Seitenverhältnis des Motivs und wird auf die nächste Zeile gerundet (im Goldrahmen samt 2 × 8px Rahmen).
   object-fit schneidet den Rest ab, das sind höchstens 14px. Browser ohne round() zeigen das Bild unbeschnitten. */
.tb-bild, .heftreihe { container-type: inline-size; }
.text-bild--auftakt { --bild: .668; }  /* Theater 1018 × 680 */
.text-bild--quer { --bild: .778; }     /* Oper 478 × 372 */
.text-bild--hoch { --bild: 1.174; }    /* Porträt 477 × 560 */
.gemaelde img { height: calc(round(nearest, (100cqw - 16px) * var(--bild) + 16px, var(--zeile)) - 16px); }
.gemaelde.prunk img { height: calc(round(nearest, (100cqw - 24px) * var(--bild) + 24px, var(--zeile)) - 24px); }
.heft { height: round(nearest, 100cqw * 1.414, var(--zeile)); }  /* Heftseiten im Format A4 */
.heftreihe { --heftbreite: calc((100cqw - 2 * var(--fuge)) / 3); }
.heftreihe img { height: round(nearest, var(--heftbreite) * 1.414, var(--zeile)); }
/* Zeichnung als ruhiger Auftakt eines Abschnitts: mittig, sieben Zeilen hoch */
.zeichnung { height: calc(7 * var(--zeile)); width: auto; margin: 0 auto calc(2 * var(--zeile)); opacity: .85; }

/* ───── Karten: immer hell, nebeneinander gleich hoch ─────
   Der innere Zierrahmen liegt 8px innen. Der Text hält zu ihm bei jeder Kartenbreite und jeder Fensterbreite
   eine Zeile Abstand: waagrecht 28px, senkrecht 20px plus die Luft, die jede Textzeile über ihren Buchstaben
   mitbringt. Der Innenabstand ist deshalb oben und unten eine Zeile (die Karte bleibt ganze Zeilen hoch),
   links und rechts eine Zeile plus 8px. Lange Wörter brechen notfalls um. */
.karten { display: grid; gap: var(--zeile) var(--fuge); align-items: stretch; }
.karten--1 { grid-template-columns: minmax(0, 1fr); }
.karten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.karten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.karte {
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, var(--pergament-hell), #f1e3bd);
  padding: var(--zeile) calc(var(--zeile) + 8px);
  box-shadow: inset 0 0 0 1px var(--linie), 0 14px 26px -22px rgba(60, 30, 5, .7);
  outline: 1px solid var(--linie); outline-offset: -8px;
  overflow-wrap: break-word;
}
.karte:focus-visible { outline: 3px solid var(--ochsenblut); outline-offset: 3px; }
.karte > h3, .karte > .karte-titel { margin-bottom: var(--zeile); text-align: center; }
.karte .karte-fuss { margin-top: auto; padding-top: var(--zeile); text-align: center; }
.karte--mittig { text-align: center; }
.karte-marke {
  align-self: center;
  font-family: var(--schild); font-weight: 700; font-size: var(--klein); letter-spacing: .06em;
  color: var(--gold-dunkel);
}
a.karte { color: inherit; text-decoration: none; transition: box-shadow .2s; }
a.karte:hover, .karte--link:hover { box-shadow: inset 0 0 0 1px var(--gold), 0 18px 30px -20px rgba(60, 30, 5, .9); }
a.karte:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
/* Karte, die als Ganzes zum Ziel im Titel führt; weitere Links darin bleiben eigenständig klickbar */
.karte--link { transition: box-shadow .2s; }
.karte-ziel { color: inherit; text-decoration: none; }
.karte-ziel::after { content: ""; position: absolute; inset: 0; }
/* Der Fokusring umfasst die ganze Karte, weil die ganze Karte das Ziel ist */
.karte-ziel:focus-visible { outline: none; }
.karte--link:has(.karte-ziel:focus-visible) { outline: 3px solid var(--ochsenblut); outline-offset: 3px; }
/* Der Innenabstand vergrößert nur die Trefferfläche des Links (42px), die Zeile bleibt, wo sie ist */
.karte--link p a { position: relative; z-index: 1; padding-block: .65rem; }
.karte .unterzeile { font-style: italic; text-align: center; color: var(--tinte-blass); }
.karte .nachsatz { font-style: italic; }

/* Listen: Raute als Zeichen, jede Zeile auf dem Zeilenmodul */
.liste { margin-bottom: var(--zeile); }
.liste li { position: relative; padding-left: var(--fuge); }
.liste li::before {
  content: ""; position: absolute; left: 4px; top: calc(var(--zeile) / 2 - 3px);
  width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg);
}
.liste--nein li::before { content: "×"; left: 0; top: 0; width: auto; height: auto; background: none; transform: none; color: var(--tinte-blass); font-weight: 600; }
.liste--spalten { columns: 2; column-gap: var(--fuge); }
.liste--spalten li { break-inside: avoid; }
.liste b { color: var(--ochsenblut); }

/* Text neben Bild oder Karte: zwölf Spalten, dazwischen eine Spalte frei */
.text-bild { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--fuge); align-items: start; }
.tb-text, .tb-bild { grid-row: 1; }
.text-bild--quer > .tb-text { grid-column: 1 / span 6; }
.text-bild--quer > .tb-bild { grid-column: 8 / span 5; }
.text-bild--hoch > .tb-text { grid-column: 1 / span 7; }
.text-bild--hoch > .tb-bild { grid-column: 9 / span 4; }
.text-bild--auftakt > .tb-text { grid-column: 1 / span 5; }
.text-bild--auftakt > .tb-bild { grid-column: 7 / span 6; }
.text-bild--hoch.text-bild--bild-links > .tb-bild { grid-column: 1 / span 4; }
.text-bild--hoch.text-bild--bild-links > .tb-text { grid-column: 6 / span 7; }

/* ───── Aufklappbare Bausteine (Säulen, Fragen): ein heller Block mit feinen Trennlinien ───── */
.klappen {
  background: linear-gradient(160deg, var(--pergament-hell), #f1e3bd);
  box-shadow: inset 0 0 0 1px var(--linie), 0 14px 26px -22px rgba(60, 30, 5, .7);
}
.klappe + .klappe { box-shadow: inset 0 1px 0 var(--linie); }
.klappe summary {
  list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fuge);
  padding: calc(var(--zeile) / 2) var(--zeile);
  font-family: var(--schild); font-weight: 700; font-size: var(--zwischen); line-height: var(--zeile); color: var(--ochsenblut);
}
.klappe summary::-webkit-details-marker { display: none; }
.klappe summary::after {
  content: "+"; flex: none; width: var(--zeile); height: var(--zeile); display: grid; place-items: center;
  font-family: var(--text); font-weight: 400; font-size: var(--zwischen); line-height: 1; color: var(--gold-dunkel);
  box-shadow: inset 0 0 0 1px var(--gold); border-radius: 50%;
}
.klappe[open] summary::after { content: "–"; }
.klappe-inhalt { padding: var(--zeile); }

/* ───── Videobibliothek und andere braune Bereiche ───── */
.saal {
  position: relative;
  margin-top: var(--abschnitt-abstand);
  padding-block: calc(3 * var(--zeile) - 5px);
  background: var(--saal-grund);
  color: var(--saal-text);
  border-block: 5px solid transparent;
  border-image: var(--goldverlauf) 1;
}
.saal h2 { color: var(--pergament-hell); text-shadow: 0 2px 0 #000; }
.saal h3 { color: var(--pergament-hell); }
.saal .zierlinie { color: var(--gold-hell); }
.saal a:not(.knopf) { color: var(--gold-hell); }
.saal .vorspann-block { color: var(--saal-blass); }
/* Der Videobereich behält auf Torstens Wunsch die Proportionen des ersten Entwurfs: Vorschaubilder unbeschnitten
   im Verhältnis 16:9, dazu die ursprünglichen Abstände und Schriftgrößen. Er ist die eine bewusste Ausnahme vom
   Zeilenmodul. Die Spalten (drei mal vier Spalten, Fuge 24px) bleiben auf dem Raster. */
.abschnitt-kopf:has(+ .kennzahlen) { margin-bottom: 1.4rem; }
.kennzahlen { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem 3rem; margin-bottom: 2.6rem; }
.kennzahlen div { text-align: center; }
.kennzahlen b { display: block; font-family: var(--schild); font-weight: 900; font-size: 2.3rem; line-height: 1; color: var(--gold-hell); }
.kennzahlen span { display: block; color: var(--saal-blass); font-size: 1rem; line-height: 1.85rem; }
.videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem var(--fuge); }
.video { color: inherit; text-decoration: none; display: block; text-align: center; }
.video-bild { padding: 4px; background: var(--goldverlauf); box-shadow: 0 18px 30px -16px #000; transition: transform .2s; }
.video-bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video:hover .video-bild { transform: translateY(-4px); }
.video h3 { font-size: 1.08rem; line-height: 1.25; margin-top: .9rem; }
.video small { display: block; color: #b3a078; font-size: .95rem; line-height: 1.85rem; }
.video--gross { grid-column: span 2; grid-row: span 2; }
.video--gross h3 { font-size: 1.5rem; }
.saal-fuss { margin-top: 2.6rem; text-align: center; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.google-hinweis { margin: var(--zeile) 0 0; }
.saal .google-hinweis { margin-top: 1.6rem; }
/* Zweiter Hinweis direkt unter den Kennzahlen, mit dem gewohnten Abstand zu den Videos */
.saal .kennzahlen:has(+ .google-hinweis) { margin-bottom: 0; }
.saal .kennzahlen + .google-hinweis { margin: 1rem 0 2.6rem; }
.saal .google-hinweis { color: var(--saal-blass); }
.schluss { text-align: center; }
.schluss .rahmen > p { width: var(--s6); margin-inline: auto; }

/* ───── Preise ───── */
.betrag { font-family: var(--schild); font-weight: 900; font-size: var(--gross); line-height: calc(2 * var(--zeile)); color: var(--tinte); text-align: center; }
.betrag small { font-size: var(--zwischen); font-weight: 700; line-height: 1; }
.takt { font-style: italic; color: var(--tinte-blass); text-align: center; }
.wozu { color: var(--tinte-blass); text-align: center; }
.preis-karte .wozu { flex: 1; }

/* ───── Übetagebuch: drei Seiten, je vier Spalten ───── */
.heftreihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zeile) var(--fuge); align-items: start; margin-top: calc(2 * var(--zeile)); }

/* ───── Termine (Seminare, Gesellschaft) ───── */
.termin { text-align: center; }
.termin-datum { font-family: var(--schild); font-weight: 900; font-size: var(--zwischen); color: var(--tinte); margin-bottom: 0; text-wrap: balance; }
.termin-ort { font-style: italic; color: var(--tinte-blass); }
.status {
  align-self: center; display: inline-block; margin-bottom: var(--zeile);
  font-family: var(--schild); font-weight: 700; font-size: var(--klein); letter-spacing: .05em;
  padding: 0 .875rem; box-shadow: inset 0 0 0 1px currentColor; border-radius: 99px;
}
p > .status { margin-bottom: 0; vertical-align: top; }
.status--voll { color: var(--tinte-blass); }
.status--frei { color: #2f5d2a; }
/* In den Terminkarten steht der Stand als Etikett unter dem Titel: buchbar als grün gerahmtes Schildchen
   mit doppelter Linie, ausgebucht als größerer gerader Stempel in Ochsenblut; die ausgebuchte Karte tritt zurück */
.termin .status {
  align-self: center; border-radius: 1px;
  font-size: 1rem; line-height: calc(1.5 * var(--zeile)); letter-spacing: .1em; padding: 0 1.25rem;
}
.termin .status--frei {
  color: #2f5d2a; background: rgba(252, 247, 234, .85);
  box-shadow: inset 0 0 0 1px #4d7a3f, inset 0 0 0 3px rgba(252, 247, 234, .9), inset 0 0 0 4px rgba(77, 122, 63, .55);
}
.termin .status--frei::before { content: "✓\FE0E  "; }
.termin .status--voll {
  color: var(--ochsenblut); background: none; text-transform: uppercase; letter-spacing: .16em;
  font-size: var(--zwischen); line-height: calc(2 * var(--zeile)); padding: 0 1.75rem;
  box-shadow: inset 0 0 0 2px currentColor, inset 0 0 0 4px transparent, inset 0 0 0 5px currentColor;
  opacity: .82; mix-blend-mode: multiply;
}
.termin--voll > :not(.status) { opacity: .62; }
/* Seminarleistungen: jede Leistung in einer eigenen langen Kartusche (wie der Knopf zum Übetagebuch), so breit wie die Lesespalte.
   Rand 14px plus 14px Innenabstand ergeben oben und unten je eine Zeile. */
.leistungen { width: var(--s6); margin-inline: auto; display: grid; gap: var(--zeile); }
.leistung {
  padding: 14px 1.5rem; text-align: center;
  border: 14px solid transparent; border-image: url(zier/kartusche.svg) 20 fill / 14px stretch;
  --kontur: #f1dfae;
  filter: drop-shadow(2px 0 0 var(--kontur)) drop-shadow(-2px 0 0 var(--kontur)) drop-shadow(0 2px 0 var(--kontur)) drop-shadow(0 -2px 0 var(--kontur))
          drop-shadow(0 6px 8px rgba(40, 20, 5, .3));
}
.leistung > h3 { margin-bottom: .5rem; }
.leistung > p { margin: 0; text-wrap: pretty; }
/* Ausblick unter den Terminkarten */
.ausblick { margin-top: calc(2 * var(--zeile)); }
/* Mehrere PDF-Knöpfe stehen als Spalte gleicher Breite untereinander (13rem fasst die längste Aufschrift) */
.pdf-zeile { display: grid; grid-template-columns: minmax(0, 13rem); justify-content: center; gap: var(--zeile); margin-bottom: var(--zeile); }
.termin .knopfzeile { margin-top: 0; }

/* ───── Formulare (im Entwurf ohne Funktion) ───── */
.formular { display: grid; gap: var(--zeile); text-align: left; }
.formular label { font-weight: 600; }
.formular input[type="email"] {
  display: block; width: 100%; height: calc(2 * var(--zeile)); font: inherit; font-weight: 400; padding: 0 1rem;
  background: #fffaf0; border: 0; box-shadow: inset 0 0 0 1px var(--gold); border-radius: 2px; color: var(--tinte);
}
.formular .einwilligung { display: flex; gap: .75rem; align-items: flex-start; font-weight: 400; font-size: var(--klein); }
.formular .einwilligung input { margin: .3rem 0 0; accent-color: var(--ochsenblut); width: 1.125rem; height: 1.125rem; flex: none; }
.formular .knopf { justify-self: center; }
.formular-meldung { text-align: center; font-style: italic; color: var(--ochsenblut); margin: 0; }
/* Solange die Meldung leer ist, belegt sie keine Zeile; sie bleibt aber im Dokument, damit Vorleser die spätere Meldung ansagen */
.formular-meldung:empty { position: absolute; }

/* ───── Artikel (Was ist Kunst?, Rechtliches): ein ruhiger Lesetext auf sechs Spalten ───── */
.artikel h2 { font-size: var(--zwischen); line-height: var(--zeile); font-weight: 700; text-shadow: none; text-wrap: pretty; }
.artikel h3 { font-size: var(--normal); color: var(--tinte); margin-top: var(--zeile); }
.artikel > * + h4 { margin-top: 0; }
.rechtliches { overflow-wrap: anywhere; }

/* ───── Fuß: vier Blöcke zu je drei Spalten, die Linklisten beginnen auf einer Linie ───── */
.fuss {
  background: var(--klavierlack); color: #b3a078; font-size: var(--klein);
  padding-block: calc(2 * var(--zeile) - 3px) calc(6 * var(--zeile)); /* unten Platz für den quadratischen Eckknopf zum Übetagebuch */
  border-top: 3px solid transparent; border-image: var(--goldverlauf) 1;
}
.fuss-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: calc(2 * var(--zeile)) var(--fuge); }
.fuss-raster > div { grid-column: span 3; }
.marke--fuss { display: inline-flex; margin: 0 0 var(--zeile); padding: 2px; }
.fuss-titel { /* Spaltentitel im Fuß: gesetzt wie ein Zwischentitel, aber keine Überschrift der Seite */
  font-family: var(--schild); font-weight: 700; font-size: var(--klein); line-height: var(--zeile); letter-spacing: .01em;
  color: var(--gold-hell); margin: 0; overflow-wrap: break-word; text-wrap: balance;
}
.fuss a { color: #e3d2a6; text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss .ebene2 { padding-left: 1rem; }
.fuss address { font-style: normal; }
.fuss-tagline { font-style: italic; color: #e3d2a6; margin: 0; }
.fuss-unten {
  margin-top: calc(2 * var(--zeile)); padding-top: var(--zeile);
  box-shadow: inset 0 1px 0 rgba(233, 205, 139, .2);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--fuge);
}

/* ───── Knopf zum Übetagebuch: unten rechts in der Ecke, ohne Bewegung. Gestaltet wie das Logo: Kartusche mit
   eingezogenen Ecken, rotem Rand und Goldlinie auf Elfenbein, außen der helle Goldrand entlang der Kontur.
   Er ist niedriger als der untere Innenabstand des Fußes (sechs Zeilen) und verdeckt am Seitenende keinen Link. ───── */
.tagebuch-knopf {
  position: fixed; right: .75rem; bottom: .75rem; z-index: 30; /* unter der Kopfleiste */
  /* quadratisch, drei Zeilen mittig */
  display: grid; place-content: center; justify-items: center; width: 8rem; aspect-ratio: 1; box-sizing: border-box; padding: .25rem;
  font-family: var(--schild); font-weight: 700; font-size: .875rem; line-height: 1.25rem; letter-spacing: .03em; white-space: nowrap; text-align: center;
  color: var(--ochsenblut); text-decoration: none;
  border: 14px solid transparent; border-image: url(zier/kartusche.svg) 20 fill / 14px stretch;
  --kontur: #f1dfae;
  filter: drop-shadow(2px 0 0 var(--kontur)) drop-shadow(-2px 0 0 var(--kontur)) drop-shadow(0 2px 0 var(--kontur)) drop-shadow(0 -2px 0 var(--kontur))
          drop-shadow(0 6px 8px rgba(40, 20, 5, .45));
}
.tagebuch-knopf:hover { color: #9a1c24; }
/* Fokus: roter Ring auf hellem Hof, damit er auf Pergament und auf dunklen Flächen zu sehen ist */
.tagebuch-knopf:focus-visible { outline: 3px solid var(--ochsenblut); outline-offset: 3px; box-shadow: 0 0 0 3px var(--elfenbein); }

/* ───── Umbruchpunkte in em (bei 16px Grundschrift: 76.5em = 1224px, 64em = 1024px, 48em = 768px, 40em = 640px) ───── */

/* ───── Ab 1024px: Reihen zu dritt, Text neben Bild ───── */
@media (min-width: 64em) {
  /* Bleibt in einer Dreierreihe eine Karte übrig, steht sie in der mittleren Spalte */
  .karten--3 > :last-child:nth-child(3n + 1) { grid-column: 2; }
  /* Karten neben einem Bild schließen unten mit ihm ab: Das Bild behält mindestens seine Zeilenhöhe,
     die letzte Karte füllt den Rest; werden die Karten höher, wächst das Bild mit. */
  .text-bild--buendig { align-items: stretch; }
  .text-bild--buendig > :is(.tb-text, .tb-bild) { display: grid; }
  .text-bild--buendig > .tb-text > .karten { grid-template-rows: auto 1fr; }
  .text-bild--buendig .gemaelde { position: relative; min-height: round(nearest, (100cqw - 16px) * var(--bild) + 16px, var(--zeile)); }
  .text-bild--buendig .gemaelde img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
  .text-bild--buendig .gemaelde.prunk { min-height: round(nearest, (100cqw - 24px) * var(--bild) + 24px, var(--zeile)); }
  .text-bild--buendig .gemaelde.prunk img { inset: 0; width: 100%; height: 100%; }
}

/* ───── Unter 1224px: der Satzspiegel wird schmaler als die Navigation, das Menü klappt ein ─────
   Jeder Link ist anderthalb Zeilen hoch (42px), die Gruppentitel eine Zeile. Mit der zwei Zeilen hohen
   Kopfleiste des Handys passt das ganze Menü ohne Rollen auf 800px Bildschirmhöhe. */
@media (max-width: 76.49em) {
  .menueknopf { display: block; }
  .hauptnav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--klavierlack); box-shadow: inset 0 -3px 0 var(--gold);
    max-height: calc(100vh - var(--kopfhoehe)); max-height: calc(100dvh - var(--kopfhoehe)); overflow-y: auto;
    padding: calc(var(--zeile) / 2) var(--rand);
    margin-left: 0;
  }
  .hauptnav.offen { display: block; }
  .hauptnav > ul > :first-child, .hauptnav > ul > .nav-rechts { margin-left: 0; }
  .hauptnav > ul { flex-direction: column; align-items: stretch; gap: 0; width: min(var(--satz), 100%); margin-inline: auto; }
  .hauptnav > ul > li + li { box-shadow: inset 0 1px 0 rgba(233, 205, 139, .15); }
  .hauptnav a, .hauptnav button, .hauptnav .nav-folgt { display: block; width: 100%; text-align: left; padding: calc(var(--zeile) / 4) 0; font-size: var(--normal); box-shadow: none; }
  .hauptnav a:hover, .hauptnav button:hover, .hauptnav [aria-current="page"], .hauptnav .aktiv > button { box-shadow: none; }
  .untermenue { position: static; transform: none; display: block; box-shadow: none; background: none; padding: 0 0 0 var(--fuge); min-width: 0; }
  .untermenue::before { display: none; }
  .mit-untermenue > button { pointer-events: none; padding: 0; font-size: var(--klein); color: var(--gold-hell); }
  .mit-untermenue > button::after { display: none; }
  .hauptnav .untermenue a { padding: calc(var(--zeile) / 4) 0; font-size: 1rem; }
  .hauptnav .untermenue .ebene2 a { padding-left: var(--fuge); }
  .nav-zweizeilig .nav-wort { display: inline; line-height: inherit; }
  .untermenue .ebene2 a::before { left: .2rem; }
  /* Das offene Menü gehört allein auf den Bildschirm */
  body:has(.hauptnav.offen) .tagebuch-knopf { display: none; }
}

/* ───── 768 bis 1023px: 6 wird zu 8 Spalten, 8 wird zu 12, Text und Bild untereinander ───── */
@media (max-width: 63.99em) {
  :root { --s4: var(--s6); }
  .breite-8 { width: auto; }
  .unterzeile-gross { width: var(--s8); }
  .abschnitt-kopf > h2 { max-width: var(--s8); }
  .breite-6, .textblock, .klappen, .artikel, .vorspann-block, .nachwort, .schluss .rahmen > p, .schild, .leistungen { width: var(--s8); }
  .text-bild { display: block; }
  .text-bild > .tb-text { width: var(--s8); margin-inline: auto; }
  .text-bild > .tb-bild { width: var(--s6); margin: calc(2 * var(--zeile)) auto 0; }
  .text-bild > .tb-bild:has(> .karte) { width: var(--s8); }
  /* Dreierreihen laufen zu zweit; eine übrige Karte steht in gleicher Breite mittig darunter */
  .karten--3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .karten--3 > * { grid-column: span 2; }
  .karten--3 > :last-child:nth-child(odd) { grid-column: 2 / span 2; }
  .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-raster > div { grid-column: span 4; }
  .fuss-raster > .fuss-kopf { grid-column: span 12; }
  .seitenkopf > .rahmen > p.mittig { max-width: none; }
  /* Tippziele im Fuß: jeder Link anderthalb Zeilen hoch (42px) wie die Zeilen im Menü */
  .fuss-raster ul a, .fuss address a { display: inline-block; padding-block: calc(var(--zeile) / 4); }
  .fuss-unten :is(a, [role="link"]) { display: inline-block; padding: calc(var(--zeile) / 4) .25rem; }
}

/* ───── Unter 768px: eine Spalte, Kopfleiste zwei Zeilen hoch ───── */
@media (max-width: 47.99em) {
  :root {
    --kopfhoehe: calc(2 * var(--zeile));
    --zwischen: 1.25rem;
    --gross: 1.5rem;
    --abschnitt-abstand: calc(3 * var(--zeile));
    --s4: 100%;
  }
  h2 { line-height: var(--zeile); hyphens: auto; }
  .abschnitt-kopf > h2 { max-width: none; }
  .betrag { font-size: 2rem; }
  .breite-6, .textblock, .klappen, .artikel, .vorspann-block, .nachwort, .schluss .rahmen > p, .schild, .breite-4, .leistungen, .unterzeile-gross,
  .text-bild > .tb-text, .text-bild > .tb-bild, .text-bild > .tb-bild:has(> .karte) { width: auto; }
  .marke img { width: 6.25rem; }
  .schild { border-width: 8px; border-image-width: 8px; }
  .schild-oben { line-height: calc(1.75rem - 4px); }
  .schild-unten { line-height: calc(3.5rem - 20px); }
  .schild-unten:first-child { line-height: calc(3.5rem - 20px); }
  .schild-unten.mit-zusatz { line-height: calc(3.5rem - 20px - .5rem); padding-bottom: calc(.5rem + 6px); }
  .karten--2, .karten--3, .videos, .heftreihe { grid-template-columns: minmax(0, 1fr); }
  .karten--3 > *, .karten--3 > :last-child:nth-child(odd) { grid-column: auto; }
  .video--gross { grid-column: auto; grid-row: auto; }
  .heftreihe { --heftbreite: 100cqw; }
  .liste--spalten { columns: 1; }
  .fuss-raster > div { grid-column: span 6; }
  .fuss-raster > .fuss-kopf { grid-column: span 12; }
  /* Prunkrahmen: kleinere Zier, damit sie im Seitenrand bleibt */
  .prunk .zier { width: 52px; height: 52px; }
  .prunk :is(.zier--ol, .zier--or) { top: -15px; } .prunk :is(.zier--ul, .zier--ur) { bottom: -15px; }
  .prunk :is(.zier--ol, .zier--ul) { left: -15px; } .prunk :is(.zier--or, .zier--ur) { right: -15px; }
  .prunk :is(.zier--oben, .zier--unten) { width: 70px; height: 21px; left: calc(50% - 35px); }
  .prunk .zier--oben { top: -18px; } .prunk .zier--unten { bottom: -18px; }
  .tagebuch-knopf { right: .5rem; bottom: .5rem; width: 7rem; padding: .125rem; font-size: .75rem; line-height: 1.125rem; border-width: 12px; border-image-width: 12px; }
  /* Knöpfe in Karten: schmalerer Innenabstand; Wörter ab 18 Zeichen dürfen getrennt werden, wenn sie sonst nicht passen */
  .karte .knopf {
    padding-inline: .75rem; hyphens: auto;
    -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; hyphenate-limit-chars: 18 6 6;
  }
}

/* ───── Unter 640px: der Fuß läuft in einer Spalte ───── */
@media (max-width: 39.99em) {
  .fuss-raster { row-gap: var(--zeile); }
  .fuss-raster > div { grid-column: span 12; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .video:hover .video-bild { transform: none !important; }
}