/* Amana · Vier-Entwürfe-Demo · Grundgerüst + Umschaltleiste
   Jeder Entwurf ist eine eigene Seite (index.html = A, b/c/d.html).
   Entwurf A braucht das, weil sein GSAP-Pin und Lenis in einem
   ausgeblendeten Container nichts messen können. */

/* Der Reset gilt nur für B, C und D. Entwurf A bringt seinen eigenen mit,
   deshalb hängt alles hier an .entwurf. */
.entwurf, .entwurf *, .entwurf *::before, .entwurf *::after { box-sizing: border-box; margin: 0; padding: 0; }
.entwurf img, .entwurf video, .entwurf svg { max-width: 100%; display: block; }
.entwurf a { color: inherit; }
.entwurf button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
.entwurf input, .entwurf select { font: inherit; }
.entwurf { line-height: 1.55; }

/* [hidden] muss auch gegen eigenes display gewinnen */
[hidden] { display: none !important; }

/* Einblendungen (B/C/D; A animiert selbst mit GSAP) */
.entwurf [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.entwurf [data-reveal].sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .entwurf [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Umschaltleiste, auf allen vier Seiten gleich ---------- */
.umschalter {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 900; display: flex; align-items: center; gap: 4px;
  background: rgba(20, 20, 20, .88); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  padding: 5px; box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
  font-family: "Inter", system-ui, sans-serif;
}
.umschalter .u-label {
  color: rgba(255, 255, 255, .55); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; padding: 0 10px 0 14px; white-space: nowrap;
}
.umschalter a {
  color: rgba(255, 255, 255, .75); font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  text-decoration: none; transition: background .25s, color .25s;
  display: inline-flex; align-items: center; gap: 6px;
}
.umschalter a:hover { color: #fff; }
.umschalter a.on { background: #fff; color: #141414; }
.umschalter a b { font-weight: 800; }
.umschalter kbd {
  font: 600 10px/1 "Inter", system-ui, sans-serif; opacity: .55;
  border: 1px solid currentColor; border-radius: 4px; padding: 1px 4px;
}
@media (max-width: 860px) {
  /* Vier Namen nebeneinander sprengen 375 px. Auf dem Handy bleiben
     nur die Buchstaben, der volle Name steht im title-Attribut. */
  .umschalter { bottom: 10px; }
  .umschalter .u-label, .umschalter kbd, .umschalter .u-name { display: none; }
  .umschalter a { padding: 9px 15px; font-size: 14px; }
  /* Entwurf A blendet auf dem Handy unten eine eigene Spendenleiste ein */
  html[data-entwurf="a"] .umschalter { bottom: 66px; }
}

/* Demo-Hinweis */
.demo-band {
  position: fixed; top: 0; right: 0; z-index: 901;
  background: #141414; color: #fff; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; padding: 5px 12px; border-bottom-left-radius: 8px;
  opacity: .75; pointer-events: none;
  font-family: "Inter", system-ui, sans-serif;
}

/* Video-Lightbox (Entwurf C) */
.video-box {
  position: fixed; inset: 0; z-index: 950; background: rgba(10, 8, 5, .86);
  display: grid; place-items: center; padding: 24px;
}
.video-box video { width: min(860px, 100%); max-height: 82vh; border-radius: 10px; background: #000; }