/* Lotfaden KI (Vorlage) · Landingpage 13 „Heimat“
   Geschichte: ein Tag in Österreich. Morgens glühen die Gipfel (Einstieg, Effekt 91), tagsüber ganz Österreich
   als Karte (Mitte, Effekt 231), in der Nacht fliegt die Kamera über das Land bis nach Steyr (Schluss, Effekt 303).
   Übergang „Horizont“: jeder normale Abschnitt geht einmal wie ein Horizont auf, zuerst eine feine Bernstein-Linie,
   dann öffnet sich eine flache Ellipse nach unten. Vor dem Schluss steigt eine Kuppel in Nachtblau auf.
   Farben: Nachtblau #13203A für Einstieg und Schluss, dazwischen hell #F7F6F3 und Weiß.
   Genau ein Akzent: Bernstein #F5B942 (als Schrift auf Hell #8A5A00). Schrift: Albert Sans, ohne Kursive.
   Radien: 20 px große Flächen, 12 px mittlere, 8 px kleine, Knöpfe rund. */

:root{
  --nacht:#13203A;
  --nacht-2:#1B2B4A;
  --nacht-text:#F2F4F8;
  --nacht-muted:#AEB8CB;
  --hell:#F7F6F3;
  --weiss:#FFFFFF;
  --ink:#13203A;
  --ink-2:#4B5568;
  --ink-3:#687185;
  --line:rgba(19,32,58,.11);
  --line-2:rgba(19,32,58,.22);
  --acc:#F5B942;
  --acc-soft:#FCF0D6;
  --acc-text:#8A5A00;
  --on-acc:#13203A;

  --r-lg:20px;
  --r-md:12px;
  --r-sm:8px;
  --navh:68px;
  --maxw:1240px;
  --gutter:clamp(16px,4vw,48px);
  --edge:max(var(--gutter),calc((100% - var(--maxw)) / 2));
  --font:"Albert Sans Variable","Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--hell)}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--hell);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
main{overflow-x:clip}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
em{font-style:normal}
button{font:inherit}
:focus-visible{outline:2px solid var(--acc-text);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--nacht);color:var(--nacht-text);padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:700;transition:top .2s}
.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--maxw) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}

/* ---------- Schrift (Runde 2: nicht zu groß) ---------- */
.h2{font-size:clamp(1.75rem,2.8vw,2.5rem);line-height:1.1;letter-spacing:-.028em;font-weight:680;text-wrap:balance;max-width:20ch}
.lead{font-size:clamp(1.0625rem,1.25vw,1.1875rem);line-height:1.6;color:var(--ink-2);max-width:60ch;text-wrap:pretty}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-text);margin-bottom:16px}
.tag{display:inline-flex;align-items:center;font-size:12px;line-height:1;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acc-text);
  padding:6px 10px;border-radius:999px;background:var(--acc-soft);white-space:nowrap;margin-bottom:16px}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:13px 24px;border-radius:999px;
  font:650 15.5px/1.2 var(--font);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;border:0;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background-color .3s,color .3s}
