/* Gemeinsames Stylesheet fuer /starkregen-news/ (Vorschau-Karten) und
   /blog/<slug>/ (Volltext-Artikel) - beide nutzen dieselbe Bild-/Prosa-
   Formatierung. */

/* ---- Blogartikel-Kopf ----
   Am Original nachgemessen (1440px, drei Artikel gegengeprueft):

     Datum        y=197  (Kopfzeile 74px + 123px Innenabstand)
     Titel        y=235, 29/700/34.8, zentriert, Spalte 810px bei x=315
     Untertitel   y=290, 24/700/28.8, zentriert
     "Artikel teilen"  y=422, 15/700/22.5
     Symbolreihe  y=467, je 27x27, Rasterabstand 74px
     Aufmacherbild y=568, 1008x690 bei x=216, radius 18px, object-fit cover
                  (auf allen geprueften Artikeln identisch)

   Vorher: Innenabstand 96px statt 123px, Textspalte effektiv 762px statt
   810px (die 810px der .blogpost__header-Regel wurden vom 24px-Polster von
   .container aufgezehrt) und ein Aufmacherbild von 852x568 in freier
   Hoehe - der Bildblock allein machte den groessten Teil der 19-28%
   Abweichung der zehn Blogseiten aus. */

.section--blogpost { padding-top: 123px; padding-bottom: 123px; }

/* Abstand nach unten als padding, NICHT als margin: der 20px-Abstand unter
   dem Titel wuerde sonst bei Artikeln ohne Untertitel mit dem Aussenabstand
   des Kopfblocks kollabieren (max(74,20)=74 statt 94) und alles darunter
   um 20px zu hoch setzen. */
.blogpost__header { max-width: 858px; margin: 0 auto; padding-bottom: 74px; }
.blogpost__date {
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--color-text-muted); margin-bottom: 15px;
}
/* Der 20px-Abstand unter dem Titel bleibt AUCH dann stehen, wenn kein
   Untertitel folgt - im Original steht "Artikel teilen" bei Artikeln ohne
   Untertitel bei y=364 statt 344. Der Wert ist 21px (nicht 20) - subpixel
   am Original nachgemessen: Titelunterkante 269,30 -> Untertitel 290,30. Eine :last-child-Ausnahme hier hatte auf
   /blog/fr%C3%BChalarm-bei-starkregen-auf-smartphone/ alles darunter
   (Teilen-Leiste UND Aufmacherbild) um 21px nach oben gezogen - dort allein
   ueber 10% Abweichung. */
.blogpost__header h1 { margin-bottom: 21px; }
/* Original: Untertitel 24px/700/28.8. */
.blogpost__subtitle {
  color: var(--color-text-muted);
  font-size: var(--fs-card); line-height: var(--lh-card);
  font-weight: var(--fw-bold); margin: 0;
}

.blogpost__share { padding-bottom: 74px; }
/* Original "Artikel teilen": 15px/700/22.5 in einem sehr hellen Grau
   (#c9c9c9). Wir setzen die abgedunkelte Variante --color-text-faint,
   weil #c9c9c9 auf Weiss den AA-Kontrast nicht besteht (s. DECISIONS.md). */
.blogpost__share-label {
  font-size: var(--fs-body); line-height: var(--lh-body);
  font-weight: var(--fw-bold); color: var(--color-text-faint);
  margin-bottom: 23px;
}
/* Symbole 27x27 im 74px-Raster, also 47px Zwischenraum. Die Reihe steht im
   Original nicht exakt mittig, sondern 3,5px nach rechts versetzt. */
.blogpost__share-buttons {
  display: flex; justify-content: center; gap: 47px;
  padding-left: 7px;
}
.blogpost__share-buttons .icon-btn {
  width: 27px; height: 27px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
}
.blogpost__share-buttons .icon-btn svg { width: 20px; height: 20px; }
/* Hover-Sweep 2026-07: die Netzwerk-Symbole sind im Original beim Hover
   STATISCH (nur der Kopieren-Knopf blendet auf seine dunkle Variante um).
   Der aus base.css geerbte Kasten-Hover (Fond+Rahmen) ist hier neutralisiert;
   der Kopieren-Knopf dunkelt stattdessen wie im Original ab. */
