/* USA Reisen Magazin – Layout nach LAYOUT-001
   Design-Tokens zentral; Komponenten verwenden nur diese Variablen. */

/* Schriften: assets/css/schriften.css (wird nur eingebunden, wenn die Dateien vorhanden sind) */

:root {
  --farbe-grund: #ffffff;
  --farbe-text: #202020;
  --farbe-neben: #595959;
  --farbe-linie: #dededa;
  --farbe-akzent: #35594b;
  --farbe-flaeche: #f5f5f1;
  --farbe-fokus: #35594b;

  --breite-max: 1200px;
  --breite-text: 680px;
  --rand: 20px;
  --spalte: 24px;
  --abschnitt: 44px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 80px;

  --schrift-titel: "Magazin Serif", Georgia, serif;
  --schrift-text: "Magazin Sans", system-ui, sans-serif;

  --gr-h1: clamp(2.125rem, 1.6rem + 2.2vw, 3.375rem);   /* 34 → 54px */
  --gr-h2: clamp(1.625rem, 1.4rem + 0.9vw, 2.125rem);   /* 26 → 34px */
  --gr-karte: clamp(1.4375rem, 1.3rem + 0.45vw, 1.75rem); /* 23 → 28px */
  --gr-fliess: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem); /* 18 → 20px */
  --gr-teaser: 1.0625rem;  /* 17px */
  --gr-klein: 0.9375rem;   /* 15px */
  --gr-marke: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);    /* 24 → 40px */

  --uebergang: 150ms ease;
}
@media (min-width: 768px) {
  :root { --rand: 32px; --spalte: 24px; }
}
@media (min-width: 1024px) {
  :root { --rand: 48px; --spalte: 32px; --abschnitt: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --uebergang: 0ms; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  hyphens: manual;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
a { color: var(--farbe-akzent); text-underline-offset: 0.18em; transition: color var(--uebergang); }
a:hover { color: var(--farbe-text); }
:focus-visible { outline: 3px solid var(--farbe-fokus); outline-offset: 3px; border-radius: 1px; }

.sprunglink {
  position: absolute; left: var(--s4); top: -100px;
  background: var(--farbe-text); color: #fff; padding: var(--s3) var(--s4); z-index: 10;
}
.sprunglink:focus { top: var(--s4); color: #fff; }
.nur-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.rahmen { max-width: calc(var(--breite-max) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }

/* ---------- Kopf ---------- */
.kopf { border-bottom: 1px solid var(--farbe-linie); }
.kopf__zeile {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4);
  padding-top: var(--s4); padding-bottom: var(--s4);
}
.marke {
  font-family: var(--schrift-titel); font-weight: 600; font-size: var(--gr-marke);
  color: var(--farbe-text); text-decoration: none; line-height: 1.1; letter-spacing: -0.005em;
}
.marke:hover { color: var(--farbe-text); }
/* HEADER-MARKE-004: Markenzusatz als zwei feste Unterzeilen direkt unter dem Schriftzug, linksbündig, kleiner und ruhiger
   als die Marke: „Ein Magazin der KEROLINA“, darunter die beiden verlinkten Angebote. Unter 1024 px löst sich der
   Markenbereich auf (display: contents), damit der Zusatz die volle Kopfbreite bekommt; die Angebotszeile bleibt zusammen
   (13 px wie am Desktop, passt auch bei 320 px mit Ersatzschrift). Ohne Ellipse oder Abschneiden. */
.kopf__markenbereich { display: contents; }
.marke { order: 1; }
.kopf__knoepfe { order: 2; }
.kopf__markenzusatz {
  order: 3; flex: 1 1 100%; margin: calc(var(--s1) - var(--s3)) 0 0;  /* Abstand zum Schriftzug wie bisher 4 px */
  font-size: 0.8125rem; line-height: 1.35; color: var(--farbe-neben);
}
.kopf__herkunft, .kopf__angebote { display: block; }
.kopf__angebote { white-space: nowrap; }
.kopf__markenzusatz a {
  display: inline-block;
  color: var(--farbe-akzent); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em;
}
.kopf__markenzusatz a:hover { color: var(--farbe-text); text-decoration-thickness: 2px; }
.kopf__markenzusatz a:focus-visible { outline-offset: 0; }  /* Fokusrahmen eng am Linktext, damit er die Nachbarzeichen nicht verdeckt */
.kopf__angebote a:first-child { margin-inline-end: 0.2em; }  /* Fokusrahmen beider Links lässt das „&“ frei; kein Abstand vor dem ersten Link */
.kopf__angebote a:last-child { margin-inline-start: 0.2em; }
.kopf__knoepfe { display: flex; gap: var(--s2); }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; min-width: 44px; padding: 0 var(--s3);
  font: 600 1rem/1 var(--schrift-text); color: var(--farbe-text);
  background: var(--farbe-grund); border: 1px solid var(--farbe-text); border-radius: 2px;
  cursor: pointer; text-decoration: none; transition: background var(--uebergang), color var(--uebergang);
}
.knopf:hover { background: var(--farbe-text); color: #fff; }
.knopf[aria-expanded="true"] { background: var(--farbe-text); color: #fff; }

/* HEADER-SUCHE-001: Suchfeld im Kopf, außerhalb der einklappbaren Navigation und damit immer sichtbar. Unter 1024 px
   neben dem Menüknopf (HEADER-MARKE-006); ab 1024 px in der oberen Zeile zwischen Marke und Servicegruppe.
   Eingabeschrift 16 px (kein automatisches Zoomen mobiler Browser), Bedienflächen mindestens 44 px. */
.kopfsuche { order: 3; flex: 1 1 100%; display: flex; gap: var(--s2); min-width: 0; }
.kopfsuche__feld {
  flex: 1 1 auto; min-width: 0; width: 100%; min-height: 44px; padding: 0 var(--s2);
  font: 1rem var(--schrift-text); color: var(--farbe-text);
  border: 1px solid var(--farbe-neben); border-radius: 2px; background: #fff;
}
.kopfsuche__feld::placeholder { color: var(--farbe-neben); opacity: 1; }
.kopfsuche__knopf { flex: none; }
/* HEADER-MARKE-006 („Menü + Suche“, nur unter 1024 px): Schriftzug allein in der ersten Zeile, darunter die beiden
   Unterzeilen mit dem kompakten Abstand aus HEADER-MARKE-005 (1,6 px, Kopfzeilenabstand 12 px eingerechnet), dann eine
   gemeinsame Werkzeugzeile: links das Suchfeld mit der Lupe als Absendeknopf im Feld, rechts der Menüknopf (Reihenfolge
   wie im Quelltext, damit Tab- und Lesefolge passen). Die Zeile füllt die Breite; Menüknopf und Lupe mindestens 44 px,
   Eingabe 16 px. Desktop ab 1024 px unberührt. */
@media (max-width: 1023.98px) {
  .kopf__zeile { column-gap: var(--s2); }
  .kopf__markenzusatz { margin-top: calc(1.6px - var(--s3)); }
  .kopf__herkunft, .kopf__angebote { width: fit-content; }  /* Zeilen nur so breit wie ihr Text */
  .kopf__knoepfe { order: 4; }
  .kopfsuche {  /* Rahmen als Innenschatten: Feld und Lupe behalten die volle Höhe von 44 px */
    order: 4; flex: 1 1 0; max-width: none; gap: 0;
    border-radius: 2px; background: #fff; box-shadow: inset 0 0 0 1px var(--farbe-neben);
  }
  .kopfsuche__feld { border: 0; background: transparent; }
  .kopfsuche__feld::-webkit-search-cancel-button { display: none; }  /* kein reservierter Platz des Löschkreuzes */
  .kopfsuche__knopf {
    min-width: 44px; padding: 0 var(--s3);
    border: 0; border-radius: 0 2px 2px 0; background: transparent; color: var(--farbe-text);
  }
  .kopfsuche__knopftext {  /* zugänglicher Name „Suchen“ bleibt, sichtbar ist die Lupe */
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
.knopf__symbol, .kopfsuche__lupe { flex: none; }
@media (min-width: 1024px) {
  .kopfsuche__lupe { display: none; }  /* Desktop: sichtbarer Textknopf „Suchen“ wie bisher */
}

.nav { display: none; padding-bottom: var(--s4); }
.nav.ist-offen { display: block; }
.nav__liste { list-style: none; margin: 0; padding: 0; }
.nav__liste a {
  display: block; padding: var(--s3) 0; min-height: 44px;
  font-size: 1.0625rem; color: var(--farbe-text); text-decoration: none;
  border-bottom: 1px solid var(--farbe-linie);
}
.nav__liste a:hover { text-decoration: underline; }
.nav__liste a[aria-current] { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; }
/* Ohne JavaScript bleibt die Navigation sichtbar */
/* Menü ohne Layoutsprung (PAGESPEED-001): Die mobile Navigation ist von Anfang an eingeklappt, der Menüknopf ist ein Link
   auf #hauptnavigation. Solange kopf.js fehlt, verspätet oder blockiert ist, öffnet :target die Navigation. Ohne
   JavaScript bleibt sie wie bisher offen und der Knopf entfällt. */
.ohne-js .nav:target { display: block; }
@media (scripting: none) {
  .nav { display: block; }
  .js-menue { display: none; }
  .kopf__knoepfe { display: none; }  /* HEADER-MARKE-006: ohne Knopf kein leerer Platz vor dem Suchfeld */
}

/* HEADER-001: Ab 1024 px zwei geplante Ebenen statt einer überlaufenden Zeile. Oben Marke links und die Servicegruppe
   (Suche, Merkzettel, Community) rechts auf gleicher Höhe, darunter die Kategorien als ruhige Hauptzeile. Beide Listen
   bleiben in derselben Hauptnavigation (aria-current nur dort, php_ausgabe.py). Platzbedarf der Kategorien: rund 650 px
   Text plus Abstände, also auch bei 1024 px (913 px Rahmen) in einer Zeile. */
@media (min-width: 1024px) {
  .kopf .rahmen { position: relative; }
  .kopf__zeile { min-height: 100px; padding-top: 0; padding-bottom: 0; }  /* HEADER-MARKE-004: 100 statt 84 px für Schriftzug und zwei Unterzeilen */
  .kopf__knoepfe { display: none; }
  /* Platz rechts für die absolut gesetzte Servicegruppe (Merkzettel mit Zähler, Community) freihalten */
  .kopf__zeile { flex-wrap: nowrap; }
  .marke { flex: none; white-space: nowrap; }
  /* HEADER-MARKE-001/-004: Markenbereich als Spalte aus Schriftzug und beiden Unterzeilen in voller Breite; daneben bleibt
     bei 1024 px ein Suchfeld mit vollständig lesbarem Platzhalter (17,75rem) */
  .kopf__zeile { column-gap: var(--s3); }
  .kopf__markenbereich {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1);
    flex: none; min-width: min-content; max-width: calc(100% - 17.75rem - 19rem - var(--s3)); padding: var(--s2) 0;
  }
  .kopf__markenzusatz { order: 2; flex: none; margin: 0; line-height: 1.3; }
  .kopfsuche { order: 0; flex: 0 1 20rem; min-width: 14rem; margin-left: auto; margin-right: 19rem; }
  .nav { display: block; padding-bottom: 0; }
  .nav__liste a { border-bottom: 0; display: inline-flex; align-items: center; }
  .nav__rubriken { display: flex; flex-wrap: wrap; column-gap: var(--s5); border-top: 1px solid var(--farbe-linie); }
  .nav__rubriken a { padding: var(--s3) 0; }
  .nav__service {
    position: absolute; top: 0; right: var(--rand); height: 100px;
    display: flex; align-items: center; column-gap: var(--s5);
  }
  .nav__service a { padding: 0; font-size: 0.9375rem; color: var(--farbe-neben); }
  .nav__service a:hover, .nav__service a[aria-current] { color: var(--farbe-text); }
  .nav__social a { color: var(--farbe-akzent); font-weight: 600; }
  /* Übergang beim Upload (HEADER-001): Die ältere Kopfstruktur mit nur einer Liste bleibt mit diesem Stylesheet geordnet */
  .nav > .nav__liste:only-child { display: flex; justify-content: center; flex-wrap: wrap; column-gap: var(--s6); }
  .nav > .nav__liste:only-child a { padding: var(--s3) 0 var(--s4); }
}
@media (min-width: 1280px) {
  .nav__rubriken { column-gap: var(--s6); }
}

/* ---------- Allgemeine Abschnitte ---------- */
main { display: block; }
.abschnitt { padding-top: var(--abschnitt); }
.abschnitt:last-child { padding-bottom: var(--abschnitt); }
.abschnitt__titel {
  font-size: var(--gr-h2); margin-bottom: var(--s5);
  padding-top: var(--s4); border-top: 1px solid var(--farbe-linie);
}
/* Weiterlesen-Gruppen und Ortsübersichten (ARTIKEL-004 G4, CODEX-290) */
.abschnitt__gruppe { font-size: 1.3125rem; margin: var(--s6) 0 var(--s4); }
.abschnitt__titel + .abschnitt__gruppe { margin-top: 0; }
.weiterlesen__uebersicht { margin-top: var(--s6); }
.rubrikzeile {
  display: inline-block; font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--farbe-akzent);
  margin-bottom: var(--s3); text-decoration: none;
  overflow-wrap: anywhere; hyphens: auto;
}
a.rubrikzeile:hover { text-decoration: underline; color: var(--farbe-akzent); }
.neben { color: var(--farbe-neben); font-size: var(--gr-klein); }

/* ---------- Medien ---------- */
.medium { position: relative; background: var(--farbe-flaeche); aspect-ratio: 3 / 2; overflow: hidden; margin: 0; }
.medium--4x3 { aspect-ratio: 4 / 3; }
.medium--frei { aspect-ratio: auto; background: none; }
.medium--frei img { height: auto; }
.medium img { width: 100%; height: 100%; object-fit: cover; }
.medium--aquarell { background: var(--farbe-grund); }
.medium--aquarell img { object-fit: contain; }
.medium--leer { display: flex; align-items: center; justify-content: center; }
.medium--leer span { color: var(--farbe-neben); font-size: var(--gr-klein); padding: var(--s4); text-align: center; }

/* ---------- Aufmacher ---------- */
.aufmacher { display: grid; gap: var(--s5); }
.aufmacher > * { min-width: 0; }
.aufmacher__titel { font-size: clamp(1.875rem, 1.5rem + 1.5vw, 3rem); line-height: 1.14; margin-bottom: var(--s4); }
.aufmacher__titel a, .karte__titel a { color: var(--farbe-text); text-decoration: none; }
.aufmacher__titel a:hover, .karte__titel a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.aufmacher__text p { font-size: 1.125rem; line-height: 1.55; margin: 0 0 var(--s3); }
@media (min-width: 1024px) {
  .aufmacher { grid-template-columns: 58fr 42fr; gap: var(--s6); align-items: center; }
}

/* ---------- Artikelraster ---------- */
.raster { display: grid; gap: var(--s7) var(--spalte); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .raster { grid-template-columns: repeat(3, 1fr); } }
.karte { display: flex; flex-direction: column; min-width: 0; }
.karte__titel, .aufmacher__titel { overflow-wrap: anywhere; }
.karte .medium { margin-bottom: var(--s4); }
.karte__titel { font-size: var(--gr-karte); line-height: 1.18; margin-bottom: var(--s3); }
.karte__teaser { font-size: var(--gr-teaser); line-height: 1.5; margin: 0; }
/* Bildlink ohne eigenen Tabstopp: Titel ist der einzige Link */
.karte__bildlink { display: block; text-decoration: none; }

/* ---------- Seitenkopf Rubrik/Reiseziel/Suche ---------- */
.brotkrumen { font-size: var(--gr-klein); padding-top: var(--s5); }
.brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.brotkrumen li { min-width: 0; overflow-wrap: anywhere; }
.brotkrumen li:not(:last-child)::after { content: "/"; margin-left: var(--s2); color: var(--farbe-neben); }
.brotkrumen a { color: var(--farbe-neben); }
.seitenkopf { padding-top: var(--s5); max-width: var(--breite-text); }
.seitenkopf h1 { font-size: var(--gr-h1); margin-bottom: var(--s4); }
.seitenkopf p { font-size: 1.125rem; margin: 0 0 var(--s3); }
.linkliste { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.linkliste a { display: inline-block; padding: var(--s2) 0; min-height: 44px; line-height: 28px; }
/* Sprungziele der Reisezielübersicht und der Startseite (STARTSEITE-001); der Kopf ist nicht fixiert */
.abschnitt__titel[id], .startthema__titel[id] { scroll-margin-top: var(--s4); }

/* ---------- Startseite (STARTSEITE-001): Suche im Kopf, Reiseziele, Themen ---------- */
/* Erster Abschnitt direkt unter dem Seitenkopf: Abstand wie .seitenkopf, ohne Trennlinie (Nutzer-Nachtrag 13.10.2026) */
.startabschnitt--erst { padding-top: var(--s5); }
.startabschnitt--erst > .abschnitt__titel { border-top: 0; padding-top: 0; }
.startabschnitt__text { max-width: var(--breite-text); margin: 0 0 var(--s5); font-size: 1.0625rem; }
.zugangsliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .zugangsliste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zugangsliste a {
  display: flex; align-items: center; min-height: 52px; padding: var(--s3) var(--s4);
  border: 1px solid var(--farbe-linie); background: var(--farbe-flaeche);
  color: var(--farbe-text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere;
}
.zugangsliste a::after { content: "\2192"; content: "\2192" / ""; margin-left: auto; padding-left: var(--s3); color: var(--farbe-akzent); }
.zugangsliste a:hover { border-color: var(--farbe-akzent); text-decoration: underline; text-decoration-thickness: 1px; }
/* Rubrikabschnitte der Startseite: klare Trennlinie zu den Zielzugängen, keine Zwischenüberschrift (Nutzer-Nachtrag 13.10.2026) */
.startthemen { margin-top: var(--abschnitt); border-top: 1px solid var(--farbe-linie); }
.startthema { padding-top: var(--s7); }
.startthema:first-child { padding-top: var(--s6); }
/* Rubriktitel auf der Startseite größer und markanter: 28 px mobil bis 34 px Desktop, Serife wie alle Titel */
.startthema__titel { font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.125rem); line-height: 1.15; margin-bottom: var(--s4); }
.startthema .startabschnitt__text { color: var(--farbe-neben); }
.karte__ort { font-size: var(--gr-klein); color: var(--farbe-neben); margin: calc(-1 * var(--s2)) 0 var(--s3); }
.startthema__alle { margin: var(--s5) 0 0; }
.startthema__alle a { display: inline-block; min-height: 44px; padding: var(--s2) 0; line-height: 28px; font-weight: 600; }
.startthema__alle a::after { content: " \2192"; content: " \2192" / ""; }

/* ---------- Artikel ---------- */
.artikel__kopf { max-width: 860px; padding-top: var(--s4); }
.artikel__titel { font-size: var(--gr-h1); line-height: 1.14; margin-bottom: var(--s5); }
.artikel__einleitung { font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.4375rem); line-height: 1.5; margin: 0 0 var(--s5); max-width: var(--breite-text); }
.artikel__meta { font-size: var(--gr-klein); color: var(--farbe-neben); margin: 0 0 var(--s6); }
.artikel__meta p { margin: 0 0 var(--s1); }
.titelbild { margin: 0 0 var(--s6); }
.titelbild .medium { aspect-ratio: 3 / 2; }
.bildtext { font-size: var(--gr-klein); color: var(--farbe-neben); margin-top: var(--s2); line-height: 1.45; }
.bildtext .credit { display: inline-block; }
.kennzeichen { font-weight: 600; color: var(--farbe-text); }

.lesespalte { max-width: var(--breite-text); margin: 0 auto; }
.fliesstext { font-size: var(--gr-fliess); line-height: 1.65; }
.fliesstext p { margin: 0 0 1.1em; }
.fliesstext h2 { font-size: var(--gr-h2); margin: 1.8em 0 0.6em; scroll-margin-top: var(--s5); }
.fliesstext h3 { font-size: 1.3125rem; margin: 1.5em 0 0.5em; }
.fliesstext ul, .fliesstext ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.fliesstext li { margin-bottom: 0.4em; }
.fliesstext a { text-decoration: underline; }
.fliesstext figure { margin: var(--s6) 0; }

/* FAQ-Akkordeon (natives details/summary): Frage immer sichtbar, Antwort eingeklappt, vollständig im HTML */
.fliesstext details.faq { border-top: 1px solid var(--farbe-linie); }
.fliesstext details.faq:last-of-type { border-bottom: 1px solid var(--farbe-linie); }
.fliesstext details.faq summary {
  display: flex; align-items: flex-start; gap: var(--s3); cursor: pointer; list-style: none;
  padding: var(--s3) 0; min-height: 44px;
}
.fliesstext details.faq summary::-webkit-details-marker { display: none; }
.fliesstext details.faq summary::before {
  content: "+"; flex: 0 0 1.25em; font: 600 1.375rem/1.35 var(--schrift-text); color: var(--farbe-akzent); text-align: center;
}
.fliesstext details.faq[open] summary::before { content: "\2212"; }
.fliesstext details.faq summary h3 { margin: 0; font-size: 1.1875rem; line-height: 1.4; }
.fliesstext details.faq summary:hover h3 { color: var(--farbe-akzent); }
.fliesstext .faq__antwort { padding: 0 0 var(--s3) calc(1.25em + var(--s3)); }
@media print {
  .fliesstext details.faq::details-content { content-visibility: visible; display: block; }
  .fliesstext details.faq summary::before { content: none; }
  .fliesstext .faq__antwort { padding-left: 0; }
}

.inhalt { border-top: 1px solid var(--farbe-linie); border-bottom: 1px solid var(--farbe-linie); padding: var(--s4) 0; margin: 0 0 var(--s6); }
.inhalt h2 { font-family: var(--schrift-text); font-size: 1rem; font-weight: 600; margin: 0 0 var(--s2); }
.inhalt ol { margin: 0; padding-left: 1.3em; font-size: 1.0625rem; }
.inhalt li { padding: 2px 0; }

.kasten { background: var(--farbe-flaeche); padding: var(--s5); margin: var(--s6) 0; }
.kasten h2 { font-size: 1.5rem; margin: 0 0 var(--s4); }
.kasten dl { margin: 0; }
.kasten dt { font-weight: 600; margin-top: var(--s3); }
.kasten dd { margin: var(--s1) 0 0; }
.kasten p { font-size: 1.0625rem; }

.quellen { font-size: 1rem; line-height: 1.55; margin: var(--s6) 0; }
.quellen h2 { font-size: 1.5rem; margin-bottom: var(--s3); }
.quellen ol { padding-left: 1.4em; margin: 0; }
.quellen li { margin-bottom: var(--s2); }
.quellen a { overflow-wrap: anywhere; }
/* ZUSATZLINKS-001: zwei eigene Angebote als ruhige Karten, ab 560px nebeneinander, darunter untereinander. */
/* CODEX-583: Überschrift über den Karten als ruhige Unterüberschrift von „Weiterführende Informationen“. */
.community-webseiten { margin: var(--s5) 0 0; }
.community-webseiten__titel { font-family: var(--schrift-text); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; margin: 0 0 var(--s3); }
.quellen .zusatzlinks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
@media (min-width: 560px) { .quellen .zusatzlinks { grid-template-columns: 1fr 1fr; } }
.quellen .zusatzlinks li { margin: 0; }
.zusatzlink {
  position: relative; display: flex; flex-direction: column; gap: var(--s1); box-sizing: border-box;
  height: 100%; min-height: 44px; padding: var(--s4) var(--s7) var(--s4) var(--s4);
  background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: 4px;
  color: var(--farbe-text); text-decoration: none;
  transition: border-color var(--uebergang), background-color var(--uebergang);
}
.zusatzlink__titel { font-weight: 600; color: var(--farbe-akzent); text-decoration: underline; text-underline-offset: 0.18em; }
.zusatzlink__text { font-size: var(--gr-klein); line-height: 1.45; color: var(--farbe-neben); }
.zusatzlink__pfeil {
  position: absolute; right: var(--s4); top: 50%; transform: translateY(-50%);
  font-size: 1.25rem; line-height: 1; color: var(--farbe-akzent); transition: transform var(--uebergang);
}
.zusatzlink:hover { border-color: var(--farbe-akzent); background: var(--farbe-grund); color: var(--farbe-text); }
.zusatzlink:hover .zusatzlink__titel { color: var(--farbe-text); }
.zusatzlink:hover .zusatzlink__pfeil { transform: translate(3px, -50%); }

.redaktionshinweis { border-top: 1px solid var(--farbe-linie); padding-top: var(--s4); margin-top: var(--s6); font-size: 1rem; color: var(--farbe-neben); }

.tabelle-rolle { overflow-x: auto; margin: 0 0 1.2em; }
.tabelle-rolle:focus-visible { outline-offset: 0; }
.fliesstext table { border-collapse: collapse; font-size: 1rem; min-width: 480px; width: 100%; }
.fliesstext th, .fliesstext td { text-align: left; vertical-align: top; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--farbe-linie); }
.fliesstext th { font-weight: 600; }

/* ---------- Suche ---------- */
/* Platz für Suchergebnisse reservieren, solange der Index lädt (vermeidet Layoutverschiebung) */
.suche-aktiv #suchergebnisse { min-height: 75vh; }
.suchform { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s5) 0; max-width: var(--breite-text); }
.suchform label { flex-basis: 100%; font-weight: 600; }
.suchform input[type="search"] {
  flex: 1 1 12rem; min-width: 0; width: 100%; min-height: 48px; padding: 0 var(--s3);
  font: 1.0625rem var(--schrift-text); color: var(--farbe-text);
  border: 1px solid var(--farbe-neben); border-radius: 2px; background: #fff;
}
.suchstatus { font-size: 1.0625rem; margin: var(--s4) 0; }
.hinweis { background: var(--farbe-flaeche); padding: var(--s4); font-size: 1rem; max-width: var(--breite-text); }

/* ---------- Footer ---------- */
.fuss { border-top: 1px solid var(--farbe-linie); margin-top: var(--abschnitt); padding: var(--s6) 0 var(--s7); font-size: 1rem; }
.fuss__marke { font-family: var(--schrift-titel); font-size: 1.375rem; font-weight: 600; margin: 0 0 var(--s3); }
.fuss ul { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); }
.fuss a { color: var(--farbe-text); display: inline-block; padding: var(--s2) 0; min-height: 44px; line-height: 28px; }
.fuss p { color: var(--farbe-neben); margin: 0 0 var(--s2); max-width: 720px; }

.vorschau-banner { background: #202020; color: #fff; font-size: 0.9375rem; padding: var(--s2) var(--rand); text-align: center; }

/* Sehr schmale Bildschirme: lange deutsche Wörter in Überschriften sauber trennen statt hart umbrechen */
@media (max-width: 399px) {
  h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; }
}

/* Einfache Seiten (Über das Magazin, Impressum, Datenschutz): Kopf bündig mit der Lesespalte (ersetzt Inline-Style) */
.seitenkopf--buendig { padding-left: 0; }

/* Eigenes Einwilligungsbanner (CONSENT-ROLLOUT-001, ersetzt Cookiebot). Fest am unteren Rand über dem Inhalt (kein
   Layoutsprung); höchstens 60 % der Fensterhöhe, bei Vergrößerung in sich scrollbar. Reihenfolge im HTML: „Ja, zustimmen
   und weiter“ zuerst, dann „Ablehnen“ (Nutzerentscheidung): mobil untereinander (Ja oben), ab 520 px nebeneinander (Ja
   links). Darstellung, Tastatur und Screenreader folgen derselben Reihenfolge, ohne CSS-order. Zustimmungsknopf #d0c283
   mit Schrift #202020 (9,1:1), Rand #202020 (16,3:1 gegen Weiß), Hover umgekehrt; Fokus über :focus-visible. */
.einwilligung[hidden], .einwilligung [hidden] { display: none !important; }
.einwilligung {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  max-height: 60vh; overflow-y: auto;
  background: var(--farbe-grund); color: var(--farbe-text);
  border-top: 2px solid var(--farbe-text);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}
.einwilligung__innen { max-width: 760px; margin: 0 auto; padding: 16px var(--rand, 20px) 20px; }
.einwilligung__titel { margin: 0 0 8px; font: 600 1.125rem/1.3 var(--schrift-text); }
.einwilligung__text { margin: 0 0 8px; font-size: 1rem; line-height: 1.5; }
.einwilligung__links { margin: 0 0 12px; font-size: 1rem; line-height: 1.5; }
.einwilligung__links a { display: inline-block; margin-right: 20px; padding: 2px 0; }
.einwilligung__knoepfe { display: flex; flex-direction: column; gap: 8px; }
.einwilligung__knoepfe .knopf { min-height: 44px; padding: 10px 16px; line-height: 1.25; text-align: center; white-space: normal; }
.einwilligung__knoepfe .knopf--zustimmen { background: #d0c283; color: #202020; border-color: #202020; }
.einwilligung__knoepfe .knopf--zustimmen:hover { background: #202020; color: #d0c283; }
@media (min-width: 520px) {
  .einwilligung__knoepfe { flex-direction: row; flex-wrap: wrap; gap: 8px 12px; }
  .einwilligung__knoepfe .knopf { flex: 1 1 200px; max-width: 320px; }
}
.einwilligung__hinweis { margin: 12px 0 0; font-size: 1rem; line-height: 1.5; font-weight: 600; }
@media print { .einwilligung { display: none !important; } }

/* Nach oben (Nutzerwunsch 03.10.2026): fester Knopf unten rechts, Formsprache wie .knopf.
   Ohne JavaScript immer sichtbar und als normaler Sprunglink zum Seitenanfang nutzbar;
   mit JavaScript erst nach dem Scrollen eingeblendet (assets/js/magazin.js). */
.nach-oben {
  position: fixed; z-index: 5;
  right: calc(var(--s4) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  color: var(--farbe-text); background: var(--farbe-grund);
  border: 1px solid var(--farbe-text); border-radius: 2px;
  box-shadow: 0 2px 8px rgba(32, 32, 32, 0.12);
  text-decoration: none;
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 0s,
              background var(--uebergang), color var(--uebergang);
}
.nach-oben:hover { background: var(--farbe-text); color: #fff; }
.nach-oben:focus-visible { outline-offset: 3px; }
.nach-oben__pfeil { display: block; }
html:not(.ohne-js) .nach-oben:not(.ist-sichtbar) {
  opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}
@media (min-width: 1024px) {
  .nach-oben { right: var(--s6); bottom: var(--s6); width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .nach-oben, html:not(.ohne-js) .nach-oben:not(.ist-sichtbar) { transition: none; transform: none; }
}
@media print {
  .nach-oben { display: none !important; }
}

/* ---------- Teilen und Merkzettel (LESERSERVICE-001) ----------
   Zwei gleichartige Leisten im Artikel: im Kopf nach Lesezeit, am Ende nach dem Redaktionshinweis. Keine schwebende
   Leiste; das Teilen-Feld klappt im Textfluss auf und überdeckt weder Text noch Fokus noch das Einwilligungsbanner.
   Ohne JavaScript bleiben Leisten verborgen (hidden), siehe assets/js/leserservice.js. */
.aktionen [hidden], .merkzettel [hidden], .aktionen[hidden] { display: none !important; }
/* PAGESPEED-002: Die obere Artikelleiste hält ihren Platz schon vor leserservice.js (sonst rutscht das Titelbild nach
   dem ersten Paint um Leistenhöhe + Abstand nach unten). Bis zum Einblenden unsichtbar: visibility: hidden nimmt die
   Knöpfe aus Fokus, Klick und Barrierebaum. Die Höhe ergibt sich aus dem echten Inhalt (Umbruch, Schriftgröße), keine
   feste Höhe. Ohne JavaScript bleibt die Leiste ganz entfallen. */
.aktionen--oben[hidden] { display: block !important; visibility: hidden; }
@media (scripting: none) { .aktionen--oben[hidden] { display: none !important; } }
.aktionen { margin: 0 0 var(--s6); }
.aktionen--unten { margin: var(--s5) 0 0; }
.aktionen__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.knopf[aria-pressed="true"] { background: var(--farbe-text); color: #fff; }
.aktionen__gemerkt { font-size: 1rem; color: var(--farbe-neben); }
.aktionen__gemerkt a { display: inline-block; padding: var(--s2) 0; min-height: 44px; line-height: 28px; }
.teilen { order: 10; flex: 0 0 100%; margin-top: var(--s1); }
.teilen__liste, .teilen__manuell { max-width: 420px; border: 1px solid var(--farbe-linie); padding: 0 var(--s3); background: var(--farbe-grund); }
.teilen__liste { list-style: none; margin: 0; }
.teilen__liste li + li { border-top: 1px solid var(--farbe-linie); }
.teilen__weg {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: var(--s1) 0;
  font: 1.0625rem/1.3 var(--schrift-text); color: var(--farbe-text); text-align: left; text-decoration: none;
  background: none; border: 0; cursor: pointer;
}
.teilen__weg:hover { color: var(--farbe-akzent); text-decoration: underline; }
.teilen__manuell { margin: 0; padding: var(--s3); border-top: 0; }
.teilen__manuell label { display: block; font-weight: 600; margin-bottom: var(--s2); }
.teilen__manuell input, .merkzettel input {
  width: 100%; min-height: 44px; padding: 0 var(--s3);
  font: 1rem var(--schrift-text); color: var(--farbe-text); border: 1px solid var(--farbe-neben); border-radius: 2px; background: #fff;
}
.aktionen__status { margin: var(--s2) 0 0; font-size: 1rem; }
.aktionen__status:empty { margin: 0; }

/* Merkzettel: Texte in Lesebreite, die Kartenliste nutzt wie das Artikelraster die volle Breite (MERKZETTEL-KARTEN). */
.merkzettel > p, .merkzettel > div:not([data-inhalt]), .merkzettel__anzahl, .merkzettel__alle { max-width: var(--breite-text); }
.merkzettel__vorlagen { display: none; }
.merkzettel .hinweis { margin: var(--s4) 0; }
.merkzettel__status { font-size: 1.0625rem; margin: var(--s4) 0; }
.merkzettel__status:empty { margin: 0; }
.merkzettel [data-fehlend] { margin: var(--s4) 0; }
.merkzettel [data-leer] { font-size: 1.0625rem; margin: var(--s4) 0; }
.merkzettel__anzahl { font-size: 1.5rem; margin: var(--s5) 0 var(--s3); }
.merkzettel__liste { margin-bottom: var(--s6); }
/* Aktionszeile je Merkzettel-Karte: Artikel teilen | Entfernen (MERKZETTEL-TEILEN) */
.aktionen--karte { margin: var(--s4) 0 0; }
.merkzettel__alle { padding-top: var(--s4); border-top: 1px solid var(--farbe-linie); }
.merkzettel__frage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s3); }
.merkzettel__frage p { flex-basis: 100%; margin: 0; }
@media print {
  .aktionen, .merkzettel__entfernen, .merkzettel__alle { display: none !important; }
}
.merkzettel .knopf { line-height: 1.25; padding-top: var(--s2); padding-bottom: var(--s2); text-align: center; }

/* ---------- USA Social Media (SOCIAL-MEDIA-001) ---------- */
/* Raster: eine Spalte, ab 768 px zwei; ab 1024 px bleibt es hier bei zwei statt drei. Keine feste Kartenhöhe, kein Textbeschnitt */
@media (min-width: 1024px) { .sozial__liste { grid-template-columns: repeat(2, 1fr); } }
.sozialkarte__kennung { font-size: var(--gr-klein); font-weight: 600; letter-spacing: 0.02em; color: var(--farbe-neben); margin: 0 0 var(--s2); }
.sozialkarte .karte__teaser { margin-bottom: var(--s3); }
.sozialkarte__link { margin: 0; }
.sozialkarte__link a { display: inline-block; padding: var(--s2) 0; min-height: 44px; line-height: 28px; font-weight: 600; overflow-wrap: anywhere; }
.sozial__hinweis { margin: var(--s7) 0 0; }
.sozialkarte__neutab { font-weight: 400; font-size: var(--gr-klein); }