/* AA Startseite Design – Korrekturen NUR der Startseite (Stand 19.10.2026). Quelle: vorschau/src/*.css, Reihenfolge 10–50. Lädt nach global.css. */
/* ===== 10-fundament.css ===== */
/* =====================================================================
   10-fundament.css – gemeinsames Gestaltungssystem Startseite (Vorschau)
   Nur Darstellung: kein Text, kein Bild, kein Link wird geändert oder
   ausgeblendet. Entfernt werden nur Pseudo-Elemente bzw. aria-hidden-
   Grafiken ohne Text (Zierlinien, angehängte Pfeile, Pulspunkte).
   Bereichsfeinschliff (Hero, Slider, Teaser …) liegt in 20/30/40/50-*.
   Gilt NUR auf der Startseite: jede Regel ist auf body.home bzw. :has(body.home)
   beschränkt. Header, Megamenü, Offcanvas, Skip-Link und Footer (alle Seiten)
   stehen in 00-global.css, das vor dieser Datei geladen wird.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0) Tokens (spec-01, spec-12, ki-design-13): --vx-* stehen in 00-global.css
      (global an :root, neue Namen ohne Wirkung auf das Theme).
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   1) Theme-Variablen umbiegen – nur auf der Startseite (:has), weil das
      Theme --hex-* auch in Shop-Formularen als Rahmenfarbe nutzt.
      Header, Offcanvas und Footer bekommen dieselben Werte auf allen Seiten
      über 00-global.css (dort nur innerhalb dieser Bereiche gesetzt).
   --------------------------------------------------------------------- */
:root:has(body.home){
  /* spec-01/spec-07: ein Primär-Navy statt #1e4f89 (wirkt auf --color-primary,
     text-/bg-primary, wp-Preset primary, Buttons, Slider, Verläufe) */
  --hex-1E4F89:var(--vx-navy);
  --hex-15355A:var(--vx-navy-dark);
  /* spec-15: helle Flächen Spec-Hellblau statt Neutralgrau (bg-neutrals-100, Hover) */
  --hex-F2F5F8:var(--vx-light);
  --hex-DBE3EE:var(--vx-line);
  /* spec-02, mobil-a11y-07, layout-13: Sekundärtext = Slate (6,1:1 auf Weiß) */
  --darkblue-600:var(--vx-slate);   /* #59747f */
  --hex-7A828A:var(--vx-slate);     /* neutrals-400 */
  --hex-ACB5BD:var(--vx-slate);     /* neutrals-300, „Wechseln Sie die Seite“ 1,9:1 */
  /* spec-02/mobil-a11y-07: Datum der Aktuell-Leiste liegt auf Navy-Dunkel */
  --darkblue-500:var(--vx-on-navy); /* #7a919a, 3,76:1 -> 8,7:1 */
  /* spec-08, layout-8: kein Orange (Slider-Kicker, Offcanvas-Akzent) */
  --hex-CF7320:var(--vx-navy);
  --hex-E9963E:var(--vx-navy);
  /* spec-06: Radius 0 über die Theme-Tokens (Logo ist SVG, bleibt unberührt) */
  --radius-4:0px;--radius-8:0px;--radius-16:0px;--radius-40:0px;--radius-round:0px;--radius-9999:0px;
  --swiper-pagination-bullet-border-radius:0px; /* Seitenwähler 1–6, Karten-Slider-Punkte */
}

/* ---------------------------------------------------------------------
   1b) SCHUTZBEREICHE (Nutzer-Feedback Runde 2): Die blaue Hero-Box und der
       Kliniken-Abschnitt „600+ …“ (.apm) bleiben exakt wie live.
       Selektor-Regeln dieser Datei sparen beide Bereiche aus (Regeln entfernt bzw.
       :not()). Variablen lassen sich nicht ausnehmen – dort gelten wieder die
       Originalwerte des Themes (app.css, global-styles), samt der an :root
       daraus abgeleiteten Variablen (--color-*, --wp--preset--color--*).
   --------------------------------------------------------------------- */
body.home [data-component="block-header-slider-item"] .bg-primary,
body.home .apm{
  --hex-1E4F89:#1e4f89;--hex-15355A:#15355a;--hex-F2F5F8:#f2f5f8;--hex-DBE3EE:#dbe3ee;
  --darkblue-600:#59747f;--hex-7A828A:#7a828a;--hex-ACB5BD:#acb5bd;--darkblue-500:#7a919a;
  --hex-CF7320:#cf7320;--hex-E9963E:#e9963e;
  --color-primary:var(--hex-1E4F89);--color-primary-dark:var(--hex-15355A);
  --color-neutrals-100:var(--hex-F2F5F8);--color-box-border:var(--hex-DBE3EE);
  --color-neutrals-400:var(--hex-7A828A);--color-neutrals-300:var(--hex-ACB5BD);
  --wp--preset--color--primary:var(--hex-1E4F89);--wp--preset--color--primary-dark:var(--hex-15355A);
  --wp--preset--color--neutrals-100:var(--hex-F2F5F8);--wp--preset--color--box-border:var(--hex-DBE3EE);
  --wp--preset--color--neutrals-400:var(--hex-7A828A);--wp--preset--color--neutrals-300:var(--hex-ACB5BD);
  --radius-4:4px;--radius-8:8px;--radius-16:16px;--radius-40:40px;--radius-round:100%;--radius-9999:9999px;
}

/* ---------------------------------------------------------------------
   2) Lokale Token-Inseln auf die gemeinsamen Tokens abbilden (spec-12, ki-design-13)
   --------------------------------------------------------------------- */
/* Studienleiste: --ch war Linienfarbe auf Weiß -> Linie (spec-12) */
body.home .sciban{--nv:var(--vx-navy);--nvd:var(--vx-navy-dark);--sl:var(--vx-slate);--ch:var(--vx-line);color:var(--vx-ink)} /* spec-07: #12233d */
body.home .sciban::before{background-color:var(--vx-navy)} /* spec-01: Icon-Kasten #1E4F89 */
/* Risikoreduktion (spec-05: Status-Grün als Marker -> Navy; ki-design-15: Schatten weg) */
body.home .ra{--ra-navy:var(--vx-navy);--ra-navy-dark:var(--vx-navy-dark);--ra-text:var(--vx-ink);--ra-muted:var(--vx-slate);--ra-line:var(--vx-line);--ra-grey:var(--vx-light);--ra-white:var(--vx-white);--ra-on-navy-label:var(--vx-on-navy);--ra-status:var(--vx-navy);--ra-shadow:none}
/* News: eigene Schriftskala auf die gemeinsame Skala (spec-13), Marker „Neu“ liegt auf Navy */
body.home .nk{--nk-navy:var(--vx-navy);--nk-navy-dark:var(--vx-navy-dark);--nk-text:var(--vx-ink);--nk-muted:var(--vx-slate);--nk-line:var(--vx-line);--nk-grey:var(--vx-light);--nk-white:var(--vx-white);--nk-on-navy:var(--vx-on-navy);--nk-on-navy-label:var(--vx-on-navy);--nk-status:var(--vx-on-navy);--nk-shadow:none;
  --nk-fs-overline:14px;--nk-fs-meta:14px;--nk-fs-text:16px;--nk-fs-body:16px;--nk-fs-title:var(--vx-h3);--nk-fs-heading:var(--vx-h2)}
/* Kliniken (.apm): Schutzbereich, Hartwerte bleiben (siehe 1b) */
/* Video: Hartwerte #1d4289/#e2e8f0/#f0f4fb/#0e2036/#163668 (spec-01, spec-07, spec-15) */
body.home .av-video .av-kapitel-tabelle td,body.home .av-video .av-kapitel-tabelle th,body.home .av-video .av-kapitel{border-bottom-color:var(--vx-line)}
body.home .av-video .av-kapitel-tabelle td,body.home .av-video .av-kapitel__label{color:var(--vx-navy)}
body.home .av-video .av-kapitel:hover,body.home .av-video .av-kapitel[aria-current="true"]{background:var(--vx-light)}
body.home .av-video .av-video__rahmen,body.home .av-video .av-poster{border-color:var(--vx-line)}
body.home .av-video .av-poster{background:var(--vx-navy-dark)}
body.home .av-video .av-poster a::after{background-color:var(--vx-navy)}
body.home .av-video .av-poster a:hover::after{background-color:var(--vx-navy-dark)}
/* News mobil: Hover-Ton #e9eef4 -> Linie (spec-15) */
@media (max-width:599px){body.home .nk .nk-item:hover{background:var(--vx-line)}}
/* Footer (Zahlungs-Label): jetzt in 00-global.css */

/* ---------------------------------------------------------------------
   3) Inhaltskante: alle Abschnitte auf der Kante des Theme-.container
      (1440: x80–1360, 768: x48, 390: x24) (layout-6, spec-14)
   --------------------------------------------------------------------- */
