/* ══════════════════════════════════════════════════════════════════════
   Brillen Voigt — Entwurf neues Frontend · 02.10.2026
   Christopher, 02.10.2026: heller Grund, Weiß und Beige, Blau NUR als
   Akzent. Kein dunkler Eindruck. Freundlich, lebendig, einladend.
   Hausfarben aus Company/CI/ci.json (status: bestätigt):
     Voigt-Blau #13376D · Voigt-Gold #CBB082 · Hellgrau #E0E0E0
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* Akzente */
  --blau:#13376D;
  --blau-hell:#2E63A8;
  --blau-zart:#E8EEF7;
  --gold:#CBB082;
  --gold-tief:#A98F5F;
  --gold-zart:#F7F0E2;

  /* Heller Grund — Weiß und Beige */
  --weiss:#FFFFFF;
  --grund:#FBF7F0;
  --creme:#F6F0E6;
  --creme-2:#F1E9DB;
  --sand:#E8DCC8;

  --text:#1F2A38;
  --text-leise:#6B7686;
  --linie:rgba(31,42,56,.10);

  --glas:rgba(255,255,255,.62);
  --glas-rand:rgba(255,255,255,.9);
  --glas-schatten:0 10px 34px rgba(19,55,109,.075), 0 2px 8px rgba(19,55,109,.05);

  --r-s:14px; --r-m:22px; --r-l:30px; --r-xl:42px; --r-rund:999px;
  --gasse:clamp(16px,4vw,56px);
  --breite:1560px;
  --weich:cubic-bezier(.22,.9,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms!important;transition-duration:.01ms!important} }

body{
  margin:0; background:var(--creme-2); color:var(--text);
  font-family:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:clamp(15px,.4vw + 14px,17px); line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* Heller, warmer Rahmen um die ganze Seite */
.rahmen{ padding:clamp(0px,1.1vw,16px); background:var(--creme-2); }
.blatt{ background:var(--grund); border-radius:clamp(0px,2.2vw,28px); overflow-x:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 50px rgba(19,55,109,.06); }

.bahn{ max-width:var(--breite); margin-inline:auto; padding-inline:var(--gasse); }

/* ── Typografie ────────────────────────────────────────────── */
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.025em; line-height:1.06; }
.kursiv{ font-family:"Instrument Serif",Georgia,serif; font-style:italic; font-weight:400;
  letter-spacing:-.01em; color:var(--blau); }
h1{ font-size:clamp(2.4rem,5.6vw,5.4rem); }
h2{ font-size:clamp(1.9rem,3.8vw,3.6rem); }
h3{ font-size:clamp(1.12rem,1.5vw,1.42rem); font-weight:750; }
p{ margin:0 0 1em; }
.leise{ color:var(--text-leise); }

.marke{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.7rem; font-weight:850; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blau); margin-bottom:1.1rem;
}
.marke::before{ content:"◆"; font-size:.6em; color:var(--gold-tief); letter-spacing:0 }

/* ── Knöpfe ────────────────────────────────────────────────── */
.knopf{
  --bg:var(--gold); --fg:#2A2113;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.92em 1.6em; border-radius:var(--r-rund); border:0;
  background:var(--bg); color:var(--fg);
  font:inherit; font-weight:800; font-size:.96rem; text-decoration:none; cursor:pointer;
  transition:transform .35s var(--weich), box-shadow .35s var(--weich), background .25s;
  box-shadow:0 5px 20px rgba(203,176,130,.42); white-space:nowrap;
}
.knopf:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 12px 30px rgba(203,176,130,.5) }
.knopf:active{ transform:translateY(0) scale(.99) }
.knopf.geist{ --bg:rgba(255,255,255,.7); --fg:var(--blau);
  border:1.5px solid rgba(19,55,109,.18); box-shadow:none;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px) }
.knopf.geist:hover{ border-color:var(--blau); background:#fff; box-shadow:0 8px 24px rgba(19,55,109,.12) }
.knopf.blau{ --bg:var(--blau); --fg:#fff; box-shadow:0 5px 20px rgba(19,55,109,.28) }
.knopf.blau:hover{ box-shadow:0 12px 30px rgba(19,55,109,.36) }

/* ── Glas ──────────────────────────────────────────────────── */
.glas{
  background:var(--glas);
  -webkit-backdrop-filter:blur(26px) saturate(1.7); backdrop-filter:blur(26px) saturate(1.7);
  border:1px solid var(--glas-rand);
  box-shadow:var(--glas-schatten);
  border-radius:var(--r-l); position:relative; overflow:hidden;
}
.glas::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.75),rgba(255,255,255,0) 44%);
  opacity:.8; mix-blend-mode:overlay }

