:root{
color-scheme: light only;
--bg:#FFFFFF;
--surface:#FFFFFF;
--surface-2:#F4F4F4;
--text:#111111;
--text-soft:#555555;
--border:#E3E3E3;
--ink:#111111;
--shadow:0 1px 2px rgba(0,0,0,0.05), 0 8px 24px -14px rgba(0,0,0,0.18);
--font-display:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
--font-body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
--maxw:1100px;
--gutter:16px;
--header-h:64px;
}
@media (min-width:600px){ :root{ --gutter:24px; } }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--bg); }
html,body{ margin:0; padding:0; }
body{ background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:1.04rem; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.1; text-wrap:balance; margin:0; letter-spacing:-0.015em; }
h1{ font-size:clamp(2.2rem,1.2rem + 4.4vw,3.8rem); }
h2{ font-size:clamp(1.6rem,1.1rem + 1.9vw,2.4rem); }
p{ margin:0; }
::selection{ background:#111; color:#fff; }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
section{ padding-block:clamp(3rem,5vw,5rem); border-top:1px solid var(--border); scroll-margin-top:var(--header-h); }
.alt{ background:var(--surface-2); }
.eyebrow{ font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-soft); display:inline-flex; align-items:center; gap:0.5em; }
.eyebrow::before{ content:""; width:1.4em; height:1px; background:currentColor; }
.lede{ color:var(--text-soft); max-width:60ch; }
.section-head{ max-width:660px; margin-bottom:clamp(1.8rem,3vw,2.6rem); }
.section-head h2{ margin-top:0.6rem; }
.section-head .lede{ margin-top:0.7rem; }

/* Kopfzeile: alles in einer Reihe */
header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); padding-top:env(safe-area-inset-top,0px); }
.nav{ display:flex; align-items:center; gap:1.4rem; height:var(--header-h); overflow-x:auto; white-space:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.nav::-webkit-scrollbar{ display:none; }
.brand{ display:flex; align-items:center; gap:0.55rem; font-family:var(--font-display); font-weight:700; font-size:1.12rem; text-decoration:none; flex:none; }
.brand svg{ width:28px; height:28px; flex:none; }
.navlinks{ display:flex; align-items:center; gap:1.2rem; list-style:none; margin:0 0 0 auto; padding:0; font-size:0.94rem; font-weight:500; }
.navlinks a{ text-decoration:none; color:var(--text-soft); padding-block:0.6rem; }
.navlinks a:hover{ color:var(--text); }
.nav .btn{ flex:none; }

.btn{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-body); font-weight:600; font-size:0.95rem; padding:0.75em 1.35em; border-radius:8px; border:1px solid var(--ink); cursor:pointer; text-decoration:none; white-space:nowrap; min-height:44px; }
.btn-primary{ background:var(--ink); color:#FFFFFF; }
.btn-primary:hover{ background:#333; border-color:#333; }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#FFFFFF; }
.nav .btn{ padding:0.5em 1.05em; min-height:38px; font-size:0.9rem; }

/* Hero */
.hero{ border-top:none; padding-block:clamp(3rem,7vw,6rem); }
.hero h1{ margin-block:1rem 1.2rem; max-width:16ch; }
.hero .lede{ font-size:1.14rem; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:0.8rem; margin-top:1.8rem; }

/* Karten */
.grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:680px){ .grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:900px){ .grid.cols-3{ grid-template-columns:repeat(3,1fr); } }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.4rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:0.55rem; transition:border-color 160ms, transform 160ms; }
.card:hover{ border-color:var(--ink); transform:translateY(-2px); }
.card h3{ font-size:1.1rem; }
.card p{ color:var(--text-soft); font-size:0.96rem; }
.card .num{ font-family:var(--font-mono); font-size:0.82rem; color:var(--text-soft); }

.problem-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:800px){
.problem-grid{ grid-template-columns:1.2fr 1fr; }
.problem-grid .big{ grid-row:1 / 3; }
.problem-grid .big h3{ font-size:1.45rem; }
}

.prices{ margin-top:clamp(2.4rem,4vw,3.2rem); }
.price-grid{ display:grid; gap:1rem; grid-template-columns:1fr; margin-top:1.4rem; }
@media (min-width:780px){ .price-grid{ grid-template-columns:repeat(3,1fr); } }
.price{ font-family:var(--font-mono); font-size:1.7rem; font-variant-numeric:tabular-nums; color:var(--text); }

/* Über mich */
.about{ display:grid; gap:2rem; grid-template-columns:1fr; align-items:start; }
@media (min-width:820px){ .about{ grid-template-columns:280px 1fr; gap:3rem; } }
.about img{ width:min(280px,70vw); aspect-ratio:3/4; object-fit:cover; object-position:top center; border-radius:14px; border:1px solid var(--border); box-shadow:var(--shadow); filter:grayscale(100%); }
.about h2{ margin-top:0.6rem; }
.about .lede{ margin-top:0.9rem; }

/* Ablauf */
.steps{ display:grid; gap:1.3rem; grid-template-columns:1fr; }
@media (min-width:700px){ .steps{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); } }
.step{ padding-top:1.3rem; border-top:2px solid var(--ink); }
.step span{ font-family:var(--font-mono); font-size:0.85rem; color:var(--text-soft); display:block; margin-bottom:0.5rem; }
.step h3{ font-size:1.12rem; margin-bottom:0.35rem; }
.step p{ color:var(--text-soft); font-size:0.95rem; }

/* FAQ */
.faq{ max-width:760px; }
.faq details{ border-bottom:1px solid var(--border); padding-block:1.05rem; }
.faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; font-family:var(--font-display); font-weight:600; font-size:1.04rem; min-height:44px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--font-mono); font-size:1.3rem; flex:none; }
.faq details[open] summary::after{ content:"\2212"; }
.faq .a{ color:var(--text-soft); margin-top:0.6rem; max-width:62ch; }

/* Formulare */
.two-col{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:820px){ .two-col{ grid-template-columns:1fr 1fr; align-items:start; } }
form{ margin-top:1.6rem; max-width:540px; }
.field{ display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.05rem; }
.row{ display:flex; gap:1rem; flex-wrap:wrap; }
.row .field{ flex:1; min-width:150px; }
.field label{ font-size:0.88rem; font-weight:600; }
.field input, .field textarea, .field select{ font-family:var(--font-body); font-size:16px; padding:0.75em 0.9em; border-radius:8px; border:1px solid #CFCFCF; background:#FFFFFF; color:var(--text); width:100%; -webkit-appearance:none; appearance:none; }
.field select{ background-image:linear-gradient(45deg,transparent 50%,#111 50%),linear-gradient(135deg,#111 50%,transparent 50%); background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size:5px 5px; background-repeat:no-repeat; padding-right:2.4em; }
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:2px solid var(--ink); outline-offset:1px; }
.note{ font-size:0.86rem; color:var(--text-soft); margin-top:0.7rem; }
.side{ display:flex; flex-direction:column; gap:1rem; }
.side .card a{ text-decoration:none; font-weight:600; color:var(--text); }
.side .card a:hover{ text-decoration:underline; }

/* Footer */
footer{ border-top:1px solid var(--border); padding-block:2.4rem calc(2.8rem + env(safe-area-inset-bottom,0px)); }
.foot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; }
.foot h4{ font-family:var(--font-mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-soft); margin:0 0 0.7rem; font-weight:500; }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.5rem; font-size:0.93rem; }
.foot a{ text-decoration:none; }
.foot a:hover{ text-decoration:underline; }
.foot-note{ margin-top:2rem; padding-top:1.3rem; border-top:1px solid var(--border); font-size:0.82rem; color:var(--text-soft); display:flex; flex-wrap:wrap; gap:0.5rem 1.2rem; justify-content:space-between; }
.tag{ display:inline-block; background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:0.4em 0.7em; font-family:var(--font-mono); font-size:0.78rem; color:var(--text-soft); }

