/* ============================================================
   Schichtfix — Dual-Stage-Demo „Ein Tag. Ein Jahr. Ein Team."
   Baut auf tokens.css auf. Farbrollen strikt: Website-Chrome nur Deep Blue /
   Ocean / Sky; Hotspots + Funke in Sky #2E92D0 / Ocean #60C6C9 (nur CI-Toene, kein Fremd-Signalton).
   Amber nur im Epilog-CTA. Das Krank-Orange erscheint AUSSCHLIESSLICH als Pixel
   INNERHALB der App-Screenshots (.screen-img), nie als Website-Farbe.
   ============================================================ */

body { background: var(--surface-muted); min-height: 100vh; display: flex; flex-direction: column; }

/* --- Demobar --- */
.demobar { flex: 0 0 auto; background: rgba(255,255,255,.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-cool); position: sticky; top: 0; z-index: 40; }
.demobar-inner { max-width: 1760px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 16px; }
.demobar-back { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted);
  font-size: 14px; font-weight: 600; min-height: 44px; }
.demobar-logo { display: inline-flex; align-items: center; margin-right: auto; }
.demobar-logo img { height: 34px; width: auto; display: block; }
.demobar-tabs { display: inline-flex; gap: 4px; background: var(--neutral);
  border: 1px solid var(--border-cool); border-radius: var(--radius-pill); padding: 4px; }
