/* Version 2 (Abdulhamid 08.10.2026, Branch version-2): durchgehend schwarz nach seinen Vorlagen und dem Entwurf „Schwarz mit Farbfotos“.
   Rot nur für Etiketten, Satzpunkt, Anmelden und Live-Anzeige. Keine Icon-Reihen, Häkchenlisten, Nummern oder Dreier-Slogans.
   Inter Tight als einzige Schrift, selbst gehostet (keine Anfrage an Google), Lizenz SIL OFL 1.1, lateinischer Zeichensatz mit Umlauten, ß und €. */
@font-face{font-family:"Inter Tight";src:url("assets/fonts/inter-tight.woff2") format("woff2");font-weight:300 600;font-display:swap}

/* Tokens. Kontrast auf #0a0a0a gemessen: --weiss-2 8,4:1, --weiss-3 4,9:1 (kleine Schrift), --rot-auf-dunkel 5,1:1, Weiß auf --rot 4,6:1. */
:root{
  --schwarz:#0a0a0a; --schwarz-2:#111112; --schwarz-3:#18181a; --flaeche-hell:#0d0d0e;
  --weiss:#f4f2ef; --weiss-2:rgba(244,242,239,.68); --weiss-3:rgba(244,242,239,.5);
  --linie-d:rgba(255,255,255,.09); --linie-2:rgba(255,255,255,.2);
  --rot:#e41c24; --rot-tief:#c8141b; --rot-auf-dunkel:#f1393f;
  --schrift:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --rand:clamp(16px,4vw,56px); --max:1336px; --kopf:84px; --ecke:4px;
  --abstand:clamp(64px,8vw,120px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable;background:var(--schwarz)}
body{margin:0;background:var(--schwarz);color:var(--weiss);font:400 1rem/1.6 var(--schrift);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--weiss);color:var(--schwarz);padding:10px 14px;font-weight:600}
.skip:focus{top:12px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--rand)}
section[id],footer[id]{scroll-margin-top:var(--kopf)}
/* Früher helle Flächen; in Version 2 nur ein Hauch heller als der Grund, damit lange Unterseiten Abschnitte erkennen lassen */
.hell{background:var(--flaeche-hell);color:var(--weiss)}

/* Typografie: schlanke Grotesk, große Überschriften leicht (300), Etiketten klein in Versalien und rot */
.etikett{font:500 .75rem/1.3 var(--schrift);letter-spacing:.22em;text-transform:uppercase;color:var(--rot-auf-dunkel)}
h1,h2{font-family:var(--schrift);font-weight:300;letter-spacing:-.03em;text-wrap:balance}
h1{font-size:clamp(2.75rem,6vw,5.5rem);line-height:.98;letter-spacing:-.035em}
h2{font-size:clamp(2.25rem,4.4vw,3.7rem);line-height:1.02}
.punkt{color:var(--rot)}
.text-2{color:var(--weiss-2)}

/* Knöpfe: Rot für die Anmeldung, Umriss für alles andere, Textlink mit Pfeil */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:0 24px;border:0;border-radius:var(--ecke);background:var(--rot);color:#fff;font:500 .9375rem/1 var(--schrift);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s ease,transform .12s ease}
.knopf:hover{background:var(--rot-tief)}
.knopf:active{transform:scale(.98)}
.knopf-leise{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 22px;border:1px solid var(--linie-2);border-radius:var(--ecke);background:transparent;color:var(--weiss);font:500 .9375rem/1 var(--schrift);text-decoration:none;white-space:nowrap;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.knopf-leise:hover{border-color:var(--weiss)}
.knopf-leise:active{background:rgba(255,255,255,.06)}
.pfeil{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;background:none;font:500 .9375rem/1.2 var(--schrift);color:var(--weiss);text-decoration:none;cursor:pointer}
.pfeil span{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--linie-2);text-underline-offset:7px;transition:text-decoration-color .2s ease}
.pfeil:hover span{text-decoration-color:currentColor}
.knopf svg,.knopf-leise svg,.pfeil svg{flex:none;width:18px;height:10px;transition:transform .2s ease}
.knopf:hover svg,.knopf-leise:hover svg,.pfeil:hover svg{transform:translateX(4px)}
.knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}

