/* ==========================================================================
   TYCOON SPORTSCLUB — Design System
   Relaunch 2026 · Heller Grundton, dunkle Anker, Signalrot
   --------------------------------------------------------------------------
   Die Seite steht auf warmem Off-White. Dunkel sind nur die Stellen, an denen
   es etwas bewirkt: Hero und Wellness. Umgeschaltet wird ueber die
   Klasse .tone-dark, die denselben Token-Satz mit anderen Werten belegt --
   jede Komponente funktioniert dadurch auf hellem wie auf dunklem Grund,
   ohne Sonderregeln.
   --------------------------------------------------------------------------
   01 Design Tokens · 02 Reset · 03 Typografie · 04 Layout · 05 Buttons
   06 Header/Navigation · 07 Hero · 08 Sections & Karten · 09 Kursplan
   10 Preise · 11 Team · 12 Accordion · 13 Tabellen · 14 Formulare
   15 Footer · 16 Cookie-Banner · 17 Chat-Widget · 18 Utilities · 19 Motion/Print
   ========================================================================== */

/* ==========================================================================
   01 · DESIGN TOKENS
   ========================================================================== */
:root {
  /* Farben — Flaechen */
  --c-bg:            #faf9f7;   /* warmes Off-White, kein reines Weiss */
  --c-bg-alt:        #f2efea;   /* abgesetzte Abschnitte */
  --c-surface:       #ffffff;   /* Karten */
  --c-surface-2:     #f5f2ee;   /* Eingabefelder, Chips */
  --c-surface-3:     #e9e5df;
  --c-border:        rgba(14, 16, 19, .11);
  --c-border-strong: rgba(14, 16, 19, .24);
  --c-hover:         rgba(14, 16, 19, .045);

  /* Farben — Marke */
  --c-red:           #e2231a;   /* Flaechen, Balken, Akzente */
  --c-red-600:       #c4160f;   /* Buttons */
  --c-red-700:       #a51009;   /* Button-Hover */
  --c-red-text:      #bc1610;   /* Rot fuer Text und Icons auf hellem Grund */
  --c-red-soft:      rgba(226, 35, 26, .10);
  --c-red-glow:      rgba(226, 35, 26, .30);

  /* Farben — Kurskategorien */
  --c-studio:        #d81f16;
  --c-zoom:          #14855c;

  /* Farben — Text */
  --c-ink:           #0e1013;   /* staerkste Textfarbe (frueher #fff) */
  --c-text:          #1a1d21;
  --c-text-muted:    #565d64;
  --c-text-dim:      #646b71;   /* 5,1:1 auf dem Grundton, 4,7:1 auf dem Footergrund */
  --c-text-invert:   #ffffff;

  /* Typografie (systemnah, keine externen Requests → DSGVO-freundlich) */
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui,
                  -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   clamp(1.25rem, 0.9rem + 1.1vw, 1.5rem);
  --fs-2xl:  clamp(1.5rem,  1.1rem + 1.8vw, 2rem);
  --fs-3xl:  clamp(1.875rem, 1.3rem + 2.6vw, 2.75rem);
  --fs-4xl:  clamp(2.25rem, 1.4rem + 4vw,   4rem);
  --fs-hero: clamp(2.5rem,  1.1rem + 5.6vw, 5.25rem);

  --lh-tight: 1.05;
  --lh-base:  1.65;

  /* Abstände */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* Layout */
  --container:  1240px;
  --container-narrow: 820px;
  --header-h:   72px;

  /* Radius & Schatten — auf hellem Grund traegt die Form, nicht der Schlagschatten */
  --r-sm: 6px;  --r-md: 12px;  --r-lg: 18px;  --r-xl: 26px;  --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(14,16,19,.05);
  --shadow-md: 0 2px 4px rgba(14,16,19,.04), 0 10px 28px -12px rgba(14,16,19,.22);
  --shadow-lg: 0 4px 10px rgba(14,16,19,.06), 0 28px 64px -20px rgba(14,16,19,.30);
  --shadow-red: 0 10px 26px -10px var(--c-red-glow);

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: .18s;
  --dur:      .32s;
  --dur-slow: .6s;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Dunkler Anker — derselbe Token-Satz, andere Werte.
   Auf Hero-Inhalt, Wellness-Abschnitt und CTA-Band.
   -------------------------------------------------------------------------- */
.tone-dark {
  --c-bg:            #101317;
  --c-bg-alt:        #171b20;
  --c-surface:       #1c2127;
  --c-surface-2:     #242a31;
  --c-surface-3:     #2e353d;
  --c-border:        rgba(255, 255, 255, .13);
  --c-border-strong: rgba(255, 255, 255, .28);
  --c-hover:         rgba(255, 255, 255, .06);

  --c-red-text:      #ff6b5f;
  --c-red-soft:      rgba(226, 35, 26, .18);

  --c-studio:        #ff4438;
  --c-zoom:          #37c98a;

  --c-ink:           #ffffff;
  --c-text:          #edf0f3;
  --c-text-muted:    #a7afb8;
  --c-text-dim:      #7c848d;
  --c-text-invert:   #0e1013;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);

  color: var(--c-text);
  color-scheme: dark;
}

/* ==========================================================================
   02 · RESET & BASIS
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--c-surface-2); }

a { color: var(--c-red-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-ink); }

button, input, select, textarea { font: inherit; color: inherit; }

hr { border: 0; height: 1px; background: var(--c-border); margin: var(--sp-6) 0; }

::selection { background: var(--c-red); color: #fff; }

:focus-visible { outline: 3px solid var(--c-red); outline-offset: 3px; border-radius: var(--r-sm); }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 2000;
  background: var(--c-red); color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  font-weight: 700; text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); color: #fff; }

/* ==========================================================================
   03 · TYPOGRAFIE
   ========================================================================== */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
  color: var(--c-ink);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); letter-spacing: -.01em; }
/* Lange Einzelwoerter ("Muskelkontraktionen", "Gesundheitsberatung") passten
   in den Tablet-Breiten nicht in ihre Spalte und schoben die Seite breiter
   als das Fenster. Trennen nur, wenn das Wort sonst nicht passt. */
h2, h3 { overflow-wrap: break-word; hyphens: auto; }
h4 { font-size: var(--fs-lg); letter-spacing: 0; }

p { margin: 0 0 var(--sp-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; color: var(--c-ink); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-red-text);
  margin: 0 0 var(--sp-4);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--c-red); border-radius: 2px; }
/* Zentriert nur, wenn ausdruecklich gewuenscht -- inline-flex folgt keinem text-align */
.eyebrow.center { display: flex; justify-content: center; max-width: none; }
/* Verlinkte Eyebrow (Startseite -> Studio): erbt die Farbe, unterstreicht erst beim Zeigen */
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover, .eyebrow a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

.lead { font-size: var(--fs-lg); color: var(--c-text-muted); max-width: 62ch; }
.lead--balanced { text-wrap: balance; overflow-wrap: break-word; }
/* Kurze Sinneinheiten bleiben zusammen, duerfen bei stark vergroesserter
   Schrift aber innerhalb der verfuegbaren Breite weiter umbrechen. */
.text-unit { display: inline-block; max-width: 100%; }
/* Nachsatz unter einem Lead: die Ausnahme zur Regel, kleiner als der Absatz
   darueber, aber im selben Textblock. */
.lead-note {
  margin-top: var(--sp-3); font-size: var(--fs-sm);
  color: var(--c-text-dim); max-width: 62ch;
}
.text-red { color: var(--c-red-text); }
.text-muted { color: var(--c-text-muted); }

.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 var(--sp-4); max-width: 68ch; }
.prose li { margin-bottom: var(--sp-2); }
.prose h2 { margin-top: var(--sp-7); font-size: var(--fs-2xl); }
.prose h3 { margin-top: var(--sp-6); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose address { font-style: normal; color: var(--c-text-muted); }

/* Rechtsseiten: eine schlichte Textspalte ohne Dokument-Werkzeuge. */
.container.legal-container { max-width: 800px; }
.legal { padding-block: clamp(2rem, 5vw, 4rem); line-height: 1.7; overflow-wrap: anywhere; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.2; margin-bottom: 2rem; }
.legal h2 { margin: 2rem 0 .65rem; font-size: 1.125rem; line-height: 1.4; }
.legal h1 + h2 { margin-top: 0; }
.legal p, .legal address, .legal ul { max-width: none; margin-bottom: 1rem; }
.legal address { color: var(--c-text); }
.legal a { overflow-wrap: anywhere; }
.legal-stand { margin-top: 2rem; font-size: var(--fs-sm); color: var(--c-text-muted); }
.legal .embed-settings { padding: 0; border: 0; border-radius: 0; background: none; }
[data-consent-revoke][hidden], [data-consent-controls][hidden] { display: none; }
.embed-settings { margin-top: var(--sp-5); padding: clamp(1rem, 2vw, 1.5rem); background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.embed-settings h3 { margin-top: 0; }
.embed-settings__status { color: var(--c-text-muted); font-size: var(--fs-sm); }
.embed-settings__status:empty { display: none; }
.embed-settings .btn { text-transform: none; letter-spacing: 0; white-space: normal; }
.map-figure { margin: 0; }
.map-controls { margin-top: var(--sp-2); font-size: var(--fs-xs); line-height: 1.6; color: var(--c-text-muted); }
.map-controls__revoke {
  display: inline; min-height: 24px; margin-left: .35em; padding: 0; border: 0;
  background: none; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; transition: color .18s ease;
}
.map-controls__revoke:hover, .map-controls__revoke:focus-visible { color: var(--c-red-text); }
.consent-remember { display: flex; align-items: start; gap: .75rem; max-width: 100%; min-height: 44px; padding-block: .625rem; font-size: var(--fs-sm); cursor: pointer; text-align: left; }
.consent-remember input { flex: none; width: 18px; height: 18px; margin: .15rem 0 0; accent-color: var(--c-red-600); }

/* ==========================================================================
   04 · LAYOUT & CONTAINER
   ========================================================================== */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2.5rem, var(--container-narrow)); }

