/* =============================================================================
   RATGEBER - Uebersicht /ratgeber/ und die Beitraege darunter (24.09.2026)
   =============================================================================

   Laedt NACH websites.css und vor finale.css. Von dort kommen Schrift, Farben
   (--ink, --paper, --cyan ...), Kopfleiste, .eyebrow, .web-link, .cta und
   .web-foot. Hier steht nur, was es auf den anderen Seiten nicht gibt.

   MAGAZIN statt Inhaltsverzeichnis (Basti, 24.09.): keine Nummern 01, 02 ...
   vor Beitraegen und Abschnitten. Jeder Beitrag hat ein Titelbild, die
   Uebersicht fuehrt mit einem grossen Aufmacher, darunter Karten mit Bild.

   ECKIG wie der Rest des Auftritts: keine Flaeche und kein Bild mit Radius.
   Rund sind nur echte Punkte.

   Lesebreite 68ch: Laengere Zeilen verlieren beim Zeilenwechsel den Anschluss,
   kuerzere zerhacken die Saetze.
   ---------------------------------------------------------------------------*/

/* STIMME DER KUNDEN (24.09.2026): Was Kunden sagen oder eintippen, steht in
   Alegreya Kursiv (Huerta Tipografica, OFL, Lizenz liegt neben der Datei).
   Vorher Geist Mono, und die sah nach Terminal aus - "schreit KI" (Basti).
   Zugeschnitten auf Latin, deutsche Anfuehrungszeichen und Euro, 38 KB. */
@font-face{font-family:Alegreya;src:url(/assets/fonts/alegreya-kursiv.woff2) format("woff2");
  font-style:italic;font-weight:400 900;font-display:swap}

.ratgeber{--lese:68ch;--stimme:Alegreya,Georgia,"Times New Roman",serif}

/* ---- Kopf ----------------------------------------------------------------
   Dieselbe Geste wie .ortkopf auf den Ortsseiten: Verlauf von Hellblau nach
   Weiss, feine Linie unten, und ab 1100px Text links und Bild rechts. */
.rkopf{position:relative;padding:calc(var(--nav-hoehe,80px) + clamp(26px,3.6vw,52px)) var(--page) clamp(34px,4vw,56px);
  background:linear-gradient(180deg,var(--cyan-soft) 0%,#f7fbfe 52%,var(--white) 100%);
  border-bottom:1px solid var(--line);overflow:hidden}
.rkopf::before{content:"";position:absolute;inset:-40% 40% 55% -20%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(25,191,244,.14),transparent 70%)}
.rkopf__inner{position:relative;max-width:var(--wrap);margin:0 auto;display:grid;gap:30px;align-items:center}
.rkopf__text{min-width:0;max-width:860px}
.rkopf h1{margin:0;max-width:22ch;font-size:clamp(2.05rem,4.4vw,3.45rem);line-height:1.05;
  letter-spacing:-.032em;font-weight:730;text-wrap:balance}
.rkopf__lead{margin:18px 0 0;max-width:58ch;font-size:clamp(1.06rem,1.45vw,1.2rem);
  line-height:1.58;color:var(--ink-soft);text-wrap:pretty}

/* Das Titelbild im Kopf: dunkles Fenster auf hellem Grund, mit derselben
   Tiefe wie das Projektfenster im Hero der Ortsseiten. */
.rkopf__bild{margin:0;min-width:0}
.rkopf__bild img{display:block;width:100%;height:auto;background:#020914;
  box-shadow:0 3px 8px rgba(8,16,28,.10),0 34px 64px -26px rgba(8,16,28,.35)}
/* Bildnachweis. KI-Bilder stehen als solche da: Der Chatbot-Beitrag rät
   selbst zu echten Fotos, da waere ein unmarkiertes KI-Bild daneben unehrlich. */
.rkopf__bild figcaption{margin:10px 0 0;font-size:.78rem;color:var(--muted);text-align:right}

