/* ═══════ RATGEBER ═══════
   Nur fuer ratgeber/index.html und die Beitragsseiten, immer NACH style.css
   eingebunden. style.css bleibt unberuehrt: alle Farben, Radien und Schriften
   kommen aus deren Variablen, hier stehen nur die neuen Bausteine.

   Zwei Praefixe, beide vor dem Anlegen gegen style.css und main.js geprueft:
     beitrag__        eine Beitragsseite
     ratgeberliste__  die Kartenliste (Uebersicht und "Weiterlesen")
   Keine data-Attribute: main.js sammelt Elemente ueber data-Namen ein
   (SEELE.md, Narbe data-blatt).

   Lesegroesse: Fliesstext 18 bis 19,5 px, Zeilen hoechstens 68 Zeichen,
   Schrift dunkel auf Kalk. Die Seite wird auch von aelteren Auftraggebern
   gelesen.

   Farbe (2026-09-18): Jede Karte traegt den hellen Grund ihres Bereichs
   (--nebel Reinigung/Winter, --stein Hausmeister/Elektro, --moos-hell
   Garten, --klinker-hell Sonderleistungen und das Thema Hausverwaltung).
   Kein Kicker ueber einem Titel, keine Mono-Schrift: der Bereich steht
   als Meta-Zeile unter dem Titel bzw. in der Datenzeile des Beitrags. */

/* Die Felder der Startseite ruecken 40 px ein. Auf 344 px blieben davon
   264 px Satzbreite, zu schmal fuer Fliesstext in dieser Groesse. */
.feld.beitrag__feld { padding-inline: clamp(18px, 4.2vw, var(--inset)); }


/* ── Kopf: Pfad, Bereich, Titel, Vorspann ── */
.beitrag__kopf,
.ratgeberliste__kopf {
  /* Die Leiste liegt fest darueber: 86 px breit, 63 px im Klappmenue. */
  padding-block: clamp(128px, 17vh, 190px) clamp(2.5rem, 5vw, 4rem);
}
.ratgeberliste__kopf { padding-block-end: clamp(2rem, 4vw, 3rem); }
/* Kopf und Kartenliste sind zwei Felder auf demselben Grund; ohne das
   stapelten sich beide Polster zu rund 150 px Leerraum. */
.ratgeberliste__kopf + .beitrag__feld { padding-block-start: clamp(.5rem, 1.5vw, 1.25rem); }

