/* ============================================================
   TEKS – Solution · Kino-Scroll-Erlebnis (Startseite)
   Grundzustand = normale, gestapelte Seite (funktioniert ohne JS).
   Erst wenn journey.js läuft und WebGL kann, schaltet es mit der
   Klasse html.journey-3d in den Kamera-Flug-Modus um.
   ============================================================ */

/* ---------- Grundzustand: statisch & lesbar ---------- */
#scrollspace { display: none; }
#chapters { position: static; }
.chapter { padding: 3.6rem 1.5rem; }
.chapter:first-of-type { padding-top: 9.5rem; }
.chapter-inner { max-width: 46rem; margin: 0 auto; text-align: center; }

/* V6.1: Nach dem Scrim-Aus tragen die Texte selbst die Lesbarkeit —
   ein mehrstufig weicher Schatten-Halo (eng+dunkel, mittel, weit+weich).
   Bewusst KEINE Fläche/Box: der Halo hat keine sichtbaren Kanten. */
.chapter {
  --text-halo: 0 1px 2px rgba(3, 4, 6, .95),
               0 2px 10px rgba(3, 4, 6, .9),
               0 6px 26px rgba(3, 4, 6, .78),
               0 14px 52px rgba(3, 4, 6, .55);
}
.chapter .kicker {
  font-size: .68rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(165, 178, 188, .8);
  margin: 0 0 1rem;
  text-shadow: var(--text-halo);
}
.chapter h1, .chapter h2 { text-shadow: var(--text-halo); }
.chapter p.lead { margin-left: auto; margin-right: auto; text-shadow: var(--text-halo); }
/* WICHTIG: Verlaufs-Wörter (.glow, background-clip:text + color:transparent)
   vertragen KEINEN text-shadow – der Schatten scheint durch die transparenten
   Buchstaben und färbt sie schwarz (Inhaber-Befund 17.08.2026). Deshalb dort
   Schatten aus und stattdessen drop-shadow auf die gerenderten Verlaufs-Pixel. */
.chapter .glow {
  text-shadow: none;
  filter: drop-shadow(0 2px 8px rgba(3, 4, 6, .85)) drop-shadow(0 6px 22px rgba(3, 4, 6, .55));
}

/* Wissenspunkte-Zähler im Brain-Kapitel: die Zahl tickt aus journey.js
   (Wissens-Netz-Wachstum), Verlaufsfarbe nur auf der Monospace-Zahl */
.brain-counter {
  margin: 1rem 0 0;
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--muted);
  text-shadow: var(--text-halo);
}
.brain-counter #brainCount {
  font-family: 'Cascadia Mono', 'Consolas', ui-monospace, monospace;
  font-weight: 700;
  font-size: 1rem;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Verlaufs-Text verträgt keinen Schatten – sonst schimmert er durch */
  text-shadow: none;
}

/* kleine Modul-Pillen (Agentenliste) */
.agent-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-top: 1.2rem;
  list-style: none;      /* die Tags sind eine echte Liste (ul/li) */
  padding: 0;
}
.agent-tags .tag { font-size: .6rem; padding: .28rem .7rem; }
/* Auf kleinen Bildschirmen im Kino-Modus: die 3D-Knoten zeigen die Namen bereits */
@media (max-width: 700px) {
  html.journey-3d .agent-tags { display: none; }
}

.chapter .btn-row { justify-content: center; margin-top: 1.6rem; }
.legal-line { margin-top: 2.2rem; }
.legal-line a { color: var(--muted-2); margin: 0 .6rem; }

/* ---------- Kino-Modus (JS + WebGL vorhanden) ---------- */
html.journey-3d #scrollspace { display: block; height: 1200vh; }
html.journey-3d #chapters {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;          /* Klicks gehen durch – außer auf Links/Buttons */
}
html.journey-3d .chapter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  opacity: 0;                    /* journey.js blendet je nach Scroll-Position ein */
  will-change: opacity, transform;
}
html.journey-3d .chapter:first-of-type { padding-top: 0; }
html.journey-3d .chapter a,
html.journey-3d .chapter .btn { pointer-events: auto; }

