@font-face{font-family:"DM Sans";src:url(/schriften/dm-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/schriften/dm-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/schriften/dm-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/schriften/instrument-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/schriften/instrument-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/schriften/geist-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* Wie die App (Übersicht G): warmes Dunkel, Violett, Instrument Serif für Überschriften */
:root{--grund:#141312;--flaeche:#1d1c1a;--tief:#0d0c0c;--linie:#2a2826;--text:#ece8e1;--mittel:#b3ada4;--leise:#8d877e;--akzent:#b9a8ff;--akzent-voll:#6b4ce6;--akzent-tief:#3a3168;--anzeige:"Instrument Serif",Georgia,serif;--schrift:"DM Sans",-apple-system,"Segoe UI",sans-serif;--mono:"Geist Mono",ui-monospace,monospace;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--grund);color:var(--text);font:400 17px/1.55 var(--schrift);-webkit-font-smoothing:antialiased}
a{color:var(--akzent)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:6px}
.kopf,.fuss,main{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.kopf{display:flex;align-items:center;justify-content:space-between;padding-block:22px;position:sticky;top:0;z-index:20;transition:padding .3s,background .3s,box-shadow .3s}
.kopf.gerollt{padding-block:12px;background:rgba(20,19,18,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--linie)}
@media (min-width:1120px){.kopf.gerollt{border-radius:0 0 18px 18px}}
.marke{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:700;font-size:19px}
.kopf nav,.fuss nav{display:flex;gap:22px;flex-wrap:wrap}
.kopf nav a,.fuss nav a{color:var(--mittel);text-decoration:none}
.kopf nav a:hover,.fuss nav a:hover{color:var(--text)}
main{display:flex;flex-direction:column;gap:96px;padding-block:24px 96px}
h1,h2{font-family:var(--anzeige);font-weight:400;letter-spacing:-.01em;text-wrap:balance;margin:0}
h1{font-size:clamp(48px,8vw,92px);line-height:.98}
h1 i{color:var(--akzent)}
h2{font-size:clamp(34px,4.6vw,52px);line-height:1.05;margin-bottom:24px}
h3{font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--leise);margin:28px 0 10px}
.held{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;min-height:min(640px,80vh)}
.held-text{display:flex;flex-direction:column;gap:22px}
.held-text p{color:var(--mittel);font-size:19px;max-width:34em;margin:0}
.knoepfe{display:flex;gap:12px;flex-wrap:wrap}
.knopf{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;border-radius:12px;background:var(--linie);color:var(--text);text-decoration:none;font-weight:500}
.knopf:hover{background:#34312e}
.knopf.voll{background:var(--akzent);color:var(--grund)}
.knopf.voll:hover{filter:brightness(1.06)}
.leise{color:var(--leise);font-size:14px}
.buehne{position:relative;height:420px;border-radius:28px;background:radial-gradient(120% 90% at 50% 100%,#2c2747 0%,var(--tief) 70%);border:1px solid var(--linie);overflow:hidden}
.bogen{position:absolute;inset:0}
.kachel{--winkel:calc(160deg - var(--n) * 35deg);position:absolute;left:50%;bottom:92px;width:76px;height:76px;margin-left:-38px;border-radius:20px;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;transform:rotate(calc(var(--winkel) * -1 + 90deg)) translateY(-190px) rotate(calc(var(--winkel) - 90deg));transform-origin:50% 100%;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.kachel span{font:700 14px/1 var(--schrift);color:#16141f;white-space:nowrap}
.kachel.gewaehlt span{color:#fff}
.kachel.gewaehlt{background:var(--akzent-voll);box-shadow:0 10px 30px rgba(107,76,230,.55)}
.pille{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:12px 22px 12px 16px;border-radius:99px;background:rgba(255,255,255,.88);color:#16141f;font-weight:500;white-space:nowrap;border:1.5px solid var(--akzent-voll)}
.tropfen{width:16px;height:20px;background:var(--akzent-voll);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;clip-path:polygon(50% 0,100% 55%,100% 100%,0 100%,0 55%)}
.schritte ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s}
.schritte li{counter-increment:s;border:1px solid var(--linie);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:8px}
.schritte li::before{content:counter(s);font:400 46px/1 var(--anzeige);color:var(--akzent)}
.schritte b{font-weight:500;font-size:19px}
.schritte span{color:var(--mittel)}
.warum .raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 36px}
.warum b{font-weight:500;font-size:18px}
.warum p{margin:6px 0 0;color:var(--mittel)}
.gruppen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.gruppe{border:1px solid var(--linie);border-radius:16px}
.gruppe summary{cursor:pointer;padding:16px 20px;list-style:none;display:flex;flex-direction:column;gap:2px}
.gruppe summary::-webkit-details-marker{display:none}
.gruppe summary small{color:var(--leise);font-size:13.5px}
.gruppe ul{list-style:none;margin:0;padding:0 20px 16px;display:grid;gap:8px}
.gruppe li{display:flex;gap:12px;color:var(--mittel);font-size:15px}
.schild{flex:none;width:96px;text-align:center;font:400 12px/1.9 var(--mono);background:var(--akzent-tief);color:#d6ccff;border-radius:6px}
.preis{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center}
.preis p{color:var(--mittel);max-width:34em}
.preis ul{margin:16px 0 0;padding-left:20px;color:var(--mittel);display:grid;gap:6px}
.teams>p{color:var(--mittel);max-width:40em}
.teamraster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px}
.teamkarte{background:var(--flaeche);border:1px solid var(--linie);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:8px}
.teamkarte .knopf{margin-top:auto;text-align:center}
.betrag.klein{font-size:34px}
@media (max-width:860px){.teamraster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.teamraster{grid-template-columns:minmax(0,1fr)}}
.preiskarte{background:var(--flaeche);border:1px solid var(--linie);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:12px}
.mono-klein{font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--akzent)}
.wl-text{margin:4px 0;color:var(--mittel)}
.feld{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--mittel)}
.feld input{font:inherit;font-size:17px;color:var(--text);background:var(--tief);border:1px solid var(--linie);border-radius:12px;padding:13px 14px}
.feld input:focus{outline:2px solid var(--akzent);outline-offset:1px;border-color:transparent}
button.knopf{border:0;font:inherit;font-weight:500;cursor:pointer}
.lockfeld{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.betrag{font:400 64px/1 var(--anzeige)}
.fragen details{border-bottom:1px solid var(--linie);padding:14px 0}
.fragen summary{cursor:pointer;font-weight:500}
.fragen details p{color:var(--mittel);margin:10px 0 0;max-width:46em}
.kontakt{margin-top:28px;color:var(--mittel)}
.fuss{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:32px 48px;border-top:1px solid var(--linie);color:var(--leise);font-size:14px}
@media (max-width:860px){.held,.preis{grid-template-columns:minmax(0,1fr)}.buehne{height:360px}.schritte ol,.warum .raster,.gruppen{grid-template-columns:minmax(0,1fr)}.kachel{width:60px;height:60px;margin-left:-30px;transform:rotate(calc(var(--winkel) * -1 + 90deg)) translateY(-150px) rotate(calc(var(--winkel) - 90deg))}.kachel span{font-size:12px}}

/* ===== Bewegung (website/bewegung.css, wird an stil.css angehängt) ===== */
body{overflow-x:clip}

/* Einblenden beim Scrollen – nur mit JS, ohne JS bleibt alles sichtbar */
.js .zeige{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.2,1);transition-delay:var(--v,0ms)}
.js .zeige.sichtbar{opacity:1;transform:none}

/* Held: Bühne kippt beim Wegscrollen leicht nach hinten, Text tritt zurück */
.held{--s:0}
.held .buehne{transform:perspective(1100px) rotateX(calc(var(--s) * 10deg)) translateY(calc(var(--s) * -30px)) scale(calc(1 - var(--s) * .05));transform-origin:50% 100%}
.held .held-text{opacity:calc(1 - var(--s) * .7)}

/* Held: echte Umwandlung in Schleife – HEIC fällt auf die Pille, Bogen geht auf, JPG gewählt, fertig */
.demo{--jx:109px;--jy:134px;--takt:8s}
.datei{position:absolute;left:min(70%,calc(100% - 100px));top:18%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:14px;background:rgba(255,255,255,.94);color:#16141f;font:500 14px/1 var(--schrift);white-space:nowrap;box-shadow:0 14px 34px rgba(0,0,0,.45);z-index:3;animation:datei-weg var(--takt) cubic-bezier(.45,0,.25,1) infinite}
.datei-art{font:700 10px/1 var(--mono);letter-spacing:.06em;color:#fff;background:#e0742c;border-radius:6px;padding:7px 6px}
@keyframes datei-weg{
  0%{left:min(70%,calc(100% - 100px));top:18%;opacity:0;scale:.9}
  7%{left:min(70%,calc(100% - 100px));top:18%;opacity:1;scale:1}
  28%{left:50%;top:calc(100% - 140px);opacity:1;scale:1}
  40%{left:50%;top:calc(100% - 140px);opacity:1;scale:.92}
  50%{left:calc(50% - var(--jx));top:var(--jy);opacity:1;scale:.72}
  57%{left:calc(50% - var(--jx));top:var(--jy);opacity:0;scale:.2}
  100%{left:calc(50% - var(--jx));top:var(--jy);opacity:0;scale:.2}
}
.demo .kachel{animation:bogen-auf var(--takt) cubic-bezier(.34,1.45,.64,1) infinite;animation-delay:calc(var(--n) * 45ms)}
@keyframes bogen-auf{0%,29%{opacity:0;scale:.3}36%,64%{opacity:1;scale:1}72%,100%{opacity:0;scale:.6}}
.demo .kachel.gewaehlt{background:rgba(255,255,255,.9);box-shadow:0 8px 24px rgba(0,0,0,.35);animation-name:bogen-auf,wahl;animation-duration:var(--takt),var(--takt);animation-iteration-count:infinite,infinite}
.demo .kachel.gewaehlt span{color:#16141f;animation:wahl-text var(--takt) infinite}
@keyframes wahl{0%,44%{background:rgba(255,255,255,.9);box-shadow:0 8px 24px rgba(0,0,0,.35)}47%,66%{background:#6b4ce6;box-shadow:0 0 0 6px rgba(185,168,255,.25),0 10px 30px rgba(107,76,230,.6)}100%{background:rgba(255,255,255,.9)}}
@keyframes wahl-text{0%,44%{color:#16141f}47%,66%{color:#fff}100%{color:#16141f}}
.demo .pille{animation:pille-puls var(--takt) infinite}
@keyframes pille-puls{0%,24%{box-shadow:0 0 0 0 rgba(185,168,255,0)}30%,42%{box-shadow:0 0 0 8px rgba(185,168,255,.28)}50%,100%{box-shadow:0 0 0 0 rgba(185,168,255,0)}}
.pille-fertig{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:99px;background:#fff;color:#15803d;font-weight:700;opacity:0}
.demo .pille-fertig{animation:fertig var(--takt) infinite}
@keyframes fertig{0%,64%{opacity:0;scale:.9}69%,92%{opacity:1;scale:1}97%,100%{opacity:0;scale:1}}

/* Band mit Dateiarten: zwei Reihen laufen beim Scrollen gegeneinander */
.band{width:100vw;margin-left:calc(50% - 50vw);display:grid;gap:12px;overflow:hidden;margin-block:-40px;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.band-reihe{display:flex;gap:12px;width:max-content;will-change:transform}
.band-reihe span{font:400 15px/1 var(--mono);letter-spacing:.08em;color:var(--mittel);border:1px solid var(--linie);border-radius:99px;padding:12px 20px}
.band-reihe span:nth-child(5n+2){color:var(--akzent);border-color:var(--akzent-tief)}

/* Schritte: Linie füllt sich beim Scrollen, erreichte Schritte leuchten auf */
.schritte ol{position:relative;padding-top:30px}
.schritte ol::before,.schritte ol::after{content:"";position:absolute;top:0;left:0;height:2px;border-radius:2px}
.schritte ol::before{right:0;background:var(--linie)}
.schritte ol::after{width:calc(var(--f,1) * 100%);background:linear-gradient(90deg,var(--akzent-voll),var(--akzent))}
.schritte li{transition:border-color .5s,transform .5s cubic-bezier(.2,.75,.2,1),background .5s}
.js .schritte li{opacity:.55}
.js .schritte li.aktiv{opacity:1;border-color:var(--akzent-tief);background:linear-gradient(180deg,rgba(107,76,230,.12),transparent);transform:translateY(-4px)}
.js .schritte li.aktiv::before{text-shadow:0 0 24px rgba(185,168,255,.7)}
.js .schritte li{transition:opacity .5s,border-color .5s,transform .5s cubic-bezier(.2,.75,.2,1),background .5s}

/* Karten reagieren auf die Maus */
.warum .raster>div,.teamkarte,.gruppe{transition:border-color .3s,transform .3s cubic-bezier(.2,.75,.2,1)}
.teamkarte:hover,.gruppe:hover{border-color:var(--akzent-tief);transform:translateY(-3px)}

@media (max-width:860px){
  .demo{--jx:86px;--jy:115px}
  .schritte ol{padding-top:0;padding-left:24px}
  .schritte ol::before,.schritte ol::after{top:0;left:0;width:2px;height:auto}
  .schritte ol::before{bottom:0;right:auto}
  .schritte ol::after{height:calc(var(--f,1) * 100%)}
}

/* Wer weniger Bewegung möchte: alles steht still und ist sichtbar */
@media (prefers-reduced-motion:reduce){
  .js .zeige{opacity:1;transform:none;transition:none}
  .held .buehne{transform:none}.held .held-text{opacity:1}
  .demo .kachel,.demo .kachel.gewaehlt,.demo .kachel.gewaehlt span,.demo .pille,.demo .pille-fertig{animation:none}
  .demo .kachel.gewaehlt{background:var(--akzent-voll)}.demo .kachel.gewaehlt span{color:#fff}
  .datei{display:none}
  .js .schritte li{opacity:1}
}

/* Handy: Kopfleiste einzeilig – nur Marke und Sprache, Abschnitte erreicht man per Scrollen */
@media (max-width:600px){.kopf nav a:not([hreflang]){display:none}}