.btn i{font-size:17px;transition:transform .45s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover i{transform:translateX(3px)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.12s}
.btn--acc{background:var(--acc);color:var(--on-acc);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.08),0 14px 30px -18px rgba(138,90,0,.8)}
.btn--acc:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.08),0 22px 38px -18px rgba(138,90,0,.85),0 0 0 5px rgba(245,185,66,.22)}
.btn--glas{background:rgba(255,255,255,.06);color:var(--nacht-text);box-shadow:inset 0 0 0 1px rgba(242,244,248,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn--glas:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(242,244,248,.8)}
.btn--sm{min-height:42px;padding:10px 18px;font-size:14.5px}
.btn--lg{min-height:56px;padding:16px 30px;font-size:16.5px}

/* ---------- Navigation: nachts hell auf Nachtblau, tagsüber dunkel auf Hell ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--navh);color:var(--ink);transition:background-color .45s,box-shadow .45s,color .45s}
.nav.is-solid{background:rgba(247,246,243,.9);box-shadow:0 1px 0 var(--line);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)}
.nav.is-nacht{color:var(--nacht-text)}
.nav.is-nacht.is-solid{background:rgba(19,32,58,.72);box-shadow:0 1px 0 rgba(242,244,248,.08)}
.nav__inner{height:100%;display:flex;align-items:center;gap:32px}
.brand{font-weight:800;font-size:21px;letter-spacing:-.045em;text-decoration:none;white-space:nowrap}
.brand span{color:var(--acc-text);transition:color .45s}
.nav.is-nacht .brand span{color:var(--acc)}
.nav__links{display:flex;gap:28px;margin-left:auto}
.nav__links a{position:relative;text-decoration:none;font-weight:600;font-size:15px;padding:6px 1px;opacity:.78;transition:opacity .25s}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:2px;border-radius:2px;background:var(--acc);transform:scaleX(0);transition:transform .45s var(--ease)}
.nav__links a:hover,.nav__links a.is-current{opacity:1}
.nav__links a:hover::after,.nav__links a.is-current::after{transform:scaleX(1)}
.nav__toggle{display:none;margin-left:auto;width:44px;height:44px;border-radius:999px;border:0;background:var(--acc);color:var(--on-acc);font-size:20px;cursor:pointer;align-items:center;justify-content:center}
.nav__panel{margin:0 var(--gutter);padding:12px;border-radius:var(--r-lg);background:var(--weiss);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 24px 50px -24px rgba(19,32,58,.45);display:flex;flex-direction:column;gap:2px}
.nav__panel[hidden]{display:none}
.nav__panel a:not(.btn){padding:13px 12px;border-radius:10px;text-decoration:none;font-weight:650;font-size:18px}
.nav__panel a:not(.btn):hover{background:var(--hell)}
.nav__panel .btn{margin-top:8px}
@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:inline-flex}
  .nav{background:rgba(247,246,243,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .nav.is-nacht{background:rgba(19,32,58,.62)}
}

/* =====================================================================
   HORIZONT · jeder normale Abschnitt ist ein „Bogen“
   ===================================================================== */
.bogen{position:relative;padding:clamp(84px,9vw,128px) 0}
.bogen--hell{background:var(--hell)}
.bogen--weiss{background:var(--weiss)}
/* die Horizontlinie: breitet sich beim Eintritt einmal aus und verblasst */
.bogen__linie{position:absolute;left:0;right:0;top:0;height:2px;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(245,185,66,0) 0%,var(--acc) 28%,var(--acc) 72%,rgba(245,185,66,0) 100%)}
.kopf{display:flex;flex-direction:column;gap:18px}
.kopf--zeile{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:20px clamp(32px,5vw,80px);align-items:end}
.kopf--zeile .lead{max-width:48ch}

/* =====================================================================
   EINSTIEG · Effekt 91 „Alpenglühen“
   Ohne JS oder ohne WebGL: ruhiges Bild aus Verlauf und Bergkamm, Text sofort lesbar.
   ===================================================================== */
.hero{--sky-top:#13203A;--sky-pink:#F3C48E;--sky-light:#FFEBD2;--glow:#F5B942;--rock:#3D4A5C;--snow:#FFFFFF;
  position:relative;background:var(--nacht);color:var(--nacht-text)}