/* Studienleiste: 1240 -> Container-Breite; Inhalt (Icon, Logo) sitzt auf der Kante der Linien */
body.home .sciban{max-width:none;width:min(calc(100% - 2 * var(--vx-gutter)),1352px);margin-inline:auto;padding-inline:0}
/* Risikoreduktion: Innenabstand 24/16 -> Gutter, Spalte 1240 -> 1352 (= .container 1512 − 2×80) */
body.home .ra{padding:0 var(--vx-gutter)}
body.home .ra .ra__inner{max-width:1352px}
/* Aktuell-Leiste: 1240/28px -> Container (Label mobil auf x24 statt x16/x28) */
body.home .pulsbar .pulsbar__inner{max-width:1512px;padding-inline:var(--vx-gutter)}

/* ---------------------------------------------------------------------
   4) Abschnittsrhythmus (layout-7, mobil-a11y-15)
      Weit: 96 / 72 / 56 px zwischen Themenblöcken und als Innenabstand
      farbiger Bänder. Eng: Studienleiste hängt als Beleg am Hero.
      !important nur, weil aa-startseite-css die Abstände mit !important setzt.
   --------------------------------------------------------------------- */
/* Die vorhandene Regel article.post-5>*:not(:first-child){margin-top:var(--section-spacing-l)!important}
   bekommt nur einen neuen Wert (gilt auch für die Trust-Leiste nach <main>). */
body.home{--section-spacing-l:var(--vx-section)}
/* Studienleiste eng an Hero/Aktuell-Leiste */
body.home article.post-5>.sciban:not(:empty){margin-top:var(--vx-tight)!important}
/* Risikoreduktion: 64px Innenabstand + Abschnittsabstand addierten sich zu 184px */
body.home .ra{padding-block:0}
/* Kliniken (.apm): Schutzbereich – Außen- und Innenabstände des Themes bleiben (128/64 bzw. 32 px) */
/* Details-Slider-Band (py-[120px] -> 64/32) -> Rhythmus */
body.home article.post-5 [class*="py-[120px]"]{padding-block:var(--vx-section)!important}

/* ---------------------------------------------------------------------
   5) Typo-Skala (layout-4, spec-09, spec-13, ki-design-13)
   --------------------------------------------------------------------- */
/* h1 im Hero: Schutzbereich – Größe des Themes bleibt (nur der Tag-Wechsel h2 -> h1 macht 50-a11y) */
/* Ein h2-Stil für alle Abschnitte: 400/700 und 26/34px vereinheitlicht, linksbündig (ohne Schutzbereich .apm) */
body.home .ra .ra-heading,
body.home .av-video .av-video__kopf h2,
body.home [data-component="block-adhd-pass"] .text-headline-32-regular,
body.home .nk .nk__heading{margin-top:0;font-size:var(--vx-h2);font-weight:700;line-height:1.2;color:var(--vx-navy);text-align:left;text-wrap:balance;hyphens:auto;overflow-wrap:break-word;letter-spacing:0}
/* h3 in Teaser-Karten und News: kleiner als die h2 (Teaser-h3 waren 28px > h2 26px) */
body.home .teaser-card-item h3,
body.home .nk .nk-lead__title,
body.home .nk .nk-item__title{font-size:var(--vx-h3);font-weight:700;line-height:1.25;text-wrap:balance;hyphens:auto;overflow-wrap:break-word}
/* Leads: 16,5/17px -> 18px (Token --text-h5) (spec-13); Studien-Claim erst ab 1024 (bei 768 sonst 4 Zeilen neben Button+Logo) */
body.home .ra .ra-lead{font-size:18px;line-height:1.5}
body.home .sciban .sciban__claim{font-size:16px;line-height:1.5}
@media (min-width:1024px){body.home .sciban .sciban__claim{font-size:18px;line-height:1.4}}
body.home .av-video .av-video__kopf .av-lead{font-size:18px;line-height:1.6;color:var(--vx-slate)} /* spec-02: #475569 */
/* Fließtext 16px/1.6, Zeilenlänge ≈ 70 Zeichen (36em statt ch, weil ch bei Inter breit ist) (layout-13) */
body.home .ra .ra-text{font-size:16px;line-height:1.6;color:var(--vx-slate);max-width:36em}
body.home .ra .ra-acc__item>:not(summary){font-size:16px;line-height:1.6}
body.home .nk .nk-item__text,body.home .nk .nk-lead__text{line-height:1.6}
body.home .nk .nk-item__text{max-width:36em}
body.home [data-component="block-adhd-pass"] .adhd-pass__caption{font-size:16px;line-height:1.6;color:var(--vx-slate)}
body.home [data-component="block-adhd-pass"] .adhd-pass__caption p:not(.adhd-pass__kicker){max-width:36em}
body.home [data-component="block-card-slider-item"] p{font-size:16px;line-height:1.6}
/* Sekundär- und Hinweistexte: nie unter 14px, Slate (spec-02, mobil-a11y-07, mobil-a11y-14) */
body.home .sciban .sciban__sub{font-size:14px}
body.home .av-video .av-hinweis{font-size:14px;color:var(--vx-slate)}                      /* 12px, 4,36:1 */
body.home .av-video .av-kapitel__zeit,
body.home .av-video .av-kapitel-tabelle td:last-child{font-size:14px;color:var(--vx-slate)} /* 12,5px, 4,36:1 */
body.home .pulsbar .pulsbar__date{font-size:14px}                                           /* 11,5–12,5px */
body.home .pulsbar .pulsbar__all{font-size:14px}
/* Footer-Kleinzeilen (≥ 13px, On-Navy, Copyright-Deckkraft): jetzt in 00-global.css */
/* Seitenwähler 1–6: Ziffern 12/13px -> 14px (mobil-a11y-14) */
body.home [data-component="block-adhd-pass"] .swiper-pagination-bullet{font-size:14px}

/* ---------------------------------------------------------------------
   6) Ein Eyebrow-Stil für alle Kicker/Overlines (ki-design-01, layout-8, spec-08,
      mobil-a11y-07, mobil-a11y-14). Texte bleiben sichtbar; nur Versalien,
      Sperrung, Farbe, Zierlinie und Punkt entfallen.
      Hinweis: „WECHSELN SIE DIE SEITE“ und „BESTELLUNG FÜR PATIENTEN“ stehen im
      Markup in Versalien – das ist Inhalt und bleibt so.
   --------------------------------------------------------------------- */
body.home .sciban .sciban__eyebrow,
body.home .ra .ra-overline,
body.home .ra .ra-media__tag,
body.home .av-video .av-eyebrow,
body.home .av-video .av-kapitel-titel,
body.home [data-component="block-adhd-pass"] .adhd-pass__kicker,
body.home [data-component="block-adhd-pass"] .container>.text-neutrals-300,
body.home .teaser-card-item .text-overline,
body.home .nk .nk-item__date,
body.home .ra .ra-media__badge-label,
body.home .pulsbar .pulsbar__label,
body.home .nk .nk-lead__new,
body.home .nk .nk-lead__monyear{font-size:14px;font-weight:600;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--vx-slate);opacity:1}
/* Abstand zur folgenden Überschrift 8px */
body.home .sciban .sciban__eyebrow,
body.home .av-video .av-eyebrow,
body.home [data-component="block-adhd-pass"] .adhd-pass__kicker{margin:0 0 8px}
body.home .ra .ra-head .ra-overline{margin-bottom:-8px} /* .ra-head hat gap:16px -> netto 8px */
body.home .ra .ra-quality{gap:8px}
/* Teaser-h5: Theme-Klassen !text-neutrals-200/-400 sind !important in @layer utilities.
   Wichtige Deklarationen ohne Layer verlieren gegen solche in Layern; deshalb hier im
   früheren Theme-Layer „theme“ (bei !important gewinnt der frühere Layer). */
@layer theme{
  body.home .teaser-card-item.bg-white .text-overline{color:var(--vx-slate)!important}
  body.home .teaser-card-item.bg-primary .text-overline{color:var(--vx-on-navy)!important}
}
/* Auf Navy-Flächen: On-Navy (8,7:1 auf #15355a) */
body.home .ra .ra-media__badge-label,
body.home .pulsbar .pulsbar__label,
body.home .nk .nk-lead__new,
body.home .nk .nk-lead__monyear{color:var(--vx-on-navy)}
/* Zierlinien und farbige Punkte an Eyebrows entfernen (dekorative Pseudo-Elemente ohne Text) */
body.home .sciban .sciban__eyebrow::after,
body.home .ra .ra-media__tag::before,
body.home [data-component="block-adhd-pass"] .adhd-pass__kicker::before{display:none}
/* 3px-Akzentlinie über „Kapitel im Gespräch“ -> 1px Trennlinie */
body.home .av-video .av-kapitel-titel{border-top:1px solid var(--vx-line)}
/* „Alle Neuigkeiten“ ist ein Textlink, kein Versal-Label */
body.home .nk .nk-all{font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--vx-navy)}

