/* ==================================================================
   KEROLINA – USA-Magazin (kerolina-magazin-v5.css) · MIG-096V-N3
   ------------------------------------------------------------------
   Fassung 5 „KEROLINA Reisejournal“: unten unverändert die Schicht der
   Fassung 3 (MIG-096V-N1: Kapitel, Themen aus details/summary, Kapitel-
   navigation, Redaktionszeile – Verhalten aus kerolina-magazin-v3.js,
   das unverändert weiterläuft), darüber ab „MIG-096V-N3“ die redaktio-
   nelle Gestaltung aller 16 Seiten. Fassung 4 (N2, Pflaumenbühne) wurde
   nie ausgeliefert und ist überholt.
   Neue Datei statt Überschreiben: v3.css bleibt live als Rückweg
   (18-deployment §4.2, deploy.py-Wächter §4.2). Einbindung und Cache-
   Version: magazin_bauen.py (?v=<SHA-256-Präfix>). Bausteine, Tokens
   und Messwerte: 11-component-library §5.7c.
   ================================================================== */
:root{--line:rgba(42,28,51,.10);--line-strong:rgba(42,28,51,.18);--ink-80:rgba(30,17,34,.80)}
/* Lesespalte 680 px ≈ 72–75 Zeichen bei 18 px Montserrat (02 §3.3; gemessen 720 px = 79 Zeichen, Kritik A). */
.mg-seite{--mg-mass:680px;--mg-nah:12px;--mg-satz:20px;--mg-block:34px;--mg-kapitel:62px}

/* Skip-Link, Sprungziele und rückwärts erreichte Elemente nicht unter der klebenden Kopfzeile (WCAG 2.2, 2.4.11).
   Kopfhöhe 63/71/79/71 px + 14 px Luft – wortgleich Mediathek/Manufaktur. MIG-096V: Die Kopfzeile wächst mit
   Textzoom und Schriftstufe (1280 px bei 200 %: 155 statt 79 px, gemessen) – kerolina-magazin-v2.js misst sie per
   ResizeObserver und setzt --mg-kopfzeile; die festen Werte bleiben der Rückfall ohne Skript. */
html{scroll-padding-top:calc(var(--mg-kopfzeile, 63px) + 14px)}
@media (min-width:481px){html{scroll-padding-top:calc(var(--mg-kopfzeile, 71px) + 14px)}}
@media (min-width:1081px) and (max-width:1439px){html{scroll-padding-top:calc(var(--mg-kopfzeile, 79px) + 14px)}}
.section--light :focus-visible,.mg-seite main :focus-visible{outline:3px solid var(--plum);outline-offset:2px}
.mg-schluss :focus-visible{outline-color:var(--gold)}
.mg-kopf ::selection,.mg-text ::selection,.mg-kapitelnav ::selection{background:var(--gold-25);color:var(--ink)}

/* Orientierungsband: Breadcrumb + Schriftgröße (zentraler Baustein includes/reise-breadcrumb.php). */
.orientierung{background:var(--plum);color:var(--cream);padding:6px 0 10px}
.orientierung .wrap{display:flex;justify-content:flex-end;min-height:44px;align-items:center}
.orientierung .reiseweg{flex:0 1 auto;min-width:0}
.orientierung .reiseweg__zeile{flex-wrap:wrap}
.orientierung .reiseweg__nav{flex:1 1 0}

/* Textzoom 200 % (WCAG 1.4.4): Silbentrennung in Überschriften, Wortumbruch als letzte Rückfallebene. */
main h1,main h2,main h3,main h4{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3;overflow-wrap:break-word;text-wrap:balance}
main h1{hyphens:manual;-webkit-hyphens:manual}
main p,main li,main figcaption,main a{overflow-wrap:break-word}
.site-footer a,.site-footer h3{overflow-wrap:break-word;hyphens:auto}
.site-footer__grid{grid-template-columns:1.3fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
.site-footer ul{grid-template-columns:minmax(0,1fr)}
@media (max-width:980px){.site-footer__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:560px){.site-footer__grid{grid-template-columns:minmax(0,1fr)}}

/* ---------------- Magazinkopf (NODE 1 A) ----------------
   Heller Verlaufskopf (.section--light, einziger zulässiger Verlauf) wie Mediathek und Bewertungen – bewusst
   kein Bild-Hero mit Verlauf wie Rundreise/Manufaktur: der Beitrag bleibt als Magazin erkennbar. Das Leitbild
   ist ein vorhandenes Artikelbild (magazin_bauen.py → artikel_plan, verschoben, nie verdoppelt).
   Varianten: --seitlich (bis 1,8 : 1, ab 980 px neben dem Titel), --band (Panorama unter dem Titel),
   --ohne-bild (Übersicht, Hubs, Videoseite: der bestehende Kopf ohne Illustration). */
.mg-kopf.section{padding:44px 0 40px}
.mg-kopf h1{max-width:920px;font-size:clamp(1.9rem,4.2vw,2.9rem)}
/* Kennzeile: Pflaume ist das Wort, Gold ist der Strich (02 §2.2). kerolina-base.css setzt .eyebrow in
   --gold-deep – auf Hell 2,3 : 1 (Detektorbefund MIG-096V); hier in der Bestandsform der Manufaktur. */
.mg-kopf .mg-kennzeile{display:inline-flex;align-items:baseline;gap:12px;color:var(--plum);margin-bottom:14px}
.mg-kopf .mg-kennzeile::before{content:"";flex:0 0 26px;height:1px;background:var(--gold-deep);transform:translateY(-.35em)}
.mg-kopf__mehr{margin-top:22px}
.mg-kopf--ohne-bild .mg-kopf__mehr{margin-top:18px}
.mg-kopf__lead{max-width:var(--mg-mass);font-size:1.08rem;line-height:1.68;color:var(--ink-80)}
.mg-kopf__lead a{color:var(--plum);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold-deep);text-underline-offset:4px}
.mg-leitbild{margin:26px 0 0}
.mg-leitbild img{display:block;width:100%;height:auto;border-radius:var(--radius);background:var(--plum-06)}
@media (min-width:980px){
  /* Seitlich: Titel und Einleitung als Gruppe mittig neben dem Bild (Freiraumzeilen oben/unten), das Bild
     über alle Zeilen; ist die Textspalte höher, steht das Bild mittig. */
  .mg-kopf--seitlich .mg-kopf__raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto auto 1fr;
    grid-template-areas:". bild" "titel bild" "mehr bild" ". bild";column-gap:48px}
  .mg-kopf--seitlich .mg-kopf__titel{grid-area:titel}
  .mg-kopf--seitlich .mg-kopf__mehr{grid-area:mehr}
  .mg-kopf--seitlich .mg-leitbild{grid-area:bild;align-self:center;margin:0}
  .mg-kopf--band .mg-leitbild{margin-top:30px}
  /* Band: Inhaltsbreite, höchstens 480 px hoch (Ausschnitt nur in der Höhe – nie breiter als das Original). */
  .mg-kopf--band .mg-leitbild img{max-height:480px;object-fit:cover}
}
/* Panorama über 2 : 1 unter 980 px als 2 : 1-Ausschnitt – sonst wird es auf dem Telefon 90–130 px flach. */
@media (max-width:979px){.mg-leitbild--breit img{aspect-ratio:2/1;object-fit:cover}}

/* Bildunterschrift: direkt am Bild, Goldstrich davor (dasselbe Motiv wie die Kennzeile). */
.mg-leitbild figcaption,.mg-bild figcaption,.mg-bildreihe figcaption{display:flex;align-items:baseline;gap:10px;margin-top:10px;font-size:.9rem;line-height:1.45;color:var(--ink-70)}
.mg-leitbild figcaption::before,.mg-bild figcaption::before,.mg-bildreihe figcaption::before{content:"";flex:0 0 18px;height:1px;background:var(--gold-deep);transform:translateY(-.3em)}

/* Regionen (Übersicht, Hubs) */
.mg-regionen{margin-top:22px}
.mg-regionen ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 12px}
.mg-regionen a,.mg-regionen span{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border:2px solid var(--plum-45);border-radius:var(--radius-sm);font-weight:600;font-size:.96rem;color:var(--plum);text-decoration:none;transition:background-color .2s ease,border-color .2s ease}
.mg-regionen a:hover{border-color:var(--plum);background:var(--plum-06)}
.mg-regionen span{background:var(--plum);border-color:var(--plum);color:var(--cream)}

/* ---------------- Artikelraster + Kapitelnavigation (MIG-096V-N1 NODE 4) ----------------
   Nur H2-Kapitel, nie eine eigene Scrollfläche (kein max-height, kein overflow). Bis 12 Kapitel ab 1081 px als
   offene Seitenspalte neben der Lesespalte; klebend nur, solange sie ganz ins Fenster passt – sonst setzt
   kerolina-magazin-v3.js .ist-frei und sie steht still am Anfang (Messung per ResizeObserver/resize, kein Scroll-
   Zuhörer). Darunter und bei mehr als 12 Kapiteln (.mg-kapitelnav--fluss, jede Breite) ein eingeklappter Block
   „Inhalt“ im Seitenfluss. Kein Scrollspy (CLAUDE.md §6: Auto-Follow gehört nur der Rundreise-Sprungnavigation). */
