/* ============================================================================
   Physiotherapie Alt Groß-Hehlen – Brand-Schicht
   ============================================================================
   Site-eigenes Stylesheet (siehe docs/content-system.md: style.css ist die
   Brand-Schicht je Site). Die Klassen hier sind der Vertrag mit den
   Content-Vorlagen unter "Administration → Content-Vorlagen" und mit den
   Blade-Komponenten unter resources/views/components/.

   Aufgebaut nach der MVC-Designsprache (Band-Rhythmus "area", Kicker +
   Headline, Zick-Zack-Bloecke, CTA-Band, Offcanvas-Navi, Footer mit
   Bottombar) – umgesetzt in der BEM-Notation dieser Site, damit alle
   18 Vorlagen unveraendert weiterlaufen.

   Marke: Primaerfarbe aus dem Logo (#da251c), kuehl-neutrale Grundstimmung
   (Weiss + #f5f6f8 Wechselflaechen), Archivo (Headlines) + Inter (Fliesstext),
   beide selbst gehostet unter /fonts (kein Google-Request, DSGVO-konform).

   Leer gelassene Vorlagen-Felder blenden ihren Slot automatisch aus
   (Abschnitt 22 "OPTIONALE SLOTS") – Redakteure fuellen nur, was sie brauchen.

   Inhalt
     0. Marken-Tokens          12. Content-Bloecke
     1. Schriften              13. Listen
     2. Reset & Basis          14. Ablauf-Schritte
     3. Layout                 15. Promo-Box
     4. Abstaende              16. Kontakt / Karte / Bewertungen
     5. Typografie             17. Formular
     6. Flaechen               18. CTA-Band
     7. Header & Navigation    19. Footer
     8. Buehne (Hero)          20. Rechtstexte
     9. Buttons                21. MVC-Utilities (Systemseiten)
    10. Raster                 22. Optionale Slots
    11. Karten                 23. Bewegung & Barrierefreiheit
   ========================================================================= */


/* ===========================================
   0. MARKEN-TOKENS
   ===========================================
   Alles Markenspezifische steht hier. Wer die Site umfaerbt, aendert diesen
   Block – nicht die Komponenten weiter unten. */

:root {
  /* Farbrollen */
  --primary:        #da251c;   /* Logo-Rot */
  --primary-dark:   #ad1a13;   /* Hover / gedrueckt */
  --primary-soft:   #fdeceb;   /* Flaechen-Tint */
  --primary-line:   #f5c9c6;   /* Linien auf Tint */
  --primary-bright: #ff6a60;   /* Kicker auf dunklem Grund */

  /* Neutrale Kette – kuehl statt warm */
  --ink:          #14171c;     /* Ueberschriften, dunkle Baender */
  --ink-soft:     #1d222a;     /* zweite dunkle Stufe */
  --body:         #525a63;     /* Fliesstext */
  --muted:        #7d858e;     /* Labels, Feinheiten */
  --line:         #e4e7ea;     /* Standard-Rahmen */
  --line-strong:  #cfd4d9;     /* betonte Rahmen, Inputs */
  --surface:      #ffffff;
  --surface-alt:  #f5f6f8;     /* Wechselflaeche der Baender */
  --surface-sunk: #eceef1;     /* Platzhalterflaeche fuer Bilder */

  /* Radien */
  --r-sm:   8px;
  --r:     14px;
  --r-lg:  22px;
  --r-pill: 999px;

  /* Schatten */
  --shadow-sm: 0 1px 2px rgba(20, 23, 28, .04), 0 2px 10px rgba(20, 23, 28, .04);
  --shadow-md: 0 2px 6px rgba(20, 23, 28, .05), 0 18px 44px rgba(20, 23, 28, .09);
  --shadow-nav: 0 1px 0 rgba(20, 23, 28, .06), 0 10px 30px rgba(20, 23, 28, .06);

  /* Band-Rhythmus (MVC "area") */
  --area:    clamp(72px, 7.5vw, 112px);
  --area-sm: clamp(48px, 5vw, 76px);
  --area-xs: clamp(32px, 3.4vw, 48px);

  /* Container */
  --container: 1280px;
  --gutter:    clamp(20px, 4vw, 32px);

  /* Typo */
  --font-head: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Kopfleiste */
  --header-h: 96px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}


/* ===========================================
   1. SCHRIFTEN (selbst gehostet, /public/fonts)
   =========================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ===========================================
   2. RESET & BASIS
   =========================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Sperrt das Scrollen, solange die Offcanvas-Navi offen ist */
body.nav-open { overflow: hidden; }

a { color: var(--primary); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--primary-dark); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 600;
  margin: 0;
  line-height: 1.12;
  letter-spacing: -.018em;
  color: var(--ink);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }

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

hr { border: 0; border-top: 1px solid var(--line); margin: var(--area-xs) 0; }

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

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ===========================================
   3. LAYOUT
   =========================================== */