/* Warme Fläche statt dunkler Blöcke */
.warm{ background:linear-gradient(150deg,#FFFDF9,var(--creme) 46%,var(--gold-zart));
  border:1px solid rgba(203,176,130,.3); border-radius:clamp(22px,3vw,38px);
  box-shadow:0 14px 46px rgba(19,55,109,.07); position:relative; overflow:hidden }
.warm::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 60% at 84% 8%, rgba(255,255,255,.95), transparent 62%) }
.warm > *{ position:relative }

/* ── Kopfleiste ────────────────────────────────────────────── */
.kopf{ position:fixed; inset:clamp(8px,1.6vw,22px) 0 auto; z-index:90;
  display:flex; justify-content:center; padding-inline:var(--gasse); pointer-events:none }
.kopf-innen{
  pointer-events:auto; width:min(var(--breite),100%);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem;
  padding:.5rem .55rem .5rem 1.25rem; border-radius:var(--r-rund);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(24px) saturate(1.8); backdrop-filter:blur(24px) saturate(1.8);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 6px 26px rgba(19,55,109,.08);
  transition:box-shadow .4s var(--weich), background .4s;
}
.kopf.fest .kopf-innen{ background:rgba(255,255,255,.88); box-shadow:0 10px 36px rgba(19,55,109,.12) }

.wortmarke{ font-weight:800; font-size:1.06rem; letter-spacing:-.02em; color:var(--text);
  text-decoration:none; display:inline-flex; align-items:center; gap:.45em }
.wortmarke .punkt{ width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 3px rgba(203,176,130,.25); flex:none }

.menue{ display:flex; gap:.2rem; justify-self:center }
.menue a{ padding:.52em .9em; border-radius:var(--r-rund); color:var(--text); text-decoration:none;
  font-weight:650; font-size:.9rem; transition:background .25s, color .25s }
.menue a:hover{ background:var(--blau-zart); color:var(--blau) }
.kopf-rechts{ justify-self:end; display:flex; align-items:center; gap:.5rem }
.kopf-rechts .knopf{ padding:.7em 1.25em; font-size:.88rem }

.burger{ display:none; width:42px;height:42px;border-radius:50%;border:0;background:var(--blau-zart);
  cursor:pointer; align-items:center; justify-content:center; flex:none }
.burger span{ display:block; width:17px;height:1.8px;background:var(--blau);border-radius:2px;
  position:relative; transition:transform .3s var(--weich) }
.burger span::before,.burger span::after{ content:"";position:absolute;left:0;width:17px;height:1.8px;
  background:var(--blau);border-radius:2px;transition:transform .3s var(--weich),top .3s,opacity .3s }
.burger span::before{ top:-5.5px } .burger span::after{ top:5.5px }
.burger[aria-expanded="true"] span{ transform:rotate(45deg) }
.burger[aria-expanded="true"] span::before{ top:0;transform:rotate(90deg) }
.burger[aria-expanded="true"] span::after{ top:0;opacity:0 }

@media (max-width:1060px){
  .kopf-innen{ grid-template-columns:1fr auto }
  .menue{ display:none } .burger{ display:inline-flex }
  .kopf-rechts .knopf.geist{ display:none }
}

.schublade{ position:fixed; inset:0; z-index:89; display:none; padding:6rem var(--gasse) 2rem;
  overflow-y:auto; background:rgba(251,247,240,.94);
  -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px) }
.schublade.auf{ display:block; animation:einblenden .3s var(--weich) }
.schublade a{ display:block; padding:.85rem .2rem; font-size:1.3rem; font-weight:750;
  color:var(--text); text-decoration:none; border-bottom:1px solid var(--linie) }
@keyframes einblenden{ from{opacity:0} to{opacity:1} }

/* ── Bühne ─────────────────────────────────────────────────── */
.buehne{ position:relative; min-height:min(100svh,900px);
  display:grid; align-content:center; overflow:hidden;
  padding:clamp(7.5rem,14vh,11rem) 0 clamp(3rem,7vh,5.5rem) }
