/* directionA/glas-site.css
 * Innovation Republic — Glas-Design der öffentlichen Seiten (24.10.2026, Freigabe Clemens)
 *
 * Vorlage: Mockup Startseite Version 2 (homepage-rebrand/index.html + VORSCHLAG.md, „Entscheidungen Clemens").
 * Material, Farben und Grund kommen aus glas.css (Cockpit); diese Datei legt sie auf Startseite, Unterseiten,
 * Blog, Rechtsseiten, Innovations-Check und die öffentliche Challenge-Seite.
 *
 * Regeln:
 *  - Alles greift NUR unter `html.ir-glas` (Vorgabe; klassisch per ?design=klassisch, gleicher Schlüssel wie im
 *    Cockpit). Ohne die Klasse ist diese Datei wirkungslos — die wenigen Regeln ohne `html.ir-glas` ganz oben
 *    blenden nur Glas-Bausteine aus, die klassisch nicht zu sehen sein dürfen.
 *  - Die Winkel liegen fest unten rechts im Grund (wie im Cockpit). Deshalb steht JEDER Text auf Glas mit echter
 *    Unschärfe — sonst liefe er über die Winkel.
 *  - Die Unschärfe sitzt auf einer Ebene HINTER der Fläche (::after), nicht auf der Fläche selbst. So ist keine
 *    Fläche „Backdrop-Wurzel" für ihren Inhalt: Glas in Glas (Popover im Ablauf, Menü in der Kopfleiste) bricht
 *    trotzdem den Grund, und Safari flackert nicht (Muster aus glas.css, „Dickes Glas ohne Flackern").
 *  - Feste Farben in JSX stehen als var(--gs-…, <alter Wert>): klassisch gilt der alte Wert, hier das Token.
 *  - Lesbarkeit vor Effekt: abgedunkelte Schriftfarben (WCAG AA), bei weniger Transparenz / mehr Kontrast
 *    undurchsichtige Flächen (ganz unten).
 */

/* ── Klassisch unsichtbar ─────────────────────────────────────────────── */
.dirA-logo-glas, .dirA-nav-thema, .dirA-chg-thema { display: none; }

/* ── Tokens ───────────────────────────────────────────────────────────── */
/* Grundwerte für Flächen AUSSERHALB von .dirA (Check-Knopf, Check-Fenster) und für die Challenge-Seite, die
   style.css nicht lädt. Hell wie glas.css; die dunklen Blöcke darunter sind dieselbe Liste wie dort. */
html.ir-glas .dirA-check-pill-wrap, html.ir-glas .dirA-check-overlay, html.ir-glas .dirA-check-modal, html.ir-glas .dirA-chg-seite {
  --bg: #F6F5F1; --bg-elev: #FFFFFF; --bg-deep: #0E0E10;
  --ink: #0E0E10; --ink-2: #44444A; --ink-3: #5E5E66;
  --accent-red: #DC2626; --accent-gold: #F4B83C; --green: #16A34A;
  --red-ink: #B91C1C; --gold-ink: #7A520C;
  --f-sans: "Inter Tight", "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --g-glas: rgba(255,255,255,.50); --g-glas-dick: rgba(250,249,246,.80); --g-chip: rgba(255,255,255,.62);
  --g-fill: rgba(14,14,16,.045); --g-fill-2: rgba(14,14,16,.08);
  --g-rand-a: rgba(255,255,255,.95); --g-rand-b: rgba(255,255,255,.55); --g-rand-mitte: rgba(255,255,255,.08);
  --g-licht-oben: rgba(255,255,255,.85); --g-licht-unten: rgba(14,14,16,.06); --g-glanz: rgba(255,255,255,.55);
  --g-schatten-nah: rgba(14,14,16,.06); --g-schatten-fern: rgba(60,30,10,.16); --g-schleier: rgba(246,245,241,.45);
  --g-knopf: #0E0E10; --g-knopf-text: #F6F5F1;
}
/* Linien auf Glas leiser als die CI-Linien (#E5E3DC) — auf durchscheinendem Grund wirkten die wie Risse. */
html.ir-glas .dirA, html.ir-glas .dirA-check-modal {
  --line: rgba(14,14,16,.08); --line-2: rgba(14,14,16,.13);
}
@media (prefers-color-scheme: dark) {
  html.ir-glas:not([data-ir-thema="hell"]) .dirA-check-pill-wrap,
  html.ir-glas:not([data-ir-thema="hell"]) .dirA-check-overlay,
  html.ir-glas:not([data-ir-thema="hell"]) .dirA-check-modal {
    --bg: #0E0E10; --bg-elev: #18181C; --bg-deep: #050506;
    --ink: #F6F5F1; --ink-2: #CBCAC4; --ink-3: #A3A29C;
    --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.16);
    --red-ink: #FF7A7A; --gold-ink: #F4B83C;
    --g-glas: rgba(24,24,28,.52); --g-glas-dick: rgba(20,20,24,.80); --g-chip: rgba(40,40,46,.6);
    --g-fill: rgba(255,255,255,.05); --g-fill-2: rgba(255,255,255,.09);
    --g-rand-a: rgba(255,255,255,.42); --g-rand-b: rgba(255,255,255,.16); --g-rand-mitte: rgba(255,255,255,.02);
    --g-licht-oben: rgba(255,255,255,.22); --g-licht-unten: rgba(0,0,0,.35); --g-glanz: rgba(255,255,255,.14);
    --g-schatten-nah: rgba(0,0,0,.35); --g-schatten-fern: rgba(0,0,0,.55); --g-schleier: rgba(8,8,10,.45);
    --g-knopf: #F6F5F1; --g-knopf-text: #0E0E10;
    color-scheme: dark;
  }
  html.ir-glas:not([data-ir-thema="hell"]) .dirA-chg-seite {
    --bg: #0E0E10; --bg-elev: #18181C; --ink: #F6F5F1; --ink-2: #CBCAC4; --ink-3: #A3A29C;
  }
}
html.ir-glas[data-ir-thema="dunkel"] .dirA-check-pill-wrap,
html.ir-glas[data-ir-thema="dunkel"] .dirA-check-overlay,
html.ir-glas[data-ir-thema="dunkel"] .dirA-check-modal {
  --bg: #0E0E10; --bg-elev: #18181C; --bg-deep: #050506;
  --ink: #F6F5F1; --ink-2: #CBCAC4; --ink-3: #A3A29C;
  --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.16);
  --red-ink: #FF7A7A; --gold-ink: #F4B83C;
  --g-glas: rgba(24,24,28,.52); --g-glas-dick: rgba(20,20,24,.80); --g-chip: rgba(40,40,46,.6);
  --g-fill: rgba(255,255,255,.05); --g-fill-2: rgba(255,255,255,.09);
  --g-rand-a: rgba(255,255,255,.42); --g-rand-b: rgba(255,255,255,.16); --g-rand-mitte: rgba(255,255,255,.02);
  --g-licht-oben: rgba(255,255,255,.22); --g-licht-unten: rgba(0,0,0,.35); --g-glanz: rgba(255,255,255,.14);
  --g-schatten-nah: rgba(0,0,0,.35); --g-schatten-fern: rgba(0,0,0,.55); --g-schleier: rgba(8,8,10,.45);
  --g-knopf: #F6F5F1; --g-knopf-text: #0E0E10;
  color-scheme: dark;
}
html.ir-glas[data-ir-thema="dunkel"] .dirA-chg-seite {
  --bg: #0E0E10; --bg-elev: #18181C; --ink: #F6F5F1; --ink-2: #CBCAC4; --ink-3: #A3A29C;
}