.page-wrapper { min-height: 100vh; display: flex; flex-direction: column; }
.main { flex: 1 0 auto; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 860px; }

.flex-col { display: flex; flex-direction: column; }
.max-width-text { max-width: 64ch; }
.self-start { align-self: flex-start; }


/* ===========================================
   4. ABSTAENDE
   =========================================== */

.gap-xs { gap: 10px; }
.gap-sm { gap: 16px; }
.gap-md { gap: 26px; }
.gap-lg { gap: 38px; }
.gap-xl { gap: 52px; }

/* Baender: ein durchgaengiger Rhythmus statt handgesetzter Pixelwerte.
   --cards / --offset greifen ineinander, damit Kartenraster und der Block
   darunter wie ein Abschnitt wirken. */
.section          { padding-block: var(--area); }
.section--intro   { padding-top: var(--area); padding-bottom: var(--area-sm); }
.section--even    { padding-block: var(--area); }
.section--compact { padding-block: var(--area-sm); }
.section--cards   { padding-top: var(--area); padding-bottom: clamp(6px, 1vw, 14px); }
.section--offset  { padding-top: clamp(26px, 3.2vw, 44px); padding-bottom: var(--area); }
.section--bottom  { padding-bottom: var(--area); }
.section--mt      { margin-top: var(--area-xs); }


/* ===========================================
   5. TYPOGRAFIE
   ===========================================
   Echte Stufen statt der bisherigen flachen 34/32/30/28-Reihe – erst dadurch
   liest sich eine Seite als Hierarchie. */

.heading-xl { font-size: clamp(34px, 3.9vw, 52px); line-height: 1.06; letter-spacing: -.025em; }
.heading-lg { font-size: clamp(30px, 3.1vw, 42px); line-height: 1.1;  letter-spacing: -.022em; }
.heading-md { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.14; letter-spacing: -.018em; }
.heading-sm { font-size: clamp(22px, 1.9vw, 27px); line-height: 1.22; letter-spacing: -.014em; }
.heading-xs { font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }

.heading-lg--narrow { max-width: 16em; }

/* Jede Abschnitts-Headline bekommt denselben roten Akzentstrich – das ist die
   wiedererkennbare MVC-Signatur und haelt alle Baender ueber alle Seiten
   hinweg im gleichen Rhythmus. .heading-xs ist bewusst ausgenommen: das sind
   die Zwischentitel der Rechtstexte, dort waere der Strich zu laut. */
/* Steht direkt ueber der Headline schon ein gefuellter Kicker, bringt der
   seinen eigenen Strich mit – dann entfaellt der der Headline. */
.hero__label:not(:empty) + h2::before { content: none; }

h2.heading-xl::before,
h2.heading-lg::before,
h2.heading-md::before,
h2.heading-sm::before {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  margin-bottom: 18px;
}
h2.heading-sm::before { width: 30px; height: 2px; margin-bottom: 14px; }


.text    { font-size: 18px; line-height: 1.7; color: var(--body); }
.text-lg { font-size: 20px; line-height: 1.62; color: var(--body); }
.text-sm { font-size: 16px; line-height: 1.65; color: var(--body); }
.text--lg { font-size: 20px; line-height: 1.62; }
.text--sm { font-size: 16px; line-height: 1.65; }

.text-body    { font-size: 18px; line-height: 1.7; color: var(--body); }
.text-legal   { font-size: 17px; line-height: 1.75; color: var(--body); }
.text-caption { font-size: 15px; line-height: 1.5; color: var(--muted); }
.text-contact { font-size: 18px; line-height: 1.7; color: var(--body); }

.text  + .text,
.text-legal + .text-legal { margin-top: .6em; }

/* 17px, damit eine lange Adresse auch in einer halben Spalte (Tablet) in
   eine Zeile passt; anywhere verhindert das Ueberlaufen im Notfall. */
.email-link { font-size: 17px; overflow-wrap: anywhere; font-weight: 500; }

.signature {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}


/* ===========================================
   6. FLAECHEN
   =========================================== */

.section--bg,
.section--bg-top {
  background: var(--surface-alt);
  position: relative;
}
/* Haarlinien statt Rahmen: die Baender setzen sich ab, ohne zu kaesteln. */
.section--bg::before,
.section--bg::after,
.section--bg-top::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--line);
}
.section--bg::before, .section--bg-top::before { top: 0; }
.section--bg::after { bottom: 0; }


/* ===========================================
   7. HEADER & NAVIGATION
   ===========================================
   Eine Navigation versorgt Desktop und Mobil: Das Menue der Seitenverwaltung
   wird einmal ausgegeben (.nav = Desktop, .mobile-nav = Offcanvas-Panel) und
   per Media Query umgeschaltet. Die Kopfleiste klebt oben und schrumpft beim
   Scrollen (.header.scrolled, gesetzt in functions.js). */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.header.scrolled {
  background: rgba(255, 255, 255, .95);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-nav);
}

