/* ============================================================
   /starkregen-news/ - Blog-Uebersicht
   ============================================================
   Alle Werte per getComputedStyle am Original nachgemessen
   (/opt/tooling/news1.mjs, /opt/tooling/news2.mjs, Viewport 1440x900).
   Die tragende Struktur des Originals bei 1440px:

     Seitenrahmen  1200px breit, zentriert, Innenabstand 96px
                   -> Inhaltsspalte 1008px (216..1224)
     Kopfabstand   Inhalt beginnt bei y=197 (Kopfzeile ist 74px hoch)
     Aufmacher     Zeile 1008px, gap 47px: Karte 666x666 | Spalte 295px

   Vorher stand hier der Projekt-Standardcontainer (1200px mit 24px Polster,
   Inhalt 1152px) und eine 16/10-Karte - beides deutlich groesser bzw. anders
   proportioniert als das Original. */

/* Der Seitenrahmen dieser Seite weicht bewusst vom .container-Standard ab
   (gemessen: 96px statt 24px Innenabstand). */
.section--news-top > .container,
.section--news-grid > .container {
  max-width: 1200px;
  padding: 0 96px;
}

/* 197px Abstand ab Dokumentanfang; 74px davon nimmt die Kopfzeile ein. */
.section--news-top { padding-top: 123px; padding-bottom: 0; }

.news-top-grid {
  display: grid; grid-template-columns: 666px 295px;
  gap: 47px; align-items: start;
}

/* ---- Aufmacher-Karte ---- */
.news-featured {
  position: relative;
  width: 666px; height: 666px;
  border-radius: 27px; overflow: hidden;
}
.news-featured__link { display: block; width: 100%; height: 100%; }
/* Das Original zeigt den Bildinhalt NICHT im schlichten `cover`-Ausschnitt,
   sondern um den Faktor 1,235 groesser und mittig - nachgemessen durch
   Skalen-/Versatz-Anpassung der beiden Screenshots (/opt/tooling/fitscale.mjs:
   bester Fit s=0,81 = 1/1,235, Versatz 0 zum Kartenmittelpunkt; bei mehreren
   Wartezeiten bis 11s stabil, also kein laufender Einblend-Effekt).
   Nachgebildet ueber eine Bildflaeche von 123,5 % der Karte, mittig
   ausgerichtet - das ergibt exakt denselben Ausschnitt. Ohne das war das
   Motiv rund 20 % zu klein. */
.news-featured img {
  position: absolute; top: -11.73%; left: -11.73%;
  width: 123.46%; height: 123.46%; max-width: none;
  object-fit: cover;
}

.news-featured__labels {
  position: absolute; top: 0; left: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: 486px;
}
/* Titelplakette: 486x70 = 23px oben + 29px Textzeile + 18px unten,
   36px seitlich; Ecke unten rechts 18px. Titel 24/700/28.8 zentriert. */
