/* ---------- Lesbarkeit (25.08.2026) ----------
   Anlass: Die Seite soll fuer eine 60-jaehrige Besucherin ohne Muehe lesbar sein
   und trotzdem jung wirken. Gemessen wurde: Navigation 11,8 px, Oeffnungszeiten
   12,5 px, Bewertungsnamen 10,6 px, Fusszeile Kontrast 4,0 (unter der Grenze 4,5).
   Die winzigen Grossbuchstaben-Labels sind Teil des Looks - deshalb wurden sie
   nicht abgeschafft, sondern angehoben und ihre Sperrung zurueckgenommen:
   gesperrte Grossbuchstaben lesen sich in klein besonders schlecht.
   Wer hier wieder verkleinert, verliert genau die Gruppe, die telefonisch anruft. */
:root{
  --bg:#333333;
  --bg-2:#3A3A3A;
  --bg-3:#2C2C2C;
  --header:#3E3E3E;
  --mint:#57D9A4;
  --text:#D6D6D6;
  --text-dim:#B5B5B5;
  --white:#FFFFFF;
  --line:rgba(255,255,255,.14);
  --open:#E0A83C;
  --display:'Arial Narrow','Helvetica Neue Condensed',Impact,'Haettenschweiler',sans-serif;
  --grotesk:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --maxw:1200px;
  /* Bild-Hintergrund-Rezept: s/w, strukturiert, wirkt wie Grau */
  --photo-filter:grayscale(1) brightness(.46) contrast(1.32);
  --photo-veil:rgba(51,51,51,.52);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--grotesk);font-size:16px;line-height:1.7;letter-spacing:.04em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- Foto-Hintergrund ---------- */
.photo-sec{position:relative;overflow:hidden;isolation:isolate}
.photo-sec>.wrap,.photo-sec>.inner{position:relative;z-index:3}
.bglayer{position:absolute;inset:0;z-index:1;background-size:cover;background-position:center;background-attachment:fixed;filter:var(--photo-filter)}
.bgveil{position:absolute;inset:0;z-index:2;background:var(--photo-veil)}
.bgveil.grad{background:linear-gradient(180deg,rgba(44,44,44,.86) 0%,rgba(51,51,51,.40) 45%,rgba(44,44,44,.92) 100%)}
.hero:has(.bgvideo) .bgveil.grad{background:linear-gradient(180deg,rgba(30,30,30,.90) 0%,rgba(30,30,30,.72) 45%,rgba(30,30,30,.94) 100%)}
@media (hover:none),(max-width:900px){.bglayer{background-attachment:scroll}}

/* ---------- Scroll-Reveal ---------- */
[data-rv]{opacity:0;transform:translateY(30px);transition:opacity .95s var(--ease),transform .95s var(--ease);transition-delay:var(--d,0ms)}
[data-rv].in{opacity:1;transform:none}
[data-rv="scale"]{transform:scale(.965)}
[data-rv="scale"].in{transform:none}
[data-rv="left"]{transform:translateX(-34px)}
[data-rv="left"].in{transform:none}
[data-rv="right"]{transform:translateX(34px)}
[data-rv="right"].in{transform:none}
@media(prefers-reduced-motion:reduce){[data-rv]{opacity:1!important;transform:none!important}}
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--mint);z-index:200;transition:width .1s linear}

/* ---------- Logo-Marke ---------- */
.logo{display:inline-flex;align-items:center;gap:.02em;font-family:var(--display);font-style:italic;font-weight:900;font-size:2.15rem;color:var(--white);letter-spacing:.04em;line-height:1}
.mark{height:1.02em;width:auto;display:block;transform:translateY(-.03em)}
.barbell{display:block;width:100%;height:auto;fill:var(--white);opacity:.9}
.logo-lg{font-size:2.6rem}
.markbox{display:inline-flex;flex-direction:column;align-items:center;gap:.34em}
.markbox-left{align-items:flex-start}
.markbox .sub{font-size:.58rem;letter-spacing:.42em;font-family:var(--grotesk);font-style:normal;font-weight:300;color:var(--text-dim);text-transform:uppercase}


/* ---------- Google-Bewertungen ---------- */
.gproof{display:inline-flex;align-items:center;gap:12px;margin-top:16px;font-size:.9rem;color:var(--text);transition:color .25s}
.gproof:hover{color:var(--white)}
.gproof .stars{color:var(--mint);letter-spacing:.12em;font-size:1rem}
.gproof strong{color:var(--white);font-weight:700}

.rev{position:relative;max-width:100%;margin:52px auto 0}
.rev-track{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.rev-rail{display:flex;gap:18px;width:max-content;animation:revlauf 52s linear infinite}
.rev:hover .rev-rail,.rev:focus-within .rev-rail{animation-play-state:paused}
@keyframes revlauf{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 9px))}}
.rev-item{width:clamp(300px,34vw,460px);flex:0 0 auto;display:flex}
.rev-card{background:rgba(28,28,28,.72);border:1px solid var(--line);border-radius:4px;
  padding:26px 26px 24px;text-align:center;display:flex;flex-direction:column;justify-content:center;width:100%}