.hero__track{position:relative}
.hero__stage{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 600' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 420 L150 330 L260 380 L420 250 L520 320 L640 220 L760 330 L880 260 L1010 170 L1130 290 L1260 230 L1400 330 L1600 280 L1600 600 L0 600 Z' fill='%232A3A5A'/%3E%3Cpath d='M1010 170 L1050 225 L1022 214 L996 232 L975 210 Z M640 220 L668 258 L646 250 L626 262 L610 250 Z' fill='%23F5B942' fill-opacity='.75'/%3E%3Cpath d='M0 500 L180 420 L330 470 L500 390 L700 480 L860 410 L1040 470 L1220 400 L1400 460 L1600 420 L1600 600 L0 600 Z' fill='%23182640'/%3E%3C/svg%3E") center bottom / 100% 62% no-repeat,
    linear-gradient(180deg,#0E182D 0%,#13203A 42%,#24304E 70%,#3A3F58 100%)}
.hero__cv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:0;transition:opacity 1.4s ease}
.hero__cv.on{opacity:1}
.hero.is-live .hero__track{height:300vh;height:300svh}
.hero.is-live .hero__stage{position:sticky;top:0;height:100vh;height:100svh;min-height:0;background:var(--nacht)}
.hero__copy{position:relative;z-index:3;padding-top:calc(var(--navh) + clamp(40px,12svh,128px));padding-bottom:48px;
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.hero__label{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.hero__title{margin-top:18px;font-size:clamp(2.1rem,4vw,3.5rem);line-height:1.06;letter-spacing:-.034em;font-weight:680;max-width:14ch;text-wrap:balance;color:#F7F6F3}
.hero__sub{margin-top:clamp(18px,2vw,24px);font-size:clamp(1.0625rem,1.3vw,1.1875rem);line-height:1.6;color:rgba(238,241,247,.84);max-width:42ch;text-wrap:pretty}
.hero__ctas{margin-top:clamp(24px,2.6vw,34px);display:flex;flex-wrap:wrap;gap:12px}
.hero.is-weg .hero__copy{opacity:0;transform:translate3d(0,-18px,0);pointer-events:none}
/* Schlusssatz des Einstiegs: dunkel auf dem hellen Morgenhimmel */
.hero__end{position:absolute;z-index:3;left:0;right:0;top:calc(var(--navh) + clamp(40px,13svh,140px));pointer-events:none;
  opacity:0;transform:translate3d(0,16px,0);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.hero__end-title{font-size:clamp(1.75rem,2.8vw,2.5rem);line-height:1.1;letter-spacing:-.028em;font-weight:680;color:var(--ink);max-width:18ch;text-wrap:balance;
  text-shadow:0 0 34px rgba(255,241,224,.9)}
.hero__end-sub{margin-top:16px;font-size:clamp(1.0625rem,1.25vw,1.1875rem);line-height:1.6;color:#2E3950;max-width:40ch;text-shadow:0 0 22px rgba(255,241,224,.95)}
.hero.is-ende .hero__end{opacity:1;transform:none}
.hero__time{position:absolute;z-index:3;right:max(var(--gutter),calc((100% - var(--maxw)) / 2));bottom:24px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(242,244,248,.82);text-shadow:0 1px 12px rgba(10,16,34,.8);font-variant-numeric:tabular-nums;transition:opacity .8s}
.hero:not(.is-live) .hero__time,.hero:not(.is-live) .hero__end{display:none}
.hero.is-tag .hero__time{opacity:0}
@media (max-width:767px){
  .hero__title{font-size:clamp(2.1rem,9vw,2.5rem);max-width:none}
  .hero__copy{padding-top:calc(var(--navh) + 32px)}
  .hero__ctas .btn{flex:1 1 auto}
  .hero__end{top:calc(var(--navh) + 28px)}
  .hero__time{left:var(--gutter);right:auto}
}

/* =====================================================================
   AUSGANGSLAGE · Gegenüberstellung
   ===================================================================== */
.lage .h2{max-width:24ch}
.nw{white-space:nowrap}
.lage .kopf .lead{max-width:56ch}
.vergleich{margin-top:clamp(40px,5vw,64px)}
.vergleich__kopf,.vergleich__zeile{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);gap:0 clamp(20px,3vw,40px);align-items:stretch}
.vergleich__kopf span{font-size:14px;font-weight:650;color:var(--ink-2);padding:0 0 14px}
.vergleich__kopf .vergleich__gut{color:var(--ink);background:var(--weiss);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:20px 28px 14px;position:relative}
.vergleich__kopf .vergleich__gut::before{content:"";position:absolute;left:28px;top:0;width:48px;height:3px;border-radius:0 0 3px 3px;background:var(--acc)}
.vergleich__kopf,.vergleich__kopf span:not(.vergleich__gut){align-self:end}
.vergleich__zeile{border-top:1px solid var(--line)}
.vergleich__zeile:last-child{border-bottom:1px solid var(--line)}
.vergleich__zeile>span{padding:24px 0;display:flex;align-items:flex-start;gap:12px}
.vergleich__was{font-weight:650;font-size:17px;letter-spacing:-.01em}
.vergleich__was i{font-size:22px;color:var(--acc-text);margin-top:1px}
.vergleich__alt{color:var(--ink-2)}
.vergleich__zeile .vergleich__neu{background:var(--weiss);padding:24px 28px;font-weight:560;color:var(--ink);transition:box-shadow .45s var(--ease)}
.vergleich__zeile:last-child .vergleich__neu{border-radius:0 0 var(--r-lg) var(--r-lg)}
.vergleich__neu i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--on-acc);font-size:14px;margin-top:1px}
.vergleich__zeile:hover .vergleich__neu{box-shadow:inset 3px 0 0 var(--acc)}
@media (max-width:760px){
  .vergleich__kopf{display:none}
  .vergleich__zeile{grid-template-columns:minmax(0,1fr);padding:22px 0 24px;gap:10px}
  .vergleich__zeile:last-child{border-bottom:0}
  .vergleich__zeile>span{padding:0}
  .vergleich__alt,.vergleich__zeile .vergleich__neu{flex-direction:column;gap:6px}
  .vergleich__alt::before,.vergleich__neu::before{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  .vergleich__alt::before{content:"Ein Zugang allein"}
  .vergleich__neu::before{content:"KI im Ablauf";color:var(--acc-text)}
  .vergleich__zeile .vergleich__neu{padding:16px 18px;border-radius:var(--r-md)}
  .vergleich__zeile:last-child .vergleich__neu{border-radius:var(--r-md)}
  .vergleich__neu i{display:none}
}

/* =====================================================================
   LEISTUNGEN · vier Felder in ungleicher Breite
   ===================================================================== */
.felder{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.feld{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:clamp(24px,2.6vw,34px);border-radius:var(--r-lg);background:var(--hell);
  box-shadow:inset 0 0 0 1px var(--line);transition:transform .55s var(--ease),box-shadow .55s var(--ease),background-color .4s}
.feld::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,rgba(245,185,66,0),var(--acc) 25%,var(--acc) 75%,rgba(245,185,66,0));transform:scaleX(0);transition:transform .7s var(--ease)}
.feld:hover{transform:translateY(-3px);background:var(--weiss);box-shadow:inset 0 0 0 1px var(--line),0 28px 44px -34px rgba(19,32,58,.5)}
.feld:hover::before{transform:scaleX(1)}
.feld--breit{grid-column:span 2}
.feld__icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:var(--weiss);color:var(--acc-text);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .4s,color .4s,box-shadow .4s}
.feld:hover .feld__icon{background:var(--acc);color:var(--on-acc);box-shadow:none}
.feld__name{font-size:clamp(1.25rem,1.6vw,1.375rem);line-height:1.2;letter-spacing:-.02em;font-weight:680;margin-top:4px}
.feld__text{color:var(--ink-2);max-width:52ch}
.chips{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;gap:6px}
.chips li{font-size:12.5px;font-weight:650;padding:6px 11px;border-radius:999px;background:var(--weiss);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);transition:box-shadow .4s,color .4s}
.feld:hover .chips li{box-shadow:inset 0 0 0 1px rgba(138,90,0,.3);color:var(--ink)}
.kacheln{margin-top:auto;padding-top:8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kacheln li{display:flex;align-items:center;gap:10px;min-width:0;padding:13px 14px;border-radius:var(--r-md);background:var(--weiss);box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .45s var(--ease),transform .45s var(--ease)}
.kacheln i{font-size:20px;color:var(--acc-text)}
.kacheln b{font-size:14px;font-weight:650;line-height:1.25}
.kacheln--text li{flex-direction:column;align-items:flex-start;gap:2px}
.kacheln--text span{font-size:13px;color:var(--ink-2)}
.feld:hover .kacheln li{box-shadow:inset 0 0 0 1px rgba(138,90,0,.34);transform:translateY(-2px)}
.feld:hover .kacheln li:nth-child(2){transition-delay:.06s}
.feld:hover .kacheln li:nth-child(3){transition-delay:.12s}
.feld:hover .kacheln li:nth-child(4){transition-delay:.18s}
@media (max-width:900px){
  .felder{grid-template-columns:minmax(0,1fr)}
  .feld--breit{grid-column:auto}
}
@media (max-width:640px){
  .kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =====================================================================
   MITTE · Effekt 231 „Österreich-Karte“
   ===================================================================== */
.land{--k-bg:#F7F6F3;--k-text:#13203A;--k-muted:#4B5568;--k-acc:#F5B942;--k-dot:#D3D7DF;--k-dot-2:#1D2C4B;--k-water:#8C9AB5}
.land__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,56px);align-items:center}
.land__copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.land__copy .h2{max-width:14ch}
.orte{margin-top:10px;border-top:1.5px solid var(--ink)}
.orte li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink-2);line-height:1.5}
.orte i{font-size:21px;color:var(--acc-text);margin-top:1px}
.orte b{display:block;color:var(--ink);font-weight:650;font-size:16px}
.land__stage{position:relative;height:clamp(420px,62svh,600px);min-width:0;isolation:isolate;touch-action:pan-y;
  background:radial-gradient(60% 55% at 55% 45%,#FFFFFF 0%,rgba(255,255,255,0) 70%)}
.land__cv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.land__count{position:absolute;z-index:2;left:8px;bottom:6px;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  font-variant-numeric:tabular-nums;opacity:0;transition:opacity .6s;pointer-events:none}
.land__count.on{opacity:1}
html:not(.js) .land__count{display:none} /* Zähler gehört zur Karte, die nur mit JavaScript läuft */
.land__count i{display:block;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px rgba(245,185,66,.25)}
.land__count b{color:var(--ink);font-weight:700}
.land__hint{position:absolute;z-index:2;right:8px;bottom:6px;max-width:44%;text-align:right;font-size:12.5px;line-height:1.45;color:var(--ink-3);pointer-events:none}
.lbl{position:absolute;left:0;top:0;z-index:3;pointer-events:none;padding:7px 11px 8px;border-radius:10px;background:rgba(255,255,255,.96);white-space:nowrap;
  box-shadow:0 10px 26px -12px rgba(19,32,58,.42),0 0 0 1px rgba(19,32,58,.08);opacity:0;transition:opacity .28s ease;will-change:transform}
.lbl b{display:block;font-weight:680;font-size:14px;letter-spacing:-.01em;color:var(--ink)}
.lbl span{display:block;margin-top:1px;font-size:12px;line-height:1.35;color:var(--ink-2)}
.lbl::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;background:inherit;transform:rotate(45deg);box-shadow:3px 3px 6px -3px rgba(19,32,58,.18)}
.lbl.on{opacity:1}
@media (max-width:900px){
  .land__grid{grid-template-columns:minmax(0,1fr)}
  .land__copy .h2{max-width:20ch}
  .land__stage{height:clamp(330px,52svh,460px)}
}
@media (max-width:560px){
  .land__stage{height:272px}
  .land__count{top:4px;bottom:auto;left:4px}
  .land__hint{left:4px;right:4px;max-width:none;text-align:left}
}

/* =====================================================================
   BEISPIELE · Ablauf in vier Spalten
   ===================================================================== */
.ablauf{margin-top:clamp(40px,5vw,64px)}
.ablauf__kopf,.ablauf__zeile{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,3.2fr) minmax(0,3.2fr) minmax(0,3.4fr);gap:0 clamp(18px,2.4vw,36px)}
.ablauf__kopf{padding:0 16px 14px;border-bottom:1.5px solid var(--ink);font-size:13.5px;font-weight:650;color:var(--ink-2)}
.ablauf__zeile{position:relative;padding:24px 16px;border-bottom:1px solid var(--line);align-items:start;transition:background-color .4s var(--ease)}
.ablauf__zeile:hover{background:var(--hell)}
.ablauf__zeile>span{color:var(--ink-2);font-size:15.5px;line-height:1.55}
.ablauf__zeile .ablauf__name{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:17px;font-weight:680;letter-spacing:-.01em;line-height:1.3}
.ablauf__name i{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:19px;color:var(--acc-text);background:var(--hell);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .4s,color .4s,box-shadow .4s}
.ablauf__zeile:hover .ablauf__name i{background:var(--acc);color:var(--on-acc);box-shadow:none}
.ablauf__zeile .ablauf__ziel{color:var(--ink);font-weight:600;padding-left:14px;box-shadow:inset 2px 0 0 var(--acc)}
@media (max-width:860px){
  .ablauf__kopf{display:none}
  .ablauf{border-top:1.5px solid var(--ink)}
  .ablauf__zeile{grid-template-columns:minmax(0,1fr);gap:12px;padding:22px 4px;border-radius:0}
  .ablauf__zeile:hover{background:transparent}
  .ablauf__zeile>span[data-l]::before{content:attr(data-l);display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
}

/* =====================================================================
   SCHULUNGEN · Formate wandern schräg nach links oben, die Route zeigt den Stand
   ===================================================================== */
.rail-kopf .h2{max-width:16ch}
.route{margin-top:clamp(32px,4vw,48px);position:relative}
.route__linie{position:absolute;left:var(--gutter);right:calc(var(--gutter) + (100% - 2 * var(--gutter)) * .25);top:5px;height:2px;border-radius:2px;background:var(--line-2)}
.route__linie i{position:absolute;inset:0;border-radius:inherit;background:var(--acc);transform-origin:left;transform:scaleX(0)}
.route__halte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));font-size:14px;font-weight:650;color:var(--ink-3)}
.route__halte li{position:relative;padding-top:24px;transition:color .4s}
.route__halte li::before{content:"";position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--hell);box-shadow:inset 0 0 0 2px var(--line-2);transition:background-color .4s,box-shadow .4s}
.route__halte li.is-weg::before{background:var(--acc);box-shadow:none}
.route__halte li.is-on{color:var(--ink)}
.route__halte li.is-on::before{background:var(--acc);box-shadow:0 0 0 5px rgba(245,185,66,.25)}
.rail{margin:clamp(24px,3vw,32px) auto 0;display:flex;flex-direction:column;gap:16px;padding:0 var(--gutter);max-width:calc(var(--maxw) + 2 * var(--gutter))}
.fmt{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(24px,4vw,56px);align-items:start;
  padding:clamp(24px,3vw,38px);border-radius:var(--r-lg);background:var(--weiss);
  box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(19,32,58,.04),0 34px 60px -46px rgba(19,32,58,.5)}
