/* Bonante Academy · Kopfhautpigmentierung — v3 nach „Startseite 2"
   Warmes Beige, Salbei-Akzent, Jost (Headlines) + Karla (Text),
   weiche runde Panels, dunkle Sektionen für Hero/Curriculum/Buchung */

:root {
  --bg:      #FAF5F0;   /* Hauptfläche */
  --alt:     #F3EBE3;   /* Sektionswechsel + Panels auf --bg */
  --slot:    #EAE1D6;   /* Bildflächen/Platzhalter */
  --dark:    #2B2825;   /* Hero, Curriculum, Buchung */
  --ink:     #33302B;   /* Text/Headlines */
  --muted:   #7A736A;   /* Fließtext */
  --taupe:   #A29A8E;   /* Meta-Labels */
  --label:   #8C8770;   /* Eyebrows */
  --line:    #E3D9CD;   /* Haarlinien */
  --sage:    #A9A48C;   /* Buttons */
  --sage-d:  #8C8770;
  --outline: #C9BFB1;
  --star:    #F2C744;
  --white:   #FFFFFF;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; max-width: 100vw; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Karla", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s ease, background .25s ease, border-color .25s ease, opacity .25s ease; }
button { font-family: inherit; }
::selection { background: var(--sage); color: var(--white); }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 44px; min-width: 0; }

/* ---------- Typografie ---------- */
h1, h2, h3 { margin: 0; font-family: "Jost", sans-serif; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
.h-hero    { font-size: clamp(34px, 4.4vw, 62px); line-height: 1.1; letter-spacing: -0.015em; }
.h-section { font-size: clamp(28px, 3vw, 42px); line-height: 1.2; }
.h-card    { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; }
p { margin: 0; }
.lead { color: var(--muted); font-size: 16px; line-height: 1.85; max-width: 48ch; text-wrap: pretty; }
.small { color: var(--muted); font-size: 14px; line-height: 1.7; }
.eyebrow {
  display: block; font-family: "Jost", sans-serif;
  font-size: 11px; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--label);
}
.eyebrow.above { margin-bottom: 22px; }
.eyebrow.mid { margin: 26px 0 18px; letter-spacing: 0.22em; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.sec-head { max-width: 640px; margin: 0 auto 60px; text-align: center; }
.sec-head .lead { margin: 22px auto 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: "Jost", sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 16px 34px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-sage { background: var(--sage); color: var(--white); }
.btn-sage:hover { background: var(--sage-d); color: var(--white); }
.btn-white { background: var(--white); color: var(--ink); }
.btn-white:hover { background: var(--alt); color: var(--ink); }
.btn-cream { background: var(--bg); color: var(--ink); }
.btn-cream:hover { background: var(--sage); color: var(--white); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--sage); color: var(--white); }
.btn-outline { border-color: var(--outline); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--sage); color: var(--white); border-color: var(--sage); }
.btn-ghost { color: rgba(255,255,255,.8); padding-left: 6px; padding-right: 6px; }
.btn-ghost:hover { color: var(--white); }
.btn-big { padding: 19px 40px; font-weight: 600; box-shadow: 0 10px 30px rgba(20,17,14,.28); }

/* ---------- Demo-Bar ---------- */
.demobar {
  background: var(--ink); color: rgba(250,245,240,.7);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  text-align: center; padding: 11px 20px;
}