/* Die var(--gs-…)-Platzhalter aus dem JSX. Sie stehen auf .dirA, damit sie die dunklen Werte von dort erben. */
html.ir-glas .dirA, html.ir-glas .dirA-check-modal {
  --gs-band: transparent;                 /* Hintergründe ganzer Bänder: der Grund scheint durch */
  --gs-karte-bg: transparent;             /* Karten mit Inline-Stil: Material kommt von .dirA-gs-karte */
  --gs-karte-rand: none;
  --gs-karte-rand-gold: none;
  --gs-karte-radius: 22px;
  --gs-innen-bg: var(--g-chip);           /* Kästen IN einer Karte: Chip-Glas ohne eigene Unschärfe */
  --gs-innen-rand: none;
  --gs-innen-radius: 12px;
  --gs-film-radius: 20px;
  --gs-film-rand: none;
  --gs-linie: var(--g-fill-2);
  --gs-nav-aktiv: var(--red-ink);
  --gs-rot-text: var(--red-ink);
  --gs-gold-text: var(--gold-ink);
  --gs-gruen-text: #15803D;
  --gs-auf-gold: #0E0E10;                 /* Schrift auf Gold bleibt dunkel, auch im Dunkelmodus */
  --gs-fehler: var(--red-ink);
  --gs-os-text-3: var(--ink-3);
  --gs-band-text-2: var(--ink-2);
  --gs-band-text-3: var(--ink-3);
  --gs-fuss-link: var(--ink-2);
  --gs-tinte: var(--ink);
  --gs-text-2: var(--ink-2);
  --gs-text-3: var(--ink-3);
  --gs-chip-bg: var(--g-chip);
  --gs-chip-rand: none;
  --gs-knopf: var(--g-knopf);
  --gs-knopf-text: var(--g-knopf-text);
  --gs-knopf2: var(--g-chip);
  --gs-knopf2-rand: 1px solid var(--g-fill-2);
  --gs-knopf-radius: 999px;
}
@media (prefers-color-scheme: dark) {
  html.ir-glas:not([data-ir-thema="hell"]) .dirA { --gs-gruen-text: #6EE7A0; --surface-2: rgba(255,255,255,.08); }
}
html.ir-glas[data-ir-thema="dunkel"] .dirA { --gs-gruen-text: #6EE7A0; --surface-2: rgba(255,255,255,.08); }

/* ── Seite und Grund ──────────────────────────────────────────────────── */
/* Durchsichtig und ein eigener Stapel: Der Grund (z-index -1, glas.css) läge sonst hinter dem Seitenhintergrund.
   overflow-x: clip statt hidden — die Winkel ragen über den Rand, und mit hidden wäre die Kopfleiste nicht mehr
   sticky (Befund Mockup). */
html.ir-glas .dirA-page, html.ir-glas .dirA-blog-wrapper, html.ir-glas .dirA-chg-seite {
  background: transparent; position: relative; z-index: 0; isolation: isolate; overflow-x: clip;
}
html.ir-glas .dirA-chg-seite { min-height: 100vh; }

/* ── Das Glas-Material ────────────────────────────────────────────────── *
 * Normales Glas: Karten, Textflächen, Kopfleiste. Dickes Glas (80 % deckend): Bänder, lange Texte, Fenster. */
html.ir-glas .dirA-nav,
html.ir-glas .dirA-hero-grid > div:first-child,
html.ir-glas .dirA-os,
html.ir-glas .dirA-film-rahmen,
html.ir-glas .dirA-partner-header,
html.ir-glas .dirA-partner-card,
html.ir-glas .dirA-sec-head,
html.ir-glas .dirA-hiw-card,
html.ir-glas .dirA-contrast-section h2,
html.ir-glas .dirA-contrast-table,
html.ir-glas .dirA-ios-section,
html.ir-glas .dirA-persona,
html.ir-glas .dirA-trust-card,
html.ir-glas .dirA-credibility-inner,
html.ir-glas .dirA-frage-karte,
html.ir-glas .dirA-frage-aufruf,
html.ir-glas .dirA-footer,
html.ir-glas .dirA-pagehead,
html.ir-glas .dirA-stats,
html.ir-glas .dirA-process,
html.ir-glas .dirA-tool-card,
html.ir-glas .dirA-tier,
html.ir-glas .dirA-gs-karte,
html.ir-glas .dirA-gs-text,
html.ir-glas .dirA-kontakt-raster,
html.ir-glas .dirA-blog-header,
html.ir-glas .dirA-blog-card,
html.ir-glas .dirA-check-pill,
html.ir-glas .dirA-ablauf-section,
html.ir-glas .dirA-nonprofit-callout,
html.ir-glas .dirA-final-cta,
html.ir-glas .dirA-cta-strip,
html.ir-glas .dirA-legal,
html.ir-glas .dirA-blog-post,
html.ir-glas .dirA-check-modal,
html.ir-glas .dirA-chg,
html.ir-glas .dirA-ablauf-tooltip {
  position: relative; isolation: isolate;
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: none;
  box-shadow:
    inset 0 1px 0 var(--g-licht-oben),
    inset 0 -1px 0 var(--g-licht-unten),
    0 1px 2px var(--g-schatten-nah),
    0 18px 40px -18px var(--g-schatten-fern);
}
/* Randlicht als Verlaufskante */
html.ir-glas .dirA-nav::before,
html.ir-glas .dirA-hero-grid > div:first-child::before,
html.ir-glas .dirA-os::before,
html.ir-glas .dirA-film-rahmen::before,
html.ir-glas .dirA-partner-header::before,
html.ir-glas .dirA-partner-card::before,
html.ir-glas .dirA-sec-head::before,
html.ir-glas .dirA-hiw-card::before,
html.ir-glas .dirA-contrast-section h2::before,
html.ir-glas .dirA-contrast-table::before,
html.ir-glas .dirA-ios-section::before,
html.ir-glas .dirA-persona::before,
html.ir-glas .dirA-trust-card::before,
html.ir-glas .dirA-credibility-inner::before,
html.ir-glas .dirA-frage-karte::before,
html.ir-glas .dirA-frage-aufruf::before,
html.ir-glas .dirA-footer::before,
html.ir-glas .dirA-pagehead::before,
html.ir-glas .dirA-stats::before,
html.ir-glas .dirA-process::before,
html.ir-glas .dirA-tool-card::before,
html.ir-glas .dirA-tier::before,
html.ir-glas .dirA-gs-karte::before,
html.ir-glas .dirA-gs-text::before,
html.ir-glas .dirA-kontakt-raster::before,
html.ir-glas .dirA-blog-header::before,
html.ir-glas .dirA-blog-card::before,
html.ir-glas .dirA-check-pill::before,
html.ir-glas .dirA-ablauf-section::before,
html.ir-glas .dirA-nonprofit-callout::before,
html.ir-glas .dirA-final-cta::before,
html.ir-glas .dirA-cta-strip::before,
html.ir-glas .dirA-legal::before,
html.ir-glas .dirA-blog-post::before,
html.ir-glas .dirA-check-modal::before,
html.ir-glas .dirA-chg::before,
html.ir-glas .dirA-ablauf-tooltip::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(140deg, var(--g-rand-a), var(--g-rand-mitte) 32%, var(--g-rand-mitte) 64%, var(--g-rand-b));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Farbe, Glanz und Unschärfe auf der Ebene dahinter */
html.ir-glas .dirA-nav::after,
html.ir-glas .dirA-hero-grid > div:first-child::after,
html.ir-glas .dirA-os::after,
html.ir-glas .dirA-film-rahmen::after,
html.ir-glas .dirA-partner-header::after,
html.ir-glas .dirA-partner-card::after,
html.ir-glas .dirA-sec-head::after,
html.ir-glas .dirA-hiw-card::after,
html.ir-glas .dirA-contrast-section h2::after,
html.ir-glas .dirA-contrast-table::after,
html.ir-glas .dirA-ios-section::after,
html.ir-glas .dirA-persona::after,
html.ir-glas .dirA-trust-card::after,
html.ir-glas .dirA-credibility-inner::after,
html.ir-glas .dirA-frage-karte::after,
html.ir-glas .dirA-frage-aufruf::after,
html.ir-glas .dirA-footer::after,
html.ir-glas .dirA-pagehead::after,
html.ir-glas .dirA-stats::after,
html.ir-glas .dirA-process::after,
html.ir-glas .dirA-tool-card::after,
html.ir-glas .dirA-tier::after,
html.ir-glas .dirA-gs-karte::after,
html.ir-glas .dirA-gs-text::after,
html.ir-glas .dirA-kontakt-raster::after,
html.ir-glas .dirA-blog-header::after,
html.ir-glas .dirA-blog-card::after,
html.ir-glas .dirA-check-pill::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(420px circle at 18% 0%, var(--g-glanz), transparent 55%), var(--g-glas);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
}
html.ir-glas .dirA-ablauf-section::after,
html.ir-glas .dirA-nonprofit-callout::after,
html.ir-glas .dirA-final-cta::after,
html.ir-glas .dirA-cta-strip::after,
html.ir-glas .dirA-legal::after,
html.ir-glas .dirA-blog-post::after,
html.ir-glas .dirA-check-modal::after,
html.ir-glas .dirA-chg::after,
html.ir-glas .dirA-ablauf-tooltip::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(520px circle at 18% 0%, var(--g-glanz), transparent 55%), var(--g-glas-dick);
  -webkit-backdrop-filter: blur(36px) saturate(190%); backdrop-filter: blur(36px) saturate(190%);
}