/* Kopfzeile wie im Entwurf: Marke links, Navigation als schlichte Links, rechts „Probetraining“ mit rotem Rand. Über dem Hero ohne Fläche. */
.kopf{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top);border-bottom:1px solid transparent;transition:background-color .3s ease,border-color .3s ease}
.kopf.is-solid{background:rgba(10,10,10,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--linie-d)}
.kopf-zeile{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:var(--kopf)}
.marke{display:flex;align-items:center;gap:12px;justify-self:start;color:var(--weiss);text-decoration:none}
.marke img{width:38px}
.wortmarke{display:grid;gap:4px;font:600 .875rem/1.1 var(--schrift);letter-spacing:.26em;text-transform:uppercase}
.wortmarke small{font:400 .625rem/1.3 var(--schrift);letter-spacing:.32em;color:var(--weiss-2)}
.nav{display:flex;gap:clamp(16px,2vw,32px)}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;font:400 .9375rem/1 var(--schrift);color:rgba(244,242,239,.86);text-decoration:none;transition:color .2s ease}
.nav a:hover,.nav a[aria-current="location"]{color:#fff}
.nav a[aria-current="location"]::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--rot)}
.kopf-knopf{justify-self:end;min-height:44px;padding:0 18px;border-color:rgba(228,28,36,.85);font-size:.875rem}
.kopf-knopf svg{color:var(--rot-auf-dunkel)}
.kopf-knopf:hover{border-color:var(--rot)}
.kopf-mobil{display:none;align-items:center;gap:6px;justify-self:end}
.symbol{display:inline-grid;place-items:center;width:44px;height:44px;padding:4px;background-clip:content-box;border-radius:12px;color:#fff;text-decoration:none;transition:filter .2s ease}
.symbol svg{width:24px;height:24px} /* Form wie App-Icons auf dem iPhone: farbig 36 px, Tippfläche 44 px (Abdulhamid 08.10.2026) */
.kopf-mobil .symbol svg{width:20px;height:20px}
/* Symbol-Knöpfe in ihren eigenen Farben (Abdulhamid 08.10.2026): WhatsApp-Grün, Instagram-Verlauf, Anruf ohne Farbe */
.symbol[href*="wa.me"]{background-color:#25d366}
.symbol[href*="instagram.com"]{background-image:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.symbol:hover{filter:brightness(1.1)}
.menue-knopf,.menue-zu{display:inline-flex;align-items:center;min-height:44px;padding:0 0 0 18px;border:0;background:none;font:500 .875rem/1 var(--schrift);color:var(--weiss);cursor:pointer}

/* Menü am Handy und Tablet: alles auf einem Schirm, Links groß und leicht wie die Überschriften */
.menue{position:fixed;inset:0;z-index:60;background:var(--schwarz);overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transition:opacity .25s ease,visibility 0s linear .25s}
.menue.is-open{visibility:visible;opacity:1;transition:opacity .25s ease}
.menue-kopf{display:flex;align-items:center;justify-content:space-between;height:var(--kopf);padding-top:env(safe-area-inset-top)}
.menue-inhalt{display:grid;grid-template-columns:max-content max-content;gap:clamp(16px,3svh,30px) 40px;padding-block:clamp(10px,2.6svh,32px) calc(24px + env(safe-area-inset-bottom))}
.menue nav{display:grid}
.menue nav .etikett{margin-bottom:8px;color:var(--weiss-3)}
/* Schriftgröße aus der Breite des längsten Worts („Trainingsplan“, rund 6,4 em in Inter Tight 300) und aus der Höhe */
.menue nav a{display:flex;align-items:center;min-height:clamp(37px,6.2svh,54px);font:300 min(calc((100vw - 2 * var(--rand) - 40px) / 13.2),5.6svh,2.75rem)/1 var(--schrift);letter-spacing:-.02em;text-decoration:none;color:var(--weiss);transition:color .15s ease}
/* Menüpunkte färben sich beim Durchgehen rot (Abdulhamid 08.10.2026); Hover nur mit Maus, sonst bliebe ein angetippter Punkt rot */
@media (hover:hover){.menue nav a:hover{color:var(--rot-auf-dunkel)}}
.menue nav a:focus-visible,.menue nav a:active{color:var(--rot-auf-dunkel)}
.menue-fuss{grid-column:1 / -1;width:0;min-width:100%;display:grid;gap:16px;border-top:1px solid var(--linie-d);padding-top:clamp(14px,2.8svh,26px)}
.menue-fuss .knopf{justify-self:start}
.menue-fuss address{font-style:normal;font-size:.9375rem;color:var(--weiss-2);line-height:1.55}
.menue-fuss address b{display:block;color:var(--weiss);font-weight:500}
.menue-symbole{display:flex;gap:8px}

/* Status im Hero: Punkt, rot während eines Trainings */
.status{display:inline-flex;align-items:center;gap:10px;color:var(--weiss)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--weiss-3)}
.status.live::before{background:var(--rot);box-shadow:0 0 0 5px rgba(228,28,36,.22)}

/* ===== 1 Hero wie in main (Abdulhamid 08.10.2026), mit roten Akzenten aus Version 2 =====
   Vereinsfoto über die ganze Fläche, Überschrift groß links, rechts Etikett (rot), Text, Anmelden (rote Fläche) und Live-Zeile. */
.auftakt{position:relative;display:grid;align-items:end;min-height:100vh;min-height:100svh;overflow:hidden;isolation:isolate;background:var(--schwarz)}
.auftakt-bild{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:64% 28%}
.auftakt::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(10,10,10,.55),rgba(10,10,10,0) 55%),linear-gradient(0deg,rgba(10,10,10,.95) 0%,rgba(10,10,10,.3) 55%,rgba(10,10,10,.62) 100%)}
.auftakt-raster{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px 64px;align-items:end;padding-block:calc(var(--kopf) + 40px) clamp(36px,5vw,64px)}
.auftakt h1{font-size:clamp(2.875rem,7vw,6.75rem);line-height:.96;letter-spacing:-.04em}
.auftakt-rechts{display:grid;gap:18px;justify-items:start;max-width:460px}
.auftakt-text{font-size:1.0625rem;line-height:1.55;color:var(--weiss-2)}
.auftakt-info{display:grid;gap:6px;font-size:.875rem;color:var(--weiss-2)}
@media (max-width:980px){.auftakt-raster{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){
  .auftakt-bild{object-position:70% 30%}
  .auftakt::after{background:linear-gradient(0deg,rgba(10,10,10,.96) 8%,rgba(10,10,10,.55) 52%,rgba(10,10,10,.3) 75%,rgba(10,10,10,.7) 100%)}
  .auftakt .knopf{justify-self:stretch}
}

/* ===== Abschnitte der Startseite (Entwurf Schwarz) ===== */
.kopfzeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:48px}
.kopfzeile > div{display:grid;gap:18px}
.kopfzeile .text-2{max-width:52ch;font-size:1.0625rem;line-height:1.6}