.demobar-tab { border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 700; color: var(--text-muted); padding: 8px 16px; min-height: 44px;
  border-radius: var(--radius-pill); transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.demobar-tab:hover { color: var(--blue-deep); }
.demobar-tab.is-active { background: var(--blue-ocean); color: var(--blue-deep); }

#demo { flex: 1; width: 100%; max-width: 1760px; margin: 0 auto; padding: 22px 24px 40px; outline: none; }
.mode { display: none; }
.mode.is-active { display: block; }

/* ============================================================
   Kapitel-Sprungleiste
   ============================================================ */
.chapterbar { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; margin-bottom: 8px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.chapter-pill { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; cursor: pointer;
  border: 1.5px solid var(--border-cool); background: #fff; color: var(--text-muted);
  border-radius: var(--radius-pill); padding: 0 16px; min-height: 44px; font-family: inherit;
  font-size: 13.5px; font-weight: 700; white-space: nowrap;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.chapter-pill .pill-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--neutral); color: var(--blue-ocean-700); font-size: 12px; font-weight: 800; }
.chapter-pill:hover { border-color: var(--blue-ocean); color: var(--blue-deep); }
.chapter-pill.is-done { color: var(--blue-ocean-700); border-color: color-mix(in srgb, var(--blue-ocean) 45%, #fff); }
.chapter-pill.is-done .pill-num { background: color-mix(in srgb, var(--blue-ocean) 22%, #fff); }
.chapter-pill.is-active { background: var(--blue-ocean); color: var(--blue-deep); border-color: var(--blue-ocean); }
.chapter-pill.is-active .pill-num { background: rgba(255,255,255,.55); color: var(--blue-deep); }

/* ============================================================
   TOUR-Layout
   ============================================================ */
.tour-layout { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 1040px) {
  .tour-layout { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 44px; align-items: center; }
  .rail { order: -1; }
}

/* --- Erzähl-Rail --- */
.rail { display: flex; flex-direction: column; }
.rail-time { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
  background: var(--blue-deep); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  padding: 6px 13px; border-radius: var(--radius-pill); }
.rail-chapter { margin: 14px 0 0; font-size: 12.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--blue-ocean-700); }
#rail-title { margin: 8px 0 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.12;
  font-size: clamp(23px, 3vw, 32px); color: var(--color-brand); outline: none; }
#rail-text { margin: 13px 0 0; font-size: 16px; line-height: 1.58; color: var(--text-muted); max-width: 460px; }
.rail-cta { margin: 16px 0 0; min-height: 20px; }
.cta-secondary { font-size: 14.5px; font-weight: 700; color: var(--blue-ocean-700);
  border-bottom: 1.5px solid color-mix(in srgb, var(--blue-ocean) 55%, #fff); padding-bottom: 1px; }
.cta-secondary:hover { color: var(--blue-deep); }
/* Mobil-CTA-Host (unter der Grafik) auf Desktop aus; Umschaltung im Mobil-Media-Query. */
.rail-cta-m { display: none; }

.rail-nav { display: flex; gap: 12px; margin: 22px 0 0; }
.rail-nav .btn { height: 50px; padding: 0 24px; font-size: 15px; }
#tour-prev[disabled] { opacity: .4; pointer-events: none; }
/* Titelkarten (Prolog/Epilog): der blaue Kasten traegt Titel + Text selbst — die Rail
   wiederholt NICHTS mehr (Michael 24.07., vorher ausgegraute Doppelung). */
.rail.is-title #rail-title, .rail.is-title #rail-text { display: none; }
/* Prolog-Intro: die einzige „Tour starten”-CTA liegt in der Titelkarte -> Rail-Nav aus */
.rail.is-intro .rail-nav { display: none; }
@media (min-width: 1040px) {
  /* Desktop-Titelkarten: auch Zeit-Pille + Kapitel-Label sind Doppelung zur Karte. */
  .rail.is-title #rail-time, .rail.is-title #rail-chapter { display: none; }
  /* Intro: Rail ist damit komplett leer -> Spalte einziehen, Karte mittig ueber volle Breite. */
  .tour-layout.is-intro { grid-template-columns: 1fr; }
  .tour-layout.is-intro .rail { display: none; }
}

.chapter-dots { display: flex; gap: 2px; margin: 22px 0 0; }
.chapter-dot { width: 44px; height: 44px; border: none; background: transparent; cursor: pointer;
  padding: 0; position: relative; }
.chapter-dot::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--line-cool);
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.chapter-dot:hover::before { background: var(--blue-ocean); }
.chapter-dot.is-done::before { background: var(--blue-ocean-600); }
.chapter-dot.is-active::before { background: var(--blue-sky); transform: translate(-50%,-50%) scale(1.5); }

/* ============================================================
   Stage + Dual-Devices
   ============================================================ */
.stage { position: relative; }
.scenes { position: relative; min-height: 440px; }
.scene { display: none; }
.scene.is-active { display: block; animation: sfSceneIn .5s var(--ease-out) both; }

.stage-devices { position: relative; display: flex; align-items: center; justify-content: center; gap: 30px;
  min-height: 440px; padding: 8px 0; }
.device { transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), filter .55s var(--ease-out); }
.device .phone { width: min(80vw, 268px); margin: 0 auto; }
.device .browsercard { width: 100%; }
.device.is-echo { opacity: .42; filter: saturate(.75) blur(.3px); transform: scale(.86); }
.device.is-focus { opacity: 1; transform: scale(1); z-index: 3; }

@media (min-width: 1040px) {
  .stage-devices { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: center; }
  .stage-devices .device-phone { grid-column: 1; }
  .stage-devices .device-desktop { grid-column: 2; }
  .device-desktop .browsercard { max-width: 820px; margin-left: auto; }
  /* Fokus-Betonung: das Echo tritt zurück, ohne die Position zu verlieren */
  .stage-devices.focus-phone .device-desktop { transform: scale(.9) translateX(6%); }
  .stage-devices.focus-desktop .device-phone { transform: scale(.82); }
}

.screen-holder { position: relative; display: block; }
.phone .screen-holder { border-radius: 32px; overflow: hidden; }
/* Screenshots fuellen ihren Rahmen (sonst native 800/1920 px -> Overflow/Zoom). */
.screen-img { display: block; width: 100%; height: auto; }
.phone .screen-img { border-radius: 32px; border: 1px solid rgba(255,255,255,.06); }

/* --- Hotspots + Puls (Sky/Ocean, kontrastsicherer Doppel-Ring FIND-017) ---
   Ring und Touch-Target sind ENTKOPPELT: der Ring (.hotspot-ring) ist rein visuell
   und exakt so gross wie das Zielelement (left/top/width/height inline, in %);
   der Button (.hotspot) darueber ist nur das >=44px-Touch-Target und traegt kein
   eigenes Mass mehr — so blaeht das 44px-Mindestmass den sichtbaren Ring nicht auf. */
.hotspots { position: absolute; inset: 0; }
.hotspot-ring { position: absolute; transform: translate(-50%, -50%); pointer-events: none;
  border-radius: 12px; border: 3px solid var(--blue-sky);
  box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 0 0 0 rgba(46,146,208,.5);
  animation: hsPulse 1.9s var(--ease-out) infinite; z-index: 4; }
.hotspot { position: absolute; transform: translate(-50%, -50%); border: none; padding: 0; background: transparent;
  cursor: pointer; border-radius: 14px; z-index: 5; min-width: 44px; min-height: 44px;
  -webkit-tap-highlight-color: transparent; }
.hotspot:focus-visible { outline: 3px solid var(--blue-sky); outline-offset: 3px; }
@keyframes hsPulse {
  0%   { box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 0 0 0 rgba(46,146,208,.5); }
  70%  { box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 0 0 9px rgba(46,146,208,0); }
  100% { box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 0 0 0 rgba(46,146,208,0); }
}
.hotspot-tag { position: absolute; left: 50%; top: -10px; transform: translate(-50%,-100%);
  background: var(--blue-deep); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 11px;
  border-radius: 999px; white-space: nowrap; opacity: 0; pointer-events: none; max-width: 240px;
  transition: opacity var(--dur) var(--ease-out); box-shadow: var(--shadow-card-sm); }
.hotspot-tag::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--blue-deep); }
.hotspot:hover .hotspot-tag, .hotspot:focus-visible .hotspot-tag { opacity: 1; }

/* ============================================================
   Funke (Magic Moment) — Puls-Welle zwischen den Geräten
   ============================================================ */
.funke { position: absolute; top: 50%; left: 0; right: 0; height: 3px; transform: translateY(-50%);
  pointer-events: none; opacity: 0; z-index: 5;
  background: linear-gradient(90deg, transparent, rgba(96,198,201,.35), transparent);
  transition: opacity .4s var(--ease-out); }
.scene.is-active.sim-on .funke { opacity: 1; }
.funke-core { position: absolute; top: 50%; left: 12%; width: 15px; height: 15px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0%, var(--blue-ocean) 40%, var(--blue-sky) 100%);
  box-shadow: 0 0 20px 7px rgba(96,198,201,.7); opacity: 0; }