/* V6.1 (Inhaber, 15.08.2026: "Was ist das Schwarze rechts im Bildschirm?"):
   Der V5.4-Scrim (radialer Dunkel-Verlauf hinter den Textspalten) zeigte
   vor hellen Glows sichtbare KANTEN und ist KOMPLETT ENTFERNT — nicht
   wieder einbauen. Lesbarkeit sichern stattdessen (a) die 3D-Platzierungen
   (Textspalte = Schutzzone, V5.4 bleibt harte Regel) und (b) die
   mehrstufig weichen Textschatten (--text-halo, kein Kasten-Effekt). */

/* Text seitlich statt mittig, damit die 3D-Szene Platz hat */
html.journey-3d .chapter.align-left { justify-content: flex-start; }
html.journey-3d .chapter.align-left .chapter-inner { text-align: left; margin-left: 6vw; max-width: 30rem; }
html.journey-3d .chapter.align-right { justify-content: flex-end; }
html.journey-3d .chapter.align-right .chapter-inner { text-align: right; margin-right: 6vw; max-width: 30rem; }
html.journey-3d .chapter.align-bottom { align-items: flex-end; }
html.journey-3d .chapter.align-bottom .chapter-inner { margin-bottom: 12vh; }

/* Scroll-Hinweis im Intro */
.journey-hint {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(200, 206, 228, .62);
}
.journey-hint::after {
  content: "";
  width: 1px; height: 34px;
  background: linear-gradient(rgba(200, 206, 228, .6), transparent);
  animation: drop 2s ease-in-out infinite;
}
html:not(.journey-3d) .journey-hint { display: none; }
/* Schmale Fenster: Hinweis tiefer und kürzer, damit er nicht in die
   Legal-Leiste (#legalBar, bottom 4.8rem) hineinragt */
@media (max-width: 700px) {
  .journey-hint { bottom: 1.1rem; }
  .journey-hint::after { height: 20px; }
}

/* Impressum & Datenschutz: klein, dezent, aber immer in Reichweite */
#legalBar {
  position: fixed;
  right: 4.6rem;
  bottom: 2.05rem;
  z-index: 60;
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--muted-2);
}
#legalBar a {
  color: var(--muted-2);
  text-decoration: none;
}
#legalBar a:hover, #legalBar a:focus-visible {
  color: var(--text);
  text-decoration: underline;
}
@media (max-width: 700px) {
  #legalBar { right: 1.3rem; bottom: 4.8rem; }
}

/* Fortschrittsleiste des Kamerafluges */
#journeyProgress {
  position: fixed;
  left: 0; bottom: 0;
  height: 2px;
  width: 0;
  background: var(--grad);
  z-index: 60;
}
html:not(.journey-3d) #journeyProgress { display: none; }

/* Projektregel: Animationen bei "Bewegung reduzieren" NIE stoppen,
   nur auf 0,45x Tempo drosseln (2s / 0,45 ≈ 4,4s) */
@media (prefers-reduced-motion: reduce) {
  .journey-hint::after { animation-duration: 4.4s; }
}

/* ---------- Lade-Intro: das TEKS-Logo ---------- */
#loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #05060a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .9s ease, visibility 0s .9s;
}
#loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* Das echte Logo baut sich auf – die Choreografie des alten Text-Intros:
   1. Buchstaben gleiten von außen zusammen (wie früher die Laufweite)
   2. die Verlaufs-Akzente (E-Balken, K-Arm) zeichnen sich
   3. die Schaltkreis-Linien wachsen, SOLUTION erscheint */
