/* CIN Servicerobotik · Infopage
   Optik wie die CIN-Next-Seiten (Nutzer 2026-10-15: "Design an die restlichen Seiten anpassen"): hell als Start,
   [data-bs-theme="dark"] schaltet um. Das Attribut setzt js/hp-theme.js (Kopie aus der Homepage), die Wahl gilt
   gemeinsam mit den CIN-Next-Seiten. Werte wie in homepage.css der Homepage (Kopfzeile, Hero, Produktfarben).
   .modus-pin  = Desktop mit Festhalten beim Scrollen
   .modus-ruhig = Handy oder "Bewegung reduzieren": kein Festhalten */

/* JetBrains Mono wie im CRM-Hub der Übersicht (Uhr und Programmtafel im Alltag), lokal, SIL Open Font License */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Outfit wie CIN Next, lokal (keine Google-Schriften), variable Schrift für alle Stärken */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Produktfarbe Robo wie --p-robo und --pk-robo in homepage.css; --pk-robo ist Schrift- und Akzentfarbe. Seit
     2026-10-27 #5c37c3 (Nutzer beim Architekten: "#5c37c3 als neue farbe - gib es an alle weiter", dunkel "Heller Ton
     dunkel" #8e74d8); --p-robo ist sie zu 82 % mit Grau, wie vorher etwas grauer als --pk-robo */
  --p-robo: #6244b7;
  --pk-robo: #5c37c3;
  --navy: #1b3661;
  --bg: #ffffff;
  --flaeche: #ffffff;
  --flaeche2: #f6f7f9;
  --text: #1a1714;
  --titel: #1b3661;
  --leise: #5c564c;
  --linie: #e5e7eb;
  --linie-stark: #d7dbe2;
  --akzent: #5c37c3;
  --akzent-weich: rgba(92, 55, 195, 0.16);
  --auf-akzent: #ffffff;
  --boden: #eceef2;
  --licht: rgba(92, 55, 195, 0.1);
  --schatten: rgba(20, 35, 50, 0.24);
  --punkt: #d6cfc2;
  --punkt-an: #1b3661;
  --knopf-bg: #ffffff;
  --knopf-hover: #eef1f6;
  --knopf-text: #1b3661;
  --kopf-h: 70px;
  --rand: clamp(20px, 5vw, 72px);
  --weich: cubic-bezier(0.16, 1, 0.3, 1);
  /* Karten wie .copy, .hp-price-card und .close-card auf pos.html (gemessen 2026-10-22, hell und dunkel) */
  --k: #7a7368;
  --text2: #3d3830;
  --karte-rand: rgba(27, 54, 97, 0.08);
  --karte-schatten: 0 10px 36px rgba(27, 54, 97, 0.08);
  --preis-rand: rgba(92, 55, 195, 0.26);
  --preis-grund: #faf7ff;
  --preis-schatten: 0 10px 28px rgba(27, 54, 97, 0.07);
  --strich: rgba(27, 54, 97, 0.14);
  /* Quadrate der Abschlusskarte: Verläufe der Produkte wie --p-* und --p2-* in homepage.css */
  --p-crm: #6a8bd7;
  --p2-crm: #3495c5;
  --p-pos: #d76a83;
  --p2-pos: #d27356;
  --p-wms: #2a9d95;
  --p2-wms: #3298bd;
  --p-shop: #589d2a;
  --p2-shop: #2ba156;
  /* Grafiken im Look der KEENON-Clips (Neuaufbau 2026-10-22, "Cyan wie KEENON"): Linien, Routen, Sensorfelder.
     Technik-Band und Laufwege-Karte sind in Hell und Dunkel dunkel */
  --cyan: #33d1e6;
  --band: #0f1b2f;
  --band2: #13233b;
  --band-text: #e8eef6;
  --band-leise: #a9b7c9;
  --studio: radial-gradient(ellipse 70% 60% at 50% 62%, #ffffff, #eef1f5 72%);
  color-scheme: light;
}

:root[data-bs-theme="dark"] {
  --p-robo: #8b76c8;
  --pk-robo: #8e74d8;
  --akzent: #8e74d8;
  --bg: #0d1117;
  --flaeche: #161b22;
  --flaeche2: #1f2937;
  --text: #e6edf3;
  --titel: #e6edf3;
  --leise: #9ca3af;
  --linie: #30363d;
  --linie-stark: #30363d;
  --akzent-weich: rgba(142, 116, 216, 0.2);
  --boden: #161b22;
  --licht: rgba(123, 109, 255, 0.14);
  --schatten: rgba(0, 0, 0, 0.6);
  --punkt: #30363d;
  --punkt-an: #7b6dff;
  --knopf-bg: #161b22;
  --knopf-hover: #1f2937;
  --knopf-text: #e6edf3;
  --k: #9ca3af;
  --text2: #c9d1d9;
  --karte-rand: rgba(48, 54, 61, 0.8);
  --karte-schatten: 0 10px 36px rgba(0, 0, 0, 0.28);
  --preis-rand: #544b73;
  --preis-grund: #1c1d29;
  --preis-schatten: 0 12px 30px rgba(0, 0, 0, 0.3);
  --strich: #30363d;
  --band: #0f1a2b;
  --band2: #142338;
  --studio: radial-gradient(ellipse 70% 60% at 50% 62%, #252c37, #171c24 72%);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  transition: background-color 0.4s, color 0.4s;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.04;
}

h1 {
  font-size: clamp(2.5rem, 6.2vw, 5.8rem);
}

h2 {
  font-size: clamp(2rem, 4.2vw, 3.7rem);
}

h3 {
  font-size: clamp(1.4rem, 2vw, 1.9rem);
}

p,
h4 {
  margin: 0;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}

/* Augenbraue wie .k der CIN-Next-Seiten (Schritt 2): grau, klein, gesperrt */
.augenbraue {
  color: var(--k);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.leise {
  color: var(--leise);
}

/* Knöpfe */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: transparent;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

.knopf--primaer {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.knopf--klein {
  min-height: 38px;
  padding: 0 16px;
  font-size: 0.92rem;
}

/* Symbol-Knöpfe der Kopfzeile wie .hp-mode-btn und .hp-nav-link der CIN-Next-Seiten */
.knopf-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--linie);
  background: var(--knopf-bg);
  color: var(--knopf-text);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.knopf-icon:hover {
  background: var(--knopf-hover);
}

[data-bs-theme="dark"] #thema-knopf {
  background: #1f2937;
}

.knopf-icon svg {
  width: 17px;
  height: 17px;
}

.textknopf {
  border: 0;
  background: none;
  padding: 0;
  color: var(--akzent);
  font-weight: 600;
  cursor: pointer;
}

/* Kopfzeile wie .hp-nav der CIN-Next-Seiten */
.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  height: var(--kopf-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0.7rem 1.4rem;
  background: color-mix(in srgb, var(--bg) 38%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  transition: opacity 0.4s;
}

/* Über dem Technik-Band dunkel (js/navigation.js setzt .ist-dunkel; Prüfung 2026-10-22: sonst grauer Balken) */
.kopf.ist-dunkel {
  --punkt: #3a4658;
  --punkt-an: #e8eef6;
  background: rgba(15, 27, 47, 0.55);
}

.kopf.ist-dunkel .knopf-icon {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #e8eef6;
}

.kopf.ist-dunkel .kopf-marke .logo-hell {
  display: none;
}

.kopf.ist-dunkel .kopf-marke .logo-dunkel {
  display: block;
}

/* Kapitel-Leiste: Link ist die Trefferfläche (14 x 24 px), der sichtbare Punkt ist ::before
   (8 px, aktiv 22 px breit). Name nur im Etikett sichtbar. Vorbild: CIN-Next-Homepage. */
.kopf-punkte {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
}

.kopf-punkte > a {
  position: relative;
  display: block;
  width: 14px;
  height: 24px;
  font-size: 0;
  line-height: 0;
  color: transparent;
  transition: width 0.35s var(--weich);
}

.kopf-punkte > a::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 8px;
  margin-top: -4px;
  border-radius: 99px;
  background: var(--punkt);
  transition: background-color 0.25s ease, transform 0.3s var(--weich), box-shadow 0.2s ease;
}

.kopf-punkte > a.ist-aktiv {
  width: 28px;
}

.kopf-punkte > a.ist-aktiv::before,
.kopf-punkte > a.ist-hover::before,
.kopf-punkte > a:focus-visible::before {
  background: var(--punkt-an);
}

.kopf-punkte > a.ist-hover::before,
.kopf-punkte > a:focus-visible::before {
  transform: scale(1.5);
}

.kopf-punkte > a.ist-aktiv.ist-hover::before,
.kopf-punkte > a.ist-aktiv:focus-visible::before {
  transform: scale(1.12, 1.5);
}

.kopf-punkte > a:focus-visible {
  outline: none;
}

.kopf-punkte > a:focus-visible::before {
  box-shadow: 0 0 0 3px var(--akzent-weich);
}

/* Klick: ein Ring löst sich vom Punkt */
.kopf-punkte > a::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  border: 2px solid var(--punkt-an);
  opacity: 0;
  pointer-events: none;
}

.kopf-punkte > a.ist-los::after {
  animation: punkt-los 0.55s var(--weich);
}

@keyframes punkt-los {
  from {
    opacity: 0.7;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(3.2);
  }
}

.kopf-tip {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  z-index: 2;
  translate: var(--tip-x, 0px) 0;
  transform: translateX(-50%) translateY(-6px) scale(0.92);
  transform-origin: 50% 0;
  padding: 0.3rem 0.7rem 0.32rem;
  border-radius: 999px;
  background: var(--punkt-an);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: translate 0.34s var(--weich), transform 0.24s var(--weich), opacity 0.18s ease;
}

.kopf-tip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 2px;
  background: inherit;
  transform: rotate(45deg);
}

.kopf-tip.ist-an {
  opacity: 1;
  transform: translateX(-50%);
}

.kopf-tip.ist-sprung {
  transition: transform 0.24s var(--weich), opacity 0.18s ease;
}

.kopf-tip-face {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.kopf-tip-face i {
  display: inline-flex;
}

.kopf-tip-face svg {
  width: 13px;
  height: 13px;
}

.kopf-tip-face.ist-wechsel {
  animation: tip-wechsel 0.22s var(--weich);
}

@keyframes tip-wechsel {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Logo CIN NEXT führt zur Übersicht, daneben das Feld ROBO in der Produktfarbe (wie .hp-nav-badge mit data-p).
   Ohne Versionszeile; das Feld steht an derselben Stelle wie auf den anderen Seiten, wo darunter die Version folgt. */
.kopf-marke {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 2.1rem;
  text-decoration: none;
}

.kopf-marke img {
  display: block;
  width: auto;
  height: 2.1rem;
}

.kopf-marke .logo-dunkel,
[data-bs-theme="dark"] .kopf-marke .logo-hell {
  display: none;
}

[data-bs-theme="dark"] .kopf-marke .logo-dunkel {
  display: block;
}

/* Logo in der Produktfarbe (Übergabe "Logo in Produktfarbe und Favicon", Nutzer 2026-10-20; Vorlage homepage.css in der
   korrigierten Fassung 968b8f3): X und Feld GENERATION in Robo-Violett. Das Bild schiebt seine Datei aus dem Rahmen und
   zeigt als Hintergrund ein Grundbild, das außerhalb von X und Feld deckend Navy (dunkel: Weiß) ist, darunter die
   Produktfarbe. Die Maske ist das Originallogo; sie allein glättet die Kanten, so entsteht kein violetter Saum. */
.kopf-marke img {
  --logo-grund: url("../img/ci/cinnextgen_light_ohne_x.webp");
  --logo-maske: url("../img/ci/cinnextgen_light.webp");
  object-position: -999rem 0;
  background: var(--logo-grund) 0 0 / 100% 100% no-repeat var(--pk-robo);
  -webkit-mask: var(--logo-maske) 0 0 / 100% 100% no-repeat;
  mask: var(--logo-maske) 0 0 / 100% 100% no-repeat;
}

.kopf-marke .logo-dunkel {
  --logo-grund: url("../img/ci/cinnextgen_dark_ohne_x.webp");
  --logo-maske: url("../img/ci/cinnextgen_dark.webp");
}

/* Handy: Lücke zwischen Logo und Feld wie auf POS gemessen (7 px) */
@media (max-width: 767.98px) {
  .kopf-marke {
    gap: 0.45rem;
  }
}

.kopf-feld {
  flex: 0 0 auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 1.3rem;
  margin-bottom: 0.075rem;
  border-radius: 4px;
  background: var(--pk-robo);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

@media (min-width: 768px) {
  .kopf-marke,
  .kopf-marke img {
    height: 3rem;
  }

  /* 0,03rem Abstand unten, 8,4 px Versionszeile, 0,2rem Lücke wie bei POS und WMS */
  .kopf-feld {
    width: 2.4rem;
    height: 1.7rem;
    margin-bottom: calc(0.23rem + 8.4px);
  }
}

.kopf-aktionen {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

a.knopf-icon {
  text-decoration: none;
}

/* Gespräch anfragen: Navy-Knopf mit Sprechblase wie .hp-nav-cta */
.knopf-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  transition: transform 0.2s var(--weich);
}

.knopf-cta:hover {
  transform: scale(1.06);
}

.knopf-cta svg {
  width: 19px;
  height: 19px;
}

/* Schmale Handys: Rand und Lücken enger wie auf den CIN-Next-Seiten */
@media (max-width: 399.98px) {
  .kopf {
    padding-inline: 1rem;
    gap: 0.75rem;
  }
}

.fortschritt {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 41;
  background: var(--akzent);
  transform-origin: left;
  transform: scaleX(var(--fortschritt, 0));
}

/* Kapitel und Bühnen */
.kapitel {
  position: relative;
}

.modus-pin .kapitel--pin {
  height: calc(var(--laenge, 260) * 1vh);
}

.buehne {
  position: relative;
  display: grid;
  gap: 32px;
  padding: calc(var(--kopf-h) + 24px) var(--rand) 56px;
}

.modus-pin .kapitel--zeit .buehne {
  min-height: 100vh;
}

.modus-pin .kapitel--pin .buehne {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  padding-bottom: 40px;
}

@media (min-width: 769px) {
  .buehne {
    grid-template-columns: minmax(300px, 0.85fr) 1.25fr;
    align-items: center;
    gap: 4vw;
  }
}

.buehne-text {
  position: relative;
  z-index: 2;
  max-width: 34rem;
}

.buehne-text > p:not(.augenbraue) {
  color: var(--leise);
  font-size: 0.98rem;
  line-height: 1.6;
  margin-top: 0.65rem;
}

/* Kopf der Rubriken wie .hp-price-head auf pos.html */
.service-kopf h2,
.vergleich-kopf h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.buehne-bild {
  position: relative;
  min-height: 0;
}

.szene-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Einblenden im ruhigen Modus */
.modus-ruhig.bewegt .einblenden,
.modus-pin.bewegt .ersparnis .einblenden,
.modus-pin.bewegt .vergleich .einblenden,
.modus-pin.bewegt .kontakt .einblenden {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--weich), transform 0.6s var(--weich);
  transition-delay: var(--verzug, 0s);
}

.modus-ruhig.bewegt .einblenden.ist-da,
.modus-pin.bewegt .ersparnis .einblenden.ist-da,
.modus-pin.bewegt .vergleich .einblenden.ist-da,
.modus-pin.bewegt .kontakt .einblenden.ist-da {
  opacity: 1;
  transform: none;
}

/* ===== Hero =====
   Aufbau wie der Hero der Produktseiten (css/produkt.css; Nutzer 2026-10-27: "bau die aufteilung des herobanners um -
   sie soll wie auf den unterseiten text rechts und bild links haben", gewählt "Ganz wie Unterseiten"): links die Szene,
   rechts Überschrift, Punkte und Knöpfe, zusammen höchstens 1200 px breit in der Mitte. Im Code bleibt der Text vorn,
   das Raster stellt ihn nach rechts. --hero-rand ist der Seitenrand, --luecke der Abstand zwischen Szene und Text. */
.hero {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

/* füllt mit der Datenleiste darunter (.start-daten) den ersten Bildschirm */
.hero-banner {
  --hero-rand: max(5vw, (100vw - 1200px) / 2);
  --luecke: 3.2rem;
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  grid-template-areas: "buehne text";
  align-items: center;
  justify-content: center;
  gap: var(--luecke);
  padding: 6.2rem max(5vw, (100% - 1200px) / 2) 1.8rem;
}

.hero-text {
  grid-area: text;
}

/* über der Leinwand der Szene, die über die Bühne hinausragt */
.hero-kopf,
.rundgang-reiter,
.hero-knoepfe {
  position: relative;
  z-index: 2;
}

.hero-k {
  font-size: 0.875rem;
  line-height: 1.5;
}

.hero-text h1 {
  margin: 0;
  color: var(--titel);
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.hero-text h1 em {
  font-style: normal;
  color: var(--pk-robo);
}

.hero-text .hero-unter {
  max-width: 28rem;
  margin: 0.85rem 0 0;
  color: var(--leise);
  font-size: 1.02rem;
  line-height: 1.6;
}

.hero-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

/* Gespräch anfragen wie .hp-talk: Navy, in Ruhe still; beim Überfahren laufender Farbrand, Schein und Herzschlag */
.knopf-talk,
.knopf-geist {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}

.knopf-talk {
  background: var(--navy);
  color: #fff;
}

.knopf-talk::before,
.knopf-talk::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  background: linear-gradient(45deg, #1b3661, #2a4875, #5b8def, #5b4dff, #1b3661, #f59e0b, #2a4875, #5b8def, #152b4d,
      #5b4dff, #1b3661, #2a4875);
  background-size: 400%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.knopf-talk::before {
  inset: -2px;
  padding: 2px;
}

.knopf-talk::after {
  inset: -24px;
  padding: 22px;
  background-clip: content-box;
  filter: blur(9px);
}

.knopf-talk:is(:hover, :focus-visible) {
  animation: herzschlag 4.8s ease-in-out infinite;
}

.knopf-talk:is(:hover, :focus-visible)::before {
  opacity: 1;
  animation: glanz-lauf 18s linear infinite;
}

.knopf-talk:is(:hover, :focus-visible)::after {
  opacity: 0.55;
  animation: glanz-lauf 18s linear infinite;
}

@keyframes herzschlag {
  0%,
  8%,
  16%,
  100% {
    transform: scale(1);
  }
  4%,
  12% {
    transform: scale(1.03);
  }
}

@keyframes glanz-lauf {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .knopf-talk:is(:hover, :focus-visible) {
    animation: none;
  }
}

/* Zweiter Knopf wie die Reiter: hell mit Rand */
.knopf-geist {
  border: 1px solid var(--linie-stark);
  background: var(--knopf-bg);
  color: var(--knopf-text);
  transition: border-color 0.25s;
}

.knopf-geist:hover {
  border-color: var(--punkt-an);
}

.knopf-geist svg {
  width: 14px;
  height: 14px;
}

/* Bühne: Roboter unten bündig auf einem weichen Boden */
.hero-buehne {
  position: relative;
  height: min(34rem, 62vh);
}

.hero-licht {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 58% 52% at 50% 72%, var(--licht), transparent 72%);
}

.hero-boden {
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 1.6rem;
  height: 4.5rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--boden), transparent);
}

.hero-reihe {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--reihe-luecke, 3vw);
}

/* 3D-Bühne (2026-10-22): Leinwand von der linken Kante der Bühne bis zum rechten Fensterrand,
   damit die Roboter von dort einfahren; Breite und Höhe setzt js/hero3d.js */
.hero-3d {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  overflow: hidden;
}

.hero-3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* .hero-3d davor, sonst gewinnt margin-top von .roboter-name weiter unten */
.hero-3d .hero-3d-name {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  border: 0;
  padding: 2px 4px;
  background: none;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}

/* Reiter unter dem Hero wie .hp-slide-tabs; springen zu den Kapiteln */
.hero-reiter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 1rem;
}

