/* =====================================================================
   EXPLORLD · GUIDED-DEMO · BRAND-CHROME (geteilte Führungs-Schicht)
   ---------------------------------------------------------------------
   Das komplette Tour-Chrome aus guided-demo/03-branding.md, ein einziges
   Mal gebaut, in alle drei Demo-Welten eingebunden. Die Tokens sind FIX
   und werden pro Welt nie angefasst. Die Szene der Welt nutzt EIGENE
   Variablennamen (--acc, --bg, --st-acc …) und steht strikt unter z-index 41.

   Aktiviert wird das Chrome erst durch guided-demo.js, wenn die Welt mit
   ?tour=1&pos=N geladen ist. Ohne Tour-Param bleibt alles inert.
   ===================================================================== */

/* ===== 2.1 MARKEN-KONSTANTEN (CHROME-TOKENS, IN ALLEN WELTEN IDENTISCH) ===== */
:root{
  /* Marken-Orange (aus index.html / favicon.svg) */
  --ex-acc:#E8902B;          /* Explorld-Akzent */
  --ex-acc-2:#F4A63E;        /* heller Gradient-Stop */
  --ex-acc-d:#C2761A;        /* dunkler Gradient-Stop */
  --ex-acc-grad:linear-gradient(135deg,#F4A63E 0%,#E8902B 54%,#D97E14 100%);

  /* Chrome-Untergründe: near-black, welt-neutral, leicht transluzent */
  --ex-chrome-bg:rgba(16,13,11,.82);   /* Tag- und Pill-Flächen */
  --ex-chrome-line:rgba(232,144,43,.34);
  --ex-chrome-ink:#F6EFE4;             /* helle Schrift auf Chrome */
  --ex-chrome-mute:rgba(246,239,228,.62);

  /* Schrift (Code-maßgeblich) */
  --ex-disp:'Bricolage Grotesque',sans-serif;
  --ex-body:'Plus Jakarta Sans',system-ui,sans-serif;

  /* Radien: kantig. Pillen NUR für CTA-Dot, Fortschritts-Punkte, Lang-Schalter. */
  --ex-r:8px;          /* Standard-Chrome-Radius, kantig */
  --ex-r-pill:999px;   /* nur CTA-Dot, Fortschritts-Punkte, Lang-Schalter */

  /* Schatten */
  --ex-sh-chrome:0 10px 26px rgba(0,0,0,.45);
  --ex-sh-cta:0 12px 30px rgba(232,144,43,.30);

  /* Z-Index-Ebenen der Klammer (2.9) */
  --ex-z-scene:0;       /* Szene und ihre Inhaltskarten: 0 bis 40 */
  --ex-z-disclaimer:65;
  --ex-z-topbar:70;
  --ex-z-cta:75;
  --ex-z-transition:90; /* Inter-Welt-Übergang, 3.2 */
  --ex-z-intro:95;      /* Intro-Frame, 3.1 */
}

/* ===== 2.2 TOPBAR (BRAND-KLAMMER OBEN) ===== */
.ex-top{position:fixed;top:0;left:0;right:0;z-index:var(--ex-z-topbar);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:56px;padding:0 18px;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,8,6,.62),transparent);}
.ex-top > *{pointer-events:auto;}

/* Wortmarke: explrld mit Globus als o, plus dezenter "· Tour"-Zusatz */
.ex-mark{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ex-disp);font-weight:800;font-size:17px;letter-spacing:-.02em;
  color:var(--ex-chrome-ink);background:var(--ex-chrome-bg);
  border:1px solid var(--ex-chrome-line);border-radius:var(--ex-r);
  padding:8px 13px;backdrop-filter:blur(7px);box-shadow:var(--ex-sh-chrome);}
.ex-mark .globe-o{width:.72em;height:.72em;color:var(--ex-acc);transform:translateY(.04em);}
.ex-mark .tour{font-family:var(--ex-body);font-weight:600;font-size:12px;
  color:var(--ex-chrome-mute);letter-spacing:.06em;text-transform:uppercase;}

