/* ─────────────────────────────────────────────────────────────────────────────
   DMV — Farb-Tokens für Dunkel und Hell.

   Eine Seite, zwei Belegungen. Der Dunkelmodus trägt genau die Werte, die vorher
   hart im Markup standen — deshalb ist er vor und nach dem Umbau pixelgleich.
   Der Hellmodus spiegelt dieselbe Leiter: was dunkel eine Fläche war, ist hell
   eine Fläche; was dunkel Schrift war, ist hell Schrift. Dadurch kippt die als
   "hell" gebaute Akzent-Sektion im Hellmodus auf dunkel und der Rhythmus jeder
   Seite bleibt erhalten.

   Umschaltung: data-theme="dark" | "light" auf <html>.
   Nicht themenabhängig: der Kopf (immer dunkel, Anker der Marke), die
   CTA-Fläche #F7941E→#E84E1B mit weißer Schrift, Schlagschatten und die
   Verdunkelung über Bildern und Videos.
   ───────────────────────────────────────────────────────────────────────────── */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Schwebende Flächen (Tooltips, Popover, Hinweise, Toasts, Dropdowns):
     Fläche --bg-2, Rahmen --line, dazu dieser Schatten. Immer deckend. */
  --pop-schatten: 0 12px 32px rgba(0, 0, 0, .35);

  /* Abstand zwischen Seitensektionen */
  --space-section: 128px;

  /* Flächen */
  --bg-0: #0E0D0C;
  --bg-0-alt: #0E0E0C;
  --bg-0-rgb: 14, 13, 12;
  --bg-1: #1C1A17;
  --chart-card-bg: var(--bg-1);   /* Fläche der Diagramm-Karte, zugleich Halo der Wert-Labels */
  --bg-1-alt: #1B1916;
  --bg-2: #24211C;
  --bg-2-alt: #2A2522;
  --bg-3: #2B2823;

  /* Eingebrannte Hintergrundfarbe der Leistungsgrafiken (Eckpixel der Dateien) */
  --leistung-img-bg-dark: #1E1913;
  --leistung-img-bg-light: #FBF8F4;
  --leistung-img-bg: var(--leistung-img-bg-dark);

  /* Zwischenstufen der Leiter (nach Herkunftswert benannt, damit der
     Dunkelmodus exakt bleibt) */
  --n-131110: #131110;
  --n-141311: #141311;
  --n-15130F: #15130F;
  --n-151311: #151311;
  --n-161512: #161512;
  --n-16140F: #16140F;
  --n-171614: #171614;
  --n-1A1815: #1A1815;
  --n-1A1916: #1A1916;
  --n-1A1A18: #1A1A18;
  --n-211D1A: #211D1A;
  --n-221F1B: #221F1B;

  /* Linien */
  --line: #3A362F;
  --line-strong: #5A554C;
  --line-soft: rgba(255, 255, 255, .08);
  --n-3A342D: #3A342D;
  --n-4A443C: #4A443C;
  --n-575047: #575047;
  --n-6B6862: #6B6862;
  --n-6E665C: #6E665C;

  /* Schrift */
  --text-1: #F4F1ED;
  --text-2: #CFCAC2;
  --text-3: #9B968D;
  --text-max: #FFFFFF;
  --text-bright: #FAF9F7;
  --n-F1EFEB: #F1EFEB;
  --n-EFEDE8: #EFEDE8;
  --n-E4E1DB: #E4E1DB;
  --n-E4E0DA: #E4E0DA;
  --n-CFC9C0: #CFC9C0;
  --n-B4ADA4: #B4ADA4;
  --n-8A8681: #8A8681;

  /* Schrift mit Deckkraft: rgba(var(--ink-rgb), α) */
  --ink-rgb: 244, 241, 237;
  --ink2-rgb: 250, 246, 240;
  /* Umgekehrt: Schrift auf der Akzent-Fläche mit Deckkraft */
  --ink-inv-rgb: 26, 26, 24;
  --ink-inv2-rgb: 28, 26, 23;
  --ink3-rgb: 250, 249, 247;

  /* Schrift mit Deckkraft: auf Hell reicht dieselbe Deckkraft nicht (dunkle Schrift
     auf Weiss verliert schneller Kontrast als helle auf Schwarz). Darum je Stufe ein
     eigenes Token — dunkel exakt der alte Wert, hell dichter. */
  --ink-a32: rgba(244, 241, 237, 0.32);
  --ink-a34: rgba(244, 241, 237, 0.34);
  --ink-a35: rgba(244, 241, 237, 0.35);
  --ink-a36: rgba(244, 241, 237, 0.36);
  --ink-a4: rgba(244, 241, 237, 0.4);
  --ink-a42: rgba(244, 241, 237, 0.42);
  --ink-a44: rgba(244, 241, 237, 0.44);
  --ink-a45: rgba(244, 241, 237, 0.45);
  --ink-a46: rgba(244, 241, 237, 0.46);
  --ink-a48: rgba(244, 241, 237, 0.48);
  --ink-a5: rgba(244, 241, 237, 0.5);
  --ink-a52: rgba(244, 241, 237, 0.52);
  --ink-a55: rgba(244, 241, 237, 0.55);
  --ink-a56: rgba(244, 241, 237, 0.56);
  --ink-a58: rgba(244, 241, 237, 0.58);
  --ink-a6: rgba(244, 241, 237, 0.6);
  --ink-a62: rgba(244, 241, 237, 0.62);
  --ink-a66: rgba(244, 241, 237, 0.66);
  --ink-a68: rgba(244, 241, 237, 0.68);
  --ink-a7: rgba(244, 241, 237, 0.7);
  --ink-a72: rgba(244, 241, 237, 0.72);
  --ink-a74: rgba(244, 241, 237, 0.74);
  --ink-a75: rgba(244, 241, 237, 0.75);
  --ink-a76: rgba(244, 241, 237, 0.76);
  --ink-a78: rgba(244, 241, 237, 0.78);
  --ink-a8: rgba(244, 241, 237, 0.8);
  --ink-a82: rgba(244, 241, 237, 0.82);
  --ink-a84: rgba(244, 241, 237, 0.84);
  --ink-a85: rgba(244, 241, 237, 0.85);
  --ink-a86: rgba(244, 241, 237, 0.86);
  --ink-a88: rgba(244, 241, 237, 0.88);
  --ink-a9: rgba(244, 241, 237, 0.9);
  --ink3-a62: rgba(250, 249, 247, 0.62);
  --ink3-a85: rgba(250, 249, 247, 0.85);

  /* Logos: weiß gerechnete Marken folgen dem Modus */
  --logo-mono: brightness(0) invert(1);
  --logo-chip: grayscale(1) brightness(.3);

  /* Kennfarbe als Schrift */
  --kicker: #F7941E;
  --kicker-up: #FFB25C;
  --kicker-soft: #FFC9AD;
  --grad-a: #FFB25C;
  --grad-b: #E84E1B;
  --focus: #F7941E;

  /* Akzent-Sektion — im Dunkelmodus die eine helle Fläche je Seite */
  --accent-bg: #F4F1ED;
  --accent-bg-2: #FAF9F7;
  --accent-text: #1C1A17;
  --accent-text-2: #45413A;

  /* Kennfarben der Leistungen */
  --acc-orange: #F7941E;
  --acc-orange-up: #FFB25C;
  --acc-orange-deep: #E84E1B;
  --acc-gold: #D2BC92;
  --acc-gold-up: #E0CCA6;
  --acc-gold-deep: #7A6231;
  --acc-green: #78B443;
  --acc-green-up: #96BE0D;
  --acc-green-deep: #09632E;
  --acc-teal: #7FB0AC;
  --acc-teal-up: #95C0BC;
  --acc-teal-deep: #2C5C59;
  --acc-stone: #B4ADA4;
  --acc-stone-up: #CFC9C0;
  --acc-stone-deep: #575047;
  --acc-violet: #A89BCF;
  --acc-violet-up: #BAAFDB;
  --acc-violet-deep: #4F4382;
  --acc-blue: #8AA8CB;
  --acc-blue-up: #9FBAD8;
  --acc-blue-deep: #34567F;
  --acc-clay: #C4574A;
  --acc-olive: #9BAC50;
  --acc-forest: #2A5333;
  --acc-forest-web: #438A52;
  --acc-gold-deep2: #7D6228;
  --acc-violet-deep2: #6A55A8;
  --acc-violet-pale: #E4DEF3;
  --acc-blue-alt: #6FA8C7;

  /* Kennfarben mit Deckkraft: rgba(var(--acc-…-rgb), α) */
  --acc-orange-rgb: 247, 148, 30;
  --acc-gold-rgb: 210, 188, 146;
  --acc-gold-deep-rgb: 122, 98, 49;
  --acc-green-rgb: 120, 180, 67;
  --acc-green-deep-rgb: 9, 99, 46;
  --acc-teal-rgb: 127, 176, 172;
  --acc-teal-deep-rgb: 44, 92, 89;
  --acc-stone-rgb: 180, 173, 164;
  --acc-stone-deep-rgb: 87, 80, 71;
  --acc-violet-rgb: 168, 155, 207;
  --acc-violet-deep-rgb: 79, 67, 130;
  --acc-blue-rgb: 138, 168, 203;
  --acc-blue-deep-rgb: 52, 86, 127;

  --n-D8D4CC: #D8D4CC;
  --n-2A2926: #2A2926;
  --n-191715: #191715;
  --n-E7E3DD: #E7E3DD;
  --n-4A463F: #4A463F;
  --n-5C5A55: #5C5A55;
  --n-A3A09A: #A3A09A;
  --n-8A827A: #8A827A;
  --n-8A8378: #8A8378;
  --n-F2F1EF: #F2F1EF;
  --n-6E6C66: #6E6C66;
  --n-F5F2EC: #F5F2EC;
  --n-221F1D: #221F1D;
  --n-141211: #141211;
  --acc-salmon: #D98679;
  --acc-violet-on-accent: #5A4F8C;
  --kicker-on-accent: #B25900;
  --acc-teal-on-accent: #2A7974;
  --acc-green-on-accent: #2A7937;
  --acc-blue-on-accent: #2A4B79;
  --k5-fl-teal: #DFF1F0;
  --k5-fl-green: #DFF1E2;
  --k5-fl-blue: #DFE7F1;

  /* Tiefenstaffel der 3D-Überschrift — hinten nach vorn */
  --tiefe-0: #2A2826;
  --tiefe-1: #32302E;
  --tiefe-2: #3B3836;
  --tiefe-3: #43413E;
  --tiefe-4: #4B4945;
  --tiefe-5: #54514D;
  --tiefe-6: #5C5955;
  --tiefe-7: #64615D;
  --tiefe-8: #6D6965;
  --tiefe-9: #75726C;
  --tiefe-10: #7E7A74;
  --tiefe-11: #86827C;
  --tiefe-12: #8F8B85;
  --tiefe-13: #999590;
  --tiefe-14: #A29F9A;
  --tiefe-15: #ACA9A4;
  --tiefe-16: #B6B3AF;
  --tiefe-17: #C0BDB9;
  --tiefe-18: #C9C7C3;
  --tiefe-19: #D3D1CE;
  --tiefe-20: #DDDBD8;
  --tiefe-21: #E7E5E2;
  --tiefe-22: #F0EFED;
}

