/* =============================================
   Homepage — Optics Refraction Hero
   Dark stage; white beam refracts and disperses through an Apple-
   style liquid-glass search bar. Mobile shows just the prism;
   desktop adds a biconvex lens with chromatic aberration.
   Geometry is computed in PHP (Snell's law) and rendered as SVG.
   The interactive form is positioned in % so it stays in lock-
   step with the SVG glass shape (stage uses aspect-ratio).
   ============================================= */

.hero {
    position: relative;
    background: #050811;
    color: #fff;
    /* overflow:visible (frueher hidden): das Live-Suggest-Dropdown im Hero ist
       ein simpler position:absolute-Layer (wie auf /suche) und darf den Hero-
       Rand verlassen. Geclippt wird NUR die SVG-Kunst — siehe .hero__optics. */
    overflow: visible;
    isolation: isolate;
    padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(2rem, 4vw, 3.25rem);
}
/* Mobile: Hero darf direkt am Header andocken, sonst klafft über dem
   Titelblock eine tote schwarze Zone unter dem Hamburger. */
@media (max-width: 767.98px) {
    .hero { padding: 0.25rem 0 0.5rem; }
}

/* ---------- atmospheric background ----------
   WICHTIG: Der Hero muss am OBEREN Rand denselben Ton wie die dunkle
   Home-Navbar treffen (#050811), sonst entsteht eine sichtbare Stoßkante.
   Deshalb sind alle Glow-/Vignette-Quellen so positioniert, dass sie die
   oberen 25 % der Hero nicht einfärben oder abdunkeln. Der zentrale
   Radial-Gradient läuft VON OBEN nach unten (statt aus der Mitte), damit
   die Top-Linie überall exakt #050811 ist. */
.hero__bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 65% 45% at 10% 100%,
            rgba(255, 215, 175, 0.16) 0%, rgba(255, 200, 150, 0) 60%),
        radial-gradient(ellipse 55% 45% at 92% 55%,
            rgba(120, 180, 255, 0.12) 0%, rgba(80, 130, 220, 0) 65%),
        linear-gradient(180deg, #050811 0%, #050811 18%, #0a1024 60%, #050811 100%);
}
.hero__bg::before, .hero__bg::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
}
.hero__bg::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.45;
    mix-blend-mode: overlay;
    /* Noise startet erst unterhalb der Navbar-Übergangszone, damit am
       Top-Edge nichts flackert und der Übergang nahtlos bleibt. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 12%, #000 28%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, transparent 12%, #000 28%, #000 100%);
}
/* Vignette nur unten/in der Mitte unten — KEIN Darken am Top-Rand. */
.hero__bg::after {
    background: radial-gradient(ellipse 95% 90% at 50% 85%,
        transparent 50%, rgba(0, 0, 0, 0.45) 100%);
}

/* ---------- locked-aspect stage ---------- */
.hero__stage {
    position: relative;
    z-index: 1;
    width: min(100% - 2rem, 1280px);
    margin: 0 auto;
    aspect-ratio: 1280 / 560;
    overflow: visible;   /* Dropdown der Hero-Suche darf die Stage verlassen */
}
@media (max-width: 767.98px) {
    .hero__stage {
        width: min(100% - 1rem, 600px);
        aspect-ratio: 600 / 760;
    }
}

/* ---------- SVG optics ---------- */
.hero__optics {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    /* Die Clip-Grenze sitzt jetzt HIER (frueher auf .hero): nur die Kunst-
       Ebene wird auf ihre inset:0-Box (= Stage-Box) beschnitten. Dadurch
       bleibt der Hero/Stage overflow:visible und das Such-Dropdown kann frei
       nach unten ausklappen. Die SVG-viewBox IST die Stage-Box, der Inhalt
       lebt darin -> sollte optisch (nahezu) identisch wirken.
       VISUELL PRUEFEN nach Deploy: Kunst clippt nun an der Stage- statt an der
       vollbreiten Hero-Box. */
    overflow: hidden;
}
.hero__optics--mobile  { display: none; }
@media (max-width: 767.98px) {
    .hero__optics--desktop { display: none; }
    .hero__optics--mobile  { display: block; }
}
.dgao-grid line { stroke: rgba(255,255,255,0.025); stroke-width: 1; }
.dgao-axis      { stroke: rgba(255,255,255,0.10); stroke-width: 1; stroke-dasharray: 2 4; }
.dgao-anno      {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    fill: rgba(255,255,255,0.42);
}
.dgao-anno--n   { font-size: 10.5px; letter-spacing: 0.05em; text-transform: none; }
.dgao-focus-dot { fill: rgba(255,255,255,0.85); }