.rev-card .stars{color:var(--mint);letter-spacing:.16em;font-size:.9rem}
.rev-card blockquote{margin:14px 0 0;font-size:.96rem;line-height:1.6;color:var(--white)}
.rev-card .who{margin-top:16px;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.rev-foot{text-align:center;margin-top:30px;color:var(--text-dim);
  font-size:clamp(.66rem,3.2vw,.88rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rev-foot a{color:var(--mint);border-bottom:1px solid var(--mint)}

@media(prefers-reduced-motion:reduce){.rev-rail{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
@media(max-width:900px){.rev-item{width:78vw}.rev-track{-webkit-mask-image:none;mask-image:none}}


/* ---------- Marken-Laufband ---------- */
.mw{position:relative;margin:40px auto 0;max-width:100%}
.mw-track{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
.mw-rail{display:flex;gap:14px;width:max-content;animation:mwlauf 44s linear infinite}
.mw:hover .mw-rail{animation-play-state:paused}
@keyframes mwlauf{from{transform:translateX(calc(-50% - 7px))}to{transform:translateX(0)}}
.mw-item{width:clamp(122px,13vw,180px);height:86px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.035);
  transition:border-color .3s,background .3s}
.mw-item:hover{border-color:var(--mint);background:rgba(87,217,164,.07)}
.mw-item img{max-width:74%;max-height:52%;width:auto;height:auto;
  filter:grayscale(1) brightness(2.2) contrast(.8);opacity:.85;transition:.35s}
.mw-item:hover img{filter:grayscale(1) brightness(2.6);opacity:1}
.mw-item .wm{font-family:var(--grotesk);font-weight:600;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text);text-align:center;padding:0 10px;line-height:1.25;transition:color .3s}
.mw-item:hover .wm{color:var(--mint)}
@media(prefers-reduced-motion:reduce){.mw-rail{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
@media(max-width:900px){.mw-item{width:120px;height:74px}.mw-track{-webkit-mask-image:none;mask-image:none}}


/* ---------- Probetraining-Funnel ---------- */
.fn-ov{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  background:rgba(15,15,15,.82);backdrop-filter:blur(6px);padding:24px}
.fn-ov.an{display:flex;animation:fnAuf .28s var(--ease)}
@keyframes fnAuf{from{opacity:0}to{opacity:1}}
.fn-box{position:relative;width:100%;max-width:600px;max-height:92vh;overflow-y:auto;
  background:var(--bg-3);border:1px solid var(--line);border-radius:6px;padding:44px 40px 34px;
  animation:fnRein .38s var(--ease)}
@keyframes fnRein{from{transform:translateY(22px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.fn-zu{position:absolute;top:12px;right:16px;background:none;border:0;color:var(--text-dim);
  font-size:1.9rem;line-height:1;cursor:pointer;padding:4px 8px;transition:color .25s}
.fn-zu:hover{color:var(--mint)}
.fn-fort{height:2px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
.fn-fort i{display:block;height:100%;width:0;background:var(--mint);transition:width .45s var(--ease)}
.fn-zaehler{margin-top:14px;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mint)}
.fn-titel{font-family:var(--display);font-style:italic;font-weight:900;text-transform:uppercase;
  color:var(--white);font-size:clamp(1.4rem,3.4vw,1.9rem);line-height:1.05;margin-top:12px}
.fn-hilfe{margin-top:10px;font-size:.9rem;color:var(--text-dim);line-height:1.6}
.fn-optionen{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.fn-opt{text-align:left;padding:14px 18px;border-radius:4px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);
  font-family:var(--grotesk);font-size:.94rem;letter-spacing:.03em;transition:.22s}
.fn-opt:hover{border-color:var(--mint);color:var(--white)}
.fn-opt.an{border-color:var(--mint);background:rgba(87,217,164,.12);color:var(--white);font-weight:600}
.fn-raster{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.fn-feld{display:flex;flex-direction:column;gap:6px;margin-top:20px}
.fn-raster .fn-feld{margin-top:0}
.fn-feld span{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim)}
.fn-feld input{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:4px;
  padding:13px 14px;color:var(--white);font-family:var(--grotesk);font-size:.95rem;transition:border-color .25s}
.fn-feld input:focus{outline:0;border-color:var(--mint)}
.fn-check{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font-size:.82rem;
  color:var(--text-dim);line-height:1.55}
.fn-check input{margin-top:3px;accent-color:var(--mint);width:17px;height:17px;flex:0 0 auto}
.fn-check a{color:var(--mint);border-bottom:1px solid var(--mint)}
.fn-fehler{margin-top:16px;font-size:.86rem;color:#E86A5C}
.fn-nav{display:flex;justify-content:space-between;gap:14px;margin-top:30px}
.fn-fertig{text-align:center;padding:14px 0 6px}
.fn-haken{width:62px;height:62px;margin:0 auto 20px;border-radius:50%;background:var(--mint);
  color:#1E1E1E;font-size:1.9rem;display:flex;align-items:center;justify-content:center;
  animation:fnHaken .5s var(--ease)}
@keyframes fnHaken{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.fn-details{margin-top:24px;text-align:left}
.fn-details summary{cursor:pointer;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.fn-details pre{margin-top:14px;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:4px;
  padding:16px;font-size:.76rem;line-height:1.65;color:var(--text);white-space:pre-wrap;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.fn-hinweis{margin-top:20px;font-size:.76rem;color:var(--open);border:1px dashed var(--open);
  border-radius:4px;padding:10px 12px;text-align:left;line-height:1.5}
@media(max-width:600px){.fn-box{padding:38px 22px 26px}.fn-raster{grid-template-columns:1fr}}

.origlogo{display:block;height:auto;width:auto;max-width:100%}
.origlogo-gross{max-width:min(340px,72vw);margin:0 auto 34px}
.origlogo-fuss{max-width:200px;margin-bottom:16px}
@media(max-width:900px){.origlogo-gross{max-width:min(260px,68vw);margin-bottom:26px}
  .origlogo-fuss{max-width:170px}}

/* Beim Scrollen eingefaerbt (siehe Skript): ab 25 % Sichtbarkeit farbig */
.pos-img img,.coffee .ph img,.ph-duo img,.gallery img,.dia-item img,
.card-img img,.person .ph img,.rarity-bild .ph img,.rarity-klein .ph img{
  transition:filter 1.1s cubic-bezier(.33,1,.68,1),transform .7s var(--ease)}
/* Neutrale Werte statt "none": nur so kann CSS die Farbe einblenden.
   "filter:none" ist nicht interpolierbar und wuerde hart umspringen. */
.farbe{filter:grayscale(0) contrast(1) brightness(1)!important}

/* ---------- Typo ---------- */
.display{font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;line-height:.95;letter-spacing:.005em;color:var(--white)}
.eyebrow{font-weight:300;text-transform:uppercase;letter-spacing:.24em;font-size:.8rem;color:var(--mint)}
h2.sect{font-weight:300;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(1.35rem,2.6vw,2rem);color:var(--white);text-align:center}
.sect-wrap{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:14px}
.slash{color:var(--mint);font-family:var(--display);font-style:italic;font-weight:900;font-size:1.6rem;line-height:1;opacity:.9}
.lead{max-width:60ch;margin:0 auto;text-align:center;font-size:1.02rem}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:16px 34px;border-radius:999px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:.8rem;cursor:pointer;border:2px solid transparent;transition:transform .2s var(--ease),background .25s,color .25s;text-align:center}
.btn-primary{background:var(--mint);color:#1E1E1E}
.btn-primary:hover{background:var(--white);transform:translateY(-3px)}
.btn-ghost{border-color:var(--mint);color:var(--mint);background:transparent}
.btn-ghost:hover{background:var(--mint);color:#1E1E1E;transform:translateY(-3px)}
.btn-sm{padding:12px 26px;font-size:.82rem}

/* ---------- Header ---------- */
/* Kopf liegt ueber dem Hero-Video, ohne graue Flaeche.
   Erst beim Scrollen wird er fest, damit Text darunter lesbar bleibt. */
header{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s,backdrop-filter .35s}
header.solid{background:rgba(44,44,44,.97);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
/* Leichter Verlauf nach oben, damit Logo und Menue auf hellen Videobildern tragen */
header::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-38px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.66) 55%,
                              rgba(10,10,10,.34) 82%,transparent 100%);transition:opacity .35s}
header.solid::before{opacity:0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:86px}
.navlinks{display:flex;gap:30px;list-style:none}
.navlinks a{text-transform:uppercase;letter-spacing:.16em;font-size:.84rem;font-weight:500;color:var(--text);padding:6px 0;border-bottom:2px solid transparent;transition:.25s}
.navlinks a:hover,.navlinks a.active{color:var(--mint);border-color:var(--mint)}
.burger{display:none;background:none;border:0;color:var(--white);font-size:2.3rem;line-height:1;cursor:pointer;padding:2px 4px}

/* ---------- Hero ---------- */
.bgvideo{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;
  object-position:center 42%;
  filter:grayscale(1) brightness(.30) contrast(1.15);
  pointer-events:none}
/* Wer Bewegung reduziert haben will, bekommt das Standbild */
@media(prefers-reduced-motion:reduce){.bgvideo{display:none}}

.hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden}
.hero .bglayer{filter:grayscale(.9) brightness(.5) contrast(1.2)}
.hero-inner{position:relative;z-index:3;padding:138px 28px 56px;width:100%;max-width:var(--maxw);margin:0 auto}
.hero h1{font-size:clamp(2.3rem,6.2vw,4.6rem);max-width:16ch}
.hero h1 .mint{color:var(--mint)}
.hero .sub{margin-top:18px;font-size:clamp(1rem,1.7vw,1.2rem);max-width:44ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:28px}
/* Zwei gleichwertige Wege: schnuppern oder direkt Mitglied werden */
.cta-paar{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:660px}
.cta-paar .btn{width:100%;padding-left:18px;padding-right:18px}

/* Telefonnummern sind Links, nicht nur Text: Auf dem Handy waehlt ein Tippen
   direkt. Sie sollen aber nicht wie ein Link aussehen, sondern wie vorher -
   deshalb erben sie die Farbe und bekommen nur beim Darauffahren Mint. */
.phone a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.phone a:hover,.phone a:focus-visible{color:var(--mint);border-bottom-color:var(--mint)}
.phone{font-size:.94rem;letter-spacing:.08em;color:var(--text-dim);text-transform:uppercase}
.phone strong{color:var(--white);font-weight:600}
.partners{display:flex;align-items:center;gap:26px;margin-top:34px;flex-wrap:wrap}
.partners img{height:52px;width:auto;opacity:.92}
.partners .lbl{font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim)}
.scrollhint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;color:var(--mint);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.75}
.scrollhint i{display:block;width:1px;height:34px;background:linear-gradient(var(--mint),transparent);animation:drop 1.9s var(--ease) infinite}
@media(max-height:900px),(max-width:900px){.scrollhint{display:none}}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}46%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Öffnungszeiten als Bruch neben der Headline.
   align-items:stretch sorgt dafür, dass der Trennstrich beide Zeilen voll unterläuft. */
.zeiten{display:inline-flex;flex-direction:column;align-items:stretch;
  vertical-align:middle;margin:0 0 .12em .58em;text-align:left;
  font-size:.355em;line-height:1.28;letter-spacing:.03em;
  color:var(--text);white-space:nowrap}
.zeiten .z-o{padding-bottom:.26em;border-bottom:.08em solid var(--mint)}
.zeiten .z-u{padding-top:.26em}

/* ---------- Kennzahlen ---------- */
.stats{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--maxw);margin:0 auto}
.stat{padding:54px 20px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .num{font-family:var(--display);font-style:italic;font-weight:900;font-size:clamp(2.2rem,4.5vw,3.4rem);color:var(--mint);line-height:1}
.stat .lbl{margin-top:10px;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}

/* ---------- Sections ---------- */
section{padding:104px 0}
.s-alt{background:var(--bg-2)}
.s-dark{background:var(--bg-3)}

/* Zwischenbild-Band */
.band{position:relative;min-height:54vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:96px 28px}
.band .inner{max-width:40ch}
.band .band-titel,.band h3{font-family:var(--display);font-style:italic;font-weight:900;text-transform:uppercase;color:var(--white);font-size:clamp(1.8rem,4.6vw,3.2rem);line-height:1}
.band p{margin-top:16px}

/* Positionierung */
.pos{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.pos .quote{border-left:3px solid var(--mint);padding-left:24px;margin:26px 0;font-size:1.12rem;color:var(--white);line-height:1.6}
.pos-img{position:relative;border-radius:4px;overflow:hidden;align-self:center}
.pos-img img{width:100%;height:auto;object-fit:cover;aspect-ratio:1/1;max-height:330px;filter:grayscale(1) contrast(1.1) brightness(.8);transition:filter .7s var(--ease),transform .8s var(--ease)}
.pos-img:hover img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.03)}

/* Einstieg */
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:52px}
.card{background:rgba(28,28,28,.74);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),border-color .3s}
.card:hover{transform:translateY(-6px);border-color:var(--mint)}
.card-img{height:230px;overflow:hidden}
/* Groesserer Ausschnitt fuer das Betreuungsbild: der Trainingsplan liegt im unteren Bilddrittel */
.card-img-gross{height:330px}
.card-img-gross img{object-position:center 68%}
.card-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(.78);transition:.6s var(--ease)}
.card:hover .card-img img{transform:scale(1.06);filter:grayscale(0) contrast(1) brightness(1)}
.card-body{padding:34px;display:flex;flex-direction:column;flex:1}
.card h3{font-family:var(--display);font-style:italic;font-weight:900;text-transform:uppercase;font-size:1.7rem;color:var(--white)}
.card p{margin-top:14px;flex:1;font-size:.96rem}
.card .btn{margin-top:26px;align-self:flex-start}
.note-line{text-align:center;margin-top:30px;font-size:.9rem;color:var(--text-dim)}
.note-line a{color:var(--mint);border-bottom:1px solid var(--mint)}

/* Ausstattung */
.brands{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:34px}
.brand{border:1px solid var(--line);border-radius:999px;padding:8px 20px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;transition:.3s}
.brand:hover{border-color:var(--mint);color:var(--mint)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:44px}
.gallery img{width:100%;height:220px;object-fit:cover;border-radius:3px;filter:grayscale(1) contrast(1.15) brightness(.72);transition:.55s var(--ease)}
.gallery img:hover{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.03)}
.rarity{margin-top:44px;background:rgba(28,28,28,.6);border:1px solid var(--mint);border-radius:4px;padding:34px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.rarity .txt{max-width:62ch}
.rarity h3{font-family:var(--display);font-style:italic;font-weight:900;text-transform:uppercase;color:var(--mint);font-size:1.4rem}

/* Rarität mit Foto */
.rarity-bild{display:grid;grid-template-columns:.72fr 1.28fr;gap:0;padding:0;overflow:hidden;align-items:stretch}
.rarity-bild .ph{overflow:hidden}
.rarity-bild .ph img{width:100%;height:100%;object-fit:cover;min-height:340px;
  filter:grayscale(1) contrast(1.12) brightness(.82);transition:.65s var(--ease)}
.rarity-bild:hover .ph img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.04)}
.rarity-bild .txt{max-width:none;padding:34px 36px;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start}
@media(max-width:900px){
  .rarity-bild{grid-template-columns:1fr}
  .rarity-bild .ph img{min-height:240px}
  .rarity-bild .txt{padding:24px 20px}
}

/* Zwei Bilder nebeneinander statt eines grossen */
.ph-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-radius:4px;overflow:hidden}
.coffee .ph-duo img,.ph-duo img{width:100%;height:auto;object-fit:cover;aspect-ratio:4/5;max-height:390px;
  filter:grayscale(1) contrast(1.1) brightness(.84);transition:.7s var(--ease)}
.coffee .ph-duo img:hover,.ph-duo img:hover{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.03)}
@media(max-width:900px){.coffee .ph-duo img,.ph-duo img{aspect-ratio:4/5;min-height:0;max-height:none}}