.loader-svg { width: min(26rem, 72vw); overflow: visible; }
.loader-svg .ll-letter {
  opacity: 0;
  transform-box: fill-box;
  animation: llLetter .6s ease-out forwards;
}
.loader-svg .ll-t { transform: translateX(26px);  animation-delay: .08s; }
.loader-svg .ll-e { transform: translateX(9px);   animation-delay: .16s; }
.loader-svg .ll-k { transform: translateX(-9px);  animation-delay: .24s; }
.loader-svg .ll-s { transform: translateX(-26px); animation-delay: .32s; }
@keyframes llLetter { to { opacity: 1; transform: none; } }
.loader-svg .ll-akzent {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: llDraw .45s ease-out .5s forwards;
}
@keyframes llDraw { to { stroke-dashoffset: 0; } }
.loader-svg .ll-line {
  transform: scaleX(0);
  transform-box: fill-box;
  animation: llLine .5s ease-out .62s forwards;
}
.loader-svg .ll-line-l { transform-origin: right center; }
.loader-svg .ll-line-r { transform-origin: left center; }
@keyframes llLine { to { transform: scaleX(1); } }
.loader-svg .ll-sub {
  opacity: 0;
  animation: llSub .55s ease-out .7s forwards;
}
@keyframes llSub { to { opacity: 1; } }
/* Auch das Lade-Intro wird nur gedrosselt (0,45x), nicht übersprungen —
   site.js wartet bei reduced-motion entsprechend länger mit dem Ausblenden */
@media (prefers-reduced-motion: reduce) {
  .loader-svg .ll-letter { animation-duration: 1.35s; }
  .loader-svg .ll-t { animation-delay: .18s; }
  .loader-svg .ll-e { animation-delay: .36s; }
  .loader-svg .ll-k { animation-delay: .53s; }
  .loader-svg .ll-s { animation-delay: .71s; }
  .loader-svg .ll-akzent { animation-duration: 1s; animation-delay: 1.1s; }
  .loader-svg .ll-line { animation-duration: 1.1s; animation-delay: 1.38s; }
  .loader-svg .ll-sub { animation-duration: 1.2s; animation-delay: 1.55s; }
}

/* ---------- Kommandozentrale: Bedienelemente ----------
   (Farbwelt-Test wurde entfernt: Entscheidung 07.08.2026 – Farbe nach Logo) */
#ccButton, #ccClose {
  position: fixed;
  z-index: 60;
  display: none;
  font-size: .62rem;
  padding: .6rem 1.2rem;
}
#ccButton.show, #ccClose.show { display: inline-block; }
#ccButton { left: 1.4rem; bottom: 1.6rem; }
#ccClose { top: 4.6rem; right: 1.5rem; }
html.focus-mode { overflow: hidden; }
html.focus-mode .journey-hint, html.focus-mode #journeyProgress { display: none; }
html:not(.journey-3d) #ccButton, html:not(.journey-3d) #ccClose { display: none !important; }
#processDone { color: #42e896; }

/* Unsichtbare Kapitel dürfen nicht "blind" anklickbar sein */
html.journey-3d .chapter:not(.active) a,
html.journey-3d .chapter:not(.active) .btn { pointer-events: none; }

/* Sehr kleine Bildschirme: Bodentexte höher ansetzen */
@media (max-height: 600px) {
  html.journey-3d .chapter.align-bottom .chapter-inner { margin-bottom: 4vh; }
}
/* Schmale Fenster: Bodentexte über die Bedien-Knöpfe heben */
@media (max-width: 520px) {
  html.journey-3d .chapter.align-bottom .chapter-inner { margin-bottom: 7.5rem; }
}

/* ---------- Breite Kapitel (Produktlinie, Konfigurator) ---------- */
.chapter-inner.wide { max-width: 62rem; }
html.journey-3d .chapter-inner.wide { max-height: 84vh; overflow-y: auto; padding-bottom: 1.2rem; }
/* Inhaber-Befund 17.08.2026: "abgeschnitten, man kann nicht runterscrollen".
   Das Kapitel steht auf pointer-events:none (Klicks sollen zur 3D-Szene
   durchfallen) - dadurch erreichte das Mausrad den Scroll-Kasten nie.
   Im AKTIVEN Kapitel bekommt der Kasten seine Events zurück; an seinen
   Enden reicht der Browser das Rad automatisch an die Seite weiter. */