.hero-reiter a {
  padding: 0.38rem 0.7rem;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: var(--knopf-bg);
  color: var(--knopf-text);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 0.25s;
}

.hero-reiter a:hover {
  border-color: var(--punkt-an);
}

/* Handy: eine Spalte wie die CIN-Next-Seiten, Roboter unter dem Text, Reiter darunter im Fluss */
@media (max-width: 767.98px) {
  :root {
    --kopf-h: 63px;
  }

  .hero {
    min-height: 0;
  }

  .hero-banner {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: 0.7rem;
    padding: 5.6rem 1.1rem 1.2rem;
  }

  .hero-buehne,
  .hero-reihe {
    height: auto;
  }

  .hero-buehne {
    padding-top: 1rem;
  }

  .hero-buehne.ist-3d {
    padding-top: 0;
  }

  .hero-reiter {
    position: static;
    padding-bottom: 2rem;
  }
}

.roboter-knopf {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

.roboter-knopf img {
  height: var(--h, 300px);
  width: auto;
  max-width: none;
  filter: drop-shadow(0 18px 24px var(--schatten));
}

.roboter-knopf::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 30px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--schatten), transparent);
  z-index: -1;
}

.roboter-name {
  margin-top: 12px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--leise);
}

.roboter-name span {
  color: var(--akzent);
}

/* Startzustand vor dem Intro (nur wenn Bewegung erlaubt) */
.bewegt .hero:not(.ist-gestartet) .hero-licht,
.bewegt .hero:not(.ist-gestartet) .hero-boden,
.bewegt .hero:not(.ist-gestartet) .hero-reihe .roboter-knopf {
  opacity: 0;
}

/* ===== Branchen (Neuaufbau 2026-10-22) ===== */
.branchen {
  padding: 12vh var(--rand) 8vh;
}

.branchen-kopf {
  max-width: 44rem;
  margin-bottom: 36px;
}

.branchen-kopf h2,
.technik-kopf h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.branchen-kopf p:not(.augenbraue),
.technik-kopf p:not(.augenbraue) {
  margin-top: 0.7rem;
  color: var(--leise);
  font-size: 1.05rem;
  line-height: 1.45;
}

/* Desktop: eine Reihe fester Höhe; die gewählte Karte wächst, die anderen werden schmaler (Nutzer 2026-10-22).
   Abends: "das hovern zwischen den cards ist sehr ruckelig", "die onhover animation langsamer" (gewählt 0,9 s).
   Offen ist nur, was js/branchen.js als .ist-offen setzt: kurzes Verweilen statt :hover, die Lücken zählen nicht als
   Verlassen. Texte haben feste Breiten und blenden über, damit beim Aufziehen nichts umbricht oder springt. */
.branchen-karten {
  --gleiten: cubic-bezier(0.33, 0, 0.15, 1);
  --zug: 0.9s;
  --zu-b: calc((100cqw - 56px) / 5);
  --auf-b: calc((100cqw - 56px) * 2.6 / 6.6);
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: flex;
  gap: 14px;
  height: clamp(440px, 60vh, 540px);
}

.branche {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--karte-rand);
  border-radius: 18px;
  background: var(--flaeche);
  box-shadow: var(--karte-schatten);
  cursor: pointer;
  transition: flex-grow var(--zug) var(--gleiten), box-shadow 0.5s;
}

.branche.ist-offen {
  flex-grow: 2.6;
  box-shadow: var(--preis-schatten), 0 0 0 1px var(--preis-rand);
}

.branche-bild {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 17px 17px 0 0;
  background: var(--flaeche2);
}

/* Beim Aufziehen zoomt das Foto heraus, nicht hinein (Nutzer 2026-10-22: "cardzoom invertiren", später "der
   invertierte zoom bei hover auf der card noch immer nicht drin"). Das Foto ist immer so breit wie die offene Karte und
   mittig beschnitten; sonst wächst es mit der Karte (object-fit: cover) und hebt das Herauszoomen auf. */
.branche-bild > img {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--auf-b);
  max-width: none;
  height: 100%;
  object-fit: cover;
  transform: translateX(-50%) scale(1.14);
  transition: transform 1.4s var(--gleiten);
}

.branche.ist-offen .branche-bild > img {
  transform: translateX(-50%);
}

/* Text unter dem Bild. In Ruhe zeigen alle Karten Namen, kurzen Satz und Chips auf gleicher Höhe (Satzkasten so hoch wie
   der längste kurze Satz, js/branchen.js). Ist eine Karte offen, wächst ihr Satzkasten auf ihren langen Satz, die
   schmalen Karten zeigen nur noch Bild und Namen. Alles gleitet in der Zeit des Aufziehens, nichts springt. */
.branche-text {
  flex: none;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  padding: 0.85rem 1rem 1rem;
  border-radius: 0 0 17px 17px;
  transition: grid-template-rows var(--zug) var(--gleiten), padding-bottom var(--zug) var(--gleiten);
}

.branche-mehr {
  min-height: 0;
  overflow: hidden;
}

.branchen-karten:has(.ist-offen) .branche:not(.ist-offen) .branche-text {
  grid-template-rows: auto 0fr;
  padding-bottom: 0.85rem;
}

.branche h3 {
  font-size: 1.15rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  transition: font-size var(--zug) var(--gleiten);
}

.branche-saetze {
  position: relative;
  height: var(--kurz-h, 2.5em);
  margin-top: 0.35rem;
  color: var(--leise);
  font-size: 0.88rem;
  line-height: 1.4;
  transition: height var(--zug) var(--gleiten), opacity 0.45s;
}

.branche.ist-offen .branche-saetze {
  height: var(--lang-h, 4.2em);
}

.branche-saetze p {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.45s;
}

.branche-kurz {
  width: calc(var(--zu-b) - 2rem - 2px);
}

/* Der lange Satz steht in der offenen Karte links neben den Robotern */
.branche-lang {
  width: calc(var(--auf-b) * 0.4 - 1rem);
  opacity: 0;
}

.branche.ist-offen .branche-kurz {
  opacity: 0;
}

.branche.ist-offen .branche-lang {
  opacity: 1;
  transition-delay: 0.35s;
}

.branche-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 0.8rem;
  transition: opacity 0.45s;
}

.branche-chips a {
  padding: 3px 10px;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  color: var(--titel);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.3s, color 0.3s;
}

.branche-chips a:hover,
.branche-chips a:focus-visible {
  border-color: var(--akzent);
  color: var(--akzent);
}

/* Schmale Karten, solange eine andere offen ist: nur Bild und Name, etwas kleiner */
.branchen-karten:has(.ist-offen) .branche:not(.ist-offen) :is(.branche-saetze, .branche-chips) {
  opacity: 0;
}

.branchen-karten:has(.ist-offen) .branche:not(.ist-offen) h3 {
  font-size: 0.95rem;
}

/* Schmale Fenster: die offene Karte ist zu schmal für den langen Satz neben den Robotern und behält den kurzen */
@container (max-width: 1000px) {
  .branche-lang {
    display: none;
  }

  .branche.ist-offen .branche-kurz {
    opacity: 1;
  }

  .branche.ist-offen .branche-saetze {
    height: var(--kurz-h, 2.5em);
  }
}

/* Ohne WebGL: Freisteller der Roboter im Bild wie bisher. Mit 3D (js/branchen3d.js, Klasse .ist-3d) stehen sie vor
   der Karte (Nutzer 2026-10-22 abends: "die card soll die roboter nicht includen sie stehen außerhalb davon"). */
.branche-roboter {
  position: absolute;
  z-index: 1;
  right: 6%;
  bottom: 6%;
  left: 6%;
  height: 72%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 2%;
  pointer-events: none;
}

/* Höhen im Verhältnis der echten Roboter (T10 1.399 mm = 100 %) */
.branche-roboter img {
  width: auto;
  max-width: none;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.45s var(--weich), transform 0.6s var(--weich);
}

.branche-roboter .r-t8 { height: 79%; }
.branche-roboter .r-t9 { height: 90%; }
.branche-roboter .r-t10 { height: 100%; }
.branche-roboter .r-c40s { height: 49%; }
.branche-roboter .r-s100 { height: 92%; }

.branche.ist-offen .branche-roboter img {
  opacity: 1;
  transform: none;
  transition-delay: 0.12s;
}

.branche.ist-offen .branche-roboter img:nth-child(2) {
  transition-delay: 0.2s;
}

.branche.ist-offen .branche-roboter img:nth-child(3) {
  transition-delay: 0.28s;
}

.branchen-karten.ist-3d .branche-roboter {
  display: none;
}

/* 3D-Bühne über der ganzen Reihe; reicht unten und an den Seiten über sie hinaus, damit die Roboter herausragen
   und von der Seite einfahren */
.branchen-3d {
  position: absolute;
  z-index: 2;
  top: -24px;
  right: calc(-1 * var(--rand));
  bottom: -110px;
  left: calc(-1 * var(--rand));
  pointer-events: none;
}

.branchen-3d canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Bodenschatten, Studio-Boden und Spiegelung liegen auf der unteren Leinwand, weichgezeichnet (Nutzer 2026-10-22:
   "schatten unten blury und zu100% transparent für echteren spiegeleffekt") */
.branchen-3d .branchen-3d-unten {
  filter: blur(5px);
}

/* Unter 1024 px: Karten untereinander, zugeklappt nur ein Bildstreifen mit Namen; Antippen zieht auf (js/branchen.js).
   Die Roboter stehen unten rechts im Bild und ragen über seine Unterkante. */
@media (max-width: 1023.98px) {
  .branchen-karten {
    flex-direction: column;
    height: auto;
    gap: 10px;
  }

  .branche {
    flex: none;
  }

  .branche-bild {
    flex: none;
    height: 88px;
    transition: height var(--zug) var(--gleiten);
  }

  .branche.ist-offen .branche-bild {
    height: 250px;
  }

  .branche-bild > img {
    width: 100%;
  }

  .branche-text {
    padding: 0.9rem 1rem;
  }

  .branche h3,
  .branchen-karten:has(.ist-offen) .branche:not(.ist-offen) h3 {
    font-size: 1.15rem;
  }

  .branche-saetze,
  .branche.ist-offen .branche-saetze {
    height: auto;
    margin-top: 0;
  }

  .branche-saetze p {
    position: static;
    width: auto;
  }

  .branche-kurz,
  .branche-lang,
  .branche-chips {
    display: none;
  }

  .branche.ist-offen .branche-lang {
    display: block;
    margin-top: 0.35rem;
    opacity: 1;
  }

  .branche.ist-offen .branche-chips {
    display: flex;
    flex-wrap: wrap;
  }

  .branchen-3d {
    bottom: -24px;
  }
}

/* ===== Laufwege (Einstieg ins Service-Kapitel) ===== */
/* Die Karte zeichnet js/szenen.js dunkel im Look der KEENON-Clips; der Schatten liegt auf der Zeichnung */
.buehne--laufwege .szene-canvas {
  filter: drop-shadow(0 16px 34px rgba(13, 22, 38, 0.28));
}

.buehne--laufwege .buehne-bild {
  height: min(62vh, 560px);
}

.modus-ruhig .buehne--laufwege .buehne-bild {
  height: auto;
  aspect-ratio: 4 / 3;
}

/* Uhr und Programmtafel wie im CRM-Hub der Übersicht (JetBrains Mono, aktive Zeile weiß, Satz getippt) */
.tag-uhr {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(13, 20, 32, 0.62);
  color: #f2f5f9;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.tag-tafel {
  position: absolute;
  left: 16px;
  top: 16px;
  display: grid;
  gap: 2px;
  width: min(340px, 52%);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.76rem;
  line-height: 1.4;
}

.tag-tafel li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  padding: 4px 10px;
  border-radius: 10px;
  color: #7f8a98;
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}

.tag-tafel b {
  font-weight: 400;
  color: #aeb8c5;
}

.tag-tafel .tag-satz {
  display: none;
  grid-column: 1 / -1;
  margin-top: 2px;
}

.tag-tafel li.ist-fertig b {
  color: #c9d3df;
}

.tag-tafel li.ist-aktiv {
  padding: 8px 12px 9px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
  color: #5c564c;
}

.tag-tafel li.ist-aktiv b {
  color: #1b3661;
}

.tag-tafel li.ist-aktiv .tag-zeit {
  color: #0e9fb4;
}

.tag-tafel li.ist-aktiv .tag-satz {
  display: block;
  min-height: 1.4em;
}

.tag-tafel li.ist-aktiv::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 12px;
  border: 5px solid transparent;
  border-left-color: var(--cyan);
}

