/* Schrift liegt auf der eigenen Seite statt bei Fontshare (30.09.2026):
   Beim Laden von fremden Servern ging die IP-Adresse jedes Besuchers an
   Fontshare. Switzer steht unter der ITF Free Font License. */
@font-face{font-family:'Switzer';src:url('schrift/switzer-variable.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --grund:#F0F0F0; --text:#000000; --leise:#5C5C5C; --linie:#CFCFCF;
  --warm:#FEF9EF;
  --dunkel:#070E0E; --auf-dunkel:#FEF9EF; --leise-dunkel:#8F8F8A; --linie-dunkel:#383D3B; --rot:#CD0046;
  --sans:'Switzer',-apple-system,system-ui,sans-serif;
  /* Gewichte als Token — Schriftwechsel spaeter = nur diese Zeilen */
  --w-body:375; --w-mittel:450; --w-head:530;
  --w-leicht:340; --w-stark:560;
  /* Rundungen: gemessen an usecadence.com */
  --luft:1.75rem;   /* halber Abstand zwischen zwei Bloecken */
  --r:12px; --r-klein:8px;
  /* Labels: Switzer in Versalien und gesperrt. Cutive Mono ist raus (Max, 21.09.2026) */
  --label:var(--sans);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{background:var(--grund);color:var(--text);font-family:var(--sans);
     font-size:1.0625rem;line-height:1.6;font-weight:var(--w-body);-webkit-font-smoothing:antialiased}

/* ---------- Navigation: schwebende Pille, Cadence-Prinzip ---------- */
.nav{position:fixed;top:31px;left:50%;transform:translateX(-50%);
     width:calc(100% - 62px);max-width:1320px;z-index:60;
     background:#F5F5F5;
     border-radius:var(--r);padding:0 1.9rem;min-height:70px;
     display:flex;align-items:center;gap:2rem;
     box-shadow:0 2px 24px rgba(0,0,0,.12)}
.nav a{color:var(--text);text-decoration:none;transition:.15s}
/* Die Menuepunkte stehen links und rechts vom Logo, damit die Leiste nicht
   links schwer wird. Die beiden Aktionen bleiben rechts aussen. */
.nav .links a,.nav .rechts a{font-size:.92rem;font-weight:var(--w-leicht);
                             letter-spacing:.005em;white-space:nowrap}
.nav .rechts .aktion,.nav .rechts .buchen{font-size:.94rem;font-weight:var(--w-stark)}
@media(hover:hover){.nav a:hover{color:var(--rot)}}
.nav a.hier{color:var(--rot)}
.nav .links{display:flex;align-items:center;gap:1.55rem;flex:1 1 0;min-width:0}
.nav .logo{height:23px;display:block}
.nav .mitte{flex:0 0 auto;padding:0 1.5rem}
.nav .rechts{flex:1 1 0;display:flex;align-items:center;justify-content:flex-end;gap:1.55rem;min-width:0}
.nav .trenner{width:1px;height:17px;background:var(--linie);margin:0 .15rem;flex:0 0 auto}
.nav .buchen{font-weight:var(--w-stark)}
@media(hover:hover){.nav .buchen:hover{color:var(--rot)}}

/* Wichtige Daten im Fliesstext -- Dauer, Preis, Anzahl, Adresse -- stehen
   etwas kraeftiger, nicht im vollen Fettschnitt. Ueberschriften bringen ihre
   eigene 700er-Regel mit und sind davon nicht betroffen. */
p strong,.tarif li strong{font-weight:var(--w-stark)}

/* ---------- Hero ---------- */
.hero{position:relative;height:108svh;min-height:760px;max-height:1180px;overflow:hidden;
      display:flex;align-items:flex-end}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
          opacity:0;transition:opacity .5s}
.hero .bg.an{opacity:1}
.hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.03) 32%,
             rgba(0,0,0,.14) 58%,rgba(0,0,0,.52) 78%,rgba(0,0,0,.80) 100%)}
.hero .inhalt{position:relative;z-index:3;width:100%;max-width:1320px;
              margin:0 auto;padding:0 2.4rem 6.5rem;color:var(--warm)}
.hero h1{font-family:var(--sans);font-weight:300;letter-spacing:-.014em;
         font-size:clamp(1.75rem,3.5vw,3.15rem);line-height:1.08;margin:0;
         text-transform:none;max-width:17ch}
.hero h1 strong{font-weight:700}
/* Google-Bewertung ueber der Headline. Stand 29.09.2026: 4,9 bei 112
   Rezensionen, von Max in Google Maps abgelesen. "100+" statt der genauen
   Zahl, damit die Zeile nicht mit jeder Rezension veraltet. */
.hero-bewertung{display:flex;align-items:center;gap:.6rem;margin:0 0 1.1rem;
                font-size:.95rem;color:rgba(254,249,239,.95)}
.hero-bewertung .sterne{color:#F5B042;letter-spacing:.12em;font-size:1rem}
@media(max-width:720px){ .hero-bewertung{justify-content:center;font-size:.84rem;gap:.45rem} }
.hero .unterzeile{font-family:var(--label);font-weight:var(--w-mittel);font-size:.78rem;letter-spacing:.17em;
                  text-transform:uppercase;color:rgba(254,249,239,.95);
                  margin:0 0 2.2rem;display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.hero .unterzeile span.punkt{opacity:.45}
.hero .aktionen{display:flex;gap:1rem;margin-top:2.1rem;flex-wrap:wrap}
/* Zweiter Weg fuer Neue, bewusst keine zweite Taste: der Hero soll einen
   Handlungsknopf behalten (Max, 29.09.2026). */
.hero-neu{margin:1.15rem 0 0;font-size:.84rem;letter-spacing:.01em}
.hero-neu a{color:rgba(254,249,239,.92);text-decoration:underline;
            text-underline-offset:.28em;text-decoration-thickness:1px}
@media(hover:hover){.hero-neu a:hover{color:var(--warm)}}
.btn{font-family:var(--sans);font-size:.8rem;font-weight:640;letter-spacing:.09em;text-transform:uppercase;
     padding:.92rem 1.9rem;border-radius:var(--r-klein);text-decoration:none;transition:.16s;display:inline-block;
     white-space:nowrap}
/* Glas nach Cadence-Vorbild: blur + saturate haelt das Bild dahinter lebendig */
.btn-glas{
  text-align:center;
  color:var(--warm);
  background:rgba(255,255,255,.13);
  backdrop-filter:blur(18px) saturate(1.6) brightness(3.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.6) brightness(3.4);
  border:1px solid rgba(254,249,239,.90);
  box-shadow:0 1px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.28);
  transition:background .22s, border-color .22s, box-shadow .22s;
}
.btn-glas-hell{
  color:var(--text);
  background:rgba(0,0,0,.05);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(0,0,0,.22);
  box-shadow:0 1px 16px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.7);
  transition:background .22s, border-color .22s, color .22s, box-shadow .22s;
}
@media(hover:hover){.btn-glas-hell:hover{
  color:var(--warm);
  background:var(--rot);
  border-color:var(--rot);
  box-shadow:0 2px 18px rgba(205,0,70,.28), inset 0 1px 0 rgba(255,255,255,.12);
}}
@media(hover:hover){.btn-glas:hover{
  color:var(--warm);
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(16px) saturate(1.2) brightness(.75);
  -webkit-backdrop-filter:blur(16px) saturate(1.2) brightness(.75);
  border-color:var(--warm);
  box-shadow:0 2px 22px rgba(0,0,0,.35);
}}

/* ---------- was direkt darunter folgt (nur angedeutet) ---------- */
.danach{max-width:1320px;margin:0 auto;padding:6rem 2.4rem 8rem}
.danach .kopf{font-family:var(--label);font-weight:var(--w-mittel);font-size:.74rem;letter-spacing:.19em;
              text-transform:uppercase;color:var(--leise);
              padding-bottom:1.4rem;border-bottom:1px solid var(--linie);margin-bottom:3rem}
.danach h2{font-weight:var(--w-head);letter-spacing:-.02em;text-transform:uppercase;
           font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.02;margin:0 0 1.6rem;max-width:18ch}