.beitrag__pfad ol {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: var(--t-klein, 16px); line-height: 1.5; color: var(--ink-quiet);
}
.beitrag__pfad li + li::before {
  content: '/'; margin-inline-end: 10px; color: rgba(31,58,38,.4);
}
.beitrag__pfad a {
  color: var(--surface-panel);
  text-decoration: underline; text-decoration-color: rgba(53,107,38,.55);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.beitrag__pfad a:hover { text-decoration-color: var(--surface-gras); }

/* Der Kicker ueber dem Titel ist weg (2026-09-18): die Brotkrume sagt schon,
   wo man ist, und der Bereich steht in der Datenzeile. Der Titel rueckt
   dafuer mit eigenem Abstand an die Brotkrume. */
.beitrag__titel,
.ratgeberliste__kopftitel {
  margin-top: clamp(22px, 2.6vw, 36px); max-width: 22ch;
  font-size: var(--t-h1-lang, clamp(2rem, 1.25rem + 2.5vw, 3.25rem));
  font-weight: 600; line-height: 1.06; letter-spacing: -.028em;
  color: var(--surface-panel);
  overflow-wrap: break-word; text-wrap: balance;
}
.ratgeberliste__kopftitel { font-size: var(--t-h1, clamp(2.5rem, 1.35rem + 3.9vw, 4.75rem)); max-width: 18ch; line-height: 1.02; }
.beitrag__vorspann,
.ratgeberliste__kopflauf {
  margin-top: clamp(20px, 2.4vw, 30px); max-width: 60ch;
  font-size: var(--t-lead, clamp(19px, .5vw + 17px, 23px)); line-height: 1.5;
  color: var(--ink-body);
}

.beitrag__daten {
  display: flex; flex-wrap: wrap; gap: 6px 26px;
  margin-top: clamp(20px, 2.4vw, 28px); padding-top: 16px;
  border-top: 1px solid var(--line-dark);
  font-size: var(--t-klein, 16px); line-height: 1.5; color: var(--ink-quiet);
}
.beitrag__daten div { display: flex; flex-wrap: wrap; gap: 0 6px; }
.beitrag__daten dt { font-weight: 600; color: var(--surface-panel); }
.beitrag__daten dt::after { content: ':'; }

.beitrag__bild { margin-top: clamp(32px, 4vw, 56px); }

/* Ab 1000 px zweispaltig: Titel, Vorspann und Daten links, das Bild rechts
   daneben statt als bildschirmhoher Streifen darunter. Das Kurzfazit rueckt
   damit in den ersten Bildschirm, und die rechte Haelfte ist nicht leer. */
@media (min-width: 1000px) {
  .beitrag__kopf > .mitte {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(40px, 5vw, 80px); align-items: start;
  }
  .beitrag__kopf > .mitte > * { grid-column: 1; }
  .beitrag__kopf .beitrag__bild { grid-column: 2; grid-row: 2 / span 3; margin-top: clamp(22px, 2.6vw, 36px); }
  .beitrag__kopf .beitrag__bild img { aspect-ratio: 1; }
  .beitrag__kopf .beitrag__vorspann { max-width: 54ch; }

  .ratgeberliste__kopf > .mitte {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 80px); align-items: end;
  }
  .ratgeberliste__kopf .beitrag__pfad { grid-column: 1 / -1; }
  .ratgeberliste__kopf .ratgeberliste__kopflauf { margin-top: 0; padding-bottom: .35em; }
}
.beitrag__bild img {
  width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover;
  border-radius: var(--r-gross); background: var(--surface-sand);
}

.beitrag__bild figcaption { margin-top: 10px; font-size: var(--t-klein, 16px); color: var(--ink-quiet); }
.beitrag__bild figcaption a { text-decoration: underline; text-underline-offset: 3px; }


/* ── Rumpf: Kurzfazit, Inhaltsverzeichnis, Text ──
   Reihenfolge im Quelltext: Fazit, Inhalt, Text. Auf dem Telefon steht das
   Inhaltsverzeichnis damit zwischen Fazit und erstem Abschnitt; ab 1000 px
   wandert es als stehende Spalte nach rechts. */
.beitrag__rumpf { padding-block: 0 clamp(4rem, 9vw, 7rem); }
.beitrag__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 40px); }

/* Das Inhaltsverzeichnis steht links. Rechts neben einer 58ch-Spalte blieb
   zwischen Text und Verzeichnis rund 200 px Loch; links anliegend wird der
   Rest zum ruhigen rechten Rand. */
@media (min-width: 1000px) {
  .beitrag__raster {
    grid-template-columns: minmax(230px, 270px) minmax(0, 1fr);
    grid-template-areas: "inhalt fazit" "inhalt text";
    column-gap: clamp(48px, 6vw, 96px); row-gap: clamp(40px, 5vw, 56px);
  }
  .beitrag__fazit  { grid-area: fazit; }
  .beitrag__text   { grid-area: text; }
  .beitrag__inhalt { grid-area: inhalt; align-self: start; position: sticky; top: 118px; }
}

/* Kurzfazit hell auf Nebel statt Wald: der Artikel hat damit keinen
   zweiten dunklen Kasten neben dem Angebot, und der kuehle Ton setzt sich
   vom warmen Merkkasten ab. */
