/* ==========================================================================
   erlebnis.css — der Erlebnisteil der Startseite.

   Seit dem 22.09.2026 ist das keine eigene Seite mehr: Der Bereich
   "Was könnte deine Website?" steht auf der Startseite selbst, gleich hinter
   der Vorstellung. Diese Datei gilt deshalb NUR innerhalb von .erlebnis --
   jede Regel ist darauf eingeschränkt, und die Farb- und Zeitwerte stehen auf
   .erlebnis statt auf :root. So kann app.css nichts von hier erben und
   umgekehrt: zwei Stilblätter auf einer Seite, die sich nicht in die Quere
   kommen.

   DESIGN-DNA
   Haltung:   ruhig, präzise, beweisend
   Prinzip:   Architekturfotografie im Magazin -- ein grosses Bild, wenig
              Text, darunter die Aufnahmedaten wie eine Bildunterschrift
   Farbe:     dieselbe Palette wie app.css (Grund #05070d, Akzent Blau->Cyan);
              der Akzent nur für die eine Handlung und den aktiven Zustand
   Bewegung:  träge einschwingend, keine Federn; Blenden 600 ms
   Nicht:     kein Spiele-Menü, keine Glaskarten überall, kein Effekt ohne
              Aussage
   ========================================================================== */

.erlebnis{
  --c-base:#05070d; --c-surface:#0c1119; --c-surface-2:#111826; --c-linie:#1b2330; --c-linie-hell:#2a3649;
  --c-text:#e9eef8; --c-dim:#a3b0c8; --c-faint:#8593ad;
  --c-blue:#0a78f5; --c-cyan:#1fe8ff; --c-warm:#ffd9a8;
  --f-display:'Archivo',system-ui,sans-serif;
  --f-text:'Inter',system-ui,sans-serif;
  --radius:14px;
  --e-standard:cubic-bezier(.16,1,.3,1);
  --t-ui:180ms; --t-move:240ms; --t-blende:600ms;
}
.erlebnis *{box-sizing:border-box}


.erlebnis img{max-width:100%; display:block}
.erlebnis button{font:inherit; color:inherit}
.erlebnis :focus-visible{outline:2px solid var(--c-cyan); outline-offset:3px; border-radius:6px}

/* ---- Rueckweg und Sprachwahl: wie tavolo.html und der Showroom ---- */


/* ACHTUNG: Das Suchmuster fuer die Sprachwahl steht in build.mjs, nicht hier
   -- ein Beispiel in einem Kommentar dieser Art hat am 16.09.2026 in
   tavolo.html den halben Kopf weggeschnitten. In einer eigenen .css-Datei
   liest der Build nicht, aber die Regel gilt trotzdem. */






/* ---- Kopf ---- */
/* ---- Erster Bildschirm: Titel links, Buehne rechts ----
   Ab 1100 px stehen Titel und Buehne nebeneinander. So fluchten beide mit
   den Abschnitten darunter (gleiche linke und rechte Kante), und die Buehne
   bekommt die volle Hoehe des ersten Bildschirms, statt unter einem
   hohen Kopf zu verschwinden. Darunter: Titel oben, Buehne randlos. */




.erlebnis .kicker{
  margin:0 0 1rem; font:600 .78rem/1.2 var(--f-text);
  letter-spacing:.17em; text-transform:uppercase; color:var(--c-cyan);
}




/* Nur die Zwischenüberschriften im Block. Der Abschnittskopf oben gehört der
   Startseite (.sechead) und behält deren Größe -- sonst stünde hier eine
   zweite Tonart. */
.erlebnis .abschnitt h2{font-size:clamp(1.55rem,3vw,2.3rem); line-height:1.1; letter-spacing:-.02em; margin-bottom:.8rem}
.erlebnis h3{font-size:1.14rem; line-height:1.25; letter-spacing:-.01em}
.erlebnis .lead{margin:0; max-width:44rem; font-size:clamp(1.02rem,1.3vw,1.16rem); color:var(--c-dim)}

/* ---- Die Buehne ----
   16:9, weil die gerechneten Bilder 16:9 sind und das Echtzeitmodell mit
   derselben Brennweite genau darueber liegen muss. Auf schmalen Geraeten
   wird die Buehne hoeher und beschneidet links und rechts (object-fit:cover)
   -- das Echtzeitmodell rechnet diesen Beschnitt in villa-echtzeit.js nach,
   sonst liefe das Haus beim Ueberblenden auseinander. */
.erlebnis .villa{min-width:0}
.erlebnis .buehne{
  position:relative; margin:0 auto; overflow:hidden; isolation:isolate;
  width:100%; aspect-ratio:16/9;
  border-radius:var(--radius); background:#0a0e16;
  border:1px solid var(--c-linie);
  touch-action:pan-y;
}
/* Auf breiten Schirmen begrenzt die Hoehe die Buehne: oben Luft fuer den
   Ruecklink, unten die Regler. Sie rueckt dann nach rechts an die Kante
   der Abschnitte darunter. */
@media (min-width:1100px){
  .erlebnis .buehne{width:min(100%, calc((100svh - 14.5rem) * 16 / 9)); margin-right:0}
}
@media (max-width:700px){
  .erlebnis .villa{margin:0 calc(-1 * var(--page-x))}
  .erlebnis .buehne{aspect-ratio:4/3; border-radius:0; border-left:0; border-right:0}
}
.erlebnis .buehne picture{display:contents}
.erlebnis .ruhe{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity var(--t-blende) var(--e-standard);
  z-index:1;
}
.erlebnis .ruhe.ist-an{opacity:1}
.erlebnis .ruhe.ist-oben{z-index:2}
.erlebnis .echtzeit{position:absolute; inset:0; z-index:3; opacity:0; transition:opacity var(--t-blende) var(--e-standard); cursor:grab}
.erlebnis .echtzeit canvas{display:block; width:100%; height:100%; outline:none}
/* Die Leinwand kann unsichtbar unter dem Foto liegen und trotzdem den Fokus
   haben -- dann zeigt die ganze Buehne, wo die Tastatur gerade ist. */
.erlebnis .buehne:has(canvas:focus-visible){outline:2px solid var(--c-cyan); outline-offset:3px}
.erlebnis .buehne.ist-echtzeit .echtzeit{opacity:1}
.erlebnis .buehne.ist-ziehen .echtzeit{cursor:grabbing}
/* Waehrend das Foto oben liegt, faengt die Leinwand trotzdem den Finger --
   wer auf das Foto greift, bekommt sofort das Modell unter der Hand. */
.erlebnis .buehne.hat-echtzeit .echtzeit{pointer-events:auto}
.erlebnis .buehne:not(.hat-echtzeit) .echtzeit{pointer-events:none}

