/* ==========================================================================
   Live-Vorschau (#einblick .gbins-browser) — Desktop/Mobil-Umschalter.
   CSS-only: zwei versteckte Radios (direkte Kinder von .gbins-browser) +
   Icon-Labels in der Browser-Leiste (nur Icons, kein Text; a11y via aria-label
   an den Radios).

   Mobil-Modus: das GESAMTE Browser-Mockup schrumpft auf Handy-Breite (Rahmen
   schrumpft MIT), zentriert, Vorschau ins Hochformat — der iframe füllt den
   schmalen Rahmen, die eingebettete Seite rendert dadurch mobil. Über :has()
   (moderne Browser), damit vom Kind-Radio aus der Eltern-Rahmen getroffen wird.

   Der Wechsel ist SANFT animiert (max-width + aspect-ratio-Transition) statt
   hart. Damit max-width animierbar ist, braucht die Basis einen px-Wert
   (1200px kappt den Desktop-Rahmen nicht, ~1080 natürlich).

   Umschalter nur auf DESKTOP: auf Mobil-Viewport sieht man ohnehin nur die
   mobile Vorschau -> Toggle dort ausgeblendet.
   Markenfarben ausschließlich über --we-*-Variablen.
   ========================================================================== */

/* Radios versteckt, aber per Tastatur fokussierbar (nicht display:none) */
.gbins-vp-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Segmented-Control in der Browser-Leiste (Icon-Buttons) */
.gbins-vp {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding: 3px;
  border: 1px solid var(--we-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  flex: 0 0 auto;
}
.gbins-vp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--we-muted);
  cursor: pointer;
  user-select: none;
}
.gbins-vp-btn svg {
  display: block;
  flex: 0 0 auto;
}
.gbins-vp-btn:hover {
  color: var(--we-text);
}

/* Aktiver Zustand (grüner Marken-Pill) */
#gbins-vp-d:checked ~ .gbins-browser-bar .gbins-vp-btn[for="gbins-vp-d"],
#gbins-vp-m:checked ~ .gbins-browser-bar .gbins-vp-btn[for="gbins-vp-m"] {
  color: var(--we-on-primary, #0a0a0f);
  background: var(--we-primary);
}

/* Tastatur-Fokus sichtbar machen */
#gbins-vp-d:focus-visible ~ .gbins-browser-bar .gbins-vp-btn[for="gbins-vp-d"],
#gbins-vp-m:focus-visible ~ .gbins-browser-bar .gbins-vp-btn[for="gbins-vp-m"] {
  outline: 2px solid var(--we-primary);
  outline-offset: 2px;
}

/* Open-Link folgt direkt auf den Umschalter (statt margin-left:auto) */
.gbins-browser-bar .gbins-open {
  margin-left: 14px;
}

/* --- Mobil-Modus (nur Desktop-Viewport): ganzes Mockup auf Handy-Breite,
       SANFT animiert (max-width + aspect-ratio) --- */
@media (min-width: 769px) {
  .gbins-browser {
    max-width: 1200px; /* px-Basis, damit max-width animierbar ist; kappt Desktop nicht */
    transition: max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .gbins-browser-view {
    transition: aspect-ratio 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .gbins-browser:has(#gbins-vp-m:checked) {
    max-width: 400px;
    margin-inline: auto;
  }
  .gbins-browser:has(#gbins-vp-m:checked) .gbins-browser-view {
    aspect-ratio: 9 / 16;
  }
  .gbins-browser:has(#gbins-vp-m:checked) .gbins-url {
    display: none;
  }
}

/* --- Umschalter nur auf Desktop; auf Mobil-Viewport ausblenden --- */
@media (max-width: 768px) {
  .gbins-vp {
    display: none;
  }
}