.beitrag__fazit {
  max-width: 58ch;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r-gross);
  background: var(--nebel); color: var(--ink-body);
}
.beitrag__fazit-titel {
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 600;
  line-height: 1.2; letter-spacing: -.012em;
  color: var(--surface-panel);
}
.beitrag__fazit ul { display: grid; gap: 14px; margin-top: 18px; }
.beitrag__fazit li {
  position: relative; padding-inline-start: 1.5em;
  font-size: clamp(18px, .3vw + 16.8px, 19.5px); line-height: 1.55;
}
.beitrag__fazit li::before {
  content: ''; position: absolute; inset-inline-start: .1em; top: .52em;
  width: .5em; height: .5em; border-radius: 50%; background: var(--surface-gras);
}

.beitrag__inhalt {
  padding: 22px 24px;
  border-radius: var(--r-mittel);
  background: var(--papier);
  box-shadow: inset 0 0 0 1px var(--line-dark);
}
.beitrag__inhalt-titel {
  font-size: 18.5px; font-weight: 600; line-height: 1.3;
  color: var(--surface-panel);
}
.beitrag__inhalt ol { margin-top: 10px; counter-reset: beitrag-inhalt; }
.beitrag__inhalt li { counter-increment: beitrag-inhalt; }
.beitrag__inhalt li + li { border-top: 1px solid var(--line-dark); }
.beitrag__inhalt a {
  display: grid; grid-template-columns: 1.7em minmax(0, 1fr); align-items: baseline;
  padding-block: 10px;
  font-size: 18.5px; line-height: 1.35; color: var(--surface-panel);
}
.beitrag__inhalt a::before {
  content: counter(beitrag-inhalt);
  font-weight: 600; color: var(--surface-gras); font-variant-numeric: tabular-nums;
}
.beitrag__inhalt a:hover,
.beitrag__inhalt a:focus-visible {
  text-decoration: underline; text-decoration-color: var(--surface-gras);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}


/* ── Fliesstext ──
   style.css setzt oben `* { margin: 0 }` und nimmt Listen die Zeichen.
   Abstaende und Aufzaehlungszeichen stehen deshalb hier ausdruecklich. */
/* 58ch statt 68: `ch` misst die Null, und die ist in General Sans breit.
   Bei 68ch standen gemessen 79 Zeichen in der Zeile, bei 58ch rund 67. */
.beitrag__text {
  max-width: 58ch;
  font-size: clamp(18px, .35vw + 16.5px, 19.5px); line-height: 1.7;
  color: var(--ink-body);
}
.beitrag__text > * + * { margin-top: 1.05em; }
.beitrag__text > :first-child { margin-top: 0; }

.beitrag__text h2 {
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
  font-size: clamp(1.6rem, 1.05rem + 1.6vw, 2.35rem);
  font-weight: 600; line-height: 1.14; letter-spacing: -.022em;
  color: var(--surface-panel);
  scroll-margin-top: 110px;
}
.beitrag__text h3 {
  margin-top: 2em;
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem);
  font-weight: 600; line-height: 1.25; letter-spacing: -.012em;
  color: var(--surface-panel);
  scroll-margin-top: 110px;
}
.beitrag__text > h2 + *,
.beitrag__text > h3 + * { margin-top: .6em; }
/* Jedes Kapitel beginnt mit einer Haarlinie: in 10 000 px Text gibt das
   dem Auge Ruhepunkte, ohne einen Kasten zu bauen. */
.beitrag__text > h2:not(:first-child) {
  padding-top: clamp(1.9rem, 3.4vw, 2.6rem);
  border-top: 1px solid rgba(31, 58, 38, .2);
}
/* Ab 1000 px bleibt der Lesetext bei 58ch, Tabelle und Angebot nutzen die
   ganze Spalte bis zum rechten Rand: Tabellen mit drei Spalten brauchen
   die Breite, und das Angebot setzt sich als eigenes Element ab. */
@media (min-width: 1000px) {
  .beitrag__text { max-width: none; }
  .beitrag__text > * { max-width: 58ch; }
  .beitrag__text > .beitrag__tabelle,
  .beitrag__text > .beitrag__angebot { max-width: none; }
}