.erlebnis .kennung{
  position:absolute; left:clamp(.6rem,1.6vw,1.1rem); bottom:clamp(.6rem,1.6vw,1.1rem); z-index:5;
  display:inline-flex; align-items:center; gap:.55rem; max-width:calc(100% - 15rem);
  padding:.5rem .8rem; border-radius:999px;
  background:rgba(5,7,13,.74); backdrop-filter:blur(8px);
  font:500 .82rem/1.25 var(--f-text); color:var(--c-text);
  border:1px solid rgba(255,255,255,.08);
}
.erlebnis .kennung__punkt{width:8px; height:8px; border-radius:50%; flex:none; background:var(--c-warm); box-shadow:0 0 0 3px rgba(255,217,168,.18)}
.erlebnis .buehne.ist-echtzeit .kennung__punkt{background:var(--c-cyan); box-shadow:0 0 0 3px rgba(31,232,255,.18)}
.erlebnis .bewegen{
  position:absolute; right:clamp(.6rem,1.6vw,1.1rem); bottom:clamp(.6rem,1.6vw,1.1rem); z-index:5;
  display:inline-flex; align-items:center; gap:.55rem; min-height:44px;
  padding:.6rem 1.05rem; border-radius:999px; cursor:pointer;
  background:rgba(5,7,13,.74); backdrop-filter:blur(8px);
  border:1px solid rgba(31,232,255,.45);
  font:600 .88rem/1 var(--f-text); color:var(--c-text);
  transition:border-color var(--t-ui), background var(--t-ui);
}
.erlebnis .bewegen:hover{border-color:var(--c-cyan); background:rgba(10,20,34,.86)}
.erlebnis .bewegen__zeichen{
  width:16px; height:16px; border-radius:50%;
  border:2px solid var(--c-cyan); border-right-color:transparent; position:relative;
}
.erlebnis .bewegen__zeichen::after{
  content:''; position:absolute; right:-4px; top:-1px;
  border:4px solid transparent; border-left-color:var(--c-cyan); transform:rotate(-30deg);
}
.erlebnis .bewegen[aria-busy="true"] .bewegen__zeichen{animation:drehen 1s linear infinite}
/* Ladegroesse neben „Selbst drehen": Wer im Mobilnetz ist, soll vorher
   wissen, was der Klick kostet. Nach dem Laden hat die Zahl keinen Sinn
   mehr -- dann heisst der Knopf „Zum Foto" und sie verschwindet. */
.erlebnis .bewegen__groesse{
  font-weight:500; color:var(--c-dim); font-variant-numeric:tabular-nums;
  padding-left:.55rem; border-left:1px solid rgba(255,255,255,.2);
}
.erlebnis .bewegen[aria-busy="true"] .bewegen__groesse,
.erlebnis .buehne.hat-echtzeit .bewegen__groesse{display:none}
@keyframes drehen{to{transform:rotate(360deg)}}
@media (max-width:520px){
  .erlebnis .kennung{font-size:.74rem; max-width:calc(100% - 1.2rem); bottom:auto; top:.6rem}
}

.erlebnis .regler{
  width:100%; margin:clamp(.9rem,2vh,1.3rem) auto 0;
  display:flex; flex-wrap:wrap; gap:.9rem 2rem; justify-content:space-between;
}
@media (max-width:700px){ .erlebnis .regler{padding:0 var(--page-x)} }
@media (min-width:1100px){ .erlebnis .regler{width:min(100%, calc((100svh - 14.5rem) * 16 / 9)); margin-right:0} }
.erlebnis .gruppe{display:flex; flex-direction:column; gap:.5rem; min-width:0; max-width:100%}
.erlebnis .gruppe__name{font:600 .74rem/1 var(--f-text); letter-spacing:.14em; text-transform:uppercase; color:var(--c-faint)}
.erlebnis .chips{display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none; padding:2px; margin:-2px}
.erlebnis .chips::-webkit-scrollbar{display:none}
.erlebnis .chips--umbruch{flex-wrap:wrap; overflow:visible}
.erlebnis .chips button{
  flex:none; min-height:44px; padding:.55rem .95rem; border-radius:999px; cursor:pointer;
  background:var(--c-surface); border:1px solid var(--c-linie); color:var(--c-dim);
  font:500 .9rem/1 var(--f-text); white-space:nowrap;
  transition:color var(--t-ui), border-color var(--t-ui), background var(--t-ui);
}
.erlebnis .chips button:hover{color:var(--c-text); border-color:var(--c-linie-hell)}
.erlebnis .chips button[aria-pressed="true"]{background:var(--c-text); color:#05070d; border-color:var(--c-text)}
.erlebnis .schritte{width:min(100%, var(--buehne-b)); margin:.9rem auto 0; display:flex; flex-direction:column; gap:.5rem}
.erlebnis .schritte .chips button{padding:.5rem .8rem}
.erlebnis .schritte .chips button b{font-family:var(--f-display); margin-right:.35rem; color:var(--c-cyan)}
.erlebnis .schritte .chips button[aria-pressed="true"] b{color:#05070d}
@media (min-width:1100px){ .erlebnis .schritte{width:min(100%, calc((100svh - 14.5rem) * 16 / 9)); margin-right:0} }
@media (max-width:700px){ .erlebnis .schritte{padding:0 var(--page-x)} }

.erlebnis .hilfe{width:min(100%, var(--buehne-b)); margin:.9rem auto 0; font-size:.92rem; color:var(--c-cyan)}
@media (min-width:1100px){ .erlebnis .hilfe{width:min(100%, calc((100svh - 14.5rem) * 16 / 9)); margin-right:0} }
@media (max-width:700px){ .erlebnis .hilfe{padding:0 var(--page-x)} }

.erlebnis .hinweis{margin:1.3rem 0 0; font-size:.9rem; line-height:1.55; color:var(--c-faint); max-width:40rem}
.erlebnis .hinweis b{color:var(--c-dim); font-weight:600}




/* ---- Abschnitte ---- */
.erlebnis .abschnitt{padding:clamp(3rem,7vh,5rem) 0 0}
.erlebnis .abschnitt__kopf{max-width:50rem; margin-bottom:clamp(1.6rem,4vh,2.6rem)}

/* ---- Wegweiser ---- */
.erlebnis .hub__raster{display:grid; gap:clamp(1.2rem,2.5vw,2.2rem); grid-template-columns:1fr; align-items:start}
@media (min-width:1040px){ .erlebnis .hub__raster{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)} }
.erlebnis .feld{border:0; margin:0 0 1.6rem; padding:0; min-width:0}
.erlebnis .feld legend{padding:0; margin-bottom:.7rem; font:600 .74rem/1 var(--f-text); letter-spacing:.14em; text-transform:uppercase; color:var(--c-faint)}
.erlebnis .ziele{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr)); gap:.55rem}
.erlebnis .ziel{
  text-align:left; cursor:pointer; min-height:44px;
  padding:.9rem 1rem; border-radius:12px;
  background:var(--c-surface); border:1px solid var(--c-linie);
  transition:border-color var(--t-ui), background var(--t-ui);
}
.erlebnis .ziel b{display:block; font:600 1rem/1.25 var(--f-text); color:var(--c-text)}
.erlebnis .ziel span{display:block; margin-top:.25rem; font-size:.86rem; line-height:1.35; color:var(--c-faint)}
.erlebnis .ziel:hover{border-color:var(--c-linie-hell)}
.erlebnis .ziel[aria-pressed="true"]{border-color:var(--c-cyan); background:linear-gradient(180deg,rgba(31,232,255,.07),rgba(10,120,245,.04))}