.fmt::before{content:"";position:absolute;left:clamp(24px,3vw,38px);top:0;width:56px;height:3px;border-radius:0 0 3px 3px;background:var(--acc)}
.fmt__main{display:flex;flex-direction:column;gap:12px;min-width:0}
.fmt__meta{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:650;color:var(--acc-text)}
.fmt__meta i{font-size:17px}
.fmt__name{font-size:clamp(1.375rem,2vw,1.5rem);line-height:1.15;letter-spacing:-.025em;font-weight:680}
.fmt__text{color:var(--ink-2);max-width:34ch}
.fmt__list{min-width:0}
.fmt__list li{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px;font-weight:550}
.fmt__list li:first-child{border-top:1px solid var(--line)}
.fmt__list i{color:var(--acc-text);font-size:17px}
.fmt__doc{grid-column:1 / -1;display:flex;align-items:center;gap:8px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink-2)}
.fmt__doc i{font-size:18px;color:var(--acc-text)}

/* Computer mit Bewegung (Klasse .is-d aus main.js): Bühne klebt, die Karten wandern schräg nach links oben.
   Die Spur ist 12 Grad gegen die Senkrechte geneigt; jede Karte steht ein Stück weiter rechts als die vorige
   und bleibt selbst waagrecht. Handy und reduzierte Bewegung: Karten normal untereinander, ohne Route. */
