/* ============================================================
   KNOVIA – Relaunch CSS v3
   ============================================================ */

:root {
  --navy:      #0a0820;
  --navy-mid:  #12103a;
  --purple:    #6c35de;
  --violet:    #9b59f5;
  --gold:      #f5c842;
  --gold-dim:  rgba(245,200,66,0.15);
  --white:     #ffffff;
  --dim:       rgba(255,255,255,0.65);
  --dimmer:    rgba(255,255,255,0.38);
  --border:    rgba(255,255,255,0.10);
  --light-bg:  #f0edf8;
  --light-text:#3a3560;
  --light-muted:#6a6890;

  --f-display: 'Baloo 2', cursive;
  --f-body:    'Nunito', sans-serif;

  --nav-h:     62px;
  --max-w:     1180px;
  --pad-x:     clamp(1.25rem, 5vw, 3.5rem);
  --r:         12px;
  --r-lg:      20px;
}

/* ---- RESET ---- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden;max-width:100%;scroll-padding-top:calc(var(--nav-h) + 16px);}
body{font-family:var(--f-body);background:var(--navy);color:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}


/* ============================================================
   BG2 WRAPPER — gemeinsamer Hintergrund für why + seo section
   ============================================================ */
.bg2-wrapper {
  position: relative;
  background: var(--light-bg);
  /* Desktop: breite bg3.webp, leicht gestaucht über die volle Breite */
  background-image: url('/bg3.webp');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center 200px;
}
/* why + seo sections transparent damit Wrapper-bg durchkommt */
.why-section { background: transparent !important; }
.seo-section { background: transparent !important; }

/* ---- Global bg canvas ---- */
#bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h);
  background: transparent;
  transition: background 0.35s, backdrop-filter 0.35s;
}
.nav.scrolled {
  background: rgba(10,8,32,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
/* Gleicher Fluchtpunkt wie hero-content, why-inner, seo-inner */
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  height: 100%;
  display: flex;
  align-items: center;
}

/* Logo — bündig am linken Fluchtpunkt */
.nav-logo{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.nav-logo img{width:34px;height:34px;border-radius:9px;}
.nav-logo-text{display:flex;flex-direction:column;line-height:1;}
.nav-logo-name{font-family:var(--f-display);font-size:1.35rem;font-weight:800;color:var(--gold);letter-spacing:.04em;}
.nav-logo-sub{font-size:.58rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:1px;}

/* Links direkt neben dem Logo, Download wird nach rechts geschoben */
.nav-inner > nav{margin-right:auto;}
.nav-links{display:flex;align-items:center;justify-content:flex-start;gap:4px;list-style:none;margin-left:1.5rem;padding:0;}
.nav-links a{
  font-size:.95rem;font-weight:700;color:rgba(255,255,255,.9);white-space:nowrap;
  padding:7px 13px;border-radius:var(--r);
  border:1px solid transparent;
  transition:border-color .2s,background .2s;
}
.nav-links a:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07);}

/* Download — bündig am rechten Fluchtpunkt */
.nav-actions{display:flex;align-items:center;flex-shrink:0;}
.btn-primary{padding:9px 20px;border-radius:var(--r);background:var(--gold);color:var(--navy);font-size:.85rem;font-weight:900;box-shadow:0 4px 18px rgba(245,200,66,.35);transition:transform .15s,box-shadow .15s;white-space:nowrap;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(245,200,66,.5);}

/* Hamburger */
.nav-hamburger{display:none;flex-direction:column;gap:5px;padding:6px;}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transition:.3s;}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding-top:var(--nav-h);padding-bottom:120px;}

/* Background */
.hero-bg{position:absolute;inset:0;z-index:1;overflow:hidden;}
.hero-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center;}
.hero-bg-fade{
  position:absolute;inset:0;
  background:linear-gradient(95deg,
    rgba(10,8,32,.88) 0%,
    rgba(10,8,32,.68) 22%,
    rgba(10,8,32,.28) 45%,
    rgba(10,8,32,.03) 62%,
    transparent 100%
  );
}

/* Hero sparkle canvas */
#hero-stars{position:absolute;inset:0;z-index:2;pointer-events:none;}