/* ACHSE (24.09.2026, Basti: Bilder "an irgendeiner Achse ausrichten"):
   Ab 1100px loest sich .rkopf__text ins Raster auf (display:contents).
   Brotkrumen und Eyebrow bekommen eigene Zeilen ueber beiden Spalten, das
   Bild beginnt in der Zeile der Ueberschrift. Dazu der optische Ausgleich:
   Geists Versalien beginnen rund 0,18 em unter der Oberkante der Zeile, um
   genau so viel rueckt das Bild nach unten. Bildoberkante = Versalhoehe H1. */
@media(min-width:1100px){
  .rkopf__inner--bild{--h1:clamp(2.1rem,3.3vw,2.95rem);
    grid-template-columns:minmax(0,1fr) minmax(0,.94fr);column-gap:clamp(36px,4vw,60px);row-gap:0;align-items:start}
  .rkopf__inner--bild .rkopf__text{display:contents}
  .rkopf__inner--bild .krumen{grid-column:1 / -1;grid-row:1}
  .rkopf__inner--bild .eyebrow{grid-column:1;grid-row:2}
  .rkopf__inner--bild h1{grid-column:1;grid-row:3;max-width:none;font-size:var(--h1)}
  .rkopf__inner--bild .kurz{grid-column:1;grid-row:4}
  .rkopf__inner--bild .meta{grid-column:1;grid-row:5}
  .rkopf__inner--bild .rkopf__bild{grid-column:2;grid-row:3 / span 3;margin-top:calc(var(--h1) * .18)}
}

/* Brotkrumen: fuer alle, die ueber die Suche mitten in einen Beitrag fallen. */
.krumen ol{display:flex;flex-wrap:wrap;gap:4px 0;margin:0 0 20px;padding:0;list-style:none;
  font-size:.88rem;color:var(--muted)}
.krumen li + li::before{content:"/";margin:0 10px;color:#a9b7c5}
.krumen a{color:var(--cyan-ink);text-decoration:none;font-weight:600}
.krumen a:hover{text-decoration:underline;text-underline-offset:3px}

/* Die Antwort in drei Saetzen, bevor es ins Detail geht. Selbe Form wie
   .antwort auf den Ortsseiten: weiss, Linie links in Cyan. */
.kurz{margin:24px 0 0;max-width:64ch;padding:20px clamp(18px,2.4vw,26px);
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--cyan);
  box-shadow:0 1px 2px rgba(13,24,38,.04),0 18px 38px -30px rgba(13,24,38,.5)}
.kurz__titel{margin:0 0 8px;font-size:.76rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan-ink)}
.kurz p:last-child{margin:0;font-size:1.04rem;line-height:1.62;color:var(--ink)}

/* Byline: Kopf-Foto, darunter nicht daneben die Angaben. Zweizeilig, damit
   auf dem Handy keine Zeile mit einem einzelnen Trennpunkt beginnt. */
.meta{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:13px;align-items:center;
  margin:22px 0 0;font-size:.92rem;line-height:1.4;color:var(--muted)}
.meta img{grid-row:1 / 3;width:48px;height:48px;object-fit:cover;background:var(--paper);
  box-shadow:0 0 0 1px var(--line)}
.meta a,.meta strong{color:var(--ink);font-weight:650;text-decoration:none}
.meta a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- Lesetext und Inhaltsverzeichnis ---------------------------------------
   Ab 1100px laeuft rechts neben dem Text ein Inhaltsverzeichnis mit. Welcher
   Abschnitt gerade dran ist, markiert site-nav.js (data-snav, aria-current),
   dieselbe Mechanik wie die Schiene der Ortsseiten, nur ohne Nummern.
   Darunter blendet es sich aus; auf dem Handy steht dieselbe Liste im Menue. */