/* ---------- text overlay ---------- */
.hero__overlay { position: absolute; inset: 0; }

.hero__text {
    position: absolute;
    top: 6%;
    left: 5.5%;
    width: clamp(280px, 46%, 540px);
    z-index: 3;
}

.hero__eyebrow {
    margin: 0 0 1.4rem;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.hero__eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: rgba(255, 255, 255, 0.32);
}

.hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.85rem, 3.1vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
}
.hero__title-line { display: block; }
.hero__title-line--1 { color: #ffffff; }
.hero__title-line--2 { color: rgba(255, 255, 255, 0.78); }
.hero__title-line--3 { color: rgba(255, 255, 255, 0.55); }

/* Die ersten zwei Zeilen sind ein Link zur dgao.de — visuell
   identisch zum nicht-verlinkten Verhalten, nur per Cursor + sanftem
   Opazitäts-Dip beim Hover als Affordance erkennbar. */
.hero__title-link {
    color: inherit;
    text-decoration: none;
    display: block;
    transition: opacity 0.22s var(--ease);
}
.hero__title-link:hover { opacity: 0.78; text-decoration: none; }
.hero__title-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 4px;
    border-radius: 2px;
}

/* ---------- liquid-glass search form ----------
   Positioned in % to align with the SVG glass coordinates.
   Desktop glass at viewBox (360, 235, 560, 90) on 1280×560.
   Mobile glass at viewBox (60, 415, 480, 90) on 600×760. */
.hero__search-form {
    position: absolute;
    top:    41.07%;     /* desktop glass.y / vb.h = 230/560 */
    left:   6.25%;      /* glass.x / vb.w  =  80/1280 */
    width:  40.625%;    /* glass.w / vb.w  = 520/1280 */
    height: 17.86%;     /* glass.h / vb.h  = 100/560  */
    z-index: 4;
    margin: 0;
}
@media (max-width: 767.98px) {
    .hero__search-form {
        top:    53.95%; /* mobile glass.y / vb.h = 410/760 */
        left:   10%;    /* glass.x / vb.w  = 60/600  */
        width:  80%;    /* glass.w / vb.w  = 480/600 */
        height: 13.16%; /* glass.h / vb.h  = 100/760 */
    }
}

/* Visually hidden but still announced to assistive tech: the search
   icon + placeholder make the form's purpose obvious to sighted users
   and a printed label was crowding the spectrum exit area. */
.hero__search-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Wissenschaftlich-präzises Glas statt iOS-Pille:
   leicht abgerundetes Rechteck (wie ein optisches Element / Glasplatte),
   kräftigerer Backdrop-Blur (Inhalte HINTER der Form werden geblurrt —
   die Suche-Eingabe selbst liegt darüber und bleibt knackscharf), eine
   einzelne dünne Hairline-Border statt buntem Verlaufsrahmen. */