.news-featured__title {
  margin: 0; background: #fff;
  padding: 23px 36px 18px;
  border-radius: 0 0 18px 0;
  font-size: var(--fs-card); line-height: var(--lh-card); font-weight: var(--fw-bold);
  text-align: center;
}
/* Datumsplakette: 149x64 = 18px oben + 22.5px Zeile + 23px unten. */
.news-featured__date {
  margin: 0; background: #fff;
  padding: 18px 36px 23px;
  border-radius: 0 0 18px 0;
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* Teilen-Leiste: 74px hoch, weiss, ueber dem unteren Bildrand. */
.news-featured__share {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 74px; background: #fff;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 47px; padding-right: 47px;
}
.news-featured__share a,
.news-featured__copy {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  /* Symbolfarbe am Original gemessen: rgb(129,129,129). Das ist keine
     Schrift, sondern ein Bedienelement-Symbol - dafuer verlangt WCAG 3:1,
     und #818181 auf Weiss erreicht 3,9:1. Anders als bei Fliesstext ist hier
     also keine Abdunklung noetig. */
  color: #818181; background: none; border: 0; padding: 0; cursor: pointer;
  transition: color var(--duration-fast) var(--ease);
}
.news-featured__share a:hover,
.news-featured__copy:hover { color: var(--color-text); }
.news-featured__share a:active,
.news-featured__copy:active { color: #000; }
/* Tippflaeche auf 44x44 vergroessern, ohne die gemessene Symbolgroesse
   (27x27 bzw. 21x21) zu veraendern. */
.news-featured__share a::before,
.news-featured__copy::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.news-featured__share svg { display: block; }

/* ---- Abonnieren-Spalte ---- */
.news-subscribe { display: flex; flex-direction: column; gap: 47px; }
.news-subscribe__intro { display: flex; flex-direction: column; gap: 21px; }
.news-subscribe h2 { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-h2); }
.news-subscribe__intro > p { margin: 0; color: var(--color-text-muted); }
.news-subscribe form { display: flex; flex-direction: column; gap: 23px; }
.news-subscribe .form-field { margin: 0; }
/* Feld und Knopf: je 295x52,5 (halbpixelgenau nachgemessen, Lauf 5 -
   die gerundeten 53px schoben die Kartenliste @390 um 1px), Radius 18px,
   Innenabstand 15px. Das Feld hat im Original keinen Rahmen, sondern
   einen 1px-Innenschatten in #c9c9c9. */
.news-subscribe input[type="email"] {
  width: 100%; height: 52.5px; padding: 15px;
  border: 1px solid #c9c9c9; border-radius: 18px;
  font: inherit; background: transparent; color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease);
}
/* Hover-Sweep 2026-07: das Original gibt dem E-Mail-Feld KEINE
   Hover-Rueckmeldung - Rahmen-Hover entfernt (Fokus bleibt). */
.news-subscribe input[type="email"]::placeholder { color: var(--color-text-muted); }
 /* Fragilitaet aus Lauf 3 aufgeloest: die Basisdeklaration von .btn--submit
   liegt in kontakt.css, das news.html gar nicht einbindet - der Button sah
   bisher nur zufaellig richtig aus (Rahmenfarbe = Hintergrundfarbe kaschierte
   das fehlende border:none) und hatte weder Hover- noch Active-Zustand.
   Hier vollstaendig und unabhaengig deklariert. */
.news-subscribe .btn--submit {
  background: #333; color: #fff; border: none;
  width: 100%; height: 52.5px; justify-content: center;
  padding: 15px; font-weight: var(--fw-bold); border-radius: 18px;
  cursor: pointer;
}
/* Hover-Sweep 2026-07: "Abonnieren" ist im Original beim Hover STATISCH
   (getComputedStyle unveraendert). Eigene Abdunklung entfernt; die Regel
   neutralisiert zugleich .btn:hover aus base.css (Anhebung/Schatten/Fond). */
