@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}
.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);animation:auf .6s cubic-bezier(.34,1.45,.64,1) both;animation-delay:calc(var(--n) * 60ms)}
.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)}
@keyframes auf{from{opacity:0;scale:.3}}
@media (prefers-reduced-motion:reduce){.kachel{animation:none}}
.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}
.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}}