.scene.is-active.sim-on .funke-toDesk .funke-core { animation: sparkToDesk 1.05s var(--ease-out) .05s forwards; }
.scene.is-active.sim-on .funke-toPhone .funke-core { animation: sparkToPhone 1.05s var(--ease-out) .05s forwards; }
@keyframes sparkToDesk  { 0% { left: 10%; opacity: 0; } 12% { opacity: 1; } 100% { left: 90%; opacity: .95; } }
@keyframes sparkToPhone { 0% { left: 90%; opacity: 0; } 12% { opacity: 1; } 100% { left: 10%; opacity: .95; } }
@media (max-width: 1039px) { .funke { display: none; } }   /* mobil: Echo-Karte trägt den Indikator */

/* ============================================================
   Konsequenz-Overlays (App-Idiom, SIMULATION) am Zielgerät
   ============================================================ */
.app-overlay { position: absolute; z-index: 6; opacity: 0; transform: translateY(8px) scale(.97);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); font-family: var(--font-sans); }
.scene.is-active.sim-on .app-overlay { opacity: 1; transform: none; transition-delay: .55s; }
.push-card { right: 4%; top: 12%; width: 46%; max-width: 320px; background: #fff; border-radius: 14px;
  padding: 12px 14px; box-shadow: var(--shadow-pop); border-left: 4px solid #F68B57; /* app-idiom only */
  display: flex; gap: 11px; align-items: flex-start; }