/* ---------- Diashow der Studiofotos ----------
   Ersetzt die fruehere 4er-Galerie. Dort waren die Bilder auf 220 px Hoehe
   beschnitten, wodurch von einer Reihe aus vier Beinpressen genau ein Geraet
   uebrig blieb. Hier laeuft stattdessen ein Band durch, in dem jedes Foto
   VOLLSTAENDIG steht: feste Hoehe, Breite nach eigenem Seitenverhaeltnis.
   Deshalb object-fit:contain und width:auto - kein Zuschnitt im Browser. */
.dia{margin-top:44px;position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
/* Dauer haengt an der Bandlaenge: sechs Motive ergeben rund 3450 px je Haelfte,
   100 s entsprechen damit ca. 35 px/s. Kommt ein Motiv dazu, Dauer mit anpassen -
   sonst laeuft das Band schneller, ohne dass jemand die Animation angefasst hat. */
.dia-track{display:flex;width:max-content;animation:dia-lauf 100s linear infinite}
.dia:hover .dia-track,.dia:focus-within .dia-track{animation-play-state:paused}
.dia-item{flex:0 0 auto;margin-right:16px;position:relative;
  border-radius:4px;overflow:hidden;background:#111}
.dia-item img{display:block;height:420px;width:auto;max-width:none;
  filter:grayscale(1) contrast(1.12) brightness(.78);
  transition:filter 1.1s cubic-bezier(.33,1,.68,1)}
.dia-item .bu{position:absolute;left:0;right:0;bottom:0;
  padding:34px 16px 13px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(8,8,8,.88));
  font-size:.82rem;letter-spacing:.05em;line-height:1.35;color:var(--white)}
@keyframes dia-lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Nachtrag 25.08.2026 – Lesbarkeit MOBIL.
   Die Messung vom selben Tag lief nur auf dem Desktop und meldete "nichts mehr
   unter 11,5 px". Auf 375 px Breite stimmte das nicht: 27 Stellen lagen darunter,
   darunter BEIDE Schaltflaechen im Hero mit 10,6 px. Ursache: rem haengt am
   <html>-Element (16 px), waehrend body auf 15 px steht - die .xx-rem-Werte im
   Mobil-Breakpoint fallen dadurch tiefer aus als sie im Quelltext aussehen.
   Merke: Schriftgroessen IMMER auf beiden Breiten messen, nicht nur auf einer.
   Der Scroll-Hinweis und der gelbe Dev-Knopf bleiben klein - beides ist Zierde
   bzw. verschwindet vor dem Livegang. */
@media(max-width:700px){
  .dia-item img{height:270px}
  .dia-item .bu{font-size:.74rem;padding:26px 12px 10px}
  .dia-track{animation-duration:76s}
}
/* Wie bei .rev-rail und .mw-rail muss hier UMGEBROCHEN werden, nicht nur die
   Animation gestoppt: Das Band ist breiter als der Bildschirm und steckt in
   overflow:hidden - ohne Umbruch waeren vier der sechs Fotos unerreichbar. */
@media(prefers-reduced-motion:reduce){
  .dia-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .dia{-webkit-mask-image:none;mask-image:none}
  .dia-item{margin-bottom:16px}
}

/* ---------- Alltagsathleten ----------
   Steht bewusst direkt unter der Nautilus Super Forearm: Erst das seltene
   Wettkampfgeraet, dann die Erklaerung, warum genau solche Geraete auch
   jemandem nuetzen, der nie an einem Wettkampf teilnimmt.

   Vorgeschichte (Thomas, 25.08.2026): Hier stand ein eigener Abschnitt, der das
   Argument an EINEM Geraet festmachte (Matrix Glute Drive). Das trug nicht -
   das Geraet steht in vielen Studios. Das Argument liegt nicht am Geraet,
   sondern an der Verstellbarkeit. Deshalb bewusst OHNE Bild: Ein Foto wuerde
   die Aussage wieder an eine einzelne Maschine binden. */
.alltag{margin-top:30px;padding:38px 0 6px;border-top:1px solid var(--line);
  max-width:70ch;margin-left:auto;margin-right:auto;text-align:center}
.alltag h3{font-family:var(--display);font-style:italic;font-weight:900;
  text-transform:uppercase;color:var(--white);margin-top:12px;
  font-size:clamp(1.35rem,2.7vw,1.95rem);line-height:1.16}
.alltag p{margin-top:20px;text-align:left}
.alltag .schluss{color:var(--white);border-left:2px solid var(--mint);
  padding-left:18px;margin-top:26px}
@media(max-width:700px){
  .alltag{padding-top:30px}
  .alltag h3 br{display:none}
}

/* ---------- Terminauswahl im Funnel (Magicline-Termine) ----------
   Zwei Ebenen: oben die Tage als waagerechtes Band, darunter die Uhrzeiten
   des gewaehlten Tages. Bewusst Schaltflaechen statt eines Datumsfeldes -
   es sind echte, buchbare Termine, keine Wuensche. */
.fn-tage{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;margin-top:6px;
  scrollbar-width:thin}
.fn-tag{flex:0 0 auto;background:rgba(255,255,255,.05);border:1px solid var(--line);
  color:var(--text);border-radius:999px;padding:9px 16px;font-size:.84rem;
  cursor:pointer;white-space:nowrap;transition:.2s}
.fn-tag:hover{border-color:var(--mint)}
.fn-tag.an{background:var(--mint);border-color:var(--mint);color:#10231b;font-weight:600}
.fn-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:8px;margin-top:6px;max-height:210px;overflow-y:auto}
.fn-slot{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);
  border-radius:4px;padding:11px 6px;font-size:.9rem;cursor:pointer;transition:.2s}
