/* Eigene Website von EasySite. Grundlage: framework/marke/corporate-design.md.
   Nacht-Hintergrund, Lime als einziger Akzent, Schriften vom eigenen Server.
   Gilt auch fuer impressum.html und datenschutz.html (Rahmen aus recht.js).
   Klassen am <html> setzt seite.js: js (Skript laeuft), bewegt (Bewegung erlaubt),
   gl (3D-Szene laeuft), aus (Schalter umgelegt). Ohne Skript steht die Seite fertig da. */

@font-face{font-family:"Bricolage Grotesque";src:url(schriften/bricolage-vf.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(schriften/plex-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(schriften/plex-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(schriften/plex-sans-600.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(schriften/plex-mono-500.woff2) format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"Archivo";src:url(schriften/archivo-vf.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --nacht:#0d0f0c; --flaeche:#151813; --lime:#c8f03c; --lime-tinte:#1c2500;
  --hell:#eef1e8; --leise:#a2a99a; --linie:#2d3428; --schalter:#2a3024;
  --font:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --head:"Bricolage Grotesque","IBM Plex Sans",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --radius:16px; --breite:1160px;
  color-scheme:dark;
}
/* Schalter umgelegt: der Akzent geht aus */
:root.aus{--lime:#a2a99a}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--nacht);color:var(--hell);font-family:var(--font);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{font-family:var(--head);font-weight:800;margin:0;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--lime);text-underline-offset:3px;transition:color .3s}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
::selection{background:var(--lime);color:var(--lime-tinte)}
em{font-style:normal}

.sprung{position:absolute;left:16px;top:-60px;background:var(--lime);color:var(--lime-tinte);padding:10px 16px;
  border-radius:10px;font-weight:600;z-index:40}
.sprung:focus{top:12px}
.fortschritt{position:fixed;left:0;top:0;right:0;height:3px;background:var(--lime);transform:scaleX(0);transform-origin:0 50%;
  z-index:30;pointer-events:none}

/* Logo: Schalter mit Knopf, Wortmarke klein in Archivo 800 */
.marke{display:inline-flex;align-items:center;gap:10px;color:var(--hell);text-decoration:none}
.schalter{display:block;width:44px;height:26px;border-radius:999px;background:var(--schalter);position:relative;flex:0 0 auto}
.schalter::after{content:"e";position:absolute;right:3px;top:3px;width:20px;height:20px;border-radius:50%;
  background:var(--lime);color:var(--lime-tinte);font:800 13px/20px "Archivo",sans-serif;text-align:center;
  transition:right .35s cubic-bezier(.3,1.4,.5,1),background .3s}
.aus .schalter::after{right:21px}
.marke b{font-family:"Archivo",sans-serif;font-weight:800;font-stretch:112%;font-size:21px;letter-spacing:-.01em}

.innen,.fuss,main>section{max-width:var(--breite);margin:0 auto;padding-left:24px;padding-right:24px}
.kopf{position:fixed;inset:0 0 auto 0;z-index:20;background:rgba(13,15,12,.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid rgba(45,52,40,.6)}
.kopf .innen{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}
.kopf nav{display:flex;align-items:center;gap:26px}
.kopf nav a:not(.knopf){color:var(--hell);text-decoration:none;font-weight:500;font-size:15.5px;padding:10px 0}
.kopf nav a:not(.knopf):hover{color:var(--lime)}

.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:999px;
  background:var(--lime);color:var(--lime-tinte);font-weight:600;text-decoration:none;border:1.5px solid var(--lime);
  transition:transform .2s,box-shadow .3s,background .3s,border-color .3s}
.knopf:hover{box-shadow:0 0 0 5px rgba(200,240,60,.16),0 14px 40px -12px rgba(200,240,60,.5);transform:translateY(-2px)}
.aus .knopf:hover{box-shadow:none}
.knopf.zweit{background:rgba(13,15,12,.55);color:var(--hell);border-color:var(--linie)}
.knopf.zweit:hover{border-color:var(--lime);box-shadow:none}
.knopf.dunkel{background:var(--lime-tinte);color:#eef1e8;border-color:var(--lime-tinte)}
.knopf.dunkel:hover{box-shadow:0 14px 34px -12px rgba(28,37,0,.7)}
.knopf.rand{background:transparent;color:var(--lime-tinte);border-color:var(--lime-tinte)}
.knopf.rand:hover{box-shadow:none}
.knopf.klein{min-height:44px;padding:8px 18px;font-size:15px}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}

.etikett{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--leise);
  margin-bottom:14px}
.leise,.hinweis,.preis .klein{color:var(--leise)}
.lime{color:var(--lime);transition:color .3s}

main>section{padding-top:96px;padding-bottom:96px}
main h2{font-size:clamp(2rem,4.6vw,3.2rem);margin-bottom:28px}

/* ===== Held: 3D-Szene hinter dem Text ===== */
main>.held{position:relative;max-width:none;min-height:100vh;min-height:100svh;padding:120px 0 96px;display:grid;align-items:center;
  isolation:isolate;overflow:clip}
.szene{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.held::after{content:"";position:absolute;inset:auto 0 0 0;height:22%;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--nacht))}
.held .innen{width:100%}
.held h1{font-size:clamp(2.7rem,7.2vw,5.6rem);max-width:10.5ch;margin-bottom:24px;line-height:1.02}
.held h1 .zeile{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}
.held h1 .zeile>span{display:block}
.held .unter{font-size:clamp(1.05rem,2vw,1.28rem);max-width:30em;margin-bottom:32px}
.umschalter{margin-top:28px;background:none;border:0;padding:10px 0;cursor:pointer;font:500 13px var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--leise)}
.umschalter b{color:var(--lime);font-weight:500}
.umschalter:hover{color:var(--hell)}
/* Ohne 3D-Szene (kein Skript, kein WebGL): der Schalter als Flaeche, dazu das Punktraster */
.ersatz{position:absolute;inset:0;z-index:-2;display:grid;place-items:center end;padding-right:9vw;
  background-image:radial-gradient(var(--linie) 1.2px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:linear-gradient(100deg,transparent 40%,#000 100%);mask-image:linear-gradient(100deg,transparent 40%,#000 100%)}
.ersatz .schalter{width:min(34vw,440px);height:auto;aspect-ratio:38/22}
.ersatz .schalter::after{content:"";width:auto;height:72.7%;aspect-ratio:1;top:13.6%;right:7.9%}
.gl .ersatz{display:none}

/* ===== Nutzen ===== */
.punkte ul{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.punkte h2{font-size:1.2rem;margin-bottom:8px;font-weight:700}
.punkte h2::before{content:"";display:block;width:26px;height:6px;border-radius:999px;background:var(--lime);margin-bottom:16px;
  transition:background .3s}
.punkte p{color:var(--leise);font-size:16px}

/* ===== Ablauf: Ebenen-Buehne ===== */
.ablauf-raster{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:start}
.buehne{position:sticky;top:96px;height:min(620px,calc(100vh - 130px));display:grid;place-items:center;perspective:1500px}
.stapel{--x:0;--d:1;position:relative;width:min(300px,62%);aspect-ratio:3/4;transform-style:preserve-3d;
  transform:rotateX(calc(58deg - var(--d)*50deg)) rotateZ(calc(-38deg + var(--d)*32deg));transition:transform .25s ease-out}
.ebene{position:absolute;inset:0;border-radius:14px;transform:translateZ(calc(var(--n)*var(--x)*86px));
  transition:transform .25s ease-out,box-shadow .5s,border-color .5s,background .5s}
.ebene i{position:absolute;display:block;border-radius:5px;background:var(--linie)}
.schild{position:absolute;right:calc(100% + 16px);top:8px;white-space:nowrap;font:500 12px var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--leise);opacity:var(--x);transition:opacity .25s}
.schild::after{content:"";position:absolute;left:calc(100% + 4px);top:50%;width:8px;height:1px;background:var(--leise)}
/* 1 Angaben: Seitengrund und Textzeilen */
.e1{background:var(--flaeche);border:1px solid var(--linie);box-shadow:0 40px 80px -30px #000}
.e1 i{left:8%;height:2.2%;background:#3b4434}
.e1 i:nth-of-type(1){top:60%;width:52%;height:3.6%;background:#5d6456}
.e1 i:nth-of-type(2){top:68%;width:84%}.e1 i:nth-of-type(3){top:72.5%;width:78%}
.e1 i:nth-of-type(4){top:77%;width:82%}.e1 i:nth-of-type(5){top:81.5%;width:46%}
/* 2 Fotos */
.e2 i{background:#2f3a26;border:1px solid #46523a}
.e2 i:nth-of-type(1){left:8%;top:17%;width:84%;height:25%;border-radius:8px}
.e2 i:nth-of-type(2){left:8%;top:44.5%;width:40.5%;height:11%;border-radius:8px}
.e2 i:nth-of-type(3){left:51.5%;top:44.5%;width:40.5%;height:11%;border-radius:8px}
/* 3 Design: Kopfzeile und Knopf */
.e3 i:nth-of-type(1){left:8%;top:9.6%;width:13%;height:3.8%;border-radius:99px;background:#5d6456}
.e3 i:nth-of-type(2){left:62%;top:10.6%;width:12%;height:1.8%}
.e3 i:nth-of-type(3){left:78%;top:10.6%;width:14%;height:1.8%}
.e3 i:nth-of-type(4){left:8%;top:88%;width:36%;height:6%;border-radius:99px;background:var(--leise);transition:background .5s,box-shadow .5s}
.live .e3 i:nth-of-type(4){background:var(--lime);box-shadow:0 0 24px rgba(200,240,60,.5)}
/* 4 Freigabe: Fensterrahmen mit Schalter */
.e4{border:1.5px solid #46523a}
.e4 i{top:2.4%;width:2.6%;height:1.95%;border-radius:50%;background:#46523a}
.e4 i:nth-of-type(1){left:5%}.e4 i:nth-of-type(2){left:9.5%}.e4 i:nth-of-type(3){left:14%}
.e4::before{content:"";position:absolute;left:0;right:0;top:6.6%;height:1px;background:#46523a}
.mini{position:absolute;right:5%;top:1.4%;width:9.5%;height:4%;border-radius:99px;background:var(--schalter)}
.mini::after{content:"";position:absolute;top:15%;left:8%;height:70%;aspect-ratio:1;border-radius:50%;background:var(--leise);
  transition:left .4s cubic-bezier(.3,1.4,.5,1),background .3s}
.live .mini::after{left:50%;background:var(--lime)}
.status{position:absolute;right:17%;top:1.2%;font:500 10px/1.9 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.status span:last-child,.live .status span:first-child{display:none}
.live .status span:last-child{display:inline;color:var(--lime)}
.live .e4{border-color:var(--lime);box-shadow:0 0 0 1px rgba(200,240,60,.25),0 30px 110px -18px rgba(200,240,60,.42)}
.aus .live .e4,.aus .live .e3 i:nth-of-type(4){box-shadow:none}

.schritte{display:grid;gap:16px}
.schritte li{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:26px;
  transition:opacity .4s,border-color .4s,transform .4s}
.schritte .nr{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--linie);
  font-family:var(--mono);font-weight:500;font-size:15px;margin-bottom:18px;transition:background .3s,border-color .3s,color .3s}
.schritte li.an .nr{background:var(--lime);border-color:var(--lime);color:var(--lime-tinte)}
.schritte h3{font-size:1.45rem;margin-bottom:8px;transition:color .4s}
.schritte p{color:var(--leise);transition:color .4s}
/* Mit Bewegung: jeder Schritt bekommt Raum, die Buehne bleibt stehen und baut sich dazu auf */
.bewegt .schritte{gap:0;padding-bottom:14vh}
.bewegt .schritte li{min-height:58vh;display:flex;flex-direction:column;justify-content:center;background:none;border:0;
  border-left:2px solid var(--linie);border-radius:0;padding:0 0 0 32px}
/* Abgedunkelt ueber Farbe statt Deckkraft: der Kontrast bleibt ueber 4,5:1 */
.bewegt .schritte li:not(.aktiv) h3{color:var(--leise)}
.bewegt .schritte li:not(.aktiv) p{color:#7c8572}
.bewegt .schritte li.aktiv{border-left-color:var(--lime)}
.bewegt .schritte h3{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.bewegt .schritte p{font-size:1.1rem;max-width:26em}

/* ===== Pakete: Karten mit Tiefe ===== */
.hinweis{margin:-14px 0 28px;font-size:16px}
.paketliste{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;perspective:1400px}
.paket{--rx:0deg;--ry:0deg;--gx:50%;--gy:0%;position:relative;border:1px solid var(--linie);border-radius:18px;padding:30px;
  display:flex;flex-direction:column;gap:18px;transform-style:preserve-3d;
  background:radial-gradient(520px circle at var(--gx) var(--gy),rgba(200,240,60,0),transparent 60%),var(--flaeche);
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .4s}
.paket.geneigt{transition:transform .08s linear,border-color .3s,box-shadow .4s;border-color:#55633f;
  background:radial-gradient(520px circle at var(--gx) var(--gy),rgba(200,240,60,.13),transparent 60%),var(--flaeche);
  box-shadow:0 40px 80px -40px #000}
.paket>*{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.paket.geneigt h3{transform:translateZ(26px)}
.paket.geneigt .preis{transform:translateZ(54px)}
.paket.geneigt .umfang{transform:translateZ(18px)}
.paket.geneigt .knopf{transform:translateZ(36px)}
.paket h3{font-size:1.4rem}
.preis .zahl{display:block;font-family:"Archivo",sans-serif;font-weight:800;font-stretch:112%;font-size:clamp(2.6rem,4.4vw,3.4rem);
  line-height:1.05;letter-spacing:-.02em}
.preis .klein{font-size:14.5px}
.umfang{display:grid;gap:8px;flex:1;align-content:start}
.umfang li{padding-left:26px;position:relative}
.umfang li::before{content:"";position:absolute;left:2px;top:.52em;width:12px;height:6px;border-left:2px solid var(--lime);
  border-bottom:2px solid var(--lime);transform:rotate(-45deg);transition:border-color .3s}
.wartung{color:var(--leise);font-size:15.5px;border-top:1px solid var(--linie);padding-top:16px}
.wartung span{font-family:var(--mono);font-weight:500;color:var(--hell)}

/* ===== Unterlagen ===== */
.unterlagen{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 40px}
.unterlagen li{padding:18px 0;border-top:1px solid var(--linie)}
.unterlagen h3{font-size:1.1rem;font-weight:700;margin-bottom:4px}
.unterlagen p{color:var(--leise);font-size:16px}

/* ===== Kontakt: Lime-Flaeche, Knopf dunkel ===== */
.banner{position:relative;overflow:hidden;background:var(--lime);color:var(--lime-tinte);border-radius:28px;padding:clamp(32px,6vw,72px);
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:32px;transition:background .3s}
.banner::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(28,37,0,.28) 1.3px,transparent 1.3px);background-size:24px 24px;
  -webkit-mask-image:linear-gradient(100deg,transparent 45%,#000 100%);mask-image:linear-gradient(100deg,transparent 45%,#000 100%)}
.banner>*{position:relative}
.banner .etikett,.banner .leise{color:var(--lime-tinte)}
.banner h2{font-size:clamp(2.2rem,5.4vw,4rem);margin-bottom:16px}
.banner p{max-width:30em;margin-bottom:22px}
.banner .leise{margin-bottom:2px;font-size:16px;font-weight:500}
.banner :focus-visible{outline-color:var(--lime-tinte)}
.gross{justify-self:end;width:min(100%,340px);aspect-ratio:38/22;border-radius:999px;background:var(--lime-tinte);position:relative;
  box-shadow:0 30px 60px -24px rgba(28,37,0,.7);transform:perspective(900px) rotateY(-22deg) rotateX(10deg)}
.gross::after{content:"";position:absolute;top:13.6%;right:7.9%;height:72.7%;aspect-ratio:1;border-radius:50%;background:var(--nacht);
  box-shadow:inset 0 0 0 6px rgba(200,240,60,.9);transition:right .4s cubic-bezier(.3,1.4,.5,1)}
.aus .gross::after{right:50%}

.fuss{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:28px;padding-bottom:40px;
  border-top:1px solid var(--linie)}
.fuss nav{display:flex;gap:22px;flex-wrap:wrap}
.fuss a,footer a{color:var(--hell);padding:10px 0;display:inline-block}

/* ===== Bewegung (nur mit Klasse "bewegt", also nie bei "Bewegung reduzieren") ===== */
@keyframes anspringen{from{right:21px;background:var(--leise)}to{right:3px;background:var(--lime)}}
@keyframes hoch{from{transform:translateY(110%) rotate(4deg)}to{transform:none}}
@keyframes blende{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.bewegt .marke.an .schalter::after{animation:anspringen .5s 1s cubic-bezier(.3,1.4,.5,1) backwards}
.bewegt .held h1 .zeile>span{animation:hoch .9s cubic-bezier(.2,.8,.2,1) backwards;transform-origin:0 100%}
.bewegt .held h1 .zeile:nth-child(2)>span{animation-delay:.1s}
.bewegt .held h1 .zeile:nth-child(3)>span{animation-delay:.2s}
.bewegt .held .etikett{animation:blende .7s .05s backwards}
.bewegt .held .unter{animation:blende .7s .45s backwards}
.bewegt .held .knoepfe{animation:blende .7s .6s backwards}
.bewegt .held .umschalter{animation:blende .7s 1.3s backwards}
.bewegt [data-auf]{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.bewegt [data-auf].da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}

@media (max-width:900px){
  .punkte ul{grid-template-columns:repeat(2,1fr)}
  .paketliste{grid-template-columns:1fr}
  .ablauf-raster{grid-template-columns:1fr;gap:0}
  .buehne{top:63px;height:44vh;height:44svh;z-index:2;background:linear-gradient(to bottom,var(--nacht) 88%,transparent)}
  .buehne{place-items:center end;padding-right:9%}
  .stapel{width:min(190px,44%)}
  .ebene{transform:translateZ(calc(var(--n)*var(--x)*52px))}
  .schild{font-size:10.5px}
  .bewegt .schritte li{min-height:50vh}
  .banner{grid-template-columns:1fr}
  .gross{display:none}
}
@media (max-width:700px){
  body{font-size:16px}
  .kopf nav a:not(.knopf){display:none}
  main>section{padding-top:64px;padding-bottom:64px}
  main>.held{align-items:end;padding:40vh 0 48px}
  .held h1{font-size:clamp(2.5rem,12.5vw,3.6rem)}
  .punkte ul,.unterlagen{grid-template-columns:1fr}
  .ersatz{place-items:start center;padding:110px 0 0}
  .ersatz .schalter{width:62vw}
}