html.journey-3d .chapter.active .chapter-inner.wide { pointer-events: auto; }

.product-grid {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  text-align: left;
}
.product-grid .card { padding: 1rem 1.1rem; }
.product-grid h3 { margin: 0 0 .4rem; font-size: .95rem; color: var(--text-strong); }
.product-grid p { margin: 0; font-size: .78rem; }
.product-grid .label { margin-bottom: .4rem; }
@media (max-width: 860px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .product-grid { grid-template-columns: 1fr; } }

/* ---------- Zwei-Ebenen-Modell: Marketplace & Produktseiten ---------- */
/* Produkt-Tagline ("Verbinden. Verstehen. Weiterleiten.") */
.tagline {
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin: .1rem 0 .9rem;
  text-shadow: var(--text-halo);
}
/* Mitarbeiter sprechen in der Ich-Form – das macht sie lebendig */
.crew-quote {
  border-left: 2px solid rgba(79, 139, 255, .55);
  padding-left: .9rem;
  max-width: 34rem;
  margin: 1.1rem auto 0;
  font-size: .9rem;
  font-style: italic;
  color: var(--muted);
  text-shadow: var(--text-halo);
}
.crew-quote strong { color: var(--text-strong); font-style: normal; }
html.journey-3d .chapter .crew-quote { margin-left: 0; margin-right: 0; }
html.journey-3d .chapter.align-right .crew-quote {
  border-left: 0;
  border-right: 2px solid rgba(79, 139, 255, .55);
  padding-left: 0;
  padding-right: .9rem;
  margin-left: auto;
}
/* Micro-Zeile: kurzer Merksatz am Kapitelende ("Neue Software im Haus? …") */
.micro-line {
  font-size: .78rem;
  letter-spacing: .03em;
  font-style: italic;
  color: var(--muted-2);
  text-shadow: var(--text-halo);
}
/* Marketplace-Karten: kleine Tagline + Sprung zur Produktseite */
.market-grid .tagline-sm {
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 .45rem;
}
.market-more {
  background: none;
  border: 0;
  padding: 0;
  margin-top: .55rem;
  font: inherit;
  font-size: .74rem;
  color: var(--cyan);
  cursor: pointer;
}
.market-more:hover, .market-more:focus-visible { text-decoration: underline; }
/* Kompakte Liste der weiteren Marketplace-Produkte (07–13) */
.market-sub {
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 1.2rem 0 .55rem;
}
.market-mini {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
  padding: 0;
  margin: 0;
}
.market-mini li {
  font-size: .68rem;
  color: var(--muted);
  border: 1px solid var(--card-line);
  border-radius: 999px;
  padding: .3rem .8rem;
  background: var(--card-bg);
}

/* ---------- V5.11: Marketplace-Karten leben (Inhaber, 14.08.2026:
   "viel zu langweilig … weniger Text, mehr visuelle Darstellung").
   Jede Karte trägt ihre Produktfarbe inline als --pc (Vollton) und
   --pcs (30%-Alpha für Glows): Nummer + linker Rand + Hover-Glow. */
