/* ============================================================
   FERDOSS MAKEUP — Design-System
   Farben aus den Key-Visuals gemessen (Aubergine-Samt / Navy / Champagner-Gold)
   ============================================================ */

/* ---------- Schriften ---------- */
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../schriften/bodoni-moda-aFTS7PxzY382XsXX63LUYJSPeKrcW3JNsao.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 900;font-display:swap;
  src:url('../schriften/bodoni-moda-aFTQ7PxzY382XsXX63LUYJSKSKjWXFBP.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:200 700;font-display:swap;
  src:url('../schriften/jost-92zatBhPNqw73oTd4jQmfxI.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- animierbare Eigenschaften (CSS Houdini) ---------- */
@property --schimmer{syntax:'<percentage>';inherits:false;initial-value:-40%}
@property --winkel{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --glanz{syntax:'<number>';inherits:false;initial-value:0}

/* ---------- Token ---------- */
:root{
  --tinte:#120610;          /* tiefes Aubergine-Schwarz  */
  --tinte-2:#1c0a1a;
  --plum:#2a1226;
  --plum-tief:#190a17;
  --navy:#04182f;
  --navy-2:#0a2744;

  --gold:#c9a961;
  --gold-hell:#f2dfba;
  --gold-tief:#8a6c34;      /* nur Flaechen/Rahmen — als Text zu dunkel */
  --gold-lesbar:#a5834a;    /* dunkelster Stop fuer Gold auf Text: 5.4:1 auf --tinte */
  --creme:#f7f1e8;
  --nebel:rgba(247,241,232,.66);
  --nebel-2:rgba(247,241,232,.55);   /* .42 ergab nur 3,6:1 — jetzt 5,5:1 */
  --linie:rgba(201,169,97,.24);
  --linie-2:rgba(247,241,232,.12);

  --seite:clamp(1.25rem,5vw,5.5rem);
  --breit:1560px;
  --schmal:920px;

  --anzeige:'Bodoni Moda',ui-serif,'Times New Roman',serif;
  --text:'Jost',ui-sans-serif,system-ui,'Helvetica Neue',sans-serif;

  --kurve:cubic-bezier(.22,1,.36,1);
  --kurve-weich:cubic-bezier(.65,.05,.36,1);

  color-scheme:dark;
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
body{
  margin:0;background:var(--tinte);color:var(--creme);
  font-family:var(--text);font-weight:300;font-size:clamp(1rem,.94rem + .3vw,1.1rem);
  line-height:1.62;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.laedt{overflow:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:var(--tinte)}
:focus-visible{outline:2px solid var(--gold-hell);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{font-family:var(--anzeige);font-weight:400;line-height:1.02;
  letter-spacing:-.015em;margin:0;text-wrap:balance;font-optical-sizing:auto}
p{margin:0;text-wrap:pretty}

/* ---------- Hilfsklassen ---------- */
.huelle{width:100%;max-width:var(--breit);margin-inline:auto;padding-inline:var(--seite)}
.eng{max-width:var(--schmal)}
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.label{font-size:.68rem;letter-spacing:.42em;text-transform:uppercase;font-weight:400;
  color:var(--gold);display:inline-flex;align-items:center;gap:1em}
.label::before{content:'';width:2.6rem;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}

.gross{font-size:clamp(2.4rem,1.2rem + 5.4vw,6.4rem)}
.mittel{font-size:clamp(1.9rem,1.1rem + 3.4vw,4.2rem)}
.klein{font-size:clamp(1.35rem,1rem + 1.5vw,2.1rem)}
.kursiv{font-style:italic;font-weight:400}

.gold-text{
  background:linear-gradient(96deg,var(--gold-lesbar) 0%,var(--gold) 26%,var(--gold-hell) 48%,var(--gold) 70%,var(--gold-lesbar) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Gold-Schimmer, der ueber die Zeile wandert */
.schimmert{
  background:linear-gradient(100deg,
    var(--gold) 0%,var(--gold) calc(var(--schimmer) + 8%),
    var(--gold-hell) calc(var(--schimmer) + 20%),
    var(--gold) calc(var(--schimmer) + 34%),var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:schimmern 5.5s var(--kurve-weich) infinite;
}
@keyframes schimmern{from{--schimmer:-45%}to{--schimmer:110%}}

/* ---------- Kornstruktur + Vignette ueber allem ---------- */
.korn{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.4;mix-blend-mode:overlay}
.korn::after{content:'';position:absolute;inset:-120%;
  background-image:var(--korn-bild);background-size:190px 190px;
  animation:kornen 1.1s steps(4) infinite}
@keyframes kornen{
  0%{transform:translate(0,0)}25%{transform:translate(-4%,-3%)}
  50%{transform:translate(3%,-5%)}75%{transform:translate(-2%,4%)}100%{transform:translate(0,0)}}

/* ============================================================
   Vorhang (Preloader)
   ============================================================ */
#vorhang{position:fixed;inset:0;z-index:200;background:var(--tinte);
  display:grid;place-items:center;transition:opacity .9s var(--kurve),visibility .9s}
#vorhang[hidden]{display:none}
#vorhang.weg{opacity:0;visibility:hidden;pointer-events:none}
.vorhang-innen{width:min(56vw,540px);text-align:center}
.vorhang-innen .logo-svg{width:100%;height:auto;color:var(--gold)}
.vorhang-innen .logo-svg path{
  fill:var(--gold);
  stroke:var(--gold-hell);stroke-width:2.2;
  vector-effect:non-scaling-stroke;  /* potraces scale(0.1) wuerde den Strich sonst auf 0,3 px druecken */
  paint-order:fill stroke;           /* Strich bleibt oben, sonst wirkt alles matt */
  fill-opacity:0;
  filter:drop-shadow(0 0 14px rgba(201,169,97,.35));
  stroke-dasharray:var(--laenge);stroke-dashoffset:var(--laenge);
  animation:zeichnen 1.5s var(--kurve-weich) forwards,fuellen .8s ease 1.25s forwards;
}
@keyframes zeichnen{to{stroke-dashoffset:0}}
@keyframes fuellen{to{fill-opacity:1;stroke-opacity:0}}
.vorhang-balken{margin-top:2.4rem;height:1px;background:var(--linie-2);position:relative;overflow:hidden}
.vorhang-balken::after{content:'';position:absolute;inset:0;transform-origin:left;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold-hell));
  animation:balken 1.9s var(--kurve) forwards}
@keyframes balken{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ============================================================
   Kopfzeile
   ============================================================ */
.kopf{position:fixed;top:0;left:0;right:0;z-index:50;
  padding-block:clamp(.9rem,2vw,1.6rem);
  transition:background .55s var(--kurve),backdrop-filter .55s,border-color .55s;
  border-bottom:1px solid transparent}
.kopf::before{content:'';position:absolute;inset:-1px 0 auto 0;height:230%;z-index:-1;
  background:linear-gradient(180deg,color-mix(in oklab,var(--tinte) 64%,transparent) 0%,
    color-mix(in oklab,var(--tinte) 22%,transparent) 46%,transparent 100%);
  transition:opacity .55s var(--kurve);pointer-events:none}
.kopf.fest::before{opacity:0}
.kopf.fest{background:color-mix(in oklab,var(--tinte) 82%,transparent);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--linie)}
.kopf.fest .kopf-logo img{transform:scale(.82)}
.kopf.fest .kopf-innen{transform:translateY(-2px)}
.kopf-innen{transition:transform .55s var(--kurve)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.kopf-logo{position:relative;z-index:52}
.kopf-logo img{width:clamp(132px,15vw,196px);height:auto;transform-origin:left center;
  transition:transform .55s var(--kurve)}
.kopf-logo:hover img{transform:scale(1.035)}
.kopf.fest .kopf-logo:hover img{transform:scale(.855)}

.nav{display:flex;align-items:center;gap:clamp(1.2rem,2.6vw,2.6rem)}
.nav a{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--nebel);
  position:relative;padding-block:.35rem;transition:color .4s}
.nav a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--kurve)}
.nav a:hover{color:var(--creme)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}

.knopf{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:1.05em 2.3em;font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;
  border:1px solid var(--gold);color:var(--gold-hell);overflow:hidden;isolation:isolate;
  transition:color .5s var(--kurve),border-color .5s}
.knopf::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--gold-tief),var(--gold),var(--gold-hell));
  transform:translateY(101%);transition:transform .62s var(--kurve)}
.knopf:hover{color:var(--tinte);border-color:var(--gold-hell)}
.knopf:hover::before{transform:translateY(0)}
.knopf--voll{background:linear-gradient(100deg,var(--gold-tief),var(--gold) 45%,var(--gold-hell));
  color:var(--tinte);border-color:transparent;font-weight:500}
.knopf--voll::before{background:linear-gradient(100deg,var(--gold-hell),var(--gold))}
.knopf--voll:hover{color:var(--tinte)}
.knopf--geist{border-color:var(--linie-2);color:var(--creme)}
.knopf--klein{padding:.85em 1.7em;font-size:.7rem}

.kopf .knopf{padding:.9em 1.8em}
.brenner{display:none;width:40px;height:40px;position:relative;z-index:52}
.brenner span{position:absolute;left:8px;right:8px;height:1px;background:var(--creme);
  transition:transform .5s var(--kurve),opacity .3s}
.brenner span:nth-child(1){top:15px}
.brenner span:nth-child(2){bottom:15px}
.brenner[aria-expanded="true"] span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.brenner[aria-expanded="true"] span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}