.header__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 16px 24px;
  transition: padding .3s var(--ease);
}
.header.scrolled .header__inner { padding-block: 8px; }

.header__logo {
  flex: 0 0 auto;
  display: block;
  border: 0;
  background: none;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
}
.header__logo:hover { text-decoration: none; }

/* Das Logo ist eine quadratische Datei, die Wortmarke sitzt mittig auf 33 %
   Hoehe. Ein 2.5:1-Ausschnitt mit object-fit:cover zeigt genau sie – ohne
   die frueheren Pixel-Offsets, die bei jeder Groessenaenderung verrutschten. */
.header__logo-wrap {
  display: block;
  width: 244px;
  aspect-ratio: 2.5;
  overflow: hidden;
  transition: width .3s var(--ease);
}
.header.scrolled .header__logo-wrap { width: 196px; }

.header__logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.header__logo-text {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: -.01em;
  display: block;
  padding-block: 16px;
}

/* --- Desktop-Navigation --- */
.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.nav__item { position: relative; display: inline-flex; }

.nav__link {
  position: relative;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 10px 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
/* Unterstreichung faehrt aus der Mitte auf – ruhiger als eine Hover-Pille */
.nav__link::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: 2px;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .26s var(--ease);
}
.nav__link:hover { color: var(--primary); text-decoration: none; }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--ink); font-weight: 600; }

