/* ==========================================================================
   Progress Tennis Wilk & Leupold UG — Stylesheet
   Markenfarben: Schwarz, Limette #C8D86A, Graublau #8BA8AC
   Keine externen Ressourcen: keine Google Fonts, kein CDN, keine Cookies.
   ========================================================================== */

:root{
  --schwarz:#0D0F0C;
  --schwarz-2:#15180F;
  --karte:#1B1F17;
  --karte-2:#232819;
  --linie:#333828;
  --weiss:#F4F5EF;
  --grau:#B9BFAE;
  --grau-2:#8A9180;
  --limette:#C8D86A;
  --limette-dunkel:#A9BA4C;
  --graublau:#8BA8AC;
  --graublau-dunkel:#3E5457;
  --whatsapp:#8BA8AC;        /* Grau-Blau aus dem Logo („GRESS“) */
  --whatsapp-hell:#A3BCC0;   /* Aufhellung beim Überfahren */
  --radius:6px;
  --breite:1180px;
  --schmal:760px;
  --fsys:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--schwarz);color:var(--weiss);
  font-family:var(--fsys);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding-bottom:0;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--limette);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--limette);outline-offset:3px}

.wrap{max-width:var(--breite);margin:0 auto;padding:0 22px}
.schmal{max-width:var(--schmal)}

/* --- Typografie ---------------------------------------------------------- */
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
h1{font-size:clamp(34px,6vw,62px)}
h2{font-size:clamp(26px,3.6vw,40px)}
h3{font-size:20px;letter-spacing:-.01em}
p{max-width:68ch}
.lead{font-size:clamp(18px,2vw,21px);color:var(--grau)}
.kicker{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--limette);margin-bottom:14px
}
.dim{color:var(--grau)}
strong{color:#fff}

/* --- Skip-Link ----------------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--limette);color:#14170F;
  padding:12px 18px;font-weight:700;z-index:200}
.skip:focus{left:0}

/* --- Kopfzeile ----------------------------------------------------------- */
.kopf{
  position:sticky;top:0;z-index:100;
  background:rgba(13,15,12,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linie);
}
.kopf-innen{display:flex;align-items:center;gap:18px;height:68px}
.logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.logo:hover{text-decoration:none}
.logo img{width:auto;display:block}
.logo .logo-voll{height:32px}
.logo .logo-kompakt{display:none;height:28px}
@media(max-width:760px){
  .logo .logo-voll{display:none}
  .logo .logo-kompakt{display:block}
}

.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{color:var(--weiss);font-size:15px;font-weight:600;padding:9px 12px;border-radius:5px;
  text-decoration:none;white-space:nowrap}
.nav a:hover{background:var(--karte);text-decoration:none}
.nav a[aria-current="page"]{color:var(--limette)}

.menu{position:relative}
.menu>button{
  background:none;border:0;color:var(--weiss);font:inherit;font-size:15px;font-weight:600;
  padding:9px 12px;border-radius:5px;cursor:pointer;display:flex;align-items:center;gap:6px
}
.menu>button:hover{background:var(--karte)}
.menu>button::after{content:"";width:6px;height:6px;border-right:2px solid var(--grau-2);
  border-bottom:2px solid var(--grau-2);transform:rotate(45deg) translateY(-2px)}
.menu-liste{
  position:absolute;top:100%;left:0;min-width:250px;background:var(--karte);
  border:1px solid var(--linie);border-radius:var(--radius);padding:7px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);display:none;flex-direction:column;gap:2px
}
.menu[data-offen="ja"] .menu-liste{display:flex}
/* Am Rechner per Überfahren öffnen — ohne Lücke, damit nichts zuklappt */
@media(min-width:1081px){
  .menu:hover .menu-liste,
  .menu:focus-within .menu-liste{display:flex}
}
.menu-liste a{padding:10px 12px;font-weight:600;font-size:15px}

.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:var(--radius);font-weight:800;font-size:15px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;line-height:1
}
.knopf:hover{text-decoration:none;transform:translateY(-1px)}
.knopf-haupt{background:var(--limette);color:#14170F}
.knopf-haupt:hover{background:#D6E67A}
.knopf-rand{background:transparent;color:var(--weiss);border-color:var(--linie)}
.knopf-rand:hover{border-color:var(--graublau);background:var(--karte)}
.knopf-wa{background:var(--whatsapp);color:#0E1A1B}
.knopf-wa:hover{background:var(--whatsapp-hell)}
.knopf-klein{padding:10px 16px;font-size:14px}
.kopf .knopf{margin-left:6px}

.burger{display:none;margin-left:auto;background:none;border:1px solid var(--linie);
  border-radius:5px;padding:9px 11px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--weiss);margin:4px 0}

@media(max-width:1080px){
  .nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--schwarz-2);
    border-bottom:1px solid var(--linie);flex-direction:column;align-items:stretch;
    gap:2px;padding:14px 22px 20px}
  .nav[data-offen="ja"]{display:flex}
  .nav a,.menu>button{width:100%;padding:12px 10px;font-size:16px}
  .menu-liste{position:static;background:transparent;border:0;box-shadow:none;min-width:0;
    padding:0 0 0 12px;border-left:2px solid var(--linie);margin:2px 0 8px}
  .menu>button::after{margin-left:auto;transition:transform .15s}
  .menu[data-offen="ja"]>button::after{transform:rotate(-135deg) translateY(-2px)}
  .kopf .knopf{margin:10px 0 0;width:100%}
  .burger{display:block}
}

/* --- Hero ---------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--linie)}
.hero-bild{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(.92)}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(9,11,8,.93) 0%,rgba(9,11,8,.82) 42%,rgba(9,11,8,.42) 100%)}
.hero-innen{position:relative;z-index:2;padding:clamp(64px,10vw,120px) 0 clamp(56px,8vw,96px);
  max-width:720px}
.hero h1{margin-bottom:20px}
.hero .lead{margin-bottom:30px;max-width:56ch}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px}

.hero-klein{background:var(--schwarz-2);border-bottom:1px solid var(--linie)}
.hero-klein .hero-innen{padding:clamp(48px,7vw,84px) 0 clamp(40px,5vw,60px);max-width:820px}

/* --- Hinweisband --------------------------------------------------------- */
.band{background:var(--graublau);color:#0E1A1B}
.band-innen{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;
  padding-top:20px;padding-bottom:20px}
.band-text{flex:1 1 420px}
.band-text b{display:block;font-size:17px;margin-bottom:3px;color:#0A1415}
.band-text span{font-size:15px;color:#17292B}
.band .knopf-haupt{background:#0E1A1B;color:var(--limette)}
.band .knopf-haupt:hover{background:#17292B}

/* --- Abschnitte ---------------------------------------------------------- */
section{padding:clamp(52px,7vw,84px) 0}
section.eng{padding:clamp(38px,5vw,58px) 0}
section.wechsel{background:var(--schwarz-2)}
.kopfzeile{margin-bottom:38px;max-width:64ch}
.kopfzeile p{margin-top:14px}

/* --- Raster -------------------------------------------------------------- */
.raster{display:grid;gap:18px}
.raster-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.raster-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.raster-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:26px 24px}
.karte h3{margin-bottom:10px}
.karte p{color:var(--grau);font-size:16px}
.karte .zusatz{display:block;margin-top:14px;font-size:14px;font-weight:700;color:var(--limette)}
.karte-limette{border-color:var(--limette-dunkel)}
.karte-nummer{font-size:13px;font-weight:800;color:var(--limette);letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:10px;display:block}

/* --- Split (Bild + Text) ------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);align-items:center}
.split-bild{border-radius:var(--radius);overflow:hidden;background:var(--karte);
  aspect-ratio:4/3;background-size:cover;background-position:center}
.split-text h2{margin-bottom:16px}
.split-text p+p{margin-top:14px}
.split-text .knopfreihe{margin-top:24px}
.split.gedreht .split-bild{order:2}
@media(max-width:820px){.split{grid-template-columns:1fr}.split.gedreht .split-bild{order:0}}

/* --- Zahlenreihe --------------------------------------------------------- */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  background:var(--linie);border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden}
.zahl{background:var(--karte);padding:24px 22px}
.zahl b{display:block;font-size:34px;font-weight:800;color:var(--limette);letter-spacing:-.02em}
.zahl span{font-size:14px;color:var(--grau)}

/* --- Preistabelle -------------------------------------------------------- */
.tabelle-huelle{overflow-x:auto;border:1px solid var(--linie);border-radius:var(--radius);
  background:var(--karte)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:16px}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--linie)}
th{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grau-2);
  background:var(--karte-2);font-weight:800}
td{font-variant-numeric:tabular-nums}
td:first-child{font-weight:700;font-variant-numeric:normal}
tr:last-child td{border-bottom:0}
.tab-hinweis{font-size:14.5px;color:var(--grau);margin-top:14px}

/* --- Team ---------------------------------------------------------------- */
.person{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  overflow:hidden}
.person-bild{aspect-ratio:1/1;background-size:cover;background-position:center;
  background-color:var(--karte-2)}
.person-text{padding:22px 22px 26px}
.person-text .rolle{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--limette);display:block;margin-bottom:8px}
.person-text p{font-size:15.5px;color:var(--grau);margin-top:10px}