/* ---------- Sticky-Nav ---------- */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: rgba(250,245,240,.93); backdrop-filter: saturate(1.5) blur(14px);
  transform: translateY(-110%); transition: transform .35s ease;
}
.navbar.visible { transform: translateY(0); }
.navbar .inner {
  max-width: 1240px; margin: 0 auto; padding: 14px 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.navbar img { width: 32px; height: 32px; }
.navbar .links {
  display: flex; gap: 30px; font-family: "Jost", sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
}
.navbar .links a:hover { color: var(--label); }
.navbar .btn { font-size: 11px; padding: 13px 26px; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--dark); min-height: 700px; display: flex; flex-direction: column; overflow: hidden; }
.hero > img.bg { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; object-position: 62% 38%; }
.hero .shade { position: absolute; inset: 0; background: linear-gradient(96deg, rgba(38,34,30,.92) 0%, rgba(38,34,30,.7) 46%, rgba(38,34,30,.2) 100%); }
.hero-nav {
  position: relative; z-index: 4; max-width: 1240px; width: 100%; margin: 0 auto;
  padding: 32px 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.hero-nav .logo { width: 42px; height: 42px; filter: invert(1); flex: 0 0 auto; }
.hero-nav .links {
  display: flex; gap: 30px; font-family: "Jost", sans-serif; font-size: 12px; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.78);
  flex: 1 1 300px; flex-wrap: wrap; justify-content: center; min-width: 0;
}
.hero-nav .links a { color: rgba(255,255,255,.78); }
.hero-nav .links a:hover { color: var(--white); }
.hero-nav .btn { font-size: 11px; padding: 14px 28px; flex: 0 0 auto; }
.hero-grid {
  position: relative; z-index: 4; max-width: 1240px; width: 100%; margin: 0 auto;
  padding: 44px 44px 76px; display: grid; grid-template-columns: 1fr .92fr; gap: 56px; align-items: center; flex: 1;
}
.hero-copy h1 { color: var(--white); max-width: 14ch; }
.hero-copy .lead { color: rgba(255,255,255,.72); margin-top: 24px; max-width: 46ch; }
.rating-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rating-row .stars { font-size: 19px; letter-spacing: .12em; color: var(--star); line-height: 1; }
.rating-row .txt { font-family: "Jost", sans-serif; font-size: 15px; letter-spacing: .04em; color: var(--white); white-space: nowrap; }
.rating-row .txt .big { font-size: 19px; font-weight: 500; }
.rating-row.top { margin-bottom: 24px; }
.rating-row.trust { margin-top: 32px; }
.rating-row.trust img.tp { height: 19px; width: auto; }
.rating-row.trust .txt { color: rgba(255,255,255,.82); }
.rating-row.trust .txt .big { color: var(--white); font-size: 18px; }
.rating-row .tp-stars { display: flex; gap: 2px; }
.rating-row .tp-stars img { width: 19px; height: 19px; }
.hero-ctas { display: flex; align-items: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
/* align-self:end verankert die Collage an der Unterkante der Copy-Spalte
   (Höhe der Trustpilot-Zeile) — zentriert schwebte sie mit Leerraum darunter */
.hero-collage { position: relative; height: 420px; align-self: end; margin-bottom: 4px; }
.hero-collage .im { position: absolute; border-radius: 26px; overflow: hidden; background: var(--slot); }
.hero-collage .im img { width: 100%; height: 100%; object-fit: cover; }
.hero-collage .im-a { left: 0; top: 0; width: 57%; aspect-ratio: 3/4; box-shadow: 0 24px 60px rgba(20,17,14,.35); }
.hero-collage .im-b { right: 0; bottom: 0; width: 50%; aspect-ratio: 3/4; box-shadow: 0 28px 64px rgba(20,17,14,.45); border: 6px solid rgba(250,245,240,.16); }

/* Hero-Fakten-Chips (Differenzierung above the fold).
   Desktop als 2×2-Raster — als Flex-Wrap brachen sie 3+1 um (einsamer 4. Chip). */
.chips { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px; margin-top: 32px; }
.chip {
  font-family: "Jost", sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 8px 15px;
  white-space: nowrap;
}

/* Vergleich „Der Unterschied" */
.diff { display: grid; gap: 14px; }
.diff .row {
  background: var(--bg); border-radius: 22px; padding: 26px 34px;
  display: grid; grid-template-columns: .8fr 1fr 1.1fr; gap: 28px; align-items: center;
}
.diff .row.head { background: transparent; padding-top: 0; padding-bottom: 6px; }
.diff .k { font-family: "Jost", sans-serif; font-weight: 500; font-size: 17px; }
.diff .head span { font-family: "Jost", sans-serif; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }
.diff .market { font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.diff .us { font-size: 14.5px; line-height: 1.7; color: var(--ink); display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.diff .us .c { color: var(--sage); font-weight: 700; font-size: 15px; line-height: 1.6; }
.diff-note { font-size: 13px; color: var(--taupe); margin-top: 22px; text-align: center; }

/* ---------- Sektionen ---------- */
section { padding: 112px 0; }
section.slim { padding: 60px 0; }
.bg-alt { background: var(--alt); }
.bg-dark { background: var(--dark); color: var(--white); }
.bg-dark .h-section, .bg-dark .h-card { color: var(--white); }
.bg-dark .eyebrow { color: rgba(255,255,255,.5); }
.bg-dark .lead { color: rgba(255,255,255,.68); }

/* Trust-Leiste */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.trust-grid > div { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 24px; border-left: 1px solid var(--line); text-align: center; }
.trust-grid > div:first-child { border-left: 0; }
.trust-grid .n { font-family: "Jost", sans-serif; font-size: 34px; font-weight: 500; letter-spacing: .01em; line-height: 1.15; }
.trust-grid .l { font-size: 13px; color: var(--muted); }
.trust-grid .k { font-family: "Jost", sans-serif; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); }
.trust-grid img.g { width: 20px; height: 20px; }
.trust-grid img.tp { height: 17px; width: auto; }

/* Split-Layouts */
.split { display: grid; grid-template-columns: .85fr 1fr; gap: 80px; align-items: center; min-width: 0; }
.split > * { min-width: 0; }
.split.even { grid-template-columns: 1fr 1fr; }
.img-round { border-radius: 30px; overflow: hidden; position: relative; background: var(--slot); }
.img-round img { width: 100%; height: 100%; object-fit: cover; }

/* Bild-Platzhalter (Slots) */
.slot {
  width: 100%; height: 100%; min-height: 120px; background: var(--slot);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: "Jost", sans-serif; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--taupe); padding: 18px; line-height: 2;
}

/* Drei Säulen */
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.cols3 > .col {
  padding: 0 34px; border-left: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0;
}
.cols3 > .col:first-child { border-left: 0; }
.cols3 .h-col {
  font-family: "Jost", sans-serif; font-weight: 500; font-size: 26px; line-height: 1.25;
  margin: 0 0 24px; max-width: 12ch; min-height: 66px; display: flex; align-items: center; justify-content: center;
}
.cols3 .im { width: 100%; aspect-ratio: 4/3; border-radius: 22px; overflow: hidden; background: var(--slot); }
.cols3 .im img { width: 100%; height: 100%; object-fit: cover; }
.cols3 .txt { font-size: 15px; line-height: 1.8; color: var(--muted); margin: 22px 0 26px; max-width: 32ch; }
.cols3 .btn { margin-top: auto; font-size: 10px; padding: 14px 30px; }

.split-trainer { grid-template-columns: .95fr 1fr; gap: 88px; }

/* Ausbilderin-Collage */
.trainer-collage { position: relative; padding: 0 0 78px 66px; }
.trainer-collage .main { width: 100%; aspect-ratio: 4/5; border-radius: 30px; overflow: hidden; background: var(--slot); }
.trainer-collage .main img { width: 100%; height: 100%; object-fit: cover; }
.trainer-collage .over img { width: 100%; height: 100%; object-fit: cover; }
.trainer-collage .over {
  position: absolute; left: 0; bottom: 0; width: 52%; aspect-ratio: 3/4; border-radius: 24px; overflow: hidden;
  background: var(--slot); box-shadow: 0 20px 46px rgba(43,40,37,.18); border: 6px solid var(--alt);
}
.stat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 38px; }
.stat3 .n { font-family: "Jost", sans-serif; font-size: 30px; font-weight: 500; }
.stat3 .l { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* Vorher/Nachher */
.compare-panel {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: center;
  background: var(--alt); border-radius: 32px; padding: 30px; min-width: 0;
}
.compare-panel > * { min-width: 0; }
.compare {
  position: relative; overflow: hidden; background: var(--slot); aspect-ratio: 4/3;
  user-select: none; touch-action: none; cursor: ew-resize; border-radius: 24px;
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare .top-wrap { position: absolute; top: 0; bottom: 0; left: 0; overflow: hidden; width: 50%; }
.compare .top-wrap img { width: var(--track-w, 640px); max-width: none; }
.compare .pill {
  position: absolute; top: 16px; font-family: "Jost", sans-serif; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink); background: rgba(250,245,240,.94); border-radius: 999px; padding: 7px 14px; z-index: 3;
}
.compare .pill.before { left: 16px; }
.compare .pill.after { right: 16px; }
.compare .divider { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.9); left: 50%; z-index: 2; }
.compare .handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 54px; height: 54px; border-radius: 999px; background: var(--bg);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 6px 22px rgba(20,17,14,.28); font-size: 10px; color: var(--ink); cursor: ew-resize; outline-offset: 4px;
}
.spec-rows .r { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.spec-rows .r:last-child { border-bottom: 0; }
.spec-rows .r span:first-child { color: var(--muted); }

/* Galerie-Karten */
.gallery3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 30px; }
.g-card { background: var(--alt); border-radius: 26px; padding: 18px; min-width: 0; }
.g-card .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.g-card .half { position: relative; background: var(--slot); aspect-ratio: 1/1; border-radius: 18px; overflow: hidden; }
.g-card .half img { width: 100%; height: 100%; object-fit: cover; }
.g-card .lbl {
  position: absolute; left: 9px; top: 9px; font-family: "Jost", sans-serif; font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink); background: rgba(250,245,240,.92); border-radius: 999px; padding: 5px 10px;
}
.g-card .body { padding: 20px 8px 6px; }
.g-card .titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.g-card .t { font-family: "Jost", sans-serif; font-size: 19px; font-weight: 500; }
.g-card .m { font-family: "Jost", sans-serif; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); white-space: nowrap; }
.g-card .desc { font-size: 14px; line-height: 1.7; color: var(--muted); margin-top: 10px; }