/* 2 Trainingsplan wie in main (Abdulhamid 08.10.2026), in den Farben von Version 2: oben Tag und Tagesleiste, darunter die Kurse als Fotokarten in zwei Spalten */
.heute{padding-block:clamp(56px,6vw,96px);border-top:1px solid var(--linie-d)}
.heute-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 40px;margin-bottom:28px}
.heute-titel{display:grid;gap:14px}
[data-plan-titel]::after{content:".";color:var(--rot)}
.tage{display:flex;gap:4px}
.tage[hidden]{display:none}
.tage button{display:grid;justify-items:center;align-content:center;gap:6px;min-width:54px;min-height:62px;padding:8px 6px;border:0;border-radius:var(--ecke);background:none;color:var(--weiss-3);font:inherit;cursor:pointer;transition:background-color .2s ease}
.tage small{font:500 .75rem/1 var(--schrift);letter-spacing:.06em;text-transform:uppercase}
.tage b{font:400 1.375rem/1 var(--schrift);font-variant-numeric:tabular-nums;color:var(--weiss)}
.tage button:hover{background:var(--schwarz-3)}
.tage button[aria-pressed="true"]{background:var(--rot);color:#fff}
.tage button[aria-pressed="true"] b{color:#fff}
.tage .woche{padding-inline:16px;font:500 .875rem/1 var(--schrift);color:var(--weiss)}
.heute-hinweis{margin-bottom:16px;padding:14px 18px;border-radius:var(--ecke);background:var(--schwarz-2);border:1px solid var(--linie-d);font-size:.9375rem}
.heute-hinweis[hidden]{display:none}
.kurse{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kurs{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);height:clamp(164px,12.4vw,190px);border:1px solid var(--linie-d);border-radius:var(--ecke);overflow:hidden;background:var(--schwarz-2);color:var(--weiss);text-decoration:none;transition:border-color .2s ease}
.kurs[hidden]{display:none}
.kurs:hover{border-color:var(--linie-2)}
.kurs img{width:100%;height:100%;object-fit:cover;transition:filter .3s ease}
.kurs:hover img{filter:brightness(1.12)}
.kurs:hover .kurs-name{text-decoration:underline 1px;text-underline-offset:4px}
.kurs-info{position:relative;display:grid;align-content:start;gap:6px;padding:clamp(16px,1.6vw,22px)}
.kurs .etikett{letter-spacing:.18em;color:var(--weiss-3)}
.kurs .etikett.rot{color:var(--rot-auf-dunkel)}
.kurs-name{margin-top:2px;font:300 clamp(1.375rem,1.9vw,1.75rem)/1.1 var(--schrift);letter-spacing:-.02em}
.kurs-zeit{font:400 1.0625rem/1.3 var(--schrift);font-variant-numeric:tabular-nums;color:var(--weiss-2)}
.heute.tag .kurs-tage{display:none}
.kurs-thema{font:500 .75rem/1.35 var(--schrift);letter-spacing:.14em;text-transform:uppercase;color:var(--rot-auf-dunkel)}
.kurs-thema[hidden]{display:none}
.kurs-live{display:none;align-items:center;gap:8px;font-size:.8125rem;color:var(--weiss)}
.kurs-live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rot);box-shadow:0 0 0 4px rgba(228,28,36,.22)}
.kurs.laeuft .kurs-live{display:inline-flex}
@media (max-width:720px){.kurse{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){
  .heute-kopf{gap:16px;margin-bottom:16px}
  .heute h2{font-size:1.875rem}
  .tage{width:100%;justify-content:space-between;gap:2px}
  .tage button{flex:1;min-width:0;min-height:56px;padding-inline:2px}
  .tage .woche{padding-inline:8px}
  .kurse{gap:8px}
  /* Handy: Kurse als kompakte Zeilen (Beginn, Bild, Kurs) wie in main, damit vier Kurse auf einen Schirm passen */
  .kurs{grid-template-columns:44px 56px minmax(0,1fr);height:auto;align-items:center;gap:12px;padding:8px 12px}
  .kurs::before{content:attr(data-start);font:400 .9375rem/1 var(--schrift);font-variant-numeric:tabular-nums;color:var(--weiss)}
  .kurs img{width:56px;height:56px;border-radius:3px}
  .kurs-info{padding:0;gap:2px}
  .kurs-name{font-size:1.125rem}
  .kurs-zeit{font-size:.8125rem}
  .kurs-thema{font-size:.6875rem}
}

/* 3 Disziplinen: Fotokacheln, unten im Bild Name und Inhalte */
.sparten{padding-block:var(--abstand);border-top:1px solid var(--linie-d)}
.sparten-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
/* position:relative hält die Schrift in der Kachel */
.sparte{position:relative;display:block;aspect-ratio:3 / 4;overflow:hidden;border-radius:var(--ecke);background:var(--schwarz-3);color:var(--weiss);text-decoration:none}
.sparte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale .6s ease}
.sparte:hover img{scale:1.04}
.sparte::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.6) 30%,rgba(10,10,10,0) 58%)}
.sparte-text{position:absolute;left:20px;right:20px;bottom:20px;z-index:1;display:grid;gap:6px}
.sparte-text b{font:600 .9375rem/1.2 var(--schrift);letter-spacing:.16em;text-transform:uppercase}
.sparte-text span{font-size:.875rem;line-height:1.4;color:var(--weiss-2);font-variant-numeric:tabular-nums}
.sparte-text .sparte-inhalt{color:var(--weiss)}
.sparte:hover b{text-decoration:underline 1px;text-underline-offset:5px}

/* 4 Kinder: Foto links über die halbe Breite, Text rechts */
.kids{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:640px;border-top:1px solid var(--linie-d)}
.kids-bild{position:relative;overflow:hidden;background:var(--schwarz-3)}
.kids-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.kids-text{display:grid;align-content:center;justify-items:start;gap:24px;padding:clamp(48px,6vw,96px) clamp(24px,6vw,96px)}
.kids-text > p:not(.etikett){max-width:46ch;font-size:1.0625rem;line-height:1.6;color:var(--weiss-2)}
.kids-text > p.kids-zeiten{padding-left:18px;border-left:1px solid var(--rot);font-size:.9375rem}

/* 5 Head Coach: Text links, Foto rechts */
.coach{padding-block:var(--abstand);border-top:1px solid var(--linie-d)}
.coach-raster{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:center}
.coach-text{display:grid;gap:22px;justify-items:start}
.coach-text .text-2{max-width:44ch;font-size:1.0625rem;line-height:1.6}
/* Hochkant-Foto: quadratischer Ausschnitt von oben, sonst fehlt Daniels Kopf (er steht im obersten Sechstel) */
.coach-bild{aspect-ratio:1;overflow:hidden;border-radius:var(--ecke);background:var(--schwarz-3)}
.coach-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* 6 Wettkampf: Foto über die ganze Breite, links abgedunkelt für die Überschrift, unten für den Text */
.kampf{position:relative;isolation:isolate;display:grid;align-content:end;min-height:620px;overflow:hidden;border-top:1px solid var(--linie-d)}
.kampf-bild{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.kampf::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,10,10,.85) 0%,rgba(10,10,10,.35) 45%,rgba(10,10,10,0) 70%),linear-gradient(0deg,rgba(10,10,10,.95) 0%,rgba(10,10,10,.35) 55%,rgba(10,10,10,.5) 100%)}
.kampf-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:24px 64px;align-items:end;width:100%;padding-block:72px}
.kampf-raster > div{display:grid;gap:18px}
.kampf .text-2{max-width:46ch;font-size:1.0625rem;line-height:1.6}