.hero__search {
    position: relative;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    padding: 7px 7px 7px clamp(16px, 1.6vw, 24px);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
            backdrop-filter: blur(8px) saturate(1.4);
    box-shadow:
        inset 0 1px 0    rgba(255, 255, 255, 0.18),
        0 12px 36px -14px rgba(0, 0, 0, 0.55);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.hero__search:focus-within {
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow:
        inset 0 1px 0     rgba(255, 255, 255, 0.22),
        0 14px 44px -12px rgba(0, 0, 0, 0.6),
        0 0 0 3px         rgba(120, 180, 255, 0.16);
}

.hero__search-icon {
    flex-shrink: 0;
    margin-right: 14px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 1.05rem;
    line-height: 1;
    z-index: 1;
}

.hero__search-input {
    flex: 1; min-width: 0;
    height: 100%;
    background: transparent;
    border: 0; outline: 0;
    color: #fff;
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1vw, 1rem);
    font-weight: 400;
    letter-spacing: 0.005em;
    padding: 0 2rem 0 0;     /* rechts Platz fuer den ueberlagerten ×-Button */
    z-index: 1;
}
.hero__search-input::placeholder { color: rgba(255, 255, 255, 0.55); }
.hero__search-input::-webkit-search-cancel-button { display: none; }

.hero__search-btn {
    flex-shrink: 0;
    height: 100%;
    aspect-ratio: 1;
    min-width: 2.25rem;       /* deterministischer Anker fuer den ×-Button */
    margin-left: 6px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    font-size: 1rem; line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center; justify-content: center;
    z-index: 1;
    transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.hero__search-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.30);
}
.hero__search-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 2px;
}

/* ---------- hero live-suggest combobox: dunkles Glas-Popover ----------
   Greift die Glasoptik der Suchleiste auf (dunkles, leicht navy getoentes Glas
   mit Backdrop-Blur, Hairline-Border, oberem Licht-Highlight) statt eines
   weissen Kastens. Hover/aktiv nutzen das KUEHLE Refraktions-Blau der
   :focus-within-Glut der Leiste -> das Dropdown wirkt wie dieselbe Glasscheibe.

   Positionierung: simpler position:absolute-Layer im .hero__search-Wrapper —
   exakt derselbe Mechanismus wie das Dropdown auf /suche. Kein Portal, keine
   Floating-UI, keine JS-Positionierung; scrollt natuerlich mit der Seite. Das
   ist nur moeglich, weil overflow:hidden auf .hero__optics verschoben wurde
   (siehe dort) — sonst wuerde .hero das Dropdown abschneiden. */
.hero__search-listbox {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1100;
    padding: 0.35rem 0;
    border-radius: 14px;
    /* Nahezu deckend: das Dropdown sitzt position:absolute IN der Glasleiste
       (.hero__search), deren eigener backdrop-filter den Durchgriff auf den
       Seiten-Hintergrund verhindert -> der bliebe sonst scharf sichtbar und
       unleserlich. Lesbarkeit darf NICHT vom Blur abhaengen; der bleibt nur
       als dezente Tiefe, wo der Browser ihn liefert. */
    background: rgba(12, 17, 31, 0.975);
    border: 1px solid rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
            backdrop-filter: blur(12px) saturate(1.3);
    box-shadow:
        inset 0 1px 0     rgba(255, 255, 255, 0.12),
        0 24px 60px -16px rgba(0, 0, 0, 0.75);
    color: #fff;
    max-height: 24rem;
    overflow-y: auto;
    overscroll-behavior: contain;             /* kein Scroll-Chaining auf die Seite */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;

    /* Enter-Animation (reines CSS): opacity + transform, von JS ueber die
       .is-open-Klasse getoggelt. transform-origin oben, ~0.16–0.18s. */
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.16s var(--ease), transform 0.18s var(--ease);
    pointer-events: none;
    will-change: transform, opacity;
}
/* hidden-Attribut hat Vorrang: zugeklappt = wirklich weg (kein Klick-Fang). */
.hero__search-listbox[hidden] { display: none; }
.hero__search-listbox.is-open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.hero__search-listbox::-webkit-scrollbar { width: 11px; }
.hero__search-listbox::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

/* Gruppen-Header: gedimmtes Weiss, Display-Font, Hairline-Trenner. */
.hero__search-listbox .suche-combobox__group-header {
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.55rem 0.95rem 0.25rem;
}
.hero__search-listbox .suche-combobox__group-header:not(:first-child) {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 0.3rem;
}