.buehne-grund{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 54% at 74% 30%, rgba(203,176,130,.34), transparent 64%),
    radial-gradient(50% 58% at 14% 24%, rgba(46,99,168,.14), transparent 62%),
    radial-gradient(74% 64% at 50% 112%, rgba(203,176,130,.22), transparent 66%),
    linear-gradient(180deg,#FFFDFA,var(--grund) 60%) }
.schleier{ position:absolute; width:58vmax;height:58vmax;left:52%;top:40%;
  transform:translate(-50%,-50%); z-index:0; pointer-events:none; filter:blur(78px); opacity:.42;
  background:conic-gradient(from 0deg,rgba(203,176,130,.6),rgba(46,99,168,.3),rgba(255,255,255,.75),rgba(203,176,130,.55),rgba(46,99,168,.25),rgba(203,176,130,.6));
  border-radius:50%; animation:drehen 38s linear infinite }
@keyframes drehen{ to{ transform:translate(-50%,-50%) rotate(360deg) } }

.buehne .bahn{ position:relative; z-index:2 }
.buehne-raster{ display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(1.5rem,4vw,4rem); align-items:center }
@media (max-width:940px){ .buehne-raster{ grid-template-columns:1fr; text-align:center }
  .buehne-text .knopfreihe{ justify-content:center } }

.buehne h1{ margin-bottom:1.1rem }
.buehne-text p.gross{ font-size:clamp(1.02rem,1.25vw,1.2rem); max-width:46ch;
  color:var(--text-leise); margin-bottom:1.9rem }
@media (max-width:940px){ .buehne-text p.gross{ margin-inline:auto } }
.knopfreihe{ display:flex; flex-wrap:wrap; gap:.7rem }

.vertrauen{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:2.4rem; align-items:center }
@media (max-width:940px){ .vertrauen{ justify-content:center } }
.vertrauen .zahl{ font-size:1.55rem; font-weight:850; letter-spacing:-.03em; line-height:1; color:var(--blau) }
.vertrauen .wofuer{ font-size:.76rem; color:var(--text-leise); letter-spacing:.04em }
.vertrauen .strich{ width:1px; height:30px; background:var(--linie) }
@media (max-width:620px){ .vertrauen .strich{ display:none } }

.buehne-bild{ position:relative; aspect-ratio:1/1.08; max-width:min(100%,640px); justify-self:center; width:100% }
.buehne-bild .foto{ position:absolute; inset:0; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:0 26px 60px rgba(19,55,109,.16); border:1px solid rgba(255,255,255,.8) }
.buehne-bild .foto img{ width:100%;height:100%;object-fit:cover;object-position:62% 32%;display:block;
  transform:scale(1.04); transition:transform 1.4s var(--weich) }
.buehne-bild:hover .foto img{ transform:scale(1.09) }
#brille3d{ position:absolute; left:-36%; bottom:-14%; width:86%; height:58%; z-index:3; pointer-events:none }
@media (max-width:940px){ #brille3d{ left:-12%; width:64%; height:44% } }

.notiz{ position:absolute; z-index:4; display:inline-flex; align-items:center; gap:.5em;
  padding:.5em .95em .5em .6em; border-radius:var(--r-rund); font-size:.76rem; font-weight:750;
  background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(18px) saturate(1.8); backdrop-filter:blur(18px) saturate(1.8);
  box-shadow:0 8px 24px rgba(19,55,109,.14); color:var(--text); white-space:nowrap;
  animation:schweben 5s ease-in-out infinite }
.notiz .kugel{ width:22px;height:22px;border-radius:50%;background:var(--blau);color:#fff;
  display:grid;place-items:center;font-size:.66rem;flex:none }
.notiz.gold .kugel{ background:var(--gold); color:#2A2113 }
.notiz.a{ right:-5%; top:17%; animation-delay:-.6s }
.notiz.b{ right:-7%; top:45%; animation-delay:-2.1s }
.notiz.c{ left:16%; bottom:-4%; animation-delay:-3.4s }
@keyframes schweben{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@media (max-width:560px){ .notiz{ font-size:.69rem } .notiz.a,.notiz.b{right:-2%} .notiz.c{left:-1%} }

/* ── Laufband der Partner ──────────────────────────────────── */
.laufband{ padding:2.2rem 0; border-block:1px solid var(--linie);
  background:linear-gradient(180deg,#FFFDFA,var(--creme)); overflow:hidden; position:relative }
.laufband::before,.laufband::after{ content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none }
.laufband::before{ left:0;background:linear-gradient(90deg,#FFFDFA,transparent) }
.laufband::after{ right:0;background:linear-gradient(270deg,var(--creme),transparent) }
.spur{ display:flex; gap:3.4rem; width:max-content; animation:ziehen 36s linear infinite }
.laufband:hover .spur{ animation-play-state:paused }
.spur span{ font-size:clamp(1rem,1.5vw,1.3rem); font-weight:800; color:var(--blau);
  opacity:.34; white-space:nowrap; transition:opacity .3s }
.spur span:hover{ opacity:.9 }
@keyframes ziehen{ to{ transform:translateX(-50%) } }

/* ── Abschnitte ────────────────────────────────────────────── */
section{ position:relative; padding:clamp(3.6rem,7.4vw,6.6rem) 0 }
.kopfzeile{ max-width:62ch; margin-bottom:clamp(2rem,3.6vw,3.2rem) }
.kopfzeile.mitte{ margin-inline:auto; text-align:center }
.kopfzeile.mitte .marke{ justify-content:center }
.kopfzeile p{ font-size:clamp(1rem,1.1vw,1.1rem); color:var(--text-leise); margin-top:1.1rem }

/* Leistungen */
.zwei{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:clamp(1rem,2vw,1.5rem) }
.feld{ padding:clamp(1.3rem,2.2vw,2rem); display:flex; flex-direction:column; gap:1rem;
  transition:transform .5s var(--weich), box-shadow .5s var(--weich) }
.feld:hover{ transform:translateY(-6px); box-shadow:0 22px 50px rgba(19,55,109,.13) }
.feld .bildteil{ border-radius:var(--r-m); overflow:hidden; aspect-ratio:16/10; background:var(--sand) }
.feld .bildteil img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform 1s var(--weich) }
.feld:hover .bildteil img{ transform:scale(1.06) }
.feld ul{ margin:0; padding-left:1.1em; color:var(--text-leise); font-size:.94rem }
.feld ul li{ margin-bottom:.35em }
.feld .mehr{ margin-top:auto; padding-top:.6rem; font-weight:800; color:var(--blau);
  text-decoration:none; display:inline-flex; align-items:center; gap:.4em; font-size:.94rem }
.feld .mehr span{ transition:transform .3s var(--weich) }
.feld:hover .mehr span{ transform:translateX(5px) }

/* Brillenarten */
.kacheln{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr)); gap:clamp(.9rem,1.6vw,1.3rem) }
.kachel{ border-radius:var(--r-l); overflow:hidden; position:relative; aspect-ratio:4/3.5;
  background:linear-gradient(160deg,var(--creme),var(--sand));
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.15rem;
  text-decoration:none; color:var(--text); isolation:isolate;
  border:1px solid rgba(255,255,255,.7);
  transition:transform .5s var(--weich), box-shadow .5s var(--weich) }
.kachel img{ position:absolute; inset:0; width:100%;height:100%;object-fit:cover; z-index:-2;
  transition:transform 1s var(--weich) }
.kachel::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg,rgba(255,255,255,.55),transparent 46%) }
.kachel:hover{ transform:translateY(-7px); box-shadow:0 24px 52px rgba(19,55,109,.16) }
.kachel:hover img{ transform:scale(1.07) }
.kachel .schild{ align-self:flex-start; font-size:.66rem; font-weight:850; letter-spacing:.09em;
  text-transform:uppercase; padding:.4em .85em; border-radius:var(--r-rund);
  background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  color:var(--blau); margin-bottom:auto }
.kachel .fuss{ background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.95); border-radius:var(--r-m); padding:.82rem .98rem }
.kachel .fuss strong{ display:block; font-size:1.04rem; letter-spacing:-.01em }
.kachel .fuss small{ color:var(--text-leise); font-size:.81rem }

/* Hören — helle Kärtchen */
.drei-karten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:clamp(.9rem,1.6vw,1.2rem) }
.karte{ padding:1.5rem; border-radius:var(--r-l); background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.95); box-shadow:0 8px 26px rgba(19,55,109,.06);
  transition:transform .45s var(--weich), box-shadow .45s var(--weich) }
