*{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#0a1220;--paper:#fff;--mute:#6b7686;--linie:rgba(15,41,71,.12);--linie-hell:rgba(255,255,255,.16);
  --nv-tief:#050e1c;--nv-mitte:#0d2039;--nv-hoch:#1e3d63;
  --nv1:#0f2947;--nv2:#2f5c92;--nv3:#3a6ba6}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:Inter,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.se{font-family:"Instrument Serif",Georgia,serif;font-weight:400;line-height:.94;letter-spacing:-.015em}
a{color:inherit}

/* ---------- Raster ---------- */


.dunkel .kl{color:rgba(255,255,255,.55)}


/* ---------- Kopf ---------- */
.kopf{position:fixed;z-index:80;inset:0 0 auto 0;display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(18px,4vw,44px);mix-blend-mode:difference;color:#fff;pointer-events:none}
.kopf a{pointer-events:auto;text-decoration:none}
.marke{font-family:"Instrument Serif",Georgia,serif;font-size:19px;letter-spacing:.01em}
.kopf nav{display:flex;gap:26px;font:500 12px/1 Inter;letter-spacing:.14em;text-transform:uppercase}
.burger{display:none;pointer-events:auto;background:none;border:0;padding:10px;cursor:pointer;color:#fff;
  width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .3s,opacity .3s}
body.offen .burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.offen .burger i:nth-child(2){opacity:0}
body.offen .burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.schub{position:fixed;inset:0;z-index:75;background:linear-gradient(158deg,var(--nv-tief),var(--nv-hoch));display:flex;flex-direction:column;
  justify-content:center;gap:6px;padding:0 clamp(18px,6vw,44px);
  opacity:0;visibility:hidden;transition:opacity .34s ease,visibility .34s}
body.offen .schub{opacity:1;visibility:visible}
.schub a{color:#fff;text-decoration:none;font-family:"Instrument Serif",Georgia,serif;
  font-size:clamp(34px,9vw,58px);line-height:1.18;opacity:0;transform:translateY(18px);
  transition:opacity .4s ease,transform .4s ease}
body.offen .schub a{opacity:1;transform:none}
body.offen .schub a:nth-child(1){transition-delay:.06s}
body.offen .schub a:nth-child(2){transition-delay:.11s}
body.offen .schub a:nth-child(3){transition-delay:.16s}
body.offen .schub a:nth-child(4){transition-delay:.21s}
body.offen .schub a:nth-child(5){transition-delay:.26s}
@media(max-width:900px){
  .kopf nav{display:none}
  .burger{display:flex}
  .faden{width:38px}
  .kapitel{font-size:9px}
}
@media(min-width:901px){.schub{display:none}}

/* ---------- Leiste rechts ---------- */
.leiste{position:fixed;z-index:80;right:clamp(14px,2.2vw,30px);top:50%;transform:translateY(-50%);
  width:1px;height:38vh;background:rgba(130,130,130,.32);pointer-events:none}
.leiste i{position:absolute;left:-2.5px;width:6px;height:6px;border-radius:50%;background:#8a8f96;top:0;
  transition:none}
.leiste b{position:absolute;right:14px;top:0;transform:translateY(-50%);font:600 10px/1 Inter;
  letter-spacing:.16em;color:#8a8f96;white-space:nowrap}
.kapitel{position:fixed;z-index:80;left:clamp(18px,4vw,44px);bottom:26px;font:600 10px/1 Inter;
  letter-spacing:.2em;text-transform:uppercase;mix-blend-mode:difference;color:#fff;pointer-events:none}

/* ---------- Auszeichnungen ---------- */
.kl{font:600 11px/1 Inter;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.d1{font-size:clamp(40px,6.6vw,116px)}
.d2{font-size:clamp(32px,4.6vw,78px)}
.d3{font-size:clamp(25px,3.1vw,50px)}
.lead{font-size:clamp(18px,1.45vw,23px);line-height:1.55;color:#3b3f44;max-width:62ch}
.dunkel .lead{color:rgba(255,255,255,.72)}
.mask{display:block;overflow:hidden}
.mask>span{display:block;will-change:transform}
.ch{display:inline-block;will-change:transform,opacity}

.knopf{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:100px;
  font:600 13px/1 Inter;letter-spacing:.04em;text-decoration:none;border:1px solid transparent;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),background .35s,color .35s}
.knopf--voll{background:linear-gradient(118deg,var(--nv1),var(--nv2));color:#fff}
.knopf--rand{border-color:var(--linie);color:var(--ink)}
.dunkel .knopf--voll,.hero .knopf--voll{background:#fff;color:var(--ink)}
.dunkel .knopf--rand,.hero .knopf--rand{border-color:var(--linie-hell);color:#fff}
.dunkel .knopf--rand:hover,.hero .knopf--rand:hover{border-color:rgba(255,255,255,.42)}
.knopf:hover{transform:translateY(-2px)}


/* ---------- 1.1 Hero ---------- */


.hero__bild::before{content:"";position:absolute;inset:0;mix-blend-mode:screen;
  background:radial-gradient(130% 100% at 100% 52%,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 44%)}
.hero__bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#040b16 0%,rgba(4,11,22,.88) 22%,rgba(4,11,22,0) 58%),
             linear-gradient(0deg,#040b16 0%,rgba(4,11,22,0) 30%),
             linear-gradient(180deg,rgba(4,11,22,.55) 0%,rgba(4,11,22,0) 20%)}



.hero__ziel span{font:600 11px/1 Inter;letter-spacing:.24em;color:rgba(255,255,255,.5)}
.hero h1{max-width:16ch}
.hero .lead{margin-top:26px;max-width:52ch}

/* ---------- 1.2 Einstieg ---------- */
.zitat{max-width:24ch}
.wl{display:inline-block;color:#c9ced4;will-change:color,filter}
.dunkel .wl{color:#2f3338}
.quelle{margin-top:40px;font:500 13px/1 Inter;letter-spacing:.1em;color:var(--mute)}

/* ---------- 1.3 Problem ---------- */


.problem__liste b{font:600 12px/1.6 Inter;letter-spacing:.14em;color:rgba(255,255,255,.4)}
.problem__liste p{color:rgba(255,255,255,.78);max-width:70ch}
.merksatz{margin:70px 0 0;max-width:34ch}
.kein{display:grid;gap:22px;margin-top:60px;max-width:78ch}
.kein p{color:rgba(255,255,255,.62)}

/* ---------- 1.4 Drei Wege ---------- */


@media(max-width:1023px){.wege{grid-template-columns:1fr}}

.weg--1 .weg__bild{background:radial-gradient(80% 90% at 30% 20%,#ccd8e8,#5a6f8c 55%,#101c2e)}
.weg--2 .weg__bild{background:conic-gradient(from 200deg at 45% 40%,#16263c,#8b9db6,#dde6f2,#3d5675,#16263c)}
.weg--3 .weg__bild{background:radial-gradient(70% 80% at 70% 30%,#e2e9f3,#8494ab 45%,#182534)}
.weg__bild span{position:absolute;left:18px;bottom:14px;font:500 10px/1 Inter;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.55)}

.weg__text h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(26px,2.1vw,38px);line-height:1}
.weg__text .kl{color:rgba(255,255,255,.42)}
.weg__text p{color:rgba(255,255,255,.7);font-size:15.5px}
.weg__text a{margin-top:auto;font:600 13px/1 Inter;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);
  padding-bottom:5px;align-self:flex-start}

/* ---------- 1.5 Unterschied ---------- */
.unter{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);align-items:start}
@media(max-width:1023px){.unter{grid-template-columns:1fr}}
.jahr{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(80px,14vw,230px);line-height:.82;
  display:flex;gap:.01em}
.walze{position:relative;height:.82em;overflow:hidden;width:.56em}
.walze u{position:absolute;left:0;top:0;text-decoration:none;display:block;will-change:transform}
.walze u i{display:block;height:.82em;font-style:normal;text-align:center}
.jahr__zu{font:500 12px/1.5 Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:18px}

/* ---------- 1.6 Beweis ---------- */


.logos span{padding:11px 18px;border:var(--hl-staerke) solid var(--linie);border-radius:100px;
  font:500 12px/1 Inter;letter-spacing:.06em;color:#4a4f55}

@media(max-width:760px){.zahlen{grid-template-columns:1fr}}
.zahl b{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(44px,5vw,84px);line-height:1;display:block}
.zahl span{display:block;margin-top:10px;font-size:15px;color:var(--mute);max-width:26ch}


/* ---------- 1.7 Bücher ---------- */


@media(max-width:900px){.buecher{grid-template-columns:1fr}}

@media(max-width:620px){.buch{grid-template-columns:1fr}}

.buch--1 .buch__cover{background:linear-gradient(150deg,#e6edf6,#8393aa 48%,#132132)}
.buch--2 .buch__cover{background:linear-gradient(150deg,#1c1e21,#5f646b 52%,#d6d9dd)}

.buch__text h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(22px,1.9vw,32px);line-height:1.05}
.buch__text p{font-size:15px;color:rgba(255,255,255,.68)}
.buch__text .knopfe{margin-top:auto;gap:10px}
.buch__text .knopf{padding:12px 20px;font-size:12px}

/* ---------- 1.8 Podcast ---------- */


@media(max-width:900px){.pod{grid-template-columns:1fr}}
.pod__welle{display:flex;align-items:flex-end;gap:5px;height:150px}
.pod__welle i{flex:1;background:linear-gradient(180deg,#fff,rgba(255,255,255,.25));border-radius:3px;
  min-height:6px;will-change:transform}

/* ---------- 1.9 Ort ---------- */


.ort__bild span{position:absolute;left:22px;bottom:18px;font:500 10px/1 Inter;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.6)}

/* ---------- 1.10 Abschluss ---------- */


.schluss .knopfe{justify-content:center}



.faden{position:fixed;z-index:70;left:0;top:0;width:100vw;height:100vh;pointer-events:none}
@media(max-width:900px){.faden{width:44px}.faden .komet{stroke-width:2.4}}
.faden path,.faden use{fill:none;stroke-linecap:round}
.fpunkt{position:fixed;z-index:71;left:0;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#8a8f96;opacity:0;pointer-events:none;will-change:transform}
.wort{white-space:nowrap}
.faden .spur{stroke:rgba(140,140,140,.22);stroke-width:1}
.faden .zug{stroke:#8a8f96;stroke-width:1.4}
.faden .komet{stroke:#fff;stroke-width:3.2;mix-blend-mode:difference}
.faden circle{fill:#8a8f96}
.magnet{will-change:transform}

/* ---------- Vier Stationen ---------- */
.stat{position:relative;height:460vh;background:var(--paper)}
.stat__kam{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;
  padding:0 clamp(18px,6vw,44px)}
.stat__buehne{position:relative;width:min(1180px,100%);height:min(56vh,440px)}
.stat__ort{position:absolute;inset:0;display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:clamp(24px,5vw,76px);opacity:0;will-change:transform,opacity}
@media(max-width:820px){
  .stat__buehne{height:min(64vh,520px)}
  .stat__ort{grid-template-columns:1fr;align-content:center;justify-items:start;gap:clamp(18px,4vh,34px)}
}
.stat__zeichen{width:clamp(92px,12vw,180px);height:auto;color:var(--nv1);overflow:visible}
.stat__zeichen .zg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stat__zeichen .duenn{stroke-width:1;stroke:var(--nv3);opacity:.7}
.stat__zeichen .nadelform{fill:currentColor;stroke:none}
.stat__zeichen .nadelform.hell{fill:rgba(58,107,166,.34)}
.stat__zeichen [data-nadel],.stat__zeichen [data-strahl]{transform-box:fill-box;transform-origin:center}
.stat__zeichen [data-strahl]{transform-origin:100% 50%}
.stat__satz{font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(30px,5.2vw,84px);line-height:1.03;max-width:17ch;letter-spacing:-.01em}
.stat__satz em{font-style:italic;position:relative;white-space:nowrap;
  background-image:linear-gradient(104deg,var(--nv2) 0%,var(--nv3) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.stat__satz em::after{content:"";position:absolute;left:0;right:0;bottom:.17em;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .8s cubic-bezier(.19,.86,.24,1)}
.stat__ort.an .stat__satz em::after{transform:scaleX(1)}
.stat__rail{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(26px,6vh,64px);
  display:flex;gap:9px;width:min(340px,68vw)}
.stat__rail i{flex:1;height:2px;border-radius:2px;background:rgba(10,10,11,.12);overflow:hidden}
.stat__rail b{display:block;height:100%;background:linear-gradient(90deg,var(--nv1),var(--nv2));transform:scaleX(0);transform-origin:left}

/* ---------- Verlaufsschrift ---------- */
.abs:not(.dunkel) h2,
.grau .se.d3,
.stimme .se.d3,
.stat__satz,
.zahl b{
  background-image:linear-gradient(104deg,var(--nv1) 0%,var(--nv2) 58%,var(--nv3) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.walze u i{
  background-image:linear-gradient(168deg,var(--nv1) 0%,var(--nv2) 76%,var(--nv3) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.stat__satz em::after{background:var(--nv2)}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .abs:not(.dunkel) h2,.grau .se.d3,.stimme .se.d3,.stat__satz,.zahl b,.walze u i{
    color:var(--nv1);-webkit-text-fill-color:var(--nv1)}
}

/* ---------- Bildbaender ---------- */


.band__bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,14,28,.60) 0%,rgba(5,14,28,0) 28%,rgba(5,14,28,0) 58%,rgba(5,14,28,.78) 100%)}

.band--1 .band__bild{--bild:radial-gradient(72% 84% at 60% 32%,#cdd9ea 0%,#5d7a9e 38%,#16263c 72%,#050e1c 100%)}
.band--2 .band__bild{--bild:conic-gradient(from 195deg at 42% 46%,#050e1c,#3a5b86,#c3d2e6,#1a2f4b,#050e1c)}


/* ---------- Stellschrauben fuer alle Zierlinien ---------- */
:root{
  --fd-staerke:1.4;   /* Strichstaerke des gezogenen Fadens */
  --fd-spur:1;        /* Strichstaerke der blassen Fuehrung */
  --fd-deckung:.22;   /* Deckung der blassen Fuehrung */
  --fd-oben:9;        /* wo die Rakete oben ankommt, in Prozent der Bildhoehe */
  --fd-unten:88;      /* wo sie unten startet */
  --fd-schweif:.055;  /* Laenge des Kometen als Anteil der Strecke */
  --fd-breite:100vw;  /* Breite des Fadenfeldes, klein heisst schmaler Rand */
  --fd-komet:3.2;     /* Strichstaerke des Kometen */

  --lst-breite:340px; /* Breite der Fortschrittsleisten */
  --lst-staerke:2px;  /* Hoehe der Fortschrittsleisten */

  --hl-staerke:1px;   /* Staerke der Haarlinien im Text */
}
.faden{width:var(--fd-breite)}
.faden .spur{stroke:rgba(140,150,165,var(--fd-deckung));stroke-width:var(--fd-spur)}
.faden .zug{stroke-width:var(--fd-staerke)}
.faden .komet{stroke-width:var(--fd-komet)}
.stat__rail{width:min(var(--lst-breite),68vw)}
.stat__rail i{height:var(--lst-staerke)}
.reise__linie{height:var(--lst-staerke)}
.glaube__balken{width:min(var(--lst-breite),68vw);height:var(--lst-staerke)}
@media(max-width:900px){:root{--fd-breite:44px;--fd-komet:2.4}}

/* ---------- Freie Elemente ---------- */
section,.abs,.hu{position:relative}
.frei{position:absolute;z-index:3;pointer-events:none;
  left:var(--x,50%);top:var(--y,50%);
  transform:translate(-50%,calc(-50% + var(--vy,0px))) rotate(var(--dreh,0deg)) scale(var(--gr,1));
  transform-origin:center;will-change:transform}
.frei--zeichen{width:var(--d,56px);height:var(--d,56px);color:var(--nv2);
  opacity:var(--deck,.55);overflow:visible}
.dunkel .frei--zeichen,.hero .frei--zeichen,.glaube .frei--zeichen,.band .frei--zeichen,
.vorhang__hinten .frei--zeichen{color:rgba(255,255,255,.55)}
.frei--text{font:500 12px/1.55 Inter;letter-spacing:.06em;color:var(--nv2);
  opacity:var(--deck,.75);max-width:var(--br,22ch);text-align:var(--satz,left)}
.dunkel .frei--text,.hero .frei--text,.glaube .frei--text,.band .frei--text{color:rgba(255,255,255,.6)}
.frei--gross{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.01em;
  font-size:clamp(20px,2.6vw,46px);line-height:1.06;opacity:var(--deck,.9)}
.frei--klein{font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.frei--form{width:var(--d,200px);height:var(--d,200px);border-radius:50%;opacity:var(--deck,1);
  background:radial-gradient(62% 62% at 40% 34%,rgba(47,92,146,.16),rgba(47,92,146,0) 72%)}
.frei--rechteck{border-radius:20px;
  background:linear-gradient(150deg,rgba(47,92,146,.14),rgba(47,92,146,0))}
.frei--hell{background:radial-gradient(62% 62% at 40% 34%,rgba(255,255,255,.13),rgba(255,255,255,0) 72%)}
.frei--rechteck.frei--hell{background:linear-gradient(150deg,rgba(255,255,255,.11),rgba(255,255,255,0))}
.frei--breit{border-radius:20px;width:var(--b,320px);height:var(--h,180px)}
.vorrat{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Vorhang ---------- */
.vorhang{position:relative;height:320vh;background:var(--paper)}
.vorhang__kam{position:sticky;top:0;height:100vh;overflow:hidden}
.vorhang__hinten{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:0 clamp(18px,6vw,44px);
  background:linear-gradient(158deg,var(--nv-tief) 0%,var(--nv-mitte) 46%,var(--nv-hoch) 100%);color:#fff}
.vorhang__hinten .kl{color:rgba(255,255,255,.55)}
.vorhang__hinten h2{max-width:18ch;margin-top:20px}
.vorhang__hinten p.lead{color:rgba(255,255,255,.72);max-width:52ch;margin:22px auto 0}
.vorhang__front{position:absolute;inset:0;display:flex;z-index:2}
.vorhang__front i{flex:1;height:100%;will-change:transform;
  background:linear-gradient(178deg,#f7f9fb 0%,#e7edf4 100%)}
.vorhang__front i:nth-child(even){background:linear-gradient(178deg,#ffffff 0%,#eef2f7 100%)}
.vorhang__front i + i{box-shadow:-1px 0 0 rgba(15,41,71,.06)}
.vorhang__hinten .frei{z-index:1}
.vorhang__marke{position:absolute;z-index:4;left:clamp(18px,4vw,44px);top:clamp(90px,14vh,150px);
  font:600 11px/1 Inter;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  mix-blend-mode:difference}



/* ================= Elementor: nur was noetig ist =================
   Groesse, Abstand, Hintergrund und Ausrichtung stellst du im Editor ein.
   Hier steht nur, was Elementor nicht kann: Typografie und Bewegung. */
.nvt .elementor-widget:not(:last-child){margin-block-end:0}
.nvt p{margin:0}
.nvt .elementor-widget-text-editor p + p{margin-top:1em}

/* --- Typografie ueber die Klasse an der Widget-Huelle --- */
.nvt .w-se .elementor-heading-title,.nvt .w-se p{font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;line-height:.94;letter-spacing:-.015em}
.nvt .w-d1 .elementor-heading-title,.nvt .w-d1 p{font-size:clamp(40px,6.6vw,116px)}
.nvt .w-d2 .elementor-heading-title,.nvt .w-d2 p{font-size:clamp(32px,4.6vw,78px)}
.nvt .w-d3 .elementor-heading-title,.nvt .w-d3 p{font-size:clamp(25px,3.1vw,50px)}
.nvt .w-d4 .elementor-heading-title,.nvt .w-d4 p{font-size:clamp(22px,2.1vw,38px);line-height:1.02}
.nvt .w-kl p,.nvt .w-kl .elementor-heading-title{font:600 11px/1 Inter;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute)}
.nvt .w-lead p{font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:#3a4a5e}
.nvt .w-quelle p{font-size:13px;color:var(--mute);letter-spacing:.01em}
.nvt .w-eng .elementor-heading-title{max-width:20ch}
.nvt .w-mitte{text-align:center}
.nvt .w-mitte .elementor-widget-container{margin-inline:auto}

/* --- Verlaufsschrift auf hellen Flaechen --- */
.nvt .w-verlauf .elementor-heading-title,.nvt .w-verlauf p{
  background-image:linear-gradient(104deg,var(--nv1) 0%,var(--nv2) 58%,var(--nv3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent}

/* --- Auf dunklen Flaechen --- */
.nvt .dunkel,.nvt .dunkel p,.nvt .dunkel .elementor-heading-title{color:#fff}
.nvt .dunkel .w-kl p,.nvt .dunkel .w-kl .elementor-heading-title{color:rgba(255,255,255,.55)}
.nvt .dunkel .w-lead p{color:rgba(255,255,255,.72)}
.nvt .dunkel .w-quelle p{color:rgba(255,255,255,.45)}
.nvt .dunkel .w-verlauf .elementor-heading-title{
  background-image:linear-gradient(104deg,#ffffff 0%,#b7c8dd 100%)}

/* --- Knoepfe --- */
.nvt .elementor-button{display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:100px;border:1px solid transparent;
  font-family:Inter,sans-serif;font-size:13px;font-weight:600;line-height:1;
  background:linear-gradient(118deg,var(--nv1),var(--nv2));color:#fff;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);will-change:transform}
.nvt .elementor-button:hover{transform:translateY(-2px)}
.nvt .w-rand .elementor-button{background:none;border-color:var(--linie);color:var(--nv1)}
.nvt .dunkel .w-voll .elementor-button{background:#fff;color:var(--nv1)}
.nvt .dunkel .w-rand .elementor-button{background:none;border-color:var(--linie-hell);color:#fff}
.nvt .w-chip p{padding:11px 18px;border:1px solid var(--linie);border-radius:100px;
  font:500 12px/1 Inter;letter-spacing:.06em;color:#4a4f55}
.nvt .dunkel .w-chip p{border-color:var(--linie-hell);color:rgba(255,255,255,.8)}

/* --- Bilder --- */
.nvt .w-bild .elementor-widget-container,.nvt .w-bild figure{height:100%;margin:0}
.nvt .w-bild img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.nvt .w-fuell{position:absolute;inset:0;z-index:0}
.nvt .w-fuell--rechts{inset:0 0 0 38%}
.nvt .w-maske::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,#040b16 0%,rgba(4,11,22,.88) 22%,rgba(4,11,22,0) 58%),
             linear-gradient(0deg,#040b16 0%,rgba(4,11,22,0) 30%)}
.nvt .w-maske--band::after{background:linear-gradient(180deg,rgba(5,14,28,.6) 0%,
  rgba(5,14,28,0) 28%,rgba(5,14,28,0) 58%,rgba(5,14,28,.78) 100%)}
.nvt .w-band{inset:-14% 0;will-change:transform}

/* --- Zahlen und Zaehler --- */
.nvt .w-zaehler .elementor-heading-title,.nvt .w-walzen .elementor-heading-title{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;line-height:.82}
.nvt .w-walzen .elementor-heading-title{font-size:clamp(80px,14vw,230px);display:flex;gap:.01em}
.nvt .w-zaehler .elementor-heading-title{font-size:clamp(44px,5vw,84px);line-height:1}

/* ================= Was Elementor nicht kann =================
   Alles Uebrige stellst du im Editor ein. */
.nvt .hero{overflow:hidden}
.nvt .w-platz{position:absolute;right:4vw;bottom:5vh;z-index:3;text-align:right;max-width:24ch}
.nvt .w-platz p{color:rgba(255,255,255,.34)}
.nvt .band{overflow:hidden}
.nvt .w-bandtext{position:absolute;left:clamp(18px,4vw,44px);bottom:clamp(20px,4vh,42px);z-index:3}
.nvt .w-bandtext p{color:rgba(255,255,255,.62)}
.nvt .w-kartenbild{height:46%;min-height:200px;flex:none;overflow:hidden}
.nvt .w-cover{min-width:34%;min-height:230px;overflow:hidden;flex:none}
.nvt .w-ortbild{height:min(66vh,620px);border-radius:22px;overflow:hidden;will-change:filter,transform}
.nvt .w-nr{flex:none;width:60px}
.nvt .w-nr p{color:var(--mute)}
.nvt .dunkel .w-nr p{color:rgba(255,255,255,.4)}
.nvt .problem__zeile{border-bottom:1px solid var(--linie-hell)}
.nvt .w-mehr a{font:600 13px/1 Inter;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:4px;color:inherit}
.nvt .pod__welle{display:flex;align-items:flex-end;gap:5px}
.nvt .pod__welle i{flex:1;background:linear-gradient(180deg,#fff,rgba(255,255,255,.25));
  border-radius:3px;min-height:6px;will-change:transform}
@media(max-width:900px){
  .nvt .w-platz{position:static;text-align:left;max-width:none;padding:0 6vw 6vh}
}

/* ================= Rollen ueber die CSS-Kennung =================
   Elementor uebertraegt Klassen an Containern nicht in die Editor-Vorschau,
   die CSS-Kennung schon. Jeder Abschnitt traegt deshalb zusaetzlich eine
   sprechende Kennung wie nvt--abs-dunkel--4. */
[id*="dunkel"],[id*="dunkel"] p,[id*="dunkel"] .elementor-heading-title,
[id*="hero"],[id*="hero"] p,[id*="hero"] .elementor-heading-title{color:#fff !important}
[id*="dunkel"] .w-kl p,[id*="hero"] .w-kl p{color:rgba(255,255,255,.55) !important}
[id*="dunkel"] .w-lead p,[id*="hero"] .w-lead p{color:rgba(255,255,255,.72) !important}
[id*="dunkel"] .w-quelle p,[id*="hero"] .w-quelle p{color:rgba(255,255,255,.45) !important}
[id*="dunkel"] .w-verlauf .elementor-heading-title{
  background-image:linear-gradient(104deg,#ffffff 0%,#b7c8dd 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent !important;-webkit-text-fill-color:transparent !important}
[id*="dunkel"] .w-nr p{color:rgba(255,255,255,.4) !important}
[id*="dunkel"] .w-chip p{border-color:rgba(255,255,255,.16) !important;color:rgba(255,255,255,.8) !important}
.e-parent[id*="hero"]{overflow:hidden}

/* Knoepfe: das Theme faerbt sie sonst orange */
.nvt .elementor-button,.elementor-editor-active .elementor-button{
  background-image:linear-gradient(118deg,var(--nv1),var(--nv2)) !important;
  background-color:transparent !important;color:#fff !important;
  border-radius:100px !important;padding:15px 26px !important;
  font-family:Inter,sans-serif !important;font-size:13px !important;font-weight:600 !important}
.nvt .w-rand .elementor-button,.elementor-editor-active .w-rand .elementor-button{
  background-image:none !important;border:1px solid var(--linie) !important;color:var(--nv1) !important}
[id*="dunkel"] .w-voll .elementor-button,[id*="hero"] .w-voll .elementor-button{
  background-image:none !important;background-color:#fff !important;color:var(--nv1) !important}
[id*="dunkel"] .w-rand .elementor-button,[id*="hero"] .w-rand .elementor-button{
  background-image:none !important;background-color:transparent !important;
  border-color:rgba(255,255,255,.16) !important;color:#fff !important}

/* ================= Kamera-Abschnitte brauchen ihre Sektion als Elternteil =========
   position:sticky misst am Elternelement. Steckt die Kamera in einer Widget-Huelle,
   die selbst nur 100vh hoch ist, hat sie keinen Weg und klebt oben fest. */
.stat > .elementor-widget-html,.vorhang > .elementor-widget-html,
.glaube > .elementor-widget-html,.reise > .elementor-widget-html,
[id*="stat"] > .elementor-widget-html{display:contents !important}
.hero > .elementor-element:not(.w-bild),.band > .elementor-element:not(.w-bild),
[id*="hero"] > .elementor-element:not(.w-bild),
[id*="band"] > .elementor-element:not(.w-bild){position:static}
.hero > .w-bild,.band > .w-bild,[id*="hero"] > .w-bild,[id*="band"] > .w-bild{position:absolute}

/* ================= Faden rechts, rot, mit Rakete ================= */
.faden{left:auto;right:0}
.faden .spur{stroke:rgba(226,35,26,var(--fd-deckung,.22))}
.faden .zug{stroke:var(--fd-rot,#e2231a)}
.faden .komet{stroke:#ff7a6e;mix-blend-mode:normal}
.fpunkt{position:fixed;z-index:71;left:0;top:0;width:30px;height:60px;
  margin:-30px 0 0 -15px;opacity:0;pointer-events:none;will-change:transform;
  background:none;border-radius:0}
.fpunkt svg{display:block;overflow:visible}
.rak-leib{fill:#fff}
.rak-spitze,.rak-karo,.rak-flosse{fill:var(--fd-rot,#e2231a)}
.rak-fuss,.rak-fenster{fill:#0f2947}
.rak-flamme{fill:#ffb340;transform-origin:12px 39px;
  animation:nvt-flamme .26s steps(2,end) infinite alternate}
@keyframes nvt-flamme{from{transform:scaleY(.65) scaleX(.85);opacity:.8}
  to{transform:scaleY(1.3) scaleX(1.05);opacity:1}}

/* Auf dem Handy traegt die Rakete die Anzeige, die Leiste kann weg. */
@media(max-width:900px){.leiste{display:none}}

/* Handy: grosse Zierflaechen weg, sie schoben die Seite seitlich hinaus. */
@media(max-width:900px){.frei--form,.frei--rechteck,.frei--breit{display:none}}

/* ================= Unterlaengen ===================================
   Die Serifenschrift laeuft mit Zeilenhoehe unter 1. Das g und das p
   ragen dann unter den Kasten, und wo ein Verlauf in die Schrift
   geschnitten ist, bekommen sie keine Farbe mehr. Etwas Luft unten. */
.nvt .elementor-heading-title{padding-bottom:.14em;margin-bottom:-.06em}
.nvt .wl{padding-bottom:.12em;margin-bottom:-.12em}
.nvt .w-se p{padding-bottom:.1em}
.nvt .mask{padding-bottom:.12em;margin-bottom:-.12em}

/* ================= Rueckfall fuer den dunklen Grund =================
   Elementors Verlaufsregler laesst sich per Datenbank nur schwer sauber
   fuellen. Hier steht der Grund als Rueckfall. Stellst du im Editor einen
   eigenen Hintergrund ein, gewinnt der, weil die Seiten-CSS spaeter laedt. */
.e-parent[id*="dunkel"]{background-image:linear-gradient(158deg,#050e1c 0%,#0d2039 46%,#1e3d63 100%)}
.e-parent[id*="hero"]{background-image:linear-gradient(150deg,#040b16 0%,#0a1b31 54%,#16304f 100%)}

/* ================= Buchdeckel und Textbreite =================
   Ein Bild-Widget mit flex:none nimmt sich seine Eigenbreite, hier 1200px,
   und quetscht die Textspalte auf nichts zusammen. Feste Spaltenbreite. */
.nvt .w-cover{flex:0 0 34%;width:34%;min-width:0;min-height:230px;overflow:hidden}
.nvt .buch{align-items:stretch}
.nvt .w-kartenbild{flex:0 0 auto;width:100%;min-width:0}
@media(max-width:620px){.nvt .w-cover{flex:0 0 auto;width:100%;min-height:200px}}
.nvt .w-eng .elementor-heading-title{max-width:28ch}

/* ================= Treppe mit Lichtlauf =================
   Gemessen an der Referenz: sieben Stufen, Versatz 0,085, Fenster 0,5.
   Breiten 34 Prozent plus 11 je Stufe. */
.treppe{position:relative;height:340vh}
.treppe__kam{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.stufe{position:relative;width:100%;will-change:transform;
  background:linear-gradient(158deg,var(--nv-tief) 0%,var(--nv-hoch) 100%)}
.stufe svg{position:absolute;left:0;top:-1px;width:100%;height:2px;overflow:visible}
.stufe b{position:absolute;left:clamp(18px,4vw,80px);top:50%;
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(20px,2.8vw,56px);letter-spacing:-.015em;color:#fff;white-space:nowrap;
  will-change:transform,opacity}
.treppe > .elementor-widget-html{display:contents !important}
.e-parent[id*="treppe"]{background:var(--paper)}

/* ================= Programmkarten ================= */
.nvt .raster{align-items:stretch}
.nvt .programm{flex:1 1 320px;min-width:0;background:#fff}
.nvt .w-claim p{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(17px,1.4vw,21px);
  line-height:1.2;color:var(--nv2)}
.nvt .w-rahmen p{font:500 12px/1.5 Inter;letter-spacing:.04em;color:var(--mute);
  border-top:1px solid rgba(15,41,71,.12);padding-top:12px;margin-top:4px}
@media(max-width:900px){.nvt .programm{flex:1 1 100%}}

/* ================= Buchseite ================= */
.nvt .buch--1 .w-cover{background:linear-gradient(150deg,#e6edf6,#8393aa 48%,#132132)}
.nvt .buch--2 .w-cover{background:linear-gradient(150deg,#1c1e21,#5f646b 52%,#d6d9dd)}
/* Der Elementor-Platzhalter verschwindet von selbst, sobald ein echtes Bild drin ist. */
.nvt .buch .w-cover img[src*="placeholder"]{opacity:0}
.nvt .buch{overflow:hidden}

/* ================= Globale Kopf- und Fusszeile ================= */
.kopf{transition:background-color .3s ease, box-shadow .3s ease}
.kopf.kopf--grund{box-shadow:0 1px 0 rgba(255,255,255,.09)}
.kopf a,.kopf button{pointer-events:auto}
.kopf nav a{position:relative;color:rgba(255,255,255,.72);transition:color .25s}
.kopf nav a:hover,.kopf nav a.hier{color:#fff}
.kopf nav a.hier::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:currentColor}
.klappe{position:relative}
.klappe__knopf{background:none;border:0;padding:0;margin:0;cursor:pointer;color:rgba(255,255,255,.72);
  font:inherit;letter-spacing:inherit;text-transform:inherit;display:inline-flex;align-items:center;gap:7px}
.klappe__knopf:hover,.klappe__knopf.hier,.klappe[data-auf] .klappe__knopf{color:#fff}
.klappe__knopf i{width:6px;height:6px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .25s}
.klappe[data-auf] .klappe__knopf i{transform:rotate(-135deg) translate(-2px,-2px)}
.klappe__blatt{position:absolute;left:-18px;top:calc(100% + 18px);min-width:268px;
  background:rgba(9,20,38,.97);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s,transform .22s,visibility .22s}
.klappe[data-auf] .klappe__blatt{opacity:1;visibility:visible;transform:none}
.klappe__blatt a{padding:10px 14px;border-radius:9px;color:rgba(255,255,255,.76);
  font:500 12px/1.2 Inter;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.klappe__blatt a:hover,.klappe__blatt a.hier{background:rgba(255,255,255,.09);color:#fff}
.schub__kl{margin:18px 0 2px;font:600 10px/1 Inter;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.42)}
/* ---- Fusszeile ---- */
.fussz{background:var(--ink);color:rgba(255,255,255,.62);
  border-top:1px solid rgba(255,255,255,.1);position:relative;z-index:2}
.fussz__innen{max-width:1320px;margin:0 auto;padding:64px clamp(22px,4vw,40px) 44px;
  display:grid;grid-template-columns:1fr auto;gap:28px 40px;align-items:start}
.fussz__marke{display:flex;flex-direction:column;gap:5px}
.fussz__name{font-family:"Instrument Serif",Georgia,serif;font-size:24px;color:#fff}
.fussz__ort{font:500 11px/1 Inter;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.44)}
.fussz__nav{display:flex;flex-wrap:wrap;gap:12px 26px;grid-column:1 / -1}
.fussz__nav a,.fussz__recht a{color:rgba(255,255,255,.66);text-decoration:none;
  font:500 12px/1 Inter;letter-spacing:.12em;text-transform:uppercase}
.fussz__nav a:hover,.fussz__recht a:hover{color:#fff}
.fussz__recht{display:flex;gap:22px;grid-column:1 / -1}
.hoch{justify-self:end;background:none;border:1px solid rgba(255,255,255,.24);border-radius:999px;
  padding:11px 20px;color:rgba(255,255,255,.8);font:500 11px/1 Inter;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;transition:border-color .25s,color .25s}
.hoch:hover{border-color:rgba(255,255,255,.6);color:#fff}
.fussz__zeile{grid-column:1 / -1;margin:6px 0 0;font:400 12px/1.5 Inter;color:rgba(255,255,255,.4);
  border-top:1px solid rgba(255,255,255,.08);padding-top:22px}
@media(max-width:760px){
  .fussz__innen{grid-template-columns:1fr;padding:48px 22px 36px}
  .hoch{justify-self:start}
}
/* Die Kopfzeile traegt ihren Grund immer, sonst verschwindet sie
   ueber hellen Abschnitten. Gemessen auf der Coaching-Seite. */
/* mix-blend-mode:difference stand auf der Kopfzeile. Solange es steht,
   sieht jeder gesetzte Grund aus, als wuerde er nicht gemalt. */
.nvt .kopf{mix-blend-mode:normal;background-color:#071427;color:#fff}
.nvt .kopf .marke{color:#fff}
.nvt .kopf.kopf--grund{background-color:#050e1c;box-shadow:0 1px 0 rgba(255,255,255,.09)}
/* Angemeldet schiebt WordPress die Werkzeugleiste ueber die Kopfzeile. */
body.admin-bar .kopf{top:32px}
body.admin-bar .leiste{margin-top:16px}
@media(max-width:782px){ body.admin-bar .kopf{top:46px} }
.nvt .kopf nav a{color:rgba(255,255,255,.74)}
.nvt .kopf nav a:hover,.nvt .kopf nav a.hier{color:#fff}
.nvt .klappe__knopf{color:rgba(255,255,255,.74)}
/* Ruhefarbe der Wortlicht-Woerter. Kein Effekt darf zwischen Leser und Text
   stehen. Gemessen: vorher 1,58:1, jetzt 4,8:1 auf Papier. */
.nvt .wl{color:#5c6675}
.nvt .dunkel .wl{color:rgba(255,255,255,.62)}
/* ================= Glaubenssaetze (von der Tanja-Seite) ================= */
.glaube{position:relative;height:640vh;background:linear-gradient(158deg,var(--nv-tief) 0%,var(--nv-mitte) 50%,var(--nv-hoch) 100%);color:#fff}
.glaube > .elementor-widget-html{display:contents !important}
.glaube__kam{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;align-items:center;
  padding-inline:clamp(22px,5vw,90px)}
.glaube .kl{color:rgba(255,255,255,.55)}
.glaube__innen{display:grid;grid-template-columns:minmax(150px,20%) 1fr;grid-template-rows:auto 1fr;
  gap:clamp(18px,3vh,34px) clamp(26px,5vw,90px);align-items:start}
.glaube__innen > .kl{grid-column:1;grid-row:1}
.glaube__liste{grid-column:1;grid-row:2;align-self:center;list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px}
.glaube__buehne{grid-column:2;grid-row:1 / span 2;align-self:center;position:relative;height:min(48vh,380px)}
@media(max-width:900px){
  .glaube__innen{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:22px}
  .glaube__innen > .kl{grid-column:1;grid-row:1}
  .glaube__buehne{grid-column:1;grid-row:2}
  .glaube__liste{display:none}
  .glaube__balken{display:none}
}
.glaube__liste li{font:600 11px/1 Inter;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.26);transition:color .5s ease,transform .5s ease}
.glaube__liste li.an{color:#fff;transform:translateX(6px)}
.glaube__satz{position:absolute;inset:0;display:grid;align-content:center;gap:16px;opacity:0;will-change:transform,opacity}
.glaube__satz b{font:600 11px/1 Inter;letter-spacing:.2em;color:rgba(255,255,255,.4)}
.glaube__satz h3{font-weight:400;font-family:"Instrument Serif",Georgia,serif;font-size:clamp(30px,5vw,80px);line-height:1.02;max-width:16ch;
  background-image:linear-gradient(104deg,#ffffff 0%,#b7c8dd 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.glaube__satz p{color:rgba(255,255,255,.68);font-size:clamp(15px,1.3vw,19px);max-width:46ch}
.glaube__balken{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(26px,6vh,64px);
  width:min(340px,68vw);height:2px;background:rgba(255,255,255,.16);border-radius:2px;overflow:hidden}
.glaube__balken i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left}

/* ================= Stationen, waagerecht ================= */
.reise{position:relative;height:520vh;background:var(--paper)}
.reise > .elementor-widget-html{display:contents !important}
.reise__kam{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;align-content:center}
.reise__kl{position:absolute;left:clamp(18px,4vw,44px);top:clamp(90px,14vh,150px)}
.reise__spur{display:flex;align-items:start;gap:0;will-change:transform;padding-inline:12vw;min-height:min(46vh,360px)}
.reise__halt{--nah:0;position:relative;flex:none;width:min(46vw,520px);padding:0 clamp(20px,3vw,52px);
  display:grid;justify-items:start;gap:0}
.reise__halt b{font:600 11px/1 Inter;letter-spacing:.2em;color:var(--nv2);
  opacity:calc(.28 + .72 * var(--nah));margin-bottom:14px;
  transform:translateY(calc(var(--nah) * -4px))}
.reise__punkt{width:9px;height:9px;border-radius:50%;background:var(--nv1);margin:0 0 22px;
  transform:scale(calc(.55 + var(--nah) * 1.1));
  box-shadow:0 0 0 calc(var(--nah) * 7px) rgba(47,92,146,.12)}
.reise__halt h3{font-weight:400;font-family:"Instrument Serif",Georgia,serif;font-size:clamp(22px,2.6vw,42px);line-height:1.06;
  color:var(--nv1);opacity:calc(.22 + .78 * var(--nah));max-width:20ch}
.reise__linie{position:absolute;left:clamp(18px,4vw,44px);right:clamp(18px,4vw,44px);
  bottom:clamp(60px,10vh,120px);height:2px;background:rgba(15,41,71,.14);border-radius:2px;overflow:hidden}
.reise__linie i{display:block;height:100%;background:linear-gradient(90deg,var(--nv1),var(--nv2));
  transform:scaleX(0);transform-origin:left}
@media(max-width:820px){
  .reise{height:600vh}
  .reise__halt{width:min(78vw,420px)}
  .reise__spur{padding-inline:10vw}
}
/* ================= Kartenbogen (repariert) ================= */
/* Die Karten haengen an einem tiefen Drehpunkt und faechern beim Scrollen
   aus dem Stapel auf. Im Katalog scheiterte es daran, dass die Buehne
   position:absolute in einem Elternteil ohne Bezug lag. Hier traegt die
   Kamera den Bezug selbst. */
.bogen{position:relative;height:240vh;color:#fff}
.bogen > .elementor-widget-html{display:contents !important}
.bogen__kam{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;align-content:center}
.bogen__kl{position:absolute;left:clamp(18px,4vw,44px);top:clamp(90px,14vh,150px);color:rgba(255,255,255,.55)}
.bogen__stapel{position:relative;width:clamp(190px,22vw,300px);aspect-ratio:2/3}
.bogen__karte{position:absolute;inset:0;border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px rgba(2,6,14,.5);transform-origin:50% 130%;will-change:transform;
  display:grid;align-content:end;padding:20px}
.bogen__karte b{font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(17px,1.5vw,24px);line-height:1.15;color:#fff;text-shadow:0 1px 12px rgba(2,6,14,.5)}
.bogen__karte--1{background:linear-gradient(150deg,#e6edf6,#8393aa 48%,#132132)}
.bogen__karte--2{background:linear-gradient(150deg,#1c1e21,#5f646b 52%,#d6d9dd)}
.bogen__wort{position:absolute;left:50%;bottom:clamp(30px,7vh,70px);transform:translateX(-50%);
  font:600 11px/1 Inter;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);
  opacity:0;white-space:nowrap}

/* ================= Kreisblende ================= */
.blende{position:relative;height:240vh}
.blende > .elementor-widget-html{display:contents !important}
.blende__kam{position:sticky;top:0;height:100vh;overflow:hidden}
.blende__unter,.blende__ueber{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:clamp(22px,5vw,90px)}
.blende__unter{background:var(--paper)}
.blende__unter .kl{color:var(--mute)}
.blende__ueber{background:linear-gradient(158deg,var(--nv-tief) 0%,var(--nv-hoch) 100%);color:#fff;
  clip-path:circle(0px at 50% 50%);will-change:clip-path}
.blende__innen{display:grid;gap:20px;justify-items:center;max-width:820px}
.blende__innen .kl{color:rgba(255,255,255,.55)}
.blende__innen h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(30px,4.4vw,64px);line-height:1.05;color:#fff}
.blende__innen p{color:rgba(255,255,255,.7);max-width:52ch}
/* Elementor-Abschnitte sind Flex-Container. Ein Kamera-Element als
   Flex-Kind erbt ueber min-width:auto die Mindestbreite seines Inhalts
   und wird so breit wie die Spur dahinter. Gemessen am Kompass, 390er:
   Kamera 2207 statt 390. */
.nvt .reise__kam,.nvt .glaube__kam,.nvt .bogen__kam,.nvt .blende__kam,.nvt .vorhang__kam,.nvt .treppe__kam{
  width:100%;max-width:100%;min-width:0}
/* Der Theme-Reset faerbt Links bei hover und active auf #333366.
   In Kopf, Schub und Fusszeile hat das nichts verloren. */
.nvt .kopf a:hover,.nvt .kopf a:active,.nvt .marke:hover,.nvt .marke:active,
.nvt .schub a:hover,.nvt .schub a:active,
.nvt .fussz a:hover,.nvt .fussz a:active{color:#fff}
.nvt .klappe__blatt a:hover,.nvt .klappe__blatt a:active{color:#fff}
.nvt .fussz__zeile a:hover{color:rgba(255,255,255,.8)}

/* ---------------- Kontaktformular ---------------- */
.nvt .form{width:100%;max-width:640px}
.nvt .form__topf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nvt .form__satz{display:grid;gap:18px}
.nvt .form__reihe{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.nvt .form__reihe{grid-template-columns:1fr}}
.nvt .form__feld{display:grid;gap:8px}
.nvt .form__marke{font:600 11px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.nvt .form__feld input,.nvt .form__feld textarea{width:100%;max-width:100%;min-width:0;box-sizing:border-box;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:14px 16px;color:#fff;font:400 16px/1.5 Inter,sans-serif;transition:border-color .2s,background .2s}
.nvt .form__feld textarea{resize:vertical;min-height:150px}
.nvt .form__feld input:focus,.nvt .form__feld textarea:focus{outline:none;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08)}
.nvt .form__wahl{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font:400 14px/1.6 Inter,sans-serif;color:rgba(255,255,255,.7)}
.nvt .form__wahl input{margin-top:4px;width:18px;height:18px;accent-color:#fff}
.nvt .form__wahl a{color:#fff;text-decoration:underline}
.nvt .form__knopf{justify-self:start;min-height:48px;padding:14px 28px;border:0;border-radius:999px;background:#fff;color:#071427;font:600 15px/1 Inter,sans-serif;cursor:pointer;transition:transform .2s,opacity .2s}
.nvt .form__knopf:hover{transform:translateY(-1px);opacity:.9}
.nvt .form__hinweis{margin:0 0 18px;padding:14px 18px;border-radius:10px;font:400 15px/1.5 Inter,sans-serif}
.nvt .form__hinweis--ok{background:rgba(255,255,255,.1);color:#fff}
.nvt .form__hinweis--fehler{background:rgba(255,120,120,.12);color:#ffd8d8}

.nvt .stat--kurz{height:320vh}

/* ---------------- Spalten: vier in einer Zeile ----------------
   Elementor rendert den Abschnitt als boxed, dann liegen die Spalten
   eine Ebene tiefer in .e-con-inner. Beide Faelle sind abgedeckt.
   Achtung: jedes Pseudoelement braucht beide Selektoren einzeln. */
.nvt .spalten{position:relative}
.nvt .spalten.e-con-boxed{display:block !important}
.nvt .spalten > .e-con-inner,.nvt .spalten:not(.e-con-boxed){display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:clamp(20px,2.4vw,38px) !important;align-items:start;counter-reset:sp}
.nvt .spalten > .e-con-inner > *,.nvt .spalten:not(.e-con-boxed) > *{position:relative;overflow:hidden;border:1px solid var(--linie);border-radius:16px;padding:clamp(22px,2vw,30px) !important;background:linear-gradient(180deg,rgba(15,41,71,.035),rgba(15,41,71,.010));transition:transform .38s cubic-bezier(.22,.61,.36,1),box-shadow .38s,border-color .38s,background .38s}
.nvt .spalten > .e-con-inner > *::before,.nvt .spalten:not(.e-con-boxed) > *::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--nv1),var(--nv3));transform:scaleX(0);transform-origin:0 50%;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.nvt .spalten > .e-con-inner > *::after,.nvt .spalten:not(.e-con-boxed) > *::after{counter-increment:sp;content:counter(sp,decimal-leading-zero);position:absolute;top:clamp(20px,1.8vw,26px);right:clamp(20px,1.8vw,26px);font:600 10px/1 Inter;letter-spacing:.18em;color:var(--mute);opacity:.7}
.nvt .spalten > .e-con-inner > *:hover,.nvt .spalten:not(.e-con-boxed) > *:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(15,41,71,.12);border-color:rgba(15,41,71,.22);background:linear-gradient(180deg,rgba(15,41,71,.055),rgba(15,41,71,.015))}
.nvt .spalten > .e-con-inner > *:hover::before,.nvt .spalten:not(.e-con-boxed) > *:hover::before{transform:scaleX(1)}
@media (max-width:1024px){.nvt .spalten > .e-con-inner,.nvt .spalten:not(.e-con-boxed){grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:767px){.nvt .spalten > .e-con-inner,.nvt .spalten:not(.e-con-boxed){grid-template-columns:minmax(0,1fr) !important}}

/* ================= Unterlaengen, zweiter Teil =====================
   Der erste Teil deckt nur die Elementor-Ueberschriften ab. Die Titel
   in den HTML-Bausteinen haengen an eigenen Klassen und blieben aussen
   vor. Dort schnitt die enge Zeile das g und das p ab. */
.nvt .glaube__satz h3,.nvt .reise__halt h3,.nvt .stat__satz,.nvt .blende__innen h2,.nvt .vorhang__hinten h2,.nvt .se,.nvt .bogen__karte b{padding-bottom:.14em;margin-bottom:-.06em}
.nvt .glaube__satz h3{line-height:1.06}

/* ================= Knopf-Reste des Themes =========================
   Hello Elementor faerbt jeden button mit #c36. Die Klappe im Menue,
   der Burger, der Knopf nach oben und der Senden-Knopf sind buttons. */
.nvt .klappe__knopf,.nvt .burger,.nvt .hoch{background:transparent;border:0;color:inherit}
.nvt .klappe__knopf:hover,.nvt .klappe__knopf:focus,.nvt .burger:hover,.nvt .burger:focus,.nvt .hoch:hover,.nvt .hoch:focus{background:transparent;color:#fff;text-decoration:none}
.nvt .form__knopf:hover,.nvt .form__knopf:focus{background:#fff;color:#071427;border:0}

/* Buchdeckel im Kartenbogen */
.nvt .bogen__karte img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px;display:block}

/* ================= Buchdeckel gross, ohne Karte ===================
   Die Mockups bringen Schatten und Form selbst mit. Die Karte darunter
   nimmt ihnen nur Platz weg. */
.nvt .bogen__stapel{width:clamp(250px,34vw,470px);aspect-ratio:1/1}
.nvt .bogen__karte,.nvt .bogen__karte--1,.nvt .bogen__karte--2{background:none;box-shadow:none;border-radius:0;padding:0;overflow:visible}
.nvt .bogen__karte img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:0;display:block;filter:drop-shadow(0 26px 60px rgba(2,6,14,.55))}

/* ================= Buchkarten mit echten Deckeln =================
   Der Verlauf war der Platzhalter, solange kein Bild da war. */
.nvt .buch--1 .w-cover,.nvt .buch--2 .w-cover{background:none}
.nvt .buch .w-cover img{width:100%;height:100%;object-fit:contain;padding:clamp(10px,1.4vw,22px);display:block;filter:drop-shadow(0 18px 40px rgba(2,6,14,.5))}
@media(max-width:620px){.nvt .buch .w-cover{width:100%;min-height:330px}}

/* Die Kapitelmarke laeuft am Handy in den Text */
@media(max-width:767px){.nvt .kapitel{display:none}}

/* ================= Treppenwoerter mittig =========================
   Die Stufe waechst von 34 auf 100 Prozent. Das Wort stand am linken
   Rand und wanderte dadurch mit jeder Stufe weiter nach aussen.
   JS setzt nur translateY, links und rechts sind also frei. */
.nvt .stufe b{left:0;right:0;padding:0 clamp(8px,2vw,40px);text-align:center;white-space:nowrap}

/* ================= Programmkarten in Navy ========================= */
.nvt .programm{background:linear-gradient(158deg,var(--nv-tief) 0%,var(--nv-hoch) 100%);border:1px solid rgba(255,255,255,.10);border-radius:16px;overflow:hidden;position:relative;transition:transform .38s cubic-bezier(.22,.61,.36,1),box-shadow .38s,border-color .38s}
.nvt .programm::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,255,255,0));transform:scaleX(0);transform-origin:0 50%;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.nvt .programm:hover{transform:translateY(-5px);box-shadow:0 24px 52px rgba(2,6,14,.38);border-color:rgba(255,255,255,.22)}
.nvt .programm:hover::before{transform:scaleX(1)}
.nvt .programm .elementor-heading-title{color:#fff}
.nvt .programm p{color:rgba(255,255,255,.70)}
.nvt .programm .w-claim p{color:rgba(255,255,255,.92)}

/* ================= Instagram und LinkedIn ========================= */
.nvt .fussz__sozial{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nvt .fussz__sozial span{font:600 11px/1 Inter;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-right:4px}
.nvt .fussz__sozial a,.nvt .schub__sozial a{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:rgba(255,255,255,.72);transition:color .3s,border-color .3s,transform .3s,background .3s}
.nvt .fussz__sozial a:hover,.nvt .fussz__sozial a:focus,.nvt .schub__sozial a:hover,.nvt .schub__sozial a:focus{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.06);transform:translateY(-2px)}
.nvt .schub__sozial{display:flex;gap:12px;margin-top:26px}

/* Sozialzeichen im Kontaktabschnitt */
.nvt .sozial{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.nvt .sozial span{font:600 11px/1 Inter;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-right:4px}
.nvt .sozial a{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:rgba(255,255,255,.72);transition:color .3s,border-color .3s,transform .3s,background .3s}
.nvt .sozial a:hover,.nvt .sozial a:focus{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.06);transform:translateY(-2px)}

/* Rechtliches in die Fusszeile unten, neben das Jahr */
.nvt .fussz__unten{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:14px 26px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.08);padding-top:22px;margin-top:6px}
.nvt .fussz__unten .fussz__zeile{border-top:0;padding-top:0;margin:0}
.nvt .fussz__unten .fussz__recht{grid-column:auto;gap:22px;margin:0}

/* ================= Der Ort als Schieber =========================== */
.nvt .w-ortslider{border-radius:22px;overflow:hidden;position:relative}
.nvt .w-ortslider .swiper,.nvt .w-ortslider .elementor-image-carousel-wrapper{border-radius:22px}
.nvt .w-ortslider .swiper-slide figure,.nvt .w-ortslider .swiper-slide-image{height:min(66vh,620px);margin:0}
.nvt .w-ortslider img{width:100%;height:min(66vh,620px);object-fit:cover;display:block;border-radius:22px}
@media(max-width:767px){.nvt .w-ortslider img,.nvt .w-ortslider .swiper-slide figure{height:min(52vh,380px)}}
.nvt .w-ortslider .elementor-swiper-button{color:#fff;background:rgba(7,20,39,.55);border:1px solid rgba(255,255,255,.22);width:46px;height:46px;border-radius:999px;display:grid;place-items:center;transition:background .3s,border-color .3s}
.nvt .w-ortslider .elementor-swiper-button:hover{background:rgba(7,20,39,.85);border-color:rgba(255,255,255,.5)}
.nvt .w-ortslider .elementor-swiper-button-prev{left:16px}.nvt .w-ortslider .elementor-swiper-button-next{right:16px}
.nvt .w-ortslider .swiper-pagination-bullet{background:#fff;opacity:.35;width:8px;height:8px;transition:opacity .3s,transform .3s}
.nvt .w-ortslider .swiper-pagination-bullet-active{opacity:1;transform:scale(1.25)}
.nvt .w-ortslider .swiper-pagination{bottom:14px}

/* ================= Elementor-Formular auf dunklem Grund ========== */
.nvt .w-formular .elementor-form-fields-wrapper{gap:18px 20px}
.nvt .w-formular .elementor-field-group{margin-bottom:0}
.nvt .w-formular .elementor-field-label{font:600 11px/1 Inter !important;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55) !important;margin-bottom:9px}
.nvt .w-formular .elementor-field-textual{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:14px 16px;color:#fff;font:400 16px/1.5 Inter;min-height:52px;transition:border-color .25s,background .25s}
.nvt .w-formular textarea.elementor-field-textual{min-height:160px;resize:vertical}
.nvt .w-formular .elementor-field-textual:focus{outline:none;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08);box-shadow:none}
.nvt .w-formular .elementor-field-textual::placeholder{color:rgba(255,255,255,.34)}
.nvt .w-formular .elementor-field-type-acceptance .elementor-field-label{display:none}
.nvt .w-formular .elementor-field-option label,.nvt .w-formular .elementor-field-type-acceptance label{font:400 14px/1.6 Inter;color:rgba(255,255,255,.7)}
.nvt .w-formular .elementor-field-type-acceptance a{color:#fff;text-decoration:underline}
.nvt .w-formular input[type="checkbox"]{width:18px;height:18px;accent-color:#fff;margin-right:10px;vertical-align:-3px}
.nvt .w-formular .elementor-button[type="submit"]{justify-self:start;min-height:48px;padding:14px 30px;border:0;border-radius:999px;background:#fff;color:#071427;font:600 15px/1 Inter;letter-spacing:.02em;cursor:pointer;transition:transform .25s,opacity .25s}
.nvt .w-formular .elementor-button[type="submit"]:hover,.nvt .w-formular .elementor-button[type="submit"]:focus{background:#fff;color:#071427;transform:translateY(-2px)}
.nvt .w-formular .elementor-message{font:400 15px/1.5 Inter;color:#fff;margin-top:14px}
.nvt .w-formular .elementor-message.elementor-message-danger{color:#ffd8d8}
.nvt .w-formular .elementor-field-required .elementor-field-label:after{color:rgba(255,255,255,.5)}

/* ================= Formular: Vorrang vor den alten Knopfregeln =====
   Die alte Regel .nvt .elementor-button setzt einen Verlauf mit
   !important. Ein background-color aus dem Elementor-Regler kann das
   nicht schlagen, also hier ausdruecklich dagegen. */
.nvt .w-formular .elementor-button[type="submit"]{background-image:none !important;background-color:#ffffff !important;color:#071427 !important;border:0 !important;border-radius:999px !important;padding:16px 30px !important;font:600 14px/1 Inter,sans-serif !important;letter-spacing:.02em;min-height:52px;justify-content:center}
.nvt .w-formular .elementor-button[type="submit"]:hover,.nvt .w-formular .elementor-button[type="submit"]:focus{background-image:none !important;background-color:#ffffff !important;color:#071427 !important;transform:translateY(-2px)}
.nvt .w-formular .elementor-field-textual{background-color:rgba(255,255,255,.05) !important;background-image:none !important;border:1px solid rgba(255,255,255,.16) !important;color:#fff !important;border-radius:10px !important}
.nvt .w-formular .elementor-field-textual:focus{border-color:rgba(255,255,255,.5) !important;background-color:rgba(255,255,255,.09) !important}
.nvt .w-formular .elementor-field-textual::placeholder{color:rgba(255,255,255,.34) !important;opacity:1}

/* Datenschutz-Verweise im Formular, auch der von DS Suite */
.nvt .w-formular a,.nvt .ds-consent-note a,.nvt .w-formular .elementor-field-type-acceptance a{color:#ffffff !important;text-decoration:underline !important;text-underline-offset:2px}
.nvt .ds-consent-note{font:400 14px/1.6 Inter,sans-serif;color:rgba(255,255,255,.6);margin:.2em 0 1.4em}

/* Podcast-Cover statt Wellenbalken: eigener Rahmen, keine Flexreihe */
.nvt .pod__bild{display:block;width:100%}
.nvt .pod__bild img{width:100%;height:auto;display:block;border-radius:18px;box-shadow:0 26px 60px rgba(2,6,14,.35)}

/* ================= problem__zeile: Nummer und Text in einer Reihe ==
   Beide Kinder wachsen und die Reihe bricht um, sobald der Text lang
   wird. Dann steht die Nummer allein und der Text darunter. Die Nummer
   bekommt jetzt ihre Eigenbreite, der Text den Rest, kein Umbruch. */
.nvt .problem__zeile{flex-wrap:nowrap !important;align-items:baseline}
.nvt .problem__zeile > .elementor-widget:first-child{flex:0 0 auto !important;width:auto !important;min-width:44px}
.nvt .problem__zeile > .elementor-widget:last-child{flex:1 1 auto !important;width:auto !important;min-width:0}
@media(max-width:767px){.nvt .problem__zeile{gap:14px !important}.nvt .problem__zeile > .elementor-widget:first-child{min-width:34px}}

/* ================= Reihen, die am Handy umbrechen duerfen ==========
   Knopfreihen und die Zielmarken im Hero standen ohne Umbruch. Zwei
   oder drei Knoepfe passen bei 390 Pixel nicht nebeneinander. */
.nvt .knopfe{flex-wrap:wrap}
.nvt .hero__ziel{flex-wrap:wrap}
.nvt .sozial{flex-wrap:wrap}
@media(max-width:480px){.nvt .knopfe > .elementor-widget{flex:1 1 100%}.nvt .knopfe .elementor-button{width:100%;justify-content:center}}

/* Knopf in der Programmkarte: heller Rand auf dem Navy-Grund */
.nvt .programm .elementor-button{background-image:none !important;background-color:transparent !important;border:1px solid rgba(255,255,255,.35) !important;color:#fff !important;margin-top:6px;align-self:flex-start}
.nvt .programm .elementor-button:hover{background-color:rgba(255,255,255,.10) !important;border-color:rgba(255,255,255,.6) !important;color:#fff !important}