/* Die Sammelregel oben setzt position: relative — diese Flächen sind aber schwebend bzw. fest. */
html.ir-glas .dirA-ablauf-tooltip { position: absolute; }

/* ── Knöpfe (Material und Farben wie im Cockpit; Hauptknopf: glas.css) ───── */
html.ir-glas .dirA-btn { border-radius: 999px; transition: background-color .25s var(--g-sanft), transform .35s var(--g-feder), box-shadow .25s var(--g-sanft), opacity .2s; }
html.ir-glas .dirA-btn-primary { border-color: transparent; box-shadow: 0 10px 24px -12px var(--g-schatten-fern); }
html.ir-glas .dirA-btn-ghost,
html.ir-glas .dirA-cta-strip .dirA-btn-ghost {
  background: var(--g-chip); color: var(--ink); border-color: transparent;
  box-shadow: inset 0 1px 0 var(--g-licht-oben), 0 0 0 1px var(--g-fill-2);
}
html.ir-glas .dirA-btn-ghost:hover { background: var(--g-fill-2); }
html.ir-glas .dirA-btn:active:not(:disabled) { transform: scale(.96); transition-duration: .1s; }
html.ir-glas .dirA :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ── Kopfleiste: schwebende Glas-Pille ────────────────────────────────── */
html.ir-glas .dirA-nav {
  position: sticky; top: 10px; z-index: 50;
  width: calc(100% - 32px); max-width: 1200px; margin: 10px auto 0;
  padding: 7px 7px 7px 18px; border-radius: 999px; gap: 10px;
}
html.ir-glas .dirA-nav-logo img.dirA-logo-klassisch,
html.ir-glas .dirA img.dirA-logo-klassisch { display: none; }
html.ir-glas .dirA-logo-glas {
  display: block; flex-shrink: 0;
  background: url(/assets/logo-ir-farbig-klein.png) left center / contain no-repeat;
}
@media (prefers-color-scheme: dark) {
  html.ir-glas:not([data-ir-thema="hell"]) .dirA-logo-glas { background-image: url(/assets/logo-ir-farbig-dunkel-klein.png); }
}
html.ir-glas[data-ir-thema="dunkel"] .dirA-logo-glas { background-image: url(/assets/logo-ir-farbig-dunkel-klein.png); }
html.ir-glas .dirA-nav-logo .dirA-logo-glas { width: 124px; height: 28px; }
html.ir-glas .dirA-footer .brand-block .dirA-logo-glas { width: 142px; height: 32px; margin-bottom: 16px; }
html.ir-glas .dirA-ios-hub .dirA-logo-glas { width: 124px; height: 28px; }