/* Eigene Seiten (öffnen über die Zeile oben, funktionieren auch ohne JavaScript) */
.page{ display:none; position:fixed; left:0; right:0; bottom:0; top:0; z-index:40; background:var(--bg); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.vr{ position:fixed; top:0; left:0; width:1px; height:1px; opacity:0; pointer-events:none; }
label{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.navlinks{ display:flex; align-items:center; gap:1.2rem; margin-left:auto; font-size:0.94rem; font-weight:500; }
.navlinks label{ color:var(--text-soft); padding-block:0.6rem; border-bottom:2px solid transparent; }
.navlinks label:hover{ color:var(--text); }
.foot label:hover{ text-decoration:underline; }
#v-angebot:checked ~ #page-angebot{ display:block; }
#v-angebot:checked ~ header .navlinks label[for="v-angebot"]{ color:var(--text); border-bottom-color:var(--ink); }
#v-ki:checked ~ #page-ki{ display:block; }
#v-ki:checked ~ header .navlinks label[for="v-ki"]{ color:var(--text); border-bottom-color:var(--ink); }
#v-persoenlich:checked ~ #page-persoenlich{ display:block; }
#v-persoenlich:checked ~ header .navlinks label[for="v-persoenlich"]{ color:var(--text); border-bottom-color:var(--ink); }
#v-termin:checked ~ #page-termin{ display:block; }
#v-termin:checked ~ header .navlinks label[for="v-termin"]{ color:var(--text); border-bottom-color:var(--ink); }
#v-kontakt:checked ~ #page-kontakt{ display:block; }
#v-kontakt:checked ~ header .navlinks label[for="v-kontakt"]{ color:var(--text); border-bottom-color:var(--ink); }
#v-none:checked ~ header .navlinks label[for="v-none"]{ color:var(--text); border-bottom-color:var(--ink); }
.vr:focus-visible ~ header .navlinks{ outline:none; }
.page-inner{ max-width:780px; margin-inline:auto; padding:calc(var(--header-h) + env(safe-area-inset-top,0px) + 1.2rem) var(--gutter) calc(4rem + env(safe-area-inset-bottom,0px)); }
.back{ display:flex; width:fit-content; align-items:center; gap:0.4rem; min-height:44px; margin-bottom:1.4rem; padding:0.5em 1em; border:1px solid var(--border); border-radius:8px; text-decoration:none; font-size:0.92rem; font-weight:600; }
.back:hover{ border-color:var(--ink); }
.page h2{ margin-top:0.6rem; }
.page .lede{ margin-top:0.9rem; }
.page .grid{ margin-top:1.8rem; }
.page img.me{ width:min(260px,62vw); aspect-ratio:3/4; object-fit:cover; object-position:top center; border-radius:14px; border:1px solid var(--border); box-shadow:var(--shadow); filter:grayscale(100%); margin-bottom:1.6rem; }
.navlinks .sep{ width:1px; height:18px; background:var(--border); }

.cta{ background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:clamp(1.8rem,4vw,2.8rem); display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }

@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }

/* ===== Farbe & Effekte ===== */
:root{
--c1:#6D28FF; --c2:#FF2E88; --c3:#00C2FF;
--grad:linear-gradient(120deg,var(--c1) 0%,var(--c2) 55%,var(--c3) 100%);
--tint:#F7F3FF;
--glow:0 18px 50px -18px rgba(109,40,255,0.55), 0 8px 24px -16px rgba(255,46,136,0.5);
}
::selection{ background:var(--c2); color:#fff; }
.alt{ background:var(--tint); }
.eyebrow{ color:var(--c1); font-weight:500; }
.eyebrow::before{ background:var(--grad); height:2px; }
.grad{ background:var(--grad); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shift 8s ease-in-out infinite; }
@keyframes shift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

/* Buttons */
.btn-primary{ background:var(--grad); background-size:200% 100%; border:none; color:#fff; box-shadow:0 8px 22px -10px rgba(109,40,255,0.7); transition:background-position 500ms, transform 160ms, box-shadow 200ms; position:relative; overflow:hidden; }
.btn-primary:hover{ background:var(--grad); background-size:200% 100%; background-position:100% 50%; transform:translateY(-2px); box-shadow:var(--glow); }
.btn-primary::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,0.45),transparent); transform:skewX(-20deg); animation:shine 3.8s ease-in-out infinite; }
@keyframes shine{ 0%,70%{ left:-60%; } 100%{ left:130%; } }
.btn-ghost{ border-color:var(--c1); color:var(--c1); transition:background 200ms, color 200ms, transform 160ms; }
.btn-ghost:hover{ background:var(--c1); color:#fff; transform:translateY(-2px); }

/* Kopfzeile */
header{ border-bottom:none; }
header::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--grad); background-size:200% 100%; animation:shift 8s ease-in-out infinite; }
#v-none:checked ~ header .navlinks label[for="v-none"],
#v-angebot:checked ~ header .navlinks label[for="v-angebot"],
#v-ki:checked ~ header .navlinks label[for="v-ki"],
#v-persoenlich:checked ~ header .navlinks label[for="v-persoenlich"],
#v-kontakt:checked ~ header .navlinks label[for="v-kontakt"]{ color:var(--c1); border-bottom-color:var(--c2); font-weight:600; }
.navlinks label:hover{ color:var(--c1); }

/* Hero */
.hero{ position:relative; overflow:hidden; isolation:isolate; }
.blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:0.55; z-index:-1; animation:float 14s ease-in-out infinite; }
.blob.b1{ width:420px; height:420px; background:var(--c1); top:-140px; right:-80px; }
.blob.b2{ width:340px; height:340px; background:var(--c2); top:120px; right:22%; animation-delay:-5s; opacity:0.4; }
.blob.b3{ width:300px; height:300px; background:var(--c3); bottom:-160px; left:-60px; animation-delay:-9s; opacity:0.4; }
@keyframes float{ 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(40px,-30px) scale(1.08); } 66%{ transform:translate(-30px,25px) scale(0.95); } }
.hero-grid{ position:absolute; inset:0; z-index:-1; background-image:linear-gradient(rgba(109,40,255,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(109,40,255,0.07) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse at 30% 30%,#000 20%,transparent 75%); mask-image:radial-gradient(ellipse at 30% 30%,#000 20%,transparent 75%); }
.hero h1{ max-width:18ch; }
.hero h1 .grad{ white-space:nowrap; }
.badge{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.45em 0.9em; border-radius:999px; background:rgba(255,255,255,0.75); border:1px solid rgba(109,40,255,0.25); font-size:0.85rem; font-weight:600; color:var(--c1); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--c2); box-shadow:0 0 0 0 rgba(255,46,136,0.6); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,46,136,0.6); } 70%{ box-shadow:0 0 0 10px rgba(255,46,136,0); } 100%{ box-shadow:0 0 0 0 rgba(255,46,136,0); } }

