/* ————— RHVÖ — Basis: Reset, Typo, Chrome (Nav, Loader, Footer, Buttons) ————— */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:var(--fs-body);line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--pine);color:var(--paper)}
:focus-visible{outline:2px solid var(--pine);outline-offset:3px;border-radius:4px}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.serif{font-family:var(--serif);font-weight:500}
.italic{font-style:italic}
.label{font-family:var(--sans);font-weight:600;letter-spacing:.28em;font-size:var(--fs-label);
  text-transform:uppercase;color:var(--ink-soft)}
.label .tick{display:inline-block;width:22px;height:2px;background:var(--rot);
  vertical-align:middle;margin-right:.8rem;transform:translateY(-1px)}

h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.01em;color:var(--ink)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}

.skip-link{position:fixed;top:-100px;left:1rem;z-index:200;background:var(--pine);color:#fff;
  padding:.7rem 1.2rem;border-radius:var(--radius-pill);transition:top .3s}
.skip-link:focus{top:1rem}

/* Nur für Vorleseprogramme: Text, der auf dem Schirm keinen Platz braucht,
   etwa die Rückmeldung eines Knopfes, der bloß ein Zeichen zeigt. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ————— Scroll-Progress ————— */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:130;background:transparent;pointer-events:none}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--marine),var(--marine-bright));
  transform-origin:0 50%;transform:scaleX(0)}

/* ————— Navigation ————— */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1.2rem,3vw,2.6rem);
  transition:height .45s cubic-bezier(.4,0,.2,1),background .45s,box-shadow .45s,backdrop-filter .45s}
/* Trägt die Navigation über hellem Grund (Unterseiten). Auf der Startseite
   liegt sie über dem Video und wird stattdessen hell gesetzt — siehe unten. */
.nav::before{content:'';position:absolute;inset:0 0 auto 0;height:118%;pointer-events:none;z-index:-1;
  background:linear-gradient(rgba(250,247,242,.62) 0%,rgba(250,247,242,.34) 46%,rgba(250,247,242,0) 100%);
  opacity:1;transition:opacity .45s}

/* ————— Navigation über dem Hero-Video (nur Startseite) —————
   Statt die Leiste mit einem weißen Verlauf zu unterlegen, wird die Schrift
   hell. Der Hero bleibt dadurch vollkommen frei, und über dem dunklen Waldrand
   liest sich Weiß besser als das Marine. Sobald gescrollt wird, greift
   .scrolled mit Papierhintergrund und alles kehrt in die Grundfarben zurück.
   Bei offenem Menü ebenso, dort liegt Papier hinter der Leiste. */
body.home .nav:not(.scrolled)::before{opacity:0}
html:not(.menu-open) body.home .nav:not(.scrolled){
  --nav-fg:#fff;
  --nav-fg-soft:rgba(255,255,255,.74);
}
/* Dunkler, nicht weißer Schatten: hält die helle Schrift auch dort lesbar, wo
   das Video oben links in hellen Dunst läuft — ohne wieder Weiß einzubringen. */
body.home .nav:not(.scrolled) .nav-wordmark,
body.home .nav:not(.scrolled) .nav-links a{text-shadow:0 1px 10px rgba(12,14,24,.45)}
body.home .nav:not(.scrolled) .nav-wordmark strong,
body.home .nav:not(.scrolled) .nav-links a{color:var(--nav-fg,var(--ink))}
body.home .nav:not(.scrolled) .nav-wordmark span{color:var(--nav-fg-soft,var(--ink-soft))}
body.home .nav:not(.scrolled) .burger span{background:var(--nav-fg,var(--ink))}
body.home .nav:not(.scrolled) .nav-links a::after{background:var(--nav-fg,var(--pine))}
body.home .nav:not(.scrolled) .nav-crest{filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))}
.nav.scrolled{height:var(--nav-h-small);background:rgba(250,247,242,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--hairline)}
.nav.scrolled::before{opacity:0}