.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--c-bg-alt); }
.section--surface { background: var(--c-surface); }
.section--tight { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }

/* Dunkler Abschnitt als bewusster Anker im hellen Verlauf der Seite */
.section--dark { background: var(--c-bg); }

.section-head { margin-bottom: var(--sp-7); max-width: 760px; }
#einstieg .section-head, #einstieg .lead { max-width: none; }
#studio .section-head { max-width: 960px; }
#studio .lead { max-width: none; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
/* Genau zwei Spalten -- fuer Raster mit vier Kacheln, die 2 + 2 stehen sollen.
   .grid--2 waechst auf breiten Schirmen bis auf drei Spalten, dann stuende die
   vierte Kachel allein in der zweiten Reihe. */
.grid--pair { grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid--pair { grid-template-columns: repeat(2, 1fr); } }

.stack > * + * { margin-top: var(--sp-4); }

/* ==========================================================================
   05 · BUTTONS
   ========================================================================== */
.btn {
  --btn-bg: var(--c-red-600);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: .875rem 1.75rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--r-full);
  cursor: pointer;
  max-width: 100%; white-space: normal; overflow-wrap: anywhere;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow-red); }
.btn:active { transform: translateY(0); }
.btn--primary:hover { background: var(--c-red-700); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--c-ink);
  border-color: var(--c-border-strong);
}
.btn--ghost:hover { background: var(--c-hover); box-shadow: none; }
/* Heller Button — auf dunklem Grund weiss, auf hellem Grund tiefschwarz */
.btn--light { --btn-bg: var(--c-ink); --btn-fg: var(--c-bg); }
.btn--light:hover { background: var(--c-text); box-shadow: var(--shadow-md); }
.btn--sm { padding: .5rem 1.1rem; font-size: var(--fs-xs); }
.btn--lg { padding: 1.0625rem 2.25rem; font-size: var(--fs-base); }
.btn--block { width: 100%; }
.btn svg { width: 1em; height: 1em; flex: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* Mittig unter einem zentrierten Abschnittskopf */
.btn-row--center { justify-content: center; }
/* Zwei gleich breite Knoepfe, linksbuendig wie die uebrigen Buttonreihen.
   width:max-content laesst beide Spalten so breit werden wie der laengere
   Knopf -- symmetrisch ohne feste Pixelmasse. Auf dem Handy untereinander
   ueber die volle Breite. */
.btn-row--pair {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3); width: max-content; max-width: 100%;
}
@media (max-width: 34rem) {
  .btn-row--pair { grid-template-columns: 1fr; width: 100%; }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-red-text); text-decoration: none;
}
.link-arrow::after { content: "→"; transition: transform var(--dur-fast) var(--ease); }
.link-arrow:hover { color: var(--c-red-700); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ==========================================================================
   06 · HEADER & NAVIGATION
   ========================================================================== */
.site-header {
  /* Muss ueber dem mobilen Menue (950) liegen, sonst verdeckt das offene Menue
     den Burger -- und damit den einzigen sichtbaren Weg, es wieder zu schliessen. */
  position: sticky; top: 0; z-index: 960;
  background: rgba(250, 249, 247, .80);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(250, 249, 247, .97);
  border-bottom-color: var(--c-border);
  box-shadow: var(--shadow-md);
}
.site-header__inner { display: flex; align-items: center; gap: var(--sp-5); min-height: var(--header-h); }

/* Wortmarke — Bilddatei, damit Schriftzug und Proportionen exakt der Marke entsprechen.
   Auf hellem Grund die rote Fassung, fuer dunkle Flaechen die weisse. */
.brand { display: inline-flex; align-items: center; flex: none; margin-right: auto; text-decoration: none; }
.brand img { width: auto; height: 42px; background: none; }
.brand--footer { margin-right: 0; }
.brand--footer img { height: 56px; }
@media (max-width: 420px) { .brand img { height: 34px; } }

.nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav__link {
  position: relative; padding: .6rem .875rem; border-radius: var(--r-sm);
  color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: .875rem; right: .875rem; bottom: .3rem;
  height: 2px; background: var(--c-red); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--c-ink); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--c-ink); }

.header-cta { flex: none; }

.burger {
  display: none; width: 46px; height: 46px; flex: none;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md); cursor: pointer;
}
.burger__box { position: relative; width: 20px; height: 14px; }
.burger__box span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--c-ink); border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.burger__box span:nth-child(1) { top: 0; }
.burger__box span:nth-child(2) { top: 6px; }
.burger__box span:nth-child(3) { top: 12px; }
.burger[aria-expanded="true"] .burger__box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobiles Menue — dunkel, damit der Wechsel vom Inhalt spuerbar ist */
.mobile-nav {
  position: fixed; inset: 0; z-index: 950;
  background: var(--c-bg);
  padding: calc(var(--header-h) + 1.5rem) 0 2rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav__list { list-style: none; margin: 0; padding: 0; }
.mobile-nav__list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-border);
  color: var(--c-ink); font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; text-decoration: none;
}
.mobile-nav__list a::after { content: "→"; color: var(--c-red-text); }
.mobile-nav__list a[aria-current="page"] { color: var(--c-red-text); }
.mobile-nav__cta { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); }
.mobile-nav__meta { margin-top: var(--sp-6); color: var(--c-text-muted); font-size: var(--fs-sm); }
.mobile-nav__meta a { color: var(--c-text-muted); }

/* Acht Navigationspunkte brauchen mehr Platz als sieben -- darunter Burger */
@media (max-width: 1240px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .header-cta { display: none; }
}
.mobile-nav .brand { margin-bottom: var(--sp-6); }

/* ==========================================================================
   07 · HERO
   --------------------------------------------------------------------------
   Foto ueber die volle Breite, Text auf dunkel abgedunkelter Flaeche.
   Der untere Rand laeuft in den Seitengrund aus -- der Uebergang vom Bild
   zur Seite ist damit ein Verlauf und keine Kante.
   ========================================================================== */
.hero {
  --hero-fade: 160px;
  position: relative; min-height: min(76svh, 720px);
  display: grid; align-items: center;
  overflow: hidden; isolation: isolate;
  background: var(--c-bg);
}
.hero__media, .page-hero__media {
  /* Foto und Abdunklung gemeinsam ausblenden: kein weisser Film ueber dem
     Bild. Der Seitengrund scheint durch, auch vor einem beigen Abschnitt. */
  position: absolute; inset: 0; z-index: -1;
  /* S-Kurve in 5%-Schritten, mit flachem Anfang und Ende. Der laengere
     Auslauf vermeidet den bisher sichtbaren, eng gebuendelten hellen Streifen. */
  mask-image: linear-gradient(to top,
    rgba(0,0,0,0.00000) 0,
    rgba(0,0,0,0.00116) calc(var(--hero-fade) * 0.05),
    rgba(0,0,0,0.00856) calc(var(--hero-fade) * 0.10),
    rgba(0,0,0,0.02661) calc(var(--hero-fade) * 0.15),
    rgba(0,0,0,0.05792) calc(var(--hero-fade) * 0.20),
    rgba(0,0,0,0.10352) calc(var(--hero-fade) * 0.25),
    rgba(0,0,0,0.16308) calc(var(--hero-fade) * 0.30),
    rgba(0,0,0,0.23517) calc(var(--hero-fade) * 0.35),
    rgba(0,0,0,0.31744) calc(var(--hero-fade) * 0.40),
    rgba(0,0,0,0.40687) calc(var(--hero-fade) * 0.45),
    rgba(0,0,0,0.50000) calc(var(--hero-fade) * 0.50),
    rgba(0,0,0,0.59313) calc(var(--hero-fade) * 0.55),
    rgba(0,0,0,0.68256) calc(var(--hero-fade) * 0.60),
    rgba(0,0,0,0.76483) calc(var(--hero-fade) * 0.65),
    rgba(0,0,0,0.83692) calc(var(--hero-fade) * 0.70),
    rgba(0,0,0,0.89648) calc(var(--hero-fade) * 0.75),
    rgba(0,0,0,0.94208) calc(var(--hero-fade) * 0.80),
    rgba(0,0,0,0.97339) calc(var(--hero-fade) * 0.85),
    rgba(0,0,0,0.99144) calc(var(--hero-fade) * 0.90),
    rgba(0,0,0,0.99884) calc(var(--hero-fade) * 0.95),
    rgba(0,0,0,1.00000) var(--hero-fade) );
}
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%;
  /* Senkrecht nicht mittig, sondern nach oben gerueckt: auf breiten, flachen
     Fenstern wird oben und unten viel weggeschnitten -- bei 50% sinkt der Kopf
     in den ausblendenden unteren Rand. */
  object-fit: cover; object-position: 62% 50%;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* Textseite abdunkeln, ab etwa zwei Dritteln das Foto freigeben */
    linear-gradient(100deg, rgba(9,11,13,.88) 0, rgba(9,11,13,.74) 24%,
                    rgba(9,11,13,.40) 44%, rgba(9,11,13,.06) 66%, rgba(9,11,13,0) 100%),
    /* Signalrot als leiser Schimmer, nicht als Farbfilm */
    radial-gradient(60% 55% at 4% 84%, rgba(226,35,26,.22), transparent 62%);
}
.hero__inner {
  padding-block: clamp(3rem, 5vw, 4.5rem) clamp(5rem, 7vw, 6.5rem);
}

.hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--c-red); color: #fff;
  padding: .45rem 1rem .45rem .85rem; border-radius: var(--r-full);
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  margin-bottom: var(--sp-5); box-shadow: 0 10px 28px -10px rgba(226,35,26,.75);
}
.hero__badge:hover { color: #fff; background: var(--c-red-600); }

.hero__title {
  font-size: var(--fs-hero); font-weight: 900; color: #fff;
  letter-spacing: -.035em; line-height: .95; text-transform: uppercase;
  margin: 0 0 var(--sp-5); max-width: 13ch;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
  overflow-wrap: break-word; hyphens: auto;
}
.hero__title em { font-style: normal; color: #ff5347; display: block; }
.hero__text {
  font-size: var(--fs-lg); color: rgba(255,255,255,.88);
  max-width: 44ch; margin-bottom: var(--sp-6);
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.hero__actions .btn--light { --btn-bg: var(--c-surface); --btn-fg: var(--c-ink); border-color: var(--c-border-strong); }
.hero__actions .btn--light:hover { background: var(--c-surface-2); }

@media (max-width: 780px) {
  /* Ein kurzer Bildstreifen zeigt das Gesicht. Text und beide Einstiege
     folgen ohne Ueberlagerung; die Hoehe darf bei grosser Schrift wachsen. */
  .hero { --hero-fade: 56px; min-height: 0; display: block; }
  .hero__media {
    position: relative; inset: auto; z-index: 0;
    width: 100%; height: clamp(11.5rem, 29svh, 17rem);
  }
  .hero__media img, .hero__media video { object-position: 72% 40%; }
  .hero__media::after { display: none; }
  .hero__inner {
    position: relative; z-index: 1;
    padding-block: 0 var(--sp-5);
  }
  .hero__badge { font-size: .6875rem; letter-spacing: .06em; padding: .35rem .75rem; margin-bottom: var(--sp-3); box-shadow: none; }
  .hero__title { color: var(--c-ink); max-width: none; font-size: clamp(1.875rem, 8.1vw, 2.75rem); line-height: 1.04; margin-bottom: var(--sp-3); text-shadow: none; }
  .hero__title em { color: var(--c-red-text); }
  .hero__text { color: var(--c-text-muted); font-size: var(--fs-base); line-height: 1.5; max-width: 42ch; margin-bottom: var(--sp-4); text-shadow: none; }
  .hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); max-width: 620px; }
  .hero__actions .btn { min-height: 48px; padding: .7rem 1rem; font-size: var(--fs-sm); line-height: 1.3; letter-spacing: .035em; }
}
@media (max-width: 600px) {
  .hero__actions { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .hero__media img { object-position: 50% 65%; }
  .hero__badge { font-size: .625rem; letter-spacing: .04em; }
}
@media (max-width: 480px) and (max-height: 650px) {
  .hero { --hero-fade: 32px; }
  .hero__media { height: clamp(9.5rem, 25svh, 15rem); }
  .hero__media img { object-position: 50% 52%; }
  .hero__badge, .hero__title { margin-bottom: var(--sp-2); }
  .hero__text { margin-bottom: var(--sp-3); }
}

/* Kennzahlenband direkt unter dem Hero.
   Oben keine Linie: das Band soll aus dem Hero herauswachsen, nicht als
   eigener Kasten daneben stehen. Die Trenner zwischen den Spalten sind
   deshalb keine durchgehenden Striche, sondern faden nach oben hin ins
   Papierweiss aus — unten fest, oben nichts. Feste Spaltenzahl statt
   auto-fit, damit bekannt ist, welche Kachel eine Zeile beginnt: die
   bekommt keinen Trenner. */
.hero__stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}
.stat {
  position: relative; background: var(--c-bg);
  padding: var(--sp-5) var(--sp-4); text-align: center;
}
.stat:not(:first-child)::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to top,
    var(--c-border) 0, var(--c-border) 18%, transparent 100%);
}
@media (max-width: 780px) {
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Linke Kachel jeder Zeile beginnt die Zeile — kein Trenner davor */
  .stat:nth-child(odd)::before { content: none; }
  /* Statt einer Zeilenlinie nur Luft zwischen den beiden Reihen */
  .stat:nth-child(-n+2) { padding-bottom: var(--sp-3); }
  .stat:nth-child(n+3)  { padding-top: 0; }
}
.stat__value {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 900;
  color: var(--c-ink); letter-spacing: -.02em; display: block;
}
.stat__label {
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-text-dim); margin-top: var(--sp-1); display: block;
}

/* --------------------------------------------------------------------------
   Seitenkopf der Unterseiten — Foto oben, Verlauf von dunkel nach hell.
   -------------------------------------------------------------------------- */
.page-hero {
  --hero-fade: 128px;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(21rem, 25vw, 22.5rem);
  padding-block: 2rem 5rem;
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-border);
}
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
/* Motiv rechts im Bild (Kontakt): auf schmalen Schirmen nicht wegschneiden */
.page-hero--rechts .page-hero__media img { object-position: 78% 45%; }

/* Kompakter Bildkopf. Die Ausblendung endet im Grund des Folgeabschnitts. */
.page-hero--media {
  background: var(--c-bg);
  border-bottom: 0;
}
.page-hero--media:has(+ .section--alt) { background: var(--c-bg-alt); }
.page-hero > .container { min-width: 0; }
.page-hero .lead { overflow-wrap: break-word; hyphens: auto; }
.page-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* Textseite links abdunkeln, nach rechts das Foto freigeben */
    linear-gradient(100deg, rgba(9,11,13,.78) 0, rgba(9,11,13,.60) 26%,
                    rgba(9,11,13,.28) 52%, rgba(9,11,13,.05) 78%, rgba(9,11,13,0) 100%),
    /* Grundton von oben nach unten -- unten bleibt das Foto fast offen */
    linear-gradient(to bottom, rgba(9,11,13,.62) 0, rgba(9,11,13,.38) 45%,
                    rgba(9,11,13,.18) 75%, rgba(9,11,13,.06) 100%);
}
.page-hero--media .page-hero__title { color: #fff; }
.page-hero--media .lead { color: rgba(255,255,255,.84); }
.page-hero--media .breadcrumb,
.page-hero--media .breadcrumb li + li::before { color: rgba(255,255,255,.85); }
.page-hero--media .breadcrumb a { color: rgba(255,255,255,.80); }
.page-hero--media .breadcrumb a:hover { color: #fff; }

@media (max-width: 780px) {
  /* Schmaler Schirm: Text liegt ueber der ganzen Breite, also von oben abdunkeln */
  .page-hero { --hero-fade: 104px; }
  .page-hero__media::after { background: linear-gradient(to bottom, rgba(9,11,13,.82), rgba(9,11,13,.66) 65%, rgba(9,11,13,.25)); }
  .page-hero .lead { font-size: var(--fs-base); line-height: 1.5; }
}
.page-hero__title { margin-bottom: var(--sp-3); text-transform: uppercase; letter-spacing: -.03em; overflow-wrap: break-word; hyphens: auto; }

/* Der Teamkopf ist bewusst flacher, damit die Portraits frueher beginnen. */
.page-hero--compact { min-height: 0; padding-block: clamp(1.25rem, 3vw, 2rem); }
.page-hero--compact .page-hero__title { font-size: var(--fs-3xl); }
.page-hero--compact .breadcrumb { margin-bottom: var(--sp-3); }
.page-hero--compact .lead { max-width: 76ch; hyphens: none; text-wrap: pretty; }

.breadcrumb { font-size: var(--fs-sm); color: var(--c-text-dim); margin-bottom: var(--sp-4); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--c-text-dim); }
.breadcrumb a { color: var(--c-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-ink); text-decoration: underline; }

/* ==========================================================================
   08 · SECTIONS & KARTEN
   ========================================================================== */
.card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--c-border-strong); box-shadow: var(--shadow-md); }
.card h3 { margin-bottom: var(--sp-3); }
.card p { color: var(--c-text-muted); font-size: var(--fs-sm); }

.card__icon {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--c-red-soft);
  color: var(--c-red-text); margin-bottom: var(--sp-4);
}
.card__icon svg { width: 24px; height: 24px; }

.card--media { padding: 0; overflow: hidden; }
.card--media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card--media .card__body { padding: var(--sp-5); }