.push-card .pc-dot { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  background: var(--status-danger-bg); color: var(--status-danger); display: grid; place-items: center; }
.push-card .pc-t { font-weight: 800; color: var(--blue-deep); font-size: 13.5px; }
.push-card .pc-s { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.push-card .pc-badge { margin-top: 5px; display: inline-block; font-size: 11px; font-weight: 700; color: var(--blue-ocean-700); }
.ampel-chip { left: 50%; top: 14%; transform: translateX(-50%) translateY(8px); background: #fff;
  border-radius: 999px; padding: 8px 15px; box-shadow: var(--shadow-pop); font-size: 13px; font-weight: 700;
  color: var(--blue-deep); display: inline-flex; align-items: center; gap: 8px; }
.scene.is-active.sim-on .ampel-chip { transform: translateX(-50%); }
.ampel-chip .ampel-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--status-ok); }
.approved-chip { left: 50%; top: 16%; transform: translateX(-50%) translateY(8px); background: var(--status-ok-bg);
  color: var(--status-ok); border-radius: 999px; padding: 8px 15px; box-shadow: var(--shadow-card);
  font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; gap: 7px; }
.scene.is-active.sim-on .approved-chip { transform: translateX(-50%); }
.approved-chip .chk { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--status-ok); color: #fff; font-size: 12px; }

/* --- Art-9-Vertrauens-Note (Kapitel 1) --- */
.art9-note { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 14px; padding: 8px 15px;
  background: color-mix(in srgb, var(--blue-ocean) 12%, #fff); border: 1px solid color-mix(in srgb, var(--blue-ocean) 30%, #fff);
  border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--blue-deep); width: fit-content; }
.art9-note .lock { font-size: 13px; }

/* ============================================================
   Titelkarten (Prolog / Epilog)
   ============================================================ */
.titlecard { background: var(--gradient-header); color: #fff; border-radius: var(--radius-card);
  padding: clamp(28px, 5vw, 54px); text-align: center; box-shadow: var(--shadow-pop);
  max-width: 620px; margin: 20px auto; }
.titlecard .tc-kicker { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-ocean); }
.titlecard h3 { color: #fff; margin: 14px 0 0; font-weight: 900; letter-spacing: -.025em; line-height: 1.08;
  font-size: clamp(28px, 4.6vw, 44px); }
.titlecard p { margin: 16px auto 0; font-size: 17px; line-height: 1.58; color: rgba(255,255,255,.86); max-width: 460px; }
.tc-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 28px 0 0; }
.tc-cta .btn { height: 54px; padding: 0 26px; font-size: 16px; }
/* Prolog-Duo „Zwei Seiten der Medaille" (Michael-Freigabe 24.07.): echte Screens mit
   Namensschildern (Nina/Handy links, Nadine/Desktop rechts) + Funke. Die Intro-Karte
   wird dafuer breiter; Geraete-Frames kommen aus tokens.css (.phone/.browsercard). */
.titlecard-intro { max-width: 940px; }
.tc-duo { display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(14px, 3vw, 34px); margin: 34px 0 6px; }
.tc-side { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.tc-badge { display: inline-flex; align-items: center; gap: 10px; text-align: left;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-pill); padding: 7px 18px 7px 8px; backdrop-filter: blur(6px); }
.tc-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--blue-ocean); color: var(--blue-deep); display: grid; place-items: center;
  font-size: 15px; font-weight: 800; }
.tc-badge .b-name { font-size: 14.5px; font-weight: 800; color: #fff; line-height: 1.2; }
.tc-badge .b-role { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.72); line-height: 1.25;
  white-space: nowrap; }