/* Characters — am goldenen Weg vor dem Schlosstor, left-basiert */
.hero-characters{position:absolute;bottom:0;left:0;right:0;z-index:3;height:100%;pointer-events:none;}
.hero-char{position:absolute;bottom:18%;height:auto;}
.hero-char-boy{
  left:54%;width:148px;height:auto;
  will-change:transform;
  animation:charFloat 3.8s ease-in-out infinite,charWobble 7s ease-in-out infinite;
  transform-origin:bottom center;
  filter:drop-shadow(0 12px 24px rgba(108,53,222,.6));z-index:3;
}
.hero-char-girl{
  left:62%;width:138px;height:auto;
  will-change:transform;
  animation:charFloat 4.3s ease-in-out infinite .7s,charWobble 8.5s ease-in-out infinite 1.4s;
  transform-origin:bottom center;
  filter:drop-shadow(0 12px 24px rgba(245,200,66,.45));z-index:3;
}
.hero-char-rufus{
  position:absolute;
  bottom:18%;left:70%;width:82px;height:auto;z-index:2;
  will-change:transform;
  animation:rufusWag 2.2s ease-in-out infinite, charFloat 4.8s ease-in-out infinite .4s;
  transform-origin:bottom center;
  filter:drop-shadow(0 8px 16px rgba(245,200,66,.5));
}
@keyframes charFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
@keyframes charWobble{
  0%,100%{transform:rotate(0deg);}
  20%{transform:rotate(1.2deg);}
  40%{transform:rotate(-.8deg);}
  60%{transform:rotate(1deg);}
  80%{transform:rotate(-.5deg);}
}
@keyframes rufusWag{
  0%,100%{transform:rotate(0deg);}
  20%{transform:rotate(-6deg);}
  40%{transform:rotate(5deg);}
  60%{transform:rotate(-4deg);}
  80%{transform:rotate(3deg);}
}
@keyframes charFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes charWobble{0%,100%{transform:rotate(0);}20%{transform:rotate(1.2deg);}40%{transform:rotate(-.8deg);}60%{transform:rotate(1deg);}80%{transform:rotate(-.5deg);}}

/* Hero text */
.hero-content{position:relative;z-index:4;width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--pad-x);}
.hero-inner{max-width:500px;padding:2rem 0 4rem;}

.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(108,53,222,.22);border:1px solid rgba(155,89,245,.4);border-radius:30px;padding:5px 15px;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);margin-bottom:18px;}
.hero-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2s ease-in-out infinite;flex-shrink:0;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.65);}}

.hero-h1{font-family:var(--f-display);font-size:clamp(2.6rem,4.8vw,3.8rem);font-weight:800;line-height:1.08;margin-bottom:18px;color:var(--white);}
.hero-h1 .gold{color:var(--gold);}
.hero-h1 .sparkle{font-size:.65em;vertical-align:super;}

.hero-sub{font-size:clamp(1rem,1.6vw,1.12rem);color:rgba(255,255,255,.92);line-height:1.75;max-width:420px;margin-bottom:28px;}

/* CTAs */
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px;align-items:center;}
.cta-main{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:var(--r);background:var(--gold);color:var(--navy);font-size:.97rem;font-weight:900;
  box-shadow:0 4px 14px rgba(245,200,66,.35);
  transition:transform .15s,box-shadow .15s;
  position:relative;overflow:hidden;
}
.cta-main:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(245,200,66,.45);}
.cta-main svg{flex-shrink:0;}
/* Shine-Sweep alle 4s — GPU-komposited via translateX */
.cta-main::after{
  content:'';
  position:absolute;
  top:0;left:0;
  width:60%;height:100%;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);
  transform:translateX(-180%);
  animation:ctaShine 4s ease-in-out infinite 2s;
  pointer-events:none;
  will-change:transform;
}
@keyframes ctaShine{
  0%,100%{transform:translateX(-180%);opacity:0;}
  8%{opacity:1;}
  40%{transform:translateX(280%);opacity:1;}
  41%,99%{transform:translateX(280%);opacity:0;}
}
.cta-secondary{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:var(--r);border:1.5px solid rgba(255,255,255,.25);color:var(--white);font-size:.97rem;font-weight:700;backdrop-filter:blur(8px);transition:border-color .2s,background .2s;}
.cta-secondary:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.06);}