/* Ablauf-Karten */
.ablauf { display: grid; gap: 14px; }
.ablauf .row {
  background: var(--bg); border-radius: 22px; padding: 28px 34px;
  display: grid; grid-template-columns: 64px 1fr 1.5fr 150px; gap: 28px; align-items: center;
}
.ablauf .nr { font-family: "Jost", sans-serif; font-weight: 400; font-size: 30px; color: var(--outline); }
.ablauf .titel { font-family: "Jost", sans-serif; font-weight: 500; font-size: 20px; }
.ablauf .text { font-size: 15px; line-height: 1.75; color: var(--muted); }
.ablauf .meta { font-family: "Jost", sans-serif; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); text-align: right; }
.facts { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; margin-top: 40px; font-size: 15px; color: var(--muted); }
.facts strong { color: var(--ink); font-weight: 400; }

/* Curriculum-Akkordeon (dunkel) */
.acc { display: grid; gap: 12px; }
.acc-item { background: rgba(255,255,255,.055); border-radius: 20px; padding: 4px 30px; }
.acc-item > button {
  width: 100%; background: transparent; border: 0; padding: 24px 0;
  display: flex; align-items: center; gap: 24px; cursor: pointer; text-align: left; color: var(--white);
}
.acc-item > button:hover { opacity: .75; }
.acc-item > button .nr { font-family: "Jost", sans-serif; font-size: 11px; letter-spacing: .18em; color: rgba(255,255,255,.45); min-width: 30px; }
.acc-item > button .t { font-family: "Jost", sans-serif; font-weight: 500; font-size: 22px; letter-spacing: -0.005em; flex: 1; }
.acc-item > button .meta { font-family: "Jost", sans-serif; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45); white-space: nowrap; }
.acc-item > button .z { font-size: 20px; width: 18px; text-align: center; font-weight: 300; }
.acc-panel { display: none; padding: 0 0 28px 54px; }
.acc-item.open .acc-panel { display: block; }
.acc-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; align-items: start; }
.acc-panel .lz { display: grid; grid-template-columns: 16px 1fr; gap: 12px; font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.7); padding: 5px 0; }
.acc-panel .lz span:first-child { color: rgba(255,255,255,.35); }
.acc-facts { display: grid; gap: 12px; font-family: "Jost", sans-serif; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.acc-facts .r { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.16); }
.acc-facts .r:last-child { border-bottom: 0; padding-bottom: 0; }
.acc-facts .k { color: rgba(255,255,255,.42); }

