@font-face { font-family:"Ruda"; src:url("../fonts/Ruda-Regular.ttf"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Ruda"; src:url("../fonts/Ruda-Bold.ttf"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Exo2"; src:url("../fonts/Exo2-Regular.ttf"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"MontserratAlternates"; src:url("../fonts/MontserratAlternates-Regular.ttf"); font-weight:500; font-style:normal; font-display:swap; }

:root{
  --dark:#151515;
  --magenta:#C41E7A;
  --cream:#F3EDE4;
  --pink:#c20a75;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html{ scroll-behavior:smooth; cursor:none; }
body{
  margin:0; background:var(--dark); color:var(--cream);
  font-family:"Exo2",sans-serif; font-size:16px; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
#bw-page{ background:var(--dark); }
h1,h2,h3,h4{ font-family:"Ruda",sans-serif; font-weight:700; margin:0; line-height:.92; letter-spacing:-0.03em; }
body h1, body h2, body h3, body h4{ color:inherit; }
p{ margin:0; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; cursor:pointer; }
::selection{ background:var(--magenta); color:var(--cream); }

#bwnv-grain{ position:fixed; inset:0; z-index:500; pointer-events:none; opacity:.05; mix-blend-mode:overlay; }

#bwnv-cursor{ position:fixed; top:0; left:0; width:10px; height:10px; background:var(--magenta); border-radius:50%; pointer-events:none; z-index:3500; transform:translate(-50%,-50%); transition:width .25s var(--ease), height .25s var(--ease), background .25s; mix-blend-mode:difference; }
#bwnv-cursor.big{ width:64px; height:64px; background:var(--magenta); }

#bwnv-progress{ height:5px; width:0%; background:var(--magenta); }

.reveal{ opacity:0; transform:translateY(40px) rotate(.3deg); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0) rotate(0); }

.wrap{ max-width:1400px; margin:0 auto; padding:0 6vw; }
.btn{ display:inline-flex; align-items:center; gap:10px; background:var(--magenta); color:var(--cream); font-weight:700; padding:18px 36px; border-radius:2px; font-family:"MontserratAlternates",sans-serif; font-size:14px; text-transform:uppercase; letter-spacing:.08em; border:none; cursor:pointer; transition:transform .3s var(--ease), background .3s; }
.btn:hover{ transform:skew(-6deg) scale(1.05); background:var(--dark); color:var(--cream); }
.btn.ghost{ background:transparent; border:1.5px solid var(--cream); }
.section.pink .btn.ghost{ border-color:var(--dark); }
.section.pink .btn.ghost:hover{ background:var(--dark); color:var(--cream); }


/* ---------- diagonal section divider ---------- */
.cut-top{ clip-path:polygon(0 4vw, 100% 0, 100% 100%, 0 100%); margin-top:-4vw; position:relative; z-index:2; }

.section{ padding:150px 0; position:relative; }
.section.pink{ background:var(--magenta); color:var(--dark); }
.section.cream{ background:var(--cream); color:var(--dark); }

.eyebrow{ font-family:"MontserratAlternates",sans-serif; font-weight:500; font-size:12px; letter-spacing:.25em; text-transform:uppercase; }

/* ---------- hero (Vollbild wie die Startseite) ---------- */
.hero{ position:relative; height:100vh; height:100svh; min-height:680px; padding-top:89px; background:var(--dark); box-sizing:border-box; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; overflow:hidden; }
.hero img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.15); }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, var(--dark) 0%, rgba(10,10,10,.9) 25%, rgba(10,10,10,.3) 75%); }
.hero-title{ position:relative; z-index:2; order:1; text-align:left; padding:0 6vw 160px; }
.hero-title h1{ font-size:clamp(40px,8.5vw,140px); color:var(--cream); text-transform:uppercase; overflow-wrap:break-word; }
.hero-kicker{ position:relative; z-index:2; order:2; text-align:left; padding:0 6vw 26px; font-family:"MontserratAlternates",sans-serif; color:var(--magenta); font-size:13px; letter-spacing:.3em; text-transform:uppercase; }
.hero-kicker .kicker-break{ display:block; }
@media (max-width:600px){
  .hero{ min-height:520px; }
}

/* ---------- Lede-Absätze direkt unter dem Hero ---------- */
.lede{ max-width:70ch; margin-top:50px; display:flex; flex-direction:column; gap:26px; }
.lede p{ font-size:17px; color:var(--cream); opacity:.9; }

/* ---------- intro giant statement ---------- */
.statement{ font-size:clamp(30px,5.4vw,74px); max-width:16ch; color:var(--cream); }
.section.cream .statement{ color:var(--dark); }
.section.pink .statement{ color:var(--dark); }
.statement .hl{ color:var(--magenta); font-style:italic; }
.section.cream .statement .hl{ color:var(--pink); }
.section.pink .statement .hl{ color:var(--cream); }