.nav__cta {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  margin-left: 14px;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.nav__cta::before {
  content: "\f095";                       /* Font Awesome: Telefon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 13px;
  margin-right: 9px;
}
.nav__cta:hover {
  background: var(--primary-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(218, 37, 28, .28);
}

/* Aufklapp-Menue fuer Unterseiten */
.nav__dropdown {
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  min-width: 232px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 8px;
  box-shadow: var(--shadow-md);
  z-index: 70;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown-link {
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  display: block;
  text-decoration: none;
}
.nav__dropdown-link:hover {
  background: var(--primary-soft);
  color: var(--primary);
  text-decoration: none;
}

/* --- Mobile Kopfleiste --- */
.header__mobile-cta {
  margin-left: auto;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  text-decoration: none;
}
.header__mobile-cta::before {
  content: "\f095";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  margin-right: 8px;
}
.header__mobile-cta:hover { background: var(--primary-dark); color: #fff; text-decoration: none; }

.hamburger {
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: var(--r-pill);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 0;
  z-index: 90;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.hamburger:hover { border-color: var(--primary); }

.hamburger__line {
  width: 18px;
  height: 2px;
  background: var(--ink);
  display: block;
  border-radius: 2px;
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
/* Burger wird im offenen Zustand zum Kreuz */
.hamburger.is-active .hamburger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-active .hamburger__line:nth-child(2) { opacity: 0; }
.hamburger.is-active .hamburger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Offcanvas-Navigation (MVC-Kanon: Panel von rechts) --- */
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 82vw);
  height: 100dvh;
  z-index: 80;
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px rgba(20, 23, 28, .14);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: calc(var(--header-h) + 18px) 28px 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(102%);
  visibility: hidden;
  transition: transform .34s var(--ease), visibility .34s;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }

/* Bei offenem Panel liegt die Kopfleiste darueber – nur so bleibt der
   Burger (jetzt ein Kreuz) erreichbar, weil sein z-index sonst im
   Stapelkontext des Headers gefangen ist. */
body.nav-open .header { z-index: 100; }

.mobile-nav__link {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 16px 2px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  display: block;
}
.mobile-nav__link:last-child { border-bottom: 0; }
.mobile-nav__link:hover { color: var(--primary); text-decoration: none; }

.mobile-nav__link--child {
  padding-left: 18px;
  font-size: 16.5px;
  font-weight: 400;
  color: var(--body);
  border-bottom-style: dashed;
}
.mobile-nav__link--child::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 1px;
  background: var(--primary);
  vertical-align: middle;
  margin-right: 10px;
}

/* Abdunkelung hinter dem Panel – wird in functions.js erzeugt */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(20, 23, 28, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

/* --- Umschaltung Desktop / Mobil (MVC-Breakpoint 1199) --- */
.header__mobile-cta,
.hamburger { display: none; }

@media (max-width: 1199px) {
  .nav { display: none; }
  .header__mobile-cta { display: inline-block; }
  .hamburger { display: flex; }
}

@media (max-width: 767px) {
  :root { --header-h: 76px; }
  .header__logo-wrap { width: 168px; }
  .header.scrolled .header__logo-wrap { width: 148px; }
  .header__logo-text { font-size: 18px; padding-block: 12px; }
  .header__inner { padding-block: 10px; gap: 12px; }
  .header__mobile-cta { font-size: 0; padding: 0; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; }
  .header__mobile-cta::before { font-size: 15px; margin: 0; }
}


/* ===========================================
   8. BUEHNE (HERO)
   =========================================== */

.hero {
  position: relative;
  width: 100%;
  min-height: clamp(520px, 74vh, 760px);
  background: var(--ink) center / cover no-repeat;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.hero--sub   { min-height: clamp(300px, 34vw, 420px); }
.hero--small { min-height: clamp(220px, 24vw, 300px); }

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top,   rgba(12, 14, 17, .88) 0%, rgba(12, 14, 17, .55) 42%, rgba(12, 14, 17, .12) 100%),
    linear-gradient(to right, rgba(12, 14, 17, .55) 0%, rgba(12, 14, 17, 0) 62%);
}
.hero--sub .hero__overlay,
.hero--small .hero__overlay {
  background:
    linear-gradient(to top,   rgba(12, 14, 17, .85) 0%, rgba(12, 14, 17, .45) 60%, rgba(12, 14, 17, .18) 100%),
    linear-gradient(to right, rgba(12, 14, 17, .5) 0%, rgba(12, 14, 17, 0) 60%);
}

.hero__content {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: calc(var(--area) + 20px) var(--gutter) var(--area-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.hero--sub .hero__content   { padding-block: var(--area-sm) var(--area-xs); gap: 14px; }
.hero--small .hero__content { padding-block: var(--area-xs) var(--area-xs); gap: 10px; }

/* Kicker mit vorangestelltem Strich – die MVC-Signatur ueber jeder Headline.
   Die Vorlage "Bild-Teaser mit Schlagworten" setzt .hero__label auch AUSSERHALB
   der Buehne ein, auf weisser Flaeche. Grundfarbe ist deshalb die Markenfarbe;
   nur innerhalb von .hero wird der Kicker weiss (dort liegt er auf dem Bild). */
.hero__label {
  display: inline-flex;
  align-items: flex-start;   /* haelt den Strich bei umbrechendem Kicker an der ersten Zeile */
  gap: 14px;
  font-family: var(--font-head);
  font-size: 13.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 600;
}
.hero .hero__label { color: #fff; }
.hero__label::before {
  content: "";
  width: 34px;
  height: 3px;
  margin-top: .62em;
  background: var(--primary);
  border-radius: 2px;
  flex: 0 0 auto;
}

.hero__title {
  font-size: clamp(38px, 5.6vw, 72px);
  line-height: 1.02;
  letter-spacing: -.032em;
  font-weight: 600;
  color: #fff;
  max-width: 16em;
  text-wrap: balance;
}
.hero--sub .hero__title   { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.06; }
.hero--small .hero__title { font-size: clamp(28px, 3.4vw, 42px); }

.hero__title--wide { max-width: 20em; }

.hero__subtitle {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .84);
  max-width: 34em;
}

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}

.hero__meta { font-size: 15.5px; color: rgba(255, 255, 255, .62); }


/* ===========================================
   9. BUTTONS
   =========================================== */

.btn {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  text-decoration: none;
  text-align: center;
  max-width: 100%;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease),
              box-shadow .22s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { color: #fff; background: var(--primary); border-color: var(--primary); }
.btn--primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
  box-shadow: 0 12px 28px rgba(218, 37, 28, .3);
}

.btn--outline {
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-weight: 500;
}
.btn--outline:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--outline-dark {
  color: var(--ink);
  background: transparent;
  border-color: var(--line-strong);
  font-weight: 500;
}
.btn--outline-dark:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.btn--white { color: var(--primary); background: #fff; border-color: #fff; }
.btn--white:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn--outline-white {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  font-weight: 500;
}
.btn--outline-white:hover { background: #fff; color: var(--primary); border-color: #fff; }

/* Textlink mit Pfeil – ersetzt den Button in Abschnittskoepfen */
.btn--text {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--primary);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.btn--text::after {
  content: "\f061";                       /* Font Awesome: Pfeil rechts */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  transition: transform .22s var(--ease);
}
.btn--text:hover { color: var(--primary-dark); transform: none; }
.btn--text:hover::after { transform: translateX(5px); }

.btn-group { display: flex; gap: 14px; flex-wrap: wrap; }


/* ===========================================
   10. RASTER
   =========================================== */

/* Jeder Modifier bringt sein eigenes display:grid mit. Die Vorlage
   "Team-Galerie" setzt nur .grid--4col ohne die Basisklasse .grid – ohne
   diese Absicherung faellt das Raster dort zu einer Spalte zusammen. */
.grid,
.grid--2col,
.grid--3col,
.grid--4col,
.grid--form { display: grid; }

.grid       { gap: clamp(32px, 4vw, 56px) clamp(32px, 4.5vw, 64px); }
.grid--2col { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3col { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 26px; }
.grid--4col { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px; }
.grid--form { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: clamp(36px, 4.5vw, 60px); }
.grid--align-center { align-items: center; }
.grid--align-start  { align-items: start; }


/* ===========================================
   11. KARTEN
   =========================================== */

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(26px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
/* Roter Kopfstrich, der beim Hover aufzieht */
.card::before {
  content: "";
  position: absolute;
  top: -1px; left: 26px; right: 26px;
  height: 3px;
  background: var(--primary);
  border-radius: 0 0 3px 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .34s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.card:hover::before { transform: scaleX(1); }

.card__number {
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background .28s var(--ease), color .28s var(--ease);
}
.card:hover .card__number { background: var(--primary); color: #fff; }

.card__title { font-size: 21px; line-height: 1.25; }
.card__text  { font-size: 16.5px; line-height: 1.68; color: var(--body); }

/* Karte, die mit einem Bild beginnt (Team-Galerie): das Foto laeuft bis an
   die Kartenkante, der Text bekommt den Innenabstand einzeln. */
.card:has(> .img-box:first-child) {
  padding: 0 0 26px;
  overflow: hidden;
  gap: 0;
}
.card:has(> .img-box:first-child)::before { display: none; }
.card:has(> .img-box:first-child) > :not(.img-box) { padding-inline: 26px; }
.card:has(> .img-box:first-child) > .card__title { padding-top: 22px; }
.card:has(> .img-box:first-child) > .card__text  { padding-top: 8px; }
.card > .img-box:first-child { border-radius: 0; }


/* ===========================================
   12. CONTENT-BLOECKE
   =========================================== */

/* Hervorgehobener Textblock: rote Kante + ruhige Tint-Flaeche */
.highlight-box {
  border-left: 3px solid var(--primary);
  background: var(--primary-soft);
  border-radius: 0 var(--r) var(--r) 0;
  padding: clamp(26px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.highlight-box .text { color: #6b4b48; }
.highlight-box__title { font-size: 22px; line-height: 1.26; }

.info-box {
  border-left: 3px solid var(--primary);
  padding: 4px 0 4px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

/* Abschnittskopf: Headline links, Link rechts – mit rotem Kicker-Strich */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px 32px;
  flex-wrap: wrap;
}
.section-header--baseline { align-items: baseline; }



/* Bildflaechen: solange kein Bild gepflegt ist, bleibt eine ruhige Farbflaeche */
.img-box {
  position: relative;
  background: var(--surface-sunk);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: block;
  width: 100%;
}
.img-box--4-3 { aspect-ratio: 4 / 3; }
.img-box--1-1 { aspect-ratio: 1 / 1;  border-radius: var(--r); }
.img-box--3-4 { aspect-ratio: 3 / 4; }

.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--ease);
}
.img-box:hover img { transform: scale(1.035); }


/* ===========================================
   13. LISTEN
   =========================================== */

.check-list { display: flex; flex-direction: column; gap: 14px; }

.check-list__item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
}

.check-list__icon {
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
  flex: 0 0 auto;
}

/* Leistungsliste: Kacheln statt unterstrichener Zeilen.
   Der Grund: die Eintraege sind unterschiedlich lang ("Krankengymnastik auf
   neurophysiologischer Grundlage" bricht zweizeilig um). Als Zeilenliste
   zerreisst das den Rhythmus – als gleich hohe Kacheln im Raster faellt der
   Umbruch nicht auf. Weiss + Haarlinie funktioniert auf beiden Untergruenden
   (graues Band bei --wide, weisse Flaeche bei --flat). */
.service-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.service-list--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-list--flat { grid-template-columns: minmax(0, 1fr); }

/* Hoechstens drei nebeneinander – darueber werden die Kacheln so breit,
   dass rechts nur noch Leerraum steht. Feste Spaltenzahl statt auto-fill,
   damit das Raster nicht je nach Containerbreite auf vier springt. */
@media (max-width: 991px) {
  .service-list,
  .service-list--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .service-list,
  .service-list--wide { grid-template-columns: minmax(0, 1fr); }
}

.service-list__item {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 16.5px;
  line-height: 1.4;
  padding: 15px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--body);
  transition: color .22s var(--ease), border-color .22s var(--ease),
              box-shadow .22s var(--ease), transform .22s var(--ease);
}

/* Haken im weichen Kreis – dieselbe Sprache wie .card__number und
   .check-list__icon, nur leiser, weil hier bis zu 20 Stueck stehen. */
.service-list__item::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 10px;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background .22s var(--ease), color .22s var(--ease);
}

.service-list__item:hover {
  color: var(--ink);
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.service-list__item:hover::before { background: var(--primary); color: #fff; }

.tag-list { display: flex; flex-wrap: wrap; gap: 10px; }

/* Schlagworte sind Etiketten, keine Aktionen. Vorher waren sie weiss mit
   grauem Rahmen – optisch identisch mit .btn--outline-dark, der in derselben
   Vorlage direkt darunter steht. Getoenter Grund statt Rahmen trennt beides. */
.tag {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border: 1px solid transparent;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  transition: background .22s var(--ease), color .22s var(--ease);
}
.tag:hover { background: var(--primary); color: #fff; }

.price-list { display: flex; flex-direction: column; }

.price-list__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  font-size: 17.5px;
  color: var(--body);
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.price-list__item:first-child { border-top: 2px solid var(--ink); }
/* Fuehrungspunkte zwischen Leistung und Preis */
.price-list__item > span:first-child { position: relative; }
.price-list__item::after {
  content: "";
  flex: 1 1 auto;
  order: 1;
  border-bottom: 1px dotted var(--line-strong);
  transform: translateY(-5px);
  min-width: 20px;
}
.price-list__price {
  order: 2;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  white-space: nowrap;
}


/* ===========================================
   14. ABLAUF-SCHRITTE
   =========================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 clamp(32px, 4vw, 60px);
}

.step {
  position: relative;
  border-top: 1px solid var(--line);
  padding: 26px 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
/* Bewusst nur Oberkanten: bei umbrechenden Rastern haengt eine einzelne
   Unterkante sonst schief unter der letzten Spalte. */

.step__number {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  border: 2px solid var(--primary);
  color: var(--primary);
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: 2px;
}

.step__content { display: flex; flex-direction: column; gap: 8px; }
.step__title   { font-size: 20px; line-height: 1.28; }
.step__text    { font-size: 16.5px; line-height: 1.68; color: var(--body); }


/* ===========================================
   15. PROMO-BOX
   =========================================== */

.promo-box {
  position: relative;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(32px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  isolation: isolate;
}
/* Roter Lichtschein oben rechts – gibt der dunklen Flaeche Tiefe */
.promo-box::after {
  content: "";
  position: absolute;
  top: -70px; right: -70px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(218, 37, 28, .5), transparent 68%);
  z-index: -1;
}

.promo-box__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--primary-bright);
  font-weight: 600;
}
.promo-box__label::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--primary-bright);
  flex: 0 0 auto;
}

.promo-box__title { font-size: clamp(24px, 2.2vw, 30px); color: #fff; line-height: 1.2; }
.promo-box__text  { font-size: 17px; line-height: 1.68; color: rgba(255, 255, 255, .78); }

.promo-box__phone {
  font-family: var(--font-head);
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: -.02em;
}
.promo-box__phone:hover { color: var(--primary-bright); text-decoration: none; }

.promo-box__link { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.promo-box__link:hover { color: var(--primary-bright); }


/* ===========================================
   16. KONTAKT / KARTE / BEWERTUNGEN
   =========================================== */

.contact-block { display: flex; flex-direction: column; gap: 22px; }

.contact-item { display: flex; flex-direction: column; gap: 5px; }
.contact-item:first-child { border-top: 2px solid var(--ink); padding-top: 20px; }
.contact-item + .contact-item { border-top: 1px solid var(--line); padding-top: 20px; }

.contact-item__label {
  font-family: var(--font-head);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.contact-item__value { font-size: 18px; line-height: 1.65; color: var(--body); }

.contact-item__phone {
  font-family: var(--font-head);
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.02em;
}
.contact-item__phone:hover { color: var(--primary); text-decoration: none; }

.contact-item__fax { font-size: 15.5px; color: var(--muted); }

.map-box {
  background: var(--surface-sunk);
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.map-box iframe,
.map-box img { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }

.review-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 30px 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 200px;
  background: var(--surface);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
/* Grosses Anfuehrungszeichen als ruhige Deko */
.review-card::before {
  content: "\201C";
  position: absolute;
  top: 6px; right: 22px;
  font-family: var(--font-head);
  font-size: 90px;
  line-height: 1;
  color: var(--primary-soft);
  pointer-events: none;
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }

.review-card__stars { font-size: 16px; color: #f0a62c; letter-spacing: 3px; }
.review-card__text  { font-size: 16.5px; line-height: 1.68; color: var(--body); flex: 1; position: relative; }
.review-card__name  {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  padding-top: 14px;
  border-top: 1px solid var(--line);
}


/* ===========================================
   17. FORMULAR
   =========================================== */

.form { display: flex; flex-direction: column; gap: 20px; }

.form__row          { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.form__row--compact { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 14px; }

.form__label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.form__input,
.form__textarea {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink);
  padding: 13px 16px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: var(--r-sm);
  width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form__input:focus,
.form__textarea:focus {
  outline: 0;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(218, 37, 28, .13);
}
.form__input::placeholder,
.form__textarea::placeholder { color: var(--muted); }
.form__textarea { resize: vertical; min-height: 130px; }

.form__fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  margin: 0;
  background: var(--surface);
}

.form__legend {
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 8px;
}

.form__checkbox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--body);
}
.form__checkbox input {
  margin-top: 3px;
  width: 19px;
  height: 19px;
  accent-color: var(--primary);
  flex: 0 0 auto;
}

.form__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form__hint    { font-size: 14px; color: var(--muted); }

/* Spam-Falle: fuer Menschen unsichtbar, Bots fuellen sie aus */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__error { font-size: 14.5px; color: var(--primary); font-weight: 500; }

.form__notice {
  background: #eef7f0;
  border-left: 3px solid #2f8a4c;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 18px 22px;
  font-size: 16.5px;
  line-height: 1.65;
  color: #1f5233;
}


/* ===========================================
   18. CTA-BAND
   =========================================== */

.cta-banner {
  position: relative;
  background: var(--primary);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* Zwei weiche Lichter statt einer flachen Farbflaeche */
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 120% at 12% 0%,  rgba(255, 255, 255, .16), transparent 60%),
    radial-gradient(50% 120% at 92% 100%, rgba(0, 0, 0, .22), transparent 62%);
}

.cta-banner__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--area-sm) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px clamp(32px, 4vw, 56px);
  align-items: center;
}

.cta-banner__content { display: flex; flex-direction: column; gap: 12px; }
.cta-banner__title   { font-size: clamp(28px, 3.2vw, 40px); color: #fff; line-height: 1.1; letter-spacing: -.025em; }
.cta-banner__text    { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .86); max-width: 34em; }
.cta-banner__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 991px) {
  .cta-banner__actions { justify-content: flex-start; }
}


/* ===========================================
   19. FOOTER
   =========================================== */

.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .72);
  font-size: 16px;
}

.footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--area-sm) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px clamp(28px, 3.5vw, 48px);
  align-items: start;
}

/* Ab Desktop feste Spaltenverhaeltnisse statt gleicher Viertel: die
   Kontaktspalte braucht mehr Platz, sonst bricht die lange E-Mail-Adresse
   mitten im Wort um. Die zweite Regel greift, wenn die Spalte
   "Therapieangebote" fehlt (Club-Einstellung nicht gepflegt). */
@media (min-width: 992px) {
  .footer__inner {
    grid-template-columns: minmax(170px, 1fr) minmax(290px, 1.15fr) minmax(170px, 1fr) minmax(150px, .9fr);
  }
  .footer__inner:not(:has(> .footer__col:nth-child(4))) {
    grid-template-columns: minmax(170px, 1fr) minmax(290px, 1.15fr) minmax(150px, .9fr);
  }
}

.footer__col { display: flex; flex-direction: column; gap: 13px; }
.footer__col--links { gap: 14px; }

.footer__title {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.015em;
}

.footer__heading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  font-weight: 600;
  margin-bottom: 2px;
}
.footer__heading::before {
  content: "";
  width: 18px; height: 2px;
  background: var(--primary);
  flex: 0 0 auto;
}

.footer__text     { font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .72); }
.footer__services { font-size: 15.5px; line-height: 1.95; color: rgba(255, 255, 255, .72); }