html.ir-glas .dirA-nav-links { background: var(--g-fill); padding: 3px; border-radius: 999px; gap: 2px; }
html.ir-glas .dirA-nav-links a {
  padding: 7px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
  transition: background-color .25s var(--g-sanft), color .25s var(--g-sanft);
}
html.ir-glas .dirA-nav-links a:hover { background: var(--g-chip); color: var(--ink); }
html.ir-glas .dirA-nav-actions { gap: 6px; flex-shrink: 0; }
html.ir-glas .dirA-nav-actions .dirA-btn { padding: 9px 15px; font-size: 14px; }
/* „Anmelden" ist im Glas-Design der Zweitknopf, „Demo" bleibt schwarz (Entscheidung Clemens). */
html.ir-glas .dirA-nav-actions a.dirA-btn[href="/cockpit"] {
  background: var(--g-chip); color: var(--ink);
  box-shadow: inset 0 1px 0 var(--g-licht-oben), 0 0 0 1px var(--g-fill-2);
}
html.ir-glas .dirA-nav-actions a.dirA-btn[href="/cockpit"]:hover { background: var(--g-fill-2); opacity: 1; }
html.ir-glas .dirA-nav-thema,
html.ir-glas .dirA-nav-toggle {
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--g-fill); color: var(--ink);
  cursor: pointer; align-items: center; justify-content: center;
  transition: background-color .25s var(--g-sanft), transform .35s var(--g-feder);
}
html.ir-glas .dirA-nav-thema { display: inline-flex; }
html.ir-glas .dirA-nav-thema:hover, html.ir-glas .dirA-nav-toggle:hover { background: var(--g-fill-2); }
html.ir-glas .dirA-nav-thema svg { width: 17px; height: 17px; }
html.ir-glas .dirA-lang {
  height: 38px; padding: 0 12px; border: 0; background: var(--g-fill); color: var(--ink-3); font-size: 12px;
}
html.ir-glas .dirA-lang .active { color: var(--ink); }
@media (max-width: 1180px) {
  html.ir-glas .dirA-nav-links a { padding: 7px 8px; font-size: 13.5px; }
  html.ir-glas .dirA-nav { padding-left: 14px; }
}
@media (max-width: 1060px) and (min-width: 881px) {
  html.ir-glas .dirA-nav-actions .dirA-lang { display: none; }
  html.ir-glas .dirA-nav-links a { padding: 7px 7px; font-size: 13px; }
}
/* Handy: Menü als dickes Glasfenster unter der Pille */
@media (max-width: 880px) {
  html.ir-glas .dirA-nav { padding: 6px 6px 6px 16px; }
  html.ir-glas .dirA-nav-toggle { display: inline-flex; }
  html.ir-glas .dirA-nav-links {
    top: calc(100% + 8px); left: 0; right: 0; padding: 10px; gap: 2px; border: 0; border-radius: 26px;
    background: transparent; isolation: isolate;
    box-shadow: inset 0 1px 0 var(--g-licht-oben), 0 30px 60px -24px var(--g-schatten-fern);
  }
  html.ir-glas .dirA-nav-links::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
    background: var(--g-glas-dick);
    -webkit-backdrop-filter: blur(36px) saturate(190%); backdrop-filter: blur(36px) saturate(190%);
  }
  html.ir-glas .dirA-nav-links a {
    padding: 13px 14px; border: 0; border-radius: 14px; font-size: 16px; color: var(--ink); white-space: normal;
  }
  html.ir-glas .dirA-nav-links a:hover { background: var(--g-fill); }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