.beitrag__text strong { font-weight: 600; color: var(--surface-panel); }
/* Unterstrich in Gras statt Akzent: Limette auf Creme ist als Linie kaum
   zu sehen, und ein Link muss ohne Farbsehen erkennbar bleiben. */
.beitrag__text a:not(.tat) {
  color: var(--surface-panel); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--surface-gras);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
  overflow-wrap: anywhere;
}
.beitrag__text a:not(.tat):hover { background: rgba(207,232,43,.45); }

/* Aufzaehlung */
.beitrag__punkte { display: grid; gap: .55em; }
.beitrag__punkte > li { position: relative; padding-inline-start: 1.4em; }
.beitrag__punkte > li::before {
  content: ''; position: absolute; inset-inline-start: .15em; top: .66em;
  width: .48em; height: .48em; border-radius: 50%; background: var(--surface-gras);
}

/* Nummerierte Schritte */
.beitrag__schritte { display: grid; gap: .8em; counter-reset: beitrag-schritt; }
.beitrag__schritte > li {
  position: relative; padding-inline-start: 2.3em;
  counter-increment: beitrag-schritt;
}
.beitrag__schritte > li::before {
  content: counter(beitrag-schritt);
  position: absolute; inset-inline-start: 0; top: .12em;
  display: grid; place-items: center;
  width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--accent); color: var(--ink-on-accent);
  font-size: .82em; font-weight: 600; line-height: 1;
}

/* Checkliste mit Haken */
.beitrag__haken { display: grid; gap: .7em; }
.beitrag__haken > li { position: relative; padding-inline-start: 2.1em; }
.beitrag__haken > li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .28em;
  width: 1.25em; height: 1.25em; border-radius: var(--r-klein);
  border: 2px solid var(--surface-gras); background: var(--papier);
}
.beitrag__haken > li::after {
  content: ''; position: absolute; inset-inline-start: .45em; top: .44em;
  width: .36em; height: .68em;
  border: solid var(--surface-gras); border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* Merkkasten: oertliche Satzung, Ausnahmen, Stolperstellen. Ein getoenter
   Kasten in Klinker statt Seitenstrich: die Farbe markiert den Hinweis,
   der Titel steht in Ziegel (5,7 : 1 auf Klinker hell). */
.beitrag__merke {
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 32px);
  border-radius: var(--r-mittel);
  background: var(--klinker-hell);
}
.beitrag__merke-titel { font-weight: 600; color: var(--tinte-ziegel); }
.beitrag__merke > * + * { margin-top: .5em; }

/* Vergleichstabelle. Ab 700 px eine echte Tabelle; darunter stapeln sich
   die Zeilen, und jede Zelle traegt ihre Spaltenkoepfe als eigene Zeile.
   Die Beschriftung ist aria-hidden: Vorleseprogramme lesen die Tabelle
   ohnehin mit den echten Koepfen. */
.beitrag__tabelle {
  overflow-x: auto;
  border: 1px solid var(--line-dark); border-radius: var(--r-mittel);
}
.beitrag__tabelle table { width: 100%; border-collapse: collapse; font-size: 18.5px; line-height: 1.5; }
.beitrag__tabelle caption {
  padding: 16px 18px 0; text-align: start;
  font-weight: 600; color: var(--surface-panel);
}
.beitrag__tabelle th,
.beitrag__tabelle td { padding: 14px 18px; text-align: start; vertical-align: top; }
.beitrag__tabelle { background: var(--papier); }
.beitrag__tabelle thead th { background: var(--nebel); color: var(--surface-panel); font-weight: 600; }
.beitrag__tabelle tbody th { font-weight: 600; color: var(--surface-panel); width: 26%; }
.beitrag__tabelle tbody tr + tr { border-top: 1px solid var(--line-dark); }
.beitrag__spalte { display: none; }

