/* ============================================================
   DC GYM Grüna — Eigenständiges Design-System
   Athletisch · Teal/Charcoal · Mobile-first
   Schriften: Oswald (Display) · Barlow (Body) · Barlow Condensed (Labels)
   CI-Variablen kommen aus theme.css (Admin-verwaltet).
   ============================================================ */

:root{
  --ff-head:'Oswald','Impact','Haettenschweiler',sans-serif;
  --ff-body:'Barlow',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --ff-cond:'Barlow Condensed','Oswald',sans-serif;

  --dark:#15201F;        /* charcoal mit Teal-Stich */
  --dark-2:#1E2C2B;
  --dark-3:#0E1716;
  --on-dark:#EAF2F1;
  --on-dark-mid:#9FB3B1;

  --maxw:1200px;
  --gutter:clamp(1.1rem,4vw,2.5rem);

  --r-sm:4px; --r:8px; --r-lg:16px; --r-pill:100px;

  --t-h1:clamp(2.6rem,8vw,5.5rem);
  --t-h2:clamp(2rem,5vw,3.4rem);
  --t-h3:clamp(1.25rem,2.6vw,1.6rem);
  --t-lead:clamp(1.05rem,2.2vw,1.3rem);
  --t-body:1.0625rem;
  --t-small:.9375rem;
  --t-label:.75rem;

  --shadow:0 18px 50px -20px rgba(21,32,31,.35);
  --shadow-sm:0 8px 24px -12px rgba(21,32,31,.3);
  --ease:cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  font-family:var(--ff-body);
  font-size:var(--t-body);
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.nav-open,body.cookie-locked{overflow:hidden;}

img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}

/* ---------- Typo ---------- */
h1,h2,h3,h4{
  font-family:var(--ff-head);
  font-weight:700;
  line-height:1.02;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--ink);
}
h1{font-size:var(--t-h1);}
h2{font-size:var(--t-h2);}
h3{font-size:var(--t-h3);font-weight:600;}
h2 em,h1 em{font-style:normal;color:var(--accent);}
p{margin-bottom:1rem;}
.lead{font-size:var(--t-lead);line-height:1.6;color:var(--ink-soft);font-weight:400;}

.kicker{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--ff-cond);font-weight:600;
  font-size:var(--t-label);letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;
}
.kicker::before{content:"";width:26px;height:2px;background:var(--accent);display:inline-block;}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.section{padding:clamp(3.5rem,9vw,7rem) 0;position:relative;}
.section--soft{background:var(--paper-soft);}
.section--deep{background:var(--paper-deep);}
.section-head{max-width:60ch;margin-bottom:clamp(2rem,5vw,3.5rem);}

/* dunkle Sektionen */
.section--dark{background:var(--dark);color:var(--on-dark);}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff;}
.section--dark .lead{color:var(--on-dark-mid);}
.section--dark p{color:var(--on-dark-mid);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--ff-cond);font-weight:600;
  font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.95rem 1.8rem;border:2px solid transparent;border-radius:var(--r-sm);
  cursor:pointer;transition:all .25s var(--ease);white-space:nowrap;
}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);transform:translateY(-2px);box-shadow:0 10px 24px -10px var(--accent);}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-secondary:hover{background:var(--ink);color:#fff;transform:translateY(-2px);}
.section--dark .btn-secondary{color:#fff;border-color:rgba(255,255,255,.4);}
.section--dark .btn-secondary:hover{background:#fff;color:var(--dark);}
.btn-ghost{background:transparent;color:var(--accent);border-color:transparent;padding-left:0;padding-right:0;}
.btn-ghost:hover{color:var(--accent-deep);gap:.9rem;}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;
  padding:.7rem var(--gutter);
  background:rgba(21,32,31,.0);
  transition:background .35s var(--ease),box-shadow .35s var(--ease),padding .35s var(--ease);
}
.site-header.is-stuck{background:rgba(255,255,255,.97);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--paper-rule);padding-top:.5rem;padding-bottom:.5rem;}
.hdr-inner{max-width:var(--maxw);margin:0 auto;width:100%;display:flex;align-items:center;gap:1rem;}
.brand{display:flex;align-items:center;gap:.7rem;margin-right:auto;}
.brand img{height:46px;width:auto;}
.brand-name{display:flex;flex-direction:column;line-height:1;}
.brand-main{font-family:var(--ff-head);font-weight:700;font-size:1.25rem;text-transform:uppercase;letter-spacing:.04em;color:#fff;transition:color .35s;}
.brand-sub{font-family:var(--ff-cond);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-mid);transition:color .35s;}
.is-stuck .brand-main{color:var(--ink);}
.is-stuck .brand-sub{color:var(--ink-mid);}

.hdr-nav{display:none;align-items:center;gap:1.6rem;}
.hdr-nav a{font-family:var(--ff-cond);font-weight:600;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.88);transition:color .2s;}
.hdr-nav a:hover{color:var(--accent);}
.is-stuck .hdr-nav a{color:var(--ink-soft);}
.is-stuck .hdr-nav a:hover{color:var(--accent);}
.hdr-nav .nav-cta{background:var(--accent);color:#fff !important;padding:.5rem 1.1rem;border-radius:var(--r-sm);}
.hdr-nav .nav-cta:hover{background:var(--accent-deep);}

.nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;background:rgba(255,255,255,.12);border:none;border-radius:var(--r-sm);cursor:pointer;padding:0 12px;}
.is-stuck .nav-toggle{background:var(--paper-deep);}
.nav-toggle span{display:block;height:2px;background:#fff;transition:.3s var(--ease);}
.is-stuck .nav-toggle span{background:var(--ink);}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-open .nav-toggle span:nth-child(2){transform:translateY(-7px) rotate(-45deg);}
.nav-toggle span:nth-child(3){display:none;}

/* mobile overlay */
.nav-overlay{position:fixed;inset:0;z-index:80;background:var(--dark);transform:translateY(-100%);transition:transform .45s var(--ease);display:flex;flex-direction:column;justify-content:center;padding:5rem var(--gutter) 2rem;visibility:hidden;}
.nav-overlay.open{transform:translateY(0);visibility:visible;}
.nav-overlay ul{display:flex;flex-direction:column;gap:.4rem;}
.nav-overlay a{font-family:var(--ff-head);font-weight:600;font-size:clamp(1.6rem,7vw,2.4rem);text-transform:uppercase;color:#fff;transition:color .2s,padding .2s;}
.nav-overlay a:hover{color:var(--accent);padding-left:.5rem;}
.nav-overlay .nav-ov-contact{margin-top:2rem;font-family:var(--ff-cond);font-size:1.1rem;color:var(--on-dark-mid);letter-spacing:.05em;}
.nav-overlay .nav-ov-contact a{font-size:1.1rem;color:var(--accent);}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--dark-3);color:#fff;padding:7.5rem 0 0;overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 80% 0%,rgba(46,157,164,.28),transparent 55%);pointer-events:none;}
.hero__grid{position:relative;display:grid;gap:2.5rem;align-items:center;padding-bottom:3.5rem;}
.hero__badge{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--ff-cond);font-weight:600;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mid);border:1px solid rgba(255,255,255,.18);padding:.45rem .9rem;border-radius:var(--r-pill);margin-bottom:1.5rem;}
.hero__badge .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(46,157,164,.25);}
.hero__title{font-size:var(--t-h1);color:#fff;margin-bottom:1.3rem;}
.hero__title em{color:var(--accent);}
.hero__lead{font-size:var(--t-lead);color:var(--on-dark-mid);max-width:48ch;margin-bottom:2rem;}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.5rem;}
.hero__trust{display:flex;flex-wrap:wrap;gap:1.5rem 2.2rem;}
.hero__trust-item{display:flex;flex-direction:column;}
.hero__trust-num{font-family:var(--ff-head);font-weight:700;font-size:1.8rem;color:#fff;line-height:1;}
.hero__trust-label{font-family:var(--ff-cond);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-mid);margin-top:.25rem;}

.hero__media{position:relative;}
.hero__media-tag{position:absolute;z-index:3;top:1rem;left:1rem;background:var(--accent);color:#fff;font-family:var(--ff-cond);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;padding:.5rem .9rem;border-radius:var(--r-sm);display:flex;flex-direction:column;line-height:1.15;}
.hero__media-tag strong{font-size:1rem;}

/* Slider */
.slider{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);}
.slider__track{display:flex;transition:transform .6s var(--ease);}
.slider__slide{min-width:100%;position:relative;}
.slider__slide img{width:100%;aspect-ratio:16/11;object-fit:cover;}
.slider__cap{position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1.3rem 1.2rem;background:linear-gradient(to top,rgba(14,23,22,.85),transparent);}
.slider__cap-kick{font-family:var(--ff-cond);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
.slider__cap-title{font-family:var(--ff-head);font-weight:600;font-size:1.3rem;text-transform:uppercase;color:#fff;}
.slider__btn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border:none;border-radius:50%;background:rgba(255,255,255,.9);color:var(--dark);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;}
.slider__btn:hover{background:var(--accent);color:#fff;}
.slider__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;}
.slider__btn--prev{left:.8rem;}
.slider__btn--next{right:.8rem;}
.slider__dots{position:absolute;bottom:1rem;right:1.3rem;display:flex;gap:.4rem;}
.slider__dot{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.45);cursor:pointer;transition:.2s;padding:0;}
.slider__dot.active{background:var(--accent);width:24px;border-radius:5px;}

/* ---------- Marquee ---------- */
.marquee{background:var(--accent);color:#fff;overflow:hidden;white-space:nowrap;padding:.85rem 0;}
.marq-track{display:inline-flex;animation:marq 28s linear infinite;}
.marquee.fast .marq-track{animation-duration:9s;}
.marq-item{font-family:var(--ff-head);font-weight:600;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;}
.marq-sep{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.7);margin:0 1.5rem;}
@keyframes marq{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.marq-track{animation:none;}}

/* ---------- Stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--paper-rule);border:1px solid var(--paper-rule);border-radius:var(--r-lg);overflow:hidden;}
.stat{background:var(--paper);padding:1.8rem 1.2rem;text-align:center;}
.stat__num{font-family:var(--ff-head);font-weight:700;font-size:clamp(2rem,6vw,3rem);color:var(--accent);line-height:1;}
.stat__label{font-family:var(--ff-cond);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mid);margin-top:.4rem;}

/* ---------- Über uns ---------- */
.about__grid{display:grid;gap:2.5rem;align-items:center;}
.about__media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);}
.about__media img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.about__badge{position:absolute;bottom:1rem;left:1rem;background:var(--accent);color:#fff;border-radius:var(--r);padding:1rem 1.3rem;}
.about__badge .n{font-family:var(--ff-head);font-weight:700;font-size:2.4rem;line-height:1;}
.about__badge .t{font-family:var(--ff-cond);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;}

/* ---------- Kurse / Cards ---------- */
.grid-cards{display:grid;grid-template-columns:1fr;gap:1.2rem;}
.kurs{position:relative;background:var(--paper);border:1px solid var(--paper-rule);border-radius:var(--r-lg);padding:1.8rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;overflow:hidden;}
.kurs::after{content:"";position:absolute;left:0;top:0;width:4px;height:100%;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease);}
.kurs:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent;}
.kurs:hover::after{transform:scaleY(1);}
.kurs__ico{width:54px;height:54px;border-radius:var(--r);background:var(--accent-light);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem;}
.kurs__ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;}
.kurs h3{margin-bottom:.5rem;}
.kurs p{color:var(--ink-mid);font-size:var(--t-small);margin:0;}