/* 7 Mitgliedschaft: links Überschrift, rechts drei Karten (die Karten auch auf /mitgliedschaft) */
.tarife{padding-block:var(--abstand);border-top:1px solid var(--linie-d)}
.tarife-aussen{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:32px clamp(32px,6vw,96px);align-items:start}
.tarife-kopf{display:grid;gap:18px}
.tarife-kopf .text-2{font-size:1.0625rem;line-height:1.6}
.tarife-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tarif{display:grid;align-content:start;gap:14px;padding:28px 24px;border:1px solid var(--linie-d);border-radius:var(--ecke);background:var(--schwarz-2)}
.tarif-name{font:500 .75rem/1.3 var(--schrift);letter-spacing:.2em;text-transform:uppercase;color:var(--weiss-2)}
.tarif-betrag{font:300 2.5rem/1 var(--schrift);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tarif-betrag small{display:block;margin-top:8px;font-size:.8125rem;font-weight:400;letter-spacing:0;color:var(--weiss-3)}
.tarif p:not(.tarif-name):not(.tarif-betrag){font-size:.9375rem;line-height:1.5;color:var(--weiss-2)}
.tarif-gratis{border-color:rgba(228,28,36,.55)}
.tarif-gratis .tarif-name{color:var(--rot-auf-dunkel)}
.tarif .knopf{justify-self:start;min-height:46px;margin-top:6px;font-size:.875rem}

/* 8 Bewertungen: Kopf wie im Entwurf, Band wie bei BOZABA (Endlosschleife per transform, Rand weich ausgeblendet) */
.stimmen{padding-block:var(--abstand);border-top:1px solid var(--linie-d)}
/* Google-Note wie in Version 1 (Abdulhamid 08.10.2026): Zahl und Sterne in einer Zeile, rechtsbündig */
.note{display:grid;justify-items:end;gap:6px;justify-self:end;color:var(--weiss);text-decoration:none}
.note-zeile{display:flex;align-items:center;gap:10px}
.note b{font:300 2.5rem/1 var(--schrift);letter-spacing:-.02em}
.note small{font-size:.875rem;color:var(--weiss-3)}
.note:hover small{text-decoration:underline;text-underline-offset:3px}
.sterne{display:flex;gap:4px;color:var(--rot)}
.sterne svg{width:16px;height:16px}
.band-rahmen{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;padding-block:4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.band-rahmen.greift{cursor:grabbing}
.band-rahmen:focus-visible{outline:2px solid var(--weiss);outline-offset:4px}
.band-spur{display:flex;gap:12px;width:max-content;padding-inline:var(--rand);will-change:transform}
.rezension{display:flex;flex-direction:column;flex:none;width:min(80vw,24rem);padding:28px 26px;border-radius:var(--ecke);background:var(--schwarz-2);border:1px solid var(--linie-d);color:var(--weiss);transition:background-color .4s ease,border-color .4s ease}
/* Zwei Dunkeltöne im Wechsel (früher Weißtöne, Abdulhamid 08.10.2026). Als Klasse an der Karte, damit die Kopien im Band gleich aussehen. */
.rezension.ton-2{background:#141415}
.rezension.ton-3{background:#171718}
.rezension .sterne svg{width:14px;height:14px}
.rezension blockquote{flex:1;margin-top:16px;font:400 1.1875rem/1.5 var(--schrift);text-wrap:pretty}
.rezension footer{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid var(--linie-d)}
.kuerzel{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--schwarz-3);border:1px solid var(--linie-d);font:500 .875rem/1 var(--schrift)}
.rezension b{display:block;font:500 .9375rem/1.25 var(--schrift)}
.rezension small{display:block;font-size:.875rem;color:var(--weiss-3)}
@media (hover:hover){.rezension:hover{border-color:rgba(228,28,36,.55);background:var(--schwarz-3)}}
.band-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;margin-top:26px;font-size:.875rem;color:var(--weiss-3)}
.band-fuss a,.band-fuss button{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px;padding:0;background:none;border:0;font:inherit;color:var(--weiss-2);text-decoration:underline;text-decoration-color:var(--linie-2);text-underline-offset:4px;cursor:pointer}
.band-fuss a:hover,.band-fuss button:hover{color:var(--weiss);text-decoration-color:currentColor}
/* Vor und zurück (Audit 09.10.2026): runde Pfeilknöpfe; eigene Regel, sonst macht „.band-fuss button“ sie zur Flexbox und das Zeichen sitzt schief */
.band-steuerung{display:inline-flex;align-items:center;gap:10px}
.band-fuss .band-pfeil{display:inline-grid;place-items:center;width:40px;height:40px;margin-block:-10px;border:1px solid var(--linie-2);border-radius:50%;color:var(--weiss);text-decoration:none}
.band-fuss .band-pfeil:hover{border-color:var(--weiss)}
.band-fuss .band-pfeil:focus-visible{outline:2px solid var(--weiss);outline-offset:2px}
.band-fuss .band-pfeil svg{width:16px;height:16px}
.band-fuss [data-band-zurueck] svg{transform:scaleX(-1)}
/* „hidden“ muss gegen die display-Regeln oben gewinnen (Pausenknopf bei reduzierter Bewegung) */
.band-fuss [hidden]{display:none}
/* Auf Touch-Geräten wischt man das Band mit dem Finger, dort keine Pfeilknöpfe (Abdulhamid 09.10.2026); die Pfeiltasten wirken weiter */
@media (hover:none) and (pointer:coarse){.band-fuss .band-pfeil{display:none}}

/* 9 Kontakt und Fußzeile (auf allen Seiten): schwarz ohne Hintergrundbild (Abdulhamid 08.10.2026), links Schlussaufruf und Angaben, rechts die Karte */
.kontakt{position:relative;isolation:isolate;overflow:hidden;border-top:1px solid var(--linie-d);background:var(--schwarz);color:var(--weiss)}
.kontakt-raster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;padding-block:clamp(72px,9vw,128px)}
.schluss{display:grid;gap:30px;justify-items:start;align-content:start}
.kontakt-daten{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;gap:16px 40px}
.kontakt-daten dt{margin-bottom:8px;font:500 .75rem/1.3 var(--schrift);letter-spacing:.2em;text-transform:uppercase;color:var(--weiss-3)}
.kontakt-daten dd{font-size:.9375rem;line-height:1.6;color:var(--weiss)}
.kontakt-daten a{text-decoration:none;overflow-wrap:anywhere}
.kontakt-daten a:hover{text-decoration:underline;text-underline-offset:4px}
.karte{position:relative;min-height:320px;border-radius:var(--ecke);overflow:hidden;border:1px solid var(--linie-d);background:var(--schwarz-3)}
.karte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.pin{position:absolute;left:62%;top:50%;width:26px;height:34px;transform:translate(-50%,-100%);color:var(--rot);filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.karte .knopf-leise{position:absolute;left:16px;bottom:34px;z-index:2;min-height:44px;border-color:transparent;background:rgba(10,10,10,.82);font-size:.875rem}
.karte .knopf-leise:hover{background:rgba(10,10,10,.95)}
.attrib{position:absolute;right:8px;bottom:6px;z-index:3;padding:1px 6px;border-radius:3px;background:rgba(255,255,255,.82);font-size:.6875rem;color:#333}
.fuss{position:relative;border-top:1px solid var(--linie-d);background:var(--schwarz);padding-block:44px calc(32px + env(safe-area-inset-bottom));font-size:.875rem;color:var(--weiss-2)}
.fuss-raster{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px 56px;align-items:start}
.fuss nav{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:end;gap:24px clamp(32px,5vw,72px)}
.fuss nav div{display:grid;align-content:start}
.fuss nav b{margin-bottom:6px;font:500 .75rem/1.3 var(--schrift);letter-spacing:.2em;text-transform:uppercase;color:var(--weiss-3)}
.fuss a{display:inline-flex;align-items:center;min-height:36px;text-decoration:none}
.fuss nav a:hover{color:var(--weiss)}
/* WhatsApp und Instagram unter dem Logo, linksbündig und in derselben Reihenfolge wie im Menü (Abdulhamid 08.10.2026: im Fuß standen sie verschoben, im Menü sind sie gut); die 4 px Tippfläche ausgleichen, damit die Symbole bündig mit dem Logo sitzen */
.fuss-marke{display:grid;gap:16px;justify-items:start;align-content:start}
.fuss-symbole{display:flex;gap:8px;margin-left:-4px}
/* „.fuss a“ macht Links zu Flexboxen und schob das Zeichen nach links aus der Mitte; Symbole bleiben Grid mit zentriertem Zeichen wie im Menü */
.fuss .symbol{display:inline-grid;min-height:44px}
.fuss-unten{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:24px;border-top:1px solid var(--linie-d);font-size:.8125rem;color:var(--weiss-3)}

/* Anmeldung als Fenster, dunkel wie die Seite: Wahl als Schalter, rote Fläche zum Senden */
.anfrage{width:min(560px,calc(100% - 24px));max-height:calc(100svh - 24px);margin:auto;padding:0;border:1px solid var(--linie-2);border-radius:6px;background:var(--schwarz-2);color:var(--weiss);overflow:auto}
.anfrage::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.anfrage form{display:grid;gap:14px;padding:clamp(22px,4vw,36px)}
.anfrage-kopf{display:flex;align-items:start;justify-content:space-between;gap:16px}
.anfrage-kopf .etikett{margin-bottom:10px}
.anfrage h2{font-size:1.875rem}
.schliessen{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:-6px -6px 0 0;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:var(--weiss);cursor:pointer}
.schliessen:hover{background:rgba(255,255,255,.12)}
.schliessen svg{width:18px;height:18px}
.feld{display:grid;gap:6px}
.feld label,.feldgruppe legend{font-size:.8125rem;font-weight:500;color:var(--weiss)}
.feld input,.feld select,.feld textarea{width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--linie-2);border-radius:var(--ecke);background:var(--schwarz);color:var(--weiss);font:inherit;font-size:1rem}
.feld input::placeholder,.feld textarea::placeholder{color:var(--weiss-3)}
.feld textarea{min-height:76px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:2px solid var(--weiss);outline-offset:0;border-color:transparent}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.feldgruppe{border:0;padding:0;margin:0;display:grid;gap:8px}
.wahl{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--linie-d);border-radius:6px;background:var(--schwarz)}
.wahl input{position:absolute;opacity:0;pointer-events:none}
.wahl label{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:var(--ecke);font-size:.9375rem;font-weight:500;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.wahl input:checked + label{background:var(--weiss);color:var(--schwarz)}
.wahl input:focus-visible + label{outline:2px solid var(--weiss);outline-offset:2px}
.kind-alter[hidden]{display:none}
.hinweis-klein{font-size:.875rem;line-height:1.5;color:var(--weiss-3)}
.hinweis-klein a{color:var(--weiss-2)}
/* Übersicht vor dem WhatsApp-Knopf (Audit 09.10.2026) */
.anmelde-uebersicht{padding:12px 14px;border:1px solid var(--linie-d);border-radius:var(--ecke);background:var(--schwarz);font-size:.9375rem;line-height:1.45;color:var(--weiss)}
.anmelde-uebersicht[hidden]{display:none}
.anfrage .knopf{justify-self:start}
.entwurf-hinweis{font-size:.8125rem;font-weight:600;padding:12px 14px;border-radius:var(--ecke);background:var(--schwarz-3);border:1px solid var(--linie-d)}
.entwurf-hinweis[hidden]{display:none}
/* Bestätigung nach echter Zustellung: Status mit Haken, Satz, Karte mit Symbolzeilen (Mobbin-Vorbilder: Calendly, Time2book) */
.danke{display:grid;gap:16px;padding:clamp(22px,4vw,36px)}
.danke[hidden],.anfrage form[hidden]{display:none}
.danke-status{display:flex;align-items:center;gap:8px}
.danke-status svg{width:18px;height:18px;flex:none}
.danke-text{font-size:.9375rem;line-height:1.5;color:var(--weiss-2)}
.danke-karte{display:grid;border-radius:var(--ecke);overflow:hidden;background:var(--schwarz);border:1px solid var(--linie-d)}
.danke-karte>li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;font-size:.9375rem;line-height:1.5}
.danke-karte>li+li{border-top:1px solid var(--linie-d)}
.danke-karte svg{width:20px;height:20px;margin-top:2px}
.danke-karte a{color:inherit;text-underline-offset:3px}
.danke-karte li span span{white-space:nowrap}

/* Handy-Leiste: nach dem Hero, verschwindet am Schlussaufruf (ein schwebender Knopf, nie doppelt) */
.leiste{position:fixed;inset:auto 0 0;z-index:40;display:none;align-items:center;gap:8px;padding:10px var(--rand) calc(10px + env(safe-area-inset-bottom));background:rgba(10,10,10,.92);border-top:1px solid var(--linie-d);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform:translateY(110%);transition:transform .3s ease}
.leiste.is-visible{transform:none}
.leiste .knopf{flex:1}

/* ===== Unterseiten (SEO und GEO): Seitenkopf mit Foto, Brotkrumen, Textabschnitte, Kurszeiten, Wochenplan, Fragen, Bilder ===== */
.seite-kopf{padding-block:calc(var(--kopf) + clamp(32px,5vw,72px)) clamp(48px,6vw,96px);background:var(--schwarz)}
.seite-kopf-raster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px clamp(32px,5vw,72px);align-items:end}
.seite-kopf-text{display:grid;gap:20px;justify-items:start}
.seite-kopf h1{font-size:clamp(2.5rem,5.4vw,4.75rem)}
.seite-kopf-text>p:not(.etikett){max-width:56ch;font-size:1.0625rem;line-height:1.6;color:var(--weiss-2)}
.seite-kopf-bild{position:relative;border-radius:var(--ecke);overflow:hidden;aspect-ratio:4 / 3;background:var(--schwarz-3)}
.seite-kopf-bild img{width:100%;height:100%;object-fit:cover}
.seite-kopf-bild.oben img{object-position:40% 0} /* Hochformat: Kopf im Bild halten */
.seite-kopf-bild.karte{min-height:0} /* sonst erzwingt die Mindesthöhe der Fußzeilen-Karte mit dem Seitenverhältnis eine Breite über dem Handy */
.brotkrumen ol{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.8125rem;color:var(--weiss-3)}
.brotkrumen li+li::before{content:"/";margin-right:10px;opacity:.6}
.brotkrumen a{color:var(--weiss-2);text-decoration:none}
.brotkrumen a:hover{text-decoration:underline;text-underline-offset:3px}
.abschnitt{padding-block:clamp(56px,7vw,104px);border-top:1px solid var(--linie-d)}
.abschnitt-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px clamp(32px,5vw,80px);align-items:start}
.abschnitt-kopf{display:grid;gap:14px;position:sticky;top:calc(var(--kopf) + 24px)}
.abschnitt h2{font-size:clamp(1.875rem,3.2vw,2.75rem)}
.abschnitt-kopf.breit{position:static;margin-bottom:clamp(20px,2.6vw,32px)}
.text{display:grid;gap:18px;font-size:1.0625rem;line-height:1.7;color:var(--weiss-2)}
.text h3{margin-top:10px;font:500 1.25rem/1.3 var(--schrift);color:var(--weiss)}
.text ul:not(.zeiten){display:grid;gap:8px;padding-left:1.2em;list-style:disc}
.text strong{font-weight:500;color:var(--weiss)}
.text a:not(.pfeil):not(.knopf){color:var(--weiss);text-decoration-color:var(--linie-2);text-underline-offset:4px}
.text a:not(.pfeil):not(.knopf):hover{text-decoration-color:currentColor}
.zeiten{display:grid;border-top:1px solid var(--linie-d)}
.zeiten li{display:grid;grid-template-columns:minmax(0,1.5fr) auto minmax(0,1fr) minmax(0,1.1fr);gap:4px 18px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--linie-d);font-variant-numeric:tabular-nums}
.zeiten b{font-weight:500;color:var(--weiss)}
.zeiten b small{display:block;margin-top:4px;font:500 .6875rem/1.3 var(--schrift);letter-spacing:.14em;text-transform:uppercase;color:var(--rot-auf-dunkel)}
.wochenplan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.wochenplan section{padding:18px 20px;border-radius:var(--ecke);background:var(--schwarz-2);border:1px solid var(--linie-d)}
.wochenplan h3{margin-bottom:8px;font:500 .75rem/1.3 var(--schrift);letter-spacing:.2em;text-transform:uppercase;color:var(--rot-auf-dunkel)}
.wochenplan li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 14px;padding:9px 0;border-top:1px solid var(--linie-d);font-variant-numeric:tabular-nums}
.wochenplan li span{grid-row:span 2;color:var(--weiss-3)}
.wochenplan b{font-weight:500;color:var(--weiss)}
.wochenplan small{grid-column:2;font-size:.8125rem;color:var(--weiss-3)}
.faqs{display:grid;border-top:1px solid var(--linie-d)}
.faq{border-bottom:1px solid var(--linie-d)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 0;font:500 1.0625rem/1.35 var(--schrift);color:var(--weiss);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:300 1.5rem/1 var(--schrift);color:var(--rot-auf-dunkel);transition:transform .2s ease}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{padding-bottom:18px;max-width:62ch;color:var(--weiss-2);line-height:1.65}
.schritte-liste{display:grid;counter-reset:schritt;border-top:1px solid var(--linie-d)}
.schritte-liste li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 16px;padding:14px 0;border-bottom:1px solid var(--linie-d);counter-increment:schritt}
.schritte-liste li::before{content:"0" counter(schritt);grid-row:span 2;font:500 .875rem/1.65 var(--schrift);color:var(--rot-auf-dunkel);font-variant-numeric:tabular-nums}
.schritte-liste b{font-weight:500;color:var(--weiss)}
.quelle{font-size:.8125rem;line-height:1.5;color:var(--weiss-3)}
.bilder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bilder figure{display:grid;gap:8px}
.bilder img{width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:var(--ecke)}
.bilder figcaption{font-size:.875rem;color:var(--weiss-3)}