.danach p{max-width:54ch;color:#000000;margin:0 0 1.1rem}

/* ---------- Bildwähler ---------- */
/* ---------- HANDYMENUE ----------
   Am Telefon passen sechs Menuepunkte nicht in die Leiste. Dort steht
   stattdessen ein Knopf, der die Punkte untereinander aufklappt. */
.burger{display:none;position:relative;width:28px;height:28px;padding:0;margin-left:auto;
        background:none;border:0;cursor:pointer;flex:0 0 auto}
.burger span{position:absolute;left:3px;right:3px;height:1.5px;background:var(--text);
             border-radius:2px;transition:transform .35s cubic-bezier(.22,.61,.36,1),
                                          opacity .2s}
.burger span:nth-child(1){top:10px}
.burger span:nth-child(2){top:17px}
.nav.offen .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav.offen .burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.handymenue{display:none;position:fixed;top:calc(31px + 70px + 10px);right:31px;left:auto;
            width:min(360px,calc(100% - 62px));
            z-index:59;background:#F5F5F5;border-radius:var(--r);padding:1.2rem 1.6rem 1.6rem;
            box-shadow:0 12px 40px rgba(0,0,0,.18);
            opacity:0;transform:translateY(-10px);
            transition:opacity .3s ease, transform .3s cubic-bezier(.22,.61,.36,1)}
.handymenue.da{opacity:1;transform:none}
/* Geschlossen darf das Menue keine Beruehrung abfangen, sonst liegt es
   unsichtbar ueber der Seite und schluckt jeden Tipp (25.09.2026). */
.handymenue{visibility:hidden;pointer-events:none}
.handymenue.da{visibility:visible;pointer-events:auto}
.handymenue a{display:block;color:var(--text);text-decoration:none;
              font-size:1.08rem;font-weight:var(--w-leicht);padding:.72rem 0;
              border-bottom:1px solid var(--linie)}
.handymenue a:last-of-type{border-bottom:0}
.handymenue a.hier{color:var(--rot)}
@media(hover:hover){.handymenue a:hover{color:var(--rot)}}
.handymenue .btn{display:block;text-align:center;margin-top:1rem;border-bottom:0;
                 font-size:.82rem}

@media(max-width:1240px){
  .nav{padding:0 1.3rem}
  .nav .links{gap:1.05rem}
  .nav .links a{font-size:.86rem}
  .nav .mitte{padding:0 1rem}
  .nav .rechts{gap:1.1rem}
  .nav .rechts a{font-size:.88rem}
}
@media(max-width:1040px){
  .nav .links{gap:.8rem}
  .nav .links a{font-size:.8rem}
  .nav .rechts a{font-size:.82rem}
}
/* Mit sieben Menuepunkten wird es unter 1100 Pixeln eng - ab da uebernimmt
   das Klappmenue, statt die Schrift immer weiter zu verkleinern. */
@media(max-width:1100px){
  .nav .links,.nav .rechts{display:none}
  .nav{gap:0;position:fixed}
  .burger{display:block;margin-left:0;margin-right:auto}
  /* Logo sitzt mittig in der Leiste, der Knopf links daneben */
  .nav .mitte{position:absolute;left:50%;transform:translateX(-50%);padding:0}
  .handymenue{display:block}

  /* Offen: die Leiste wird zur vollen weissen Flaeche, das Menue fuellt den Rest */
  .nav.offen{top:0;left:0;right:0;transform:none;width:100%;max-width:none;
             border-radius:0;box-shadow:none}
  .handymenue{position:fixed;inset:70px 0 0 0;width:auto;max-width:none;
              border-radius:0;box-shadow:none;padding:0;overflow-y:auto;
              background:#F5F5F5;border-top:1px solid var(--linie)}
  .handymenue a{padding:1.15rem 1.5rem;font-size:1.1rem}
  .handymenue a:last-of-type{border-bottom:1px solid var(--linie)}
  .handymenue .btn{margin:1.6rem 1.5rem;border-bottom:0}
}
@media(max-width:720px){
  /* Am Telefon endet das Video oberhalb der Bildschirmkante, damit die erste
     Zeile des Textes darunter schon sichtbar ist */
  .hero{height:99svh;min-height:0;max-height:none;
        border-bottom-left-radius:var(--r);border-bottom-right-radius:var(--r)}
  .hero .inhalt{padding:0 1.4rem 3.2rem;text-align:center}
  .hero h1{margin-left:auto;margin-right:auto}
  .hero .aktionen{justify-content:center}
  .danach{padding:4rem 1.4rem 5rem}
}

/* ================= Unterseiten ================= */
.seitenkopf{padding:12rem 2.4rem 4rem;max-width:1320px;margin:0 auto}
.seitenkopf .label{font-family:var(--label);font-weight:var(--w-mittel);font-size:.74rem;letter-spacing:.19em;
                   text-transform:uppercase;color:var(--leise);margin:0 0 1.4rem}
.seitenkopf h1{font-weight:var(--w-head);letter-spacing:-.022em;text-transform:uppercase;
               font-size:clamp(2.05rem,4.4vw,4rem);line-height:1.04;margin:0 0 1.6rem;max-width:16ch}
.seitenkopf .lead{font-size:1.2rem;max-width:52ch;margin:0;color:var(--text)}

.inhalt-block{max-width:1320px;margin:0 auto;padding:2rem 2.4rem 5rem}
.inhalt-block h2{font-weight:var(--w-head);letter-spacing:-.02em;text-transform:uppercase;
                 font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.05;margin:3.5rem 0 1.4rem}
.inhalt-block p{max-width:58ch;margin:0 0 1.1rem}

.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
        gap:1px;background:var(--linie);border:1px solid var(--linie);margin:2rem 0}
.karte{background:#E6E6E6;padding:1.8rem}
.karte .k-label{font-family:var(--label);font-weight:var(--w-mittel);font-size:.7rem;letter-spacing:.16em;
                text-transform:uppercase;color:var(--leise);margin-bottom:.7rem}
.karte .k-wert{font-size:1.7rem;font-weight:var(--w-head);letter-spacing:-.02em;line-height:1.1}
.karte .k-zusatz{font-family:var(--label);font-weight:var(--w-mittel);font-size:.72rem;color:var(--leise);margin-top:.5rem}
.karte p{font-size:.95rem;margin:.7rem 0 0;color:var(--text)}

table.preise{width:100%;border-collapse:collapse;margin:2rem 0;max-width:760px}
table.preise th{font-family:var(--label);font-weight:var(--w-mittel);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
                color:var(--leise);text-align:left;padding:.9rem 1rem .9rem 0;border-bottom:1px solid var(--linie)}
table.preise td{padding:1.1rem 1rem 1.1rem 0;border-bottom:1px solid var(--linie)}
table.preise td.wert{font-weight:var(--w-stark);text-align:right;white-space:nowrap}
table.preise tr:last-child td{border-bottom:0}

.hinweis{font-family:var(--label);font-weight:var(--w-mittel);font-size:.76rem;line-height:1.7;color:var(--leise);
         max-width:60ch;border-left:2px solid var(--linie);padding-left:1.2rem;margin:2rem 0}

/* ---------- EVENTS: grosses Bild, daneben Text, Seite wechselt ---------- */
.events{padding:9.5rem 0 var(--luft)}
.events h2,.events .unterzeile{max-width:1320px;margin-left:auto;margin-right:auto;
                               padding-left:2.4rem;padding-right:2.4rem}
.events h2{font-weight:300;letter-spacing:-.018em;text-transform:none;text-align:center;
           font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.12;margin:0 auto}
.events h2 strong{font-weight:700}
.events .unterzeile{text-align:center;margin:.7rem auto 1.8rem;font-size:1.12rem;color:var(--text)}
.events .pillen{margin-bottom:3.4rem}
.events .leer{text-align:center;color:var(--leise);font-size:1rem;padding:3rem 2.4rem 4rem;margin:0}
.event-text .fehlt{font-family:var(--label);font-weight:var(--w-mittel);font-size:.74rem;letter-spacing:.16em;
                   text-transform:uppercase;color:var(--leise)}

.event{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;
       margin-bottom:0}
.event:nth-child(even) .event-bild{order:2}
.event-bild{height:clamp(420px,52vw,680px)}
.event-bild .platzhalter{height:100%;aspect-ratio:auto;border-radius:0}
.event-bild img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.event-text{padding:0 clamp(1.4rem,4.5vw,4.5rem)}
.event-text h3{font-family:var(--sans);font-weight:300;letter-spacing:-.02em;
               text-transform:none;font-size:clamp(1.8rem,3.2vw,2.9rem);line-height:1.08;
               margin:0}
.event-text .wann{font-family:var(--sans);font-size:.84rem;font-weight:var(--w-mittel);
                  letter-spacing:.14em;text-transform:uppercase;color:var(--leise);
                  margin:1rem 0 1.6rem}
.event-text p{font-size:1.05rem;line-height:1.6;margin:0 0 1.1rem;max-width:46ch}

@media(max-width:860px){
  .events{padding:7rem 1.4rem 2.5rem}
  .event{grid-template-columns:1fr;gap:1.6rem;margin-bottom:3.2rem}
  .event-text{padding:0 1.4rem}
  .event:nth-child(even) .event-bild{order:0}
  /* Einzeln stehende Bilder bekommen Ecken wie ueberall sonst */
  .event-bild{height:clamp(240px,58vw,360px);border-radius:var(--r);overflow:hidden}
  .event-bild img,.event-bild .platzhalter{border-radius:var(--r)}
}

/* ---------- ZENTRIERTER SEITENKOPF UND FAKTENREIHE ---------- */
.seitenkopf-mitte{max-width:1320px;margin:0 auto;padding:9.5rem 2.4rem 2.6rem;text-align:center}
.seitenkopf-mitte h2{font-weight:300;letter-spacing:-.018em;text-transform:none;
                     font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.12;margin:0}
.seitenkopf-mitte h2 strong{font-weight:700}
.seitenkopf-mitte .unterzeile{margin:.7rem 0 0;font-size:1.12rem;color:var(--text)}

.fakten{max-width:1320px;margin:0 auto;padding:0 2.4rem 1rem;
        display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.fakt{background:#F5F5F5;border-radius:var(--r);padding:1.7rem 1.7rem}
.fakt .lab{font-family:var(--label);font-weight:var(--w-mittel);font-size:.68rem;letter-spacing:.19em;
           text-transform:uppercase;color:var(--leise);margin:0}
.fakt .wert{font-size:1.7rem;font-weight:300;letter-spacing:-.02em;line-height:1;margin:.9rem 0 0}
.fakt .zus{font-size:.9rem;color:var(--leise);margin:.55rem 0 0}
@media(max-width:860px){
  .seitenkopf-mitte{padding:7rem 1.4rem 2rem}
  .fakten{grid-template-columns:1fr;padding:0 1.4rem 1rem}
}

/* ---------- PREISE ---------- */
.preise{max-width:1320px;margin:0 auto;padding:9.5rem 2.4rem var(--luft)}
.preise h2{font-weight:300;letter-spacing:-.018em;text-transform:none;text-align:center;
           font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.12;margin:0 0 1.8rem}
.preise h2 strong{font-weight:700}
.preise .unterzeile{text-align:center;margin:.7rem 0 3.2rem;
                    font-size:1.12rem;font-weight:var(--w-body);color:var(--text)}

/* ---------- Gutscheine ----------
   Drei Produktbilder nebeneinander statt einer Tarifkarte. Der Grund der
   Bilder ist auf den Seitengrund gezogen, deshalb brauchen sie keine Flaeche. */
.gutscheine{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
            gap:1.4rem;margin-bottom:1.6rem}
.gutschein{margin:0}
.gutschein picture{display:block}
.gutschein img{display:block;width:100%;height:auto;border-radius:var(--r)}
.gutschein figcaption{margin-top:.2rem;text-align:center;font-size:.98rem;color:var(--leise)}
.gutschein figcaption b{display:block;font-weight:300;font-size:1.6rem;
                        letter-spacing:-.02em;color:var(--text);margin-bottom:.2rem}
.gutschein-zeile{text-align:center;margin:0 0 1.6rem;color:var(--leise);font-size:1rem}
.gutschein-knopf{display:block;width:fit-content;margin:0 auto 2.6rem}
@media(max-width:720px){
  /* Am Telefon liegen die drei Gutscheine in einer Reihe, die gewischt wird */
  .gutscheine{display:flex;grid-template-columns:none;gap:.9rem;
              overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
              margin-left:-1.4rem;margin-right:-1.4rem;padding:0 1.4rem 2px;
              overscroll-behavior-x:contain}
  .gutscheine::-webkit-scrollbar{display:none}
  .gutschein{flex:0 0 78%;scroll-snap-align:center}
  .gutschein-zeile{margin-top:1.8rem}
}

.tarife{display:grid;gap:1.4rem;margin-bottom:2.6rem}
.tarife.eins{grid-template-columns:minmax(0,1fr);max-width:calc(50% - .7rem);margin-inline:auto}
.tarife.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.tarife.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.tarif{background:#F5F5F5;border-radius:var(--r);padding:1.9rem 1.8rem 1.6rem;
       display:flex;flex-direction:column}
.reihen-titel{font-family:var(--label);font-weight:var(--w-mittel);font-size:.72rem;letter-spacing:.19em;
              text-transform:uppercase;color:var(--leise);
              margin:0 0 .9rem;padding-top:1.4rem;border-top:1px solid var(--linie)}
.reihen-titel:first-of-type{padding-top:0;border-top:0}
/* Die vier Preisgruppen liegen uebereinander in derselben Rasterzelle.
   Damit ist die Hoehe ueberall gleich und die Seite springt beim Umschalten nicht. */
.preis-buehne{display:grid}
.preis-gruppe{grid-column:1;grid-row:1;visibility:hidden}
.preis-gruppe.an{visibility:visible}
.reihen-kopf{font-family:var(--sans);font-weight:300;letter-spacing:-.018em;
             text-transform:none;text-align:center;
             font-size:clamp(1.4rem,2.4vw,2.05rem);line-height:1.12;
             margin:0 0 1.6rem;padding-top:3.4rem}
.reihen-kopf:first-of-type{padding-top:.6rem}
.reihen-kopf{scroll-margin-top:132px}

.tarif .datum{font-family:var(--label);font-weight:var(--w-mittel);font-size:.68rem;letter-spacing:.19em;
              text-transform:uppercase;color:var(--leise);margin:0 0 .8rem}
.tarif .betrag.klein{font-size:1.35rem;letter-spacing:-.01em}
.tarif h3{font-family:var(--sans);font-weight:var(--w-stark);letter-spacing:.01em;
          font-size:1.05rem;margin:0;text-transform:none}
.tarif .betrag{font-size:2.5rem;font-weight:300;letter-spacing:-.03em;line-height:1;
               margin:.7rem 0 0}
.tarif .betrag small{font-size:1rem;font-weight:var(--w-body);letter-spacing:0;
                     margin-left:.15rem;color:var(--leise)}
.tarif ul{list-style:none;margin:1.5rem 0 1.8rem;padding:1.4rem 0 0;
          border-top:1px solid var(--linie);flex:1 1 auto}
.tarif ul li{display:flex;align-items:flex-start;gap:.7rem;
             font-size:.93rem;line-height:1.45;margin-bottom:.7rem}
.tarif ul li i{flex:0 0 auto;width:1.15rem;height:1.15rem;border-radius:50%;
               background:#000000;color:var(--warm);
               display:flex;align-items:center;justify-content:center;margin-top:.1rem}
.tarif .btn{text-align:center;width:100%;padding:.85rem 1rem;font-size:.76rem}

@media(max-width:980px){ .tarife.drei{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:640px){
  .preise{padding:7rem 1.4rem 3rem}
  /* Am Telefon liegen die Gruppen nicht uebereinander: sonst richtet sich die
     Hoehe nach der laengsten und unter den kurzen bleibt der Rest leer. */
  .preis-buehne{display:block}
  .preis-gruppe{display:none;visibility:visible}
  .preis-gruppe.an{display:block}
  .tarife.zwei,.tarife.drei{grid-template-columns:1fr}
  /* Eine einzelne Karte steht am Rechner auf halber Breite. Am Telefon
     bliebe davon ein schmaler Streifen, deshalb volle Breite. */
  .tarife.eins{max-width:none}
}

/* ---------- HALTUNG: dunkle Einheit mit Bild und Aufklappern ---------- */
.haltung{max-width:1320px;margin:0 auto;padding:var(--luft) 2.4rem}
.platte-hell{position:relative;display:grid;grid-template-columns:1fr 1fr;height:550px;
             background:var(--dunkel);color:var(--auf-dunkel);
             border-radius:var(--r);overflow:hidden}
/* Das Bild liegt hinter allem und laeuft ueber die ganze Breite.
   Der Verlauf darueber macht die rechte Haelfte dunkel genug fuer die Schrift. */
.haltung-bild{position:absolute;inset:0}
.haltung-bild .platzhalter{height:100%;border-radius:0;background:#1A1F1F;color:#6E6E6A}
.haltung-bild picture{display:block;position:absolute;inset:0}
.haltung-bild img{width:100%;height:100%;object-fit:cover;display:block}
.platte-hell::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(7,14,14,0) 0%,rgba(7,14,14,.25) 30%,
                             rgba(7,14,14,.82) 52%,rgba(7,14,14,.96) 66%)}
.haltung-text{position:relative;z-index:1;grid-column:2;padding:3rem 2.8rem;overflow:hidden}
.haltung-text h2{font-family:var(--sans);font-weight:300;letter-spacing:-.02em;
                 text-transform:none;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.12;
                 margin:0;color:var(--auf-dunkel)}
.haltung-text h2 strong{font-weight:700}
.haltung-text .unter{font-family:var(--sans);font-size:.86rem;font-weight:var(--w-mittel);
                     letter-spacing:.14em;text-transform:uppercase;
                     color:var(--auf-dunkel);margin:1.1rem 0 2rem}

.punkt{border:1px solid var(--linie-dunkel);border-radius:var(--r-klein);
       margin-bottom:.8rem;overflow:hidden;
       transition:background .25s ease, border-color .25s ease, backdrop-filter .25s ease}
.punkt.offen{background:rgba(255,255,255,.03)}
/* Beim Ueberfahren wird der Punkt glasig statt rot: das Bild dahinter bleibt
   sichtbar, nur weicher und einen Tick heller. */
@media(hover:hover){.punkt:hover{background:rgba(255,255,255,.09);
             backdrop-filter:blur(12px) saturate(1.25) brightness(1.15);
             border-color:rgba(254,249,239,.42)}}
.punkt .kopf{width:100%;display:flex;align-items:center;gap:1rem;
             background:none;border:0;cursor:pointer;padding:1.1rem 1.3rem;text-align:left;
             font-family:var(--sans);font-size:1.02rem;color:var(--auf-dunkel);transition:color .16s}
@media(hover:hover){.punkt .kopf:hover{color:var(--auf-dunkel)}}
.punkt .nr{flex:0 0 auto;width:1.6rem;height:1.6rem;border:1px solid var(--linie-dunkel);
           border-radius:50%;display:flex;align-items:center;justify-content:center;
           font-family:var(--label);font-weight:var(--w-mittel);font-size:.72rem;color:var(--leise-dunkel)}
.punkt .titel{flex:1 1 auto}
.punkt i{font-style:normal;font-size:1.25rem;line-height:1;color:var(--leise-dunkel)}
.punkt i .auf{display:none}
.punkt.offen i .zu{display:none}
.punkt.offen i .auf{display:inline}
.punkt .rumpf{max-height:0;overflow:hidden;
              transition:max-height .5s cubic-bezier(.22,.61,.36,1);padding:0 1.3rem}
.punkt .rumpf p{margin:0 0 1.3rem;padding-left:2.6rem;font-size:.97rem;line-height:1.6;
                color:var(--auf-dunkel);max-width:46ch}

@media(max-width:860px){
  .haltung{padding:.5rem 1.4rem 2rem}
  .platte-hell{grid-template-columns:1fr;height:auto}
  /* Das Bild bleibt auch am Telefon im Hintergrund, der Verlauf legt sich darueber */
  .haltung-bild{position:absolute;inset:0}
  .haltung-bild .platzhalter{min-height:0;height:100%}
  .platte-hell::after{background:linear-gradient(to bottom,rgba(7,14,14,.45) 0%,
                                rgba(7,14,14,.86) 30%,rgba(7,14,14,.95) 60%)}
  .haltung-text{grid-column:1;padding:2.4rem 1.5rem;min-height:0}
  .haltung-text h2,.haltung-text .unter{text-align:center}
  .punkt .rumpf p{padding-left:0}
}

/* ---------- KURSFORMATE, Aufbau nach Cadence Shop By Function ---------- */
.kurse{max-width:1320px;margin:0 auto;padding:9.5rem 2.4rem var(--luft)}
.kurse h2{font-weight:300;letter-spacing:-.018em;text-transform:none;text-align:center;
          font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.12;margin:0 0 2.2rem}
.kurse h2 strong{font-weight:700}

.pillen{display:flex;justify-content:center;flex-wrap:wrap;gap:.7rem;margin-bottom:2.6rem}
.pille{font-family:var(--sans);font-size:.78rem;font-weight:640;letter-spacing:.09em;
       text-transform:uppercase;border:0;cursor:pointer;
       padding:.8rem 1.5rem;border-radius:var(--r-klein);
       background:#E6E6E6;color:var(--text);transition:.16s}
@media(hover:hover){.pille:hover{color:var(--rot)}}
.pille.an{background:var(--rot);color:var(--warm)}
@media(hover:hover){.pille.an:hover{color:var(--warm)}}

/* Alle fuenf Karten liegen uebereinander in derselben Rasterzelle. Damit ist die
   Hoehe fuer jedes Format gleich - sie richtet sich nach der laengsten Karte,
   ohne dass irgendwo eine feste Zahl steht. */
.buehne{display:grid}
.kurs{grid-column:1;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:2rem;
      align-items:stretch;min-height:470px;visibility:hidden}
.kurs.an{visibility:visible}
.kurs-text{background:#F5F5F5;border-radius:var(--r);padding:2rem 2.2rem;
           display:flex;flex-direction:column}
.kurs-text h3{font-family:var(--sans);font-weight:var(--w-stark);letter-spacing:.02em;
              text-transform:uppercase;font-size:1.32rem;margin:0}
.kurs-text .unter{font-family:var(--label);font-weight:var(--w-mittel);font-size:.74rem;letter-spacing:.18em;
                  text-transform:uppercase;color:var(--leise);margin:.55rem 0 1.4rem}
.kurs-text ol{list-style:none;counter-reset:p;margin:0 0 1.4rem;padding:0}
.kurs-text ol li{counter-increment:p;position:relative;padding-left:2.4rem;
                 margin-bottom:.8rem;font-size:.98rem;line-height:1.5}
.kurs-text ol li::before{content:counter(p);position:absolute;left:0;top:.05rem;
                 width:1.5rem;height:1.5rem;border:1px solid var(--linie);border-radius:50%;
                 display:flex;align-items:center;justify-content:center;
                 font-family:var(--label);font-weight:var(--w-mittel);font-size:.7rem;color:var(--leise)}
.kurs-text .lab{font-family:var(--label);font-weight:var(--w-mittel);font-size:.7rem;letter-spacing:.16em;
                text-transform:uppercase;color:var(--leise);
                margin:0 0 .8rem;padding-top:1.1rem;border-top:1px solid var(--linie)}
.kurs-text .zahlenkopf{margin-top:auto}
.werte{display:flex;flex-wrap:wrap;gap:1.8rem;margin-bottom:.2rem}
.werte .zahl{display:block;font-size:2rem;font-weight:300;letter-spacing:-.02em;line-height:1}
.werte .zahl small{font-size:.9rem;font-weight:var(--w-body);margin-left:.15rem}
.werte .lab{display:block;font-family:var(--sans);font-size:.86rem;letter-spacing:0;
            text-transform:none;color:var(--leise);border:0;padding:0;margin:.4rem 0 0}
.tags{display:flex;flex-wrap:wrap;gap:.6rem}
.tags span{border:1px solid var(--linie);border-radius:var(--r-klein);
           padding:.6rem 1.1rem;font-size:.9rem}
.kurs-bild .platzhalter{height:100%;aspect-ratio:auto}
/* Das Bild sitzt absolut in der Zelle. Mit height:100% rechnet Safari gegen einen
   Container ohne feste Hoehe nicht und zeigt das Bild in voller Groesse. */
.kurs-bild{position:relative;min-height:470px;overflow:hidden;border-radius:var(--r)}
.kurs-bild picture{position:absolute;inset:0;display:block}
.kurs-bild img{width:100%;height:100%;object-fit:cover;display:block;
               transition:transform .7s cubic-bezier(.22,.61,.36,1)}
@media(hover:hover){.kurs-bild:hover img{transform:scale(1.035)}}
@media(prefers-reduced-motion:reduce){ .kurs-bild img{transition:none}
                                       @media(hover:hover){.kurs-bild:hover img{transform:none}} }

@media(max-width:860px){
  .kurse{padding:7rem 1.4rem 3rem}
  .kurs{grid-template-columns:1fr;height:auto;gap:1.3rem}
  .kurs-bild{order:-1}
  .kurs-bild .platzhalter{min-height:240px}
  /* Nicht mitwachsen: sonst ist der Rahmen hoeher als das Bild und die
     runde Kante sitzt unter der eckigen Bildunterkante. */
  .kurs-bild{position:static;min-height:0;align-self:start}
  .kurs-bild picture{position:static}
  .kurs-bild img{height:auto;aspect-ratio:3/2}
  /* Der Text steht am Telefon ohne eigene Flaeche direkt auf dem Seitengrund,
     wie bei Cadence: Bild oben, Ueberschrift und Zeilen darunter. */
  .kurs-text{background:none;border-radius:0;padding:0}
  .kurs-text h3{font-size:1.5rem}
  .kurs-text .unter{margin-bottom:1rem}
}

/* ---------- PARTNERBAND, laeuft durch ---------- */
.partner{max-width:1320px;margin:0 auto;padding:0 2.4rem}
.band{overflow:hidden;border-radius:var(--r);
      background:var(--dunkel) url("bilder/bar-textur.jpg") center/cover no-repeat}
.fenster{overflow:hidden;
   -webkit-mask-image:linear-gradient(to right,transparent 0,transparent 16.6%,#000 27%,#000 73%,transparent 83.4%,transparent 100%);
           mask-image:linear-gradient(to right,transparent 0,transparent 16.6%,#000 27%,#000 73%,transparent 83.4%,transparent 100%)}
.lauf{display:flex;width:max-content;align-items:center;
      animation:durchlauf 48s linear infinite}
@media(hover:hover){.band:hover .lauf{animation-play-state:paused}}
.lauf span{flex:0 0 auto;padding:1.7rem 3.2rem;display:flex;align-items:center}
/* Jedes Logo bekommt seine eigene Hoehe, damit die Schriftzuege optisch
   gleich gross wirken -- gleiche Pixelhoehe wuerde sie ungleich aussehen lassen. */
.lauf img{display:block;width:auto;opacity:.92}
.lauf .p-hyrox{height:17px}
.lauf .p-sunday{height:44px}
.lauf .p-whoop{height:17px}
.lauf .p-nike{height:18px}
/* Range Rover Frankfurt: Vorlage von Max, nur auf den Inhalt beschnitten und
   in Warmweiss gefaerbt. Die Hoehe schliesst den Trennstrich ein, der ueber die
   Versalhoehe hinausgeht -- deshalb steht hier ein groesserer Wert als bei den anderen. */
.lauf .p-rover{height:28px}
@keyframes durchlauf{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media(prefers-reduced-motion:reduce){ .lauf{animation:none} html{scroll-behavior:auto} }
@media(max-width:720px){
  .partner{padding:.5rem 1.4rem 0}
  .lauf span{padding:1.2rem 1.8rem}
  .lauf .p-hyrox{height:13px}
  .lauf .p-sunday{height:32px}
  .lauf .p-whoop{height:13px}
  .lauf .p-nike{height:14px}
  .lauf .p-rover{height:21px}
}

/* ---------- KURSPLAN, bSport-Widget ---------- */
/* ---------- Bring nothing: derzeit NICHT auf der Seite (Max, 30.09.2026) ----------
   Was im Studio bereitsteht. Bewusst ohne Bild: die Fotos vom Regal und
   den Duschen fehlen, der Block soll aber nicht darauf warten
   (Max, 29.09.2026). Kommt ein Foto, steht es rechts daneben. */
.mitbringen{max-width:1320px;margin:0 auto;padding:var(--luft) 2.4rem;text-align:center}
.mitbringen h2{font-weight:300;letter-spacing:-.018em;text-transform:none;
               font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.12;margin:0 0 .9rem}
.mitbringen h2 strong{font-weight:700}
.mitbringen p{max-width:46ch;margin:0 auto 2rem;color:var(--leise)}
.mitbringen-liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
                  justify-content:center;gap:.5rem .55rem}
.mitbringen-liste li{font-family:var(--label);font-weight:var(--w-mittel);font-size:.72rem;
                     letter-spacing:.13em;text-transform:uppercase;color:var(--text);
                     border:1px solid var(--linie);border-radius:var(--r-klein);
                     padding:.62rem .9rem;background:#E6E6E6}
@media(max-width:720px){
  .mitbringen{padding:var(--luft) 1.4rem}
  .mitbringen-liste li{font-size:.66rem;letter-spacing:.09em;padding:.55rem .72rem}
}

.kursplan{max-width:1320px;margin:0 auto;padding:var(--luft) 2.4rem var(--luft)}
.kursplan h2{font-weight:300;letter-spacing:-.018em;text-transform:none;text-align:center;
             font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.12;margin:0 0 2.6rem}
.kursplan h2 strong{font-weight:700}
.kursplan-seite{padding-top:9.5rem}
.bsport{min-height:320px}
/* Das Widget bringt eigene Farben mit. Hier wird nur das Blau und Rot
   von bSport auf Arc-Schwarz gezogen, nichts weiter. */
[id*=bsport-widget] .cleanslate .bs-setup-variable{border-radius:var(--r)}
body [id*=bsport-widget] .cleanslate .bs-marketplace-filter:hover,
body [id*=bsport-widget] .cleanslate .bs-marketplace-filter--selected,
body [id*=bsport-widget] .cleanslate .bs-marketplace-filter--open,
[id*=bsport-widget] .cleanslate .bs-marketplace-date-picker:hover,
[id*=bsport-widget] .cleanslate .bs-marketplace-date-picker--open{border-color:#000 !important}
[id*=bsport-widget] .cleanslate .bs-marketplace-filter--selected .bs-marketplace-filter__placeholder,
[id*=bsport-widget] .cleanslate .bs-marketplace-filter:hover .bs-marketplace-filter__placeholder,
[id*=bsport-widget] .cleanslate .bs-marketplace-filter__placeholder--open,
[id*=bsport-widget] .cleanslate .bs-marketplace-date-picker__placeholder:hover,
[id*=bsport-widget] .cleanslate .bs-marketplace-date-picker__placeholder--open,
[id*=bsport-widget] .cleanslate .bs-marketplace-date-picker__menu__calendar__day--header,
[id*=bsport-widget] .cleanslate .bs-marketplace-date-picker__menu__calendar__day--today,
[id*=bsport-widget] .cleanslate .bs-marketplace-date-picker__menu__header__buttons__left,
[id*=bsport-widget] .cleanslate .bs-marketplace-date-picker__menu__header__buttons__right{color:#000 !important}
[id*=bsport-widget] .cleanslate .bs-marketplace-date-picker__menu__calendar__day--selected{background-color:#000 !important}

@media(max-width:720px){ .kursplan{padding:1.2rem 1.4rem 3rem} }
/* Steht ein Abschnitt ganz oben, braucht er Platz fuer die feste Kopfleiste:
   31px Abstand plus 70px Hoehe. */
@media(max-width:720px){ section.kursplan:first-of-type{padding-top:7.5rem} }

/* ---------- MEET THE FOUNDERS ---------- */
.gruender{max-width:1320px;margin:0 auto;padding:var(--luft) 2.4rem var(--luft)}
.gruender h2{font-weight:300;letter-spacing:-.018em;text-transform:none;text-align:center;
             font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.12;margin:0 0 3.2rem}
.gruender h2 strong{font-weight:700}
.paare{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.paare.dreier{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem 2rem}
.paare.dreier .platzhalter,.paare.dreier .person img{aspect-ratio:4/5}
.team-seite{padding-top:9.5rem}
.tafel p.fehlt,.kurs-text p.fehlt{margin:0;font-family:var(--label);font-weight:var(--w-mittel);font-size:.74rem;letter-spacing:.16em;
               text-transform:uppercase;color:var(--leise)}
.person .bild{position:relative}
/* Der Rahmen beschneidet den Zoom - ohne ihn liefe das Bild ueber die Karte hinaus.
   Die Klappe liegt daneben, nicht darin, damit die Tafel beim Aufklappen frei waechst. */
/* Das Seitenverhaeltnis sitzt am Rahmen, nicht am Bild: ein img in einem picture
   loest aspect-ratio nicht zuverlaessig auf und nimmt dann seine Dateihoehe.
   Das Bild liegt absolut darin und fuellt die Flaeche - dasselbe Muster wie
   bei den Kursbildern. */
.person .rahmen{position:relative;overflow:hidden;border-radius:var(--r);
                line-height:0;aspect-ratio:4/3}
.paare.dreier .person .rahmen{aspect-ratio:4/5}
.person .rahmen picture{position:absolute;inset:0;display:block}
.person .rahmen img{width:100%;height:100%;object-fit:cover;display:block}
.person .rahmen > *{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
@media(hover:hover){.person .bild:hover .rahmen > *{transform:scale(1.035)}}
@media(prefers-reduced-motion:reduce){ .person .rahmen > *{transition:none}
                                       @media(hover:hover){.person .bild:hover .rahmen > *{transform:none}} }
.person img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
            border-radius:var(--r);background:var(--linie)}
.platzhalter{display:flex;align-items:center;justify-content:center;
            width:100%;border-radius:var(--r);
            background:var(--linie);color:#8A8A8A;
            font-family:var(--label);font-weight:var(--w-mittel);font-size:.76rem;letter-spacing:.19em;text-transform:uppercase}
.person .platzhalter{aspect-ratio:4/3}

.klappe{position:absolute;left:1rem;right:1rem;bottom:1rem;overflow:hidden;
        background:#F5F5F5;border-radius:var(--r-klein);
        box-shadow:0 2px 22px rgba(0,0,0,.13)}
.riegel{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
        background:none;border:0;cursor:pointer;padding:1.05rem 1.4rem;text-align:left;
        font-family:var(--sans);font-size:1.05rem;font-weight:var(--w-body);
        color:var(--text);transition:color .16s}
@media(hover:hover){.riegel:hover{color:var(--rot)}}
.riegel .auf{display:none}
.riegel i .auf{display:none}
.person.offen .riegel .zu{display:none}
.person.offen .riegel .auf{display:inline}
.person.offen .riegel i .zu{display:none}
.riegel i{font-style:normal;font-size:1.35rem;line-height:1;color:var(--leise);
          display:inline-block;
          transition:color .16s, transform .6s cubic-bezier(.22,.61,.36,1)}
.person.offen .riegel i{transform:rotate(180deg)}
@media(hover:hover){.riegel:hover i{color:var(--rot)}}

.tafel{max-height:0;overflow:hidden;transition:max-height .6s cubic-bezier(.22,.61,.36,1);padding:0 1.4rem}
.tafel h3{font-family:var(--sans);font-weight:300;letter-spacing:-.018em;text-transform:none;
          font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.2;margin:1.5rem 0 1rem}
.tafel p{font-size:.98rem;line-height:1.55;color:var(--text);margin:0 0 .9rem;max-width:46ch}
.tafel p:last-child{margin-bottom:1.6rem}
@media(max-width:720px){
  .tafel{padding:0 1.1rem}
  .tafel h3{font-size:1.08rem;margin:1.1rem 0 .6rem}
  .tafel p{font-size:.88rem;line-height:1.5;margin:0 0 .7rem}
  .tafel p:last-child{margin-bottom:1.2rem}
  .riegel{font-size:.95rem}
}

@media(max-width:720px){
  section.gruender:first-of-type{padding-top:7.5rem}
  .gruender{padding:.5rem 1.4rem 3.5rem}
  .paare,.paare.dreier{grid-template-columns:1fr;gap:2.6rem}
}

/* ---------- BSPORT-KALENDER AN ARC ANGLEICHEN ----------
   Das Widget rendert direkt in die Seite, seine Farben und die Schrift liegen
   als CSS-Variablen auf .bs-setup-variable und lassen sich von hier ueberschreiben. */
.bsport .bs-setup-variable,
.bsport [id*=bsport-widget] .cleanslate{
  --color-primary:#CD0046;
  --color-primary-main:#CD0046;
  --fontFamily:'Switzer',-apple-system,system-ui,sans-serif;
  /* Ecken auf die Arc-Werte: 8px fuer Knoepfe und Felder, 12px fuer Flaechen.
     --border-radius-1 ist die Basis, die uebrigen Stufen rechnen davon hoch. */
  --border-radius-1:8px;
  --bs-border-radius-xs:8px;
  --bs-border-radius-sm:8px;
  --bs-border-radius-md:8px;
  --bs-border-radius-lg:12px;
  --bs-border-radius-button-lg:8px;
}

/* Die Filterleiste des Kalenders setzt ihre Ecken mit !important ueber eigene
   Variablen. Deshalb hier direkt auf die Elemente, mit einem Selektor, der
   spezifischer ist als der von bSport. */
.bsport [id*=bsport-widget] .cleanslate .bs-marketplace-filter,
.bsport [id*=bsport-widget] .cleanslate .bs-marketplace-filter::before,
.bsport [id*=bsport-widget] .cleanslate .bs-calendar-search__container,
.bsport [id*=bsport-widget] .cleanslate .bs-calendar-search__input,
.bsport [id*=bsport-widget] .cleanslate .bs-marketplace-filter__menu{
  border-radius:var(--r-klein) !important;
}

/* ---------- RECHTSTEXTE ----------
   Lange Fliesstexte: schmale Spalte, damit die Zeilen lesbar bleiben. */
.rechtstext{max-width:820px;margin:0 auto;padding:9.5rem 2.4rem var(--luft)}
.rechtstext h2{font-weight:300;letter-spacing:-.018em;font-size:clamp(1.7rem,3vw,2.6rem);
               line-height:1.12;margin:0 0 2.4rem}
.rechtstext h3{font-weight:var(--w-stark);font-size:1.02rem;letter-spacing:0;
               text-transform:none;margin:2.2rem 0 .7rem}
.rechtstext p{font-size:1rem;line-height:1.65;margin:0 0 1rem;color:var(--text)}
.rechtstext p.block{line-height:1.8}
.rechtstext a{color:var(--text);text-decoration:underline;text-underline-offset:.2em}
@media(hover:hover){.rechtstext a:hover{color:var(--rot)}}
@media(max-width:720px){ .rechtstext{padding:7.5rem 1.4rem var(--luft)} }
/* Lange Adressen in den Rechtstexten umbrechen, sonst schiebt sich die Seite
   am Telefon seitlich weg (Datenschutz, Links der Aufsichtsbehoerden). */
.rechtstext a{overflow-wrap:anywhere}

/* Hover und geoeffneter Zustand der Filter setzen border-color und color fest
   auf Schwarz, an den Variablen vorbei. Deshalb hier direkt auf Arc-Rot. */
.bsport [id*=bsport-widget] .cleanslate .bs-marketplace-filter:hover,
.bsport [id*=bsport-widget] .cleanslate .bs-marketplace-filter--open,
.bsport [id*=bsport-widget] .cleanslate .bs-marketplace-filter--selected{
  border-color:var(--rot) !important;
  color:var(--rot) !important;
}
.bsport [id*=bsport-widget] .cleanslate .bs-marketplace-filter:hover .bs-marketplace-filter__placeholder,
.bsport [id*=bsport-widget] .cleanslate .bs-marketplace-filter:hover .bs-marketplace-filter__right__placeholder-icon{
  color:var(--rot) !important;
}

/* ---------- ERSTE STUNDE ----------
   Bild links, heller Kasten rechts mit drei nummerierten Schritten an einer
   senkrechten Linie. */
/* Der Einstieg sitzt dicht ueber dem Block darunter -- 4rem Unterkante plus
   1rem Oberkante der Ablaufreihe waren zusammen rund 86 Pixel Luft. */
.mitte-block.ersteseite{padding-top:9.5rem;padding-bottom:var(--luft)}
.ablauf{max-width:1320px;margin:0 auto;padding:var(--luft) 2.4rem;
        display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:stretch}
.ablauf-bild{position:relative;overflow:hidden;border-radius:var(--r);min-height:520px}
.ablauf-bild picture{position:absolute;inset:0;display:block}
/* unten buendig: das Bild ist unterhalb des Ausschnitts zu Ende, oben wird
   abgeschnitten -- so bleiben die Personen im Vordergrund vollstaendig. */
.ablauf-bild img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}
.ablauf-text{background:#F5F5F5;border-radius:var(--r);padding:2.8rem 2.6rem}
.ablauf-text h2{font-weight:300;letter-spacing:-.018em;font-size:clamp(1.7rem,3vw,2.6rem);
                line-height:1.12;margin:0 0 2rem}
.ablauf-text h2 strong{font-weight:700}

.ablauf-liste{list-style:none;margin:0 0 2.2rem;padding:0;position:relative}
/* baseline haengt die Nummer auf dieselbe Schriftlinie wie das Wort daneben.
   Ohne das sitzt sie hoeher, weil sie kleiner gesetzt ist und damit eine
   flachere Zeile hat. */
.ablauf-liste li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;
                 align-items:baseline;
                 padding:0 0 1.7rem 1.5rem;position:relative}
.ablauf-liste li:last-child{padding-bottom:0}
/* die Linie laeuft durch alle Punkte, beim letzten nur noch bis zum Punkt */
.ablauf-liste li::before{content:"";position:absolute;left:0;top:.55rem;bottom:-.55rem;
                         width:1px;background:var(--linie)}
.ablauf-liste li:last-child::before{bottom:auto;height:0}
.ablauf-liste li::after{content:"";position:absolute;left:-3.5px;top:.35rem;
                        width:8px;height:8px;border-radius:50%;background:var(--text)}
.ablauf-liste .nr{font-family:var(--label);font-weight:var(--w-mittel);font-size:1.02rem;
                  color:var(--leise);line-height:1.5}
.ablauf-liste h3{font-family:var(--sans);font-weight:var(--w-stark);font-size:1.02rem;
                 letter-spacing:0;text-transform:none;margin:0 0 .4rem;line-height:1.5}
.ablauf-liste p{margin:0;font-size:.98rem;line-height:1.6;color:var(--text)}

.kontakt-schluss{max-width:1320px;margin:0 auto;padding:1rem 2.4rem 4rem}
.platte-klein{background:var(--dunkel);color:var(--auf-dunkel);border-radius:var(--r);
              padding:3.2rem 2.8rem;text-align:center}
.platte-klein h2{font-weight:300;letter-spacing:-.018em;font-size:clamp(1.7rem,3vw,2.6rem);
                 line-height:1.12;margin:0}
.platte-klein h2 strong{font-weight:700}
.platte-klein p{max-width:52ch;margin:1rem auto 1.8rem;font-size:1.02rem;
                line-height:1.55;color:var(--leise-dunkel)}
@media(max-width:860px){
  .ablauf{grid-template-columns:1fr;padding:1rem 1.4rem 2.5rem}
  .ablauf-bild{min-height:280px}
  .ablauf-text{padding:2rem 1.5rem}
  .kontakt-schluss{padding:1rem 1.4rem 3rem}
  .platte-klein{padding:2.4rem 1.5rem}
}

/* ---------- ZITAT ----------
   Steht fuer sich, viel Luft darum. Dieselbe Typografie wie die grosse
   Aussage auf der Startseite, nur duenner und weiter. */
.zitat{max-width:1320px;margin:0 auto;padding:9.5rem 2.4rem 5rem;text-align:center}
/* Folgt das Zitat auf einen Textblock, braucht es oben keinen vollen Vorlauf. */
.mitte-block + .zitat,.zitat.schluss{padding-top:var(--luft);padding-bottom:var(--luft)}
.zitat blockquote{margin:0}
.zitat p{margin:0 auto;max-width:34ch;font-weight:300;letter-spacing:-.022em;
         line-height:1.14;font-size:clamp(1.65rem,4.2vw,3.4rem)}
.zitat strong{font-weight:700}
@media(max-width:720px){ .zitat{padding:7rem 1.4rem 3rem} .zitat p{max-width:none} }

/* ---------- AUFTAUCHEN BEIM SCROLLEN ----------
   Die Klasse setzt das Skript, nicht das HTML. Ohne JavaScript ist damit
   alles normal sichtbar, statt unsichtbar zu bleiben. */
.auftauchen{opacity:0;transform:translateY(20px);
            transition:opacity .75s cubic-bezier(.22,.61,.36,1),
                       transform .75s cubic-bezier(.22,.61,.36,1)}
.auftauchen.da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .auftauchen{opacity:1;transform:none;transition:none}
}

/* ---------- FUSSZEILE, dunkle Platte nach Cadence-Vorbild ---------- */
/* Zwischen dem letzten Block und der Fusszeile derselbe Abstand wie
   zwischen zwei Bloecken: beide Seiten geben je --luft. */
.fuss{margin-top:var(--luft);padding:0 31px 31px;background:var(--grund)}
.platte{position:relative;overflow:hidden;background:var(--dunkel);color:var(--auf-dunkel);
        border-radius:var(--r);max-width:1320px;margin:0 auto;
        padding:3.6rem 3rem clamp(120px,18vw,255px)}
.platte .spalten{position:relative;z-index:1;display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:2.4rem}
.platte h3{font-family:var(--sans);font-weight:var(--w-stark);font-size:1.28rem;
           letter-spacing:-.012em;text-transform:none;margin:0 0 1.5rem;color:var(--auf-dunkel)}
.platte a{color:var(--auf-dunkel);text-decoration:none;display:block;
          margin-bottom:.85rem;font-size:1.02rem;transition:.16s}
@media(hover:hover){.platte a:hover{color:var(--rot)}}
.platte .zeile{font-size:1.02rem;margin-bottom:.85rem;color:var(--auf-dunkel)}
.platte .zeile a{display:inline;margin:0}
.platte .zeile span{display:inline-block;min-width:5.4em;color:var(--leise-dunkel);vertical-align:top}
/* Zwei Zeitbloecke je Tag: der zweite steht unter dem ersten, nicht am Zeilenanfang */
.platte .zeile b{display:inline-block;font-weight:inherit;vertical-align:top;line-height:1.45}

/* Sprungziel fuer Contact in der Kopfleiste. */
.kontakt{scroll-margin-top:120px}
.kontakt p{max-width:38ch;font-size:1.02rem;line-height:1.5;margin:0 0 1.6rem;color:var(--auf-dunkel)}
.kontakt .mail{font-size:1.12rem;text-decoration:underline;text-underline-offset:5px;
               text-decoration-thickness:1px;text-decoration-color:var(--linie-dunkel);
               margin-bottom:1.2rem}
@media(hover:hover){.kontakt .mail:hover{color:var(--rot);text-decoration-color:var(--rot)}}
.kontakt .mail + .mail{margin-top:.55rem}
.kontakt .sozial{display:inline-flex;vertical-align:middle;margin:.4rem 0 0;
                 color:var(--leise-dunkel);transition:.16s}
@media(hover:hover){.kontakt .sozial:hover{color:var(--rot)}}


.wortmarke{position:absolute;left:0;right:0;bottom:0;height:clamp(200px,31vw,430px);overflow:hidden;
           -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 30%,#000 68%);
                   mask-image:linear-gradient(to bottom,transparent 0,transparent 30%,#000 68%)}
.wortmarke picture{display:block;height:100%}
.wortmarke img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}

@media(max-width:980px){
  .platte .spalten{grid-template-columns:1fr 1fr;gap:2.5rem}
  .kontakt{grid-column:1 / -1}
}
@media(max-width:720px){
  .fuss{padding:0 14px 14px}
  .platte{padding:2.8rem 1.6rem 0}
  .platte .spalten{grid-template-columns:1fr}
  .wortmarke{height:clamp(110px,34vw,190px)}
}

/* ===== Zentrierter Abschnitt: duenn + fett, nach Cadence-Vorbild ===== */
/* ---- Aussage unter dem Video ------------------------------------------
   Der Satz fuellt sich beim Scrollen Wort fuer Wort von Grau nach Schwarz.
   Jedes Wort steckt in einem eigenen span (siehe worte() in bau.py).       */
.aussage{max-width:1180px;margin:0 auto;padding:5rem 2.4rem var(--luft);text-align:center}
.aussage .gross{font-weight:300;letter-spacing:-.02em;line-height:1.16;margin:0 auto;
                max-width:49ch;font-size:clamp(1.5rem,3.3vw,2.75rem)}
.aussage .gross strong{font-weight:700}
.wort{color:#9A9A9A;transition:color .45s ease}
.wort.an{color:var(--text)}
@media(prefers-reduced-motion:reduce){ .wort{color:var(--text);transition:none} }
@media(max-width:720px){ .aussage{padding:3.2rem 1.4rem 3.6rem}
                         .aussage .gross{max-width:none}
                         }

/* der alte zentrierte Block, noch von anderen Seiten benutzt */
.mitte-block{max-width:1320px;margin:0 auto;padding:4rem 2.4rem;text-align:center}
.mitte-block h2{font-weight:300;letter-spacing:-.018em;text-transform:none;
                font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.12;margin:0 auto}
.mitte-block h2 strong{font-weight:700}
.mitte-block p{max-width:84ch;margin:1.3rem auto 0;color:var(--text);font-size:1.02rem}
/* Zwei Kurskarten unter der Ueberschrift: helle Platte, darin Titel,
   graue Beschreibung und darunter das Foto. Das Bild haengt unten, damit
   beide Karten gleich aussehen, auch wenn ein Text laenger ist. */
/* Der Abschnitt sitzt dicht am Block darueber -- die Ueberschrift braucht
   keinen eigenen Luftraum, sie steht ja schon zwischen zwei Platten. */
.mitte-block.startwahl{padding-top:var(--luft);padding-bottom:var(--luft)}
.wahlkarten{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;
            margin:2.2rem auto 0;text-align:left;align-items:stretch}
.wahlkarte{display:flex;flex-direction:column;text-decoration:none;color:var(--text);
           background:#F5F5F5;border-radius:var(--r);padding:2.4rem 2.2rem}
.wahlkarte h3{margin:0;font-weight:300;letter-spacing:-.018em;line-height:1.12;
              font-size:clamp(1.35rem,2.2vw,1.9rem);text-transform:none}
.wahlkarte .unterzeile{margin:1rem 0 2rem;max-width:44ch;font-size:1rem;
                       line-height:1.5;color:var(--leise)}
/* margin-top:auto haengt das Bild an den unteren Rand -- sonst rutscht es
   in der Karte mit dem kuerzeren Text nach oben und die Fotos stehen versetzt. */
.wahlkarte .rahmen{margin-top:auto;position:relative;overflow:hidden;
                   border-radius:var(--r-klein);aspect-ratio:4/3;background:var(--dunkel)}
.wahlkarte picture{position:absolute;inset:0;display:block}
.wahlkarte img{width:100%;height:100%;object-fit:cover;display:block;
               transition:transform .5s cubic-bezier(.22,.61,.36,1)}
@media(hover:hover){.wahlkarte:hover img{transform:scale(1.035)}}
@media(hover:hover){.wahlkarte:hover h3{color:var(--rot)}}
@media(max-width:720px){
  /* Am Telefon liegen die beiden Karten nebeneinander und werden gewischt.
     Die zweite steht angeschnitten am Rand, damit man sieht, dass da noch was ist. */
  .wahlkarten{display:flex;grid-template-columns:none;gap:.9rem;margin-top:2rem;
              overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
              margin-left:-1.4rem;margin-right:-1.4rem;padding:0 1.4rem 2px;
              overscroll-behavior-x:contain}
  .wahlkarten::-webkit-scrollbar{display:none}
  .wahlkarte{flex:0 0 82%;scroll-snap-align:center;padding:1.8rem 1.6rem}
}

/* Schlussaufruf: eine Zeile plus Knopf auf dem Seitengrund, bewusst ohne
   eigene Flaeche -- der dunkle Balken davor war schwerer als alles darueber. */
.schlussruf{max-width:1320px;margin:0 auto;padding:var(--luft) 2.4rem var(--luft);
            display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
            gap:1.6rem 2rem;text-align:center}
.schlussruf p{margin:0;font-size:1.1rem;color:var(--leise)}
.schlussruf p strong{color:var(--text)}

@media(max-width:720px){
  .schlussruf{padding:2rem 1.4rem 0;flex-direction:column;gap:1.4rem}
}

.mitte-block .label{font-family:var(--label);font-weight:var(--w-mittel);font-size:.72rem;letter-spacing:.19em;
                    text-transform:uppercase;color:var(--leise);max-width:none;margin:0 auto 1.5rem}
@media(max-width:720px){ .mitte-block{padding:2.6rem 1.4rem 4rem} }

/* Erste Ueberschrift am Telefon: auf allen Unterseiten auf gleicher Hoehe.
   Vorher standen Concept und First timers 40 Pixel tiefer als der Rest. */
@media(max-width:720px){
  .mitte-block.ersteseite,
  .kurse,
  .preise,
  .events,
  .gruender.team-seite,
  .kursplan.kursplan-seite{padding-top:7.5rem}
}

/* Am Telefon stehen die Auswahlknoepfe in einer Zeile, die man wischt,
   statt sie auf drei Zeilen umbrechen zu lassen. */
@media(max-width:720px){
  .pillen{flex-wrap:wrap;justify-content:center;gap:.45rem;overflow:visible}
  .pille{font-size:.74rem;letter-spacing:.04em;padding:.66rem .8rem}
}

/* Pfeile unter dem Karten-Slider. Nur am Telefon, am Rechner liegen die
   Karten nebeneinander und brauchen keine Steuerung. */
.slider-pfeile{display:none}
@media(max-width:720px){
  .slider-pfeile{display:flex;justify-content:space-between;gap:1rem;margin-top:1.1rem}
  .pfeil{flex:0 0 auto;width:96px;height:46px;border:0;border-radius:999px;cursor:pointer;
         background:#E6E6E6;color:var(--text);font-size:1.15rem;line-height:1;
         display:flex;align-items:center;justify-content:center;transition:opacity .2s}
  .pfeil:disabled{opacity:.3;cursor:default}
}

/* App-Knoepfe in der Fusszeile, nur am Telefon. Am Rechner nuetzt ein
   Store-Link nichts, dort steht der Buchungslink in der Kopfleiste. */
.app-block{display:none}
@media(max-width:720px){
  .app-block{display:block;text-align:center}
  .handymenue a.app-link{display:inline-block;font-size:1.02rem;
            text-decoration:underline;text-underline-offset:4px;
            text-decoration-thickness:1px;margin:0;padding:0;border:0}
}

/* Derselbe Block im Klappmenue, dort auf hellem Grund */
@media(max-width:1100px){
  .handymenue .app-block{display:block;margin:1rem 1.5rem 1.8rem;padding-top:1.1rem;
                         text-align:center;border-top:1px solid var(--linie)}
  .handymenue .app-link{color:var(--text)}
}

/* ================= ABSTAENDE AM TELEFON, EINHEITLICH =================
   Am Rechner tragen alle Abschnitte oben und unten --luft, die erste
   Ueberschrift startet bei 152 Pixeln. Am Telefon war das ueber viele
   Einzelregeln gewachsen (48, 40, 56, 8, 16, 32 ...). Hier steht es an
   einer Stelle: erste Sektion 120 Pixel, alle weiteren --luft. */
@media(max-width:720px){
  .kurse,.events,.preise,.gruender,.kursplan,.haltung,.ablauf,.schlussruf,
  .mitte-block,.zitat{padding-top:var(--luft);padding-bottom:var(--luft)}

  /* die jeweils erste Sektion einer Unterseite */
  .mitte-block.ersteseite,.kurse,.preise,.events,
  .gruender.team-seite,.kursplan.kursplan-seite{padding-top:7.5rem}

  /* Sonderfaelle, die bewusst anders sind */
  .partner{padding-top:0;padding-bottom:0}
  .aussage{padding-top:3.2rem;padding-bottom:var(--luft)}
}

/* In den Slidern am Telefon stehen die Karten seitlich ausserhalb des Bildes.
   Dort waere eine Einblendung beim Scrollen nie zu sehen, also erscheinen sie
   sofort. Am Rechner stehen sie nebeneinander und blenden normal ein. */
@media(max-width:720px){
  .wahlkarten .auftauchen,.gutscheine .auftauchen{opacity:1;transform:none}
}

/* ---------- Kundenvideos (Startseite) ----------
   Nach usecadence.com "Shared by our customers": Hochformat-Kacheln in
   einer Leiste, Pfeile links und rechts, Link in der Mitte (Max, 29.09.2026). */
.kunden{padding:var(--luft) 0;text-align:center}
.kunden h2{font-weight:300;letter-spacing:-.018em;text-transform:none;
           font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.12;margin:0 0 .5rem;padding:0 1.4rem}
.kunden h2 strong{font-weight:700}
.kunden .unter{margin:0 0 2rem;color:var(--leise);padding:0 1.4rem}
.kundenvideos{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
              padding:0 2.4rem;scroll-padding:0 2.4rem;scrollbar-width:none}
.kundenvideos::-webkit-scrollbar{display:none}
.kundenvideo{flex:0 0 clamp(220px,23vw,340px);aspect-ratio:9/16;margin:0;position:relative;
             border-radius:var(--r);overflow:hidden;background:#D9D9D9;cursor:pointer;
             scroll-snap-align:start}
.kundenvideo video{width:100%;height:100%;object-fit:cover;display:block}
.kundenvideo.leer{cursor:default;background:linear-gradient(160deg,#DCDCDC,#C9C9C9)}
.abspielen{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;
           border:0;border-radius:50%;padding:0;pointer-events:none;
           background:rgba(40,40,40,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
           transition:opacity .2s}
.abspielen::after{content:"";position:absolute;left:27px;top:22px;
                  border-left:18px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.kundenvideo.laeuft .abspielen{opacity:0}
.kunden-fuss{display:flex;align-items:center;justify-content:space-between;gap:1rem;
             max-width:1320px;margin:1.6rem auto 0;padding:0 2.4rem}
.kunden-fuss .pfeil{flex:0 0 auto;width:96px;height:46px;border:0;border-radius:999px;cursor:pointer;
                    background:#E6E6E6;color:var(--text);font-size:1.15rem;line-height:1;
                    display:flex;align-items:center;justify-content:center;transition:opacity .2s}
.kunden-fuss .pfeil:disabled{opacity:.3;cursor:default}
.kunden-link{color:var(--text);font-size:.95rem;text-decoration:underline;
             text-underline-offset:.3em;text-decoration-thickness:1px}
@media(max-width:720px){
  .kundenvideos{padding:0 1.4rem;scroll-padding:0 1.4rem}
  .kundenvideo{flex-basis:64%}
  .kunden-fuss{padding:0 1.4rem}
  .kunden-fuss .pfeil{width:72px}
}

/* ---------- Everything is here: derzeit NICHT auf der Seite (Max, 29.09.2026) ----------
   Der Block steht im Git-Verlauf (Commit "Concept: Block Everything is here").
   Nach dem Vorbild usecadence.com "Earn points": Bild ueber die ganze
   Platte, rechts zwei Spalten mit je vier Aufklappern (Max, 29.09.2026). */
.platte-breit{grid-template-columns:36% 64%;height:auto;min-height:600px}
.platte-breit::after{background:linear-gradient(to right,rgba(7,14,14,0) 0%,rgba(7,14,14,.3) 26%,
                              rgba(7,14,14,.8) 42%,rgba(7,14,14,.92) 60%)}
.platte-breit .haltung-text{padding:3.2rem 2.8rem 2.6rem}
.punkte-zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 .8rem;align-items:start}
.punkt .symbol{flex:0 0 auto;width:2.1rem;height:2.1rem;border:1px solid var(--linie-dunkel);
               border-radius:50%;display:flex;align-items:center;justify-content:center;
               color:var(--auf-dunkel)}
.platte-breit .punkt .rumpf p{padding-left:3.1rem;font-size:.92rem}
@media(max-width:1100px){ .platte-breit{grid-template-columns:1fr} .platte-breit .haltung-text{grid-column:1}
  .platte-breit::after{background:rgba(7,14,14,.78)} }
@media(max-width:720px){ .punkte-zwei{grid-template-columns:1fr} }
@media(max-width:720px){ .platte-breit .haltung-text{padding:2.2rem .9rem 1.6rem}
  .platte-breit .punkt .kopf{padding:1rem .9rem;gap:.8rem}
  .platte-breit .punkt .rumpf{padding:0 .9rem}
  .platte-breit .punkt .rumpf p{padding-left:2.9rem} }
/* "Everything is here" steht ganz oben auf Concept: Abstand unter der Kopfleiste */
.haltung.ersteseite{padding-top:8rem}
@media(max-width:720px){ .haltung.ersteseite{padding-top:6rem} }
/* Bild fest verankert: es richtet sich nach der Platte, die nicht mehr waechst */
.platte-breit .haltung-bild img{object-position:30% center}
/* Instagram-Kacheln: erst Hinweis, nach Klick die Einbettung */
.kundenvideo.insta{background:linear-gradient(160deg,#2A2E2E,#101414);color:var(--auf-dunkel)}
.kundenvideo.insta .abspielen{background:rgba(255,255,255,.14)}
.kundenvideo.insta figcaption{position:absolute;left:0;right:0;bottom:1.4rem;text-align:center;
  font-size:.74rem;color:rgba(254,249,239,.62);line-height:1.4}
.kundenvideo.insta figcaption b{display:block;font-family:var(--label);font-weight:var(--w-mittel);
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--auf-dunkel);margin-bottom:.3rem}
.kundenvideo.insta.geladen{background:#fff;cursor:default}
.kundenvideo iframe{width:100%;height:100%;border:0;display:block}
/* Leiste laeuft von selbst: ohne Einrasten, sonst ruckelt der Selbstlauf */
.kundenvideos{scroll-snap-type:none}
/* Ton-Knopf unten rechts, statt Play-Knopf */
.kundenvideo .ton{position:absolute;right:.8rem;bottom:.8rem;width:38px;height:38px;border:0;
  border-radius:50%;padding:0;cursor:pointer;background:rgba(20,20,20,.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
.kundenvideo .ton::before{content:"";position:absolute;left:11px;top:14px;width:5px;height:10px;background:#fff}
.kundenvideo .ton::after{content:"";position:absolute;left:14px;top:9px;
  border-right:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.kundenvideo:not(.laut) .ton{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.kundenvideo:not(.laut) .ton::before{opacity:.55}
.kundenvideo:not(.laut) .ton::after{opacity:.55}
.kundenvideo.laut .ton{background:rgba(205,0,70,.85)}
/* Play-Knopf nach usecadence.com (Max, 30.09.2026): groesser, glasig grau,
   weisses Dreieck mit runden Ecken */
.kundenvideo .abspielen{width:84px;height:84px;margin:-42px 0 0 -42px;
  background:rgba(70,70,70,.42);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 2px 18px rgba(0,0,0,.18)}
.kundenvideo .abspielen::after{content:"";left:50%;top:50%;width:30px;height:32px;
  margin:-16px 0 0 -12px;border:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 32'%3E%3Cpath d='M4 3.2c0-2 2.2-3.2 3.9-2.2l19.2 12.8c1.5 1 1.5 3.3 0 4.3L7.9 30.9C6.2 32 4 30.8 4 28.8z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:720px){ .kundenvideo .abspielen{width:70px;height:70px;margin:-35px 0 0 -35px}
  .kundenvideo .abspielen::after{width:25px;height:27px;margin:-13.5px 0 0 -10px} }
/* etwas kleiner (Max, 30.09.2026) */
.kundenvideo .abspielen{width:68px;height:68px;margin:-34px 0 0 -34px}
.kundenvideo .abspielen::after{width:24px;height:26px;margin:-13px 0 0 -9.5px}
@media(max-width:720px){ .kundenvideo .abspielen{width:58px;height:58px;margin:-29px 0 0 -29px}
  .kundenvideo .abspielen::after{width:21px;height:22px;margin:-11px 0 0 -8px} }
/* durchsichtiger (Max, 30.09.2026) */
.kundenvideo .abspielen{background:rgba(70,70,70,.24);
  backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:0 2px 14px rgba(0,0,0,.12)}
/* niedriger (Max, 30.09.2026): 2:3 wie bei Cadence statt 9:16.
   Das Video fuellt die Kachel weiter aus, oben und unten wird beschnitten. */
.kundenvideo{aspect-ratio:2/3}

/* Hervorgehobene Preiskarte (Max, 30.09.2026): roter Rahmen und rote
   Plakette, der Knopf bleibt grau wie auf den anderen Karten. Commit = "Most people pick" (die 6-Monats verkaufte sich
   seit einem Jahr nicht), 10 Session Pass ebenfalls "Most people pick" auf
   Max' Angabe (30.09.2026). */
.tarif.hervor{position:relative;box-shadow:inset 0 0 0 1.5px var(--rot)}
.tarif .plakette{position:absolute;top:1.3rem;right:1.3rem;background:var(--rot);color:#fff;
  font-family:var(--label);font-weight:var(--w-mittel);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.42rem .7rem;border-radius:999px;line-height:1}

/* ---------- Cookie-Hinweis (nur aktiv, wenn GA_ID in bau.py gesetzt ist) ----------
   Karte unten links im Ton der Navigationsleiste. Beide Knoepfe gleich gross
   und gleich auffaellig: Ablehnen muss so leicht sein wie Zustimmen. */
.einwilligung{position:fixed;left:31px;bottom:31px;z-index:70;max-width:400px;
  background:#F5F5F5;border-radius:var(--r);padding:1.3rem 1.4rem 1.4rem;
  box-shadow:0 2px 24px rgba(0,0,0,.16);font-size:.88rem;line-height:1.5}
.einwilligung[hidden]{display:none}
.einwilligung p{margin:0 0 1rem}
.einwilligung .einwilligung-label{font-family:var(--label);font-size:.72rem;font-weight:var(--w-stark);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:.45rem}
.einwilligung a{color:var(--text);text-underline-offset:.2em}
@media(hover:hover){.einwilligung a:hover{color:var(--rot)}}
.einwilligung-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.einwilligung .btn{cursor:pointer;padding:.8rem 1rem}
@media(max-width:720px){
  .einwilligung{left:14px;right:14px;bottom:14px;max-width:none}
}

/* ---------- RUECKMELDUNG BEIM DRUECKEN (Vorschau apple-design) ----------
   Knoepfe reagieren schon beim Beruehren, nicht erst, wenn die naechste Seite
   laedt. Hover-Effekte gelten nur noch fuer Geraete mit Maus, damit sie am
   Telefon nach dem Antippen nicht haengen bleiben. */
a,button{-webkit-tap-highlight-color:transparent}
.btn-glas,.btn-glas-hell{transition:background .22s, border-color .22s, color .22s, box-shadow .22s,
                         transform .22s cubic-bezier(.22,.61,.36,1)}
.btn:active,.pille:active,.pfeil:active,.abspielen:active{transform:scale(.96);transition-duration:60ms}
.pfeil{transition:opacity .2s, transform .22s cubic-bezier(.22,.61,.36,1)}
.pfeil:disabled:active{transform:none}
.riegel:active,.punkt .kopf:active,.burger:active{opacity:.6;transition:opacity 60ms}
.nav a:active,.handymenue a:active,.platte a:active,.hero-neu a:active{color:var(--rot);transition:none}
.btn-glas-hell:active{color:var(--warm);background:var(--rot);border-color:var(--rot);transition-duration:60ms}

/* Sichtbarer Rahmen fuer die Bedienung mit der Tab-Taste. Erscheint nicht
   beim Klicken mit Maus oder Finger. */
a:focus-visible,button:focus-visible{outline:2px solid var(--rot);outline-offset:3px}