/* ==========================================================================
   Pilates Company Lübeck – gemeinsames Design-System (site.css)
   Mobil zuerst (390 px). Ab 700 px bleibt alles eine ruhige, zentrierte Spalte.
   Tokens und Namen entsprechen den neuen Seiten (Preise, Last-Minute, Studio OS).
   Schriften werden je Seite über Google Fonts geladen (Playfair Display, Poppins).
   ========================================================================== */

:root{
  --ground:#FAF6F3; --sheet:#FFFFFF; --sand:#F1E5E0; --tint:#FBF1EE;
  --ink:#241D1A; --body:#4E4541; --muted:#6F625D;
  --cta:#9C6055; --cta-hover:#874F45; --rose:#C79086;
  --line:#E9DAD4; --line-soft:#F0E3DE;
  --logo:#D6A5A3;                         /* nur dekorativ, wie das Logo */
  --field:#948780;                        /* Rand von Formularfeldern (3,5:1 auf Weiß) */
  --ok-bg:#EEF4EC; --ok-line:#C7DAC2; --ok:#2F4A2B;
  --err-bg:#FBEDEA; --err-line:#E8B9B0; --err:#7A2A1E;
  --pad:16px; --col:560px; --col-weit:880px;
  --r-btn:14px; --r-field:12px; --r-card:4px 22px 4px 22px;
  --shadow-card:0 18px 40px -30px rgba(60,38,32,.45);
  --f-display:"Playfair Display", Georgia, serif;
  --f-body:Poppins, system-ui, -apple-system, sans-serif;
}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font:15px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--cta)}
h1,h2,h3{font-family:var(--f-display);font-weight:400;margin:0;letter-spacing:-.015em;text-wrap:balance;color:var(--ink)}
h1 em,h2 em,h3 em{color:var(--cta)}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--cta-hover);outline-offset:2px;border-radius:6px}
section{scroll-margin-top:72px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px}
.skip:focus{left:8px}
.nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.seite{max-width:var(--col);margin:0 auto;padding-bottom:calc(100px + env(safe-area-inset-bottom))}
.seite.weit{max-width:var(--col-weit)}

.ueber{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#7D6660;margin:0 0 8px}
.tint .ueber,.karte.tint .ueber{color:var(--cta-hover)}
.lead{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--body);font-weight:300}
.klein{font-size:12.5px;line-height:1.55;color:var(--muted);font-weight:300}
.textlink{color:var(--cta);font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* ---------- Kopfzeile ---------- */
.kopf{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;padding:8px var(--pad);background:rgba(255,255,255,.96);
      -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line-soft)}
