@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;
  --bwk24-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(--bwk24-ease), height .25s var(--bwk24-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); }

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

.bwk24-wrap{ max-width:1400px; margin:0 auto; padding:0 6vw; }
.bwk24-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(--bwk24-ease), background .3s; }
.bwk24-btn:hover{ transform:skew(-6deg) scale(1.05); background:var(--dark); color:var(--cream); }
.bwk24-section.bwk24-cream .bwk24-btn{ background:var(--magenta); }
.bwk24-section.bwk24-cream .bwk24-btn:hover{ background:var(--dark); }


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

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

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

/* ---------- hero ---------- */
.bwk24-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; }
.bwk24-hero img.bwk24-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.15); }
.bwk24-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%); }
.bwk24-hero-title{ position:relative; z-index:2; order:1; text-align:left; padding:0 6vw 160px; }
.bwk24-hero-title h1{ font-size:clamp(40px,8.5vw,140px); color:var(--cream); text-transform:uppercase; overflow-wrap:break-word; }
.bwk24-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; }
@media (max-width:600px){ .bwk24-hero{ min-height:520px; } }

/* ---------- Lede ---------- */
.bwk24-lede{ max-width:70ch; margin-top:50px; display:flex; flex-direction:column; gap:26px; }
.bwk24-lede-col{ display:contents; }
.bwk24-lede p{ font-size:17px; color:var(--cream); opacity:.9; }

/* ---------- Statement / Zitat ---------- */
.bwk24-statement{ font-size:clamp(28px,4.6vw,58px); line-height:1.25; max-width:20ch; color:var(--cream); }
.bwk24-section.bwk24-cream .bwk24-statement{ color:var(--dark); }
.bwk24-statement .bwk24-hl{ color:var(--magenta); font-style:italic; }
.bwk24-section.bwk24-cream .bwk24-statement .bwk24-hl{ color:var(--pink); }

/* ---------- Auf-einen-Blick Karten (Lehrplan/Dauer/Zertifikate) ---------- */
.bwk24-info-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:40px; margin-top:60px; }
.bwk24-info-card{ background:var(--dark); color:var(--cream); padding:40px 34px; box-shadow:0 24px 50px rgba(0,0,0,.35); }
.bwk24-info-card .bwk24-eyebrow{ color:var(--magenta); }
.bwk24-info-card h4{ margin-top:14px; font-size:clamp(22px,2.4vw,28px); }
.bwk24-info-card ul{ margin:20px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.bwk24-info-card ul li{ font-size:16px; opacity:.85; padding-left:18px; position:relative; }
.bwk24-info-card ul li::before{ content:"—"; position:absolute; left:0; color:var(--magenta); }
.bwk24-info-card .bwk24-big-value{ margin-top:20px; font-family:"Exo2",sans-serif; font-weight:400; font-size:16px; color:var(--cream); opacity:.85; }

/* ---------- Kursformen Karten (Vormittag/Nachmittag/Abend) ---------- */
.bwk24-kurs-grid{ display:grid; grid-template-columns:1fr; gap:40px; margin-top:60px; }
.bwk24-kurs-card{ background:var(--cream); color:var(--dark); padding:36px 32px; position:relative; }
.bwk24-kurs-card .bwk24-kurs-code{ font-family:"MontserratAlternates",sans-serif; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--pink); }
.bwk24-kurs-card h4{ margin-top:14px; font-size:clamp(22px,2.4vw,26px); }
.bwk24-kurs-card .bwk24-kurs-zeit{ margin-top:16px; font-size:17px; font-weight:700; }
.bwk24-kurs-card .bwk24-kurs-termine{ margin-top:18px; font-size:15px; opacity:.8; line-height:1.7; }
.bwk24-kurs-card .bwk24-kurs-termine strong{ display:block; font-size:12px; letter-spacing:.15em; text-transform:uppercase; opacity:.6; margin-bottom:6px; }
.bwk24-kurs-card.bwk24-leer{ opacity:.55; }