.blogpost__share-buttons .icon-btn:hover {
  background: transparent; border-color: var(--color-border);
}
.blogpost__share-buttons .blogpost__copy { transition: color var(--duration-hover) var(--ease-smooth); }
.blogpost__share-buttons .blogpost__copy:hover { color: var(--color-text); }
/* Das "Link kopieren"-Symbol ist im Original etwas kleiner als die drei
   Netzwerk-Symbole (21x21 statt 27x27). */
/* background: transparent tilgt den UA-Default (buttonface #efefef), der den
   Kopieren-Knopf als grauen Kasten rendern liess - die a-Symbole daneben sind
   ohnehin transparent. */
.blogpost__share-buttons .blogpost__copy { width: 21px; height: 21px; align-self: center; background: transparent; }
.blogpost__share-buttons .blogpost__copy svg { width: 21px; height: 21px; }

/* Aufmacherbild: feste 1008x690 wie im Original, Ausschnitt per cover. */
.blogpost__hero { max-width: 1056px; margin: 0 auto; }
.blogpost__hero img {
  width: 1008px; height: 690px; max-width: 100%;
  object-fit: cover; border-radius: 18px; display: block; margin: 0 auto;
}
/* Bildunterschrift + Quellen-/Linkzeilen: im Original 12px/400/18 - im
   Nachbau liefen sie als normale 15px-Absaetze mit (nachgemessen auf
   /blog/erstes-fas-in-der-schweiz/, .../bruchsal..., .../zweibruecken,
   .../uav-srgk). */
.blogpost__caption, .blogpost__linkline {
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  color: var(--color-text-muted); margin-top: var(--space-2);
}
.blogpost__credit { font-size: var(--fs-micro); color: var(--color-text-faint); margin-top: var(--space-2); }

@media (max-width: 1099px) {
  .blogpost__hero img { width: 100%; height: auto; }
}

/* Textspalte: im Original 1008px breit (x216..1224 @1440, nachgemessen
   blog-measure.mjs Vergleichslauf 2026-07-24) - nicht 760. 1056 = 1008 +
   2x Container-Polster (24px); Abstand zum Aufmacherbild im Original 9px
   knapper als --space-7. */
.blogpost__body.prose { max-width: 1056px; margin: 39px auto 0; text-align: left; }
/* Fliesstext im Original: rgb(129,129,129) - die AA-taugliche Variante
   davon ist --color-text-muted. --color-text-subtle (#333) ist im Original
   ausschliesslich die Farbe der FUSSZEILEN-Links. */
.blogpost__body p { color: var(--color-text-muted); margin-bottom: 22.5px; }
/* Absatzabstand im Original exakt eine Zeilenhoehe (22.5px), nicht 16px
   (nachgemessen blog-paras.mjs: Absatz-Luecken 1342->1365 usw.). */
.blogpost__body a {
  color: var(--color-brand-blue-text); text-decoration: underline;
  transition: color var(--duration-hover) var(--ease-smooth);
}
/* Hover-Sweep 2026-07: Inline-Links dunkeln im Original leicht ab
   (#0099ff->#0088ff); Analogon auf unserem AA-Blau. */
