/* Übergangs-Stylesheet — wird OHNE Build ausgeliefert (app/sofort.css/route.ts).
 *
 * Hier stehen Design-Änderungen, die gerade ausprobiert werden. Sie sind nach
 * dem Speichern sofort live: Diese Datei liegt auf dem Volume, das Web-Pod und
 * Operator teilen, und wird ungecacht nach dem gebauten CSS geladen.
 *
 * ACHTUNG, zwei Regeln — sonst entsteht ein zweiter Design-Ort, den niemand
 * im Repo sieht:
 *   1. Was sich bewährt, wandert nach packages/design/*.css und wird gebaut.
 *   2. Danach wird der Block HIER gelöscht. Eine Regel, die an beiden Stellen
 *      steht, driftet auseinander — und `schmal-check` misst die Live-Seite,
 *      sieht also die Übergangsfassung und meldet grün für etwas, das beim
 *      nächsten Rollout verschwindet.
 *
 * Leer = Normalbetrieb. Genau so soll es die meiste Zeit aussehen.
 */

/* 2026-09-16, befallfrei/kleidermotten-bekaempfen: Mobile Einleitung liegt
 * über dunklen Fotodetails. Vorhandenen Kontrastschutz nur auf dieses Bild
 * anwenden; bei nächster autorisierter Design-Ausrollung nach blocks.css
 * übernehmen. 60rem entspricht der vorhandenen Hero-Spaltenumschaltung. */
.hero__bg[style*="/befallfrei/cover-kleidermotten-"]::after {
  background: color-mix(in oklch, var(--bg) 90%, transparent);
}
@media (min-width: 60rem) {
  .hero__bg[style*="/befallfrei/cover-kleidermotten-"]::after {
    background: linear-gradient(to right, var(--bg) 0%,
      color-mix(in oklch, var(--bg) 90%, transparent) 60%, transparent 96%);
  }
}











/* 2026-09-09, zinsklar/konditionsanfrage-kredit: Der vorhandene Hero-Verlauf
 * schützt die rechte Texthälfte auf kleinen Displays nicht. Am hellen Foto
 * im Dunkelmodus visuell belegt. Nur dieser Artikel; bei der nächsten
 * autorisierten Design-Ausrollung in blocks.css übernehmen und hier entfernen.
 * 60rem folgt der vorhandenen Umschaltung auf die schmale Hero-Textspalte. */
.hero__bg[style*="/cover-konditionsanfrage-kredit-hell-"]::after {
  background: color-mix(in oklch, var(--bg) 90%, transparent);
}
@media (min-width: 60rem) {
  .hero__bg[style*="/cover-konditionsanfrage-kredit-hell-"]::after {
    background: linear-gradient(to right, var(--bg) 0%,
      color-mix(in oklch, var(--bg) 90%, transparent) 60%, transparent 96%);
  }
}

/* 2026-09-12, zinsklar/keine-bank-will-umschulden: Die Einleitung liegt
 * mobil über dunklen Bilddetails und verliert im hellen Modus den Kontrast.
 * Auf die neue Bildkennung begrenzt; bei der nächsten autorisierten
 * Design-Ausrollung nach blocks.css übernehmen. 60rem entspricht der
 * vorhandenen Umschaltung der Hero-Textspalte. */
.hero__bg[style*="/cover-keine-bank-will-umschulden-"]::after {
  background: color-mix(in oklch, var(--bg) 90%, transparent);
}
@media (min-width: 60rem) {
  .hero__bg[style*="/cover-keine-bank-will-umschulden-"]::after {
    background: linear-gradient(to right, var(--bg) 0%,
      color-mix(in oklch, var(--bg) 90%, transparent) 60%, transparent 96%);
  }
}

/* 2026-09-12, befallfrei/ratten-im-kompost: Der Text überdeckt mobil
 * dunkle Gartendetails. Die vorhandene Kontrastkorrektur auf genau dieses
 * Titelbild anwenden, in hell und dunkel geprüft. Bei der nächsten
 * autorisierten Design-Ausrollung nach blocks.css übernehmen. */
