/* Nur fuer die Einbettung im Portfolio, erzeugt von tools/sync-pace.sh.
   Die Farben stehen hier als Hex, weil im iframe die Portfolio-Tokens aus
   src/styles/global.css nicht gelten. Bei Palettenaenderung mitziehen:
   surface #0c2c59 · bg-deep #070b1d · secondary #244b94 · text-1 #ffffff
   · text-2 #c3cce0 · accent #4effe2 */

/* Demo-Menue: unten links, ohne „All screens", ohne Slides, ohne Sprachwahl */
/* linksbündig mit der Textspalte der Seite: --grid-links nachgerechnet
   (Überhang max(0, 50vw − 45rem) + Rand clamp(16, 6.667vw, 96)); Yan 2026-08-23 */
.demo-fab, .demo-panel { right: auto !important; left: calc(max(0px, 50vw - 45rem) + clamp(1rem, 6.667vw, 6rem)) !important; }
#dpListToggle, #dpLinks, #dpDeckDe, .lang-fab { display: none !important; }

/* Buehne statt eigenem Verlauf: farbe/surface, damit der Rahmen zur Seite passt */
body { background: #0c2c59 !important; }

/* Telefon ohne Schatten in der Einbettung (Yan, 2026-08-24) */
.phone { box-shadow: none !important; }

/* Zeiger nur auf Bedienbarem: die Hero-Karte selbst ist nicht klickbar,
   nur der Regler darin (Yan, 2026-08-24) */
.hero-card { cursor: default !important; }

/* Tabbar ist Attrappe, nur Mood soll als klickbar lesen (Yan, 2026-08-24) */
.tab { cursor: default !important; }
.tabbar .tab:last-child { cursor: pointer !important; }

/* Demo-Knopf auf Hoehe der Telefon-Unterkante: das vertikale Polster (padY 96)
   teilt sich 48/48, solange die Hoehe die Skalierung bestimmt — auf allen
   realen Viewports der Fall (Yan, 2026-08-24) */
.demo-fab { bottom: 48px !important; }
.demo-panel { bottom: 90px !important; }   /* 48 + Knopfhoehe ~34 + 8 Luft */

/* Schmal (Yan, 2026-09-12): das Telefon fuellt die Breite bis auf 48 px je
   Seite (padX 96 in app.js, iframe-Hoehe in pace.astro = Telefon + 48 oben +
   74 unten). Die Buehne haengt oben statt mittig, der Demo-Knopf sitzt
   UNTER dem Telefon, buendig mit dessen linker Kante (48), 16 px Luft;
   das Menue klappt darueber auf (bottom 24 + Knopf 34 + 8). */
@media (max-width: 767px) {
  .stage { min-height: 0 !important; align-items: flex-start !important; padding-top: 48px !important; }
  .demo-fab { bottom: 24px !important; left: 48px !important; }
  .demo-panel { bottom: 66px !important; left: 48px !important; }
}

/* Menue in Portfolio-Farben (Flaeche bg-deep auf surface, Linie secondary) */
.demo-fab, .demo-panel {
  background: #070b1d !important;
  border-color: #244b94 !important;
  color: #c3cce0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.demo-fab:hover { color: #ffffff !important; }
.dp-head { color: #c3cce0 !important; }
.dp-btn, .dp-toggle { color: #ffffff !important; }
.dp-btn:hover { background: #0c2c59 !important; }
.dp-switch { background: #244b94 !important; box-shadow: none !important; }
.dp-switch::after { background: #ffffff !important; }   /* Punkt weiss (Yan) */
.dp-toggle input:checked + .dp-switch { background: #4effe2 !important; }
.dp-toggle input:checked + .dp-switch::after { background: #070b1d !important; }

/* Custom Cursor in der Einbettung (Yan, 2026-08-25): gleiche Optik wie auf
   der Portfolio-Seite (BaseLayout.astro) — Accent-Punkt, Invert-Kreis beim
   Hover. Logik liegt in js/zeiger.js (erzeugt dieses Skript weiter unten). */
html.hat-zeiger, html.hat-zeiger * { cursor: none !important; }
.zeiger {
  display: none;
  position: fixed;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4effe2;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  scale: 1;
  transition: scale 0.18s ease, opacity 0.18s ease;
  will-change: translate;
}
html.hat-zeiger .zeiger { display: block; }
.zeiger.sichtbar { opacity: 1; }
.zeiger.gross { scale: 2.8; background: #fff; mix-blend-mode: difference; }