/* Laufband */
.band{ background:var(--grad); background-size:200% 100%; animation:shift 10s ease-in-out infinite; color:#fff; overflow:hidden; border-top:none; padding:0; }
.band-track{ display:flex; width:max-content; gap:2.2rem; padding-block:0.95rem; animation:marquee 26s linear infinite; font-family:var(--font-display); font-weight:600; font-size:1.05rem; white-space:nowrap; }
.band-track span::after{ content:"✦"; margin-left:2.2rem; opacity:0.8; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* Karten mit Leuchtrahmen */
.card{ position:relative; border:1px solid transparent; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(120deg,#ECE6FF,#FBE3EE,#E1F6FF) border-box; transition:transform 220ms, box-shadow 220ms; }
.card:hover{ transform:translateY(-5px); background:linear-gradient(#fff,#fff) padding-box, var(--grad) border-box; box-shadow:var(--glow); }
.card .num{ color:var(--c2); font-weight:500; }
.card:hover h3{ color:var(--c1); }
.price{ font-weight:600; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:1.9rem; }
.step{ border-top:3px solid transparent; border-image:var(--grad) 1; }
.step span{ color:var(--c2); font-weight:500; }
.faq summary::after{ color:var(--c2); }
.faq summary:hover{ color:var(--c1); }
.cta{ position:relative; overflow:hidden; background:var(--grad); background-size:200% 100%; animation:shift 10s ease-in-out infinite; border:none; color:#fff; box-shadow:var(--glow); }
.cta .eyebrow, .cta .lede{ color:rgba(255,255,255,0.9); }
.cta .eyebrow::before{ background:#fff; }
.cta .btn-primary{ background:#fff; color:var(--c1); box-shadow:0 10px 24px -12px rgba(0,0,0,0.35); }
.cta .btn-primary::after{ background:linear-gradient(100deg,transparent,rgba(109,40,255,0.18),transparent); }

/* Foto */
.page img.me{ filter:none; border:3px solid transparent; background:var(--grad) border-box; box-shadow:var(--glow); }

/* Formularfelder */
.field input:focus, .field textarea:focus, .field select:focus{ outline:2px solid var(--c1); border-color:var(--c1); box-shadow:0 0 0 5px rgba(109,40,255,0.12); }

/* Einblenden beim Scrollen (nur wenn JavaScript läuft) */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.2,1); }
.js .reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
.blob, .grad, .band, .band-track, .cta, header::after, .btn-primary::after, .badge .dot{ animation:none !important; }
.js .reveal{ opacity:1; transform:none; }
}

/* ===== Hero Banner (nach 21st.dev "Responsive Hero Banner") ===== */
:root{ --header-h:72px; --font-serif:'Instrument Serif',Georgia,serif; }
header{ position:fixed; top:0; left:0; right:0; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:none; padding-top:calc(8px + env(safe-area-inset-top,0px)); pointer-events:none; }
header::after{ display:none; }
.nav{ pointer-events:auto; height:56px; max-width:calc(var(--maxw) - 2*var(--gutter)); width:calc(100% - 2*var(--gutter)); margin-inline:auto; padding:0 8px 0 14px; gap:1rem;
background:rgba(255,255,255,0.72); -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%);
border:1px solid rgba(255,255,255,0.6); border-radius:999px; box-shadow:0 10px 30px -14px rgba(60,20,140,0.45), inset 0 0 0 1px rgba(109,40,255,0.08); }
.navlinks{ gap:0.2rem; }
.navlinks label{ padding:0.45rem 0.8rem; border-radius:999px; border-bottom:none !important; font-size:0.9rem; transition:background 160ms, color 160ms; }
.navlinks label:hover{ background:rgba(109,40,255,0.08); }
#v-none:checked ~ header .navlinks label[for="v-none"],
#v-angebot:checked ~ header .navlinks label[for="v-angebot"],
#v-ki:checked ~ header .navlinks label[for="v-ki"],
#v-persoenlich:checked ~ header .navlinks label[for="v-persoenlich"],
#v-kontakt:checked ~ header .navlinks label[for="v-kontakt"]{ background:rgba(109,40,255,0.12); color:var(--c1); }
.nav-cta{ flex:none; display:inline-flex; align-items:center; gap:0.35rem; padding:0.55rem 1rem; border-radius:999px; background:var(--grad); background-size:200% 100%; color:#fff; font-weight:600; font-size:0.9rem; box-shadow:0 6px 16px -8px rgba(109,40,255,0.8); transition:background-position 400ms, transform 160ms; }
.nav-cta:hover{ background-position:100% 50%; transform:translateY(-1px); }
.nav-cta svg, .hb-btn svg, .hb-link svg{ width:16px; height:16px; flex:none; }

.hb{ margin-top:0; padding:calc(var(--header-h) + env(safe-area-inset-top,0px) + clamp(4rem,10vw,7.5rem)) 0 clamp(3.5rem,7vw,5.5rem); min-height:100svh; display:flex; align-items:center; color:#fff; text-align:center; border-top:none; }
.hb-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; background:radial-gradient(120% 90% at 50% 0%, #7B3BFF 0%, #5A1FE0 38%, #3A0FA8 70%, #2A0A7E 100%); }
.hb-orb{ position:absolute; border-radius:50%; filter:blur(60px); animation:float 16s ease-in-out infinite; }
.hb-orb.o1{ width:55vmax; height:55vmax; background:#FF2E88; opacity:0.55; left:-18vmax; bottom:-26vmax; }
.hb-orb.o2{ width:45vmax; height:45vmax; background:#00C2FF; opacity:0.45; right:-16vmax; top:-14vmax; animation-delay:-6s; }
.hb-orb.o3{ width:30vmax; height:30vmax; background:#FF7AC6; opacity:0.35; right:10%; bottom:-10vmax; animation-delay:-11s; }
.hb-grain{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.06) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 25%,transparent 75%); mask-image:radial-gradient(ellipse at 50% 40%,#000 25%,transparent 75%); }
.hb-inner{ max-width:900px; }
.hb-badge{ display:inline-flex; align-items:center; gap:0.7rem; padding:0.4rem 0.9rem 0.4rem 0.4rem; border-radius:999px; background:rgba(255,255,255,0.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.22); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font-size:0.88rem; font-weight:500; color:rgba(255,255,255,0.92); max-width:100%; }
.hb-new{ background:#fff; color:var(--c1); font-weight:700; font-size:0.75rem; padding:0.2rem 0.6rem; border-radius:999px; flex:none; }
.hb-title{ font-family:var(--font-serif); font-weight:400; font-size:clamp(2.9rem,1.4rem + 6vw,5.6rem); line-height:1.02; letter-spacing:-0.01em; margin:1.5rem auto 0; max-width:none; }
.hb-title em{ font-style:italic; background:linear-gradient(90deg,#FFFFFF,#FFD1EA 40%,#9BE8FF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hb-text{ color:rgba(255,255,255,0.85); font-size:clamp(1rem,0.95rem + 0.3vw,1.15rem); max-width:40rem; margin:1.4rem auto 0; }
.hb-ctas{ display:flex; flex-wrap:wrap; gap:0.6rem 1rem; justify-content:center; align-items:center; margin-top:2.2rem; }
.hb-btn{ display:inline-flex; align-items:center; gap:0.5rem; min-height:48px; padding:0.8rem 1.4rem; border-radius:999px; background:#fff; color:var(--c1); font-weight:700; font-size:0.97rem; box-shadow:0 14px 30px -12px rgba(0,0,0,0.45); transition:transform 180ms, box-shadow 180ms; }
.hb-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(255,46,136,0.7); }
.hb-btn:hover svg{ transform:translateX(3px); } .hb-btn svg{ transition:transform 180ms; }
.hb-link{ display:inline-flex; align-items:center; gap:0.5rem; min-height:48px; padding:0.8rem 1.3rem; border-radius:999px; background:rgba(255,255,255,0.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.25); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff; font-weight:600; font-size:0.97rem; transition:background 180ms; }
.hb-link:hover{ background:rgba(255,255,255,0.2); }
.hb-tools{ margin-top:clamp(3.5rem,8vw,5rem); }
.hb-tools p{ font-size:0.85rem; color:rgba(255,255,255,0.7); }
.hb-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.6rem; margin-top:1rem; }
.hb-chips span{ padding:0.5rem 1rem; border-radius:999px; background:rgba(255,255,255,0.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18); font-size:0.88rem; font-weight:500; color:rgba(255,255,255,0.88); transition:background 180ms, transform 180ms; }
.hb-chips span:hover{ background:rgba(255,255,255,0.18); transform:translateY(-2px); }
@keyframes fadeSlideIn{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
.fs1,.fs2,.fs3,.fs4{ animation:fadeSlideIn 800ms cubic-bezier(.2,.7,.2,1) both; }
.fs2{ animation-delay:120ms; } .fs3{ animation-delay:240ms; } .fs4{ animation-delay:360ms; }
.hb-tools .fs1{ animation-delay:500ms; } .hb-tools .fs2{ animation-delay:620ms; }
@media (max-width:520px){ .hb-badge{ font-size:0.8rem; } .hb-ctas{ flex-direction:column; } .hb-btn, .hb-link{ width:100%; justify-content:center; } }
@media (prefers-reduced-motion:reduce){ .hb-orb, .fs1, .fs2, .fs3, .fs4{ animation:none !important; } }

/* ===== Farben aus der 21st.dev Komponente (dunkel, Zink + Weiß), auf allen Geräten gleich ===== */
:root{
color-scheme:dark only;
--bg:#09090b; --surface:#18181b; --surface-2:#111113; --tint:#0e0e11;
--text:#fafafa; --text-soft:#a1a1aa; --border:#27272a; --ink:#fafafa;
--c1:#fafafa; --c2:#e4e4e7; --c3:#a1a1aa;
--grad:linear-gradient(120deg,#ffffff 0%,#d4d4d8 50%,#ffffff 100%);
--glow:0 0 0 1px rgba(255,255,255,0.35), 0 20px 60px -20px rgba(255,255,255,0.35);
--shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 40px -24px rgba(0,0,0,0.8);
--font-body:'Inter',system-ui,sans-serif;
--font-display:'Instrument Serif',Georgia,serif;
}
html, body{ background:var(--bg); color:var(--text); }
::selection{ background:#fafafa; color:#09090b; }
h1,h2{ font-family:var(--font-display); font-weight:400; letter-spacing:-0.005em; }
h2{ font-size:clamp(2.1rem,1.3rem + 2.8vw,3.4rem); line-height:1.05; }
h3{ font-family:var(--font-body); font-weight:600; letter-spacing:-0.01em; }
h2 em, .hl{ font-style:italic; color:#fff; }
.alt{ background:var(--tint); }
section{ border-top:1px solid #18181b; }
.eyebrow{ color:#d4d4d8; }
.eyebrow::before{ background:#fafafa; height:1px; }
.lede{ color:var(--text-soft); }

/* Knöpfe: strahlend weiß, damit das Auge sofort hinfällt */
.btn-primary, .nav-cta, .hb-btn{ background:#fafafa !important; color:#09090b !important; box-shadow:0 0 0 1px rgba(255,255,255,0.6), 0 10px 40px -8px rgba(255,255,255,0.45); }
.btn-primary:hover, .nav-cta:hover, .hb-btn:hover{ background:#ffffff !important; box-shadow:0 0 0 1px #fff, 0 14px 60px -6px rgba(255,255,255,0.7); }
.btn-primary::after{ background:linear-gradient(100deg,transparent,rgba(9,9,11,0.12),transparent); }
.btn-ghost{ border-color:rgba(255,255,255,0.25); color:#fafafa; }
.btn-ghost:hover{ background:rgba(255,255,255,0.1); color:#fff; }

/* Menüleiste: dunkles Glas */
.nav{ background:rgba(24,24,27,0.6); border:none; box-shadow:0 0 0 1px rgba(255,255,255,0.1), 0 20px 40px -20px rgba(0,0,0,0.9); }
.brand{ color:#fafafa; }
.navlinks label{ color:rgba(255,255,255,0.72); }
.navlinks label:hover{ color:#fff; background:rgba(255,255,255,0.08); }
#v-none:checked ~ header .navlinks label[for="v-none"],
#v-angebot:checked ~ header .navlinks label[for="v-angebot"],
#v-ki:checked ~ header .navlinks label[for="v-ki"],
#v-persoenlich:checked ~ header .navlinks label[for="v-persoenlich"],
#v-kontakt:checked ~ header .navlinks label[for="v-kontakt"]{ background:rgba(255,255,255,0.14); color:#fff; }

/* Hero mit dem Bild aus der Komponente */
.hb-bg{ background:#09090b url("https://cdn.21st.dev/assets/mirror/a8/a8cf38f65f7315f95eba8c803c4a80a9d78cb2ea36fbfee49828396e4a0b9737.jpg") center/cover no-repeat; }
.hb-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(9,9,11,0.35) 0%,rgba(9,9,11,0.15) 40%,rgba(9,9,11,0.85) 88%,#09090b 100%); }
.hb-orb{ display:none; }
.hb-grain{ z-index:1; background-image:linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px); }
.hb-title{ text-shadow:0 4px 40px rgba(0,0,0,0.5); }
.hb-title em{ background:none; color:#fff; -webkit-background-clip:initial; background-clip:initial; }
.hb-new{ background:#fafafa; color:#09090b; }
.hb-btn{ color:#09090b !important; }
.band{ background:#fafafa; color:#09090b; animation:none; }
.band-track{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:1.35rem; }
.band-track span::after{ opacity:0.5; }

/* Karten: Glas + Lichtkegel, der der Maus folgt */
.card{ background:var(--surface) !important; border:none; box-shadow:0 0 0 1px rgba(255,255,255,0.08), var(--shadow); overflow:hidden; }
.card::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 250ms; background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,0.12), transparent 60%); }
.card:hover::before{ opacity:1; }
.card:hover{ box-shadow:0 0 0 1px rgba(255,255,255,0.35), 0 24px 60px -24px rgba(255,255,255,0.25); }
.card:hover h3{ color:#fff; }
.card h3{ color:#fafafa; }
.card p{ color:var(--text-soft); }
.card .num{ color:#fafafa; font-family:var(--font-display); font-size:2.2rem; line-height:1; }
.price{ background:none; -webkit-background-clip:initial; background-clip:initial; color:#fafafa; font-family:var(--font-display); font-weight:400; font-size:2.8rem; line-height:1; }

/* Hervorgehobene Preis-Karte: invertiert, sticht sofort heraus */
.card.featured{ background:#fafafa !important; box-shadow:0 0 0 1px #fff, 0 30px 80px -20px rgba(255,255,255,0.35); transform:translateY(-6px); }
.card.featured, .card.featured h3, .card.featured .price, .card.featured p, .card.featured .eyebrow{ color:#09090b !important; }
.card.featured .eyebrow::before{ background:#09090b; }
.card.featured::before{ background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%), rgba(0,0,0,0.06), transparent 60%); }
.pop{ position:absolute; top:1rem; right:1rem; background:#09090b; color:#fafafa; font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:0.3rem 0.65rem; border-radius:999px; }

/* Ablauf-Nummern groß */
.step{ border-image:none; border-top:1px solid rgba(255,255,255,0.2); }
.step span{ font-family:var(--font-display); font-size:2.4rem; color:#fafafa; line-height:1; margin-bottom:0.7rem; }

/* Aufruf-Box: weiß auf dunkel = Blickfang */
.cta{ background:#fafafa; animation:none; color:#09090b; box-shadow:0 30px 90px -30px rgba(255,255,255,0.4); }
.cta h2{ color:#09090b; }
.cta .eyebrow, .cta .lede{ color:#3f3f46; }
.cta .eyebrow::before{ background:#09090b; }
.cta .btn-primary{ background:#09090b !important; color:#fafafa !important; box-shadow:0 10px 30px -10px rgba(0,0,0,0.6); }

/* FAQ, Formulare, Seiten, Foto */
.faq details{ border-bottom-color:#27272a; }
.faq summary::after{ color:#fafafa; }
.faq summary{ color:#fafafa; }
.field input, .field textarea, .field select{ background:#111113; color:#fafafa; border-color:#3f3f46; }
.field input::placeholder, .field textarea::placeholder{ color:#71717a; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:2px solid #fafafa; border-color:#fafafa; box-shadow:0 0 0 5px rgba(255,255,255,0.08); }
.field select{ background-image:linear-gradient(45deg,transparent 50%,#fafafa 50%),linear-gradient(135deg,#fafafa 50%,transparent 50%); }
.field input[type="date"], .field input[type="time"]{ color-scheme:dark; }
.back{ border-color:#3f3f46; color:#fafafa; }
.back:hover{ border-color:#fafafa; }
.page img.me{ background:#fafafa; border-width:2px; box-shadow:0 30px 80px -30px rgba(255,255,255,0.35); }
.side .card a{ color:#fafafa; }
.tag{ background:#18181b; border-color:#27272a; color:#a1a1aa; }
footer{ border-top-color:#18181b; }
.foot-note{ border-top-color:#18181b; }

/* ===== Mehr Effekte ===== */
/* Funkelnde Sterne, die langsam nach oben treiben */
.hb-stars{ position:absolute; top:0; left:0; width:1px; height:1px; background:transparent; z-index:1; animation:drift 120s linear infinite; }
.hb-stars::after{ content:""; position:absolute; top:1400px; width:inherit; height:inherit; box-shadow:inherit; }
.hb-stars.s1{  animation-duration:140s; }
.hb-stars.s2{ width:2px; height:2px;  animation-duration:100s; }
.hb-stars.s3{ width:3px; height:3px; border-radius:50%;  animation:drift 70s linear infinite, twinkle 3.5s ease-in-out infinite; }
@keyframes drift{ from{ transform:translateY(0); } to{ transform:translateY(-1400px); } }
@keyframes twinkle{ 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }

/* Lichtkegel im Hero, folgt der Maus (am Handy schwebt er von selbst) */
.hb-spot{ position:absolute; z-index:1; width:700px; height:700px; left:var(--sx,50%); top:var(--sy,35%); transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(255,255,255,0.13), transparent 60%); pointer-events:none; transition:left 120ms linear, top 120ms linear; }
@media (pointer:coarse){ .hb-spot{ animation:roam 12s ease-in-out infinite; } }
@keyframes roam{ 0%,100%{ left:30%; top:30%; } 50%{ left:70%; top:55%; } }
.hb-bg{ transform:translateY(var(--par,0px)) scale(1.08); will-change:transform; }

/* Überschrift: Wort für Wort aus der Unschärfe */
.words .w{ display:inline-block; opacity:0; filter:blur(14px); transform:translateY(0.35em); animation:wordIn 900ms cubic-bezier(.2,.7,.2,1) forwards; }
.words .w:nth-child(1){ animation-delay:150ms; } .words .w:nth-child(2){ animation-delay:280ms; }
.words em .w:nth-child(1){ animation-delay:450ms; } .words em .w:nth-child(2){ animation-delay:560ms; } .words em .w:nth-child(3){ animation-delay:670ms; } .words em .w:nth-child(4){ animation-delay:780ms; }
@keyframes wordIn{ to{ opacity:1; filter:blur(0); transform:none; } }
.hb-title em{ color:#e4e4e7; }
.hb-title em .w{ text-shadow:0 0 30px rgba(255,255,255,0.35); }
@keyframes sheen{ from{ background-position:100% 0; } to{ background-position:-150% 0; } }

/* Neu-Abzeichen glänzt */
.hb-new{ position:relative; overflow:hidden; }
.hb-new::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(9,9,11,0.35),transparent 70%); transform:translateX(-120%); animation:badgeShine 3s ease-in-out infinite 1.2s; }
@keyframes badgeShine{ 0%{ transform:translateX(-120%); } 50%,100%{ transform:translateX(120%); } }

/* Scroll-Hinweis */
.hb-scroll{ width:26px; height:42px; border-radius:14px; border:1.5px solid rgba(255,255,255,0.4); margin:2.6rem auto 0; position:relative; }
.hb-scroll span{ position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:#fff; animation:wheel 1.8s ease-in-out infinite; }
@keyframes wheel{ 0%{ opacity:0; transform:translateY(0); } 30%{ opacity:1; } 100%{ opacity:0; transform:translateY(14px); } }

/* Laufender Lichtstrahl um die wichtigsten Elemente */
@property --ang{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.card.featured, .cta, .nav-cta{ isolation:isolate; }
.card.featured::after, .cta::after{ content:""; position:absolute; inset:-2px; z-index:-1; border-radius:inherit; padding:2px; background:conic-gradient(from var(--ang), transparent 0deg, transparent 250deg, #ffffff 320deg, transparent 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:spin 4s linear infinite; }
.card.featured, .cta{ overflow:visible; }
.cta::after{ inset:-3px; padding:3px; }
@keyframes spin{ to{ --ang:360deg; } }
.card.featured{ position:relative; }

/* Karten neigen sich in 3D zur Maus */
@media (pointer:fine){
.grid, .price-grid, .problem-grid{ perspective:1200px; }
.card{ transform-style:preserve-3d; transition:transform 200ms ease-out, box-shadow 250ms; }
.card.tilt{ transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px); }
.card.featured.tilt{ transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-10px); }
}

/* Überschriften blenden mit Unschärfe ein */
.js .section-head.reveal{ filter:blur(10px); transition:opacity 900ms ease, transform 900ms cubic-bezier(.2,.7,.2,1), filter 900ms ease; }
.js .section-head.reveal.in{ filter:none; }
.js .card.reveal{ transform:translateY(30px) scale(0.97); }
.js .card.reveal.in{ transform:none; }

/* Große Zahlen/Preise zählen hoch: siehe Script. Unterstreichung der kursiven Wörter */
h2 em{ background-image:linear-gradient(#fafafa,#fafafa); background-size:0% 1px; background-position:0 92%; background-repeat:no-repeat; transition:background-size 1200ms cubic-bezier(.2,.7,.2,1) 300ms; }
.in h2 em, .page h2 em{ background-size:100% 1px; }

/* Knöpfe pulsieren leicht */
.hb-btn{ animation:fadeSlideIn 800ms cubic-bezier(.2,.7,.2,1) both 360ms, glowPulse 2.8s ease-in-out infinite 1.4s; }
@keyframes glowPulse{ 0%,100%{ box-shadow:0 0 0 1px rgba(255,255,255,0.6), 0 10px 40px -8px rgba(255,255,255,0.45); } 50%{ box-shadow:0 0 0 1px #fff, 0 10px 60px -2px rgba(255,255,255,0.75); } }
.magnet{ transition:transform 180ms ease-out; }

/* Fortschrittslinie am unteren Rand der Menüleiste */
.nav{ position:relative; overflow:hidden; }
.nav::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:var(--prog,0%); background:linear-gradient(90deg,transparent,#fafafa); }

@media (prefers-reduced-motion:reduce){
.hb-stars, .hb-spot, .words .w, .hb-title em, .hb-new::after, .hb-scroll span, .card.featured::after, .cta::after, .hb-btn{ animation:none !important; }
.words .w{ opacity:1; filter:none; transform:none; }
}

/* ===== Noch mehr Effekte ===== */
/* Intro */
.intro{ position:fixed; inset:0; z-index:1000; background:#09090b; display:grid; place-items:center; animation:introOut 700ms cubic-bezier(.7,0,.2,1) 1300ms forwards; }
.intro-inner{ display:flex; align-items:center; gap:0.8rem; position:relative; padding-bottom:14px; }
.intro svg{ width:44px; height:44px; animation:introPop 700ms cubic-bezier(.2,1.4,.4,1) both; }
.intro span{ font-family:var(--font-display); font-size:2rem; color:#fafafa; clip-path:inset(0 100% 0 0); animation:introType 700ms cubic-bezier(.2,.7,.2,1) 250ms forwards; }
.intro i{ position:absolute; left:0; bottom:0; height:2px; width:100%; background:#fafafa; transform-origin:left; transform:scaleX(0); animation:introBar 900ms cubic-bezier(.2,.7,.2,1) 300ms forwards; }
@keyframes introPop{ from{ transform:scale(0) rotate(-90deg); } to{ transform:none; } }
@keyframes introType{ to{ clip-path:inset(0 0 0 0); } }
@keyframes introBar{ to{ transform:scaleX(1); } }
@keyframes introOut{ to{ clip-path:inset(0 0 100% 0); visibility:hidden; } }
.hb .fs1, .hb .fs3, .hb .fs4, .hb-tools .fs1, .hb-tools .fs2{ animation-delay:1500ms; }
.hb .fs3{ animation-delay:1650ms; } .hb .fs4{ animation-delay:1800ms; } .hb-tools .fs1{ animation-delay:1950ms; } .hb-tools .fs2{ animation-delay:2050ms; }
.words .w:nth-child(1){ animation-delay:1550ms; } .words .w:nth-child(2){ animation-delay:1680ms; }
.words em .w:nth-child(1){ animation-delay:1850ms; } .words em .w:nth-child(2){ animation-delay:1960ms; } .words em .w:nth-child(3){ animation-delay:2070ms; } .words em .w:nth-child(4){ animation-delay:2180ms; }
.hb-btn{ animation:fadeSlideIn 800ms cubic-bezier(.2,.7,.2,1) both 1800ms, glowPulse 2.8s ease-in-out infinite 2.8s; }

/* Eigener Mauszeiger (nur am Computer) */
.cursor, .cursor-dot{ display:none; }
@media (pointer:fine){
.cursor{ display:block; position:fixed; z-index:999; top:0; left:0; width:38px; height:38px; margin:-19px 0 0 -19px; border:1.5px solid #fff; border-radius:50%; pointer-events:none; mix-blend-mode:difference; transition:width 200ms, height 200ms, margin 200ms, background 200ms; will-change:transform; }
.cursor-dot{ display:block; position:fixed; z-index:999; top:0; left:0; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:#fff; pointer-events:none; mix-blend-mode:difference; will-change:transform; }
.cursor.big{ width:70px; height:70px; margin:-35px 0 0 -35px; background:#fff; }
}

/* Feines Filmkorn über allem */
.grain{ position:fixed; inset:-50%; z-index:998; pointer-events:none; opacity:0.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grainMove 1s steps(6) infinite; }
@keyframes grainMove{ 0%{ transform:translate(0,0); } 20%{ transform:translate(-5%,3%); } 40%{ transform:translate(4%,-6%); } 60%{ transform:translate(-3%,5%); } 80%{ transform:translate(6%,2%); } 100%{ transform:translate(0,0); } }

/* Sternschnuppen */
.shoot{ position:absolute; z-index:1; top:0; left:0; width:160px; height:1.5px; background:linear-gradient(90deg,#fff,transparent); transform:rotate(-35deg); opacity:0; border-radius:2px; filter:drop-shadow(0 0 6px #fff); }
.shoot.t1{ animation:shoot 7s ease-in 2.5s infinite; --x0:75vw; --y0:5vh; }
.shoot.t2{ animation:shoot 9s ease-in 5.5s infinite; --x0:95vw; --y0:18vh; }
.shoot.t3{ animation:shoot 11s ease-in 8s infinite; --x0:55vw; --y0:2vh; }
@keyframes shoot{ 0%{ opacity:0; transform:translate(var(--x0),var(--y0)) rotate(145deg) scaleX(0.3); } 3%{ opacity:1; } 12%{ opacity:0; transform:translate(calc(var(--x0) - 45vw),calc(var(--y0) + 32vh)) rotate(145deg) scaleX(1); } 100%{ opacity:0; transform:translate(calc(var(--x0) - 45vw),calc(var(--y0) + 32vh)) rotate(145deg); } }

/* Zweites Laufband */
.band{ display:flex; flex-direction:column; }
.band-track.rev{ animation-direction:reverse; animation-duration:34s; background:#09090b; color:#fafafa; width:max-content; min-width:100%; border-top:1px solid #27272a; }
.band-track.rev span::after{ opacity:0.4; }

/* Lichtrand an Karten, der der Maus folgt */
.card{ --bx:50%; --by:50%; }
.card > *{ position:relative; z-index:1; }
.card > .pop{ position:absolute; z-index:2; }
@media (pointer:fine){
.card:not(.featured):hover{ box-shadow:0 0 0 1px rgba(255,255,255,0.12), 0 24px 60px -24px rgba(255,255,255,0.25); }
.card:not(.featured)::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.9), transparent 70%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity 250ms; }
.card:not(.featured):hover::after{ opacity:1; }
}

/* Klick-Welle auf Knöpfen */
.ripple{ position:absolute; border-radius:50%; transform:scale(0); animation:ripple 650ms ease-out forwards; background:currentColor; opacity:0.25; pointer-events:none; }
@keyframes ripple{ to{ transform:scale(4); opacity:0; } }
.hb-btn, .hb-link, .nav-cta, .btn{ position:relative; overflow:hidden; }

/* Eigene Seiten gleiten herein */
.page{ animation:none; }
#v-angebot:checked ~ #page-angebot, #v-ki:checked ~ #page-ki, #v-persoenlich:checked ~ #page-persoenlich, #v-termin:checked ~ #page-termin, #v-kontakt:checked ~ #page-kontakt{ animation:pageIn 600ms cubic-bezier(.2,.7,.2,1); }
@keyframes pageIn{ from{ opacity:0; clip-path:circle(0% at 50% 0%); } to{ opacity:1; clip-path:circle(150% at 50% 0%); } }
.page .page-inner > *{ animation:fadeSlideIn 700ms cubic-bezier(.2,.7,.2,1) both; }
.page .page-inner > *:nth-child(2){ animation-delay:80ms; } .page .page-inner > *:nth-child(3){ animation-delay:160ms; } .page .page-inner > *:nth-child(4){ animation-delay:240ms; } .page .page-inner > *:nth-child(5){ animation-delay:320ms; } .page .page-inner > *:nth-child(n+6){ animation-delay:400ms; }

/* Foto schwebt und glänzt */
.page img.me{ animation:fadeSlideIn 700ms both, hover 6s ease-in-out infinite 800ms; }
@keyframes hover{ 0%,100%{ transform:translateY(0) rotate(-1deg); } 50%{ transform:translateY(-10px) rotate(1deg); } }

/* FAQ öffnet weich */
.faq details[open] .a{ animation:fadeSlideIn 500ms cubic-bezier(.2,.7,.2,1); }
.faq summary::after{ transition:transform 300ms; }
.faq details[open] summary::after{ transform:rotate(180deg); }

/* Leuchtender Schein in den dunklen Abschnitten */
.alt{ position:relative; overflow:hidden; isolation:isolate; }
.alt::before{ content:""; position:absolute; z-index:-1; width:60vmax; height:60vmax; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.07), transparent 60%); top:-20vmax; right:-20vmax; animation:float 18s ease-in-out infinite; }

/* Text-Entschlüsselung der kleinen Überschriften: siehe Script */
.eyebrow{ font-variant-ligatures:none; }

@media (prefers-reduced-motion:reduce){
.intro{ display:none; }
.grain, .shoot, .band-track.rev, .page, .page .page-inner > *, .page img.me, .alt::before{ animation:none !important; }
.hb .fs1, .hb .fs3, .hb .fs4, .hb-tools .fs1, .hb-tools .fs2{ animation:none !important; }
}

/* ===== Inhalte, die ins Auge springen ===== */
/* Markierungen wie mit dem Textmarker */
mark{ background:linear-gradient(#fafafa,#fafafa) no-repeat 0 100% / 0% 100%; color:inherit; padding:0 0.15em; border-radius:3px; transition:background-size 900ms cubic-bezier(.2,.7,.2,1) 350ms, color 400ms ease 650ms; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.in mark, .page mark, details[open] mark, .no-js mark{ background-size:100% 100%; color:#09090b; }
details[open] mark{ background-image:linear-gradient(#09090b,#09090b); color:#fafafa; }

/* Texte leuchten Wort für Wort beim Scrollen auf */
.lede .wd{ opacity:0.22; transition:opacity 350ms, color 350ms, text-shadow 350ms; }
.lede .wd.lit{ opacity:1; color:#fafafa; }
.section-head .lede{ font-size:clamp(1.1rem,1rem + 0.5vw,1.35rem); line-height:1.5; max-width:34em; }
h2{ font-size:clamp(2.4rem,1.3rem + 3.8vw,4.2rem); }

/* Fakten-Leiste */
.facts{ padding-block:clamp(2.5rem,5vw,4rem); background:#09090b; }
.facts-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem 1rem; }
@media (min-width:820px){ .facts-grid{ grid-template-columns:repeat(4,1fr); } }
.fact{ text-align:center; padding:1.2rem 0.6rem; border-radius:16px; background:linear-gradient(180deg,#18181b,#0e0e11); box-shadow:0 0 0 1px rgba(255,255,255,0.08); transition:transform 250ms, box-shadow 250ms; }
.fact:hover{ transform:translateY(-6px); box-shadow:0 0 0 1px rgba(255,255,255,0.4), 0 20px 50px -20px rgba(255,255,255,0.35); }
.fact b{ display:block; font-family:var(--font-display); font-weight:400; font-size:clamp(3rem,2rem + 4vw,5rem); line-height:1; color:#fafafa; text-shadow:0 0 40px rgba(255,255,255,0.35); }
.fact b i{ font-style:normal; }
.fact span{ display:block; margin-top:0.5rem; font-size:0.92rem; color:var(--text-soft); }

/* Große, umrandete Nummern */
.problem-grid .num{ font-family:var(--font-display); font-size:4.5rem; line-height:0.9; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,0.55); transition:color 300ms, -webkit-text-stroke-color 300ms; }
.problem-grid .card:hover .num{ color:#fafafa; -webkit-text-stroke-color:#fafafa; }
.problem-grid .big h3{ font-size:clamp(1.5rem,1.2rem + 1vw,2rem); }
.step span{ font-size:clamp(3.5rem,2.5rem + 3vw,5rem); color:transparent; -webkit-text-stroke:1px rgba(255,255,255,0.6); transition:color 300ms; }
.step:hover span{ color:#fafafa; }
.step{ transition:transform 250ms; } .step:hover{ transform:translateY(-6px); }
.step h3{ font-size:1.2rem; }

/* Icons in leuchtenden Kreisen */
.ico{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(180deg,#27272a,#18181b); box-shadow:0 0 0 1px rgba(255,255,255,0.12), 0 10px 30px -12px rgba(255,255,255,0.3); color:#fafafa; margin-bottom:0.4rem; transition:transform 300ms cubic-bezier(.2,1.4,.4,1), background 300ms, color 300ms; }
.ico svg{ width:24px; height:24px; }
.card:hover .ico{ transform:scale(1.12) rotate(-6deg); background:#fafafa; color:#09090b; }
.card h3{ font-size:1.18rem; }

/* FAQ als große Karten */
.faq{ max-width:900px; display:grid; gap:0.9rem; counter-reset:q; }
.faq details{ counter-increment:q; background:#18181b; border:none; border-radius:18px; padding:0.4rem 1.4rem; box-shadow:0 0 0 1px rgba(255,255,255,0.08); transition:background 350ms, box-shadow 300ms, transform 300ms; }
.js .faq details.reveal.in:hover, .faq details:hover{ transform:translateX(8px); box-shadow:0 0 0 1px rgba(255,255,255,0.4), 0 20px 50px -24px rgba(255,255,255,0.3); }
.faq summary{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.3rem,1.1rem + 0.8vw,1.75rem); line-height:1.2; padding-block:0.9rem; gap:1.2rem; color:#fafafa; justify-content:flex-start; }
.faq summary::before{ content:counter(q, decimal-leading-zero); font-family:var(--font-mono); font-size:0.85rem; color:var(--text-soft); flex:none; width:2rem; }
.faq summary::after{ content:"+"; margin-left:auto; width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:50%; background:#fafafa; color:#09090b; font-family:var(--font-body); font-size:1.4rem; font-weight:500; line-height:1; transition:transform 400ms cubic-bezier(.2,1.4,.4,1), background 300ms, color 300ms; }
.faq details[open]{ background:#fafafa; box-shadow:0 0 0 1px #fff, 0 30px 80px -30px rgba(255,255,255,0.45); }
.faq details[open] summary{ color:#09090b; }
.faq details[open] summary::before{ color:#71717a; }
.faq details[open] summary::after{ content:"+"; transform:rotate(135deg); background:#09090b; color:#fafafa; }
.faq .a{ color:#3f3f46; font-size:1.05rem; padding:0 0 1.2rem 3.2rem; margin-top:0; max-width:none; }
@media (max-width:520px){ .faq .a{ padding-left:0; } .faq summary::before{ display:none; } }

/* Allgemeiner Fließtext etwas heller und größer */
.card p{ font-size:1rem; line-height:1.6; }
.card:hover p{ color:#d4d4d8; }
.card.featured:hover p{ color:#09090b; }
@media (prefers-reduced-motion:reduce){ .lede .wd{ opacity:1; } mark{ background-size:100% 100%; color:#09090b; transition:none; } }

/* ===== Sprachassistent (ElevenLabs) ===== */
#v-impressum:checked ~ #page-impressum, #v-datenschutz:checked ~ #page-datenschutz{ display:block; animation:pageIn 600ms cubic-bezier(.2,.7,.2,1); }
.legal h3{ font-family:var(--font-body); font-size:1.05rem; font-weight:600; margin-top:1.8rem; color:#fafafa; }
.legal p, .legal li{ color:var(--text-soft); line-height:1.7; font-size:0.98rem; }
.legal ul{ padding-left:1.2rem; }
.legal a{ color:#fafafa; text-decoration:underline; text-underline-offset:3px; }
.foot .legal-links label{ color:var(--text-soft); }

.voice-demo{ margin-top:3rem; position:relative; border-radius:24px; padding:clamp(1.6rem,4vw,2.6rem); background:radial-gradient(120% 140% at 0% 0%,#27272a 0%,#111113 55%,#09090b 100%); box-shadow:0 0 0 1px rgba(255,255,255,0.1), 0 40px 90px -40px rgba(255,255,255,0.35); overflow:hidden; display:grid; gap:2rem; align-items:center; }
@media (min-width:760px){ .voice-demo{ grid-template-columns:1.2fr 1fr; } }
.voice-demo::before{ content:""; position:absolute; inset:-40%; background:conic-gradient(from var(--ang,0deg),transparent 0 70%,rgba(255,255,255,0.18) 80%,transparent 90%); animation:spin 9s linear infinite; pointer-events:none; }
.voice-demo > *{ position:relative; }
.voice-demo h2{ margin-top:0.5rem; }
.voice-demo .lede{ margin-top:0.8rem; }
.vd-list{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:0.55rem; }
.vd-list li{ display:flex; gap:0.6rem; align-items:flex-start; color:#d4d4d8; }
.vd-list li::before{ content:""; flex:none; width:8px; height:8px; margin-top:0.55em; border-radius:50%; background:#fafafa; box-shadow:0 0 12px #fff; }
.vd-stage{ display:grid; place-items:center; gap:1.4rem; text-align:center; }
.orb{ position:relative; width:min(220px,60vw); aspect-ratio:1; border-radius:50%; border:none; cursor:pointer; background:radial-gradient(circle at 35% 30%,#ffffff 0%,#d4d4d8 22%,#52525b 60%,#18181b 100%); box-shadow:0 0 0 1px rgba(255,255,255,0.4), 0 0 80px -10px rgba(255,255,255,0.55); animation:orbFloat 5s ease-in-out infinite; transition:transform 300ms cubic-bezier(.2,1.4,.4,1); display:grid; place-items:center; color:#09090b; }
.orb:hover{ transform:scale(1.06); }
.orb::before, .orb::after{ content:""; position:absolute; inset:-14px; border-radius:50%; border:1px solid rgba(255,255,255,0.35); animation:ring 2.8s ease-out infinite; }
.orb::after{ animation-delay:1.4s; }
.orb svg{ width:56px; height:56px; filter:drop-shadow(0 2px 6px rgba(255,255,255,0.6)); }
.bars{ display:flex; gap:5px; align-items:center; height:34px; }
.bars i{ width:5px; border-radius:3px; background:#fafafa; animation:bar 1.1s ease-in-out infinite; }
.bars i:nth-child(2){ animation-delay:.15s } .bars i:nth-child(3){ animation-delay:.3s } .bars i:nth-child(4){ animation-delay:.45s } .bars i:nth-child(5){ animation-delay:.6s } .bars i:nth-child(6){ animation-delay:.75s } .bars i:nth-child(7){ animation-delay:.9s }
.vd-note{ font-size:0.82rem; color:var(--text-soft); max-width:34ch; }
.vd-note label{ text-decoration:underline; color:#d4d4d8; }
@keyframes orbFloat{ 0%,100%{ translate:0 0 } 50%{ translate:0 -10px } }
@keyframes ring{ from{ transform:scale(1); opacity:.8 } to{ transform:scale(1.35); opacity:0 } }
@keyframes bar{ 0%,100%{ height:20% } 50%{ height:100% } }

.vc-fab{ position:fixed; z-index:60; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); display:inline-flex; align-items:center; gap:0.6rem; padding:0.55rem 1.1rem 0.55rem 0.55rem; border-radius:999px; border:none; cursor:pointer; background:#fafafa; color:#09090b; font:600 0.95rem var(--font-body); box-shadow:0 0 0 1px rgba(255,255,255,0.6), 0 18px 50px -12px rgba(255,255,255,0.55); transition:transform 250ms cubic-bezier(.2,1.4,.4,1); }
.vc-fab:hover{ transform:translateY(-3px) scale(1.03); }
.vc-fab .dot{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#09090b; color:#fafafa; position:relative; }
.vc-fab .dot::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid #09090b; animation:ring 2.2s ease-out infinite; }
.vc-fab svg{ width:18px; height:18px; }
.vc-fab[hidden]{ display:none; }
@media (max-width:420px){ .vc-fab .txt{ display:none; } .vc-fab{ padding:0.5rem; } }

.vc-consent{ position:fixed; z-index:1001; inset:0; display:none; place-items:center; padding:16px; background:rgba(9,9,11,0.7); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.vc-consent.open{ display:grid; }
.vc-box{ width:min(460px,100%); background:#18181b; border-radius:20px; padding:1.6rem; box-shadow:0 0 0 1px rgba(255,255,255,0.12), 0 40px 90px -30px rgba(0,0,0,0.9); display:grid; gap:0.9rem; }
.vc-box h3{ font-size:1.35rem; color:#fafafa; }
.vc-box p{ color:#a1a1aa; font-size:0.95rem; line-height:1.6; }
.vc-box label{ text-decoration:underline; color:#fafafa; }
.vc-actions{ display:flex; gap:0.6rem; flex-wrap:wrap; justify-content:flex-end; margin-top:0.4rem; }
.vc-actions button{ font:600 0.95rem var(--font-body); padding:0.75em 1.3em; border-radius:999px; cursor:pointer; border:1px solid #3f3f46; background:transparent; color:#fafafa; }
.vc-actions .yes{ background:#fafafa; color:#09090b; border-color:#fafafa; }
@media (prefers-reduced-motion:reduce){ .orb, .orb::before, .orb::after, .bars i, .voice-demo::before, .vc-fab .dot::after{ animation:none; } }

/* ===== Wichtige Texte strahlen ===== */
/* Überschriften: hell mit Leuchten */
h2{ color:#fff; text-shadow:0 0 18px rgba(255,255,255,0.35), 0 0 48px rgba(255,255,255,0.25); }
.cta h2{ text-shadow:none; }
/* Kursive Schlüsselwörter pulsieren hell */
h2 em{ animation:emGlow 3.2s ease-in-out infinite; }
@keyframes emGlow{
  0%,100%{ text-shadow:0 0 16px rgba(255,255,255,0.6), 0 0 40px rgba(255,255,255,0.3); }
  50%{ text-shadow:0 0 24px rgba(255,255,255,1), 0 0 70px rgba(255,255,255,0.7), 0 0 120px rgba(255,255,255,0.35); }
}
.cta h2 em{ animation:none; }

/* Einleitungen und Hero-Text heller */
.lede{ color:#e4e4e7; }
.lede .wd{ opacity:0.35; }
.lede .wd.lit{ text-shadow:0 0 18px rgba(255,255,255,0.35); }
.hb-text{ color:#f4f4f5; text-shadow:0 2px 24px rgba(0,0,0,0.6); }
.hb-badge{ box-shadow:inset 0 0 0 1px rgba(255,255,255,0.4), 0 0 30px -6px rgba(255,255,255,0.35); }

/* Kleine Überschriften leuchten */
.eyebrow{ color:#fff; font-weight:600; text-shadow:0 0 10px rgba(255,255,255,0.8), 0 0 24px rgba(255,255,255,0.4); }
.eyebrow::before{ box-shadow:0 0 8px #fff; }
.cta .eyebrow, .card.featured .eyebrow{ text-shadow:none; }
.cta .eyebrow::before, .card.featured .eyebrow::before{ box-shadow:none; }

/* Karten-Titel und Preise */
.card h3{ color:#fff; text-shadow:0 0 14px rgba(255,255,255,0.4); }
.price{ text-shadow:0 0 30px rgba(255,255,255,0.45); }
.card.featured h3, .card.featured .price{ text-shadow:none; }

/* Markierungen strahlen, sobald sie erscheinen */
.in mark, .page mark{ box-shadow:0 0 26px rgba(255,255,255,0.45); }
details[open] mark{ box-shadow:none; }

/* Zahlen in der Fakten-Leiste noch heller */
.fact b{ text-shadow:0 0 30px rgba(255,255,255,0.6), 0 0 70px rgba(255,255,255,0.3); }

/* Sprach-Button: sanftes Leuchten, damit er auffällt */
.vc-fab{ animation:fabGlow 2.8s ease-in-out infinite; }
@keyframes fabGlow{
  0%,100%{ box-shadow:0 0 0 1px rgba(255,255,255,0.6), 0 18px 50px -12px rgba(255,255,255,0.55); }
  50%{ box-shadow:0 0 0 1px #fff, 0 0 46px 4px rgba(255,255,255,0.55); }
}

@media (prefers-reduced-motion:reduce){
  h2 em, .vc-fab{ animation:none; }
}

/* ===== Blickfang-Effekte (Stufe 2) ===== */
/* Schlüsselwörter: Chrom-Glanz, der durchläuft */
h2 em, .hb-title em .w{
  background:linear-gradient(110deg,#a1a1aa 0%,#ffffff 15%,#e4e4e7 30%,#ffffff 45%,#a1a1aa 60%,#ffffff 75%,#d4d4d8 100%);
  background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent !important;
  text-shadow:none !important; padding-right:0.06em;
}
h2 em{ animation:chrome 5s linear infinite; filter:drop-shadow(0 0 12px rgba(255,255,255,0.6)) drop-shadow(0 0 36px rgba(255,255,255,0.3)); }
.hb-title em .w{ animation:wordIn 900ms cubic-bezier(.2,.7,.2,1) forwards, chrome 5s linear infinite; }
.hb-title em{ filter:drop-shadow(0 0 14px rgba(255,255,255,0.55)) drop-shadow(0 0 44px rgba(255,255,255,0.3)); }
@keyframes chrome{ from{ background-position:100% 0; } to{ background-position:-200% 0; } }
.cta h2 em{ background:none; color:#09090b !important; filter:none; animation:none; }

/* Hero-Überschrift strahlt */
.hb-title{ text-shadow:0 0 30px rgba(255,255,255,0.45), 0 0 80px rgba(255,255,255,0.2); }

/* Kleine Überschriften als leuchtende Pillen */
main .eyebrow, .page .eyebrow:not(.card .eyebrow){
  padding:0.45em 0.95em; border-radius:999px; background:rgba(255,255,255,0.06);
  box-shadow:0 0 0 1px rgba(255,255,255,0.55), 0 0 22px rgba(255,255,255,0.35), inset 0 0 14px rgba(255,255,255,0.12);
  animation:pillGlow 2.6s ease-in-out infinite;
}
main .eyebrow::before, .page .eyebrow:not(.card .eyebrow)::before{ width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 10px #fff, 0 0 20px #fff; }
@keyframes pillGlow{ 0%,100%{ box-shadow:0 0 0 1px rgba(255,255,255,0.45), 0 0 16px rgba(255,255,255,0.25), inset 0 0 12px rgba(255,255,255,0.1); } 50%{ box-shadow:0 0 0 1px #fff, 0 0 34px rgba(255,255,255,0.6), inset 0 0 18px rgba(255,255,255,0.2); } }
.cta .eyebrow, main .card .eyebrow{ padding:0; background:none; box-shadow:none !important; animation:none; }

/* Alle Karten: umlaufender Lichtrand, immer sichtbar */
.card:not(.featured)::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; z-index:2;
  background:conic-gradient(from var(--ang), transparent 0deg, transparent 220deg, rgba(255,255,255,0.95) 300deg, transparent 360deg) !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:1 !important; animation:spin 6s linear infinite;
}
.card:nth-child(2)::after{ animation-delay:-2s; } .card:nth-child(3)::after{ animation-delay:-4s; }
.card:nth-child(4)::after{ animation-delay:-1s; } .card:nth-child(5)::after{ animation-delay:-3s; } .card:nth-child(6)::after{ animation-delay:-5s; }
.card{ box-shadow:0 0 0 1px rgba(255,255,255,0.12), 0 0 40px -12px rgba(255,255,255,0.25) !important; }

/* Markierungen: leuchten und pulsieren */
.in mark, .page mark{ animation:markPulse 2.4s ease-in-out infinite 1.4s; font-weight:600; }
@keyframes markPulse{ 0%,100%{ box-shadow:0 0 14px rgba(255,255,255,0.35); } 50%{ box-shadow:0 0 34px rgba(255,255,255,0.85), 0 0 70px rgba(255,255,255,0.35); } }
details[open] mark{ animation:none; }

/* Preise groß und strahlend */
.price{ text-shadow:0 0 24px rgba(255,255,255,0.7), 0 0 60px rgba(255,255,255,0.35); }
.card.featured .price{ text-shadow:none; }

/* Haupt-Knöpfe: Lichtstreifen läuft durch */
.hb-btn::before, .btn-primary::before{ content:""; position:absolute; top:0; left:-75%; width:50%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,0.0) 20%,rgba(120,120,130,0.35),transparent 80%); transform:skewX(-20deg); animation:btnShine 3s ease-in-out infinite; pointer-events:none; }
@keyframes btnShine{ 0%,60%{ left:-75%; } 100%{ left:130%; } }

@media (prefers-reduced-motion:reduce){
  h2 em, .hb-title em .w, main .eyebrow, .page .eyebrow, .card::after, .in mark, .page mark, .hb-btn::before, .btn-primary::before{ animation:none !important; }
}

/* ===== Klickbare Kästchen mit Detail-Fenster ===== */
.card.clickable{ cursor:pointer; }
.card.clickable:focus-visible{ outline:2px solid #fff; outline-offset:4px; }
.card .more{ margin-top:auto; padding-top:0.6rem; display:inline-flex; align-items:center; gap:0.4rem; font-weight:600; font-size:0.92rem; color:#fff; text-shadow:0 0 12px rgba(255,255,255,0.6); }
.card .more i{ font-style:normal; transition:transform 250ms cubic-bezier(.2,1.4,.4,1); }
.card.clickable:hover .more i{ transform:translateX(6px); }
.card.featured .more{ color:#09090b; text-shadow:none; }
.step.clickable{ cursor:pointer; }
.step .more{ display:inline-block; margin-top:0.6rem; font-weight:600; font-size:0.9rem; color:#fff; text-shadow:0 0 12px rgba(255,255,255,0.6); }

.dt{ position:fixed; inset:0; z-index:1002; display:none; place-items:center; padding:16px; background:rgba(9,9,11,0.75); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.dt.open{ display:grid; animation:dtIn 350ms cubic-bezier(.2,.7,.2,1); }
@keyframes dtIn{ from{ opacity:0; } to{ opacity:1; } }
.dt-box{ position:relative; width:min(560px,100%); max-height:calc(100dvh - 32px); overflow:auto; background:#18181b; border-radius:24px; padding:clamp(1.4rem,4vw,2.2rem); box-shadow:0 0 0 1px rgba(255,255,255,0.25), 0 0 80px -10px rgba(255,255,255,0.35); display:grid; gap:1rem; animation:dtPop 450ms cubic-bezier(.2,1.3,.4,1); }
@keyframes dtPop{ from{ transform:translateY(24px) scale(0.96); opacity:0; } to{ transform:none; opacity:1; } }
.dt-box .eyebrow{ justify-self:start; }
.dt-box h3{ font-family:var(--font-display); font-weight:400; font-size:clamp(2rem,1.5rem + 2vw,2.8rem); line-height:1.05; color:#fff; text-shadow:0 0 24px rgba(255,255,255,0.45); }
.dt-box p{ color:#e4e4e7; line-height:1.65; }
.dt-box ul{ list-style:none; padding:0; margin:0; display:grid; gap:0.55rem; }
.dt-box li{ display:flex; gap:0.65rem; color:#e4e4e7; }
.dt-box li::before{ content:""; flex:none; width:8px; height:8px; margin-top:0.55em; border-radius:50%; background:#fff; box-shadow:0 0 10px #fff; }
.dt-actions{ display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:0.4rem; }
.dt-actions .btn{ border-radius:999px; }
.dt-actions .ghost{ background:transparent; color:#fff; border:1px solid #52525b; }
.dt-close{ position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%; border:none; background:#27272a; color:#fff; font-size:1.4rem; line-height:1; cursor:pointer; }
.dt-close:hover{ background:#3f3f46; }