.hero__bg[style*="/cover-ratten-im-kompost-"]::after {
  background: color-mix(in oklch, var(--bg) 90%, transparent);
}
@media (min-width: 60rem) {
  .hero__bg[style*="/cover-ratten-im-kompost-"]::after {
    background: linear-gradient(to right, var(--bg) 0%,
      color-mix(in oklch, var(--bg) 90%, transparent) 60%, transparent 96%);
  }
}

/* 2026-09-13, befallfrei/kammerjaeger-kosten: Der Einleitungstext verliert
 * mobil auf dunklen Bilddetails den Kontrast. Vorhandenen artikelspezifischen
 * Schutz anwenden; bei nächster autorisierter Design-Ausrollung in blocks.css
 * übernehmen. 60rem entspricht der vorhandenen Hero-Spaltenumschaltung. */
.hero__bg[style*="/cover-kammerjaeger-"]::after {
  background: color-mix(in oklch, var(--bg) 90%, transparent);
}
@media (min-width: 60rem) {
  .hero__bg[style*="/cover-kammerjaeger-"]::after {
    background: linear-gradient(to right, var(--bg) 0%,
      color-mix(in oklch, var(--bg) 90%, transparent) 60%, transparent 96%);
  }
}
/* 2026-09-14, cannabisdaten/terpene-wirkung: Foto und Text überlagern sich
 * mobil in beiden Farbschemata; am Desktop betrifft es die Metazeile.
 * Vorhandenen artikelspezifischen Kontrastschutz auf dieses Bild begrenzen.
 * Bei der nächsten autorisierten Design-Ausrollung nach blocks.css übernehmen.
 * 60rem folgt der vorhandenen Umschaltung der Hero-Textspalte. */
.hero__bg[style*="/cannabisdaten/cover-terpene-wirkung-"]::after {
  background: color-mix(in oklch, var(--bg) 90%, transparent);
}
@media (min-width: 60rem) {
  .hero__bg[style*="/cannabisdaten/cover-terpene-wirkung-"]::after {
    background: linear-gradient(to right, var(--bg) 0%,
      color-mix(in oklch, var(--bg) 90%, transparent) 60%, transparent 96%);
  }
}
/* 2026-09-15, befallfrei/bettwanzen-matratze: Im dunklen mobilen Kopf liegt
 * heller Text auf dem hellen Foto. Vorhandenen artikelspezifischen
 * Kontrastschutz übernehmen; bei der nächsten autorisierten Design-Ausrollung
 * nach blocks.css konsolidieren. 60rem ist die bestehende Hero-Umschaltung. */
.hero__bg[style*="/befallfrei/cover-bettwanzen-matratze-"]::after {
  background: color-mix(in oklch, var(--bg) 90%, transparent);
}
@media (min-width: 60rem) {
  .hero__bg[style*="/befallfrei/cover-bettwanzen-matratze-"]::after {
    background: linear-gradient(to right, var(--bg) 0%,
      color-mix(in oklch, var(--bg) 90%, transparent) 60%, transparent 96%);
  }
}

/* 2026-09-15, zinsklar/darlehen-privat-vertrag: Im mobilen Kopf liegen
 * Text und dunkle Fotodetails übereinander. Bewährten Kontrastschutz nur
 * für dieses Titelbild anwenden; bei nächster autorisierter Design-Ausrollung
 * nach blocks.css übernehmen. 60rem folgt der bestehenden Hero-Umschaltung. */
.hero__bg[style*="/zinsklar/cover-darlehen-privat-vertrag-"]::after {
  background: color-mix(in oklch, var(--bg) 90%, transparent);
}
@media (min-width: 60rem) {
  .hero__bg[style*="/zinsklar/cover-darlehen-privat-vertrag-"]::after {
    background: linear-gradient(to right, var(--bg) 0%,
      color-mix(in oklch, var(--bg) 90%, transparent) 60%, transparent 96%);
  }
}

/* 2026-09-18, befallfrei/lebensmittelmotten-larven: Helle Fotoflaechen
 * ueberlagern mobil die Einleitung im dunklen Modus. Vorhandenen
 * Kontrastschutz nur fuer dieses Titelbild anwenden. Bei naechster
 * autorisierter Design-Ausrollung nach blocks.css uebernehmen. */