.numbered { counter-reset: hl; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.numbered li {
  display: grid; grid-template-columns: 3rem 1fr; gap: var(--sp-4); align-items: start;
  padding: var(--sp-4); background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  color: var(--c-text-muted); font-size: var(--fs-sm);
}
.numbered li::before {
  counter-increment: hl; content: counter(hl, decimal-leading-zero);
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 900;
  color: var(--c-red-text); line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Einstiegsschritte — der Weg vor dem Vertrag
   -------------------------------------------------------------------------- */
.steps {
  counter-reset: schritt; list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.step {
  position: relative; padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.step::before {
  counter-increment: schritt; content: counter(schritt, decimal-leading-zero);
  position: absolute; top: calc(var(--sp-5) * -1 + .2rem); left: var(--sp-5);
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: var(--r-full);
  background: var(--c-red); color: #fff;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 900;
  box-shadow: var(--shadow-red);
}
.step h3 { margin: var(--sp-5) 0 var(--sp-3); }
.step p { color: var(--c-text-muted); font-size: var(--fs-sm); margin: 0; }

/* --------------------------------------------------------------------------
   FPZ -- Therapieprogramme und der Einstieg zur Kostenpruefung
   -------------------------------------------------------------------------- */
.fpz { padding-block: clamp(3.5rem, 6vw, 5rem); overflow-wrap: anywhere; }
.fpz__intro { text-align: center; }
.fpz__intro h2 { margin: 0 auto var(--sp-4); }
.fpz__intro .lead { max-width: 56ch; margin: 0 auto; text-wrap: pretty; }
.fpz__actions { display: flex; justify-content: center; margin-top: var(--sp-5); }
.fpz__actions .btn { gap: var(--sp-3); text-transform: none; letter-spacing: 0; font-size: var(--fs-base); }
.fpz__programmes {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-6) var(--sp-5);
  margin: clamp(2.5rem, 4vw, 3.5rem) 0 0;
  padding-top: clamp(2rem, 3vw, 2.5rem);
  border-top: 1px solid var(--c-border);
  text-align: center;
}
.fpz__programmes > div {
  position: relative; flex: 0 1 calc((100% - 4 * var(--sp-5)) / 5); min-width: 0;
}
.fpz__icon {
  display: grid; place-items: center; width: 56px; height: 56px;
  margin: 0 auto var(--sp-3); border-radius: var(--r-full);
  color: var(--c-red-text); background: var(--c-red-soft);
}
.fpz__icon svg { width: 30px; height: 30px; }
.fpz__programmes dt { color: var(--c-ink); font-weight: 700; line-height: 1.4; }
.fpz__name { display: grid; place-items: center; min-height: 2.8em; text-wrap: balance; }
.fpz__programmes dd { max-width: 28ch; margin: var(--sp-2) auto 0; font-size: .9375rem; color: var(--c-text-muted); }
@media (max-width: 1100px) {
  .fpz__programmes > div { flex-basis: calc((100% - 2 * var(--sp-5)) / 3); }
}
@media (max-width: 640px) {
  .fpz__intro h2 { max-width: 24ch; }
  .fpz__programmes { gap: var(--sp-5); text-align: left; }
  .fpz__programmes > div { flex-basis: 100%; padding-left: 68px; }
  .fpz__icon { position: absolute; top: 0; left: 0; width: 48px; height: 48px; margin: 0; }
  .fpz__icon svg { width: 26px; height: 26px; }
  .fpz__name { display: block; min-height: 0; text-wrap: initial; }
  .fpz__programmes dd { max-width: none; margin: .375rem 0 0; }
}

/* --------------------------------------------------------------------------
   Power Plate -- kompakter Abschnitt vor dem FPZ-Check
   -------------------------------------------------------------------------- */
.power-plate { padding-block: clamp(3.5rem, 6vw, 5rem); overflow-wrap: anywhere; }
.power-plate__intro {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
}
.power-plate__copy h2 { max-width: 22ch; }
.power-plate__copy .lead { max-width: 48ch; margin-bottom: var(--sp-4); text-wrap: pretty; }
.power-plate__fact { margin: 0 0 var(--sp-6); font-size: var(--fs-sm); color: var(--c-text-muted); }
.power-plate__fact strong { color: var(--c-red-text); font-weight: 700; }
.power-plate__benefits {
  display: grid; list-style: none; padding: 0; margin: 0;
}
.power-plate__benefits li {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--sp-4);
  padding-block: var(--sp-5); border-bottom: 1px solid var(--c-border);
}
.power-plate__benefits li:first-child { padding-top: 0; }
.power-plate__benefits li:last-child { padding-bottom: 0; border-bottom: 0; }
.power-plate__index {
  grid-row: span 2; padding-top: .2rem;
  font-size: var(--fs-sm); font-weight: 700; color: var(--c-red-text);
}
.power-plate__benefits h3 { font-size: var(--fs-xl); line-height: 1.25; margin-bottom: var(--sp-2); }
.power-plate__benefits p { grid-column: 2; max-width: 42ch; margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
@media (max-width: 760px) {
  .power-plate__intro { grid-template-columns: minmax(0, 1fr); }
  .power-plate__benefits { padding-top: var(--sp-6); border-top: 1px solid var(--c-border); }
  .power-plate__benefits li { grid-template-columns: 1.5rem minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Zitat -- steht auf gesundheit.html im Abschnitt Physiotherapie
   -------------------------------------------------------------------------- */
.quote {
  margin: 0 0 var(--sp-5); padding: var(--sp-2) 0;
}
.quote p {
  font-family: var(--font-display); font-size: var(--fs-xl);
  line-height: 1.35; letter-spacing: -.01em; color: var(--c-ink);
  text-wrap: balance;
}
.quote__mark { color: var(--c-red-text); font-weight: 800; }
.quote footer { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-dim); }

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.split > * { min-width: 0; }
/* Zentrieren passt nur bei Text neben Bild -- bei ungleich hohen Textspalten
   rutscht sonst die Ueberschrift gegen die Nachbarspalte. */
.split--top { align-items: start; }
/* Die Hinweisbox schliesst mit dem Foto ab; die Bildpunkte liegen darunter.
   Mobil bleiben Text, Hinweis und Karussell in ihrer normalen Lesereihenfolge. */
.split--recovery { grid-template-columns: minmax(0, 1fr); }
.split--recovery .note p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .split--recovery { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .split--recovery .shots__dots { position: absolute; top: 100%; left: 0; right: 0; }
}

.split__media {
  position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--c-border); box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}
.split__media img,
.split__media video { width: 100%; height: 100%; object-fit: cover; background: var(--c-surface-2); }
/* Videos werden nicht angeschnitten -- lieber Balken als ein halber Kopf. */
.split__media video { object-fit: contain; background: #000; }
/* Hochformat (Reels): in voller Spaltenbreite wuerde so ein Video die halbe
   Seite hoch werden -- deshalb schmal und mittig in seiner Spalte. */
.split__media--hoch { max-width: 300px; margin-inline: auto; }
/* Hochformatiges Portrait in der Bildspalte (Physiotherapie): ueber die volle
   Spaltenbreite waere es doppelt so hoch wie der Text daneben. */
.split__media--portrait { max-width: 380px; margin-inline: auto; }
.split--reverse .split__media { order: 2; }
@media (max-width: 780px) { .split--reverse .split__media { order: 0; } }

/* --------------------------------------------------------------------------
   Impressionen — Karussell auf der Startseite

   Grundlage ist eine horizontal scrollbare Liste mit Scroll-Snap: ohne
   JavaScript kann man wischen und scrollen, alle Bilder bleiben erreichbar.
   main.js legt nur Pfeile, Punkte und den Selbstlauf obendrauf.
   -------------------------------------------------------------------------- */
.shots { position: relative; }
.shots__viewport {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--c-border); box-shadow: var(--shadow-sm);
  background: var(--c-surface-2);
}
.shots__track {
  display: flex; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.shots__track::-webkit-scrollbar { display: none; }
.shot {
  /* isolation: sonst rutschen Bild und Verlauf mit ihrem negativen z-index
     hinter den Hintergrund des Rahmens und man sieht nur graue Flaeche. */
  position: relative; isolation: isolate;
  flex: 0 0 100%; scroll-snap-align: center;
  aspect-ratio: 3 / 2; display: flex; align-items: flex-end;
}
.shot img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.shot::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(9,11,13,.86) 0, rgba(9,11,13,.34) 34%, rgba(9,11,13,0) 62%);
}
.shot__name {
  font-family: var(--font-display); font-weight: 800; color: #fff;
  font-size: var(--fs-xl); letter-spacing: -.01em;
  padding: var(--sp-5) clamp(1.1rem, .7rem + 1.4vw, 2rem);
  text-shadow: 0 1px 12px rgba(9,11,13,.45);
}

/* Pfeile: nur mit JavaScript sichtbar, sonst wischt man einfach */
.shots__nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  display: none; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  color: var(--c-ink); background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-md);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.shots.is-live .shots__nav { display: grid; }
.shots__nav:hover { background: #fff; transform: scale(1.06); }
.shots__nav svg { width: 22px; height: 22px; }
.shots__nav--prev { left: clamp(.5rem, .2rem + 1vw, 1rem); }
.shots__nav--prev svg { rotate: 180deg; }
.shots__nav--next { right: clamp(.5rem, .2rem + 1vw, 1rem); }

/* Punkte: ohne JavaScript nutzlos, deshalb erst mit .is-live sichtbar */
.shots__dots {
  display: none; justify-content: center; flex-wrap: wrap;
  gap: var(--sp-2); margin-top: var(--sp-4);
}
.shots.is-live .shots__dots { display: flex; }
.shots__dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  cursor: pointer; background: var(--c-border-strong);
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.shots__dot:hover { background: var(--c-text-dim); }
.shots__dot[aria-current="true"] { width: 26px; border-radius: 999px; background: var(--c-red); }

@media (min-width: 780px) {
  /* 16:9, aber gedeckelt: sonst fuellt eine Folie auf grossen Schirmen
     fast das ganze Fenster. */
  .shot { aspect-ratio: 16 / 9; max-height: 64vh; }
}

/* Dasselbe Karussell klein, in der Bildspalte eines .split (studio.html).
   Format und Rahmen wie beim Standbild daneben, damit die Abschnitte
   nebeneinander gleich aussehen -- nur Pfeile und Schrift eine Nummer
   kleiner, weil die Flaeche halb so breit ist. */
.shots--split .shots__viewport { box-shadow: var(--shadow-md); }
.shots--split .shot { aspect-ratio: 4 / 3; max-height: none; }
.shots--split .shots__nav { width: 36px; height: 36px; }
.shots--split .shots__nav svg { width: 18px; height: 18px; }
.shots--split .shot__name {
  font-size: var(--fs-lg);
  padding: var(--sp-4) clamp(.9rem, .6rem + 1vw, 1.4rem);
}

/* Wer Bewegung reduziert haben will, bekommt keinen Selbstlauf (siehe main.js)
   und keine weichen Sprünge. */
@media (prefers-reduced-motion: reduce) {
  .shots__nav { transition: none; }
  .shots__dot { transition: none; }
}

.promo {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); border: 1px solid rgba(226,35,26,.28);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(226,35,26,.12), transparent 62%),
    var(--c-surface);
  box-shadow: var(--shadow-md);
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-6); align-items: center;
}
/* Geschrieben wie die Betraege auf der Tarifseite: "0 €" auf einer Zeile,
   das Waehrungszeichen in voller Groesse statt hochgestellt. Darunter die
   Bildunterschrift klein und gesperrt -- das Paar traegt den Weissraum,
   ohne dass es eine Scheibe oder einen Rahmen dafuer braucht. */