.market-grid .card {
  --pc: #4f8bff;
  --pcs: rgba(79, 139, 255, .3);
  border-left: 3px solid var(--pc);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.market-grid .card:hover {
  transform: translateY(-3px);
  border-color: var(--pc);
  box-shadow: 0 16px 44px rgba(3, 3, 4, .5), 0 0 26px var(--pcs);
}
.market-grid .card .label { color: var(--pc); }
.market-desc { margin: 0 0 .55rem; }
/* Mitarbeiter als kleine Chips mit pulsierendem LIVE-Punkt
   (ersetzt den Satz "Hier arbeiten Dana & Milo") */
.market-crew { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .5rem; }
.mc-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .66rem;
  color: var(--text-strong);
  border: 1px solid var(--card-line);
  border-radius: 999px;
  padding: .18rem .55rem;
  background: rgba(255, 255, 255, .04);
}
.mc-chip i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #42e896;
  box-shadow: 0 0 8px rgba(66, 232, 150, .85);
  animation: mcPulse 2.2s ease-in-out infinite;
}
.mc-chip:nth-child(2) i { animation-delay: .7s; }
.mc-chip:nth-child(3) i { animation-delay: 1.4s; }
@keyframes mcPulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
/* Rotierende Live-Zeile ("Dana · Immobilien-Exposé zerlegt ✓"):
   Text wechselt per journey.js, der Fade läuft über .on */
.market-live {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  min-height: 1rem;
  font-size: .68rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transition: opacity .3s;
}
.market-live.on { opacity: 1; }
.market-live::before {
  content: '';
  flex: none;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--pc);
  box-shadow: 0 0 7px var(--pcs);
}
.market-live .ml-text { overflow: hidden; text-overflow: ellipsis; }
html:not(.journey-3d) .market-live { display: none; }   /* Rotation liefert journey.js */
/* Die 7 "Außerdem"-Pillen: Produktfarb-Punkt + Hover-Glow (V5.11.4) */
.market-mini li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  --pc: #4f8bff;
  --pcs: rgba(79, 139, 255, .3);
  transition: border-color .25s, box-shadow .25s;
}
.market-mini li::before {
  content: '';
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pc);
  box-shadow: 0 0 8px var(--pcs);
}
.market-mini li:hover { border-color: var(--pc); box-shadow: 0 0 18px var(--pcs); }
/* reduced-motion: LIVE-Punkte pulsieren weiter, nur langsamer (Faktor 0,45) —
   dito für den Fade der Live-Zeile und die Konfigurator-Chips/Pillen
   (.3s/.45 = .67s bzw. .25s/.45 = .56s, Projektregel: drosseln, nie stoppen) */
@media (prefers-reduced-motion: reduce) {
  .mc-chip i { animation-duration: 4.9s; }
  .market-live { transition-duration: .67s; }
  .kchip, .kpill { transition-duration: .56s; }
}

html:not(.journey-3d) .market-more { display: none; }   /* ohne Kameraflug: einfach weiterscrollen */
html.journey-3d .chapter .market-more { pointer-events: auto; }
html.journey-3d .chapter:not(.active) .market-more { pointer-events: none; }
/* Ohne WebGL gibt es keine anklickbaren 3D-Karten und keinen Live-Prozess:
   Klick-Tipps und den Prozess-Button dann ausblenden */
html:not(.journey-3d) .only-3d { display: none; }
html:not(.journey-3d) #runProcess { display: none; }

/* ---------- Agenten-DNA ("Das Grundprinzip", Warum-Kapitel) ----------
   Kein eigenes Kapitel: der Block sitzt zwischen Lead und den sechs
   Argument-Karten. Chips im Stil der kleinen Pillen (.market-mini). */