.nav-brand{display:flex;align-items:center;gap:.85rem;min-width:0}
.nav-crest{height:46px;width:auto;transition:height .45s cubic-bezier(.4,0,.2,1)}
.nav.scrolled .nav-crest{height:38px}
.nav-wordmark{display:flex;flex-direction:column;line-height:1.16}
.nav-wordmark strong{font-family:var(--sans);font-weight:700;font-size:.92rem;letter-spacing:.14em}
.nav-wordmark span{font-size:.66rem;letter-spacing:.20em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}

.nav-links{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:clamp(1.2rem,2.6vw,2.6rem)}
.nav-links a{font-weight:500;font-size:.92rem;letter-spacing:.04em;position:relative;padding:.35rem 0;color:var(--ink)}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--pine);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}

.nav-right{display:flex;align-items:center;gap:.6rem}

/* Instagram-Icon — transparent, rosa Icon */
.btn-ig{position:relative;display:inline-flex;align-items:center;justify-content:center;
  aspect-ratio:1;padding:.5rem;
  border:1px solid rgba(225,48,108,.45);border-radius:var(--radius-pill);
  color:var(--ig);background:transparent;
  transition:background .3s,border-color .3s,color .3s,transform .3s;will-change:transform}
.btn-ig:hover{background:rgba(225,48,108,.08);border-color:rgba(225,48,108,.7);color:var(--ig-dark)}
.btn-ig svg{width:18px;height:18px;display:block}

/* WhatsApp-Pill — dezent gefüllt, grünes Icon, Puls-Halo */
.btn-wa{position:relative;display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(37,211,102,.15);color:var(--ink);font-weight:600;font-size:.83rem;letter-spacing:.02em;
  padding:.5rem 1rem;border:1px solid rgba(37,211,102,.7);border-radius:var(--radius-pill);
  transition:background .3s,border-color .3s,color .3s,transform .3s;will-change:transform}
.btn-wa:hover{background:rgba(37,211,102,.24);border-color:rgba(37,211,102,.95);color:var(--wa-dark)}
.nav-right .btn-wa{aspect-ratio:1;justify-content:center;padding:.5rem}
.btn-wa svg{width:18px;height:18px;flex:none;color:var(--wa);transition:color .3s}
.btn-wa:hover svg{color:var(--wa-dark)}
.btn-wa .halo{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 rgba(37,211,102,.35);animation:halo 6s ease-out infinite}
@keyframes halo{
  0%,86%{box-shadow:0 0 0 0 rgba(37,211,102,.35);opacity:1}
  96%{box-shadow:0 0 0 18px rgba(37,211,102,0);opacity:0}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);opacity:0}
}

/* Buttons — ruhige Pille mit Uppercase-Mikrotypografie, der Pfeil sitzt in
   einem eigenen Kreis. Ghost füllt sich beim Hover mit einer Pinien-Welle. */
.btn{position:relative;display:inline-flex;align-items:center;gap:.85rem;
  font-weight:600;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;
  padding:.95rem 1.6rem;border-radius:var(--radius-pill);border:1px solid transparent;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .45s cubic-bezier(.22,1,.36,1),border-color .45s,box-shadow .45s,transform .3s;
  will-change:transform}
/* Mit Pfeil-Kreis rückt die rechte Kante näher an den Kreis heran */
.btn:has(.arrow){padding:.55rem .6rem .55rem 1.6rem}
.btn .arrow{display:inline-grid;place-items:center;width:2.15rem;height:2.15rem;flex:none;
  border-radius:50%;font-size:.95rem;line-height:1;letter-spacing:0;
  transition:transform .45s cubic-bezier(.22,1,.36,1),background .45s,color .45s,box-shadow .45s}
.btn:hover .arrow{transform:scale(1.07)}
/* Füll-Welle (nur Ghost nutzt sie) */
.btn::before{content:'';position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
  background:var(--pine);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s cubic-bezier(.22,1,.36,1)}
