/* ---- Lokale Fonts (DSGVO: keine Google-CDN-Requests) ---- */
@font-face{font-family:'Sora';src:url('fonts/sora-latin-wght-normal.woff2') format('woff2-variations');
  font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
  font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --magenta:#D6216F; --magenta-hell:#F43F8E; --magenta-tief:#A3125B;
  --gruen:#14A874; --gruen-hell:#2ECC8F;
  --carbon:#14121C; --carbon2:#1B1926; --graphit:#211F2E;
  --nebel:#F6F5F8; --grau:#6B6878; --grau-d:#A6A3B3; --linie:#E6E4EC;
  --grad-cta:linear-gradient(135deg,#F43F8E,#C4166B);
  --grad-reboot:linear-gradient(90deg,#D6216F,#14A874);
  --r:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:'Manrope',sans-serif;background:var(--carbon);color:#fff;line-height:1.6;overflow-x:hidden}
h1,h2,h3,.f-sora{font-family:'Sora',sans-serif}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.eyebrow{font-family:'Sora',sans-serif;font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--magenta-hell)}
.eyebrow.g{color:var(--gruen-hell)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Sora',sans-serif;font-weight:700;font-size:15px;padding:15px 28px;border-radius:11px;transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s,background .25s,border-color .25s;will-change:transform}
.btn-p{background:var(--grad-cta);color:#fff;box-shadow:0 12px 30px rgba(214,33,111,.32)}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(214,33,111,.42)}
.btn-o{border:2px solid rgba(255,255,255,.28);color:#fff}
.btn-o:hover{border-color:#fff;transform:translateY(-3px)}
.btn-g{background:var(--gruen);color:#fff;box-shadow:0 12px 30px rgba(20,168,116,.28)}
.btn-g:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(20,168,116,.4)}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .35s,backdrop-filter .35s,border-color .35s,padding .35s;border-bottom:1px solid transparent;padding:8px 0}
.nav.scrolled{background:rgba(16,14,22,.82);backdrop-filter:blur(14px) saturate(1.2);border-color:rgba(255,255,255,.08)}
.nav .wrap{display:flex;align-items:center;gap:34px;height:64px}
.brand{display:flex;align-items:center;gap:11px}
.brand svg{height:40px;width:40px}
.brand .wm{font-family:'Sora',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.5px}
.brand .wm em{font-style:normal;color:var(--magenta-hell)}
.navlinks{display:flex;gap:26px;margin-left:auto}
.navlinks a{font-size:15px;font-weight:600;color:#C9C6D4;position:relative;padding:4px 0}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--grad-reboot);transition:width .3s}
.navlinks a:hover{color:#fff}.navlinks a:hover::after{width:100%}
.nav .btn{padding:11px 20px;font-size:14px}
.burger{display:none;background:none;border:0;color:#fff;cursor:pointer;width:46px;height:46px;z-index:120;position:relative}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px auto;border-radius:2px;transition:transform .35s,opacity .25s}
.nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-cta{display:none}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:120px 0 80px}
.hero .glow{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;will-change:transform}
.hero .g1{width:640px;height:640px;right:-160px;top:-120px;background:radial-gradient(circle,rgba(214,33,111,.55),transparent 62%)}
.hero .g2{width:560px;height:560px;left:-180px;bottom:-200px;background:radial-gradient(circle,rgba(20,168,116,.4),transparent 62%)}
.hero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 75%)}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;gap:40px;align-items:center;width:100%}
.hero h1{font-size:clamp(40px,5.6vw,68px);font-weight:800;letter-spacing:-2px;line-height:1.02;margin:20px 0 22px}
.hero h1 em{font-style:normal;color:var(--magenta-hell)}
.hero h1 .g{color:var(--gruen-hell)}
.hero .lead{font-size:clamp(17px,1.4vw,20px);color:var(--grau-d);max-width:540px;margin-bottom:34px}
.hero .ctas{display:flex;gap:15px;flex-wrap:wrap}
.hero-visual{display:flex;justify-content:center;align-items:center;position:relative}
.hero-visual .ring{width:min(360px,78%);filter:drop-shadow(0 30px 70px rgba(214,33,111,.4));will-change:transform}
.scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--grau-d);font-size:11px;letter-spacing:2px;text-transform:uppercase;font-family:'Sora',sans-serif}
.scrollcue .mouse{width:24px;height:38px;border:2px solid rgba(255,255,255,.3);border-radius:14px;position:relative}
.scrollcue .mouse::after{content:"";position:absolute;left:50%;top:7px;transform:translateX(-50%);width:4px;height:7px;border-radius:2px;background:#fff;animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* ---------- MARQUEE / TRUST ---------- */
.marquee{border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:20px 0;overflow:hidden;background:var(--carbon2)}
.marquee .track{display:flex;gap:56px;width:max-content;animation:scrollx 32s linear infinite;font-family:'Sora',sans-serif;font-weight:700;font-size:15px;color:#8A8798;letter-spacing:.5px;text-transform:uppercase}
.marquee .track span{display:inline-flex;align-items:center;gap:14px;white-space:nowrap}
.marquee .track span::before{content:"◆";color:var(--magenta);font-size:9px}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ---------- SECTIONS ---------- */
section{position:relative}
.sec{padding:110px 0}
.sec-head{max-width:680px;margin-bottom:56px}
.sec-head h2{font-size:clamp(30px,3.6vw,46px);font-weight:800;letter-spacing:-1.2px;line-height:1.08;margin:14px 0 16px}
.sec-head p{color:var(--grau-d);font-size:18px}
.on-light{background:var(--nebel);color:var(--graphit)}
.on-light .sec-head p{color:var(--grau)}

/* Services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:32px 28px;position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .4s,background .4s;will-change:transform}
.svc:hover{transform:translateY(-6px);border-color:rgba(244,63,142,.4);background:rgba(255,255,255,.05)}
.svc .num{font-family:'Sora',sans-serif;font-size:13px;font-weight:700;color:var(--magenta-hell);letter-spacing:1px}
.svc h3{font-size:21px;font-weight:700;margin:16px 0 12px}
.svc p{color:var(--grau-d);font-size:15px}
.svc.accent-g .num{color:var(--gruen-hell)}
.svc.accent-g:hover{border-color:rgba(46,204,143,.4)}
.svc .chev{position:absolute;right:26px;top:30px;color:rgba(255,255,255,.14);font-size:22px;transition:color .3s,transform .3s}
.svc:hover .chev{color:var(--magenta-hell);transform:translateX(4px)}

/* ---------- PROZESS (Apple-style pinned) ---------- */
.process{background:var(--carbon2)}
.process .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.process .sticky-col{position:sticky;top:110px;align-self:start}
.process .p-eyebrow{margin-bottom:14px}
.process h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-1px;line-height:1.08;margin-bottom:20px}
.process .p-desc{color:var(--grau-d);font-size:17px;max-width:420px}
.process .p-progress{margin-top:34px;height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.process .p-progress i{display:block;height:100%;width:25%;background:var(--grad-reboot);border-radius:2px;transition:width .4s}
.steps{display:flex;flex-direction:column;gap:26px;padding:6vh 0}
.step{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:28px 30px;display:flex;gap:22px;align-items:flex-start;opacity:.4;transition:opacity .5s ease,border-color .5s ease,transform .5s ease,box-shadow .5s ease}
.step.active{opacity:1;border-color:rgba(244,63,142,.5);transform:translateX(8px);box-shadow:0 16px 40px rgba(0,0,0,.28)}
.step .n{font-family:'Sora',sans-serif;font-weight:800;font-size:20px;width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--grad-cta)}
.step.active .n{box-shadow:0 10px 26px rgba(214,33,111,.4)}
.step h3{font-size:19px;font-weight:700;margin-bottom:6px}
.step p{color:var(--grau-d);font-size:15px}

/* ---------- USP counter ---------- */
.usp{background:var(--carbon);position:relative;overflow:hidden}
.usp::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 80% 50%,rgba(214,33,111,.14),transparent 60%)}
.usp .wrap{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
.stat .big{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(48px,6vw,74px);line-height:1;background:var(--grad-reboot);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{font-family:'Sora',sans-serif;font-weight:600;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--grau-d);margin-top:10px}
.stat p{color:var(--grau-d);font-size:14px;margin-top:8px;max-width:280px;margin-left:auto;margin-right:auto}

/* ---------- SPLIT (Refurbished) ---------- */
.split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split .media{border-radius:22px;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(150deg,#211F2E,#3A3650);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;position:relative}
.split .media .ph{color:#57536A;font-size:15px;font-family:'Sora',sans-serif;text-align:center;padding:20px}
.split h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-1px;line-height:1.1;margin:14px 0 18px}
.split p.lead{color:var(--grau-d);font-size:17px;margin-bottom:26px}
.checks{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:30px}
.checks li{display:flex;gap:14px;align-items:flex-start;font-size:16px}
.checks li svg{flex-shrink:0;margin-top:2px}

/* ---------- STUDENTEN teaser ---------- */
.students{background:var(--nebel);color:var(--graphit)}
.students .card{background:var(--carbon);color:#fff;border-radius:26px;padding:56px;display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.students .card::before{content:"";position:absolute;width:400px;height:400px;right:-120px;top:-120px;background:radial-gradient(circle,rgba(20,168,116,.3),transparent 62%);filter:blur(30px)}
.students .card .rel{position:relative;z-index:1}
.students h2{font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-1px;line-height:1.1;margin-bottom:14px}
.students h2 em{font-style:normal;color:var(--gruen-hell)}
.students p{color:var(--grau-d);font-size:16px;margin-bottom:24px;max-width:440px}
.students .price{position:relative;z-index:1;text-align:center}
.students .price .from{font-family:'Sora',sans-serif;font-size:14px;color:var(--grau-d)}
.students .price .num{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(60px,8vw,96px);line-height:.9;background:var(--grad-reboot);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- CTA band ---------- */
.ctaband{background:var(--carbon2);text-align:center;padding:96px 0}
.ctaband h2{font-size:clamp(30px,4vw,52px);font-weight:800;letter-spacing:-1.4px;line-height:1.05;margin-bottom:18px}
.ctaband h2 em{font-style:normal;color:var(--magenta-hell)}
.ctaband p{color:var(--grau-d);font-size:18px;max-width:520px;margin:0 auto 34px}
.ctaband .ctas{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}

/* ---------- FOOTER ---------- */
footer{background:var(--carbon);border-top:1px solid rgba(255,255,255,.08);padding:64px 0 34px}
footer .top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px;margin-bottom:44px}
footer h4{font-family:'Sora',sans-serif;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;margin-bottom:16px}
footer a{display:block;color:var(--grau-d);font-size:14.5px;padding:5px 0;transition:color .2s}
footer a:hover{color:#fff}
footer .intro p{color:var(--grau-d);font-size:14.5px;max-width:300px;margin-top:12px}
footer .base{border-top:1px solid rgba(255,255,255,.08);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--grau)}
footer .base .grad{background:var(--grad-reboot);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;font-family:'Sora',sans-serif}

/* reveal base (JS sets start-state; without JS everything is visible) */
.js [data-reveal]{opacity:0;transform:translateY(26px)}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1 !important;transform:none !important}
  .marquee .track,.scrollcue .mouse::after{animation:none}
}

@media(max-width:960px){
  .hero{min-height:auto;padding:120px 0 64px}
  .hero .wrap,.process .wrap,.split .wrap{grid-template-columns:1fr;gap:36px}
  .process .sticky-col{position:static;top:auto}
  .steps{gap:16px;padding:0}
  .hero-visual{order:-1}.hero-visual .ring{width:170px}
  .hero .glow{filter:blur(42px);opacity:.42}
  .hero .lead{margin-bottom:26px}
  .scrollcue{display:none}
  .services{grid-template-columns:1fr 1fr}
  .usp .wrap{grid-template-columns:1fr;gap:44px}
  .split .wrap{gap:36px}
  .students .card{grid-template-columns:1fr;padding:34px 26px}
  .sec{padding:76px 0}.sec-head{margin-bottom:40px}
  footer .top{grid-template-columns:1fr 1fr;gap:28px}
  /* echtes Mobile-Menü: Vollbild-Overlay statt display:none */
  .burger{display:block;margin-left:auto}
  .nav > .wrap > .btn{display:none}
  .navlinks{position:fixed;inset:0;height:100svh;background:rgba(16,14,22,.98);backdrop-filter:blur(18px);
    flex-direction:column;justify-content:center;align-items:center;gap:6px;margin:0;
    transform:translateY(-100%);transition:transform .5s cubic-bezier(.16,1,.3,1);pointer-events:none}
  .nav.open .navlinks{transform:translateY(0);pointer-events:auto}
  .navlinks a{font-family:'Sora',sans-serif;font-size:28px;font-weight:700;color:#fff;padding:12px 0}
  .navlinks a::after{display:none}
  .menu-cta{display:inline-flex !important;margin-top:22px;font-size:16px !important}
}
@media(max-width:560px){
  .hero h1{letter-spacing:-1px}
  .services{grid-template-columns:1fr}
  .ctaband{padding:70px 0}
  footer .top{grid-template-columns:1fr}
  .btn{width:100%;justify-content:center}
  .hero .ctas .btn,.ctaband .ctas .btn{width:100%}
}

/* ---------- Bild-Helfer (Mehrseiten) ---------- */
.split .media{margin:0}
.split .media img{width:100%;height:100%;object-fit:cover;display:block}
.imgcard{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#211F2E;position:relative}
.imgcard img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.imgcard:hover img{transform:scale(1.05)}

/* Subpage-Hero (kompakter als Startseite) */
.page-hero{position:relative;overflow:hidden;background:var(--carbon);padding:150px 0 70px}
.page-hero .glow{position:absolute;width:560px;height:560px;right:-160px;top:-160px;border-radius:50%;filter:blur(60px);opacity:.5;background:radial-gradient(circle,rgba(214,33,111,.5),transparent 62%);pointer-events:none}
.page-hero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 75%)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .crumbs{font-family:'Sora',sans-serif;font-size:13px;color:var(--grau);letter-spacing:.5px;margin-bottom:18px}
.page-hero .crumbs a{color:var(--grau-d)}
.page-hero h1{font-size:clamp(34px,4.6vw,58px);font-weight:800;letter-spacing:-1.6px;line-height:1.05;margin-bottom:18px;max-width:820px}
.page-hero h1 em{font-style:normal;color:var(--magenta-hell)}
.page-hero p.lead{font-size:clamp(16px,1.4vw,20px);color:var(--grau-d);max-width:600px}

/* Gallery grid */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery .imgcard{aspect-ratio:4/3}
.gallery .cap{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(0deg,rgba(16,14,22,.85),transparent);font-family:'Sora',sans-serif;font-size:13px;font-weight:600}
@media(max-width:760px){.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.gallery{grid-template-columns:1fr}}

/* Feature-Row (Bild + Text abwechselnd) */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:56px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.frow:last-child{border-bottom:none}
.frow.rev .fmedia{order:2}
.frow .fmedia{aspect-ratio:4/3;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.frow .fmedia img{width:100%;height:100%;object-fit:cover;display:block}
.frow h3{font-family:'Sora',sans-serif;font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.6px;margin:12px 0 12px}
.frow p{color:var(--grau-d);font-size:16px;margin-bottom:14px}
.frow ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.frow li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:#D7D4E0}
.frow li svg{flex-shrink:0;margin-top:3px}
@media(max-width:820px){.frow{grid-template-columns:1fr;gap:26px;padding:38px 0}.frow.rev .fmedia{order:0}}

/* Preis/Info-Tabelle */
.ptable{width:100%;border-collapse:collapse;font-size:15px}
.ptable th,.ptable td{text-align:left;padding:15px 16px;border-bottom:1px solid rgba(255,255,255,.09)}
.ptable th{font-family:'Sora',sans-serif;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--grau-d)}
.ptable td:last-child{font-family:'Sora',sans-serif;font-weight:700;color:#fff;white-space:nowrap}
.ptable tr:hover td{background:rgba(255,255,255,.03)}

/* ---------- Hero-Logo Draw-in (verhindert Flackern vor JS) ---------- */
@media (prefers-reduced-motion: no-preference){
  .js .hero-visual .ring .draw{stroke-dasharray:1000;stroke-dashoffset:1000}
  .js .hero-visual .ring .head{opacity:0}
}

/* ---------- Über-uns ---------- */
.about-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.about-hero .photo{border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px rgba(0,0,0,.4)}
.about-hero .photo img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){.about-hero{grid-template-columns:1fr;gap:32px}.about-hero .photo{order:-1}}

.founder{background:var(--carbon2);position:relative;overflow:hidden}
.founder .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.founder .pfigure{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:360px}
.founder .pfigure::before{content:"";position:absolute;inset:auto 0 0 0;width:340px;height:340px;left:50%;top:50%;transform:translate(-50%,-46%);border-radius:50%;
  background:radial-gradient(circle,rgba(214,33,111,.35),rgba(20,168,116,.18) 55%,transparent 72%);filter:blur(20px)}
.founder .pfigure img{position:relative;z-index:1;max-height:440px;width:auto;display:block;filter:drop-shadow(0 24px 40px rgba(0,0,0,.45))}
.founder h2{font-family:'Sora',sans-serif;font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-1px;line-height:1.1;margin-bottom:16px}
.founder p{color:var(--grau-d);font-size:16.5px;margin-bottom:16px}
.quote{border-left:3px solid;border-image:var(--grad-reboot) 1;padding:6px 0 6px 22px;margin:22px 0;font-family:'Sora',sans-serif;font-size:19px;font-weight:600;line-height:1.5;color:#fff}
.quote cite{display:block;margin-top:10px;font-family:'Manrope',sans-serif;font-size:14px;font-weight:600;font-style:normal;color:var(--grau-d)}
@media(max-width:820px){.founder .wrap{grid-template-columns:1fr;gap:24px}.founder .pfigure{min-height:auto}.founder .pfigure img{max-height:360px}}