html.ir-glas .dirA-hero-grid > div:first-child { padding: 30px 32px 32px; border-radius: 28px; }
html.ir-glas .dirA-hero h1 { font-size: clamp(40px, 5.4vw, 72px); line-height: .98; letter-spacing: -.04em; margin: 22px 0 22px; }
html.ir-glas .dirA-hero h1 .accent { color: var(--accent-red); }
html.ir-glas .dirA-hero p.lede { margin-bottom: 28px; }
html.ir-glas .dirA-hero-pill {
  margin-bottom: 0; padding: 6px 12px 6px 10px; border: 0; color: var(--ink-2);
  background: var(--g-chip); box-shadow: inset 0 1px 0 var(--g-licht-oben), 0 0 0 1px var(--g-fill-2);
}
html.ir-glas .dirA-os { border-radius: 28px; padding: 14px; }
html.ir-glas .dirA-os-bar { color: var(--ink-2); border-bottom-color: var(--g-fill-2); }
html.ir-glas .dirA-os-bar .lights span:nth-child(1) { background: #0E0E10; }
html.ir-glas .dirA-os-bar .lights span:nth-child(2) { background: #DC2626; }
html.ir-glas .dirA-os-bar .lights span:nth-child(3) { background: #F4B83C; }
html.ir-glas .dirA-app {
  background: var(--g-fill); border: 0; border-radius: 18px; color: var(--ink);
  transition: transform .4s var(--g-feder), background-color .25s var(--g-sanft);
}
html.ir-glas .dirA-app:hover { transform: translateY(-2px); background: var(--g-fill-2); }
html.ir-glas .dirA-app.soon { opacity: 1; }
html.ir-glas .dirA-app.live { background: var(--g-chip); box-shadow: inset 0 0 0 1.5px var(--accent-gold), 0 8px 20px -12px var(--g-schatten-fern); }
html.ir-glas .dirA-app.live::after, html.ir-glas .dirA-app.soon::after {
  top: 11px; right: 11px; padding: 3px 7px; border: 0; border-radius: 999px; font-size: 9px;
}
html.ir-glas .dirA-app.live::after { background: rgba(22,163,74,.14); color: var(--gs-gruen-text); }
html.ir-glas .dirA-app.soon::after { background: var(--gold-tint); color: var(--gold-ink); }
html.ir-glas .dirA-app-icon { background: var(--g-fill-2); color: var(--ink-2); border-radius: 11px; }
html.ir-glas .dirA-app.live .dirA-app-icon { background: var(--accent-gold); color: #0E0E10; }
html.ir-glas .dirA-app-name { color: var(--ink); font-weight: 600; }
html.ir-glas .dirA-app-desc { color: var(--ink-3); }
@media (prefers-color-scheme: dark) {
  html.ir-glas:not([data-ir-thema="hell"]) .dirA-os-bar .lights span:nth-child(1) { background: #4A4A52; }
}
html.ir-glas[data-ir-thema="dunkel"] .dirA-os-bar .lights span:nth-child(1) { background: #4A4A52; }

/* ── Erklärfilm im Glasrahmen ─────────────────────────────────────────── */
html.ir-glas .dirA-film-rahmen { border-radius: 28px; padding: 14px 14px 16px; }
html.ir-glas .dirA-film-rahmen > div:first-child { margin-left: 6px; }
html.ir-glas .dirA-film-rahmen figcaption { padding-inline: 6px; color: var(--ink-3) !important; }

/* ── Abschnittsköpfe und Bänder ───────────────────────────────────────── */
html.ir-glas .dirA-sec-head { padding: 26px 30px; border-radius: 26px; margin-bottom: 24px; gap: 32px; }
html.ir-glas .dirA-sec-head h2 { letter-spacing: -.03em; }
html.ir-glas .dirA-section.alt, html.ir-glas .dirA-section.dark,
html.ir-glas .dirA-hiw-section, html.ir-glas .dirA-trust-section, html.ir-glas .dirA-contrast-section,
html.ir-glas .dirA-credibility-section {
  background: transparent; border-top: 0; border-bottom: 0; color: var(--ink);
}
html.ir-glas .dirA-secno { color: var(--ink-3); }
/* Ruhigerer Takt als klassisch (96 px): Die Glasflächen trennen die Abschnitte schon selbst. */
html.ir-glas .dirA-section { padding-block: clamp(36px, 5vw, 64px); }
html.ir-glas .dirA-partner-section, html.ir-glas .dirA-hiw-section, html.ir-glas .dirA-trust-section,
html.ir-glas .dirA-contrast-section, html.ir-glas .dirA-credibility-section { padding-block: clamp(32px, 4.5vw, 56px); }
html.ir-glas .dirA-secno::before { background: var(--ink-3); }

/* ── Partner und „So funktioniert es" ─────────────────────────────────── */
html.ir-glas .dirA-partner-header { padding: 18px 24px; border-radius: 22px; margin-bottom: 16px; }
html.ir-glas .dirA-partner-hint { color: var(--ink-2); }
html.ir-glas .dirA-partner-grid, html.ir-glas .dirA-hiw-grid, html.ir-glas .dirA-trust-grid { gap: 14px; }
html.ir-glas .dirA-hiw-grid { margin-top: 0; }
html.ir-glas .dirA-partner-card, html.ir-glas .dirA-hiw-card, html.ir-glas .dirA-trust-card { border-radius: 22px; transition: transform .45s var(--g-feder); }
html.ir-glas .dirA-partner-card:hover { box-shadow: inset 0 1px 0 var(--g-licht-oben), 0 1px 2px var(--g-schatten-nah), 0 24px 44px -18px var(--g-schatten-fern); transform: translateY(-3px); }
html.ir-glas .dirA-partner-card.live { box-shadow: inset 0 0 0 1.5px var(--accent-gold), inset 0 1px 0 var(--g-licht-oben), 0 1px 2px var(--g-schatten-nah), 0 18px 40px -18px var(--g-schatten-fern); }
html.ir-glas .dirA-partner-icon, html.ir-glas .dirA-trust-icon { background: var(--g-fill); border: 0; color: var(--ink); border-radius: 13px; }
html.ir-glas .dirA-partner-card.live .dirA-partner-icon { background: var(--accent-gold); color: #0E0E10; }
html.ir-glas .dirA-partner-status { border: 0; }
html.ir-glas .dirA-partner-status--live { background: rgba(22,163,74,.14); color: var(--gs-gruen-text); }
html.ir-glas .dirA-partner-status--soon { background: var(--gold-tint); color: var(--gold-ink); }
html.ir-glas .dirA-partner-partner { color: var(--ink-3); }
html.ir-glas .dirA-hiw-num { color: var(--red-ink); display: inline-flex; align-items: center; gap: 8px; }
html.ir-glas .dirA-hiw-num::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-red); box-shadow: 0 0 0 4px rgba(220,38,38,.16);
}

/* ── Ablauf: dickes Glas statt schwarzem Band, Knoten wie der Verfahrensstand im Cockpit ── */
html.ir-glas .dirA-ablauf-section {
  /* z-index: Der aufgeklappte Hinweis ragt unten hinaus und muss über dem nächsten Abschnitt liegen. */
  z-index: 2;
  margin: 16px clamp(16px, 4vw, 56px); border-radius: 34px; color: var(--ink);
  padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px) clamp(32px, 4vw, 48px);
}
html.ir-glas .dirA-ablauf-head { margin-bottom: 56px; }
html.ir-glas .dirA-ablauf-head .dirA-secno { color: var(--ink-3); }
html.ir-glas .dirA-ablauf-head .dirA-secno::before { background: var(--ink-3); }
html.ir-glas .dirA-ablauf-head h2 { color: var(--ink); }
html.ir-glas .dirA-ablauf-head p { color: var(--ink-2); }
html.ir-glas .dirA-ablauf-tag { color: var(--ink-3); }
html.ir-glas .dirA-ablauf-marker-dot-col::before,
html.ir-glas .dirA-ablauf-marker-dot-col::after { background: var(--g-fill-2); }
html.ir-glas .dirA-ablauf-marker:nth-child(1) .dirA-ablauf-marker-dot-col::after,
html.ir-glas .dirA-ablauf-marker:nth-child(2) .dirA-ablauf-marker-dot-col::before,
html.ir-glas .dirA-ablauf-marker:nth-child(2) .dirA-ablauf-marker-dot-col::after,
html.ir-glas .dirA-ablauf-marker.highlight .dirA-ablauf-marker-dot-col::before { background: var(--ink); opacity: .55; }
html.ir-glas .dirA-ablauf-marker.highlight .dirA-ablauf-marker-dot-col::after,
html.ir-glas .dirA-ablauf-marker.diamond .dirA-ablauf-marker-dot-col::before { background: var(--accent-red); opacity: .7; }
html.ir-glas .dirA-ablauf-dot {
  width: 18px; height: 18px; background: var(--bg); border: 2px solid var(--ink); margin-top: 2px;
}
html.ir-glas .dirA-ablauf-marker:nth-child(4) .dirA-ablauf-dot,
html.ir-glas .dirA-ablauf-marker:nth-child(5) .dirA-ablauf-dot { border-color: var(--ink-3); }
html.ir-glas .dirA-ablauf-marker.highlight .dirA-ablauf-dot {
  background: var(--accent-red); border-color: var(--accent-red); box-shadow: 0 0 0 7px rgba(220,38,38,.18);
}
html.ir-glas .dirA-ablauf-marker.diamond .dirA-ablauf-dot { background: var(--bg); border-color: var(--ink); }
html.ir-glas .dirA-ablauf-marker.dashed .dirA-ablauf-dot { background: transparent; border: 1.5px dashed var(--ink-3); }
html.ir-glas .dirA-ablauf-title { color: var(--ink); font-weight: 600; }
html.ir-glas .dirA-ablauf-marker.dashed .dirA-ablauf-title { color: var(--ink-2); }
html.ir-glas .dirA-ablauf-info-btn {
  width: 24px; height: 24px; border: 0; background: var(--g-fill); color: var(--ink-2); font-style: normal; font-size: 11px; font-weight: 600;
}
html.ir-glas .dirA-ablauf-info-btn:hover,
html.ir-glas .dirA-ablauf-info-btn:focus-visible,
html.ir-glas .dirA-ablauf-info-btn[aria-expanded="true"] { background: var(--g-knopf); color: var(--g-knopf-text); border: 0; }
html.ir-glas .dirA-ablauf-info-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
html.ir-glas .dirA-ablauf-tooltip { border-radius: 18px; color: var(--ink); font-size: 13.5px; width: 290px; padding: 14px 16px; }
html.ir-glas .dirA-ablauf-duration { border: 0; background: var(--g-fill); color: var(--ink-2); }
html.ir-glas .dirA-ablauf-marker.highlight .dirA-ablauf-duration { background: rgba(220,38,38,.10); color: var(--red-ink); }
html.ir-glas .dirA-ablauf-subtitle { color: var(--ink-2); }
html.ir-glas .dirA-ablauf-subtitle .stopp { color: var(--red-ink); }
html.ir-glas .dirA-ablauf-foot { color: var(--ink-2); font-size: 14px; }
@media (max-width: 820px) {
  html.ir-glas .dirA-ablauf-section { padding: 36px 18px 28px; border-radius: 28px; }
  html.ir-glas .dirA-ablauf-head { margin-bottom: 36px; }
  html.ir-glas .dirA-ablauf-track::before {
    background: linear-gradient(to bottom, var(--ink) 0%, var(--ink) 50%, var(--accent-red) 50%, var(--accent-red) 70%, var(--g-fill-2) 70%);
    opacity: .55;
  }
  html.ir-glas .dirA-ablauf-dot { margin-top: 0; }
  /* Am Handy klappt der Hinweis innen auf (style.responsive.css) — dort ein Chip ohne eigene Unschärfe. */
  html.ir-glas .dirA-ablauf-tooltip { position: static; width: auto; box-shadow: none; padding: 0 14px; }
  html.ir-glas .dirA-ablauf-tooltip::before, html.ir-glas .dirA-ablauf-tooltip::after { display: none; }
  html.ir-glas .dirA-ablauf-tooltip { background: var(--g-chip); }
  html.ir-glas .dirA-ablauf-marker-body:hover .dirA-ablauf-tooltip,
  html.ir-glas .dirA-ablauf-marker-body:focus-within .dirA-ablauf-tooltip,
  html.ir-glas .dirA-ablauf-tooltip.open { padding: 12px 14px; }
}

/* ── Kontrast „bisher / mit Innovation Republic" ──────────────────────── */
html.ir-glas .dirA-contrast-section h2 { padding: 22px 28px; border-radius: 26px; margin-bottom: 16px; }
html.ir-glas .dirA-contrast-table { border-radius: 30px; }
html.ir-glas .dirA-contrast-head span:first-child { color: var(--ink-3); background: var(--g-fill); }
html.ir-glas .dirA-contrast-head span:last-child { color: var(--red-ink); background: var(--g-chip); }
html.ir-glas .dirA-contrast-row { border-top-color: var(--g-fill-2); }
html.ir-glas .dirA-contrast-cell.before { color: var(--ink-3); background: var(--g-fill); }
html.ir-glas .dirA-contrast-cell.before::before { content: "–"; color: var(--ink-3); }
html.ir-glas .dirA-contrast-cell.after { color: var(--ink); background: var(--g-chip); }
html.ir-glas .dirA-contrast-cell.after::before { color: var(--gs-gruen-text); font-weight: 700; }
@media (max-width: 820px) {
  html.ir-glas .dirA-contrast-cell.before { border-bottom-color: var(--g-fill-2); }
}

/* ── InnovationOS ─────────────────────────────────────────────────────── */
html.ir-glas .dirA-ios-section { margin: 16px clamp(16px, 4vw, 56px); border-radius: 34px; overflow: visible; }
html.ir-glas .dirA-ios-inner { padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px); }
html.ir-glas .dirA-ios-text h2 { color: var(--ink); font-size: clamp(30px, 3.8vw, 46px); line-height: 1.04; letter-spacing: -.03em; font-weight: 500; }
html.ir-glas .dirA-ios-hub {
  background: var(--g-chip); border: 0; border-radius: 26px;
  box-shadow: inset 0 1px 0 var(--g-licht-oben), 0 0 0 1px var(--g-fill-2), 0 18px 34px -18px var(--g-schatten-fern);
}
html.ir-glas .dirA-ios-hub::after { background: var(--g-fill-2); width: 1.5px; }
html.ir-glas .dirA-ios-hub-label { color: var(--ink); font-weight: 600; }
html.ir-glas .dirA-ios-hub-sub { color: var(--ink-3); }
html.ir-glas .dirA-ios-module { background: var(--g-fill); border: 0; border-radius: 16px; }
html.ir-glas .dirA-ios-module.live { background: var(--g-chip); box-shadow: inset 0 0 0 1.5px var(--accent-gold); }
html.ir-glas .dirA-ios-module-name { color: var(--ink); font-weight: 600; }
html.ir-glas .dirA-ios-module-sub { color: var(--ink-3); }
html.ir-glas .dirA-ios-module.live .dirA-ios-module-sub { color: var(--gold-ink); }

/* ── Zielgruppen, Vertrauen, Gemeinnützig, Wer dahinter steht ─────────── */
html.ir-glas .dirA-persona { border-radius: 22px; }
html.ir-glas .dirA-persona .tag { color: var(--ink-2); }
html.ir-glas .dirA-persona .tag .sq { border-radius: 50%; }
html.ir-glas .dirA-persona li { border-top-color: var(--g-fill-2); }
html.ir-glas .dirA-persona li::before { color: var(--red-ink); }
html.ir-glas .dirA-trust-title { color: var(--ink); }
html.ir-glas .dirA-nonprofit-callout { border-left: 0; border-radius: 30px; padding: 30px 34px; }
html.ir-glas .dirA-nonprofit-callout h3::before {
  content: "gG"; display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 12px; vertical-align: -9px;
  border-radius: 11px; background: var(--accent-gold); color: #0E0E10; font-family: var(--f-mono); font-size: 12px; font-weight: 700;
}
html.ir-glas .dirA-credibility-inner { padding: clamp(26px, 4vw, 44px) clamp(20px, 4vw, 40px); border-radius: 30px; }
html.ir-glas .dirA-credibility-proof {
  border: 0; background: var(--g-chip); border-radius: 18px;
  box-shadow: inset 0 1px 0 var(--g-licht-oben), 0 0 0 1px var(--g-fill-2);
}
html.ir-glas .dirA-credibility-trager { color: var(--ink-3); }

/* ── Häufige Fragen ───────────────────────────────────────────────────── */
html.ir-glas .dirA-frage-karte { border: 0; border-radius: 22px; }
html.ir-glas .dirA-frage-aufruf { border: 0; border-radius: 24px; padding: 18px 18px 18px 24px; }

/* ── Schluss-Aufruf ───────────────────────────────────────────────────── */
html.ir-glas .dirA-final-cta {
  margin: 16px clamp(16px, 4vw, 56px) 0; border-radius: 36px;
  padding: clamp(30px, 5vw, 56px) clamp(20px, 4vw, 48px);
}
html.ir-glas .dirA-final-cta-text h2 { color: var(--ink); }
html.ir-glas .dirA-final-cta-text p { color: var(--ink-2); }
html.ir-glas .dirA-final-cta-nl {
  background: var(--g-chip); border: 0; border-radius: 24px;
  box-shadow: inset 0 1px 0 var(--g-licht-oben), 0 0 0 1px var(--g-fill-2);
}
html.ir-glas .dirA-final-cta-nl-label { color: var(--gold-ink); }
html.ir-glas .dirA-final-cta-nl-sub { color: var(--ink-2); }
html.ir-glas .dirA .dirA-nl-input {
  background: var(--g-fill); border: 0; border-radius: 999px; color: var(--ink); padding: 12px 16px;
  box-shadow: inset 0 0 0 1px var(--g-fill-2);
}
html.ir-glas .dirA-nl-input::placeholder { color: var(--ink-3); }
html.ir-glas .dirA-nl-input:focus { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
html.ir-glas .dirA-nl-fine { color: var(--ink-3); }
html.ir-glas .dirA-nl-error { color: var(--red-ink); }
html.ir-glas .dirA-nl-success { color: var(--gs-gruen-text); }

/* ── Fußzeile ─────────────────────────────────────────────────────────── */
html.ir-glas .dirA-footer {
  margin: clamp(32px, 5vw, 56px) clamp(16px, 4vw, 56px) 24px; border-radius: 32px; color: var(--ink-2);
  padding: clamp(28px, 4vw, 44px) clamp(22px, 4vw, 44px) 24px;
}
html.ir-glas .dirA-footer .top { border-bottom-color: var(--g-fill-2); padding-bottom: 32px; }
html.ir-glas .dirA-footer h5 { color: var(--ink-3); }
html.ir-glas .dirA-footer ul a { color: var(--ink); }
html.ir-glas .dirA-footer ul a:hover { color: var(--red-ink); }
html.ir-glas .dirA-footer .brand-block p { color: var(--ink-2); }
html.ir-glas .dirA-footer .bottom { color: var(--ink-3); padding-top: 20px; }
html.ir-glas .dirA-footer .bottom a { color: var(--ink-2); }
html.ir-glas .dirA-footer .bottom a:hover { color: var(--red-ink); }

/* ── Unterseiten ──────────────────────────────────────────────────────── */
html.ir-glas .dirA-pagehead {
  margin: 20px clamp(16px, 4vw, 56px) 0; border: 0; border-radius: 30px;
  padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 48px);
}
html.ir-glas .dirA-breadcrumb, html.ir-glas .dirA-breadcrumb a { color: var(--ink-3); }
html.ir-glas .dirA-pagehead p:empty { display: none; }
html.ir-glas .dirA-pagehead h1 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
/* Lange Einzelwörter („Datenschutzerklärung“) passen am Handy ohne Trennung: Überschrift skaliert mit der Breite. */
@media (max-width: 480px) { html.ir-glas .dirA-pagehead h1 { font-size: clamp(28px, 8vw, 44px); } }
html.ir-glas .dirA-stats { border: 0; border-radius: 26px; }
html.ir-glas .dirA-page > .dirA-stats { margin: 16px clamp(16px, 4vw, 56px) 0; }
html.ir-glas .dirA-stat .num .unit, html.ir-glas .dirA-stat .label { color: var(--ink-3); }
html.ir-glas .dirA-process { border: 0; border-radius: 26px; }
html.ir-glas .dirA-step .num, html.ir-glas .dirA-step .tool { color: var(--ink-3); }
html.ir-glas .dirA-tool-card { border: 0; border-radius: 22px; }
html.ir-glas .dirA-tool-card.soon .name, html.ir-glas .dirA-tool-card.soon .desc { opacity: .78; }
html.ir-glas .dirA-tool-card .icon { background: var(--g-knopf); color: var(--g-knopf-text); border-radius: 13px; }
html.ir-glas .dirA-tool-card .badge { border-radius: 999px; padding: 3px 8px; }
html.ir-glas .dirA-tool-card .badge.live { background: var(--accent-gold); color: #0E0E10; }
html.ir-glas .dirA-tool-card .badge.soon { border: 0; background: var(--gold-tint); color: var(--gold-ink); }
html.ir-glas .dirA-tool-card .placeholder { color: var(--ink-3); }
html.ir-glas .dirA-tier { border: 0; border-radius: 22px; }
html.ir-glas .dirA-tier.featured {
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--accent-gold), inset 0 1px 0 var(--g-licht-oben), 0 1px 2px var(--g-schatten-nah), 0 18px 40px -18px var(--g-schatten-fern);
}
html.ir-glas .dirA-tier.featured h3, html.ir-glas .dirA-tier.featured .price { color: var(--ink); }
html.ir-glas .dirA-tier.featured p { color: var(--ink-2); }
html.ir-glas .dirA-tier.featured li { color: var(--ink); border-color: var(--g-fill-2); }
html.ir-glas .dirA-tier .label, html.ir-glas .dirA-tier .price .unit { color: var(--ink-3); }
html.ir-glas .dirA-tier li { border-top-color: var(--g-fill-2); }
html.ir-glas .dirA-tier li::before { color: var(--gold-ink); }
html.ir-glas .dirA-gs-karte--gold {
  box-shadow: inset 4px 0 0 var(--accent-gold), inset 0 1px 0 var(--g-licht-oben), 0 1px 2px var(--g-schatten-nah), 0 18px 40px -18px var(--g-schatten-fern);
}
html.ir-glas .dirA-gs-text { padding: 14px 18px; border-radius: 18px; }
html.ir-glas .dirA-kontakt-raster { padding: clamp(24px, 4vw, 44px); border-radius: 30px; }
html.ir-glas .dirA-field label { color: var(--ink-3); }
html.ir-glas .dirA-field input, html.ir-glas .dirA-field textarea, html.ir-glas .dirA-field select { border-radius: 12px; }
html.ir-glas .dirA-cta-strip { border-radius: 32px; color: var(--ink); }
html.ir-glas .dirA-cta-strip h2 { color: var(--ink); }
html.ir-glas .dirA-cta-strip p { color: var(--ink-2); }
html.ir-glas .dirA-film-rahmen video { background: var(--bg-elev) !important; }

/* ── Rechtsseiten: langer Text auf dickem Glas ────────────────────────── */
html.ir-glas .dirA-legal { padding: clamp(24px, 4vw, 44px); border-radius: 30px; color: var(--ink); }
html.ir-glas .dirA-legal a { color: var(--ink); }
html.ir-glas .dirA-legal tr { border-bottom-color: var(--g-fill-2) !important; }
html.ir-glas .dirA-legal tr:first-child { border-bottom-color: var(--ink-3) !important; }
html.ir-glas .dirA-legal table { display: block; overflow-x: auto; }
html.ir-glas .dirA-gs-hinweis { margin: 12px clamp(16px, 4vw, 56px) 0; border-radius: 999px; }

/* ── Blog ─────────────────────────────────────────────────────────────── */
html.ir-glas .dirA-blog-header {
  width: calc(100% - 32px); margin: 20px auto 0; padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 40px);
  border-radius: 30px;
}
html.ir-glas .dirA-blog-header h1, html.ir-glas .dirA-blog-card-body h2, html.ir-glas .dirA-blog-card-cta,
html.ir-glas .dirA-blog-post-header h1, html.ir-glas .dirA-blog-post-body h2, html.ir-glas .dirA-blog-post-body h3,
html.ir-glas .dirA-blog-post-body strong, html.ir-glas .dirA-blog-post-body a,
html.ir-glas .dirA-blog-breadcrumb a:hover { color: var(--ink); }
html.ir-glas .dirA-blog-header p, html.ir-glas .dirA-blog-card-body p, html.ir-glas .dirA-blog-post-lead { color: var(--ink-2); }
html.ir-glas .dirA-blog-post-body { color: var(--ink); }
html.ir-glas .dirA-blog-card-meta, html.ir-glas .dirA-blog-breadcrumb, html.ir-glas .dirA-blog-breadcrumb a,
html.ir-glas .dirA-blog-post-meta, html.ir-glas .dirA-blog-breadcrumb span:not(:last-child) { color: var(--ink-3); }
html.ir-glas .dirA-blog-grid { gap: 14px; }
html.ir-glas .dirA-blog-card { border: 0; border-radius: 22px; }
html.ir-glas .dirA-blog-card:hover {
  box-shadow: inset 0 1px 0 var(--g-licht-oben), 0 1px 2px var(--g-schatten-nah), 0 24px 44px -18px var(--g-schatten-fern);
}
html.ir-glas .dirA-blog-card-cover { margin: 8px 8px 0; border-radius: 16px; }
html.ir-glas .dirA-blog-post {
  width: calc(100% - 32px); margin: 20px auto 0; padding: clamp(24px, 5vw, 52px); border-radius: 30px;
}
html.ir-glas .dirA-blog-post-header, html.ir-glas .dirA-blog-post-footer { border-color: var(--g-fill-2); }

/* ── Innovations-Check: schwebender Knopf und Fenster ─────────────────── */
html.ir-glas .dirA-check-pill { border: 0; color: var(--ink); font-weight: 600; }
html.ir-glas .dirA-check-pill.primary, html.ir-glas .dirA-check-pill.primary:hover { background: transparent; color: var(--ink); }
html.ir-glas .dirA-check-pill.primary:hover { transform: translateY(-1px); }
html.ir-glas .dirA-check-pill.secondary { background: transparent; color: var(--ink); }
html.ir-glas .dirA-check-pill .small { color: var(--ink-3); border-left-color: var(--g-fill-2); }
@media (max-width: 640px) { html.ir-glas .dirA-check-pill .small { display: none; } }
html.ir-glas .dirA-check-pill-wrap .dirA-chevron span:nth-child(1),
html.ir-glas .dirA-check-modal .dirA-chevron span:nth-child(1) { background: #0E0E10; }
/* Schleier wie bei den Cockpit-Dialogen. Er ist Backdrop-Wurzel für das Fenster — das dicke Glas bricht deshalb
   nur den Schleier, das reicht für ein ruhiges Bild. */
html.ir-glas .dirA-check-overlay { background: var(--g-schleier); -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); }
html.ir-glas .dirA-check-modal { border-radius: 28px; }
html.ir-glas .dirA-check-head, html.ir-glas .dirA-check-progress, html.ir-glas .dirA-check-foot { border-color: var(--line); }
html.ir-glas .dirA-check-progress { background: var(--g-fill); }
html.ir-glas .dirA-check-close { border: 0; background: var(--g-fill); }
html.ir-glas .dirA-check-close:hover { background: var(--g-fill-2); }
html.ir-glas .dirA-check-chip, html.ir-glas .dirA-check-chip:hover,
html.ir-glas .dirA-check-option, html.ir-glas .dirA-check-dim,
html.ir-glas .dirA-check-roadmap-card, html.ir-glas .dirA-check-result-next-card {
  background: var(--g-chip); border-color: var(--g-fill-2); border-radius: 16px; color: var(--ink);
}
html.ir-glas .dirA-check-chip.active, html.ir-glas .dirA-check-option.active, html.ir-glas .dirA-check-tick.active {
  background: var(--g-knopf); border-color: var(--g-knopf); color: var(--g-knopf-text);
}
html.ir-glas .dirA-check-tick.active .lbl, html.ir-glas .dirA-check-option.active .d { color: var(--g-knopf-text); opacity: .85; }
html.ir-glas .dirA-check-tick { border-color: var(--g-fill-2); border-radius: 12px; }
html.ir-glas .dirA-check-progress-bar span { background: var(--g-fill-2); }
html.ir-glas .dirA-check-progress-bar span.fill { background: var(--ink); }
/* Die zwei dunklen Kästen im Ergebnis bleiben dunkel — in beiden Themen, mit heller Schrift wie bisher. */
html.ir-glas .dirA-check-result-capture { background: #16161A; }
html.ir-glas .dirA-check-cockpit { background: #16161A; }
html.ir-glas .dirA-check-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { border-radius: 12px; }

/* ── Öffentliche Challenge-Seite (challenge.jsx) ──────────────────────── */
html.ir-glas .dirA-chg-seite { color: var(--ink); padding: 24px 16px 40px; }
html.ir-glas .dirA-chg { border-radius: 30px; padding: clamp(24px, 5vw, 44px) !important; }
html.ir-glas .dirA-chg-thema {
  display: inline-flex; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: var(--g-fill); color: var(--ink); cursor: pointer; align-items: center; justify-content: center;
}
html.ir-glas .dirA-chg-thema svg { width: 15px; height: 15px; }
html.ir-glas .dirA-chg-verlauf .dirA-zs-name { color: var(--ink); }

/* ── Barrierefreiheit ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.ir-glas .dirA-btn, html.ir-glas .dirA-app, html.ir-glas .dirA-partner-card,
  html.ir-glas .dirA-blog-card, html.ir-glas .dirA-check-pill { transition: none; }
  html.ir-glas .dirA-app:hover, html.ir-glas .dirA-partner-card:hover, html.ir-glas .dirA-blog-card:hover,
  html.ir-glas .dirA-btn:active:not(:disabled) { transform: none; }
}
/* Weniger Transparenz / mehr Kontrast: undurchsichtige Flächen statt Glas (wie im Cockpit). */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html.ir-glas .dirA-nav::after,
  html.ir-glas .dirA-hero-grid > div:first-child::after,
  html.ir-glas .dirA-os::after,
  html.ir-glas .dirA-film-rahmen::after,
  html.ir-glas .dirA-partner-header::after,
  html.ir-glas .dirA-partner-card::after,
  html.ir-glas .dirA-sec-head::after,
  html.ir-glas .dirA-hiw-card::after,
  html.ir-glas .dirA-contrast-section h2::after,
  html.ir-glas .dirA-contrast-table::after,
  html.ir-glas .dirA-ios-section::after,
  html.ir-glas .dirA-persona::after,
  html.ir-glas .dirA-trust-card::after,
  html.ir-glas .dirA-credibility-inner::after,
  html.ir-glas .dirA-frage-karte::after,
  html.ir-glas .dirA-frage-aufruf::after,
  html.ir-glas .dirA-footer::after,
  html.ir-glas .dirA-pagehead::after,
  html.ir-glas .dirA-stats::after,
  html.ir-glas .dirA-process::after,
  html.ir-glas .dirA-tool-card::after,
  html.ir-glas .dirA-tier::after,
  html.ir-glas .dirA-gs-karte::after,
  html.ir-glas .dirA-gs-text::after,
  html.ir-glas .dirA-kontakt-raster::after,
  html.ir-glas .dirA-blog-header::after,
  html.ir-glas .dirA-blog-card::after,
  html.ir-glas .dirA-check-pill::after,
  html.ir-glas .dirA-ablauf-section::after,
  html.ir-glas .dirA-nonprofit-callout::after,
  html.ir-glas .dirA-final-cta::after,
  html.ir-glas .dirA-cta-strip::after,
  html.ir-glas .dirA-legal::after,
  html.ir-glas .dirA-blog-post::after,
  html.ir-glas .dirA-check-modal::after,
  html.ir-glas .dirA-chg::after,
  html.ir-glas .dirA-ablauf-tooltip::after,
  html.ir-glas .dirA-nav-links::after {
    background: var(--bg-elev); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  html.ir-glas .dirA-nav::before, html.ir-glas .dirA-sec-head::before, html.ir-glas .dirA-partner-card::before,
  html.ir-glas .dirA-hiw-card::before, html.ir-glas .dirA-persona::before, html.ir-glas .dirA-trust-card::before,
  html.ir-glas .dirA-frage-karte::before, html.ir-glas .dirA-footer::before, html.ir-glas .dirA-pagehead::before,
  html.ir-glas .dirA-tier::before, html.ir-glas .dirA-gs-karte::before, html.ir-glas .dirA-blog-card::before,
  html.ir-glas .dirA-ablauf-section::before, html.ir-glas .dirA-final-cta::before, html.ir-glas .dirA-legal::before,
  html.ir-glas .dirA-blog-post::before, html.ir-glas .dirA-check-modal::before, html.ir-glas .dirA-ios-section::before {
    background: var(--ink); padding: 1.5px;
  }
  html.ir-glas .dirA { --ink-3: var(--ink-2); }
}