/* ==========================================================================================
   Rollrasen Kahl Morgentau – Welle 2, Seitengruppe Ratgeber: Ergänzungen zu region.css (Entwurf, Gruppe region)
   Gebaut von tools/welle2/bau_ratgeber.py – nicht von Hand ändern.
   - Beitragsinhalt aus dem WordPress-Editor (.beitragstext): Überschriften, Listen, Bilder, Tabellen, Zitate
   - Beitragsseite: Kopf ohne Bild, Beratung auf dem Handy, langes Inhaltsverzeichnis, vier Weiter-Karten
   - Blog-Kategorie: Kopf ohne Bild, Hinweis auf den Ratgeber
   - Video der Verlegeanleitung in der Gestaltung des Entwurfs-Platzhalters (startet erst auf Klick)
   ========================================================================================== */

/* ---------- Produkt-Teaser: WebKit (Safari) rechnete die Bildfläche aus aspect-ratio breiter als die Karte (3–4 px
   waagerechter Überlauf auf dem Handy); so ist sie in beiden Engines so groß wie im freigegebenen Entwurf (Chromium) ---------- */
.teaser__raster .produkt__bild { min-width: 0; aspect-ratio: auto; }

/* ---------- Kopf ohne Bild (Beitrag ohne Beitragsbild, Blog-Kategorie) ---------- */
@media (min-width: 1000px) { .seitenkopf__raster--text { grid-template-columns: minmax(0, 1fr); } }
.seitenkopf__raster--text .seitenkopf__text { max-width: 60rem; }
.seitenkopf h1 { -webkit-hyphens: auto; }

/* ---------- Beitragsinhalt aus dem Editor (Fließtext wie .artikeltext, 65–75 Zeichen je Zeile) ---------- */
.beitragstext { overflow-wrap: break-word; }
.beitragstext h2 { margin: clamp(40px, 4.5vw, 60px) 0 16px; scroll-margin-top: calc(var(--kopf-h) + 20px); -webkit-hyphens: auto; }
.beitragstext > h2:first-child, .beitragstext > :first-child h2:first-child { margin-top: 0; }
.beitragstext h3 { margin: 28px 0 8px; }
.beitragstext h4 { margin: 22px 0 6px; font-size: 1.05rem; }
.beitragstext :is(p, ul, ol, table, blockquote, figure) { max-width: 100%; }
.beitragstext ul, .beitragstext ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.beitragstext ul { list-style: disc; }
.beitragstext ol { list-style: decimal; }
.beitragstext li { margin: .35em 0; padding-left: .2em; line-height: 1.55; }
.beitragstext li::marker { color: var(--tannengruen); }
.beitragstext a:not(.btn) { color: var(--tannengruen); text-decoration: underline; text-underline-offset: .18em; }
.beitragstext a:not(.btn):hover { color: var(--tannengruen-dunkel); }
.beitragstext img { display: block; width: auto; max-width: 100%; height: auto; margin: 26px 0; border-radius: var(--r-l); box-shadow: var(--schatten-1); }
.beitragstext figure { margin: 26px 0; }
.beitragstext figure img { margin: 0; }
.beitragstext figcaption, .beitragstext .wp-caption-text { margin-top: 8px; font-size: .8125rem; color: var(--tinte-2); }
.beitragstext .aligncenter { margin-left: auto; margin-right: auto; }
.beitragstext blockquote { margin: 26px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--tannengruen); color: var(--tinte); font-size: 1.0625rem; }
.beitragstext hr { height: 1px; margin: 36px 0; border: 0; background: var(--linie); }
.beitragstext section { margin: 0; }
/* Tabellen: eigene Rolle zum Wischen, die Seite selbst wird nie breiter */
.beitragstext .tabelle { max-width: 100%; margin: 22px 0 26px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--karte); }
.beitragstext table { width: 100%; margin: 0; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; }
.beitragstext caption { padding: 14px 16px 4px; font: 600 .75rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-align: left; color: var(--tannengruen); }
.beitragstext th, .beitragstext td { padding: 12px 16px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.beitragstext tr:last-child > :is(th, td) { border-bottom: 0; }
.beitragstext thead th, .beitragstext tr:first-child > th { font-weight: 600; color: var(--tinte); background: var(--hellgruen-flaeche); }

/* ---------- Beitragsseite ---------- */
.beratung--handy { margin-top: clamp(36px, 5vw, 56px); }
@media (min-width: 1100px) {
  .beratung--handy { display: none; }
  /* langes Inhaltsverzeichnis: rollt in der mitlaufenden Seitenleiste, die Beratung bleibt sichtbar */
  .beitragseite .toc__liste { max-height: calc(100vh - var(--kopf-h) - 360px); max-height: calc(100svh - var(--kopf-h) - 360px); min-height: 180px; overflow-y: auto; overscroll-behavior: contain; }
}
@media (min-width: 640px) { .weiter__raster--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .weiter__raster--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Blog-Kategorie ---------- */
.blogseite .finder h2 { font-size: 1.3rem; }
.blog__hinweis { margin: 22px 0 0; color: var(--tinte-2); font-size: .9375rem; }
.blog__leer { margin: 0; padding: 22px; }
.blog__leer p { margin: 0 0 12px; color: var(--tinte-2); }

/* ---------- Video (Verlegeanleitung): Gestaltung wie der Platzhalter, echtes Video darunter ---------- */
.video-platz--video { background: var(--nacht); }
.artikeltext figure.video-platz--video { aspect-ratio: 16 / 9; }   /* Format des Videos statt 3:2 der Fotos */
.video-platz--video > video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: contain; background: var(--nacht); }
.video-platz--video .video-platz__knopf { display: none; cursor: pointer; }
.js .video-platz--video .video-platz__knopf { display: grid; }
.video-platz--video::after { display: none; }
.js .video-platz--video:not(.spielt)::after { display: block; }
.video-platz--video.spielt .video-platz__knopf { display: none; }
.video-platz__knopf:focus-visible { outline: 3px solid var(--hellgruen); outline-offset: -6px; border-radius: var(--r-xl); }
/* Wächter für die Prüfwerkzeuge: steht am Dateiende */
:root { --ende-ratgeber: 1; }