/* ============================================================
   Schichtfix — Demo (interaktiver Klick-Prototyp "Ein Morgen mit Schichtfix")
   Baut auf tokens.css auf. Farbrollen strikt: Website-Chrome nur Deep Blue /
   Ocean (einzige Interaktionsfarbe) / neutrale Flaechen; Amber nur im Finale.
   Das Krank-Orange erscheint AUSSCHLIESSLICH innerhalb der simulierten
   App-Flaeche (.demo-screen-Scope) und ist je Vorkommen mit "app-idiom only"
   markiert — nie als Website-Farbe.
   ============================================================ */

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

/* --- Demobar (Kopfzeile, bleibt) --- */
.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: 1720px; 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; }
.demobar-logo { display: inline-flex; align-items: center; margin-right: auto; }
.demobar-logo img { height: 34px; width: auto; display: block; }

/* --- Modus-Umschalter Tour / Frei erkunden --- */
.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;
  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); }

/* --- Modus-Container --- */
#demo { flex: 1; width: 100%; max-width: 1720px; margin: 0 auto; padding: 30px 24px 40px; outline: none; }
.mode { display: none; }
.mode.is-active { display: block; }

/* ============================================================
   TOUR
   ============================================================ */
.tour-layout { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
@media (min-width: 1040px) {
  /* Rail fix, Buehne nimmt den Rest: Screenshots wachsen mit dem Monitor
     und schrumpfen automatisch, wenn weniger Platz ist (Michael 10.07.2026) */
  .tour-layout { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 48px; }
  .tour-rail { order: -1; }   /* Rail links, Buehne rechts */
}

/* --- Buehne --- */
.tour-stagewrap { display: flex; justify-content: center; align-items: center; min-height: 300px; }
.tour-step { display: none; }
.tour-step.is-active { display: block; animation: sfFade .5s var(--ease-out) both; }
.tour-step .phone { width: min(86vw, 300px); margin: 0 auto; }
.tour-step .browsercard { width: 100%; max-width: 1240px; margin: 0 auto; }
@media (min-width: 1040px) {
  /* Schmale Buehnen-Inhalte (Handy, Titelkarte) nicht in der breiten Stage zentrieren:
     leicht nach links versetzt (bewusst nicht buendig), sonst klafft die Mitte (Michael 10.07.2026) */
  .tour-step .phone { margin: 0 auto 0 14%; }
  .tour-step .titlecard { margin: 0 auto 0 8%; }
}

/* --- Screen-Holder (deckt exakt das Bild; %-Hotspots mappen aufs Bild) --- */
.screen-holder { position: relative; display: block; }
.phone .screen-holder { border-radius: 32px; overflow: hidden; }

/* --- Hotspots + Puls --- */
/* Signal-Farbe Fuchsia: bewusst ausserhalb der App-Palette, damit der Ring sich von
   allen Screen-Inhalten abhebt (Gruen-Buttons kollidierten mit Ocean; Michael 10.07.2026) */
.hotspots { position: absolute; inset: 0; }
.hotspot { position: absolute; transform: translate(-50%, -50%); border: none; padding: 0;
  background: transparent; cursor: pointer; border-radius: 14px; z-index: 3;
  -webkit-tap-highlight-color: transparent; }
.hotspot:focus-visible { outline: 3px solid #D946EF; outline-offset: 3px; }
.hotspot-ring { position: absolute; inset: 0; border-radius: 14px;
  border: 4px solid #D946EF; box-shadow: 0 0 0 0 rgba(217,70,239,.55);
  animation: hsPulse 1.9s var(--ease-out) infinite; }
.hotspot:hover .hotspot-ring { border-color: #C026D3; }
@keyframes hsPulse {
  0%   { box-shadow: 0 0 0 0 rgba(217,70,239,.5); }
  70%  { box-shadow: 0 0 0 16px rgba(217,70,239,0); }
  100% { box-shadow: 0 0 0 0 rgba(217,70,239,0); }
}
/* Hotspot-Label (Tooltip-Punkt) */
.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;
  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; }

/* --- Desktop-Ansicht-Badge (bei Desktop-Screens auf Mobil) --- */
.device-badge { display: none; position: absolute; top: 10px; right: 10px; z-index: 4;
  background: rgba(27,43,87,.86); color: #fff; font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; letter-spacing: .01em; }
@media (max-width: 1039px) { .tour-step.is-desktop .device-badge { display: inline-block; } }

/* --- Erzaehl-Rail --- */
.tour-rail { display: flex; flex-direction: column; }
.tour-chapterline { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue-ocean-700); }
#tour-title { margin: 10px 0 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.12;
  font-size: clamp(23px, 3.2vw, 33px); color: var(--color-brand); }
#tour-text { margin: 14px 0 0; font-size: 16px; line-height: 1.58; color: var(--text-muted); max-width: 460px; }

.tour-progress { display: flex; gap: 8px; margin: 26px 0 0; }
.progress-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-cool);
  border: none; padding: 0; cursor: pointer; transition: background var(--dur) var(--ease-out),
  transform var(--dur) var(--ease-out); }
.progress-dot:hover { background: var(--blue-ocean); }
.progress-dot.is-active { background: var(--blue-ocean); transform: scale(1.35); }
.progress-dot.is-done { background: var(--blue-ocean-600); }

.tour-nav { display: flex; gap: 12px; margin: 26px 0 0; }
.tour-nav .btn { height: 50px; padding: 0 24px; font-size: 15px; }
#tour-prev[disabled], #tour-next[disabled] { opacity: .4; pointer-events: none; }