.promo__price {
  margin: 0; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3.5rem, 1.5rem + 8vw, 6.5rem);
  line-height: .95; letter-spacing: -.05em; color: var(--c-red);
}
/* Auf Displaygroesse wirkt das normale Wortleerzeichen zu breit -- der
   Abstand zum Euro-Zeichen wird deshalb optisch gesetzt. */
.promo__price span { margin-left: .14em; }
.promo__price-note {
  margin: var(--sp-4) 0 0; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-dim);
}
/* Zweite Zeile unter dem Betrag: der Fall ausserhalb der Betreuungszeiten.
   Bewusst kleiner und ohne Sperrung -- sie ist die Ausnahme, nicht die
   Ueberschrift, muss aber neben der 0 stehen und nicht im Fliesstext. */
.promo__price-alt {
  margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--c-text-muted);
}
.promo__price-alt strong { color: var(--c-ink); white-space: nowrap; }
.promo__list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-2); }
/* Kein Flex-Container: sonst wird jeder Textabschnitt neben einem <strong>
   zu einem eigenen Flex-Item und der Satz reisst mit Luecken auseinander. */
.promo__list li {
  position: relative; padding-left: 1.5rem; color: var(--c-text-muted);
}
.promo__list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--c-red-text); font-weight: 800;
}

.note {
  border-left: 3px solid var(--c-red);
  background: var(--c-surface);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-4) var(--sp-5);
  color: var(--c-text-muted); font-size: var(--fs-sm);
  box-shadow: var(--shadow-sm);
}
.note strong { color: var(--c-ink); }
.note p { max-width: none; }

/* Partnerlogos */
.partners {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3); align-items: stretch;
}
.partner {
  display: grid; place-items: center; padding: var(--sp-3) var(--sp-4); min-height: 88px;
  background: #fff; border-radius: var(--r-md); border: 1px solid var(--c-border);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.partner:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.partner img { max-height: 52px; width: auto; max-width: 100%; object-fit: contain; background: none; }

/* Auszeichnungen & Siegel */
.seals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.seal {
  margin: 0; display: grid; gap: var(--sp-3); justify-items: center; text-align: center;
  padding: var(--sp-4); background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
/* Alle drei Logos stehen in derselben festen Box und sitzen darin mittig --
   sonst faengt die Zeile unter ungleich hohen Bildern an zu wackeln.
   Innerhalb der Box zaehlt aber nicht die Hoehe, sondern die Flaeche: eine
   breite Wortmarke wirkt bei gleicher Hoehe doppelt so gross wie ein hohes,
   schmales Siegel. Die Innenabstaende unten nehmen genau das zurueck, bis
   alle drei gleich schwer wirken. */
.seal img {
  height: 76px; width: 150px; max-width: 100%;
  object-fit: contain; background: none;
}
/* Fast quadratisch (Medical Active) */
.seal__img--quadratisch { padding-block: 6px; }
/* Deutlich breiter als hoch (Healing Humans) */
.seal__img--breit { padding-block: 11px; }
/* Healing-Humans-Logo liegt nur in Weiss vor und waere auf der hellen Kachel
   unsichtbar -- invert dreht es in Schwarz, passend zu den anderen Siegeln. */
.seal__img--invert { filter: invert(1); }
.seal figcaption { font-size: var(--fs-xs); color: var(--c-text-dim); line-height: 1.45; }
.seal b { display: block; color: var(--c-ink); font-size: var(--fs-sm); }

/* 24/7-Hinweisblock -- steht auf kontakt.html unter der Kachelreihe und ist
   die einzige Stelle, an der die Oeffnungszeiten als solche stehen.
   Weisse Karte wie die Kacheln darueber, keine eingefaerbte Flaeche: die
   Reihe und dieser Block sind dieselbe Auskunft, und ein roter Verlauf hat
   den Block davon abgehoben, statt ihn dazuzustellen. Die Farbe traegt
   allein die grosse 24/7, die Haarlinie daneben trennt Zahl und Text. */
.open247 {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: clamp(1.25rem, .8rem + 2vw, 2.5rem);
  padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
  border-radius: var(--r-xl); border: 1px solid var(--c-border);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
}
.open247__value {
  margin: 0;
  font-family: var(--font-display); font-weight: 900; line-height: .9;
  font-size: clamp(2.75rem, 2rem + 4vw, 4.5rem); letter-spacing: -.04em; color: var(--c-red);
}
.open247__text {
  min-width: 0;
  border-left: 1px solid var(--c-border);
  padding-left: clamp(1.25rem, .8rem + 2vw, 2.5rem);
}
/* Abstand zur Kachelreihe darueber -- die beiden gehoeren zusammen, deshalb
   der Abstand einer Kachelluecke und keine ganze Abschnittshoehe. */
.contact-tiles + .open247 { margin-top: var(--sp-6); }
.open247 h2 {
  font-size: var(--fs-2xl); margin-bottom: var(--sp-3); letter-spacing: -.015em;
}
.open247 p { color: var(--c-text-muted); max-width: 62ch; }
.open247__text p { text-wrap: balance; overflow-wrap: break-word; }
.open247 p:last-child { margin-bottom: 0; }
.open247 strong { color: var(--c-ink); }
/* Einspaltig steht die Zahl ueber dem Text, die Trennlinie legt sich quer --
   mittig gesetzt stuende die Ziffer sonst neben nichts. */
@media (max-width: 560px) {
  .open247 { grid-template-columns: 1fr; align-items: start; }
  .open247__text {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--c-border); padding-top: var(--sp-4);
  }
}

.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .9rem; border-radius: var(--r-full);
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
.pill svg { width: 15px; height: 15px; }
.pill--live { background: var(--c-red); color: #fff; box-shadow: var(--shadow-red); }

.embed {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--c-border); background: var(--c-surface-3);
  box-shadow: var(--shadow-md);
}
.embed video, .embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.embed--tall iframe { aspect-ratio: auto; min-height: 620px; }
/* Karte als breiter Streifen statt 16:9-Kachel: laeuft ueber die volle
   Containerbreite, bleibt aber flach genug, um den Abschnitt nicht zu
   erschlagen. */
.embed--map iframe { aspect-ratio: 21 / 9; }
.embed--map .consent-gate { min-height: 280px; }
@media (max-width: 780px) { .embed--map iframe { aspect-ratio: 4 / 3; } }

.consent-gate {
  display: grid; place-items: center; gap: var(--sp-4); text-align: center;
  padding: clamp(2rem, 5vw, 4rem); min-height: 320px;
  background: repeating-linear-gradient(45deg, var(--c-hover) 0 10px, transparent 10px 20px), var(--c-surface-2);
}
.consent-gate p { color: var(--c-text-muted); font-size: var(--fs-sm); max-width: 46ch; }
.consent-gate svg { width: 40px; height: 40px; color: var(--c-red-text); }

/* ==========================================================================
   09 · KURSPLAN
   ========================================================================== */
.plan-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-6); padding: var(--sp-4);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.filter-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.filter-group__label {
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-text-dim); margin-right: var(--sp-2);
}
.chip {
  padding: .45rem 1rem; background: transparent;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-full);
  color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; transition: all var(--dur-fast) var(--ease);
}
.chip:hover { color: var(--c-ink); border-color: var(--c-ink); }
.chip[aria-pressed="true"] { background: var(--c-red-600); border-color: var(--c-red-600); color: #fff; }

.legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-sm); color: var(--c-text-muted); }
.legend span { display: inline-flex; align-items: center; gap: .5rem; }
.legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c-studio); flex: none; }
.legend .is-zoom i { background: var(--c-zoom); }