/* Stimmen */
.videos3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.video-card .poster { position: relative; aspect-ratio: 4/5; border-radius: 26px; overflow: hidden; background: var(--slot); }
.video-card .play {
  position: absolute; left: 18px; bottom: 18px; width: 46px; height: 46px; border-radius: 999px;
  background: rgba(250,245,240,.92); display: flex; align-items: center; justify-content: center;
  color: var(--ink); font-size: 12px; pointer-events: none;
}
.video-card .row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 18px 4px 0; }
.video-card .name { font-family: "Jost", sans-serif; font-size: 18px; font-weight: 500; }
.video-card .len { font-family: "Jost", sans-serif; font-size: 10px; letter-spacing: .14em; color: var(--taupe); }
.video-card .ort { font-size: 14px; color: var(--muted); margin-top: 5px; padding: 0 4px; }
.quotes3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 34px; }
.q-card { background: var(--alt); border-radius: 26px; padding: 34px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.q-card .stars { letter-spacing: .16em; color: var(--sage); font-size: 13px; }
.q-card .q { font-size: 16px; line-height: 1.8; color: var(--ink); text-wrap: pretty; }
.q-card .who { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
.q-card .who .src { color: var(--taupe); }

/* Ausstattung */
.equip-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 48px; }
.equip-rows .r { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.equip-rows .r:last-child { border-bottom: 0; }
.equip-rows .r span:first-child { color: var(--muted); }
.equip-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.equip-grid > div { border-radius: 22px; overflow: hidden; background: var(--slot); aspect-ratio: 3/2; }
.equip-grid > div.big { grid-row: span 2; aspect-ratio: auto; height: 100%; border-radius: 26px; }
.equip-grid > div img { width: 100%; height: 100%; object-fit: cover; }

/* Leistungen */
.leist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.l-card { background: var(--alt); border-radius: 24px; padding: 34px; min-width: 0; }
.l-card .nr { font-family: "Jost", sans-serif; font-size: 11px; letter-spacing: .2em; color: var(--taupe); }
.l-card .t { font-family: "Jost", sans-serif; font-weight: 500; font-size: 21px; margin: 14px 0 12px; }
.l-card .d { font-size: 15px; line-height: 1.8; color: var(--muted); }

/* Investition */
.price-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; align-items: stretch; }
.p-card { background: var(--bg); border-radius: 28px; padding: 38px; display: flex; flex-direction: column; min-width: 0; }
.p-card { position: relative; }
.p-card.hi {
  box-shadow: 0 24px 50px rgba(43,40,37,.13);
  border: 2px solid var(--sage);
  transform: translateY(-10px);
}
.p-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--sage); color: var(--white);
  font-family: "Jost", sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 8px 20px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(43,40,37,.16);
}
.p-card .k { font-family: "Jost", sans-serif; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }
.p-card.hi .k { color: var(--label); }
.p-card .t { font-family: "Jost", sans-serif; font-weight: 500; font-size: 24px; margin: 14px 0 6px; }
.p-card .p { font-family: "Jost", sans-serif; font-weight: 500; font-size: 40px; margin: 10px 0 16px; }
.p-card .d { font-size: 15px; line-height: 1.8; color: var(--muted); margin: 0 0 26px; }
.p-card .btn { margin-top: auto; font-size: 10px; padding: 15px 26px; }
.calc .head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.calc .head .t { font-family: "Jost", sans-serif; font-weight: 500; font-size: 22px; margin: 0; }
.calc .head .b { font-family: "Jost", sans-serif; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); }
.calc .note { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 12px 0 20px; }
.calc .r { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.calc .r span:first-child { color: var(--muted); }
.calc .total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 0 0; }
.calc .total .n { font-family: "Jost", sans-serif; font-weight: 500; font-size: 28px; }