.karte:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(19,55,109,.12) }
.karte h3{ margin-bottom:.4rem; color:var(--blau) }
.karte p{ margin:0; color:var(--text-leise); font-size:.95rem }

/* Ablauf */
.schritte{ display:grid; gap:clamp(.8rem,1.3vw,1rem) }
.schritt{ display:grid; grid-template-columns:auto 84px 1fr; gap:clamp(1rem,2.2vw,1.8rem);
  align-items:center; padding:clamp(1rem,1.7vw,1.4rem); border-radius:var(--r-l);
  background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.9);
  transition:background .4s, transform .4s var(--weich), box-shadow .4s }
.schritt:hover{ transform:translateX(6px); background:#fff; box-shadow:0 14px 34px rgba(19,55,109,.09) }
.schritt .nr{ font-family:"Instrument Serif",serif; font-size:clamp(1.6rem,3vw,2.4rem);
  color:var(--gold-tief); line-height:1; width:2.2ch }
.schritt .rund{ width:84px;height:84px;border-radius:50%;overflow:hidden;background:var(--sand);flex:none;
  box-shadow:0 6px 18px rgba(19,55,109,.1) }
.schritt .rund img{ width:100%;height:100%;object-fit:cover }
.schritt p{ margin:.25em 0 0; color:var(--text-leise); font-size:.94rem }
@media (max-width:620px){ .schritt{ grid-template-columns:auto 1fr } .schritt .rund{ display:none } }

/* Standorte */
.filialen{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:clamp(.9rem,1.5vw,1.15rem) }
.filiale{ padding:1.4rem; border-radius:var(--r-l); text-decoration:none; color:inherit; display:block;
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.95);
  box-shadow:0 8px 24px rgba(19,55,109,.06);
  transition:background .4s, transform .4s var(--weich), border-color .4s, box-shadow .4s }