.fn-slot:hover{border-color:var(--mint)}
.fn-slot.an{background:var(--mint);border-color:var(--mint);color:#10231b;font-weight:700}
.fn-feld select{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);
  color:var(--text);border-radius:4px;padding:11px 12px;font:inherit;font-size:.95rem}
@media(max-width:700px){
  .fn-slots{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));max-height:170px}
}

/* Raritaet auf der Startseite: kleines Bild rechts, kein Button.
   Bildhoehe bleibt im Rahmen des Textblocks, damit der Kasten nicht waechst. */
.rarity-klein{align-items:center;gap:30px;flex-wrap:nowrap}
.rarity-klein .txt{flex:1 1 auto}
.rarity-klein .ph{flex:0 0 auto;width:170px;border-radius:4px;overflow:hidden;align-self:stretch;
  display:flex;max-height:210px}
.rarity-klein .ph img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(.82)}
@media(max-width:700px){
  .rarity-klein{flex-wrap:wrap;gap:20px}
  .rarity-klein .ph{width:100%;max-height:170px}
}

/* Uebergabe an mysports erklaeren, bevor der Besucher unerwartet die Seite wechselt */
.hinweis-extern{max-width:70ch;margin:34px auto 0;padding:20px 22px;
  border:1px solid var(--line);border-left:3px solid var(--mint);border-radius:4px;
  background:rgba(255,255,255,.03);font-size:.92rem;line-height:1.65;color:var(--text)}