.rail-wrap.is-d{margin-top:clamp(8px,2svh,24px);--fmt-w:min(62vw,980px)}
.rail-wrap.is-d .rail-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;padding-top:calc(var(--navh) + clamp(16px,3svh,32px))}
.rail-wrap.is-d .route{position:relative;z-index:2;margin-top:0;padding-bottom:4px}
.rail-wrap.is-d .route::before{content:"";position:absolute;z-index:-1;left:-50vw;right:-50vw;top:-240px;bottom:-44px;pointer-events:none;
  background:linear-gradient(180deg,var(--hell) calc(100% - 44px),rgba(247,246,243,0))}
.rail-wrap.is-d .rail{position:absolute;z-index:1;top:0;left:calc(50% - var(--fmt-w) / 2);width:var(--fmt-w);max-width:none;margin:0;padding:0;gap:24px;will-change:transform}
.rail-wrap.is-d .fmt{width:var(--fmt-w)}
.rail-wrap:not(.is-d) .route{display:none}
@media (max-width:767px){
  .fmt{grid-template-columns:minmax(0,1fr);gap:18px}
}

/* =====================================================================
   VORGEHEN · fünf Etappen als klebender Stapel
   ===================================================================== */
.steps{margin-top:clamp(40px,5vw,64px);display:flex;flex-direction:column;gap:18px}
.step__card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,4fr);gap:20px clamp(24px,3.4vw,48px);align-items:start;
  padding:clamp(24px,2.8vw,34px);border-radius:var(--r-lg);background:var(--hell);transform-origin:50% 0;will-change:transform;
  box-shadow:inset 0 0 0 1px var(--line),0 -18px 40px -34px rgba(19,32,58,.45),0 26px 44px -40px rgba(19,32,58,.45)}
