/* Übergangsfassung, erzeugt aus EXT:kp_productpage/Resources/Public/Css/b2b-components.css (uebergang-export.cjs). */
/* b2b-components.css – Module der dunklen Produktseite und der Einstiege.
   Alles unter .theme-dark; Klassen, die Bootstrap 3 schon belegt (btn, panel, lead, small, badge,
   label, slider), tragen das Präfix „b-“. */

/* ---------- Grundtypografie im dunklen Bereich (setzt die Website-Vorgaben zurück) ---------- */
.theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4 {
  font-family: var(--display);
  line-height: 1.04;
  letter-spacing: -.008em;
  margin: 0;
  color: inherit;
  text-transform: none;
  text-wrap: balance;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.theme-dark h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); font-weight: 600; line-height: 1.08; }
.theme-dark h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); font-weight: 600; }
.theme-dark h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: 0; }
.theme-dark h1 em, .theme-dark h2 em { font-style: normal; color: var(--accent-text); }
.theme-dark .b2b-section.ai h2 em { color: var(--ai-text); }
.theme-dark .h-sub { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.theme-dark p { margin: 0; font-size: inherit; line-height: inherit; }
.theme-dark ul, .theme-dark ol { margin: 0; font-size: inherit; line-height: inherit; }
.theme-dark a { color: inherit; }
.theme-dark a:hover { text-decoration: none; }
.theme-dark img, .theme-dark svg { max-width: 100%; }
.theme-dark strong, .theme-dark b { font-family: inherit; }

/* Dachzeile: schlichte Zeile in Akzentfarbe, ohne Versalien und Linie */
.theme-dark .eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  font: 600 1.02rem/1.3 var(--display);
  color: var(--accent-text);
  margin: 0 0 var(--s2);
  text-wrap: balance;
}
.theme-dark .eyebrow.ai,
.theme-dark .b2b-section.ai .eyebrow { color: var(--ai-text); }
.theme-dark .b-badge {
  font: 600 .8rem/1 var(--display);
  padding: .3rem .45rem;
  border-radius: 2px;
  background: var(--accent);
  color: var(--accent-ink);
}

.theme-dark .b-lead {
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 58ch;
  margin-top: var(--s3);
}
.theme-dark .b-lead p + p { margin-top: .8em; }
.theme-dark .b-lead strong, .theme-dark .b-lead b { color: var(--fg); font-weight: 500; }
.theme-dark .b-lead--sm { font-size: 1.05rem; margin-top: 1rem; }
.theme-dark .b-note { font-size: .86rem; line-height: 1.5; color: var(--fg-dim); margin-top: .8rem; }

.theme-dark .triad {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  margin-top: var(--s4);
  font: 600 1.15rem/1.3 var(--display);
}
.theme-dark .triad span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: .55rem;
  vertical-align: 1px;
}
.theme-dark .triad--sm { margin-top: 0; font-size: 1rem; }