/* ============================================================
   Bühne (Hero)
   ============================================================ */
.buehne{position:relative;min-height:100svh;display:grid;align-items:end;
  overflow:clip;padding-block:11rem clamp(5.5rem,12vh,8.5rem)}
.buehne-bild{position:absolute;inset:0;z-index:0;overflow:clip}
.buehne-bild img{width:100%;height:100%;object-fit:cover;object-position:42% 36%;
  transform:scale(1.1);will-change:transform;filter:brightness(1.1) saturate(1.05)}
.buehne-bild::after{content:'';position:absolute;inset:0;
  background:
    /* Textzone rechts abdunkeln — dort steht niemand im Bild */
    linear-gradient(263deg,color-mix(in oklab,var(--tinte) 95%,transparent) 0%,
      color-mix(in oklab,var(--tinte) 86%,transparent) 30%,
      color-mix(in oklab,var(--tinte) 36%,transparent) 52%,transparent 70%),
    linear-gradient(180deg,color-mix(in oklab,var(--tinte) 70%,transparent) 0%,transparent 24%,
      color-mix(in oklab,var(--tinte) 34%,transparent) 68%,var(--tinte) 100%);}
#staub{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.85}

.buehne-innen{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
.buehne-innen > *{max-width:min(100%,620px);margin-left:auto;width:100%}
@media (min-width:821px){
  .buehne-innen{align-items:flex-end}
}
.buehne .label{margin-bottom:clamp(1.4rem,3vw,2.4rem)}
.buehne h1{margin-bottom:1.6rem}
.buehne h1 .zeile{display:block;overflow:hidden}
.buehne h1 .zeile > span{display:block}
.buehne-text{max-width:46ch;color:var(--nebel);font-size:clamp(1.02rem,.96rem + .35vw,1.2rem)}
.buehne-knoepfe{display:flex;flex-wrap:wrap;gap:1rem;margin-top:clamp(2rem,4vw,3.2rem)}

.buehne-fuss{position:absolute;left:var(--seite);right:var(--seite);bottom:clamp(1.4rem,3vh,2.6rem);
  z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--nebel-2)}