/* ---------------------------------------------------------------------
   7) Button-System (layout-3, spec-10, ki-design-16)
      Primär: Navy, weiß, 16/600, 14×24, ≥48px. Auf Navy: weiß, Navy-Schrift.
      Sekundär („Studie lesen“): transparent, 1px Navy.
   --------------------------------------------------------------------- */
/* Theme-Buttons (Teaser u. a.): Fläche sitzt am .wp-block-button, Text am Link.
   Ohne Schutzbereich Hero-Box („Jetzt bestellen“ bleibt wie live); :where() hält die Spezifität wie bisher. */
body.home .wp-block-button.button:where(:not([data-component="block-header-slider-item"] *)) .wp-block-button__link{font-weight:600;padding:14px 24px;min-height:48px;line-height:1.25!important;justify-content:center;transition:color .15s ease} /* line-height: Theme setzt inherit!important */
body.home .wp-block-button.button:where(:not([data-component="block-header-slider-item"] *)){transition:background-color .15s ease}
body.home .button--color-blue.button--hierarchy-primary:hover{background-color:var(--vx-navy-dark)}
/* Theme-Ring-Schatten (transparent, !important im Theme) – zählt sonst als Schatten (spec-11) */
body.home .button:where(:not([data-component="block-header-slider-item"] *)) .wp-block-button__link{box-shadow:none!important}
/* Sekundär: „Studie lesen“ – vorher Navy gefüllt, 13,5px, mit Pfeil */
body.home .sciban .sciban__btn a{background:transparent;color:var(--vx-navy);border:1px solid var(--vx-navy);font-size:16px;font-weight:600;line-height:1.25;padding:13px 24px;min-height:48px;justify-content:center;transition:color .15s ease,background-color .15s ease}
body.home .sciban .sciban__btn a:hover{background:var(--vx-light);color:var(--vx-navy-dark);border-color:var(--vx-navy-dark)}
/* Angehängte Pfeile entfernen (ki-design-16): ::after an „Studie lesen“, aria-hidden-SVG an „Alle Beiträge“ */
body.home .sciban .sciban__btn a::after{display:none}
body.home .pulsbar .pulsbar__all svg{display:none}
/* Fokus (Buttons) */
body.home .wp-block-button__link:focus-visible,
body.home .sciban .sciban__btn a:focus-visible{outline:3px solid var(--vx-navy-dark);outline-offset:2px}
body.home .button--color-white .wp-block-button__link:focus-visible{outline-color:var(--vx-white)}

/* ---------------------------------------------------------------------
   8) Radien und Schatten (spec-06, spec-11, ki-design-15)
      Radius-Tokens stehen oben in :root. Hier nur Elemente mit eigenem Wert.
   --------------------------------------------------------------------- */
body.home [data-component="block-adhd-pass"] .swiper-pagination-bullet,
body.home [data-component="block-adhd-pass"] .adhd-pass__arrow{border-radius:0}
/* Schatten: keine. Trennung über vorhandene 1px-Linien. Ohne Schutzbereiche (Hero-Box samt Plakette, .apm). */
body.home main :where(:not([data-component="block-header-slider-item"] .bg-primary,[data-component="block-header-slider-item"] .bg-primary *,.apm,.apm *)){box-shadow:none}
body.home [data-component="block-adhd-pass"] .aa-pass-pfeil{box-shadow:none} /* Slider-Pfeile */
/* Hover-Lift der Teaser-Karten (translate -8px + vierlagiger Schatten) */
body.home .teaser-card-item,
body.home .teaser-card-item:hover{translate:none;box-shadow:none;transition:opacity .2s ease}

/* ---------------------------------------------------------------------
   9) Marker, Puls, Bewegung (spec-05, spec-16)
      Ein Marker: 8×8-Quadrat, Navy (auf Navy: On-Navy), ohne Animation.
   --------------------------------------------------------------------- */
/* Aktuell-Leiste: grüner Pulspunkt -> statisches On-Navy-Quadrat */
body.home .pulsbar .pulsbar__dot{animation:none;width:8px;height:8px;background-color:var(--vx-on-navy)}
/* Slider-Kicker: Pulspunkt (adhd-pass-pulse 1,6s) ist oben ausgeblendet; Animation zusätzlich aus */
body.home [data-component="block-adhd-pass"] .adhd-pass__kicker::before{animation:none}
/* Übergänge ≤ 200 ms (Akkordeon .3/.4s) */
body.home .ra .ra-acc__item{transition-duration:.2s}
body.home .ra .ra-acc__item::details-content{transition-duration:.2s}

/* ===== 20-oben.css ===== */
/* =====================================================================
   20-oben.css – Hero, Aktuell-Leiste (.pulsbar), Studienleiste (.sciban) – nur Startseite
   (Header: 00-global.css)
   Nur Darstellung. Kein Text wird geändert, ergänzt oder ausgeblendet.
   Baut auf 10-fundament.css auf (Tokens --vx-*, --vx-gutter, --vx-tight, --vx-h1,
   Eyebrow- und Button-System). Hier steht nur, was dort nicht abgedeckt ist.
   ===================================================================== */


/* ---------------------------------------------------------------------
   HEADER: alle Header-/Megamenü-/Offcanvas-Regeln gelten auf allen Seiten und
   stehen jetzt in 00-global.css (Abschnitt 3). Diese Datei wirkt nur auf der Startseite.
   --------------------------------------------------------------------- */


/* ---------------------------------------------------------------------
   HERO
   Runde 2 (Nutzer-Feedback „oben der Slider: bitte Box nicht ändern“): Die blaue Box samt
   Zitatzeichen, Überschrift, Unterzeile, Liste, Button „Jetzt bestellen“ und runder Plakette
   „2 Jahre“ bleibt exakt wie live. Alle Box-Regeln aus Runde 1 sind entfernt – auch die
   88vh-Nachbesserung ab 1024, die nur wegen der höher gewordenen Box nötig war.
   Runde 2, Nachbesserung: Auch der Foto-Zuschnitt unter 1024 (mobil-a11y-04, aspect-ratio 1344/768)
   ist entfernt – bei 390 war das Foto 224 statt 300px hoch und die Box rückte 76px nach oben.
   Der Slider steht damit in jeder Breite wie live. Es bleibt nur die Rasterlücke bei 320 px.
   --------------------------------------------------------------------- */

/* Nachbesserung (wichtig, 320 px = 400 % Zoom): Das 12er-Raster hat 11 Spalten-Lücken; unter 1024 ist
   die Box ohnehin 12 Spalten breit, die Lücke machte sie bei 320 px breiter als den Bildschirm (rechts
   beschnitten). Bei 390/768 ändert sich die Box dadurch nicht (gleiche Breite). */
@media (max-width: 1023.98px) {
  body.home .header-slider .grid { column-gap: 0; }
}


/* ---------------------------------------------------------------------
   AKTUELL-LEISTE (.pulsbar)
   Label-Stil, Datum 14px/On-Navy, statischer 8px-Marker und Pfeil-Entfernung kommen aus 10-fundament.
   --------------------------------------------------------------------- */

/* ki-design-08: Inhalt auf der Inhaltskante links statt zentriert; Datum + „Alle Beiträge“ rechtsbündig */
body.home .pulsbar .pulsbar__inner {
  justify-content: flex-start;
  align-items: baseline;
  gap: 8px 24px;
  padding-block: 12px;
}
/* ki-design-08: statischer Marker (10-fundament) neben „Aktuell“, optisch auf Mitte der Versalhöhe */
body.home .pulsbar .pulsbar__dot { align-self: baseline; margin-right: -12px; }
/* mobil-a11y-13: Schlagzeile umbrechen statt mit „…“ abschneiden – auf allen Breiten,
   mobil zusätzlich ohne 3-Zeilen-Kappung */