.hero__bg[style*="/befallfrei/cover-lebensmittelmotten-larven-"]::after {
  background: color-mix(in oklch, var(--bg) 90%, transparent);
}
@media (min-width: 60rem) {
  .hero__bg[style*="/befallfrei/cover-lebensmittelmotten-larven-"]::after {
    background: linear-gradient(to right, var(--bg) 0%,
      color-mix(in oklch, var(--bg) 90%, transparent) 60%, transparent 96%);
  }
}

/* 2026-09-18, zinsklar/kredit-fuer-fuehrerschein: Im mobilen Kopf
 * ueberlagern dunkle Fotodetails den Text. Vorhandenen Kontrastschutz
 * nur fuer dieses Titelbild anwenden; bei naechster autorisierter
 * Design-Ausrollung nach blocks.css uebernehmen. */
.hero__bg[style*="/zinsklar/cover-kredit-fuer-fuehrerschein-"]::after {
  background: color-mix(in oklch, var(--bg) 90%, transparent);
}
@media (min-width: 60rem) {
  .hero__bg[style*="/zinsklar/cover-kredit-fuer-fuehrerschein-"]::after {
    background: linear-gradient(to right, var(--bg) 0%,
      color-mix(in oklch, var(--bg) 90%, transparent) 60%, transparent 96%);
  }
}

/* 2026-09-25, cannabisdaten/sorten-finder: Mobil steht dunkler Text über
 * dunklen Fotodetails (Live-Gegenprobe 390px). Bestehenden Kontrastschutz
 * auf den Katalogkopf mit diesem Bild begrenzen; Sorten-Detailköpfe bleiben
 * unberührt. 60rem folgt der vorhandenen Hero-Spaltenumschaltung.
 * Bei nächster autorisierter Design-Ausrollung nach blocks.css übernehmen. */
.hero--editorial:not(.hero--sorte) > .hero__bg[style*="/cannabisdaten/cover-sorten-"]::after {
  background: color-mix(in oklch, var(--bg) 90%, transparent);
}
@media (min-width: 60rem) {
  .hero--editorial:not(.hero--sorte) > .hero__bg[style*="/cannabisdaten/cover-sorten-"]::after {
    background: linear-gradient(to right, var(--bg) 0%,
      color-mix(in oklch, var(--bg) 90%, transparent) 60%, transparent 96%);
  }
}

/* 2026-09-25, solarpfad/pv-ueberschussladen: gemessene Überlagerung von
 * Einleitung und Foto auf 390px. Vorhandenen Bildschutz auf diesen neuen
 * Bild-Slug begrenzen; bei nächster autorisierter Design-Ausrollung nach
 * blocks.css übernehmen. Prüfung im Artikel-Arbeitsordner dokumentiert. */
.hero__bg[style*="/solarpfad/cover-pv-ueberschussladen-"]::after {
  background: color-mix(in oklch, var(--bg) 90%, transparent);
}

/* 2026-09-27, cannabisdaten/lexikon: Im mobilen Kopf liegen Titel und
 * Einleitung über dunklen Fotodetails (Live-Bild 390px). Vorhandenen
 * Kontrastschutz gezielt auf diesen Katalogkopf anwenden. Bei der nächsten
 * autorisierten Design-Ausrollung nach blocks.css übernehmen.
 * 60rem folgt der bestehenden Hero-Spaltenumschaltung. */
.hero--editorial:not(.hero--sorte) > .hero__bg[style*="/cannabisdaten/cover-register-"]::after {
  background: color-mix(in oklch, var(--bg) 90%, transparent);
}
@media (min-width: 60rem) {
  .hero--editorial:not(.hero--sorte) > .hero__bg[style*="/cannabisdaten/cover-register-"]::after {
    background: linear-gradient(to right, var(--bg) 0%,
      color-mix(in oklch, var(--bg) 90%, transparent) 60%, transparent 96%);
  }
}
@media (min-width: 60rem) {
  .hero__bg[style*="/solarpfad/cover-pv-ueberschussladen-"]::after {
    background: linear-gradient(to right, var(--bg) 0%,
      color-mix(in oklch, var(--bg) 90%, transparent) 60%, transparent 96%);
  }
}