/* Rollen-Zusatz („· am Handy"/„· am Desktop") nur, wenn die Stage breit genug ist —
   sonst braeche das Namensschild ueber die Geraetebreite hinaus um. */
@media (max-width: 1279px) { .tc-badge .b-role-x { display: none; } }
.tc-side .phone { width: clamp(118px, 15vw, 156px); border-radius: 26px; padding: 6px; }
.tc-side .phone::before { top: 9px; height: 4px; }
.tc-side .phone .phone-screen { border-radius: 21px; }
.tc-side .browsercard { width: clamp(300px, 42vw, 440px); border-radius: 14px; }
.tc-side .browsercard-bar { padding: 8px 12px; }
.tc-side .browsercard-dot { width: 9px; height: 9px; }
.tc-side .browsercard-url { height: 22px; font-size: 11px; }
.tc-cap { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); line-height: 1.45; max-width: 220px; }
.tc-cap strong { color: #fff; font-weight: 800; }
.tc-funke { align-self: center; flex: 0 0 auto; width: clamp(44px, 7vw, 96px);
  display: flex; flex-direction: column; align-items: center; gap: 9px; }
.tc-funke .f-track { position: relative; width: 100%; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(96,198,201,.45), transparent); }
.tc-funke .f-core { position: absolute; top: 50%; left: 0; width: 11px; height: 11px;
  border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0%, var(--blue-ocean) 40%, var(--blue-sky) 100%);
  box-shadow: 0 0 16px 5px rgba(96,198,201,.7); animation: duoSpark 2.4s var(--ease-out) infinite; }
.tc-funke .f-label { font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.6); }
@keyframes duoSpark { 0% { left: 4%; opacity: 0; } 18% { opacity: 1; }
  82% { opacity: 1; } 100% { left: 96%; opacity: 0; } }

/* ============================================================
   Mobil: Stage zeigt NUR das Fokus-Geraet, Steuerung in Daumen-Zone
   ============================================================ */
@media (max-width: 1039px) {
  /* SEO-Einleitung nur in der Startszene: sie steht ueber der Tour, und goto() scrollt
     nach jedem Szenenwechsel auf top:0 — ab Szene 2 muesste man sonst jedes Mal am
     Fliesstext vorbeiscrollen. Der Block bleibt im DOM (Crawler + JS-Rendering sehen ihn
     in der Startszene), nur die Darstellung ab .intro-done faellt weg. Desktop unberuehrt.  */
  body.intro-done .demo-seo-intro { display: none; }

  .stage-devices { display: block; min-height: auto; position: relative; }
  .device.is-focus { transform: none; }
  .device-phone .phone { width: min(74vw, 250px); }
  /* Echo-Device auf Mobil ausgeblendet: die kleine Miniatur des anderen Geraets lag ueber
     der Ecke des Fokus-Screenshots und wirkte wie ein verirrter Screenshot. Auf dem schmalen
     Handy nur das Fokus-Geraet zeigen; die Rail-Story traegt die Dual-Aussage (Funke ist mobil
     ohnehin aus). */
  .device.is-echo { display: none; }

  #tour .rail-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); gap: 10px;
    background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-cool); box-shadow: 0 -8px 24px rgba(14,23,48,.10); }
  #tour .rail-nav .btn { flex: 1; height: 52px; }
  .chapter-dots { justify-content: center; }
  /* „Kostenlos starten” gehoert auf dem Handy UNTER die Grafik: Rail-CTA aus,
     Mobil-Host unter der Stage an. */
  #rail-cta { display: none; }
  .rail-cta-m { display: block; margin: 18px 0 4px; }
  body { padding-bottom: 92px; }
  /* Prolog-Duo kompakt: Nebeneinander bleibt (das IST die Botschaft), nur kleiner.
     Browsercard flexibel (flex-shrink) statt fixer Breite — sonst laeuft sie bei 390px
     rechts aus der Karte. */
  .titlecard-intro { padding-left: 16px; padding-right: 16px; }
  .tc-duo { gap: 8px; margin: 24px 0 2px; }
  .tc-side { gap: 10px; }
  .tc-side:last-child { flex: 1 1 auto; min-width: 0; }
  .tc-side .phone { width: 84px; border-radius: 16px; padding: 4px; }
  .tc-side .phone::before { display: none; }
  .tc-side .phone .phone-screen { border-radius: 13px; }
  .tc-side .browsercard { width: 100%; max-width: 200px; border-radius: 10px; }
  .tc-side .browsercard-url { font-size: 9px; height: 18px; }
  .tc-badge { padding: 5px 12px 5px 6px; gap: 8px; }
  .tc-avatar { width: 26px; height: 26px; font-size: 12px; }
  .tc-badge .b-name { font-size: 12.5px; }
  .tc-badge .b-role { font-size: 10.5px; }
  .tc-badge .b-role-x { display: none; }
  .tc-cap { display: none; }
  .tc-funke { width: 20px; }
  .tc-funke .f-label { display: none; }

  /* Kapitel-Sprungleiste: dezenter Fade-Rand signalisiert Scrollbarkeit statt
     hart abgeschnittener Pille; kompaktere Pillen reduzieren den Scroll-Bedarf. */
  .chapterbar { gap: 6px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
  .chapter-pill { padding: 0 12px; font-size: 12.5px; gap: 6px; }
  .chapter-pill .pill-num { width: 20px; height: 20px; font-size: 11px; }
}