.mg-inhalt.section{padding-top:30px}
.mg-kapitelnav{max-width:var(--mg-mass);margin:0 0 var(--mg-block)}
.mg-kapitelnav__details{border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff}
.mg-kapitelnav__kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 16px;cursor:pointer;list-style:none;font-weight:600;font-size:1rem;color:var(--plum)}
.mg-kapitelnav__kopf::-webkit-details-marker{display:none}
/* Zustand als Zeichen (+ / −), nicht nur als Farbe; das Zeichen hat keinen Vorlesetext. */
.mg-kapitelnav__kopf::after{content:"+";content:"+" / "";font-size:1.35rem;line-height:1;font-weight:400}
.mg-kapitelnav__details[open] .mg-kapitelnav__kopf::after{content:"\2212";content:"\2212" / ""}
.mg-kapitelnav__liste{list-style:none;margin:0;padding:0 16px 10px}
.mg-kapitelnav__liste a{display:flex;align-items:center;min-height:44px;padding:6px 0;border-top:1px solid var(--line);color:var(--plum);font-size:.95rem;line-height:1.35;text-decoration:none}
.mg-kapitelnav__liste a:hover{text-decoration:underline;text-decoration-color:var(--gold-deep);text-underline-offset:4px}
.mg-kapitelnav__liste a:focus-visible{outline-offset:-1px}
@media (min-width:1081px){
  .mg-artikel--mit-spalte{display:grid;grid-template-columns:minmax(0,var(--mg-mass)) minmax(220px,1fr);column-gap:clamp(44px,5vw,80px);align-items:start}
  .mg-artikel--mit-spalte .mg-artikel__spalte{grid-column:1;grid-row:1;min-width:0}
  .mg-artikel--mit-spalte .mg-kapitelnav{grid-column:2;grid-row:1;position:sticky;top:calc(var(--mg-kopfzeile, 79px) + 24px);max-width:300px;margin:0;padding:4px 0 12px}
  .mg-artikel--mit-spalte .mg-kapitelnav.ist-frei{position:static}
  .mg-artikel--mit-spalte .mg-kapitelnav__details{border:0;background:none}
  .mg-artikel--mit-spalte .mg-kapitelnav__kopf{justify-content:flex-start;min-height:0;padding:0 0 12px;font-size:.95rem}
  .mg-artikel--mit-spalte .mg-kapitelnav__kopf::before{content:"";flex:0 0 26px;height:1px;background:var(--gold-deep)}
  .mg-artikel--mit-spalte .mg-kapitelnav__kopf::after{margin-left:auto;font-size:1.1rem;color:var(--ink-70)}
  .mg-artikel--mit-spalte .mg-kapitelnav__liste{padding:0;border-left:1px solid var(--line)}
  .mg-artikel--mit-spalte .mg-kapitelnav__liste a{min-height:0;padding:6px 0 6px 16px;border-top:0;font-size:.9rem;line-height:1.4}
}
@media (min-width:1081px) and (pointer:coarse){.mg-artikel--mit-spalte .mg-kapitelnav__liste a{min-height:44px}}
@media (min-width:1440px){.mg-artikel--mit-spalte .mg-kapitelnav{top:calc(var(--mg-kopfzeile, 71px) + 24px)}}

/* Rückweg zur Kapitelnavigation (unter 1081 px; bei der Navigation im Fluss auf jeder Breite): erscheint erst, wenn
   sie oberhalb des Fensters liegt (IntersectionObserver mit rootMargin in kerolina-magazin-v3.js, Lehre MV3 –
   ohne Verlängerung meldet ein Direktsprung keinen Wechsel; kein Scroll-Zuhörer); ohne Skript nie sichtbar.
   Ecke unten rechts wie .zum-anfang der Rundreisen; zentral scroll-margin-bottom 104 px hält Fokus frei. */
.mg-zum-verzeichnis{position:fixed;right:16px;bottom:16px;z-index:85;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid var(--plum-45);border-radius:var(--radius-sm);background:#fff;color:var(--plum);font-weight:600;font-size:.95rem;text-decoration:none;visibility:hidden;opacity:0;transition:opacity .2s ease,visibility .2s ease}
.mg-zum-verzeichnis::before{content:"";width:7px;height:7px;border-left:2px solid currentColor;border-top:2px solid currentColor;transform:translateY(2px) rotate(45deg)}
.mg-zum-verzeichnis.ist-sichtbar{visibility:visible;opacity:1}
.mg-zum-verzeichnis:hover{border-color:var(--plum);background:var(--plum-06)}
@media (min-width:1081px){.mg-zum-verzeichnis{display:none}.mg-zum-verzeichnis--immer{display:inline-flex}}

/* ---------------- Lesefluss (NODE 1 C) ---------------- */
.mg-text>*{max-width:var(--mg-mass)}
/* Hubs und Übersicht: Kartenraster und Videoraster nutzen die ganze Breite, nur der Fließtext bleibt Lesespalte. */
.mg-text--hub>.mg-kartenblock,.mg-text--hub>.mg-videoliste{max-width:none}
.mg-text p,.mg-text li{font-size:1rem;line-height:1.72}
.mg-text p{margin-bottom:var(--mg-satz)}
/* Kapitel: Goldstrich über der H2 (kein Kennwort, kein Zähler), deutlich mehr Luft davor als danach. */
.mg-text>h2{font-size:clamp(1.5rem,2.8vw,1.95rem);line-height:1.22;color:var(--plum);margin:var(--mg-kapitel) 0 16px}
.mg-text>h2::before{content:"";display:block;width:44px;height:2px;background:var(--gold-deep);margin-bottom:18px}
.mg-text>h3{font-size:clamp(1.22rem,2.1vw,1.4rem);line-height:1.28;color:var(--plum);margin:48px 0 12px}
.mg-text>h2+h3{margin-top:24px}
.mg-text h4{font-family:var(--font-body);font-size:1.02rem;font-weight:700;color:var(--plum);margin:26px 0 8px}
.mg-text>h2:first-child,.mg-text>h3:first-child{margin-top:0}
.mg-text strong{color:var(--plum)}
.mg-text a{color:var(--plum);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--gold-deep);text-underline-offset:4px}
.mg-text a:hover{text-decoration-color:var(--plum)}
.mg-liste{margin:0 0 var(--mg-satz) 1.25em;padding:0}
.mg-liste li{margin-bottom:8px;padding-left:.2em}
.mg-liste li::marker{color:var(--gold-deep)}
.mg-zitat{margin:var(--mg-block) 0;padding-left:16px;border-left:3px solid var(--gold-deep);font-style:italic;color:var(--ink-70)}

/* Bilder: nie größer als das Original zeichnen – die Breite kommt aus dem width-Attribut (= Breite der
   Quelle), max-width begrenzt auf die Spalte. KEIN width:auto (sonst ist der Platz vor dem Laden nicht
   reserviert; Messfalle Mediathek 24.09.2026: Verschiebung 0,27).
   Zuordnung (artikel_plan): eröffnet ein Bild seinen Abschnitt, steht es direkt unter der Überschrift;
   schließt es den vorigen ab, sitzt es nah am Text davor und hält Abstand zur nächsten Überschrift. */