.filiale:hover{ background:#fff; border-color:var(--gold); transform:translateY(-5px);
  box-shadow:0 18px 42px rgba(19,55,109,.12) }
.filiale h3{ font-size:1.2rem; margin-bottom:.3rem; color:var(--blau) }
.filiale .ort{ font-size:.86rem; color:var(--text-leise); line-height:1.55 }
.filiale .tel{ font-size:.86rem; color:var(--text); font-weight:700; margin-top:.4rem; display:block }
.filiale .fach{ display:flex; gap:.35rem; margin-top:.9rem; flex-wrap:wrap }
.filiale .fach i{ font-style:normal; font-size:.65rem; font-weight:850; letter-spacing:.07em;
  text-transform:uppercase; padding:.32em .68em; border-radius:var(--r-rund);
  background:var(--gold-zart); color:var(--gold-tief); border:1px solid rgba(203,176,130,.35) }
.filiale .fach i.b{ background:var(--blau-zart); color:var(--blau); border-color:rgba(19,55,109,.16) }
.filiale .pfeil{ margin-top:.95rem; font-size:.87rem; font-weight:800; color:var(--blau);
  display:flex; align-items:center; gap:.4em }
.filiale .pfeil span{ transition:transform .3s var(--weich) }
.filiale:hover .pfeil span{ transform:translateX(5px) }

/* Sehschärfe-Schieber — das eine Stück, das nur ein Optiker haben kann */
.sehen-rahmen{ position:relative; border-radius:clamp(22px,3vw,38px); overflow:hidden;
  aspect-ratio:16/9; max-height:72vh; background:var(--sand);
  box-shadow:0 20px 56px rgba(19,55,109,.14); border:1px solid rgba(255,255,255,.8);
  touch-action:pan-y; cursor:ew-resize; user-select:none; -webkit-user-select:none }
.sehen-rahmen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.sehen-unscharf{ filter:blur(9px) saturate(.84) brightness(1.04); transform:scale(1.06) }
.sehen-scharf-huelle{ position:absolute; inset:0; overflow:hidden;
  clip-path:inset(0 0 0 var(--teiler,50%)) }
.sehen-griff{ position:absolute; top:0; bottom:0; left:var(--teiler,50%); width:2px;
  background:rgba(255,255,255,.95); box-shadow:0 0 0 1px rgba(19,55,109,.18), 0 0 26px rgba(255,255,255,.75);
  z-index:3; pointer-events:none }
.sehen-griff::after{ content:"◂ ▸"; position:absolute; top:50%; left:50%; translate:-50% -50%;
  display:grid; place-items:center; width:54px; height:54px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--blau); font-size:.78rem; font-weight:800;
  letter-spacing:.06em; box-shadow:0 8px 26px rgba(19,55,109,.22) }