body.home .pulsbar .pulsbar__title {
  flex: 0 1 auto;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  -webkit-line-clamp: none;
  line-clamp: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
body.home .pulsbar .pulsbar__date { margin-left: auto; color: var(--vx-on-navy); }   /* ki-design-08: 8,7:1 */
/* ki-design-08: „Alle Beiträge“ ohne Pfeil – als Link erkennbar durch Unterstreichung */
body.home .pulsbar .pulsbar__all {
  font-weight: 600;
  color: var(--vx-on-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.home .pulsbar .pulsbar__all:hover { color: var(--vx-white); }
/* Nachbesserung: „Alle Beiträge“ auf Handy und Touch-Tablet mit 44 px Trefferhöhe; der negative
   Rand hält die Leiste gleich hoch. */
@media (max-width: 1023.98px) {
  body.home .pulsbar .pulsbar__all {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0;
    margin-block: -10.5px;   /* (Textzeile 23 px − 44 px) / 2 */
  }
}
@media (max-width: 767.98px) {
  body.home .pulsbar .pulsbar__inner { padding-block: 16px; gap: 8px 16px; }
  body.home .pulsbar .pulsbar__dot { margin-right: -8px; }
  body.home .pulsbar .pulsbar__title { flex: 1 1 100%; display: block; }
  body.home .pulsbar .pulsbar__date { margin-left: 0; }
  body.home .pulsbar .pulsbar__all { margin-left: auto; }
}


/* ---------------------------------------------------------------------
   STUDIENLEISTE (.sciban)
   Breite/Kante (spec-14) und enger Abstand zur Aktuell-Leiste (layout-7, --vx-tight) sowie
   Eyebrow und Sekundär-Button kommen aus 10-fundament.
   --------------------------------------------------------------------- */

/* spec-14: Innenabstand nur oben/unten – Kachel und Logo sitzen auf der Kante der Linien */
body.home article.post-5 > .sciban.sciban:not(:empty) { padding-block: 24px; gap: 24px; }

/* ki-design-09: Atom-Kachel ruhiger – Hellblau-Fläche mit Navy-Icon statt Navy-Fläche (nicht entfernt).
   Strichfarbe im data-URI = Wert von --vx-navy (Variablen wirken in data-URIs nicht). */
body.home .sciban.sciban::before {
  width: 48px;
  height: 48px;
  background: var(--vx-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4289' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%231d4289' stroke='none'/%3E%3Cellipse cx='12' cy='12' rx='10.5' ry='4.3'/%3E%3Cellipse cx='12' cy='12' rx='10.5' ry='4.3' transform='rotate(60 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='10.5' ry='4.3' transform='rotate(120 12 12)'/%3E%3C/svg%3E") center / 28px 28px no-repeat;
}
/* ki-design-09: Eyebrow als Block (Zierlinie ist in 10-fundament entfernt) */
body.home .sciban .sciban__eyebrow { display: block; }
body.home .sciban .sciban__claim { font-weight: 600; color: var(--vx-navy-dark); text-wrap: pretty; }
body.home .sciban .sciban__sub { margin-top: 4px; line-height: 1.5; }
/* Trennstrich Button | Logo in Linienfarbe, Höhe = Button */
body.home .sciban .sciban__right { gap: 24px; }
body.home .sciban .sciban__right::after { height: 48px; }
body.home .sciban .sciban__btn a { gap: 0; }

/* spec-14: Tablet – Text bekommt die volle Zeile, Button + Logo darunter auf der Textkante
   (statt 4-zeiligem Claim zwischen Kachel und Button) */
@media (min-width: 641px) and (max-width: 1023.98px) {
  body.home article.post-5 > .sciban.sciban:not(:empty) { flex-wrap: wrap; row-gap: 16px; }
  body.home .sciban .sciban__main { flex: 1 1 calc(100% - 72px); }
  body.home .sciban .sciban__right { margin-left: 72px; }
}
/* Handy: Kachel kleiner, Abstände in der 16er-Stufe */
@media (max-width: 640px) {
  body.home article.post-5 > .sciban.sciban:not(:empty) { gap: 16px; }
  body.home .sciban.sciban::before { width: 40px; height: 40px; background-size: 24px 24px; }
}
/* Nachbesserung (320 px = 400 % Zoom): „Studie lesen“ + Fresenius-Logo liefen bis x334 –
   Logo darf unter den Button umbrechen; der dekorative Trennstrich (::after, ohne Text) entfällt dann. */
@media (max-width: 359.98px) {
  body.home .sciban .sciban__right { flex-wrap: wrap; row-gap: 16px; }
  body.home .sciban .sciban__right::after { display: none; }
}

/* ===== 30-mitte.css ===== */
/* =====================================================================
   30-mitte.css – Risikoreduktion (.ra), Feature-Icon-Reihe (block-card-slider),
   Kliniken (.apm), Video (.av-video). NUR Darstellung: kein Text, kein Bild,
   kein Link wird geändert oder ausgeblendet. Farben nur über --vx-* (10-fundament.css).
   Lädt NACH 10-fundament.css. Was das Fundament schon regelt (Token-Inseln, Inhaltskante,
   Abschnittsrhythmus, h2-Skala, Eyebrow-Stil, Lead 18px, Fließtext, Hinweis-/Zeitfarben),
   wird hier nicht wiederholt – nur bereichsspezifische Regeln.
   Jede Regel trägt die Befund-ID (bzw. "Spec" = Marken-Spec/Gestaltungssystem aus BRIEF.md).
   ===================================================================== */


/* ---------------------------------------------------------------------
   1) RISIKOREDUKTION (.ra)
   --------------------------------------------------------------------- */

/* Spec: Fläche hinter dem Mockup Hellblau (zusätzlich zu --ra-grey aus dem Fundament) */
body.home .ra .ra-media{background:var(--vx-light)}

/* Spec (Eyebrow „kein farbiger Punkt“): Label „BTM-Bescheinigung“ bleibt ohne Marker – das ::before blendet
   10-fundament aus; Marker sind den Status-Labels („Aktuell“, „Neu“) und den Qualitätsmerkmalen vorbehalten. */

/* layout-15 / Spec: Plakette „Prägungsmerkmal / Aluminium-Holographie“ ruhiger – helle eckige Plakette mit
   1px-Linie statt satter Navy-Fläche, Label im Eyebrow-Stil (Slate statt On-Navy, weil jetzt auf Weiß),
   links auf der Achse des Labels oben. Text bleibt. */
body.home .ra .ra-media__badge{left:24px;right:auto;bottom:24px;gap:2px;padding:12px 16px;background:var(--vx-white);border:1px solid var(--vx-line);color:var(--vx-ink)}
body.home .ra .ra-media__badge-label{color:var(--vx-slate)}
body.home .ra .ra-media__badge-value{font-size:16px;line-height:1.4;font-weight:600;color:var(--vx-navy)}
/* layout-15 / Spec: einspaltig (≤999px) liegt die Plakette nicht über dem Mockup, sondern als Bildunterschrift
   darunter, links auf der Achse des Labels oben */
@media (max-width:999.98px){
  body.home .ra .ra-media{flex-direction:column;align-items:center;justify-content:flex-start;min-height:0;padding:64px 24px 24px}
  body.home .ra .ra-media__badge{position:static;align-self:flex-start;margin-top:16px}
}
@media (max-width:599.98px){
  body.home .ra .ra-media{padding:48px 16px 16px}
}

/* kritik-06: Akkordeon ohne Häkchen-Kästchen (wirkten wie Formular-Checkboxen) und ohne Schatten/Kasten.
   Ruhige Liste mit 1px-Linien; einziger Zustandsanzeiger rechts: „+“ zu, „−“ offen (kein Drehen zu „ד). */
body.home .ra .ra-acc{gap:0;border-bottom:1px solid var(--vx-line)}
body.home .ra .ra-acc__item,
body.home .ra .ra-acc__item[open]{background:transparent;border:0;border-top:1px solid var(--vx-line);box-shadow:none;transition:none}
body.home .ra .ra-acc__item>summary{min-height:0;padding:20px 48px 20px 0;font-size:14px;line-height:1.5;color:var(--vx-slate)}
body.home .ra .ra-acc__item>summary::before{content:none}
/* A11y: „+“/„−“ ist rein visuell – Alt-Text leer („/ ""“), damit der zugängliche Name auf dem Text endet
   (Zustand liefert <details> selbst). Der erste content-Wert ist Fallback für Browser ohne Alt-Text-Syntax. */
body.home .ra .ra-acc__item>summary::after{content:"+";content:"+" / "";right:0;width:24px;height:24px;margin-top:-12px;font-size:24px;font-weight:400;color:var(--vx-navy);transform:none;transition:none}
body.home .ra .ra-acc__item[open]>summary::after{content:"\2212";content:"\2212" / "";transform:none}
body.home .ra .ra-acc__item>summary strong{margin-bottom:4px;font-size:18px;line-height:1.3;font-weight:600;color:var(--vx-navy)}
body.home .ra .ra-acc__item>summary:hover strong{color:var(--vx-navy-dark)}
body.home .ra .ra-acc__item>summary:focus-visible{outline:3px solid var(--vx-navy-dark);outline-offset:2px}
body.home .ra .ra-acc__item>:not(summary){padding:0 48px 24px 0;color:var(--vx-ink);max-width:36em}
@media (max-width:599.98px){
  body.home .ra .ra-acc__item>summary{padding-right:40px}
  body.home .ra .ra-acc__item>:not(summary){padding-right:0}
}
/* Spec (Bewegung ≤ 200 ms, nur opacity): kein Höhen-Tween beim Aufklappen */
body.home .ra .ra-acc__item::details-content{transition:opacity .2s ease,content-visibility .2s allow-discrete}
@media (prefers-reduced-motion:reduce){body.home .ra .ra-acc__item::details-content{transition:none}}

/* layout-15: Qualitätsmerkmale ohne verwaiste Kachel – in allen Breiten 2×2 statt 3+1.
   4 Spalten (auch ab 1200px) wären in der ~600px-Spalte nur ~140px breit und würden jedes Merkmal
   umbrechen bzw. trennen; bei 768 brach „Hohe Materialstärke (270 g/m²)“ schon in 4 Spalten dreizeilig. */
body.home .ra .ra-quality__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body.home .ra .ra-quality__grid li{background:var(--vx-light);color:var(--vx-navy);font-size:14px;line-height:1.4}
body.home .ra .ra-quality__grid li::before{width:8px;height:8px;background:var(--vx-navy)}


/* ---------------------------------------------------------------------
   2) FEATURE-ICON-REIHE ([data-component=block-card-slider])
   --------------------------------------------------------------------- */

/* ki-design-07, layout-5 (nur Darstellung), mobil-a11y-03: kein Karussell, keine zentrierte Template-Optik
   mit senkrechten Trennern – ruhiges Raster, alle vier Punkte immer sichtbar (4 / 2 / 1 Spalten).
   !important nur gegen die Inline-Styles von Swiper (transform, width, margin-right), falls 30-mitte.js nicht läuft. */
body.home [data-component="block-card-slider"] .card-slider{overflow:visible}
body.home [data-component="block-card-slider"] .swiper-wrapper{display:grid!important;grid-template-columns:minmax(0,1fr);gap:32px;height:auto!important;transform:none!important;transition:none!important}
@media (min-width:600px){body.home [data-component="block-card-slider"] .swiper-wrapper{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}}
@media (min-width:1024px){body.home [data-component="block-card-slider"] .swiper-wrapper{grid-template-columns:repeat(4,minmax(0,1fr))}}
body.home [data-component="block-card-slider-item"]{width:auto!important;height:auto!important;margin:0!important;padding-top:24px;border:0;border-top:1px solid var(--vx-line)}
/* ki-design-07: Karte ohne graue Fläche (bg-neutrals-100 unter 1280px) und ohne Innenabstand – Text auf der Inhaltskante */
body.home [data-component="block-card-slider-item"]>div{padding:0;gap:16px;background:transparent}
/* ki-design-07: Icon klein, links oben statt zentriert */
body.home [data-component="block-card-slider-item"] .size-6{width:32px;height:32px;margin:0}
body.home [data-component="block-card-slider-item"] .size-6 img{display:block;width:32px;height:32px}
/* ki-bild-4, ki-bild-5 (nur Darstellung): alle vier Icons in einer Farbe. Dieselbe SVG-Datei dient als Maske,
   die Fläche darunter ist Navy; das gezeichnete Bild wird aus der Box geschoben. Greift nur, wenn
   30-mitte.js die Klasse .mitte-icon samt --mitte-icon gesetzt hat – ohne JS bleibt das Original sichtbar. */
body.home [data-component="block-card-slider-item"] img.mitte-icon{background:var(--vx-navy);object-position:-9999px 0;-webkit-mask:var(--mitte-icon) center/contain no-repeat;mask:var(--mitte-icon) center/contain no-repeat}
/* ki-design-07 / Spec (Typo): linksbündig; h3-Skala aus dem System; Text Slate (Größe 16px setzt das Fundament) */
body.home [data-component="block-card-slider-item"] h3{text-align:left;font-size:var(--vx-h3);line-height:1.25;font-weight:700;color:var(--vx-navy);text-wrap:balance;hyphens:auto}
body.home [data-component="block-card-slider-item"] p{text-align:left;color:var(--vx-slate);text-wrap:pretty}
/* mobil-a11y-03 (mobil kompakt): einspaltig steht das Icon links neben Titel und Text statt darüber –
   die vier Punkte bleiben untereinander sichtbar, die Liste wird ~190px kürzer */
@media (max-width:599.98px){
  body.home [data-component="block-card-slider"] .swiper-wrapper{gap:24px}
  body.home [data-component="block-card-slider-item"]{padding-top:20px}
  body.home [data-component="block-card-slider-item"]>div{flex-direction:row;align-items:flex-start;gap:16px}
  body.home [data-component="block-card-slider-item"] .size-6{flex:none;margin-top:2px}
}
/* mobil-a11y-03: Punkte-Navigation (leere 8px-<span>, ohne Text/Namen) entfällt, weil nichts mehr zu blättern ist */
body.home [data-component="block-card-slider"] .swiper-pagination{display:none}


/* ---------------------------------------------------------------------
   3) KLINIKEN (.apm)
   --------------------------------------------------------------------- */

/* Runde 2 (Nutzer-Feedback): Der Abschnitt „600+ klinische Einrichtungen …“ bleibt exakt wie live –
   Laufband, Abstände, Farben, Ausrichtung. Keine Regeln mehr hier; 30-mitte.js lässt das Laufband
   laufen, 10-fundament.css nimmt .apm aus seinen Regeln aus und setzt dort die Theme-Variablen zurück. */


/* ---------------------------------------------------------------------
   4) VIDEO (.av-video)
   --------------------------------------------------------------------- */

/* mobil-a11y-07 / Spec (Eyebrow): „Kapitel im Gespräch“ ohne Linie darüber; die Linie sitzt jetzt oben an der
   Kapitelliste (wie Akkordeon und Kliniken-Liste: Linie über jedem Eintrag). Farbe/Größe aus dem Fundament. */
body.home .av-video .av-kapitel-titel{margin:0 0 8px;padding:0;border:0}
body.home .av-video .av-kapitel-liste,
body.home .av-video .av-kapitel-tabelle{margin-top:0;border-top:1px solid var(--vx-line)}
/* Spec (Fokus): 3px Navy-Dunkel */
body.home .av-video .av-kapitel:focus-visible{outline:3px solid var(--vx-navy-dark);outline-offset:2px}
body.home .av-video .av-hinweis{line-height:1.5}
body.home .av-video .av-hinweis::before{margin-top:3px}
/* layout-17 / Spec (Fließtext): Lead – Größe/Farbe aus dem Fundament (18px Slate), Zeilenlänge begrenzt */
body.home .av-video .av-video__kopf .av-lead{margin:12px 0 0;max-width:36em}

/* A11y (WCAG 2.4.3, Fokusreihenfolge): 30-mitte.js stellt im DOM das Video vor die Kapitelliste – so wie es
   unter 783px ohnehin angezeigt wird (Theme: order:-1). Damit Anzeige und Fokusfolge auch 783–1199px
   übereinstimmen, steht das Video dort links (breitere Spalte), die Kapitel rechts; Video oben bündig mit der
   Kapitelliste in voller Spaltenbreite statt unten rechts in die Kapitelhöhe eingepasst. */
@media (min-width:783px) and (max-width:1199.98px){
  body.home .av-video .av-video__grid{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
  body.home .av-video .av-video__rahmen{align-self:start;display:block;container-type:normal}
  body.home .av-video .av-poster{width:100%}
}

/* layout-17: Leerfläche rechts oben schließen. Ab 1200px ein gemeinsames Raster: links Kopf (Eyebrow, h2, Lead)
   und darunter die Kapitel, rechts das Video – oben bündig mit der Kopfzeile. Platzierung ausdrücklich gesetzt,
   unabhängig von der DOM-Reihenfolge. Darunter: 783–1199 Kopf über Video|Kapitel; <783 Video vor den Kapiteln. */
@media (min-width:1200px){
  body.home .av-video{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:56px;align-items:start}
  body.home .av-video .av-video__grid{display:contents}
  body.home .av-video .av-video__kopf{grid-column:1;grid-row:1;width:auto;max-width:none}
  body.home .av-video .av-video__kopf .av-lead{width:auto;min-width:0}
  body.home .av-video .av-video__kapitel{grid-column:1;grid-row:2;margin-top:32px}
  body.home .av-video .av-video__rahmen{grid-column:2;grid-row:1 / span 2;align-self:start;display:block;container-type:normal;border:0}
  body.home .av-video .av-poster{width:100%}
}

/* ===== 40-unten.css ===== */
/* ==========================================================================
   40-unten.css – Startseite unten: Details-Slider, Zielgruppen-Teaser,
   News, Trust-Leiste. Nur Startseite (Footer: 00-global.css).
   Nur Darstellung, kein Inhalt geändert.
   Tokens aus 10-fundament.css (--vx-*). Kommentare nennen die Befund-ID.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) DETAILS-SLIDER  [data-component="block-adhd-pass"]
   -------------------------------------------------------------------------- */

/* layout-10: Folgeseiten nicht über die rechte Inhaltskante ragen lassen.
   Das Theme setzt !overflow-visible als Tailwind-Klasse in @layer utilities –
   ein !important von außerhalb der Ebene verliert dagegen. clip-path schneidet
   die Darstellung trotzdem an der Slider-Kante ab (Klicks außerhalb ebenso). */
body.home [data-component="block-adhd-pass"] .adhd-slider {
  clip-path: inset(0);
  margin-top: 0;
}

/* mobil-a11y-05 / ki-design-10: Hinweis „WECHSELN SIE DIE SEITE“ im Eyebrow-Stil
   (14px/600, keine Sperrung; Versalien stehen so im Markup und bleiben),
   Kontrast Slate auf Hellblau ca. 5,5:1 statt 1,9:1. Selektor unabhängig vom Tag
   (50-a11y.js macht aus der h3 ggf. ein p). */
body.home [data-component="block-adhd-pass"] .container > h2 + *:not(.relative) {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vx-slate);
}

/* layout-10: Seitenwahl-Zeile ohne Verschiebung nach oben, fester Platz über dem Slider */
body.home [data-component="block-adhd-pass"] .container > .relative {
  margin-top: 16px;
  padding-top: 60px; /* 44px Seitenwahl + 16px Abstand; Padding statt Slider-Margin,
                        sonst kollabiert der Rand und die Seitenwahl liegt auf dem Bild */
}
body.home [data-component="block-adhd-pass"] .adhd-pass__nav {
  top: 0;
  left: 0;
  margin: 0;
  transform: none;
  translate: none;
}

/* layout-10 / ki-design-10: Seitenwahl 1–6 eckig, 44px, aktive Seite Navy-Fläche */
body.home [data-component="block-adhd-pass"] .swiper-pagination-bullet {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 8px 0 0 !important; /* Theme setzt Ränder mit !important */
  border: 1px solid var(--vx-line);
  border-radius: 0;
  background: var(--vx-white);
  color: var(--vx-navy);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  opacity: 1;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
body.home [data-component="block-adhd-pass"] .swiper-pagination-bullet:hover {
  border-color: var(--vx-navy);
}
body.home [data-component="block-adhd-pass"] .swiper-pagination-bullet-active,
body.home [data-component="block-adhd-pass"] .swiper-pagination-bullet-active:hover {
  background: var(--vx-navy);
  border-color: var(--vx-navy);
  color: var(--vx-white);
}
body.home [data-component="block-adhd-pass"] .swiper-pagination-bullet:focus-visible {
  outline: 3px solid var(--vx-navy-dark);
  outline-offset: 2px;
}

/* layout-10: Theme-Pfeile (nur < 768px sichtbar) eckig und ruhig wie die Seitenwahl */
body.home [data-component="block-adhd-pass"] .adhd-pass__arrow {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border: 1px solid var(--vx-line);
  border-radius: 0;
  background: var(--vx-white);
  color: var(--vx-navy);
}
body.home [data-component="block-adhd-pass"] .adhd-pass__arrow:hover {
  border-color: var(--vx-navy);
  background: var(--vx-light);
}
body.home [data-component="block-adhd-pass"] .adhd-pass__arrow:focus-visible {
  outline: 3px solid var(--vx-navy-dark);
  outline-offset: 2px;
}

/* layout-10: eigene Pfeile (ab 768px) innerhalb des Containers – rechts in der
   Zeile der Seitenwahl statt bei left:-24px über der Inhaltskante; ohne Schatten. */
body.home [data-component="block-adhd-pass"] .aa-pass-pfeil {
  top: 0;
  left: auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--vx-line);
  border-radius: 0;
  background: var(--vx-white);
  color: var(--vx-navy);
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}
body.home [data-component="block-adhd-pass"] .aa-pass-pfeil--prev { left: auto; right: 52px; }
body.home [data-component="block-adhd-pass"] .aa-pass-pfeil--next { left: auto; right: 0; }
body.home [data-component="block-adhd-pass"] .aa-pass-pfeil:hover,
body.home [data-component="block-adhd-pass"] .aa-pass-pfeil:active {
  background: var(--vx-light);
  border-color: var(--vx-navy);
}
body.home [data-component="block-adhd-pass"] .aa-pass-pfeil:focus-visible {
  outline: 3px solid var(--vx-navy-dark);
  outline-offset: 2px;
}

/* mobil-a11y-05 / ki-design-10: Beschreibungskasten ruhig – 1px Linie statt
   4px-Akzentstreifen, Text 16px in Textfarbe (vorher 14px #7a828a = 3,9:1). */
body.home [data-component="block-adhd-pass"] .adhd-pass__caption {
  margin-top: 16px;
  padding: 24px;
  border: 1px solid var(--vx-line);
  border-left-width: 1px;
  border-left-color: var(--vx-line);
  background: var(--vx-white);
  color: var(--vx-ink);
  font-size: 16px;
  line-height: 1.6;
}
body.home [data-component="block-adhd-pass"] .adhd-pass__caption [data-adhd-pass-body-intro] {
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--vx-ink);
}

/* ki-design-10 / mobil-a11y-05: Seiten-Label Navy statt Orange (#cf7320, 3,43:1),
   keine Versalien/Sperrung, Eyebrow-Größe 14px. */
body.home [data-component="block-adhd-pass"] .adhd-pass__kicker {
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vx-navy);
}
/* ki-design-10: Punktring mit Endlos-Puls entfernt (rein dekorativ, ohne Text) */
body.home [data-component="block-adhd-pass"] .adhd-pass__kicker::before {
  content: none;
  display: none;
  animation: none;
}

/* layout-10: ab 1200px rechte Leerfläche nutzen – Beschreibung neben der Seite
   statt darunter (eine Seite sichtbar, siehe 40-unten.js). Nur Anordnung. */
@media (min-width: 1200px) {
  body.home [data-component="block-adhd-pass"] .container {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 48px;
    align-items: start;
  }
  body.home [data-component="block-adhd-pass"] .container > h2,
  body.home [data-component="block-adhd-pass"] .container > h2 + *:not(.relative) {
    grid-column: 1 / -1;
  }
  body.home [data-component="block-adhd-pass"] .container > .relative {
    grid-column: 1;
    min-width: 0;
  }
  body.home [data-component="block-adhd-pass"] .container > .adhd-pass__caption {
    grid-column: 2;
    /* Oberkante bündig mit der Ausweisseite: .relative margin 16 + padding 60 */
    margin-top: 76px;
    padding: 32px;
    max-width: none !important; /* Theme-JS setzt max-width inline auf Seitenbreite */
  }
}

/* layout-10 / Klickziele: unter 481px passen Pfeile + 6 Seiten mit 44px nicht in
   eine Zeile (342px bei 390, 288px bei 320). Seitenwahl 1–6 als eigene Zeile
   (6 × 44 + 5 × 4 = 284px), die beiden Pfeile darunter rechtsbündig unter „5 6“.
   Alle Ziele 44 × 44, kein Überlauf bis 320px (= 400 % Zoom). */
@media (max-width: 480px) {
  body.home [data-component="block-adhd-pass"] .adhd-pass__nav {
    flex-wrap: wrap;
    width: 284px;
    max-width: 100%;
    row-gap: 8px;
  }
  body.home [data-component="block-adhd-pass"] .adhd-pass__nav > .swiper-pagination {
    order: -1;
    flex: 0 0 100%;
    display: flex;
  }
  body.home [data-component="block-adhd-pass"] .swiper-pagination-bullet,
  body.home [data-component="block-adhd-pass"] .adhd-pass__arrow {
    flex: none;
    width: 44px;
    height: 44px;
    font-size: 14px;
    line-height: 1;
  }
  body.home [data-component="block-adhd-pass"] .swiper-pagination-bullet {
    margin: 0 4px 0 0 !important;
  }
  body.home [data-component="block-adhd-pass"] .swiper-pagination-bullet:last-child {
    margin-right: 0 !important;
  }
  body.home [data-component="block-adhd-pass"] .adhd-pass__arrow--prev { margin: 0 4px 0 auto; }
  body.home [data-component="block-adhd-pass"] .adhd-pass__arrow--next { margin: 0; }
  /* 44 Seitenwahl + 8 + 44 Pfeile + 16 Abstand zur Ausweisseite */
  body.home [data-component="block-adhd-pass"] .container > .relative { padding-top: 112px; }
  body.home [data-component="block-adhd-pass"] .adhd-pass__caption { padding: 20px; }
}
@media (max-width: 767.98px) and (min-width: 481px) {
  body.home [data-component="block-adhd-pass"] .swiper-pagination-bullet { margin: 0 4px 0 0 !important; }
  body.home [data-component="block-adhd-pass"] .adhd-pass__arrow--prev { margin-right: 4px; }
  body.home [data-component="block-adhd-pass"] .adhd-pass__arrow--next { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   2) ZIELGRUPPEN-TEASER  [data-component="block-teaser-cards"]
   -------------------------------------------------------------------------- */

/* layout-12 / mobil-a11y-12: unter 1024px einspaltig (vorher ab 768 zweispaltig,
   HCP-h3 in 8 Zeilen bei 248px Breite). */
@media (max-width: 1023.98px) {
  body.home [data-component="block-teaser-cards"] > .grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Runde 2 (Nutzer): Kartenhöhe NICHT kürzen – die Theme-Mindesthöhe 640px
   (!min-h-[640px]) gilt wieder in jeder Breite; Inhalt darf die Karte nur höher machen.
   Hier: Hover-Lift + Schatten weg. */
body.home .teaser-card-item {
  transition: none;
}
body.home .teaser-card-item:hover {
  translate: none;
  transform: none;
  box-shadow: none;
}

/* ki-bild-7 / layout-12: Fotobereich oben als Untergrenze freihalten, damit Text nie
   über dem Gesicht liegt (greift erst, wenn der Textblock sehr hoch wird, z. B. 320px;
   macht die Karte dann höher, nie niedriger). Gesicht endet bei ca. 39 % der Breite. */
body.home .teaser-card-item > .flex-col > div.relative:not(.mt-auto) {
  min-height: calc(39vw - 20px);
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  body.home .teaser-card-item > .flex-col > div.relative:not(.mt-auto) {
    min-height: calc(45vw - 60px);
  }
}
@media (min-width: 1024px) {
  body.home .teaser-card-item > .flex-col > div.relative:not(.mt-auto) {
    min-height: min(18vw, 260px);
  }
}

/* ki-bild-7: Bildausschnitt je Karte – Kopf oben halten, Gesicht rechts nicht anschneiden */
body.home [data-component="block-teaser-cards"] .teaser-card-item:first-child img {
  object-position: 88% 0;
}
body.home [data-component="block-teaser-cards"] .teaser-card-item:nth-child(2) img {
  object-position: 70% 0;
}

/* ki-bild-7 / mobil-a11y-12: Verlauf erst unterhalb des Gesichts, Textfläche darunter ruhig */
body.home .teaser-card-item.bg-primary > .bg-gradient-to-b {
  background-image: linear-gradient(180deg, transparent 0%, transparent 38%, var(--vx-navy) 74%);
}
body.home .teaser-card-item.bg-white > .bg-gradient-to-b {
  background-image: linear-gradient(180deg, transparent 0%, transparent 38%, var(--vx-white) 74%);
}
/* Runde 2: Karten wieder ≥ 640px hoch – der frühere Tablet-Verlauf (voll deckend bei 60 %)
   entfällt, sonst bleibt zwischen Foto und Text ein leeres Band. Den Kontrast hinter dem
   Text sichert in jeder Breite die Fläche hinter dem Textblock (unten). */

/* Kontrast unabhängig von Kartenhöhe und Zeilenzahl: Unter 390px (bis 320 = 400 % Zoom)
   rutscht der höhere Textblock nach oben auf das Foto, Prozent-Stopps reichen dort nicht.
   Deshalb hinter dem Textblock eine Fläche in Kartenfarbe, die 56px über der Eyebrow
   weich beginnt und 8px über ihr voll deckt. Reine Darstellung (Pseudo-Element ohne
   Text, unter dem Text, über Foto/Verlauf); die Karte schneidet per overflow:hidden. */
body.home .teaser-card-item > .flex-col > .mt-auto::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -56px -200px -200px;
  pointer-events: none;
}
body.home .teaser-card-item.bg-primary > .flex-col > .mt-auto::before {
  background-image: linear-gradient(180deg, transparent 0, var(--vx-navy) 48px);
}
body.home .teaser-card-item.bg-white > .flex-col > .mt-auto::before {
  background-image: linear-gradient(180deg, transparent 0, var(--vx-white) 48px);
}

/* HCP-Karte: weiße Fläche läuft sonst ohne Kante ins Weiß der Seite aus –
   1px Linie begrenzt sie wie die Navy-Karte daneben/darüber. */
body.home .teaser-card-item.bg-white {
  border: 1px solid var(--vx-line);
}

/* mobil-a11y-09 / ki-design-11: Tag „Patienten“/„Praxen & Kliniken“ (Text per 40-unten.js,
   Runde 2) nicht mehr wie ein Button – kein Rahmen, kein Innenabstand, Eyebrow-Stil. */
body.home .teaser-card-item .tag {
  padding: 0;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
body.home .teaser-card-item.bg-primary .tag { color: var(--vx-on-navy); }
body.home .teaser-card-item.bg-white .tag { color: var(--vx-slate); }
/* Runde 2: „Praxen & Kliniken“ ist länger als „HCPs“ (einzeilig 118px). Damit es wie
   „Patienten“ einzeilig bleibt, rückt das Foto zwischen 370 und 399px etwas nach rechts
   (68 % statt 70 %, bei 390 ca. 4px): dort ca. 17px Luft zwischen Tag und Haar, rechts
   bleibt das Haar ca. 6px vor der Kartenkante (nicht angeschnitten). Kartenhöhe 640px bleibt.
   Unter 370px (z. B. 360, 320) ist die Karte zu schmal für Tag + ganzen Kopf in einer Reihe
   (bei 360 nur ca. 10px Spielraum für beide Abstände zusammen) – dort bleibt das Tag
   zweizeilig („Praxen &“ / „Kliniken“), statt das Haar zu berühren oder das Gesicht
   anzuschneiden. Der Text bleibt vollständig. */
@media (min-width: 370px) and (max-width: 399.98px) {
  body.home [data-component="block-teaser-cards"] .teaser-card-item:nth-child(2) img {
    object-position: 68% 0;
  }
}
@media (max-width: 369.98px) {
  body.home .teaser-card-item.bg-white .tag { max-width: 6em; }
}

/* ki-design-11: Eyebrow (h5) im gemeinsamen Eyebrow-Stil; Farbe über
   Theme-Klasse !text-neutrals-*, daher !important. Ausnahme Schreibung: „BESTELLUNG FÜR PATIENTEN“
   steht im Markup in Versalien (Textänderung = Inhalt), deshalb beide Teaser-Eyebrows einheitlich
   versal, aber ohne breite Sperrung. */
body.home .teaser-card-item .mt-auto > h5,
body.home .teaser-card-item .mt-auto > .text-overline {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: 1;
}
body.home .teaser-card-item.bg-primary .mt-auto > h5,
body.home .teaser-card-item.bg-primary .mt-auto > .text-overline { color: var(--vx-on-navy) !important; }
body.home .teaser-card-item.bg-white .mt-auto > h5,
body.home .teaser-card-item.bg-white .mt-auto > .text-overline { color: var(--vx-slate) !important; }

/* layout-12 / mobil-a11y-12: h3 im Karten-h3-Stil (vorher 28px ab 768px) */
body.home .teaser-card-item .mt-auto > h3 {
  margin: 0 0 24px;
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ki-design-11: Rückmeldung beim Überfahren der Karte über den Button statt Lift */
body.home .teaser-card-item:hover .button--color-white .wp-block-button__link {
  background-color: var(--vx-light);
}
body.home .teaser-card-item:hover .button--color-blue .wp-block-button__link {
  background-color: var(--vx-navy-dark);
}

/* --------------------------------------------------------------------------
   3) NEWS  .nk
   Runde 2 (Nutzer): oben die neue Meldung in Blau über die volle Inhaltsbreite,
   darunter die älteren Meldungen als Liste, danach „Alle Neuigkeiten“
   (Link steht per 40-unten.js im DOM hinter der Liste). Texte/Links unverändert.
   -------------------------------------------------------------------------- */

/* layout-14 / ki-design-12: Hellblau über den ganzen Abschnitt statt 190px-Band
   (Pseudo-Element ohne Text entfällt). Rhythmus 96 / 72 / 56px. */
body.home .nk.nk.nk { /* schlägt body.home article.hentry > .nk {padding-bottom:0} */
  --nk-pad-x: 40px;      /* Innenabstand der Leitmeldung = Einzug der Listenzeilen */
  --nk-date-col: 144px;  /* Datumsspalte in Leitmeldung und Liste (ab 768px) */
  background: var(--vx-light);
  padding-bottom: 96px;
}
body.home .nk::before {
  content: none;
  display: none;
}
body.home .nk .nk__inner {
  padding-top: 96px;
  grid-template-columns: minmax(0, 1fr);
}
body.home .nk .nk__intro {
  display: flex;
  flex-direction: column;
}

/* layout-14: h2 auf die gemeinsame Skala (vorher 26px/400) */
body.home .nk .nk__heading {
  font-size: clamp(26px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--vx-navy);
  text-wrap: balance;
}
body.home .nk .nk__sub {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--vx-slate);
}

/* Leitmeldung: volle Inhaltsbreite, Navy. Ab 768px Datum links in eigener Spalte –
   dieselbe Spalte wie in den Listenzeilen darunter. ki-design-12: Datum eine Zeile,
   14px statt 40px + Versalien. */
body.home .nk .nk-lead {
  flex: none;
  margin-top: 32px;
  padding: var(--nk-pad-x);
  grid-template-columns: var(--nk-date-col) minmax(0, 1fr);
  gap: 8px 32px;
  align-items: start; /* Datum und „Neu“ gleiche Größe → gleiche Oberkante = gleiche Grundlinie */
  background: var(--vx-navy);
}
body.home .nk .nk-lead:hover { background: var(--vx-navy-dark); }
body.home .nk .nk-lead__date {
  flex-direction: row;
  align-items: baseline;
  gap: .3em;
}
body.home .nk .nk-lead__day,
body.home .nk .nk-lead__monyear {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vx-on-navy);
}
body.home .nk .nk-lead__monyear {
  flex-direction: row;
  gap: .3em;
}
/* ki-design-12: „Neu“ ohne Versalien/Sperrung; grünes Quadrat → Marker im System
   (8×8 Quadrat; auf Navy-Fläche in --vx-on-navy). */
body.home .nk .nk-lead__new {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vx-on-navy);
}
body.home .nk .nk-lead__new::before { background: var(--vx-on-navy); }

/* Brief: h3 in Karten clamp(20–24px)/700; Fließtext 16px, Zeilenlänge begrenzt */
body.home .nk .nk-lead__title,
body.home .nk .nk-item__title {
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}
body.home .nk .nk-lead__text {
  max-width: 36em;
  font-size: 16px;
  line-height: 1.6;
  color: var(--vx-on-navy);
}
body.home .nk .nk-item__text {
  max-width: 36em;
  font-size: 16px;
  line-height: 1.6;
  color: var(--vx-slate);
}

/* Ältere Meldungen: kein Kasten, kein Schatten – Zeilen auf der Abschnittsfläche,
   gleiche Kanten wie die Leitmeldung, 1px Trennlinie unter jeder Zeile. */
body.home .nk .nk-panel {
  margin-top: 0;
  padding: 0;
  gap: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body.home .nk .nk-list {
  margin: 0;
  gap: 0;
}
body.home .nk .nk-item {
  margin: 0;
  padding: 24px var(--nk-pad-x);
  grid-template-columns: var(--nk-date-col) minmax(0, 1fr);
  gap: 8px 32px;
  align-items: baseline; /* Datum auf der Grundlinie der ersten Titelzeile */
  background: transparent;
  border-bottom: 1px solid var(--vx-line);
}
body.home .nk .nk-item:hover { background: var(--vx-white); }
body.home .nk .nk-item:hover .nk-item__title a { color: var(--vx-navy-dark); }
body.home .nk .nk-item__date {
  padding-top: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vx-slate);
}

/* layout-14 / ki-design-12: „Alle Neuigkeiten“ normale Schreibung, unter der Liste,
   Textanfang auf der Kante der Datumsspalte; Trefferfläche ≥ 44px. */
body.home .nk .nk-all {
  order: 0; /* DOM-Reihenfolge (40-unten.js), kein Theme-order:2 */
  align-self: flex-start;
  min-height: 44px;
  margin: 16px 0 0 calc(var(--nk-pad-x) - 12px); /* Theme-Innenabstand 12px ausgleichen */
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vx-navy);
}
body.home .nk .nk-all:hover { background: var(--vx-white); color: var(--vx-navy-dark); }
body.home .nk a:focus-visible { outline: 3px solid var(--vx-navy-dark); outline-offset: 2px; }
body.home .nk .nk-lead a:focus-visible { outline-color: var(--vx-white); }

/* Tablet 768–1199: Rhythmus 72px, etwas weniger Innenabstand */
@media (max-width: 1199.98px) {
  body.home .nk.nk.nk {
    --nk-pad-x: 32px;
    --nk-date-col: 128px;
    padding-bottom: 72px;
  }
  body.home .nk .nk__inner { padding-top: 72px; }
  body.home .nk .nk-lead { margin-top: 32px; }
}
/* Mobil < 768: eine Spalte, Datum über dem Titel, Rhythmus 56px */
@media (max-width: 767.98px) {
  body.home .nk.nk.nk {
    --nk-pad-x: 24px;
    padding-bottom: 56px;
  }
  body.home .nk .nk__inner { padding-top: 56px; }
  body.home .nk .nk-lead { margin-top: 24px; }
  body.home .nk .nk-lead,
  body.home .nk .nk-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   4) TRUST-LEISTE  .benefits-bar  (Inhalt bleibt vollständig)
   -------------------------------------------------------------------------- */

/* layout-16 / ki-design-05 / ki-bild-9: ruhiger – kleinere Icons in Navy,
   Labels als normaler Text statt fetter blauer Auszeichnung, eigener Innenabstand.
   „html“ erhöht die Spezifität: Die Seiten-CSS (aa-startseite-css, steht im <body>) setzt
   body.home .benefits-bar{…!important}; ohne Zusatz gewänne sie, wenn diese Datei im <head> liegt. */
html body.home .benefits-bar {
  margin-top: 0 !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  border: 0 !important;
  background: var(--vx-white);
}
body.home .benefits-bar .benefits-bar__grid {
  gap: 16px 32px;
}
body.home .benefits-bar .benefits-bar__item {
  gap: 12px;
  padding-block: 4px;
}
body.home .benefits-bar .benefits-bar__icon,
body.home .benefits-bar .benefits-bar__icon svg {
  width: 28px;
  height: 28px;
  color: var(--vx-navy);
}
body.home .benefits-bar .benefits-bar__label {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--vx-ink);
}
/* kritik-08: unter 600px untereinander – „Expertenberatung“ passt in eine Zeile,
   kein Bruch mitten im Wort mehr. */