/* Titelkarten (Intro/Finale): Botschaft lebt in der Karte -> Rail-Text ausblenden */
.tour-rail.is-titlecard .tour-chapterline,
.tour-rail.is-titlecard #tour-title,
.tour-rail.is-titlecard #tour-text { display: none; }
/* ... ausser die Karte bringt einen eigenen kurzen Rail-Titel mit (railTitle, z.B. Finale) */
.tour-rail.is-titlecard.has-railtitle #tour-title { display: block; }

/* Mobil: Steuerung in die Daumen-Zone (sticky unten, Muster wie Site-Sticky-CTA).
   Der fixe Balken liegt in #tour -> im Erkunden-Modus (Tour display:none) verschwindet er. */
@media (max-width: 1039px) {
  #tour .tour-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 .tour-nav .btn { flex: 1; height: 52px; }
  body { padding-bottom: 92px; }
}

/* --- Titelkarten (Intro / Finale) --- */
.titlecard { background: var(--gradient-header); color: #fff; border-radius: var(--radius-card);
  padding: clamp(28px, 5vw, 52px); text-align: center; box-shadow: var(--shadow-pop);
  max-width: 560px; margin: 0 auto; }
.titlecard .tc-kicker { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue-ocean); }
.titlecard h2 { color: #fff; margin: 14px 0 0; font-weight: 900; letter-spacing: -.025em;
  line-height: 1.08; font-size: clamp(26px, 4.4vw, 40px); }
.titlecard p { margin: 16px auto 0; font-size: 17px; line-height: 1.58; color: rgba(255,255,255,.85); max-width: 420px; }
.tc-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 24px 0 0; }
.tc-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 8px 14px;
  font-size: 14px; font-weight: 600; color: #fff; }
.tc-chip .tc-ava { width: 24px; height: 24px; border-radius: 50%; background: var(--blue-ocean);
  color: var(--blue-deep); display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.tc-fiktiv { margin-top: 16px; font-size: 12.5px; color: rgba(255,255,255,.6); }
.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; }

/* ============================================================
   App-Idiom-Overlays (SIMULATION) — .demo-screen-Scope
   Alles hier ist bewusst "im App-Look": abgesetzt vom Website-Chrome.
   ============================================================ */
.demo-screen { position: absolute; z-index: 6; font-family: var(--font-sans); }

/* Datum-Fill (Schritt 2): fuellt animiert den Wert ins Formularfeld */
.datum-fill { left: 8%; top: 47.1%; width: 60%; height: 4.2%;
  display: flex; align-items: center; padding-left: 22px;
  color: var(--blue-deep); font-weight: 700; font-size: clamp(13px, 3.4vw, 17px);
  opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.tour-step.sim-datum .datum-fill { opacity: 1; transform: none; }

/* Mitteilungs-Karte (Schritt 4): fliegt ins Cockpit ein und IST der Klickpunkt */
.mitteilung-card { right: 3%; top: 15%; width: 46%; max-width: 340px;
  background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-pop);
  border-left: 4px solid #F68B57;   /* app-idiom only: Krank-Kategorie-Akzent in der App-Simulation */
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  opacity: 0; transform: translateX(28px) scale(.96); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.tour-step.sim-on .mitteilung-card { opacity: 1; transform: none; }
/* Ring umrandet die Karte selbst; erscheint erst NACH dem Einflug (Karte 0.5s, Ring ab 0.7s) */
.mitteilung-card .hotspot-ring { inset: -7px; border-radius: 18px;
  opacity: 0; transition: opacity .35s var(--ease-out); pointer-events: none; }
.tour-step.sim-on .mitteilung-card .hotspot-ring { opacity: 1; transition-delay: .7s; }
.mitteilung-card:focus-visible { outline: 3px solid #D946EF; outline-offset: 3px; }
.mitteilung-card .mc-dot { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  background: var(--status-danger-bg); color: var(--status-danger); display: grid; place-items: center; }
.mitteilung-card .mc-t { font-weight: 800; color: var(--blue-deep); font-size: 14px; }
.mitteilung-card .mc-s { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.mitteilung-card .mc-badge { margin-top: 6px; display: inline-block; font-size: 11px; font-weight: 700;
  color: var(--blue-ocean-700); }

/* Antrag-Detail (Schritt 6): Overlay mit Genehmigen */
.antrag-detail { left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.94);
  width: min(78%, 380px); background: #fff; border-radius: 16px; padding: 22px 22px 20px;
  box-shadow: var(--shadow-pop); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.tour-step.sim-on .antrag-detail { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); }
.antrag-detail .ad-name { font-weight: 800; color: var(--blue-deep); font-size: 17px; }
.antrag-detail .ad-meta { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
.antrag-detail .ad-status { margin-top: 14px; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--status-warn-bg); color: #9a7a09; transition: background .3s, color .3s; }
.antrag-detail.is-approved .ad-status { background: var(--status-ok-bg); color: var(--status-ok); }
.antrag-detail .ad-actions { margin-top: 16px; display: flex; gap: 10px; }
.antrag-detail .ad-actions .btn { height: 44px; padding: 0 18px; font-size: 14px; flex: 1; }

/* ============================================================
   FREI ERKUNDEN
   ============================================================ */
.explore-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1040px) { .explore-layout { grid-template-columns: 260px 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: 7px 14px; 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: 11px 14px; 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
   ============================================================ */
.demo-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); }

/* ============================================================
   Motion aus bei reduced-motion (Puls, Fly-ins, Fades)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hotspot-ring { animation: none !important; }
  .tour-step.is-active { animation: none !important; }
  .datum-fill, .mitteilung-card, .antrag-detail {
    transition: none !important; }
}