[data-theme="light"] {
  color-scheme: light;

  /* Schwebende Flächen: im Hellmodus ein weicher, warmer Schatten statt Schwarz. */
  --pop-schatten: 0 12px 32px rgba(28, 26, 23, .14);

  --bg-0: #FFFFFF;
  --bg-0-alt: #FFFFFF;
  --bg-0-rgb: 255, 255, 255;
  --bg-1: #F6F4F0;
  --chart-card-bg: var(--bg-1);
  --bg-1-alt: #F6F4F0;
  --bg-2: #EEEBE5;
  --bg-2-alt: #E9E5DE;
  --bg-3: #E6E2DA;

  --leistung-img-bg: var(--leistung-img-bg-light);

  --n-131110: #FCFBF9;
  --n-141311: #FCFBF9;
  --n-15130F: #FAF8F5;
  --n-151311: #FAF8F5;
  --n-161512: #F9F7F4;
  --n-16140F: #F8F6F2;
  --n-171614: #F8F6F3;
  --n-1A1815: #F7F5F1;
  --n-1A1916: #F7F5F1;
  --n-1A1A18: #F7F5F1;
  --n-211D1A: #F2EFEA;
  --n-221F1B: #F0EDE8;

  --line: #D9D4CB;
  --line-strong: #B8B2A7;
  --line-soft: rgba(0, 0, 0, .08);
  --n-3A342D: #D9D4CB;
  --n-4A443C: #C7C1B6;
  --n-575047: #B8B2A7;
  --n-6B6862: #A8A29A;
  --n-6E665C: #A49D93;

  --text-1: #1C1A17;
  --text-2: #45413A;
  --text-3: #6B665D;
  --text-max: #0E0D0C;
  --text-bright: #16140F;
  --n-F1EFEB: #232019;
  --n-EFEDE8: #26231D;
  --n-E4E1DB: #2E2B26;
  --n-E4E0DA: #2E2B26;
  --n-CFC9C0: #45413A;
  --n-B4ADA4: #575047;
  --n-8A8681: #6B665D;

  --ink-rgb: 28, 26, 23;
  --ink2-rgb: 22, 20, 15;
  --ink-inv-rgb: 247, 245, 241;
  --ink-inv2-rgb: 246, 244, 240;
  --ink3-rgb: 22, 20, 15;

  --ink-a32: rgba(28, 26, 23, 0.65);
  --ink-a34: rgba(28, 26, 23, 0.66);
  --ink-a35: rgba(28, 26, 23, 0.67);
  --ink-a36: rgba(28, 26, 23, 0.68);
  --ink-a4: rgba(28, 26, 23, 0.7);
  --ink-a42: rgba(28, 26, 23, 0.71);
  --ink-a44: rgba(28, 26, 23, 0.73);
  --ink-a45: rgba(28, 26, 23, 0.73);
  --ink-a46: rgba(28, 26, 23, 0.74);
  --ink-a48: rgba(28, 26, 23, 0.75);
  --ink-a5: rgba(28, 26, 23, 0.76);
  --ink-a52: rgba(28, 26, 23, 0.78);
  --ink-a55: rgba(28, 26, 23, 0.79);
  --ink-a56: rgba(28, 26, 23, 0.8);
  --ink-a58: rgba(28, 26, 23, 0.81);
  --ink-a6: rgba(28, 26, 23, 0.83);
  --ink-a62: rgba(28, 26, 23, 0.84);
  --ink-a66: rgba(28, 26, 23, 0.86);
  --ink-a68: rgba(28, 26, 23, 0.88);
  --ink-a7: rgba(28, 26, 23, 0.89);
  --ink-a72: rgba(28, 26, 23, 0.9);
  --ink-a74: rgba(28, 26, 23, 0.91);
  --ink-a75: rgba(28, 26, 23, 0.92);
  --ink-a76: rgba(28, 26, 23, 0.93);
  --ink-a78: rgba(28, 26, 23, 0.94);
  --ink-a8: rgba(28, 26, 23, 0.95);
  --ink-a82: rgba(28, 26, 23, 0.96);
  --ink-a84: rgba(28, 26, 23, 0.98);
  --ink-a85: rgba(28, 26, 23, 0.98);
  --ink-a86: rgba(28, 26, 23, 0.99);
  --ink-a88: rgba(28, 26, 23, 1);
  --ink-a9: rgba(28, 26, 23, 1);
  --ink3-a62: rgba(28, 26, 23, 0.84);
  --ink3-a85: rgba(28, 26, 23, 0.98);

  --logo-mono: brightness(0);
  --logo-chip: grayscale(1) brightness(0) invert(1);

  --kicker: #A84E00;
  --kicker-up: #B8560A;
  --kicker-soft: #A8431C;
  --grad-a: #D66400;
  --grad-b: #A83A10;
  --focus: #A84E00;

  --accent-bg: #1C1A17;
  --accent-bg-2: #16140F;
  --accent-text: #FAF9F7;
  --accent-text-2: #CFCAC2;

  --acc-orange: #A84E00;
  --acc-orange-up: #B8560A;
  --acc-orange-deep: #E84E1B;
  --acc-gold: #6F5A28;
  --acc-gold-up: #886F35;
  --acc-gold-deep: #D8C49B;
  --acc-green: #3F6B1E;
  --acc-green-up: #4E6B07;
  --acc-green-deep: #8FCF9F;
  --acc-teal: #2E5E5A;
  --acc-teal-up: #3E7470;
  --acc-teal-deep: #9FC9C6;
  --acc-stone: #5A5349;
  --acc-stone-up: #6E675C;
  --acc-stone-deep: #CFC9C0;
  --acc-violet: #514382;
  --acc-violet-up: #665795;
  --acc-violet-deep: #BDB2DC;
  --acc-blue: #3B5A80;
  --acc-blue-up: #4C6E94;
  --acc-blue-deep: #A6BEDA;
  --acc-clay: #8E3227;
  /* Wortmarke IndustryStock: die Markenfarben stehen in beiden Modi auf der
     Seitenfläche, nicht auf der Akzent-Sektion — auf Weiß darum die satten Töne. */
  --acc-olive: #5E6B22;
  --acc-forest: #2A5333;
  --acc-forest-web: #2E6B3C;
  --acc-gold-deep2: #E0CDA4;
  --acc-violet-deep2: #C3B8E2;
  --acc-violet-pale: #332B52;
  --acc-blue-alt: #2F6A87;

  --acc-orange-rgb: 168, 78, 0;
  --acc-gold-rgb: 111, 90, 40;
  --acc-gold-deep-rgb: 216, 196, 155;
  --acc-green-rgb: 63, 107, 30;
  --acc-green-deep-rgb: 143, 207, 159;
  --acc-teal-rgb: 46, 94, 90;
  --acc-teal-deep-rgb: 159, 201, 198;
  --acc-stone-rgb: 90, 83, 73;
  --acc-stone-deep-rgb: 207, 201, 192;
  --acc-violet-rgb: 81, 67, 130;
  --acc-violet-deep-rgb: 189, 178, 220;
  --acc-blue-rgb: 59, 90, 128;
  --acc-blue-deep-rgb: 166, 190, 218;

  --n-D8D4CC: #4A443C;
  --n-2A2926: #E5E2DD;
  --n-191715: #F7F5F2;
  --n-E7E3DD: #2B2823;
  --n-4A463F: #C4BEB4;
  --n-5C5A55: #B0ABA3;
  --n-A3A09A: #6B665D;
  --n-8A827A: #6B665D;
  --n-8A8378: #6B665D;
  --n-F2F1EF: #232019;
  --n-6E6C66: #A8A29A;
  --n-F5F2EC: #1C1A17;
  --n-221F1D: #F0EDE8;
  --n-141211: #FCFBF9;
  --acc-salmon: #A03A2A;
  --acc-violet-on-accent: #BDB2DC;
  --kicker-on-accent: #F7941E;
  --acc-teal-on-accent: #9FC9C6;
  --acc-green-on-accent: #8FCF9F;
  --acc-blue-on-accent: #A6BEDA;
  --k5-fl-teal: #1B3A38;
  --k5-fl-green: #1B3A24;
  --k5-fl-blue: #1B2A3A;

  --tiefe-0: #E6E3DE;
  --tiefe-1: #DDDAD5;
  --tiefe-2: #D4D1CC;
  --tiefe-3: #CBC8C3;
  --tiefe-4: #C3C0BA;
  --tiefe-5: #BAB7B1;
  --tiefe-6: #B1AEA8;
  --tiefe-7: #A8A59F;
  --tiefe-8: #9F9C96;
  --tiefe-9: #96938D;
  --tiefe-10: #8D8A84;
  --tiefe-11: #85827C;
  --tiefe-12: #7C7973;
  --tiefe-13: #73706A;
  --tiefe-14: #6A6761;
  --tiefe-15: #615E58;
  --tiefe-16: #58554F;
  --tiefe-17: #4F4C46;
  --tiefe-18: #46433D;
  --tiefe-19: #3E3B34;
  --tiefe-20: #35322B;
  --tiefe-21: #2C2922;
  --tiefe-22: #232019;
}