.day { margin-bottom: var(--sp-7); }
.day.is-hidden { display: none; }
.day__head {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.day__name {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 900;
  text-transform: uppercase; letter-spacing: -.02em; margin: 0;
}
.day__count { font-size: var(--fs-sm); color: var(--c-text-dim); }
/* align-items: start — sonst zieht eine aufgeklappte Karte alle Nachbarn
   in derselben Zeile auf ihre Höhe und hinterlässt leere Flächen. */
.courses {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--sp-4); align-items: start;
}

.course {
  position: relative; overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--sp-5) var(--sp-4) var(--sp-4);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.course:hover { transform: translateY(-3px); border-color: var(--c-border-strong); box-shadow: var(--shadow-md); }
.course::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--c-studio); }
.course[data-type~="zoom"]::before { background: var(--c-zoom); }
/* Kurse, die im Studio UND per Zoom laufen */
.course[data-type~="studio"][data-type~="zoom"]::before {
  background: linear-gradient(90deg, var(--c-studio) 0 50%, var(--c-zoom) 50% 100%);
}
.course.is-hidden { display: none; }

.course__time { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 800; color: var(--c-ink); letter-spacing: -.01em; display: block; font-variant-numeric: tabular-nums; }
.course__name { font-size: var(--fs-base); font-weight: 700; margin: var(--sp-2) 0 var(--sp-3); color: var(--c-text); font-family: var(--font-body); letter-spacing: 0; }
.course__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-muted); }
.course__tag {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem; border: 1px solid var(--c-border);
  border-radius: var(--r-full); background: var(--c-surface-2);
}
.course__note { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--c-red-text); font-weight: 600; }

.plan-empty {
  display: none; padding: var(--sp-7); text-align: center; color: var(--c-text-muted);
  background: var(--c-surface); border: 1px dashed var(--c-border-strong); border-radius: var(--r-lg);
}
.plan-empty.is-visible { display: block; }

/* --------------------------------------------------------------------------
   Kurse (kurse.html) — Beschreibung klappt in der Kurskarte auf
   -------------------------------------------------------------------------- */
.plan-hinweis {
  margin: 0; display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; border-radius: var(--r-full);
  background: var(--c-red-soft); color: var(--c-red-text);
  font-size: var(--fs-base); font-weight: 700; max-width: none;
}
.plan-hinweis svg { width: 1.1em; height: 1.1em; flex: none; }

.kurs-infos {
  display: grid; gap: var(--sp-2);
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}
.kurs-infos p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); max-width: none; }
.kurs-infos strong { color: var(--c-ink); }

/* Aufklappbare Karte: <summary> traegt Zeit, Name und Tags */
.course__details { position: relative; }
.course__kopf {
  display: block; cursor: pointer; list-style: none;
  padding-right: 1.75rem;
}
.course__kopf::-webkit-details-marker { display: none; }

/* Eigener Pfeil statt des Browser-Dreiecks */
.course__details .course__kopf::after {
  content: ""; position: absolute; top: .35rem; right: 0;
  width: 9px; height: 9px; border-right: 2px solid var(--c-text-dim);
  border-bottom: 2px solid var(--c-text-dim); border-radius: 1px;
  transform: rotate(45deg); transform-origin: center;
  transition: transform var(--dur) var(--ease), border-color var(--dur-fast) var(--ease);
}
.course__details[open] .course__kopf::after {
  transform: rotate(-135deg); border-color: var(--c-red);
}
.course__kopf:hover .course__name { color: var(--c-red-text); }
.course__kopf:focus-visible { outline: 3px solid var(--c-red); outline-offset: 4px; border-radius: var(--r-sm); }

.course__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.course__panel {
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
}
.course__panel p { margin: 0 0 .4rem; max-width: none; }
.course__panel p:last-child { margin-bottom: 0; }
.course__anmeldung {
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-red-text);
}

/* ==========================================================================
   10 · PREISE
   ========================================================================== */
/* Vier Karten, ein Raster: Name, Beschreibung, Preis und Leistungen stehen
   in jeder Karte auf derselben Linie. Das uebernimmt subgrid -- die Karte
   erbt die Zeilen des Rasters, statt ihre Inhalte selbst zu verteilen.
   Deshalb hier feste Spaltenzahlen statt auto-fit: nur so ist bekannt,
   wie viele Kartenreihen entstehen. */
.price-grid {
  display: grid; gap: var(--sp-5); align-items: stretch;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Vier Spalten erst, wenn der Container seine volle Breite hat -- darunter
   zwei mal zwei statt drei plus eine verwaiste Karte. */
@media (max-width: 1279px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .price-grid { grid-template-columns: minmax(0, 1fr); } }

.price {
  display: flex; flex-direction: column;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.price:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.price--featured {
  border-color: var(--c-red);
  background: radial-gradient(120% 100% at 50% 0%, rgba(226,35,26,.09), transparent 60%), var(--c-surface);
  box-shadow: var(--shadow-red);
}
.price__flag, .price:not(.price--featured)::before {
  align-self: flex-start; justify-self: start;
  background: var(--c-red-600); color: #fff;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: .25rem .75rem; border-radius: var(--r-full); margin-bottom: var(--sp-4);
}
.price__name { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800; text-transform: uppercase; margin: 0; }
/* Der lange Tarifname bricht nur zwischen "Studierende" und "& Azubis" um. */
.price__name-part { white-space: nowrap; }
/* Obergrenze bewusst niedrig: "ab 13,90 €" muss in eine schmale Tarifkarte
   passen, sonst bricht der Betrag vom Waehrungszeichen ab. */
.price__value {
  font-family: var(--font-display); font-size: clamp(2.25rem, 1.6rem + 1.9vw, 2.875rem);
  font-weight: 900; letter-spacing: -.04em; line-height: 1.05; color: var(--c-ink);
  margin-block: var(--sp-3); text-wrap: balance;
}
.price__value small { display: block; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em; color: var(--c-text-dim); margin-top: .5rem; }
.price__features {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-2); flex: 1;
  align-content: start;   /* sonst zieht das Grid die Punkte auseinander */
}
.price__features li {
  position: relative; padding-left: 1.5rem;
  font-size: var(--fs-sm); color: var(--c-text-muted);
}
.price__features li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--c-red-text); font-weight: 800;
}

/* Alternative Laufzeit: eigene Zeile unter den Leistungen, damit sie in
   allen Karten auf derselben Linie steht */
.price__cta { margin-top: var(--sp-5); }

.price__alt {
  position: relative; margin: var(--sp-4) 0 0; padding: var(--sp-3) 0 0 1.5rem;
  border-top: 1px dashed var(--c-border);
  font-size: var(--fs-xs); color: var(--c-text-muted);
  align-self: end;
}
.price__alt::before {
  content: "↳"; position: absolute; left: 0; top: var(--sp-3);
  color: var(--c-text-dim);
}

@supports (grid-template-rows: subgrid) {
  @media (min-width: 641px) {
    .price-grid { grid-template-rows: repeat(6, auto); }
    .price { display: grid; grid-row: span 6; grid-template-rows: subgrid; }
    .price__cta { grid-row: -2 / -1; align-self: stretch; }
    /* Karten ohne Flagge halten deren Zeile frei, sonst rutschen ihre Namen hoch */
    .price:not(.price--featured)::before { content: "Beliebtester Tarif"; visibility: hidden; }
  }
  @media (min-width: 641px) and (max-width: 1279px) {
    .price-grid { grid-template-rows: repeat(12, auto); }
  }
}

/* ==========================================================================
   11 · TEAM
   ========================================================================== */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-5); }

.member {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.member:hover { transform: translateY(-4px); border-color: var(--c-border-strong); box-shadow: var(--shadow-md); }
.member__photo { aspect-ratio: 3 / 4; width: 100%; height: auto; object-fit: cover; background: var(--c-surface-2); display: block; }
/* Fuer wen es (noch) kein Foto gibt: dieselbe Kachel mit den Initialen.
   Bewusst hell wie der Rest der Seite -- der frueher dunkle Verlauf stammt
   noch aus dem Dark-Mode-Entwurf und faellt zwischen echten Portraits auf. */
.member__photo--initialen {
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 3rem; font-weight: 900;
  color: var(--c-text-dim); background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
}
.member__body { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.member__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 800; margin: 0 0 .15rem; }
.member__role { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--c-red-text); font-weight: 700; margin-bottom: var(--sp-3); }
.member__quals { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.member__quals li { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.45; }

/* ==========================================================================
   12 · ACCORDION
   ========================================================================== */
.accordion { display: grid; gap: var(--sp-3); }
.acc-item {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm);
}
.acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); background: transparent; border: 0; text-align: left;
  cursor: pointer; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--c-text);
}
.acc-trigger:hover { color: var(--c-ink); background: var(--c-hover); }
.acc-icon { flex: none; width: 22px; height: 22px; position: relative; }
.acc-icon::before, .acc-icon::after {
  content: ""; position: absolute; background: var(--c-red-text); border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.acc-icon::before { top: 10px; left: 0; width: 22px; height: 2px; }
.acc-icon::after  { left: 10px; top: 0; width: 2px; height: 22px; }
.acc-trigger[aria-expanded="true"] .acc-icon::after { transform: rotate(90deg); opacity: 0; }
.acc-panel { padding: 0 var(--sp-5) var(--sp-5); color: var(--c-text-muted); }
.acc-panel[hidden] { display: none; }

/* ==========================================================================
   13 · TABELLEN
   ========================================================================== */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--c-border);
  border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--shadow-sm);
}
table.hours { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 420px; }
table.hours caption {
  text-align: left; padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg);
  color: var(--c-ink); background: var(--c-surface-2);
}
table.hours th, table.hours td { padding: .875rem var(--sp-5); text-align: left; border-top: 1px solid var(--c-border); vertical-align: top; }
table.hours th { font-weight: 700; color: var(--c-text); width: 40%; white-space: nowrap; }
table.hours td { color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
table.hours tbody tr:hover { background: var(--c-hover); }
table.hours tr.is-today { background: var(--c-red-soft); }
table.hours tr.is-today th { color: var(--c-red-text); }

/* ==========================================================================
   14 · FORMULARE
   ========================================================================== */
.form { display: grid; gap: var(--sp-4); }
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.field .hint { font-size: var(--fs-xs); color: var(--c-text-dim); }
.req { color: var(--c-red-text); }

.input, .textarea, .select {
  width: 100%; padding: .8rem 1rem;
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md); color: var(--c-text);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--c-text-dim); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--c-red); background: var(--c-surface); outline: none; }
.textarea { min-height: 150px; resize: vertical; }