.footer__phone {
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: -.02em;
}
.footer__phone:hover { color: var(--primary-bright); text-decoration: none; }

/* 15px, damit eine lange Adresse in der Spalte bleibt statt mitten im
   Wort umzubrechen; anywhere bleibt als Notbremse fuer schmale Viewports. */
.footer__email {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
  overflow-wrap: anywhere;
  text-decoration: none;
}
.footer__email:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.footer__link {
  background: none;
  border: 0;
  padding: 0;
  color: rgba(255, 255, 255, .72);
  font-family: var(--font-body);
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  display: block;
}
.footer__link:hover { color: #fff; text-decoration: none; }

.footer__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 11px 20px;
  width: 100%;
  justify-items: start;
  text-align: left;
}

/* Bottombar: dunkler Abschluss mit Copyright und Rechtslinks */
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); }

.footer__bottom-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 20px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .5);
}

.footer__copyright { letter-spacing: .01em; }

.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }

.footer__legal-link { color: rgba(255, 255, 255, .5); text-decoration: none; }
.footer__legal-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }


/* ===========================================
   20. RECHTSTEXTE
   =========================================== */

/* Abstand zwischen den Abschnitten kommt aus dem .gap-xl der Vorlage –
   hier keinen zweiten Abstand daraufsetzen. */