/* ── Akzent-Sektion ─────────────────────────────────────────────────────────
   Die eine „andere" Fläche je Seite. Dunkel ist sie hell, hell ist sie dunkel. */
.section--accent {
  background: var(--accent-bg);
  color: var(--accent-text);
}

/* ── Kopf ───────────────────────────────────────────────────────────────────
   Bleibt in beiden Modi dunkel. data-theme="dark" auf der Leiste und dem
   Mobilmenü belegt alle Tokens darin mit dem Dunkel-Satz. Auf hellen Seiten
   ergibt das eine klare Kante unter dem Kopf — gewollt. */
nav[aria-label="Hauptnavigation"],
[data-dmvnav-sheet],
[data-dmvnav-panel] {
  color-scheme: dark;
}

/* Im Hellmodus steht die Leiste immer voll deckend dunkel — transluzent über
   Weiß wirkt sie schmutzig, transparent verschwindet die weiße Schrift. Die
   harte Kante darunter ist gewollt. Im Dunkelmodus bleibt alles wie gehabt:
   am Seitenanfang transparent, ab 24px Scroll deckend. */
:root[data-theme="light"] nav[aria-label="Hauptnavigation"] {
  background: #0E0D0C !important;
  border-bottom-color: rgba(244, 241, 237, .1) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ── Logos ──────────────────────────────────────────────────────────────────
   Weiße Mono-Logos (nur weiße Pixel plus Transparenz) werden im Hellmodus
   invertiert. Farbige Original-Logos bleiben unangetastet. Keine weißen
   Kacheln hinter Logos, in keinem Modus. */
[data-theme="light"] .logo--mono {
  filter: invert(1);
}

[data-theme="light"] .logo--mono[data-logo-dimmed] {
  filter: invert(1) opacity(.72);
}

/* Farbdateien, die per Filter eingefärbt werden: dunkel weiß, hell schwarz.
   --logo-mono trägt den Moduswechsel, kein zusätzliches invert im Hellmodus. */
.logo--farbe {
  filter: var(--logo-mono);
}

/* Laufleiste im Hero: auf hellem Grund minimal kräftiger als auf dunklem. */
[data-logospur] img {
  opacity: .75;
}

[data-theme="light"] [data-logospur] img {
  opacity: .8;
}

.logo--color {
  filter: none;
}

/* Logos im Kopf und im Mobilmenü bleiben weiß — der Kopf ist immer dunkel. */
nav[aria-label="Hauptnavigation"] .logo--mono,
[data-dmvnav-sheet] .logo--mono,
[data-dmvnav-panel] .logo--mono {
  filter: none !important;
}

/* ── Bilder mit eingebranntem dunklem Hintergrund ───────────────────────────
   Dunkel komponierte Fassung nur im Dunkelmodus, freigestellte Fassung mit
   CSS-Verlauf nach --bg-1 im Hellmodus. */
[data-theme="dark"] [data-img-light] { display: none !important; }
[data-theme="light"] [data-img-dark] { display: none !important; }

[data-theme="light"] [data-img-fade] {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}

/* ── Umschalter ─────────────────────────────────────────────────────────────
   Icon-Knopf 40×40, rund, im immer dunklen Kopf. Deshalb feste Dunkelwerte:
   weißes Icon, Rahmen --line-strong des Dunkel-Satzes, Fokusring in Orange. */
[data-theme-toggle] {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid #5A554C;
  border-radius: 50%;
  background: transparent;
  color: #F4F1ED;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background .15s ease, border-color .15s ease;
}

[data-theme-toggle]:hover {
  background: rgba(244, 241, 237, .08);
  border-color: #7A736A;
}

[data-theme-toggle]:focus-visible {
  outline: 2px solid #F7941E;
  outline-offset: 2px;
}

[data-theme-toggle] [data-theme-ico] {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition: opacity .15s ease;
}

[data-theme-toggle] svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:root[data-theme="dark"] [data-theme-ico="moon"],
:root[data-theme="light"] [data-theme-ico="sun"] { opacity: 0; }
:root[data-theme="dark"] [data-theme-ico="sun"],
:root[data-theme="light"] [data-theme-ico="moon"] { opacity: 1; }

/* Statusmeldung für Screenreader — sichtbar nur für Hilfstechnik. */
[data-theme-status] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Übergang beim Umschalten ───────────────────────────────────────────────
   Erst nach der Erstdarstellung, damit die Seite beim Öffnen nicht einfärbt.
   Die Klasse liegt nur für die Dauer des Wechsels an. */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .theme-transition,
  .theme-transition *,
  .theme-transition *::before,
  .theme-transition *::after {
    transition: none !important;
  }
}

