/* Helle Vorschau-Variante (Wunsch Dr. Elseweifi 2026-10-21: „die dunkle Farbe hell wie masculine.de testen“).
   Nur auf staging.masculine.eu geladen und nur aktiv mit <html class="v-hell"> (Umschalter unten links oder ?variante=hell).
   Prinzip: in den dunklen Flächen werden die Farb-Tokens umgedreht – Fläche hell, Text dunkel, Akzent Blau mit ≥ 4,5:1. */
.v-hell :is(.hero, .op-hero, .dark, .cta, .cta-band, .marquee, .verdict, .site-footer) {
  --deep: #EAF2F5;
  --deep-2: #FFFFFF;
  --deep-3: #DCE8ED;
  --on-deep: #43525A;
  --on-deep-dim: #5F6E75;
  --hair: rgba(22, 37, 44, .14);
  --sky: #2F6A82;        /* 5,6:1 auf #EAF2F5 */
  --white: #16252C;      /* „weißer“ Text auf dunkel wird hier Überschriften-Dunkel */
}
.v-hell .site-footer { color: var(--text); border-top: 1px solid var(--line) }
.v-hell :is(.hero, .op-hero, .cta, .cta-band) .btn-line { border-color: rgba(22, 37, 44, .35) }
.v-hell :is(.hero, .op-hero, .dark, .cta, .cta-band) .btn-solid { color: #fff }
.v-hell :is(.hero, .op-hero, .dark, .cta, .cta-band) .btn-solid:hover { background: #24566A }
.v-hell .hero .iso { opacity: .07 }
.v-hell .hexphoto::after { background: linear-gradient(180deg, transparent 65%, rgba(234, 242, 245, .35)) }
.v-hell .cube-badge { filter: drop-shadow(0 12px 22px rgba(22, 37, 44, .18)) }
.v-hell :is(.namecard, .facts, .place) { background: rgba(255, 255, 255, .82) }
.v-hell .cta::after { background: linear-gradient(90deg, var(--deep) 30%, rgba(234, 242, 245, .6)) }

/* Kopfzeile über dem hellen Hero: dunkles Logo und dunkle Schrift (geöffnetes Menü bleibt dunkel) */
.v-hell .hdr:not(.solid):not(.menu-open) { color: var(--ink) }
.v-hell .hdr:not(.solid):not(.menu-open) .logo .on-dark { opacity: 0 }
.v-hell .hdr:not(.solid):not(.menu-open) .logo .on-light { opacity: 1 }

/* Umschalter (nur Staging) */
.variant-switch { position: fixed; left: 14px; bottom: 14px; z-index: 70; display: flex; border: 1px solid var(--line); background: #fff;
  font: 600 13px/1 var(--f-sans); box-shadow: 0 6px 18px rgba(0, 0, 0, .15) }
.variant-switch button { padding: 9px 12px; color: var(--ink); background: none; border: 0; cursor: pointer }
.variant-switch button[aria-pressed="true"] { background: var(--ink); color: #fff }
@media (max-width: 640px) { .variant-switch { bottom: 84px } }   /* über der mobilen Sticky-Bar */