/* Badges */
.hero-badges{display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
.hero-badge{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:rgba(255,255,255,.82);white-space:nowrap;}
.hero-badge svg{width:15px;height:15px;flex-shrink:0;opacity:.85;}

/* Review card — weiter links, stärker transparent */
.hero-review{
  position:absolute;
  top:42%;
  right:calc(var(--pad-x) + 240px); /* weiter links rein */
  transform:translateY(-50%);
  z-index:5;
  background:rgba(12,10,40,0.72);  /* mehr Transparenz */
  border:1px solid rgba(245,200,66,.18);
  border-radius:var(--r-lg);
  padding:16px 18px;
  width:215px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  animation:reviewFloat 5s ease-in-out infinite 1s;
}
@keyframes reviewFloat{0%,100%{transform:translateY(calc(-50% + 0px));}50%{transform:translateY(calc(-50% - 8px));}}
.hero-review-stars{display:flex;gap:2px;margin-bottom:8px;}
.hero-review-stars svg{width:13px;height:13px;}
.hero-review-text{font-size:.77rem;color:var(--dim);line-height:1.55;font-style:italic;margin-bottom:10px;}
.hero-review-author{display:flex;align-items:center;gap:8px;}
.hero-review-avatars{display:flex;}
.hero-review-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--violet));border:2px solid rgba(10,8,32,.8);display:flex;align-items:center;justify-content:center;font-size:.58rem;font-weight:800;}
.hero-review-avatars .hero-review-avatar+.hero-review-avatar{margin-left:-6px;}
.hero-review-name{font-size:.72rem;font-weight:700;color:var(--dimmer);}

/* ============================================================
   ARC TRANSITION — hero → why-section
   Dark hero clips with an upward-convex arc at the bottom.
   The light section sits flush below.
   ============================================================ */
.hero-arc{
  position:absolute;
  bottom:-1px;left:0;right:0;
  z-index:6;
  pointer-events:none;
  line-height:0;
  overflow:hidden;
}
.hero-arc svg{display:block;width:100%;height:auto;}

/* ============================================================
   WHY SECTION — Text oben volle Breite, Karten darunter in einer Reihe
   bg2.webp als atmosphärischer Hintergrund unter den Karten
   ============================================================ */
.why-section{
  position:relative;z-index:1;
  background:var(--light-bg);
  padding:70px var(--pad-x) 50px;
}
.why-inner{max-width:var(--max-w);margin:0 auto;}
.why-text-col{margin-bottom:70px;display:flex;flex-direction:column;align-items:flex-start;}
.why-tag{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);border:1px solid rgba(108,53,222,.3);border-radius:30px;padding:4px 13px;margin-bottom:14px;}
.why-h2{font-family:var(--f-display);font-size:clamp(1.7rem,2.8vw,2.4rem);font-weight:800;color:var(--navy-mid);line-height:1.12;margin-bottom:12px;}
.why-h2 .purple{color:var(--purple);}
.why-body{font-size:.92rem;color:#4a456e;line-height:1.72;margin-bottom:18px;max-width:680px;}
.why-link{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:800;color:#fff;background:var(--purple);padding:9px 20px;border:2px solid var(--purple);border-radius:var(--r);transition:background .2s,color .2s;white-space:nowrap;}
.why-link:hover{background:transparent;color:var(--purple);}
/* Karten in einer eigenen 4-Spalten-Reihe */
.why-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.why-card{background:rgba(255,255,255,.68);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:var(--r-lg);padding:22px 18px;box-shadow:0 4px 20px rgba(108,53,222,.12);border:1px solid rgba(255,255,255,.5);transition:transform .2s,box-shadow .2s,background .2s;}
.why-card:hover{transform:translateY(-4px);box-shadow:0 10px 34px rgba(108,53,222,.18);background:rgba(255,255,255,.85);}
.why-card-icon{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--violet));display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.why-card-icon svg{width:24px;height:24px;}
.why-card-title{font-family:var(--f-display);font-size:1rem;font-weight:800;color:var(--purple);margin-bottom:7px;}
.why-card-body{font-size:.82rem;color:#4a456e;line-height:1.6;}

/* ============================================================
   SUBPAGE SHARED STYLES
   ============================================================ */
.subpage-hero{
  position:relative;z-index:1;
  padding:calc(var(--nav-h) + 70px) 0 80px;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%);
  overflow:hidden;
}
/* Schloss-Grafik im Hintergrund, rechts, abgedunkelt */
.subpage-hero::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:url('/hero.webp');
  background-size:cover;
  background-position:center 30%;
  opacity:.45;
}
/* Verlauf: links dunkel für H1-Lesbarkeit, rechts Grafik sichtbar */
.subpage-hero::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(95deg,
    rgba(10,8,32,.95) 0%,
    rgba(10,8,32,.82) 35%,
    rgba(10,8,32,.5) 65%,
    rgba(10,8,32,.35) 100%);
  pointer-events:none;
}
/* inner trägt den Fluchtpunkt — gleich wie nav-inner und subpage-content */
.subpage-hero-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad-x);position:relative;z-index:1;}
.subpage-tag{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);border:1px solid rgba(155,89,245,.45);border-radius:30px;padding:4px 13px;margin-bottom:14px;background:rgba(108,53,222,.2);}
.subpage-h1{font-family:var(--f-display);font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:800;line-height:1.1;margin-bottom:16px;}
.subpage-h1 .gold{color:var(--gold);}
.subpage-lead{font-size:clamp(.95rem,1.5vw,1.1rem);color:rgba(255,255,255,.85);line-height:1.7;max-width:560px;}