/* ── Textkante = Logokante (20.10.2026) ─────────────────────────────────────────
   Ein Container fuer Kopf und Inhalt: 1200px inkl. 32px Seitenrand (Inhalt 1136px),
   ab 1920px 1280px (Inhalt 1216px). Die bisherigen Inhaltsbreiten 1152px / 1200px+24px
   werden darauf umgelegt; Sektionen tragen keine eigene Einrueckung. */
:root{--kante-max:1200px;--kante-rand:32px;--kante-inhalt:calc(var(--kante-max) - 2 * var(--kante-rand))}
@media (min-width:1920px){:root{--kante-max:1280px}}
nav[aria-label="Hauptnavigation"]>div{max-width:var(--kante-max)!important;padding-left:var(--kante-rand)!important;padding-right:var(--kante-rand)!important;box-sizing:border-box}
@media (min-width:769px){
body section,body header[data-screen]{padding-left:var(--kante-rand)!important;padding-right:var(--kante-rand)!important}
body section [style*="max-width:1152px"],body header[data-screen] [style*="max-width:1152px"],[data-k-wrap],[data-faq-grid]{max-width:var(--kante-inhalt)!important}
body section [style*="max-width:1200px"][style*="padding:0 24px"]{max-width:var(--kante-inhalt)!important;padding-left:0!important;padding-right:0!important}
/* Video-Reihen: Einzug links = Logokante, rechnet ref-leiste.js (data-kante-px) */
body section [style*="calc((100vw - 1200px) / 2 + 24px)"]:not([data-ref-track]){padding-left:0!important;padding-right:0!important;max-width:var(--kante-inhalt)!important;margin-left:auto!important;margin-right:auto!important}
body section [data-ref-dots][style*="max-width:1200px"]{max-width:var(--kante-inhalt)!important;padding-left:0!important;padding-right:0!important}
#gespraech [style*="max-width:1152px"]{max-width:var(--kante-inhalt)!important}
}