@media (max-width: 700px) {
  .beitrag__tabelle table, .beitrag__tabelle tbody,
  .beitrag__tabelle tr, .beitrag__tabelle th, .beitrag__tabelle td { display: block; width: auto; }
  .beitrag__tabelle thead { display: none; }
  /* Als table-caption schrumpfte die Beschriftung im gestapelten Block auf
     Wortbreite und stand ein Wort pro Zeile. */
  .beitrag__tabelle caption { display: block; padding-block-end: 12px; }
  /* width: auto muss hier noch einmal stehen: die Desktop-Regel
     "tbody th { width: 26% }" ist spezifischer als die Sammelregel oben
     und liess die Beschriftung sonst Wort für Wort umbrechen. */
  .beitrag__tabelle tbody th { width: auto; padding-block-end: 10px; background: var(--nebel); }
  .beitrag__tabelle td { padding-block: 10px 12px; }
  .beitrag__tabelle td + td { border-top: 1px dashed var(--line-dark); }
  .beitrag__spalte {
    display: block; margin-bottom: 2px;
    font-size: 16.5px; font-weight: 600; line-height: 1.4;
    color: var(--surface-gras);
  }
}

/* Eingestreuter Hinweis auf eine Leistung: hoechstens einmal pro Beitrag,
   nach dem Abschnitt, auf den er sich bezieht. Seit Runde 2 mit dem
   Leistungsbild des Bereichs und auf seinem hellen Grund; Rasengruen ist
   der Startseite (#fuerwen) vorbehalten. */