.news-subscribe .btn--submit:hover {
  background: #333; border-color: transparent;
  transform: none; box-shadow: none;
}
.news-subscribe .btn--submit:active { background: #000; }

/* ---- Kartenraster ---- */
/* Original: Flex-Zeile mit 74px Abstand, Karten 274px breit und 369px hoch,
   Bild oben in natuerlicher Hoehe, darunter ein vertikal zentrierter
   Textblock (Innenabstand 23px, Abstand 15px zwischen Datum und Titel). */
/* Original: 123px zwischen Aufmacherkarte und Suchzeile, 47px von dort zum
   Raster, 123px unter dem Raster (gemessen: Suchzeile y=986, Raster y=1102,
   Rahmen endet 2480). Vorher 47px oben und 96px unten - das Raster begann
   dadurch 123px zu hoch. */
/* 122,5px oben: das Original setzt das Kartenraster auf HALBE Pixel
   (Karten-y 1101,5/1544,5/1987,5) - mit 123px lag unser Raster 0,5px tiefer
   und jedes Thumb rasterte sichtbar anders (Lauf 5, 2026-07-28). */
.section--news-grid { padding-top: 122.5px; padding-bottom: 123px; }
.news-search + .news-grid { margin-top: 47px; }
.news-grid {
  display: flex; flex-wrap: wrap; gap: 74px;
  justify-content: center;
}
.news-card {
  display: flex; flex-direction: column;
  width: 274px; height: 369px;
  border-radius: 18px; overflow: hidden;
}
/* Hoehe kommt je Karte aus den Daten (style-Attribut), Breite fest 274px.
   object-fit: cover, weil die Rohbilder andere Seitenverhaeltnisse haben
   als die im Original gesetzten Kartenhoehen. */
.news-card img { width: 274px; display: block; object-fit: cover; flex: 0 0 auto; }
.news-card__body {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: 15px; padding: 23px;
}
/* Original: Datum rgb(201,201,201), Titel rgb(129,129,129) - der Titel war
   bisher #333 und damit deutlich zu dunkel. AA-taugliche Entsprechungen. */
.news-card__date { display: block; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-faint); }
.news-card h2 { color: var(--color-text-muted); }
.news-card h2 {
  margin: 0; text-align: center;
  font-size: var(--fs-card); line-height: var(--lh-card);
  text-underline-offset: 3px;
}
/* Hover-Sweep 2026-07 (am Original gemessen): die News-Karte bekommt beim
   Hover den Schatten-Glow 0 0 47px rgba(0,0,0,.23); das Datum dunkelt
   #c9c9c9->#818181 und der Titel #818181->#333 (bei uns die AA-Tokens).
   KEINE Unterstreichung, KEIN Bild-Dimmen - das war erfunden. */
.news-card {
  transition: box-shadow var(--duration-hover) var(--ease-smooth);
}
.news-card__date, .news-card h2 { transition: color var(--duration-hover) var(--ease-smooth); }
.news-card:hover { box-shadow: 0 0 47px rgba(0, 0, 0, .23); }
.news-card:hover .news-card__date { color: var(--color-text-muted); }
.news-card:hover h2 { color: var(--color-text); }
.news-card:active h2 { opacity: .7; }

/* ============================================================
   Unterhalb 1200px - am Original nachgemessen (/opt/tooling/sect.mjs,
   newscards.mjs, feat390.mjs bei 390px UND 768px; die Geometrie ist auf
   beiden Breiten dieselbe, nur die Inhaltsbreite waechst mit):

     Seitenrahmen   volle Breite, Innenabstand 39px (Inhalt 312 bzw. 690)
     Sektionspolster 150px oben / 96px unten (ab Dokumentoberkante)
     Aufmacher      volle Breite x 747px FEST, Radius 27
     Abonnieren     69px unter dem Aufmacher
     Suchzeile      96px darunter, 69px hoch
     Kartenliste    39px darunter, Karten volle Breite x 222px FEST,
                    Rasterabstand 51px (Kartenabstand 273px)

   Vorher: einspaltiges Raster mit 24px Rahmen, quadratischem Aufmacher und
   274x369-Karten mit 74px Abstand - die Seite war dadurch bei 390px rund
   1370px zu lang, wodurch ALLES darunter gegen das Original verschoben lag.
   ============================================================ */