/* ---------- Kurskosten ---------- */
.bwk24-preis-lead{ margin-top:60px; display:flex; align-items:baseline; gap:20px; flex-wrap:wrap; }
.bwk24-preis-lead .bwk24-amount{ font-family:"Ruda",sans-serif; font-weight:700; font-size:clamp(56px,7vw,96px); color:var(--magenta); line-height:1; }
.bwk24-preis-lead .bwk24-amount-label{ font-family:"MontserratAlternates",sans-serif; font-size:13px; letter-spacing:.2em; text-transform:uppercase; opacity:.7; }
.bwk24-preis-hinweis{ margin-top:14px; font-size:15px; opacity:.75; }
.bwk24-preis-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:40px; margin-top:50px; }
.bwk24-preis-card{ background:var(--dark); color:var(--cream); padding:36px 32px; }
.bwk24-preis-card .bwk24-preis-label{ font-family:"MontserratAlternates",sans-serif; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--magenta); }
.bwk24-preis-card .bwk24-preis-detail{ margin-top:18px; font-size:16px; opacity:.85; line-height:1.7; }
.bwk24-preis-card .bwk24-preis-detail strong{ color:var(--cream); opacity:1; }

/* ---------- Ratenrechner (eigenständiges, flexibles Zusatz-Tool, als Accordion versteckt) ---------- */
.bwk24-rk-card{ margin-top:40px; background:var(--cream); color:var(--dark); border:1px solid var(--dark); padding:26px 36px; transition:background .3s, color .3s, border-color .3s; }
.bwk24-rk-card.bwk24-rk-open{ background:var(--dark); color:var(--cream); border-color:var(--dark); padding:40px 36px; }
.bwk24-rk-card .bwk24-preis-label{ font-size:20px; font-family:"Ruda",sans-serif; font-weight:700; letter-spacing:0; text-transform:none; color:var(--cream); }

.bwk24-rk-toggle{ display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; background:none; border:none; padding:0; margin:0; text-align:left; font:inherit; line-height:1; color:inherit; cursor:pointer; }
.bwk24-rk-chevron{ flex-shrink:0; display:flex; color:var(--magenta); transition:transform .3s var(--bwk24-ease); }
.bwk24-rk-toggle[aria-expanded="true"] .bwk24-rk-chevron{ transform:rotate(180deg); }

.bwk24-rk-teaser{ display:block; font-family:"Ruda",sans-serif; font-weight:700; font-size:clamp(17px,2vw,20px); line-height:1; color:inherit; }
.bwk24-rk-expanded-title{ display:none; }
.bwk24-rk-toggle[aria-expanded="true"] .bwk24-rk-teaser{ display:none; }
.bwk24-rk-toggle[aria-expanded="true"] .bwk24-rk-expanded-title{ display:block; }

.bwk24-rk-collapse{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--bwk24-ease); }
.bwk24-rk-collapse.is-open{ grid-template-rows:1fr; }
.bwk24-rk-collapse-inner{ overflow:hidden; min-height:0; padding-top:0; transition:padding-top .4s var(--bwk24-ease); }
.bwk24-rk-collapse.is-open .bwk24-rk-collapse-inner{ padding-top:32px; }

.bwk24-rk-field{ margin-top:24px; }
.bwk24-rk-collapse-inner .bwk24-rk-field:first-child{ margin-top:0; }
.bwk24-rk-field label{ display:flex; justify-content:space-between; align-items:baseline; font-family:"MontserratAlternates",sans-serif; font-size:11px; letter-spacing:.15em; text-transform:uppercase; opacity:.65; margin-bottom:10px; }
.bwk24-rk-field label .bwk24-rk-live{ font-family:"Ruda",sans-serif; font-size:16px; letter-spacing:0; text-transform:none; color:var(--cream); opacity:1; }
.bwk24-rk-card input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:4px; background:#3a3a3a; outline:none; cursor:pointer; }
.bwk24-rk-card input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; background:var(--magenta); border-radius:2px; cursor:pointer; box-shadow:0 4px 12px rgba(196,30,122,.5); }
.bwk24-rk-card input[type=range]::-moz-range-thumb{ width:22px; height:22px; background:var(--magenta); border-radius:2px; border:none; cursor:pointer; }
.bwk24-rk-result{ margin-top:30px; padding-top:24px; border-top:1px solid rgba(243,237,228,.14); display:flex; flex-wrap:wrap; gap:24px 40px; }
.bwk24-rk-result-item .bwk24-rk-result-label{ font-family:"MontserratAlternates",sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:.65; }
.bwk24-rk-result-item .bwk24-rk-result-value{ margin-top:6px; font-family:"Ruda",sans-serif; font-size:clamp(22px,2.6vw,30px); color:var(--magenta); line-height:1; }
.bwk24-rk-note{ margin-top:24px; font-size:16px; opacity:.9; line-height:1.6; }