.tag-tafel li.ist-tippt .tag-satz::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--cyan);
}

@media (max-width: 768px) {
  .buehne-bild.tag,
  .modus-ruhig .buehne--laufwege .buehne-bild.tag {
    height: auto;
    aspect-ratio: auto;
  }

  .buehne-bild.tag .szene-canvas {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .tag-uhr {
    top: 10px;
    right: 10px;
    font-size: 1rem;
  }

  .tag-tafel {
    position: static;
    width: 100%;
    margin-top: 10px;
    padding: 8px 8px 8px 14px;
    border-radius: 14px;
    background: #12161c;
  }
}

.wechseltext {
  display: grid;
}

.wechseltext > * {
  grid-area: 1 / 1;
}

.wechsel h2 + p {
  margin-top: 0.65rem;
  color: var(--leise);
  font-size: 0.98rem;
  line-height: 1.6;
}

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  color: var(--leise);
}

.legende li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.punkt {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.punkt--team {
  background: #e9eef5;
  box-shadow: 0 0 0 1px #9aa6b5;
}

.punkt--cyan {
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

/* ===== Kapitel mit Einsatzorten (Neubau 2026-10-27, js/orte.js; gewählt "Ortsliste neben Bild", "Scrollen, rastet je
   Ort ein", "Alle drei gleich"; 3D-Roboter im Foto wieder entfernt: "3d roboter bitte aus den cards entfernen"): links
   das Foto des Orts mit Etikett, rechts direkt daneben die Orte als Liste; der aktive Ort ist eine Karte mit Satz,
   Kennzahlen samt Symbolen, Preis und Link. Bewegung nach der HUB-Seite: Foto blendet in 0,4 s über und zoomt 2 % nach,
   der Ortsname tippt sich ein, der aktive Eintrag hebt sich, die Linie zwischen den Symbolen füllt sich bis zu ihm.
   Handy und reduzierte Bewegung: je Ort eine Karte, Foto oben, Text darunter. ===== */
.buehne--orte {
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
}

.modus-pin .buehne--orte {
  row-gap: 1.3rem;
  padding-inline: max(var(--rand), (100% - 1200px) / 2);
}

.orte {
  display: grid;
  gap: 1rem;
}

.modus-pin .orte {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 1.4rem;
}

.orte-bild {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: var(--flaeche2);
  isolation: isolate;
}

.modus-pin .orte-bild {
  min-height: min(60vh, 540px);
}

.orte-bild .szene-bild {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.modus-pin .orte-bild .szene-bild {
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.4s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modus-pin .orte-bild .szene-bild.ist-an {
  opacity: 1;
  transform: none;
}

.orte-bild .szene-bild img,
.orte-bild .szene-bild video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Etikett oben links: Symbol und Name des Orts, gut lesbar auf jedem Foto */
.orte-etikett {
  position: absolute;
  z-index: 3;
  top: 0.9rem;
  left: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100% - 1.8rem);
  padding: 0.32rem 0.85rem 0.32rem 0.35rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.58);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.2;
}

.orte-etikett i {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--pk-robo);
}

.orte-etikett svg {
  width: 1rem;
  height: 1rem;
}

.orte-etikett b {
  font-weight: 600;
  white-space: nowrap;
}

.orte-name.ist-tippt::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -0.14em;
  animation: orte-cursor 0.8s steps(1) infinite;
}

@keyframes orte-cursor {
  50% {
    opacity: 0;
  }
}