@media (max-width: 1199px) {
  .section--news-top > .container,
  .section--news-grid > .container { max-width: none; padding: 0 39px; }

  /* 150px ab Dokumentoberkante; 74px davon steuert `main` bei (base.css). */
  .section--news-top { padding-top: 76px; padding-bottom: 0; }

  .news-top-grid { display: block; }

  /* Aufmacher: feste Hoehe 747px auf jeder Breite unter 1200px. Das Bild
     fuellt die Karte hier schlicht formatfuellend - die auf Desktop noetige
     123,46%-Vergroesserung gilt nur fuer die quadratische 666er-Karte. */
  .news-featured {
    width: 100%; height: 747px; max-width: none; aspect-ratio: auto;
  }
  .news-featured img {
    top: 0; left: 0; width: 100%; height: 100%;
  }
  /* Titelplakette laeuft ueber die volle Kartenbreite, Datumsplakette nicht. */
  .news-featured__labels { max-width: none; width: 100%; }
  .news-featured__date { align-self: flex-start; }
  /* Teilen-Leiste: die Symbole verteilen sich unter 1200px gleichmaessig
     ueber die Kartenbreite statt rechtsbuendig zu stehen. */
  .news-featured__share {
    justify-content: space-evenly; gap: 0; padding-right: 0;
  }

  .news-subscribe { width: 100%; max-width: none; margin-top: 69px; gap: 39px; }
  /* Ueberschrift der Abonnieren-Spalte steht unterhalb 1200px zentriert
     (Original: text-align center, ab 1200px linksbuendig). */
  .news-subscribe h2 { text-align: center; }

  /* Suchzeile 96px unter dem Aufmacherblock, Kartenliste 38,5px darunter
     (Original-Karten stehen @390 bei y=1457,688 - die runden 39px liessen
     unsere Liste 0,5px tiefer rastern, jedes Thumb voll im Diff). */
  .section--news-grid { padding-top: 96px; padding-bottom: 96px; }
  .news-search + .news-grid { margin-top: 38.5px; }

  .news-grid {
    display: flex; flex-direction: column; flex-wrap: nowrap;
    gap: 51px; justify-content: flex-start;
  }
  .news-card { width: 100%; height: 222px; }
  /* Die Karte ist fest 222px hoch, der Textblock so hoch wie sein Inhalt -
     das Bild bekommt den Rest. Genau so verhaelt sich das Original: seine
     Bildhoehen schwanken je nach Titellaenge zwischen 31px und 117px. */
  .news-card img {
    width: 100%; height: auto; min-height: 0; flex: 1 1 auto; object-fit: cover;
  }
  .news-card__body { flex: 0 0 auto; justify-content: flex-start; }
}
/* Plaketten der Aufmacher-Karte: gleiche vertikale Aufteilung wie auf
   Desktop, nur 23px statt 36px seitlich (Original @390: Titelplakette
   150..234 mit Text bei y=173/x=62, Datumsplakette 234..298, 123x64,
   Innenabstand 18px 23px 23px). */
@media (max-width: 1199px) {
  .news-featured__title { padding: 23px 23px 18px; }
  .news-featured__date { padding: 18px 23px 23px; }
}

/* ---- Suchzeile ----
   Zeile 69px hoch. Unter 1200px eine rechtsbuendige weisse Plakette
   143x69 (Radius 18) mit Beschriftung + Lupe; ab 1200px steht die
   Beschriftung links neben einer 67x69 grossen Lupen-Plakette. */
.news-search { height: 69px; }
.news-search__form {
  height: 69px; display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; position: relative;
}
.news-search__label {
  font-size: var(--fs-body); font-weight: var(--fw-bold);
  color: var(--color-text-faint); cursor: pointer;
}
.news-search__input {
  height: 69px; width: 143px; padding: 0 44px 0 23px;
  border: 0; border-radius: 18px; background: #fff;
  font: inherit; color: var(--color-text);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}
.news-search__input::placeholder { color: var(--color-text-faint); }
.news-search__input::-webkit-search-cancel-button { margin-right: 4px; }
.news-search__icon {
  position: absolute; right: 17px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-faint); pointer-events: none; display: flex;
}
/* Die sichtbare Beschriftung steht im Original NUR ab 1200px neben der
   Plakette - darunter traegt das Feld sie als Platzhalter. */
@media (max-width: 1199px) {
  .news-search__label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
  }
}
@media (min-width: 1200px) {
  .news-search__input { width: 67px; padding: 0 44px 0 12px; }
  .news-search__input:focus { width: 260px; padding-left: 23px; }
  .news-search__input { transition: width var(--duration-nav) var(--ease); }
}
/* Rueckmeldung der Filterung; leer, solange nicht gesucht wird. */
.news-search__status { margin: 0; font-size: var(--fs-body); color: var(--color-text-muted); }
.news-search__status:empty { display: none; }
.news-card[hidden] { display: none; }