/* ---------- Querverweis-Karten 6/24 Monate + Beratungstermin (eigener Namespace) ---------- */
#k24-weitere{ background:var(--magenta); color:var(--dark); }
#k24-weitere .k24-duration-card .k24-btn{ background:var(--dark); color:var(--cream); }
#k24-weitere .k24-duration-card .k24-btn:hover{ background:var(--cream); color:var(--dark); }
#k24-weitere .k24-duration-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:60px; max-width:1320px; position:relative; transition:min-height .45s var(--bwk24-ease); }
#k24-weitere .k24-duration-grid.k24t-is-expanding .k24-duration-card:not(.k24-termin-card){ opacity:0; pointer-events:none; transition:opacity .35s var(--bwk24-ease); }
#k24-weitere .k24-termin-visual{ display:flex; align-items:center; justify-content:center; background:var(--cream); color:var(--dark); }
#k24-weitere .k24-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); display:flex; flex-direction:column; }
#k24-weitere .k24-duration-card .k24-photo-wrap{ position:relative; height:280px; overflow:hidden; }
#k24-weitere .k24-duration-card .k24-photo{ width:100%; height:100%; object-fit:cover; object-position:top center; filter:grayscale(1) contrast(1.15); }
#k24-weitere .k24-duration-card .k24-body{ padding:34px 34px 40px; display:flex; flex-direction:column; flex:1; }
#k24-weitere .k24-duration-card .k24-months{ font-family:"Ruda",sans-serif; font-weight:700; font-size:clamp(48px,6vw,72px); color:var(--cream); line-height:1; }
#k24-weitere .k24-termin-visual .k24-months{ color:var(--dark); }
#k24-weitere .k24-duration-card .k24-months .k24-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; }
#k24-weitere .k24-duration-card .k24-label{ margin-top:18px; font-size:16px; opacity:.85; flex:1; }
#k24-weitere .k24-duration-card .k24-btn{ display:inline-flex; align-items:center; gap:10px; margin-top:28px; width:100%; justify-content:center; 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(--bwk24-ease), background .3s; }
#k24-weitere .k24-duration-card .k24-btn:hover{ transform:skew(-6deg) scale(1.05); background:var(--cream); color:var(--dark); }
#k24-weitere .k24-termin-card.k24t-is-open .k24-btn:hover{ background:var(--pink); color:var(--cream); }
@media (max-width:900px){
  #k24-weitere .k24-duration-grid{ grid-template-columns:1fr; }
}

/* ---------- Beratungstermin-Buchung (Karte wächst über die anderen beiden) ---------- */
.k24-termin-card{ transition:top .45s var(--bwk24-ease), left .45s var(--bwk24-ease), width .45s var(--bwk24-ease), height .45s var(--bwk24-ease); }
#k24-weitere .k24-termin-card.k24t-is-open{ z-index:5; text-align:left; background:var(--cream); color:var(--dark); }
.k24t-close{ display:none; position:absolute; top:18px; right:18px; z-index:6; background:none; border:none; color:var(--cream); opacity:.6; font-size:18px; cursor:pointer; padding:6px; }
.k24t-close:hover{ opacity:1; }
.k24-termin-card.k24t-is-open .k24t-close{ display:block; color:var(--dark); }
.k24t-teaser{ height:100%; display:flex; flex-direction:column; }
.k24-termin-card.k24t-is-open .k24t-teaser{ display:none; }
.k24t-inner{ display:none; padding:34px 40px; overflow:hidden; }
.k24-termin-card.k24t-is-open .k24t-inner{ display:block; }
.k24t-inner .bwk24-eyebrow{ color:var(--magenta); }
.k24t-inner h3{ margin-top:14px; font-size:clamp(22px,2.6vw,28px); color:var(--dark); }
.k24t-lead{ margin-top:14px; font-size:15px; opacity:.8; line-height:1.6; }
.k24t-progress-track{ height:4px; background:rgba(21,21,21,.15); margin:24px 0; }
.k24t-progress-fill{ height:100%; background:var(--magenta); transition:width .3s var(--bwk24-ease); }

.k24t-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.k24t-chip{ padding:17px 22px; border:1px solid rgba(21,21,21,.2); background:transparent; color:var(--dark); font-family:"Exo2",sans-serif; font-size:15px; cursor:pointer; transition:border-color .2s, background .2s; }
.k24t-chip:hover{ border-color:var(--magenta); }
.k24t-chip.is-selected{ border-color:var(--magenta); background:rgba(196,30,122,.12); }