/* Impressum und Datenschutz (eigene Dateien im Hauptordner) */
.legal{max-width:800px;margin:auto;padding:48px 24px 100px;line-height:1.75;color:var(--weiss-2)}
.legal h1{margin:24px 0;font-size:clamp(2.3rem,7vw,4rem);color:var(--weiss)}
.legal h2{margin:32px 0 12px;font-size:1.65rem;color:var(--weiss)}
.legal p{margin-bottom:18px}
.legal a{color:var(--weiss);text-decoration:underline;text-decoration-color:var(--linie-2);text-underline-offset:4px}
.legal nav{display:flex;flex-wrap:wrap;gap:24px}
.legal .draft{padding:16px;border-left:4px solid var(--rot);background:var(--schwarz-2)}

/* ===== Fokus, Bewegung, schmale Schirme ===== */
:focus-visible{outline:2px solid var(--weiss);outline-offset:3px}
a,button,input,select,textarea{-webkit-tap-highlight-color:transparent}
button:disabled{opacity:.6;cursor:wait}
.spamfeld{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
/* Schmale Schirme: Kopfzeile und Kontaktangaben dürfen schrumpfen statt überzulaufen */
.kopf-zeile,.kontakt-daten{min-width:0}

@media (max-width:1100px){
  .nav,.kopf-knopf{display:none}
  .kopf-mobil{display:flex}
  /* Zwei Spalten ohne Navigation: mit „1fr auto 1fr“ wurde die leere rechte Spalte so breit wie die Marke, die Kopfzeile breiter als das Handy und die Seite herausgezoomt */
  .kopf-zeile{grid-template-columns:minmax(0,1fr) auto}
  .fuss-raster{grid-template-columns:1fr}
  .fuss nav{justify-content:start}
}
@media (max-width:980px){
  .kopfzeile,.coach-raster,.kampf-raster,.tarife-aussen,.kontakt-raster,.seite-kopf-raster,.abschnitt-raster{grid-template-columns:minmax(0,1fr)}
  .abschnitt-kopf{position:static}
  .note{justify-self:start;justify-items:start}
  .seite-kopf-bild{aspect-ratio:16 / 10}
  .wochenplan{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kids{grid-template-columns:minmax(0,1fr);min-height:0}
  .kids-bild{aspect-ratio:16 / 10}
  .karte{min-height:260px}
}
@media (max-width:900px){
  .sparten-reihe{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media (max-width:720px){
  :root{--kopf:64px;--abstand:64px}
  .marke img{width:32px}
  .wortmarke{font-size:.8125rem}
  .sparte-text{left:14px;right:14px;bottom:14px;gap:4px}
  .sparte-text b{font-size:.8125rem}
  .sparte-text span{font-size:.75rem}
  .kids-bild{aspect-ratio:4 / 3}
  .kids-text{padding:48px var(--rand) 64px}
  .kampf{min-height:680px}
  .kampf-bild{object-position:50% 20%}
  .kampf::after{background:linear-gradient(0deg,rgba(10,10,10,.97) 0%,rgba(10,10,10,.88) 55%,rgba(10,10,10,.2) 100%)}
  .kampf-raster{padding-block:48px}
  .kontakt-daten{grid-template-columns:minmax(0,1fr)}
  .fuss nav{grid-template-columns:repeat(2,minmax(0,auto));gap:24px 40px}
  .zwei{grid-template-columns:1fr}
  .zwei.namen{grid-template-columns:1fr 1fr}
  .anfrage .knopf{justify-self:stretch}
  .leiste{display:flex}
  body.mit-leiste{padding-bottom:74px}
  .zeiten li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name zeit" "tage gruppe"}
  .zeiten li>b{grid-area:name}
  .zeiten li>span:nth-of-type(1){grid-area:tage}
  .zeiten li>span:nth-of-type(2){grid-area:zeit;text-align:right}
  .zeiten li>span:nth-of-type(3){grid-area:gruppe;text-align:right}
  .wochenplan,.bilder{grid-template-columns:1fr}
  .rezension{padding:22px}
  .rezension blockquote{font-size:1.0625rem}
  .band-fuss{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  .anfrage-kopf>div{min-width:0}
  .anfrage h2{overflow-wrap:anywhere;font-size:1.65rem}
}
@media (max-width:420px){
  .kopf-zeile{gap:12px}
  .leiste .knopf{padding-inline:16px}
  /* Keine Silbentrennung (Vault: Typografie): hyphens:auto machte am Handy „PROBETRAI-NING“. Ohne Trennung läuft bei 320 bis 414 px keine Überschrift über (gemessen 07.10.2026). */
  h1,h2{overflow-wrap:anywhere}
}

/* ===== Ein Schirm je Abschnitt (Abdulhamid 08.10.2026: „dass das alles immer auf eine Seite passt“, dann: „zu klein soll es auch nicht sein“) =====
   Schriftgrößen bleiben wie im Entwurf. Passend gemacht wird nur über Abstände, Bildhöhen und Anordnung; wo das am Handy nicht reicht, ist ein Abschnitt etwas länger als ein Schirm.
   Budget = Fensterhöhe minus Kopfzeile minus Handy-Leiste (Vault 02 Design), gemessen bei 360×640, 390×664, 1366×657, 1536×730, 1440×789 und 1920×960, dazu iPad hochkant (768×954) und quer (1024×691). */
/* --schirm: sichtbare Höhe unter der Kopfzeile (84 px plus 1 px Rand), am Handy auch ohne die Leiste unten (73 px) */
:root{--abstand:clamp(48px,9svh,120px);--schirm:calc(100svh - var(--kopf) - 1px)}
.kopfzeile{margin-bottom:clamp(24px,4svh,48px)}
.heute{padding-block:clamp(40px,8svh,96px)}
.heute-kopf{margin-bottom:clamp(16px,3svh,28px)}
.stimmen{padding-block:clamp(40px,7svh,120px)}
.rezension{padding:24px}
.band-fuss{margin-top:20px}
.sparte{aspect-ratio:auto;height:clamp(240px,40svh,440px)}
.sparte img{object-position:50% 30%}
.kids{min-height:min(640px,var(--schirm))}
.kids-text{padding-block:clamp(32px,6svh,80px)}
/* Head Coach: Bildhöhe aus der Fensterhöhe, Ausschnitt bleibt oben (Daniels Kopf) */
.coach-bild{aspect-ratio:auto;height:min(640px,calc(var(--schirm) - 2 * var(--abstand) - 1px))}
.kampf{min-height:min(620px,var(--schirm))}
.kampf-raster{padding-block:clamp(32px,7svh,72px)}
.kontakt-raster{padding-block:var(--abstand)}
/* Zusätze, die nur am Handy im Preis-Abschnitt der Startseite erscheinen (siehe #preise unten) */
.nur-handy{display:none}
@media (max-width:980px){
  .kids{min-height:0}
  /* schmale Kurskarten: die Dauer steht schon in der Uhrzeit */
  .kurs-dauer{display:none}
  .kids-bild{aspect-ratio:auto;height:clamp(200px,32svh,360px)}
  /* Head Coach als Porträt neben dem Namen, Text darunter über die ganze Breite */
  .coach-raster{grid-template-columns:clamp(132px,26vw,200px) minmax(0,1fr);gap:16px 20px;align-items:start}
  .coach-text{display:contents}
  .coach-bild{grid-column:1;grid-row:1 / span 2;height:auto;aspect-ratio:4 / 5}
  .coach-text .etikett{grid-column:2;grid-row:1;align-self:end}
  .coach-text h2{grid-column:2;grid-row:2;align-self:start}
  .coach-text .text-2,.coach-text .knoepfe{grid-column:1 / -1}
}
@media (max-width:900px){.sparte{height:clamp(200px,24svh,300px)}}
@media (max-width:720px){
  :root{--abstand:clamp(32px,6svh,48px);--schirm:calc(100svh - var(--kopf) - 74px);--kurs-bild:clamp(56px,calc((var(--schirm) - 216px) / 4 - 14px),96px)}
  /* Abdulhamid 08.10.2026: „du hast doch mehr Platz … die Kacheln einfach ein bisschen größer“: Plan, Disziplinen, Kinder und Trainer füllen den Schirm, die Bilder wachsen mit, die Schrift bleibt */
  .kopfzeile{gap:14px;margin-bottom:24px}
  .kopfzeile > div{gap:12px}
  /* Trainingsplan: Zeit und Thema in einer Zeile */
  .heute{padding-block:clamp(24px,4svh,40px)}
  .heute-kopf{gap:12px;margin-bottom:12px}
  .heute-titel{gap:10px}
  .kurse{gap:6px}
  .kurs-info{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px}
  .kurs-info .etikett,.kurs-name{flex-basis:100%}
  .kurs{grid-template-columns:44px var(--kurs-bild) minmax(0,1fr);padding-block:6px}
  .kurs img{width:var(--kurs-bild);height:var(--kurs-bild)}
  .kurs .etikett{letter-spacing:.12em}
  /* Plan füllt den Schirm bis zur Leiste (Abdulhamid 08.10.2026: „die Kacheln hier können auch ruhig mehr von der Seite füllen“): Zeilen gleich hoch, Bilder bis 96 px */
  .heute{display:grid;min-height:calc(var(--schirm) + clamp(24px,4svh,40px))}
  .heute > .wrap{display:grid;grid-template-rows:auto auto minmax(0,1fr)}
  .heute .kurse{grid-row:3;align-self:stretch;grid-auto-rows:1fr}
  /* Disziplinen: zwei mal zwei quadratische Kacheln, die Einleitung erst ab Tablet */
  #training .kopfzeile .text-2{display:none}
  /* Kacheln bis an die Leiste: der untere Abstand liegt hinter der Leiste wie bei Plan und Preisen (Abdulhamid 08.10.2026, iPhone: „nicht die ganze Seite beansprucht“) */
  .sparten{display:grid;min-height:calc(var(--schirm) + var(--abstand))}
  .sparten > .wrap{display:grid;grid-template-rows:auto minmax(0,1fr)}
  .sparten-reihe{grid-auto-rows:minmax(120px,1fr)}
  .sparte{height:auto;aspect-ratio:auto}
  /* Kinder: Foto als Band, das nach unten ins Schwarz ausläuft; der Text rückt ein Stück hinein */
  /* Bei den Kindern weicht die Leiste dem eigenen Knopf, der Abschnitt bekommt die ganze Höhe unter der Kopfzeile */
  .kids{min-height:calc(100svh - var(--kopf) - 1px);grid-template-rows:minmax(110px,1fr) auto}
  .kids-bild{aspect-ratio:auto;height:auto}
  .kids-bild img{object-position:50% 58%}
  .kids-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 55%,var(--schwarz) 90%)}
  .kids-text{position:relative;gap:12px;margin-top:-16px;padding:0 var(--rand) 24px}
  .kids-text .knopf{justify-self:stretch}
  /* Head Coach: Foto oben über die volle Breite, so hoch wie der Schirm hergibt */
  /* Foto direkt unter der Kopfzeile (Abdulhamid 08.10.2026: „nur der kleine Bereich noch oben“): 16 px statt des vollen Abstands, das Foto wächst um die Differenz */
  .coach{display:grid;min-height:calc(var(--schirm) + var(--abstand) - 16px);padding-top:16px}
  .coach-raster{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(130px,1fr) auto auto auto auto;gap:14px}
  .coach-bild{position:relative;grid-column:1;grid-row:1;align-self:stretch;aspect-ratio:auto}
  .coach-bild img{position:absolute;inset:0}
  .coach-text .etikett{grid-column:1;grid-row:2;margin-top:4px}
  .coach-text h2{grid-column:1;grid-row:3}
  .coach-text .text-2{grid-row:4}
  .coach-text .knoepfe{grid-row:5;margin-top:8px}
  /* Wettkampf: genau ein Schirm samt Leiste */
  .kampf{min-height:var(--schirm)}
  .kampf-raster{gap:16px;padding-block:32px}
  /* Preise: Name und Betrag in einer Zeile, die Beschreibung darunter über die volle Breite. Die Karte „Erstes Training“ bleibt wie in der Live-Version (Abdulhamid 08.10.2026) */
  .tarife-aussen{gap:24px}
  .tarife-raster{grid-template-columns:minmax(0,1fr);gap:8px}
  .tarif:not(.tarif-gratis){grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:8px 16px;padding:18px}
  .tarif:not(.tarif-gratis) .tarif-name{grid-column:1;grid-row:1}
  .tarif:not(.tarif-gratis) .tarif-betrag{grid-column:2;grid-row:1;text-align:right}
  .tarif:not(.tarif-gratis) p:not(.tarif-name):not(.tarif-betrag){grid-column:1 / -1}
  /* Preise auf der Startseite: alle drei Karten auf einen Schirm (Abdulhamid 08.10.2026, Vorschlag rechts). Nur hier; /mitgliedschaft und der Desktop bleiben, wie sie sind.
     „Kostenlos“ rechts wie die Preise, der Knopf der Karte entfällt (die Leiste darunter ist derselbe Knopf), „monatlich kündbar“ steht unter den Preisen statt im Einleitungssatz */
  #preise{padding-top:28px;padding-bottom:32px}
  #preise .tarife-aussen{gap:14px}
  #preise .tarife-kopf{gap:10px}
  #preise .tarife-kopf .text-2,#preise .nur-gross,#preise .tarif-gratis .knopf{display:none}
  #preise .nur-handy{display:inline}
  #preise .tarif{padding:14px 18px}
  #preise .tarif-gratis{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:8px 16px}
  #preise .tarif-gratis .tarif-name{grid-column:1;grid-row:1}
  #preise .tarif-gratis .tarif-betrag{grid-column:2;grid-row:1;text-align:right}
  #preise .tarif-gratis p:not(.tarif-name):not(.tarif-betrag){grid-column:1 / -1}
  /* Alle drei Karten gleich hoch und bis zur Leiste (Abdulhamid 08.10.2026, nach dem Screenshot vom iPhone: „dass alle drei Kacheln dieselbe Größe haben und die ganze Seite füllen“); der Inhalt bleibt in der Kartenmitte */
  #preise{display:grid;min-height:calc(var(--schirm) + 32px)}
  #preise .tarife-aussen{grid-template-rows:auto minmax(0,1fr)}
  #preise .tarife-raster{align-self:stretch;grid-auto-rows:1fr}
  #preise .tarif{align-content:center}
  /* Bewertungen: Note einen Ticken kleiner (Abdulhamid 08.10.2026), breitere Karten für weniger Zeilen; der Hinweis darunter darf unter den Schirm rutschen */
  .stimmen .kopfzeile{margin-bottom:20px}
  .note b{font-size:2.125rem}
  .rezension{width:min(88vw,24rem);padding:22px}
  .band-fuss .band-pfeil{margin-block:4px 0}
  /* Kontakt: Angaben zweispaltig, die Karte als Band */
  .kontakt-raster{gap:16px}
  .schluss{gap:16px}
  .kontakt-daten{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
  .kontakt-daten > div:last-child{grid-column:1 / -1}
  .karte{min-height:0;height:clamp(110px,17svh,150px)}
  /* Fußzeile: drei Spalten */
  .fuss{padding-block:24px calc(20px + env(safe-area-inset-bottom))}
  .fuss-raster{gap:18px}
  .fuss a{min-height:32px}
  .fuss nav{grid-template-columns:repeat(3,minmax(0,auto));gap:16px 20px}
}
/* Sehr schmale Handys (unter 375 px): Vor- und Nachname untereinander (Audit 09.10.2026) */
@media (max-width:374px){.zwei.namen{grid-template-columns:minmax(0,1fr)}}