/* ===== 2.3 FORTSCHRITTSANZEIGE (TOUR, MITTE OBEN) ===== */
.ex-prog{display:inline-flex;align-items:center;gap:12px;
  background:var(--ex-chrome-bg);border:1px solid var(--ex-chrome-line);
  border-radius:var(--ex-r);padding:7px 14px;backdrop-filter:blur(7px);
  box-shadow:var(--ex-sh-chrome);}
.ex-prog .dots{display:inline-flex;gap:7px;}
.ex-prog .dots i{width:9px;height:9px;border-radius:var(--ex-r-pill);
  background:transparent;border:1.5px solid rgba(232,144,43,.45);
  cursor:pointer;transition:background .2s,border-color .2s,transform .2s;}
.ex-prog .dots i:hover{transform:scale(1.18);border-color:var(--ex-acc);}
.ex-prog .dots i.done{background:rgba(232,144,43,.45);border-color:rgba(232,144,43,.45);}
.ex-prog .dots i.now{background:var(--ex-acc);border-color:var(--ex-acc);
  box-shadow:0 0 0 4px rgba(232,144,43,.18);}
.ex-prog .lab{font-family:var(--ex-body);font-weight:600;font-size:12.5px;
  color:var(--ex-chrome-ink);letter-spacing:.02em;}
.ex-prog .lab b{color:var(--ex-acc);font-weight:700;}

/* ===== 5.1 BADGE (TOPBAR RECHTS) ===== */
.ex-badge{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--ex-body);font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ex-acc);
  background:rgba(232,144,43,.10);border:1px solid var(--ex-chrome-line);
  border-radius:var(--ex-r);padding:6px 11px;backdrop-filter:blur(7px);}
.ex-badge .d{width:6px;height:6px;border-radius:50%;background:var(--ex-acc);}

/* ===== 2.4 PERSISTENTER CTA-DOT (Standard: speaker-Stil) ===== */
.ex-cta{position:fixed;right:22px;bottom:46px;z-index:var(--ex-z-cta);
  display:none;align-items:center;gap:10px;cursor:pointer;
  background:rgba(28,21,15,.9);border:1px solid var(--ex-chrome-line);
  border-radius:var(--ex-r-pill);padding:8px 16px 8px 10px;
  box-shadow:var(--ex-sh-chrome);transition:.3s;}
.ex-cta.show{display:flex;animation:exFadeUp .6s ease;}
.ex-cta:hover{border-color:var(--ex-acc);box-shadow:var(--ex-sh-cta);}
.ex-cta .d{width:12px;height:12px;border-radius:50%;background:var(--ex-acc);
  animation:exDot 2.4s ease-out infinite;}
.ex-cta span{font-family:var(--ex-body);font-size:12.5px;font-weight:600;color:var(--ex-chrome-ink);}
@keyframes exDot{0%{box-shadow:0 0 0 0 rgba(232,144,43,.5)}
  70%{box-shadow:0 0 0 12px rgba(232,144,43,0)}100%{box-shadow:0 0 0 0 rgba(232,144,43,0)}}
@keyframes exFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:760px){.ex-cta{right:14px;bottom:42px;}}

/* ===== 2.5 GUIDE- / ERZÄHLER-BOX (das Tour-spezifische Element) ===== */
.ex-guide{position:fixed;left:18px;bottom:22px;z-index:60;max-width:340px;
  display:flex;gap:13px;align-items:flex-start;
  background:var(--ex-chrome-bg);border:1px solid var(--ex-chrome-line);
  border-left:3px solid var(--ex-acc);            /* kantige Akzentkante, nicht zentriert */
  border-radius:var(--ex-r);padding:15px 17px;backdrop-filter:blur(8px);
  box-shadow:var(--ex-sh-chrome);
  transform:translateY(12px);opacity:0;transition:opacity .4s,transform .4s;}