.scroll-hinweis{display:flex;align-items:center;gap:.9rem}
.scroll-linie{width:60px;height:1px;background:var(--linie-2);position:relative;overflow:hidden}
.scroll-linie::after{content:'';position:absolute;inset:0;background:var(--gold);
  transform-origin:left;animation:scrollen 2.6s var(--kurve-weich) infinite}
@keyframes scrollen{0%{transform:scaleX(0)}45%{transform:scaleX(1);transform-origin:left}
  55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

/* ============================================================
   Laufband
   ============================================================ */
.laufband{position:relative;padding-block:clamp(1.4rem,3vw,2.2rem);
  border-block:1px solid var(--linie);overflow:hidden;
  background:linear-gradient(180deg,var(--plum-tief),var(--tinte))}
.laufband-spur{display:flex;width:max-content;will-change:transform}
.laufband-spur > span{display:inline-flex;align-items:center;gap:clamp(1.6rem,4vw,3.4rem);
  padding-right:clamp(1.6rem,4vw,3.4rem);
  font-family:var(--anzeige);font-size:clamp(1.5rem,1rem + 2vw,2.6rem);
  letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px rgba(201,169,97,.55);white-space:nowrap}
.laufband-spur .voll{color:var(--gold);-webkit-text-stroke:0;font-style:italic}
.laufband-spur i{font-style:normal;color:var(--gold);font-size:.5em;opacity:.8}

/* ============================================================
   Abschnitte
   ============================================================ */
.abschnitt{position:relative;padding-block:clamp(5rem,11vh,9.5rem)}
.abschnitt-kopf{display:grid;gap:clamp(1rem,2.4vw,1.6rem) clamp(2rem,6vw,5rem);
  margin-bottom:clamp(2.6rem,5.5vw,4.4rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end}
.abschnitt-kopf .label{grid-column:1/-1}
.abschnitt-kopf p{color:var(--nebel);max-width:52ch;padding-bottom:.6rem}
@media (max-width:900px){
  .abschnitt-kopf{grid-template-columns:1fr;align-items:start}
}

/* Enthüllen beim Scrollen — nativ scroll-driven, mit JS-Fallback */
.zeigt{opacity:0;transform:translateY(34px);
  transition:opacity 1s var(--kurve),transform 1.15s var(--kurve)}
.zeigt.da{opacity:1;transform:none}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .zeigt:not(.da){animation:hoch linear both;animation-timeline:view();
      animation-range:entry 8% cover 26%}
  }
}
@keyframes hoch{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:none}}
.verzug-1{transition-delay:.09s;animation-delay:.05s}
.verzug-2{transition-delay:.18s}
.verzug-3{transition-delay:.27s}