.erlebnis .ergebnis{
  position:relative; border-radius:var(--radius); padding:clamp(1.3rem,2.6vw,2rem);
  background:var(--c-surface); border:1px solid var(--c-linie); min-height:18rem;
}
@media (min-width:1040px){ .erlebnis .ergebnis{position:sticky; top:5.5rem} }
.erlebnis .ergebnis__branche{margin:0 0 .6rem; font:600 .74rem/1.2 var(--f-text); letter-spacing:.14em; text-transform:uppercase; color:var(--c-cyan)}
.erlebnis .ergebnis h3{font-size:clamp(1.3rem,2.2vw,1.65rem); line-height:1.15; margin-bottom:1.1rem}
.erlebnis .ergebnis h4{margin:1.2rem 0 .5rem; font:600 .8rem/1.2 var(--f-text); letter-spacing:.08em; text-transform:uppercase; color:var(--c-faint)}
.erlebnis .ergebnis ul{margin:0; padding:0; list-style:none; display:grid; gap:.45rem}
.erlebnis .ergebnis li{position:relative; padding-left:1.5rem; color:var(--c-text); font-size:.98rem; line-height:1.45}
.erlebnis .ergebnis .kann li::before{content:''; position:absolute; left:.15rem; top:.5em; width:.55rem; height:.3rem; border-left:2px solid var(--c-cyan); border-bottom:2px solid var(--c-cyan); transform:rotate(-45deg)}
.erlebnis .ergebnis .nicht li{color:var(--c-dim)}
.erlebnis .ergebnis .nicht li::before{content:''; position:absolute; left:.2rem; top:.72em; width:.6rem; height:2px; background:var(--c-faint)}
.erlebnis .ergebnis__stufe{display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid var(--c-linie); font-size:.92rem; color:var(--c-dim)}
.erlebnis .ergebnis__stufe b{font-family:var(--f-display); font-size:1.5rem; color:var(--c-text); line-height:1}
.erlebnis .ergebnis__ohne{margin:1.1rem 0 0; font-size:.94rem; color:var(--c-dim)}
.erlebnis .ergebnis .knoepfe{justify-content:flex-start; margin-top:1.4rem}
.erlebnis .ergebnis.ist-neu{animation:auftauchen var(--t-move) var(--e-standard)}
@keyframes auftauchen{from{opacity:.35; transform:translateY(6px)}to{opacity:1; transform:none}}