/* --- Schritte ------------------------------------------------------------ */
.schritte{counter-reset:s;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.schritt{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:24px;position:relative}
.schritt::before{counter-increment:s;content:counter(s);display:grid;place-items:center;
  width:34px;height:34px;border-radius:5px;background:var(--limette);color:#14170F;
  font-weight:800;margin-bottom:14px}
.schritt h3{margin-bottom:8px}
.schritt p{color:var(--grau);font-size:16px}

/* --- FAQ ----------------------------------------------------------------- */
.faq{border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;background:var(--karte)}
.faq details{border-bottom:1px solid var(--linie)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:18px 22px;cursor:pointer;font-weight:700;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--limette);font-size:22px;font-weight:800;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .antwort{padding:0 22px 20px;color:var(--grau)}
.faq .antwort p+p{margin-top:12px}

/* --- CTA-Block ----------------------------------------------------------- */
.cta{background:var(--karte-2);border:1px solid var(--linie);border-radius:var(--radius);
  padding:clamp(28px,4vw,44px);text-align:center}
.cta h2{margin-bottom:14px}
.cta p{margin:0 auto 26px;color:var(--grau)}
.cta .knopfreihe{justify-content:center}

/* --- Liste mit Haken ----------------------------------------------------- */
.haken{list-style:none;display:grid;gap:11px}
.haken li{padding-left:28px;position:relative;color:var(--grau)}
.haken li::before{content:"";position:absolute;left:2px;top:8px;width:12px;height:7px;
  border-left:2.5px solid var(--limette);border-bottom:2.5px solid var(--limette);
  transform:rotate(-45deg)}
.haken li b{color:var(--weiss)}

/* --- Fließtext (Rechtstexte) --------------------------------------------- */
.text{max-width:74ch}
.text h2{font-size:23px;margin:38px 0 12px}
.text h2:first-child{margin-top:0}
.text h3{font-size:18px;margin:24px 0 8px}
.text p{color:var(--grau);margin-bottom:12px}
.text ul{margin:0 0 14px 20px;color:var(--grau)}
.text li{margin-bottom:6px}
.text .stand{margin-top:34px;font-size:14px;color:var(--grau-2)}

/* --- Kontaktkarten ------------------------------------------------------- */
.kontaktkarte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:26px 24px}
.kontaktkarte h3{margin-bottom:6px}
.kontaktkarte .wert{font-size:17px;font-weight:700;color:var(--weiss);word-break:break-word}
.kontaktkarte p{color:var(--grau);font-size:15.5px;margin-top:8px}
.kontaktkarte .knopf{margin-top:18px}

/* --- Partnerlogos -------------------------------------------------------- */
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.logo-feld{background:#FFFFFF;border-radius:var(--radius);display:grid;place-items:center;
  padding:28px 26px;min-height:150px}
.logo-feld img{max-height:62px;max-width:100%;width:auto}
.logo-feld img.logo-breit{max-height:32px}
.logo-feld img.logo-rund{max-height:104px}
.logo-feld .platzhalter{color:#5A6152;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;text-align:center}

/* --- Fußzeile ------------------------------------------------------------ */
.fuss{background:var(--schwarz-2);border-top:1px solid var(--linie);
  padding:56px 0 30px;margin-top:0}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media(max-width:880px){.fuss-raster{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fuss-raster{grid-template-columns:1fr}}
.fuss h2{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grau-2);
  margin-bottom:14px;font-weight:800;line-height:1.15}
.fuss ul{list-style:none;display:grid;gap:9px}
.fuss a{color:var(--grau);font-size:15px}
.fuss a:hover{color:var(--weiss)}
.fuss address{font-style:normal;color:var(--grau);font-size:15px;line-height:1.7}
.fuss-unten{margin-top:40px;padding-top:22px;border-top:1px solid var(--linie);
  display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;
  font-size:14px;color:var(--grau-2)}
.fuss-unten a{font-size:14px}

/* --- Feste Handy-Leiste -------------------------------------------------- */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:150;display:none;gap:8px;
  padding:9px 11px calc(9px + env(safe-area-inset-bottom));
  background:rgba(11,13,10,.97);border-top:1px solid var(--linie)}
.leiste .knopf{flex:1;padding:14px 6px;font-size:15px}
@media(max-width:820px){
  .leiste{display:flex}
  body{padding-bottom:96px}
}

/* --- Bewegung reduzieren ------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .knopf:hover{transform:none}
}

/* --- Produktkarten (Schlägerbestand) ------------------------------------- */
.produkte{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
.produkt{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column}
.produkt-kopf{padding:13px 18px;background:var(--karte-2);
  border-bottom:1px solid var(--linie);border-left:4px solid var(--serie,var(--graublau))}
.produkt-kopf .serie{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--serie,var(--graublau))}
.produkt-boom{--serie:#C8D86A}
.produkt-speed{--serie:#8BA8AC}
.produkt-gravity{--serie:#C9A227}
.produkt-radical{--serie:#D2703A}
.produkt-extreme{--serie:#9E86C4}
.produkt-text{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.marken{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;min-height:20px}
.marke{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:3px}
.marke-neu{background:var(--limette);color:#14170F}
.marke-gebraucht{background:var(--graublau-dunkel);color:#DCE8EA}
.marke-alt{background:transparent;color:var(--grau-2);border:1px solid var(--linie)}
.produkt h3{font-size:19px;margin-bottom:16px}
.daten{display:flex;gap:20px;margin-bottom:14px;padding-bottom:14px;
  border-bottom:1px solid var(--linie)}
.daten dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grau-2);
  font-weight:700}
.daten dd{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.produkt .preis{font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--limette);
  margin:auto 0 14px;font-variant-numeric:tabular-nums}
.produkt-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.produkt-knoepfe .knopf{padding:11px 6px;font-size:14px}

/* --- Bewerbung ----------------------------------------------------------- */
.zwei-spalten{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px)}
@media(max-width:820px){.zwei-spalten{grid-template-columns:1fr}}

/* --- Anfrageformular ----------------------------------------------------- */
.formular{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:clamp(24px,4vw,36px);max-width:720px}
.feld{margin-bottom:20px}
.feld label{display:block;font-size:14px;font-weight:700;letter-spacing:.02em;margin-bottom:7px}
.feld .hilfe{display:block;font-weight:400;font-size:13.5px;color:var(--grau-2);margin-top:3px}
.feld input,.feld select,.feld textarea{
  width:100%;background:var(--schwarz-2);color:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--radius);padding:12px 14px;font:inherit;font-size:16px}
.feld textarea{min-height:110px;resize:vertical}
.feld select{appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,var(--grau-2) 50%),
  linear-gradient(135deg,var(--grau-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--limette);outline:none}
.feld-zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.feld-zwei{grid-template-columns:1fr}}
.formular .knopfreihe{margin-top:26px}
.formular-hinweis{font-size:14px;color:var(--grau-2);margin-top:18px;max-width:60ch}
.fehler{color:#E58A70;font-size:14.5px;margin-top:12px;display:none}
.fehler[data-sichtbar="ja"]{display:block}

/* --- Blog ---------------------------------------------------------------- */
.beitraege{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.beitrag{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:24px 26px 26px;display:flex;flex-direction:column}
.beitrag time{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grau-2)}
.beitrag h3{font-size:21px;margin:10px 0 12px;letter-spacing:-.01em}
.beitrag h3 a{color:var(--weiss);text-decoration:none}
.beitrag h3 a:hover{color:var(--limette);text-decoration:none}
.beitrag p{color:var(--grau);font-size:16px;margin-bottom:16px}
.beitrag .zusatz{margin-top:auto;font-weight:700;font-size:15px}

.weiterlesen{margin-top:40px;padding-top:24px;border-top:1px solid var(--linie)}
.weiterlesen h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grau-2);margin-bottom:12px}
.weiterlesen ul{list-style:none;display:grid;gap:9px;margin:0;padding:0}
.weiterlesen a{font-weight:600}

/* --- Querverweise am Seitenende ------------------------------------------ */
.querverweise{border-top:1px solid var(--linie);padding-top:24px}
.querverweise p{color:var(--grau);margin-bottom:14px;max-width:68ch}
.querverweise ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0}
.querverweise a{font-weight:600;font-size:15.5px}

/* --- Stimmen ------------------------------------------------------------- */
.stimmen{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.stimme{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:26px 26px 24px;margin:0;display:flex;flex-direction:column}
.stimme blockquote{margin:0 0 18px;font-size:17.5px;line-height:1.6;color:var(--weiss);
  position:relative;padding-left:20px;border-left:3px solid var(--limette)}
.stimme figcaption{margin-top:auto;font-size:14.5px;font-weight:700;color:var(--weiss)}
.stimme figcaption span{display:block;font-weight:400;font-size:13.5px;color:var(--grau-2);
  margin-top:3px}
.knopf-tel{flex:0 0 auto;min-width:96px}

/* --- Trainingsplan ------------------------------------------------------- */
.plan-filter{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end;
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:26px}
.plan-filter .feld{margin:0;min-width:190px}
.plan-filter label{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--grau-2);font-weight:700}
.plan-filter .schalter{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;
  padding-bottom:12px}
.plan-filter input[type=checkbox]{width:19px;height:19px;accent-color:var(--limette)}
.plan-zusammenfassung{font-size:15px;color:var(--limette);font-weight:700;
  margin-left:auto;padding-bottom:12px}

.plan-jetzt{background:var(--karte-2);border:1px solid var(--linie);
  border-left:4px solid var(--limette);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:32px}
.plan-jetzt h2{font-size:15px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grau-2);margin-bottom:14px}

.tag{margin-bottom:34px}
.tag:last-child{margin-bottom:0}
.tag h3{font-size:17px;letter-spacing:.02em;margin:0 0 14px;
  padding-bottom:9px;border-bottom:1px solid var(--linie)}
.tag-heute h3{color:var(--limette)}
.heute{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:var(--limette);color:#14170F;padding:3px 8px;border-radius:3px;
  vertical-align:middle;margin-left:8px}
.einheiten{list-style:none;display:grid;gap:10px;margin:0;padding:0}

/* Vier Spalten, feste Zeilenhöhe: Zeilen ohne Anfrage-Knopf sind genauso
   hoch wie Zeilen mit Knopf, damit der Rhythmus nicht springt. */
.einheit{display:grid;grid-template-columns:112px minmax(0,1fr) auto 118px;
  column-gap:20px;row-gap:0;align-items:center;min-height:70px;
  background:var(--karte);border:1px solid var(--linie);border-left:3px solid var(--grau-2);
  border-radius:var(--radius);padding:12px 18px}
