/* directionA/glas.css
 * Innovation Republic — Glas-Design des Cockpits (seit 24.10.2026 Vorgabe, Wunsch Clemens)
 *
 * Vorlage: Liquid-Glass-Mockup vom 24.10.2026 (https://claude.ai/artifact/BKyk1dqEKpvwPiVuMyz2xX).
 * Alles hier greift NUR unter `html.ir-glas` (gesetzt von useGlasDesign, glas-design.jsx; Vorgabe, abschaltbar per ?design=klassisch).
 * Ohne die Klasse ist diese Datei wirkungslos und das Cockpit sieht aus wie bisher.
 *
 * Hell/Dunkel: `html[data-ir-thema="hell"|"dunkel"]`, sonst die Systemeinstellung.
 * Die dunklen Werte stehen zweimal (Media-Query und Attribut) — dieselbe Liste,
 * wer eine ändert, ändert beide.
 *
 * Lesbarkeit vor Effekt: Schrift auf Glas ist gegenüber den CI-Werten abgedunkelt
 * (WCAG AA); wer weniger Transparenz oder mehr Kontrast eingestellt hat, bekommt
 * undurchsichtige Flächen (ganz unten).
 */

/* ── Farben und Material ───────────────────────────────────────────────── */
html.ir-glas .dirA, html.ir-glas .dirA-admin-glas {
  /* CI-Werte aus style.css bleiben; nur die Schriftgrautöne werden für Glas dunkler. */
  --ink-3: #5E5E66;
  --red-ink: #B91C1C;
  --gold-ink: #7A520C;
  --gold-tint: rgba(244,184,60,.22);

  --g-glas: rgba(255,255,255,.50);
  --g-glas-dick: rgba(250,249,246,.80);   /* 80 % deckend wie im Dunkelmodus (Clemens 24.10.2026) */
  --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;

  --g-fleck-rot: rgba(220,38,38,.30);
  --g-fleck-gold: rgba(244,184,60,.55);
  --g-fleck-tinte: rgba(14,14,16,.10);
  --g-winkel-schwarz: #0E0E10;

  --g-feder: linear(0, .12 3%, .42 9%, .78 16%, .97 22%, 1.03 28%, 1.025 34%, 1.004 46%, .998 60%, 1);
  --g-sanft: cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark) {
  html.ir-glas:not([data-ir-thema="hell"]) .dirA, html.ir-glas:not([data-ir-thema="hell"]) .dirA-admin-glas {
    --bg: #0E0E10; --bg-elev: #18181C; --bg-deep: #050506;
    --ink: #F6F5F1; --ink-2: #CBCAC4; --ink-3: #A3A29C; --ink-4: #7C7B76;
    --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.16);
    --red-ink: #FF7A7A; --gold-ink: #F4B83C; --gold-tint: rgba(244,184,60,.16);
    --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;
    --g-fleck-rot: rgba(220,38,38,.50); --g-fleck-gold: rgba(244,184,60,.30); --g-fleck-tinte: rgba(46,40,60,.55);
    --g-winkel-schwarz: #34343A;
    color-scheme: dark;
  }
}
html.ir-glas[data-ir-thema="dunkel"] .dirA, html.ir-glas[data-ir-thema="dunkel"] .dirA-admin-glas {
  --bg: #0E0E10; --bg-elev: #18181C; --bg-deep: #050506;
  --ink: #F6F5F1; --ink-2: #CBCAC4; --ink-3: #A3A29C; --ink-4: #7C7B76;
  --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.16);
  --red-ink: #FF7A7A; --gold-ink: #F4B83C; --gold-tint: rgba(244,184,60,.16);
  --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;
  --g-fleck-rot: rgba(220,38,38,.50); --g-fleck-gold: rgba(244,184,60,.30); --g-fleck-tinte: rgba(46,40,60,.55);
  --g-winkel-schwarz: #34343A;
  color-scheme: dark;
}
/* Der Seitengrund unter allem (body trägt sonst #F6F5F1 aus dem Seitenkopf). */
html.ir-glas, html.ir-glas body { background: #F6F5F1; }
@media (prefers-color-scheme: dark) {
  html.ir-glas:not([data-ir-thema="hell"]), html.ir-glas:not([data-ir-thema="hell"]) body { background: #0E0E10; color-scheme: dark; }
}
html.ir-glas[data-ir-thema="dunkel"], html.ir-glas[data-ir-thema="dunkel"] body { background: #0E0E10; color-scheme: dark; }

/* ── Der farbige Grund ──────────────────────────────────────────────────── */
.dirA-glas-grund { display: none; }
html.ir-glas .dirA-glas-grund {
  display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.dirA-glas-fleck { position: absolute; border-radius: 50%; filter: blur(60px); }
.dirA-glas-fleck--rot   { width: 52vmax; height: 52vmax; left: -14vmax; top: -18vmax; background: var(--g-fleck-rot); }
.dirA-glas-fleck--gold  { width: 46vmax; height: 46vmax; right: -12vmax; top: 6vmax; background: var(--g-fleck-gold); }
.dirA-glas-fleck--tinte { width: 40vmax; height: 40vmax; left: 22vw; bottom: -22vmax; background: var(--g-fleck-tinte); }
.dirA-glas-fleck--gold2 { width: 26vmax; height: 26vmax; left: 4vw; bottom: 6vh; background: var(--g-fleck-gold); opacity: .7; }
.dirA-glas-winkel { position: absolute; right: -6vw; bottom: -4vh; width: min(70vw, 900px); height: auto; opacity: .9; overflow: visible; }
.dirA-glas-winkel-schwarz { stroke: var(--g-winkel-schwarz); }
.dirA-glas-winkel-rot { stroke: #DC2626; }
.dirA-glas-winkel-gold { stroke: #F4B83C; }
.dirA-glas-raster { position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(var(--g-fill-2) 1px, transparent 1.2px); background-size: 22px 22px; }

/* Die Seite wird durchsichtig und bildet einen eigenen Stapel: Ohne den laege
   der Grund (z-index -1) hinter dem Hintergrund der aeusseren .dirA-Huelle und
   waere unsichtbar (so im ersten Pruefbild am 24.10.2026). Popups haengen am
   body und liegen weiterhin darueber. */
html.ir-glas .dirA-ck-page { background: transparent; position: relative; z-index: 0; isolation: isolate; }

/* ── Das Glas-Material ──────────────────────────────────────────────────── *
 * Eine Liste, alle Glasflächen. Randlicht als Verlaufskante (::before), Glanz
 * als ruhender Lichtfleck oben links (::after). */
html.ir-glas .dirA-ck-topbar,
html.ir-glas .dirA-ck-stats,
html.ir-glas .dirA-ck-kachel,
html.ir-glas .dirA-ck-sb-section,
html.ir-glas .dirA-ck-popup,
html.ir-glas .dirA-ck-anb-card,
html.ir-glas .dirA-ck-mkt-card,
html.ir-glas .dirA-ck-mkt-info,
html.ir-glas .dirA-ck-set-card,
html.ir-glas .dirA-ck-modal,
html.ir-glas .dirA-ck-fb-modal,
html.ir-glas .dirA-ck-empty {
  position: relative; isolation: isolate;
  background: var(--g-glas);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  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);
}
html.ir-glas .dirA-ck-topbar::before,
html.ir-glas .dirA-ck-stats::before,
html.ir-glas .dirA-ck-kachel::before,
html.ir-glas .dirA-ck-sb-section::before,
html.ir-glas .dirA-ck-popup::before,
html.ir-glas .dirA-ck-anb-card::before,
html.ir-glas .dirA-ck-mkt-card::before,
html.ir-glas .dirA-ck-mkt-info::before,
html.ir-glas .dirA-ck-set-card::before,
html.ir-glas .dirA-ck-modal::before,
html.ir-glas .dirA-ck-fb-modal::before,
html.ir-glas .dirA-ck-empty::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;
}
html.ir-glas .dirA-ck-topbar::after,
html.ir-glas .dirA-ck-stats::after,
html.ir-glas .dirA-ck-kachel::after,
html.ir-glas .dirA-ck-sb-section::after,
html.ir-glas .dirA-ck-popup::after,
html.ir-glas .dirA-ck-anb-card::after,
html.ir-glas .dirA-ck-mkt-card::after,
html.ir-glas .dirA-ck-mkt-info::after,
html.ir-glas .dirA-ck-set-card::after,
html.ir-glas .dirA-ck-modal::after,
html.ir-glas .dirA-ck-fb-modal::after,
html.ir-glas .dirA-ck-empty::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%);
}
/* Dickeres Glas für das, was über allem liegt. */
html.ir-glas .dirA-ck-popup {
  background: var(--g-glas-dick);
  -webkit-backdrop-filter: blur(36px) saturate(190%);
  backdrop-filter: blur(36px) saturate(190%);
}

/* ── Kopfleiste: schwebend ──────────────────────────────────────────────── */
html.ir-glas .dirA-ck-topbar {
  position: sticky; top: 10px; z-index: 40;
  width: calc(100% - 32px); max-width: 1144px; margin: 10px auto 0;
  padding: 8px 8px 8px 18px; border-radius: 999px; color: var(--ink);
}
/* Das farbige Logo: hell mit schwarzer Schrift, dunkel mit weisser (der schwarze Winkel bleibt schwarz, mit feinem Saum in dunklem Anthrazit #2E2E33). */
.dirA-ck-logo-farbig { display: none; }
html.ir-glas .dirA-ck-topbar-logo-link .dirA-ck-logo-farbig { height: 28px; width: auto; max-width: none; }
html.ir-glas .dirA-ck-logo-farbig--hell { display: block; }
@media (prefers-color-scheme: dark) {
  html.ir-glas:not([data-ir-thema="hell"]) .dirA-ck-logo-farbig--hell { display: none; }
  html.ir-glas:not([data-ir-thema="hell"]) .dirA-ck-logo-farbig--dunkel { display: block; }
}
html.ir-glas[data-ir-thema="dunkel"] .dirA-ck-logo-farbig--hell { display: none; }
html.ir-glas[data-ir-thema="dunkel"] .dirA-ck-logo-farbig--dunkel { display: block; }
html.ir-glas .dirA-ck-topbar-sep { color: var(--ink-3); }
html.ir-glas .dirA-ck-topbar-label { color: var(--ink-2); letter-spacing: .14em; font-weight: 500; }
html.ir-glas .dirA-ck-topbar-user { display: none; }
html.ir-glas .dirA-ck-topbar-right { gap: 6px; }

html.ir-glas .dirA-ck-view-toggle { background: var(--g-fill); border-radius: 999px; padding: 3px; gap: 2px; }
html.ir-glas .dirA-ck-view-toggle-btn {
  color: var(--ink-2); border-radius: 999px; padding: 6px 12px; font-size: 13px;
  transition: background-color .25s var(--g-sanft), color .25s var(--g-sanft), transform .3s var(--g-feder);
}
html.ir-glas .dirA-ck-view-toggle-btn:hover { color: var(--ink); }
html.ir-glas .dirA-ck-view-toggle-btn--active,
html.ir-glas .dirA-ck-view-toggle-btn--active:hover { background: var(--g-knopf); color: var(--g-knopf-text); }
html.ir-glas .dirA-ck-view-toggle-btn:active { transform: scale(.95); }

html.ir-glas .dirA-ck-topbar-knopf {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  border: 0; border-radius: 999px; padding: 8px 14px;
  background: var(--g-fill); color: var(--ink);
  font-family: var(--f-sans); font-size: 13.5px; font-weight: 500;
  transition: background-color .25s var(--g-sanft), transform .35s var(--g-feder);
}
html.ir-glas .dirA-ck-topbar-knopf:hover { background: var(--g-fill-2); }
html.ir-glas .dirA-ck-knopf-symbol { display: inline-block; flex-shrink: 0; }
html.ir-glas .dirA-ck-topbar-knopf:active { transform: scale(.94); transition-duration: .1s; }
html.ir-glas .dirA-ck-topbar-knopf--aktiv { background: var(--g-knopf); color: var(--g-knopf-text); }
html.ir-glas .dirA-ck-topbar-knopf--leise { color: var(--ink-2); }
html.ir-glas .dirA-ck-thema-knopf { display: inline-flex; width: 38px; height: 38px; padding: 0; justify-content: center; }
html.ir-glas .dirA-ck-avatar {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-red));
  color: #0E0E10; font-weight: 600; font-size: 13px;
}
html.ir-glas .dirA-lang.dirA-ck-topbar-lang { background: var(--g-fill); border-color: transparent; color: var(--ink-2); }