/* Liste der Orte: ruhend flache Zeilen, der aktive Ort hebt sich als Karte ab */
.orte-liste {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.orte-spur,
.orte-fuell {
  position: absolute;
  z-index: 1;
  left: calc(0.8rem + 1.15rem - 1px);
  width: 2px;
  border-radius: 1px;
  pointer-events: none;
}

.orte-spur {
  background: var(--linie);
}

.orte-fuell {
  background: var(--pk-robo);
}

.ort {
  position: relative;
  border: 1px solid transparent;
  border-radius: 14px;
  transition: background-color 0.35s, border-color 0.35s, box-shadow 0.35s;
}

.ort.ist-aktiv {
  border-color: var(--karte-rand);
  background: var(--flaeche);
  box-shadow: var(--karte-schatten);
}

.ort-kopf {
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.5rem 0.8rem;
  border: 0;
  background: none;
  color: var(--text2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ort-kopf b {
  color: var(--text2);
  font-size: 0.98rem;
  font-weight: 500;
  transition: color 0.3s;
}

.ort.ist-aktiv .ort-kopf b,
.ort-kopf:hover b {
  color: var(--titel);
}

.ort.ist-aktiv .ort-kopf b {
  font-weight: 650;
}

.ort-sq {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 9px;
  background: color-mix(in srgb, var(--pk-robo) 14%, var(--flaeche));
  color: var(--pk-robo);
  transition: background-color 0.3s, color 0.3s;
}

.ort.ist-aktiv .ort-sq {
  background: var(--pk-robo);
  color: #fff;
}

.ort-sq svg {
  width: 1.25rem;
  height: 1.25rem;
}

.ort-modell {
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: var(--flaeche2);
  color: var(--k);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.ort.ist-aktiv .ort-modell {
  background: color-mix(in srgb, var(--pk-robo) 14%, transparent);
  color: var(--pk-robo);
}

/* Aufklappen über die Zeilenhöhe des Rasters, weich in 0,4 s */
.ort-mehr {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--weich);
}

.ort.ist-aktiv .ort-mehr {
  grid-template-rows: 1fr;
}

.ort-mehr > div {
  overflow: hidden;
  padding: 0 0.9rem 0 calc(0.8rem + 2.3rem + 0.8rem);
}

.ort.ist-aktiv .ort-mehr > div {
  padding-bottom: 0.95rem;
}

.ort-satz {
  margin: 0;
  color: var(--text2);
  font-size: 0.93rem;
  line-height: 1.5;
}

.ort-zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.ort-zahlen li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ort-zahl-sq {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: var(--flaeche2);
  color: var(--pk-robo);
}

.ort-zahl-sq svg {
  width: 1.1rem;
  height: 1.1rem;
}

.ort-zahlen b {
  display: block;
  color: var(--titel);
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.ort-zahlen b small {
  color: var(--leise);
  font-size: 0.72em;
  font-weight: 500;
}

.ort-zahlen li > span:last-child > span {
  display: block;
  color: var(--leise);
  font-size: 0.74rem;
}

.ort .preiszeile,
.ort-karte .preiszeile {
  margin-top: 0.75rem;
  font-size: 0.88rem;
}

.ort .textknopf,
.ort-karte .textknopf {
  display: inline-flex;
  margin-top: 0.55rem;
}

/* Handy und reduzierte Bewegung: je Ort eine Karte */
.modus-ruhig .orte {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.ort-karte {
  overflow: hidden;
  border: 1px solid var(--karte-rand);
  border-radius: 16px;
  background: var(--flaeche);
  box-shadow: var(--karte-schatten);
  scroll-margin-top: calc(var(--kopf-h) + 12px);
}

.ort-karte .orte-bild {
  aspect-ratio: 4 / 3;
  border-radius: 0;
}

.ort-karte-text {
  padding: 0.9rem 1rem 1.1rem;
}

.ort-karte-titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
}

.ort-karte-titel b {
  color: var(--titel);
  font-size: 1.1rem;
  font-weight: 650;
}

@media (max-width: 768px) {
  html {
    scroll-snap-type: y proximity;
  }

  .ort-karte {
    scroll-snap-align: start;
  }
}

/* ===== Kopf, Kennzahlen und Preiszeile (früher Abschnitt Service; die Ort-Kapitel stehen oben bei js/orte.js) ===== */
.service-kopf {
  max-width: 34rem;
}

.kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 34px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.kennzahl b {
  display: block;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.kennzahl b small {
  font-size: 0.45em;
  font-weight: 500;
  color: var(--leise);
  margin-left: 4px;
}

.kennzahl b .vor {
  font-size: 0.42em;
  font-weight: 500;
  color: var(--leise);
  margin-right: 4px;
}

.kennzahl > span {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--leise);
}

.preiszeile {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 24px;
  font-size: 0.95rem;
}

.preiszeile strong {
  font-weight: 600;
}

/* Miete in Schriftfarbe (Nutzer 2026-10-22: "nimm das orange überall raus") */
.preiszeile .miete,
.steckbrief .miete {
  color: var(--titel);
  font-weight: 500;
}

.szene-bild img,
.szene-bild video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Reinigung ===== */
/* Ladenplan von keenon.com ungeschnitten, die Bahnen liegen als Canvas genau darüber */
.ladenplan {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: calc(min(74vh, 660px) * 1314 / 1161);
  aspect-ratio: 1314 / 1161;
  overflow: hidden;
  border: 1px solid var(--karte-rand);
  border-radius: 18px;
  background: #eceef1;
  box-shadow: var(--preis-schatten);
}

.ladenplan img,
.ladenplan canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.anzeige {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(13, 20, 32, 0.66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 0.82rem;
  color: #c9d3df;
}

.anzeige b {
  font-size: 1.5rem;
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.funktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.funktionen li {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--linie);
  font-size: 0.9rem;
  opacity: var(--o, 1);
  transform: translateY(calc((1 - var(--o, 1)) * 10px));
  transition: border-color 0.4s, color 0.4s;
}

.funktionen li.ist-an {
  border-color: var(--akzent);
  color: var(--akzent);
}

.varianten {
  width: 100%;
  margin-top: 24px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.varianten th,
.varianten td {
  text-align: left;
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--linie);
}

.varianten th:last-child,
.varianten td:last-child {
  padding-right: 0;
}

.varianten th {
  color: var(--leise);
  font-weight: 500;
  font-size: 0.8rem;
}

.varianten td.miete {
  color: var(--titel);
  font-weight: 500;
}

/* ===== Logistik ===== */
.logistik-film {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--karte-rand);
  border-radius: 18px;
  background: var(--band);
  box-shadow: var(--preis-schatten);
}

.logistik-film video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.film-chips {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.film-chips li {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(13, 20, 32, 0.66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #c9d3df;
  font-size: 0.82rem;
}

.film-chips b {
  color: var(--cyan);
  font-weight: 650;
}

/* ===== Produktführung C40S und S100 (Nutzer 2026-10-22: "kunden durch das produkt führen. fahr richtig auf") ===== */
.fuehrung {
  display: grid;
  gap: clamp(72px, 12vh, 140px);
  padding: 4vh var(--rand) 12vh;
}

.fuehrung-kopf {
  max-width: 42rem;
  margin-bottom: 28px;
}

.fuehrung-kopf h3,
.fakten-kopf h3 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.fuehrung-kopf p:not(.augenbraue),
.fakten-kopf p:not(.augenbraue) {
  margin-top: 0.6rem;
  color: var(--leise);
  font-size: 1.02rem;
  line-height: 1.5;
}

/* Schritte: Leiste, links festes Medium, rechts Karten */
/* Die Leiste klebt beim Scrollen oben im Block, damit Stand und Fokus sichtbar bleiben (Prüfung 2026-10-22) */
.schritte-leiste {
  position: sticky;
  top: var(--kopf-h);
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 20px;
  padding: 10px 0;
  list-style: none;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.schritte-leiste::before,
.schritte-leiste::after {
  content: "";
  position: absolute;
  top: 29px;
  left: 20px;
  height: 2px;
  border-radius: 1px;
}

.schritte-leiste::before {
  right: calc(25% - 20px);
  background: var(--linie-stark);
}

.schritte-leiste::after {
  width: calc(var(--fort, 0) * 75%);
  background: linear-gradient(90deg, var(--pk-robo), var(--p-robo));
  box-shadow: 0 0 8px color-mix(in srgb, var(--pk-robo) 50%, transparent);
  transition: width 0.6s var(--weich);
}

.schritte-leiste button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--leise);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.schritte-leiste button span {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--flaeche);
  box-shadow: inset 0 0 0 2px var(--linie-stark), var(--karte-schatten);
  font-size: 0.8rem;
  transition: background-color 0.35s, color 0.35s, box-shadow 0.35s, transform 0.35s var(--weich);
}

.schritte-leiste button.ist-an {
  color: var(--titel);
}

.schritte-leiste button.ist-an span {
  background: var(--akzent);
  color: #fff;
  box-shadow: 0 0 0 5px var(--akzent-weich);
}

.schritte-leiste button[aria-current="step"] span {
  transform: scale(1.12);
}

.schritte-leiste button:focus-visible {
  outline: none;
}

.schritte-leiste button:focus-visible span {
  outline: 2px solid var(--titel);
  outline-offset: 3px;
}

.schritte-buehne {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.schritte-medien {
  position: sticky;
  top: calc(var(--kopf-h) + 84px);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--karte-rand);
  border-radius: 18px;
  background: var(--band);
  box-shadow: var(--preis-schatten);
}

.schritt-medium {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.schritt-medium.ist-an {
  opacity: 1;
}

.schritt-medium video,
.schritt-medium img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.schritt-medium .ist-studio,
.hotspot-medium .ist-studio {
  object-fit: contain;
  padding: 6%;
  background: var(--studio);
}

.schritte-karten {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.schritt-karte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 42vh;
  padding: 1.2rem 0;
  opacity: 0.32;
  transition: opacity 0.5s var(--weich);
}

.schritt-karte.ist-aktiv {
  opacity: 1;
}

.schritt-nr {
  color: var(--akzent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.schritt-karte h4 {
  margin-top: 0.2rem;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 650;
  line-height: 1.15;
}

.schritt-zahl {
  margin-top: 0.5rem;
  color: var(--titel);
  font-size: 1.15rem;
  font-weight: 600;
}

.schritt-karte p:last-child {
  margin-top: 0.5rem;
  color: var(--leise);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 30rem;
}

/* Hotspots */
.hotspot-buehne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.hotspot-bild {
  position: relative;
  max-width: 560px;
  width: 100%;
  margin: 0;
  justify-self: end;
  overflow: hidden;
  border: 1px solid var(--karte-rand);
  border-radius: 18px;
  background: #eef0f3;
  box-shadow: var(--preis-schatten);
}

.hotspot-bild img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Knopf 44 px als Trefferfläche, sichtbar ist der Kreis (span, 34 px) */
.hotspot-punkt {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font: inherit;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--weich);
}

.hotspot-punkt span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(27, 54, 97, 0.3);
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

.hotspot-punkt::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--pk-robo) 55%, transparent);
  animation: hotspot-puls 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes hotspot-puls {
  from { transform: scale(0.8); opacity: 1; }
  to { transform: scale(1.5); opacity: 0; }
}

.hotspot-punkt.ist-an {
  transform: translate(-50%, -50%) scale(1.14);
}

.hotspot-punkt.ist-an span {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 0 0 4px var(--cyan), 0 0 22px 4px rgba(51, 209, 230, 0.55);
}

.hotspot-punkt.ist-an::before {
  animation: none;
  opacity: 0;
}

/* Titel beim Überfahren */
.hotspot-punkt::after {
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.hotspot-punkt:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Auf Touch kein Etikett: es verdeckte Nachbarpunkte, die Karte nennt den Titel ohnehin */
@media (hover: none) {
  .hotspot-punkt::after {
    display: none;
  }
}

.hotspot-punkt:focus-visible {
  outline: 2px solid var(--titel);
  outline-offset: 4px;
}

.hotspot-info {
  max-width: 34rem;
  padding: 1.5rem 1.6rem 1.2rem;
  border: 1px solid var(--karte-rand);
  border-radius: 18px;
  background: var(--flaeche);
  box-shadow: var(--karte-schatten);
}

.hotspot-text {
  display: none;
}

.hotspot-text.ist-an {
  display: block;
  animation: hotspot-ein 0.45s var(--weich);
}

@keyframes hotspot-ein {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.hotspot-nr {
  color: var(--k);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hotspot-text h4 {
  margin-top: 0.3rem;
  font-size: 1.5rem;
  font-weight: 650;
  line-height: 1.2;
}

.hotspot-zahl {
  margin-top: 0.4rem;
  color: var(--akzent);
  font-size: 2.2rem;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.hotspot-text > p:not(.hotspot-nr, .hotspot-zahl) {
  margin-top: 0.6rem;
  color: var(--leise);
  font-size: 1rem;
  line-height: 1.55;
}

.hotspot-medium {
  margin: 1rem 0 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--band);
}

.hotspot-medium video,
.hotspot-medium img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hotspot-steuer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
}

.knopf-rund {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--linie-stark);
  border-radius: 50%;
  background: var(--knopf-bg);
  color: var(--titel);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.knopf-rund:hover {
  background: var(--knopf-hover);
}

.knopf-rund svg {
  width: 18px;
  height: 18px;
}

.hotspot-liste {
  display: flex;
  flex: 1;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Chips 1 bis 7: nur die Nummer, der gewählte zeigt dazu seinen Titel */
.hotspot-liste button {
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: none;
  color: var(--leise);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.hotspot-liste button span {
  display: none;
}

.hotspot-liste button.ist-an {
  border-color: var(--akzent);
  background: var(--akzent);
  color: #fff;
}

.hotspot-liste button:hover:not(.ist-an) {
  border-color: var(--akzent);
  color: var(--akzent);
}

/* Konfigurator S100 */
.konfigurator-buehne {
  display: grid;
  grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}

.aufbau-wahl {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aufbau-wahl button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--karte-rand);
  border-radius: 14px;
  background: var(--flaeche);
  color: var(--titel);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--karte-schatten);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--weich);
}

.aufbau-wahl button img {
  flex: none;
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--studio);
}

.aufbau-wahl button:hover {
  transform: translateX(3px);
}

.aufbau-wahl button[aria-pressed="true"] {
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px var(--akzent-weich), var(--karte-schatten);
}

.aufbau-bilder {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 70vh;
  overflow: hidden;
  border: 1px solid var(--karte-rand);
  border-radius: 18px;
  background: var(--studio);
  box-shadow: var(--preis-schatten);
}

.aufbau-bild {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.5s var(--weich), transform 0.6s var(--weich);
}

.aufbau-bild.ist-an {
  opacity: 1;
  transform: none;
}

.aufbau-bild img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 9% 8% 6%;
}

.aufbau-text {
  display: none;
}

.aufbau-text.ist-an {
  display: block;
  animation: hotspot-ein 0.45s var(--weich);
}

.aufbau-text h4 {
  font-size: 1.6rem;
  font-weight: 650;
}

.aufbau-text p {
  margin-top: 0.5rem;
  color: var(--leise);
  font-size: 1rem;
  line-height: 1.55;
}

.aufbau-branchen b {
  display: block;
  color: var(--k);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.aufbau-text .knopf-geist {
  margin-top: 1.1rem;
  border: 1px solid var(--linie-stark);
  background: var(--knopf-bg);
}

/* Fakten */
.fakten-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  margin-bottom: 28px;
}

.fakten-bild {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--karte-rand);
  border-radius: 18px;
  background: var(--studio);
  box-shadow: var(--karte-schatten);
}

.fakten-bild img {
  display: block;
  width: 100%;
}

.fakten-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: 16px;
}

/* Karten mit Balken über zwei Reihen, damit Karten ohne Balken nicht halb leer stehen (Prüfung 2026-10-22) */
.fakt.mit-balken {
  grid-row: span 2;
}

.fakt {
  display: flex;
  flex-direction: column;
  padding: 1.2rem 1.3rem 1.3rem;
  border: 1px solid var(--karte-rand);
  border-radius: 16px;
  background: var(--flaeche);
  box-shadow: var(--karte-schatten);
}

.fakt-zahl {
  color: var(--titel);
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.fakt h4 {
  margin-top: 0.35rem;
  color: var(--k);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fakt > p:not(.fakt-zahl) {
  margin-top: 0.45rem;
  color: var(--leise);
  font-size: 0.93rem;
  line-height: 1.5;
}

/* Über zwei Zeilen gestreckte Karten: Balken unten bündig */
.fakt-balken {
  display: grid;
  gap: 6px;
  margin: auto 0 0;
  padding: 0.9rem 0 0;
  list-style: none;
  font-size: 0.8rem;
}

.fakt-balken li {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr) 4rem;
  align-items: center;
  gap: 8px;
  color: var(--leise);
}

.fakt-balken i {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--flaeche2);
  overflow: hidden;
}

.fakt-balken i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 3px;
  background: var(--linie-stark);
  transition: width 1s var(--weich) 0.2s;
}

.fakt-balken li.ist-eigen i::after {
  background: linear-gradient(90deg, var(--pk-robo), var(--p-robo));
}

.fakt.ist-da .fakt-balken i::after,
.modus-pin .fakt .fakt-balken i::after {
  width: var(--w);
}

.fakt-balken b {
  color: var(--titel);
  font-weight: 600;
  text-align: right;
}

.fakten-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.fakten-chips > div,
.fakten-hinweis {
  padding: 1rem 1.2rem;
  border-radius: 14px;
  background: var(--flaeche2);
  font-size: 0.95rem;
  line-height: 1.5;
}

.fakten-chips h4 {
  margin-bottom: 0.3rem;
  color: var(--k);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fakten-chips .leise,
.fakten-hinweis {
  color: var(--leise);
}

.fakten-hinweis {
  margin-top: 16px;
}

.fakten-hinweis b {
  margin-right: 0.4rem;
  color: var(--titel);
}

/* Zubehör */
.zubehoer-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zubehoer-raster li {
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 1.1rem;
  border: 1px solid var(--karte-rand);
  border-radius: 16px;
  background: var(--studio);
  box-shadow: var(--karte-schatten);
  transition: transform 0.3s var(--weich);
}

.zubehoer-raster li:hover {
  transform: translateY(-3px);
}

.zubehoer-raster img {
  width: 100%;
  height: 110px;
  object-fit: contain;
  margin-bottom: 0.8rem;
}

.zubehoer-raster b {
  color: var(--titel);
  font-weight: 650;
}

.zubehoer-raster span {
  margin-top: 0.2rem;
  color: var(--leise);
  font-size: 0.88rem;
  line-height: 1.4;
}

/* Fragen */
.fragen-liste {
  display: grid;
  gap: 10px;
  max-width: 54rem;
}

.frage {
  border: 1px solid var(--karte-rand);
  border-radius: 14px;
  background: var(--flaeche);
  box-shadow: var(--karte-schatten);
}

.frage summary {
  position: relative;
  padding: 1rem 3rem 1rem 1.2rem;
  color: var(--titel);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.frage summary::-webkit-details-marker {
  display: none;
}

.frage summary::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--leise);
  border-bottom: 2px solid var(--leise);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s var(--weich);
}

.frage[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.frage-antwort {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 0 1.2rem 1.1rem;
  color: var(--leise);
  line-height: 1.55;
}

.frage-antwort figure {
  width: min(320px, 40vw);
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
}

.frage-antwort video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.fuehrung-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
}

@media (max-width: 1023.98px) {
  .konfigurator-buehne {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .aufbau-wahl {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .fakten-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .schritte-leiste button {
    flex-direction: column;
    align-items: flex-start;
    font-size: 0.78rem;
  }

  .schritte-buehne,
  .hotspot-buehne,
  .konfigurator-buehne,
  .fakten-kopf,
  .fakten-chips {
    grid-template-columns: minmax(0, 1fr);
  }

  .schritte-medien {
    top: calc(var(--kopf-h) + 76px);
    z-index: 2;
  }

  .schritt-karte {
    min-height: 34vh;
  }

  .hotspot-bild {
    justify-self: stretch;
    max-width: none;
  }

  .aufbau-wahl {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }

  .aufbau-wahl li {
    flex: none;
    scroll-snap-align: start;
  }

  .aufbau-wahl button {
    width: auto;
  }

  .fakten-raster,
  .zubehoer-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .frage-antwort {
    grid-template-columns: minmax(0, 1fr);
  }

  .frage-antwort figure {
    width: 100%;
  }
}

@media (max-width: 479.98px) {
  .fakten-raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hotspot-punkt::before {
    animation: none;
  }
}

.modus-pin.bewegt .fuehrung .einblenden {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--weich), transform 0.6s var(--weich);
}

.modus-pin.bewegt .fuehrung .einblenden.ist-da {
  opacity: 1;
  transform: none;
}

/* ===== Technik (Neuaufbau 2026-10-22): Band in Navy mit den Clips von keenon.com ===== */
.technik {
  padding: 12vh var(--rand);
  background: linear-gradient(180deg, var(--band), var(--band2));
  color: var(--band-text);
}

.technik-kopf {
  max-width: 44rem;
  margin-bottom: 36px;
}

.technik .augenbraue {
  color: var(--band-leise);
}

.technik-kopf h2 {
  color: #fff;
}

.technik-kopf p:not(.augenbraue) {
  color: var(--band-leise);
}

.technik-zickzack {
  position: relative;
  display: grid;
  gap: clamp(40px, 7vh, 88px);
  max-width: 1120px;
  margin: 0 auto;
}

.technik-linie {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.technik-linie path {
  fill: none;
  stroke-linecap: round;
}

.technik-linie-grund {
  stroke: rgba(51, 209, 230, 0.14);
  stroke-width: 2;
  stroke-dasharray: 3 9;
}

.technik-linie-zug {
  stroke: var(--cyan);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(51, 209, 230, 0.7));
}

.technik-punkt {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.technik-punkt:nth-of-type(even) {
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr);
}

.technik-punkt:nth-of-type(even) .technik-clip {
  order: 2;
}

.technik-punkt:nth-of-type(even) .technik-text {
  justify-self: end;
  text-align: right;
}

.technik-clip {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: #0b1220;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(51, 209, 230, 0.06);
}

.technik-clip video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.technik-text {
  max-width: 30rem;
}

.technik-zahl {
  margin-bottom: 0.4rem;
  color: var(--band-leise);
  font-size: 0.85rem;
}

.technik-zahl b {
  margin-right: 0.3rem;
  color: var(--cyan);
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.technik-text h3 {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 650;
}

.technik-text p:not(.technik-zahl) {
  margin-top: 0.45rem;
  color: var(--band-leise);
  font-size: 0.95rem;
  line-height: 1.55;
}

@media (max-width: 767.98px) {
  .technik-linie {
    display: none;
  }

  .technik-punkt,
  .technik-punkt:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .technik-punkt:nth-of-type(even) .technik-clip {
    order: 0;
  }

  .technik-punkt:nth-of-type(even) .technik-text {
    justify-self: start;
    text-align: left;
  }
}

.modus-pin.bewegt .branchen-kopf.einblenden,
.modus-pin.bewegt .technik .einblenden {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--weich), transform 0.6s var(--weich);
}

.modus-pin.bewegt .branchen-kopf.einblenden.ist-da,
.modus-pin.bewegt .technik .einblenden.ist-da {
  opacity: 1;
  transform: none;
}

/* ===== Ersparnis (2026-11-03, js/ersparnis.js; Nutzer 2026-10-23 "Ersparnisrechner", Zielbild "Passt so") =====
   Höchstens 1200 px in der Mitte wie der Hero. Kacheln mit Foto, darunter links die Angaben als weiße Karte, rechts das
   Ergebnis als Preiskarte wie im Preisrechner der CIN-Next-Seiten (--preis-*), Knopf "Ergebnis besprechen" in Navy.
   Bis 959 px untereinander, unter 768 px Kacheln waagrecht wischbar. */
.ersparnis {
  padding: 14vh var(--rand) 4vh;
}

.ersparnis-innen {
  max-width: 1200px;
  margin: 0 auto;
}

.ersparnis-kopf {
  max-width: 44rem;
  margin-bottom: 28px;
}

.ersparnis-kopf h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.ersparnis-kopf p:not(.augenbraue) {
  margin-top: 0.7rem;
  color: var(--leise);
  font-size: 1.05rem;
  line-height: 1.45;
}

.er-modelle {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.er-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.7rem 0.6rem 0.75rem;
  border: 1px solid var(--karte-rand);
  border-radius: 16px;
  background: var(--flaeche);
  box-shadow: var(--karte-schatten);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s var(--weich);
}

.er-kachel:hover {
  border-color: var(--preis-rand);
}

.er-kachel[aria-checked="true"] {
  border-color: var(--akzent);
  background: var(--preis-grund);
  box-shadow: 0 0 0 1px var(--akzent), var(--preis-schatten);
}

.er-kachel-bild {
  display: block;
  width: 100%;
  height: 110px;
  margin-bottom: 6px;
}

.er-kachel-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.er-kachel b {
  font-size: 1.02rem;
  font-weight: 680;
  color: var(--titel);
}

.er-kachel > span:last-child {
  color: var(--k);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.er-rechner {
  display: grid;
  gap: 20px;
  align-items: start;
}

@media (min-width: 960px) {
  .er-rechner {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
  }

  .er-ergebnis {
    position: sticky;
    top: calc(var(--kopf-h) + 20px);
  }
}

.er-form {
  padding: 1.3rem 1.4rem 1.1rem;
  border: 1px solid var(--karte-rand);
  border-radius: 18px;
  background: var(--flaeche);
  box-shadow: var(--karte-schatten);
}

.er-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.er-wahl {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--linie);
  border-radius: 21px;
  background: var(--flaeche2);
}

.er-wahl[hidden] {
  display: none;
}

.er-wahl button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text2);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.er-wahl button[aria-pressed="true"] {
  background: var(--navy);
  color: #fff;
}

[data-bs-theme="dark"] .er-wahl button[aria-pressed="true"] {
  background: var(--akzent);
}

.er-wahl button:disabled {
  color: var(--k);
  opacity: 0.55;
  cursor: not-allowed;
}

.er-leiste-hinweis {
  margin-top: 0.5rem;
  color: var(--leise);
  font-size: 0.78rem;
  line-height: 1.4;
}

.er-tipp {
  margin: 0.9rem 0 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--strich);
  color: var(--leise);
  font-size: 0.86rem;
  line-height: 1.45;
}

.er-tipp b {
  color: var(--titel);
  font-weight: 650;
}

.er-felder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

@media (max-width: 599.98px) {
  .er-felder {
    grid-template-columns: minmax(0, 1fr);
  }
}

.er-feld {
  min-width: 0;
}

.er-feld label {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
  color: var(--text2);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.3;
}

.er-feld label span {
  margin-left: auto;
  color: var(--k);
  font-size: 0.68rem;
  font-weight: 500;
}

.er-feld label span[aria-hidden] {
  margin-left: 0;
  color: var(--akzent);
  font-size: 0.9rem;
  font-weight: 700;
}

.er-eingabe {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--linie-stark);
  border-radius: 10px;
  background: var(--flaeche2);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.er-eingabe:focus-within {
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px var(--akzent-weich);
}

.er-eingabe.ist-fehler {
  border-color: #b42318;
}

.er-eingabe input,
.er-eingabe select {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 44px;
  padding: 0 11px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.02rem;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

.er-eingabe input:focus,
.er-eingabe select:focus {
  outline: none;
}

.er-eingabe > span {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 10px;
  border-left: 1px solid var(--linie);
  color: var(--leise);
  font-size: 0.74rem;
  white-space: nowrap;
}

.er-feld-hinweis {
  display: block;
  margin-top: 5px;
  color: var(--leise);
  font-size: 0.74rem;
  line-height: 1.4;
}

.er-fehler {
  margin-top: 5px;
  color: #b42318;
  font-size: 0.78rem;
  line-height: 1.4;
}

[data-bs-theme="dark"] .er-fehler {
  color: #ff8a80;
}

[data-bs-theme="dark"] .er-eingabe.ist-fehler {
  border-color: #ff8a80;
}

.er-form-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 1rem;
  color: var(--k);
  font-size: 0.74rem;
}

.er-ergebnis {
  padding: 1.4rem 1.4rem 1.2rem;
  border: 1px solid var(--preis-rand);
  border-radius: 18px;
  background: var(--preis-grund);
  box-shadow: var(--preis-schatten);
}

.er-ergebnis h3 {
  color: var(--titel);
  font-size: 1.15rem;
  font-weight: 680;
}

.er-werte strong {
  display: block;
  color: var(--titel);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ersparnis[data-negativ="true"] .er-werte strong {
  color: #b42318;
}

[data-bs-theme="dark"] .ersparnis[data-negativ="true"] .er-werte strong {
  color: #ff8a80;
}

.er-werte span {
  color: var(--leise);
  font-size: 0.8rem;
}

.er-haupt {
  position: relative;
  margin-top: 0.7rem;
  padding-bottom: 0.9rem;
}

.er-haupt strong {
  font-size: clamp(2.2rem, 4vw, 2.9rem);
  line-height: 1.05;
}

/* Strich in der Produktfarbe unter dem Hauptwert wie unter den Preisen der Vergleichskarten */
.er-haupt::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.6rem;
  height: 3px;
  border-radius: 2px;
  background: var(--pk-robo);
}