/* ---------- Preise ---------- */
.preise{display:grid;grid-template-columns:1fr;gap:1.2rem;}
.tarif{background:var(--paper);border:1px solid var(--paper-rule);border-radius:var(--r-lg);padding:1.8rem;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s;}
.tarif:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);}
.tarif--featured{background:var(--dark);color:#fff;border-color:var(--dark);position:relative;}
.tarif--featured h3{color:#fff;}
.tarif__tag{position:absolute;top:1.3rem;right:1.3rem;background:var(--accent);color:#fff;font-family:var(--ff-cond);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .7rem;border-radius:var(--r-pill);}
.tarif h3{font-size:1.4rem;margin-bottom:.3rem;}
.tarif__sub{font-family:var(--ff-cond);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mid);margin-bottom:1.2rem;}
.tarif--featured .tarif__sub{color:var(--on-dark-mid);}
.tarif ul{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.5rem;flex:1;}
.tarif li{display:flex;gap:.6rem;font-size:var(--t-small);color:var(--ink-soft);}
.tarif--featured li{color:var(--on-dark);}
.tarif li svg{flex-shrink:0;width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:2.5;margin-top:.15rem;}
.preise__note{font-size:var(--t-small);color:var(--ink-mid);margin-top:1.2rem;text-align:center;}

/* ---------- Trainer ---------- */
.trainer-grid{display:grid;grid-template-columns:1fr;gap:1.4rem;}
.trainer{background:var(--paper);border:1px solid var(--paper-rule);border-radius:var(--r-lg);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s;}
.trainer:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.trainer__img{aspect-ratio:1/1;background:var(--paper-deep);position:relative;}
.trainer__img img{width:100%;height:100%;object-fit:cover;}
.trainer__ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-size:3.5rem;color:var(--accent);background:var(--accent-light);}
.trainer__body{padding:1.3rem;}
/* Die Karten sind weiß, stehen aber im dunklen Abschnitt (section--dark),
   der sonst ALLE Überschriften weiß färbt — der Name wäre weiß auf weiß.
   Deshalb hier ausdrücklich dunkel. */
.trainer__body h3{margin-bottom:.2rem;color:var(--ink);}
.trainer__role{font-family:var(--ff-cond);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem;}
.trainer__body p{font-size:var(--t-small);color:var(--ink-mid);margin:0;}
.trainer__social{display:flex;gap:.6rem;margin-top:1rem;}
.trainer__social a{width:34px;height:34px;border-radius:50%;border:1px solid var(--paper-rule);display:flex;align-items:center;justify-content:center;color:var(--ink-mid);transition:.2s;}
.trainer__social a:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.trainer__social svg{width:16px;height:16px;fill:currentColor;}

/* ---------- News ---------- */
.news-grid{display:grid;grid-template-columns:1fr;gap:1.4rem;}
.news-card{background:var(--paper);border:1px solid var(--paper-rule);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s;}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);}
.news-card__img{aspect-ratio:16/9;object-fit:cover;background:var(--paper-deep);}
.news-card__body{padding:1.4rem;display:flex;flex-direction:column;flex:1;}
.news-card__date{font-family:var(--ff-cond);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem;}
.news-card__body h3{font-size:1.2rem;margin-bottom:.5rem;}
.news-card__body p{font-size:var(--t-small);color:var(--ink-mid);margin:0;}
.news-empty{text-align:center;color:var(--ink-mid);padding:2rem;border:1px dashed var(--paper-rule);border-radius:var(--r-lg);}

/* ---------- Testimonials ---------- */
.testi-grid{display:grid;grid-template-columns:1fr;gap:1.4rem;}
.testi{background:var(--paper);border-radius:var(--r-lg);padding:1.8rem;border:1px solid var(--paper-rule);}
.testi__stars{color:var(--accent);font-size:1.1rem;letter-spacing:.1em;margin-bottom:.8rem;}
.testi__text{font-size:1.05rem;color:var(--ink-soft);font-style:italic;margin-bottom:1.2rem;}
.testi__who{display:flex;align-items:center;gap:.8rem;}
.testi__av{width:42px;height:42px;border-radius:50%;background:var(--accent-light);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-weight:700;}
.testi__name{font-family:var(--ff-cond);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.95rem;}
.testi__role{font-size:.8rem;color:var(--ink-mid);}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--paper-rule);}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem 0;font-family:var(--ff-head);font-weight:600;font-size:1.1rem;text-transform:uppercase;color:var(--ink);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-arrow{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--accent-light);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;transition:transform .3s;}
.faq-arrow svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.5;}
.faq-item[open] .faq-arrow{transform:rotate(45deg);background:var(--accent);color:#fff;}
.faq-body{padding:0 0 1.3rem;color:var(--ink-mid);font-size:var(--t-small);max-width:75ch;}

/* ---------- Kontakt ---------- */
.kont-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;}
.kont-items{display:grid;gap:1.2rem;}
.kont-item{border-left:3px solid var(--accent);padding-left:1rem;}
.kont-label{font-family:var(--ff-cond);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-mid);}
.kont-value{font-size:1.1rem;color:#fff;}
.kont-value a{color:#fff;}
.kont-value a:hover{color:var(--accent);}

.form-block{background:#fff;border-radius:var(--r-lg);padding:1.8rem;color:var(--ink);}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem;}
.field label{font-family:var(--ff-cond);font-weight:600;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
.field input,.field select,.field textarea{font-family:var(--ff-body);font-size:1rem;padding:.75rem .9rem;border:1px solid var(--paper-rule);border-radius:var(--r-sm);background:var(--paper-soft);color:var(--ink);outline:none;transition:border-color .2s;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);}
.field-req{color:var(--accent);}
.form-row{display:grid;grid-template-columns:1fr;gap:0;}
.field-check{flex-direction:row;align-items:flex-start;gap:.6rem;}
.field-check input{margin-top:.25rem;}
.field-check label{text-transform:none;letter-spacing:0;font-weight:400;font-family:var(--ff-body);font-size:.85rem;color:var(--ink-mid);}
.field-honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-status{display:none;padding:.8rem 1rem;border:1px solid;border-radius:var(--r-sm);margin-bottom:1rem;font-size:.9rem;}
.form-note{font-family:var(--ff-cond);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mid);text-align:center;margin:.8rem 0 0;}

/* ---------- Anfahrt ---------- */
.anf-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;}
.anf-map{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:280px;background:var(--dark-2);display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff;text-align:center;padding:2rem;}
.anf-map svg{width:46px;height:46px;fill:var(--accent);margin-bottom:.8rem;}
.anf-addr{font-family:var(--ff-head);font-weight:600;font-size:1.3rem;text-transform:uppercase;}
.anf-note{font-family:var(--ff-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-mid);margin-top:.4rem;}
.anf-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.anf-ways{display:grid;gap:1.1rem;}
.anf-way{background:var(--paper);border:1px solid var(--paper-rule);border-radius:var(--r);padding:1.2rem 1.4rem;}
.anf-way-head{display:flex;align-items:center;gap:.6rem;font-family:var(--ff-head);font-weight:600;text-transform:uppercase;font-size:1.05rem;margin-bottom:.4rem;}
.anf-way-head svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.8;}
.anf-way p{font-size:var(--t-small);color:var(--ink-mid);margin:0;}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark-3);color:var(--on-dark-mid);padding:3.5rem 0 1.5rem;}
.ftr-grid{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:2.5rem;}
.ftr-brand{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;}
.ftr-brand img{height:48px;}
.ftr-bname{font-family:var(--ff-head);font-weight:700;font-size:1.3rem;text-transform:uppercase;color:#fff;}
.ftr-bsub{font-family:var(--ff-cond);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;}
.ftr-col h4{font-family:var(--ff-cond);font-weight:600;font-size:.85rem;letter-spacing:.14em;color:#fff;margin-bottom:1rem;}
.ftr-col ul{display:flex;flex-direction:column;gap:.6rem;}
.ftr-col a{font-size:.95rem;transition:color .2s;}
.ftr-col a:hover{color:var(--accent);}
.ftr-social{display:flex;gap:.7rem;margin-top:1rem;}
.ftr-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:#fff;transition:.2s;}
.ftr-social a:hover{background:var(--accent);border-color:var(--accent);}
.ftr-social svg{width:18px;height:18px;fill:currentColor;}
.ftr-bottom{display:flex;flex-direction:column;gap:.8rem;border-top:1px solid rgba(255,255,255,.1);padding-top:1.5rem;}
.ftr-meta{font-size:.85rem;margin:0;}
.ftr-links{display:flex;gap:1.2rem;}
.ftr-links a{font-family:var(--ff-cond);letter-spacing:.06em;text-transform:uppercase;font-size:.85rem;}
.ftr-links a:hover{color:var(--accent);}
.ftr-dsgvo{font-size:.78rem;line-height:1.6;color:rgba(234,242,241,.4);border-top:1px solid rgba(255,255,255,.08);margin-top:1.5rem;padding-top:1.2rem;}
.ftr-ki{font-size:.78rem;color:rgba(234,242,241,.4);margin-top:.6rem;}
.ftr-credits{margin-top:1rem;font-size:.78rem;}
.ftr-credits a{color:rgba(234,242,241,.45);}
.ftr-credits a:hover{color:var(--accent);}
.ftr-admin{margin-top:.8rem;}
.ftr-admin a{display:inline-flex;color:rgba(234,242,241,.2);transition:.3s;}
.ftr-admin a:hover{color:var(--accent);}
.ftr-admin svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;}

/* ---------- Sticky mobile bar ---------- */
.sticky-bar{position:fixed;bottom:0;left:0;right:0;z-index:70;display:flex;background:var(--dark);box-shadow:0 -4px 20px -8px rgba(0,0,0,.5);}
.sticky-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem;font-family:var(--ff-cond);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.9rem;color:#fff;}
.sticky-bar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;}
.sticky-bar__cta{background:var(--accent);}
.sticky-bar__call{border-right:1px solid rgba(255,255,255,.12);}
/* Platz für die feste Kontaktleiste auf ALLEN Breiten, damit sie nie den
   Fuß überdeckt. Stand vorher nur in der 760px-Regel — jetzt global,
   weil die Leiste auch auf Desktop sichtbar ist. */
body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px));}

/* ---------- Cookie Consent ---------- */
.cookie-wall{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center;padding:1rem;}
.cookie-wall.hidden{display:none;}
.cookie-wall__blur{position:absolute;inset:0;background:rgba(14,23,22,.55);backdrop-filter:blur(4px);}
.cookie-wall__box{position:relative;background:#fff;border-radius:var(--r-lg);max-width:740px;width:100%;padding:2rem clamp(1.5rem,4vw,2.6rem);box-shadow:var(--shadow);max-height:92vh;overflow-y:auto;}
.cw-label{font-family:var(--ff-cond);font-weight:600;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem;}
.cw-title{font-family:var(--ff-head);font-weight:700;font-size:1.6rem;text-transform:uppercase;color:var(--ink);margin-bottom:.7rem;}
.cw-text{font-size:.9rem;color:var(--ink-mid);margin-bottom:1.2rem;}
.cw-cats{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.3rem;}
.cw-cat{display:flex;gap:.9rem;align-items:flex-start;border:1px solid var(--paper-rule);border-radius:var(--r);padding:.9rem 1rem;}
.cw-cat__info{flex:1;}
.cw-cat__info strong{display:block;font-family:var(--ff-cond);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.95rem;color:var(--ink);}
.cw-cat__info span{font-size:.82rem;color:var(--ink-mid);}
.cw-switch{position:relative;width:46px;height:26px;flex-shrink:0;}
.cw-switch input{opacity:0;width:0;height:0;position:absolute;}
.cw-slider{position:absolute;inset:0;background:var(--paper-rule);border-radius:var(--r-pill);cursor:pointer;transition:.25s;}
.cw-slider::before{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.cw-switch input:checked + .cw-slider{background:var(--accent);}
.cw-switch input:checked + .cw-slider::before{transform:translateX(20px);}
.cw-switch input:disabled + .cw-slider{background:var(--accent);opacity:.55;cursor:not-allowed;}
.cw-btns{display:flex;flex-direction:column;gap:.6rem;}
.cw-btns .btn{width:100%;}
.cw-link{font-family:var(--ff-cond);letter-spacing:.06em;text-transform:uppercase;font-size:.8rem;color:var(--ink-mid);text-align:center;}
.cw-link:hover{color:var(--accent);}
/* Floating reopen button */
.cookie-fab{position:fixed;left:.9rem;bottom:5rem;z-index:60;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--paper-rule);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--accent);}
.cookie-fab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;}