.blogpost__body a:hover { color: #0065c8; }
.blogpost__figure { margin: var(--space-6) 0; }
.blogpost__figure img { width: 100%; height: auto; border-radius: var(--radius-md); }
.blogpost__figure figcaption { font-size: var(--fs-micro); color: var(--color-text-faint); margin-top: var(--space-2); }

/* Blaetter-Karten: Geometrie am Original nachgemessen (blog-measure2.mjs,
   Vergleichslauf 2026-07-24 @1440): Container buendig zur Textspalte
   (1008px), Karte 481x169 = Polster 23 + Bild 123x123 (Radius 18) +
   Zwischenraum 47 + Textspalte 265; Beschriftungs-Chip 182x47 (Radius 9,
   Rahmen, Pfeil 26x12 vor dem Text), Karte selbst OHNE Rahmen. */
/* Lauf 6 @1440: Artikelende -> Teaser-Karten 96 (nicht 97, Karte y=2291,9),
   Karten -> Pfadleiste 123 wie bei den Rechtstexten (2460,9 -> 2583,9);
   .section-pb 96 war 27 zu knapp - gesamte dh-Differenz -26 der Blogseiten. */
.blogpost__nav {
  max-width: 1056px; margin: 96px auto 0;
  display: flex; gap: var(--space-5); justify-content: space-between;
}
.blogpost__nav-card {
  display: flex; align-items: center; gap: 47px;
  border-radius: 18px; padding: 23px; background: var(--color-bg);
}
/* Hover-Sweep 2026-07 (am Original gemessen): die Blaetter-Karten bekommen
   beim Hover den Schatten-Glow 0 0 47px rgba(0,0,0,.23) und die Beschriftung
   ("Vorheriger/Naechster Artikel") dunkelt #818181->#333. Rahmen bleibt,
   keine Unterstreichung - das war erfunden. */
.blogpost__nav-card { transition: box-shadow var(--duration-hover) var(--ease-smooth); }
.blogpost__nav-card .blogpost__nav-label { transition: color var(--duration-hover) var(--ease-smooth); }
.blogpost__nav-card:hover { box-shadow: 0 0 47px rgba(0, 0, 0, .23); }
.blogpost__nav-card:hover .blogpost__nav-label { color: var(--color-text); }
.blogpost__nav-card--next { flex-direction: row-reverse; text-align: right; }
.blogpost__nav-card img { width: 123px; height: 123px; border-radius: 18px; object-fit: cover; flex-shrink: 0; }
/* Original: Blaetter-Beschriftung 15px/400/22.5 im Chip, Titel 24px/700/28.8. */
.blogpost__nav-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px; border: 1px solid var(--color-border); border-radius: 9px;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-muted);
  margin-bottom: 12px;
}
.blogpost__nav-title {
  display: block; font-weight: var(--fw-bold); color: var(--color-text);
  font-size: var(--fs-card); line-height: var(--lh-card); max-width: 265px;
}

@media (max-width: 809px) {
  .blogpost__nav { flex-direction: column; }
  .blogpost__nav-card--next { flex-direction: row; text-align: left; }
}

/* ============================================================
   Video klick-laedt (KLICK-PRINZIP)
   ============================================================
   Beim Laden nur der lokale Poster (16:9, via go:embed) mit Play-Symbol -
   0 externe Requests. Erst der Klick ersetzt ihn durch das Wistia-<iframe>. */
.blog-video {
  position: relative;
  /* Original: 39px unter der Kooperations-Zeile (1590 -> 1629 @1440). */
  margin: 39px 0 0;
}
.blog-video__cta {
  display: block; position: relative;
  width: 100%; padding: 0; margin: 0; border: 0;
  background: #000; cursor: pointer;
  border-radius: var(--radius-md); overflow: hidden;
  aspect-ratio: 16 / 9; line-height: 0;
}
.blog-video__poster {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: opacity var(--duration-hover) var(--ease-smooth);
}
.blog-video__cta:hover .blog-video__poster { opacity: 0.9; }
.blog-video__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: transform var(--duration-hover) var(--ease-smooth);
}
.blog-video__cta:hover .blog-video__play { transform: scale(1.06); }
/* Poster mit Original-Player-Chrome (Wistia-Play-Knopf im Bild): kein
   doppeltes eigenes Overlay zeichnen. */