.mg-bild,.mg-bildreihe{margin:var(--mg-block) 0}
.mg-text>p+.mg-bild,.mg-text>p+.mg-bildreihe,.mg-text>ul+.mg-bild,.mg-text>ol+.mg-bild{margin-top:24px}
.mg-text>h2+.mg-bild,.mg-text>h3+.mg-bild,.mg-text>h2+.mg-bildreihe,.mg-text>h3+.mg-bildreihe{margin-top:18px}
.mg-bild img,.mg-bildreihe img{max-width:100%;height:auto;border-radius:var(--radius-sm);background:var(--plum-06)}
.mg-bildreihe{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.mg-bildreihe figure{margin:0;min-width:0}
@media (min-width:560px){.mg-bildreihe{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Hochformat (Höhe > 1,15 × Breite): in der Lesespalte höchstens 440 px breit. */
.mg-bild--hoch img{max-width:min(100%,440px)}
@media (max-width:559px){.mg-bild--panorama img{width:100%;aspect-ratio:2/1;object-fit:cover}}

/* Vorhandener Übersichtslink im Text („Passende Rundreisen ansehen“): ruhiger Textlink mit Goldstrich statt
   Umrissknopf – Ziel und Wortlaut unverändert, kein Knopf im Lesefluss (NODE 1 D). */
.mg-knopf{margin:var(--mg-block) 0}
.mg-text .mg-knopf a{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-weight:600;color:var(--plum);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--gold-deep);text-underline-offset:5px}
.mg-text .mg-knopf a::before{content:"";flex:0 0 26px;height:1px;background:var(--gold-deep)}
.mg-text .mg-knopf a:hover{text-decoration-color:var(--plum)}

/* ---------------- Redaktionszeile (MIG-096V-N1 NODE 8) ----------------
   Autor und Erstveröffentlichung sichtbar unter der H1, identisch mit Article.author/datePublished. */
.mg-kopf__redaktion{display:flex;flex-wrap:wrap;column-gap:.35em;margin:14px 0 0;font-size:.95rem;line-height:1.55;color:var(--ink-70)}
.mg-kopf__redaktion a{color:var(--plum);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold-deep);text-underline-offset:4px}
.mg-kopf__redaktion a:hover{text-decoration-color:var(--plum)}

/* ---------------- Kapitel und Themenkarten (MIG-096V-N1 NODE 5) ----------------
   Kapitel = <section> mit sichtbarer H2 (Goldstrich wie bisher), Themen = Karten aus natives details/summary mit der
   H3 als Titel. Flache Seiten: das H2-Kapitel selbst ist die Karte (.mg-thema--kapitel). Keine verschachtelten
   Karten, keine Karte je Absatz, keine eigene Höhenanimation (natürliche Größenänderung). */
.mg-kapitel{margin:var(--mg-kapitel) 0 0}
.mg-text>.mg-kapitel:first-child{margin-top:0}
.mg-kapitel--karte+.mg-kapitel--karte{margin-top:16px}
.mg-kapitel__titel{font-size:clamp(1.5rem,2.8vw,1.95rem);line-height:1.22;color:var(--plum);margin:0 0 16px}
.mg-kapitel__titel::before{content:"";display:block;width:44px;height:2px;background:var(--gold-deep);margin-bottom:18px}
.mg-kapitel__text{margin-bottom:24px}
.mg-kapitel__text>*:last-child{margin-bottom:0}
.mg-kapitel__thema-ohne-text{font-size:clamp(1.12rem,1.9vw,1.3rem);line-height:1.3;color:var(--plum);margin:24px 0 12px}
.mg-thema{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft);transition:border-color .2s ease}
.mg-thema+.mg-thema{margin-top:14px}
.mg-thema:hover{border-color:var(--gold-45)}
/* Die ganze Kopfzeile ist die Bedienfläche (≥ 56 px hoch). Der Titel bleibt eine echte Überschrift. */
.mg-thema__kopf{display:flex;align-items:center;gap:16px;min-height:56px;padding:14px 18px;cursor:pointer;list-style:none;border-radius:var(--radius)}
.mg-thema__kopf::-webkit-details-marker{display:none}
.mg-thema__kopf::marker{content:""}
/* Zustandszeichen: Pflaume auf Weiß mit Kreis (nicht nur Farbe, WCAG 1.4.1/1.4.11), ohne Vorlesetext. */
.mg-thema__kopf::after{content:"+";content:"+" / "";flex:0 0 34px;height:34px;display:grid;place-items:center;margin-left:auto;border:1px solid var(--plum-45);border-radius:50%;color:var(--plum);font-size:1.25rem;font-weight:400;line-height:1}
.mg-thema[open]>.mg-thema__kopf::after{content:"\2212";content:"\2212" / ""}
.mg-thema[open]>.mg-thema__kopf{border-bottom:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0}
.mg-thema__kopf:hover::after{border-color:var(--plum);background:var(--plum-06)}
.mg-text .mg-thema__titel{margin:0;font-size:clamp(1.12rem,1.9vw,1.3rem);line-height:1.3;color:var(--plum)}
.mg-text .mg-thema--kapitel .mg-thema__titel{font-size:clamp(1.28rem,2.3vw,1.55rem);line-height:1.25}
.mg-thema__kopf:focus-visible{outline:3px solid var(--plum);outline-offset:2px}
.mg-thema__inhalt{padding:20px 18px 2px}
/* Telefon: Karte reicht 10 px (unter 360 px 14 px) in den Seitenrand (.wrap hält 22 px), Innenabstand 14 bzw. 12 px –
   sonst fällt die Lesezeile bei 320 px auf 22–23 Zeichen (gemessen, Ziel ≥ 24; Abnahme MIG-096V „Zeilenlänge“). */
@media (max-width:479px){.mg-thema{margin-left:-10px;margin-right:-10px}.mg-thema__kopf{padding:12px 14px}.mg-thema__inhalt{padding:16px 14px 2px}}
@media (max-width:359px){.mg-thema{margin-left:-14px;margin-right:-14px}.mg-thema__kopf{padding:12px}.mg-thema__inhalt{padding:14px 12px 2px}}
@media (min-width:560px){.mg-thema__kopf{padding:16px 26px}.mg-thema__inhalt{padding:24px 26px 6px}}
.mg-thema__inhalt>*:first-child{margin-top:0}
.mg-thema__inhalt>p+.mg-bild,.mg-thema__inhalt>p+.mg-bildreihe,.mg-thema__inhalt>ul+.mg-bild,.mg-thema__inhalt>ol+.mg-bild,
.mg-kapitel__text>p+.mg-bild,.mg-kapitel__text>p+.mg-bildreihe{margin-top:24px}
.mg-thema__inhalt>h4+.mg-bild,.mg-thema__inhalt>h4+.mg-bildreihe{margin-top:14px}
.mg-thema__inhalt>.mg-bild:last-child,.mg-thema__inhalt>.mg-bildreihe:last-child,.mg-thema__inhalt>.mg-knopf:last-child{margin-bottom:22px}
.mg-thema__inhalt h4:first-child{margin-top:0}

/* „Alle Themen öffnen/schließen“: Muster .route-toolbar (Referenz Great Lakes). Ohne Skript hidden. */
.mg-themen-steuerung{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 22px}
.mg-themen-steuerung[hidden]{display:none}
.mg-themen-steuerung__knopf{min-height:44px;padding:9px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff;box-shadow:var(--shadow-soft);color:var(--plum);font-family:var(--font-body);font-weight:600;font-size:.92rem;cursor:pointer;transition:border-color .2s ease}
.mg-themen-steuerung__knopf:hover{border-color:var(--gold-deep)}
@media (prefers-reduced-motion:reduce){.mg-thema,.mg-themen-steuerung__knopf,.mg-zum-verzeichnis{transition:none}}

/* ---------------- Videos (Cookiebot, Muster Mediathek F04) ----------------
   Cookiebot gibt das iframe erst mit Marketing-Einwilligung frei (data-cookieblock-src). Bühne in beiden
   Zuständen gleich groß (16:9): Hülle und Player liegen in derselben Rasterzelle – beim Freigeben springt nichts. */
.mg-videos__hinweis{max-width:var(--mg-mass);margin:0 0 26px;font-size:.95rem;line-height:1.6;color:var(--ink-70)}
.mg-videoliste{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:34px 28px;margin:0 0 var(--mg-block)}
@media (min-width:900px){.mg-videoliste--raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mg-videoliste>li{min-width:0;max-width:var(--mg-mass)}
.mg-video h2,.mg-video h3{font-size:clamp(1.1rem,2vw,1.26rem);line-height:1.3;color:var(--plum);margin:0 0 12px}
.mg-video__buehne{display:grid;aspect-ratio:16/9;border-radius:var(--radius-sm);overflow:hidden;background:var(--plum)}
.mg-video__player{grid-area:1/1;width:100%;height:100%;border:0}
.mg-video__player:not([src]){display:none}
.mg-video__schale{grid-area:1/1;position:relative;display:block;min-height:0}
.mg-video__hinweis{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;color:var(--cream)}
.mg-video__kasten{margin:12px;padding:10px 14px 12px;background:rgba(30,17,34,.94);border-radius:var(--radius-sm);max-width:calc(100% - 24px)}
.mg-video__art{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold);margin-bottom:8px}
/* Der Knopf hält seinen Platz, bis das Skript Cookiebot gefunden hat (kein Layoutsprung beim Einblenden). */
.mg-video__knopf{visibility:hidden}
.mg-video__knopf.ist-bereit{visibility:visible}
.mg-video .btn--outline-light:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.mg-video__direkt{margin-top:10px;font-size:.94rem}
.mg-video__direkt a{color:var(--plum);text-decoration:underline;text-decoration-color:var(--gold-deep);text-underline-offset:4px}
.mg-video__text{margin-top:10px}
.mg-video__text p{font-size:.98rem;line-height:1.65;margin-bottom:8px}

/* ---------------- Karten (Übersicht, Hubs) ----------------
   Ein Link je Karte (der Titel), die ganze Karte ist seine Klickfläche: Bild, Titel und „mehr dazu …“
   führen damit zwingend auf DASSELBE Ziel (MIG-096 NODE 4) – ein Tabstopp, kein Sammelverweis. */
.mg-kartenblock+.mg-kartenblock{margin-top:var(--mg-kapitel)}
.mg-kartenblock>h2{font-size:clamp(1.34rem,2.6vw,1.66rem);line-height:1.25;color:var(--plum);margin-bottom:22px;max-width:var(--mg-mass)}
.mg-karten{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width:640px){.mg-karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.mg-karten{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}}
.mg-karte{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;transition:border-color .2s ease}
.mg-karte__bild{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--plum-06)}
.mg-karte__text{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
/* Karten und Videos liegen innerhalb von .mg-text: deren Abstände für h2/h3/p gelten hier nicht. */
.mg-text .mg-karte__titel{font-size:1.24rem;line-height:1.28;color:var(--plum);margin:0 0 10px}
.mg-text .mg-karte p,.mg-text .mg-video p{margin-bottom:0}
.mg-text .mg-video h2,.mg-text .mg-video h3{margin:0 0 12px}
.mg-text .mg-video__text p{margin-bottom:8px}
.mg-karte__link{color:var(--plum);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--gold-deep);text-underline-offset:4px}
.mg-karte__link::after{content:"";position:absolute;inset:0}
.mg-text .mg-karte__punkte{margin:0 0 0 1.15em;padding:0;color:var(--ink-80);max-width:none}
.mg-text .mg-karte__punkte li{margin-bottom:3px;font-size:.97rem;line-height:1.5}
.mg-karte__punkte li::marker{color:var(--gold-deep)}
.mg-karte__beschreibung{font-size:.97rem;line-height:1.55;color:var(--ink-80)}
main .mg-karte__mehr{margin:auto 0 0;padding-top:14px;font-weight:600;font-size:.95rem;color:var(--plum)}
.mg-karte__mehr::before{content:"";display:block;height:1px;background:var(--line);margin-bottom:12px}
@media (hover:hover){.mg-karte:hover{border-color:var(--plum-45)}.mg-karte:hover .mg-karte__link{text-decoration-color:var(--plum)}}
.mg-karte__link:focus-visible{outline:3px solid var(--plum);outline-offset:2px}
@supports selector(:has(a)){
.mg-karte__link:focus-visible{outline:none}
.mg-karte:has(.mg-karte__link:focus-visible){outline:3px solid var(--plum);outline-offset:3px}
}

