/* Übergangsfassung, erzeugt aus EXT:kp_productpage/Resources/Public/Css/b2b-tokens.css (uebergang-export.cjs). */
/* b2b-tokens.css – Design-Tokens der dunklen Produktseite (Stand 2026-10-15)
   Quelle: OFF LABEL Farbvergleich V2 + bestehendes CD (Fira Sans Condensed). Geändert am 2026-10-15:
   Akzent für brix2bytes ist Lime statt Petrol, für en:predict Signal-Plum statt Plum (beide wirkten
   auf Experience Blue zu gedeckt); der Status „gut“ wechselt dafür von Lime zu Signal-Petrol.
   Dazu ein Rollen-Satz für helle Sektionen (.bg-light).
   Die Tokens gelten nur innerhalb von .theme-dark: auf der Produktseite am body, auf anderen Seiten
   nur am einzelnen Einstiegsmodul. Außerhalb ändert sich nichts.
   Nur Rollen verwenden (--accent, --ai, --good, --bad, --warn); Hexwerte stehen nur hier. */

/* Fira Mono (Daten-Labels) und Fira Sans Condensed 300 (Leads), SIL Open Font License, siehe ../Fonts/OFL.txt.
   400/500/600 der Fira Sans Condensed lädt das Sitepackage bereits. */
@font-face {
  font-family: "Fira Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../Fonts/fira-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fira Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../Fonts/fira-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../Fonts/fira-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fira Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../Fonts/fira-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans Condensed";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../Fonts/fira-sans-condensed-latin-ext-300-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fira Sans Condensed";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../Fonts/fira-sans-condensed-latin-300-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.theme-dark,
body:has(.b2b-uebergang) {
  color-scheme: dark;
  --bg-deep: #030E2A; --bg: #052453; --bg-raised: #0A2F66; --bg-panel: #07204A;
  --ink: #052453;
  --line: rgba(242, 238, 227, .12); --line-strong: rgba(242, 238, 227, .26);
  --fg: #F2EEE3; --fg-muted: #C5C3BE; --fg-dim: #8E95A8;
  --sand: #D4C1B2; --sand-deep: #B59E8B;
  --petrol: #017D87; --petrol-mid: #60AFB6; --petrol-light: #93CACD; --petrol-signal: #3CC8CE;
  --plum: #A694C6; --plum-light: #DDD1E9; --plum-deep: #6F5C94;
  --plum-signal: #B79DEE; --plum-signal-light: #DCCFFB; --plum-ink: #57467A;
  --koral: #EA5E5D; --koral-light: #F9C7C0;
  --lime: #ACCE6D; --lime-light: #D7E6BB;
  --lime-signal-light: #C4E28C; --lime-deep: #5B7A22; --lime-ink: #4A651B;
  --orange: #EE721A;
  --paper: #F2EEE3; --paper-raised: #FFFFFF; --paper-field: #FBFAF6;
  /* Rollen */
  --accent: var(--lime); --accent-text: var(--lime-signal-light); --accent-deep: var(--lime-deep); --accent-ink: var(--bg-deep);
  --accent-glow: rgba(172, 206, 109, .26);
  --ai: var(--plum-signal); --ai-text: var(--plum-signal-light); --ai-deep: var(--plum-deep); --ai-glow: rgba(183, 157, 238, .26);
  /* Datenvisualisierung (Sankey): Petrol der Palette. Lime wird als halbtransparente Fläche auf
     Experience Blue trüb; Petrol bleibt klar und ruhiger als das Signal-Petrol des Status. */
  --viz: var(--petrol-mid); --viz-text: var(--petrol-light);
  /* Status „gut“ in Signal-Petrol, damit er sich vom Lime-Akzent abhebt */
  --good: var(--petrol-signal); --bad: var(--koral); --bad-text: var(--koral-light); --warn: var(--sand);
  --display: "Fira Sans Condensed", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --body: "Fira Sans Condensed", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --mono: "Fira Mono", ui-monospace, Consolas, monospace;
  --max: 1200px; --gut: clamp(16px, 4.5vw, 56px); --rail: clamp(14px, 3vw, 34px);
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --s6: clamp(4rem, 9vw, 7.5rem);
}

/* Einstiege im en:predict-Kontext: der ganze Akzent wird Plum. */
.theme-dark.accent-ai {
  --accent: var(--plum-signal); --accent-text: var(--plum-signal-light); --accent-deep: var(--plum-deep); --accent-glow: var(--ai-glow);
}

/* Helle Sektion (Hintergrund „Hell“): Sandfläche mit Experience-Blue-Schrift. Die Module lesen nur
   Rollen und kehren sich dadurch um; Akzente nehmen die dunklen Stufen, damit Text AA erreicht
   (Lime-Ink 5,7:1 auf Sand, Weiß auf Lime-Deep 4,9:1). */
.theme-dark .b2b-section.bg-light,
body:has(.b2b-uebergang .b2b-section) .formWrapper,
body:has(.b2b-uebergang .b2b-section) :has(> .form-confirmation-text) {
  color-scheme: light;
  --bg: var(--paper); --bg-deep: var(--paper-raised); --bg-panel: var(--paper-field); --bg-raised: var(--paper-raised);
  --line: rgba(5, 36, 83, .14); --line-strong: rgba(5, 36, 83, .5);
  --fg: #052453; --fg-muted: #2E4166; --fg-dim: #4E5A78;
  --accent: var(--lime-deep); --accent-text: var(--lime-ink); --accent-ink: #FFFFFF; --accent-glow: rgba(91, 122, 34, .16);
  --ai: var(--plum-deep); --ai-text: var(--plum-ink); --ai-glow: rgba(111, 92, 148, .16);
  --good: var(--petrol); --bad-text: #A82A29;
  --viz: var(--petrol); --viz-text: #00646C;
}