/* Social embed gating */
.embed-gate{background:var(--paper-deep);border:1px dashed var(--paper-rule);border-radius:var(--r-lg);padding:2rem 1.4rem;text-align:center;color:var(--ink-mid);}
.embed-gate h4{font-family:var(--ff-head);text-transform:uppercase;color:var(--ink);margin-bottom:.5rem;}
.embed-gate p{font-size:.85rem;margin-bottom:1rem;}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;}}

/* ============================================================
   RESPONSIVE — ab Tablet/Desktop (mobile-first Basis oben)
   ============================================================ */
@media (min-width:640px){
  .stats{grid-template-columns:repeat(4,1fr);}
  .grid-cards{grid-template-columns:repeat(2,1fr);}
  .preise{grid-template-columns:repeat(2,1fr);}
  .trainer-grid{grid-template-columns:repeat(2,1fr);}
  .news-grid{grid-template-columns:repeat(2,1fr);}
  .testi-grid{grid-template-columns:repeat(2,1fr);}
  .form-row{grid-template-columns:1fr 1fr;gap:1rem;}
  .cw-btns{flex-direction:row;}
  .cookie-wall{align-items:center;}
}
@media (min-width:900px){
  .hdr-nav{display:flex;}
  .nav-toggle{display:none;}
  .hero{padding-top:8.5rem;}
  .hero__grid{grid-template-columns:1.05fr .95fr;gap:3rem;padding-bottom:5rem;}
  .grid-cards{grid-template-columns:repeat(3,1fr);}
  .preise{grid-template-columns:repeat(3,1fr);}
  .trainer-grid{grid-template-columns:repeat(3,1fr);}
  .news-grid{grid-template-columns:repeat(3,1fr);}
  .about__grid{grid-template-columns:1fr 1.1fr;gap:3.5rem;}
  .kont-grid{grid-template-columns:.9fr 1.1fr;}
  .anf-grid{grid-template-columns:1.2fr .8fr;}
  .ftr-grid{grid-template-columns:1.4fr 1fr 1fr;}
  .ftr-bottom{flex-direction:row;justify-content:space-between;align-items:center;}
  /* Kontaktleiste bleibt auch auf Desktop sichtbar (Wunsch Jan) — kein display:none mehr. */
}
@media (min-width:1100px){
  .grid-cards{grid-template-columns:repeat(4,1fr);}
}


/* ============================================================
   HERO — vollflaechig
   Nachgestellt, damit diese Regeln die frueheren ueberschreiben,
   ohne dass ich im gewachsenen Block herumschneiden muss.

   Der Bereich davor sperrte Bild und Bewegung in eine kleine
   Kachel rechts. Ein Studio lebt aber vom Bild: Es traegt jetzt
   die ganze Flaeche, der Text liegt darauf.
   ============================================================ */

.hero{
  position:relative;
  min-height:clamp(560px,88svh,900px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0;overflow:hidden;
  background:var(--dark-3);color:#fff;
}
.hero::before{content:none;}          /* alter Farbschleier entfaellt */

/* --- Bildebene --- */
.hero__bg{position:absolute;inset:0;overflow:hidden;}
.hero__track{display:flex;height:100%;transition:transform .8s var(--ease);will-change:transform;}
.hero__slide{min-width:100%;height:100%;}
.hero__slide img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block;}

/* Zwei Verlaeufe statt einem: einer von unten fuer die Schrift,
   einer von links fuer die Tiefe. Ein einzelner deckender Schleier
   nimmt dem Bild die Kraft. */
.hero__veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(14,23,22,.94) 0%,rgba(14,23,22,.72) 34%,rgba(14,23,22,.18) 66%,rgba(14,23,22,.30) 100%),
    linear-gradient(to right,rgba(14,23,22,.62) 0%,rgba(14,23,22,.10) 55%,transparent 100%);
}

/* --- Textebene --- */
.hero__inner{
  position:relative;z-index:2;
  padding-top:9rem;padding-bottom:2.5rem;
  max-width:var(--maxw);
}
.hero__badge{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--ff-cond);font-weight:600;font-size:.8rem;
  letter-spacing:.2em;text-transform:uppercase;color:#fff;
  background:rgba(46,157,164,.92);border:none;
  padding:.5rem 1rem;border-radius:2px;margin-bottom:1.6rem;
}
.hero__badge .dot{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:none;}

.hero__title{
  font-family:var(--ff-head);font-weight:700;
  font-size:clamp(2.9rem,9.5vw,7rem);
  line-height:.92;letter-spacing:-.015em;
  text-transform:uppercase;
  color:#fff;margin:0 0 1.4rem;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.hero__title em{color:var(--accent);font-style:normal;}

.hero__lead{
  font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.5;
  color:rgba(255,255,255,.86);max-width:44ch;margin:0 0 2.2rem;
  text-shadow:0 1px 16px rgba(0,0,0,.45);
}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.9rem;}
.hero .btn-ghost{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);
  padding:.85rem 1.6rem;border-radius:2px;
}
.hero .btn-ghost:hover{background:#fff;color:var(--dark);border-color:#fff;}
.hero .btn-primary{border-radius:2px;}

/* --- Bedienung des Bildwechslers --- */
.hero__nav{
  position:absolute;z-index:3;right:var(--gutter);bottom:7.5rem;
  display:flex;align-items:center;gap:.75rem;
}
.hero__arrow{
  width:42px;height:42px;border:1px solid rgba(255,255,255,.4);
  background:rgba(14,23,22,.35);backdrop-filter:blur(6px);
  color:#fff;cursor:pointer;border-radius:2px;
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.hero__arrow:hover{background:var(--accent);border-color:var(--accent);}
.hero__arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;}
.hero__dots{display:flex;gap:.45rem;}
.hero__dots .slider__dot{
  width:26px;height:3px;border:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,.38);transition:.3s;border-radius:0;
}
.hero__dots .slider__dot.active{background:var(--accent);width:44px;}

/* --- Farbband am Fuss des Hero ---
   Farbe auf einer ganzen Flaeche, nicht nur an einer Kante.
   Das ist der Punkt, an dem die alte Seite lauter war als die neue. */