.ex-guide.show{transform:none;opacity:1;}
.ex-guide.hidden{pointer-events:none;}
.ex-guide .av{width:30px;height:30px;border-radius:var(--ex-r);flex:none;
  background:var(--ex-acc-grad);display:flex;align-items:center;justify-content:center;}
.ex-guide .av svg{width:17px;height:17px;color:#2a1a06;}   /* echtes SVG, kein Emoji */
.ex-guide .bd{flex:1;min-width:0;}
.ex-guide .tx{font-family:var(--ex-body);font-size:13.5px;line-height:1.5;color:var(--ex-chrome-ink);}
.ex-guide .tx b{color:var(--ex-acc);font-weight:700;}
/* Zweistufiger Fortschritt im Guide-Streifen: Beat X von 6 + Welt N von 3 */
.ex-guide .gp{margin-top:9px;font-family:var(--ex-body);font-size:11px;font-weight:600;
  letter-spacing:.04em;color:var(--ex-chrome-mute);display:flex;align-items:center;gap:8px;}
.ex-guide .gp b{color:var(--ex-acc);font-weight:700;}
.ex-guide .gp .bar{flex:1;height:3px;border-radius:var(--ex-r-pill);
  background:rgba(232,144,43,.18);overflow:hidden;}
.ex-guide .gp .bar > i{display:block;height:100%;width:0;border-radius:var(--ex-r-pill);
  background:var(--ex-acc);transition:width .35s ease;}
/* Genau zwei Affordances: Weiter + Selbst erkunden (eigene SVG, kein Emoji) */
.ex-guide .acts{margin-top:12px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.ex-guide .nx{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ex-body);font-weight:700;font-size:12.5px;color:var(--ex-acc);
  cursor:pointer;background:none;border:none;padding:0;}
.ex-guide .nx svg{width:14px;height:14px;transition:transform .15s;}
.ex-guide .nx:hover svg{transform:translateX(3px);}
.ex-guide .roam{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ex-body);font-weight:600;font-size:12.5px;color:var(--ex-chrome-mute);
  cursor:pointer;background:none;border:none;padding:0;transition:color .15s;}
.ex-guide .roam:hover{color:var(--ex-chrome-ink);}
.ex-guide .roam svg{width:15px;height:15px;}
/* Auto-Pilot-Schalter, kleines eigenes Play/Pause-Glyph */
.ex-guide .auto{position:absolute;top:10px;right:11px;width:24px;height:24px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(232,144,43,.10);border:1px solid var(--ex-chrome-line);
  border-radius:var(--ex-r);cursor:pointer;color:var(--ex-acc);padding:0;}
.ex-guide .auto svg{width:12px;height:12px;}
.ex-guide{position:fixed;}
/* Geschrumpfte Form: nur noch "Geführt weiter" nach Free-Roam (Baustein F) */
.ex-guide.collapsed{max-width:none;width:auto;padding:11px 15px;}
.ex-guide.collapsed .bd > .tx,
.ex-guide.collapsed .gp,
.ex-guide.collapsed .roam,
.ex-guide.collapsed .auto{display:none;}
.ex-guide.collapsed .acts{margin-top:0;}
@media(max-width:760px){.ex-guide{left:12px;right:12px;bottom:84px;max-width:none;}}

/* ===== 5.x REISE-ÜBERSICHT (Knopf "Reise" + schmale Leiste) ===== */
.ex-journey-btn{position:fixed;left:18px;top:64px;z-index:62;
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:var(--ex-body);font-weight:600;font-size:12px;color:var(--ex-chrome-ink);
  background:var(--ex-chrome-bg);border:1px solid var(--ex-chrome-line);
  border-radius:var(--ex-r);padding:7px 12px;backdrop-filter:blur(7px);box-shadow:var(--ex-sh-chrome);}
.ex-journey-btn svg{width:14px;height:14px;color:var(--ex-acc);}
@media(max-width:760px){.ex-journey-btn{top:auto;bottom:154px;left:12px;}}