.sehen-schild{ position:absolute; top:1rem; z-index:4; font-size:.68rem; font-weight:850;
  letter-spacing:.1em; text-transform:uppercase; padding:.45em .9em; border-radius:var(--r-rund);
  background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 6px 20px rgba(19,55,109,.14) }
.sehen-schild.links{ left:1rem; color:var(--text-leise) }
.sehen-schild.rechts{ right:1rem; color:var(--blau) }
.sehen-schild .kurz{ display:none }
@media (max-width:620px){
  .sehen-schild{ font-size:.58rem; padding:.36em .7em; top:.7rem; letter-spacing:.08em }
  .sehen-schild.links{ left:.7rem } .sehen-schild.rechts{ right:.7rem }
  .sehen-schild .lang{ display:none } .sehen-schild .kurz{ display:inline }
  .sehen-griff::after{ width:42px; height:42px; font-size:.66rem }
}
.sehen-hinweis{ text-align:center; font-size:.84rem; color:var(--text-leise); margin-top:1rem }

/* Terminauswahl im Aufruf */
.wahl{ display:grid; gap:1.3rem; max-width:720px; margin:0 auto 1.8rem; text-align:left }
.wahl-feld > span.titel{ display:block; font-size:.68rem; font-weight:850; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-leise); margin-bottom:.6rem }
.chips{ display:flex; flex-wrap:wrap; gap:.45rem }
.chip{ font:inherit; font-size:.87rem; font-weight:700; cursor:pointer;
  padding:.5em 1em; border-radius:var(--r-rund); background:rgba(255,255,255,.8);
  border:1.5px solid rgba(19,55,109,.14); color:var(--text);
  transition:background .25s, border-color .25s, color .25s, transform .25s var(--weich) }
.chip:hover{ transform:translateY(-2px); border-color:var(--gold) }
.chip[aria-pressed="true"]{ background:var(--blau); border-color:var(--blau); color:#fff }
.wahl-ergebnis{ font-size:.95rem; color:var(--text-leise); min-height:1.5em; text-align:center }
.wahl-ergebnis b{ color:var(--blau) }

/* Stimmen */
.stimmen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:clamp(.9rem,1.6vw,1.3rem) }
.stimme{ padding:1.6rem; display:flex; flex-direction:column; gap:1rem }
.stimme .anf{ font-family:"Instrument Serif",serif; font-size:2.6rem; line-height:.6; color:var(--gold) }
.stimme p{ margin:0; font-size:1rem }
.stimme .wer{ margin-top:auto; display:flex; align-items:center; gap:.7rem; font-size:.85rem }
.stimme .wer b{ font-weight:800 } .stimme .wer small{ color:var(--text-leise) }
.sterne{ color:var(--gold-tief); letter-spacing:.1em; font-size:.8rem }

/* Termin-Aufruf — hell, mit Licht */
.aufruf{ position:relative; border-radius:clamp(22px,3vw,38px); overflow:hidden; text-align:center;
  padding:clamp(2.6rem,5.6vw,4.8rem) clamp(1.3rem,4vw,3.4rem);
  background:linear-gradient(145deg,#FFFFFF,var(--creme) 48%,var(--gold-zart));
  border:1px solid rgba(203,176,130,.34); box-shadow:0 18px 56px rgba(19,55,109,.09) }
.aufruf::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(62% 72% at 50% -10%, rgba(255,255,255,1), transparent 60%) }
.aufruf > *{ position:relative }
.aufruf h2{ margin-bottom:1rem }
.aufruf p{ color:var(--text-leise); max-width:52ch; margin-inline:auto; margin-bottom:2rem }

/* Fuß — hell */
.fuss{ background:linear-gradient(180deg,var(--creme),var(--creme-2)); color:var(--text-leise);
  padding:clamp(2.8rem,5.4vw,4.4rem) 0 2rem;
  border-radius:clamp(22px,3vw,38px) clamp(22px,3vw,38px) 0 0; margin-top:clamp(2rem,4vw,3rem);
  border-top:1px solid rgba(203,176,130,.3) }
.fuss-raster{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
  gap:2.2rem; padding-bottom:2.4rem; border-bottom:1px solid var(--linie) }
.fuss h4{ color:var(--blau); font-size:.73rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.9rem }
.fuss a{ display:block; color:var(--text-leise); text-decoration:none; padding:.26rem 0;
  font-size:.92rem; transition:color .25s }