/* ── Begrüßung ──────────────────────────────────────────────────────────── */
html.ir-glas .dirA-ck-welcome { padding: 30px 4px 6px; margin-bottom: 26px; }
html.ir-glas .dirA-ck-welcome-title {
  font-size: clamp(34px, 5vw, 56px); line-height: 1.02; letter-spacing: -.035em; font-weight: 600; text-wrap: balance;
}
html.ir-glas .dirA-ck-welcome-hint {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 17px; color: var(--red-ink);
}
html.ir-glas .dirA-ck-welcome-hint::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-red); box-shadow: 0 0 0 4px rgba(220,38,38,.18);
}

/* ── Zähler ─────────────────────────────────────────────────────────────── */
html.ir-glas .dirA-ck-stats { border-radius: 30px; padding: 6px; gap: 6px; overflow: visible; margin-bottom: 34px; }
html.ir-glas .dirA-ck-stat {
  border: 0 !important; border-radius: 24px; padding: 18px 20px 16px;
  transition: background-color .25s var(--g-sanft);
}
html.ir-glas .dirA-ck-stat:hover { background: var(--g-fill); }
html.ir-glas .dirA-ck-stat-val {
  display: flex; align-items: center; gap: 10px;
  font-size: 46px; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  color: var(--ink); margin-bottom: 8px;
}
html.ir-glas .dirA-ck-stat-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
html.ir-glas .dirA-ck-stat-val--gold .dirA-ck-stat-punkt { background: var(--accent-gold); box-shadow: 0 0 0 4px var(--gold-tint); }
html.ir-glas .dirA-ck-stat-val--rot .dirA-ck-stat-punkt { background: var(--accent-red); box-shadow: 0 0 0 4px rgba(220,38,38,.18); }
html.ir-glas .dirA-ck-stat-label { font-size: 11.5px; letter-spacing: .1em; font-weight: 500; }