/* ---------- Über / Zahlen ---------- */
.ueber{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:center}
.ueber-bild{position:relative}
.ueber-bild .rahmen{position:relative;overflow:hidden;aspect-ratio:4/5;
  clip-path:inset(0 0 0 0);border-radius:2px}
.ueber-bild img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);will-change:transform}
.ueber-bild::after{content:'';position:absolute;inset:clamp(.8rem,2vw,1.5rem);
  border:1px solid var(--linie);pointer-events:none;mix-blend-mode:screen}
.ueber-text h2{margin-bottom:1.8rem}
.ueber-text p + p{margin-top:1.15rem}
.ueber-text p{color:var(--nebel)}
.unterschrift{margin-top:2.4rem;display:flex;align-items:center;gap:1.2rem}
.unterschrift img{width:150px;opacity:.95}
.unterschrift span{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--nebel-2)}

.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(3.5rem,7vw,5.5rem);
  padding-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--linie)}
.zahl{text-align:center}
.zahl b{display:block;font-family:var(--anzeige);font-weight:400;
  font-size:clamp(2.4rem,1.4rem + 3.4vw,4.4rem);line-height:1;color:var(--gold-hell)}
.zahl span{display:block;margin-top:.8rem;font-size:.68rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--nebel-2)}

/* ---------- Leistungen: waagerechte Strecke ---------- */
.strecke{position:relative}
.strecke{position:relative}
.strecke-halt{position:relative;height:100svh;display:flex;align-items:center;
  gap:clamp(1.6rem,3.5vw,3.4rem);overflow:hidden;
  padding:clamp(5rem,10vh,7rem) 0 clamp(2rem,5vh,3.5rem) var(--seite)}