.fuss a:hover{ color:var(--blau) }
.fuss-marke{ font-size:clamp(3rem,14vw,10.5rem); font-weight:900; letter-spacing:-.045em; line-height:.92;
  color:transparent; -webkit-text-stroke:1px rgba(19,55,109,.22); margin:2rem 0 1rem; text-align:center }
.fuss-ende{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.79rem; opacity:.8 }

/* ══ Eröffnung: aus dem Weltall durch die Pupille auf die Seite ══════ */
#eintritt{ position:fixed; inset:0; z-index:200; background:#02060E;
  display:grid; place-items:center; overflow:hidden; cursor:pointer;
  transition:opacity .75s ease, visibility .75s }
#eintritt.weg{ opacity:0; visibility:hidden; pointer-events:none }
#eintritt canvas{ position:absolute; inset:0; width:100%; height:100% }
#eintritt .wort{ position:absolute; left:50%; bottom:7vh; translate:-50% 0;
  z-index:2; text-align:center; color:#fff; width:min(92vw,720px);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .9s ease, transform .9s var(--weich) }
#eintritt.text .wort{ opacity:1; transform:none }
#eintritt .wort b{ display:block; font-size:clamp(1.5rem,4.6vw,3rem); font-weight:800;
  letter-spacing:-.02em; text-shadow:0 2px 30px rgba(0,0,0,.6) }
#eintritt .wort i{ display:block; font-family:"Instrument Serif",serif; font-style:italic;
  font-weight:400; font-size:clamp(1.5rem,4.6vw,3rem); color:#E6D4AE }
#eintritt .wort span{ display:block; margin-top:1.1rem; font-size:.66rem; letter-spacing:.3em;
  text-transform:uppercase; opacity:.5 }
#eintritt .ueber{ position:absolute; z-index:3; right:1.3rem; bottom:1.3rem;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.22); border-radius:var(--r-rund); padding:.52em 1.1em;
  background:transparent; font-family:inherit; cursor:pointer; transition:color .25s, border-color .25s }
#eintritt .ueber:hover{ color:#fff; border-color:rgba(255,255,255,.6) }
body.gesperrt{ overflow:hidden }
/* Die Seite tritt aus der Pupille heraus: einen Hauch größer und weicher,
   dann setzt sie sich. Dauert genauso lang wie das Wegblenden des Vorhangs. */
.blatt{ transform:scale(1.045); filter:blur(7px); opacity:.55;
  transition:transform 1.25s var(--weich), filter 1s ease, opacity .9s ease }
body.offen .blatt{ transform:none; filter:none; opacity:1 }
@media (prefers-reduced-motion:reduce){ #eintritt{ display:none } body.gesperrt{ overflow:auto } }

/* ── Blume des Lebens — genau EINMAL auf der Seite ─────────── */
.signet{ display:flex; flex-direction:column; align-items:center; gap:.5rem; margin-top:.4rem }
.signet svg{ width:38px; height:38px; display:block; overflow:visible }
.signet svg circle{ fill:none; stroke:var(--gold-tief); stroke-width:1.05; opacity:.72;
  animation:blume 9s ease-in-out infinite }
.signet svg circle:nth-child(2n){ animation-delay:-1.2s }
.signet svg circle:nth-child(3n){ animation-delay:-2.6s }
.signet .wort{ font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-tief); opacity:.62 }
@keyframes blume{ 0%,100%{ opacity:.5 } 50%{ opacity:.95 } }
@media (prefers-reduced-motion:reduce){ .signet svg circle{ animation:none; opacity:.7 } }

/* Einblenden beim Scrollen */
.auf{ opacity:0; transform:translateY(26px);
  transition:opacity .85s var(--weich), transform .85s var(--weich) }
.auf.da{ opacity:1; transform:none }
.auf.v1{ transition-delay:.07s } .auf.v2{ transition-delay:.14s } .auf.v3{ transition-delay:.21s }
.auf.v4{ transition-delay:.28s } .auf.v5{ transition-delay:.35s } .auf.v6{ transition-delay:.42s }
@media (prefers-reduced-motion:reduce){ .auf{ opacity:1; transform:none } }

.fortschritt{ position:fixed; inset:0 auto auto 0; height:2.5px; width:0; z-index:95;
  background:linear-gradient(90deg,var(--gold),var(--blau)); border-radius:0 2px 2px 0 }