@media (max-width: 599.98px) {
  body.home .benefits-bar .benefits-bar__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

/* --------------------------------------------------------------------------
   5) FOOTER: gilt auf allen Seiten, steht jetzt in 00-global.css (Abschnitt 4).
      Die Trust-Leiste oben bleibt hier (nur Startseite).
   -------------------------------------------------------------------------- */

/* ===== 50-a11y.css ===== */
/* 50-a11y.css – Fokus, Klickziele, Folgeregeln fuer die Tag-Wechsel aus 50-a11y.js – NUR Startseite.
   Nur Darstellung, kein Inhalt. Farben ausschliesslich aus den Tokens (--vx-*, 00-global.css)
   (Fallback = derselbe Token-Wert, falls die Datei einmal ohne 00-global.css geladen wird).
   Header, Megamenue, Offcanvas, Skip-Link, Footer und deren Klickziele/Fokusringe gelten auf
   allen Seiten und stehen in 00-global.css (Abschnitt 5). */

/* ===== Fokusring seitenweit auf der Startseite (Auftrag 8, Brief „:focus-visible 3px Navy-Dunkel, auf Navy weiss“; mobil-a11y-02/-03) ===== */
/* body:where(.home) haelt die Spezifitaet wie bisher (0,2,1) – knapp ueber der Theme-Regel .offcanvas :focus-visible (2px, primary).
   Header/Offcanvas/Footer bekommen denselben Ring auf allen Seiten aus 00-global.css. */
:root body:where(.home) :focus-visible{outline:3px solid var(--vx-navy-dark,#15355A);outline-offset:2px}

/* Auftrag 8: auf Navy-Flaechen weiss – Hero-Box, Aktuell-Leiste, Patienten-Teaser, News-Aufmacher (Footer: 00-global.css).
   Spezifitaet wie bisher (0,4,1). */
:root body:where(.home) :is(.header-slider [class*="bg-primary"],.pulsbar,.teaser-card-item.bg-primary,.nk-lead) :focus-visible{outline-color:var(--vx-white,#fff)}

/* Fokus nicht unter dem Sticky-Header (WCAG 2.4.11): Header ist beim Scrollen auf allen Breiten 65 px hoch,
   das Theme reserviert per scroll-padding-top nur 24 px (html,body: var(--spacing-3)). 65 + 16 px Luft = 81 px; gilt auch fuer Sprunglinks.
   Nur Startseite (:has(body.home)): Unterseiten haben eigene scroll-margin-top (Inhaltsverzeichnis, FAQ), die sich sonst addieren. */
:root:has(body.home){scroll-padding-top:81px}

/* Kartenlinks liegen als Flaeche ueber der ganzen Karte (overflow:hidden) -> Ring nach innen (mobil-a11y-09) */
body.home .teaser-card-item a.absolute:focus-visible{outline-offset:-6px}

/* Auftrag 8 (Fokus-Messung „ohne Ring“): Video-Vorschau – Ring sass bisher nur klein im Play-Feld (::after), der Link selbst hatte outline:0.
   Jetzt Ring um die ganze Vorschau; dafuer darf die Figur nur waehrend des Fokus ueberlaufen (sonst abgeschnitten). */
body.home .av-video .av-poster:has(> a:focus-visible){overflow:visible}
body.home .av-video .av-poster > a:focus-visible{outline:3px solid var(--vx-navy-dark,#15355A);outline-offset:2px}

/* ===== mobil-a11y-03: Seitenwahl des Karten-Sliders – 8-px-Punkt bleibt sichtbar, Trefferflaeche 24 x 24 px ===== */
body.home [data-component="block-card-slider"] .swiper-pagination-bullet[role="button"]{box-sizing:content-box;padding:8px;background-clip:content-box;margin:0 2px}

/* ===== mobil-a11y-06: Folgeregel zum Tag-Wechsel Hero h2 -> h1 ===== */
/* Das Theme reserviert (inline-20, < 1024 px) per h2::before Platz fuer die Plakette; dieselbe Regel fuer h1, gleiche Spezifitaet */
@media (max-width:1023.98px){
  :where(body.home) .header-slider .bg-primary h1::before{content:"";float:right;width:96px;height:1.2em}
}