/* ---- Knoepfe ---- */
.erlebnis .knoepfe{display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap}
.erlebnis .knopf{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding:.85rem 1.5rem; border-radius:999px; text-decoration:none; cursor:pointer;
  font:600 .95rem/1 var(--f-text); letter-spacing:.005em; border:0;
  transition:filter var(--t-ui), border-color var(--t-ui), background var(--t-ui);
}
.erlebnis .knopf--voll{background:linear-gradient(96deg,var(--c-blue),var(--c-cyan)); color:#04070d}
.erlebnis .knopf--voll:hover{filter:brightness(1.08)}
.erlebnis .knopf--leer{border:1px solid var(--c-linie-hell); color:var(--c-text); background:transparent}
.erlebnis .knopf--leer:hover{border-color:var(--c-dim)}

/* ---- Tisch ---- */
/* ---- Branchen-Demos: Automotive und Shop ----
   Dieselbe Bühne wie die Villa (.buehne, .ruhe, .echtzeit, .kennung,
   .bewegen), aber in einem Raster mit der Bedienung daneben: Wer den Lack
   wechselt, soll das Auto dabei sehen, nicht darunter scrollen müssen. */
.erlebnis .bd-reiter{display:flex; flex-wrap:wrap; gap:.2rem .4rem; margin:0 0 clamp(1rem,2.4vh,1.6rem); border-bottom:1px solid var(--c-linie)}
.erlebnis .bd-reiter [role="tab"], .erlebnis .bd-reiter__weiter{
  display:inline-flex; align-items:baseline; gap:.55rem; min-height:44px;
  padding:.75rem 1.05rem .8rem; margin-bottom:-1px; cursor:pointer;
  background:none; border:0; border-bottom:2px solid transparent; border-radius:0;
  color:var(--c-dim); font:600 1.02rem/1 var(--f-display); text-decoration:none;
  transition:color var(--t-ui), border-color var(--t-ui);
}
.erlebnis .bd-reiter [role="tab"]:hover{color:var(--c-text)}
.erlebnis .bd-reiter [aria-selected="true"]{color:var(--c-text); border-bottom-color:var(--c-cyan)}
.erlebnis .bd-reiter__nr{font:600 .7rem/1 var(--f-text); letter-spacing:.14em; color:var(--c-faint)}
.erlebnis .bd-reiter [aria-selected="true"] .bd-reiter__nr{color:var(--c-cyan)}
.erlebnis .bd-reiter__weiter{margin-left:auto; font-weight:500; color:var(--c-faint)}
.erlebnis .bd-reiter__weiter:hover{color:var(--c-text)}
@media (max-width:620px){ .erlebnis .bd-reiter__weiter{margin-left:0} }

.erlebnis .bd-raster{display:grid; gap:clamp(1.2rem,2.5vw,2.6rem); grid-template-columns:1fr; align-items:start}
@media (min-width:1040px){
  .erlebnis .bd-raster{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
  /* Die Bedienung rechts ist höher als die Bühne. Die Bühne bleibt stehen,
     während man sie durchgeht -- wer die Größe wählt, sieht den Schuh. */
  .erlebnis .bd-links{position:sticky; top:clamp(4.5rem,11vh,6.5rem)}
}
.erlebnis .bd-links{min-width:0}
.erlebnis .buehne.buehne--produkt{width:100%; margin:0; aspect-ratio:16/9}
@media (max-width:700px){
  .erlebnis .bd-links{margin:0 calc(-1 * var(--page-x))}
  .erlebnis .buehne.buehne--produkt{aspect-ratio:4/3; border-radius:0; border-left:0; border-right:0}
  .erlebnis .bd-griff{padding:0 var(--page-x)}
}
.erlebnis .bd-griff{margin:.7rem 0 0; font-size:.86rem; color:var(--c-faint)}

.erlebnis .bd-rechts{display:flex; flex-direction:column; gap:1.15rem; min-width:0}
.erlebnis .bd-rechts h3{margin:0; font-family:var(--f-display); font-size:clamp(1.3rem,2vw,1.6rem); letter-spacing:-.015em}
.erlebnis .bd-text{margin:0; color:var(--c-dim); font-size:1rem; line-height:1.6; max-width:34rem}
.erlebnis .bd-rechts .fakten{margin:.2rem 0 .2rem}
.erlebnis .bd-rechts .knopf{align-self:flex-start}
.erlebnis .chips button .farbpunkt{
  width:14px; height:14px; margin-right:.5rem; border-radius:50%; flex:none; display:inline-block;
  background:var(--f); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.erlebnis .chips button:has(.farbpunkt){display:inline-flex; align-items:center}
.erlebnis .chips button[aria-pressed="true"] .farbpunkt{box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.erlebnis .bd-groessen button{min-width:48px; padding:.55rem .55rem; text-align:center}
.erlebnis .bd-hinweis{margin:0; color:var(--c-faint); font-size:.9rem}

.erlebnis .bd-muster{margin:0; font:600 .72rem/1.2 var(--f-text); letter-spacing:.14em; text-transform:uppercase; color:var(--c-warm)}
.erlebnis .bd-produkt{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap}
.erlebnis .bd-preis{font:600 1.15rem/1 var(--f-text); letter-spacing:0; color:var(--c-text); white-space:nowrap}
.erlebnis .bd-kauf{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem}
.erlebnis .bd-meldung{margin:0; color:var(--c-warm); font-size:.92rem}
.erlebnis .bd-meldung:empty{display:none}
.erlebnis .bd-korb{border:1px solid var(--c-linie); border-radius:12px; padding:.85rem 1rem; background:var(--c-surface)}
.erlebnis .bd-korb.ist-neu{animation:bd-korb-neu .9s var(--e-standard)}
@keyframes bd-korb-neu{from{border-color:var(--c-cyan); box-shadow:0 0 0 3px rgba(31,232,255,.18)} to{border-color:var(--c-linie); box-shadow:none}}
.erlebnis .bd-korb__kopf{margin:0 0 .5rem; display:flex; justify-content:space-between; gap:.4rem 1rem; flex-wrap:wrap; font:600 .92rem/1.3 var(--f-text); color:var(--c-text)}
.erlebnis .bd-korb__demo{font-weight:400; font-size:.82rem; color:var(--c-faint)}
.erlebnis .bd-korb__liste{list-style:none; margin:0; padding:0; display:grid; gap:.35rem; font-size:.92rem; color:var(--c-text)}
.erlebnis .bd-korb__liste .leer{color:var(--c-faint)}
/* Etiketten im zerlegten Zustand: Punkt am Teil, dünne Linie nach außen,
   Name am Ende. Groß und kontrastreich genug, um sie beim Drehen zu lesen. */
.erlebnis .bd-etiketten{position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden}
.erlebnis .bd-linien{position:absolute; inset:0; width:100%; height:100%}
.erlebnis .bd-linien line{stroke:rgba(31,232,255,.75); stroke-width:1}
.erlebnis .bd-linien circle{fill:var(--c-cyan); stroke:rgba(31,232,255,.3); stroke-width:4}
.erlebnis .bd-etikett{
  position:absolute; left:0; top:0; will-change:transform; white-space:nowrap;
  padding:.32rem .65rem; border-radius:999px;
  background:rgba(5,7,13,.86); border:1px solid rgba(31,232,255,.45);
  font:600 .84rem/1.1 var(--f-text); color:var(--c-text); letter-spacing:.01em;
}
@media (max-width:620px){ .erlebnis .bd-etikett{font-size:.74rem; padding:.24rem .5rem} }

.erlebnis .bd-nachweis{margin:clamp(1.4rem,3vh,2rem) 0 0; max-width:54rem; font-size:.8rem; line-height:1.55; color:var(--c-faint)}
@media (prefers-reduced-motion:reduce){ .erlebnis .bd-korb.ist-neu{animation:none} }

.erlebnis .tisch{display:grid; gap:clamp(1.5rem,3vw,3rem); grid-template-columns:1fr; align-items:center}
@media (min-width:1000px){ .erlebnis .tisch{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)} }
.erlebnis .tisch__text .lead{margin-bottom:1.4rem}
.erlebnis .fakten{display:flex; flex-wrap:wrap; gap:1.4rem 2.2rem; margin:0 0 1.6rem}
.erlebnis .fakten div{display:flex; flex-direction:column}
.erlebnis .fakten dt{font:700 1.7rem/1 var(--f-display); letter-spacing:-.02em; color:var(--c-text)}
.erlebnis .fakten dd{margin:.35rem 0 0; font-size:.86rem; color:var(--c-faint)}
.erlebnis .dreh{
  position:relative; border-radius:var(--radius); overflow:hidden; cursor:grab;
  background:#e9e6e1; aspect-ratio:16/10; border:1px solid var(--c-linie);
  touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
.erlebnis .dreh:active{cursor:grabbing}
.erlebnis .dreh img{width:100%; height:100%; object-fit:cover; pointer-events:none}
.erlebnis .dreh__hinweis{
  position:absolute; left:50%; bottom:.9rem; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .85rem; border-radius:999px;
  background:rgba(5,7,13,.78); color:var(--c-text); font:500 .84rem/1 var(--f-text);
  transition:opacity var(--t-move);
}
.erlebnis .dreh__hinweis i{width:22px; height:2px; background:var(--c-cyan); position:relative}
.erlebnis .dreh__hinweis i::before, .erlebnis .dreh__hinweis i::after{content:''; position:absolute; top:-3px; border:4px solid transparent}
.erlebnis .dreh__hinweis i::before{left:-6px; border-right-color:var(--c-cyan)}
.erlebnis .dreh__hinweis i::after{right:-6px; border-left-color:var(--c-cyan)}
.erlebnis .dreh.ist-benutzt .dreh__hinweis{opacity:0}

/* ---- Stufen ---- */
.erlebnis .stufenwahl{display:grid; gap:.55rem; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){ .erlebnis .stufenwahl{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1280px){ .erlebnis .stufenwahl{grid-template-columns:repeat(6,minmax(0,1fr))} }
.erlebnis .stufenwahl button{
  text-align:left; cursor:pointer; padding:1rem 1.05rem; border-radius:12px; min-height:44px;
  background:var(--c-surface); border:1px solid var(--c-linie);
  transition:border-color var(--t-ui), background var(--t-ui);
}
.erlebnis .stufenwahl b{display:block; font:700 .95rem/1 var(--f-display); letter-spacing:.06em; color:var(--c-text)}
.erlebnis .stufenwahl span{display:block; margin-top:.45rem; font-size:.86rem; line-height:1.4; color:var(--c-faint)}
.erlebnis .stufenwahl button:hover{border-color:var(--c-linie-hell)}
.erlebnis .stufenwahl button[aria-pressed="true"]{border-color:var(--c-cyan); background:linear-gradient(180deg,rgba(31,232,255,.07),rgba(10,120,245,.04))}
.erlebnis .stufenwahl button.ist-auto::after{content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--c-cyan); margin-left:.4rem; vertical-align:middle}
.erlebnis .ablesung{margin-top:1.4rem; padding:1.1rem 1.2rem; border-radius:12px; border:1px dashed var(--c-linie-hell)}
.erlebnis .ablesung__satz{margin:0 0 .8rem; color:var(--c-text)}
.erlebnis .ablesung__werte{display:grid; grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr)); gap:.8rem 1.4rem; margin:0}
.erlebnis .ablesung__werte dt{font-size:.8rem; color:var(--c-faint)}
.erlebnis .ablesung__werte dd{margin:.15rem 0 0; font:600 1.15rem/1.2 var(--f-display); font-variant-numeric:tabular-nums}

/* ---- Technik ---- */
.erlebnis .werkzeuge{display:grid; gap:.8rem; grid-template-columns:1fr}
@media (min-width:700px){ .erlebnis .werkzeuge{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1080px){ .erlebnis .werkzeuge{grid-template-columns:repeat(3,minmax(0,1fr))} }
.erlebnis .werkzeug{padding:1.3rem 1.3rem 1.1rem; border-radius:12px; background:var(--c-surface); border:1px solid var(--c-linie)}
.erlebnis .werkzeug h3{margin-bottom:.45rem}
.erlebnis .werkzeug > p{margin:0; color:var(--c-dim); font-size:.97rem}
.erlebnis .werkzeug details{margin-top:.8rem}
.erlebnis .werkzeug summary{cursor:pointer; color:var(--c-cyan); font-weight:600; font-size:.9rem; list-style:none; min-height:32px; display:inline-flex; align-items:center; gap:.4rem}
.erlebnis .werkzeug summary::-webkit-details-marker{display:none}
.erlebnis .werkzeug summary::before{content:'+'; font-weight:700; width:1em; text-align:center}
.erlebnis .werkzeug details[open] summary::before{content:'–'}
.erlebnis .werkzeug details p{margin:.4rem 0 0; font-size:.9rem; color:var(--c-faint)}

/* ---- Vorher / Nachher ---- */
.erlebnis .paare{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,32rem),1fr))}
.erlebnis .paar{display:grid; grid-template-columns:1fr 1fr; border-radius:12px; overflow:hidden; border:1px solid var(--c-linie)}
@media (max-width:520px){ .erlebnis .paar{grid-template-columns:1fr} }
.erlebnis .paar__seite{padding:1.15rem 1.15rem 1.2rem; background:var(--c-surface)}
.erlebnis .paar__seite--exp{background:var(--c-surface-2); border-left:1px solid var(--c-linie)}
@media (max-width:520px){ .erlebnis .paar__seite--exp{border-left:0; border-top:1px solid var(--c-linie)} }
.erlebnis .paar__art{display:block; margin-bottom:.5rem; font:600 .7rem/1 var(--f-text); letter-spacing:.14em; text-transform:uppercase; color:var(--c-faint)}
.erlebnis .paar__seite--exp .paar__art{color:var(--c-cyan)}
.erlebnis .paar h3{font-size:1.02rem; margin-bottom:.35rem}
.erlebnis .paar p{margin:0; font-size:.9rem; color:var(--c-dim); line-height:1.5}