.step__head{display:flex;flex-direction:column;gap:6px;min-width:0}
.step__name{font-size:clamp(1.375rem,2vw,1.5rem);line-height:1.15;letter-spacing:-.025em;font-weight:680}
.step__meta{font-size:14px;font-weight:650;color:var(--acc-text)}
.step__text{color:var(--ink-2);max-width:38ch}
.step__ergebnis{padding-left:16px;box-shadow:inset 2px 0 0 var(--acc);font-weight:600;line-height:1.5}
.step__ergebnis span{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.step__route{grid-column:1 / -1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:6px;padding-top:0;position:relative;font-size:13px;font-weight:600;color:var(--ink-3)}
.step__route::before{content:"";position:absolute;left:0;right:20%;top:5px;height:2px;border-radius:2px;background:var(--line)}
.step__route li{position:relative;padding-top:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step__route li::before{content:"";position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--weiss);box-shadow:inset 0 0 0 2px var(--line-2);z-index:1}
.step__route li::after{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:transparent}
.step__route li.is-weg::after{background:var(--acc)}
.step__route li.is-weg::before{background:var(--acc);box-shadow:none}
.step__route li.is-hier{color:var(--ink)}
.step__route li.is-hier::before{background:var(--acc);box-shadow:0 0 0 5px rgba(245,185,66,.25)}
.step__shade{position:absolute;inset:0;background:var(--nacht);opacity:0;pointer-events:none;border-radius:inherit}
.stack-on .step{position:sticky;top:calc(var(--navh) + 32px + var(--i) * 14px)}
.stack-on .steps{gap:12svh}
@media (max-width:900px){
  .step__card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .step__head{grid-column:1 / -1}
}
@media (max-width:640px){
  .step__card{grid-template-columns:minmax(0,1fr);gap:14px}
  .step__route li{font-size:0}
  .step__route li.is-hier{font-size:13px;overflow:visible}
}

/* =====================================================================
   ÜBER UNS
   ===================================================================== */
.about__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:start}
.about__body{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.about__body .h2{max-width:16ch}
.gruender{margin-top:12px;display:flex;align-items:center;gap:20px;padding:12px 24px 12px 12px;border-radius:var(--r-lg);background:var(--weiss);box-shadow:inset 0 0 0 1px var(--line)}
.gruender img{width:96px;height:120px;object-fit:cover;object-position:50% 30%;border-radius:var(--r-md)}
.gruender figcaption b{display:block;font-size:17px;font-weight:680;letter-spacing:-.01em}
.gruender figcaption span{display:block;font-size:14px;color:var(--ink-2)}
.werte{border-top:1.5px solid var(--ink)}
.werte li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:24px 0;border-bottom:1px solid var(--line)}
.werte li>i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:21px;background:var(--weiss);color:var(--acc-text);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .4s,color .4s}
.werte li:hover>i{background:var(--acc);color:var(--on-acc)}
.werte h3{font-size:18px;line-height:1.35;letter-spacing:-.01em;font-weight:680}
.werte p{margin-top:4px;color:var(--ink-2);font-size:16px;line-height:1.55}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq__inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,90px);align-items:start}
.faq__kopf{position:sticky;top:calc(var(--navh) + 48px);display:flex;flex-direction:column;gap:16px}
.faq__mehr{color:var(--ink-2);font-size:16px}
.faq__mehr a{color:var(--acc-text);font-weight:650;text-underline-offset:3px}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item:first-child{border-top:1.5px solid var(--ink)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;
  font-size:clamp(1.0625rem,1.3vw,1.1875rem);font-weight:650;letter-spacing:-.015em;transition:color .3s}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--acc-text)}