.legal-block { display: flex; flex-direction: column; gap: 12px; }
.legal-block > .heading-xs { color: var(--ink); }


/* ===========================================
   21. MVC-UTILITIES (SYSTEMSEITEN)
   ===========================================
   Nur so viel vom Haus-Utility-Framework, wie die mitgelieferten Views
   brauchen: errors/404, system/welcome, Breadcrumbs, Sprachumschalter.
   Diese Seiten sollen auch dann im Hausstil erscheinen, wenn eine Site
   – wie diese – eine eigene Komponenten-Schicht mitbringt. */

.area       { padding-block: var(--area); }
.area-small { padding-block: var(--area-xs); }

.centered      { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.centered-big  { max-width: 1600px; margin-inline: auto; padding-inline: var(--gutter); }

.flx-spc   { display: flex; flex-wrap: wrap; justify-content: space-between; }
.flx-hstrt { display: flex; flex-wrap: wrap; justify-content: flex-start; }
.flx-acnt  { align-items: center; }

.w33 { width: 32%; }

@media (max-width: 991px) {
  .m-w100 { width: 100% !important; }
  .m-mb20 { margin-bottom: 20px !important; }
}

.mb0  { margin-bottom: 0  !important; }
.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.p30  { padding: 30px !important; }
.mauto { margin-inline: auto !important; }

.tac    { text-align: center; }
.ttu    { text-transform: uppercase; letter-spacing: .02em; }
.lh1    { line-height: 1.08; }
.fw700  { font-weight: 700; }
.nolist { list-style: none; margin: 0; padding: 0; }

.primary  { color: var(--primary); }
.darkgrey { color: var(--body); }
.fblack   { color: var(--ink); }

.bg-white { background: var(--surface); }
.bg-third { background: var(--surface-alt); }

.rnd     { border-radius: var(--r-sm); }
.rounded { border-radius: var(--r-pill); }

/* Headline-Utilities (auch auf <p> verwendbar – MVC-Konvention) */
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  display: block;
}
.h1 { font-size: clamp(34px, 3.9vw, 52px); }
.h2 { font-size: clamp(30px, 3.1vw, 42px); }
.h3 { font-size: clamp(26px, 2.4vw, 34px); }
.h4 { font-size: clamp(20px, 1.8vw, 24px); letter-spacing: .04em; }
.h5 { font-size: 18px; }
.h6 { font-size: 16px; }