/* ---- Streaming ---- */
.erlebnis .kette{list-style:none; margin:0; padding:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); counter-reset:k}
.erlebnis .kette__glied{position:relative; padding:1.2rem; border-radius:12px; background:var(--c-surface); border:1px solid var(--c-linie)}
.erlebnis .kette__glied svg{width:52px; height:52px; margin-bottom:.7rem; fill:none; stroke:var(--c-dim); stroke-width:2; stroke-linecap:round}
.erlebnis .kette__glied svg .an{fill:var(--c-cyan); stroke:none}
.erlebnis .kette__glied h3{margin-bottom:.3rem}
.erlebnis .kette__glied p{margin:0; font-size:.92rem; color:var(--c-dim)}
@media (min-width:900px){
  .erlebnis .kette__glied:not(:last-child)::after{
    content:''; position:absolute; top:50%; right:-1rem; width:1rem; height:2px;
    background:repeating-linear-gradient(90deg,var(--c-cyan) 0 4px,transparent 4px 8px);
    animation:fluss 1.2s linear infinite;
  }
}
@keyframes fluss{to{background-position:8px 0}}
.erlebnis .ehrlich{margin:1.2rem 0 0; max-width:50rem; font-size:.94rem; color:var(--c-faint)}

/* ---- Schluss ---- */
.erlebnis .schluss{padding:clamp(3rem,7vh,4.5rem) 0 0; text-align:center; margin-top:clamp(2.5rem,6vh,4rem); border-top:1px solid var(--c-linie)}
.erlebnis .schluss h2{max-width:22ch; margin-left:auto; margin-right:auto}
.erlebnis .schluss .lead{margin:0 auto clamp(1.6rem,3vh,2.2rem)}

/* ---- Fuss ---- */





@media (prefers-reduced-motion:reduce){
  
  .erlebnis *, .erlebnis *::before, .erlebnis *::after{transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important}
}

/* ---- Kapitelleiste (23.09.2026) --------------------------------------------
   Bleibt im Erlebnisteil oben stehen. Sitzt unter der Kopfleiste, solange die
   sichtbar ist (--kapitel-top setzt erlebnis.js), sonst ganz oben. Schmal
   genug, dass sie nicht wie eine zweite Navigation wirkt: vier Wörter. */
.erlebnis .kapitel{
  position:sticky; top:var(--kapitel-top,0px); z-index:60;
  display:flex; gap:.2rem; width:max-content; max-width:100%;
  margin:clamp(1.4rem,3.5vh,2.2rem) auto 0; padding:.3rem;
  overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain;
  background:rgba(5,7,13,.8); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--c-linie-hell); border-radius:999px;
  transition:top 320ms var(--e-standard);
}
.erlebnis .kapitel::-webkit-scrollbar{display:none}
.erlebnis .kapitel a{
  flex:none; display:inline-flex; align-items:center; min-height:40px; padding:0 1rem;
  border-radius:999px; color:var(--c-dim); text-decoration:none;
  font:500 .9rem/1 var(--f-text); white-space:nowrap;
  transition:color var(--t-ui), background var(--t-ui);
}
.erlebnis .kapitel a:hover{color:var(--c-text)}
.erlebnis .kapitel a[aria-current="true"]{color:var(--c-text); background:rgba(31,232,255,.13); box-shadow:inset 0 0 0 1px rgba(31,232,255,.35)}
@media (pointer:coarse){ .erlebnis .kapitel a{min-height:44px; padding:0 .9rem} }
@media (prefers-reduced-motion:reduce){ .erlebnis .kapitel{transition:none} }

/* ---- Technik, Vergleich, Streaming: ein Klappblock (23.09.2026) ---------- */
.erlebnis .tiefer{margin-top:clamp(3rem,7vh,5rem); border-top:1px solid var(--c-linie); border-bottom:1px solid var(--c-linie)}
.erlebnis .tiefer__kopf{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  padding:clamp(1.3rem,3vh,1.9rem) .2rem; min-height:44px;
}
.erlebnis .tiefer__kopf::-webkit-details-marker{display:none}
.erlebnis .tiefer__titel{display:block; font:700 clamp(1.25rem,2.3vw,1.7rem)/1.15 var(--f-display); letter-spacing:-.015em; color:var(--c-text)}
.erlebnis .tiefer__zusatz{display:block; margin-top:.35rem; color:var(--c-dim); font-size:.98rem}
.erlebnis .tiefer__zeichen{
  flex:none; position:relative; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(31,232,255,.45); transition:transform var(--t-move) var(--e-standard), border-color var(--t-ui);
}
.erlebnis .tiefer__zeichen::before,.erlebnis .tiefer__zeichen::after{
  content:''; position:absolute; left:50%; top:50%; width:14px; height:2px; margin:-1px 0 0 -7px; background:var(--c-cyan); border-radius:1px;
}
.erlebnis .tiefer__zeichen::after{transform:rotate(90deg)}
.erlebnis .tiefer__kopf:hover .tiefer__zeichen{border-color:var(--c-cyan)}
.erlebnis .tiefer[open] .tiefer__zeichen{transform:rotate(45deg)}
.erlebnis .tiefer[open]{padding-bottom:clamp(2rem,5vh,3rem)}
.erlebnis .tiefer > .abschnitt:first-of-type{padding-top:.4rem}
@media (prefers-reduced-motion:reduce){ .erlebnis .tiefer__zeichen{transition:none} }
/* Der Abschluss folgt direkt auf den Klappblock: eine Linie genügt. */
.erlebnis .tiefer + .schluss{border-top:0; margin-top:0}
/* Tisch: Leinwand über dem Standbild (23.09.2026, gegen das Flackern).
   Das <img> bleibt darunter: Es ist das erste Bild, der Text für Vorleser
   und der Rückfall ohne JavaScript. */