/* FAQ (helle Akkordeon-Karten) */
.faq { display: grid; gap: 12px; }
.faq-item { background: var(--alt); border-radius: 20px; padding: 4px 30px; }
.faq-item > button {
  width: 100%; background: transparent; border: 0; padding: 24px 0;
  display: flex; align-items: baseline; gap: 24px; cursor: pointer; text-align: left; color: var(--ink);
}
.faq-item > button:hover { opacity: .7; }
.faq-item > button .t { font-family: "Jost", sans-serif; font-weight: 500; font-size: 19px; flex: 1; line-height: 1.4; }
.faq-item > button .z { font-size: 20px; color: var(--label); width: 16px; text-align: center; font-weight: 300; }
.faq-panel { display: none; padding: 0 40px 26px 0; font-size: 16px; line-height: 1.85; color: var(--muted); max-width: 62ch; text-wrap: pretty; }
.faq-item.open .faq-panel { display: block; }

/* Buchung (dunkel) */
.booking-split { display: grid; grid-template-columns: 1fr 1.02fr; gap: 80px; align-items: center; min-width: 0; }
.booking-split > * { min-width: 0; }
.booking-rows .r { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.16); font-size: 15px; color: rgba(255,255,255,.68); }
.booking-rows .r:last-child { border-bottom: 0; }
.booking-rows .r .v { color: var(--white); }
.booking-rows .r a { color: var(--white); border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: 2px; }
.booking-rows .r a:hover { border-color: var(--white); }
.booking-panel { background: var(--bg); border-radius: 30px; padding: 40px; color: var(--ink); }
.booking-panel .head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.booking-panel .head .t { font-family: "Jost", sans-serif; font-weight: 500; font-size: 24px; }
.booking-panel .head .b { font-family: "Jost", sans-serif; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); }
.booking-panel .info-rows { margin-top: 22px; }
.info-rows .r { display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.7; }
.info-rows .r:last-child { border-bottom: 0; }
.info-rows .k { font-family: "Jost", sans-serif; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); padding-top: 4px; }