.theme-dark .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Buttons ---------- */
/* Gefüllte Knöpfe fallen über Fläche und Größe auf, ohne Schein; der Pfeil rückt beim Überfahren nach. */
.theme-dark .b-btn {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 54px;
  padding: 0 1.6rem;
  border-radius: 4px;
  font: 600 1.06rem/1.2 var(--body);
  letter-spacing: .01em;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
  white-space: nowrap;
}
.theme-dark .b-btn svg { width: 20px; height: 20px; flex: none; transition: transform .18s; }
.theme-dark .b-btn:hover svg,
.theme-dark .b-btn:focus-visible svg { transform: translateX(3px); }
.theme-dark .b-btn--primary { background: var(--accent); color: var(--accent-ink); }
.theme-dark .b-btn--primary:hover,
.theme-dark .b-btn--primary:focus { background: var(--accent-text); color: var(--accent-ink); }
.theme-dark .b-btn--ghost { background: transparent; color: var(--fg); border-color: var(--fg-muted); }
.theme-dark .b-btn--ghost:hover,
.theme-dark .b-btn--ghost:focus { border-color: var(--fg); color: var(--fg); background: var(--accent-glow); }
.theme-dark .b-btn--ai { background: var(--ai); color: var(--accent-ink); }
.theme-dark .b-btn--ai:hover,
.theme-dark .b-btn--ai:focus { background: var(--ai-text); color: var(--accent-ink); }
.theme-dark .b-btn--sm { min-height: 44px; padding-inline: 1.15rem; font-size: .95rem; }
.theme-dark .dot-ai { width: 8px; height: 8px; border-radius: 50%; background: var(--ai); flex: none; }
.theme-dark .cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--s3); }
/* Auf dem Smartphone sind beide Knöpfe im Hero gleich breit. */
@media (max-width: 480px) {
  .theme-dark .hero-grid .cta-row .b-btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Hero ---------- */
.theme-dark .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 960px) { .theme-dark .hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Gebäude und Cloud (Bühne) ----------
   Quartier in Isometrie, Datenströme steigen in die brix2bytes-Cloud. Geometrie aus dem
   CloudSceneProcessor; hier nur Farben und Bewegung. Ablauf wie im 3D-Stadtmodell: erst wachsen die
   Häuser, dann erscheint das Netz, dann laufen Pakete. Ohne Bewegung (reduced motion, siehe unten)
   steht alles fertig da, das Netz bleibt als ruhige Linie, Pakete und Autos sind aus. */
.theme-dark .scene-wrap { position: relative; min-width: 0; container: scene / inline-size; }
.theme-dark .scene-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font: 500 .92rem/1.3 var(--body);
  color: var(--fg-dim);
  margin-bottom: .5rem;
}
.theme-dark .scene-head b { color: var(--fg-muted); font-weight: 500; }
@keyframes b2b-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.theme-dark .scene svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Grundplatte mit Raster, Straßen, Schatten und Verkehr */
.theme-dark .scene .plate-top { fill: rgba(96, 175, 182, .07); }
.theme-dark .scene .grid { fill: none; stroke: rgba(147, 202, 205, .1); stroke-width: .6; }
.theme-dark .scene .plate-l { fill: #0B2550; }
.theme-dark .scene .plate-r { fill: #06183A; }
.theme-dark .scene .road { fill: rgba(242, 238, 227, .055); }
.theme-dark .scene .shadow { fill: rgba(3, 14, 42, .5); }
.theme-dark .scene .car { fill: #E4F4F5; opacity: 0; }

/* Häuser: Kulisse gedeckt, nur die Anlagen-Häuser sind gesättigt */
.theme-dark .scene .ctx .f-top { fill: #2A4470; }
.theme-dark .scene .ctx .f-roof { fill: #233B63; }
.theme-dark .scene .ctx .f-l { fill: #1C3359; }
.theme-dark .scene .ctx .f-r { fill: #132648; }
.theme-dark .scene .hot .f-top { fill: #5287CC; }
.theme-dark .scene .hot .f-roof { fill: #3F72B5; }
.theme-dark .scene .hot .f-l { fill: #2D5DA0; }
.theme-dark .scene .hot .f-r { fill: #1D4482; }
.theme-dark .scene .hot .r-bl { fill: #6596D6; }
.theme-dark .scene .hot .r-br { fill: #578AC9; }
.theme-dark .scene .hot .r-l { fill: #4677BA; }
.theme-dark .scene .hot .r-r { fill: #2F5E9E; }
.theme-dark .scene .f-top,
.theme-dark .scene [class^="r-"] { stroke: rgba(242, 238, 227, .24); stroke-width: .6; stroke-linejoin: round; }
.theme-dark .scene .win { fill: rgba(207, 230, 247, .2); }
.theme-dark .scene .ctx [fill^="url"] { opacity: .55; }
.theme-dark .scene .lit { fill: #DCEEF9; opacity: .9; }
.theme-dark .scene .lit.alarm { fill: var(--bad); opacity: 1; }
.theme-dark .scene .solar { fill: #0D2A5A; stroke: rgba(147, 202, 205, .4); stroke-width: .4; }
.theme-dark .scene .skylight { fill: rgba(207, 230, 247, .4); }
.theme-dark .scene .tree-c { fill: #22606B; }
.theme-dark .scene .tree-h { fill: #348087; }
.theme-dark .scene .tree-shadow { fill: rgba(3, 14, 42, .45); }
.theme-dark .scene .ring { fill: none; stroke: var(--bad); stroke-width: 1.5; opacity: 0; }

/* Cloud: die Bildmarke brix2bytes in Negativfassung. Navy (#123067) hätte auf --bg nur 1,2:1 Kontrast,
   der rechte Pfeiler verschwände; es wird hell wie der Text. Gleichfarbige Kontur schließt die
   Haarfugen zwischen den Flächen. */
.theme-dark .scene .glow-a { stop-color: #ACCE6D; stop-opacity: .24; }
.theme-dark .scene .glow-b { stop-color: #ACCE6D; stop-opacity: 0; }
.theme-dark .scene .b2b-mark path { stroke-width: .3; stroke-linejoin: round; }
.theme-dark .scene .mark-sky { fill: #A5C4FF; stroke: #A5C4FF; }
.theme-dark .scene .mark-blue { fill: #4885F6; stroke: #4885F6; }
.theme-dark .scene .mark-navy { fill: var(--fg); stroke: var(--fg); }
.theme-dark .scene .mark-orange { fill: #F07D00; stroke: #F07D00; }
.theme-dark .scene .mark-yellow { fill: #FFC700; stroke: #FFC700; }

/* Ströme wie im Stadtmodell: punktierte Leitung, deren Punkte stetig zur Cloud wandern, darauf
   Paketzüge aus kleinen Quadraten. Hin laufen Messdaten im Blau der Bildmarke, zurück kommt ein kurzer
   Befehl im Akzent. Die Züge bewegt SMIL (Zeiten aus dem CloudSceneProcessor); Strichmuster und
   Pfadlänge stehen als Attribute am Pfad, hier deshalb kein stroke-dasharray für .pk. */
.theme-dark .scene .line,
.theme-dark .scene .dots,
.theme-dark .scene .pk { fill: none; stroke-linecap: butt; }
.theme-dark .scene .line { stroke: #A5C4FF; stroke-width: 1; opacity: .2; }
.theme-dark .scene .dots { stroke: #A5C4FF; stroke-width: 1.9; opacity: .5; stroke-dasharray: 2.4 3.6; }
.theme-dark .scene .pk { stroke-width: 4; }
.theme-dark .scene .pk-up { stroke: #A5C4FF; }
.theme-dark .scene .pk-down { stroke: var(--accent-text); }
/* Wird das Muster auf dem Bildschirm zu eng, flimmert es; dann steht die Leitung im Mittelwert. */
@container scene (max-width: 360px) {
  .theme-dark .scene .dots { stroke-dasharray: none; stroke-width: 1; opacity: .25; }
}

/* Leuchtpunkte auf den Anlagen-Häusern; dieselbe Nummer trägt der Chip in der Legende */
.theme-dark .scene .mast { stroke: rgba(242, 238, 227, .55); stroke-width: 1; }
.theme-dark .scene .halo { opacity: .22; }
.theme-dark .scene .num { font: 600 10px var(--body); fill: var(--bg-deep); }

/* Legende: Score-Chips unter der Grafik, schmal als Liste */
.theme-dark .scene-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .5rem;
  margin: .4rem 0 0;
}
.theme-dark .scene-chips li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .1rem .65rem;
  align-items: center;
  padding: .5rem .75rem;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: rgba(3, 14, 42, .55);
  transition: border-color .18s, background .18s;
}
.theme-dark .scene-chips i {
  grid-row: span 2;
  width: 22px; height: 22px; border-radius: 50%;
  font: 600 .78rem/22px var(--body); font-style: normal; text-align: center; color: var(--bg-deep);
  background: var(--good);
}
.theme-dark .scene-chips i.status-warn { background: var(--warn); }
.theme-dark .scene-chips i.status-bad { background: var(--bad); }
.theme-dark .scene-chips span { font: 400 .86rem/1.25 var(--body); color: var(--fg-muted); overflow-wrap: anywhere; }
.theme-dark .scene-chips b { font: 600 1.08rem/1.15 var(--display); color: var(--fg); }
@container scene (max-width: 400px) {
  .theme-dark .scene-chips { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .theme-dark .scene-chips li { grid-template-columns: auto minmax(0, 1fr) auto; padding: .4rem .6rem; }
  .theme-dark .scene-chips i { grid-row: auto; }
  .theme-dark .scene-chips b { font-size: 1rem; white-space: nowrap; }
}

/* Chip und Haus zeigen aufeinander: Überfahren hebt das Gegenstück hervor */
.theme-dark .scene .bldg.hot,
.theme-dark .scene .beacon { transition: filter .2s; }
.theme-dark .scene:has(.scene-chips li:nth-child(1):hover) .b1,
.theme-dark .scene:has(.scene-chips li:nth-child(2):hover) .b2,
.theme-dark .scene:has(.scene-chips li:nth-child(3):hover) .b3,
.theme-dark .scene:has(.scene-chips li:nth-child(4):hover) .b4,
.theme-dark .scene:has(.scene-chips li:nth-child(5):hover) .b5 { filter: brightness(1.3); }
.theme-dark .scene:has(.b1:hover) .scene-chips li:nth-child(1),
.theme-dark .scene:has(.b2:hover) .scene-chips li:nth-child(2),
.theme-dark .scene:has(.b3:hover) .scene-chips li:nth-child(3),
.theme-dark .scene:has(.b4:hover) .scene-chips li:nth-child(4),
.theme-dark .scene:has(.b5:hover) .scene-chips li:nth-child(5),
.theme-dark .scene-chips li:hover { border-color: var(--accent); background: var(--accent-glow); }

/* Bewegung */
.theme-dark .scene .bldg,
.theme-dark .scene .tree { animation: b2b-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.theme-dark .scene .g1 { animation-delay: .1s; }
.theme-dark .scene .g2 { animation-delay: .2s; }
.theme-dark .scene .g3 { animation-delay: .3s; }
.theme-dark .scene .g4 { animation-delay: .4s; }
.theme-dark .scene .g5 { animation-delay: .5s; }
.theme-dark .scene .g6 { animation-delay: .6s; }
.theme-dark .scene .g7 { animation-delay: .7s; }
@keyframes b2b-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.theme-dark .scene .shadow { animation: b2b-fade-in 1s .6s both; }
.theme-dark .scene .line { animation: b2b-fade-in 1.2s 1.2s both; }
.theme-dark .scene .beacon { animation: b2b-fade-in .6s 1s both; }
@keyframes b2b-fade-in { from { opacity: 0; } }
/* Punkte wandern um eine Periode (6) je Takt: 15 Einheiten/s, ein Viertel des Paket-Tempos wie im
   Stadtmodell. Messwerte fließen immer, die Paketzüge sind nur die sichtbaren Schübe darauf. */
.theme-dark .scene .dots { animation: b2b-fade-in 1.2s 1.2s both, b2b-march .4s linear infinite; }
@keyframes b2b-march { to { stroke-dashoffset: -6; } }

.theme-dark .scene .cloud-glow { animation: b2b-breathe 6s ease-in-out infinite; }
.theme-dark .scene .halo { animation: b2b-breathe 3.2s ease-in-out infinite; }
@keyframes b2b-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.theme-dark .scene .tw1 { animation: b2b-twinkle 7s ease-in-out infinite; }
.theme-dark .scene .tw2 { animation: b2b-twinkle 11s ease-in-out -4s infinite; }
@keyframes b2b-twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .2; } }
.theme-dark .scene .lit.alarm { animation: b2b-blink 1.6s infinite; }
.theme-dark .scene .ring { animation: b2b-ping 3.2s 2s infinite; }
@keyframes b2b-ping { 0%, 40% { opacity: 0; r: 3; } 48% { opacity: .9; r: 3; } 80% { opacity: 0; r: 16; } 100% { opacity: 0; } }
.theme-dark .scene .car--x { animation: b2b-car-x 16s linear infinite; }
.theme-dark .scene .car--y { animation: b2b-car-y 19s linear -6s infinite; }
.theme-dark .scene .car--late { animation-delay: -9s; }
/* Auf dem Smartphone weniger Dauerbewegung (Akku): die Hälfte der Fenster bleibt ruhig, keine Autos.
   Die Paketzüge laufen weiter. */
@media (max-width: 600px) {
  .theme-dark .scene .lit.tw2 { animation: none; }
  .theme-dark .scene .car { display: none; }
}
@keyframes b2b-car-x { 0% { opacity: 0; transform: none; } 6%, 94% { opacity: .6; } 100% { opacity: 0; transform: translateX(234px); } }
@keyframes b2b-car-y { 0% { opacity: 0; transform: none; } 6%, 94% { opacity: .6; } 100% { opacity: 0; transform: translateY(234px); } }
/* Außerhalb des Bildes angehalten (b2b.js, dort auch SMIL), wie das Stadtmodell ohne Sichtbarkeit nicht rendert */
.theme-dark .scene.is-paused *,
.theme-dark .scene.is-paused *::before { animation-play-state: paused; }

.theme-dark .status-good { fill: var(--good); }
.theme-dark .status-warn { fill: var(--warn); }
.theme-dark .status-bad { fill: var(--bad); }

/* ---------- Kennzahlenleiste ----------
   Offene Reihe mit Linie über jeder Zahl; die Spaltenzahl folgt der Anzahl der Einträge. */
.theme-dark .proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
}
.theme-dark .proof > div { padding-top: 1rem; border-top: 1px solid var(--line-strong); min-width: 0; }
.theme-dark .proof b {
  display: block;
  font: 600 clamp(1.9rem, 3.2vw, 2.5rem)/1 var(--display);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.theme-dark .proof sup { font-size: .5em; color: var(--fg-muted); vertical-align: .55em; margin-left: .1em; top: 0; }
/* Das Sternchen an „bis 25 %*“ führt zur Fußnote in der en:predict-Sektion (b2b.js). */
.theme-dark .proof sup .fn-link { color: inherit; text-decoration: none; }
.theme-dark .proof sup .fn-link:hover,
.theme-dark .proof sup .fn-link:focus-visible { text-decoration: underline; }
.theme-dark .fn-target { scroll-margin-top: 50vh; }
.theme-dark .fn-target:target,
.theme-dark .fn-target:focus { color: var(--fg); outline: none; }
.theme-dark .proof span { display: block; color: var(--fg-muted); margin-top: .5rem; font-size: .95rem; line-height: 1.4; max-width: 30ch; }

/* ---------- Paare: heute / mit Produkt ---------- */
.theme-dark .pairs { border-top: 1px solid var(--line-strong); }
.theme-dark .pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}
.theme-dark .pair h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.theme-dark .pair .lab,
.theme-dark .node .lab,
.theme-dark .layer .lab,
.theme-dark .pk .tier,
.theme-dark .addon .tier {
  display: block;
  font: 600 .88rem/1.3 var(--display);
  color: var(--fg-dim);
  margin-bottom: .35rem;
}
.theme-dark .pair .after .lab { color: var(--accent-text); }
.theme-dark .pair p { font-size: .97rem; color: var(--fg-muted); }
.theme-dark .pair .after p { color: var(--fg); }
@media (max-width: 560px) { .theme-dark .pair { grid-template-columns: minmax(0, 1fr); gap: .8rem; } }

/* ---------- Datensilo: vorher und nachher ----------
   --t ist der Zielzustand (0 Datensilo, 1 eine Quelle). Jede Zeile folgt ihm über die registrierte
   Eigenschaft --b2b-p mit eigener Verzögerung, so ordnen sich die Zeilen nacheinander. Browser ohne
   @property springen ohne Übergang. Die Streuung bleibt im Rahmen: Versatz in Prozent der Zeilenbreite,
   dazu verkleinert. */
@property --b2b-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
.theme-dark .morph {
  --t: 1;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  padding: 1.1rem;
  overflow: hidden;
  min-width: 0;
}
.theme-dark .morph.is-a { --t: 0; }
.theme-dark .morph-head {
  margin: 0 0 1rem;
  font: 600 .95rem/1.3 var(--display);
  color: var(--accent-text);
}
.theme-dark .morph-head[hidden],
.theme-dark .morph-switch[hidden] { display: none; }
.theme-dark .morph-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  margin-bottom: 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
}
.theme-dark .morph-switch button {
  min-height: 44px;
  padding: .45rem .8rem;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--fg-muted);
  font: 600 .95rem/1.2 var(--display);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.theme-dark .morph-switch button:hover { color: var(--fg); background: var(--line); }
.theme-dark .morph-switch button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); cursor: default; }
.theme-dark .docs { display: flex; flex-direction: column; gap: .5rem; padding-block: .4rem; }
.theme-dark .doc {
  --b2b-p: var(--t);
  --sx: 0; --sy: 0; --sr: 0; --ss: 1; --delay: 0s;
  display: grid;
  grid-template-columns: 4.3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .6rem .8rem;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  transform:
    translate(calc(var(--sx) * 1% * (1 - var(--b2b-p))), calc(var(--sy) * 1px * (1 - var(--b2b-p))))
    rotate(calc(var(--sr) * 1deg * (1 - var(--b2b-p))))
    scale(calc(1 - (1 - var(--ss)) * (1 - var(--b2b-p))));
  transition: --b2b-p .8s cubic-bezier(.3, .7, .2, 1) var(--delay);
}
.theme-dark .morph.is-instant .doc { transition: none; }
/* Streuung im Zustand „Datensilo“, je Zeile fest (keine Inline-Styles). Versatz und Verkleinerung
   zusammen bleiben unter 5 % der Breite je Seite. */
.theme-dark .doc:nth-child(8n+1) { --sx: -4; --sy: 5; --sr: -2.5; --ss: .9; }
.theme-dark .doc:nth-child(8n+2) { --sx: 3.5; --sy: -2; --sr: 2; --ss: .86; --delay: .07s; }
.theme-dark .doc:nth-child(8n+3) { --sx: -1.5; --sy: 4; --sr: -1; --ss: .92; --delay: .14s; }
.theme-dark .doc:nth-child(8n+4) { --sx: 4.5; --sy: -4; --sr: 3; --ss: .88; --delay: .21s; }
.theme-dark .doc:nth-child(8n+5) { --sx: -3; --sy: 2; --sr: -3; --ss: .9; --delay: .28s; }
.theme-dark .doc:nth-child(8n+6) { --sx: 2; --sy: -6; --sr: 1.5; --ss: .94; --delay: .35s; }
.theme-dark .doc:nth-child(8n+7) { --sx: -4.5; --sy: 3; --sr: 2.5; --ss: .87; --delay: .42s; }
.theme-dark .doc:nth-child(8n+8) { --sx: 3; --sy: -3; --sr: -2; --ss: .9; --delay: .49s; }
/* Kürzel, Text und Status liegen je Zustand übereinander in derselben Zelle; die Zelle ist so breit
   wie der längere der beiden Texte. */
.theme-dark .doc .tag,
.theme-dark .doc .tagb {
  grid-column: 1;
  grid-row: 1;
  /* Mindestens 12 px; die Spalte ist so breit, dass „ENERGIE“ hineinpasst. */
  font: 600 .75rem/1.2 var(--mono);
  letter-spacing: .02em;
  padding: .25rem .25rem;
  border-radius: 2px;
  text-align: center;
  white-space: nowrap;
}
.theme-dark .doc .tag { background: rgba(242, 238, 227, .08); color: var(--fg-muted); opacity: calc(1 - var(--b2b-p)); }
.theme-dark .doc .tagb { background: var(--accent-glow); color: var(--accent-text); opacity: var(--b2b-p); }
.theme-dark .doc .txt,
.theme-dark .doc .st { display: grid; grid-row: 1; }
.theme-dark .doc .txt { grid-column: 2; grid-template-columns: minmax(0, 1fr); font-size: .92rem; line-height: 1.35; }
.theme-dark .doc .st { grid-column: 3; justify-items: end; font: 400 .82rem/1.3 var(--body); color: var(--fg-dim); }
.theme-dark .doc .txt > span,
.theme-dark .doc .st > span { grid-area: 1 / 1; }
.theme-dark .doc .st > span { white-space: nowrap; }
/* Dateinamen im Datensilo dürfen abbrechen, die aufbereitete Zeile bricht um und bleibt ganz lesbar. */
.theme-dark .doc .txt > .a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-dark .doc .a { opacity: calc(1 - var(--b2b-p)); color: var(--fg-muted); }
.theme-dark .doc .b { opacity: var(--b2b-p); color: var(--fg); }
.theme-dark .doc .st .a { color: var(--fg-dim); }
.theme-dark .doc .st .b { color: var(--good); }
.theme-dark .doc .st .b.status-warn { color: var(--warn); }
.theme-dark .doc .st .b.status-bad { color: var(--bad-text); }
/* Schmal steht der Status unter dem Text, damit der Text die Breite bekommt. */
@media (max-width: 560px) {
  .theme-dark .doc { grid-template-columns: 4.3rem minmax(0, 1fr); row-gap: .2rem; }
  .theme-dark .doc .st { grid-column: 2; grid-row: 2; justify-items: start; }
}
/* Breit steht die Grafik neben den drei Gegenüberstellungen und bleibt beim Lesen im Bild. */
@media (min-width: 961px) {
  .split > div:has(> .b2b-ce--kpproduct_silo) { position: sticky; top: 130px; }
}

/* ---------- Tabs ---------- */
.theme-dark .b-tabs {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line-strong);
}
.theme-dark .b-tabs[hidden] { display: none; }
.theme-dark .b-tab {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--fg-muted);
  font: 600 .98rem/1.2 var(--body);
  padding: .8rem 1rem;
  cursor: pointer;
  margin-bottom: -1px;
}
.theme-dark .b-tab[aria-selected="true"] { color: var(--fg); border-color: var(--accent); }
.theme-dark .b-tab:hover { color: var(--fg); }
.theme-dark .b-panel {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-top: var(--s4);
  align-items: start;
  background: none;
  border: 0;
  box-shadow: none;
  margin: 0;
}
.theme-dark .b-panel[hidden] { display: none; }
@media (max-width: 900px) { .theme-dark .b-panel { grid-template-columns: minmax(0, 1fr); } }
.theme-dark .b-panel h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.theme-dark .panel-kicker {
  font: 600 1.02rem/1.3 var(--display);
  color: var(--accent-text);
  margin-bottom: .6rem;
}
/* Mit JavaScript übernimmt die Reiterleiste die Benennung. */
.b2b-js .theme-dark .panel-kicker,
.b2b-js.theme-dark .panel-kicker { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.theme-dark .b2b-ce--kpproduct_tab + .b2b-ce--kpproduct_tab .b-panel { border-top: 1px solid var(--line); margin-top: var(--s4); }
.b2b-js .theme-dark .b2b-ce--kpproduct_tab + .b2b-ce--kpproduct_tab .b-panel,
.b2b-js.theme-dark .b2b-ce--kpproduct_tab + .b2b-ce--kpproduct_tab .b-panel { border-top: 0; margin-top: 0; }
.theme-dark .b-tabs-wrap .b2b-ce + .b2b-ce { margin-top: 0; }
.theme-dark .dash-list { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; gap: .55rem; }
.theme-dark .dash-list li { padding-left: 1.3rem; position: relative; color: var(--fg-muted); }
.theme-dark .dash-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 9px; height: 2px; background: var(--accent); }

/* Mock-Ansichten und echte Bildschirmfotos */
.theme-dark .shot { border: 1px solid var(--line); background: var(--bg-deep); padding: 1rem; min-width: 0; }
.theme-dark .shot-head {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
  font: 400 .9rem/1.3 var(--body);
  color: var(--fg-dim);
  margin-bottom: .9rem;
}
.theme-dark .shot-head b { color: var(--fg); font-weight: 600; }
.theme-dark .shot svg { display: block; width: 100%; height: auto; }
.theme-dark .shot text { font-family: var(--body); font-size: 12px; fill: var(--fg-dim); font-variant-numeric: tabular-nums; }
.theme-dark .shot .v { fill: var(--fg); font-weight: 500; }
.theme-dark .bars .gridline { stroke: rgba(242, 238, 227, .1); }
.theme-dark .bars .acc { fill: var(--accent); }
.theme-dark .bars .mid { fill: var(--warn); }
.theme-dark .bars .crit { fill: var(--bad); }
.theme-dark .bars polyline { fill: none; stroke-width: 2; }
.theme-dark .bars .line-acc { stroke: var(--accent); }
.theme-dark .bars .line-warn { stroke: var(--sand); }
.theme-dark .bars .line-bad { stroke: var(--koral); }
.theme-dark .bars .dot { fill: var(--fg); }
.theme-dark .bars .sep { stroke: rgba(242, 238, 227, .08); }
/* Bildschirmfoto: schlichter Rahmen, darüber die Adresse als Bildunterschrift (kein nachgebautes Browserfenster) */
.theme-dark .win {
  margin: 0;
  min-width: 0;
}
.theme-dark .win-bar {
  font: 400 .88rem/1.3 var(--body);
  color: var(--fg-dim);
  margin-bottom: .5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.theme-dark .win img { display: block; width: 100%; height: auto; border: 1px solid var(--line-strong); border-radius: 3px; }
/* Vergrößern in Originalbreite (b2b.js): Knopf unten rechts auf dem Bild, Anzeige in einem <dialog>. */
.theme-dark .win { position: relative; }
.theme-dark .win.has-zoom img { cursor: zoom-in; }
.theme-dark .win-zoom {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--bg-deep);
  color: var(--fg);
  font: 500 1.2rem/1 var(--body);
  cursor: pointer;
}
.theme-dark .win-zoom:hover,
.theme-dark .win-zoom:focus-visible { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.theme-dark .b2b-zoom {
  width: auto;
  max-width: min(96vw, 1460px);
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--bg-deep);
  color: var(--fg);
}
.theme-dark .b2b-zoom::backdrop { background: rgba(3, 14, 42, .82); }
.theme-dark .b2b-zoom .zoom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem .5rem .5rem 1rem;
  border-bottom: 1px solid var(--line);
  font: 400 .9rem/1.3 var(--body);
  color: var(--fg-muted);
}
.theme-dark .b2b-zoom .zoom-close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: transparent;
  color: var(--fg);
  font: 400 1.6rem/1 var(--body);
  cursor: pointer;
}
.theme-dark .b2b-zoom .zoom-close:hover,
.theme-dark .b2b-zoom .zoom-close:focus-visible { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.theme-dark .b2b-zoom .zoom-body { overflow: auto; max-height: calc(92vh - 62px); overscroll-behavior: contain; }
.theme-dark .b2b-zoom img { display: block; width: 1400px; max-width: none; height: auto; }
.theme-dark .real { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .8rem; font: 400 .9rem/1.4 var(--body); color: var(--fg-dim); }
.theme-dark .real b { color: var(--fg); font-weight: 600; }
.theme-dark .kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: .9rem; }
.theme-dark .kpi > div { border-top: 1px solid var(--line-strong); padding: .55rem 0 0; min-width: 0; }
.theme-dark .kpi b { display: block; font: 600 1.4rem/1.2 var(--display); color: var(--fg); font-variant-numeric: tabular-nums; }
.theme-dark .kpi span { font: 400 .86rem/1.3 var(--body); color: var(--fg-dim); }
.theme-dark .kpi .status-good { color: var(--good); }
.theme-dark .kpi .status-warn { color: var(--warn); }
.theme-dark .kpi .status-bad { color: var(--bad-text); }

/* ---------- Vorteile ---------- */
.theme-dark .grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.theme-dark .grid3 > div { background: var(--bg); padding: 1.5rem; min-width: 0; }
.theme-dark .grid3 h3 { font-size: 1.12rem; margin-bottom: .7rem; }
.theme-dark .grid3 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; color: var(--fg-muted); font-size: .95rem; }
.theme-dark .grid3 li::before { content: "– "; color: var(--fg-dim); }
.theme-dark .grid3 .ai h3 { color: var(--ai-text); }
.theme-dark .b2b-section.bg-deep .grid3 > div { background: var(--bg-deep); }
.theme-dark .b2b-section.bg-light .grid3 > div { background: var(--bg-raised); }
@media (max-width: 900px) { .theme-dark .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .theme-dark .grid3 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sankey ---------- */
.theme-dark .sankey-wrap { border: 1px solid var(--line); background: var(--bg-deep); padding: 1rem; position: relative; overflow-x: auto; }
.theme-dark .sankey-wrap svg.sankey { display: block; min-width: 560px; width: 100%; height: auto; }
.theme-dark .sankey text { font-family: var(--body); font-size: 13px; fill: var(--fg-muted); font-variant-numeric: tabular-nums; }
.theme-dark .sankey .nm { fill: var(--fg); font-weight: 600; }
.theme-dark .sankey .nm.note { fill: var(--viz-text); }
.theme-dark .sankey .flow { fill: var(--viz); opacity: .32; transition: opacity .2s; cursor: pointer; }
.theme-dark .sankey .flow.hot { opacity: .55; }
.theme-dark .sankey .flow:hover, .theme-dark .sankey .flow.on { opacity: .85; }
.theme-dark .sankey .flow:focus-visible { outline: none; opacity: .85; stroke: var(--accent-text); stroke-width: 1.5; }
/* Werteliste: unter 600 px statt des 560 px breiten Diagramms, das sonst abgeschnitten wäre. Die Balken
   sind SVG-Rechtecke mit der Länge aus dem SankeyProcessor. */
.theme-dark .sankey-list { display: none; }
@media (max-width: 600px) {
  .theme-dark .sankey-wrap { overflow: visible; }
  .theme-dark .sankey-wrap svg.sankey,
  .theme-dark .sankey-wrap .tip,
  .theme-dark .sankey-hint { display: none; }
  .theme-dark .sankey-list { display: grid; gap: 1.2rem; }
  .theme-dark .sankey-list-head { font: 600 .95rem/1.3 var(--display); color: var(--fg-muted); margin: 0 0 .5rem; }
  .theme-dark .sankey-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
  .theme-dark .sankey-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .8rem; row-gap: .25rem; align-items: baseline; margin: 0; padding: 0; font-size: .95rem; color: var(--fg); }
  .theme-dark .sankey-list li::before { content: none; }
  .theme-dark .sankey-list .val { font-size: .9rem; color: var(--fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .theme-dark .sankey-list .bar { grid-column: 1 / -1; display: block; width: 100%; height: 6px; }
  .theme-dark .sankey-list .bar rect { fill: var(--viz); opacity: .5; }
  .theme-dark .sankey-list li.big .bar rect { fill: var(--viz-text); opacity: .95; }
  .theme-dark .sankey-list .note { grid-column: 1 / -1; font-size: .85rem; color: var(--viz-text); }
}
.theme-dark .sankey .node { fill: var(--fg); opacity: .85; }
.theme-dark .sankey .node.big { fill: var(--viz-text); opacity: 1; }
.theme-dark .tip {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background: var(--fg);
  color: var(--ink);
  font: 500 .88rem/1.2 var(--body);
  padding: .4rem .6rem;
  border-radius: 3px;
  transform: translate(-50%, -130%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s;
}
.theme-dark .tip.show { opacity: 1; }

/* ---------- en:predict ---------- */
.theme-dark .chart { border: 1px solid var(--line); background: var(--bg-panel); padding: 1rem; }
.theme-dark .chart svg { display: block; width: 100%; height: auto; }
.theme-dark .chart text { font-family: var(--body); font-size: 12px; fill: var(--fg-dim); font-variant-numeric: tabular-nums; }
.theme-dark .chart .gridline { stroke: var(--line); stroke-width: 1; }
.theme-dark .chart .band { fill: rgba(242, 238, 227, .07); }
.theme-dark .chart .conv { fill: none; stroke: var(--fg-dim); stroke-width: 2; stroke-dasharray: 5 4; }
.theme-dark .chart .pred { fill: none; stroke: var(--ai); stroke-width: 3; stroke-linecap: round; }
.theme-dark .chart .pk { fill: var(--koral); }
.theme-dark .chart .lbl { fill: var(--fg); font-size: 12px; font-weight: 500; }
.theme-dark .chart .lbl.ai { fill: var(--ai-text); }
/* Das SVG skaliert mit der Breite; die Beschriftung (12 px im 900er-Raster) wäre auf dem Smartphone kaum
   4 px groß. Schmal größere Schrift im Raster, unter 600 px nur jede zweite Uhrzeit. */
@media (max-width: 900px) {
  .theme-dark .chart svg { overflow: visible; }
  .theme-dark .chart text { font-size: 16px; }
  .theme-dark .chart .lbl { font-size: 18px; }
}
@media (max-width: 600px) {
  .theme-dark .chart text { font-size: 26px; }
  .theme-dark .chart .lbl { font-size: 28px; }
  .theme-dark .chart svg > text:nth-of-type(6),
  .theme-dark .chart svg > text:nth-of-type(8),
  .theme-dark .chart svg > text:nth-of-type(10),
  .theme-dark .chart svg > text:nth-of-type(12) { display: none; }
}
.theme-dark .legend { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: .9rem; font: 400 .88rem/1.3 var(--body); color: var(--fg-dim); }
.theme-dark .legend .key { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: .45rem; background: var(--accent); }
.theme-dark .legend .key-0 { background: repeating-linear-gradient(90deg, var(--fg-dim) 0 3px, transparent 3px 6px); }
.theme-dark .legend .key-1 { background: var(--ai); }
.theme-dark .legend .key-2 { background: rgba(242, 238, 227, .18); height: 10px; }
.theme-dark .legend .key-3 { background: var(--koral); width: 8px; height: 8px; border-radius: 50%; }

.theme-dark .arch-row { display: flex; gap: .8rem; align-items: stretch; }
.theme-dark .arch .node { flex: 1 1 0; border: 1px solid var(--line-strong); padding: 1.2rem; background: var(--bg); min-width: 0; position: relative; }
.theme-dark .arch .node h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.theme-dark .arch .node p { font-size: .92rem; color: var(--fg-muted); }
.theme-dark .arch .node.mid { border-color: var(--accent); }
.theme-dark .arch .node.mid .lab { color: var(--accent-text); }
.theme-dark .arch .node.ai { border-color: var(--ai); }
.theme-dark .arch .node.ai .lab { color: var(--ai-text); }
/* Verbindung zwischen den Stationen: ruhige Linie mit Doppelpfeil */
.theme-dark .arch-link {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
  font-family: var(--body);
  font-size: 1.2rem;
  position: relative;
}
.theme-dark .arch-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--line-strong);
}
.theme-dark .arch-link span { position: relative; background: var(--bg-deep); padding: 0 .3rem; }
.theme-dark .arch .no {
  margin-top: 1rem;
  color: var(--fg-muted);
  font-size: .95rem;
  max-width: 80ch;
}
.theme-dark .arch .no strong { color: var(--fg); font-weight: 600; }
@media (max-width: 860px) {
  .theme-dark .arch-row { flex-direction: column; }
  .theme-dark .arch-link { flex-basis: 44px; min-height: 44px; }
  .theme-dark .arch-link::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
}
.theme-dark .facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.theme-dark .facts > div { background: var(--bg-deep); padding: 1.4rem; min-width: 0; }
.theme-dark .facts h3 { font-size: 1.05rem; margin-bottom: .5rem; color: var(--ai-text); }
.theme-dark .facts p { font-size: .95rem; color: var(--fg-muted); }
@media (max-width: 760px) { .theme-dark .facts { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Pakete ---------- */
.theme-dark .pk-steps { display: flex; gap: .3rem; flex-wrap: wrap; font: 500 .88rem/1.2 var(--body); color: var(--fg-dim); margin-bottom: var(--s4); }
.theme-dark .pk-steps span { padding: .4rem .7rem; border: 1px solid var(--line); border-radius: 999px; }
.theme-dark .pk-steps .on { border-color: var(--accent); color: var(--accent-text); }
.theme-dark .pk-steps .aion { border-color: var(--ai); color: var(--ai-text); }
.theme-dark .pk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.theme-dark .pk { border: 1px solid var(--line); background: var(--bg-deep); padding: 1.4rem; display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.theme-dark .pk .tier { color: var(--accent-text); margin: 0; }
.theme-dark .pk h3 { font-size: 1.5rem; }
.theme-dark .pk .sub { color: var(--fg-muted); font-size: .95rem; min-height: 2.6em; }
.theme-dark .pk ul { list-style: none; margin: 0; padding: .9rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .45rem; align-content: start; font-size: .94rem; color: var(--fg-muted); flex: 1; }
.theme-dark .pk li::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--accent); margin-right: .6rem; vertical-align: 1px; }
.theme-dark .pk .b-btn { align-self: flex-start; }
/* Auch die nicht hervorgehobenen Pakete zeigen ihren Knopf in Akzentfarbe */
.theme-dark .pk .b-btn--ghost { border-color: var(--accent); color: var(--accent-text); }
.theme-dark .pk .b-btn--ghost:hover,
.theme-dark .pk .b-btn--ghost:focus { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.theme-dark .pk.featured { border: 2px solid var(--accent); }
@media (max-width: 1000px) { .theme-dark .pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .theme-dark .pk-grid { grid-template-columns: minmax(0, 1fr); } }
.theme-dark .addon {
  margin-top: 1rem;
  border: 1px solid var(--ai);
  background: var(--bg-deep);
  padding: 1.4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
}
.theme-dark .addon .tier { color: var(--ai-text); margin: 0; }
.theme-dark .addon h3 { font-size: 1.4rem; margin: .3rem 0 .4rem; }
.theme-dark .addon p { color: var(--fg-muted); font-size: .96rem; max-width: 62ch; }
@media (max-width: 700px) { .theme-dark .addon { grid-template-columns: minmax(0, 1fr); } }
.theme-dark .pk-more, .theme-dark .items-outro { margin-top: var(--s3); font-size: .92rem; color: var(--fg-dim); }
.theme-dark .items-outro { font-size: .84rem; max-width: 80ch; }
.theme-dark .b2b-ce--note .items-outro { margin-top: 0; max-width: 90ch; }
.theme-dark .items-outro p + p { margin-top: .6em; }
.theme-dark .pk-more a, .theme-dark .items-outro a { color: var(--fg-muted); text-decoration: none; border-bottom: 1px solid var(--line-strong); margin-right: 1rem; }
.theme-dark .pk-more a:hover, .theme-dark .items-outro a:hover { color: var(--fg); border-color: var(--fg); }

/* ---------- Warum: Ebenen, Branchen ---------- */
.theme-dark .stack { display: grid; gap: .5rem; margin-top: var(--s4); }
.theme-dark .layer {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 1.2rem;
  align-items: center;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  min-width: 0;
}
.theme-dark .layer .lab { color: var(--accent-text); margin: 0; }
.theme-dark .layer .txt { color: var(--fg-muted); font-size: .96rem; }
.theme-dark .layer .txt b { color: var(--fg); font-weight: 600; display: block; font-family: var(--display); font-size: 1.05rem; margin-bottom: .1rem; }
.theme-dark .layer:nth-child(4) { background: var(--bg-deep); }
.theme-dark .layer.on { border-color: var(--accent); }
@media (max-width: 700px) {
  .theme-dark .layer { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
}
.theme-dark .ind { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.theme-dark .ind > div { border-top: 2px solid var(--accent); padding-top: 1rem; min-width: 0; }
.theme-dark .ind h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.theme-dark .ind p { color: var(--fg-muted); font-size: .95rem; }
@media (max-width: 760px) { .theme-dark .ind { grid-template-columns: minmax(0, 1fr); } }
.theme-dark .items-head { margin-bottom: var(--s4); }
.theme-dark .items-head .eyebrow:last-child { margin-bottom: 0; }

/* ---------- People-Module: Kundenstimme und Team-Karte ----------
   Übernommen aus der Übergangsfassung vom 2026-10-17 (Cowork). Bilder füllen die Fläche, der Verlauf darüber
   kommt aus .ppl-ph::after, damit jedes Motiv zur Seite passt. Ohne Foto steht ein Platzhalter. */
.theme-dark .ppl-ph {
  position: relative;
  display: block;
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  overflow: hidden;
}
.theme-dark .ppl-ph img,
.theme-dark .ppl-ph picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.theme-dark .ppl-ph::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(3, 14, 42, .5), transparent 45%);
}
/* Kundenstimme: Portrait links, Zitat rechts, Kennzahlen aus dem Projekt; schmal untereinander */
.theme-dark .ppl-voice {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin: 0;
  padding: clamp(1.2rem, 3vw, 2.4rem);
  border: 1px solid var(--line);
  background: var(--bg-deep);
}
.theme-dark .ppl-voice .ppl-ph { aspect-ratio: 1; }
.theme-dark .ppl-voice blockquote { margin: 0; padding: 0; border: 0; text-align: left; font: 300 clamp(1.25rem, 2.2vw, 1.75rem)/1.3 var(--display); color: var(--fg); text-wrap: pretty; }
.theme-dark .ppl-voice blockquote p:first-child::before { content: "„"; color: var(--accent-text); }
.theme-dark .ppl-voice blockquote p:last-child::after { content: "“"; color: var(--accent-text); }
.theme-dark .ppl-voice:lang(en) blockquote p:first-child::before { content: "“"; }
.theme-dark .ppl-voice:lang(en) blockquote p:last-child::after { content: "”"; }
.theme-dark .ppl-voice figcaption { display: grid; gap: .15rem; margin-top: 1.2rem; }
.theme-dark .ppl-voice figcaption b { font-weight: 600; color: var(--fg); }
.theme-dark .ppl-voice figcaption span { color: var(--fg-muted); font-size: .95rem; }
.theme-dark .ppl-kpi { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.theme-dark .ppl-kpi b { display: block; font: 600 1.8rem/1 var(--display); color: var(--fg); font-variant-numeric: tabular-nums; }
.theme-dark .ppl-kpi span { display: block; margin-top: .3rem; font-size: .9rem; color: var(--fg-dim); }
@media (max-width: 760px) {
  .theme-dark .ppl-voice { grid-template-columns: minmax(0, 1fr); }
  .theme-dark .ppl-voice .ppl-ph { max-width: 240px; }
}
/* Team-Karte: Gruppenfoto in Kartenbreite oben, darunter Name, Unterzeile und Text (Entscheidung des Nutzers
   2026-10-17: „Bild größer und oberhalb des Textes“). */
.theme-dark .ppl-team { border: 1px solid var(--line); background: var(--bg-deep); }
.theme-dark .ppl-team .ppl-ph { aspect-ratio: 3 / 2; border: 0; border-bottom: 1px solid var(--line); }
.theme-dark .ppl-team .ppl-body { padding: 1.1rem 1.3rem 1.3rem; }
.theme-dark .ppl-team .ppl-name { display: block; font: 600 1.15rem/1.3 var(--display); color: var(--fg); }
.theme-dark .ppl-team .ppl-role { display: block; margin-top: .2rem; font: 600 .95rem/1.3 var(--display); color: var(--accent-text); }
.theme-dark .ppl-team .ppl-text { margin-top: .7rem; color: var(--fg-muted); }
.theme-dark .b2b-section.bg-light .ppl-voice,
.theme-dark .b2b-section.bg-light .ppl-team { background: var(--bg-raised); }
.theme-dark .b2b-ce--team { margin-top: var(--s4); }

/* ---------- Kontakt ---------- */
.theme-dark .contact-text { color: var(--fg-muted); margin-top: var(--s4); }
.theme-dark .contact-text a { color: var(--accent-text); }
.theme-dark .mailrow { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: var(--s2); }
.theme-dark .mailrow .mail {
  font: 600 1.05rem/1.3 var(--body);
  color: var(--accent-text);
  background: rgba(242, 238, 227, .06);
  padding: .55rem .8rem;
  border: 1px solid var(--line);
  text-decoration: none;
  -webkit-user-select: all;
  user-select: all;
}
.theme-dark .b2b-section.bg-light .mailrow .mail { background: var(--bg-raised); border-color: var(--line-strong); }
.theme-dark .mailrow .b-btn[hidden] { display: none; }
.theme-dark .mailrow .b-note { margin: 0; }


/* ---------- Formular (EXT:form, Vorlage version2) ----------
   Die Website stylt .formWrapper sehr spezifisch (schwebende Labels, weiße Felder, eigene Checkbox).
   F steht hier für "body:has(.b2b-uebergang .b2b-section) .formWrapper form" plus Elementklasse, damit diese
   Regeln gewinnen, ohne !important. */
body:has(.b2b-uebergang .b2b-section) .formWrapper form {
  display: grid;
  gap: .9rem;
  max-width: none;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  padding: clamp(1rem, 3vw, 1.8rem);
  font-family: var(--body);
  color: var(--fg);
}
/* Auf heller Fläche hebt sich das Formular als weiße Karte ab */
body:has(.b2b-uebergang .b2b-section) .formWrapper form {
  border-color: var(--line-strong);
}
body:has(.b2b-uebergang .b2b-section) .formWrapper form > h2 {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element-gridrow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  margin: 0;
}
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element-gridrow::before,
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element-gridrow::after { display: none; }
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element-gridrow > div { width: auto; padding: 0; float: none; min-width: 0; }
@media (max-width: 560px) {
  body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element-gridrow { grid-template-columns: minmax(0, 1fr); }
}
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element { margin: 0; }
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element:not(.form-element-fieldset) .form-label {
  display: block;
  position: static;
  opacity: 1;
  font: 600 .95rem/1.3 var(--body);
  color: var(--fg-muted);
  margin: 0 0 .35rem;
}
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element:not(.form-element-fieldset):focus-within .form-label { color: var(--accent-text); }
body:has(.b2b-uebergang .b2b-section) .formWrapper form .required { color: var(--accent-text); }
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element:not(.form-element-fieldset) .form-control {
  display: block;
  font: 400 1rem/1.4 var(--body);
  color: var(--fg);
  background: var(--bg-panel);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  padding: .7rem .8rem;
  margin: 0;
  width: 100%;
  height: auto;
  min-width: 0;
  box-shadow: none;
}
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element:not(.form-element-fieldset) .form-control::placeholder { color: var(--fg-dim); opacity: 1; }
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element:not(.form-element-fieldset) .form-control:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: transparent;
  box-shadow: none;
}
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element:not(.form-element-fieldset) textarea.form-control { min-height: 110px; resize: vertical; }
/* „Interesse“ auf Höhe der Eingabefelder: native Selects ignorieren line-height, deshalb feste Höhe
   = Zeile 1.4em + Polster 2 × .7rem + Rahmen 2 × 1px; der Select ohne vertikales Polster. */
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element:not(.form-element-fieldset) input.form-control,
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element:not(.form-element-fieldset) select.form-control { height: calc(1.4em + 1.4rem + 2px); }
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element:not(.form-element-fieldset) select.form-control { padding-top: 0; padding-bottom: 0; }
/* Einwilligung: „Datenschutzhinweise“ ist ein Link (b2b.js) und als solcher erkennbar. */
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-check-label a { color: var(--accent-text); text-decoration: underline; text-underline-offset: .15em; }
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-check-label a:hover { text-decoration-thickness: 2px; }
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element.form-element-check .form-check-wrapping-label {
  display: block;
  position: relative;
  font: 400 .9rem/1.45 var(--body);
  color: var(--fg-muted);
  margin: 0;
}
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element.form-element-check .form-check-label { display: block; padding-left: 1.9rem; }
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element.form-element-check .form-check-label::before {
  position: absolute;
  left: 0;
  top: .1rem;
  float: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--bg-panel);
}
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element.form-element-check .form-check-input { top: .1rem; width: 18px; height: 18px; margin: 0; opacity: 0; }
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element.form-element-check .form-check-input:focus-visible + .form-check-label::before { outline: 2px solid var(--accent-text); outline-offset: 2px; }
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element.form-element-check .form-check-input:checked + .form-check-label::before { border-color: var(--accent); background: var(--accent); }
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element.form-element-check .form-check-input:checked + .form-check-label::after {
  top: .25rem;
  left: 6px;
  width: 6px;
  height: 11px;
  border-color: var(--accent-ink);
}
body:has(.b2b-uebergang .b2b-section) .formWrapper form .is-invalid .form-control,
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-element:not(.form-element-fieldset) .form-control.is-invalid { border-color: var(--koral); }
body:has(.b2b-uebergang .b2b-section) .formWrapper form .invalid-feedback {
  display: block;
  margin-top: .35rem;
  font: 500 .9rem/1.3 var(--body);
  color: var(--bad-text);
}
body:has(.b2b-uebergang .b2b-section) .formWrapper form altcha-widget {
  --altcha-color-base: var(--bg-panel);
  --altcha-color-border: var(--line-strong);
  --altcha-color-text: var(--fg-muted);
  --altcha-color-border-focus: var(--accent);
  --altcha-color-error-text: var(--bad-text);
  --altcha-color-footer-bg: var(--bg-deep);
  --altcha-border-radius: 3px;
  --altcha-max-width: 100%;
}
body:has(.b2b-uebergang .b2b-section) .formWrapper form .actions,
body:has(.b2b-uebergang .b2b-section) .formWrapper form .form-navigation,
body:has(.b2b-uebergang .b2b-section) .formWrapper form .btn-toolbar,
body:has(.b2b-uebergang .b2b-section) .formWrapper form div.btn-group,
body:has(.b2b-uebergang .b2b-section) .formWrapper form .btn-group .next { display: block; float: none; width: auto; margin: 0; }
/* Absenden: volle Breite, damit der Abschluss des Formulars nicht übersehen wird. Farbe auch auf der hellen
   Fläche das helle Lime der Seite, nicht Lime-Deep (Entscheidung des Nutzers 2026-10-17); Schrift darauf
   Experience Blue (8,5:1, auf dem Hover-Ton 10,6:1). */
body:has(.b2b-uebergang .b2b-section) .formWrapper form .actions .btn.btn-primary {
  --accent: var(--lime);
  --accent-text: var(--lime-signal-light);
  --accent-ink: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 0 1.6rem;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 1.1rem/1.2 var(--body);
  letter-spacing: .01em;
  text-transform: none;
  box-shadow: none;
  transition: background .18s;
}
body:has(.b2b-uebergang .b2b-section) .formWrapper form .actions .btn.btn-primary:hover,
body:has(.b2b-uebergang .b2b-section) .formWrapper form .actions .btn.btn-primary:focus {
  background: var(--accent-text);
  color: var(--accent-ink);
}
/* Sichtbarer Tastaturfokus: die Website setzt in .btn-toolbar „outline: 0 !important“, deshalb hier ebenfalls. */
body:has(.b2b-uebergang .b2b-section) .formWrapper form .actions .btn.btn-primary:focus-visible { outline: 2px solid var(--fg) !important; outline-offset: 3px; }
body:has(.b2b-uebergang .b2b-section) .formWrapper form .notice {
  border: 1px solid var(--accent);
  background: var(--accent-glow);
  padding: .9rem 1rem;
  font-size: .92rem;
  color: var(--fg);
}
.theme-dark .b-hp { position: absolute; left: -999em; width: 1px; height: 1px; overflow: hidden; }
/* Bestätigungstext nach dem Absenden */
body:has(.b2b-uebergang .b2b-section) .formWrapper > p,
body:has(.b2b-uebergang .b2b-section) .b2b-ce--form_formframework p { color: var(--fg); }

/* ---------- Bewegung reduzieren ----------
   Nur die eigenen Module: .theme-dark sitzt auf der Produktseite am body, eine Regel darauf würde auch
   die Menü-Animation der Website anhalten (die dunkle Fläche des Burger-Menüs bliebe unsichtbar). */
@media (prefers-reduced-motion: reduce) {
  .b2b-main *, .b2b-main *::before, .b2b-main *::after,
  .b2b-teaser *, .b2b-teaser *::before, .b2b-teaser *::after,
  .b2b-strip *, .b2b-strip *::before, .b2b-strip *::after { animation: none !important; transition: none !important; }
  /* SMIL hört nicht auf CSS: die Paketzüge ausblenden, die punktierte Leitung steht still */
  .b2b-main .scene .pk, .b2b-teaser .scene .pk { display: none; }
}
body:has(.b2b-uebergang .b2b-section) .form-confirmation-text {
  border: 1px solid var(--accent);
  background: var(--accent-glow);
  padding: 1.2rem 1.4rem;
  font-size: 1.05rem;
  color: var(--fg);
}