.checkbox { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--c-text-muted); }
.checkbox input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--c-red); flex: none; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }

.contact-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }

/* Die vier Wege auf der Kontaktseite: Telefon, E-Mail, Betreuungszeiten,
   Kuendigung -- alle vier gleich breit, auf schmalen Schirmen untereinander. */
.tile {
  display: flex; gap: var(--sp-4); padding: var(--sp-5);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.tile:hover { border-color: var(--c-red); transform: translateY(-3px); color: inherit; box-shadow: var(--shadow-md); }
.tile svg { width: 26px; height: 26px; color: var(--c-red-text); flex: none; }
.tile__label { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-dim); display: block; margin-bottom: .2rem; }
.tile__value { font-weight: 700; color: var(--c-ink); word-break: break-word; text-wrap: balance; }

/* ==========================================================================
   15 · FOOTER
   ========================================================================== */
/* --------------------------------------------------------------------------
   Abschlussband — der eine Moment, in dem die Marke laut sein darf.
   Eigener Token-Satz statt Sonderregeln, wie bei .tone-dark.
   -------------------------------------------------------------------------- */
.cta-band {
  --c-ink:           #ffffff;
  --c-text:          rgba(255, 255, 255, .95);
  --c-text-muted:    rgba(255, 255, 255, .94);
  --c-red:           rgba(255, 255, 255, .90);   /* Strich der Eyebrow */
  --c-red-text:      #ffffff;
  --c-bg:            var(--c-red-700);           /* Grundfarbe der Buttons */
  --c-border-strong: rgba(255, 255, 255, .55);
  --c-hover:         rgba(255, 255, 255, .14);

  position: relative; overflow: hidden; text-align: center;
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
  background:
    radial-gradient(90% 120% at 50% 0%, #d01c14, transparent 70%),
    linear-gradient(180deg, #c4160f 0%, #a51009 100%);
  color: var(--c-text);
}
.cta-band h2 { text-transform: uppercase; letter-spacing: -.03em; color: #fff; }
.cta-band p { margin-inline: auto; color: var(--c-text-muted); }
.cta-band .btn-row { justify-content: center; margin-top: var(--sp-6); }
.cta-band .btn:hover { box-shadow: 0 12px 30px -10px rgba(0,0,0,.45); }
.cta-band__note { margin-top: var(--sp-3); font-size: var(--fs-sm); opacity: .82; }
.cta-band__aside { margin-top: var(--sp-5); font-size: var(--fs-sm); }
.cta-band__aside a { color: #fff; font-weight: 700; text-underline-offset: 4px; }

.site-footer {
  background: var(--c-surface);
}
.site-footer--compact {
  background: var(--c-bg-alt);
}

/* Betreuungszeiten-Band -- steht als eigener Abschnitt direkt vor dem roten
   Abschlussband und ist die einzige Stelle, an der die Betreuungszeiten
   vollstaendig stehen. Deshalb bewusst gross: Karte auf abgesetztem Grund. */
.hours-band {
  background: var(--c-bg-alt);
  border-top: 1px solid var(--c-border);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.hours-band__inner {
  display: grid; grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.3fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: center;
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-md);
}
.hours-band__lead { display: grid; gap: var(--sp-4); justify-items: start; }
/* Das Badge gehoert zur Ueberschrift und rueckt naeher an sie heran, die
   der Hinweis darunter steht weiter ab -- bei gleichen Abstaenden
   ueberall fuehrt nichts und der Block zerfaellt in vier lose Zeilen. */
.hours-band__lead h2 {
  font-size: var(--fs-2xl); line-height: var(--lh-tight);
  margin: calc(var(--sp-2) * -1) 0 var(--sp-1); letter-spacing: -.015em;
}
.hours-band__lead p { color: var(--c-text-muted); margin: 0; max-width: 46ch; }
/* Der Feiertagshinweis steht direkt neben den regulaeren Betreuungszeiten. */
.hours-band__lead .hours-band__note {
  margin: 0; font-size: var(--fs-sm); color: var(--c-text); line-height: 1.55;
  border-left: 3px solid var(--c-red);
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
}

/* Wochenraster: weisse Zellen mit Haarlinien dazwischen statt grauer
   Kacheln auf grauem Grund. Als graues Raster stand die Tabelle wie ein
   Fremdkoerper neben der weissen Karte -- jetzt ist sie Teil davon. */
.care-hours {
  margin: 0; display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
/* Gleicher Schriftschnitt wie die Wochentage darunter, nur kleiner und
   gesperrt: die Zeile ist die Ueberschrift der Tabelle, keine Fussnote. */
.care-hours__title {
  grid-column: 1 / -1; background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
  padding: .6rem .9rem; font-size: var(--fs-xs);
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-muted);
}
.care-day {
  padding: .95rem .4rem 1.05rem; text-align: center;
  border-left: 1px solid var(--c-border);
}
.care-hours__title + .care-day { border-left: 0; }
.care-day dt {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-base);
  color: var(--c-ink); margin-bottom: .4rem;
}
.care-day dd {
  margin: 0; display: grid; gap: .2rem;
  font-size: var(--fs-sm); color: var(--c-text-muted); font-variant-numeric: tabular-nums;
}
/* Heutiger Tag -- roter Balken oben ueber der eingefaerbten Spalte: so ist
   die Markierung als solche zu lesen und nicht als Farbfleck. */
.care-day.is-today {
  background: var(--c-red-soft);
  box-shadow: inset 0 3px 0 var(--c-red);
}
.care-day.is-today dt { color: var(--c-red-text); }
.care-day.is-today dd { color: var(--c-text); }
.care-day.is-today dt::after {
  content: "heute"; display: block; margin-top: .15rem;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--c-red-text);
}
@media (max-width: 940px) { .hours-band__inner { grid-template-columns: 1fr; } }
/* Auf schmalen Displays als Liste statt Wochenraster — sonst bleiben Zellen leer */
@media (max-width: 560px) {
  .care-hours { grid-template-columns: 1fr; }
  .care-day {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--sp-4); text-align: left; padding: .6rem .85rem;
    border-left: 0; border-top: 1px solid var(--c-border);
  }
  .care-hours__title + .care-day { border-top: 0; }
  .care-day dt { margin-bottom: 0; }
  .care-day.is-today dt::after { display: inline; margin: 0 0 0 .4rem; }
  .care-day dd { grid-auto-flow: column; gap: .6rem; font-size: var(--fs-sm); }
}

/* Drei mittig ausgerichtete Bereiche und eine gemeinsame Abschlusszeile. */
.footer-top {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2rem, 3.5vw, 3rem);
  align-items: start; text-align: center;
}
.footer-col { min-width: 0; }
.site-footer a {
  color: var(--c-text-muted); text-decoration: none;
  text-underline-offset: .3em; overflow-wrap: anywhere;
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.site-footer a:hover { color: var(--c-ink); text-decoration: underline; }
.site-footer a:focus-visible { outline: 2px solid var(--c-red-text); outline-offset: 4px; border-radius: 2px; }
.footer-heading {
  margin: 0 0 var(--sp-4); font-size: var(--fs-base); line-height: 1.5;
  font-weight: 750; letter-spacing: -.01em;
  color: var(--c-ink);
}
.footer-brand { display: grid; gap: var(--sp-4); justify-items: center; }
.footer-brand .brand img { width: 172px; max-width: 100%; height: auto; }
.footer-claim { max-width: 27ch; margin: 0; font-size: .9375rem; color: var(--c-text-muted); }
.footer-social { display: flex; gap: .75rem; }
.footer-social a {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md); color: var(--c-text);
}
.footer-social a:hover { background: var(--c-red-600); border-color: var(--c-red-600); color: #fff; }
.footer-social svg { width: 19px; height: 19px; }
.footer-contact { display: grid; justify-items: center; margin: 0 0 var(--sp-3); font-size: .9375rem; font-style: normal; }
.footer-contact a { display: flex; align-items: center; min-height: 36px; max-width: 100%; }
.footer-contact .footer-phone {
  color: var(--c-ink); font-family: var(--font-display); font-size: 1.125rem;
  font-weight: 700; letter-spacing: -.01em;
}
.footer-address { margin: 0 0 var(--sp-2); font-size: .9375rem; font-style: normal; color: var(--c-text-muted); }
.footer-route { display: inline-flex; align-items: center; gap: .5rem; min-height: 36px; font-size: .9375rem; }
.footer-route span { color: var(--c-red-text); font-size: 1.25rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links a { display: flex; align-items: center; justify-content: center; min-height: 36px; width: fit-content; max-width: 100%; margin-inline: auto; font-size: .9375rem; }

.footer-bottom {
  border-top: 1px solid var(--c-border);
  padding: var(--sp-4) 4rem;
  display: flex; flex-wrap: wrap; gap: 0 var(--sp-7);
  align-items: center; justify-content: center;
  text-align: center;
  font-size: var(--fs-sm); color: var(--c-text-dim);
}
.footer-bottom p { margin: 0; color: inherit; }
.footer-bottom nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem var(--sp-5); }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom a[aria-current="page"] { color: var(--c-ink); text-decoration: underline; }
@media (max-width: 900px) {
  .footer-bottom { flex-direction: column; padding-inline: 0; }
}
@media (max-width: 760px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .footer-claim { max-width: 34ch; }
  .footer-contact a, .footer-route, .footer-links a { min-height: 44px; }
}
@media (max-width: 560px) {
  /* Platz fuer die schwebenden Bedienelemente unter den Rechtslinks. */
  .site-footer:not(.site-footer--compact) .footer-bottom { padding-bottom: 4.5rem; }
}

/* ==========================================================================
   16 · COOKIE-BANNER
   ========================================================================== */
.cookie {
  position: fixed; left: 50%; bottom: var(--sp-4);
  transform: translate(-50%, 140%); z-index: 1100;
  width: min(100% - 2rem, 900px);
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: var(--sp-5);
  transition: transform var(--dur-slow) var(--ease);
  max-height: calc(100vh - 2rem); overflow-y: auto;
}
.cookie.is-open { transform: translate(-50%, 0); }
.cookie h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.cookie p { font-size: var(--fs-sm); color: var(--c-text-muted); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.cookie__details { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.cookie__details[hidden] { display: none; }

.consent-row {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start;
  padding: var(--sp-4); background: var(--c-surface-2);
  border-radius: var(--r-md); border: 1px solid var(--c-border);
}
.consent-row h3 { font-size: var(--fs-base); margin-bottom: .25rem; font-family: var(--font-body); font-weight: 700; }
.consent-row p { font-size: var(--fs-xs); margin: 0; }

.switch { position: relative; display: inline-block; width: 48px; height: 27px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track {
  position: absolute; inset: 0; background: var(--c-surface-3);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-full);
  transition: background var(--dur-fast) var(--ease); pointer-events: none;
}
.switch .track::before {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 19px; height: 19px; background: #fff; border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease);
}
.switch input:checked + .track { background: var(--c-red-600); border-color: var(--c-red-600); }
.switch input:checked + .track::before { transform: translateX(21px); }
.switch input:disabled + .track { opacity: .55; }
.switch input:focus-visible + .track { outline: 3px solid var(--c-red); outline-offset: 2px; }

/* ==========================================================================
   17 · CHAT-WIDGET (Word-Spotting)
   --------------------------------------------------------------------------
   Nur die Optik folgt dem hellen Grundton -- Logik und Wissensbasis
   (assets/js/chatbot.js, assets/js/knowledge.json) bleiben unveraendert.
   ========================================================================== */
.chat-launcher {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 1000;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.3rem; background: var(--c-red-600); color: #fff;
  border: 0; border-radius: var(--r-full);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); letter-spacing: .04em;
  cursor: pointer; box-shadow: 0 12px 34px -8px rgba(226,35,26,.55);
  transition: transform var(--dur) var(--ease), background var(--dur-fast) var(--ease), opacity var(--dur) var(--ease);
}
.chat-launcher:hover { transform: translateY(-3px); background: var(--c-red); }
.chat-launcher svg { width: 20px; height: 20px; }
.chat-launcher.is-hidden { opacity: 0; pointer-events: none; transform: scale(.85); }

.chat-panel {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 1050;
  width: min(calc(100vw - 2rem), 390px);
  height: min(calc(100vh - 2rem), 600px);
  display: flex; flex-direction: column;
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.98);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.chat-panel.is-open { opacity: 1; visibility: visible; transform: none; }

.chat-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); flex: none; }
.chat-head__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--c-red-600); display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; color: #fff; flex: none; }
.chat-head__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-base); line-height: 1.2; color: var(--c-ink); }
.chat-head__status { font-size: var(--fs-xs); color: var(--c-zoom); display: flex; align-items: center; gap: .35rem; }
.chat-head__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-zoom); }
.chat-close {
  margin-left: auto; width: 34px; height: 34px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--c-border); border-radius: var(--r-sm);
  color: var(--c-text-muted); cursor: pointer;
}
.chat-close:hover { color: var(--c-ink); border-color: var(--c-border-strong); }
.chat-close svg { width: 16px; height: 16px; }