/* Optionen: heller Text + kuehler Refraktions-Highlight bei hover/aktiv,
   markiert durch einen linken Lichtbalken (wie ein gebrochener Strahl). */
.hero__search-listbox .suche-combobox__option {
    padding: 0.5rem 0.95rem 0.5rem calc(0.95rem - 2px);
    border-left: 2px solid transparent;
    transition: background-color 0.12s var(--ease), border-color 0.12s var(--ease);
}
.hero__search-listbox .suche-combobox__option:hover,
.hero__search-listbox .suche-combobox__option[aria-selected="true"] {
    background: rgba(120, 180, 255, 0.13);
    border-left-color: rgba(150, 190, 255, 0.9);
}
.hero__search-listbox .suche-combobox__option-main {
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.92rem;
    line-height: 1.3;
}
.hero__search-listbox .suche-combobox__option-sub  {
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.78rem;
    margin-top: 0.08rem;
}
.hero__search-listbox .suche-combobox__option-main::before {
    color: rgba(150, 190, 255, 0.85);   /* kuehles Spektral-Akzent statt Brand-Rot */
    margin-right: 0.55rem;
}

/* (Clear-× im Hero bewusst entfernt: im kompakten Glas-Bar gegen den Submit-
   Pfeil gedraengt -> unruhig. Auf /suche bleibt der Clear-Button, da Platz.) */

/* ---------- stats ---------- */
.hero__stats {
    position: absolute;
    left: 5.5%;
    right: 5.5%;
    bottom: 6%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, auto));
    column-gap: clamp(1.75rem, 4vw, 4rem);
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    z-index: 3;
}
.hero__stat-num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1.8vw, 1.65rem);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-bottom: 0.35rem;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.hero__stat-lbl {
    display: block;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 767.98px) {
    /* Titel direkt unter den Hamburger setzen + linksbündig auf Höhe
       der Suchbox (left=10%), damit Titel und Suche eine sauberer
       vertikale Linie bilden. Ein Hauch Luft (top=6%) verhindert,
       dass der Titel direkt am Hamburger-Strich klebt. */
    .hero__text { top: 6%; left: 10%; width: 80%; }
    .hero__eyebrow { font-size: 0.62rem; margin-bottom: 0.55rem; }
    .hero__title { font-size: clamp(1.7rem, 7vw, 2.2rem); }
    .hero__lead  { font-size: 0.92rem; }
    .hero__stats {
        bottom: 4%;
        column-gap: 1.4rem;
        padding-top: 1rem;
    }
    .hero__stat-num { font-size: 1.15rem; }
    .hero__stat-lbl { font-size: 0.6rem; letter-spacing: 0.1em; }
}

/* ---------- bottom hairline ---------- */
.hero__edge {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    z-index: 2;
}

/* Frueher: ein 4.5s-Infinite-"Photon-Shimmer" (opacity 0.92<->1) auf dem
   weissen Strahl (.dgao-ray-white). ENTFERNT — Ursache fuer den Hover-Lag:
   .dgao-ray-white traegt einen SVG-Gauss-Blur-Filter (filter=url(#dgao-glow),
   optics.php), und der Strahl liegt HINTER der backdrop-filter-Glasleiste.
   Eine Endlos-Opacity-Animation auf einem gefilterten SVG-Element zwingt den
   Browser, JEDEN Frame (60fps) den Blur-Filter NEU zu rastern UND das
   backdrop-filter der Suchleiste neu zu blurren — dauerhaft. Das saettigt den
   Main-Thread, sodass Hover-Repaints (Zeilen einfaerben) verzoegert ankamen
   -> "laggy/buggy". Der Strahl ist statisch bei voller Deckkraft genauso schoen. */

/* --- DOWNSTREAM SECTIONS --- */
.v4-section-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.v4-section-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.015em;
    /* Kein dekorativer Akzent-Unterstrich mehr: die Hierarchie kommt aus
       der Typo + dem Hairline oben an der Liste, nicht aus einem roten Stub. */
    margin: 0 0 1.4rem;
}