.strecke-kopf{flex:0 0 clamp(240px,24vw,360px);position:relative;z-index:2}
.strecke-kopf h2{margin-block:1.5rem 1.2rem}
.strecke-kopf p{color:var(--nebel);font-size:.96rem}
.strecke-hinweis{display:inline-flex;align-items:center;gap:.8rem;margin-top:2.4rem;
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--nebel-2)}
.strecke-hinweis::after{content:'';width:52px;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent)}
.strecke-fenster{flex:1 1 auto;min-width:0;overflow:clip;
  margin-right:calc(var(--seite) * -1);padding-right:var(--seite)}
.strecke-spur{display:flex;gap:clamp(1.2rem,2.5vw,2.2rem);width:max-content;will-change:transform}
.karte{position:relative;flex:0 0 clamp(280px,28vw,400px);aspect-ratio:3/3.85;
  overflow:hidden;isolation:isolate;background:var(--plum-tief);
  border:1px solid var(--linie-2);transition:border-color .6s var(--kurve)}
.karte:hover{border-color:var(--gold)}
.karte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 38%;
  transform:scale(1.04);transition:transform 1.3s var(--kurve),filter 1s;
  filter:saturate(.86) contrast(1.03)}
.karte:hover img{transform:scale(1.12);filter:saturate(1) contrast(1.05)}
.karte::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 12%,
    color-mix(in oklab,var(--tinte) 34%,transparent) 34%,
    color-mix(in oklab,var(--tinte) 88%,transparent) 56%,
    var(--tinte) 76%)}
.karte-text{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(1.4rem,2.4vw,2.2rem)}
.karte-nr{font-size:.66rem;letter-spacing:.3em;color:var(--gold);display:block;margin-bottom:.9rem}
.karte h3{font-size:clamp(1.5rem,1.1rem + 1vw,2rem);margin-bottom:.7rem}
.karte p{font-size:.92rem;color:var(--nebel);max-width:32ch}
.karte-preis{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--linie);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--nebel-2)}
.karte-preis b{font-family:var(--anzeige);font-size:1.5rem;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--gold-hell)}

/* ---------- Kurse (Buchungsliste) ---------- */
.kurse{display:grid;gap:0;border-top:1px solid var(--linie)}
.kurs{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:clamp(1rem,3vw,2.6rem);align-items:center;
  padding-block:clamp(1.6rem,3.4vw,2.6rem);border-bottom:1px solid var(--linie);
  position:relative;isolation:isolate;transition:transform .6s var(--kurve)}
.kurs::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,color-mix(in oklab,var(--plum) 70%,transparent),transparent 72%);
  opacity:0;transition:opacity .6s var(--kurve)}
.kurs:hover{transform:translateX(clamp(.5rem,1.2vw,1.2rem))}
.kurs:hover::before{opacity:1}
.kurs-nr{font-size:.68rem;letter-spacing:.22em;color:var(--gold);min-width:2.4rem}
.kurs-haupt h3{font-size:clamp(1.35rem,1rem + 1.3vw,2.05rem);margin-bottom:.45rem}
.kurs-haupt p{font-size:.92rem;color:var(--nebel);max-width:52ch}
.kurs-meta{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--nebel-2);
  text-align:right;white-space:nowrap}
.kurs-meta b{display:block;font-family:var(--anzeige);font-size:1.7rem;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--gold-hell);margin-bottom:.3rem}
.kurs .knopf{white-space:nowrap}

/* ---------- Galerie ---------- */
.galerie{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.6rem,1.4vw,1.1rem)}
.galerie figure{position:relative;margin:0;overflow:hidden;background:var(--plum-tief)}
.galerie img{width:100%;height:100%;object-fit:cover;object-position:center 32%;
  transition:transform 1.4s var(--kurve),filter .9s;filter:saturate(.9)}
.galerie figure:hover img{transform:scale(1.07);filter:saturate(1.04)}
.galerie figure::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,color-mix(in oklab,var(--tinte) 78%,transparent));
  opacity:0;transition:opacity .7s}