.faq__item summary i{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-2);font-size:16px;color:var(--ink);
  transition:transform .45s var(--ease),background-color .3s,box-shadow .3s}
.faq__item summary:hover i{box-shadow:inset 0 0 0 1px var(--ink)}
.faq__item[open] summary i{transform:rotate(45deg);background:var(--acc);box-shadow:none}
.faq__item p{padding:0 58px 24px 0;color:var(--ink-2);max-width:56ch}

/* =====================================================================
   NACHTHORIZONT · die Kuppel vor dem Schluss
   ===================================================================== */
.nachthorizont{position:relative;height:clamp(56px,7vw,110px);background:var(--weiss);overflow:clip;margin-top:-1px}
.nachthorizont span{position:absolute;left:-6%;right:-6%;top:0;bottom:-2px;background:var(--nacht);border-radius:50% 50% 0 0 / 100% 100% 0 0;
  box-shadow:inset 0 1.5px 0 rgba(245,185,66,.6)}

/* =====================================================================
   SCHLUSS · Effekt 303 „Österreich bei Nacht“
   Ohne JS: nur Überschrift und Knopf auf Nachtblau. Mit JS: 460svh Strecke, die Bühne klebt.
   ===================================================================== */
.nacht{--n-bg:#13203A;--n-land:#2A3C60;--n-acc:#F5B942;position:relative;isolation:isolate;background:var(--nacht);color:var(--nacht-text);margin-top:-1px}
.nacht__stage{position:relative;padding:clamp(80px,9vw,128px) 0}
.nacht__cv,.nacht__shade,.nacht__labels,.nacht__caps,.nacht__pin,.nacht__bar{display:none}
.nacht__title{font-size:clamp(2.1rem,4vw,3.5rem);line-height:1.06;letter-spacing:-.034em;font-weight:680;max-width:13ch;text-wrap:balance;color:#F7F6F3}
.nacht__sub{margin-top:18px;font-size:clamp(1.0625rem,1.25vw,1.1875rem);line-height:1.6;color:var(--nacht-muted);max-width:40ch}
.nacht__cta{margin-top:28px}
.nacht__note{margin-top:22px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--nacht-muted)}
.nacht__note i{font-size:19px;color:var(--acc)}

.nacht.is-live .nacht__track{position:relative;height:460vh;height:460svh}
.nacht.is-live .nacht__stage{position:sticky;top:0;height:100vh;height:100svh;padding:0;overflow:hidden}
.nacht.is-live .nacht__cv{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0}
.nacht.is-live .nacht__shade{display:block;position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;pointer-events:none;transition:opacity .8s;
  background:linear-gradient(to top,rgba(19,32,58,.9) 0%,rgba(19,32,58,.5) 45%,rgba(19,32,58,0) 100%)}
.nacht.is-ende .nacht__shade{opacity:0}
.nacht.is-live .nacht__labels{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
.nacht.is-live .nacht__caps{display:block;position:absolute;z-index:3;left:var(--edge);right:var(--gutter);bottom:clamp(64px,10svh,104px);pointer-events:none}
.nacht.is-live .nacht__pin{display:block;position:absolute;left:50%;top:50%;width:0;height:0;z-index:3;opacity:0;pointer-events:none}
.nacht__pin b{position:absolute;left:26px;top:-14px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);white-space:nowrap;
  padding:6px 11px;border-radius:999px;background:rgba(19,32,58,.78);box-shadow:0 0 0 1px rgba(245,185,66,.4)}
.nacht.is-live .nacht__final{position:absolute;inset:0;z-index:4;display:flex;align-items:center;padding-top:var(--navh);opacity:0;pointer-events:none;will-change:opacity,transform}
.nacht.is-live .nacht__final::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(19,32,58,.9) 0%,rgba(19,32,58,.72) 30%,rgba(19,32,58,0) 58%)}
.nacht__final-in{position:relative}
.nacht.is-live .nacht__bar{display:block;position:absolute;left:var(--edge);right:var(--edge);bottom:24px;height:2px;border-radius:2px;z-index:3;background:rgba(174,184,203,.24);pointer-events:none}
.nacht__bar i{display:block;height:100%;border-radius:inherit;background:var(--acc);transform-origin:left;transform:scaleX(0)}
.nacht.is-static .nacht__track{height:auto}
.nacht.is-static .nacht__stage{position:relative;height:100vh;height:100svh;min-height:600px}
.nacht.is-static .nacht__final{opacity:1;pointer-events:auto}
.nacht.is-static .nacht__caps,.nacht.is-static .nacht__bar,.nacht.is-static .nacht__shade{display:none}