/* Button-Kanon des Hausstils (.btn .btn-primary) neben der BEM-Schreibweise */
.btn-primary { color: #fff; background: var(--primary); border-color: var(--primary); }
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
  box-shadow: 0 12px 28px rgba(218, 37, 28, .3);
}

.err-wrap { padding: 60px 20px; max-width: 900px; }

/* Breadcrumbs */
.breadcrumbs ul { display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; }
.breadcrumbs li + li::before { content: "/"; color: var(--line-strong); margin-right: 8px; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--primary); text-decoration: none; }

/* Sprachumschalter */
.lang-switcher { display: flex; gap: 6px; align-items: center; }
.lang-switcher__item a {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 500;
  color: var(--body);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  display: inline-block;
}
.lang-switcher__item a:hover { background: var(--surface-alt); color: var(--ink); text-decoration: none; }
.lang-switcher__item.is-active a { color: var(--primary); font-weight: 600; }
.lang-switcher__flag { margin-right: 4px; }


/* ===========================================
   22. OPTIONALE SLOTS
   ===========================================
   Content-Vorlagen haben feste Slots (kachel1…kachel4, leistung1…leistung20).
   Ungefuellte Slots verschwinden, statt leere Rahmen zu hinterlassen –
   Redakteure muessen also nicht jedes Feld befuellen. */