/* ── Video-Referenzen: Kachel ohne Rahmen (20.10.2026) — das Poster ist die Kante ── */
html body [data-ref-track]>article{padding:0!important;background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;transform:none!important}
html body [data-ref-track]>article:hover{transform:none!important;box-shadow:none!important}
html body [data-ref-track]>article>div:first-child{border-radius:16px!important;width:100%;transition:transform .2s cubic-bezier(.16,1,.3,1)}
html body [data-ref-track]>article:hover>div:first-child{transform:translateY(-2px)}
html body [data-ref-track]>article>div:last-child{padding-left:0!important;padding-right:0!important}
@media (prefers-reduced-motion:reduce){html body [data-ref-track]>article:hover>div:first-child{transform:none}}

/* Kicker → H2 sitewide (Prompt 20): Kicker 16 px unten, H2 ohne Abstand oben, 16 px zum folgenden Absatz.
   Hero-Eyebrows über der H1 sind nicht betroffen (alle Regeln verlangen eine folgende H2). */
:is([data-cd-kicker],[data-kicker],[data-split-kicker],p[style*="text-transform:uppercase"]):has(+ h2){margin:0 0 16px!important}
:is([data-cd-kicker],[data-kicker],[data-split-kicker],p[style*="text-transform:uppercase"]) + h2{margin-top:0!important}
div:has(> :is([data-cd-kicker],[data-kicker]):last-child):has(+ h2){margin-bottom:16px!important}
div:has(> :is([data-cd-kicker],[data-kicker]):last-child):has(+ h2) > :is([data-cd-kicker],[data-kicker]):last-child{margin-bottom:0!important}
div:has(> :is([data-cd-kicker],[data-kicker]):last-child) + h2{margin-top:0!important}
:is([data-cd-kicker],[data-kicker],[data-split-kicker],p[style*="text-transform:uppercase"]) + h2:has(+ p){margin-bottom:16px!important}
:is([data-cd-kicker],[data-kicker],[data-split-kicker],p[style*="text-transform:uppercase"]) + h2 + p{margin-top:0!important}
div:has(> :is([data-cd-kicker],[data-kicker]):last-child) + h2:has(+ p){margin-bottom:16px!important}
div:has(> :is([data-cd-kicker],[data-kicker]):last-child) + h2 + p{margin-top:0!important}