/* ---------- Dauer-Karten (6/12/24 Monate) ---------- */
.duration-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:60px; }
.duration-card{ background:var(--dark); color:var(--cream); text-align:center; position:relative; overflow:hidden; box-shadow:0 24px 50px rgba(0,0,0,.35); }
.duration-card .photo-wrap{ position:relative; height:280px; overflow:hidden; }
.duration-card .photo{ width:100%; height:100%; object-fit:cover; object-position:top center; filter:grayscale(1) contrast(1.15); }
.duration-card .body{ padding:34px 34px 40px; }
.duration-card .months{ font-family:"Ruda",sans-serif; font-weight:700; font-size:clamp(48px,6vw,72px); color:var(--cream); line-height:1; }
.duration-card .months .unit{ display:block; font-family:"MontserratAlternates",sans-serif; font-weight:500; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--magenta); margin-top:10px; }
.duration-card .label{ margin-top:18px; font-size:16px; opacity:.85; }
.duration-card .btn{ margin-top:28px; width:100%; justify-content:center; }
.duration-card .btn:hover{ background:var(--cream); color:var(--dark); }
.duration-wappen{ display:none; }

/* ---------- Ausbildungsfinder ---------- */
.qf-intro{ max-width:70ch; }
.qf-intro h2{ margin-top:16px; font-size:clamp(28px,4vw,44px); color:var(--cream); }
.qf-intro .lead{ margin-top:20px; font-size:17px; color:var(--cream); opacity:.85; max-width:65ch; }
.section.pink .qf-intro h2{ color:var(--dark); }
.section.pink .qf-intro .lead{ color:var(--cream); opacity:.85; }
.section.pink .qf-intro .eyebrow{ color:var(--dark); }