/* ============================================================
   FREI ERKUNDEN
   ============================================================ */
.explore-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1040px) { .explore-layout { grid-template-columns: 268px 1fr; gap: 40px; align-items: start; } }
.explore-deviceswitch { display: inline-flex; gap: 4px; background: var(--neutral); border: 1px solid var(--border-cool);
  border-radius: var(--radius-pill); padding: 4px; margin-bottom: 16px; }
.explore-deviceswitch button { border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 700; color: var(--text-muted); padding: 8px 14px; min-height: 40px; border-radius: 999px; }
.explore-deviceswitch button.is-active { background: var(--blue-ocean); color: var(--blue-deep); }
.explore-nav { display: flex; flex-direction: column; gap: 4px; }
.explore-nav-item { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; border: none;
  background: transparent; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--text-body); padding: 12px 14px; min-height: 44px; border-radius: 12px;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.explore-nav-item:hover { background: #fff; }
.explore-nav-item.is-active { background: color-mix(in srgb, var(--blue-ocean) 20%, #fff); color: var(--blue-deep); font-weight: 700; }
.explore-stagewrap { display: flex; flex-direction: column; align-items: center; }
.explore-device .phone { width: min(82vw, 300px); }
.explore-device .browsercard { width: 100%; max-width: 1240px; }
.explore-caption { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--text-muted); text-align: center; max-width: 520px; }

/* ============================================================
   Ehrlichkeits-Fusszeile
   ============================================================ */
.honesty { flex: 0 0 auto; text-align: center; font-size: 13px; color: var(--text-muted);
  padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-cool);
  background: rgba(255,255,255,.7); }

/* ============================================================
   reduced-motion: SAEMTLICHE nicht notwendigen Animationen aus (FIND-009);
   Zustandswechsel bleiben unmittelbar sichtbar (Funke -> statischer Glow).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .scene.is-active { animation: none !important; }
  .hotspot-ring { animation: none !important; }
  .funke, .funke-core { animation: none !important; transition: none !important; }
  .scene.is-active.sim-on .funke { opacity: 1; }
  .funke-core { opacity: .95 !important; left: 50% !important; }
  .app-overlay { transition: none !important; transform: none !important; opacity: 1 !important; }
  .device { transition: none !important; }
  .ampel-chip, .approved-chip { transform: translateX(-50%) !important; }
  .tc-funke .f-core { animation: none !important; left: 50% !important; opacity: .95; }
}