.einheit-frei{border-left-color:var(--limette)}
.einheit-wenige{border-left-color:#C9A227}
.einheit-belegt{border-left-color:var(--linie);opacity:.72}
.einheit-jetzt{outline:2px solid var(--limette);outline-offset:1px}
.einheit .zeit{font-weight:700;font-variant-numeric:tabular-nums;font-size:15px;
  white-space:nowrap;color:var(--grau-2)}
.einheit .was{min-width:0}
.einheit .was b{display:block;font-size:16px;line-height:1.3;margin-bottom:3px}
.einheit .wo{display:block;font-size:14px;color:var(--grau-2);line-height:1.3}
.einheit .platz{font-size:14px;color:var(--grau);font-weight:600;
  text-align:right;white-space:nowrap}
.einheit-frei .platz{color:var(--limette)}
.einheit-wenige .platz{color:#D8B43A}
.einheit .knopf{width:100%;justify-self:end}
.knopf-leer{display:block;min-height:38px}

/* Mittlere Breiten: Knopfspalte schrumpft, Ort rutscht unter den Titel */
@media(max-width:1080px){
  .einheit{grid-template-columns:104px minmax(0,1fr) auto 108px;column-gap:16px;
    padding:12px 14px}
}

/* Schmal: zwei Zeilen — oben Zeit und Status, darunter Titel, dann Knopf */
@media(max-width:700px){
  .einheit{grid-template-columns:1fr auto;column-gap:14px;row-gap:0;
    min-height:0;padding:14px 16px}
  .einheit .zeit{grid-column:1;grid-row:1;align-self:center}
  .einheit .platz{grid-column:2;grid-row:1;text-align:right;align-self:center}
  .einheit .was{grid-column:1 / -1;grid-row:2;margin-top:8px}
  .einheit .was b{font-size:17px}
  .einheit .knopf{grid-column:1 / -1;grid-row:3;width:auto;justify-self:start;
    margin-top:14px;padding-left:26px;padding-right:26px}
  .knopf-leer{display:none}
  .plan-zusammenfassung{margin-left:0;padding-bottom:0}
  .einheiten{gap:12px}
  .tag{margin-bottom:30px}
}

/* --- Planverwaltung ------------------------------------------------------ */
.verwaltung-tabelle{overflow-x:auto;border:1px solid var(--linie);border-radius:var(--radius);
  background:var(--karte)}
.verwaltung-tabelle table{min-width:900px;font-size:14.5px}
.verwaltung-tabelle input,.verwaltung-tabelle select{
  width:100%;background:var(--schwarz-2);color:var(--weiss);border:1px solid var(--linie);
  border-radius:4px;padding:8px 10px;font:inherit;font-size:14.5px}
.verwaltung-tabelle td{padding:8px 10px}
.loeschen{background:transparent;border:1px solid var(--linie);color:var(--grau);
  border-radius:4px;padding:7px 11px;cursor:pointer;font-size:14px}
.loeschen:hover{border-color:var(--crit,#B0432C);color:#E58A70}
.meldung{margin-top:16px;font-size:15px;font-weight:600}
.meldung[data-art="gut"]{color:var(--limette)}
.meldung[data-art="fehler"]{color:#E58A70}
.anzahl{font-weight:700;color:var(--grau)}
.warnkasten{background:var(--karte);border:1px solid var(--linie);border-left:3px solid #C9A227;
  border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px}
.warnkasten h2{font-size:18px;margin-bottom:10px}
.warnkasten p{color:var(--grau);font-size:16px}

/* --- Newsletter ---------------------------------------------------------- */
.newsletter{border:1px solid var(--linie);border-radius:var(--radius);
  padding:34px 32px;background:var(--flaeche)}
.newsletter h2{margin:0 0 10px}
.newsletter p{margin:0 0 18px;color:var(--dim);max-width:60ch}
.newsletter .knopfreihe{margin-bottom:14px}
.newsletter .formular-hinweis{margin:0}
@media(max-width:640px){.newsletter{padding:26px 20px}}

/* --- Kanäle (intern) ----------------------------------------------------- */
.kanal-eingabe{border:1px solid var(--linie);border-radius:var(--radius);
  padding:26px 24px;background:var(--flaeche);margin-bottom:30px}
.feldreihe{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:700px){.feldreihe{grid-template-columns:1fr}}
.kanal-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1000px){.kanal-raster{grid-template-columns:1fr}}
.kanal{border:1px solid var(--linie);border-radius:var(--radius);padding:20px 18px;
  background:var(--flaeche);display:flex;flex-direction:column}
.kanal-kopf{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:12px}
.kanal-kopf h3{margin:0}
.zaehler{font-size:12.5px;color:var(--dim);white-space:nowrap}
.zaehler[data-art="fehler"]{color:#E86A6A;font-weight:600}
.kanal textarea{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;line-height:1.55;resize:vertical}
.kanal .knopfreihe{margin:14px 0 10px}
.kanal .formular-hinweis{margin:0}
#verteiler{margin-top:40px;border:1px solid var(--linie);border-radius:var(--radius);
  padding:26px 24px;background:var(--flaeche)}
#verteiler h2{margin:0 0 10px}
#verteiler > p{color:var(--dim);max-width:70ch}
#verteiler textarea{width:100%;margin-top:6px}
.portionsliste{list-style:none;margin:14px 0 0;padding:0;display:flex;
  flex-wrap:wrap;gap:10px}
.portionen{margin-top:16px}

/* --- Kompakter Trainingsplan auf der Startseite --------------------------- */
#plan-kompakt[hidden]{display:none}
.kompakt-kopf{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:20px}
.kompakt-kopf h2{margin:0 0 6px}
.kompakt-zahl{margin:0;font-size:15px;color:var(--limette);font-weight:700}
.kompakt-kopf .knopf{flex-shrink:0}
@media(max-width:560px){
  .kompakt-kopf{align-items:flex-start}
  .kompakt-kopf .knopf{width:100%;text-align:center}
}

/* --- Siegel für Exklusivpartnerschaften ---------------------------------- */
.siegel{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 9px;border-radius:3px;margin-bottom:12px;
  background:var(--limette);color:#14170F}
.karte .siegel{margin-top:-2px}

/* --- Schmale Logoreihe (Startseite) -------------------------------------- */
.logos-schmal{margin:8px 0 34px;max-width:620px;margin-left:auto;margin-right:auto}
.siegel-ruhig{background:transparent;color:var(--grau-2);border:1px solid var(--linie)}

/* WhatsApp-Knopf auf grau-blauem Grund umkehren (sonst unsichtbar) */
.band .knopf-wa{background:#0E1A1B;color:var(--graublau)}
.band .knopf-wa:hover{background:#16262A;color:var(--weiss)}
.split-bild-hoch{aspect-ratio:3/4}
@media(max-width:820px){.split-bild-hoch{aspect-ratio:4/5}}


/* ==========================================================================
   VARIANTE C — Groß & Ruhig
   Markenfarben unverändert. Die Limette markiert nur noch Handlungen,
   dafür größere Überschriften, mehr Luft, ruhigere Flächen.
   ========================================================================== */
h1{font-size:clamp(38px,7.2vw,76px);letter-spacing:-.035em;line-height:1.04}
h2{font-size:clamp(28px,4.4vw,50px);letter-spacing:-.03em;line-height:1.08}
h3{font-size:21px}
body{font-size:17.5px;line-height:1.72}
.lead{font-size:clamp(19px,2.2vw,23px);line-height:1.55;max-width:52ch}
section{padding:clamp(72px,10vw,132px) 0}
section.eng{padding:clamp(48px,6vw,76px) 0}
.kopfzeile{margin-bottom:56px}

/* Limette bleibt den Handlungen vorbehalten */
.kicker{color:var(--graublau);letter-spacing:.2em;font-size:11.5px}
.karte .zusatz{color:var(--graublau)}
.zahl b{color:var(--weiss)}
a:not(.knopf){color:var(--graublau)}
/* Knopfschriften stehen über allen Linkfarben — sonst kippt der Kontrast */
a.knopf-haupt,.knopf-haupt{background:var(--limette);color:#14170F}
a.knopf-haupt:hover,.knopf-haupt:hover{background:var(--limette-dunkel);color:#14170F}
a.knopf-wa,.knopf-wa{color:#0E1A1B}
a.knopf-rand,.knopf-rand{color:var(--weiss)}
a.skip,.skip{background:var(--limette);color:#14170F}

/* Karten werden zu Feldern: keine Rahmen, nur feine Trennlinien */
/* Haarlinien als Ring an der Karte statt als Rasterhintergrund — sonst wird
   ein unbesetztes Rasterfeld als leere Fläche sichtbar. */
.raster{gap:1px;background:transparent}
.karte{background:var(--schwarz);border:0;border-radius:0;padding:34px 30px 38px;
  box-shadow:0 0 0 1px var(--linie)}
section.wechsel .karte{background:var(--schwarz-2)}
.karte h3{margin-bottom:12px}

/* Bilder größer, Ecken fast rechtwinklig */
.split{gap:clamp(32px,5vw,72px)}
.split-bild{aspect-ratio:5/4;border-radius:2px}
.split-bild-hoch{aspect-ratio:3/4}
@media(max-width:820px){.split-bild-hoch{aspect-ratio:4/5}}
.hero{min-height:78vh}
.hero-klein{min-height:0}   /* der kleine Kopf bleibt kompakt */
.produkt,.person-text,.kontaktkarte,.knopf,.newsletter,.cta{border-radius:2px}


/* ==========================================================================
   VARIANTE A — Hell & Kontrast, nur auf Textseiten (<body class="hell">)
   Statt jede Komponente einzeln umzufärben, werden innerhalb der hellen
   Sektion die Farbvariablen getauscht. Dadurch kippen alle Bausteine
   gemeinsam — auch solche, die es später erst gibt.
   ========================================================================== */
body.hell section.wechsel{
  --weiss:#14170F;          /* Fließtext */
  --grau:#565C4A;
  --grau-2:#6B7160;
  --schwarz:#F5F6EF;
  --schwarz-2:#F5F6EF;
  --karte:#FFFFFF;
  --karte-2:#EFF1E5;
  --linie:#D7DAC7;
  --graublau-text:#3F636A;  /* Grau-Blau, abgedunkelt für weißen Grund */
  --limette-text:#67751D;   /* Limette, abgedunkelt für weißen Grund */
  background:#F5F6EF;
  color:var(--weiss);
}
body.hell section.wechsel strong{color:#000}
body.hell section.wechsel a:not(.knopf){color:var(--graublau-text)}
body.hell section.wechsel a.knopf-haupt{color:#14170F}
body.hell section.wechsel a.knopf-wa{color:#0E1A1B}
body.hell section.wechsel a.knopf-rand{color:var(--weiss)}
body.hell section.wechsel .kicker{color:var(--limette-text)}
body.hell section.wechsel .karte .zusatz,
body.hell section.wechsel .produkt .preis,
body.hell section.wechsel .zahl b{color:var(--graublau-text)}
body.hell section.wechsel .haken li::before{border-color:var(--limette-text)}
body.hell section.wechsel .faq summary::after,
body.hell section.wechsel .schritt .nummer{color:var(--limette-text)}
body.hell section.wechsel .knopf-rand{border-color:#B6BAA3}
body.hell section.wechsel .knopf-rand:hover{background:var(--karte-2);border-color:var(--weiss)}
body.hell section.wechsel .warnkasten{background:#fff}
body.hell section.wechsel :focus-visible{outline-color:var(--limette-text)}

/* Preistabelle: Zahlen brechen nie um, die Hülle scrollt stattdessen */
.tabelle-huelle table{min-width:660px}
.tabelle-huelle td{white-space:nowrap}
.tabelle-huelle td:first-child{white-space:normal}

/* --- Produktbild im Schlägerbestand -------------------------------------- */
.produkt-bild{background:#fff;display:grid;place-items:center;padding:10px}
.produkt-bild img{width:auto;height:210px;object-fit:contain;mix-blend-mode:multiply}
@media(max-width:520px){.produkt-bild img{height:170px}}

/* --- Serienblock auf der Sortimentsseite --------------------------------- */
.serie-block{display:grid;grid-template-columns:230px minmax(0,1fr);
  min-width:0;
  gap:clamp(24px,3vw,44px);align-items:start;padding:36px 0;
  border-top:1px solid var(--linie)}
.serie-block:first-of-type{border-top:0;padding-top:0}
.serie-bild{background:#fff;border-radius:3px;display:grid;place-items:center;padding:16px}
.serie-bild img{width:auto;height:280px;object-fit:contain;mix-blend-mode:multiply}
.serie-text{min-width:0}
.serie-text h3{font-size:26px;margin-bottom:12px}
.serie-text .kicker{margin-bottom:8px}
.serie-text p{max-width:62ch}
@media(max-width:760px){
  .serie-block{grid-template-columns:minmax(0,1fr);gap:20px}
  .serie-bild img{height:200px}
}

/* Rasterkinder dürfen schrumpfen — sonst schiebt eine breite Tabelle
   die ganze Seite seitlich auf. */
.raster > *{min-width:0}
.tabelle-huelle{max-width:100%}

/* --- Banderole über dem Produktbild -------------------------------------- */
.serie-bild{position:relative;overflow:hidden}
.banderole{
  position:absolute;top:0;left:0;right:0;z-index:2;
  background:var(--limette);color:#14170F;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;padding:9px 8px;line-height:1.2;
  box-shadow:0 2px 12px rgba(0,0,0,.3);
  pointer-events:none;
}
.serie-bild img{margin-top:14px}
.lagerhinweis{
  margin-top:14px;font-size:15px;font-weight:600;color:var(--limette);
  border-left:3px solid var(--limette);padding-left:14px;max-width:60ch;
}
@media(max-width:760px){
  .banderole{font-size:11px;letter-spacing:.1em;padding:8px 6px}
}

/* Schmale Tabellen (bis drei Spalten) brauchen keine Mindestbreite —
   sie passen immer und bekommen deshalb keinen seitlichen Schieber. */
.tabelle-schmal table{min-width:0;width:100%}
.tabelle-schmal td{white-space:normal}
.tabelle-schmal td:last-child,
.tabelle-schmal th:last-child{text-align:right;white-space:nowrap}
@media(max-width:560px){
  .tabelle-schmal th,.tabelle-schmal td{padding:12px 10px;font-size:15px}
  .tabelle-schmal th{font-size:11.5px;letter-spacing:.06em}
}

/* --- Artikelkatalog im Pro Shop ------------------------------------------ */
.katalog-filter{background:var(--karte);border:1px solid var(--linie);
  border-radius:var(--radius);padding:22px 24px;margin-bottom:28px;
  display:grid;gap:16px}
.katalog-suche{margin:0}
.katalog-suche input{width:100%}
.chipreihe{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip-titel{font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grau-2);min-width:86px}
.chip{background:transparent;border:1px solid var(--linie);color:var(--weiss);
  font:inherit;font-size:14.5px;font-weight:600;padding:7px 14px;border-radius:999px;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.chip:hover{border-color:var(--graublau)}
.chip[aria-pressed="true"]{background:var(--limette);border-color:var(--limette);
  color:#14170F}
.katalog-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  padding-top:6px;border-top:1px solid var(--linie)}
.katalog-zeile .schalter{display:flex;align-items:center;gap:9px;
  font-size:15px;font-weight:600;cursor:pointer}
.katalog-zeile input[type=checkbox]{width:19px;height:19px;accent-color:var(--limette)}
.katalog-zahl{margin-left:auto;font-size:15px;font-weight:700;color:var(--limette);
  font-variant-numeric:tabular-nums}

.artikelliste{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px}
.artikel{position:relative;background:var(--schwarz);padding:26px 24px 22px;
  box-shadow:0 0 0 1px var(--linie);display:flex;flex-direction:column;min-width:0}
.artikel[hidden]{display:none}
.artikel-band{position:absolute;top:0;left:0;right:0;background:var(--limette);
  color:#14170F;font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;text-align:center;padding:5px 6px}
.artikel-band ~ .artikel-kopf{margin-top:16px}
.artikel-kopf{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.artikel-marke{font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;background:var(--graublau-dunkel);color:#DCE8EA;
  padding:3px 8px;border-radius:3px}
.artikel-wen{font-size:12.5px;color:var(--grau-2)}
.artikel h3{font-size:17px;line-height:1.25;margin-bottom:8px}
.artikel p{font-size:14.5px;color:var(--grau);margin-bottom:16px;max-width:none}
.artikel-fuss{margin-top:auto}
.artikel-preis{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;
  color:var(--limette)}
.artikel-preis.dim{font-size:16px;color:var(--grau-2);font-weight:600}
.artikel-uvp{display:block;font-size:12px;color:var(--grau-2);margin-top:2px}
.artikel-knoepfe{display:flex;gap:8px;margin-top:14px}
.artikel-knoepfe .knopf{flex:1;text-align:center;padding:9px 10px;font-size:14px}
.katalog-gruppe[hidden]{display:none}
.katalog-leer{margin-top:24px;font-size:16px}
@media(max-width:560px){
  .katalog-filter{padding:18px 16px}
  .chip-titel{min-width:100%;margin-bottom:2px}
  .katalog-zahl{margin-left:0}
}

/* --- Bildband: Reihe hochformatiger Produktfotos ------------------------- */
.bildband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px)}
.bandbild{margin:0;border-radius:2px;overflow:hidden;background:var(--karte);
  box-shadow:0 0 0 1px var(--linie)}
.bandbild img{display:block;width:100%;height:100%;aspect-ratio:5/6.6;
  object-fit:cover}
.bandbild-fuss{margin-top:14px}
@media(max-width:820px){
  .bildband{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.nach-split{margin-top:clamp(30px,4.5vw,54px)}

/* --- Modelltabellen: ein Anfrageweg je Zeile ----------------------------- */
/* Keine Mindestbreite: die Tabelle passt sich an, statt seitlich zu schieben. */
.tabelle-modelle table{min-width:0;width:100%}
.tabelle-modelle td:first-child{white-space:normal}
.spalte-anfrage{text-align:right;white-space:nowrap}
.zeilen-knoepfe{display:inline-flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}  /* umbrechen, wenn die Spalte eng wird — dann stapeln die Knöpfe */
a.zeilen-knopf{display:inline-block;font-size:12.5px;font-weight:600;
  letter-spacing:.02em;padding:9px 13px;border-radius:2px;text-decoration:none;
  white-space:nowrap;line-height:1.2;transition:background .15s,color .15s}
a.zeilen-wa{background:var(--whatsapp);color:#0E1A1B}
a.zeilen-wa:hover,a.zeilen-wa:focus-visible{background:var(--whatsapp-hell);color:#0A1415}
a.zeilen-tel{border:1px solid var(--linie);color:var(--grau-2);background:transparent}
a.zeilen-haupt{background:var(--limette);color:#14170F}
a.zeilen-haupt:hover{background:#D6E67A}
a.zeilen-tel:hover,a.zeilen-tel:focus-visible{border-color:var(--limette);
  color:var(--limette)}

/* Auf schmalen Bildschirmen wird jede Zeile zu einer Karte — dann muss man
   die Tabelle nicht mehr seitlich schieben. */
@media(max-width:760px){
  .tabelle-modelle{border:0;border-radius:0;overflow:visible}
  .tabelle-modelle table{min-width:0;width:100%;display:block}
  .tabelle-modelle thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .tabelle-modelle tbody{display:block}
  .tabelle-modelle tr{display:block;background:var(--karte);padding:15px 16px 14px;
    margin-bottom:10px;border-radius:2px;box-shadow:0 0 0 1px var(--linie)}
  .tabelle-modelle tr:last-child{margin-bottom:0}
  .tabelle-modelle td{display:flex;align-items:baseline;justify-content:space-between;
    gap:18px;padding:3px 0;border:0;white-space:normal;text-align:right;font-size:15px}
  .tabelle-modelle td::before{content:attr(data-spalte);color:var(--grau-2);
    font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
    text-align:left;flex:0 0 auto}
  .tabelle-modelle td:first-child{display:block;text-align:left;font-size:17px;
    font-weight:600;padding:0 0 9px}
  .tabelle-modelle td:first-child::before{display:none}
  .tabelle-modelle td.spalte-anfrage{display:block;padding-top:13px}
  .tabelle-modelle td.spalte-anfrage::before{display:none}
  .tabelle-modelle .zeilen-knoepfe{display:flex;width:100%}
  .tabelle-modelle a.zeilen-knopf{flex:1 1 0;text-align:center;padding:11px 8px;
    font-size:14px}
}
.karten-knoepfe{display:flex;gap:8px;margin-top:16px}
.karten-knoepfe a.zeilen-knopf{flex:1 1 0;text-align:center;padding:9px 8px;
  font-size:13.5px}
.schritte-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.schritte-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.schritte-3{grid-template-columns:minmax(0,1fr)}}

/* --- Galerie ------------------------------------------------------------- */
.galerie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.3vw,16px)}
.gal-kachel{display:block;position:relative;overflow:hidden;border-radius:2px;
  background:var(--karte);box-shadow:0 0 0 1px var(--linie);cursor:zoom-in}
/* Bilder stehen starr: kein Zoom beim Überfahren mit der Maus. */
.gal-kachel img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.gal-kachel:focus-visible{outline:2px solid var(--limette);outline-offset:3px}
@media(max-width:900px){.galerie{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.galerie{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- Lichtkasten --------------------------------------------------------- */
.lichtkasten{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;background:rgba(6,8,6,.94);padding:clamp(16px,4vw,48px)}
/* Muss nach der Regel darüber stehen, sonst überdeckt der versteckte
   Lichtkasten die Seite und schluckt jeden Klick. */
.lichtkasten[hidden]{display:none}
.lichtkasten figure{margin:0;max-width:min(1200px,100%);text-align:center}
.lichtkasten img{max-width:100%;max-height:78vh;height:auto;border-radius:2px;display:block;margin:0 auto}
.lichtkasten figcaption{margin-top:14px;font-size:13.5px;color:var(--grau-2);line-height:1.5}
.lichtkasten button{position:absolute;background:transparent;border:0;color:var(--weiss);
  cursor:pointer;line-height:1;padding:10px 16px;border-radius:2px}
.lichtkasten button:hover{color:var(--limette)}
.lichtkasten button:focus-visible{outline:2px solid var(--limette);outline-offset:2px}
.lk-zu{top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);font-size:34px}
.lk-vor{left:clamp(4px,1.5vw,18px);top:50%;transform:translateY(-50%);font-size:46px}
.lk-zur{right:clamp(4px,1.5vw,18px);top:50%;transform:translateY(-50%);font-size:46px}
@media(max-width:620px){.lk-vor,.lk-zur{top:auto;bottom:10px;transform:none;font-size:38px}}

/* --- Sanftes Einblenden ---------------------------------------------------
   Gilt nur noch für Textbausteine. Alles, was ein Foto enthält (.split,
   .bandbild, .gal-kachel, .trainer-karte), steht von Anfang an fest an
   seinem Platz und blendet nicht mehr ein. */
.einblenden-an section .karte,.einblenden-an section .beitrag,
.einblenden-an .schritt,
.einblenden-an .reihe,.einblenden-an .zitat{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.einblenden-an section .karte.sichtbar,.einblenden-an section .beitrag.sichtbar,
.einblenden-an .schritt.sichtbar,
.einblenden-an .reihe.sichtbar,.einblenden-an .zitat.sichtbar{
  opacity:1;transform:none}
/* Sicherheitsnetz: Beim Drucken und wenn die Beobachtung aus irgendeinem
   Grund nicht greift, ist am Ende alles sichtbar. */
.einblenden-an.alles-zeigen section .karte,.einblenden-an.alles-zeigen section .beitrag,
.einblenden-an.alles-zeigen .schritt,
.einblenden-an.alles-zeigen .reihe,
.einblenden-an.alles-zeigen .zitat{opacity:1!important;transform:none!important}
@media print{.einblenden-an *{opacity:1!important}}
@media(prefers-reduced-motion:reduce){
  .einblenden-an section .karte,.einblenden-an section .beitrag,
  .einblenden-an .schritt{opacity:1;transform:none;transition:none}
}

/* --- Kopfzeile beim Scrollen ---------------------------------------------- */
.kopf{transition:padding .25s ease,background-color .25s ease,box-shadow .25s ease}
.kopf.geschrumpft{background:rgba(13,15,12,.93);box-shadow:0 1px 0 var(--linie)}
.kopf.geschrumpft .kopf-innen{padding-top:10px;padding-bottom:10px}
.kopf-innen{transition:padding .25s ease}
@supports (backdrop-filter:blur(8px)){.kopf.geschrumpft{backdrop-filter:blur(8px)}}



/* --- Bento-Raster ---------------------------------------------------------
   Unterschiedlich große Felder statt gleich großer Karten. Ohne Grid-Unter-
   stützung greift die Regel nicht und die Felder stehen schlicht untereinander. */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bento-feld{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:26px 24px;display:flex;flex-direction:column;
  transition:border-color .25s ease,transform .25s ease}
.bento-feld:hover{border-color:var(--graublau-dunkel);transform:translateY(-2px)}
.bento-feld h3{margin-bottom:10px}
.bento-feld p{color:var(--grau);font-size:15.5px;margin-bottom:auto}
.bento-feld .zusatz{display:block;margin-top:18px;font-size:14px;font-weight:700;
  color:var(--limette)}
.bento-gross{grid-column:span 2}
.bento-gross h3{font-size:26px}
.bento-gross p{font-size:17px}
.bento-hoch{grid-row:span 2}
.bento-bild{position:relative;padding:0;overflow:hidden;text-decoration:none;min-height:230px}
.bento-bild h3{display:none}
.bento-bild:hover{text-decoration:none}
/* Bilder stehen starr: kein Zoom beim Überfahren mit der Maus. */
.bento-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:72% 45%}
.bento-bild span{position:relative;z-index:2;margin-top:auto;padding:22px 24px;
  font-weight:800;font-size:18px;color:var(--weiss);
  background:linear-gradient(to top,rgba(9,11,8,.92),rgba(9,11,8,0));width:100%}
@media(max-width:900px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento-gross{grid-column:span 2}
}
@media(max-width:620px){
  .bento{grid-template-columns:1fr}
  .bento-gross{grid-column:span 1}
  .bento-hoch{grid-row:span 1}
}
@media(prefers-reduced-motion:reduce){
  .bento-feld:hover{transform:none}
}

/* --- Zahlenband ----------------------------------------------------------- */
.zahlenband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  background:var(--schwarz-2)}
.zahlenband>div{padding:clamp(22px,3vw,34px) 18px;text-align:center;
  border-left:1px solid var(--linie)}
.zahlenband>div:first-child{border-left:0}
.zahlenband b{display:block;font-size:clamp(30px,4.4vw,46px);font-weight:800;
  letter-spacing:-.03em;color:var(--limette);line-height:1}
.zahlenband span{display:block;margin-top:8px;font-size:13.5px;color:var(--grau-2);
  letter-spacing:.02em}
@media(max-width:620px){
  .zahlenband{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zahlenband>div:nth-child(3){border-left:0}
  .zahlenband>div:nth-child(n+3){border-top:1px solid var(--linie)}
}

/* --- Bildstreifen über die volle Breite ------------------------------------ */
.bildstreifen{width:100%;overflow:hidden;border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie)}
.bildstreifen img{width:100%;height:clamp(220px,34vw,420px);object-fit:cover;
  object-position:center 42%;filter:saturate(.95)}
.streifen-text{padding:16px 22px 0;font-size:14px;color:var(--grau-2);max-width:none}


/* ==========================================================================
   VARIANTE D — Editorial
   Markenfarben bleiben (Schwarzgrün, Limette, Grau-Blau, Hellgrau). Neu sind
   eine breite Grotesk für Überschriften, Fotos als schräg gelegte Abzüge,
   nummerierte Zeilen statt Kacheln und Flächen im Wechsel hell/dunkel.
   Schrift: Archivo (SIL Open Font License, liegt in assets/schrift/ — es
   wird nichts von fremden Servern geladen).
   ========================================================================== */
@font-face{font-family:"Archivo";src:url("schrift/archivo.woff2") format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  --fsys:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --breit:125%;
  --papier:#F4F5EF;
  --weich:cubic-bezier(.22,.61,.36,1);
}
body{font-family:var(--fsys);font-size:17px;line-height:1.65;font-stretch:100%}
h1,h2,h4,.zahlenband b,.laufband span,.reihe-titel b,.trainer-karte b,
.vollbild-links b,.zitat blockquote{font-stretch:var(--breit)}
h1,h2{font-weight:600;letter-spacing:-.025em}
h1{font-size:clamp(40px,5.4vw,80px);line-height:1}
h2{font-size:clamp(30px,3.8vw,54px);line-height:1.04}
h3{font-weight:650;letter-spacing:-.01em;font-stretch:112%;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.hero:not(.hero-stapel) h1{font-size:clamp(36px,4.4vw,66px)}
.lead{font-size:clamp(18px,1.7vw,21px);line-height:1.55}
.kicker{font-size:12.5px;font-weight:600;letter-spacing:.14em;margin-bottom:18px}
.kopfzeile{margin-bottom:48px}

/* Knöpfe als Pillen */
.knopf{border-radius:999px;padding:15px 26px;font-weight:650;font-size:15px;
  letter-spacing:.005em;transition:background .2s,color .2s,border-color .2s,transform .2s}
.knopf-klein{padding:11px 18px;font-size:14px}
.nav a,.menu>button{font-weight:550}
.nav a:hover,.menu>button:hover{background:transparent;color:var(--limette)}

/* --- Bühne (Hero) --------------------------------------------------------- */
.hero{min-height:0;border-bottom:0;background:var(--schwarz)}
.hero::after{display:none}
.hero .wrap{max-width:1320px}
.hero-raster{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(28px,5vw,80px);align-items:center;
  min-height:min(calc(100vh - 68px),860px);padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
.hero-innen{padding:0;max-width:none}
.hero h1{margin-bottom:26px}
.hero .lead{margin-bottom:34px;max-width:46ch}
.hero-fotos{position:relative;aspect-ratio:4/3.3;width:100%}
.hero-stapel .hero-fotos{aspect-ratio:1/1.02}

/* Die Fotos im Kopfbereich liegen weiterhin leicht schräg wie Abzüge, aber
   sie stehen starr: keine Einflug-Animation beim Laden, keine Bewegung beim
   Überfahren mit der Maus. Die Schrägstellung selbst ist ein fester Winkel. */
.druck{position:absolute;background-size:cover;background-position:center;
  background-color:var(--karte);border:clamp(6px,.7vw,10px) solid var(--papier);
  border-radius:2px;box-shadow:0 28px 60px rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.3);
  transform:rotate(var(--r,0deg))}
.druck-vorne{inset:6% 5% 8% 5%;--r:2.5deg;z-index:3}
.hero-stapel .druck-vorne{inset:17% 16% 14% 14%;--r:-2deg}
.druck-1{inset:2% 38% 36% 0;--r:-10deg;z-index:1}
.druck-2{inset:30% 0 4% 42%;--r:8deg;z-index:2}
@media(max-width:900px){
  .hero-raster{grid-template-columns:1fr;min-height:0;padding-top:44px;padding-bottom:56px;gap:40px}
  .hero-stapel .hero-fotos{width:88%}
  .hero-fotos{max-width:520px;margin:0 auto}
}

/* Startseiten-Bühne (nur .hero-stapel, also index.html) ------------------- */
/* Desktop: etwas niedriger als der Bildschirm, damit das Band darunter
   anschneidet und zum Weiterscrollen einlädt. */
.hero-stapel .hero-raster{min-height:min(calc(100vh - 68px - 56px),860px)}
/* Kicker bricht am Punkt um, nicht mitten in „KTC Bad Wilhelmshöhe“. */
.hero-stapel .kicker>span{white-space:nowrap}
/* Zweiter Knopf als Rand-Pille: „Jetzt Stunde buchen“ bleibt die Hauptaktion. */
.hero-stapel a.knopf-wa{background:transparent;color:var(--graublau);border-color:var(--graublau)}
.hero-stapel a.knopf-wa:hover{background:var(--karte);color:var(--weiss)}
/* Tablet: zwei Spalten statt Stapel, damit die Bühne in den Bildschirm passt. */
@media(min-width:761px) and (max-width:900px){
  .hero-stapel .hero-raster{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    min-height:0;gap:32px;padding-top:56px;padding-bottom:64px}
  .hero-stapel .hero-fotos{width:100%;max-width:none;margin:0}
}
/* Handy: Knöpfe gleich breit untereinander, Fotostapel kleiner und näher dran. */
@media(max-width:760px){
  .hero-stapel .hero-raster{padding-top:32px;padding-bottom:40px;gap:28px}
  .hero-stapel h1{margin-bottom:20px}
  .hero-stapel .lead{margin-bottom:28px}
  .hero-stapel .knopfreihe{flex-direction:column}
  .hero-stapel .knopfreihe .knopf{width:100%}
  .hero-stapel .hero-fotos{width:80%}
}

/* Nur für Screenreader sichtbar */
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-klein{background:var(--schwarz)}
.hero-klein .hero-innen{padding:clamp(56px,8vw,110px) 0 clamp(36px,5vw,64px);max-width:900px}
.hero-klein h1{font-size:clamp(36px,4.8vw,68px)}

/* --- Band und Zahlen ------------------------------------------------------- */
.band-text b{font-stretch:110%;font-weight:650}
.zahlenband{background:var(--schwarz);border-color:var(--linie)}
.zahlenband b{font-weight:600;font-size:clamp(36px,5vw,64px);letter-spacing:-.03em}
.zahlenband span{font-size:13px;text-transform:uppercase;letter-spacing:.12em}

/* --- Einstieg: Kopf links, Punkte rechts ---------------------------------- */
.einstieg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,6vw,96px);align-items:start}
.einstieg-kopf{position:sticky;top:110px}
.einstieg-kopf .kopfzeile{margin-bottom:32px}
.raster-1{grid-template-columns:1fr}
.einstieg .karte{padding:30px 0 32px;background:transparent;box-shadow:none;
  border-top:1px solid var(--linie)}
.einstieg .karte:last-child{border-bottom:1px solid var(--linie)}
.einstieg .karte h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:10px}
@media(max-width:860px){.einstieg{grid-template-columns:1fr}.einstieg-kopf{position:static}}

/* --- Angebotszeilen --------------------------------------------------------- */
section.flaeche-dunkel{background:var(--schwarz-2)}
.reihen{border-top:1px solid var(--linie);position:relative}
a.reihe{position:relative;display:grid;
  grid-template-columns:70px minmax(0,1.1fr) minmax(0,1.3fr) 190px 52px;
  gap:24px;align-items:center;padding:30px 8px;border-bottom:1px solid var(--linie);
  color:var(--weiss);text-decoration:none;transition:background .3s,padding .3s var(--weich)}
a.reihe:hover{text-decoration:none;background:rgba(200,216,106,.05);padding-left:20px}
.reihe-nr{font-size:14px;font-weight:600;color:var(--grau-2);font-variant-numeric:tabular-nums}
.reihe-titel b{display:block;font-size:clamp(21px,2vw,27px);font-weight:600;line-height:1.15;
  letter-spacing:-.015em}
.reihe-titel small{display:block;margin-top:5px;font-size:14px;color:var(--grau-2)}
.reihe-text{font-size:15.5px;color:var(--grau);line-height:1.55}
.reihe-preis{justify-self:start;font-size:13.5px;font-weight:650;color:var(--limette);
  border:1px solid rgba(200,216,106,.45);border-radius:999px;padding:8px 14px;white-space:nowrap}
.reihe-pfeil{width:48px;height:48px;border-radius:50%;border:1px solid var(--linie);
  display:grid;place-items:center;transition:background .25s,border-color .25s,transform .35s var(--weich)}
.reihe-pfeil::before{content:"→";font-size:19px;color:var(--weiss)}
a.reihe:hover .reihe-pfeil{background:var(--limette);border-color:var(--limette);transform:rotate(-45deg)}
a.reihe:hover .reihe-pfeil::before{color:#14170F}
/* Das Vorschaubild, das früher beim Überfahren einer Verweiszeile
   eingeflogen kam, ist abgeschaltet — es war reine Bewegung. */
.reihe-bild{display:none}
@media(max-width:860px){
  a.reihe{grid-template-columns:44px minmax(0,1fr) 48px;gap:6px 14px;padding:24px 0}
  a.reihe:hover{padding-left:0}
  .reihe-nr{grid-row:1;grid-column:1;align-self:start;padding-top:6px}
  .reihe-titel{grid-row:1;grid-column:2}
  .reihe-pfeil{grid-row:1;grid-column:3}
  .reihe-text{grid-row:2;grid-column:2 / 4;margin-top:6px}
  .reihe-preis{grid-row:3;grid-column:2 / 4;margin-top:10px}
}

/* --- Laufband --------------------------------------------------------------- */
.laufband{background:var(--limette);color:#14170F;overflow:hidden;padding:22px 0;
  border-top:1px solid var(--limette-dunkel);border-bottom:1px solid var(--limette-dunkel)}
.laufband-spur{display:flex;width:max-content;animation:laufen 42s linear infinite}
.laufband:hover .laufband-spur{animation-play-state:paused}
.laufband-reihe{display:flex;flex-shrink:0}
.laufband span{display:flex;align-items:center;font-size:clamp(22px,2.8vw,38px);
  font-weight:600;letter-spacing:-.02em;white-space:nowrap;padding-right:.9em}
.laufband span::after{content:"";width:.34em;height:.34em;border-radius:50%;
  background:#14170F;margin-left:.9em}
@keyframes laufen{to{transform:translateX(-50%)}}

/* --- Zitat ------------------------------------------------------------------ */
section.flaeche-zitat{background:var(--schwarz)}
.zitat{position:relative;max-width:1040px;margin:0 auto;
  padding:clamp(40px,6vw,76px) clamp(26px,6vw,84px)}
.zitat::before,.zitat::after{content:"";position:absolute;width:clamp(50px,7vw,96px);
  height:clamp(40px,5vw,70px);border:2px solid var(--limette)}
.zitat::before{top:0;left:0;border-right:0;border-bottom:0}
.zitat::after{bottom:0;right:0;border-left:0;border-top:0}
.zitat blockquote{font-size:clamp(24px,3.3vw,44px);line-height:1.2;font-weight:500;
  letter-spacing:-.02em;color:var(--weiss);text-wrap:balance}
.zitat blockquote::before{content:"„"}
.zitat blockquote::after{content:"“"}
.zitat figcaption{margin-top:30px;font-size:15px}
.zitat figcaption b{display:block;color:var(--weiss);font-weight:650}
.zitat figcaption span{display:block;color:var(--grau-2);font-size:14px;margin-top:2px}

/* --- Helle Flächen: Farbvariablen tauschen, alle Bausteine kippen mit ------- */
section.flaeche-hell,section.flaeche-graublau,section.flaeche-limette{
  --weiss:#14170F;--grau:#474D3E;--grau-2:#5E6554;--linie:rgba(20,23,15,.16);
  --karte:#FFFFFF;--karte-2:#E9ECDF;--schwarz:transparent;--schwarz-2:transparent;
  color:var(--weiss)}
section.flaeche-hell{background:var(--papier)}
section.flaeche-graublau{background:var(--graublau)}
section.flaeche-limette{background:var(--limette)}
section.flaeche-hell strong,section.flaeche-graublau strong{color:#000}
section.flaeche-hell .kicker{color:#3F636A}
section.flaeche-graublau .kicker,section.flaeche-limette .kicker{color:#14170F}
section.flaeche-hell a:not(.knopf),section.flaeche-graublau a:not(.knopf){color:#2F4B50}
section.flaeche-hell .knopf-rand,section.flaeche-graublau .knopf-rand,
section.flaeche-limette .knopf-rand{border-color:rgba(20,23,15,.4);color:#14170F}
section.flaeche-hell .knopf-rand:hover,section.flaeche-graublau .knopf-rand:hover,
section.flaeche-limette .knopf-rand:hover{background:#14170F;color:var(--papier);border-color:#14170F}
section.flaeche-graublau .knopf-haupt,section.flaeche-limette .knopf-haupt,
section.flaeche-limette .knopf-wa{background:#14170F;color:var(--limette)}
section.flaeche-graublau .knopf-haupt:hover,section.flaeche-limette .knopf-haupt:hover,
section.flaeche-limette .knopf-wa:hover{background:#262B1C;color:var(--limette)}
section.flaeche-graublau .knopf-wa{background:#0E1A1B;color:var(--graublau)}
section.flaeche-hell :focus-visible,section.flaeche-graublau :focus-visible,
section.flaeche-limette :focus-visible{outline-color:#14170F}

/* --- Trainerreihe ----------------------------------------------------------- */
.team-kopf{max-width:720px;margin:0 auto clamp(48px,6vw,80px);text-align:center}
.team-kopf .kopfzeile{margin:0 auto 18px}
.team-kopf .lead,.team-kopf p{margin-left:auto;margin-right:auto}
.team-kopf p{color:var(--grau)}
.team-kopf .knopfreihe{justify-content:center;margin-top:26px}
.trainerreihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,3vw,44px);align-items:start}
.trainer-karte{display:block;color:var(--weiss);text-decoration:none}
a.trainer-karte:hover{text-decoration:none}
.trainerreihe .trainer-karte:nth-child(even){margin-top:clamp(40px,7vw,110px)}
/* Trainerfotos stehen starr und dauerhaft in Farbe: kein Schwarzweiß, kein
   Aufrichten und kein Anheben beim Überfahren. Die leichte Schrägstellung
   ist ein fester Winkel. */
.trainer-foto{display:block;aspect-ratio:4/5;background-size:cover;background-position:center 30%;
  background-color:#DDE0D2;
  box-shadow:0 20px 44px rgba(20,23,15,.22);transform:rotate(var(--r,-2deg))}
.trainer-karte:nth-child(even) .trainer-foto{--r:2.2deg}
.trainer-karte:nth-child(3) .trainer-foto{--r:-1.2deg}
.trainer-karte b{display:block;margin-top:22px;font-size:clamp(17px,1.5vw,21px);font-weight:600;
  line-height:1.2;letter-spacing:-.01em}
.trainer-rolle{display:block;margin-top:4px;font-size:14px;color:var(--grau-2)}
@media(max-width:860px){
  .trainerreihe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trainerreihe .trainer-karte:nth-child(even){margin-top:48px}
}

/* --- Vollbild mit Verweisen ------------------------------------------------- */
section.vollbild{position:relative;padding:0;min-height:clamp(560px,86vh,820px);
  display:flex;align-items:flex-end;overflow:hidden;background:var(--schwarz)}
.vollbild-foto{position:absolute;inset:0;background-size:cover;background-position:center 40%;
  filter:saturate(.85) contrast(1.05);transform:scale(1.04)}
.vollbild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(9,11,8,.92) 0%,rgba(9,11,8,.72) 45%,rgba(9,11,8,.25) 100%),
             linear-gradient(0deg,rgba(9,11,8,.7),rgba(9,11,8,0) 50%)}
.vollbild-innen{position:relative;z-index:2;width:100%;padding-top:110px;padding-bottom:clamp(56px,7vw,96px)}
.vollbild h2{max-width:13ch;margin-bottom:20px}
.vollbild p{color:#D6DACB;max-width:50ch;margin-bottom:40px}
.vollbild-links{list-style:none;max-width:640px;border-top:1px solid rgba(244,245,239,.22)}
.vollbild-links li{border-bottom:1px solid rgba(244,245,239,.22)}
.vollbild-links a{display:flex;align-items:baseline;gap:18px;padding:16px 0;color:var(--weiss);
  text-decoration:none;transition:padding .35s var(--weich)}
.vollbild-links a:hover{text-decoration:none;padding-left:14px}
.vollbild-links b{font-size:clamp(26px,3.4vw,46px);font-weight:600;letter-spacing:-.02em;
  line-height:1.1;transition:color .25s}
.vollbild-links span{font-size:15px;color:#C4C9B8}
.vollbild-links a::after{content:"↗";margin-left:auto;font-size:24px;color:var(--limette);
  transition:transform .35s var(--weich)}
.vollbild-links a:hover b{color:var(--limette)}
.vollbild-links a:hover::after{transform:translate(4px,-4px)}
@media(max-width:600px){.vollbild-links span{display:none}}

/* --- Partner mit Abzügen ---------------------------------------------------- */
.partner-raster{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,6vw,90px);align-items:center;margin-bottom:clamp(48px,6vw,80px)}
.partner-raster .kopfzeile{margin-bottom:30px}
.logozeile{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px}
.logozeile img{height:76px;width:auto;max-width:100%;background:#fff;padding:20px 24px;border-radius:2px}
.logozeile img.logo-breit{padding:26px 24px}
.partner-fotos{position:relative;aspect-ratio:1/.92}
.partner-fotos .druck{animation:none;box-shadow:0 26px 54px rgba(14,26,27,.4)}
.druck-a{inset:0 50% 6% 4%;--r:-5deg;z-index:2;background-position:center 30%}
.druck-b{inset:22% 0 14% 34%;--r:5deg}
/* Partnerfotos stehen starr: keine Drehung beim Überfahren. */
section.flaeche-graublau .karte{background:rgba(244,245,239,.5);box-shadow:none}
section.flaeche-graublau .raster{gap:14px}
@media(max-width:860px){.partner-raster{grid-template-columns:1fr}
  .partner-fotos{max-width:480px;width:100%;margin:0 auto}}

/* --- Fotoreihe (Karussell) -------------------------------------------------- */
.kar-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:44px}
.kar-kopf .kopfzeile{margin-bottom:0}
.karussell{position:relative}
.kar-spur{display:flex;gap:clamp(14px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;margin-right:calc(50% - 50vw);padding:6px 22px 18px 2px;
  scrollbar-width:none}
.kar-spur::-webkit-scrollbar{display:none}
.kar-spur:focus-visible{outline:2px solid var(--limette);outline-offset:4px}
a.kar-kachel{flex:0 0 clamp(250px,30vw,420px);aspect-ratio:4/5;scroll-snap-align:start;
  border-radius:2px;box-shadow:none;background:var(--karte)}
/* Fotos in der Fotoreihe stehen starr und dauerhaft in Farbe. */
.kar-kachel img{aspect-ratio:auto;height:100%;object-fit:cover}
.kar-kachel span{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;
  font-size:14px;font-weight:600;color:#fff;line-height:1.35;
  background:linear-gradient(0deg,rgba(9,11,8,.85),rgba(9,11,8,0))}
.kar-knoepfe{display:flex;gap:10px;margin-top:22px}
.kar-knoepfe button{width:52px;height:52px;border-radius:50%;background:transparent;
  border:1px solid var(--linie);color:var(--weiss);font-size:20px;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s}
.kar-knoepfe button:hover{background:var(--limette);border-color:var(--limette);color:#14170F}

/* --- Übrige Bausteine im neuen Ton ----------------------------------------- */
.schritt{border-radius:2px;padding:30px 28px}
.schritt::before{border-radius:50%;font-stretch:var(--breit)}
.cta{background:transparent;border:0;padding:clamp(20px,4vw,40px) 0}
.cta h2{font-size:clamp(32px,4.6vw,64px);max-width:16ch;margin:0 auto 18px}
section.flaeche-limette .cta p{color:#2A301F}
.newsletter{border-radius:2px}

/* Fotos in Split-Abschnitten als Abzug — fester Winkel, kein Aufrichten
   beim Überfahren. */
.split-bild{border:clamp(6px,.7vw,9px) solid var(--papier);border-radius:2px;
  box-shadow:0 26px 56px rgba(0,0,0,.45);transform:rotate(-1.6deg)}
.split.gedreht .split-bild{transform:rotate(1.6deg)}
/* Porträts stehen starr und dauerhaft in Farbe. */

@media(prefers-reduced-motion:reduce){
  .druck{animation:none}
  .laufband-spur{animation:none}
  .druck,.trainer-foto,.split-bild,a.reihe,.reihe-bild,.reihe-pfeil,.kar-kachel img{transition:none}
}
/* Lange deutsche Wörter in der breiten Schrift nur trennen, wenn es sein muss */
h1,h2,h3,.reihe-titel b,.trainer-karte b,.vollbild-links b{hyphens:auto;-webkit-hyphens:auto;
  hyphenate-limit-chars:14 7 7;overflow-wrap:break-word}

/* --- Produktfotos in Karten (Diadem-Sortiment) ----------------------------- */
.karte-produkt{display:flex;flex-direction:column}
.karte-produkt .produkt-foto{margin:-34px -30px 24px;background:#fff;display:grid;
  place-items:center;padding:18px;overflow:hidden}
/* Produktfotos stehen starr: kein Zoom beim Überfahren. */
.karte-produkt .produkt-foto img{width:auto;height:230px;object-fit:contain}
.karte-produkt .karten-knoepfe{margin-top:auto;padding-top:16px}
@media(max-width:520px){.karte-produkt .produkt-foto img{height:190px}}
.druck[style*="diadem/"]{background-size:contain;background-repeat:no-repeat;background-color:#fff}

/* ==========================================================================
   REDESIGN „SAISONKAPITEL“ (Version 14) — gilt für alle Seiten
   Jede Inhaltssektion trägt die Klasse „kapitel“: eine volle Farbfläche
   (Schwarz, Graublau, Hell, Limette) mit einer Aussage. Keine Kästen, keine
   Haarlinien; Flächen trennen sich über den Farbwechsel. Nur vorhandene
   Farbvariablen, Schrift bleibt Archivo. Die Seiten tragen <body class="hell">,
   dadurch werden die wechsel-Bereiche hell; der Abschluss (.cta) liegt auf Limette.
   ========================================================================== */

/* --- Kapitel-Rhythmus ------------------------------------------------------ */
section.kapitel{padding:clamp(80px,11vw,168px) 0;
  scroll-margin-top:calc(var(--kopf-h,68px) + 24px)}
section.kapitel.eng{padding:clamp(56px,7vw,96px) 0}
.kapitel-leiste ~ section.kapitel{scroll-margin-top:calc(var(--kopf-h,68px) + 56px)}
section.flaeche-team{background:var(--schwarz)}
.kapitel .kopfzeile{max-width:880px;margin-bottom:clamp(40px,5vw,72px)}
/* nur Kapitel-Überschriften, nicht Zwischenüberschriften in Fließtexten */
.kapitel .kopfzeile h2,.kapitel .newsletter h2,.kapitel .cta h2{
  font-size:clamp(33px,5vw,76px);line-height:1;letter-spacing:-.03em}
.kapitel .lead{max-width:52ch;margin-top:20px}
#kassel .kopfzeile h2{font-size:clamp(32px,4vw,58px)}   /* längste Überschrift der Seite */
/* Überschriften in halber Spalte: kleiner, damit lange Wörter nicht brechen */
.kapitel .einstieg .kopfzeile h2,.kapitel .partner-raster .kopfzeile h2{font-size:clamp(34px,4vw,60px)}

/* Kapitelmarke („/ Einstieg“): ruhig in normaler Schreibweise statt Versalien */
.kapitel .kicker{text-transform:none;letter-spacing:0;font-size:16px;font-weight:600;
  margin-bottom:22px}

/* --- Karten werden zu Textspalten -------------------------------------------- */
section.kapitel .raster{gap:clamp(36px,4.5vw,72px)}
section.kapitel .karte{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
section.kapitel .karte h3{font-size:clamp(21px,1.8vw,25px);margin-bottom:12px}
section.kapitel .karte p{color:var(--grau)}
.kapitel .karte p a{text-decoration:underline;text-underline-offset:3px;font-weight:600}
.kapitel .einstieg .raster{gap:0}
.kapitel .einstieg .karte,.kapitel .einstieg .karte:last-child{border:0;
  padding:0 0 clamp(28px,3vw,40px)}
.kapitel .einstieg .karte:last-child{padding-bottom:0}

/* --- Zahlen direkt unter der Bühne ------------------------------------------- */
.kapitel-zahlen{background:var(--schwarz);padding:0 0 clamp(56px,7vw,96px)}
.kapitel-zahlen .wrap{max-width:1320px}   /* gleiche linke Kante wie die Bühne */
.kapitel-zahlen .zahlenband{border:0;background:transparent;gap:clamp(20px,3vw,48px)}
.kapitel-zahlen .zahlenband>div{border:0;padding:0;text-align:left}
.kapitel-zahlen .zahlenband span{text-transform:none;letter-spacing:0;font-size:15px;
  color:var(--grau);margin-top:10px}

/* --- Kapitel-Leiste: zeigt, wo man auf der Seite ist ------------------------- */
.kapitel-leiste{position:sticky;top:var(--kopf-h,68px);z-index:90;
  background:var(--schwarz);border-bottom:1px solid var(--linie)}
.kapitel-leiste .wrap{display:flex;gap:clamp(18px,2.6vw,36px);overflow-x:auto;
  scrollbar-width:none}
.kapitel-leiste a{flex-shrink:0;padding:15px 0 13px;font-size:15px;font-weight:550;
  color:var(--grau);text-decoration:none;border-bottom:2px solid transparent;
  transition:color .2s ease,border-color .2s ease}
.kapitel-leiste a:hover{color:var(--weiss);text-decoration:none}
.kapitel-leiste a[aria-current="true"]{color:var(--weiss);border-bottom-color:var(--limette)}
.kapitel-leiste .wrap::-webkit-scrollbar{display:none}
.kapitel-leiste a:focus-visible{outline-offset:-3px}
/* Handy: dieselbe Leiste, seitlich wischbar; Trefferfläche mindestens 44 px hoch */
@media(max-width:760px){
  .kapitel-leiste .wrap{gap:20px}
  .kapitel-leiste a{min-height:44px;display:flex;align-items:center;padding:0;font-size:14.5px}
}

/* --- Team: Trainerprinzip als ruhiger Auftakt -------------------------------- */
.kapitel .zitat{padding:0;margin:0 auto clamp(64px,8vw,120px);max-width:980px;text-align:center}
.kapitel .zitat::before,.kapitel .zitat::after{content:none}

/* --- Buchen, Newsletter, Abschluss: flach statt Kasten ----------------------- */
.kapitel .schritte{gap:clamp(32px,4vw,64px)}
.kapitel .schritt{background:transparent;border:0;border-radius:0;padding:0}
.kapitel .schritt p{color:var(--grau)}
section.kapitel-newsletter{background:var(--schwarz-2)}
.kapitel .newsletter{border:0;border-radius:0;padding:0;background:transparent;max-width:760px}
.kapitel .newsletter h2{margin-bottom:18px}
.kapitel .cta{background:transparent;border:0;border-radius:0;padding:0}

@media(prefers-reduced-motion:reduce){
  .kapitel-leiste a{transition:none}
}

/* Graublau-Flächen: Fließtext in voller Textfarbe (Grau erreicht dort nur 3,5:1) */
section.flaeche-graublau.kapitel .karte p,section.flaeche-graublau.kapitel .lead{color:var(--weiss)}

/* --- Feinschliff für alle Seiten (Redesign-Schritt 5) ------------------------ */
/* Gleiche Fläche hintereinander: kein doppelter Abstand zwischen zwei Kapiteln */
section.kapitel:not(.wechsel):not([class*="flaeche-"]):not(.kapitel-newsletter)
  + section.kapitel:not(.wechsel):not([class*="flaeche-"]):not(.kapitel-newsletter),
section.kapitel.wechsel + section.kapitel.wechsel,
section.flaeche-dunkel.kapitel + section.flaeche-dunkel.kapitel{padding-top:0}
/* Kleiner Seitenkopf und erstes Kapitel liegen auf derselben schwarzen Fläche */
.hero-klein + section.kapitel:not(.wechsel):not([class*="flaeche-"]){padding-top:clamp(24px,3vw,48px)}

/* Drei Spalten: feste Spaltenzahl je Breite, eine einzelne letzte Karte nimmt die Zeile */
@media(min-width:900px){section.kapitel .raster-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:600px) and (max-width:899px){
  section.kapitel .raster-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  section.kapitel .raster-3>:last-child:nth-child(odd){grid-column:1 / -1}
}
@media(max-width:599px){section.kapitel .raster-3{grid-template-columns:minmax(0,1fr)}}

/* Preiszeilen in Karten deutlicher; Hinweistexte mit lesbarer Zeilenlänge */
section.kapitel .karte .zusatz{font-size:16.5px;margin-top:16px}
.kapitel .tab-hinweis{max-width:70ch}

/* --- Preistabelle (Preise-Seite) ------------------------------------------- */
.tabelle-preise th:not(:first-child),.tabelle-preise td:not(:first-child){text-align:right}
.tabelle-preise tbody tr{transition:background-color .15s ease}
.tabelle-preise tbody tr:hover{background:var(--karte-2)}
/* Handy: jede Lizenzstufe als eigener Block, alle vier Preise ohne Wischen */
@media(max-width:640px){
  .tabelle-preise{overflow:visible;border:0;border-radius:0}
  .tabelle-preise table{min-width:0;display:block}
  .tabelle-preise thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .tabelle-preise tbody{display:grid;gap:14px}
  .tabelle-preise tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;
    padding:18px 18px 20px;background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius)}
  .tabelle-preise td{display:block;padding:0;border:0;text-align:left!important;white-space:normal;
    font-size:18px;font-weight:650}
  .tabelle-preise td:first-child{grid-column:1 / -1;font-size:19px}
  .tabelle-preise td:not(:first-child)::before{content:attr(data-label);display:block;
    font-size:13.5px;font-weight:500;color:var(--grau);margin-bottom:2px}
}
@media(prefers-reduced-motion:reduce){.tabelle-preise tbody tr{transition:none}}

/* Handy: lange zusammengesetzte Wörter in Überschriften sauber mit Trennstrich trennen
   (z. B. „Geschäftsbedingungen“), statt sie ohne Strich mitten im Wort umzubrechen */
@media(max-width:600px){h1,h2,h3{hyphens:auto;-webkit-hyphens:auto}}

/* --- Laufband anhalten (WCAG 2.2.2): Knopf wird von kapitel.js eingefügt ------ */
.laufband{position:relative}
.laufband.pausiert .laufband-spur{animation-play-state:paused}
.laufband-pause{position:absolute;right:clamp(10px,2vw,22px);top:50%;transform:translateY(-50%);
  width:44px;height:44px;border:0;border-radius:50%;background:#14170F;color:var(--limette);
  display:grid;place-items:center;cursor:pointer}
.laufband-pause:hover{background:#262B1C}
.laufband-pause:focus-visible{outline:3px solid #14170F;outline-offset:2px}
.laufband-pause svg{width:16px;height:16px;fill:currentColor}
@media(prefers-reduced-motion:reduce){.laufband-pause{display:none}}

/* --- Alle Unterseiten (v17) ---------------------------------------------------- */
/* Seitenkopf bündig mit dem Inhalt; nur die Startseiten-Bühne bleibt breiter */
.hero:not(.hero-stapel) .wrap{max-width:var(--breite)}

/* Helle Flächen: Bausteine, deren Farben für den dunklen Grund festgelegt waren */
body.hell section.wechsel a.zeilen-wa,body.hell section.wechsel a.zeilen-wa:hover{color:#0E1A1B}
body.hell section.wechsel a.zeilen-haupt,body.hell section.wechsel a.zeilen-haupt:hover{color:#14170F}
body.hell section.wechsel th{color:var(--grau)}
body.hell section.wechsel .alb-preis,body.hell section.wechsel .alb-zahlen b,
body.hell section.wechsel .lm{color:var(--limette-text)}
/* Limette-Fläche: Links im Text in Textfarbe und unterstrichen */
section.flaeche-limette a:not(.knopf){color:#14170F;text-decoration:underline;text-underline-offset:3px}

/* --- UI-Optimierung (v19) ------------------------------------------------------ */
/* Hauptaktion auf hellen Flächen: dunkler Knopf mit Limette-Schrift, hebt sich klar ab */
section.flaeche-hell .knopf-haupt,body.hell section.wechsel a.knopf-haupt,
body.hell section.wechsel a.zeilen-haupt{background:#14170F;color:var(--limette)}
section.flaeche-hell .knopf-haupt:hover,body.hell section.wechsel a.knopf-haupt:hover,
body.hell section.wechsel a.zeilen-haupt:hover{background:#262B1C;color:var(--limette)}
/* Absende-Knöpfe sind jetzt echte <button>: Schrift wie die übrigen Knöpfe */
button.knopf{font-family:inherit}
/* Meldungen auf hellem Grund: Textfarbe statt Hellrot (dort zu wenig Kontrast) */
section.flaeche-hell .fehler,body.hell section.wechsel .fehler,
body.hell section.wechsel .meldung[data-art="fehler"]{color:var(--weiss);font-weight:700}
.feld [aria-invalid="true"]{border-color:currentColor;border-width:2px}
/* Trefferflächen auf Handy und Tablet: mindestens 44 px hoch */
@media(max-width:820px){
  a.zeilen-knopf,.chip,.knopf-klein{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .burger{min-height:44px;min-width:44px}
  .beitrag .zusatz{padding:10px 0}
  .katalog-suche input{font-size:16px;min-height:44px}
  .fuss ul{gap:0}
  .fuss a{display:inline-block;padding:7px 0}
}
/* Handy: etwas kleinere Abstände zwischen den Kapiteln */
@media(max-width:600px){
  section.kapitel{padding:56px 0}
  section.kapitel.eng{padding:40px 0}
}
/* Formularfelder: sichtbarer Fokusrahmen auch auf hellem Grund (Limette auf Weiß reicht nicht) */
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible,
.katalog-suche input:focus-visible{outline:3px solid var(--limette);outline-offset:2px}
body.hell section.wechsel .feld input:focus-visible,body.hell section.wechsel .feld select:focus-visible,
body.hell section.wechsel .feld textarea:focus-visible,
body.hell section.wechsel .katalog-suche input:focus-visible{outline-color:var(--limette-text)}
/* Flache Karten haben keinen Innenabstand mehr: Produktfoto ohne die alten negativen Ränder */
section.kapitel .karte-produkt .produkt-foto{margin:0 0 20px}