.ex-journey{position:fixed;inset:0;z-index:80;display:none;
  align-items:flex-start;justify-content:flex-start;padding:60px 18px 18px;
  background:rgba(8,6,5,.5);backdrop-filter:blur(3px);}
.ex-journey.on{display:flex;}
.ex-journey .panel{width:100%;max-width:320px;
  background:var(--ex-chrome-bg);border:1px solid var(--ex-chrome-line);
  border-radius:var(--ex-r);padding:16px 16px 12px;backdrop-filter:blur(10px);
  box-shadow:var(--ex-sh-chrome);}
.ex-journey .panel .hd{font-family:var(--ex-disp);font-weight:800;font-size:15px;
  color:var(--ex-chrome-ink);letter-spacing:-.01em;margin:0 0 11px;
  display:flex;align-items:center;justify-content:space-between;}
.ex-journey .panel .hd button{background:none;border:none;cursor:pointer;
  color:var(--ex-chrome-mute);font-size:18px;line-height:1;padding:0;}
.ex-journey .leg{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:none;border:none;cursor:pointer;padding:9px 8px;border-radius:var(--ex-r);
  color:var(--ex-chrome-ink);font-family:var(--ex-body);transition:background .15s;}
.ex-journey .leg:hover{background:rgba(232,144,43,.10);}
.ex-journey .leg .n{width:24px;height:24px;flex:none;border-radius:var(--ex-r-pill);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  border:1.5px solid rgba(232,144,43,.45);color:var(--ex-chrome-mute);}
.ex-journey .leg.done .n{background:rgba(232,144,43,.45);border-color:rgba(232,144,43,.45);color:#2a1a06;}
.ex-journey .leg.now .n{background:var(--ex-acc);border-color:var(--ex-acc);color:#2a1a06;}
.ex-journey .leg .t{font-size:13px;font-weight:600;}
.ex-journey .leg .t small{display:block;font-size:11px;font-weight:500;color:var(--ex-chrome-mute);}

/* ===== 2.7 DISCLAIMER-FOOTER (BRAND-KLAMMER UNTEN) ===== */
.ex-disc{position:fixed;left:0;right:0;bottom:0;z-index:var(--ex-z-disclaimer);
  text-align:center;padding:9px 16px;
  font-family:var(--ex-body);font-size:10.5px;letter-spacing:.3px;
  color:var(--ex-chrome-mute);
  background:linear-gradient(0deg,rgba(12,9,7,.86),transparent);
  pointer-events:none;}
.ex-disc b{color:rgba(246,239,228,.82);font-weight:600;}
@media(max-width:760px){.ex-disc{font-size:9.5px;padding:7px 12px;}}

/* ===== 3.1 INTRO-FRAME (erste Sekunden, kein blockierender Startscreen) ===== */
.ex-intro{position:fixed;inset:0;z-index:var(--ex-z-intro);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 9vw;pointer-events:none;                 /* Szene läuft sofort dahinter */
  background:radial-gradient(120% 90% at 22% 28%,rgba(12,9,7,.86),rgba(8,6,5,.94));
  animation:exIntroOut .8s ease 2.2s forwards;}
.ex-intro .mk{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ex-disp);font-weight:800;font-size:clamp(26px,5vw,46px);
  letter-spacing:-.02em;color:#fff;}
.ex-intro .mk .globe-o{width:.72em;height:.72em;color:var(--ex-acc);}
.ex-intro .cl{margin-top:14px;font-family:var(--ex-body);font-weight:500;
  font-size:clamp(15px,2.2vw,20px);color:var(--ex-chrome-mute);max-width:30ch;line-height:1.5;}
.ex-intro .cl em{color:var(--ex-acc);font-style:normal;}
@keyframes exIntroOut{to{opacity:0;transform:translateY(-3%);visibility:hidden;}}

/* ===== 3.2 INTER-WELT-ÜBERGANG (Brand-Look, Orange-Wisch) ===== */
.ex-trans{position:fixed;inset:0;z-index:var(--ex-z-transition);
  display:flex;align-items:center;justify-content:center;
  background:var(--ex-acc-grad);
  clip-path:inset(0 0 0 100%);                       /* startet rechts, wischt nach links auf */
  transition:clip-path .5s cubic-bezier(.7,0,.3,1);}
.ex-trans.in{clip-path:inset(0 0 0 0%);}             /* deckt zu */
.ex-trans.out{clip-path:inset(0 100% 0 0%);}         /* gibt die neue Welt frei */
.ex-trans .card{text-align:center;color:#2a1a06;font-family:var(--ex-disp);}
.ex-trans .card .step{font-family:var(--ex-body);font-weight:700;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;opacity:.8;}
.ex-trans .card .nm{font-weight:800;font-size:clamp(26px,5vw,44px);letter-spacing:-.02em;margin-top:8px;}

/* ===== 3.3 ABSCHLUSS- / CONVERSION-FRAME ===== */
.ex-final{position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:flex-end;padding:24px;
  background:rgba(8,6,5,.55);backdrop-filter:blur(4px);}
.ex-final.on{display:flex;}
.ex-final .sheet{width:100%;max-width:440px;
  background:#FFF9F4;border:1px solid rgba(43,35,32,.12);border-radius:14px;
  padding:34px 32px;box-shadow:0 50px 110px -32px rgba(0,0,0,.5);
  font-family:var(--ex-body);color:#241D18;}
.ex-final .sheet h3{font-family:var(--ex-disp);font-weight:800;font-size:26px;
  letter-spacing:-.02em;line-height:1.08;margin:0 0 10px;}
.ex-final .sheet p{font-size:15px;line-height:1.6;color:#7d7066;margin:0 0 22px;}
.ex-final .sheet p .turn{color:#241D18;font-weight:700;}
.ex-final .btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:none;
  font-family:var(--ex-body);font-weight:700;font-size:16px;
  border-radius:var(--ex-r);padding:15px 28px;color:#2a1a06;background:var(--ex-acc-grad);
  box-shadow:0 10px 24px -9px rgba(216,126,20,.6),inset 0 1px 0 rgba(255,255,255,.4);}
.ex-final .btn svg{width:17px;height:17px;}
.ex-final .note{margin-top:18px;font-size:11.5px;line-height:1.5;color:#a99f95;
  border-top:1px solid rgba(43,35,32,.1);padding-top:12px;}
.ex-final .note b{color:#7d7066;font-weight:600;}
/* Drei kleine Welt-Miniaturen für den Rückblick (gebaut, keine Icons) */
.ex-final .mins{display:flex;gap:9px;margin:0 0 18px;}
.ex-final .mins i{flex:1;height:42px;border-radius:var(--ex-r);
  border:1px solid rgba(43,35,32,.10);}
.ex-final .mins i:nth-child(1){background:linear-gradient(135deg,#f3c98a,#d98a2e);}
.ex-final .mins i:nth-child(2){background:linear-gradient(135deg,#cfe3ee,#7fa9c4);}
.ex-final .mins i:nth-child(3){background:linear-gradient(135deg,#3a2a3f,#7a4a52);}
@media(max-width:760px){.ex-final{align-items:flex-end;justify-content:center;}
  .ex-final .sheet{max-width:none;}}

/* ===== REDUCED-MOTION (deckt den ganzen Layer ab) ===== */
@media(prefers-reduced-motion:reduce){
  .ex-cta .d{animation:none;}
  .ex-cta.show{animation:none;}
  .ex-guide{transition:none;}
  .ex-guide .gp .bar > i{transition:none;}
  .ex-intro{animation:none;opacity:0;visibility:hidden;}  /* sofort frei, kein Blitz */
  .ex-trans{transition:none;}                              /* harte, ruhige Blende statt Wisch */
}