.beitrag{padding:clamp(40px,5vw,72px) var(--page) clamp(48px,6vw,88px)}
.beitrag__inner{max-width:var(--wrap);margin:0 auto}
.beitrag__text{max-width:var(--lese);min-width:0}
.inhalt{display:none}
@media(min-width:1100px){
  .beitrag__inner{display:grid;grid-template-columns:minmax(0,var(--lese)) 240px;
    justify-content:space-between;align-items:start;gap:56px}
  .beitrag__text{grid-column:1;grid-row:1}
  .inhalt{display:block;grid-column:2;grid-row:1;position:sticky;top:calc(var(--nav-hoehe,80px) + 28px)}
}
.inhalt__titel{margin:0 0 12px;font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.inhalt ol{margin:0;padding:0;list-style:none;border-left:1px solid var(--line)}
.inhalt a{display:block;margin-left:-1px;padding:7px 0 7px 16px;border-left:2px solid transparent;
  font-size:.94rem;line-height:1.4;color:var(--ink-soft);text-decoration:none;
  transition:color .15s ease,border-color .15s ease}
.inhalt a:hover{color:var(--ink)}
.inhalt a[aria-current="true"]{border-left-color:var(--cyan);color:var(--ink);font-weight:640}

.abschnitt{position:relative;scroll-margin-top:calc(var(--nav-hoehe,80px) + 20px)}
.abschnitt + .abschnitt{margin-top:clamp(40px,4.6vw,60px)}

.beitrag h2{margin:0 0 .65em;font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.16;
  letter-spacing:-.022em;font-weight:710;text-wrap:balance}
.beitrag h3{margin:1.6em 0 .5em;font-size:1.18rem;line-height:1.3;font-weight:690;letter-spacing:-.01em}
.beitrag p,.beitrag li{font-size:1.075rem;line-height:1.72;color:var(--ink)}
.beitrag p{margin:0 0 1.05em}
.beitrag strong{font-weight:680}
/* Links im Fliesstext unterstrichen: Farbe allein reicht als Kennzeichen nicht. */
.beitrag__text a:not(.web-link){color:var(--cyan-ink);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.beitrag__text a:not(.web-link):hover{text-decoration-thickness:2px}

.beitrag ul:not([class]){margin:0 0 1.2em;padding:0;list-style:none}
.beitrag ul:not([class]) > li{position:relative;margin:0 0 .55em;padding-left:26px}
.beitrag ul:not([class]) > li::before{content:"";position:absolute;left:2px;top:.66em;
  width:8px;height:8px;background:var(--cyan);transform:rotate(45deg)}

/* Nummern nur, wo die Reihenfolge wirklich zaehlt: bei Schritten. */
.schritte{margin:0 0 1.2em;padding:0;list-style:none;counter-reset:schritt}
.schritte > li{position:relative;margin:0;padding:14px 0 14px 46px;border-top:1px solid var(--line);
  counter-increment:schritt}
.schritte > li:last-child{border-bottom:1px solid var(--line)}
.schritte > li::before{content:counter(schritt);position:absolute;left:0;top:14px;
  width:28px;height:28px;display:grid;place-items:center;background:var(--cyan-soft);
  font-size:.9rem;font-weight:700;color:var(--cyan-ink)}

/* ---- Gespraech (Beispiel fuer eine Folgefrage) ---------------------------- */
.gespraech{margin:8px 0 1.4em;border:1px solid var(--line);background:var(--white)}
.gespraech__zeile{display:grid;grid-template-columns:112px minmax(0,1fr);gap:4px 16px;margin:0;
  padding:16px 18px;border-bottom:1px solid var(--line)}
.gespraech__zeile--nach{border-left:3px solid var(--cyan);background:#fbfdff}
.gespraech__wer{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cyan-ink);padding-top:.5em}
.gespraech__text{font-family:var(--stimme);font-style:italic;font-size:1.3rem;line-height:1.4;
  color:var(--ink);font-weight:460}
.gespraech figcaption,.faecher figcaption{margin:0;padding:12px 18px;
  font-size:.88rem;line-height:1.5;color:var(--muted);background:var(--paper)}

/* ---- Faecher (eine Frage wird zu mehreren Suchen) -------------------------
   Reines HTML statt Grafik: bleibt lesbar, wenn die Schrift groesser gestellt
   wird, und ein Screenreader liest die Teilsuchen als Liste vor. Die Linien
   zeigen, dass die vier Suchen aus der einen Frage kommen.

   SAUBER VERBUNDEN (24.09.2026, Basti: "bitte clean machen"): Alle Linien
   rechnen mit denselben zwei Werten, --linie (Staerke) und --ast (Abstand der
   senkrechten Linie vom linken Rand auf dem Handy). Vorher lag der Stich aus
   dem Fragekasten einen Pixel neben der Linie, die Linie lief unter der
   letzten Karte weiter und die Querlinie stand links und rechts ueber. */
.faecher{--linie:2px;--ast:22px;--luft:10px;margin:8px 0 1.4em;padding:22px clamp(16px,2.4vw,24px) 0;
  border:1px solid var(--line);background:var(--white)}
/* Mit .faecher davor: .beitrag p setzt die Textfarbe sonst auf --ink, also
   dunkel auf dunkel. */
.faecher .faecher__frage{position:relative;margin:0 0 30px;padding:14px 16px;background:var(--navy);color:#fff;
  font-family:var(--stimme);font-style:italic;font-size:1.22rem;line-height:1.4;font-weight:400}
/* Stich nach unten: genau die 30px Abstand bis zur Oberkante der Liste. */
.faecher__frage::after{content:"";position:absolute;top:100%;left:calc(50% - var(--linie) / 2);
  width:var(--linie);height:30px;background:var(--cyan)}
.faecher__teile{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--luft);
  margin:0 0 22px;padding:18px 0 0;list-style:none}
/* Querlinie von der Mitte der ersten bis zur Mitte der letzten Karte:
   eine Spalte ist (100% - 3 Luecken) / 4 breit, ihre Mitte liegt bei der Haelfte. */
.faecher__teile::before{content:"";position:absolute;top:0;height:var(--linie);background:var(--cyan);
  left:calc((100% - 3 * var(--luft)) / 8);right:calc((100% - 3 * var(--luft)) / 8)}
.faecher__teile li{position:relative;padding:10px 12px;border:1px solid var(--line);background:var(--paper);
  font-family:var(--stimme);font-style:italic;font-size:1.06rem;line-height:1.35;font-weight:460;color:var(--ink)}
.faecher__teile li::before{content:"";position:absolute;top:-18px;left:calc(50% - var(--linie) / 2);
  width:var(--linie);height:18px;background:var(--cyan)}
.faecher figcaption{margin:0 calc(clamp(16px,2.4vw,24px) * -1)}

/* Handy: Baum statt Querlinie. Jede Karte zeichnet ihr eigenes Stueck der
   senkrechten Linie (li::after) und ihren Ast (li::before). Die erste beginnt
   an der Oberkante, wo der Stich endet, die letzte endet genau am Ast. */
@media(max-width:700px){
  .faecher__frage::after{left:var(--ast)}
  .faecher__teile{grid-template-columns:1fr;padding:0 0 0 calc(var(--ast) + 26px)}
  .faecher__teile::before{display:none}
  .faecher__teile li::before{top:calc(50% - var(--linie) / 2);left:-26px;width:26px;height:var(--linie)}
  .faecher__teile li::after{content:"";position:absolute;top:calc(var(--luft) * -1);bottom:0;left:-26px;
    width:var(--linie);background:var(--cyan)}
  .faecher__teile li:first-child::after{top:0}
  .faecher__teile li:last-child::after{bottom:calc(50% - var(--linie) / 2)}
}

/* ---- Tabelle ---------------------------------------------------------------
   Wie die Preistabelle der Ortsseiten: Kopfzeile in Versalien auf --paper.
   Unter 700px wird jede Zeile zu einem Block, die Spaltennamen stehen dann
   ueber dem jeweiligen Wert (data-label). Das Tabellen-Markup bleibt fuer
   assistive Technik erhalten. */
.tabelle{margin:8px 0 1.4em;border:1px solid var(--line);background:var(--white)}
.tabelle table{width:100%;border-collapse:collapse}
.tabelle th{padding:13px 16px;text-align:left;vertical-align:bottom;background:var(--paper);
  border-bottom:1px solid var(--line);font-size:.74rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.tabelle td{padding:14px 16px;vertical-align:top;border-bottom:1px solid var(--line);
  font-size:.98rem;line-height:1.55;color:var(--ink-soft)}
.tabelle tr:last-child td{border-bottom:0}
.tabelle td:first-child{color:var(--ink);font-weight:640}
.tabelle--fragen td:first-child{font-family:var(--stimme);font-style:italic;font-size:1.1rem;font-weight:500}
@media(max-width:700px){
  .tabelle thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
  .tabelle tr{display:block;padding:14px 16px;border-bottom:1px solid var(--line)}
  .tabelle tr:last-child{border-bottom:0}
  .tabelle td{display:block;padding:0;border:0}
  .tabelle td + td{margin-top:10px}
  .tabelle td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;
    font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
}

/* ---- Codeblock (llms.txt) -------------------------------------------------
   Dunkler Rahmen mit Leiste wie .browserleiste auf den Ortsseiten: Die Datei
   soll als Datei erkennbar sein, nicht als Zitat. */
.datei{margin:8px 0 1.4em;background:#0b1422;border:1px solid #1b2942}
.datei__leiste{display:flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-bottom:1px solid #1b2942}
.datei__leiste i{width:9px;height:9px;border-radius:50%;background:#233549;flex:0 0 auto}
.datei__leiste em{margin-left:10px;font-style:normal;font-size:.76rem;color:#93a8bd;
  font-family:"Geist Mono",ui-monospace,monospace}
.datei pre{margin:0;padding:18px clamp(14px,2vw,20px);overflow-x:auto;
  font-family:"Geist Mono",ui-monospace,monospace;font-size:.86rem;line-height:1.7;color:#d7e3ef;tab-size:2}
.datei pre:focus-visible{outline:2.5px solid var(--cyan);outline-offset:-3px;border-radius:0}
.datei b{font-weight:600;color:#6fd3f5}
.datei i.zit{font-style:normal;color:#93a8bd}

/* ---- Hinweis und Beispieltext ---------------------------------------------- */
.hinweis{margin:clamp(32px,4vw,44px) 0 0;padding:18px 20px;background:var(--paper);
  border:1px solid var(--line);border-left:3px solid var(--ink-soft)}
.hinweis p{margin:0;font-size:.98rem;line-height:1.6;color:var(--ink-soft)}
.hinweis strong{color:var(--ink)}
.beispiel{margin:8px 0 1.4em;padding:18px 20px;background:var(--white);border:1px solid var(--line);
  border-top:3px solid var(--cyan)}
.beispiel .beispiel__titel{margin:0 0 8px;font-size:.74rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cyan-ink)}
.beispiel p:last-child{margin:0;font-family:var(--stimme);font-style:italic;font-size:1.22rem;line-height:1.5;font-weight:460}

/* ---- Quellen --------------------------------------------------------------- */
.quellen{margin-top:clamp(44px,5vw,64px);padding-top:26px;border-top:1px solid var(--line)}
.quellen h2{font-size:1.15rem;margin-bottom:14px}
.quellen ol{margin:0;padding:0 0 0 1.4em}
.quellen li{margin:0 0 .6em;font-size:.93rem;line-height:1.55;color:var(--ink-soft)}
.quellen li::marker{font-size:.84rem;color:var(--muted)}
.quellen a{overflow-wrap:anywhere}

/* ---- Autor ------------------------------------------------------------------
   Wer schreibt hier, und warum sollte man ihm glauben? Name, Rolle, was er
   tatsaechlich macht, und wie man ihn erreicht. Das Foto eckig (Hausregel). */
.autor{display:grid;grid-template-columns:88px minmax(0,1fr);gap:18px;align-items:start;
  margin-top:clamp(36px,4vw,52px);padding:clamp(18px,2.2vw,24px);
  background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--cyan);
  scroll-margin-top:calc(var(--nav-hoehe,80px) + 20px)}
.autor img{width:88px;height:88px;object-fit:cover;background:var(--white)}
.autor .autor__name{margin:0 0 2px;font-size:1.08rem;font-weight:690}
.autor .autor__rolle{margin:0 0 8px;font-size:.9rem;color:var(--muted)}
.autor p{margin:0 0 6px;font-size:.97rem;line-height:1.55}
.autor .autor__kontakt{display:flex;flex-wrap:wrap;gap:2px 14px;margin:8px 0 0;font-weight:600}
.autor__kontakt a{color:var(--cyan-ink);text-decoration:none}
.autor__kontakt a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- Aufmacher und Karten (Uebersicht und "Weiterlesen") -------------------
   Der neueste Beitrag steht gross mit Bild, die uebrigen als Karten. Klickbar
   ist jeweils die ganze Flaeche, der Link sitzt aber auf dem Titel, damit
   Screenreader einen sinnvollen Linktext vorlesen. */
.aufmacher,.karte{position:relative;min-width:0}
.aufmacher__bild,.karte__bild{margin:0;overflow:hidden;background:#020914}
.aufmacher__bild img,.karte__bild img{display:block;width:100%;height:auto;
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.aufmacher:hover .aufmacher__bild img,.karte:hover .karte__bild img{transform:scale(1.025)}
.thema{margin:0 0 8px;font-size:.76rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cyan-ink)}
.aufmacher h2,.karte :is(h2,h3){margin:0 0 10px;letter-spacing:-.02em;text-wrap:balance}
.aufmacher h2 a,.karte :is(h2,h3) a{color:var(--ink);text-decoration:none}
.aufmacher h2 a::after,.karte :is(h2,h3) a::after{content:"";position:absolute;inset:0}
.aufmacher h2 a:focus-visible,.karte :is(h2,h3) a:focus-visible{outline:none}
.aufmacher:has(a:focus-visible),.karte:has(a:focus-visible){outline:2.5px solid var(--cyan-ink);outline-offset:6px}
.aufmacher:hover h2 a,.karte:hover :is(h2,h3) a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.anriss{margin:0;font-size:1rem;line-height:1.6;color:var(--ink-soft)}
.kartenmeta{margin:12px 0 0;font-size:.86rem;color:var(--muted)}

.aufmacher{display:grid;gap:clamp(20px,3vw,44px);align-items:center;max-width:var(--wrap);margin:0 auto}
.aufmacher h2{font-size:clamp(1.65rem,3.2vw,2.5rem);line-height:1.1;font-weight:720}
.aufmacher .anriss{font-size:1.08rem;color:var(--ink)}
@media(min-width:900px){.aufmacher{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}

.karten{display:grid;gap:clamp(24px,3vw,36px);max-width:var(--wrap);margin:0 auto;padding:0;list-style:none}
.karte :is(h2,h3){font-size:clamp(1.2rem,1.7vw,1.38rem);line-height:1.22;font-weight:700}
.karte__bild{margin-bottom:16px}
@media(min-width:960px){.karten{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Tablet: Karten quer, Bild links. Drei Karten in zwei Spalten liessen eine
   einzelne haengen, eine Spalte mit vollbreiten Bildern waere zu lang. */
@media(min-width:560px) and (max-width:959px){
  .karte{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:center}
  .karte__bild{margin-bottom:0}
}

.ruebersicht{padding:clamp(36px,4.5vw,64px) var(--page) clamp(56px,7vw,100px)}
.ruebersicht__weitere{max-width:var(--wrap);margin:clamp(44px,5vw,72px) auto 0;padding-top:clamp(28px,3vw,40px);
  border-top:1px solid var(--line)}
.weiter{padding:clamp(48px,6vw,84px) var(--page);background:var(--paper);border-top:1px solid var(--line)}
.weiter__kopf{max-width:var(--wrap);margin:0 auto clamp(20px,2.6vw,30px)}
.weiter__kopf h2{margin:0;font-size:clamp(1.45rem,2.4vw,1.9rem);letter-spacing:-.02em;font-weight:710}

/* ---- Schmale Schirme ------------------------------------------------------- */
@media(max-width:560px){
  .gespraech__zeile{grid-template-columns:1fr}
  .autor{grid-template-columns:64px minmax(0,1fr);gap:14px}
  .autor img{width:64px;height:64px}
}
@media(prefers-reduced-motion:reduce){
  .aufmacher__bild img,.karte__bild img,.inhalt a{transition:none}
  .aufmacher:hover .aufmacher__bild img,.karte:hover .karte__bild img{transform:none}
}