/* Footer */
footer { padding: 80px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 52px; border-bottom: 1px solid var(--line); }
.foot-grid .col { display: grid; gap: 11px; align-content: start; font-size: 15px; }
.foot-grid .k { font-family: "Jost", sans-serif; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); margin-bottom: 4px; }
.foot-grid a:hover { color: var(--label); }
.foot-meta { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 24px; font-size: 13px; color: var(--taupe); }

/* ---------- Termin / Danke ---------- */
.page-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0; }
.page-nav .brand { display: flex; align-items: center; gap: 12px; font-family: "Jost", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.page-nav .brand img { width: 34px; height: 34px; }
.page-nav .btn { font-size: 10px; padding: 13px 26px; }
.booking-card { background: var(--white); border-radius: 30px; padding: 16px; min-height: 640px; }
.steps { counter-reset: step; }
.steps .step { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.steps .step:last-child { border-bottom: 0; }
.steps .num {
  counter-increment: step; width: 34px; height: 34px; border-radius: 999px;
  background: var(--sage); color: var(--white); display: flex; align-items: center; justify-content: center;
  font-family: "Jost", sans-serif; font-size: 13px; font-weight: 500;
}
.steps .num::before { content: counter(step); }
.steps .t { font-family: "Jost", sans-serif; font-weight: 500; font-size: 17px; }
.steps .d { color: var(--muted); font-size: 15px; line-height: 1.75; margin-top: 3px; }
.confirm-card { background: var(--white); border-radius: 30px; padding: 48px 42px; text-align: center; }
.confirm-card .check {
  width: 54px; height: 54px; border-radius: 999px; background: var(--sage); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 0 auto 22px;
}
.confirm-card .when { font-family: "Jost", sans-serif; font-size: clamp(22px, 2.8vw, 30px); font-weight: 500; margin-top: 18px; line-height: 1.3; }
.confirm-card .sub { color: var(--muted); font-size: 14px; margin-top: 10px; }
.cal-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.cal-btns .btn { font-size: 10px; padding: 14px 28px; }
.callout {
  background: var(--dark); color: rgba(250,245,240,.75); border-radius: 26px;
  padding: 30px 34px; display: grid; grid-template-columns: 40px 1fr; gap: 18px; align-items: start; text-align: left;
}
.callout .ic { font-size: 22px; line-height: 1.2; }
.callout .t { font-family: "Jost", sans-serif; font-weight: 500; font-size: 17px; color: var(--white); }
.callout .d { font-size: 14px; line-height: 1.75; margin-top: 5px; }

/* ---------- Wie funktioniert SMP (sticky Steps, dunkel) ---------- */
.how .sec-head { margin-bottom: 72px; }
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: start; min-width: 0; }
.how-grid > * { min-width: 0; }
.how-media { position: sticky; top: 10vh; height: 80vh; max-height: 640px; border-radius: 30px; overflow: hidden; background: rgba(255,255,255,.05); }
.how-img { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.how-img.is-active { opacity: 1; }
.how-img img { width: 100%; height: 100%; object-fit: cover; }
.how-steps { display: grid; gap: 8vh; padding: 6vh 0 10vh; }
.how-step { display: grid; grid-template-columns: 72px 1fr; gap: 26px; align-items: start; opacity: .28; transition: opacity .5s ease; }
.how-step.is-active { opacity: 1; }
.how-step .num { font-family: "Jost", sans-serif; font-weight: 300; font-size: 44px; line-height: 1; color: var(--sage); padding-top: 4px; }
.how-step .t { font-family: "Jost", sans-serif; font-weight: 500; font-size: 25px; color: var(--white); margin: 0 0 12px; }
.how-step .d { font-size: 15.5px; line-height: 1.85; color: rgba(255,255,255,.68); max-width: 44ch; }
.how-img-mobile { display: none; }

/* ---------- Techniken ---------- */
.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tech-card { background: var(--bg); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease; }
.tech-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(43,40,37,.12); }
.tech-im { aspect-ratio: 3/4; overflow: hidden; background: var(--slot); }
.tech-im img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.tech-body { padding: 30px 30px 34px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.tech-body .nr { font-family: "Jost", sans-serif; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); }
.tech-body .t { font-family: "Jost", sans-serif; font-weight: 500; font-size: 24px; margin: 0; }
.tech-body .d { font-size: 14.5px; line-height: 1.8; color: var(--muted); }
.tech-body .tag { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-family: "Jost", sans-serif; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity: 1; transform: none; }
/* GSAP steuert Opazität/Transform selbst — CSS-Transition würde dagegenlaufen */
.has-gsap .reveal { transition: none; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero { min-height: 0; }
  .how-grid { grid-template-columns: 1fr; gap: 0; }
  .how-media { display: none; }
  .how-steps { gap: 44px; padding: 0; }
  .how-step { opacity: 1; grid-template-columns: 52px 1fr; gap: 18px; }
  .how-step .num { font-size: 32px; }
  .how-img-mobile { display: block; margin-top: 18px; border-radius: 20px; overflow: hidden; aspect-ratio: 4/3; background: rgba(255,255,255,.06); }
  .how-img-mobile img { width: 100%; height: 100%; object-fit: cover; }
  .how .sec-head { margin-bottom: 48px; }
  .tech-grid { grid-template-columns: 1fr; gap: 22px; }
  .tech-im { aspect-ratio: 16/10; }
  .tech-im img { height: 100%; }
  .diff .row { grid-template-columns: 1fr; gap: 10px; padding: 22px 24px; }
  .diff .row.head { display: none; }
  .diff .k { font-size: 16px; }
  .diff .market::before { content: "Marktüblich: "; font-family: "Jost", sans-serif; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); display: block; margin-bottom: 2px; }
  .hero-nav .links { display: none; }
  .navbar .links { display: none; }
  .hero-grid { grid-template-columns: 1fr; padding: 40px 44px 88px; gap: 48px; }
  .hero-collage { height: 340px; max-width: 460px; }
  .trust-grid { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .trust-grid > div:nth-child(3) { border-left: 0; }
  .split, .split.even, .split-trainer { grid-template-columns: 1fr; gap: 44px; }
  .cols3 { grid-template-columns: 1fr; gap: 0; }
  .cols3 > .col { border-left: 0; border-top: 1px solid var(--line); padding: 40px 0 0; margin-top: 40px; }
  .cols3 > .col:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
  .cols3 .h-col { min-height: 0; }
  .compare-panel { grid-template-columns: 1fr; gap: 36px; }
  .gallery3, .videos3, .quotes3 { grid-template-columns: 1fr; }
  .ablauf .row { grid-template-columns: 48px 1fr; row-gap: 8px; }
  .ablauf .text { grid-column: 2; }
  .ablauf .meta { grid-column: 2; text-align: left; }
  .acc-cols { grid-template-columns: 1fr; gap: 24px; }
  .equip-head { grid-template-columns: 1fr; gap: 36px; align-items: start; }
  .equip-grid { grid-template-columns: 1fr 1fr; }
  .equip-grid > div.big { grid-row: auto; grid-column: span 2; aspect-ratio: 3/2; }
  .leist-grid, .price-grid { grid-template-columns: 1fr; }
  .booking-split { grid-template-columns: 1fr; gap: 44px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .trainer-collage { max-width: 480px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 22px; }
  section { padding: 76px 0; }
  .hero-nav { padding: 20px 22px; gap: 14px; }
  .hero-nav .btn { font-size: 9.5px; padding: 12px 18px; letter-spacing: .12em; }
  .hero-grid { padding: 32px 22px 72px; }
  .hero-collage { height: 260px; }
  .chips { display: flex; flex-wrap: wrap; } /* 2×max-content-Raster liefe auf 320px über */
  .rating-row .txt { white-space: normal; font-size: 13px; }
  .chips { max-width: none; gap: 8px; }
  .chip { font-size: 8.5px; letter-spacing: .1em; padding: 7px 12px; }
  .rating-row .txt .big { font-size: 16px; }
  .rating-row .stars { font-size: 15px; }
  .btn-big { padding: 16px 28px; }
  .acc-item > button { gap: 14px; }
  .acc-item > button .meta { display: none; }
  .booking-rows .r { flex-wrap: wrap; }
  .equip-rows .r { flex-wrap: wrap; }
  .spec-rows .r { flex-wrap: wrap; }
  .calc .r { flex-wrap: wrap; }
  .price-grid { gap: 16px; }
  .tech-body { padding: 24px 22px 28px; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-grid > div { border-left: 0; padding: 0; }
  .sec-head { margin-bottom: 44px; }
  .ablauf .row { padding: 22px 22px; }
  .acc-item { padding: 2px 20px; }
  .acc-item > button .t { font-size: 18px; }
  .acc-panel { padding-left: 0; }
  .faq-item { padding: 2px 20px; }
  .faq-panel { padding-right: 0; }
  .booking-panel { padding: 28px 24px; }
  .confirm-card { padding: 34px 24px; }
  .p-card { padding: 30px 26px; }
  .q-card { padding: 26px 24px; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .info-rows .r { grid-template-columns: 1fr; gap: 4px; }
  .stat3 { gap: 14px; }
  h1, h2, h3, p, div { overflow-wrap: break-word; }
}

/* ---------- Rechtsseiten (Impressum, Datenschutz) ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 26px 0 96px; }
.legal .h-section { margin-bottom: 40px; }
.legal-h2 {
  font-family: "Jost", sans-serif; font-weight: 500; font-size: 24px; line-height: 1.3;
  margin: 52px 0 14px; padding-top: 24px; border-top: 1px solid var(--line);
}
.legal-h3 { font-family: "Jost", sans-serif; font-weight: 500; font-size: 18px; margin: 32px 0 10px; }
.legal-p { font-size: 15.5px; line-height: 1.9; color: var(--muted); margin: 0 0 16px; }
.legal-p strong { color: var(--ink); font-weight: 600; }
.legal-p a, .legal-list a { color: var(--ink); border-bottom: 1px solid var(--outline); }
.legal-p a:hover, .legal-list a:hover { color: var(--label); border-color: var(--label); }
.legal-list { margin: 0 0 18px; padding-left: 20px; }
.legal-list li { font-size: 15.5px; line-height: 1.9; color: var(--muted); margin-bottom: 6px; }
@media (max-width: 640px) {
  .legal { padding-bottom: 64px; }
  .legal-h2 { font-size: 21px; margin-top: 40px; }
  .legal-p, .legal-list li { font-size: 15px; }
}

/* Ortszeile im Hero (GEO-Signal) */
.hero-geo {
  font-family: "Jost", sans-serif; font-size: 12px; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.62);
  margin-top: 16px;
}
@media (max-width: 640px) { .hero-geo { font-size: 10.5px; letter-spacing: .14em; } }