/* Ü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.5rem, 5.8vw, 4.8rem); font-weight: 600; }
.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; }

.theme-dark .eyebrow {
  display: flex;
  align-items: center;
  gap: .8rem;
  font: 500 .78rem/1.2 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--s3);
}
.theme-dark .eyebrow::before { content: ""; width: 40px; height: 3px; background: var(--accent); flex: none; }
.theme-dark .eyebrow.ai,
.theme-dark .b2b-section.ai .eyebrow { color: var(--ai-text); }
.theme-dark .eyebrow.ai::before,
.theme-dark .b2b-section.ai .eyebrow::before { background: var(--ai); }
.theme-dark .b-badge {
  font: 600 .66rem/1 var(--mono);
  letter-spacing: .12em;
  padding: .32rem .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 tragen einen farbigen Schein nach unten, damit sie auf der dunklen Fläche sofort
   auffallen; 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, transform .18s, box-shadow .18s;
  white-space: nowrap;
}
.theme-dark .b-btn:active { transform: translateY(1px); }
.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);
  box-shadow: 0 14px 34px -16px var(--accent);
}
.theme-dark .b-btn--primary:hover,
.theme-dark .b-btn--primary:focus {
  background: var(--accent-text);
  color: var(--accent-ink);
  box-shadow: 0 0 0 6px var(--accent-glow), 0 16px 38px -14px var(--accent);
  transform: translateY(-1px);
}
.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);
  box-shadow: 0 14px 34px -16px var(--ai);
}
.theme-dark .b-btn--ai:hover,
.theme-dark .b-btn--ai:focus {
  background: var(--ai-text);
  color: var(--accent-ink);
  box-shadow: 0 0 0 6px var(--ai-glow), 0 16px 38px -14px var(--ai);
  transform: translateY(-1px);
}
.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); }

/* ---------- 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 .74rem/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: .5rem;
}
.theme-dark .scene-head b { color: var(--accent-text); font-weight: 500; }
.theme-dark .scene-head .live::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  margin-right: .45rem;
  animation: b2b-blink 2.2s infinite;
}
@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: Grundlinie, Paket aus Kopf, Schweif und Nachlauf (alle auf pathLength 100) */
.theme-dark .scene .flow { --dur: 5s; --delay: 2s; }
.theme-dark .scene .line { fill: none; stroke: var(--viz); stroke-width: 1.3; opacity: .5; }
.theme-dark .scene .flow.ctx .line { stroke-width: .9; opacity: .3; }
.theme-dark .scene .back-line { fill: none; stroke: var(--ai); stroke-width: 1; opacity: .4; stroke-dasharray: 1 1.6; }
.theme-dark .scene .pk { fill: none; stroke-linecap: round; opacity: 0; }
.theme-dark .scene .pk-head { stroke: #EAF8F8; stroke-width: 5.5; stroke-dasharray: .01 300; }
.theme-dark .scene .pk-glow { stroke: var(--viz-text); stroke-width: 13; stroke-dasharray: .01 300; }
.theme-dark .scene .pk-tail { stroke: var(--viz-text); stroke-width: 2.8; stroke-dasharray: 10 300; }
.theme-dark .scene .pk-trail { stroke: var(--viz); stroke-width: 1.8; stroke-dasharray: 24 300; }
.theme-dark .scene .flow.ctx .pk-head { stroke-width: 4; }
.theme-dark .scene .flow.ctx .pk-glow { stroke-width: 9; }
.theme-dark .scene .pk-back { stroke: var(--ai-text); stroke-width: 4; stroke-dasharray: .01 300; }
.theme-dark .scene .arrive { fill: var(--accent-text); opacity: 0; }

/* 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(--mono); 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 .7rem/22px var(--mono); 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: 500 .74rem/1.25 var(--mono); 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,
.theme-dark .scene .back-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; } }

.theme-dark .scene .t1 { --dur: 3.6s; }
.theme-dark .scene .t2 { --dur: 4.2s; }
.theme-dark .scene .t3 { --dur: 4.8s; }
.theme-dark .scene .t4 { --dur: 5.4s; }
.theme-dark .scene .t5 { --dur: 6s; }
.theme-dark .scene .w0 { --delay: 1.8s; }
.theme-dark .scene .w1 { --delay: 2.3s; }
.theme-dark .scene .w2 { --delay: 2.8s; }
.theme-dark .scene .w3 { --delay: 3.3s; }
.theme-dark .scene .w4 { --delay: 3.8s; }
.theme-dark .scene .w5 { --delay: 4.3s; }
.theme-dark .scene .w6 { --delay: 4.8s; }
.theme-dark .scene .w7 { --delay: 5.3s; }
/* Das Paket läuft bis 124, damit der Nachlauf (24) ins Ziel abfließt statt abzureißen; danach Pause
   bis zum nächsten Zyklus. Außerhalb der Animation (Verzögerung, reduced motion) sind Pakete unsichtbar. */
.theme-dark .scene .pk-head { animation: b2b-pk-head var(--dur) var(--delay) infinite; }
.theme-dark .scene .pk-glow { animation: b2b-pk-glow var(--dur) var(--delay) infinite; }
.theme-dark .scene .pk-tail { animation: b2b-pk-tail var(--dur) var(--delay) infinite; }
.theme-dark .scene .pk-trail { animation: b2b-pk-trail var(--dur) var(--delay) infinite; }
.theme-dark .scene .arrive { animation: b2b-arrive var(--dur) var(--delay) infinite; }
.theme-dark .scene .pk-back { animation: b2b-pk-back calc(var(--dur) * 1.6) calc(var(--delay) + 1.5s) infinite; }
@keyframes b2b-pk-head {
  0% { opacity: 1; stroke-dashoffset: .01; animation-timing-function: cubic-bezier(.45, .05, .55, .95); }
  45%, 100% { opacity: 1; stroke-dashoffset: -123.99; }
}
@keyframes b2b-pk-glow {
  0% { opacity: .22; stroke-dashoffset: .01; animation-timing-function: cubic-bezier(.45, .05, .55, .95); }
  45%, 100% { opacity: .22; stroke-dashoffset: -123.99; }
}
@keyframes b2b-pk-tail {
  0% { opacity: .9; stroke-dashoffset: 10; animation-timing-function: cubic-bezier(.45, .05, .55, .95); }
  45%, 100% { opacity: .9; stroke-dashoffset: -114; }
}
@keyframes b2b-pk-trail {
  0% { opacity: .5; stroke-dashoffset: 24; animation-timing-function: cubic-bezier(.45, .05, .55, .95); }
  45%, 100% { opacity: .5; stroke-dashoffset: -100; }
}
@keyframes b2b-arrive {
  0%, 27% { opacity: 0; r: 2; }
  31% { opacity: 1; r: 4; }
  42%, 100% { opacity: 0; r: 10; }
}
@keyframes b2b-pk-back {
  0% { opacity: 1; stroke-dashoffset: .01; animation-timing-function: cubic-bezier(.45, .05, .55, .95); }
  38%, 100% { opacity: 1; stroke-dashoffset: -100; }
}

.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; }
@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), 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 ---------- */
.theme-dark .proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: rgba(3, 14, 42, .5);
}
.theme-dark .proof > div { padding: 1.3rem; border-right: 1px solid var(--line); min-width: 0; }
.theme-dark .proof > div:last-child { border-right: 0; }
.theme-dark .proof b {
  display: block;
  font: 600 clamp(2rem, 3.6vw, 2.9rem)/1 var(--display);
  letter-spacing: -.01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.theme-dark .proof sup { font-size: .5em; color: var(--accent-text); vertical-align: .55em; margin-left: .1em; top: 0; }
.theme-dark .proof span { display: block; color: var(--fg-muted); margin-top: .5rem; font-size: .92rem; line-height: 1.4; }
@media (max-width: 860px) {
  .theme-dark .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-dark .proof > div:nth-child(2n) { border-right: 0; }
  .theme-dark .proof > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ---------- 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: 500 .7rem/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: .5rem;
}
.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-Regler ---------- */
.theme-dark .morph {
  --t: 1;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  padding: 1.1rem;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.theme-dark .morph-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font: 500 .74rem/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 1rem;
}
.theme-dark .morph-head .state-a { opacity: calc(1 - var(--t)); }
.theme-dark .morph-head .state-b { opacity: var(--t); color: var(--accent-text); }
.theme-dark .docs { position: relative; display: flex; flex-direction: column; gap: .5rem; min-height: 330px; justify-content: center; }
.theme-dark .doc {
  --sx: 0; --sy: 0; --sr: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .6rem .8rem;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  position: relative;
  transform: translate(calc(var(--sx) * 1px * (1 - var(--t))), calc(var(--sy) * 1px * (1 - var(--t)))) rotate(calc(var(--sr) * 1deg * (1 - var(--t))));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
/* Streuung im Zustand „Datensilo“, je Zeile fest (keine Inline-Styles) */
.theme-dark .doc:nth-child(8n+1) { --sx: -18; --sy: -60; --sr: -7; }
.theme-dark .doc:nth-child(8n+2) { --sx: 40; --sy: -30; --sr: 5; }
.theme-dark .doc:nth-child(8n+3) { --sx: -52; --sy: 10; --sr: -3; }
.theme-dark .doc:nth-child(8n+4) { --sx: 64; --sy: 28; --sr: 8; }
.theme-dark .doc:nth-child(8n+5) { --sx: -30; --sy: 60; --sr: -9; }
.theme-dark .doc:nth-child(8n+6) { --sx: 22; --sy: 84; --sr: 4; }
.theme-dark .doc:nth-child(8n+7) { --sx: -70; --sy: -90; --sr: 6; }
.theme-dark .doc:nth-child(8n+8) { --sx: 48; --sy: 52; --sr: -5; }
@media (max-width: 600px) {
  .theme-dark .doc {
    transform: translate(calc(var(--sx) * .3px * (1 - var(--t))), calc(var(--sy) * .6px * (1 - var(--t)))) rotate(calc(var(--sr) * 1deg * (1 - var(--t))));
  }
}
.theme-dark .doc .tag {
  font: 600 .66rem/1.2 var(--mono);
  letter-spacing: .08em;
  padding: .25rem .3rem;
  border-radius: 2px;
  text-align: center;
  background: rgba(242, 238, 227, .08);
  color: var(--fg-muted);
  opacity: calc(1 - var(--t));
}
.theme-dark .doc .tagb {
  position: absolute;
  left: .8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  font: 600 .66rem/1.2 var(--mono);
  letter-spacing: .08em;
  padding: .25rem .3rem;
  border-radius: 2px;
  text-align: center;
  background: var(--accent-glow);
  color: var(--accent-text);
  opacity: var(--t);
}
.theme-dark .doc .txt { position: relative; min-width: 0; font-size: .92rem; height: 1.35em; }
.theme-dark .doc .txt span { position: absolute; inset: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-dark .doc .a { opacity: calc(1 - var(--t)); color: var(--fg-muted); }
.theme-dark .doc .b { opacity: var(--t); color: var(--fg); }
.theme-dark .doc .st { font: 500 .7rem/1.3 var(--mono); letter-spacing: .06em; color: var(--fg-dim); position: relative; height: 1.3em; min-width: 84px; text-align: right; }
.theme-dark .doc .st span { position: absolute; inset: 0; white-space: nowrap; }
.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); }
.theme-dark .b-slider {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .9rem;
  align-items: center;
  margin-top: 1rem;
  font: 500 .78rem/1.2 var(--mono);
  color: var(--fg-dim);
}
.theme-dark .b-slider[hidden] { display: none; }
.theme-dark .b-slider input { width: 100%; accent-color: var(--accent); height: 28px; margin: 0; }
.theme-dark .b-slider .r { color: var(--accent-text); }

/* ---------- 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: 500 .74rem/1.2 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: .8rem;
}
/* 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: 500 .72rem/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: .9rem;
}
.theme-dark .shot-head b { color: var(--fg); font-weight: 500; }
.theme-dark .shot svg { display: block; width: 100%; height: auto; }
.theme-dark .shot text { font-family: var(--mono); font-size: 11px; fill: var(--fg-dim); }
.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); }
.theme-dark .win {
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
  background: #0B1B3A;
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .85), 0 0 0 1px rgba(3, 14, 42, .6);
  min-width: 0;
}
.theme-dark .win-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .85rem;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  font: 400 .74rem/1.3 var(--mono);
  color: var(--fg-dim);
}
.theme-dark .win-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(242, 238, 227, .18); display: inline-block; flex: none; }
.theme-dark .win-bar i:first-child { background: var(--koral); }
.theme-dark .win-bar i:nth-child(2) { background: var(--sand); }
.theme-dark .win-bar i:nth-child(3) { background: var(--lime); }
.theme-dark .win-bar span {
  margin-left: .4rem;
  padding: .2rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(242, 238, 227, .04);
  color: var(--fg-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.theme-dark .win img { display: block; width: 100%; height: auto; }
.theme-dark .real { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: .9rem; font: 400 .78rem/1.4 var(--mono); color: var(--fg-dim); }
.theme-dark .real b { color: var(--accent-text); font-weight: 500; }
.theme-dark .kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: .9rem; }
.theme-dark .kpi > div { border: 1px solid var(--line); padding: .6rem .7rem; min-width: 0; }
.theme-dark .kpi b { display: block; font: 600 1.4rem/1.2 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.theme-dark .kpi span { font: 500 .68rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; 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.08rem; margin-bottom: .8rem; display: flex; gap: .7rem; align-items: center; }
.theme-dark .grid3 h3 i { width: 10px; height: 10px; background: var(--accent); flex: none; transform: rotate(45deg); }
.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(--accent-text); }
.theme-dark .grid3 .ai h3 i { background: var(--ai); }
.theme-dark .grid3 .ai li::before { 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 { display: block; min-width: 560px; width: 100%; height: auto; }
.theme-dark .sankey text { font-family: var(--mono); font-size: 12px; fill: var(--fg-muted); }
.theme-dark .sankey .nm { fill: var(--fg); font-weight: 500; }
.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 .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 .8rem/1.2 var(--mono);
  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: rgba(5, 36, 83, .5); padding: 1rem; }
.theme-dark .chart svg { display: block; width: 100%; height: auto; }
.theme-dark .chart text { font-family: var(--mono); font-size: 11px; fill: var(--fg-dim); }
.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); }
.theme-dark .legend { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: .9rem; font: 500 .76rem/1.3 var(--mono); 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); box-shadow: 0 0 0 4px var(--accent-glow); }
.theme-dark .arch .node.mid .lab { color: var(--accent-text); }
.theme-dark .arch .node.ai { border-color: var(--ai); box-shadow: 0 0 0 4px var(--ai-glow); }
.theme-dark .arch .node.ai .lab { color: var(--ai-text); }
.theme-dark .arch-link {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-text);
  font-family: var(--mono);
  font-size: 1.3rem;
  position: relative;
}
.theme-dark .arch-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 10px);
  animation: b2b-flow 1.2s linear infinite;
}
@keyframes b2b-flow { to { background-position: 20px 0; } }
.theme-dark .arch-link span { position: relative; background: var(--bg-deep); padding: 0 .3rem; }
.theme-dark .arch .no {
  margin-top: .8rem;
  border: 1px dashed var(--koral);
  padding: 1rem 1.2rem;
  color: var(--fg-muted);
  font-size: .95rem;
  display: flex;
  gap: .9rem;
  align-items: flex-start;
}
.theme-dark .arch .no b { color: var(--bad-text); font-family: var(--mono); font-weight: 500; font-size: 1.1rem; line-height: 1.2; }
.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: 2px; height: auto;
    background: repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 10px);
  }
}
.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 .74rem/1.2 var(--mono); 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);
  background: linear-gradient(180deg, var(--accent-glow), transparent 60%), var(--bg-deep);
  box-shadow: 0 24px 60px -30px 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: linear-gradient(90deg, var(--ai-glow), transparent 55%), 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(1) { margin-inline: 0 18%; }
.theme-dark .layer:nth-child(2) { margin-inline: 0 12%; }
.theme-dark .layer:nth-child(3) { margin-inline: 0 6%; }
.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 .layer:nth-child(n) { margin-inline: 0; }
}
.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; }

/* ---------- 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: 500 1rem/1.3 var(--mono);
  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);
  border-top: 4px solid var(--accent);
  box-shadow: 0 30px 70px -36px rgba(5, 36, 83, .45);
}
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: 500 .8rem/1.3 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-dim);
  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; }
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 .78rem/1.3 var(--mono);
  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 */
body:has(.b2b-uebergang .b2b-section) .formWrapper form .actions .btn.btn-primary {
  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: 0 14px 34px -16px var(--accent);
  transition: background .18s, box-shadow .18s, transform .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);
  box-shadow: 0 0 0 6px var(--accent-glow), 0 16px 38px -14px var(--accent);
  transform: translateY(-1px);
}
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; }
}
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);
}