.chat-log { flex: 1; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); scrollbar-width: thin; }
.msg { max-width: 88%; padding: .7rem .95rem; border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.55; }
.msg p { margin: 0 0 .4rem; max-width: none; }
.msg p:last-child { margin-bottom: 0; }
.msg a { color: var(--c-red-text); }
.msg--bot { background: var(--c-surface-2); border: 1px solid var(--c-border); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg--user { background: var(--c-red-600); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.msg--user a, .msg--user strong { color: #fff; }
.msg ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.msg li { margin-bottom: .2rem; }

.chat-quick { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-3); flex: none; }
.chat-quick button {
  padding: .35rem .8rem; background: transparent;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-full);
  color: var(--c-text-muted); font-size: var(--fs-xs); cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.chat-quick button:hover { background: var(--c-surface-2); color: var(--c-ink); border-color: var(--c-red); }

.chat-form { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) .5rem; border-top: 1px solid var(--c-border); flex: none; }
.chat-form input {
  flex: 1; min-width: 0; padding: .7rem .9rem; background: var(--c-surface-2);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-full);
  color: var(--c-text); font-size: var(--fs-sm);
}
.chat-form input:focus { outline: none; border-color: var(--c-red); }
.chat-form button { width: 42px; height: 42px; flex: none; display: grid; place-items: center; background: var(--c-red-600); border: 0; border-radius: 50%; color: #fff; cursor: pointer; }
.chat-form button:hover { background: var(--c-red); }
.chat-form svg { width: 18px; height: 18px; }

.chat-legal { font-size: 10px; color: var(--c-text-dim); text-align: center; padding: 0 var(--sp-4) var(--sp-3); margin: 0; }
.chat-legal a { color: var(--c-text-dim); }

.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing i { width: 6px; height: 6px; background: var(--c-text-dim); border-radius: 50%; animation: blink 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

@media (max-width: 480px) {
  .chat-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .chat-launcher span { display: none; }
  .chat-launcher { padding: 1rem; border-radius: 50%; }
}

/* ==========================================================================
   18 · UTILITIES
   ========================================================================== */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.center { text-align: center; }
.text-dim { color: var(--c-text-dim); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mt-7 { margin-top: var(--sp-7); }
.mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); }
.mb-7 { margin-bottom: var(--sp-7); } .mb-8 { margin-bottom: var(--sp-8); }
.full { grid-column: 1 / -1; }

.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

.to-top {
  position: fixed; left: var(--sp-4); bottom: var(--sp-4); z-index: 800;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: 50%; color: var(--c-text-muted); cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease), background var(--dur-fast) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--c-red-600); color: #fff; border-color: var(--c-red-600); }
.to-top svg { width: 18px; height: 18px; }

/* ==========================================================================
   19 · MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
  :root {
    --c-text-muted: #33383d;
    --c-text-dim:   #4b5157;
    --c-border: rgba(14,16,19,.26);
    --c-border-strong: rgba(14,16,19,.48);
  }
  .tone-dark {
    --c-text-muted: #d4dae0;
    --c-text-dim:   #b6bec6;
    --c-border: rgba(255,255,255,.30);
    --c-border-strong: rgba(255,255,255,.50);
  }
}

@media print {
  .site-header, .mobile-nav, .cookie, .chat-launcher, .chat-panel,
  .to-top, .cta-band, .hero__media, .page-hero__media { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .course, .price, .member { border: 1px solid #ccc; background: #fff; box-shadow: none; }
  a { color: #000; text-decoration: underline; }
  .section { padding-block: 1.5rem; }
  /* Ohne Foto braucht der Kopf im Ausdruck auch keine Mindesthoehe */
  .page-hero--media { min-height: 0; padding-block: 2rem 1.5rem; }
  .page--legal .site-footer, .page--legal .skip-link, .embed-settings, .map-controls { display: none !important; }
  .page--legal { font-size: 11pt; overflow: visible; }
  .container.legal-container { width: 100%; max-width: none; }
  .legal { padding: 0; }
  .legal h1 { font-size: 22pt; }
  .legal h2 { font-size: 12pt; }
  .legal h2, .legal h3 { break-after: avoid; color: #000; }
  .legal p, .legal li { orphans: 3; widows: 3; }
  .legal-stand, .legal address { color: #333; }
}