/* ============================================================
   Prototype Banner — NUR fuer die Prototyp-Phase
   Wird in Phase 2 (WordPress-Theme-Portierung) komplett entfernt.

   .variant-banner       Schwebender Variant-Switcher unten am Viewport
   html.is-embedded      Iframe-Modus (in Index-Mockups eingebettet)
   body::before (mobile) Schwarzer iPhone-Statusbar-Streifen im Embed
   ============================================================ */

.variant-banner {
  position: fixed;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-anthrazit);
  color: var(--color-sand);
  padding: 0.6em 1.2em;
  border-radius: 999px;
  font-family: var(--font-modern-artisan);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 100;
  display: flex;
  gap: 1em;
  align-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.variant-banner a {
  color: var(--color-gold);
  text-decoration: none;
}
.variant-banner a:hover { text-decoration: underline; }

/* In iframe-Vorschau (Index-Mockups) ausblenden */
html.is-embedded .variant-banner { display: none; }

/* iPhone Safe-Area-Top: wenn in iframe UND Phone-Breakpoint, ein dunkler
   Status-Bar-Streifen oben. Per Variante muss die Top-Komponente (Nav/Header)
   zusaetzlich Top-Padding bekommen damit nichts hinter der Statusbar
   verschwindet. */
@media (max-width: 720px) {
  html.is-embedded body {
    position: relative;
  }
  html.is-embedded body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 32px;
    background: var(--color-anthrazit);
    z-index: 1000;
    pointer-events: none;
  }
}