.dna-block {
  max-width: 46rem;
  margin: 1.5rem auto 1.6rem;
  padding: 1.2rem 1.4rem 1.35rem;
  border: 1px solid var(--card-line);
  border-radius: .9rem;
  background: var(--card-bg);
  text-align: center;
}
.dna-block .kicker { margin-bottom: .55rem; }
.dna-title {
  margin: 0 0 .6rem;
  font-size: 1.02rem;
  color: var(--text-strong);
  text-shadow: var(--text-halo);
}
.dna-text {
  max-width: 40rem;
  margin: 0 auto;
  font-size: .84rem;
  color: var(--muted);
}
.dna-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
  padding: 0;
  margin: 1rem 0 0;
}
.dna-chips li {
  font-size: .66rem;
  letter-spacing: .04em;
  color: var(--muted);
  border: 1px solid var(--card-line);
  border-radius: 999px;
  padding: .28rem .75rem;
  background: var(--card-bg);
}
/* Zitat-Zeile in Gold (Zahlen/Buchhaltung – Fibi spricht) */
.dna-quote {
  border-left-color: rgba(251, 191, 36, .55);
  color: rgba(251, 191, 36, .88);
}
.dna-quote strong { color: #fbbf24; }
/* Der Block steht in einem mittigen wide-Kapitel: Zitat mittig halten
   (die generelle Kino-Regel setzt margin-left/right sonst auf 0) */
html.journey-3d .chapter .dna-quote { margin-left: auto; margin-right: auto; }

/* ---------- Chef-Moment-Zeile (Finale) ----------
   Goldene Erinnerung über dem CTA: erscheint nur, wenn im Leitstand eine
   Freigabe erteilt wurde. journey.js entfernt dann das hidden-Attribut
   (Merker: sessionStorage 'teksChefMoment'). */
.chef-moment {
  max-width: 40rem;
  margin: 1.5rem auto 0;
  font-size: .8rem;
  letter-spacing: .03em;
  color: #fbbf24;
  text-shadow: var(--text-halo);
}

/* ---------- Konfigurator (V5.10: Glas + Orange) ----------
   Inhaber-Entscheidung 14.08.2026: Orange (#fb923c, Verlauf bis #f97316)
   ist die AUSWAHL-Farbe im Konfigurator — NUR hier (Gold #fbbf24 bleibt
   Zahlen/Buchhaltung, Blau bleibt Primär-Akzent der übrigen Seite).
   Die vier Container (Preset-Zeile, Produkte, Integrationen, Vorschau)
   sind Glas-Panels. Grundzustand = halbdeckendes Dunkel-Panel (läuft in
   JEDEM Browser), @supports rüstet auf echtes backdrop-filter-Glas auf.
   Performance-Regel: blur NUR auf diesen vier Panels, nie vollflächig. */
.konfig-presets,
.konfig-group,
.konfig-preview {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 1.1rem;
  background: rgba(7, 10, 15, .78);            /* Fallback ohne Glas-Support */
  /* feine helle Oberkante + weicher Außen-Schatten = "Glasplatte" */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16),
              0 18px 44px rgba(0, 0, 0, .38);
  transition: border-color .25s ease;
}
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .konfig-presets,
  .konfig-group,
  .konfig-preview {
    background: rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
  }
}
.konfig-presets:hover,
.konfig-group:hover,
.konfig-preview:hover { border-color: rgba(255, 255, 255, .24); }

/* Branchen-Presets: ein Klick setzt unten eine passende Vorauswahl.
   Der aktive Chip ([data-preset].active) wandert beim CTA-Klick
   automatisch als "preset" mit an kontakt.html. */