.erlebnis .dreh__leinwand{position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 200ms linear; pointer-events:none}
.erlebnis .dreh__leinwand.ist-an{opacity:1}
/* Datenzeile unter der Modellwahl: Masse und Bauweise, klein und ruhig --
   Information fuer die, die sie suchen, kein zweiter Blickfang. */
.erlebnis .bd-daten{margin:.55rem 0 0; display:grid; gap:.15rem; font-size:.86rem; line-height:1.45; color:var(--c-faint)}
.erlebnis .bd-daten__masse{color:var(--c-dim)}

/* Schritte der Explosionsansicht (Serienautos, 23.09.2026) */
.bd-stufen { margin-top: 10px; }
.bd-stufen b { font-weight: 700; margin-right: 2px; opacity: 0.72; font-variant-numeric: tabular-nums; }
.bd-stufen button[aria-pressed="true"] b { opacity: 1; }

/* ---- Demo-Galerie (24.09.2026) ---------------------------------------------
   Kacheln nebeneinander; die Bühne öffnet sich erst auf Klick direkt darunter.
   Eine Kachel = ein gerechnetes Foto (800 px), Branche, Titel, Technik und
   Ladegröße -- wer klickt, weiß, was kommt. Offen: cyan umrandet, wie der
   aktive Eintrag der Kapitelleiste. Telefon: eine Reihe zum Wischen. */