.hinweis-extern a{color:var(--mint);border-bottom:1px solid var(--mint)}
.btn-extern::after{content:" \2197";font-size:1.05em;line-height:0}

/* Kaffee */
.coffee{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center}
.coffee .ph{overflow:hidden;border-radius:4px}
.coffee .ph:not(.ph-duo) img{width:100%;height:auto;object-fit:cover;aspect-ratio:1/1;max-height:330px;filter:grayscale(1) contrast(1.1) brightness(.84);transition:.7s var(--ease)}
.coffee .ph:not(.ph-duo):hover img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.03)}
.coffee .spec{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.coffee .spec div{display:flex;gap:12px;align-items:baseline;font-size:.92rem}
.coffee .spec .k{color:var(--mint);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;min-width:90px}

/* Team */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
.person{text-align:center}
.person .ph{height:290px;overflow:hidden;border-radius:3px;background:var(--bg-3)}
.person .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.85);transition:.6s var(--ease)}
.person:hover .ph img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.05)}
.person .nm{margin-top:18px;font-family:var(--display);font-style:italic;font-weight:900;text-transform:uppercase;color:var(--white);font-size:1.15rem}
.person .role{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);margin-top:6px}

/* Firmenfitness */
.ff{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ff-logos{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:30px}
.ff-logos img{height:66px;width:auto;background:#fff;border-radius:3px;padding:6px}

/* Standort */
.loc{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.hours{margin-top:26px;border-top:1px solid var(--line)}
.hours div{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
.hours .d{color:var(--text-dim);letter-spacing:.06em;text-transform:uppercase;font-size:.95rem}
.hours .t{color:var(--white);font-weight:600}
/* Abgesagte Einzeltermine auf der Kursseite.
   BEWUSST NICHT .open-marker: Das ist die Klasse fuer unsere Arbeitsnotizen und
   wird auf der fertigen Seite ausgeblendet (html[data-fertig="ja"]). Der Hinweis
   waere damit fuer Besucher unsichtbar gewesen. (28.09.2026) */
.absage{max-width:74ch;margin:28px auto 0;padding:16px 20px;border-left:3px solid #E8A33D;
  background:rgba(232,163,61,.09);border-radius:0 3px 3px 0;font-size:.98rem;line-height:1.65}
.absage b{color:var(--white)}
.absage a{color:var(--mint)}

/* Kursplan (kurse.html). Bewusst keine echte <table>: Auf dem Telefon muesste
   eine vierspaltige Tabelle entweder seitlich scrollen oder die Schrift
   verkleinern - beides wollten wir nicht. Stattdessen ein Raster, das ab
   600px Breite auf zwei Spalten umbricht und den Beschreibungstext unter
   Zeit und Name legt. */
.kursplan{margin:32px auto 0;max-width:820px}
.kursplan h3{font-family:var(--display);font-style:italic;font-weight:900;text-transform:uppercase;
  color:var(--mint);font-size:1.2rem;letter-spacing:.05em;margin:38px 0 2px;padding-top:20px;
  border-top:1px solid var(--line)}
.kursplan h3:first-child{margin-top:0;border-top:0;padding-top:0}
.kp{display:grid;grid-template-columns:82px 1fr auto;gap:2px 18px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--line)}
.kp .z{color:var(--white);font-weight:700;font-variant-numeric:tabular-nums;font-size:1.05rem}
.kp .n{color:var(--white);font-weight:600;font-size:1.05rem}
.kp .d{color:var(--text-dim);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.kp .t{grid-column:2/4;color:var(--text-dim);font-size:.98rem;line-height:1.6;margin-top:4px}
@media(max-width:600px){
  .kp{grid-template-columns:70px 1fr}
  .kp .d{grid-column:2;justify-self:start;margin-top:2px}
  .kp .t{grid-column:1/3;margin-top:8px}
}

.addr{margin-top:30px;font-size:1rem;line-height:2}
.addr .k{color:var(--mint);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-top:16px}

/* Abschluss */
.final{position:relative;text-align:center;padding:124px 0}
.final .bglayer{filter:grayscale(1) brightness(.32) contrast(1.4)}
.final .final-titel,.final h2{font-family:var(--display);font-style:italic;font-weight:900;text-transform:uppercase;color:var(--white);font-size:clamp(2.2rem,5.5vw,4.2rem);line-height:.98}
.final p{margin-top:20px;font-size:1.05rem;max-width:52ch;margin-left:auto;margin-right:auto}
.final .btn{margin-top:34px}

/* Footer */
/* Angabenblock auf Impressum und Datenschutz: Beschriftung links, Wert rechts.
   Bewusst gross und ruhig gesetzt - diese Seiten liest man, wenn man etwas
   sucht (Adresse, Telefonnummer), nicht zum Vergnuegen. */
.rechtsblock{max-width:74ch;margin:34px auto 0;border-top:1px solid var(--line)}
.rechtsblock div{display:grid;grid-template-columns:200px 1fr;gap:20px;
  padding:17px 0;border-bottom:1px solid var(--line);font-size:1.02rem}
.rechtsblock .k{color:var(--mint);font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;padding-top:4px}
.rechtsblock a{color:var(--white);border-bottom:1px solid var(--mint)}
@media(max-width:640px){
  .rechtsblock div{grid-template-columns:1fr;gap:6px;padding:15px 0}
  .rechtsblock .k{padding-top:0}
}

footer{background:var(--header);padding:60px 0 34px;border-top:1px solid var(--line)}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.f-grid h3{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mint);margin-bottom:16px;font-weight:600}
.f-grid ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:.9rem}
.f-grid a:hover{color:var(--mint)}
.f-bottom{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.9rem;color:var(--text-dim)}

/* ---------- Offene Punkte ----------
   ACHTUNG, VOR DEM LIVEGANG: Der gelbe Knopf unten rechts und die gelben Kaesten
   sind ein Arbeitswerkzeug fuer Thomas, kein Seiteninhalt. Besucher sollen sie
   nicht sehen. Zum Abschalten genuegt eine Zeile - das <html>-Element in
   _header.html (bzw. index.html) bekommt data-fertig="ja":

       <html lang="de" data-fertig="ja">

   Danach sind Knopf und Kaesten weg, ohne dass irgendetwas geloescht werden
   muss; zum Weiterarbeiten das Attribut einfach wieder entfernen. */
html[data-fertig="ja"] .openbtn,
html[data-fertig="ja"] .open-marker{display:none!important}

.openbtn{position:fixed;right:20px;bottom:20px;z-index:200;background:var(--open);color:#241a05;border:0;border-radius:999px;padding:13px 22px;font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.45)}
.open-marker{display:none}
body.show-open .open-marker{display:block;background:rgba(224,168,60,.14);border:1px dashed var(--open);color:var(--open);padding:10px 14px;border-radius:3px;font-size:.8rem;margin:14px 0;line-height:1.5;text-align:left}

/* ---------- Mobile ---------- */
@media(max-width:900px){
  /* Navigation */
  .navlinks{display:none;position:absolute;top:74px;left:0;right:0;background:var(--header);
    flex-direction:column;gap:0;padding:6px 20px 16px;border-bottom:1px solid var(--line)}
  .navlinks.open{display:flex}
  .navlinks a{padding:13px 0;border-bottom:1px solid var(--line);display:block}
  .burger{display:block}
  .nav{height:74px}
  .nav .btn{display:none}
  .logo{font-size:1.85rem}

  /* Grundrhythmus: enger setzen, damit Scrollen nicht endlos wird */
  body{font-size:15px;line-height:1.6;letter-spacing:.02em}
  section{padding:52px 0}
  .wrap{padding:0 20px}
  .lead{font-size:.95rem}
  .sect-wrap{gap:10px;margin-bottom:10px}
  h2.sect{font-size:1.15rem;letter-spacing:.1em}
  .slash{font-size:1.1rem}
  p+p{margin-top:12px!important}

  /* Hero */
  .hero{min-height:auto}
  .hero-inner{padding:122px 20px 44px}
  .hero h1{font-size:clamp(2rem,9vw,2.9rem);max-width:none}
  .zeiten{display:flex;align-self:flex-start;margin:.62em 0 0;font-size:.4em;line-height:1.3}
  .hero .sub{margin-top:14px;font-size:1rem;max-width:none}
  .hero-cta{margin-top:22px;gap:12px}
  .cta-paar{grid-template-columns:1fr 1fr;gap:8px;max-width:none}
  .cta-paar .btn{padding:15px 10px;font-size:.8rem;letter-spacing:.05em}
  .partners{margin-top:26px;gap:16px}
  .partners img{height:38px}
  .gproof{margin-top:14px;font-size:.84rem;gap:8px}

  /* Kennzahlen: drei Kacheln in einer Reihe, kompakt */
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat{padding:22px 8px;border-bottom:1px solid var(--line)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-last-child(-n+2){border-bottom:0}
  .stat .num{font-size:1.8rem}
  .stat .lbl{font-size:.78rem;letter-spacing:.06em;margin-top:6px}

  /* Zwei-Spalter aufloesen */
  .pos,.coffee,.ff,.loc{grid-template-columns:1fr;gap:26px}
  .pos-img{order:-1}
  .pos-img img,.coffee .ph:not(.ph-duo) img{aspect-ratio:16/9;max-height:none}
  .cards2{grid-template-columns:1fr!important;gap:14px;margin-top:26px}
  .card-img{height:170px}
  .card-img-gross{height:240px}
  .card-body{padding:24px}
  .card h3{font-size:1.35rem}
  .f-grid{grid-template-columns:1fr;gap:26px}

  /* Galerie */
  .gallery{grid-template-columns:1fr 1fr;gap:8px;margin-top:26px}
  .gallery img{height:130px}

  /* Zwischenbilder kuerzer */
  .band{min-height:auto;padding:56px 20px}
  .band .band-titel,.band h3{font-size:1.8rem}
  .band p{font-size:.95rem}

  /* Bewertungen laufen auch auf dem Handy gleichmaessig durch.
     Weiche Raender, damit angeschnittene Karten gewollt wirken. */
  .rev{margin-top:26px}
  .rev-track{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
  .rev-item{width:78vw}
  .rev-card{padding:22px 18px}
  .rev-card blockquote{font-size:.92rem}

  /* Marken-Laufband */
  .mw{margin-top:24px}
  .mw-item{width:112px;height:66px}
  .mw-item .wm{font-size:.78rem;letter-spacing:.08em}

  /* Standort */
  .hours div{padding:12px 0}
  .addr{font-size:.95rem;line-height:1.8}
  .rarity{padding:24px;gap:16px}
  .rarity h3{font-size:1.2rem}
  .brands{gap:7px}
  .brand{padding:7px 14px;font-size:.78rem}

  /* Abschluss + Footer */
  .final{padding:64px 0}
  .final .final-titel,.final h2{font-size:2rem}
  footer{padding:44px 0 90px}

  /* Fester Aktionsbalken unten - der Haupt-CTA ist sonst nie in Reichweite */
  .mcta{position:fixed;left:0;right:0;bottom:0;z-index:150;display:flex;gap:8px;align-items:center;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px));
    background:rgba(28,28,28,.97);border-top:1px solid var(--line);
    transform:translateY(0);transition:transform .3s var(--ease)}
  .mcta.weg{transform:translateY(130%)}
  .mcta a{min-height:48px;display:flex;align-items:center;justify-content:center;border-radius:999px;
    font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem}
  .mcta .tel{width:52px;min-width:52px;border:2px solid var(--mint);color:var(--mint);font-size:1.1rem}
  .mcta .haupt{flex:1;background:var(--mint);color:#1E1E1E}
  .openbtn{bottom:76px;right:12px;padding:9px 14px;font-size:.62rem}
}
@media(min-width:901px){.mcta{display:none}}
@media(max-width:600px){
  .fn-box{padding:34px 18px 22px;max-height:94vh}
  .fn-raster{grid-template-columns:1fr}
  .fn-titel{font-size:1.3rem}
  .fn-opt{padding:13px 15px;font-size:.9rem}
}