.blog-video--chrome .blog-video__play { display: none; }
.blog-video__cta:focus-visible {
  outline: 3px solid var(--color-brand-blue-text); outline-offset: 2px;
}
.blog-video__frame {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--radius-md); overflow: hidden;
}
.blog-video__fallback {
  margin: var(--space-2) 0 0; font-size: var(--fs-small); color: var(--color-text-muted);
}
.blog-video__fallback a { color: var(--color-brand-blue-text); }

/* ============================================================
   YouTube-Video im Artikel (Video-Klick-Sweep 2026-07-28)
   ============================================================
   Das Original bettet in Blogartikeln YouTube-Videos als Framer-Facade ein
   (gemessen @1440: 1008x567, radius 18px, 39px Abstand nach oben; Klick
   ersetzt die Facade inline durch das YouTube-iframe). Bei uns: lokaler
   Poster /static/img/yt/<ID>.jpg + Play-Symbol, Klick-Verdrahtung generisch
   ueber video.js (KLICK-PRINZIP, 0 externe Requests beim Laden). */
.blog-yt {
  position: relative;
  margin: 39px 0 0;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
}
.blog-yt img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-hover) var(--ease-smooth);
}
.blog-yt .play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.blog-yt:hover img,
.blog-yt:focus-visible img { transform: scale(1.05); }
.blog-yt:focus-visible {
  outline: 3px solid var(--color-brand-blue-text); outline-offset: 2px;
}
.blog-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Link-Zeile in Fliesstextgroesse (Original: "Mehr zur Kooperation" 15px/22.5,
   waehrend Bildquellen-Zeilen 12px bleiben; Vergleichslauf 2026-07-24). */
.blogpost__linkline--body {
  font-size: var(--fs-body); line-height: var(--lh-body);
  margin-top: var(--lh-body);
}

/* ============================================================
   Mobil (<810px) - am Original nachgemessen (blog-mob2.mjs, 390px,
   Vergleichslauf 2026-07-24):
     Datum y=150 (Sektionspolster 76, nicht 123), Titel 23px/27.6,
     Untertitel 18px/28.8, Aufmacherbild VOLLBREIT 390x420 (Radius 0),
     Blaetter-Karte 312x148 OHNE Vorschaubild (Chip + Titel).
   ============================================================ */
@media (max-width: 809px) {
  /* Lauf 6: mobil ist der Abschlussabstand 118 (Footer-Anker @390: 2323,3),
     nicht die 123 des Desktops. Vorher 96 -> dh -22. */
  .section--blogpost { padding-top: 76px; padding-bottom: 118px; }
  .blogpost__subtitle { font-size: 18px; line-height: 21.6px; }
  /* Kopf- und Teilen-Block enden mobil je 51px vor dem Folgeblock
     (Untertitel 350 -> Label 401, Symbole 474 -> Aufmacher 525). */
  .blogpost__header { padding-bottom: 51px; }
  .blogpost__share { padding-bottom: 51px; }
  /* Symbolreihe mobil: ueber die volle Spaltenbreite verteilt
     (x=39/136/233/330 im Original), nicht zentriert im 74px-Raster. */
  .blogpost__share-buttons { justify-content: space-between; gap: 0; padding-left: 0; }
  /* Video -> Blaetter-Karte mobil 68px (1874 -> 1942 im Original). */
  .blogpost__nav { margin-top: 68px; }
  .blogpost__hero { max-width: none; padding: 0; }
  .blogpost__hero img {
    width: 100%; height: 420px; border-radius: 0;
  }
  .blogpost__nav-card img { display: none; }
}

/* Lauf 7 (2026-07-30): @768 traegt der Artikelabschluss nur 96,4px bis zur
   Pfadleiste (Original: 1991,5 nach Inhaltsende), nicht die 118 der
   390er-Messung. */
@media (min-width: 640px) and (max-width: 809px) {
  .section--blogpost { padding-bottom: 96.4px; }
}