.kopf .marke{margin-right:auto;line-height:0;display:inline-flex;align-items:center;text-decoration:none}
.kopf .marke img{height:52px;width:auto}
.kopf-probe{display:inline-flex;align-items:center;gap:.3em;padding:0 14px;min-height:44px;border-radius:12px;background:var(--cta);color:#fff;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.kopf-probe:hover{background:var(--cta-hover)}
@media (max-width:440px){ .kopf-probe .lang{display:none} }
@media (max-width:380px){ .kopf-probe{font-size:12px;padding:0 10px} .kopf{gap:6px} }
.rund{width:44px;height:44px;flex:none;border-radius:999px;border:1px solid var(--line);background:var(--sheet);display:flex;align-items:center;justify-content:center;padding:0;color:var(--ink)}
.rund svg{width:19px;height:19px}
.burger{flex-direction:column;gap:5px}
.burger i{display:block;width:16px;height:1.5px;background:var(--ink);border-radius:2px}

/* ---------- Menü (Vollbild-Overlay) ---------- */
.menu{position:fixed;inset:0;z-index:60;max-width:var(--col);margin:0 auto;background:var(--ground);overflow-y:auto;padding:10px var(--pad) calc(28px + env(safe-area-inset-bottom));display:none}
.menu.offen{display:block}
.menu .oben{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.menu .oben img{height:52px;width:auto}
.menu .grp{margin-bottom:18px}
.menu .grp p{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.menu .grp a{display:flex;justify-content:space-between;align-items:center;min-height:48px;font-size:16px;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-soft)}
.menu .grp a:last-child{border-bottom:0}
.menu .grp a[aria-current="page"]{color:var(--cta)}
.menu .grp a span{font-size:11px;color:var(--muted);font-weight:400}
body.menu-offen{overflow:hidden}

/* ---------- Seiteneinstieg und Hero ---------- */
.einstieg{padding:22px var(--pad) 0}
.einstieg h1{font-size:clamp(28px,7.8vw,36px);line-height:1.12}
.hero{padding:22px var(--pad) 0}
.hero h1{font-size:clamp(30px,8.4vw,40px);line-height:1.1}
.hero .knoepfe{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.hero-bild{margin-top:22px;border-radius:var(--r-card);overflow:hidden;background:var(--sand);aspect-ratio:4/3}
.hero-bild img{width:100%;height:100%;object-fit:cover}
.hero-bild.quer img{object-position:82% center}
.hero-bild.quer.mitte img{object-position:center}
.sprung{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.sprung a,.chip{min-height:44px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--sheet);font-size:13px;font-weight:500;color:var(--ink);text-decoration:none}
.sprung a:hover,.chip:hover{background:var(--tint)}
.chip[aria-pressed="true"],.chip.aktiv{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:30px var(--pad) 0}
.abschnitt > h2,.abschnitt h2.h{font-size:23px;line-height:1.2;margin-bottom:14px}
.abschnitt .lead{margin:-6px 0 14px}
.band{margin-top:30px;padding:26px var(--pad);background:var(--sand)}
.band.tint{background:var(--tint)}
.band-innen{max-width:var(--col);margin:0 auto}
.seite.weit .band-innen{max-width:var(--col-weit)}
.hinweis{margin:18px var(--pad) 0;font-size:12px;color:var(--muted);font-weight:300;line-height:1.55}
.text > * + *{margin-top:12px}
.text h2{font-size:21px;line-height:1.25;margin-top:26px}
.text h3{font-size:17px;line-height:1.3;margin-top:20px}
.text p,.text li{font-size:14.5px;line-height:1.65;color:var(--body);font-weight:300}
.text ul,.text ol{padding-left:20px;margin-bottom:0}
.text li + li{margin-top:6px}
.text strong{font-weight:600;color:var(--ink)}
.text table{width:100%;border-collapse:collapse;font-size:13.5px}
.text th,.text td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.text .tabelle{overflow-x:auto}

/* ---------- Knöpfe ---------- */
.knopf{min-height:54px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-btn);background:var(--cta);color:#fff;font-size:15.5px;font-weight:600;text-decoration:none;border:0;width:100%;padding:0 20px;text-align:center}
.knopf:hover{background:var(--cta-hover)}
.knopf.hell{background:var(--sheet);color:var(--ink);border:1px solid var(--line)}
.knopf.hell:hover{background:var(--tint)}
.knopf.mittel{min-height:48px;font-size:15px}
.knopf.auto{width:auto;display:inline-flex}
.knopf[disabled]{opacity:.6;cursor:default}

/* ---------- Karten ---------- */
.karte{padding:18px;border-radius:var(--r-card);background:var(--sheet);border:1px solid var(--line-soft);box-shadow:var(--shadow-card)}
.karte.tint{background:var(--tint)}
.karte h3{font-size:20px;line-height:1.25}
.karte p + p{margin-top:8px}
.karte .t{font-size:14px;line-height:1.6;color:var(--body);font-weight:300;margin-top:6px}
.karte .knopf{margin-top:14px}
.raster{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:700px){ .seite.weit .raster{grid-template-columns:repeat(2,minmax(0,1fr))} .seite.weit .raster.drei{grid-template-columns:repeat(3,minmax(0,1fr))} }
.preis{font-family:var(--f-display);font-size:34px;line-height:1;font-weight:500;color:var(--ink);margin:10px 0 4px}
.preis small{font:400 13px var(--f-body);color:var(--muted)}
.tag,.etikett{display:inline-flex;align-items:center;min-height:26px;padding:0 11px;border-radius:999px;background:var(--sand);color:var(--ink);font-size:12px;font-weight:500}
.etikett.voll{background:var(--cta);color:#fff;font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.vorteile ul,.liste-icons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.vorteile li{padding:14px 12px;border-radius:14px;background:var(--sand);display:flex;flex-direction:column;gap:4px}
.vorteile li svg{width:20px;height:20px;stroke:var(--cta);margin-bottom:2px}
.vorteile li b{font-size:13.5px;font-weight:600;line-height:1.3}
.vorteile li span{font-size:12px;color:var(--body);font-weight:300;line-height:1.45}
@media (min-width:700px){ .vorteile ul{grid-template-columns:repeat(3,minmax(0,1fr))} }
.probe{margin:30px var(--pad) 0;padding:20px 18px;border-radius:var(--r-card);background:var(--ink);color:#F4ECE8}
.probe .ueber{color:#D9B2A9}
.probe h2{font-size:23px;line-height:1.2;color:#fff}
.probe h2 em{color:#E3B7AE}
.probe p.t{margin:8px 0 14px;font-size:13.5px;color:#CFC3BE;font-weight:300;line-height:1.55}
.probe .knopf{background:#fff;color:var(--ink)}
.probe .knopf:hover{background:var(--tint)}

/* Zeilenliste (Preise ohne Abo, Verweise) */
.zeilen{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.zeilen a,.zeilen div.z{display:flex;align-items:center;gap:12px;min-height:66px;padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.zeilen .txt{flex:1;min-width:0}
.zeilen .txt b{display:block;font-size:14.5px;font-weight:600}
.zeilen .txt span{font-size:12.5px;color:var(--muted);font-weight:300}
.zeilen .p{font-family:var(--f-display);font-size:20px;font-weight:500;white-space:nowrap}
.zeilen .pfeil{width:16px;height:16px;stroke:var(--rose);flex:none}

/* Termin-Karte (Last-Minute) */
.lm-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.lm-termin{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 12px;padding:14px;border-radius:var(--r-card);background:var(--sheet);border:1px solid var(--line-soft);box-shadow:var(--shadow-card)}
.lm-txt{min-width:0}
.lm-txt b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.lm-txt span{font-size:13px;color:var(--muted)}
.lm-preis{font-family:var(--f-display);font-size:22px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.lm-kauf{grid-column:1 / -1;min-height:48px;font-size:15px}
.lm-leer{padding:18px 16px;border-radius:14px;background:var(--sand)}
.lm-leer p{font-size:14.5px;line-height:1.55;color:var(--body)}
.lm-leer .links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.lm-leer .links a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--sheet);font-size:14px;font-weight:500;color:var(--ink);text-decoration:none}
@media (min-width:700px){ .lm-termin{grid-template-columns:1fr auto 180px} .lm-kauf{grid-column:auto} }

/* Trainer-Karte */
.trainer{display:flex;flex-direction:column}
.trainer .foto{aspect-ratio:4/3;border-radius:4px 18px 4px 18px;background:var(--sand);overflow:hidden;display:flex;align-items:center;justify-content:center;font:500 56px var(--f-display);color:var(--cta-hover);margin-bottom:14px}
.trainer .foto img{width:100%;height:100%;object-fit:cover}
.trainer h3{font-size:22px}
.trainer .tags{margin:10px 0 8px}
.trainer.inhaberin{border:2px solid var(--cta);background:var(--tint)}
.trainer.inhaberin .tag{background:#fff}
.filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}

/* ---------- FAQ ---------- */
.fragen{padding:30px var(--pad) 0}
.fragen h2{font-size:23px;line-height:1.2;margin-bottom:14px}
.fragen details{border-top:1px solid var(--line)}
.fragen details:last-of-type{border-bottom:1px solid var(--line)}
.fragen summary{list-style:none;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14.5px;font-weight:500;cursor:pointer;padding:6px 0}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary i{font-style:normal;color:var(--cta);font-size:22px;transition:transform .2s ease;flex:none}
.fragen details[open] summary i{transform:rotate(45deg)}
.fragen details p{padding-bottom:14px;font-size:13.5px;line-height:1.6;color:var(--body);font-weight:300}

/* ---------- Formulare ---------- */
.form{display:flex;flex-direction:column;gap:14px}
.form label,.feld{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin:0 0 5px}
.form input[type=text],.form input[type=email],.form input[type=tel],.form input[type=date],.form input[type=number],.form select,.form textarea,
.liste input[type=text],.liste input[type=email]{width:100%;min-height:52px;padding:0 14px;border:1.5px solid var(--field);border-radius:var(--r-field);background:#fff;font:inherit;font-size:16px;color:var(--ink)}
.form textarea{padding:12px 14px;min-height:120px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus,.liste input:focus{outline:3px solid rgba(135,79,69,.35);outline-offset:0;border-color:var(--cta-hover)}
.form .hilfe{font-size:12.5px;color:var(--muted);font-weight:300;margin-top:4px}
.form .wahl,.liste .wahl{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:6px 0;font-size:14px;line-height:1.5;color:var(--body);font-weight:400;cursor:pointer}
.form .wahl input,.liste .wahl input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--cta)}
.pc-anfrage-status{font-size:14px;line-height:1.5;min-height:1.2em;color:var(--body)}
.pc-anfrage-status.fehler,.pc-anfrage-status[data-fehler],.status.fehler{color:var(--err)}
.pc-anfrage-danke,.hinweisbox{display:block;border-radius:12px;padding:14px 16px;font-size:14px;line-height:1.5;border:1px solid var(--line);background:var(--tint);color:var(--body)}
.pc-anfrage-danke{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok);font-weight:500}
.hinweisbox.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.hinweisbox.fehler{background:var(--err-bg);border-color:var(--err-line);color:var(--err)}
.hinweisbox b{font-weight:600}
/* Restplatz-Mail (Last-Minute) */
.liste{margin:18px var(--pad) 0;padding:18px 16px;border-radius:var(--r-card);background:var(--sheet);border:1px solid var(--line-soft)}
.liste h2{font-size:21px;line-height:1.2;margin-bottom:6px}
.liste .lead{margin-top:0;margin-bottom:12px}
.liste label.feld{display:block;font-size:13px;font-weight:500;color:var(--muted);margin:10px 0 4px}
.liste fieldset{border:0;margin:12px 0 0;padding:0}
.liste legend{font-size:13px;font-weight:500;color:var(--muted);margin-bottom:4px;padding:0}
.liste .einw{font-size:13px}
.liste .knopf{margin-top:12px}
.liste .status{font-size:13.5px;margin-top:10px;min-height:1.2em;color:var(--body)}
.liste .danke{font-size:14.5px;line-height:1.6;color:var(--body)}
.neu{margin:18px var(--pad) 0;padding:14px 16px;border-radius:14px;background:var(--tint);font-size:14px;line-height:1.55;color:var(--body)}
.neu a{font-weight:600}

/* ---------- Kontakt-Details ---------- */
.kontakt-zeilen{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.kontakt-zeilen a,.kontakt-zeilen div{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:15px}
.kontakt-zeilen b{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.karte-einbettung{margin-top:14px;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line-soft);aspect-ratio:4/3;background:var(--sand)}
.karte-einbettung iframe{width:100%;height:100%;border:0}

/* ---------- Studio-News ---------- */
.news-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.news-card{border-radius:var(--r-card);background:var(--sheet);border:1px solid var(--line-soft);box-shadow:var(--shadow-card);overflow:hidden}
.news-card-img{aspect-ratio:16/10;background:var(--sand);display:flex;align-items:center;justify-content:center;overflow:hidden}
.news-card-img img{width:100%;height:100%;object-fit:cover}
.news-card-img-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.news-card-img-placeholder img{width:96px;height:auto;object-fit:contain}
.news-card-body{padding:16px}
.news-card-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;font-size:12px;color:var(--muted)}
.news-card-kat{background:var(--sand);color:var(--ink);border-radius:999px;padding:2px 10px;font-weight:500}
.news-card-titel{font-family:var(--f-display);font-size:20px;line-height:1.25;color:var(--ink);margin-bottom:6px}
.news-card-text{font-size:14px;line-height:1.6;color:var(--body);font-weight:300}
.news-card-video a,.news-card-autor{font-size:13px}
@media (min-width:700px){ .seite.weit .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
#news-loading,#news-error{padding:18px 16px;border-radius:14px;background:var(--sand);font-size:14px;color:var(--body)}

/* ---------- Fußzeile ---------- */
.fuss{margin-top:30px;background:var(--ink);color:#CFC3BE;padding:28px var(--pad) calc(110px + env(safe-area-inset-bottom))}
.fuss .inner{max-width:var(--col);margin:0 auto}
.fuss img{height:80px;width:auto;margin-bottom:14px}
.fuss address{font-style:normal;font-size:13.5px;line-height:1.7;font-weight:300}
.fuss .kontakt{display:flex;flex-direction:column;margin-top:6px}
.fuss .kontakt a{display:flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:#fff;text-decoration:none}
.fuss .navi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;margin-top:10px;border-top:1px solid rgba(255,255,255,.12);padding-top:6px}
.fuss .navi a{display:flex;align-items:center;min-height:44px;font-size:14px;color:#E4D9D4;text-decoration:none}
.fuss .legal{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:10px;padding-top:6px;border-top:1px solid rgba(255,255,255,.12);font-size:13px}
.fuss .legal a{color:#C9BDB8;min-height:44px;display:inline-flex;align-items:center}
.fuss .copy{margin-top:8px;font-size:12px;color:#A99B95}
.fuss a:hover{color:#fff}

/* ---------- Untere Leiste (Handy) ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;max-width:var(--col);margin:0 auto;display:flex;gap:8px;padding:10px var(--pad) calc(12px + env(safe-area-inset-bottom));
      background:rgba(250,246,243,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line-soft)}
.dock a,.dock button{flex:1;min-height:52px;font-size:14.5px}

/* ---------- Desktop: gleiche Bausteine, etwas mehr Luft ---------- */
@media (min-width:700px){
  .einstieg{padding-top:36px} .hero{padding-top:36px}
  .hero .knoepfe{flex-direction:row}
  .hero .knoepfe .knopf{width:auto;flex:1}
  .abschnitt{padding-top:44px} .band{padding-top:36px;padding-bottom:36px}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }

/* ---------- Bilder in Karten, Team-Vorschau, Fakten ---------- */
.karte .bild{margin:-18px -18px 14px;aspect-ratio:3/2;overflow:hidden;border-radius:4px 22px 0 0;background:var(--sand)}
.karte .bild img{width:100%;height:100%;object-fit:cover}
.bild img[src$="kurs-pilates.webp"]{object-position:82% 30%!important}
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.team li{text-align:left}
.team .foto{aspect-ratio:3/4;border-radius:4px 16px 4px 16px;overflow:hidden;background:var(--sand);margin-bottom:8px}
.team .foto img{width:100%;height:100%;object-fit:cover;object-position:center top}
.team b{display:block;font-size:14px;font-weight:600}
.team span{font-size:12px;color:var(--muted)}
.fakten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fakten li{padding:14px 12px;border-radius:14px;background:var(--sand)}
.fakten b{display:block;font:500 28px/1 var(--f-display);color:var(--ink);margin-bottom:4px}
.fakten span{display:block;font-size:12.5px;line-height:1.4;color:var(--body);font-weight:300}
.fakten.drei,.fakten .breit{grid-column:auto}

/* ---------- Ergänzungen aus der Seitenumstellung ---------- */
[hidden]{display:none!important}
.trainer .etikett{align-self:flex-start;margin-bottom:6px}
.checkliste{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.checkliste li{position:relative;padding-left:22px;font-size:14px;line-height:1.5;color:var(--body);font-weight:300}
.checkliste li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:6px;border-left:2px solid var(--cta);border-bottom:2px solid var(--cta);transform:rotate(-45deg)}
.karte audio{display:block;width:100%;margin-top:12px;min-height:44px}
.vorteile li.breit{grid-column:1/-1}
.knopf.auf-dunkel{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.knopf.auf-dunkel:hover{background:rgba(255,255,255,.12)}
.zwei{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media (min-width:700px){ .seite.weit .zwei{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start} }

/* ==========================================================================
   Desktop (ab 1024 px) – gleiche Inhalte, mehr Platz
   Kopfzeile mit Menüpunkten statt Burger, Hero zweispaltig, Raster mehrspaltig,
   Fußzeile in Spalten. Dazwischen (700–1023 px) bleibt es beim Handy-Menü.
   ========================================================================== */
.hauptnav{display:none}
@media (min-width:1024px){
  :root{--pad:32px;--col:1120px;--col-weit:1120px}
  body{font-size:16px}
  section{scroll-margin-top:96px}

  /* Kopfzeile */
  .kopf{gap:12px;padding:12px max(var(--pad),calc((100% - 1120px)/2 + var(--pad)))}
  .kopf .marke{margin-right:0}
  .kopf .marke img{height:56px}
  .burger,.menu{display:none!important}
  body.menu-offen{overflow:auto}
  .kopf-probe{min-height:48px;padding:0 22px;font-size:14.5px;border-radius:var(--r-btn)}
  .kopf .rund{width:48px;height:48px}
  .hauptnav{display:block;margin:0 auto 0 36px}
  .hauptnav ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
  .hauptnav li{position:relative}
  .hauptnav a,.hauptnav button{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-radius:12px;background:transparent;font:500 15px var(--f-body);color:var(--ink);text-decoration:none;cursor:pointer;white-space:nowrap}
  .hauptnav a:hover,.hauptnav button:hover,.hauptnav .ebene:focus-within > button{background:var(--tint)}
  .hauptnav a[aria-current="page"]{color:var(--cta-hover);box-shadow:inset 0 -2px 0 var(--cta);border-radius:12px 12px 0 0}
  .hauptnav svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
  .hauptnav .ebene:hover > button svg,.hauptnav .ebene:focus-within > button svg{transform:rotate(180deg)}
  .hauptnav .panel{position:absolute;top:calc(100% + 10px);left:-8px;min-width:250px;padding:8px;border-radius:var(--r-card);background:var(--sheet);border:1px solid var(--line-soft);box-shadow:0 24px 50px -24px rgba(60,38,32,.5);display:none;z-index:70}
  .hauptnav .panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
  .hauptnav .panel.rechts{left:auto;right:-8px}
  .hauptnav .panel.zwei-sp{min-width:480px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .hauptnav:not([data-zu]) .ebene:hover > .panel,.hauptnav:not([data-zu]) .ebene:focus-within > .panel{display:block}
  .hauptnav:not([data-zu]) .ebene:hover > .panel.zwei-sp,.hauptnav:not([data-zu]) .ebene:focus-within > .panel.zwei-sp{display:grid}
  .hauptnav .panel a{justify-content:space-between;min-height:46px;padding:0 14px;font-size:14.5px;font-weight:400}
  .hauptnav .panel a span{font-size:11px;color:var(--muted)}

  /* Seitenrahmen */
  .seite{padding-bottom:32px}
  .seite.schmal{max-width:780px}
  .seite.schmal .einstieg,.seite.schmal .abschnitt{padding-left:var(--pad);padding-right:var(--pad)}
  .einstieg{padding-top:56px}
  .einstieg h1{font-size:46px;max-width:820px}
  .einstieg .lead{max-width:680px}
  .abschnitt{padding-top:72px}
  .abschnitt > h2,.abschnitt h2.h,.fragen h2{font-size:34px;margin-bottom:22px}
  .abschnitt .lead{font-size:16.5px;max-width:680px}
  .lead{font-size:16.5px}
  .band{margin-top:64px;padding-top:56px;padding-bottom:56px}
  .text p,.text li{font-size:16px}
  .text h2{font-size:26px}
  .seite.schmal .text,.text.schmal{max-width:720px}

  /* Hero zweispaltig */
  .hero{padding-top:64px}
  .hero:has(.hero-bild){display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-auto-rows:min-content;column-gap:64px;align-items:center;align-content:center}
  .hero:has(.hero-bild) > *{grid-column:1}
  .hero:has(.hero-bild) > .hero-bild{grid-column:2;grid-row:1/span 8;margin-top:0;aspect-ratio:4/5;max-height:620px}
  .hero:has(.hero-bild) > .hero-bild.quer{aspect-ratio:5/4}
  .hero-bild:not(.quer) img{object-position:center 12%}
  .hero h1{font-size:clamp(44px,4.4vw,58px);line-height:1.07}
  .hero .lead{font-size:17px}
  .hero .knoepfe{max-width:none;margin-top:26px}
  .hero .knoepfe .knopf{white-space:nowrap}
  .hero .knoepfe .knopf{min-width:0}

  /* Raster */
  .raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .seite .raster:has(> :nth-child(3)):not(:has(> :nth-child(4))),.seite .raster:has(> :nth-child(5)),.seite .raster.drei,.seite.weit .raster.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
  .seite .zwei .kontakt-zeilen{grid-template-columns:minmax(0,1fr)}
  .seite .zwei .kontakt-zeilen > :nth-child(2){border-top:0}
  .karte{padding:24px}
  .karte .bild{margin:-24px -24px 18px}
  .karte h3{font-size:22px}
  .fakten,.vorteile .fakten{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .fakten li{padding:22px 20px}
  .fakten b{font-size:44px;margin-bottom:8px}
  .fakten span{font-size:14px}
  .seite .vorteile ul:not(.fakten){grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .vorteile li{padding:20px}
  .vorteile li b{font-size:15px}.vorteile li span{font-size:13.5px}

  /* Formulare nicht über die ganze Breite */
  .abschnitt > form,.abschnitt > .form,.abschnitt > .karte:has(form),.abschnitt > .karte:has(.form){max-width:760px}

  /* Listen mit Zeilen: zwei Spalten */
  .zeilen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;border-top:0}
  .zeilen > :nth-child(-n+2){border-top:1px solid var(--line)}
  .kontakt-zeilen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;border-top:0}
  .kontakt-zeilen > :nth-child(-n+2){border-top:1px solid var(--line)}

  /* Studio + Team */
  .abschnitt:has(> .team){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:64px;align-content:start}
  .abschnitt:has(> .team) > .ueber,.abschnitt:has(> .team) > h2{grid-column:1/-1}
  .abschnitt:has(> .team) > .hero-bild{grid-column:1;grid-row:3/span 2;margin:0!important;aspect-ratio:1/1}
  .abschnitt:has(> .team) > .team{grid-column:2;grid-row:3;gap:16px;align-self:start}
  .abschnitt:has(> .team) > p{grid-column:2;grid-row:4;align-self:start}

  /* Probetraining-Block */
  .probe{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:56px;align-items:center;margin:72px var(--pad) 0;padding:48px 56px}
  .probe > *{grid-column:1}
  .probe > .knopf{grid-column:2;grid-row:1/span 3}
  .probe h2{font-size:34px}
  .probe p.t{font-size:16px;max-width:560px}

  /* Fragen: Überschrift links, Liste rechts */
  .fragen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:64px;grid-auto-rows:min-content;padding-top:72px}
  .fragen > h2{grid-column:1;grid-row:1/span 14;position:sticky;top:104px;align-self:start}
  .fragen > :not(h2){grid-column:2}
  .fragen summary{font-size:16.5px;min-height:64px}
  .fragen details p{font-size:15.5px;max-width:640px}

  /* Trainer, News, Last-Minute */
  .news-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .seite.weit .news-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lm-termin{grid-template-columns:1fr auto 200px;padding:18px 22px}

  /* Fußzeile in Spalten */
  .fuss{margin-top:48px;padding:56px 0 32px}
  .fuss .inner{padding:0 var(--pad)}
  .fuss .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);column-gap:64px;align-items:start}
  .fuss .inner > img{grid-column:1;grid-row:1}
  .fuss .inner > address{grid-column:1;grid-row:2}
  .fuss .inner > .kontakt{grid-column:1;grid-row:3}
  .fuss .inner > .navi{grid-column:2;grid-row:1/span 3;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0;padding-top:0;border-top:0;align-content:start}
  .fuss .inner > .legal{grid-column:1/-1;margin-top:36px}
  .fuss .inner > .copy{grid-column:1/-1}
  .fuss .navi a{font-size:15px}
}
@media (min-width:1280px){
  .abschnitt:has(> .team){column-gap:80px}
}