.er-zeit {
  margin-top: 0.9rem;
}

.er-zeit strong,
.er-jahr strong {
  font-size: 1.3rem;
}

.er-jahr {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--strich);
}

.er-s100 {
  display: grid;
  gap: 4px;
  margin-top: 0.9rem;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  background: var(--flaeche);
  font-size: 0.82rem;
}

.er-s100[hidden] {
  display: none;
}

.er-s100 p {
  color: var(--titel);
  font-weight: 650;
}

.er-s100 div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--leise);
}

.er-s100 strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.er-amort {
  display: grid;
  gap: 2px;
  margin-top: 0.9rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background: var(--flaeche);
}

.er-amort span {
  color: var(--k);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.er-amort strong {
  color: var(--titel);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.er-amort small {
  color: var(--leise);
  font-size: 0.76rem;
  line-height: 1.4;
}

.er-notiz,
.er-status,
.er-laufzeit,
.er-kapazitaet {
  margin-top: 0.6rem;
  color: var(--leise);
  font-size: 0.76rem;
  line-height: 1.45;
}

.er-kapazitaet {
  color: var(--text2);
  font-weight: 600;
}

.er-mail {
  margin-top: 1rem;
  cursor: pointer;
}

.er-mail[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.er-privat {
  margin-top: 0.5rem;
  color: var(--k);
  font-size: 0.7rem;
}

.er-annahmen {
  margin-top: 20px;
  border: 1px solid var(--karte-rand);
  border-radius: 14px;
  background: var(--flaeche);
}

.er-annahmen summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0.9rem 1.1rem;
  color: var(--titel);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.er-annahmen summary::-webkit-details-marker {
  display: none;
}

.er-annahmen summary svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--weich);
}

.er-annahmen[open] summary svg {
  transform: rotate(180deg);
}

.er-annahmen-text {
  padding: 0 1.1rem 0.9rem;
  columns: 2 26rem;
  column-gap: 2rem;
}

.er-annahmen-text p {
  margin: 0 0 0.7rem;
  color: var(--leise);
  font-size: 0.82rem;
  line-height: 1.6;
  break-inside: avoid;
}

.er-annahmen-text strong {
  color: var(--text2);
  font-weight: 650;
}

@media (max-width: 767.98px) {
  .er-modelle {
    display: flex;
    gap: 10px;
    margin-inline: calc(-1 * var(--rand));
    padding: 4px var(--rand) 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--rand);
    scrollbar-width: none;
  }

  .er-modelle::-webkit-scrollbar {
    display: none;
  }

  .er-kachel {
    flex: 0 0 34%;
    scroll-snap-align: start;
  }

  .er-kachel-bild {
    height: 88px;
  }

  .er-form,
  .er-ergebnis {
    padding: 1.1rem 1rem 1rem;
  }
}

/* ===== Vergleich ===== */
.vergleich {
  padding: 14vh var(--rand) 10vh;
}

.vergleich-kopf {
  max-width: 44rem;
  margin-bottom: 40px;
}

.vergleich-kopf p:not(.augenbraue) {
  margin-top: 0.7rem;
  color: var(--leise);
  font-size: 1.05rem;
  line-height: 1.45;
}