.subpage-body{position:relative;z-index:1;background:var(--light-bg);}
.subpage-content{max-width:var(--max-w);margin:0 auto;padding:70px var(--pad-x) 90px;}

/* Prose text sections */
.prose-section{margin-bottom:56px;}
.prose-section h2{font-family:var(--f-display);font-size:clamp(1.5rem,2.5vw,2rem);font-weight:800;color:var(--navy-mid);margin-bottom:14px;}
.prose-section h3{font-family:var(--f-display);font-size:1.15rem;font-weight:800;color:var(--purple);margin-bottom:10px;margin-top:28px;}
.prose-section p{font-size:.93rem;color:var(--light-muted);line-height:1.75;margin-bottom:12px;}
.prose-section ul{padding-left:20px;margin-bottom:14px;}
.prose-section li{font-size:.93rem;color:var(--light-muted);line-height:1.7;margin-bottom:6px;}
.prose-section a{color:var(--purple);font-weight:700;}
.prose-section a:hover{text-decoration:underline;}

/* Feature grid for Funktionen page */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:32px 0;}
.feat-card{background:#fff;border-radius:var(--r-lg);padding:28px 24px;border:1px solid rgba(108,53,222,.08);box-shadow:0 2px 16px rgba(108,53,222,.07);transition:transform .2s,box-shadow .2s;}
.feat-card:hover{transform:translateY(-4px);box-shadow:0 10px 32px rgba(108,53,222,.13);}
.feat-card-icon{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--violet));display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.feat-card-icon svg{width:26px;height:26px;}
.feat-card h3{font-family:var(--f-display);font-size:1.1rem;font-weight:800;color:var(--navy-mid);margin-bottom:8px;}
.feat-card p{font-size:.84rem;color:var(--light-muted);line-height:1.6;}

/* Steps */
.steps{display:flex;flex-direction:column;gap:0;margin:28px 0;}
.step-item{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid rgba(108,53,222,.1);}
.step-item:last-child{border-bottom:none;}
.step-num{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--violet));display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:1rem;font-weight:800;flex-shrink:0;margin-top:2px;}
.step-body h3{font-family:var(--f-display);font-size:1.05rem;font-weight:800;color:var(--navy-mid);margin-bottom:6px;}
.step-body p{font-size:.88rem;color:var(--light-muted);line-height:1.65;}

/* Highlight box */
.highlight-box{background:linear-gradient(135deg,rgba(108,53,222,.08),rgba(155,89,245,.05));border:1px solid rgba(108,53,222,.15);border-radius:var(--r-lg);padding:28px 32px;margin:28px 0;}
.highlight-box p{font-size:.92rem;color:var(--light-text);line-height:1.75;margin-bottom:0;}
.highlight-box strong{color:var(--purple);}