/* ---------------- Passende Rundreisen (Linktext = sichtbare Ziel-H1, Muster Startseite MIG-090) ----------------
   Goldkante links = Akzentkarten-Muster des Designsystems (rundreise-detail.css: „Akzentkarten tragen die
   Goldkante des Hero weiter“) – bewusst, kein Detektor-Anlass. */
.mg-reisen h2,.mg-themen h2{font-size:clamp(1.34rem,2.6vw,1.66rem);line-height:1.25;color:var(--plum);margin-bottom:10px}
.mg-reisen .lead{margin-bottom:22px;color:var(--ink-80)}
.mg-reiseliste{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:760px){.mg-reiseliste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.mg-reiseliste--drei{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mg-reise{position:relative;min-width:0;padding:18px 20px;border:1px solid var(--line);border-left:3px solid var(--gold-deep);border-radius:var(--radius-sm);background:#fff;transition:border-color .2s ease}
.mg-reise__link{display:block;color:var(--plum);text-decoration:none}
.mg-reise__link::after{content:"";position:absolute;inset:0}
.mg-reise__keywordzeile{display:block;font-size:.86rem;letter-spacing:.02em;font-weight:600;color:var(--ink-70);margin-bottom:4px}
.mg-reise__reisename{display:block;font-family:var(--font-display);font-size:1.18rem;line-height:1.3;font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--gold-deep);text-underline-offset:4px}
.mg-reise__kontext{margin-top:8px;font-size:.94rem;color:var(--ink-70)}
@media (hover:hover){.mg-reise:hover{border-color:var(--plum-45);border-left-color:var(--gold-deep)}}
.mg-reise__link:focus-visible{outline:3px solid var(--plum);outline-offset:4px}
.mg-reisen__alle{margin-top:22px}

/* ---------------- Weitere Themen im USA-Magazin ---------------- */
.mg-themen{border-top:1px solid var(--line)}
.mg-themen__gruppen{display:grid;grid-template-columns:minmax(0,1fr);gap:26px 40px;margin-top:18px}
@media (min-width:820px){.mg-themen__gruppen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mg-themen h3{font-size:1.06rem;color:var(--plum);margin-bottom:10px}
.mg-themen ul{list-style:none}
.mg-themen li{padding:7px 0;border-bottom:1px solid var(--line)}
.mg-themen a{color:var(--plum);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--gold-deep);text-underline-offset:4px}
.mg-themen a:hover{text-decoration-color:var(--plum)}
.mg-themen__alle{margin-top:18px}

/* ---------------- Schlussbereich: nächster Schritt (Muster Die Manufaktur, D-12A1-3) ---------------- */
.mg-schluss{text-align:center}
.mg-schluss h2{max-width:760px;margin:0 auto 14px}
.mg-schluss__nutzen{max-width:720px;margin:0 auto 10px;font-size:1.08rem;color:var(--cream)}
.mg-schluss__text{max-width:720px;margin:0 auto 26px;color:var(--cream-80)}
.mg-wahl{margin-top:18px}
.mg-wahl__frage{font-size:1rem;font-weight:600;color:var(--cream);margin:0 auto 12px;max-width:700px}
.mg-wahl__knoepfe{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.mg-wahl--planung{margin-top:22px;padding-top:20px;border-top:1px solid var(--gold-25)}

@media (max-width:640px){
  .mg-seite{--mg-satz:18px;--mg-block:28px;--mg-kapitel:50px}
  .mg-kopf.section{padding:30px 0 30px}
  .mg-karte__text{padding:16px 18px 18px}
  .mg-text>h3{margin-top:40px}
}
@media (prefers-reduced-motion:reduce){.mg-karte,.mg-reise,.mg-regionen a,.mg-zum-verzeichnis{transition:none}}
@media print{.site-header,.site-footer,.orientierung,.skip-link,.mg-video__buehne,.mg-schluss,.mg-themen,.mg-kapitelnav,.mg-themen-steuerung,.mg-zum-verzeichnis{display:none!important}
  .mg-thema::details-content{content-visibility:visible;display:block}}

/* ==================================================================
   MIG-096V-N3 · KEROLINA Reisejournal
   ------------------------------------------------------------------
   Eine ruhige Lesefläche aus warmem Papier für Kopf und Artikel; Pflaume
   rahmt (Kopfzeile, Orientierungsband, Schluss) und führt die Bedienung,
   Gold ist nur Linie und Zustand. Themen sind keine schwebenden Karten
   mehr, sondern Kapitelzeilen eines Inhaltsverzeichnisses: Haarlinie,
   Serifentitel, Zeichen im Kreis. Geöffnet geht der Text ohne Rahmen in
   die Lesefläche über. Bilder treten über das Lesemaß hinaus.
   ================================================================== */
.mg-seite{
  --n3-papier:#fbf8f1;                         /* Lesefläche (Papier, warm) */
  --n3-papier-tief:#f3ecdd;                    /* zweite Fläche: Passende Rundreisen */
  --n3-linie:rgba(42,28,51,.14);               /* Haarlinie zwischen Kapitelzeilen */
  --n3-linie-stark:rgba(42,28,51,.28);
  --n3-shell:1360px;                           /* Außenmaß der Inhalte ohne Rand */
  --n3-rand:clamp(20px,4vw,56px);              /* Seitenrand; mobil 20 px, ohne negative Ränder */
  --n3-mass:43rem;                             /* Lesemaß Fließtext: Median ≈ 71, P90 ≈ 76 Zeichen (gemessen, §5.7c) */
  --n3-haupt:62rem;                            /* Hauptspalte = größte Bildbreite im Artikel */
  --n3-rail:clamp(196px,15vw,232px);           /* Kapitelnavigation neben dem Artikel ab 1081 px */
  --n3-gap:clamp(40px,4.6vw,80px);
  --n3-kapitel:clamp(72px,8vw,128px);          /* Luft vor einem Kapitel */
  --n3-ease:cubic-bezier(.23,1,.32,1);
  --n3-dauer:180ms
}
@media (max-width:359px){.mg-seite{--n3-rand:14px}}
.mg-seite main{background:var(--n3-papier)}

/* Einheitliches Außenmaß: Kopf, Artikel, Rundreisen, Themen, Hubs haben dieselbe Kante. */
.mg-seite .mg-kopf>.wrap,.mg-seite .mg-inhalt>.wrap,.mg-seite .mg-reisen>.wrap,.mg-seite .mg-themen>.wrap{max-width:calc(var(--n3-shell) + 2 * var(--n3-rand));padding-left:var(--n3-rand);padding-right:var(--n3-rand)}

/* ---------------- Redaktioneller Kopf ----------------
   Mittig gesetzter Titel wie ein Aufmacher: Kennzeile zwischen zwei Goldstrichen, große Serifen-H1,
   Redaktionszeile, darunter das Titelbild in voller Außenbreite. Kein Verlauf – das Papier läuft durch. */
.mg-seite .mg-kopf.section{background:var(--n3-papier);padding:clamp(40px,6vw,88px) 0 clamp(28px,3.4vw,48px)}
.mg-seite .mg-kopf__raster{display:block}
.mg-seite .mg-kopf__titel,.mg-seite .mg-kopf__mehr{text-align:center;margin-left:auto;margin-right:auto}
.mg-seite .mg-kopf .mg-kennzeile{display:flex;justify-content:center;align-items:center;gap:16px;margin:0 0 clamp(18px,2vw,26px);font-size:.78rem;letter-spacing:.22em}
.mg-seite .mg-kopf .mg-kennzeile::before,.mg-seite .mg-kopf .mg-kennzeile::after{content:"";flex:0 0 36px;height:1px;background:var(--gold-deep);transform:none}
.mg-seite .mg-kopf h1{max-width:20ch;margin:0 auto;font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1.06;letter-spacing:-.012em;color:var(--plum)}
.mg-seite .mg-kopf__redaktion{justify-content:center;margin:clamp(18px,2vw,26px) auto 0;font-size:.9rem;letter-spacing:.01em}
.mg-seite .mg-kopf__mehr{max-width:var(--n3-mass);margin-top:clamp(20px,2.4vw,30px)}
.mg-seite .mg-kopf__lead{max-width:none;font-size:clamp(1.06rem,1.3vw,1.18rem);line-height:1.7;color:var(--ink-80)}
.mg-seite .mg-regionen ul{justify-content:center}
/* Titelbild: volle Außenbreite, flache Kante, Ausschnitt nur in der Höhe (nie breiter als das Original). */
.mg-seite .mg-leitbild{margin:clamp(30px,4vw,56px) auto 0;max-width:var(--n3-shell)}
.mg-seite .mg-leitbild img{border-radius:2px;margin:0 auto;max-height:min(68vh,660px);object-fit:cover}
/* Nie breiter als die größte Bildstufe (5.7): Bandbilder (> 1,8 : 1) haben 1440-px-Stufen und füllen das Außenmaß;
   Titelbilder bis 1,8 : 1 („seitlich“) wählt der Generator ab LEITBILD_MIN_BREITE = 960 px – sie stehen mittig mit
   höchstens 960 px (abnahme.js „kein Bild über seine größte Stufe“, N3). */
.mg-seite .mg-kopf--seitlich .mg-leitbild{max-width:min(100%,960px)}
.mg-seite .mg-leitbild figcaption{justify-content:flex-end;margin-top:12px;font-size:.84rem}
@media (min-width:980px){
  .mg-seite .mg-kopf--seitlich .mg-kopf__raster{display:block}
  .mg-seite .mg-kopf--seitlich .mg-leitbild{margin:clamp(30px,4vw,56px) auto 0}
  .mg-seite .mg-kopf--band .mg-leitbild img{max-height:min(68vh,660px)}
}

/* ---------------- Artikelraster ----------------
   Ab 1081 px: schmale Kapitelnavigation links, Hauptspalte rechts (höchstens --n3-haupt). Der Fließtext steht
   mittig im Lesemaß, Bilder nutzen die ganze Hauptspalte. Ohne Seitenspalte (viele Kapitel): Hauptspalte mittig. */
.mg-seite .mg-inhalt.section{padding:clamp(24px,3vw,40px) 0 clamp(64px,7vw,112px);background:var(--n3-papier)}
/* Die .wrap hält das Außenmaß; die Spalten selbst sind begrenzt (Hauptspalte höchstens --n3-haupt, mittig). */
.mg-seite .mg-artikel:not(.mg-artikel--mit-spalte)>*{max-width:var(--n3-haupt);margin-left:auto;margin-right:auto}
@media (max-width:1080px){.mg-seite .mg-artikel--mit-spalte>*{max-width:var(--n3-haupt);margin-left:auto;margin-right:auto}}
@media (min-width:1081px){
  .mg-seite .mg-artikel--mit-spalte{grid-template-columns:var(--n3-rail) minmax(0,var(--n3-haupt));justify-content:center;column-gap:var(--n3-gap)}
  .mg-seite .mg-artikel--mit-spalte .mg-artikel__spalte{grid-column:2}
  .mg-seite .mg-artikel--mit-spalte .mg-kapitelnav{grid-column:1;max-width:none;padding-top:6px}
}
/* Lesemaß: jeder Textbaustein steht mittig im Maß, Bilder, Bildreihen und Videos dürfen breiter sein. */
.mg-seite .mg-beitrag .mg-text>*,.mg-seite .mg-kapitel>*,.mg-seite .mg-thema__inhalt>*,.mg-seite .mg-kapitel__text>*{max-width:var(--n3-mass);margin-left:auto;margin-right:auto}
.mg-seite .mg-beitrag .mg-text>.mg-kapitel,.mg-seite .mg-kapitel>.mg-thema,.mg-seite .mg-kapitel>.mg-kapitel__text,
.mg-seite .mg-thema__inhalt>.mg-bild,.mg-seite .mg-thema__inhalt>.mg-bildreihe,.mg-seite .mg-kapitel__text>.mg-bild,
.mg-seite .mg-kapitel__text>.mg-bildreihe,.mg-seite .mg-beitrag .mg-text>.mg-bild,.mg-seite .mg-beitrag .mg-text>.mg-bildreihe,
.mg-seite .mg-thema__inhalt>.mg-videoliste,.mg-seite .mg-kapitel>.mg-videoliste,.mg-seite .mg-beitrag .mg-text>.mg-videoliste{max-width:none}

/* ---------------- Lesesatz ---------------- */
.mg-seite .mg-beitrag .mg-text p,.mg-seite .mg-beitrag .mg-text li{font-size:1.02rem;line-height:1.8;color:var(--ink-92)}
.mg-seite .mg-beitrag .mg-text p{margin-bottom:1.55em}
.mg-seite .mg-beitrag .mg-text a{font-weight:500}
.mg-seite .mg-text h4{font-family:var(--font-display);font-size:1.16rem;font-weight:700;line-height:1.3;margin:2em auto .6em}
/* Einstieg: der erste Absatz eines geöffneten Themas etwas größer (gleicher Wortlaut). */
.mg-seite .mg-thema__inhalt>p:first-child,.mg-seite .mg-kapitel__text>p:first-child{font-size:clamp(1.06rem,1.25vw,1.14rem);line-height:1.74;color:var(--ink)}

/* ---------------- Kapitel ----------------
   Große Serifen-H2 über dem Lesemaß mit Goldstrich; Kapitelübergang = viel Luft und eine Haarlinie über die
   Hauptspalte. Keine Außenkarte, keine Kennzeile, kein Zähler (5.7: Eyebrow-Verzicht). */
.mg-seite .mg-kapitel{margin-top:var(--n3-kapitel);padding-top:var(--n3-kapitel);border-top:1px solid var(--n3-linie)}
.mg-seite .mg-text>.mg-kapitel:first-child{margin-top:clamp(12px,2vw,24px);padding-top:0;border-top:0}
.mg-seite .mg-kapitel__titel{font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.12;letter-spacing:-.008em;margin-bottom:clamp(22px,2.6vw,34px)}
.mg-seite .mg-kapitel__titel::before{width:56px;height:2px;margin-bottom:clamp(18px,2vw,26px)}
.mg-seite .mg-kapitel__text{margin-bottom:clamp(28px,3vw,40px)}
.mg-seite .mg-kapitel__thema-ohne-text{font-size:clamp(1.24rem,1.9vw,1.5rem)}

/* ---------------- Themen als Kapitelzeilen ----------------
   Geschlossen: eine Zeile im Lesemaß zwischen Haarlinien – Serifentitel links, Zeichen im Kreis rechts. Die ganze
   Zeile ist Bedienfläche (≥ 64 px). Geöffnet: Kreis gefüllt, der Text läuft ohne Rahmen auf dem Papier weiter,
   Bilder treten auf die Hauptspalte heraus. Kein Schatten, keine Fläche, keine Höhenanimation. */
.mg-seite .mg-thema{background:none;border:0;border-radius:0;box-shadow:none;margin:0}
.mg-seite .mg-thema+.mg-thema{margin-top:0}
.mg-seite .mg-thema>.mg-thema__kopf{max-width:var(--n3-mass);margin:0 auto;min-height:64px;padding:18px 0;gap:20px;border-top:1px solid var(--n3-linie);border-radius:0;transition:color var(--n3-dauer) var(--n3-ease)}
.mg-seite .mg-kapitel>.mg-thema:last-child>.mg-thema__kopf,.mg-seite .mg-kapitel>.mg-thema:last-of-type:not([open])>.mg-thema__kopf{border-bottom:1px solid var(--n3-linie)}
.mg-seite .mg-thema[open]>.mg-thema__kopf{border-bottom:0;border-radius:0}
.mg-seite .mg-thema>.mg-thema__kopf::after{flex-basis:36px;height:36px;border-color:var(--n3-linie-stark);font-size:1.2rem;transition:background-color var(--n3-dauer) var(--n3-ease),border-color var(--n3-dauer) var(--n3-ease),color var(--n3-dauer) var(--n3-ease)}
.mg-seite .mg-thema[open]>.mg-thema__kopf::after{background:var(--plum);border-color:var(--plum);color:var(--cream)}
.mg-seite .mg-text .mg-thema__titel{font-size:clamp(1.2rem,1.7vw,1.42rem);line-height:1.3;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:6px;transition:text-decoration-color var(--n3-dauer) var(--n3-ease)}
@media (hover:hover){
  .mg-seite .mg-thema>.mg-thema__kopf:hover .mg-thema__titel{text-decoration-color:var(--gold-deep)}
  .mg-seite .mg-thema>.mg-thema__kopf:hover::after{border-color:var(--plum);background:var(--plum-06)}
  .mg-seite .mg-thema[open]>.mg-thema__kopf:hover::after{background:var(--plum-mid);border-color:var(--plum-mid)}
  .mg-seite .mg-thema:hover{border-color:transparent}
}
.mg-seite .mg-thema>.mg-thema__kopf:focus-visible{outline-offset:4px}
.mg-seite .mg-thema__inhalt{padding:6px 0 clamp(36px,4vw,56px)}
/* Flache Seiten: das H2-Kapitel ist die Zeile – etwas größer, aber dieselbe Form. */
.mg-seite .mg-kapitel--karte{margin-top:0;padding-top:0;border-top:0}
.mg-seite .mg-kapitel--karte+.mg-kapitel--karte{margin-top:0}
.mg-seite .mg-kapitel--karte>.mg-thema>.mg-thema__kopf{min-height:72px;padding:22px 0}
.mg-seite .mg-kapitel--karte:last-child>.mg-thema>.mg-thema__kopf{border-bottom:1px solid var(--n3-linie)}
.mg-seite .mg-kapitel--karte>.mg-thema[open]>.mg-thema__kopf{border-bottom:0}
.mg-seite .mg-text .mg-thema--kapitel .mg-thema__titel{font-size:clamp(1.36rem,2.2vw,1.8rem);line-height:1.2}
.mg-seite .mg-text .mg-thema--kapitel .mg-thema__titel::before{display:none}
/* Telefon: keine negativen Ränder mehr – die Zeile steht im Seitenrand wie der Text. */
@media (max-width:479px){.mg-seite .mg-thema{margin-left:0;margin-right:0}.mg-seite .mg-thema>.mg-thema__kopf{padding:16px 0;gap:14px}.mg-seite .mg-thema__inhalt{padding:4px 0 32px}}

/* ---------------- Bilder ----------------
   Treten aus dem Lesemaß auf die Hauptspalte (nie über die Originalbreite). Bildunterschrift klein am Bild. */
.mg-seite .mg-beitrag .mg-bild,.mg-seite .mg-beitrag .mg-bildreihe{margin:clamp(30px,3.6vw,52px) auto}
/* Die Abbildung ist so breit wie ihr Bild (nie breiter als das Original) und steht mittig; die Unterschrift
   läuft genau unter dem Bild – auch bei kleinen Altbildern. */
.mg-seite .mg-thema__inhalt>.mg-bild,.mg-seite .mg-kapitel__text>.mg-bild,.mg-seite .mg-beitrag .mg-text>.mg-bild{width:fit-content;max-width:100%}
.mg-seite .mg-beitrag .mg-bild>img{display:block}
.mg-seite .mg-beitrag .mg-bild img,.mg-seite .mg-beitrag .mg-bildreihe img{border-radius:2px}
.mg-seite .mg-beitrag .mg-bild figcaption,.mg-seite .mg-beitrag .mg-bildreihe figcaption{font-size:.84rem;margin-top:12px}
.mg-seite .mg-beitrag .mg-bild--hoch img{max-width:min(100%,460px)}
.mg-seite .mg-beitrag .mg-bildreihe{gap:clamp(16px,2vw,28px)}
.mg-seite .mg-thema__inhalt>.mg-bild:last-child,.mg-seite .mg-thema__inhalt>.mg-bildreihe:last-child{margin-bottom:0}
.mg-seite .mg-thema__inhalt>.mg-knopf:last-child{margin-bottom:0}

/* ---------------- Steuerung „Alle Themen öffnen/schließen“ ----------------
   Untergeordnet: zwei Textschalter rechts über dem ersten Kapitel, getrennt durch eine Goldfuge. ≥ 44 px. */
.mg-seite .mg-themen-steuerung{max-width:var(--n3-mass);margin:0 auto clamp(20px,2.4vw,32px);justify-content:flex-end;gap:0}
.mg-seite .mg-themen-steuerung[hidden]{display:none}
.mg-seite .mg-themen-steuerung__knopf{min-height:44px;padding:8px 14px;border:0;border-radius:var(--radius-sm);background:none;box-shadow:none;color:var(--plum);font-weight:600;font-size:.86rem;letter-spacing:.02em;text-decoration:underline;text-decoration-color:var(--gold-deep);text-decoration-thickness:1px;text-underline-offset:5px;transition:color var(--n3-dauer) var(--n3-ease),background-color var(--n3-dauer) var(--n3-ease)}
.mg-seite .mg-themen-steuerung__knopf+.mg-themen-steuerung__knopf{position:relative}
.mg-seite .mg-themen-steuerung__knopf+.mg-themen-steuerung__knopf::before{content:"";position:absolute;left:0;top:50%;width:1px;height:18px;margin-top:-9px;background:var(--gold-deep)}
@media (hover:hover){.mg-seite .mg-themen-steuerung__knopf:hover{background:var(--plum-06);text-decoration-color:var(--plum)}}
.mg-seite .mg-themen-steuerung__knopf:active{transform:scale(.98)}

/* ---------------- Kapitelnavigation ----------------
   Seitenspalte: stille Begleitung ohne Fläche – „Inhalt“ mit Goldstrich, Einträge an einer Haarlinie, keine
   Scrollfläche (5.7a). Im Fluss (Telefon, Tablet, viele Kapitel): eingeklappter Block zwischen zwei Haarlinien
   im Lesemaß, geöffnet zwei- bzw. dreispaltig. */
.mg-seite .mg-kapitelnav{max-width:var(--n3-mass);margin:0 auto clamp(28px,3vw,44px)}
.mg-seite .mg-kapitelnav__details{border:0;border-top:1px solid var(--n3-linie-stark);border-bottom:1px solid var(--n3-linie-stark);border-radius:0;background:none}
.mg-seite .mg-kapitelnav__kopf{min-height:52px;padding:10px 0;font-family:var(--font-body);font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.mg-seite .mg-kapitelnav__kopf::after{font-size:1.3rem;letter-spacing:0;color:var(--plum)}
.mg-seite .mg-kapitelnav__liste{padding:4px 0 14px}
.mg-seite .mg-kapitelnav__liste a{border-top:1px solid var(--n3-linie);font-size:.95rem;line-height:1.4;padding:8px 0;hyphens:auto;-webkit-hyphens:auto}
@media (min-width:700px){.mg-seite .mg-kapitelnav__liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}}
@media (min-width:1081px){
  .mg-seite .mg-kapitelnav--fluss{max-width:var(--n3-haupt)}
  .mg-seite .mg-kapitelnav--fluss .mg-kapitelnav__liste{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mg-seite .mg-artikel--mit-spalte .mg-kapitelnav__details{border:0}
  .mg-seite .mg-artikel--mit-spalte .mg-kapitelnav__kopf{min-height:0;padding:0 0 16px;font-size:.74rem}
  .mg-seite .mg-artikel--mit-spalte .mg-kapitelnav__kopf::before{flex-basis:28px}
  .mg-seite .mg-artikel--mit-spalte .mg-kapitelnav__kopf::after{font-size:1.05rem;color:var(--ink-70)}
  .mg-seite .mg-artikel--mit-spalte .mg-kapitelnav__liste{display:block;padding:0;border-left:1px solid var(--n3-linie-stark)}
  .mg-seite .mg-artikel--mit-spalte .mg-kapitelnav__liste a{position:relative;padding:7px 0 7px 18px;border-top:0;font-size:.88rem;line-height:1.42;color:var(--ink-80);transition:color var(--n3-dauer) var(--n3-ease)}
  .mg-seite .mg-artikel--mit-spalte .mg-kapitelnav__liste a::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:2px;background:transparent;transition:background-color var(--n3-dauer) var(--n3-ease)}
  .mg-seite .mg-artikel--mit-spalte .mg-kapitelnav__liste a:hover{color:var(--plum);text-decoration:none}
  .mg-seite .mg-artikel--mit-spalte .mg-kapitelnav__liste a:hover::before,.mg-seite .mg-artikel--mit-spalte .mg-kapitelnav__liste a[aria-current]::before{background:var(--gold-deep)}
  .mg-seite .mg-artikel--mit-spalte .mg-kapitelnav__liste a[aria-current]{color:var(--plum);font-weight:600}
}

/* ---------------- Text direkt im Artikel, Videos ---------------- */
.mg-seite .mg-beitrag .mg-text>p:first-child{font-size:clamp(1.08rem,1.35vw,1.2rem);line-height:1.72;color:var(--ink)}
.mg-seite .mg-beitrag .mg-videoliste{max-width:var(--n3-haupt);margin-left:auto;margin-right:auto}
.mg-seite .mg-beitrag .mg-videoliste>li{max-width:none}
/* Videoseite: Galerie in zwei Spalten ab 900 px – jedes Video mit seiner Überschrift, 16 : 9 in beiden Zuständen. */
@media (min-width:900px){.mg-seite .mg-beitrag .mg-videoliste{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,44px)}
  /* Unterschiedlich lange Titel: die Videoflächen einer Reihe stehen trotzdem auf einer Linie (subgrid; ohne
     Unterstützung bleibt jede Karte für sich – kein Fehler, nur weniger Ordnung). */
  .mg-seite .mg-beitrag .mg-videoliste>li{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start;margin-bottom:clamp(40px,4vw,64px)}
  .mg-seite .mg-beitrag .mg-videoliste>li>h2,.mg-seite .mg-beitrag .mg-videoliste>li>h3{align-self:end}}
.mg-seite .mg-beitrag .mg-video h2,.mg-seite .mg-beitrag .mg-video h3{font-size:clamp(1.2rem,1.8vw,1.46rem)}
.mg-seite .mg-video__buehne{border-radius:2px}

/* ---------------- Passende Rundreisen ----------------
   Zweite Papierfläche, mittige Überschrift; die Reisen als ruhige Einträge mit Goldstrich oben statt Karten. */
.mg-seite .mg-reisen.section{background:var(--n3-papier-tief);padding:clamp(56px,7vw,104px) 0}
.mg-seite .mg-reisen h2,.mg-seite .mg-themen h2{font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.15;text-align:center;margin-bottom:14px}
.mg-seite .mg-reisen .lead{max-width:var(--n3-mass);margin:0 auto clamp(30px,3.4vw,48px);text-align:center}
.mg-seite .mg-reiseliste{gap:clamp(20px,2.4vw,36px)}
.mg-seite .mg-reise{padding:22px 0 0;border:0;border-top:2px solid var(--gold-deep);border-radius:0;background:none}
.mg-seite .mg-reise__reisename{font-size:clamp(1.2rem,1.6vw,1.4rem)}
@media (hover:hover){.mg-seite .mg-reise:hover{border-color:var(--gold-deep)}.mg-seite .mg-reise:hover .mg-reise__reisename{text-decoration-color:var(--plum)}}
.mg-seite .mg-reisen__alle{text-align:center;margin-top:clamp(28px,3vw,44px)}

/* ---------------- Weitere Themen ---------------- */
.mg-seite .mg-themen.section{background:var(--n3-papier);padding:clamp(56px,7vw,104px) 0;border-top:0}
.mg-seite .mg-themen__gruppen{max-width:var(--n3-haupt);margin:clamp(24px,3vw,40px) auto 0}
.mg-seite .mg-themen h3{font-size:.8rem;font-family:var(--font-body);font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding-bottom:10px;border-bottom:1px solid var(--n3-linie-stark)}
.mg-seite .mg-themen li{padding:10px 0;border-bottom-color:var(--n3-linie)}
.mg-seite .mg-themen a{font-weight:500}
.mg-seite .mg-themen__alle{max-width:var(--n3-haupt);margin:26px auto 0}

/* ---------------- Übersicht und Hubs ----------------
   Magazinraster statt Kästen: Bild, Serifentitel, Stichpunkte, „mehr dazu“ – ohne Rahmen und Fläche. Die ganze
   Karte bleibt die Klickfläche ihres einen Links (MIG-096 NODE 4). */
.mg-seite .mg-text--hub>p{max-width:var(--n3-mass);margin-left:auto;margin-right:auto;font-size:1.04rem;line-height:1.78}
.mg-seite .mg-text--hub>p:first-child{font-size:clamp(1.08rem,1.35vw,1.2rem);color:var(--ink)}
.mg-seite .mg-kartenblock{margin-top:clamp(40px,5vw,72px)}
.mg-seite .mg-kartenblock+.mg-kartenblock{margin-top:clamp(64px,7vw,112px);padding-top:clamp(48px,5vw,80px);border-top:1px solid var(--n3-linie)}
.mg-seite .mg-kartenblock>h2{max-width:none;text-align:center;font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.15;margin-bottom:clamp(28px,3.4vw,48px)}
.mg-seite .mg-kartenblock>h2::before{content:"";display:block;width:56px;height:2px;background:var(--gold-deep);margin:0 auto clamp(16px,1.8vw,22px)}
.mg-seite .mg-karten{gap:clamp(32px,3.4vw,52px) clamp(20px,2.4vw,36px)}
.mg-seite .mg-karte{background:none;border:0;border-radius:0;overflow:visible}
.mg-seite .mg-karte__bild{border-radius:2px}
.mg-seite .mg-karte__text{padding:18px 0 0}
.mg-seite .mg-text .mg-karte__titel{font-size:clamp(1.22rem,1.5vw,1.38rem);line-height:1.26}
.mg-seite .mg-karte__link{text-decoration-color:transparent;transition:text-decoration-color var(--n3-dauer) var(--n3-ease)}
.mg-seite main .mg-karte__mehr{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase}
.mg-seite .mg-karte__mehr::before{background:var(--n3-linie)}
@media (hover:hover){.mg-seite .mg-karte:hover .mg-karte__link{text-decoration-color:var(--gold-deep)}}
.mg-seite .mg-text--hub>.mg-videoliste{max-width:var(--n3-haupt);margin-left:auto;margin-right:auto}

/* ---------------- Telefon ----------------
   Kennzeile ohne Umbruch (kürzere Striche, weniger Sperrung), Redaktionszeile zweizeilig ohne hängenden Punkt,
   lange Einleitungen linksbündig (mittig gesetzte Blöcke über fünf Zeilen lesen sich schlecht), Steuerung als zwei
   gleich breite Schalter nebeneinander, Kapitelluft kleiner. */
@media (max-width:559px){
  .mg-seite{--n3-kapitel:56px}
  .mg-seite .mg-kopf .mg-kennzeile{gap:12px;font-size:.72rem;letter-spacing:.16em}
  .mg-seite .mg-kopf .mg-kennzeile::before,.mg-seite .mg-kopf .mg-kennzeile::after{flex-basis:20px}
  .mg-seite .mg-kopf__redaktion{flex-direction:column;align-items:center}
  .mg-seite .mg-kopf__trenner{display:none}
  .mg-seite .mg-themen-steuerung{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .mg-seite .mg-themen-steuerung[hidden]{display:none}
  .mg-seite .mg-themen-steuerung__knopf{width:100%;min-height:48px;padding:10px 16px;border:1px solid var(--n3-linie-stark);border-radius:2px;line-height:1.35;text-decoration:none;font-size:.9rem}
  .mg-seite .mg-themen-steuerung__knopf+.mg-themen-steuerung__knopf::before{display:none}
}
/* Magazineigene Knöpfe dürfen umbrechen: „Cookie-Einstellungen öffnen“ im Video und der Übersichtslink unter
   „Passende Rundreisen“ liefen bei 320 px mit 200 % Text über den Rand (.btn ist global nowrap – der globale
   Befund bleibt dort, wo er entsteht, hier wird er nur für diese beiden Orte aufgehoben). */
.mg-seite .mg-video__knopf,.mg-seite .mg-reisen__alle .btn{white-space:normal;text-align:center;max-width:100%}
.mg-seite .mg-video__buehne{grid-template-columns:minmax(0,1fr)}
.mg-seite .mg-video__kasten{min-width:0}
/* Telefon, Köpfe mit langer Einleitung (Übersicht, Hubs, Videoseite): der ganze Kopf linksbündig – mittig gesetzter
   Titel über linksbündigem Fließtext wirkt zerrissen. Beiträge ohne Einleitung bleiben mittig. */
@media (max-width:699px){
  .mg-seite .mg-kopf__mehr{text-align:left}.mg-seite .mg-regionen ul{justify-content:flex-start}
  .mg-seite .mg-kopf:has(.mg-kopf__lead) .mg-kopf__titel{text-align:left}
  .mg-seite .mg-kopf:has(.mg-kopf__lead) .mg-kennzeile{justify-content:flex-start}
  .mg-seite .mg-kopf:has(.mg-kopf__lead) .mg-kennzeile::after{display:none}
  .mg-seite .mg-kopf:has(.mg-kopf__lead) h1{margin-left:0}
  .mg-seite .mg-kopf:has(.mg-kopf__lead) .mg-kopf__redaktion{justify-content:flex-start;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .mg-seite .mg-thema>.mg-thema__kopf,.mg-seite .mg-thema>.mg-thema__kopf::after,.mg-seite .mg-text .mg-thema__titel,
  .mg-seite .mg-themen-steuerung__knopf,.mg-seite .mg-kapitelnav__liste a,.mg-seite .mg-kapitelnav__liste a::before,.mg-seite .mg-karte__link{transition:none}
  .mg-seite .mg-themen-steuerung__knopf:active{transform:none}
}

/* ==================================================================
   N3 · Feinschliff nach der bedingten Freigabe (NODE 4, 28.09.2026)
   Überschriften ohne Trennung · Steuerung mobil · drei Bildvarianten ·
   Rhythmus langer Texte · KEROLINA-Handschrift. Messwerte: §5.7c.
   ================================================================== */

/* ---------------- Überschriften: keine Silbentrennung, keine Wortbrüche ----------------
   Überschriften trennen nie (Betreiberentscheidung). Damit kein Wort mitten im Wort umbricht, ist die mobile
   Größe aus dem längsten tatsächlich vorkommenden Wort je Ebene abgeleitet (Messung über alle 16 Seiten):
   Größe = Anteil Bildschirmbreite + Anteil rem – sie wächst mit der Textgröße (200 %), aber nur so weit, wie das
   längste Wort bei 320 px noch in die Zeile passt. overflow-wrap bleibt allein als letzte Rückfallebene gegen
   Überlauf (Reflow, WCAG 1.4.10). */
.mg-seite main h1,.mg-seite main h2,.mg-seite main h3,.mg-seite main h4{hyphens:manual;-webkit-hyphens:manual;word-break:normal}
.mg-seite .mg-kopf h1{text-wrap:balance}
@media (max-width:699px){
  .mg-seite .mg-kopf h1{font-size:min(2.9rem,calc(7.6vw + .6rem));line-height:1.1}                 /* „Nationalparks“ */
  .mg-seite .mg-kapitel__titel{font-size:min(2.1rem,calc(6.6vw + .3rem));line-height:1.16}          /* „Sehenswürdigkeiten“ */
  .mg-seite .mg-text .mg-thema__titel{font-size:min(1.42rem,calc(5vw + .15rem));line-height:1.28}   /* „Unterbringungsmöglichkeiten“ */
  /* Thementitel umfließen das Zeichen: normal umbrechen, damit ein langes Wort unter das Zeichen rutscht statt zu
     zerbrechen (break-word bräche es neben dem Float). Die Größe oben hält das längste Wort in der vollen Zeile. */
  .mg-seite .mg-text .mg-thema__titel{overflow-wrap:normal}
  .mg-seite .mg-text .mg-thema--kapitel .mg-thema__titel{font-size:min(1.9rem,calc(5.6vw + .35rem))} /* „Schaufelradromantik“ */
  .mg-seite .mg-kartenblock>h2,.mg-seite .mg-reisen h2,.mg-seite .mg-themen h2,.mg-seite .mg-schluss h2,
  .mg-seite .mg-beitrag .mg-video h2,.mg-seite .mg-beitrag .mg-video h3{font-size:min(2.3rem,calc(5vw + .6rem));line-height:1.18}
  .mg-seite .mg-text .mg-karte__titel{font-size:min(1.38rem,calc(4vw + .45rem))}                    /* „Routenvorschläge:“ */
  /* Kennzeile einzeilig: „KEROLINA USA-Magazin“ bräche sonst am Bindestrich. */
  .mg-seite .mg-kopf .mg-kennzeile{white-space:nowrap;font-size:min(.78rem,calc(2.9vw + .1rem));gap:10px}
  .mg-seite .mg-kopf .mg-kennzeile::before,.mg-seite .mg-kopf .mg-kennzeile::after{flex-basis:14px}
  /* Zeichen im Kreis als Float statt Flex-Spalte: nur die erste Titelzeile weicht ihm aus, lange Wörter bekommen
     darunter die volle Zeilenbreite. */
  .mg-seite .mg-thema>.mg-thema__kopf{display:flow-root}
  /* Das Zeichen muss VOR dem Titel im Fluss stehen, sonst floatet es unter die letzte Zeile: mobil ::before. */
  .mg-seite .mg-thema>.mg-thema__kopf::after{content:none}
  .mg-seite .mg-thema>.mg-thema__kopf::before{content:"+";content:"+" / "";float:right;width:36px;height:36px;display:grid;place-items:center;margin:0 0 6px 14px;
    border:1px solid var(--n3-linie-stark);border-radius:50%;color:var(--plum);font-size:1.2rem;font-weight:400;line-height:1;
    transition:background-color var(--n3-dauer) var(--n3-ease),border-color var(--n3-dauer) var(--n3-ease),color var(--n3-dauer) var(--n3-ease)}
  .mg-seite .mg-thema[open]>.mg-thema__kopf::before{content:"\2212";content:"\2212" / "";background:var(--plum);border-color:var(--plum);color:var(--cream)}
  /* Einstieg und Vorspann mobil in Fließtextgröße: größer würden lange Wörter bei 200 % mitten im Wort brechen. */
  .mg-seite .mg-thema__inhalt>p:first-child,.mg-seite .mg-kapitel__text>p:first-child,.mg-seite .mg-kapitel__text>p:first-of-type,
  .mg-seite .mg-beitrag .mg-text>p:first-child{font-size:1.02rem;line-height:1.75}
}

/* ---------------- Bildvarianten ----------------
   Drei redaktionelle Formen aus den vorhandenen Bildern, Zuordnung unverändert:
   1 Kapitelbild – eröffnet ein Kapitel oder Thema: volle Hauptspalte, Unterschrift rechtsbündig.
   2 Breites Bild zwischen Textabschnitten: volle Hauptspalte, viel Luft davor und danach.
   3 Bildpaar: zwei Bilder als Komposition 7 : 5, Unterkanten auf einer Linie.
   Altbilder unter 560 px Originalbreite (mg-bild--klein, vom Generator gesetzt) und Hochformate werden nicht
   hochgerechnet (5.7: nie größer als das Original), sondern ab 900 px als bewusst gesetztes Randbild neben dem
   Text geführt – der Text umfließt es, das Bild ragt in den Rand. */
.mg-seite .mg-beitrag .mg-thema__inhalt>.mg-bild,.mg-seite .mg-beitrag .mg-kapitel__text>.mg-bild,
.mg-seite .mg-beitrag .mg-thema__inhalt>.mg-bildreihe,.mg-seite .mg-beitrag .mg-kapitel__text>.mg-bildreihe{margin-top:clamp(40px,5vw,72px);margin-bottom:clamp(40px,5vw,72px)}
.mg-seite .mg-thema__inhalt>.mg-bild:first-child,.mg-seite .mg-kapitel__text>.mg-bild:first-child,
.mg-seite .mg-thema__inhalt>.mg-bildreihe:first-child,.mg-seite .mg-kapitel__text>.mg-bildreihe:first-child{margin-top:clamp(8px,1vw,16px)}
.mg-seite .mg-thema__inhalt>.mg-bild:first-child:not(.mg-bild--klein):not(.mg-bild--hoch) figcaption,
.mg-seite .mg-kapitel__text>.mg-bild:first-child:not(.mg-bild--klein):not(.mg-bild--hoch) figcaption{justify-content:flex-end}
/* Bildpaar */
@media (min-width:700px){
  .mg-seite .mg-beitrag .mg-bildreihe{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:clamp(14px,1.6vw,24px)}
  .mg-seite .mg-beitrag .mg-bildreihe img{width:100%}
}
/* Randbild (klein, hoch) */
.mg-seite .mg-beitrag .mg-bild--klein img{max-width:100%}
@media (min-width:900px){
  .mg-seite .mg-thema__inhalt>.mg-bild--klein,.mg-seite .mg-kapitel__text>.mg-bild--klein,.mg-seite .mg-beitrag .mg-text>.mg-bild--klein,
  .mg-seite .mg-thema__inhalt>.mg-bild--hoch,.mg-seite .mg-kapitel__text>.mg-bild--hoch{float:right;clear:right;width:fit-content;max-width:min(40%,22rem);
    margin:6px max(0px,calc((100% - var(--n3-mass)) / 2 - 72px)) 28px clamp(28px,3vw,40px)}
  .mg-seite .mg-thema__inhalt>.mg-bild--hoch,.mg-seite .mg-kapitel__text>.mg-bild--hoch{max-width:min(34%,20rem)}
  .mg-seite .mg-beitrag .mg-bild--klein img,.mg-seite .mg-beitrag .mg-bild--hoch img{max-width:100%}
  .mg-seite .mg-thema__inhalt>:is(.mg-bild:not(.mg-bild--klein):not(.mg-bild--hoch),.mg-bildreihe,h4,.mg-knopf,.mg-videoliste),
  .mg-seite .mg-kapitel__text>:is(.mg-bild:not(.mg-bild--klein):not(.mg-bild--hoch),.mg-bildreihe,h4,.mg-knopf){clear:both}
  .mg-seite .mg-kapitel__text,.mg-seite .mg-thema__inhalt{display:flow-root}
}

/* ---------------- Rhythmus langer Texte ----------------
   Einstieg: der erste Absatz eines Kapitels als redaktioneller Vorspann (größer, Pflaume, gleicher Wortlaut).
   Schlussmarke: ein kurzer Goldstrich schließt jedes geöffnete Thema ab – das Auge weiß, wo es endet. */
.mg-seite .mg-kapitel__text>p:first-of-type{color:var(--plum);font-weight:500}
@media (min-width:700px){.mg-seite .mg-kapitel__text>p:first-of-type{font-size:clamp(1.12rem,1.45vw,1.26rem);line-height:1.66}}
.mg-seite .mg-thema__inhalt::after{content:"";display:block;clear:both;width:44px;height:1px;margin:clamp(32px,3.4vw,48px) auto 0;background:var(--gold-deep)}
.mg-seite .mg-kapitel__text:has(+ .mg-thema)::after{content:"";display:block;clear:both;width:44px;height:1px;margin:clamp(28px,3vw,40px) auto 0;background:var(--gold-deep)}
.mg-seite .mg-text h4::before{content:"";display:block;width:24px;height:1px;background:var(--gold-deep);margin-bottom:12px}

/* ---------------- KEROLINA-Handschrift ----------------
   Kapitelmarke: Pflaumenpunkt + Goldstrich über jeder Kapitel-H2 und in der Kapitelfuge (Raute auf der Linie).
   Aktiv: geöffnetes Thema trägt eine Goldlinie statt der grauen. Bildunterschriften in Pflaume.
   Navigation: Goldhaarlinie, Pflaume für Kopf und aktiven Eintrag. Keine Flächen, keine Schatten. */
.mg-seite .mg-kapitel__titel::before{width:64px;background:linear-gradient(90deg,var(--plum) 0 8px,transparent 8px 14px,var(--gold-deep) 14px 100%)}
/* Mittige Marke: Goldstrich · Pflaumenpunkt · Goldstrich (symmetrisch, weil die Überschrift mittig steht). */
.mg-seite .mg-kartenblock>h2::before{background:linear-gradient(90deg,var(--gold-deep) 0 32px,transparent 32px 36px,var(--plum) 36px 44px,transparent 44px 48px,var(--gold-deep) 48px 80px);width:80px;margin-left:auto;margin-right:auto}
.mg-seite .mg-kapitel{position:relative;border-top-color:var(--gold-45)}
.mg-seite .mg-text>.mg-kapitel:not(:first-child):not(.mg-kapitel--karte)::before{content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;margin-left:-3.5px;background:var(--plum);transform:rotate(45deg)}
.mg-seite .mg-thema[open]>.mg-thema__kopf{border-top-color:var(--gold-deep)}
.mg-seite .mg-thema[open] .mg-thema__titel{color:var(--plum)}
.mg-seite .mg-beitrag figcaption{color:var(--plum)}
.mg-seite .mg-kapitelnav__details{border-top-color:var(--gold-deep);border-bottom-color:var(--gold-45)}
.mg-seite .mg-kapitelnav__kopf{color:var(--plum)}
@media (min-width:1081px){
  .mg-seite .mg-artikel--mit-spalte .mg-kapitelnav__liste{border-left-color:var(--gold-45)}
  .mg-seite .mg-artikel--mit-spalte .mg-kapitelnav__liste a:hover::before,.mg-seite .mg-artikel--mit-spalte .mg-kapitelnav__liste a[aria-current]::before{background:var(--plum)}
}
.mg-seite .mg-reise{border-top-color:var(--gold-deep)}