.cap{position:absolute;left:0;bottom:0;max-width:min(460px,100%);opacity:0;will-change:opacity,transform}
.cap small{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.cap p{margin-top:10px;font-size:clamp(1.25rem,1.9vw,1.5rem);font-weight:620;letter-spacing:-.02em;line-height:1.25;color:#F7F6F3;text-wrap:balance;text-shadow:0 2px 18px rgba(10,16,34,.8)}
.lblN{position:absolute;left:0;top:0;pointer-events:none;white-space:nowrap;font-size:12px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--nacht-text);
  padding:6px 10px;border-radius:999px;background:rgba(19,32,58,.66);box-shadow:0 0 0 1px rgba(245,185,66,.24);opacity:0;will-change:transform,opacity}
@media (max-width:899px){
  .nacht.is-live .nacht__final{align-items:flex-end;padding:0 0 max(56px,8svh)}
  .nacht.is-live .nacht__final::before{background:linear-gradient(0deg,rgba(19,32,58,.94) 0%,rgba(19,32,58,.8) 40%,rgba(19,32,58,0) 66%)}
  .nacht__title{font-size:clamp(2.1rem,8.6vw,2.6rem)}
}

/* =====================================================================
   FUSS · Nachtblau, setzt den Schluss fort
   ===================================================================== */
.site-footer{position:relative;background:var(--nacht);color:var(--nacht-text);border-top:1px solid rgba(242,244,248,.08)}
.footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 32px;padding-top:28px;padding-bottom:16px}
.footer__line,.footer__links{font-size:14.5px;color:var(--nacht-muted)}
.footer__line a,.footer__links a{color:var(--nacht-text);text-underline-offset:3px}
.brand--small{font-size:17px;color:var(--nacht-text)}
.brand--small span{color:var(--acc)}
.fuss-zeile{width:100%;max-width:none;margin:0;padding:8px 16px 24px;text-align:center;font-size:12.5px;color:var(--nacht-muted)}
.fuss-zeile a{color:inherit}

/* =====================================================================
   Kleinere Bildschirme
   ===================================================================== */
@media (max-width:900px){
  .kopf--zeile,.about__grid,.faq__inner{grid-template-columns:minmax(0,1fr)}
  .faq__kopf{position:relative;top:auto}
}
@media (max-width:767px){
  .faq__item p{padding-right:0}
  .gruender{padding-right:18px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}