.hero__band{position:relative;z-index:2;background:var(--accent);}
.hero__band-in{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2.6rem;
  padding-top:1.1rem;padding-bottom:1.1rem;
}
.hb{display:flex;align-items:baseline;gap:.55rem;color:#fff;}
.hb b{font-family:var(--ff-head);font-weight:700;font-size:1.5rem;line-height:1;}
.hb span{font-family:var(--ff-cond);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85);}
.hb--cta{margin-left:auto;}
.hb--cta a{
  font-family:var(--ff-cond);font-weight:600;font-size:.85rem;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  text-decoration:none;border-bottom:2px solid rgba(255,255,255,.5);padding-bottom:2px;
}
.hb--cta a:hover{border-color:#fff;}

@media(max-width:640px){
  .hero__nav{bottom:auto;top:5.2rem;right:var(--gutter);}
  .hero__inner{padding-top:7rem;}
  .hb--cta{margin-left:0;width:100%;}
}

/* ============================================================
   LOGO — praesenter
   Stand auf 46 px und mit falschem Seitenverhaeltnis im Markup
   (120x46 bei einer Datei im Verhaeltnis 4:3). Das verzerrte das
   Zeichen und reservierte beim Laden den falschen Platz.
   ============================================================ */
/* .brand img aus dem alten Block ist spezifischer als eine reine
   Klasse - deshalb hier ebenfalls ueber den Elternselektor, sonst
   greift die Hoehe nicht und das Zeichen laeuft in Originalgroesse. */
.brand .brand__img{height:58px;width:auto;display:block;}
@media(min-width:900px){.brand .brand__img{height:72px;}}
.site-footer .brand__img--foot{height:76px;width:auto;display:block;}
@media(min-width:900px){.site-footer .brand__img--foot{height:92px;}}


/* ============================================================
   MENUEKNOPF — sichtbar ueber jedem Bild
   Der Kopf liegt durchsichtig auf dem Hero. Der Knopf hatte weisse
   Balken auf 12 % Weiss - ueber einer hellen Stelle des Fotos war er
   schlicht nicht zu sehen. Jetzt eine dunkle Unterlage: die traegt
   die weissen Balken ueber hellen wie dunklen Motiven.
   ============================================================ */
.nav-toggle{background:rgba(14,23,22,.55);backdrop-filter:blur(8px);
            border:1px solid rgba(255,255,255,.22);}
.nav-toggle:hover{background:rgba(14,23,22,.75);}
.is-stuck .nav-toggle{background:var(--paper-deep);border-color:var(--paper-rule);}

/* ============================================================
   FARBBAND — lief auf dem Handy rechts aus dem Bild
   Die Zahlen standen in einer Zeile, die schmaler nicht werden
   konnte. Unter 700 px jetzt kleiner gesetzt und umbruchfaehig.
   ============================================================ */
@media(max-width:700px){
  .hero__band-in{gap:.7rem 1.5rem;}
  .hb{min-width:0;}
  .hb b{font-size:1.15rem;}
  .hb span{font-size:.7rem;letter-spacing:.1em;}
  .hb--cta{flex-basis:100%;margin-left:0;}
}


/* ============================================================
   INHABER IM HERO
   Freigestellt vor einem Ring, rechts. Die Vorlage stammt von der
   alten Seite - das Studio wird ueber die Person verkauft.
   Die Datei liegt nur in 405x577 vor; groesser gibt die Mediathek
   nichts her. Deshalb wird sie nicht hochskaliert, sondern in
   ihrer echten Groesse gesetzt.
   Unter 1100 px tritt sie zurueck: dort wuerde sie die Ueberschrift
   ueberdecken statt sie zu ergaenzen.
   ============================================================ */
.hero__figur{display:none;}

@media(min-width:1100px){
  .hero__figur{
    display:block;position:absolute;z-index:2;
    right:max(var(--gutter),calc((100% - var(--maxw))/2));
    bottom:0;margin:0;pointer-events:none;
  }
  .hero__figur img{
    position:relative;z-index:2;display:block;
    width:auto;height:min(66vh,560px);
    filter:drop-shadow(0 24px 40px rgba(0,0,0,.45));
  }
  /* Ring dahinter - offen gezeichnet, damit die Figur davor steht */
  .hero__ring{
    position:absolute;z-index:1;
    left:50%;top:44%;transform:translate(-50%,-50%);
    width:min(46vh,400px);aspect-ratio:1;border-radius:50%;
    border:5px solid var(--accent);
    box-shadow:0 0 60px -10px rgba(46,157,164,.55);
  }
  .hero__figur-cap{
    position:absolute;z-index:3;left:0;bottom:1.6rem;
    display:flex;flex-direction:column;line-height:1.15;
    background:rgba(14,23,22,.72);backdrop-filter:blur(8px);
    border-left:3px solid var(--accent);
    padding:.55rem .9rem;
  }
  .hero__figur-cap b{font-family:var(--ff-head);font-weight:600;font-size:.95rem;
                     text-transform:uppercase;letter-spacing:.04em;color:#fff;}
  .hero__figur-cap span{font-family:var(--ff-cond);font-size:.72rem;letter-spacing:.16em;
                        text-transform:uppercase;color:var(--accent);}
  /* Textspalte schmaler, damit sie nicht unter die Figur laeuft */
  .hero__inner{max-width:var(--maxw);}
  .hero__title{max-width:15ch;}
  .hero__lead{max-width:38ch;}
}

@media(prefers-reduced-motion:no-preference) and (min-width:1100px){
  .hero__figur img{animation:figurein 1s var(--ease) .2s both;}
  @keyframes figurein{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
}


/* ---- Nachjustierung Inhaber-Figur ---------------------------------
   1. Sie stand auf bottom:0 und wurde damit vom Farbband beschnitten -
      das Band gehoert zur Sektion, nicht darunter. Jetzt sitzt sie auf
      dem Band auf.
   2. Die Bedienknoepfe des Bildwechslers lagen auf ihr. Sie wandern
      nach links in die freie Flaeche.
   3. Die Ueberschrift brach bei 15 Zeichen zu frueh um.
   ------------------------------------------------------------------ */
@media(min-width:1100px){
  .hero__band{--band-h:3.6rem;}
  .hero__figur{bottom:3.6rem;}
  .hero__figur img{height:min(60vh,520px);}
  .hero__ring{width:min(40vh,360px);top:42%;}
  .hero__nav{right:auto;left:max(var(--gutter),calc((100% - var(--maxw))/2));bottom:2.2rem;}
  .hero__title{max-width:19ch;}
  .hero__lead{max-width:42ch;}
  .hero__inner{padding-bottom:5.5rem;}
  /* Beschriftung nach rechts unter die Figur, sonst steht sie im Bild */
  .hero__figur-cap{left:auto;right:0;bottom:.6rem;}
}


/* ---- Letzte Nachjustierung Hero ----------------------------------
   Bedienknoepfe lagen auf dem Farbband, die Namensschildchen wurde vom
   Band ueberdeckt: Band und Figur haben dieselbe Ebene, das Band steht
   spaeter im Markup und gewinnt damit. Statt die Ebenen zu tauschen -
   dann stuende der Beschnitt der Figur ueber dem Band - wandern beide
   Elemente nach oben.
   ------------------------------------------------------------------ */
@media(min-width:1100px){
  .hero__nav{bottom:5.6rem;}
  .hero__figur-cap{bottom:4.4rem;}
}


/* ============================================================
   PLATZHALTER FUER EIN FEHLENDES PORTRAET
   Ausdruecklich als Platzhalter erkennbar. Vorher stand hier ein
   erzeugtes Bild zweier Frauen unter den echten Namen der
   Kursleiterinnen - das ist eine Behauptung ueber reale Personen
   und kommt nicht auf die Seite. Bis ein echtes Foto vorliegt,
   steht hier ein Buchstabe mit klarem Hinweis.
   ============================================================ */
.trainer__ph--wartet{position:relative;}
.trainer__ph--wartet span{
  position:absolute;left:50%;bottom:14%;transform:translateX(-50%);
  font-family:var(--ff-cond);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  color:var(--ink-muted);
  border-top:1px solid currentColor;padding-top:.35rem;
}


/* ---- Inhaber-Figur groesser -------------------------------------
   Die Freistellung liegt jetzt in 823x1400 statt 405x577 vor. Damit
   traegt sie eine deutlich groessere Darstellung, ohne weich zu werden.
   ------------------------------------------------------------------ */
@media(min-width:1100px){
  .hero__figur img{height:min(74vh,660px);}
  .hero__ring{width:min(44vh,395px);top:40%;}
}


/* ============================================================
   BEGRUESSUNG MIT ZAEHLER
   Der Kunde wollte keinen Zaehler im Fuss, sondern eine Ansprache.
   Deshalb steht die Zahl nicht fuer sich, sondern in einem Satz -
   geduzt, wie im Studio.
   ============================================================ */
.gruss{
  position:relative;
  margin-bottom:var(--gutter);
  padding:clamp(1.6rem,3.5vw,2.6rem) clamp(1.4rem,3vw,2.6rem);
  background:var(--dark);color:var(--on-dark);
  border-left:5px solid var(--accent);
  overflow:hidden;
}
/* Angeschnittener Ring als Echo des Hero-Motivs, sehr zurueckhaltend */
.gruss::after{
  content:"";position:absolute;right:-90px;top:50%;
  transform:translateY(-50%);
  width:280px;height:280px;border-radius:50%;
  border:40px solid rgba(46,157,164,.14);
  pointer-events:none;
}
.gruss__hallo{
  font-family:var(--ff-cond);font-weight:600;
  font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .5rem;
}
.gruss__satz{
  font-family:var(--ff-head);font-weight:600;
  font-size:clamp(1.5rem,4.2vw,2.6rem);line-height:1.1;
  text-transform:uppercase;letter-spacing:-.01em;
  color:#fff;margin:0 0 1.1rem;
}
.gruss__satz b{
  color:var(--accent);font-weight:700;
  font-variant-numeric:tabular-nums;   /* Zahl springt beim Hochlaufen nicht */
}
.gruss__cta{
  display:inline-block;
  font-family:var(--ff-cond);font-weight:600;font-size:.85rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:#fff;text-decoration:none;
  border-bottom:2px solid var(--accent);padding-bottom:3px;
  transition:color .25s,border-color .25s;
}
.gruss__cta:hover{color:var(--accent);border-color:#fff;}

@media(min-width:900px){
  .gruss{display:flex;align-items:center;gap:2.5rem;flex-wrap:wrap;}
  .gruss__hallo{flex-basis:100%;margin-bottom:.2rem;}
  .gruss__satz{margin-bottom:0;flex:1 1 22ch;}
  .gruss__cta{margin-left:auto;}
}


/* ============================================================
   HERO — gestaltete Flaeche statt Schnappschuss
   Nachgestellt, ueberschreibt die vorherige Bildfassung.

   Grund: Das Fotomaterial hat hoechstens 2000 px. Vollflaechig
   gezogen wird es auf grossen Schirmen sichtbar grob. Eine
   gebaute Flaeche bleibt bei jeder Groesse scharf und kostet
   nichts an Ladezeit.
   ============================================================ */

.hero{
  position:relative;
  min-height:clamp(580px,92svh,940px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0;overflow:hidden;
  background:#0B1413;color:#fff;
}
.hero::before{content:none;}

.hero__grund{position:absolute;inset:0;pointer-events:none;overflow:hidden;}

/* Lichtkegel in der Hausfarbe — gibt Tiefe ohne Bild */
.hero__glanz{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 85% at 78% 12%, rgba(46,157,164,.42), transparent 58%),
    radial-gradient(90% 70% at 12% 95%, rgba(46,157,164,.16), transparent 62%),
    linear-gradient(160deg,#101D1C 0%,#0B1413 55%,#08100F 100%);
}
/* Diagonale Kante — nimmt dem Rechteck die Starre */
.hero__kante{
  position:absolute;right:-8%;top:-12%;width:62%;height:124%;
  background:linear-gradient(200deg,rgba(46,157,164,.14),rgba(46,157,164,0) 62%);
  transform:skewX(-11deg);
}
/* Sehr feines Raster — Struktur, die man eher spuert als sieht */
.hero__raster{
  position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 60% 40%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 60% 40%,#000 30%,transparent 78%);
}

.hero__inner{
  position:relative;z-index:2;
  padding-top:9.5rem;padding-bottom:3rem;
  max-width:var(--maxw);
}
.hero__title{
  font-family:var(--ff-head);font-weight:700;
  font-size:clamp(3rem,10vw,7.5rem);
  line-height:.9;letter-spacing:-.02em;text-transform:uppercase;
  color:#fff;margin:0 0 1.4rem;
}
.hero__title em{color:var(--accent);font-style:normal;}
.hero__lead{
  font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.5;
  color:rgba(255,255,255,.78);max-width:44ch;margin:0 0 2.2rem;
}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.9rem;}
.hero .btn-primary{border-radius:2px;}
.hero .btn-ghost{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);
  padding:.85rem 1.6rem;border-radius:2px;
}
.hero .btn-ghost:hover{background:#fff;color:var(--dark);border-color:#fff;}

/* --- Inhaber --- */
.hero__figur{display:none;}
@media(min-width:1000px){
  .hero__figur{
    display:block;position:absolute;z-index:2;
    right:max(var(--gutter),calc((100% - var(--maxw))/2));
    bottom:3.6rem;margin:0;pointer-events:none;
  }
  .hero__figur img{
    position:relative;z-index:2;display:block;width:auto;
    height:min(74vh,680px);
    filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
  }
  .hero__ring{
    position:absolute;z-index:1;left:50%;top:40%;
    transform:translate(-50%,-50%);
    width:min(46vh,420px);aspect-ratio:1;border-radius:50%;
    border:5px solid var(--accent);
    box-shadow:0 0 90px -6px rgba(46,157,164,.6);
  }
  .hero__figur-cap{
    position:absolute;z-index:3;right:0;bottom:.8rem;
    display:flex;flex-direction:column;line-height:1.15;
    background:rgba(8,16,15,.8);backdrop-filter:blur(8px);
    border-left:3px solid var(--accent);padding:.55rem .9rem;
  }
  .hero__figur-cap b{font-family:var(--ff-head);font-weight:600;font-size:.95rem;
                     text-transform:uppercase;letter-spacing:.04em;color:#fff;}
  .hero__figur-cap span{font-family:var(--ff-cond);font-size:.72rem;letter-spacing:.16em;
                        text-transform:uppercase;color:var(--accent);}
  .hero__title{max-width:17ch;}
  .hero__lead{max-width:40ch;}
  .hero__inner{padding-bottom:5.5rem;}
}

/* --- Farbband --- */
.hero__band{position:relative;z-index:2;background:var(--accent);}
.hero__band-in{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2.6rem;
               padding-top:1.1rem;padding-bottom:1.1rem;}
.hb{display:flex;align-items:baseline;gap:.55rem;color:#fff;}
.hb b{font-family:var(--ff-head);font-weight:700;font-size:1.5rem;line-height:1;}
.hb span{font-family:var(--ff-cond);font-size:.8rem;letter-spacing:.16em;
         text-transform:uppercase;color:rgba(255,255,255,.85);}
.hb--cta{margin-left:auto;}
.hb--cta a{font-family:var(--ff-cond);font-weight:600;font-size:.85rem;
           letter-spacing:.14em;text-transform:uppercase;color:#fff;
           text-decoration:none;border-bottom:2px solid rgba(255,255,255,.5);padding-bottom:2px;}
.hb--cta a:hover{border-color:#fff;}

@media(max-width:700px){
  .hero__inner{padding-top:7.5rem;}
  .hero__band-in{gap:.7rem 1.5rem;}
  .hb b{font-size:1.15rem;}
  .hb span{font-size:.7rem;letter-spacing:.1em;}
  .hb--cta{flex-basis:100%;margin-left:0;}
}


/* ============================================================
   BEGRUESSUNG — Neufassung
   Der dunkle Kasten wirkte wie ein Aushang. Jetzt eine Zeile
   Text ueber den Kennzahlen: dieselbe Praesenz durch Schriftgrad,
   ohne Rahmen. Die Zahl steht im Satz, nicht daneben.
   ============================================================ */
.gruss{
  background:none;border:none;padding:0;
  margin:0 0 clamp(1.6rem,3vw,2.4rem);
  font-family:var(--ff-head);font-weight:600;
  font-size:clamp(1.25rem,2.8vw,2.1rem);line-height:1.2;
  letter-spacing:-.01em;text-transform:none;
  color:var(--ink);max-width:34ch;
}
.gruss::after{content:none;}
.gruss b{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;}
.gruss #grussZeit{color:var(--ink-muted);}
@media(min-width:900px){
  .gruss{max-width:46ch;}
}


/* ---- Inhaber-Figur: Hoehe an die echte Datei binden ---------------
   Fuer Gruena liegt nur eine Freistellung mit 405x577 vor. Auf 680 px
   gezogen wird sie weich - genau der Effekt, der beim Hero-Foto
   bemaengelt wurde. Deshalb hier gedeckelt, bis eine hochaufloesende
   Fassung vorliegt (Glauchau hat mit 1165x1982 bereits eine).
   ------------------------------------------------------------------ */
@media(min-width:1000px){
  .hero__figur img{height:min(52vh,470px);}
  .hero__ring{width:min(34vh,310px);top:41%;}
}


/* ============================================================
   PREIS IN DER TARIFKARTE
   Fehlte bisher vollstaendig - die Karten nannten Leistungen,
   aber keinen Betrag.
   ============================================================ */
.tarif__preis{
  display:flex;align-items:baseline;gap:.3rem;flex-wrap:wrap;
  margin:.9rem 0 1.2rem;padding-bottom:1.1rem;
  border-bottom:1px solid var(--paper-rule);
}
.tarif__waehrung{font-family:var(--ff-head);font-weight:600;font-size:1.4rem;
                 color:var(--ink-mid);line-height:1;}
.tarif__zahl{font-family:var(--ff-head);font-weight:700;
             font-size:clamp(2.4rem,5vw,3.2rem);line-height:.95;
             letter-spacing:-.03em;color:var(--ink);
             font-variant-numeric:tabular-nums;}
.tarif__einheit{font-family:var(--ff-cond);font-size:.8rem;letter-spacing:.14em;
                text-transform:uppercase;color:var(--ink-muted);
                margin-left:.2rem;align-self:flex-end;padding-bottom:.35rem;}
.tarif--featured .tarif__zahl,
.tarif--featured .tarif__waehrung{color:var(--accent);}
.tarif--featured .tarif__preis{border-color:rgba(46,157,164,.35);}


/* ============================================================
   ZITAT DES INHABERS
   Ein grosses Zitat statt zweier Bewertungskarten. Ohne Sterne -
   Sterne ohne Quelle sind eine Behauptung.
   ============================================================ */
.zitat{margin:0;padding:0;border:none;max-width:60ch;}
.zitat__text{
  font-family:var(--ff-head);font-weight:500;
  font-size:clamp(1.35rem,3.4vw,2.4rem);line-height:1.24;
  letter-spacing:-.015em;color:var(--ink);margin:0 0 1.6rem;
  position:relative;padding-left:clamp(1.2rem,3vw,2.2rem);
}
.zitat__text::before{
  content:"";position:absolute;left:0;top:.25em;bottom:.1em;
  width:4px;background:var(--accent);
}
.zitat__wer{display:flex;align-items:center;gap:.85rem;
            padding-left:clamp(1.2rem,3vw,2.2rem);}
.zitat__av{
  width:46px;height:46px;flex:0 0 46px;border-radius:50%;
  background:var(--accent);color:#fff;
  font-family:var(--ff-head);font-weight:600;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;letter-spacing:.03em;
}
.zitat__name{display:block;font-family:var(--ff-head);font-weight:600;
             font-size:1rem;color:var(--ink);}
.zitat__rolle{display:block;font-family:var(--ff-cond);font-size:.78rem;
              letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);}
.zitat__hinweis{
  margin:clamp(2rem,4vw,3rem) 0 0;padding-top:1.4rem;
  border-top:1px solid var(--paper-rule);
  font-size:var(--t-small);color:var(--ink-mid);max-width:60ch;
}
.zitat__hinweis a{color:var(--accent);font-weight:600;text-decoration:none;
                  border-bottom:1px solid currentColor;}
.zitat__hinweis a:hover{color:var(--accent-deep);}


/* ============================================================
   AKTIONEN
   Auf der alten Seite standen die beiden Plakate nebeneinander in
   voellig verschiedener Groesse mit viel Weissraum dazwischen - zwei
   Fremdkoerper statt eines Blocks.

   Hier bekommen beide dasselbe Bildformat (4:3, Ausschnitt statt
   Verzerrung), denselben Rahmen und dieselbe Textspalte darunter.
   Damit lesen sie sich als ein Angebot, nicht als zwei Anzeigen.
   ============================================================ */
.aktionen-sektion{background:var(--paper-soft);}
.aktionen{display:grid;gap:clamp(1.2rem,2.5vw,2rem);grid-template-columns:1fr;}
@media(min-width:760px){.aktionen{grid-template-columns:1fr 1fr;}}

.aktion{
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--paper-rule);
  overflow:hidden;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.aktion:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-sm);}

.aktion__bild{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-deep);}
.aktion__bild img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;
                  transition:transform .5s var(--ease);}
.aktion:hover .aktion__bild img{transform:scale(1.03);}

.aktion__body{padding:clamp(1.1rem,2.4vw,1.6rem);display:flex;flex-direction:column;flex:1;}
.aktion__kicker{
  display:inline-block;align-self:flex-start;
  font-family:var(--ff-cond);font-weight:600;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--accent);padding:.3rem .6rem;margin-bottom:.8rem;
}
.aktion__titel{font-family:var(--ff-head);font-weight:700;
               font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.1;
               text-transform:uppercase;letter-spacing:-.01em;
               color:var(--ink);margin:0 0 .6rem;}
.aktion__text{font-size:var(--t-small);line-height:1.55;color:var(--ink-mid);margin:0 0 1.1rem;}
.aktion__cta{
  margin-top:auto;align-self:flex-start;
  font-family:var(--ff-cond);font-weight:600;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;
  border-bottom:2px solid currentColor;padding-bottom:2px;
}
.aktion__cta:hover{color:var(--accent-deep);}


/* ============================================================
   STANDORT-UMSCHALTER
   Zwei Studios, ein System. Der Knopf fuehrt nicht mehr auf die
   abgeschaltete Subdomain, sondern auf die Standortseite.
   ============================================================ */
.standort{
  display:inline-flex;align-items:stretch;
  border:1px solid rgba(255,255,255,.28);
  border-radius:2px;overflow:hidden;margin-right:1.2rem;
}
.standort__opt{
  font-family:var(--ff-cond);font-weight:600;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.72);text-decoration:none;
  padding:.42rem .8rem;line-height:1.4;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.standort__opt + .standort__opt{border-left:1px solid rgba(255,255,255,.22);}
.standort__opt:hover{background:rgba(255,255,255,.12);color:#fff;}
.standort__opt.is-aktiv{background:var(--accent);color:#fff;}

/* Bei gescrolltem, hellem Kopf umfaerben */
.is-stuck .standort{border-color:var(--paper-rule);}
.is-stuck .standort__opt{color:var(--ink-mid);}
.is-stuck .standort__opt + .standort__opt{border-left-color:var(--paper-rule);}
.is-stuck .standort__opt:hover{background:var(--paper-deep);color:var(--ink);}
.is-stuck .standort__opt.is-aktiv{background:var(--accent);color:#fff;}

/* Unter 900 px steckt er in der ausgeklappten Navigation */
.standort{display:none;}
@media(min-width:900px){.standort{display:inline-flex;}}
.standort--mobil{display:inline-flex;margin:0 0 2rem;}
@media(min-width:900px){.standort--mobil{display:none;}}


/* ============================================================
   KOPFLEISTE BEIM SCROLLEN
   Sie war bis zum Ende des Heros durchsichtig - die Ueberschrift
   lief dahinter durch und beides war unlesbar. Jetzt deckt sie ab
   30 Pixeln Scrollweg vollstaendig ab.
   ============================================================ */
.site-header.is-stuck{
  background:#fff;                     /* voll deckend, nicht .97 */
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 2px 18px rgba(21,32,31,.10);
}

/* ============================================================
   LOGO GROESSER
   Im Kopf stand es auf 58/72 px und ging neben der Navigation unter.
   ============================================================ */
.brand .brand__img{height:66px;}
@media(min-width:900px){.brand .brand__img{height:86px;}}
.site-header.is-stuck .brand .brand__img{height:58px;}
@media(min-width:900px){.site-header.is-stuck .brand .brand__img{height:68px;}}
.brand .brand__img{transition:height .3s var(--ease);}


/* ============================================================
   MOBIL — Ueberlauf an der Wurzel abfangen
   Bisher stand overflow-x:hidden nur auf body. Der umgebende Block
   wird davon nicht schmaler: Was breiter ist als der Schirm, weitet
   weiterhin das Layout, und body schneidet es nur ab. Fest
   positionierte Elemente wie die untere Leiste rutschen dadurch aus
   dem Bild - deshalb war "PROBETRAINING" angeschnitten.

   clip statt hidden: hidden erzeugt einen Scrollbereich, clip nicht -
   damit bleiben position:sticky und die Ankerspruenge heil.
   ============================================================ */
html{overflow-x:clip;max-width:100%;}
body{overflow-x:clip;max-width:100%;}

/* Nichts darf breiter werden als der Schirm.
   ACHTUNG: .wrap gehoert hier NICHT hinein - die Klasse traegt die
   Inhaltsbegrenzung auf 1200 px. max-width:100% hat sie ueberschrieben
   und die ganze Seite auf volle Fensterbreite gezogen. */
.section,.hero,.marquee,.sticky-bar,.site-header{max-width:100%;}
.wrap{max-width:var(--maxw);}
img,video,svg{max-width:100%;}

/* Die schraege Kante im Hero ragte bewusst hinaus - auf schmalen
   Schirmen bringt sie nichts und kostet nur Breite. */
@media(max-width:760px){ .hero__kante{display:none;} }

/* Untere Leiste: volle Breite, Text darf umbrechen statt abzureissen */
.sticky-bar{width:100%;box-sizing:border-box;}
.sticky-bar a{min-width:0;padding-left:.5rem;padding-right:.5rem;
              font-size:.78rem;letter-spacing:.04em;text-align:center;}
@media(max-width:380px){ .sticky-bar a{font-size:.72rem;} }

/* ============================================================
   MOBIL — Hero und Inhalte enger fassen
   ============================================================ */
@media(max-width:760px){
  .hero{min-height:auto;padding-bottom:0;}
  .hero__inner{padding-top:6.5rem;padding-bottom:2.5rem;}
  .hero__title{font-size:clamp(2.1rem,8.6vw,3.4rem);line-height:.98;max-width:100%;}
  .hero__lead{font-size:1rem;max-width:100%;}
  .hero__badge{font-size:.7rem;letter-spacing:.14em;padding:.4rem .7rem;}
  .hero__ctas{gap:.6rem;}
  .hero__ctas .btn{width:100%;justify-content:center;}
  .aktionen{gap:1rem;}
  .zitat__text{padding-left:1rem;}
  .zitat__wer{padding-left:1rem;}
  /* Platz fuer die untere Leiste, sonst liegt sie auf dem Fussbereich */
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px));}
}


/* ---- QR-Code-Abschnitt ---- */
.qr-block{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;grid-template-columns:1fr;}
@media(min-width:760px){.qr-block{grid-template-columns:1fr auto;}}
.qr-block__code{display:block;background:#fff;padding:1rem;border:1px solid var(--paper-rule);
                justify-self:start;line-height:0;transition:border-color .3s var(--ease);}
@media(min-width:760px){.qr-block__code{justify-self:end;}}
.qr-block__code:hover{border-color:var(--accent);}
.qr-block__code img{width:clamp(150px,26vw,210px);height:auto;display:block;}


/* ---- Inhaber-Figur wieder gross ----------------------------------
   Die Freistellung liegt jetzt in 1024x1536 vor statt 405x577 - die
   Deckelung auf 470 px war nur der schlechten Vorlage geschuldet.
   ------------------------------------------------------------------ */
@media(min-width:1000px){
  .hero__figur img{height:min(76vh,700px);}
  .hero__ring{width:min(46vh,420px);top:40%;}
}


/* ---- Ueberschrift raus aus der Figur -----------------------------
   Bei voller Groesse reichte die erste Zeile bis in Christophs
   Schulter. Sobald die Figur eingeblendet ist, bekommt die
   Ueberschrift eine eigene Obergrenze - sie soll neben ihm stehen,
   nicht hinter ihm.
   ------------------------------------------------------------------ */
@media(min-width:1000px){
  .hero__title{font-size:clamp(2.9rem,5.4vw,5.4rem);max-width:15ch;}
  .hero__lead{max-width:36ch;}
}
@media(min-width:1500px){
  .hero__title{font-size:5.8rem;}
}


/* ============================================================
   HERO-BILDER (KI-erzeugt)
   Liegen hinter der gestalteten Flaeche. Der Lichtkegel und das
   Raster bleiben darueber - dadurch fuegen sich auch unterschiedlich
   helle Motive in denselben Ton ein und die Schrift bleibt lesbar,
   ohne dass ich jedes Bild einzeln abdunkeln muss.
   ============================================================ */
.hero__bilder{position:absolute;inset:0;overflow:hidden;}
.hero__bild{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 45%;
  opacity:0;transition:opacity 1.4s var(--ease);
}
.hero__bild.is-aktiv{opacity:1;}

/* Lichtkegel deckt die Bilder ab, damit die Schrift traegt */
.hero__glanz{
  background:
    radial-gradient(120% 85% at 78% 12%, rgba(46,157,164,.34), transparent 58%),
    radial-gradient(90% 70% at 12% 95%, rgba(46,157,164,.14), transparent 62%),
    linear-gradient(105deg,rgba(8,16,15,.92) 0%,rgba(8,16,15,.72) 42%,rgba(8,16,15,.34) 72%,rgba(8,16,15,.55) 100%);
}

/* ============================================================
   KENNZEICHNUNG DER ERZEUGTEN BILDER
   Dezent, aber erkennbar - kleiner als der Fliesstext, aber mit
   ausreichendem Kontrast. Erscheint nur, wenn wirklich erzeugte
   Motive laufen.
   ============================================================ */
.hero__ki{
  position:absolute;z-index:3;left:max(var(--gutter),calc((100% - var(--maxw))/2));
  bottom:4.6rem;margin:0;
  font-family:var(--ff-cond);font-weight:500;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
@media(max-width:760px){
  .hero__ki{position:static;padding:0 var(--gutter) 1.1rem;font-size:.66rem;}
}


/* ============================================================
   MOBIL — Grundsanierung
   ============================================================ */

/* Der wahrscheinlichste Ueberlaufgrund: Flex- und Rasterkinder haben
   min-width:auto und weigern sich, unter ihre Inhaltsbreite zu
   schrumpfen. Ein einziger langer, gesperrter Schriftzug im Kopf
   weitet damit die ganze Seite ueber den Schirm hinaus - und alles,
   was rechts sitzt (Menueknopf, untere Leiste), rutscht aus dem Bild. */
*{min-width:0;}
html,body{overflow-x:hidden;max-width:100%;}

/* Der Kopf darf nie breiter werden als der Schirm */
.hdr-inner{flex-wrap:nowrap;min-width:0;}
.brand{min-width:0;flex:0 1 auto;overflow:hidden;}
.brand-name{min-width:0;overflow:hidden;}
.brand-main,.brand-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nav-toggle{flex:0 0 46px;}

/* Unter 520 px braucht der Schriftzug neben dem Logo keinen Platz -
   das Zeichen traegt allein. */
@media(max-width:520px){
  .brand-name{display:none;}
  .brand .brand__img{height:52px;}
}

/* ============================================================
   CHRISTOPH AUCH AUF DEM HANDY
   Er war unter 1000 px ausgeblendet. Auf dem Handy steht er jetzt
   unter dem Text, rechts angeschnitten - so wie er auf grossen
   Schirmen neben dem Text steht.
   ============================================================ */
@media(max-width:999px){
  .hero{min-height:auto;}
  .hero__inner{padding-top:6.5rem;padding-bottom:1rem;}
  .hero__figur{
    display:block;position:relative;margin:0;
    padding:0 var(--gutter);
    text-align:right;line-height:0;
    z-index:2;pointer-events:none;
  }
  .hero__figur img{
    display:inline-block;width:auto;
    height:clamp(210px,46vw,340px);
    margin-right:calc(var(--gutter) * -1);
    filter:drop-shadow(0 18px 30px rgba(0,0,0,.5));
  }
  .hero__ring{
    position:absolute;left:auto;right:8%;bottom:6%;top:auto;
    transform:none;
    width:clamp(150px,32vw,240px);aspect-ratio:1;border-radius:50%;
    border:4px solid var(--accent);z-index:-1;
    box-shadow:0 0 60px -10px rgba(46,157,164,.55);
  }
  .hero__figur-cap{
    position:absolute;left:var(--gutter);bottom:.6rem;right:auto;
    display:flex;flex-direction:column;line-height:1.15;text-align:left;
    background:rgba(8,16,15,.8);border-left:3px solid var(--accent);
    padding:.45rem .7rem;
  }
  .hero__figur-cap b{font-family:var(--ff-head);font-weight:600;font-size:.82rem;
                     text-transform:uppercase;color:#fff;}
  .hero__figur-cap span{font-family:var(--ff-cond);font-size:.66rem;letter-spacing:.14em;
                        text-transform:uppercase;color:var(--accent);}
  .hero__ki{position:static;padding:.6rem var(--gutter) 0;}
}

/* Lange Woerter duerfen umbrechen statt hinauszuragen */
h1,h2,h3,p,li,a{overflow-wrap:anywhere;}


/* ---- Zeilenabstand fuer Versalien mit Umlauten -------------------
   Bei line-height .9 stossen die Punkte auf dem AE in STAERKER an die
   Zeile darueber. Versalien brauchen mehr Durchschuss als
   Gemischtsatz, sobald Umlaute vorkommen.
   ------------------------------------------------------------------ */
.hero__title{line-height:1.02;}
@media(min-width:1000px){.hero__title{line-height:1.0;}}
h2{line-height:1.12;}
.aktion__titel{line-height:1.18;}
.hb b,.stat__num{line-height:1.05;}


/* ---- Ueberschrift endgueltig aus der Figur halten ----------------
   Die zweite Zeile "ALS DEINE BESTEN" ist die laengste und lief in
   Christophs Hantel. Ab 1000 px bekommt die Ueberschrift deshalb
   eine harte Spaltenbreite statt nur eine Zeichenzahl - Zeichen sind
   bei Versalien ein schlechtes Mass.
   ------------------------------------------------------------------ */
@media(min-width:1000px){
  .hero__inner{max-width:var(--maxw);}
  .hero__title{font-size:clamp(2.6rem,4.4vw,4.4rem);max-width:11.5ch;width:min(100%,620px);}
  .hero__lead{max-width:min(100%,480px);}
  .hero__ctas{max-width:min(100%,620px);}
}


/* ============================================================
   HERO-UEBERSCHRIFT — Groesse zurueck, mehr Durchschuss
   Das Verkleinern war der falsche Weg: Die Ueberschrift traegt den
   Bereich und muss gross sein. Gegen die Kollision mit der Figur
   hilft die Spaltenbreite, nicht der Schriftgrad.

   Oswald setzt die Umlautpunkte sehr hoch. Unter 1,12 stossen sie
   bei Versalien an die Zeile darueber - deshalb 1,14 statt 0,9.
   ============================================================ */
.hero__title{
  font-size:clamp(2.6rem,9vw,6.8rem);
  line-height:1.14;
}
@media(min-width:1000px){
  .hero__title{
    font-size:clamp(3.4rem,6.4vw,6.8rem);
    line-height:1.12;
    max-width:none;
    width:min(100%,660px);
  }
  .hero__lead{max-width:min(100%,500px);font-size:1.2rem;}
}
@media(min-width:1500px){
  .hero__title{font-size:6.8rem;width:min(100%,760px);}
}


/* ---- Cookie-Knopf im Fussbereich ---------------------------------
   Stand als <button class="ftr-links"> mit style="font:inherit" da -
   damit erbte er die Fliesstextgroesse und stand deutlich groesser
   neben "Impressum" und "Datenschutz". Jetzt dieselbe Auszeichnung
   wie die Nachbarn.
   ------------------------------------------------------------------ */
.ftr-cookie{
  background:none;border:none;padding:0;cursor:pointer;color:inherit;
  font-family:var(--ff-cond);letter-spacing:.06em;text-transform:uppercase;
  font-size:.85rem;line-height:inherit;
}
.ftr-cookie:hover{color:var(--accent);}


/* ============================================================
   KARTE MIT KLICK-ZUM-LADEN
   ============================================================ */
.anf-map--karte{position:relative;overflow:hidden;min-height:clamp(300px,42vw,420px);
                display:flex;align-items:center;justify-content:center;}
.anf-map__vorschau{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(1.4rem,3vw,2.2rem);gap:.35rem;max-width:44ch;
}
.anf-map__vorschau svg{width:44px;height:44px;fill:var(--accent);margin-bottom:.4rem;}
.anf-map__laden{margin-top:1.1rem;border-radius:2px;}
.anf-map__hinweis{
  margin:.9rem 0 0;font-size:.78rem;line-height:1.5;
  color:rgba(234,242,241,.6);max-width:34ch;
}
.anf-map__extern{
  margin-top:.7rem;font-family:var(--ff-cond);font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px;
}
.anf-map__extern:hover{color:#fff;border-color:#fff;}

/* Nach dem Klick fuellt der Rahmen die Flaeche */
.anf-map--karte.is-geladen .anf-map__vorschau{display:none;}
.anf-map--karte iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}


/* ============================================================
   HERO — Endfassung
   Text breit wie am Anfang. Christoph liegt darueber, aber exakt
   auf derselben Hoehe: Er beginnt oben und endet unten dort, wo
   der Textblock beginnt und endet - keine freie Platzierung mehr.
   ============================================================ */
@media(min-width:1000px){
  .hero__inner{position:relative;display:block;max-width:var(--maxw);}

  /* Text darf wieder ueber die volle Spalte laufen */
  .hero__text{position:relative;z-index:2;max-width:none;}
  .hero__title{
    font-size:clamp(3.6rem,7vw,7.4rem);
    line-height:1.1;
    max-width:none;width:auto;
  }
  .hero__lead{max-width:44ch;}

  /* Figur: oben und unten an den Textblock gebunden */
  .hero__figur{
    display:block;position:absolute;z-index:3;
    right:0;top:0;bottom:0;left:auto;
    width:min(46%,540px);margin:0;pointer-events:none;
  }
  .hero__figur img{
    position:absolute;right:0;bottom:0;
    height:100%;width:100%;
    object-fit:contain;object-position:right bottom;
    filter:drop-shadow(0 26px 44px rgba(0,0,0,.5));
    will-change:transform;
  }
  .hero__ring{
    position:absolute;z-index:-1;
    left:auto;right:6%;top:50%;transform:translateY(-50%);
    width:min(38vh,360px);aspect-ratio:1;border-radius:50%;
    border:5px solid var(--accent);
    box-shadow:0 0 90px -6px rgba(46,157,164,.55);
  }
  .hero__figur-cap{
    position:absolute;z-index:4;right:0;bottom:0;left:auto;
    display:flex;flex-direction:column;line-height:1.15;
    background:rgba(8,16,15,.82);backdrop-filter:blur(8px);
    border-left:3px solid var(--accent);padding:.55rem .9rem;
  }
}
@media(min-width:1400px){
  .hero__title{font-size:7.4rem;}
  .hero__figur{width:min(44%,600px);}
}


/* ============================================================
   HERO — Text und Figur teilen sich die Breite verlaesslich
   Christoph darf ueber dem Hintergrund liegen, aber nicht ueber der
   Schrift. Deshalb hat die Ueberschrift eine feste Spalte, die vor
   ihm endet - und der Schriftgrad ist so gewaehlt, dass die laengste
   Zeile ("MACH DICH STAERKER") darin auf eine Zeile passt. Genau das
   war vorher das Problem: entweder zu breit und verdeckt, oder zu
   klein und in Woerter zerfallen.
   ============================================================ */
@media(min-width:1000px){
  .hero__title{
    width:62%;max-width:none;
    font-size:clamp(2.9rem,5.3vw,5.5rem);
    line-height:1.1;
  }
  .hero__lead{width:52%;max-width:none;}
  .hero__figur{width:min(42%,520px);right:0;}
  .hero__ring{right:4%;width:min(34vh,330px);}
}
@media(min-width:1400px){
  .hero__title{font-size:5.8rem;width:60%;}
  .hero__figur{width:min(40%,560px);}
}


/* ---- Schriftgrad an die laengste Zeile gebunden -------------------
   Die laengste Zeile ist "MACH DICH STAERKER" mit 17 Zeichen. Bei
   Oswald Bold braucht die rund 8,8 Geviert - der Grad muss also so
   gewaehlt sein, dass 8,8 em in die Spalte passen. Sonst bricht die
   Zeile trotz festem <br> nochmal um und die Woerter stapeln sich.
   Zusaetzlich text-wrap:nowrap, damit gar nichts mehr rutscht.
   ------------------------------------------------------------------ */
@media(min-width:1000px){
  .hero__title{
    width:64%;
    font-size:min(5.2rem, 7.2vw);
    white-space:nowrap;
  }
}
@media(min-width:1500px){
  .hero__title{font-size:5.6rem;width:62%;}
}
@media(min-width:1800px){
  .hero__title{font-size:6.2rem;}
}
/* Auf schmalen Schirmen darf und muss umgebrochen werden */
@media(max-width:999px){
  .hero__title{white-space:normal;}
}


/* ---- Korrektur: kein nowrap -------------------------------------
   white-space:nowrap liess die laengste Zeile ueber ihre Spalte
   hinauslaufen. Dadurch wurde der ganze Textblock breiter und
   rutschte nach rechts. Die festen <br> genuegen - der Grad muss
   nur so sitzen, dass die laengste Zeile in die Spalte passt.
   ------------------------------------------------------------------ */
@media(min-width:1000px){
  .hero__title{white-space:normal;font-size:min(5.1rem,6.9vw);width:64%;}
}
@media(min-width:1500px){.hero__title{font-size:5.2rem;width:64%;}}
@media(min-width:1800px){.hero__title{font-size:5.4rem;width:64%;}}


/* ============================================================
   HERO — Endkorrektur mit Bildern
   1. Die erzeugten Motive sind hell. Der Lichtkegel muss links
      staerker abdecken, sonst kaempft die Schrift gegen den
      Hintergrund.
   2. Christoph hing an der Innenflaeche und endete deshalb 5,5 rem
      ueber dem Farbband. Er haengt jetzt am Bereich selbst und steht
      auf dem Band auf.
   ============================================================ */
.hero__glanz{
  background:
    radial-gradient(110% 80% at 82% 18%, rgba(46,157,164,.26), transparent 60%),
    linear-gradient(100deg,
      rgba(6,13,12,.95) 0%,
      rgba(6,13,12,.90) 30%,
      rgba(6,13,12,.62) 52%,
      rgba(6,13,12,.30) 74%,
      rgba(6,13,12,.55) 100%),
    linear-gradient(to top, rgba(6,13,12,.75) 0%, transparent 38%);
}

@media(min-width:1000px){
  /* Figur haengt am Bereich, nicht an der Innenflaeche */
  .hero__figur{
    position:absolute;z-index:3;
    right:max(var(--gutter),calc((100% - var(--maxw))/2));
    left:auto;top:4.5rem;bottom:0;
    width:min(40%,520px);margin:0;pointer-events:none;
  }
  .hero__figur img{
    position:absolute;right:0;bottom:0;
    height:100%;width:100%;
    object-fit:contain;object-position:right bottom;
    filter:drop-shadow(0 26px 44px rgba(0,0,0,.6));
    will-change:transform;
  }
  .hero__ring{
    position:absolute;z-index:-1;
    left:auto;right:8%;top:46%;transform:translateY(-50%);
    width:min(36vh,340px);aspect-ratio:1;border-radius:50%;
    border:5px solid var(--accent);
    box-shadow:0 0 90px -6px rgba(46,157,164,.6);
  }
  .hero__figur-cap{position:absolute;z-index:4;right:0;bottom:4.4rem;left:auto;}
}


/* ---- Kennzeichnung: dezent, aber sicher lesbar -------------------
   Dezent heisst kleiner und zurueckhaltender - nicht blasser. Bei
   .72 Weiss haette ein helles Motiv darunter den Kontrast gedrueckt.
   Deshalb .86 plus eine dunkle Unterlage, die unabhaengig vom Bild
   traegt. Auf dem Handy steht sie unter dem Bereich statt darauf.
   ------------------------------------------------------------------ */
.hero__ki{
  color:rgba(255,255,255,.88);
  font-size:.72rem;letter-spacing:.16em;font-weight:500;
  background:rgba(6,13,12,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:.3rem .6rem;border-radius:2px;
  display:inline-block;
}
@media(max-width:760px){
  .hero__ki{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
            padding:.6rem var(--gutter) 0;color:rgba(255,255,255,.8);}
}


/* ============================================================
   HERO — Figur an den Bildrand statt an die Textspalte
   Sie hing am rechten Rand des 1200er Inhaltsbereichs und stand
   damit unmittelbar neben der Ueberschrift. Rechts davon bleibt auf
   breiten Schirmen viel Platz leer.

   Jetzt sitzt sie am Rand des Fensters. Auf 1900 px sind das rund
   300 px mehr Abstand zum Text - die Ueberschrift bleibt gross und
   trotzdem frei.
   ============================================================ */
@media(min-width:1000px){
  .hero__figur{
    right:var(--gutter);left:auto;
    width:min(46%,600px);
    top:3.5rem;bottom:0;
  }
  .hero__ring{right:14%;width:min(34vh,330px);top:44%;}
  .hero__figur-cap{right:2%;bottom:4.4rem;}
  .hero__title{width:56%;}
  .hero__lead{width:46%;}
}
@media(min-width:1600px){
  .hero__figur{width:min(42%,680px);}
  .hero__title{width:52%;}
}


/* ---- Einblenden ohne transform ----------------------------------
   Die Einblend-Animation nutzte transform und blieb wegen
   fill-mode:both dauerhaft aktiv. Eine laufende CSS-Animation hat
   fuer die animierte Eigenschaft Vorrang vor einem Inline-Stil -
   damit war der Scroll-Versatz aus dem Skript wirkungslos.

   Jetzt blendet nur die Deckkraft ein. transform bleibt frei fuer
   die Bewegung beim Scrollen.
   ------------------------------------------------------------------ */
@media(prefers-reduced-motion:no-preference) and (min-width:1000px){
  .hero__figur img{animation:figur-ein .9s var(--ease) .15s both;}
}
@keyframes figur-ein{from{opacity:0;}to{opacity:1;}}
@keyframes figurein{from{opacity:0;}to{opacity:1;}}


/* ============================================================
   TEAMKARTEN — kleines rundes Bild statt grosser Buchstabenflaeche
   Die quadratische Flaeche nahm zwei Drittel der Karte ein und war
   dabei leer. Jetzt sitzt oben ein rundes Bild in Portraetgroesse,
   der Text bekommt den Platz.

   Sobald echte Fotos vorliegen, ersetzen sie den Buchstaben ohne
   weitere Aenderung - die Rundung und der Ausschnitt gelten fuer
   beides.
   ============================================================ */
.trainer{display:flex;flex-direction:column;}
.trainer__img{
  aspect-ratio:auto;background:none;position:relative;
  width:92px;height:92px;flex:0 0 92px;
  margin:1.5rem 1.3rem 0;border-radius:50%;overflow:hidden;
  border:3px solid var(--accent-light);
}
.trainer__img img{width:100%;height:100%;object-fit:cover;display:block;}
.trainer__ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-head);font-weight:600;font-size:1.9rem;
  color:var(--accent);background:var(--accent-light);letter-spacing:.02em;
}
/* Hinweis auf das fehlende Foto steht jetzt unter dem Kreis */
.trainer__ph--wartet span{
  position:absolute;left:50%;top:calc(100% + .45rem);bottom:auto;
  transform:translateX(-50%);
  font-family:var(--ff-cond);font-size:.62rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  color:var(--ink-muted);border:none;padding:0;
}
.trainer__body{padding:1.1rem 1.3rem 1.4rem;}
.trainer__body h3{margin-bottom:.15rem;font-size:1.15rem;}

@media(min-width:760px){
  .trainer-grid{grid-template-columns:repeat(3,1fr);}
}
@media(min-width:1000px){
  .trainer__img{width:104px;height:104px;flex-basis:104px;}
  .trainer__ph{font-size:2.1rem;}
}


/* ---- Aktionsbild als Knopf + Lupe --------------------------------- */
.aktion__bild{border:0;padding:0;background:var(--paper-deep);cursor:zoom-in;
              width:100%;display:block;position:relative;}
.aktion__lupe{
  position:absolute;right:.7rem;bottom:.7rem;
  width:38px;height:38px;border-radius:50%;
  background:rgba(6,13,12,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(6px);transition:.25s var(--ease);
}
.aktion__lupe svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;}
.aktion:hover .aktion__lupe,.aktion__bild:focus-visible .aktion__lupe{opacity:1;transform:none;}

/* ---- Lightbox ---------------------------------------------------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(6,13,12,.93);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);}
.lb[hidden]{display:none;}
body.lb-offen{overflow:hidden;}
.lb__inhalt{margin:0;max-width:min(96vw,1100px);max-height:92vh;display:flex;
            flex-direction:column;align-items:center;gap:.9rem;}
.lb__inhalt img{max-width:100%;max-height:82vh;width:auto;height:auto;display:block;
                box-shadow:0 30px 70px -20px rgba(0,0,0,.7);}
.lb__inhalt figcaption{font-family:var(--ff-cond);font-size:.85rem;letter-spacing:.14em;
                       text-transform:uppercase;color:rgba(255,255,255,.8);text-align:center;}
.lb__zu{position:absolute;top:clamp(.7rem,2vw,1.4rem);right:clamp(.7rem,2vw,1.4rem);
        width:48px;height:48px;border:1px solid rgba(255,255,255,.3);
        background:rgba(255,255,255,.08);color:#fff;font-size:1.8rem;line-height:1;
        cursor:pointer;border-radius:2px;}
.lb__zu:hover{background:var(--accent);border-color:var(--accent);}


/* ---- Live-Kachel in der Zahlenreihe -------------------------------
   Der Zaehler steht nicht mehr als eigener Kasten daneben, sondern
   in der Reihe der uebrigen Zahlen. Damit hat er Praesenz, ohne ein
   Fremdkoerper zu sein. Der Punkt zeigt an, dass die Zahl lebt.
   ------------------------------------------------------------------ */
.stat--live{position:relative;}
.stat--live .stat__num{color:var(--accent);font-variant-numeric:tabular-nums;}
.stat--live::after{
  content:"";position:absolute;top:.9rem;right:.9rem;
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 rgba(46,157,164,.55);
  animation:puls 2.4s var(--ease) infinite;
}
@keyframes puls{
  0%{box-shadow:0 0 0 0 rgba(46,157,164,.5);}
  70%{box-shadow:0 0 0 9px rgba(46,157,164,0);}
  100%{box-shadow:0 0 0 0 rgba(46,157,164,0);}
}
@media(prefers-reduced-motion:reduce){.stat--live::after{animation:none;}}
@media(min-width:900px){.stats{grid-template-columns:repeat(5,1fr);}}


/* ============================================================
   SCHWEBENDE KNOEPFE — gestapelt statt verstreut
   Der Cookie-Knopf sass unten links, das Barrierefreiheits-Werkzeug
   unten rechts. Zwei Knoepfe an zwei Ecken lesen sich als Zufall.

   Jetzt beide rechts uebereinander, gleiche Groesse, gleiche Form.
   Die Hoehe rechnet sich aus derselben Formel wie beim
   Barrierefreiheits-Knopf, damit sie ueber der mobilen Fussleiste
   bleiben.
   ============================================================ */
.cookie-fab{
  left:auto;
  right:1.1rem;
  bottom:calc(var(--sticky-h,60px) + var(--safe-b,0px) + 0.9rem + 3.2rem + 0.6rem);
  width:3.2rem;height:3.2rem;
  z-index:1499;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--paper-rule);
  box-shadow:0 6px 20px -8px rgba(21,32,31,.45);
  transition:transform .2s var(--ease),background .2s var(--ease);
}
.cookie-fab:hover{transform:scale(1.09);background:var(--paper-deep);}
.cookie-fab svg{width:20px;height:20px;}

/* Ab 900 px gibt es keine mobile Fussleiste mehr */
@media(min-width:900px){
  .cookie-fab{bottom:calc(1.1rem + 3.2rem + 0.6rem);}
}


/* ============================================================
   HERO-UEBERSCHRIFT — Wortlaut der alten Seite
   "Entfalte Dein volles Potenzial:" steht als ruhige Vorzeile,
   darunter die drei Begriffe gross und in der Hausfarbe. So war es
   auf der alten Seite aufgebaut, und es loest zugleich das
   Breitenproblem: Das laengste Wort hat elf Zeichen statt
   einunddreissig.
   ============================================================ */
.hero__vor{
  display:block;
  font-family:var(--ff-head);font-weight:500;
  font-size:clamp(1.1rem,2.4vw,1.75rem);
  line-height:1.25;letter-spacing:.01em;
  text-transform:uppercase;color:rgba(255,255,255,.9);
  margin-bottom:.5rem;
}
.hero__title em{
  display:block;font-style:normal;color:var(--accent);
  font-size:clamp(2.8rem,10vw,7.2rem);line-height:1.06;
  letter-spacing:-.02em;
}
@media(min-width:1000px){
  .hero__title{width:52%;font-size:inherit;}
  .hero__title em{font-size:min(6.6rem,9vw);}
  .hero__lead{width:44%;}
}
@media(min-width:1600px){
  .hero__title{width:48%;}
  .hero__title em{font-size:7rem;}
}


/* ---- Kein Bruch mitten im Wort ------------------------------------
   overflow-wrap:anywhere war gegen den mobilen Ueberlauf gedacht,
   trennt aber auch "GESUNDHEIT" zu "GESUNDHE / IT". Ueberschriften
   brauchen das nicht - dort steht kein Fliesstext und keine lange
   Adresse. Fuer Fliesstext bleibt es erhalten.
   ------------------------------------------------------------------ */
h1,h2,h3,.hero__title,.hero__title em,.hero__vor{overflow-wrap:normal;word-break:normal;hyphens:none;}
p,li{overflow-wrap:break-word;}

/* Spalte etwas breiter und Grad leicht zurueck, damit das laengste
   Wort ("GESUNDHEIT.") sicher in eine Zeile passt. */
@media(min-width:1000px){
  .hero__title{width:56%;}
  .hero__title em{font-size:min(5.8rem,8vw);}
}
@media(min-width:1600px){
  .hero__title{width:52%;}
  .hero__title em{font-size:6.4rem;}
}


/* ============================================================
   WECHSELNDES WORT
   Alle Begriffe liegen uebereinander. Der Kasten haelt die Breite
   des laengsten - sonst wackelt die Zeile bei jedem Wechsel.
   ============================================================ */
.hero__wechsel{
  display:block;position:relative;font-style:normal;color:var(--accent);
  font-size:clamp(2.8rem,10vw,6.4rem);line-height:1.08;letter-spacing:-.02em;
  min-height:1.08em;
}
.hero__wort{
  display:block;position:absolute;left:0;top:0;white-space:nowrap;
  opacity:0;transform:translateY(.28em);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  pointer-events:none;
}
.hero__wort.is-aktiv{opacity:1;transform:none;}
/* Das laengste Wort steht unsichtbar im Fluss und haelt die Breite */
.hero__wechsel::after{
  content:"Gesundheit.";display:block;visibility:hidden;height:0;
  white-space:nowrap;overflow:hidden;
}
.hero__nach{
  display:block;
  font-family:var(--ff-head);font-weight:500;
  font-size:clamp(1.1rem,2.4vw,1.75rem);
  text-transform:uppercase;color:rgba(255,255,255,.9);
  margin-top:.45rem;letter-spacing:.01em;
}
@media(prefers-reduced-motion:reduce){
  .hero__wort{transition:none;}
}
@media(min-width:1000px){
  .hero__wechsel{font-size:min(5.8rem,8vw);}
  .hero__title{width:56%;}
}
@media(min-width:1600px){
  .hero__wechsel{font-size:6.4rem;}
  .hero__title{width:52%;}
}


/* ---- Wechsel entzerren -------------------------------------------
   Vorher blendeten beide Woerter gleich lang - dadurch lagen sie in
   der Mitte des Uebergangs uebereinander und es sah nach Fehler aus.
   Jetzt geht das alte schnell weg, das neue kommt mit Verzoegerung.
   ------------------------------------------------------------------ */
.hero__wort{
  transition:opacity .22s var(--ease),transform .22s var(--ease);
  transition-delay:0s;
}
.hero__wort.is-aktiv{
  transition:opacity .42s var(--ease),transform .42s var(--ease);
  transition-delay:.24s;
}


/* ============================================================
   HERO-UEBERSCHRIFT — ein Satz, ein Grad
   Vorher stand die Vorzeile klein, das Wort riesig, die Nachzeile
   klein. Auf der alten Seite ist alles gleich gross und nur das
   mittlere Wort farbig. Genau so jetzt.
   ============================================================ */
.hero__vor,.hero__nach{all:unset;}          /* alte Sonderformate abschalten */

.hero__title{
  font-family:var(--ff-head);font-weight:700;
  text-transform:uppercase;letter-spacing:-.015em;
  color:#fff;
  font-size:clamp(2.2rem,7.4vw,4.8rem);
  line-height:1.14;
}
/* Der Wechselkasten steht im Textfluss und haelt die Breite des
   laengsten Wortes - sonst rutscht der Satz bei jedem Wechsel. */
.hero__wechsel{
  display:inline-block;position:relative;
  color:var(--accent);vertical-align:baseline;
  font-size:inherit;line-height:inherit;font-style:normal;
}
.hero__wechsel::after{
  content:"Gesundheit";visibility:hidden;display:inline-block;
}
.hero__wort{
  position:absolute;left:0;top:0;white-space:nowrap;
  opacity:0;transform:translateY(.16em);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.hero__wort.is-aktiv{
  opacity:1;transform:none;
  transition:opacity .42s var(--ease),transform .42s var(--ease);
  transition-delay:.24s;
}
@media(prefers-reduced-motion:reduce){.hero__wort{transition:none;}}

@media(min-width:1000px){
  .hero__title{width:56%;font-size:min(4.4rem,6vw);}
  .hero__lead{width:44%;}
}
@media(min-width:1600px){
  .hero__title{width:52%;font-size:4.8rem;}
}


/* ---- Schwebende Knoepfe: gemessener Abstand ----------------------
   Mein frueherer Sonderfall ab 900 px hat den Versatz wieder
   aufgehoben - beide Knoepfe lagen danach 4 Pixel voneinander
   entfernt, also praktisch uebereinander.

   Jetzt eine einzige Formel fuer alle Breiten, abgeleitet aus der
   Position des Barrierefreiheits-Knopfes plus dessen volle Hoehe
   plus Abstand. Kein Sonderfall mehr.
   ------------------------------------------------------------------ */
.cookie-fab{
  bottom:calc(var(--sticky-h,60px) + var(--safe-b,0px) + 0.9rem + 3.2rem + 0.75rem) !important;
  right:1.1rem !important;
  left:auto !important;
}


/* ============================================================
   „BELIEBT" ALS ECKBAND
   Vorher sass es als Pille oben rechts und lag auf der Ueberschrift.
   Jetzt laeuft es diagonal ueber die Ecke - dort ist Platz, den
   sonst niemand braucht, und der Text bleibt frei.

   Die Karte bekommt overflow:hidden, damit die Bandenden sauber
   an der Kante abgeschnitten werden statt herauszuragen.
   ============================================================ */
.tarif{position:relative;overflow:hidden;}

.tarif__tag{
  position:absolute;
  top:1.55rem;right:-3.4rem;          /* rechts hinaus, wird beschnitten */
  width:12rem;
  transform:rotate(45deg);
  transform-origin:center;
  background:var(--accent);color:#fff;
  font-family:var(--ff-cond);font-weight:700;
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;line-height:1;
  padding:.5rem 0;
  border-radius:0;
  box-shadow:0 3px 10px -3px rgba(21,32,31,.45);
  pointer-events:none;
  z-index:3;
}

/* Auf der hervorgehobenen dunklen Karte bleibt das Band hell genug */
.tarif--featured .tarif__tag{background:#fff;color:var(--accent-deep);}

/* Damit die Ueberschrift nicht unter das Band laeuft */
.tarif h3{padding-right:2.2rem;}

@media(max-width:520px){
  .tarif__tag{font-size:.74rem;top:1.35rem;right:-3.6rem;width:11rem;}
}


/* ---- Hero: Abstand nach oben sichern -----------------------------
   Zwei spaetere Regeln haben .hero__inner neu gesetzt und dabei den
   oberen Innenabstand verloren - die Ueberschrift lief dadurch hinter
   die Kopfleiste. Hier steht er zuletzt und gilt damit.
   ------------------------------------------------------------------ */
.hero__inner{padding-top:clamp(7rem,14vw,10.5rem);padding-bottom:3rem;}
@media(min-width:1000px){
  .hero__inner{padding-top:11rem;padding-bottom:5.5rem;}
}
@media(max-width:760px){
  .hero__inner{padding-top:7.5rem;padding-bottom:2rem;}
}


/* ============================================================
   Mobiles Menü: Standort-Umschalter sichtbar halten
   ------------------------------------------------------------
   Das Overlay zentrierte den Inhalt senkrecht (justify-content:
   center). War das Menü höher als der Schirm, wurde das oberste
   Element — der Grüna/Glauchau-Umschalter — nach oben aus dem
   Bild geschnitten und war nicht erreichbar. Jetzt oben
   ausgerichtet und scrollbar, damit der Umschalter immer steht.

   Außerdem: Die große Menüschrift (.nav-overlay a) hatte die
   kleinen Umschalt-Knöpfe aufgebläht. Hier auf ihre eigene,
   kleine Größe zurückgeholt.
   ============================================================ */
.nav-overlay{justify-content:flex-start;overflow-y:auto;}
.nav-overlay .standort--mobil{align-self:flex-start;margin:0 0 1.8rem;}
.nav-overlay .standort__opt{
  font-size:.85rem;letter-spacing:.12em;padding:.5rem 1.1rem;
  color:rgba(255,255,255,.82);
}
.nav-overlay .standort__opt.is-aktiv{background:var(--accent);color:#fff;}
.nav-overlay .standort__opt:hover{padding-left:1.1rem;color:#fff;}