.erlebnis .demos{margin-top:clamp(1.6rem,4vh,2.6rem); scroll-margin-top:84px}
.erlebnis .demos__hinweis{color:var(--c-dim); font-size:.95rem; margin:0 0 .9rem}
.erlebnis .demos__reihe{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:clamp(.7rem,1.4vw,1rem);
}
.erlebnis .demo-kachel{
  position:relative; display:block; width:100%; padding:0; text-align:left; cursor:pointer;
  aspect-ratio:4/3; overflow:hidden; isolation:isolate;
  border:1px solid var(--c-linie-hell); border-radius:var(--radius); background:var(--c-surface);
  transition:border-color var(--t-ui), box-shadow var(--t-ui), transform var(--t-move) var(--e-standard);
}
.erlebnis .demo-kachel img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transition:transform 520ms var(--e-standard), filter var(--t-move);
}
.erlebnis .demo-kachel::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(5,7,13,.94) 0%, rgba(5,7,13,.72) 38%, rgba(5,7,13,0) 70%);
}
.erlebnis .demo-kachel__text{position:absolute; left:0; right:0; bottom:0; display:grid; gap:.2rem; padding:.95rem 1rem}
.erlebnis .demo-kachel__branche{font:600 .72rem/1.2 var(--f-text); letter-spacing:.14em; text-transform:uppercase; color:var(--c-cyan)}
.erlebnis .demo-kachel__titel{font:600 1.08rem/1.2 var(--f-display); color:var(--c-text); letter-spacing:-.01em}
.erlebnis .demo-kachel__technik{font:500 .82rem/1.3 var(--f-text); color:var(--c-dim)}
.erlebnis .demo-kachel:hover{border-color:rgba(31,232,255,.45)}
.erlebnis .demo-kachel:hover img{transform:scale(1.04)}
.erlebnis .demo-kachel[aria-expanded="true"]{border-color:var(--c-cyan); box-shadow:0 0 0 1px var(--c-cyan), 0 10px 40px rgba(31,232,255,.12)}
.erlebnis .demo-kachel[aria-expanded="true"] .demo-kachel__technik::before{content:"● "; color:var(--c-cyan)}
@media (max-width:700px){
  .erlebnis .demos__reihe{grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:72%;
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 calc(-1 * var(--page-x)); padding:0 var(--page-x)}
  .erlebnis .demos__reihe::-webkit-scrollbar{display:none}
  .erlebnis .demos__reihe > li{scroll-snap-align:start}
}
/* Geöffnete Bühne: kurz einblenden, Platz für die Kapitelleiste beim Anspringen */
.erlebnis .demo-buehne{position:relative; scroll-margin-top:84px}
.erlebnis .demo-buehne:not([hidden]){animation:demo-auf 420ms var(--e-standard)}
@keyframes demo-auf{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.erlebnis #demo-villa{margin-top:clamp(1.6rem,4vh,2.4rem)}
.erlebnis .demo-zu{
  display:inline-flex; align-items:center; gap:.4rem; min-height:40px; padding:0 1rem; margin:0 0 .9rem;
  position:relative; z-index:2;
  border:1px solid var(--c-linie-hell); border-radius:999px; background:rgba(5,7,13,.7); cursor:pointer;
  font:500 .9rem/1 var(--f-text); color:var(--c-dim); transition:color var(--t-ui), border-color var(--t-ui);
}
.erlebnis .demo-zu:hover{color:var(--c-text); border-color:rgba(31,232,255,.45)}
.erlebnis .demo-zu span[aria-hidden]{font-size:1.2rem; line-height:1}
@media (pointer:coarse){ .erlebnis .demo-zu{min-height:44px} }
@media (prefers-reduced-motion:reduce){
  .erlebnis .demo-buehne:not([hidden]){animation:none}
  .erlebnis .demo-kachel, .erlebnis .demo-kachel img{transition:none}
}
/* hidden muss gegen display:grid/flex der Abschnitte gewinnen */
.erlebnis .demo-buehne[hidden], .erlebnis .bd-reiter[hidden]{display:none}
.erlebnis .tisch > .demo-zu{grid-column:1/-1; justify-self:start; margin:0}

/* ========================================================== KÜCHENPLANER
   24.09.2026. Bühne links (sticky, wie die Produktdemos), Bedienung rechts.
   Maßketten sind DOM-Etiketten über der Leinwand -- scharf auf jedem
   Bildschirm und für Übersetzer erreichbar. */
.erlebnis .kp-titel{display:flex; flex-direction:column; gap:.6rem; margin:0 0 clamp(1.2rem,2.5vw,2rem)}
.erlebnis .kp-titel h2{margin:0}
.erlebnis .kp-panel{gap:1.35rem}
.erlebnis .kp-kopf, .erlebnis .kp-rumpf{display:flex; flex-direction:column; gap:1.35rem; min-width:0}
.erlebnis .kp-buehne .echtzeit{cursor:grab}
.erlebnis .kp-buehne.ist-laedt .kennung__punkt{animation:kp-puls 1s ease-in-out infinite alternate}
@keyframes kp-puls{from{opacity:.35} to{opacity:1}}
.erlebnis .kp-masse{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.erlebnis .kp-mass{
  position:absolute; left:0; top:0; padding:.18rem .42rem; border-radius:4px; white-space:nowrap;
  background:rgba(5,7,13,.8); color:var(--c-text); font:600 .74rem/1.1 var(--f-text); font-variant-numeric:tabular-nums;
  transition:opacity var(--t-ui);
}
.erlebnis .kp-mass--summe{background:var(--c-text); color:#05070d; font-size:.8rem}
.erlebnis .kp-mass--zuviel{background:#ff5a4f; color:#fff}
.erlebnis .kp-ansicht{display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin-top:.8rem}
.erlebnis .kp-ansicht button[disabled]{opacity:.45; cursor:default}
.erlebnis .kp-hinweis:empty{display:none}
.erlebnis .kp-hinweis{margin:.4rem 0 0; color:var(--c-warm); font-size:.9rem}
.erlebnis .kp-plan-box{position:absolute; inset:0; z-index:4; background:#0a0e16; display:grid; place-items:center; padding:1rem}
.erlebnis .kp-plan{width:100%; height:100%}
.erlebnis .chips button .kp-form{width:24px; height:16px; margin-right:.5rem; fill:currentColor; opacity:.9}
@media (max-width:700px){
  .erlebnis .kp-ansicht{padding:0 var(--page-x)}
  .erlebnis .kp-mass{font-size:.64rem; padding:.12rem .3rem}
  .erlebnis .kp-mass--summe{font-size:.7rem}
  .erlebnis .kp-buehne .kennung{top:auto; bottom:.6rem}
}

/* Maße: Beschriftung, Schieber, Zahl in einer Zeile */
.erlebnis .kp-regler{display:grid; grid-template-columns:5.2rem 1fr auto; align-items:center; gap:.8rem; min-height:44px}
.erlebnis .kp-regler label{font-weight:600; font-size:.92rem}
.erlebnis .kp-regler input[type=range]{width:100%; accent-color:var(--c-cyan); min-height:32px}
.erlebnis .kp-zahl{display:inline-flex; align-items:center; gap:.3rem; color:var(--c-dim); font-size:.9rem}
.erlebnis .kp-zahl input, .erlebnis .kp-modul select, .erlebnis .kp-hinzu select{
  min-height:40px; border-radius:10px; border:1px solid var(--c-linie-hell); background:var(--c-surface);
  color:var(--c-text); font:500 .92rem/1 var(--f-text); padding:0 .55rem;
}
.erlebnis .kp-zahl input{width:4.6rem; text-align:right; font-variant-numeric:tabular-nums}
.erlebnis .kp-auto{align-self:flex-start; margin-top:.2rem}
.erlebnis .kp-klein{margin:0; font-size:.86rem; color:var(--c-faint); max-width:34rem; line-height:1.5}

/* Schrankliste */
.erlebnis .kp-module{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; max-height:26rem; overflow-y:auto; scrollbar-width:thin}
.erlebnis .kp-modul{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto auto auto; align-items:center; gap:.3rem;
  padding:.3rem .35rem .3rem .3rem; border-radius:12px; border:1px solid var(--c-linie); background:var(--c-surface);
  transition:border-color var(--t-ui), background var(--t-ui);
}
.erlebnis .kp-modul.ist-gewaehlt{border-color:var(--c-cyan); background:rgba(31,232,255,.06)}
.erlebnis .kp-modul__name{
  display:flex; align-items:center; gap:.6rem; min-width:0; min-height:44px; text-align:left;
  background:none; border:0; color:inherit; cursor:pointer; padding:0 .3rem; font:inherit;
}
.erlebnis .kp-modul__name b{
  flex:none; width:1.6rem; height:1.6rem; border-radius:50%; display:grid; place-items:center;
  background:var(--c-surface-2); color:var(--c-cyan); font:600 .78rem/1 var(--f-display);
}
.erlebnis .kp-modul.ist-hoch .kp-modul__name b{color:var(--c-warm)}
.erlebnis .kp-modul__name span{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.erlebnis .kp-modul__name strong{font-weight:600; font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.erlebnis .kp-modul__name small{font-size:.78rem; color:var(--c-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.erlebnis .kp-mini{
  width:40px; height:40px; border-radius:10px; border:1px solid var(--c-linie); background:transparent;
  color:var(--c-dim); cursor:pointer; font:500 1rem/1 var(--f-text);
}
.erlebnis .kp-mini:hover:not([disabled]){color:var(--c-text); border-color:var(--c-linie-hell)}
.erlebnis .kp-mini[disabled]{opacity:.3; cursor:default}
.erlebnis .kp-hinzu{display:flex; gap:.5rem; flex-wrap:wrap}
.erlebnis .kp-hinzu select{flex:1 1 12rem}
@media (max-width:520px){
  .erlebnis .kp-modul{grid-template-columns:minmax(0,1fr) auto auto auto; row-gap:.2rem}
  .erlebnis .kp-modul__name{grid-column:1/-1}
  .erlebnis .kp-modul select{grid-column:1}
}

/* Planungsprüfung: grün stimmt, gelb Hinweis, rot passt nicht */
.erlebnis .kp-pruefung{display:flex; flex-direction:column; gap:.55rem; padding:1rem 1.1rem; border-radius:14px; border:1px solid var(--c-linie); background:var(--c-surface)}
.erlebnis .kp-pruefung ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem}
.erlebnis .kp-h{position:relative; padding-left:1.5rem; font-size:.9rem; line-height:1.45; color:var(--c-dim)}
.erlebnis .kp-h::before{position:absolute; left:0; top:.05rem; width:1.05rem; height:1.05rem; border-radius:50%; display:grid; place-items:center; font:700 .7rem/1 var(--f-text)}
.erlebnis .kp-h--ok::before{content:"✓"; background:rgba(82,214,142,.16); color:#52d68e}
.erlebnis .kp-h--warn::before{content:"!"; background:rgba(255,200,87,.16); color:#ffc857}
.erlebnis .kp-h--fehler{color:var(--c-text)}
.erlebnis .kp-h--fehler::before{content:"×"; background:rgba(255,90,79,.2); color:#ff5a4f}
.erlebnis .kp-stueck summary{cursor:pointer; font:600 .74rem/1 var(--f-text); letter-spacing:.14em; text-transform:uppercase; color:var(--c-faint); min-height:32px; display:flex; align-items:center}
.erlebnis .kp-stueck ul{margin:.5rem 0 0; padding-left:1.1rem; color:var(--c-dim); font-size:.9rem; line-height:1.6}
.erlebnis .kp-aktion{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center}

/* ========================================================== HAARFARBEN
   24.09.2026. Bildsequenz wie beim Tisch, aber je Farbe ein Satz; die
   Leinwand liegt über dem Poster, der Hinweis verschwindet nach dem ersten Griff. */
.erlebnis .hf-buehne{cursor:grab; user-select:none; -webkit-user-select:none; background:#141313; touch-action:pan-y}
/* Das Posterbild liegt unter der Leinwand und fing das Ziehen ab: Ein <img>
   startet beim Ziehen den Bild-Drag des Browsers, der Zeiger wird abgebrochen
   (pointercancel) -- der Kopf drehte sich nie (Probe 24.09.2026). */
.erlebnis .hf-buehne img{pointer-events:none; -webkit-user-drag:none}
.erlebnis .hf-buehne:active{cursor:grabbing}
.erlebnis .hf-buehne:focus-visible{outline:2px solid var(--c-cyan); outline-offset:3px}
.erlebnis .hf-leinwand{position:absolute; inset:0; width:100%; height:100%; z-index:3; opacity:0; transition:opacity 240ms linear; pointer-events:none}
.erlebnis .hf-leinwand.ist-an{opacity:1}
.erlebnis .hf-buehne .dreh__hinweis{z-index:6; bottom:auto; top:.9rem}
.erlebnis .hf-buehne.ist-benutzt .dreh__hinweis{opacity:0}
.erlebnis .hf-buehne.ist-laedt .kennung__punkt{animation:kp-puls 1s ease-in-out infinite alternate}
.erlebnis .hf-info{margin:0; min-height:3em; color:var(--c-text); font-size:1rem; line-height:1.55; max-width:34rem}

/* Zusätze der Produktdemo (Uhr: Gravur, Karat) */
.erlebnis .pd-gravur{
  width:100%; max-width:26rem; min-height:4.2rem; resize:vertical; padding:.7rem .85rem; border-radius:12px;
  border:1px solid var(--c-linie-hell); background:var(--c-surface); color:var(--c-text);
  font:italic 500 1.05rem/1.4 Georgia, 'Times New Roman', serif;
}
.erlebnis .pd-gravur:focus-visible{outline:2px solid var(--c-cyan); outline-offset:2px}
.erlebnis .pd-klein{margin:0; font-size:.84rem; color:var(--c-faint)}

/* ========================================================== KUNDENABLAUF
   „So sieht es Ihre Kundschaft" -- Vorführung des Endkunden-Schritts. */
.erlebnis .ka{padding:0; border:0; background:transparent; max-width:min(34rem, calc(100vw - 2rem)); width:100%; color:var(--c-text)}
.erlebnis .ka::backdrop{background:rgba(3,5,10,.72); backdrop-filter:blur(4px)}
.erlebnis .ka[open]{animation:demo-auf 320ms var(--e-standard)}
.erlebnis .ka-karte{position:relative; display:flex; flex-direction:column; gap:1rem; padding:clamp(1.2rem,3vw,1.8rem); border-radius:20px; background:var(--c-surface); border:1px solid var(--c-linie-hell); box-shadow:0 30px 80px rgba(0,0,0,.5)}
.erlebnis .ka-zu{position:absolute; top:.6rem; right:.6rem; width:44px; height:44px; border-radius:50%; border:0; background:transparent; color:var(--c-dim); font-size:1.5rem; cursor:pointer}
.erlebnis .ka-zu:hover{color:var(--c-text)}
.erlebnis .ka-kicker{margin:0; font:600 .72rem/1.3 var(--f-text); letter-spacing:.14em; text-transform:uppercase; color:var(--c-warm); padding-right:2.5rem}
.erlebnis .ka h3{margin:0; font-family:var(--f-display); font-size:clamp(1.3rem,2.4vw,1.6rem); letter-spacing:-.015em}
.erlebnis .ka-auswahl{margin:0; padding:.8rem 1rem; list-style:none; border-radius:12px; background:var(--c-surface-2); display:flex; flex-direction:column; gap:.3rem; color:var(--c-dim)}
.erlebnis .ka-auswahl li:first-child{color:var(--c-text); font-weight:600}
.erlebnis .ka-feld{display:flex; flex-direction:column; gap:.45rem}
.erlebnis .ka-name{font:600 .72rem/1 var(--f-text); letter-spacing:.14em; text-transform:uppercase; color:var(--c-faint)}
.erlebnis .ka-chips{display:flex; flex-wrap:wrap; gap:.35rem}
.erlebnis .ka-chips button{min-height:40px; padding:0 .8rem; border-radius:999px; border:1px solid var(--c-linie); background:transparent; color:var(--c-dim); font:500 .88rem/1 var(--f-text); cursor:pointer}
.erlebnis .ka-chips button[aria-pressed="true"]{background:var(--c-text); color:#05070d; border-color:var(--c-text)}
.erlebnis .ka-aktion{display:flex; flex-wrap:wrap; gap:.6rem}
.erlebnis .ka-hinweis{margin:0; font-size:.8rem; color:var(--c-faint)}
.erlebnis .ka-eingang{display:flex; flex-direction:column; gap:.5rem; padding:1rem 1.1rem; border-radius:16px; background:#f4f5f7; color:#14161a; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.erlebnis .ka-eingang__kopf{display:flex; justify-content:space-between; gap:1rem; font-size:.8rem; color:#5b6270}
.erlebnis .ka-eingang__kopf b{color:#0a78f5}
.erlebnis .ka-eingang strong{font-size:1.02rem}
.erlebnis .ka-eingang ul{margin:0; padding-left:1.1rem; font-size:.92rem; line-height:1.5}
.erlebnis .ka-eingang__knoepfe{display:flex; gap:.5rem; margin-top:.3rem}
.erlebnis .ka-eingang__knoepfe span{flex:1; text-align:center; padding:.5rem; border-radius:10px; background:#e2e6ee; font-size:.84rem; font-weight:600}
.erlebnis .ka-eingang__knoepfe span:first-child{background:#0a78f5; color:#fff}
.erlebnis .kunde-knopf{align-self:flex-start; display:inline-flex; align-items:center; gap:.5rem}
.erlebnis .kunde-knopf::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--c-warm); box-shadow:0 0 0 3px rgba(255,217,168,.18)}
.erlebnis .pd-ladung{width:100%; max-width:26rem; accent-color:var(--c-cyan); min-height:36px}
.erlebnis .pd-ladung-wert{margin:0; font-size:.95rem; color:var(--c-text); font-variant-numeric:tabular-nums}

/* Tisch: Holz und Maße in der Galerie (B7) */
.erlebnis .tisch-wahl{display:flex; flex-direction:column; gap:1rem; margin:.4rem 0 1rem}
.erlebnis .tisch-daten{margin:0; font-size:1rem; color:var(--c-text); font-variant-numeric:tabular-nums}
.erlebnis .tisch-still{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:3; opacity:0; transition:opacity 220ms linear; pointer-events:none}
.erlebnis .tisch-still.ist-an{opacity:1}
.erlebnis .dreh.hat-still .dreh__hinweis{opacity:1}
.erlebnis .dreh .dreh__hinweis{z-index:4}
/* Logo ausprobieren (A1) */
.erlebnis .pd-logo{display:flex; flex-direction:column; gap:.5rem; margin-top:.4rem}
.erlebnis .pd-logo__zeile{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center}
.erlebnis .pd-logo__datei{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
.erlebnis .pd-logo__datei:focus-visible + label{outline:2px solid var(--c-cyan); outline-offset:2px}
.erlebnis .pd-logo label.knopf{cursor:pointer}
.erlebnis .pd-name{max-width:26rem; min-height:44px; padding:0 .85rem; border-radius:12px; border:1px solid var(--c-linie-hell); background:var(--c-surface); color:var(--c-text); font:500 1rem/1 var(--f-text)}
/* AR (A2) */
.erlebnis .ar-knopf{align-self:flex-start; display:inline-flex; align-items:center; gap:.5rem}
.erlebnis .ar-knopf::before{content:""; width:14px; height:14px; border:2px solid currentColor; border-radius:3px; transform:rotate(45deg) scale(.8)}
.ar-ueber{position:fixed; inset:auto 0 0 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.2rem calc(1rem + env(safe-area-inset-bottom)); background:rgba(5,7,13,.72); color:#fff; font:500 1rem/1.3 system-ui, sans-serif}
.ar-ueber p{margin:0}
.ar-ueber button{min-height:44px; padding:0 1.1rem; border-radius:999px; border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff; font:600 .95rem/1 system-ui, sans-serif}