.k24t-field{ margin-bottom:14px; }
.k24t-field label{ display:block; font-family:"MontserratAlternates",sans-serif; font-size:11px; letter-spacing:.15em; text-transform:uppercase; opacity:.65; margin-bottom:6px; }
.k24t-field input, .k24t-field select{ width:100%; background:none; border:none; border-bottom:2px solid rgba(21,21,21,.3); color:var(--dark); font-family:"Exo2",sans-serif; font-size:16px; padding:10px 4px; cursor:none; outline:none; }
.k24t-field select option{ background:var(--cream); color:var(--dark); }
.k24t-field input:focus, .k24t-field select:focus{ border-color:var(--magenta); }
.k24t-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
@media (max-width:600px){ .k24t-form-row{ grid-template-columns:1fr; } }

.k24t-check-row{ display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; font-size:14px; line-height:1.5; }
.k24t-check-row input{ width:18px; height:18px; margin-top:2px; accent-color:var(--magenta); cursor:pointer; flex-shrink:0; }
.k24t-check-row a{ color:var(--magenta); text-decoration:underline; }

.k24t-back{ display:block; background:none; border:none; color:var(--dark); opacity:.6; font-family:"MontserratAlternates",sans-serif; font-size:13px; cursor:pointer; padding:0; margin-bottom:20px; }
.k24t-back:hover{ opacity:1; }

.k24t-error{ color:#c0392b; font-size:13px; margin:0 0 16px; display:none; }

.k24t-summary{ border:1px solid rgba(21,21,21,.14); padding:20px; margin:22px 0; font-size:14px; line-height:1.8; }
.k24t-summary strong{ color:var(--dark); }
.k24t-note{ margin-top:18px; font-size:13px; opacity:.6; line-height:1.6; }

.k24t-done-icon{ width:56px; height:56px; margin-bottom:20px; border-radius:50%; background:var(--magenta); display:flex; align-items:center; justify-content:center; }
.k24t-done-icon svg{ width:26px; height:26px; }
.k24t-done-title{ font-size:clamp(24px,3vw,32px); margin-top:10px; }
.k24t-done-actions{ margin-top:26px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.k24t-done-actions .k24-btn{ margin-top:0; width:auto; }
.k24t-restart{ display:inline-block; margin-top:0; background:none; border:none; color:var(--dark); opacity:.5; font-family:"MontserratAlternates",sans-serif; font-size:12px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; padding:0; }
.k24t-restart:hover{ opacity:.85; }

.k24t-hp{ position:absolute; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden; }

.bwk24-preis-cta{ margin-top:60px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.bwk24-preis-cta .bwk24-eyebrow{ color:var(--pink); }
.bwk24-preis-cta h3{ font-size:clamp(24px,2.8vw,34px); color:var(--dark); max-width:20ch; }
.bwk24-preis-cta .bwk24-btn{ margin-top:10px; }
@keyframes bwk24ArrowBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
.bwk24-preis-cta .bwk24-btn .bwk24-arrow{ display:inline-flex; animation:bwk24ArrowBounce 1.4s ease-in-out infinite; }

@media (max-width:900px){
  .bwk24-info-grid, .bwk24-kurs-grid, .bwk24-preis-grid{ grid-template-columns:1fr; }
  html{ cursor:auto; }
  #bwnv-cursor{ display:none; }
}
@media (max-width:600px){
  .bwk24-hero-title h1{ font-size:clamp(18px,7vw,140px); }
  .bwk24-statement{ font-size:clamp(26px,6.2vw,58px); }
  .bwk24-preis-lead{ margin-top:30px; }
  .bwk24-preis-lead .bwk24-amount{ font-size:clamp(34px,11vw,96px); }
  .bwk24-rk-card{ padding-left:24px; padding-right:24px; }
  .bwk24-rk-card.bwk24-rk-open{ padding-left:28px; padding-right:28px; }
  .bwk24-rk-result{ gap:20px; }
  #k24-weitere .k24-duration-card .k24-photo-wrap.k24-termin-visual{ height:280px; }
}
@media (min-width:601px) and (max-width:1024px){
  .bwk24-info-grid{ grid-template-columns:1fr; }
  .bwk24-preis-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }
  #k24-weitere .k24-duration-grid{ grid-template-columns:repeat(2,1fr); gap:24px; }
  #k24-weitere .k24-termin-card{ grid-column:1 / -1; }
  #k24-weitere .k24-duration-card .k24-photo-wrap.k24-termin-visual{ height:93px; }
  .bwk24-lede{ display:grid; max-width:none; grid-template-columns:1fr 1fr; gap:0 50px; align-items:start; }
  .bwk24-lede-col{ display:flex; flex-direction:column; gap:26px; }
}