.service-list__item:empty,
.tag:empty,
.hero__label:empty,
.hero__subtitle:empty,
.hero__meta:empty,
.text:empty,
.text-legal:empty,
.card__text:empty,
.step__text:empty,
.footer__services:empty { display: none; }

.check-list__item:has(> .check-list__text:empty),
.price-list__item:has(> span:first-child:empty),
.card:has(> .card__title:empty),
.step:has(> .step__content > .step__title:empty),
.review-card:has(> .review-card__text:empty),
.legal-block:has(> .heading-xs:empty),
.contact-item:has(> .contact-item__value:empty) { display: none; }

/* Buttons ohne Beschriftung fallen weg (inkl. leerer Button-Zeilen) */
.btn:empty { display: none; }
.hero__actions:not(:has(.btn:not(:empty))),
.btn-group:not(:has(.btn:not(:empty))) { display: none; }

/* Noch nicht gepflegte Bilder und Karten: Farbflaeche statt kaputtem Bild-Symbol */
.img-box img[src=""],
.map-box iframe[src=""] { display: none; }

.info-box:has(> .contact-item__label:empty) { display: none; }

/* Eine Buehne ohne Bild bleibt eine ruhige dunkle Flaeche statt eines
   kaputten Hintergrundpfads. */
.hero[style*="url('')"] { background-image: none !important; background: var(--ink); }


/* ===========================================
   23. BEWEGUNG & BARRIEREFREIHEIT
   =========================================== */

/* Sanftes Einblenden beim Scrollen – wird in functions.js aktiviert
   (Klasse .reveal); ohne JS bleibt alles regulaer sichtbar. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Anker springen nicht unter die klebende Kopfleiste */
[id] { scroll-margin-top: calc(var(--header-h) + 20px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .header, .mobile-nav, .nav-scrim, .cta-banner, .hamburger { display: none !important; }
  body { font-size: 12pt; color: #000; }
  .hero { min-height: auto; }
}