.galerie figure:hover::after{opacity:1}
.galerie figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(.9rem,2vw,1.4rem);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-hell);opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--kurve),transform .6s var(--kurve)}
.galerie figure:hover figcaption{opacity:1;transform:none}
/* alle Quellbilder sind Hochformat — Querformat-Kacheln wuerden Gesichter anschneiden */
.g-a{grid-column:span 5;aspect-ratio:5/6}
.g-b{grid-column:span 3;aspect-ratio:3/4.4}
.g-c{grid-column:span 4;aspect-ratio:4/5.4}
.g-d{grid-column:span 4;aspect-ratio:4/5}
.g-e{grid-column:span 5;aspect-ratio:5/5.8}
.g-f{grid-column:span 3;aspect-ratio:3/4.4}

/* ---------- Marken-Streifen ---------- */
.marke-streifen{position:relative;min-height:min(84svh,760px);display:grid;align-items:end;
  overflow:clip;padding-bottom:clamp(2rem,5vh,3.4rem)}
.marke-streifen img.grund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:34% 8%;transform:scale(1.08);will-change:transform;filter:saturate(.94)}
.marke-streifen::after{content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,var(--tinte) 0%,color-mix(in oklab,var(--tinte) 26%,transparent) 20%,
      color-mix(in oklab,var(--tinte) 74%,transparent) 44%,var(--tinte) 64%),
    radial-gradient(120% 70% at 50% 100%,color-mix(in oklab,var(--tinte) 82%,transparent) 0%,transparent 60%)}
.marke-innen{position:relative;z-index:2;text-align:center;max-width:760px;margin-inline:auto}
.marke-innen h2{margin-bottom:1.4rem}
.marke-innen p{color:var(--nebel);margin-inline:auto;max-width:46ch}
.marke-innen .label{margin-bottom:1.6rem}

/* ---------- Ablauf ---------- */
.ablauf{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(1.6rem,3.4vw,3rem);counter-reset:schritt}
.schritt{position:relative;padding-top:clamp(2.4rem,4vw,3.4rem);counter-increment:schritt}
.schritt::before{content:counter(schritt,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:var(--anzeige);font-size:clamp(2.6rem,1.6rem + 3vw,4rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(201,169,97,.45)}
.schritt::after{content:'';position:absolute;top:clamp(1.1rem,2vw,1.7rem);left:0;right:0;height:1px;
  background:var(--linie);transform-origin:left;z-index:-1}
.schritt h3{font-size:clamp(1.2rem,1rem + .7vw,1.5rem);margin-bottom:.7rem;margin-top:1.4rem}
.schritt p{font-size:.94rem;color:var(--nebel)}

/* ---------- Fragen ---------- */
.fragen{border-top:1px solid var(--linie)}
.frage{border-bottom:1px solid var(--linie)}
.frage summary{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding-block:clamp(1.3rem,2.6vw,1.9rem);cursor:pointer;list-style:none;
  font-family:var(--anzeige);font-size:clamp(1.15rem,1rem + .7vw,1.55rem);
  transition:color .45s}
.frage summary::-webkit-details-marker{display:none}
.frage summary:hover{color:var(--gold-hell)}
.frage-zeichen{flex:0 0 auto;width:22px;height:22px;position:relative}
.frage-zeichen::before,.frage-zeichen::after{content:'';position:absolute;background:var(--gold);
  transition:transform .5s var(--kurve),opacity .4s}
.frage-zeichen::before{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}
.frage-zeichen::after{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)}
.frage[open] .frage-zeichen::after{transform:translateX(-50%) rotate(90deg);opacity:0}
.frage-inhalt{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .55s var(--kurve)}
.frage-inhalt > *{min-height:0}
.frage[open] .frage-inhalt{grid-template-rows:1fr}
.frage.schliesst .frage-inhalt{grid-template-rows:0fr}
.frage-inhalt p{padding-bottom:clamp(1.3rem,2.6vw,1.9rem);color:var(--nebel);max-width:74ch}

/* ---------- Ruf (CTA) ---------- */
.ruf{position:relative;text-align:center;overflow:clip;
  padding-block:clamp(6rem,14vh,11rem)}
.ruf::before{content:'';position:absolute;inset:-30% -10%;z-index:0;
  background:conic-gradient(from var(--winkel),
    transparent 0deg,rgba(201,169,97,.16) 60deg,transparent 130deg,
    rgba(42,18,38,.5) 200deg,transparent 300deg,rgba(201,169,97,.12) 360deg);
  animation:kreisen 26s linear infinite;filter:blur(58px)}
@keyframes kreisen{to{--winkel:360deg}}
.ruf-innen{position:relative;z-index:2;max-width:820px;margin-inline:auto}
.ruf h2{margin-bottom:1.6rem}
.ruf p{color:var(--nebel);margin-inline:auto;max-width:52ch;margin-bottom:2.6rem}
.ruf-knoepfe{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

/* ---------- Fuß ---------- */
.fuss{border-top:1px solid var(--linie);padding-block:clamp(3.4rem,7vw,5.5rem) 2rem;
  background:linear-gradient(180deg,var(--tinte),var(--plum-tief))}
.fuss-raster{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,3.4rem);margin-bottom:clamp(2.8rem,5vw,4rem)}
.fuss-marke img{width:210px;margin-bottom:1.4rem}
.fuss-marke p{font-size:.92rem;color:var(--nebel-2);max-width:34ch}
.fuss h4{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
  margin-bottom:1.3rem;font-family:var(--text);font-weight:400}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.fuss li a,.fuss address a{font-size:.94rem;color:var(--nebel);transition:color .4s}
.fuss li a:hover,.fuss address a:hover{color:var(--gold-hell)}
.fuss address{font-style:normal;font-size:.94rem;color:var(--nebel);line-height:1.9}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.2rem;
  padding-top:2rem;border-top:1px solid var(--linie-2);
  font-size:.72rem;letter-spacing:.14em;color:var(--nebel-2)}