.qf-card{ margin-top:50px; max-width:640px; background:var(--dark); color:var(--cream); padding:44px 40px; box-shadow:0 24px 50px rgba(0,0,0,.35); }
.qf-progress-track{ height:4px; background:#3a3a3a; margin-bottom:30px; }
.qf-progress-fill{ height:100%; background:var(--magenta); transition:width .3s var(--ease); }
.qf-count{ font-family:"MontserratAlternates",sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:.6; margin-bottom:10px; }
.qf-text{ font-family:"Ruda",sans-serif; font-weight:700; font-size:clamp(20px,2.4vw,26px); margin-bottom:26px; line-height:1.3; letter-spacing:-.01em; }

.qf-options{ display:flex; flex-direction:column; gap:12px; margin-bottom:26px; }
.qf-option{ text-align:left; padding:16px 20px; background:transparent; border:1px solid #3a3a3a; color:var(--cream); font-family:"Exo2",sans-serif; font-size:15px; line-height:1.4; cursor:pointer; transition:border-color .2s, background .2s; }
.qf-option:hover{ border-color:var(--magenta); }
.qf-option.is-selected{ border-color:var(--magenta); background:rgba(196,30,122,.12); }

.qf-back{ background:none; border:none; color:var(--cream); opacity:.6; font-family:"MontserratAlternates",sans-serif; font-size:13px; letter-spacing:.05em; cursor:pointer; padding:0; }
.qf-back:hover{ opacity:1; }
.qf-back:disabled{ opacity:.25; cursor:default; }

.qf-result-badge{ display:inline-block; font-family:"MontserratAlternates",sans-serif; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--magenta); background:rgba(196,30,122,.12); padding:6px 14px; margin-bottom:16px; }
.qf-result-title{ font-family:"Ruda",sans-serif; font-weight:700; font-size:clamp(26px,3vw,36px); color:var(--cream); letter-spacing:-.02em; }
.qf-result-desc{ margin-top:16px; font-size:16px; color:var(--cream); opacity:.85; line-height:1.7; }

.qf-bars{ margin:30px 0; display:flex; flex-direction:column; gap:16px; }
.qf-bar-row{ display:grid; grid-template-columns:90px 1fr; align-items:center; gap:14px; }
.qf-bar-label{ font-family:"MontserratAlternates",sans-serif; font-size:12px; letter-spacing:.1em; text-transform:uppercase; opacity:.7; }
.qf-bar-track{ height:14px; background:#3a3a3a; }
.qf-bar-fill{ height:100%; background:var(--cream); opacity:.35; }
.qf-bar-fill.is-winner{ background:var(--magenta); opacity:1; }

.qf-hint{ margin-top:24px; font-size:16px; font-weight:700; font-family:"Ruda",sans-serif; color:var(--magenta); line-height:1.5; letter-spacing:-.01em; }

.qf-restart{ display:block; margin-top:20px; background:none; border:none; color:var(--cream); opacity:.5; font-family:"MontserratAlternates",sans-serif; font-size:12px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; padding:0; }
.qf-restart:hover{ opacity:.85; }

.qf-card.is-open{ background:var(--cream); color:var(--dark); transition:background .3s var(--ease), color .3s var(--ease); }
.qf-card.is-open .qf-progress-track{ background:rgba(10,10,10,.15); }
.qf-card.is-open .qf-option{ color:var(--dark); border-color:rgba(10,10,10,.25); }
.qf-card.is-open .qf-back,
.qf-card.is-open .qf-result-title,
.qf-card.is-open .qf-result-desc,
.qf-card.is-open .qf-restart{ color:var(--dark); }

/* ---------- Vorteile-Intro (Klassenfoto + Überschrift) ---------- */
.kfoto-wild{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0; max-width:1400px; margin:0 auto; background:var(--dark); }
.kfoto-frame{ position:relative; overflow:hidden; }
.kfoto-frame img{ width:100%; height:auto; display:block; filter:grayscale(1) contrast(1.2); }
.kfoto-copy{ padding:60px 60px; }
.kfoto-copy h2{ font-size:clamp(34px,4.6vw,64px); color:var(--cream); }
.vorteile-section{ padding-top:100px; }

/* ---------- Vorteile-Karten ---------- */
.vorteile-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:50px 60px; margin-top:80px; }
.vorteile-card{ position:relative; }
.vorteile-card:nth-child(2n){ margin-top:120px; }
.vorteile-card .v-index{ position:absolute; top:-6px; right:0; font-family:"Ruda",sans-serif; font-size:110px; font-weight:700; color:var(--cream); opacity:.12; line-height:1; pointer-events:none; }
.vorteile-card h4{ position:relative; font-size:clamp(20px,2.4vw,26px); color:var(--magenta); text-transform:uppercase; letter-spacing:-.01em; max-width:80%; }
.vorteile-card p{ position:relative; margin-top:16px; font-size:17px; color:var(--cream); opacity:.85; }
.vorteile-card p + p{ margin-top:14px; }
.vorteile-card p.lead{ font-family:"Ruda",sans-serif; font-weight:700; font-size:clamp(19px,2.1vw,23px); line-height:1.3; color:var(--cream); opacity:1; letter-spacing:-.01em; }

.vorteile-quote{ margin-top:120px; display:flex; flex-direction:column; justify-content:center; }
.vorteile-quote .eyebrow{ display:block; margin-top:20px; }
.vorteile-quote .big{ font-family:"Ruda",sans-serif; font-weight:700; text-transform:uppercase; color:var(--cream); line-height:1.05; letter-spacing:-.01em; }
.vorteile-quote .big span{ display:block; }
.vorteile-quote .big .l1{ font-size:clamp(20px,2.2vw,28px); opacity:.7; }
.vorteile-quote .big .l2{ font-size:clamp(30px,3.4vw,44px); }
.vorteile-quote .big .l3{ font-size:clamp(20px,2.2vw,28px); opacity:.7; margin-top:6px; }
.vorteile-quote .big .l4{ font-size:clamp(38px,4.4vw,58px); color:var(--magenta); }
@media (max-width:600px){
  .vorteile-card .v-index{ font-size:80px; }
}


@media (max-width:900px){
  .kfoto-wild{ grid-template-columns:1fr; }
  .duration-grid, .vorteile-grid{ grid-template-columns:1fr; }
  .vorteile-card:nth-child(2n){ margin-top:0; }
  .vorteile-quote{ margin-top:40px; }
  html{ cursor:auto; }
  #bwnv-cursor{ display:none; }
}
@media (max-width:600px){
  .hero-title h1{ font-size:clamp(18px,7vw,140px); }
  .statement{ font-size:clamp(36px,5.4vw,74px); }
  .kfoto-copy h2{ font-size:clamp(18px,4.6vw,64px); }
  .duration-card .months{ font-size:clamp(30px,6vw,72px); }
  .kfoto-copy{ padding:30px 6vw 10px; }
  .vorteile-grid{ margin-top:0; }
  .vorteile-section{ padding-top:20px; }
  .qf-intro h2{ font-size:clamp(22px,7vw,44px); }
  .qf-card{ margin-top:36px; padding:28px 22px; }
  .qf-text{ font-size:clamp(18px,5vw,26px); margin-bottom:22px; }
  .qf-option{ padding:14px 16px; font-size:14px; }
  .qf-result-title{ font-size:clamp(22px,6vw,36px); }
  .qf-bar-row{ grid-template-columns:64px 1fr; gap:10px; }
  .qf-bar-label{ font-size:11px; }
}

@media (min-width:601px) and (max-width:1024px){
  .duration-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .duration-wappen{ display:flex; align-items:center; justify-content:center; }
  .duration-wappen img{ width:100%; max-width:120px; opacity:.9; }
  .kfoto-copy{ padding:40px 6vw 20px; }
  .vorteile-grid{ margin-top:40px; }
  .vorteile-section{ padding-top:40px; }
}