.beitrag__angebot {
  --grund: var(--papier);
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding: 12px;
  border-radius: var(--r-gross);
  background: var(--grund); color: var(--ink-body);
}
.beitrag__angebot--nebel   { --grund: var(--nebel); }
.beitrag__angebot--stein   { --grund: var(--stein); }
.beitrag__angebot--moos    { --grund: var(--moos-hell); }
.beitrag__angebot--klinker { --grund: var(--klinker-hell); }
.beitrag__text > .beitrag__angebot { margin-block: 2.4em; }
.beitrag__angebot-bild {
  margin: 0; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: var(--r-mittel);
  background: var(--stein);
}
.beitrag__angebot-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.beitrag__angebot-wort {
  display: grid; gap: 12px; align-content: center;
  padding: clamp(18px, 2.4vw, 28px) clamp(10px, 2vw, 26px) clamp(12px, 1.6vw, 18px);
}
.beitrag__text .beitrag__angebot-wort > * + * { margin-top: 0; }
.beitrag__angebot-titel {
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem);
  font-weight: 600; line-height: 1.2; letter-spacing: -.015em; color: var(--surface-panel);
}
.beitrag__angebot p { color: var(--ink-body); }
.beitrag__angebot .tat { justify-self: start; margin-top: 6px; gap: 10px; }
.beitrag__angebot .tat svg { width: 20px; height: 20px; fill: currentColor; }
@media (min-width: 700px) {
  .beitrag__angebot { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .beitrag__angebot-bild { aspect-ratio: auto; min-height: 250px; }
}

/* Haeufige Fragen */
.beitrag__fragen { border-bottom: 1px solid var(--line-dark); }
.beitrag__frage { padding-block: 22px 24px; border-top: 1px solid var(--line-dark); }
.beitrag__text .beitrag__frage h3 { margin-top: 0; }
.beitrag__frage p { margin-top: .5em; }

/* Quellen und Rechtshinweis */
.beitrag__quellen { display: grid; gap: .6em; font-size: 18.5px; line-height: 1.55; counter-reset: beitrag-quelle; }
.beitrag__quellen > li { position: relative; padding-inline-start: 2em; counter-increment: beitrag-quelle; }
.beitrag__quellen > li::before {
  content: counter(beitrag-quelle) '.';
  position: absolute; inset-inline-start: 0;
  font-weight: 600; color: var(--surface-gras);
}
.beitrag__rechtshinweis {
  padding: 18px 22px; border-radius: var(--r-mittel);
  background: var(--stein);
  font-size: 18.5px; line-height: 1.55; color: var(--ink-body);
}
.beitrag__text > .beitrag__rechtshinweis { margin-top: 2em; }


/* ── Kartenliste: Uebersicht und "Weiterlesen" ──
   Jede Karte ist eine getoente Tafel in der Farbe ihres Bereichs, das Bild
   sitzt darin wie in einem Passepartout. Kein "Lesen"-Chip mehr: die ganze
   Karte ist der Link. Auf der Uebersicht fuehrt ein Aufmacher ueber die
   volle Breite; die neun uebrigen Karten fuellen drei ganze Reihen. */
.ratgeberliste {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}
@media (min-width: 620px) {
  .ratgeberliste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ratgeberliste__karte--aufmacher { grid-column: 1 / -1; }
  /* Zwei Spalten, ungerade Zahl von Karten: die letzte liegt quer ueber
     beide, statt eine Luecke im Raster zu lassen. */
  .ratgeberliste__karte:not(.ratgeberliste__karte--aufmacher):last-child { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .ratgeberliste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ratgeberliste__karte:not(.ratgeberliste__karte--aufmacher):last-child { grid-column: auto; }
}

.ratgeberliste__karte { --karte-grund: var(--papier); min-width: 0; }
.ratgeberliste__karte--nebel   { --karte-grund: var(--nebel); }
.ratgeberliste__karte--stein   { --karte-grund: var(--stein); }
.ratgeberliste__karte--moos    { --karte-grund: var(--moos-hell); }
.ratgeberliste__karte--klinker { --karte-grund: var(--klinker-hell); }
/* Auf dem Steingrund des "Weiterlesen" verschwaende eine Steinkarte */
.feld--sand .ratgeberliste__karte--stein { --karte-grund: var(--papier); }

.ratgeberliste__karte > a {
  display: flex; flex-direction: column; height: 100%;
  padding: 12px 12px clamp(22px, 2.4vw, 28px);
  border-radius: var(--r-mittel);
  background: var(--karte-grund);
}
.ratgeberliste__karte > a:focus-visible { outline: 3px solid var(--surface-gras); outline-offset: 4px; }
.ratgeberliste__bild { overflow: hidden; border-radius: var(--r-mittel); background: var(--surface-sand); }
.ratgeberliste__bild img {
  width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover;
  transition: transform .9s var(--kurve);
}
.ratgeberliste__karte > a:hover .ratgeberliste__bild img { transform: scale(1.04); }
.ratgeberliste__titel {
  margin: 20px 10px 0;
  font-size: clamp(21px, .5vw + 19px, 24px);
  font-weight: 600; line-height: 1.22; letter-spacing: -.016em;
  color: var(--surface-panel);
  text-decoration: underline 2px transparent; text-underline-offset: 5px;
  transition: text-decoration-color .3s var(--kurve);
}
.ratgeberliste__karte > a:hover .ratgeberliste__titel { text-decoration-color: var(--surface-gras); }
/* Der Bereich als Meta-Zeile unter dem Titel, in Satzschrift */
.ratgeberliste__bereich {
  margin: 10px 10px 0;
  font-size: var(--t-klein, 16px); font-weight: 500; line-height: 1.45;
  color: var(--ink-quiet);
}
.ratgeberliste__zeit { white-space: nowrap; }
.ratgeberliste__anriss { margin: 12px 10px 0; font-size: 18.5px; line-height: 1.58; color: var(--ink-body); }

/* Der Aufmacher: Wort links auf dem Bereichsgrund, das Bild rechts randlos
   bis an die Seitenkante (wie der Kopf der Ueber-uns-Seite). Der Abschnitt
   schneidet quer ab (overflow-x: clip), damit eine klassische Bildlaufleiste
   unter Windows keinen Querscroll ausloest. */
.beitrag__feld:has(.ratgeberliste__karte--aufmacher) { overflow-x: clip; }
@media (min-width: 900px) {
  .ratgeberliste__karte--aufmacher > a {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: clamp(32px, 4.4vw, 72px);
    min-height: clamp(400px, 36vw, 540px);
    margin-inline-end: calc(50% - 50vw);
    padding: 0 0 0 clamp(28px, 4vw, 56px);
    border-radius: var(--r-gross) 0 0 var(--r-gross);
    overflow: hidden;
  }
  .ratgeberliste__karte--aufmacher .ratgeberliste__bild {
    grid-column: 2; grid-row: 1 / -1; border-radius: 0;
  }
  .ratgeberliste__karte--aufmacher .ratgeberliste__bild img { height: 100%; aspect-ratio: auto; }
  .ratgeberliste__karte--aufmacher .ratgeberliste__titel {
    grid-column: 1; grid-row: 2; margin: clamp(28px, 3vw, 44px) 0 0;
    font-size: clamp(1.75rem, 1rem + 1.4vw, 2.5rem);
    line-height: 1.1; letter-spacing: -.024em; text-wrap: balance;
  }
  .ratgeberliste__karte--aufmacher .ratgeberliste__bereich { grid-column: 1; grid-row: 3; margin: 14px 0 0; }
  .ratgeberliste__karte--aufmacher .ratgeberliste__anriss {
    grid-column: 1; grid-row: 4;
    margin: 16px 0 clamp(28px, 3vw, 44px); max-width: 44ch;
    font-size: clamp(18.5px, .4vw + 17px, 20.5px);
  }
}

/* Telefon: jede Karte eine Zeile, Bild klein links. Zehn hohe Karten waren
   gestapelt 7 400 px; so passt die Liste auf rund drei Bildschirme. Der
   Aufmacher bleibt gross. */
@media (max-width: 619px) {
  .ratgeberliste__karte:not(.ratgeberliste__karte--aufmacher) > a {
    display: grid; grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 16px; align-items: center;
    padding: 10px 14px 10px 10px;
  }
  .ratgeberliste__karte:not(.ratgeberliste__karte--aufmacher) .ratgeberliste__bild { grid-row: 1 / span 2; align-self: start; }
  .ratgeberliste__karte:not(.ratgeberliste__karte--aufmacher) .ratgeberliste__bild img { aspect-ratio: 1; }
  .ratgeberliste__karte:not(.ratgeberliste__karte--aufmacher) .ratgeberliste__titel { margin: 2px 0 0; font-size: 18px; line-height: 1.28; }
  .ratgeberliste__karte:not(.ratgeberliste__karte--aufmacher) .ratgeberliste__bereich { margin: 6px 0 2px; font-size: 17.5px; }
  .ratgeberliste__karte:not(.ratgeberliste__karte--aufmacher) .ratgeberliste__anriss { display: none; }
  .ratgeberliste__zeit { display: none; }
  .ratgeberliste__bereich span[aria-hidden] { display: none; }
}

.ratgeberliste__weiter-kopf { margin-bottom: clamp(2rem, 4vw, 3rem); }
.ratgeberliste__hinweis { max-width: 68ch; margin-top: clamp(40px, 5vw, 64px); }

/* Nur fuer Vorleseprogramme: Ueberschrift ueber der Kartenliste, damit die
   Kartentitel als h2 nicht ohne Oberbegriff stehen. */
.ratgeberliste__versteckt {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Schlussblock im Ratgeber: Titel eine Stufe unter der H1 der Beitraege
   (--t-h1-lang, 52 px). Mit der globalen H2 (64 px) stand er groesser als
   der Beitragstitel. */
.beitrag__feld.ueberwege__feld .kapitel__titel {
  font-size: var(--t-h2-lang, clamp(1.75rem, .9rem + 2.6vw, 3.1rem));
  line-height: 1.04;
}

/* Der Fuss steht seit 2026-09-18 gemeinsam fuer alle Unterseiten in
   style.css (.fuss--seite). */

@media (prefers-reduced-motion: reduce) {
  .ratgeberliste__bild img, .ratgeberliste__titel { transition: none; }
}