/* --- NEWS — Karten im "Call for papers"-Stil (Nature/Springer-Referenz):
   Karten mit Hairline-Border, Eyebrow-Kategorie, Titel, kurzem Text und einer
   strukturierten Datums-Meta am Fuss (Einreichungsfrist / Tagungstermin /
   online seit — aus newsCardMeta() in helpers.php). Die ganze Karte ist der
   Link; Hover hebt sie dezent an. */
.v4-news {
    background: var(--white);
    padding: 2.75rem 0 3rem;
    border-bottom: 1px solid var(--border-light);
}

.v4-news-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Weniger als 3 Meldungen: Spaltenzahl an die Anzahl anpassen, damit die Karten
   die Reihe fuellen statt schmal links zu kleben (sonst 3. Spalte leer). */
.v4-news-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Eine einzelne Meldung nicht ueber die volle Breite ziehen -> auf normale
   Kartenbreite begrenzen, linksbuendig. */
.v4-news-grid[data-count="1"] { grid-template-columns: minmax(0, 400px); }

.v4-news-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.5rem 1.35rem;
    /* Weisse Karte auf weissem Grund, definiert durch Hairline + zarten
       Schatten. KEIN Grau-Fill: das mattete das rote Hover-Rot ab (Rot ueber
       Grau statt ueber Weiss) und wirkte flach. 6px-Ecken. */
    background: var(--white);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    text-decoration: none;
    transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}

/* Grosse Flaeche -> Karte "geht rot" statt voll geflutet: roter Rand + roter
   Titel + leichtes Anheben. Dasselbe Rot-Signal wie der Archiv-Hover, nur
   flaechengerecht dosiert. (Titel wird unten via .v4-news-title rot.) */
a.v4-news-card:hover {
    /* Gleiche weiche Rot-Lasur + roter Rand wie die Archiv-Karten -> EIN
       Hover-Gefuehl. Bewusst KEIN Anheben (transform) und kein Glow-Schatten:
       auf einer wissenschaftlichen Proceedings-Seite wirkt der Lift zu verspielt. */
    background: rgba(var(--accent-rgb), 0.15);
    border-color: var(--accent);
    text-decoration: none;
    color: var(--text);
}
a.v4-news-card:hover .v4-news-title { color: var(--accent); }

.v4-news-card--static { cursor: default; }

/* Rote Grossbuchstaben-Micro-Eyebrow — die Signatur der /einreichen-Seite
   ("Status" / "Einreichen an"): 0.66rem, 600, 0.08em, uppercase, DGaO-Rot. */
.v4-news-eyebrow {
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.7rem;
}

.v4-news-title {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.28;
    margin: 0 0 0.55rem;
    transition: color 0.12s ease;
}

.v4-news-text {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-mid);
    line-height: 1.55;
    margin: 0 0 1.15rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Datums-Meta unten (Frist / Termin), ans Kartenende gepinnt -> gleiche
   optische Grundlinie bei unterschiedlich langem Text. */
.v4-news-meta {
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-light);
}
.v4-news-meta-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}
.v4-news-meta-date {
    display: block;
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Externe News: kleines Pfeil-Glyph am Eyebrow ("verlaesst die Seite"). */
.v4-news-ext {
    font-size: 0.85em;
    color: var(--text-light);
    margin-left: 0.15em;
}

@media (max-width: 900px) {
    .v4-news-grid,
    .v4-news-grid[data-count="1"],
    .v4-news-grid[data-count="2"] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.v4-archive {
    background: var(--white);
    padding: 3.25rem 0 3.5rem;
    border-bottom: 1px solid var(--border-light);
}

/* Entfernt: .v4-features + .v4-trust* (3er-Icon-Kachel-"Trust"-Grid mit
   accent-pale gerundeten Icon-Tiles). War totes CSS (kein Template rendert es)
   und genau das kanonische AI-"Benefit-Tile"-Muster. */

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}