/* Price cards */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:32px 0;}
.price-card{background:#fff;border-radius:var(--r-lg);padding:28px 24px;border:2px solid rgba(108,53,222,.1);text-align:center;position:relative;transition:transform .2s,box-shadow .2s;}
.price-card:hover{transform:translateY(-4px);box-shadow:0 10px 32px rgba(108,53,222,.12);}
.price-card.featured{border-color:var(--purple);box-shadow:0 4px 24px rgba(108,53,222,.18);}
.price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--purple);color:#fff;font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:4px 14px;border-radius:20px;white-space:nowrap;}
.price-label{font-size:.8rem;font-weight:800;color:var(--light-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;}
.price-amount{font-family:var(--f-display);font-size:2.4rem;font-weight:800;color:var(--navy-mid);line-height:1;margin-bottom:4px;}
.price-per{font-size:.78rem;color:var(--light-muted);margin-bottom:16px;}
.price-trial{font-size:.8rem;font-weight:700;color:var(--purple);margin-bottom:20px;}
.price-cta{display:block;padding:11px 20px;border-radius:var(--r);background:var(--purple);color:#fff;font-size:.88rem;font-weight:800;text-align:center;transition:background .2s,transform .15s;}
.price-cta:hover{background:var(--violet);transform:translateY(-2px);}
.price-card.featured .price-cta{background:var(--gold);color:var(--navy);}

/* Download buttons */
.dl-row{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0;}
.dl-btn{display:flex;align-items:center;gap:12px;padding:16px 24px;border-radius:var(--r-lg);font-weight:800;font-size:.97rem;transition:transform .2s,box-shadow .2s;}
.dl-btn.apple{background:#fff;color:var(--navy);box-shadow:0 4px 20px rgba(0,0,0,.12);}
.dl-btn.apple:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(0,0,0,.18);}
.dl-btn.google{background:var(--navy-mid);color:#fff;border:1px solid rgba(255,255,255,.12);}
.dl-btn.google:hover{transform:translateY(-3px);border-color:var(--gold);}
.dl-btn-text-top{font-size:.65rem;font-weight:600;opacity:.6;line-height:1;margin-bottom:2px;}
.dl-btn-text-main{font-size:1rem;font-weight:900;line-height:1;}

/* FAQ accordion */
.faq-list{margin:28px 0;}
.faq-item{border-bottom:1px solid rgba(108,53,222,.12);padding:18px 0;content-visibility:auto;contain-intrinsic-size:auto 60px;}
.faq-item:first-child{border-top:1px solid rgba(108,53,222,.12);}
.faq-q{font-size:.95rem;font-weight:800;color:var(--navy-mid);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;user-select:none;}
.faq-q svg{flex-shrink:0;transition:transform .25s;color:var(--purple);}
.faq-item.open .faq-q svg{transform:rotate(180deg);}
.faq-a{font-size:.88rem;color:var(--light-muted);line-height:1.7;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s;}
.faq-item.open .faq-a{max-height:600px;padding-top:12px;}

/* Impressum / Datenschutz */
.legal-content{max-width:800px;}
.legal-content h2{font-family:var(--f-display);font-size:1.4rem;font-weight:800;color:var(--navy-mid);margin:36px 0 12px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{font-size:.91rem;color:var(--light-muted);line-height:1.75;margin-bottom:10px;}
.legal-content ul{padding-left:20px;margin-bottom:12px;}
.legal-content li{font-size:.91rem;color:var(--light-muted);line-height:1.7;margin-bottom:5px;}
.legal-content a{color:var(--purple);font-weight:700;}
.legal-highlight{background:rgba(108,53,222,.06);border:1px solid rgba(108,53,222,.12);border-radius:var(--r);padding:18px 22px;margin:18px 0;}
.legal-highlight p{margin-bottom:0;}

/* Footer */
.footer{position:relative;z-index:1;background:#100B28;border-top:1px solid rgba(255,255,255,.12);padding:50px var(--pad-x) 0;}
.footer-inner{max-width:var(--max-w);margin:0 auto;}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;}
.footer-brand p{font-size:.86rem;color:rgba(255,255,255,.75);line-height:1.65;margin-top:12px;max-width:240px;}
.footer-col-title{font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:14px;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:8px;}
.footer-col a{font-size:.86rem;color:rgba(255,255,255,.8);transition:color .2s;}
.footer-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding:24px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.82rem;color:rgba(255,255,255,.7);}
.footer-bottom a{color:rgba(255,255,255,.7);transition:color .2s;}
.footer-bottom a:hover{color:var(--white);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px){
  .hero-char-boy{width:150px;left:50%;}
  .hero-char-girl{width:140px;left:58%;}
  .hero-review{right:.8rem;width:200px;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .why-cards{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  .nav-links{display:none;}
  .nav-inner > nav{margin-right:0;flex:0;}
  .nav-actions .btn-ghost{display:none;}
  .nav-hamburger{display:flex;}
  /* Logo links, alles andere nach rechts schieben */
  .nav-logo{margin-right:auto;}
  .nav-actions{margin-left:auto;}
  .nav-hamburger{margin-left:6px;}

  .hero-bg-img{object-position:80% center;}
  .hero-bg-fade{background:linear-gradient(180deg,rgba(10,8,32,.85) 0%,rgba(10,8,32,.65) 50%,rgba(10,8,32,.88) 100%);}
  /* Helden + Rufus auf Mobile komplett ausblenden */
  .hero-characters{display:none;}
  .hero-review{display:none;}
  .hero-inner{max-width:100%;padding-bottom:4rem;}

  /* Mobile: bg2 unten in der why-section verankert, ragt nie in den oberen Card-Text */
  .bg2-wrapper{background-image:none;}
  .why-section{padding-top:40px;padding-bottom:180px;position:relative;overflow:hidden;}
  .why-section::before{
    content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    width:130%;max-width:none;aspect-ratio:2081/1215;
    background:url('/bg2.webp') center bottom/contain no-repeat;
    z-index:0;pointer-events:none;
  }
  .why-section > *{position:relative;z-index:1;}

  .why-cards{grid-template-columns:repeat(2,1fr);}
  .feat-grid{grid-template-columns:1fr 1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media(max-width:600px){
  :root{--nav-h:56px;}
  .nav-logo-name{font-size:1.2rem;}
  .nav-actions .btn-primary{padding:8px 14px;font-size:.8rem;}
  .why-text-col > div:first-child{flex-direction:column;gap:14px !important;align-items:flex-start !important;}
  .why-link{margin-top:0 !important;}
  .finale-hero-cta{position:static !important;margin-bottom:20px;}
  .seo-box-cta{position:static !important;margin-bottom:20px;}
  .finale-schools{flex-direction:column;align-items:flex-start;}

  .hero-h1{font-size:clamp(2rem,8.5vw,2.7rem);}
  .hero-ctas{flex-direction:column;}
  .cta-main,.cta-secondary{justify-content:center;width:100%;}
  .hero-badges{gap:10px;}
  .why-section{padding-bottom:150px;}
  .why-cards{grid-template-columns:1fr;}
  .feat-grid{grid-template-columns:1fr;}
  .price-grid{grid-template-columns:1fr;}
  .dl-row{flex-direction:column;}
  .dl-btn{justify-content:center;}
  .footer-top{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;text-align:center;}
}
@media(prefers-reduced-motion:reduce){
  .hero-char-boy,.hero-char-girl,.hero-char-rufus,.hero-review,.hero-eyebrow-dot{animation:none!important;}
  #hero-stars{display:none;}
}

/* ============================================================
   SEO CONTENT SECTION — lila Box mit lernen.webp oben rechts
   ============================================================ */
.seo-section {
  position: relative;
  z-index: 1;
  background: var(--light-bg);
  padding: 80px var(--pad-x) 90px;
  overflow: visible;
}
.seo-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

/* Die lila Box */
.seo-box {
  position: relative;
  background: linear-gradient(135deg, #4a1fa8 0%, #6c35de 55%, #7c45e8 100%);
  border-radius: 28px;
  padding: 56px 52px 56px 52px;
  overflow: visible;
  box-shadow: 0 20px 60px rgba(108,53,222,.35);
}


/* Button rechts oben in der lila Box auf H2-Höhe */
.seo-box-cta{
  position:absolute;
  top:56px;
  right:52px;
  z-index:5;
}
@media(max-width:900px){
  .seo-box-cta{position:static;margin-bottom:24px;}
}

/* Text: volle Breite */
.seo-text {
  width: 100%;
}
.seo-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 30px;
  padding: 4px 14px;
  margin-bottom: 18px;
}
.seo-h2 {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 20px;
  max-width: calc(100% - 260px);
}
@media(max-width:900px){.seo-h2{max-width:100%;}}
/* Alle Paragraphen volle Breite, guter Kontrast */
.seo-text p {
  font-size: 1rem;       /* war .9rem — größer */
  color: rgba(255,255,255,.95);  /* war .82 — besser lesbar */
  line-height: 1.78;
  margin-bottom: 16px;
  max-width: 100%;       /* volle Breite */
}
.seo-text h3 {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gold);
  margin: 28px 0 10px;
}
.seo-cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.seo-link {
  font-size: .9rem;
  font-weight: 800;
  color: rgba(255,255,255,.85);
  transition: color .2s;
}
.seo-link:hover { color: var(--white); }

/* Bild: absolut oben rechts, weiter links und höher als bisher */
/* Responsive */
@media(max-width:1100px){
  .seo-section { padding: 60px var(--pad-x) 70px; }
}
@media(max-width:900px){
  .seo-box { padding: 40px 32px 40px; }
  .seo-h2 { max-width: 100%; }
}
@media(max-width:600px){
  .seo-section { padding: 40px 1rem 60px; }
  .seo-box { padding: 32px 24px 32px; border-radius: 20px; }
  .seo-h2 { max-width: 100%; font-size: 1.55rem; }
  .seo-cta-row { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   FINALE SECTION — dunkelblau #171a7e mit bg4 Hintergrund
   ============================================================ */
.finale-section{
  position:relative;z-index:1;
  background:#171a7e;
  background-image:url('/bg4.webp');
  background-size:100% auto;
  background-position:center bottom;
  background-repeat:no-repeat;
  padding:90px var(--pad-x) 90px;
  overflow:hidden;
}
/* leichtes Overlay nur oben für Textlesbarkeit, unten bg4 frei sichtbar */
.finale-section::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(23,26,126,.85) 0%,rgba(23,26,126,.6) 35%,rgba(23,26,126,.25) 70%,rgba(23,26,126,.1) 100%);
}
.finale-inner{position:relative;z-index:1;max-width:var(--max-w);margin:0 auto;}


/* Blöcke */
.finale-block{margin-bottom:70px;}
.finale-tag{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(245,200,66,.4);border-radius:30px;padding:5px 15px;margin-bottom:18px;}
.finale-h2{font-family:var(--f-display);font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;color:#fff;line-height:1.15;margin-bottom:16px;}
.finale-lead{font-size:1.02rem;color:rgba(255,255,255,.88);line-height:1.7;max-width:680px;margin-bottom:32px;}

/* Duo cards */
.finale-duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.finale-card{background:rgba(255,255,255,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:30px 28px;}
.finale-card h3{font-family:var(--f-display);font-size:1.25rem;font-weight:800;color:var(--gold);margin-bottom:12px;}
.finale-card p{font-size:.92rem;color:rgba(255,255,255,.85);line-height:1.7;}

/* Trio */
.finale-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.finale-mini{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:26px 24px;}
.finale-mini h3{font-family:var(--f-display);font-size:1.05rem;font-weight:800;color:#fff;margin-bottom:14px;}
.finale-mini ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.finale-mini li{font-size:.88rem;color:rgba(255,255,255,.82);line-height:1.5;padding-left:22px;position:relative;}
.finale-mini li::before{content:'';position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;background:var(--gold);opacity:.85;}

/* Schulen */
.finale-schools{
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(108,53,222,.35),rgba(155,89,245,.2));
  border:1px solid rgba(245,200,66,.25);
  border-radius:var(--r-lg);
  padding:32px 36px;
  margin-bottom:70px;
}
.finale-schools h3{font-family:var(--f-display);font-size:1.4rem;font-weight:800;color:var(--gold);margin-bottom:10px;}
.finale-schools p{font-size:.92rem;color:rgba(255,255,255,.85);line-height:1.65;max-width:560px;}
.finale-school-btn{flex-shrink:0;display:inline-flex;align-items:center;padding:13px 26px;border-radius:var(--r);background:var(--gold);color:var(--navy);font-size:.92rem;font-weight:900;white-space:nowrap;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 14px rgba(245,200,66,.3);}
.finale-school-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(245,200,66,.45);}

/* Finaler CTA */
.finale-cta{text-align:center;}
.finale-cta .finale-lead{margin-left:auto;margin-right:auto;}

@media(max-width:900px){
  .finale-duo{grid-template-columns:1fr;}
  .finale-trio{grid-template-columns:1fr;}
  .finale-schools{flex-direction:column;align-items:flex-start;}
}
@media(max-width:600px){
  .finale-section{padding:60px 1rem 60px;}
  .finale-block{margin-bottom:50px;}
}

/* Hero-Block im Finale: Button rechts auf H2-Höhe */
.finale-block-hero{position:relative;}
.finale-hero-cta{position:absolute;top:0;right:0;z-index:3;}
@media(max-width:900px){.finale-hero-cta{position:static;margin-bottom:24px;}}
.finale-spacer{height:40px;}

/* Sterne-Canvas über dem gesamten blauen Bereich */
#finale-stars{position:absolute;inset:0;z-index:0;pointer-events:none;}
.finale-inner{position:relative;z-index:2;}
.finale-section::before{z-index:1;}