/* Feste Spalten, damit keine Karte allein in einer Reihe steht: 5, 3, 2, 1 */
.karten {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

/* Leiser Farbschein hinter der Reihe, der durch das Glas der Karten weich durchscheint (Nutzer 2026-10-27: "Leiser
   Farbschein"); kein Bild, keine Bewegung. Oben und unten weich ausgeblendet: seit dem Platz für die 3D-Roboter über
   den Karten endete er oben mit einer harten Kante (Nutzer: "der Hintergrund cuttet") */
.karten::before {
  content: "";
  position: absolute;
  inset: -4% -3%;
  z-index: -1;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 24%, #000 82%, transparent);
  background:
    radial-gradient(38% 46% at 22% 30%, color-mix(in srgb, var(--pk-robo, #5c37c3) 20%, transparent), transparent 70%),
    radial-gradient(36% 44% at 74% 64%, color-mix(in srgb, var(--navy) 12%, transparent), transparent 70%),
    radial-gradient(30% 40% at 52% 18%, color-mix(in srgb, var(--pk-robo, #5c37c3) 12%, transparent), transparent 70%);
  pointer-events: none;
}

[data-bs-theme="dark"] .karten::before {
  background:
    radial-gradient(38% 46% at 22% 30%, color-mix(in srgb, var(--pk-robo, #5c37c3) 22%, transparent), transparent 70%),
    radial-gradient(36% 44% at 74% 64%, rgba(110, 168, 254, 0.1), transparent 70%),
    radial-gradient(30% 40% at 52% 18%, color-mix(in srgb, var(--pk-robo, #5c37c3) 12%, transparent), transparent 70%);
}

@media (max-width: 1199.98px) {
  .karten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .karten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479.98px) {
  .karten {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Karten wie .hp-price-card im Preisrechner (Schritt 2, Nutzer 2026-10-15: "Eigene Karten, Optik Rechner"; gemessen
   auf pos.html): Häkchen, Preis mit Strich darunter. Das Foto bleibt. Seit 2026-10-27 klares Glas statt Verlauf
   (Nutzer: "bei den cards den bg entfernen und ein klarglas optik über die cards bauen", gewählt "Karte ist die
   Glasscheibe", "Nein, Glanz bleibt fest"): fast durchsichtige Fläche, die den Farbschein dahinter weichzeichnet,
   helle Kante, feiner schräger Glanz oben hinter dem Inhalt, leichter Schatten. */
.karte {
  --glas: linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.18));
  --glas-kante: rgba(255, 255, 255, 0.8);
  --glas-schatten: 0 0 0 1px rgba(27, 54, 97, 0.07), 0 20px 40px -22px rgba(27, 54, 97, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --glas-glanz: rgba(255, 255, 255, 0.6);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.2rem 1.1rem;
  border: 1px solid var(--glas-kante);
  border-radius: 18px;
  background: var(--glas);
  box-shadow: var(--glas-schatten);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

[data-bs-theme="dark"] .karte {
  --glas: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  --glas-kante: rgba(255, 255, 255, 0.14);
  --glas-schatten: 0 20px 40px -22px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --glas-glanz: rgba(255, 255, 255, 0.1);
}

.karte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--glas-glanz) 0%, transparent 26%, transparent 34%, color-mix(in srgb, var(--glas-glanz) 45%, transparent) 38%, transparent 46%);
  pointer-events: none;
}

.karte .roboter-knopf {
  height: 230px;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.karte .roboter-knopf img {
  height: var(--h, 200px);
}

.karte .roboter-knopf::after {
  bottom: 0;
}

/* 3D wie "Weitere Modelle" der Produktseiten (2026-10-27, gewählt "Ja, wie Weitere Modelle"; js/produkt-weitere.js von
   Catering): beim Überfahren fährt das Modell etwa 1,8-mal so groß wie das Foto ein und ragt oben aus der Karte; über
   den Karten ist Platz dafür. Die Leinwand liegt über der ganzen Reihe */
.vergleich .karten {
  --fig-3d: 1.7;
}

@media (hover: hover) {
  .vergleich .karten.hat-3d {
    padding-top: 130px;
  }
}

.karte .roboter-knopf img,
.karte .roboter-knopf::after {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.karte.hat-3d.ist-3d .roboter-knopf img {
  opacity: 0;
  transform: translateY(6px) scale(0.97);
}

.karte.hat-3d.ist-3d .roboter-knopf::after {
  opacity: 0;
}

/* Die Leinwand reicht 120 px über die Reihe: aus der Tiefe steht ein Roboter höher im Bild als auf seinem Platz, sonst
   fehlt bei der Einfahrt oben der Kopf (Nutzer 2026-10-27: "die Roboter werden bei der Intro-Animation auch oben
   abgeschnitten"); produkt-weitere.js rechnet die Plätze relativ zur Leinwand */
.karten > .weitere-3d {
  position: absolute;
  inset: -120px 0 0;
  z-index: 2;
  pointer-events: none;
}

.karten > .weitere-3d canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.karten > .weitere-3d .weitere-3d-unten {
  filter: blur(5px);
  opacity: 0.55;
}

.karte-feld {
  color: var(--k);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.karte h3 {
  margin-top: 2px;
  font-size: 1.2rem;
  font-weight: 680;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.karte-satz {
  margin: 0.6rem 0 0.7rem;
  color: var(--leise);
  font-size: 0.9rem;
  line-height: 1.35;
}

.karte-merkmale {
  display: grid;
  gap: 0.32rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  color: var(--text2);
  font-size: 0.86rem;
  line-height: 1.3;
}

.karte-merkmale li {
  position: relative;
  padding-left: 1.2rem;
}

.karte-merkmale li::before {
  content: "";
  position: absolute;
  left: 0.12rem;
  top: 0.3em;
  width: 0.5rem;
  height: 0.28rem;
  border-left: 2px solid var(--pk-robo);
  border-bottom: 2px solid var(--pk-robo);
  transform: rotate(-45deg);
}

.karte-merkmale b {
  font-weight: 600;
}

/* "Kauf netto" immer unter dem Preis, damit alle Karten bei jeder Breite gleich aussehen */
.karte-preis {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--strich);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
}

.karte-preis strong {
  position: relative;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.karte-preis strong small {
  font-size: 0.55em;
  font-weight: 600;
  color: var(--leise);
  opacity: 0.75;
}

.karte-preis strong .vor {
  font-size: 0.5em;
}

.karte-preis strong::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.4rem;
  height: 3px;
  border-radius: 99px;
  background: var(--pk-robo);
}

.karte-preis span {
  color: var(--k);
  font-size: 0.76rem;
}

.karte-miete {
  margin-top: 0.85rem;
  color: var(--leise);
  font-size: 0.84rem;
}

.karte-miete b {
  color: var(--text);
  font-weight: 600;
}

.karte .textknopf {
  margin-top: 12px;
  align-self: flex-start;
}

a.textknopf,
a.roboter-knopf {
  text-decoration: none;
}

/* Weitere KEENON-Modelle unter dem Vergleich (Nutzer 2026-10-26: "5 groß, 12 klein"): kleine Karten, blass wie
   "Weitere Modelle" auf den Produktseiten, Etikett "Coming soon", kein Preis; mit fertiger Seite als Link */
.bald {
  margin-top: 3rem;
  border-top: 1px solid var(--linie);
}

.bald-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0.2rem;
  list-style: none;
  cursor: pointer;
}

.bald-kopf::-webkit-details-marker {
  display: none;
}

.bald-kopf > span {
  display: grid;
  gap: 0.3rem;
}

.bald-kopf b {
  color: var(--titel);
  font-size: 1.3rem;
  font-weight: 650;
}

.bald-kopf > span > span {
  color: var(--leise);
}

.bald-kopf svg {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--titel);
  transition: transform 0.3s var(--weich);
}

.bald[open] .bald-kopf svg {
  transform: rotate(180deg);
}

.bald-kopf:focus-visible {
  outline: 2px solid var(--pk-robo);
  outline-offset: 4px;
  border-radius: 8px;
}

.bald-raster {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 0.4rem;
}

.bald-karte {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.2rem;
  padding: 0.8rem 0.85rem 0.9rem;
  border: 1px solid var(--karte-rand);
  border-radius: 14px;
  background: var(--flaeche);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s;
}

a.bald-karte:hover,
a.bald-karte:focus-visible {
  border-color: color-mix(in srgb, var(--pk-robo) 45%, transparent);
}

.bald-karte img {
  width: 100%;
  height: 7.5rem;
  margin: 1.2rem 0 0.4rem;
  object-fit: contain;
  filter: grayscale(0.7);
  opacity: 0.55;
}

.bald-marke {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--akzent-weich);
  color: var(--titel);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 650;
}

.bald-karte b,
.bald-karte span {
  opacity: 0.6;
}

.bald-karte b {
  color: var(--titel);
  font-size: 0.92rem;
  line-height: 1.25;
}

.bald-karte span {
  color: var(--leise);
  font-size: 0.8rem;
  line-height: 1.35;
}

.bald-karte .bald-mehr {
  margin-top: 0.3rem;
  color: var(--pk-robo);
  font-weight: 650;
}

@media (max-width: 1199.98px) {
  .bald-raster {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 899.98px) {
  .bald-raster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .bald-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fussnote {
  margin-top: 26px;
  font-size: 0.82rem;
  color: var(--leise);
  max-width: 60rem;
}

/* ===== Kontakt ===== */
.kontakt {
  padding: 12vh var(--rand) 10vh;
  border-top: 1px solid var(--linie);
}

/* Vertrieb Schweiz (Nutzer 2026-10-22) mit digitalem Berg wie auf den Produktseiten (2026-10-27, "Überall gleich"):
   Farben und Berg aus css/schweiz-berg.css (Catering, lädt js/schweiz-berg.js), hier nur der Aufbau. Seit dem
   2026-10-27 abends ein breites Band in Hero-Breite am Ende der Startseite (Nutzer: "Eine umgedrehte Pyramide ist sehr
   schlechtes Auge. Bitte nochmal umgestalten, damit es harmonischer wirkt", gewählt "Breites Band, Karte darunter"):
   Fahne, Text und Knopf links, der Berg rechts über die ganze Höhe. Nur in .kontakt der Startseite. */
.kontakt .schweiz.berg-karte {
  display: grid;
  grid-template-columns: minmax(0, 28rem);
  align-content: center;
  justify-items: start;
  max-width: 1200px;
  min-height: 18rem;
  margin: 0 auto;
  padding: 2.4rem 2.8rem;
  border-radius: 18px;
  text-align: left;
}

/* Text und Berg überschneiden sich nicht, der Schleier hinter dem Text entfällt; die linke Kette läuft weich aus */
.kontakt .schweiz.berg-karte .berg {
  inset: 0 0 0 44%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%);
  mask-image: linear-gradient(90deg, transparent, #000 22%);
}

.kontakt .schweiz.berg-karte::before {
  content: none;
}

.kontakt .schweiz-fahne {
  display: block;
  width: 2.6rem;
  height: 2.6rem;
}

.kontakt .schweiz-fahne svg {
  display: block;
  width: 100%;
  height: 100%;
}

.kontakt .schweiz.berg-karte .augenbraue {
  margin-top: 0.9rem;
}

.kontakt .schweiz.berg-karte h3 {
  margin-top: 0.2rem;
  font-size: 1.5rem;
  font-weight: 680;
  line-height: 1.2;
}

.kontakt .schweiz.berg-karte p:not(.augenbraue) {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
}

.kontakt .schweiz.berg-karte .knopf-geist {
  margin-top: 1.2rem;
}

/* Handy: Text oben, Berg darunter */
@media (max-width: 767.98px) {
  .kontakt .schweiz.berg-karte {
    min-height: 0;
    padding: 1.8rem 1.2rem 11rem;
  }

  .kontakt .schweiz.berg-karte .berg {
    inset: 52% 0 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Abschlusskarte wie .close-card auf pos.html (gemessen 2026-10-22): mittig, Inhalt zentriert */
.abschluss-karte {
  width: fit-content;
  max-width: min(38rem, 100%);
  margin: 12vh auto 0;
  padding: 2.4rem 2.6rem;
  border-radius: 18px;
  background: var(--flaeche);
  box-shadow: 0 24px 60px rgba(27, 54, 97, 0.12);
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: center;
}

.abschluss-k {
  color: var(--k);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

.abschluss-karte h2 {
  margin-bottom: 0.4rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

.abschluss-satz {
  margin-bottom: 1rem;
  color: var(--leise);
}

.abschluss-adresse {
  margin-bottom: 1rem;
}

.abschluss-adresse a {
  color: var(--titel);
}

/* Quadrate wie .hp-close-sq der CIN-Next-Seiten: ruhend hellgrau, beim Überfahren und bei Tastaturfokus in 0,6 s
   im Verlauf des Produkts */
@property --q-c {
  syntax: "<color>";
  inherits: true;
  initial-value: #b9c1cd;
}

@property --q-c2 {
  syntax: "<color>";
  inherits: true;
  initial-value: #98a2b1;
}

.abschluss-quadrate {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
}

.quadrat {
  --q-c: #b9c1cd;
  --q-c2: #98a2b1;
  display: grid;
  place-items: center;
  align-content: center;
  width: 3rem;
  aspect-ratio: 1;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.18), transparent 60%),
    linear-gradient(135deg, var(--q-c2), var(--q-c));
  color: #fff;
  text-decoration: none;
  line-height: 1;
  transition: --q-c 0.6s cubic-bezier(0.4, 0, 0.2, 1), --q-c2 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.quadrat svg {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
}

.quadrat span {
  margin-top: 0.22rem;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

[data-bs-theme="dark"] .quadrat {
  --q-c: #4f5a6c;
  --q-c2: #364152;
}

.quadrat:focus-visible {
  outline: 2px solid var(--q-c);
  outline-offset: 3px;
}

@media (hover: hover) {
  .quadrat[data-p="uebersicht"]:hover { --q-c: #4f7fd1; --q-c2: #1b3661; }
  .quadrat[data-p="crm"]:hover { --q-c: var(--p-crm); --q-c2: var(--p2-crm); }
  .quadrat[data-p="pos"]:hover { --q-c: var(--p-pos); --q-c2: var(--p2-pos); }
  .quadrat[data-p="wms"]:hover { --q-c: var(--p-wms); --q-c2: var(--p2-wms); }
  .quadrat[data-p="shop"]:hover { --q-c: var(--p-shop); --q-c2: var(--p2-shop); }
}

.quadrat[data-p="uebersicht"]:focus-visible { --q-c: #4f7fd1; --q-c2: #1b3661; }
.quadrat[data-p="crm"]:focus-visible { --q-c: var(--p-crm); --q-c2: var(--p2-crm); }
.quadrat[data-p="pos"]:focus-visible { --q-c: var(--p-pos); --q-c2: var(--p2-pos); }
.quadrat[data-p="wms"]:focus-visible { --q-c: var(--p-wms); --q-c2: var(--p2-wms); }
.quadrat[data-p="shop"]:focus-visible { --q-c: var(--p-shop); --q-c2: var(--p2-shop); }

/* Fünf Quadrate in einer Reihe bei 360 px */
@media (max-width: 399.98px) {
  .abschluss-quadrate {
    gap: 0.45rem;
  }
}

.abschluss-recht {
  margin-top: 1rem;
  color: var(--leise);
  font-size: 0.766rem;
}

.abschluss-recht a {
  color: inherit;
}

.abschluss-recht + .abschluss-recht {
  margin-top: 0.3rem;
}

/* ===== Steckbrief ===== */
.steckbrief {
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: 24px;
  background: var(--flaeche);
  color: var(--text);
  overflow: auto;
}

.steckbrief::backdrop {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.steckbrief-innen {
  display: grid;
  gap: 32px;
  padding: 40px;
}

@media (min-width: 769px) {
  .steckbrief-innen {
    grid-template-columns: 0.8fr 1.2fr;
    align-items: center;
  }
}

.steckbrief-bild {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 300px;
  background: radial-gradient(ellipse 60% 50% at 50% 70%, var(--licht), transparent 70%);
}

.steckbrief-bild img {
  height: min(56vh, 520px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 26px var(--schatten));
}

/* 3D-Modell statt Foto (2026-10-22): gleiche Höhe wie das Foto, damit beim Laden nichts springt; Ziehen dreht,
   senkrechtes Wischen scrollt weiter */
.steckbrief-bild.ist-3d {
  min-height: min(56vh, 520px);
}

.steckbrief-bild.ist-3d img {
  display: none;
}

.steckbrief-3d {
  display: block;
  width: 100%;
  height: min(56vh, 520px);
  touch-action: pan-y;
  cursor: grab;
}

.steckbrief-3d.ist-gezogen {
  cursor: grabbing;
}

.steckbrief-daten > * {
  opacity: var(--o, 1);
}

.steckbrief dl {
  display: grid;
  gap: 0;
  margin: 22px 0 0;
}

.steckbrief dl div {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linie);
}

.steckbrief dt {
  color: var(--leise);
}

.steckbrief dd {
  margin: 0;
}

.steckbrief-punkte {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.steckbrief-punkte b {
  display: block;
}

.steckbrief-punkte span {
  color: var(--leise);
  font-size: 0.95rem;
}

.steckbrief-zu {
  position: sticky;
  top: 16px;
  float: right;
  margin: 16px 16px 0 0;
  z-index: 2;
  background: var(--flaeche);
}

.steckbrief .preiszeile {
  margin-top: 22px;
}

.steckbrief .knopf {
  margin-top: 22px;
}

/* Fotos und Clip von keenon.com unter Bild und Daten (Neuaufbau 2026-10-22) */
.steckbrief-medien {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 0.62fr 1.25fr 1fr;
  gap: 12px;
}

.sb-medium {
  position: relative;
  margin: 0;
  height: 210px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--flaeche2);
}

.sb-medium img,
.sb-medium video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sb-medium--hell {
  background: var(--studio);
}

.sb-medium--hell img {
  object-fit: contain;
  padding: 6%;
}

.sb-medium figcaption {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(13, 20, 32, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.35;
}

@media (max-width: 768px) {
  .steckbrief-medien {
    grid-template-columns: 1fr 1fr;
  }

  .sb-medium {
    height: 180px;
  }

  .sb-medium--film {
    grid-column: 1 / -1;
  }
}

/* Trefferflächen auf Touch mindestens 40 px, das Aussehen bleibt (Prüfung 2026-10-22) */
@media (hover: none), (max-width: 767.98px) {
  .hero-reiter a,
  .branche-chips a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .textknopf {
    min-height: 40px;
  }

  .knopf-talk,
  .knopf-geist {
    min-height: 40px;
  }

  .knopf-rund {
    width: 44px;
    height: 44px;
  }

  .hotspot-liste button {
    min-width: 40px;
    height: 40px;
  }

  .abschluss-adresse a,
  .abschluss-recht a {
    display: inline-block;
    padding: 11px 2px;
    margin: -11px 0;
  }

  .hero-3d .hero-3d-name::after {
    content: "";
    position: absolute;
    inset: -10px -8px;
  }
}

/* ===== Präsentationsmodus ===== */
.praesi-leiste {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 45;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--flaeche) 88%, transparent);
  border: 1px solid var(--linie);
  font-size: 0.82rem;
  color: var(--leise);
}

.praesi-leiste[hidden] {
  display: none;
}

.praesi-leiste b {
  color: var(--text);
  font-weight: 600;
}

.praesi .kopf {
  opacity: 0;
  pointer-events: none;
}

.praesi .kopf:hover,
.praesi .kopf:focus-within {
  opacity: 1;
  pointer-events: auto;
}

/* ===== Handy ===== */
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }

  .kopf-punkte {
    display: none;
  }

  #praesi-knopf {
    display: none;
  }

  .roboter-name {
    font-size: 0.7rem;
  }

  .steckbrief-innen {
    padding: 24px;
  }

  .abschluss-karte {
    padding: 2rem 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ===== Neue Gliederung (Nutzer 2026-10-23): Menü wie keenon.com, Hero mit CIN Next zuerst in zwei Fassungen ===== */

/* Menü in der Mitte der Kopfzeile, an der Stelle der früheren Kapitel-Punkte */
.kopf-menue {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.menue-punkt {
  position: relative;
}

.menue-knopf,
.menue-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.55rem;
  padding: 0 0.85rem;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--knopf-text);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.menue-knopf svg {
  width: 10px;
  height: 10px;
  transition: transform 0.25s var(--weich);
}

.menue-knopf:hover,
.menue-link:hover,
.menue-punkt.ist-offen .menue-knopf {
  background: var(--knopf-hover);
}

.menue-punkt.ist-offen .menue-knopf svg {
  transform: rotate(180deg);
}

.kopf.ist-dunkel .menue-knopf,
.kopf.ist-dunkel .menue-link {
  color: #e8eef6;
}

.kopf.ist-dunkel .menue-knopf:hover,
.kopf.ist-dunkel .menue-link:hover,
.kopf.ist-dunkel .menue-punkt.ist-offen .menue-knopf {
  background: rgba(255, 255, 255, 0.08);
}

/* Aufklappfeld als Karte unter dem Punkt; die Brücke oben hält den Zeiger auf dem Weg hinein */
.menue-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  translate: -50% 0;
  display: none;
  padding: 1rem;
  border: 1px solid var(--karte-rand);
  border-radius: 16px;
  background: var(--flaeche);
  box-shadow: 0 18px 50px rgba(27, 54, 97, 0.16);
}

[data-bs-theme="dark"] .menue-panel {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.menue-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.menue-punkt.ist-offen .menue-panel {
  display: grid;
  animation: menue-auf 0.22s var(--weich);
}

@keyframes menue-auf {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* Roboter: eine Spalte je Bereich mit Angebot (--spalten aus js/menue.js), über der Mitte der Kopfzeile statt unter
   dem Knopf, damit auch ein breites Feld im Fenster bleibt */
.menue-punkt:has(> .menue-panel--roboter) {
  position: static;
}

.menue-panel--roboter {
  width: max-content;
  max-width: calc(100vw - 2rem);
  grid-template-columns: repeat(var(--spalten, 3), minmax(0, 14rem));
  gap: 1rem;
}

.menue-bereich {
  display: grid;
  align-content: start;
  gap: 0.2rem;
}

.menue-bereich .augenbraue {
  margin: 0 0 0.2rem 0.55rem;
}

.menue-roboter {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.2s;
}

.menue-roboter:hover,
.menue-roboter:focus-visible {
  background: var(--flaeche2);
}

.menue-roboter img {
  width: 3.2rem;
  height: 3.2rem;
  object-fit: contain;
}

.menue-roboter b,
.menue-eintrag b {
  display: block;
  color: var(--titel);
  font-size: 0.93rem;
  font-weight: 600;
}

.menue-roboter span span,
.menue-eintrag span {
  display: block;
  color: var(--leise);
  font-size: 0.8rem;
  line-height: 1.35;
}

.menue-panel--liste {
  width: 19rem;
  gap: 0.15rem;
}

.menue-eintrag {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
}

a.menue-eintrag:hover,
a.menue-eintrag:focus-visible {
  background: var(--flaeche2);
}

.menue-eintrag.ist-bald {
  opacity: 0.6;
}

#menue-handy {
  display: none;
}

/* Unter 768 px (seit 2026-10-27, vorher 900 px): Menüknopf, das Menü liegt als Blatt unter der Kopfzeile */
@media (max-width: 767.98px) {
  #menue-handy {
    display: grid;
  }

  .kopf-menue {
    position: fixed;
    top: var(--kopf-h);
    left: 0;
    right: 0;
    transform: none;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
    max-height: calc(100vh - var(--kopf-h));
    overflow: auto;
    padding: 0.6rem 1rem 1.2rem;
    border-bottom: 1px solid var(--linie);
    background: var(--flaeche);
    box-shadow: 0 18px 40px rgba(27, 54, 97, 0.14);
  }

  .kopf.ist-menue-offen .kopf-menue {
    display: flex;
  }

  .kopf-menue .menue-knopf {
    width: 100%;
    height: 2.2rem;
    padding: 0 0.55rem;
    pointer-events: none;
    color: var(--k);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .kopf-menue .menue-knopf svg {
    display: none;
  }

  .kopf-menue .menue-panel {
    position: static;
    translate: none;
    display: grid;
    width: auto;
    padding: 0 0 0.5rem;
    border: 0;
    background: none;
    box-shadow: none;
    animation: none;
  }

  .menue-panel--roboter {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .kopf-menue .menue-link {
    width: 100%;
    padding: 0 0.55rem;
  }
}

/* ===== Kopfzeile seit 2026-10-27 (js/menue.js, js/menue3d.js; Nutzer: "ersetze die topnav mit den typischen punkten",
   gewählt "Alle Robo-Seiten", "Fünf in einer Reihe", Knopf "Gesicht, Augen blinzeln", "Desktop Punkte, Handy
   Menüknopf"): in der Mitte der Roboter-Knopf und ein Punkt je Kapitel; der Knopf öffnet unter der Kopfzeile das
   Roboter-Feld in der Größe des früheren Roboter-Menüs ===== */

/* Die statischen Menüs der Produktseiten ersetzt js/menue.js; bis dahin nicht zeigen */
.kopf-menue > .menue-punkt,
.kopf-menue > .menue-link {
  display: none;
}

.kopf-menue .kopf-punkte {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
}

.handy-menue {
  display: none;
}

/* Roboter-Knopf: Gesicht wie das Display des T10, etwas größer als der aktive Punkt; blinzelt beim Überfahren, die
   Augen schauen ständig zum Mauszeiger (--blick aus js/menue.js). Mittig unter den Punkten (Nutzer 2026-10-28 mit
   eingezeichneter Stelle: "roboter unter die navigation setzen centered"), das Etikett der Punkte darunter */
.robo-knopf {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: none;
  cursor: pointer;
}

.robo-knopf svg {
  width: 34px;
  height: 24px;
  overflow: visible;
  transition: transform 0.3s var(--weich);
}

.robo-gesicht {
  fill: var(--punkt-an);
  transition: fill 0.25s ease;
}

.robo-auge {
  fill: #7fe3ff;
  transform-box: fill-box;
  transform-origin: center;
  translate: var(--blick, 0 0);
  transition: translate 0.18s ease-out;
}

.robo-knopf:hover svg,
.robo-knopf:focus-visible svg {
  transform: scale(1.06);
}

.robo-knopf:hover .robo-auge,
.robo-knopf:focus-visible .robo-auge {
  animation: robo-blinzeln 0.36s ease;
}

.robo-knopf:focus-visible {
  outline: 3px solid var(--akzent-weich);
  outline-offset: 1px;
}

@keyframes robo-blinzeln {
  45% {
    scale: 1 0.12;
  }
}

.kopf-punkte .kopf-tip {
  top: calc(100% + 39px);
}

/* Das Etikett der Punkte ruht, solange das Roboter-Feld offen ist */
.kopf.ist-robo-offen .kopf-tip {
  opacity: 0 !important;
}

/* Roboter-Feld unter der Kopfzeile, ohne eigenen Hintergrund (Nutzer 2026-10-27: "kein festen hintergrund. um die
   hälfte kleiner - kein lila", gewählt "Frei, nur Schatten", "Höhe halb, Reihe enger"): die Roboter stehen frei über
   der Seite, T10 rund 90 px hoch. Die Leinwand liegt über dem ganzen Feld, auch unter den Namen, damit ein
   vorfahrender Roboter nicht abgeschnitten wird; die Namen tragen einen Lichthof in der Seitenfarbe.
   Unter Füßen und Namen ein Boden aus Milchglas wie die Kopfzeile, als weiche Ellipse (Nutzer mit eingezeichneter
   Ellipse: "unter den Robotern ein Boden, der den Hintergrund blurry macht, damit sie auch sichtbar sind, wenn wir
   über Text havern"). Ein- und ausgeblendet werden die Teile des Felds, nicht das Feld selbst: ein Vorfahr mit
   Deckkraft unter 1 nimmt dem Milchglas die Seite dahinter, es würde erst am Ende der Blende unscharf. */
.robo-feld {
  position: fixed;
  z-index: 39;
  top: calc(var(--kopf-h) + 8px);
  left: 50%;
  width: min(30rem, calc(100vw - 2rem));
  height: 10rem;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: transform 0.3s var(--weich), visibility 0s linear 0.3s;
}

.robo-feld > * {
  opacity: 0;
  transition: opacity 0.22s ease;
}

.robo-feld.ist-offen {
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.robo-feld.ist-offen > * {
  opacity: 1;
}

.robo-boden {
  position: absolute;
  top: 4.6rem;
  right: -14%;
  bottom: -0.6rem;
  left: -14%;
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent);
  mask-image: radial-gradient(closest-side, #000 70%, transparent);
}

.robo-buehne {
  position: absolute;
  inset: 0;
}

.robo-buehne canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.robo-reihe {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0;
  padding: 0 0.6rem;
  list-style: none;
}

.robo-reihe li {
  display: flex;
}

.robo-platz {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.1rem;
  padding: 0 0 0.6rem;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--titel);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.robo-platz b,
.robo-platz span {
  line-height: 1.25;
  text-shadow: 0 0 3px var(--bg), 0 0 8px var(--bg), 0 0 16px var(--bg);
}

.robo-platz b {
  font-size: 0.98rem;
  font-weight: 650;
}

.robo-platz span {
  color: var(--leise);
  font-size: 0.74rem;
}

.robo-platz.ist-hier span {
  color: var(--titel);
  font-weight: 600;
}

.robo-platz:focus-visible {
  outline: 2px solid var(--titel);
  outline-offset: -2px;
}

/* Handy: statt Punkten und Feld eine Liste mit Kapiteln und Robotern im Menüblatt */
@media (max-width: 767.98px) {
  .kopf-menue .kopf-punkte,
  .robo-feld {
    display: none;
  }

  .handy-menue {
    display: grid;
    gap: 0.1rem;
  }

  .handy-menue .augenbraue {
    margin: 0.6rem 0.55rem 0.2rem;
  }

  .handy-kapitel {
    display: block;
    padding: 0.5rem 0.55rem;
    border-radius: 10px;
    color: var(--titel);
    font-weight: 600;
    text-decoration: none;
  }

  .handy-kapitel:hover {
    background: var(--flaeche2);
  }

  .menue-roboter[aria-current] span span {
    color: var(--titel);
    font-weight: 600;
  }
}

/* Hero-Rundgang (Nutzer 2026-10-23, Umbau 2026-10-26: "der herobanner ist viel zu voll"): rechts Überschrift, ein
   Satz, vier Punkte und die Knöpfe; links oben die Ansicht aus CIN Next, darunter Figuren und Roboter
   (js/rundgang3d.js, js/geschichten.js). Die Punkte seit 2026-10-27 als Karten wie die Merkmal-Punkte der
   Produktseiten (Nutzer: "bau auch die darstellung der punkte angepasst an das design der unterseiten", gewählt
   "Karten, Status neben Titel", "Modulfarben bleiben"): Quadrat, Titel mit Status, Satz, Fortschrittsbalken; Quadrat
   ruhend blass mit farbigem Symbol, aktiv voll in der Farbe des Moduls (--c). */
.rundgang-reiter {
  display: grid;
  gap: 0.45rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.rundgang-punkt {
  position: relative;
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.55rem 0.8rem;
  overflow: hidden;
  border: 1px solid var(--karte-rand);
  border-radius: 12px;
  background: var(--flaeche);
  color: var(--text2);
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  opacity: 0.72;
  transition: border-color 0.3s, background-color 0.3s, opacity 0.3s, transform 0.4s var(--weich);
}

.rundgang-punkt:hover {
  opacity: 1;
}

.rundgang-punkt.ist-aktiv {
  border-color: color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 5%, var(--flaeche));
  opacity: 1;
  transform: translateX(4px);
}

/* Vorschau einer Geschichte (VORSCHAU in js/rundgang.js): die übrigen Reiter blass und ohne Klick */
.rundgang-punkt[data-gesperrt] {
  opacity: 0.4;
  cursor: default;
}

.rundgang-punkt .modul-sq {
  width: 2.3rem;
  border-radius: 9px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  transition: background-color 0.3s, color 0.3s;
}

.rundgang-punkt.ist-aktiv .modul-sq {
  background-color: var(--c);
  color: #fff;
}

/* dunkel sind die Modulfarben auf der Fläche zu schwach, ruhend darum heller */
[data-bs-theme="dark"] .rundgang-punkt .modul-sq {
  background-color: color-mix(in srgb, var(--c) 24%, transparent);
  color: color-mix(in srgb, var(--c) 62%, #fff);
}

[data-bs-theme="dark"] .rundgang-punkt.ist-aktiv .modul-sq {
  background-color: var(--c);
  color: #fff;
}

.rundgang-punkt .modul-sq svg {
  width: 1.3rem;
}

.rundgang-titel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rundgang-titel b {
  color: var(--titel);
  font-size: 0.95rem;
}

.rundgang-titel .status {
  margin-left: auto;
}

.hero-knoepfe {
  margin-top: 1.3rem;
}

/* Datenleiste unter dem Hero wie .produkt-daten der Produktseiten (Nutzer 2026-10-27, gewählt "Datenleiste unter
   Hero", "Ja, Hero etwas kürzer", "Nein, nur Anzeige"): grauer Streifen über die ganze Breite, Inhalt so breit wie der
   Hero; liegt über der Leinwand der Szene, die nach unten über die Bühne hinausragt */
.start-daten {
  position: relative;
  z-index: 5;
  padding: 1.3rem max(5vw, (100% - 1200px) / 2) 1.1rem;
  border-top: 1px solid var(--linie);
  background: var(--flaeche2);
}

.start-leiste {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
}

.start-wert {
  padding: 0.15rem 1rem;
  border-left: 1px solid var(--linie);
}

.start-wert:first-child {
  padding-left: 0;
  border-left: 0;
}

.start-wert dt {
  color: var(--k);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
}

.start-wert dd {
  margin: 0.35rem 0 0;
  color: var(--titel);
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.start-daten-hinweis {
  margin: 0.8rem 0 0;
  color: var(--k);
  font-size: 0.75rem;
  line-height: 1.55;
}

@media (max-width: 1099.98px) {
  .start-leiste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 1.1rem;
  }

  .start-wert:nth-child(3n + 1) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 767.98px) {
  .start-daten {
    padding: 1.4rem 1.1rem 1.3rem;
  }

  .start-leiste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .start-wert,
  .start-wert:nth-child(3n + 1) {
    padding: 0.1rem 0.8rem;
    border-left: 1px solid var(--linie);
  }

  .start-wert:nth-child(2n + 1) {
    padding-left: 0;
    border-left: 0;
  }
}

/* Bis 959 px eine Spalte wie die Produktseiten auf dem Handy: Überschrift und Satz, Szene, Punkte, Knöpfe */
@media (max-width: 959.98px) {
  .hero-banner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kopf" "buehne" "punkte" "kauf";
    align-content: center;
  }

  .hero-text {
    display: contents;
  }

  .hero-kopf {
    grid-area: kopf;
  }

  .rundgang-reiter {
    grid-area: punkte;
    margin-top: 0.2rem;
  }

  .hero-knoepfe {
    grid-area: kauf;
    margin-top: 0.4rem;
  }
}

/* Fortschritt des aktiven Reiters, so lang wie die Geschichte (--dauer setzt js/rundgang.js) */
.rundgang-balken {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: left;
}

.rundgang-punkt.ist-aktiv .rundgang-balken {
  animation: rundgang-balken var(--dauer, 10s) linear forwards;
}

@keyframes rundgang-balken {
  to {
    transform: scaleX(1);
  }
}

/* Modul-Quadrate in den Farben der Übersicht: CRM und ERP wie --m-* in homepage.css, WMS wie --p-wms, Joshee im
   dritten CIN-Next-Blau (--m-dms), Cockpit Navy */
[data-modul="crm"] {
  --c: #1683c0;
  --c2: #2599d2;
}

[data-modul="erp"] {
  --c: #4f6fd6;
  --c2: #6f8ee6;
}

[data-modul="joshee"] {
  --c: #2c468f;
  --c2: #4664bf;
}

[data-modul="wms"] {
  --c: #2a9d95;
  --c2: #3298bd;
}

[data-modul="cockpit"] {
  --c: #1b3661;
  --c2: #2a4875;
}

[data-bs-theme="dark"] [data-modul="joshee"] {
  --c: #6f86c9;
  --c2: #4f67b0;
}

[data-bs-theme="dark"] [data-modul="cockpit"] {
  --c: #7b8fb8;
  --c2: #5d75a6;
}

.modul-sq {
  display: grid;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  border-radius: 8px;
  background: linear-gradient(135deg, rgb(255 255 255 / 0.18), transparent 60%), linear-gradient(135deg, var(--c2), var(--c));
  color: #fff;
}

.modul-sq svg {
  width: 52%;
  height: auto;
}

.status {
  justify-self: end;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  color: var(--leise);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.status--heute {
  border-color: transparent;
  background: rgba(42, 157, 149, 0.14);
  color: #1f7a73;
}

.status--vorbereitung {
  border-color: transparent;
  background: var(--akzent-weich);
  color: #7a52c7;
}

[data-bs-theme="dark"] .status--heute {
  color: #6fd3c9;
}

[data-bs-theme="dark"] .status--vorbereitung {
  color: #cdb8f7;
}

/* Bühne der Geschichten (Nutzer 2026-10-23 nachmittags: "zeig nicht einfach den langweilige container sondern bau die
   story dahinter"). Links das Tablet wie im POS-Hero, rechts daneben Figuren und Roboter im echten Größenverhältnis.
   Ebenen von hinten: Boden, Linien des Orts, untere Leinwand (Schatten, Spiegelung, weichgezeichnet), Tablet, obere
   Leinwand (Roboter und Figuren, die sich gegenseitig richtig verdecken), Sprechblasen und Zeichen. Maße setzt
   js/rundgang3d.js: Größe des Tablets, Maßstab der Figuren. */
.rundgang-buehne {
  --ort-linie: rgba(27, 54, 97, 0.26);
  grid-area: buehne;
  position: relative;
  min-width: 0;
  height: clamp(28rem, 42vw, 38rem);
}

[data-bs-theme="dark"] .rundgang-buehne {
  --ort-linie: rgba(201, 209, 217, 0.2);
}

/* Boden läuft nach unten und zu den Seiten weich aus (Nutzer 2026-10-23: "boden sauber auslaufen lassen gradiant") */
.buehne-boden {
  position: absolute;
  right: -4%;
  bottom: -8%;
  left: -4%;
  height: 44%;
  background: radial-gradient(58% 50% at 50% 62%, color-mix(in srgb, var(--navy) 7%, transparent), transparent 75%);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 95%);
  pointer-events: none;
}

[data-bs-theme="dark"] .buehne-boden {
  background: radial-gradient(58% 50% at 50% 62%, rgba(255, 255, 255, 0.05), transparent 75%);
}

/* Büro und Café haben je einen eigenen Boden (Nutzer 2026-10-27: "Zwei Räume, Lücke"), der gemeinsame tritt zurück */
.buehne-boden {
  transition: opacity 0.6s ease;
}

.rundgang-buehne[data-ort="buero-cafe"] .buehne-boden {
  opacity: 0;
}

.buehne-ort,
.buehne3d {
  position: absolute;
  top: -14%;
  right: -6vw;
  bottom: -9%;
  left: -3%;
  pointer-events: none;
}

.buehne-ort {
  width: calc(103% + 6vw);
  height: 123%;
  overflow: visible;
}

.buehne-ort g[data-ort] {
  opacity: 0;
  transition: opacity 0.7s ease;
}

.buehne-ort g[data-ort].ist-aktiv {
  opacity: 1;
}

/* Fächer aus dem Display leuchten (WMS), der Bildschirm im Büro scheint, wenn ein Ticket ankommt */
.buehne-ort .ort-fach,
.buehne-ort .ort-schirm {
  fill: rgba(255, 196, 64, 0.32);
  stroke: rgba(255, 176, 32, 0.9);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.buehne-ort .ort-schirm {
  fill: rgba(110, 168, 254, 0.45);
  stroke: none;
}

.buehne-ort .ort-fach.ist-an,
.buehne-ort .ort-schirm.ist-an {
  opacity: 1;
  animation: fach-an 1.2s ease-in-out infinite alternate;
}

@keyframes fach-an {
  to {
    fill-opacity: 0.55;
  }
}

/* Draufsicht des Lagers: Grundrisse der Regalzeilen, Blinkpunkte für neue Waren, der beste Weg */
.buehne-ort .ort-oben {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.buehne-ort.ist-oben .ort-grundriss {
  opacity: 1;
  stroke-dashoffset: 0;
}

.buehne-ort.ist-oben .ort-detail {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.buehne-ort .ort-ping {
  fill: rgba(255, 176, 32, 0.35);
  stroke: #ffb020;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.buehne-ort.ist-oben .ort-ping.ist-an {
  opacity: 1;
  animation: ping 0.9s ease-out infinite;
}

@keyframes ping {
  0% {
    fill-opacity: 0.8;
    stroke-opacity: 1;
  }

  100% {
    fill-opacity: 0.1;
    stroke-opacity: 0.35;
  }
}

.buehne-ort .ort-weg {
  fill: none;
  stroke: var(--pk-robo, #a77bf2);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
}

.buehne-ort.ist-oben .ort-weg.ist-an {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: opacity 0.2s ease, stroke-dashoffset 1.8s cubic-bezier(0.5, 0, 0.25, 1);
}

/* Das Notizfeld bleibt auch in der Draufsicht stehen (Bitte von wms 2026-10-28); in Nahaufnahmen der Kamera treten
   die Raumnamen zurück (ist-nah, js/rundgang3d.js) */
.buehne-ort .ort-raumname {
  transition: opacity 0.3s ease;
}

.rundgang-buehne.ist-nah .buehne-ort .ort-raumname {
  opacity: 0;
}

/* Oben endet die Szene an der Bühne: Leinwände und Linien ragen nur seitlich und unten hinaus, sonst schöben sich
   Roboter in einer Nahaufnahme über die Kopfzeile (Leinwand oben -14 % bei 123 % Höhe, Handy -4 % bei 112 %) */
.buehne-ort,
.buehne3d {
  clip-path: inset(11.38% 0 0 0);
}

/* Linien des Orts zeichnen sich beim Auftritt nacheinander auf */
.buehne-ort .ort-linie {
  fill: none;
  stroke: var(--ort-linie);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
}

.buehne-ort .ist-gezeichnet .ort-linie {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.45, 0, 0.2, 1) calc(80ms + var(--i, 0) * 55ms);
}

.buehne3d {
  display: block;
  width: calc(103% + 6vw);
  height: 123%;
}

/* Schnitt zwischen zwei Geschichten: die Bühne blendet aus, baut den neuen Ort auf und blendet wieder ein (Nutzer
   2026-10-23 abends: "Beim Szenenwechsel blendet erst das alte Bild aus, dann baut sich das neue auf") */
.buehne3d,
.buehne-ort,
.buehne-zeichen {
  transition: opacity 0.3s ease;
}

.rundgang-buehne.ist-schnitt .buehne3d,
.rundgang-buehne.ist-schnitt .buehne-ort,
.rundgang-buehne.ist-schnitt .buehne-zeichen {
  opacity: 0;
}

/* Einblendung über der Szene, z. B. der Zeitsprung "Montag" */
.einblendung {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem 0.4rem 0.6rem;
  border: 1px solid var(--karte-rand);
  border-radius: 99px;
  background: var(--flaeche);
  box-shadow: 0 8px 22px rgba(27, 54, 97, 0.14);
  color: var(--titel);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -6px) scale(0.92);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.einblendung.ist-an {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.einblendung svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--p-robo, #3f86df);
}

/* Schatten und Spiegelung weich, unten ausgeblendet statt hart abgeschnitten */
.buehne3d-unten {
  z-index: 1;
  filter: blur(5px);
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 96%);
}

/* Details der Orte: blenden nach den Linien ein und bewegen sich leise weiter */
.ort-detail {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.ist-gezeichnet .ort-detail {
  opacity: 1;
  transition: opacity 0.8s ease 0.9s;
}

.buehne-ort .ort-licht {
  fill: url(#ort-licht-verlauf);
  opacity: 0;
}

.ist-gezeichnet .ort-licht {
  animation: licht-an 1.4s ease 1.2s forwards;
}

@keyframes licht-an {
  0% {
    opacity: 0;
  }

  18% {
    opacity: 0.7;
  }

  30% {
    opacity: 0.15;
  }

  48%,
  100% {
    opacity: 1;
  }
}

.buehne-ort .ort-blume {
  fill: #e59aa6;
}

.buehne-ort .ort-dampf {
  fill: none;
  stroke: var(--ort-linie);
  stroke-width: 1.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: dampf 2.8s ease-in-out infinite;
}

.buehne-ort .ort-dampf--2 {
  animation-delay: 1.3s;
}

@keyframes dampf {
  0% {
    opacity: 0;
    transform: translateY(0.02px);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-0.12px);
  }
}

.buehne-ort .ort-tafel {
  fill: #2b3440;
}

.buehne-ort .ort-kreide {
  fill: rgba(255, 255, 255, 0.88);
  font: 600 0.085px "Outfit", sans-serif;
}

.buehne-ort .ort-kreide-linie {
  stroke: rgba(255, 255, 255, 0.6);
}

.buehne-ort .ort-stunde,
.buehne-ort .ort-zeiger {
  fill: none;
  stroke: var(--titel);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.buehne-ort .ort-stunde {
  stroke-width: 2;
}

.buehne-ort .ort-zeiger {
  stroke-width: 1.4;
  transform-origin: 0 0;
  animation: zeiger 12s linear infinite;
}

@keyframes zeiger {
  to {
    transform: rotate(360deg);
  }
}

.buehne-ort .ort-sonne {
  fill: url(#ort-sonne-verlauf);
  opacity: 0;
}

.ist-gezeichnet .ort-sonne {
  animation: sonne 8s ease-in-out 1.2s infinite;
}

.buehne-ort .ort-sonne--2 {
  animation-delay: 2.4s;
}

@keyframes sonne {
  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 0.9;
  }
}

.buehne-ort .ort-schild {
  fill: var(--navy);
}

.buehne-ort .ort-schild-text {
  fill: #fff;
  font: 700 0.1px "Outfit", sans-serif;
}

/* Zwei Räume (Büro-Café): Rückwand und Boden je Raum getönt, Büro kühl, Café warm; dazwischen bleibt eine Lücke */
.rundgang-buehne {
  --raum-buero: #1b3661;
  --raum-cafe: #b8894f;
}

[data-bs-theme="dark"] .rundgang-buehne {
  --raum-buero: #8fa6c8;
  --raum-cafe: #d9b07a;
}

.buehne-ort .raum-buero {
  stop-color: var(--raum-buero);
}

.buehne-ort .raum-cafe {
  stop-color: var(--raum-cafe);
}

.buehne-ort .ort-raum {
  stroke: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.buehne-ort .ist-gezeichnet .ort-raum {
  opacity: 1;
  transition: opacity 0.9s ease 0.1s;
}

.buehne-ort .ort-raum-wand.ort-raum--buero {
  fill: url(#ort-wand-buero);
  fill-opacity: 0.07;
}

.buehne-ort .ort-raum-boden.ort-raum--buero {
  fill: url(#ort-boden-buero);
  fill-opacity: 0.11;
}

.buehne-ort .ort-raum-wand.ort-raum--cafe {
  fill: url(#ort-wand-cafe);
  fill-opacity: 0.12;
}

.buehne-ort .ort-raum-boden.ort-raum--cafe {
  fill: url(#ort-boden-cafe);
  fill-opacity: 0.18;
}

[data-bs-theme="dark"] .buehne-ort .ort-raum-wand {
  fill-opacity: 0.06;
}

[data-bs-theme="dark"] .buehne-ort .ort-raum-boden {
  fill-opacity: 0.09;
}

.buehne-ort .ort-raumname {
  fill: var(--k);
  font: 600 11px "Outfit", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.buehne-ort .ort-flach {
  transform: scaleY(0.16);
}

.buehne-ort .ort-puls {
  fill: none;
  stroke: #2a9d95;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transform-origin: 0 0;
  animation: ort-puls 2.4s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 0.6s);
}

@keyframes ort-puls {
  from {
    opacity: 0.9;
    transform: scale(0.15);
  }

  to {
    opacity: 0;
    transform: scale(1);
  }
}

.buehne-ort .ort-punkt {
  fill: #2a9d95;
}

.buehne-ort .ort-blitz {
  fill: #f0b400;
  animation: blitz 1.6s ease-in-out infinite;
}

@keyframes blitz {
  50% {
    opacity: 0.35;
  }
}

[data-bs-theme="dark"] .buehne-ort .ort-tafel {
  fill: #1c232d;
}

[data-bs-theme="dark"] .buehne-ort .ort-schild {
  fill: #2a4875;
}

[data-bs-theme="dark"] .ist-gezeichnet .ort-sonne {
  animation-name: sonne-dunkel;
}

@keyframes sonne-dunkel {
  0%,
  100% {
    opacity: 0.08;
  }

  50% {
    opacity: 0.2;
  }
}

.buehne3d-oben {
  z-index: 3;
}
/* Seit 2026-10-28 Platz des Notizfelds oben links in der Szene (Nutzer: "ich finde den markierten container sehr
   erdrückend … stattdessen sollte die szene etwas größer werden und für sich sprechen mit einem notizfeld"). Feste
   Höhe, damit die Szene nicht springt; js/rundgang3d.js misst den Maßstab ab seiner Unterkante. */
.ansicht-platz {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: grid;
  align-content: start;
  justify-items: start;
  width: min(100%, 38rem);
  height: 3.6rem;
}

.ansicht-platz > .rundgang-karte {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
}

/* nur die aktive Ansicht bestimmt die Höhe */
.ansicht-platz > .rundgang-karte:not(.ist-aktiv) {
  position: absolute;
  inset: 0 0 auto;
}

/* Notizfeld: Symbol des Moduls, ein Satz je Takt, Status wie in CIN Next. Flach wie die Karten der CIN-Seiten, leicht
   durchscheinend über den Linien des Orts. Erscheint mit Takt 1, Satz und Status wechseln weich (.folge). */
.notiz {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  border: 1px solid var(--karte-rand);
  border-radius: 14px;
  background: color-mix(in srgb, var(--flaeche) 86%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(27, 54, 97, 0.06);
  color: var(--titel);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.25;
}

/* vor dem ersten Eintrag verborgen (js/geschichten.js, notizStand) */
.ansicht-platz > .rundgang-karte.notiz.notiz--leer {
  opacity: 0;
  transform: translateY(-6px);
}

.notiz-was {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

/* Kunde, der in allen vier Stationen derselbe ist, klein wie die Augenbraue */
.notiz-kunde {
  color: var(--k);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* je Takt ist ein Satz und ein Status zu sehen (data-n statt data-t, darum ohne die Regeln von .folge unten) */
.notiz .folge > .ist-zu-sehen {
  opacity: 1;
  transform: none;
}

.crm-marke--grau {
  border-color: rgba(100, 116, 139, 0.22);
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
}

.crm-marke--rot {
  border-color: rgba(220, 38, 38, 0.2);
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

.crm-marke--lila {
  border-color: color-mix(in srgb, var(--pk-robo) 25%, transparent);
  background: color-mix(in srgb, var(--pk-robo) 10%, transparent);
  color: var(--pk-robo);
}

.notiz .modul-sq {
  width: 2.1rem;
  border-radius: 9px;
}

.notiz .modul-sq svg {
  width: 1.15rem;
}

/* Status rechtsbündig, damit das Feld bei kurzem Status nicht rechts leer wirkt */
.notiz-status.folge > span {
  justify-self: end;
}

/* Bausteine aus CIN Next für das Tablet in ERP (js/station-erp.js) und das Notizfeld: Knöpfe, Status-Marken, Dialog
   und Meldung, nachgebaut mit den Werten von Bootstrap 5.3 wie im CRM */
.crm svg {
  width: 1em;
  height: 1em;
  flex: none;
}

/* Knöpfe wie Bootstrap btn-sm: outline-primary (Vermieten), success (Bestätigen), outline-danger (Ablehnen),
   outline-success (Erledigt im Ticket), outline-secondary (Neu berechnen); WMS btn-primary px-4 in voller Größe */
.crm-knopf {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #0d6efd;
  border-radius: 0.25rem;
  color: #0d6efd;
  font-size: 0.875rem;
  line-height: 1.5;
  transition: transform 0.12s ease, filter 0.12s ease;
}

[data-bs-theme="dark"] .crm-knopf {
  border-color: #0d6efd;
  color: #6ea8fe;
}

.crm-knopf--primary,
[data-bs-theme="dark"] .crm-knopf--primary {
  border-color: #0d6efd;
  background: #0d6efd;
  color: #fff;
}

.crm-knopf.ist-gedrueckt {
  filter: brightness(0.88);
  transform: scale(0.96);
}

/* Ticket (communication.tpl, crm.css): detail-badge-bar mit Typ, Status (open blau, resolved grün, Label "Gelöst"
   nach "Erledigt") und Priorität, darunter die detail-action-bar und der Betreff */

.crm-marke {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35em 0.65em;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.crm-marke--ticket {
  border-color: rgba(168, 85, 247, 0.2);
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
}

[data-bs-theme="dark"] .crm-marke--ticket {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}

.crm-marke--blau {
  border-color: rgba(59, 130, 246, 0.2);
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.crm-marke--gelb {
  border-color: rgba(234, 179, 8, 0.2);
  background: rgba(234, 179, 8, 0.1);
  color: #eab308;
}

.crm-marke--gruen {
  border-color: rgba(34, 197, 94, 0.2);
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.crm-marke--hoch {
  background: rgba(249, 115, 22, 0.14);
  color: #ea580c;
}

[data-bs-theme="dark"] .crm-marke--hoch {
  color: #fdba74;
}

/* Dialog "Mietvertrag bereitstellen" (CRM.modal, erp-55-rental.js #openOffer) */
.crm-dialog-box {
  width: min(100%, 26rem);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--crm-rand);
  border-radius: 0.5rem;
  background: var(--flaeche);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  transform: translateY(-10px);
  transition: transform 0.35s var(--weich);
}

.ist-t2 .crm-dialog-box {
  transform: none;
}

.crm-dialog-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
  font-size: 1.05rem;
}

.crm-dialog-kopf b {
  font-weight: 500;
}

.crm-dialog-x {
  color: var(--crm-zweit);
  font-size: 1.2rem;
  line-height: 1;
}

.crm-dialog-text {
  margin: 0 0 0.45rem;
  font-size: 0.85rem;
}

.crm-dialog-label {
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.crm-unterschrift {
  height: 4.2rem;
  border: 1px solid var(--crm-rand);
  border-radius: 0.375rem;
  background: var(--crm-tertiaer);
}

.crm-unterschrift svg {
  display: block;
  width: 100%;
  height: 100%;
}

.crm-schrift {
  fill: none;
  stroke: #1b3661;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

[data-bs-theme="dark"] .crm-schrift {
  stroke: #dee2e6;
}

.ist-t3 .crm-schrift {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.45, 0, 0.3, 1);
}

.crm-dialog-fuss {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

/* Meldung wie ErpApi.ok im CRM, unten rechts in der Ansicht */
.crm-toast {
  position: absolute;
  right: 0.8rem;
  bottom: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(25, 135, 84, 0.35);
  border-radius: 0.375rem;
  background: #d1e7dd;
  color: #0a3622;
  font-size: 0.82rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.35s var(--weich);
}

[data-bs-theme="dark"] .crm-toast {
  border-color: #0f5132;
  background: #051b11;
  color: #75b798;
}

.ist-t4 .crm-toast {
  opacity: 1;
  transform: none;
}

/* Folge: vier Zustände an derselben Stelle, data-t 0 bis 3 gilt bis zum nächsten Takt (Stationen im WMS) */
.folge {
  display: inline-grid;
  vertical-align: baseline;
}

.folge > span {
  grid-area: 1 / 1;
  justify-self: start;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.3s ease, transform 0.4s var(--weich);
}

/* Schmale Handys: Dialog ohne Text */
@media (max-width: 479.98px) {
  .crm-dialog-text {
    display: none;
  }
}

/* Die Notizfelder liegen übereinander, sichtbar ist das aktive */
.rundgang-karte {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(16px);
  transition: opacity 0.45s ease, transform 0.5s var(--weich), visibility 0s linear 0.5s;
}

.rundgang-karte.ist-aktiv {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.45s ease 0.1s, transform 0.5s var(--weich) 0.1s;
}

/* Zeichen über den Robotern; js/rundgang3d.js setzt translate je Bild */
.buehne-zeichen {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.blase,
.zeichen {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  scale: 0.6;
  transition: opacity 0.25s ease, scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.blase.ist-an,
.zeichen.ist-an {
  opacity: 1;
  scale: 1;
}

.zeichen {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 6px 16px rgba(20, 35, 50, 0.22);
  transform: translate(-50%, -100%);
}

.zeichen svg {
  width: 16px;
  height: 16px;
}

.zeichen--warnung {
  background: #f08c00;
}

.zeichen--warnung::before {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid #f08c00;
  border-radius: 50%;
  animation: zeichen-puls 1.2s ease-out infinite;
}

.zeichen--haken {
  background: #198754;
}

.zeichen--laden {
  background: #1067b5;
}

@keyframes zeichen-puls {
  to {
    opacity: 0;
    transform: scale(1.9);
  }
}

/* Zahlen springen um: kurz von oben herein, in der Farbe des Moduls */
.ist-neu {
  display: inline-block;
  animation: zahl-neu 0.6s var(--weich);
}

@keyframes zahl-neu {
  0% {
    opacity: 0;
    transform: translateY(-55%);
    color: var(--c);
  }

  60% {
    color: var(--c);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rundgang-punkt,
  .rundgang-karte,
  .rundgang-karte *,
  .buehne-ort *,
  .blase,
  .zeichen {
    transition: none !important;
    animation: none !important;
  }

  .rundgang-punkt.ist-aktiv .rundgang-balken {
    animation: none;
    transform: scaleX(1);
  }

  .buehne-ort .ort-linie {
    stroke-dashoffset: 0;
  }

  .buehne-ort .ort-detail,
  .buehne-ort .ort-licht {
    opacity: 1;
  }

  .buehne-ort .ort-sonne {
    opacity: 0.5;
  }
}

/* Handy: eine Spalte */
@media (max-width: 767.98px) {
  .rundgang-buehne {
    height: auto;
    aspect-ratio: 358 / 325;
    margin-bottom: 1.2rem;
  }

  .ansicht-platz {
    width: 100%;
    height: 4.6rem;
  }

  /* Satz oben, Status darunter */
  .notiz {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 0.3rem;
    column-gap: 0.6rem;
    font-size: 0.88rem;
  }

  .notiz .modul-sq {
    grid-row: 1 / 3;
  }

  .buehne-boden {
    left: -4%;
    height: 40%;
  }

  .buehne-ort,
  .buehne3d {
    top: -4%;
    right: -6vw;
    bottom: -8%;
    left: -6vw;
    width: calc(100% + 12vw);
    height: 112%;    clip-path: inset(3.57% 0 0 0);
  }

  .rundgang-punkt.ist-aktiv {
    transform: none;
  }
}

/* 768 bis 959 px: neben dem Text wäre die Bühne zu schmal, darum alles untereinander wie auf dem Handy, die Szene
   in voller Breite. 960 bis 1199 px: schmalere Textspalte, die Szene bleibt links. */
@media (min-width: 768px) and (max-width: 959.98px) {
  .hero-banner {
    gap: 2.2rem;
  }

  .hero-kopf,
  .rundgang-reiter,
  .hero-knoepfe {
    max-width: 46rem;
  }

  .rundgang-buehne {
    height: clamp(24rem, 60vw, 32rem);
  }
}

@media (min-width: 960px) and (max-width: 1199.98px) {
  .hero-banner {
    --luecke: 2rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  }
}

/* Szene links neben dem Text (ab 960 px, gewählt 2026-10-27 "Rechter Szenenrand, weich"): Linien und Leinwände reichen
   links bis an den Fensterrand und rechts bis an den Text, dort laufen sie über die Lücke weich aus. Die Roboter
   tauchen aus diesem Rand auf (aussen() in js/rundgang3d.js nimmt den rechten Rand der Leinwand), der Text bleibt frei. */
@media (min-width: 960px) {
  .buehne-ort,
  .buehne3d {
    right: calc(-1 * var(--luecke));
    left: calc(-1 * var(--hero-rand));
    width: calc(100% + var(--hero-rand) + var(--luecke));
    -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--luecke));
    mask-image: linear-gradient(to left, transparent, #000 var(--luecke));
  }

  .buehne3d-unten {
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 96%), linear-gradient(to left, transparent, #000 var(--luecke));
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, #000 78%, transparent 96%), linear-gradient(to left, transparent, #000 var(--luecke));
    mask-composite: intersect;
  }
}