.fuss-unten a{transition:color .4s}
.fuss-unten a:hover{color:var(--gold)}
.fuss-unten nav{display:flex;gap:1.6rem;flex-wrap:wrap}

/* ---------- Zeiger (Custom Cursor) ---------- */
.zeiger{position:fixed;top:0;left:0;z-index:100;pointer-events:none;
  width:9px;height:9px;border-radius:50%;background:var(--gold-hell);
  transform:translate(-50%,-50%);mix-blend-mode:screen;transition:opacity .4s}
.zeiger-ring{position:fixed;top:0;left:0;z-index:99;pointer-events:none;
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(201,169,97,.55);
  transform:translate(-50%,-50%);scale:1;
  transition:scale .45s var(--kurve),border-color .45s,background .45s,opacity .4s}
.zeiger-ring.aktiv{scale:1.86;background:rgba(201,169,97,.13);border-color:var(--gold-hell)}
@media (hover:none),(pointer:coarse){.zeiger,.zeiger-ring{display:none}}

/* ============================================================
   Mobil
   ============================================================ */
@media (max-width:1080px){
  .ueber{grid-template-columns:1fr}
  .ueber-bild{max-width:520px}
  .fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .galerie{grid-template-columns:repeat(6,1fr)}
  .g-a,.g-e{grid-column:span 6}
  .g-b,.g-c,.g-d,.g-f{grid-column:span 3}
}
@media (max-width:820px){
  .brenner{display:block}
  .nav{position:fixed;inset:0;z-index:51;flex-direction:column;justify-content:center;
    gap:2rem;background:color-mix(in oklab,var(--tinte) 97%,transparent);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    clip-path:circle(0% at calc(100% - 3rem) 2.6rem);
    transition:clip-path .8s var(--kurve);pointer-events:none}
  .nav.offen{clip-path:circle(150% at calc(100% - 3rem) 2.6rem);pointer-events:auto}
  .nav a{font-size:1.1rem;letter-spacing:.24em}
  .nav .knopf{margin-top:1rem}
  .kurs{grid-template-columns:auto minmax(0,1fr);row-gap:1.2rem}
  .kurs-meta{grid-column:2;text-align:left}
  .kurs .knopf{grid-column:2;justify-self:start}
  .buehne-fuss{flex-direction:column;align-items:flex-start;gap:1rem}
  .strecke-halt{height:auto;position:static;flex-direction:column;align-items:stretch;
    padding-block:2rem;padding-inline:var(--seite)}
  .strecke-kopf{flex:1 1 auto;max-width:none;margin-bottom:1rem}
  .strecke-fenster{overflow:visible;margin-right:0;padding-right:0}
  .strecke-hinweis{display:none}
  .strecke-spur{flex-direction:column;transform:none !important;padding-right:0}
  .karte{flex:1 1 auto;width:100%;aspect-ratio:3/3.6}
}
@media (max-width:600px){
  .galerie{grid-template-columns:repeat(2,1fr)}
  .g-a,.g-b,.g-c,.g-d,.g-e,.g-f{grid-column:span 1;aspect-ratio:3/4}
  .fuss-raster{grid-template-columns:1fr}
  .zahlen{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   Bühne auf kleinen Geräten: Bild oben, Text darunter
   Grund: bei Portrait-Viewport schneidet object-fit die Person aus dem Bild
   ============================================================ */
@media (max-width:820px){
  .buehne{min-height:auto;display:grid;grid-template-rows:auto auto;
    align-items:stretch;padding-block:0 clamp(3rem,8vh,4.5rem);gap:0}
  .buehne-bild{position:relative;aspect-ratio:3/3.9;max-height:66svh;order:1}
  .buehne-bild img{object-position:center 18%;transform:none}
  .buehne-bild::after{
    background:linear-gradient(180deg,color-mix(in oklab,var(--tinte) 62%,transparent) 0%,
      transparent 30%,color-mix(in oklab,var(--tinte) 30%,transparent) 74%,var(--tinte) 100%)}
  #staub{aspect-ratio:3/3.9;max-height:66svh;inset:0 0 auto 0}
  .buehne-innen{order:2;padding-top:clamp(1.5rem,5vw,2.5rem);align-items:flex-start}
  .buehne-innen > *{margin-left:0;max-width:100%}
  .buehne .label{margin-bottom:1.2rem}
  .buehne-fuss{position:static;order:3;padding-inline:var(--seite);
    margin-top:clamp(2rem,6vw,3rem)}
  .buehne-knoepfe .knopf{flex:1 1 100%;justify-content:center}
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .zeigt{opacity:1;transform:none}
  .korn{display:none}
}

/* ---------- Seitenwechsel (View Transitions) ---------- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-raus .5s var(--kurve) both}
  ::view-transition-new(root){animation:vt-rein .65s var(--kurve) both}
}
@keyframes vt-raus{to{opacity:0;transform:scale(.985)}}
@keyframes vt-rein{from{opacity:0;transform:scale(1.012)}}

/* ============================================================
   Textseiten (Impressum, Datenschutz, AGB)
   ============================================================ */
.text-seite{padding-top:clamp(7rem,14vh,10rem);padding-bottom:clamp(4rem,9vh,7rem)}
.text-seite h1{margin-block:1.4rem clamp(2rem,4vw,3rem);
  font-size:clamp(2rem,1.3rem + 2.6vw,3.4rem)}
.text-seite h2{font-size:clamp(1.25rem,1.05rem + .8vw,1.65rem);
  margin-top:clamp(2.4rem,4.5vw,3.4rem);margin-bottom:1rem;color:var(--creme)}
.text-seite h3{font-size:1.05rem;margin-top:1.8rem;margin-bottom:.7rem;
  font-family:var(--text);font-weight:500;letter-spacing:.02em;color:var(--gold-hell)}
.text-seite p,.text-seite li{color:var(--nebel);max-width:74ch}
.text-seite p + p{margin-top:.9rem}
.text-seite ul{padding-left:1.2rem;margin:.9rem 0;display:grid;gap:.5rem}
.text-seite li::marker{color:var(--gold)}
.text-seite a{color:var(--gold);border-bottom:1px solid var(--linie)}
.text-seite address{font-style:normal;line-height:1.9;color:var(--nebel)}
.text-seite .luecke{color:var(--gold-hell);background:rgba(201,169,97,.12);
  padding:.1em .5em;border:1px dashed var(--linie);font-size:.94em}
.text-seite .stand{margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.6rem;
  border-top:1px solid var(--linie-2);font-size:.82rem;color:var(--nebel-2)}