.konfig-presets {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
  margin: 1rem 0 .2rem;
  padding: .55rem .7rem;
}
.kchip {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);        /* neutrales Glas, unausgewählt */
  color: var(--muted);
  font-family: inherit;
  font-size: .68rem;
  letter-spacing: .04em;
  padding: .38rem .9rem;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, color .25s ease,
              box-shadow .25s ease, transform .25s ease;
}
.kchip:hover, .kchip:focus-visible {
  border-color: rgba(255, 255, 255, .32);
  color: var(--text-strong);
  transform: translateY(-1px);                  /* sanfte Hover-Anhebung */
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
/* Auswahl = Orange (Chip aktiv) */
.kchip.active {
  border-color: rgba(251, 146, 60, .75);
  background: rgba(251, 146, 60, .18);
  color: var(--text-strong);
  box-shadow: 0 0 18px rgba(249, 115, 22, .3);
}
/* Im Kino-Modus nur im aktiven Kapitel klickbar (wie .market-more) */
html.journey-3d .chapter .kchip { pointer-events: auto; }
html.journey-3d .chapter:not(.active) .kchip { pointer-events: none; }

.konfig {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.2rem;
  margin: 1.2rem 0 .6rem;
  text-align: left;
}
@media (max-width: 760px) { .konfig { grid-template-columns: 1fr; } }
.konfig-cols { display: grid; gap: .9rem; align-content: start; }
.konfig-group { padding: .8rem .9rem .9rem; }
.konfig-group legend {
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 0 .4rem .3rem;
  /* feine Verlaufs-Unterstreichung der Panel-Überschrift */
  background: var(--grad) bottom / 100% 1px no-repeat;
}
.kpill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: .18rem .25rem .18rem 0;
  padding: .32rem .7rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);        /* neutrales Glas, unausgewählt */
  font-size: .72rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: border-color .25s ease, background .25s ease, color .25s ease,
              box-shadow .25s ease, transform .25s ease;
}
.kpill:hover {
  border-color: rgba(255, 255, 255, .3);
  transform: translateY(-1px);                  /* sanfte Hover-Anhebung */
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
/* Haken/Checkbox in Auswahl-Orange */
.kpill input { accent-color: #fb923c; }
/* V5.9: offene Liste — "+ viele weitere" ist Hinweis, keine Auswahl */
.kpill-more {
  cursor: default;
  border-style: dashed;
  opacity: .85;
}
.kpill-more:hover { transform: none; box-shadow: none; border-color: rgba(255, 255, 255, .14); }
/* Auswahl = Orange (Pille gewählt) */
.kpill:has(input:checked) {
  border-color: rgba(251, 146, 60, .7);
  color: var(--text-strong);
  background: rgba(251, 146, 60, .18);
  box-shadow: 0 0 14px rgba(249, 115, 22, .22);
}
.konfig-preview {
  padding: .8rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.konfig-preview svg { width: 100%; height: auto; }
/* Summary-Zeile: die Zahlen in Auswahl-Orange (index.html setzt sie in <b>) */
#konfSummary b {
  color: #fb923c;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Hub-Ring-Puls: kurzer oranger Impuls, wenn eine Auswahl HINZUKOMMT.
   index.html hängt einen Kreis mit dieser Klasse an das Vorschau-SVG;
   der nächste render()-Durchlauf räumt ihn ohnehin wieder ab. */
#konfSvg .hub-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: hubPulse .7s ease-out forwards;
}
@keyframes hubPulse {
  from { opacity: .9; transform: scale(.5); }
  to   { opacity: 0;  transform: scale(1.7); }
}
/* Projektregel reduced-motion: nicht stoppen, nur drosseln (0,7s / 0,45) */
@media (prefers-reduced-motion: reduce) {
  #konfSvg .hub-pulse { animation-duration: 1.55s; }
}
/* V6.5.3 — Finale-CTA lesbar (Inhaber 15.08.2026, Bild 7: der Button
   war weiß-auf-weiß unlesbar): Grundfläche im Marken-Verlauf
   (#5bc7ff→#6f9dff→#b18cff), Text dunkel (#0a0d16) und fett.
   Hover: sanftes Anheben (kommt aus .btn:hover, style.css) + Glow.
   Gilt NUR für den Haupt-CTA des letzten Kapitels — der
   Sekundär-Button bleibt Ghost. */
#chapters .chapter:last-of-type .btn:not(.ghost) {
  background: linear-gradient(100deg, #5bc7ff, #6f9dff 48%, #b18cff);
  color: #0a0d16;
  font-weight: 700;
}
#chapters .chapter:last-of-type .btn:not(.ghost):hover {
  box-shadow: 0 0 46px rgba(111, 157, 255, .45), 0 0 18px rgba(177, 140, 255, .35);
}

/* V6.5.2 — Orange-Funke: beim ANWÄHLEN fliegt ein kurzer oranger Funke
   vom angeklickten Chip zur Hub-Vorschau (Orange bleibt reine
   Konfigurator-Farbe). Element + Flugbahn erzeugt das Inline-Script in
   index.html per WAAPI; die reduced-motion-Drosselung (0,45x) setzt
   das Script über die Animationsdauer. */
.konfig-funke {
  position: fixed;
  z-index: 60;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #ffedd5 0%, #fb923c 45%, rgba(249, 115, 22, 0) 72%);
  box-shadow: 0 0 12px rgba(251, 146, 60, .75);
}

/* Formular-Elemente im Kino-Modus klickbar machen (nur im aktiven Kapitel) */
html.journey-3d .chapter input,
html.journey-3d .chapter label,
html.journey-3d .chapter fieldset { pointer-events: auto; }
html.journey-3d .chapter:not(.active) input,
html.journey-3d .chapter:not(.active) label { pointer-events: none; }

/* ---------- Freigabe-Bedienfeld (Cockpit, Fokus-Modus) ----------
   journey.js erzeugt #dashApprove komplett per JS und blendet es nur
   im Fokus-Modus ein ("Der Mensch bleibt Chef"): ein wartender Vorgang,
   ein Knopf, danach dauerhaft das grüne erledigt-Badge.
   Sichtbarkeit über opacity (Projektregel – kein visibility:hidden). */
#dashApprove {
  position: fixed;
  left: 50%;
  bottom: 3.6rem;
  transform: translateX(-50%) translateY(14px);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: .9rem;
  max-width: min(92vw, 46rem);
  padding: .65rem .7rem .65rem 1.25rem;
  border-radius: 999px;
  background: rgba(8, 11, 18, .88);
  border: 1px solid rgba(251, 191, 36, .5);      /* Gold: wartet auf den Menschen */
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, border-color .35s ease;
}
#dashApprove.show { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
#dashApprove.done { border-color: rgba(66, 232, 150, .55); }  /* Grün nur als Status-Signal */
#dashApprove .da-task {
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#dashApprove .da-btn {
  /* Kurzschreibweise "font: … inherit" ist ungültig (CSS-wide-Keyword):
     Browser verwerfen die ganze Zeile – daher als Einzelwerte */
  font-weight: 600;
  font-size: .68rem;
  line-height: 1;
  font-family: inherit;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #05060a;
  background: var(--grad);
  border: 0;
  border-radius: 999px;
  padding: .6rem 1.1rem;
  cursor: pointer;
  white-space: nowrap;
}
#dashApprove .da-btn:hover,
#dashApprove .da-btn:focus-visible { box-shadow: 0 0 26px rgba(111, 157, 255, .45); }
#dashApprove .da-badge {
  display: none;                                  /* erscheint erst nach der Freigabe */
  font-size: .7rem;
  letter-spacing: .06em;
  color: #42e896;
  white-space: nowrap;
  padding: .55rem .35rem;
}
#dashApprove.done .da-btn { display: none; }      /* erteilt = Knopf weg, Badge da */
#dashApprove.done .da-badge { display: inline-block; }
html:not(.journey-3d) #dashApprove { display: none; }  /* ohne WebGL gibt es keinen Fokus-Modus */
@media (max-width: 700px) {
  #dashApprove { bottom: 5.6rem; flex-wrap: wrap; justify-content: center; border-radius: 1rem; }
}

/* Handy-Feinschliff (Inhaber-Abnahme 17.08.2026): Die festen Ecken-Elemente
   (Legal-Leiste + Command-Center-Knopf) kollidieren am Seitenende mit dem
   Footer. Auf schmalen Bildschirmen ausblenden - Impressum/Datenschutz
   stehen im Footer, das Command Center ist ein Desktop-Kuerzel. */
@media (max-width: 700px) {
  #legalBar, #ccButton { display: none; }
}