/* ── Raster und Seitenspalte ────────────────────────────────────────────── */
html.ir-glas .dirA-ck-grid { gap: 28px; }
@media (min-width: 981px) {
  html.ir-glas .dirA-ck-grid:not(.dirA-ck-grid-panel) { grid-template-columns: minmax(0, 1fr) 320px; }
}
html.ir-glas .dirA-ck-sidebar { top: 84px; gap: 14px; }
html.ir-glas .dirA-ck-sb-section { border-radius: 22px; padding: 18px 20px; }
html.ir-glas .dirA-ck-sb-label { font-size: 11.5px; letter-spacing: .1em; font-weight: 500; }
html.ir-glas .dirA-ck-partner-row { border-top-color: var(--g-fill-2); }
html.ir-glas .dirA-ck-sidebar > .dirA-btn-primary {
  border-radius: 20px; padding: 16px 20px; font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  background: var(--g-knopf); color: var(--g-knopf-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 30px -14px var(--g-schatten-fern);
  transition: transform .4s var(--g-feder);
}
html.ir-glas .dirA-ck-sidebar > .dirA-btn-primary:hover { transform: translateY(-2px); }
html.ir-glas .dirA-ck-sidebar > .dirA-btn-primary:active { transform: scale(.97); transition-duration: .1s; }
html.ir-glas .dirA-ck-sb-section .dirA-btn-ghost { border-radius: 999px; border-color: var(--g-fill-2); background: var(--g-chip); }

html.ir-glas .dirA-ck-wandtrenner { font-size: 11.5px; letter-spacing: .1em; font-weight: 500; margin: 6px 4px 12px; }
html.ir-glas .dirA-ck-kachelwand { gap: 14px; }

/* ── Die Kachel ─────────────────────────────────────────────────────────── */
html.ir-glas .dirA-ck-kachel {
  border-radius: 22px; padding: 18px 18px 16px; gap: 10px;
  transition: transform .45s var(--g-feder), box-shadow .3s var(--g-sanft);
}
html.ir-glas .dirA-ck-kachel:hover {
  transform: translateY(-3px) scale(1.012);
  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 24px 46px -18px var(--g-schatten-fern);
}
html.ir-glas .dirA-ck-kachel:active { transform: scale(.975); transition-duration: .12s; }
html.ir-glas .dirA-ck-kachel:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
html.ir-glas .dirA-ck-kachel-titel { font-size: 17.5px; line-height: 1.25; letter-spacing: -.015em; }
html.ir-glas .dirA-ck-kachel-pille {
  gap: 7px; padding: 4px 10px 4px 8px; font-size: 11px;
  background: var(--g-chip); color: var(--ink); border: 0; box-shadow: inset 0 0 0 1px var(--g-fill-2);
}
html.ir-glas .dirA-ck-kachel-pille-punkt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
html.ir-glas .dirA-ck-kachel-pille--verfahren .dirA-ck-kachel-pille-punkt { background: var(--accent-red); box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
html.ir-glas .dirA-ck-kachel-pille--entwurf .dirA-ck-kachel-pille-punkt { background: var(--accent-gold); }
html.ir-glas .dirA-ck-kachel-pille--beendet .dirA-ck-kachel-pille-punkt { background: var(--green); }
/* Abgebrochen bzw. ohne Zuschlag beendet (26.10.2026): Punkt rot, ohne Glimmen. */
html.ir-glas .dirA-ck-kachel-pille--abgebrochen .dirA-ck-kachel-pille-punkt { background: var(--accent-red); box-shadow: none; }
html.ir-glas .dirA-ck-kachel-schritt {
  display: inline; margin-left: auto; font-family: var(--f-mono); font-size: 11.5px;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
/* Hat die Kachel eine Stufe (fremder Bedarf), schiebt die schon nach rechts. */
html.ir-glas .dirA-ck-kachel-stufe + .dirA-ck-kachel-schritt { margin-left: 8px; }
html.ir-glas .dirA-ck-kachel-punkt { margin-left: 8px; }

/* Die Zeitleiste: acht Abschnitte, Farbe je Stand. */
html.ir-glas .dirA-ck-kachel-zeitleiste { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
html.ir-glas .dirA-ck-kachel-segment { height: 5px; border-radius: 3px; background: var(--g-fill-2); }
html.ir-glas .dirA-ck-kachel-segment--erreicht { background: var(--ink); opacity: .55; }
html.ir-glas .dirA-ck-kachel-segment--jetzt { background: var(--accent-red); box-shadow: 0 0 10px rgba(220,38,38,.55); }
html.ir-glas .dirA-ck-kachel-zeitleiste--entwurf .dirA-ck-kachel-segment--jetzt { background: var(--accent-gold); box-shadow: 0 0 10px rgba(244,184,60,.6); }
html.ir-glas .dirA-ck-kachel-zeitleiste--beendet .dirA-ck-kachel-segment { background: var(--green); opacity: .7; }
html.ir-glas .dirA-ck-kachel-zeitleiste--abgebrochen .dirA-ck-kachel-segment--erreicht { opacity: .3; }
html.ir-glas .dirA-ck-kachel-segment--abbruch { background: var(--accent-red); opacity: .55; box-shadow: none; }
html.ir-glas .dirA-zs-abgebrochen { letter-spacing: .01em; }
html.ir-glas .dirA-ck-verfahren .dirA-zs-phase--abgebrochen .dirA-zs-name { color: var(--ck-text-b91c1c, #b91c1c); font-weight: 700; }

html.ir-glas .dirA-ck-kachel-zahlen { display: grid; gap: 2px; font-size: 13.5px; color: var(--ink-2); }
html.ir-glas .dirA-ck-kachel-warte-grund {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; padding: 4px 10px;
  background: var(--gold-tint); color: var(--gold-ink); border: 0;
}
html.ir-glas .dirA-ck-kachel-warte-grund::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-gold); flex-shrink: 0;
}
html.ir-glas .dirA-ck-einladen-knopf { background: var(--g-chip); border-color: var(--g-fill-2); }

/* ── Popup (geöffneter Bedarf) als Glas-Sheet ───────────────────────────── */
html.ir-glas .dirA-ck-popup-hintergrund {
  background: var(--g-schleier);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}
html.ir-glas .dirA-ck-popup { border-radius: 34px; }
html.ir-glas .dirA-ck-popup-kopf { background: transparent; border-bottom-color: var(--g-fill-2); padding: 20px 24px 16px; }
html.ir-glas .dirA-ck-popup-titel { font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.025em; }
html.ir-glas .dirA-ck-popup-schliessen { background: var(--g-fill); border-color: transparent; color: var(--ink); }
html.ir-glas .dirA-ck-popup-schliessen:hover { background: var(--g-fill-2); }
html.ir-glas .dirA-ck-popup-inhalt { padding: 18px 24px 28px; }

/* ── Schmal ─────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  html.ir-glas .dirA-ck-topbar { padding: 6px 6px 6px 14px; border-radius: 26px; }
  html.ir-glas .dirA-ck-stat-val { font-size: 36px; }
  html.ir-glas .dirA-ck-stat { padding: 14px 14px 12px; }
}

/* ── Barrierefreiheit ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.ir-glas .dirA-ck-kachel:hover, html.ir-glas .dirA-ck-kachel:active,
  html.ir-glas .dirA-ck-topbar-knopf:active, html.ir-glas .dirA-ck-view-toggle-btn:active,
  html.ir-glas .dirA-ck-sidebar > .dirA-btn-primary:hover, html.ir-glas .dirA-ck-sidebar > .dirA-btn-primary:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  html.ir-glas .dirA-ck-topbar, html.ir-glas .dirA-ck-stats, html.ir-glas .dirA-ck-kachel,
  html.ir-glas .dirA-ck-sb-section, html.ir-glas .dirA-ck-popup,
  html.ir-glas .dirA-ck-anb-card, html.ir-glas .dirA-ck-mkt-card, html.ir-glas .dirA-ck-mkt-info, html.ir-glas .dirA-ck-set-card, html.ir-glas .dirA-ck-modal, html.ir-glas .dirA-ck-fb-modal, html.ir-glas .dirA-ck-empty {
    background: var(--bg-elev); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html.ir-glas .dirA-ck-topbar::after, html.ir-glas .dirA-ck-stats::after, html.ir-glas .dirA-ck-kachel::after,
  html.ir-glas .dirA-ck-sb-section::after, html.ir-glas .dirA-ck-popup::after { display: none; }
}
@media (prefers-contrast: more) {
  html.ir-glas .dirA-ck-topbar, html.ir-glas .dirA-ck-stats, html.ir-glas .dirA-ck-kachel,
  html.ir-glas .dirA-ck-sb-section, html.ir-glas .dirA-ck-popup,
  html.ir-glas .dirA-ck-anb-card, html.ir-glas .dirA-ck-mkt-card, html.ir-glas .dirA-ck-mkt-info, html.ir-glas .dirA-ck-set-card, html.ir-glas .dirA-ck-modal, html.ir-glas .dirA-ck-fb-modal, html.ir-glas .dirA-ck-empty {
    background: var(--bg-elev); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1.5px var(--ink);
  }
  html.ir-glas .dirA-ck-topbar::before, html.ir-glas .dirA-ck-stats::before, html.ir-glas .dirA-ck-kachel::before,
  html.ir-glas .dirA-ck-sb-section::before, html.ir-glas .dirA-ck-popup::before,
  html.ir-glas .dirA-ck-topbar::after, html.ir-glas .dirA-ck-stats::after, html.ir-glas .dirA-ck-kachel::after,
  html.ir-glas .dirA-ck-sb-section::after, html.ir-glas .dirA-ck-popup::after { display: none; }
}

/* ═══ Phase 2 (24.10.2026): der geöffnete Bedarf und das Handy ═══════════════ */

/* ── Kopf des Bedarfs ───────────────────────────────────────────────────── */
html.ir-glas .dirA-ck-need-desc { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 70ch; }
html.ir-glas .dirA-ck-need-meta { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; }
html.ir-glas .dirA-ck-tag { border-radius: 999px !important; }

/* ── Abschnitte als Glas-Zeilen ─────────────────────────────────────────── */
html.ir-glas .dirA-ck-abschnitte { display: grid; gap: 10px; margin-top: 18px; }
html.ir-glas .dirA-ck-abschnitt {
  border: 0; border-radius: 18px; background: var(--g-fill);
  box-shadow: inset 0 0 0 1px var(--g-fill);
  transition: background-color .2s var(--g-sanft);
}
html.ir-glas .dirA-ck-abschnitt:not(.dirA-ck-abschnitt--offen):hover { background: var(--g-fill-2); }
html.ir-glas .dirA-ck-abschnitt-kopf { padding: 14px 16px; border-radius: 18px; }
html.ir-glas .dirA-ck-abschnitt-titel { font-size: 15px; }
html.ir-glas .dirA-ck-abschnitt-zusatz, html.ir-glas .dirA-ck-abschnitt-grund { font-size: 12.5px; color: var(--ink-3); }
html.ir-glas .dirA-ck-abschnitt--gesperrt { opacity: .75; }
html.ir-glas .dirA-ck-abschnitt--offen { background: transparent; box-shadow: none; }
html.ir-glas .dirA-ck-abschnitt--offen > .dirA-ck-abschnitt-kopf { padding-inline: 4px; }
html.ir-glas .dirA-ck-abschnitt--offen > .dirA-ck-abschnitt-kopf .dirA-ck-abschnitt-titel { font-size: 17px; }
html.ir-glas .dirA-ck-abschnitt-inhalt { padding: 0 0 6px; }

/* ── Verfahrensstand: zwei Spalten ──────────────────────────────────────── *
 * Links der Phasenverlauf, rechts „Nächster Schritt“, Terminplan, Abbruch. */
html.ir-glas .dirA-ck-verfahren {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start;
}
/* Klassisch sind die Huellen `display: contents` (cockpit.css) — hier wieder echte Bloecke. */
html.ir-glas .dirA-ck-verfahren-zeitstrahl, html.ir-glas .dirA-ck-verfahren-schritt,
html.ir-glas .dirA-ck-verfahren-termine, html.ir-glas .dirA-ck-verfahren-abbruch { display: block; }
html.ir-glas .dirA-ck-verfahren-zeitstrahl { grid-column: 1; grid-row: 1 / span 3; }
html.ir-glas .dirA-ck-verfahren-schritt { grid-column: 2; grid-row: 1; }
html.ir-glas .dirA-ck-verfahren-termine { grid-column: 2; grid-row: 2; }
html.ir-glas .dirA-ck-verfahren-abbruch { grid-column: 2; grid-row: 3; }
html.ir-glas .dirA-ck-verfahren-zeitstrahl,
html.ir-glas .dirA-ck-verfahren-schritt,
html.ir-glas .dirA-ck-verfahren-termine {
  background: var(--g-fill); border-radius: 24px; padding: 20px 22px;
  box-shadow: inset 0 0 0 1px var(--g-fill);
  margin: 0 !important; border: 0 !important;
}
html.ir-glas .dirA-ck-verfahren-schritt:empty, html.ir-glas .dirA-ck-verfahren-abbruch:empty { display: none; }
html.ir-glas .dirA-ck-verfahren-abbruch > :first-child { margin-top: 0 !important; }
html.ir-glas .dirA-ck-verfahren-kopf {
  display: block; margin-bottom: 8px;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
html.ir-glas .dirA-ck-verfahren-schritt > p { font-size: 14px !important; line-height: 1.5; }
html.ir-glas .dirA-ck-phasen-knopf {
  margin-top: 6px !important; padding: 11px 18px !important; border-radius: 999px !important;
  font-size: 14.5px !important; font-weight: 600; border: 0 !important;
  background: var(--g-knopf); color: var(--g-knopf-text);
}
html.ir-glas .dirA-ck-phasen-knopf:disabled { background: var(--g-fill-2); color: var(--ink-3); opacity: 1; }
html.ir-glas .dirA-ck-verfahren .dirA-btn-ghost:not(.dirA-ck-phasen-knopf) {
  border-radius: 999px; padding: 10px 18px; font-size: 14px !important; font-weight: 600;
  background: var(--g-chip); border-color: transparent; box-shadow: inset 0 0 0 1px var(--g-fill-2);
}

/* Terminliste */
html.ir-glas .dirA-ck-termin-liste { display: grid; list-style: none; margin: 4px 0 6px; padding: 0; }
html.ir-glas .dirA-ck-termin-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
  padding: 10px 0; border-top: 1px solid var(--g-fill-2); font-size: 14.5px;
}
html.ir-glas .dirA-ck-termin-zeile:first-child { border-top: 0; padding-top: 2px; }
html.ir-glas .dirA-ck-termin-datum { font-family: var(--f-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; }
html.ir-glas .dirA-ck-termin-zeile--jetzt .dirA-ck-termin-datum { color: var(--red-ink); font-weight: 600; }

/* Phasenverlauf als Knoten mit Verbindungslinie (zeitstrahl.jsx hat Inline-Stile, daher !important) */
html.ir-glas .dirA-ck-verfahren .dirA-zs { display: grid; }
html.ir-glas .dirA-ck-verfahren .dirA-zs-phase {
  position: relative; gap: 12px !important; padding: 0 0 14px !important; align-items: flex-start !important;
}
html.ir-glas .dirA-ck-verfahren .dirA-zs-phase:last-child { padding-bottom: 0 !important; }
html.ir-glas .dirA-ck-verfahren .dirA-zs-phase::before {
  content: ""; position: absolute; left: 12px; top: 26px; bottom: 0; width: 2px; border-radius: 1px; background: var(--g-fill-2);
}
html.ir-glas .dirA-ck-verfahren .dirA-zs-phase:last-child::before { display: none; }
html.ir-glas .dirA-ck-verfahren .dirA-zs-phase--erledigt::before { background: var(--ink-3); opacity: .55; }
html.ir-glas .dirA-ck-verfahren .dirA-zs-punkt {
  width: 26px !important; height: 26px !important; margin-top: 0 !important; opacity: 1 !important;
  display: grid; place-items: center; border: 0 !important;
  background: var(--g-chip) !important; box-shadow: inset 0 0 0 1.5px var(--g-fill-2);
}
html.ir-glas .dirA-ck-verfahren .dirA-zs-phase--erledigt .dirA-zs-punkt { background: var(--ink) !important; box-shadow: none; }
html.ir-glas .dirA-ck-verfahren .dirA-zs-phase--erledigt .dirA-zs-punkt::after {
  content: ""; width: 10px; height: 5px; margin-top: -3px;
  border-left: 2.5px solid var(--bg); border-bottom: 2.5px solid var(--bg); transform: rotate(-45deg);
}
html.ir-glas .dirA-ck-verfahren .dirA-zs-phase--laeuft .dirA-zs-punkt {
  background: var(--accent-red) !important; box-shadow: 0 0 0 5px rgba(220,38,38,.18), 0 0 18px rgba(220,38,38,.5);
}
html.ir-glas .dirA-ck-verfahren .dirA-zs-phase--laeuft .dirA-zs-punkt::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff;
}
html.ir-glas .dirA-ck-verfahren .dirA-zs-text { padding-top: 2px; }
html.ir-glas .dirA-ck-verfahren .dirA-zs-name { font-size: 15.5px !important; font-weight: 500 !important; color: var(--ink) !important; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
html.ir-glas .dirA-ck-verfahren .dirA-zs-name > span { opacity: 1 !important; }
html.ir-glas .dirA-ck-verfahren .dirA-zs-phase--erledigt .dirA-zs-name { color: var(--ink-2) !important; }
html.ir-glas .dirA-ck-verfahren .dirA-zs-phase--laeuft .dirA-zs-name { font-weight: 700 !important; }
html.ir-glas .dirA-ck-verfahren .dirA-zs-datum { font-family: var(--f-mono); font-size: 12px !important; color: var(--ink-3) !important; opacity: 1 !important; font-variant-numeric: tabular-nums; }
html.ir-glas .dirA-ck-verfahren .dirA-zs-tage { font-size: 13px !important; color: var(--red-ink) !important; }

/* Das „?“ zum Erklärvideo als kleiner Glas-Knopf */
html.ir-glas .dirA-ck-video-frage > span {
  background: var(--g-chip); border-color: transparent; box-shadow: inset 0 0 0 1px var(--g-fill-2); color: var(--ink-2);
}

/* ── Fragen & Feedback als Glas ─────────────────────────────────────────── */
html.ir-glas .dirA-ck-fb-pill {
  background: var(--g-glas-dick); color: var(--ink); border: 0;
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--g-licht-oben), inset 0 0 0 1px var(--g-fill-2), 0 14px 30px -14px var(--g-schatten-fern);
  border-radius: 999px; opacity: 1;
}

/* ── Handy: Tab-Leiste unten, Bedarf als Bottom-Sheet ───────────────────── */
@media (max-width: 760px) {
  html.ir-glas .dirA-ck-view-toggle,
  html.ir-glas .dirA-ck-topbar-knopf[aria-pressed] { display: none; }
  html.ir-glas .dirA-ck-tableiste {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    position: fixed; z-index: 120;
    left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    padding: 6px; border-radius: 999px;
    background: var(--g-glas-dick);
    -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%);
    box-shadow: inset 0 1px 0 var(--g-licht-oben), inset 0 0 0 1px var(--g-fill-2), 0 18px 40px -16px var(--g-schatten-fern);
  }
  html.ir-glas .dirA-ck-tableiste button {
    border: 0; background: transparent; cursor: pointer; font: inherit;
    display: grid; justify-items: center; gap: 2px; padding: 7px 2px 6px; border-radius: 999px;
    font-size: 11px; font-weight: 600; color: var(--ink-2);
    transition: background-color .25s var(--g-sanft), transform .35s var(--g-feder);
  }
  html.ir-glas .dirA-ck-tableiste button svg { width: 22px; height: 22px; }
  html.ir-glas .dirA-ck-tableiste button[aria-current="page"] { background: var(--g-fill-2); color: var(--ink); }
  html.ir-glas .dirA-ck-tableiste button:active { transform: scale(.9); }
  /* Platz für die Leiste: Inhalt und Feedback-Knöpfe rücken nach oben. */
  html.ir-glas .dirA-ck-body { padding-bottom: 150px; }
  html.ir-glas .dirA-ck-fb-leiste { bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); right: 16px; }

  html.ir-glas .dirA-ck-popup-hintergrund { align-items: flex-end; padding: 18px 0 0; }
  html.ir-glas .dirA-ck-popup { border-radius: 30px 30px 0 0; max-height: calc(100dvh - 18px); }
  html.ir-glas .dirA-ck-popup-kopf { padding: 22px 18px 14px; position: relative; }
  html.ir-glas .dirA-ck-popup-kopf::before {
    content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px;
    border-radius: 3px; background: var(--g-fill-2);
  }
  html.ir-glas .dirA-ck-popup-inhalt { padding: 16px 18px calc(env(safe-area-inset-bottom, 0px) + 36px); }
  html.ir-glas .dirA-ck-verfahren { grid-template-columns: minmax(0, 1fr); }
  /* Einspaltig in der Reihenfolge des Mockups: Verlauf, naechster Schritt, Terminplan, Abbruch. */
  html.ir-glas .dirA-ck-verfahren-zeitstrahl { order: 1; }
  html.ir-glas .dirA-ck-verfahren-schritt { order: 2; }
  html.ir-glas .dirA-ck-verfahren-termine { order: 3; }
  html.ir-glas .dirA-ck-verfahren-abbruch { order: 4; }
  /* Kopfleiste in einer Zeile: Symbole statt Text, ohne „Cockpit“ und Avatar. */
  html.ir-glas .dirA-ck-topbar { flex-wrap: nowrap; }
  html.ir-glas .dirA-ck-topbar-sep, html.ir-glas .dirA-ck-topbar-label, html.ir-glas .dirA-ck-avatar { display: none; }
  html.ir-glas .dirA-ck-topbar-right { flex-wrap: nowrap; margin-left: auto; gap: 4px; }
  html.ir-glas .dirA-ck-knopf-text { display: none; }
  html.ir-glas .dirA-ck-topbar-knopf { width: 38px; height: 38px; padding: 0; justify-content: center; }
  html.ir-glas .dirA-ck-topbar-logo-link .dirA-ck-logo-farbig { height: 24px; }
  html.ir-glas .dirA-lang.dirA-ck-topbar-lang { padding: 0 6px; }
  html.ir-glas .dirA-ck-verfahren-zeitstrahl, html.ir-glas .dirA-ck-verfahren-schritt,
  html.ir-glas .dirA-ck-verfahren-termine, html.ir-glas .dirA-ck-verfahren-abbruch { grid-column: 1; grid-row: auto; }
  html.ir-glas .dirA-ck-verfahren-zeitstrahl, html.ir-glas .dirA-ck-verfahren-schritt, html.ir-glas .dirA-ck-verfahren-termine { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html.ir-glas .dirA-ck-tableiste button:active { transform: none; }
}

/* Hauptknöpfe: style.css setzt `color: #fff` fest auf `background: var(--ink)` — im Dunkelmodus wird --ink hell,
   die Schrift bliebe weiß auf Weiß. Deshalb im Glas-Design beide aus den Knopf-Tokens. */
html.ir-glas .dirA-btn-primary,
html.ir-glas .dirA-btn-primary:hover,
html.ir-glas .dirA-btn-primary:disabled:hover { background: var(--g-knopf); color: var(--g-knopf-text); }
html.ir-glas .dirA-btn-primary:hover { opacity: .9; }

/* Eingabefelder: Ohne eigene Hintergrundfarbe zeichnet der Browser im Dunkelmodus sein hellgraues Standardfeld.
   Felder mit eigener Inline-Farbe behalten die (Inline schlägt diese Regel). */
html.ir-glas .dirA input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html.ir-glas .dirA textarea,
html.ir-glas .dirA select {
  background-color: var(--g-chip); color: var(--ink); border-color: var(--g-fill-2);
}
html.ir-glas .dirA input::placeholder, html.ir-glas .dirA textarea::placeholder { color: var(--ink-3); opacity: 1; }

/* ═══ Phase 4 (24.10.2026): Anfragen, Marktplatz, Einstellungen, Dialoge ════════ */

/* Karten (Material oben in der Glas-Liste): nur Form und Abstand. */
html.ir-glas .dirA-ck-anb-card, html.ir-glas .dirA-ck-mkt-card, html.ir-glas .dirA-ck-mkt-info,
html.ir-glas .dirA-ck-set-card, html.ir-glas .dirA-ck-empty { border-radius: 22px; }
html.ir-glas .dirA-ck-mkt-card { transition: transform .45s var(--g-feder), box-shadow .3s var(--g-sanft); }
html.ir-glas .dirA-ck-mkt-card:hover { transform: translateY(-2px); }
/* Gefahrenzone bleibt erkennbar: rot getönter Rand über dem Glas. */
html.ir-glas .dirA-ck-set-card--danger { box-shadow: inset 0 0 0 1px rgba(220,38,38,.45), 0 18px 40px -18px var(--g-schatten-fern); }

/* Reiter der Einstellungen und Quellen-Filter wie die Umschaltleiste oben. */
html.ir-glas .dirA-ck-set-tabs { background: var(--g-fill); border: 0; }
html.ir-glas .dirA-ck-set-tab { color: var(--ink-2); transition: background-color .25s var(--g-sanft), color .25s var(--g-sanft), transform .3s var(--g-feder); }
html.ir-glas .dirA-ck-set-tab:hover { color: var(--ink); }
html.ir-glas .dirA-ck-set-tab--on, html.ir-glas .dirA-ck-set-tab--on:hover { background: var(--g-knopf); color: var(--g-knopf-text); box-shadow: none; }
html.ir-glas .dirA-ck-set-tab:active { transform: scale(.95); }
html.ir-glas .dirA-ck-mkt-search { background: var(--g-chip); border-color: transparent; box-shadow: inset 0 0 0 1px var(--g-fill-2); border-radius: 999px; }
html.ir-glas .dirA-ck-mkt-source-tab { background: var(--g-chip); border-color: transparent; box-shadow: inset 0 0 0 1px var(--g-fill-2); }

/* Dialoge: dickes Glas über einem Schleier wie beim Bedarf. */
html.ir-glas .dirA-ck-overlay, html.ir-glas .dirA-ck-modal-overlay {
  background: var(--g-schleier);
  -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
}
html.ir-glas .dirA-ck-modal, html.ir-glas .dirA-ck-fb-modal {
  background: var(--g-glas-dick); border-radius: 28px;
  -webkit-backdrop-filter: blur(36px) saturate(190%); backdrop-filter: blur(36px) saturate(190%);
}
html.ir-glas .dirA-ck-modal-head, html.ir-glas .dirA-ck-modal-header { border-bottom-color: var(--g-fill-2); background: transparent; }
html.ir-glas .dirA-ck-modal-footer { border-top-color: var(--g-fill-2); background: transparent; }
html.ir-glas .dirA-ck-modal-close { border-radius: 999px; background: var(--g-fill); }
html.ir-glas .dirA-btn-ghost { border-radius: 999px; }
@media (max-width: 760px) {
  html.ir-glas .dirA-ck-modal { border-radius: 26px; }
}

/* Solange ein Dialog oder Bedarf offen ist, liegen die schwebenden Feedback-Knöpfe nicht darüber
   (am Handy verdeckten sie sonst Felder im Dialog). Sie sind nach dem Schließen sofort wieder da. */
html.ir-glas body:has(.dirA-ck-overlay, .dirA-ck-modal-overlay, .dirA-ck-popup-hintergrund) .dirA-ck-fb-leiste { display: none; }
/* Kopfzeilen über Listen (z. B. Marktplatz mit Sortierhinweis) dürfen umbrechen statt sich zu überlagern. */
html.ir-glas .dirA-ck-main-head { flex-wrap: wrap; row-gap: 6px; }


/* ═══ Phase 5 (24.10.2026): Anmeldung, Laden, Adminboard ═════════════════════ */

/* Hülle um Anmelde- und Ladeseiten samt Grund (cockpit.jsx, mitGlasGrund): eigener Stapel. */
.dirA-glas-buehne { position: relative; z-index: 0; isolation: isolate; min-height: 100dvh; }
/* Anmelde- und Ladeseiten: durchsichtig über dem Grund, die Karte aus dickem Glas. */
html.ir-glas .dirA-ck-login { background: transparent; position: relative; z-index: 0; isolation: isolate; }
html.ir-glas .dirA-ck-login-card {
  background: var(--g-glas-dick); border: 0; border-radius: 30px;
  -webkit-backdrop-filter: blur(36px) saturate(190%); backdrop-filter: blur(36px) saturate(190%);
  box-shadow: inset 0 1px 0 var(--g-licht-oben), inset 0 0 0 1px var(--g-fill-2), 0 30px 60px -24px var(--g-schatten-fern);
}
/* Logo auf diesen Seiten: inline, damit es mittig steht wie bisher. */
html.ir-glas .dirA-ck-logo-glas > .dirA-ck-logo-farbig--hell { display: inline-block; }
@media (prefers-color-scheme: dark) {
  html.ir-glas:not([data-ir-thema="hell"]) .dirA-ck-logo-glas > .dirA-ck-logo-farbig--hell { display: none; }
  html.ir-glas:not([data-ir-thema="hell"]) .dirA-ck-logo-glas > .dirA-ck-logo-farbig--dunkel { display: inline-block; }
}
html.ir-glas[data-ir-thema="dunkel"] .dirA-ck-logo-glas > .dirA-ck-logo-farbig--hell { display: none; }
html.ir-glas[data-ir-thema="dunkel"] .dirA-ck-logo-glas > .dirA-ck-logo-farbig--dunkel { display: inline-block; }

/* ── Adminboard ─────────────────────────────────────────────────────────── *
 * Das Board steht nicht in einer .dirA-Hülle und lädt style.css nicht. Die Grundwerte kommen deshalb hier dazu
 * (dieselben wie .dirA in style.css); die Glas-Tokens oben gelten für .dirA-admin-glas mit. */
/* Hellwerte wie .dirA in style.css; die dunklen Blöcke oben treffen .dirA-admin-glas mit höherer Spezifität. */
html.ir-glas .dirA-admin-glas {
  --bg: #F6F5F1; --bg-elev: #FFFFFF; --ink: #0E0E10; --ink-2: #44444A; --line: #E5E3DC; --line-2: #D8D5CC;
  --accent-red: #DC2626; --accent-gold: #F4B83C; --accent-gold-dark: #B07A1A; --green: #16A34A;
  --f-sans: "Inter Tight", "Inter", system-ui, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, monospace;
  color: var(--ink);
}
html.ir-glas .dirA-admin-seite {
  background: transparent !important; position: relative; z-index: 0; isolation: isolate;
  font-family: var(--f-sans) !important;
}

/* Navigation: schwebende Glasleiste wie im Cockpit. */
html.ir-glas .dirA-admin-nav {
  position: sticky; top: 10px; z-index: 40; color: var(--ink);
  width: calc(100% - 32px); max-width: 1240px; margin: 10px auto 0; padding: 0 10px 0 18px; border-radius: 999px;
  background: var(--g-glas);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--g-licht-oben), inset 0 0 0 1px var(--g-fill-2), 0 18px 40px -18px var(--g-schatten-fern);
}
html.ir-glas .dirA-admin-nav-brand span { color: var(--ink); }
html.ir-glas .dirA-admin-nav-brand .dirA-ck-logo-farbig { height: 24px; filter: none; opacity: 1; }
html.ir-glas .dirA-admin-nav-tab { color: var(--ink-2); border-radius: 999px; white-space: nowrap; }
html.ir-glas .dirA-admin-nav-tab:hover { color: var(--ink); }
html.ir-glas .dirA-admin-nav-tab--aktiv { background: var(--g-knopf); color: var(--g-knopf-text); border-color: transparent; }
html.ir-glas .dirA-admin-nav-logout { color: var(--ink); background: var(--g-fill); border-color: transparent; border-radius: 999px; }
html.ir-glas .dirA-admin-thema { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; margin-right: 6px; cursor: pointer; }

/* Kacheln und Popup aus Glas. */
html.ir-glas .dirA-admin-kachel {
  border: 0; border-radius: 22px; background: var(--g-glas); color: var(--ink);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--g-licht-oben), inset 0 0 0 1px var(--g-fill-2), 0 18px 40px -18px var(--g-schatten-fern);
  transition: transform .45s var(--g-feder);
}
html.ir-glas .dirA-admin-kachel:hover { transform: translateY(-3px) scale(1.012); }
html.ir-glas .dirA-admin-popup-hintergrund {
  background: var(--g-schleier); -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
}
html.ir-glas .dirA-admin-popup {
  border: 0; border-radius: 30px; background: var(--g-glas-dick); color: var(--ink);
  -webkit-backdrop-filter: blur(36px) saturate(190%); backdrop-filter: blur(36px) saturate(190%);
  box-shadow: inset 0 1px 0 var(--g-licht-oben), inset 0 0 0 1px var(--g-fill-2), 0 30px 60px -24px var(--g-schatten-fern);
}
html.ir-glas .dirA-admin-popup-kopf { background: transparent; border-bottom-color: var(--g-fill-2); }
@media (prefers-reduced-motion: reduce) { html.ir-glas .dirA-admin-kachel:hover { transform: none; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html.ir-glas .dirA-admin-nav, html.ir-glas .dirA-admin-kachel, html.ir-glas .dirA-admin-popup {
    background: var(--bg-elev); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ═══ Phase 3 (24.10.2026): feste Farben im Dunkelmodus ══════════════════════
 * Die festen Farben im Cockpit-Code stehen seit Phase 3 als var(--ck-<rolle>-<wert>, <wert>) da. Klassisch und im
 * hellen Glas-Design ist kein --ck-Token definiert, es gilt also der alte Wert. Nur hier, im Dunkelmodus, bekommen
 * sie ein Gegenstück (errechnet: helle Flächen → dunkel getönt, dunkle Schrift → hell, helle Ränder → dezent hell).
 * Erzeugt aus der Token-Liste; nicht aufgeführte Tokens behalten ihren Wert. */
@media (prefers-color-scheme: dark) {
  html.ir-glas:not([data-ir-thema="hell"]) .dirA, html.ir-glas:not([data-ir-thema="hell"]) .dirA-admin-glas {
    --ck-bg-0e0e10: #2a2a30;
    --ck-bg-166534: #2a2a30;
    --ck-bg-1e2761: #2a2a30;
    --ck-bg-dcfce7: rgba(20,235,94,0.16);
    --ck-bg-ecfdf5: rgba(24,231,134,0.16);
    --ck-bg-ecfeff: rgba(0,242,255,0.16);
    --ck-bg-eef2ff: rgba(0,60,255,0.16);
    --ck-bg-f0f9ff: rgba(0,153,255,0.16);
    --ck-bg-f0fdf4: rgba(30,225,90,0.16);
    --ck-bg-f1f5f9: rgba(76,128,179,0.16);
    --ck-bg-f3f4f6: #232329;
    --ck-bg-f5f3ff: rgba(43,0,255,0.16);
    --ck-bg-f5f4f0: rgba(153,143,102,0.16);
    --ck-bg-f5f5f5: #232329;
    --ck-bg-f8fafc: rgba(76,127,179,0.16);
    --ck-bg-f9f9f9: #1c1c21;
    --ck-bg-f9fafb: rgba(102,127,153,0.16);
    --ck-bg-fafaf7: rgba(157,157,98,0.16);
    --ck-bg-fafaf9: #1c1c21;
    --ck-bg-fafafa: #1c1c21;
    --ck-bg-fbfaf7: rgba(170,149,85,0.16);
    --ck-bg-fdecec: rgba(231,24,24,0.16);
    --ck-bg-fee2e2: rgba(247,8,8,0.16);
    --ck-bg-fef2f2: rgba(237,18,18,0.16);
    --ck-bg-fef3c7: rgba(251,201,4,0.16);
    --ck-bg-fefce8: rgba(244,223,11,0.16);
    --ck-bg-fff7ed: rgba(255,142,0,0.16);
    --ck-bg-fffbeb: rgba(255,204,0,0.16);
    --ck-bg-ffffff: #1c1c21;
    --ck-bg-rgba_0_0_0_0p05: rgba(0,0,0,0.20);
    --ck-bg-rgba_0_0_0_0p08: rgba(0,0,0,0.23);
    --ck-bg-rgba_0_0_0_0p35: rgba(0,0,0,0.50);
    --ck-bg-rgba_0_0_0_0p45: rgba(0,0,0,0.60);
    --ck-bg-rgba_0_0_0_p015: rgba(0,0,0,0.16);
    --ck-bg-rgba_0_0_0_p4: rgba(0,0,0,0.55);
    --ck-bg-rgba_130_130_138_0p10: rgba(130,130,138,0.17);
    --ck-bg-rgba_14_14_16_0p55: rgba(0,0,0,0.70);
    --ck-bg-rgba_14_14_16_p45: rgba(0,0,0,0.60);
    --ck-bg-rgba_14_14_16_p55: rgba(0,0,0,0.70);
    --ck-bg-rgba_16_185_129_0p08: rgba(16,185,129,0.14);
    --ck-bg-rgba_16_185_129_0p10: rgba(16,185,129,0.17);
    --ck-bg-rgba_180_83_9_0p06: rgba(180,83,9,0.10);
    --ck-bg-rgba_185_28_28_0p06: rgba(185,28,28,0.10);
    --ck-bg-rgba_212_44_44_0p06: rgba(212,44,44,0.10);
    --ck-bg-rgba_220_38_38_0p06: rgba(220,38,38,0.10);
    --ck-bg-rgba_220_38_38_0p08: rgba(220,38,38,0.14);
    --ck-bg-rgba_220_38_38_0p10: rgba(220,38,38,0.17);
    --ck-bg-rgba_220_38_38_0p12: rgba(220,38,38,0.20);
    --ck-bg-rgba_220_38_38_p03: rgba(220,38,38,0.05);
    --ck-bg-rgba_220_48_48_0p04: rgba(220,48,48,0.07);
    --ck-bg-rgba_220_48_48_0p06: rgba(220,48,48,0.10);
    --ck-bg-rgba_22_163_74_0p1: rgba(22,163,74,0.17);
    --ck-bg-rgba_22_163_74_0p10: rgba(22,163,74,0.17);
    --ck-bg-rgba_234_88_12_0p10: rgba(234,88,12,0.17);
    --ck-bg-rgba_244_184_60_0p12: rgba(244,184,60,0.20);
    --ck-bg-rgba_244_184_60_0p15: rgba(244,184,60,0.26);
    --ck-bg-rgba_244_184_60_p08: rgba(244,184,60,0.14);
    --ck-bg-rgba_255_255_255_0p08: rgba(255,255,255,0.14);
    --ck-bg-rgba_255_255_255_0p14: rgba(255,255,255,0.24);
    --ck-bg-rgba_30_39_97_0p05: rgba(30,39,97,0.09);
    --ck-bg-rgba_59_130_246_0p10: rgba(59,130,246,0.17);
    --ck-rand-0e0e10: rgba(255,255,255,0.22);
    --ck-rand-242427: rgba(255,255,255,0.22);
    --ck-rand-333333: rgba(255,255,255,0.22);
    --ck-rand-99f6e4: rgba(44,236,199,0.38);
    --ck-rand-bae6fd: rgba(32,174,249,0.38);
    --ck-rand-bbf7d0: rgba(50,231,113,0.38);
    --ck-rand-c7d2fe: rgba(30,74,251,0.38);
    --ck-rand-cbd5e1: rgba(109,137,171,0.38);
    --ck-rand-cccccc: rgba(255,255,255,0.12);
    --ck-rand-d1d5db: rgba(255,255,255,0.12);
    --ck-rand-d6d3cc: rgba(255,255,255,0.12);
    --ck-rand-dddddd: rgba(255,255,255,0.12);
    --ck-rand-e2e8f0: rgba(104,135,177,0.38);
    --ck-rand-e5e7eb: rgba(255,255,255,0.12);
    --ck-rand-e9e7e2: rgba(255,255,255,0.12);
    --ck-rand-ece7dc: rgba(174,153,106,0.38);
    --ck-rand-eeeeee: rgba(255,255,255,0.12);
    --ck-rand-f3f4f6: rgba(255,255,255,0.12);
    --ck-rand-f9f9f9: rgba(255,255,255,0.12);
    --ck-rand-f9fafb: rgba(117,140,163,0.38);
    --ck-rand-fca5a5: rgba(248,33,33,0.38);
    --ck-rand-fde68a: rgba(251,207,29,0.38);
    --ck-rand-fecaca: rgba(251,30,30,0.38);
    --ck-rand-rgba_14_14_16_p08: rgba(255,255,255,0.10);
    --ck-rand-rgba_14_14_16_p12: rgba(255,255,255,0.14);
    --ck-rand-rgba_16_185_129_0p3: rgba(16,185,129,0.51);
    --ck-rand-rgba_16_185_129_0p35: rgba(16,185,129,0.59);
    --ck-rand-rgba_16_185_129_0p45: rgba(16,185,129,0.77);
    --ck-rand-rgba_185_28_28_0p28: rgba(185,28,28,0.48);
    --ck-rand-rgba_185_28_28_0p35: rgba(185,28,28,0.59);
    --ck-rand-rgba_185_28_28_0p5: rgba(185,28,28,0.85);
    --ck-rand-rgba_220_38_38_0p25: rgba(220,38,38,0.42);
    --ck-rand-rgba_220_38_38_0p3: rgba(220,38,38,0.51);
    --ck-rand-rgba_220_38_38_0p4: rgba(220,38,38,0.68);
    --ck-rand-rgba_220_38_38_p35: rgba(220,38,38,0.59);
    --ck-rand-rgba_22_163_74_0p25: rgba(22,163,74,0.42);
    --ck-rand-rgba_22_163_74_0p3: rgba(22,163,74,0.51);
    --ck-rand-rgba_244_184_60_0p3: rgba(244,184,60,0.51);
    --ck-rand-rgba_244_184_60_0p35: rgba(244,184,60,0.59);
    --ck-rand-rgba_255_255_255_0p06: rgba(255,255,255,0.10);
    --ck-rand-rgba_255_255_255_0p2: rgba(255,255,255,0.34);
    --ck-rand-rgba_255_255_255_0p5: rgba(255,255,255,0.85);
    --ck-text-0369a1: #7dcffd;
    --ck-text-059669: #7ffbd4;
    --ck-text-0e0e10: #efeff1;
    --ck-text-0f766e: #89f0e8;
    --ck-text-166534: #92e7b2;
    --ck-text-16a34a: #8aefaf;
    --ck-text-1e2761: #9aa3e0;
    --ck-text-2563eb: #86a8f4;
    --ck-text-2e9e5b: #98e1b6;
    --ck-text-333333: #cccccc;
    --ck-text-334155: #acbacd;
    --ck-text-3730a3: #9d99e1;
    --ck-text-3b82f6: #80aef9;
    --ck-text-3f3a2f: #c6c0b3;
    --ck-text-444444: #bbbbbb;
    --ck-text-475569: #b0baca;
    --ck-text-4b5563: #b4bbc6;
    --ck-text-555555: #aaaaaa;
    --ck-text-666666: #a3a3a3;
    --ck-text-6b7280: #9ba0ab;
    --ck-text-6d28d9: #b28eeb;
    --ck-text-888888: #a3a3a3;
    --ck-text-8a1c1c: #e99191;
    --ck-text-8a6209: #f7d383;
    --ck-text-8a6d1a: #ead38f;
    --ck-text-8a8378: #aaa59d;
    --ck-text-92400e: #f3af86;
    --ck-text-991b1b: #eb8e8e;
    --ck-text-999999: #a3a3a3;
    --ck-text-b07a1a: #eeca8b;
    --ck-text-b45309: #f9b581;
    --ck-text-b8860b: #f8d682;
    --ck-text-b91c1c: #ee8c8c;
    --ck-text-c2410c: #f7a482;
    --ck-text-ca8a04: #fcd37d;
    --ck-text-d97706: #fbc17e;
    --ck-text-dc2626: #ed8d8d;
    --ck-text-e8320a: #fa9680;
    --ck-text-ea580c: #f9aa81;
    --ck-text-ee3333: #f58585;
    --ck-text-f0a500: #ffd67a;
    --ck-text-f59e0b: #facc80;
    --ck-text-rgba_255_255_255_0p2: rgba(255,255,255,0.34);
    --ck-text-rgba_255_255_255_0p45: rgba(255,255,255,0.77);
    --ck-text-rgba_255_255_255_0p55: rgba(255,255,255,0.90);
    --ck-text-rgba_255_255_255_0p65: rgba(255,255,255,0.90);
    --ck-text-rgba_255_255_255_0p75: rgba(255,255,255,0.90);
    --ck-text-rgba_255_255_255_0p85: rgba(255,255,255,0.90);
    --ck-text-rgba_255_255_255_p7: rgba(255,255,255,0.90);
  }
}
html.ir-glas[data-ir-thema="dunkel"] .dirA, html.ir-glas[data-ir-thema="dunkel"] .dirA-admin-glas {
  --ck-bg-0e0e10: #2a2a30;
  --ck-bg-166534: #2a2a30;
  --ck-bg-1e2761: #2a2a30;
  --ck-bg-dcfce7: rgba(20,235,94,0.16);
  --ck-bg-ecfdf5: rgba(24,231,134,0.16);
  --ck-bg-ecfeff: rgba(0,242,255,0.16);
  --ck-bg-eef2ff: rgba(0,60,255,0.16);
  --ck-bg-f0f9ff: rgba(0,153,255,0.16);
  --ck-bg-f0fdf4: rgba(30,225,90,0.16);
  --ck-bg-f1f5f9: rgba(76,128,179,0.16);
  --ck-bg-f3f4f6: #232329;
  --ck-bg-f5f3ff: rgba(43,0,255,0.16);
  --ck-bg-f5f4f0: rgba(153,143,102,0.16);
  --ck-bg-f5f5f5: #232329;
  --ck-bg-f8fafc: rgba(76,127,179,0.16);
  --ck-bg-f9f9f9: #1c1c21;
  --ck-bg-f9fafb: rgba(102,127,153,0.16);
  --ck-bg-fafaf7: rgba(157,157,98,0.16);
  --ck-bg-fafaf9: #1c1c21;
  --ck-bg-fafafa: #1c1c21;
  --ck-bg-fbfaf7: rgba(170,149,85,0.16);
  --ck-bg-fdecec: rgba(231,24,24,0.16);
  --ck-bg-fee2e2: rgba(247,8,8,0.16);
  --ck-bg-fef2f2: rgba(237,18,18,0.16);
  --ck-bg-fef3c7: rgba(251,201,4,0.16);
  --ck-bg-fefce8: rgba(244,223,11,0.16);
  --ck-bg-fff7ed: rgba(255,142,0,0.16);
  --ck-bg-fffbeb: rgba(255,204,0,0.16);
  --ck-bg-ffffff: #1c1c21;
  --ck-bg-rgba_0_0_0_0p05: rgba(0,0,0,0.20);
  --ck-bg-rgba_0_0_0_0p08: rgba(0,0,0,0.23);
  --ck-bg-rgba_0_0_0_0p35: rgba(0,0,0,0.50);
  --ck-bg-rgba_0_0_0_0p45: rgba(0,0,0,0.60);
  --ck-bg-rgba_0_0_0_p015: rgba(0,0,0,0.16);
  --ck-bg-rgba_0_0_0_p4: rgba(0,0,0,0.55);
  --ck-bg-rgba_130_130_138_0p10: rgba(130,130,138,0.17);
  --ck-bg-rgba_14_14_16_0p55: rgba(0,0,0,0.70);
  --ck-bg-rgba_14_14_16_p45: rgba(0,0,0,0.60);
  --ck-bg-rgba_14_14_16_p55: rgba(0,0,0,0.70);
  --ck-bg-rgba_16_185_129_0p08: rgba(16,185,129,0.14);
  --ck-bg-rgba_16_185_129_0p10: rgba(16,185,129,0.17);
  --ck-bg-rgba_180_83_9_0p06: rgba(180,83,9,0.10);
  --ck-bg-rgba_185_28_28_0p06: rgba(185,28,28,0.10);
  --ck-bg-rgba_212_44_44_0p06: rgba(212,44,44,0.10);
  --ck-bg-rgba_220_38_38_0p06: rgba(220,38,38,0.10);
  --ck-bg-rgba_220_38_38_0p08: rgba(220,38,38,0.14);
  --ck-bg-rgba_220_38_38_0p10: rgba(220,38,38,0.17);
  --ck-bg-rgba_220_38_38_0p12: rgba(220,38,38,0.20);
  --ck-bg-rgba_220_38_38_p03: rgba(220,38,38,0.05);
  --ck-bg-rgba_220_48_48_0p04: rgba(220,48,48,0.07);
  --ck-bg-rgba_220_48_48_0p06: rgba(220,48,48,0.10);
  --ck-bg-rgba_22_163_74_0p1: rgba(22,163,74,0.17);
  --ck-bg-rgba_22_163_74_0p10: rgba(22,163,74,0.17);
  --ck-bg-rgba_234_88_12_0p10: rgba(234,88,12,0.17);
  --ck-bg-rgba_244_184_60_0p12: rgba(244,184,60,0.20);
  --ck-bg-rgba_244_184_60_0p15: rgba(244,184,60,0.26);
  --ck-bg-rgba_244_184_60_p08: rgba(244,184,60,0.14);
  --ck-bg-rgba_255_255_255_0p08: rgba(255,255,255,0.14);
  --ck-bg-rgba_255_255_255_0p14: rgba(255,255,255,0.24);
  --ck-bg-rgba_30_39_97_0p05: rgba(30,39,97,0.09);
  --ck-bg-rgba_59_130_246_0p10: rgba(59,130,246,0.17);
  --ck-rand-0e0e10: rgba(255,255,255,0.22);
  --ck-rand-242427: rgba(255,255,255,0.22);
  --ck-rand-333333: rgba(255,255,255,0.22);
  --ck-rand-99f6e4: rgba(44,236,199,0.38);
  --ck-rand-bae6fd: rgba(32,174,249,0.38);
  --ck-rand-bbf7d0: rgba(50,231,113,0.38);
  --ck-rand-c7d2fe: rgba(30,74,251,0.38);
  --ck-rand-cbd5e1: rgba(109,137,171,0.38);
  --ck-rand-cccccc: rgba(255,255,255,0.12);
  --ck-rand-d1d5db: rgba(255,255,255,0.12);
  --ck-rand-d6d3cc: rgba(255,255,255,0.12);
  --ck-rand-dddddd: rgba(255,255,255,0.12);
  --ck-rand-e2e8f0: rgba(104,135,177,0.38);
  --ck-rand-e5e7eb: rgba(255,255,255,0.12);
  --ck-rand-e9e7e2: rgba(255,255,255,0.12);
  --ck-rand-ece7dc: rgba(174,153,106,0.38);
  --ck-rand-eeeeee: rgba(255,255,255,0.12);
  --ck-rand-f3f4f6: rgba(255,255,255,0.12);
  --ck-rand-f9f9f9: rgba(255,255,255,0.12);
  --ck-rand-f9fafb: rgba(117,140,163,0.38);
  --ck-rand-fca5a5: rgba(248,33,33,0.38);
  --ck-rand-fde68a: rgba(251,207,29,0.38);
  --ck-rand-fecaca: rgba(251,30,30,0.38);
  --ck-rand-rgba_14_14_16_p08: rgba(255,255,255,0.10);
  --ck-rand-rgba_14_14_16_p12: rgba(255,255,255,0.14);
  --ck-rand-rgba_16_185_129_0p3: rgba(16,185,129,0.51);
  --ck-rand-rgba_16_185_129_0p35: rgba(16,185,129,0.59);
  --ck-rand-rgba_16_185_129_0p45: rgba(16,185,129,0.77);
  --ck-rand-rgba_185_28_28_0p28: rgba(185,28,28,0.48);
  --ck-rand-rgba_185_28_28_0p35: rgba(185,28,28,0.59);
  --ck-rand-rgba_185_28_28_0p5: rgba(185,28,28,0.85);
  --ck-rand-rgba_220_38_38_0p25: rgba(220,38,38,0.42);
  --ck-rand-rgba_220_38_38_0p3: rgba(220,38,38,0.51);
  --ck-rand-rgba_220_38_38_0p4: rgba(220,38,38,0.68);
  --ck-rand-rgba_220_38_38_p35: rgba(220,38,38,0.59);
  --ck-rand-rgba_22_163_74_0p25: rgba(22,163,74,0.42);
  --ck-rand-rgba_22_163_74_0p3: rgba(22,163,74,0.51);
  --ck-rand-rgba_244_184_60_0p3: rgba(244,184,60,0.51);
  --ck-rand-rgba_244_184_60_0p35: rgba(244,184,60,0.59);
  --ck-rand-rgba_255_255_255_0p06: rgba(255,255,255,0.10);
  --ck-rand-rgba_255_255_255_0p2: rgba(255,255,255,0.34);
  --ck-rand-rgba_255_255_255_0p5: rgba(255,255,255,0.85);
  --ck-text-0369a1: #7dcffd;
  --ck-text-059669: #7ffbd4;
  --ck-text-0e0e10: #efeff1;
  --ck-text-0f766e: #89f0e8;
  --ck-text-166534: #92e7b2;
  --ck-text-16a34a: #8aefaf;
  --ck-text-1e2761: #9aa3e0;
  --ck-text-2563eb: #86a8f4;
  --ck-text-2e9e5b: #98e1b6;
  --ck-text-333333: #cccccc;
  --ck-text-334155: #acbacd;
  --ck-text-3730a3: #9d99e1;
  --ck-text-3b82f6: #80aef9;
  --ck-text-3f3a2f: #c6c0b3;
  --ck-text-444444: #bbbbbb;
  --ck-text-475569: #b0baca;
  --ck-text-4b5563: #b4bbc6;
  --ck-text-555555: #aaaaaa;
  --ck-text-666666: #a3a3a3;
  --ck-text-6b7280: #9ba0ab;
  --ck-text-6d28d9: #b28eeb;
  --ck-text-888888: #a3a3a3;
  --ck-text-8a1c1c: #e99191;
  --ck-text-8a6209: #f7d383;
  --ck-text-8a6d1a: #ead38f;
  --ck-text-8a8378: #aaa59d;
  --ck-text-92400e: #f3af86;
  --ck-text-991b1b: #eb8e8e;
  --ck-text-999999: #a3a3a3;
  --ck-text-b07a1a: #eeca8b;
  --ck-text-b45309: #f9b581;
  --ck-text-b8860b: #f8d682;
  --ck-text-b91c1c: #ee8c8c;
  --ck-text-c2410c: #f7a482;
  --ck-text-ca8a04: #fcd37d;
  --ck-text-d97706: #fbc17e;
  --ck-text-dc2626: #ed8d8d;
  --ck-text-e8320a: #fa9680;
  --ck-text-ea580c: #f9aa81;
  --ck-text-ee3333: #f58585;
  --ck-text-f0a500: #ffd67a;
  --ck-text-f59e0b: #facc80;
  --ck-text-rgba_255_255_255_0p2: rgba(255,255,255,0.34);
  --ck-text-rgba_255_255_255_0p45: rgba(255,255,255,0.77);
  --ck-text-rgba_255_255_255_0p55: rgba(255,255,255,0.90);
  --ck-text-rgba_255_255_255_0p65: rgba(255,255,255,0.90);
  --ck-text-rgba_255_255_255_0p75: rgba(255,255,255,0.90);
  --ck-text-rgba_255_255_255_0p85: rgba(255,255,255,0.90);
  --ck-text-rgba_255_255_255_p7: rgba(255,255,255,0.90);
}

/* ── Dickes Glas ohne Flackern (24.10.2026) ──────────────────────────────── *
 * Popup und Dialoge scrollen in sich. Saß die Unschärfe (backdrop-filter) direkt auf dem scrollenden Fenster,
 * berechnete vor allem Safari sie beim Scrollen neu und zeigte für einzelne Bilder den Hintergrund ungefiltert.
 * Jetzt trägt eine feste Ebene dahinter (::after) Farbe, Glanz und Unschärfe; das Fenster selbst ist durchsichtig.
 * Zweiter Gewinn: Ohne backdrop-filter ist das Fenster kein Bezugsrahmen mehr für position: fixed — ein Dialog, der
 * aus dem Popup aufgeht, sitzt nicht darin fest. */
html.ir-glas .dirA-ck-popup, html.ir-glas .dirA-ck-modal, html.ir-glas .dirA-ck-fb-modal, html.ir-glas .dirA-admin-popup {
  position: relative; isolation: isolate;
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.ir-glas .dirA-ck-popup::after, html.ir-glas .dirA-ck-modal::after,
html.ir-glas .dirA-ck-fb-modal::after, html.ir-glas .dirA-admin-popup::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-dick);
  -webkit-backdrop-filter: blur(36px) saturate(190%); backdrop-filter: blur(36px) saturate(190%);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html.ir-glas .dirA-ck-popup::after, html.ir-glas .dirA-ck-modal::after,
  html.ir-glas .dirA-ck-fb-modal::after, html.ir-glas .dirA-admin-popup::after {
    display: block; background: var(--bg-elev); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
/* Ausnahme: Fenster, die SELBST scrollen. Dort liefe die feste Ebene mit dem Inhalt mit und endete nach der ersten
   Bildschirmhöhe — Farbe und Unschärfe sitzen deshalb wieder am Fenster selbst. */
html.ir-glas .dirA-ck-modal.dirA-ck-as-panel {
  background: var(--g-glas-dick);
  -webkit-backdrop-filter: blur(36px) saturate(190%); backdrop-filter: blur(36px) saturate(190%);
}
html.ir-glas .dirA-ck-modal.dirA-ck-as-panel::after { display: none; }
/* Das Einladen-Fenster (Personen einbeziehen) scrollt selbst — Glas am Fenster. */
html.ir-glas .dirA-ck-einladen {
  background: var(--g-glas-dick); border: 0; border-radius: 26px;
  -webkit-backdrop-filter: blur(36px) saturate(190%); backdrop-filter: blur(36px) saturate(190%);
  box-shadow: inset 0 1px 0 var(--g-licht-oben), inset 0 0 0 1px var(--g-fill-2), 0 30px 60px -24px var(--g-schatten-fern);
}
html.ir-glas .dirA-ck-einladen-abschnitt { border-top-color: var(--g-fill-2); }
html.ir-glas .dirA-ck-einladen-hintergrund { background: var(--g-schleier); }

/* Textreiche Flächen (Anbieter-Datenraum, Marktplatz-Karten, Einstellungen) in dickem Glas wie das Bedarfs-Popup:
   Im dünnen Glas (50 %) liefen die Winkel des Grunds als graues Band quer durch Fragerunde und Pitch-Termin
   (Wunsch Clemens 24.10.2026: Winkel hinter Datenraum-Text blasser). Kacheln bleiben dünnes Glas. */
html.ir-glas .dirA-ck-anb-card, html.ir-glas .dirA-ck-mkt-card, html.ir-glas .dirA-ck-mkt-info, html.ir-glas .dirA-ck-set-card, html.ir-glas .dirA-ck-empty {
  background: var(--g-glas-dick);
  -webkit-backdrop-filter: blur(36px) saturate(190%); backdrop-filter: blur(36px) saturate(190%);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html.ir-glas .dirA-ck-anb-card, html.ir-glas .dirA-ck-mkt-card, html.ir-glas .dirA-ck-mkt-info, html.ir-glas .dirA-ck-set-card, html.ir-glas .dirA-ck-empty {
    background: var(--bg-elev); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}