.btn-primary{background:linear-gradient(150deg,var(--marine-bright) 0%,var(--marine) 55%,var(--marine-deep) 100%);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 34px -18px rgba(24,27,44,.55)}
.btn-primary::before{display:none}
.btn-primary .arrow{background:rgba(255,255,255,.14);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 22px 42px -18px rgba(24,27,44,.75)}
.btn-primary:hover .arrow{background:#fff;color:var(--pine)}
.btn-ghost{border-color:rgba(34,38,60,.22);color:var(--ink);background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-ghost .arrow{box-shadow:inset 0 0 0 1px rgba(34,38,60,.18)}
.btn-ghost:hover{color:#fff;border-color:var(--pine)}
.btn-ghost:hover::before{transform:scaleX(1)}
.btn-ghost:hover .arrow{background:rgba(255,255,255,.14);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}

/* ————— Burger (mobil) — zwei Haarlinien, die zum Kreuz zusammenfahren ————— */
.burger{display:none;position:relative;width:44px;height:44px;margin-right:-10px;
  border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.burger span{position:absolute;right:9px;height:1.5px;border-radius:2px;background:var(--ink);
  transition:width .5s cubic-bezier(.65,0,.35,1),transform .5s cubic-bezier(.65,0,.35,1)}
.burger span:nth-child(1){top:18px;width:26px}
.burger span:nth-child(2){top:25px;width:17px;transition-delay:.05s}
.burger[aria-expanded="true"] span:nth-child(1){width:24px;transform:translateY(3.5px) rotate(45deg);transition-delay:.05s}
.burger[aria-expanded="true"] span:nth-child(2){width:24px;transform:translateY(-3.5px) rotate(-45deg);transition-delay:0s}

/* Bei offenem Menü bleibt in der Leiste nur Wappen + Schließkreuz stehen */
.nav-right .btn-ig,.nav-right .btn-wa{
  transition:opacity .35s ease,background .3s,border-color .3s,color .3s,transform .3s}
html.menu-open .nav-right .btn-ig,html.menu-open .nav-right .btn-wa{opacity:0;pointer-events:none}

/* ————— Mobiles Menü ————— */
.mobile-menu{position:fixed;inset:0;z-index:110;
  background:rgba(250,247,242,.93);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
  padding:calc(var(--nav-h-small) + 2.4rem) var(--gutter) calc(2.4rem + env(safe-area-inset-bottom,0px));
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s cubic-bezier(.4,0,.2,1),visibility .5s}
.mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto}

/* Rechtsbündig — der Blick bleibt dort, wo der Burger steht.
   auto-Ränder zentrieren den Block, geben ihn bei wenig Höhe aber zum Scrollen frei */
.mobile-menu-nav{display:flex;flex-direction:column;margin:auto 0 0 auto;width:100%;max-width:30rem}
.mobile-menu-nav a{display:flex;align-items:center;justify-content:flex-end;gap:.9rem;text-align:right;
  font-family:var(--serif);font-weight:500;font-size:clamp(1.35rem,5.8vw,1.75rem);letter-spacing:-.015em;
  color:var(--ink);padding:1.05rem 0;border-bottom:1px solid var(--hairline)}
.mobile-menu-nav a:first-child{border-top:1px solid var(--hairline)}
/* Chevron endet genau auf der Flucht des Schließkreuzes */
.mobile-menu-nav a::after{content:'';width:7px;height:7px;flex:none;
  border-right:1.5px solid var(--ink-soft);border-top:1.5px solid var(--ink-soft);
  transform:rotate(45deg);opacity:.32;transition:opacity .3s,transform .3s}
.mobile-menu-nav a:active::after{opacity:.7;transform:rotate(45deg) translate(2px,-2px)}
.mobile-menu-nav a[aria-current="page"]{color:var(--pine)}
.mobile-menu-nav a[aria-current="page"]::after{border-color:var(--pine);opacity:.75}

.mobile-menu-foot{display:flex;align-items:center;justify-content:flex-end;gap:.7rem;
  margin:2.2rem 0 auto auto}
.mobile-menu-foot .btn-wa{padding:.75rem 1.3rem;font-size:.85rem;gap:.55rem}
.mobile-menu-foot .btn-ig,.mobile-menu-foot .btn-login{padding:.75rem}

/* Gestaffeltes Einblenden der Menüzeilen — von rechts herein, wie das Menü selbst */
.mobile-menu-nav a,.mobile-menu-foot{opacity:0;transform:translateX(18px);
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.mobile-menu.open .mobile-menu-nav a,.mobile-menu.open .mobile-menu-foot{opacity:1;transform:none}
.mobile-menu.open .mobile-menu-nav a:nth-child(1){transition-delay:.10s}
.mobile-menu.open .mobile-menu-nav a:nth-child(2){transition-delay:.16s}
.mobile-menu.open .mobile-menu-nav a:nth-child(3){transition-delay:.22s}
.mobile-menu.open .mobile-menu-nav a:nth-child(4){transition-delay:.28s}
.mobile-menu.open .mobile-menu-nav a:nth-child(5){transition-delay:.34s}
.mobile-menu.open .mobile-menu-foot{transition-delay:.40s}

/* Flache Geräte (Querformat): kompaktere Zeilen statt Scrollen */
@media (max-height:560px){
  .mobile-menu{padding-top:calc(var(--nav-h-small) + 1rem);padding-bottom:1.4rem}
  .mobile-menu-nav a{font-size:1.15rem;padding:.62rem 0}
  .mobile-menu-foot{margin-top:1.4rem}
}

/* Scroll-Sperre, solange das Menü offen ist (Touch-Geräte scrollen nativ) */
html.menu-open,html.menu-open body{overflow:hidden;touch-action:none}

/* ————— Preloader ————— */
.loader{position:fixed;inset:0;z-index:150;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;
  transition:transform .95s cubic-bezier(.77,0,.18,1) .1s}
.loader.done{transform:translateY(-101%)}
.loader-crest{height:84px;opacity:0;animation:loaderIn 1s ease .15s forwards}
@keyframes loaderIn{to{opacity:1}}
.loader-bar{width:200px;height:2px;background:rgba(34,38,60,.10);overflow:hidden;border-radius:2px}
.loader-bar span{display:block;height:100%;width:0;background:var(--pine)}
.loader-meta{display:flex;align-items:center;gap:1rem;color:var(--ink-soft)}
.loader-pct{font-weight:600;font-size:.8rem;letter-spacing:.22em}
.paws{display:flex;gap:.5rem}
.paws i{width:7px;height:7px;border-radius:50%;background:var(--pine);opacity:.25;animation:paw 1.2s infinite}
.paws i:nth-child(2){animation-delay:.2s}
.paws i:nth-child(3){animation-delay:.4s}
@keyframes paw{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* ————— Sektions-Grundlagen ————— */
section{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.section-pad{padding:var(--space-section) 0}

/* ————— Kennzeichnung KI-generierter Bilder und Videos —————
   Artikel 50 Absatz 4 der KI-Verordnung verlangt, dass künstlich erzeugte
   Aufnahmen erkennbar sind, sobald man sie zu sehen bekommt: ohne Klick, ohne
   Aufklappen. Das Zeichen liegt deshalb fest in der Ecke der jeweiligen Bühne
   und verschwindet nie. Es ist das offizielle Zeichen der EU-Kommission
   (assets/img/ai-labels/, frei nutzbar, keine Namensnennung nötig).

   Größe: 24px hoch, so klein wie es geht, ohne die Schrift unleserlich zu
   machen (an den echten Hintergründen gegengeprüft). Die Fläche des Zeichens
   ist deckend, die Schrift trägt sich also selbst — der Schlagschatten muss
   nur die Kante vom Hintergrund abheben. Dadurch sitzt dasselbe helle Zeichen
   auf dunklem Wald genauso sicher wie auf der fast weißen Sponsorenfläche.

   Es liegt bewusst NUR auf den KI-Aufnahmen: Hero, Kamerareise und der
   Kopfbereich der Sponsorenseite. Die Vorstandsvideos, der Trainingsclip und
   alle Fotos sind echtes Vereinsmaterial und tragen deshalb kein Zeichen. */
.ai-badge{position:absolute;z-index:6;pointer-events:none;display:block;
  right:var(--gutter);bottom:1.5rem;height:24px;width:auto;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}

/* Reveal-Helfer (JS setzt Initialzustand — ohne JS bleibt alles sichtbar) */
[data-reveal]{will-change:transform,opacity}

/* ————— Karten ————— */
.card{background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);
  overflow:hidden;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}

/* ————— Footer ————— */
.footer{background:var(--marine-ink);color:#CDD1E0;padding:4.5rem 0 2rem;margin-top:0}
.footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:3.5rem}
.footer-brand{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.footer-brand img{height:64px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.footer-brand p{font-size:.9rem;color:#9BA0B6;max-width:26ch}
.footer h4{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:#8B90A8;margin-bottom:1.1rem}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;font-size:.95rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.10);padding-top:1.6rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:#8B90A8}
.footer-bottom a{color:#CDD1E0;font-weight:600}

/* ————— Responsive ————— */
@media (max-width:1080px){
  .nav-links{display:none}
  .burger{display:block}
}
@media (max-width:960px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav-wordmark span{display:none}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  /* Nav bleibt schlicht: Wappen, Instagram, WhatsApp, Burger — Login wandert ins Menü.
     Nur Header mit Instagram-Symbol betroffen, sonst bliebe der Login-Knopf auf den
     schlichten Rechtsseiten ohne Ersatz im Header verschwunden. */
  .nav-right:has(.btn-ig) .btn-login{display:none}
  .nav-right{gap:.35rem}
  .footer-brand p{max-width:none}
  .footer-bottom{gap:.4rem;flex-direction:column;align-items:flex-start}
}

/* ————— Tippgrößen auf Geräten ohne Mauszeiger —————
   Gilt für Handy UND Tablet, unabhängig von der Breite: die Fußzeilen-Links
   standen als 21px hohe Zeilen dicht übereinander und waren mit dem Finger
   kaum zu treffen. Mit Maus ändert sich nichts. */
@media (hover:none){
  .footer ul{gap:.1rem}
  .footer ul a{display:block;padding:.5rem 0}
  .footer-bottom a{display:inline-block;padding:.35rem 0}
}

/* ————— Reduced Motion ————— */
@media (prefers-reduced-motion:reduce){
  .btn-wa .halo,.paws i{animation:none}
  .nav,.nav-crest,.card{transition:none}
  .mobile-menu-nav a,.mobile-menu-foot{transform:none;transition:opacity .2s}
  .mobile-menu.open .mobile-menu-nav a,.mobile-menu.open .mobile-menu-foot{transition-delay:0s}
}

/* ————— Mitglieder-Login: Header-Symbol + Popup ————— */
.btn-login{position:relative;display:inline-flex;align-items:center;justify-content:center;
  aspect-ratio:1;padding:.5rem;
  border:1px solid rgba(62,67,104,.4);border-radius:var(--radius-pill);
  color:var(--marine);background:transparent;cursor:pointer;
  transition:background .3s,border-color .3s,color .3s,transform .3s;will-change:transform}
.btn-login:hover{background:var(--marine-tint);border-color:rgba(62,67,104,.7);color:var(--marine-deep)}
.btn-login svg{width:18px;height:18px;display:block}

.login-dialog{position:fixed;z-index:130;margin:0;border:1px solid var(--hairline);border-radius:14px;padding:0;
  background:var(--white);box-shadow:var(--shadow-soft);width:min(90vw,19.5rem);
  transform-origin:top right;opacity:0;transform:translateY(-6px) scale(.97);
  transition:opacity .18s ease,transform .18s ease}
.login-dialog.is-open{opacity:1;transform:translateY(0) scale(1)}
.login-form{display:flex;flex-direction:column;gap:.75rem;padding:1.3rem 1.2rem 1.1rem;position:relative}
.login-close{position:absolute;top:.4rem;right:.5rem;width:1.9rem;height:1.9rem;border:none;background:none;
  font-size:1.2rem;line-height:1;color:var(--ink-soft);cursor:pointer;border-radius:50%}
.login-close:hover{background:var(--paper-2);color:var(--ink)}
.login-crest{width:34px;margin:0 auto}
.login-form h2{font-family:var(--serif);font-size:1.1rem;text-align:center;color:var(--ink)}
.login-sub{font-size:.78rem;color:var(--ink-soft);text-align:center;margin-top:-.45rem}
.login-form label{display:flex;flex-direction:column;gap:.3rem;font-size:.72rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.login-form input{font:inherit;font-size:.92rem;padding:.55rem .75rem;border:1px solid var(--hairline);
  border-radius:9px;background:var(--paper);color:var(--ink)}
.login-form input:focus{outline:2px solid var(--marine);outline-offset:1px;background:var(--white)}
.login-error{font-size:.8rem;color:var(--rot)}
.login-submit{justify-content:center;margin-top:.1rem;padding-top:.6rem;padding-bottom:.6rem}
@media (prefers-reduced-motion:reduce){.login-dialog{transition:none}}

/* Mindestens 16px auf allen Geräten ohne Mauszeiger — darunter zoomt iOS beim
   Antippen in die Seite hinein und der Besucher steht danach im vergrößerten
   Layout. Betrifft auch Tablets, die für die Breite noch als Desktop gelten. */
@media (hover:none){
  .login-form input{font-size:1rem}
}

/* Hochformat: aus dem Popup unter dem Symbol wird ein echtes Modal. Es sitzt
   oben unter der Leiste statt mittig, damit die Tastatur die Felder nicht
   verdeckt, und läuft über die volle Breite zwischen den Seitenrändern. */
.login-dialog.is-sheet::backdrop{background:rgba(24,27,44,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@media (max-width:640px){
  .login-dialog.is-sheet{
    top:calc(var(--nav-h-small) + .7rem + env(safe-area-inset-top,0px));
    left:var(--gutter);right:var(--gutter);bottom:auto;
    width:auto;max-width:none;transform-origin:50% 0;border-radius:18px;
    max-height:calc(100svh - var(--nav-h-small) - 2.2rem);overflow-y:auto;
    box-shadow:0 30px 70px rgba(24,27,44,.4)}
  .login-dialog.is-sheet .login-form{gap:.9rem;padding:1.5rem 1.3rem 1.3rem}
  .login-dialog.is-sheet .login-crest{width:40px}
  .login-dialog.is-sheet h2{font-size:1.25rem}
  .login-dialog.is-sheet input{padding:.8rem .9rem;border-radius:11px}
  .login-dialog.is-sheet .login-close{top:.5rem;right:.5rem;width:2.6rem;height:2.6rem;font-size:1.4rem}
  .login-dialog.is-sheet .login-submit{padding-top:.85rem;padding-bottom:.85rem}
}

/* ————— Navigation über hellem Hero (Studio-Fassung) —————
   Die Wald-Fassung setzt die Kopfzeile über dem dunklen Video auf Weiß. Auf der
   hellen Papierfläche wäre sie damit unsichtbar — hier kehrt sie in die
   normalen Tintenfarben zurück, ohne Schatten. Hängt an derselben Klasse wie
   der Rest der Studio-Fassung. */
/* Spezifität muss die Wald-Regel `html:not(.menu-open) body.home .nav…`
   überbieten, sonst bleibt die Schrift weiß und verschwindet auf dem Papier. */
html body.hero-light .nav:not(.scrolled),
html:not(.menu-open) body.hero-light .nav:not(.scrolled){
  --nav-fg:var(--ink);--nav-fg-soft:var(--ink-soft)}
html body.hero-light .nav:not(.scrolled) .nav-wordmark,
html body.hero-light .nav:not(.scrolled) .nav-links a{text-shadow:none}
html body.hero-light .nav:not(.scrolled) .nav-wordmark strong,
html body.hero-light .nav:not(.scrolled) .nav-links a{color:var(--ink)}
html body.hero-light .nav:not(.scrolled) .nav-wordmark span{color:var(--ink-soft)}
html body.hero-light .nav:not(.scrolled) .burger span{background:var(--ink)}
html body.hero-light .nav:not(.scrolled) .nav-links a::after{background:var(--marine)}
html body.hero-light .nav:not(.scrolled) .nav-crest{filter:none}