/* =========================================================================
   Therapiezentrum Wildnauer – Stylesheet
   Mobile first · Design-Tokens im :root (einzige Stelle mit Farbwerten)
   Gemessen an der Quelle (01_QUELLE/stil-inventar.md, 09.09.2026):
     Schrift Noto Sans 400/600/700 · Text #303030 · Cyan #12bbf0 (Knöpfe)
     · Cyan dunkel #00ace1 (Bänder, Links) · Sekundärblau #65a6df
     · Flächen #fafafa · Rahmen #e9e9e8 · Radien 15/20/50 · Hero-Ecke 90
   ========================================================================= */

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/noto-sans-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: 'Noto Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/noto-sans-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;
}

/* ---------- Design-Tokens ---------- */
:root {
  --color-bg: #ffffff;
  --color-surface: #f2fbff;          /* sehr helles Cyan (Funnel-Vorarbeit: brand-soft2) statt #fafafa: trennt Abschnitte sichtbar, Julian 09.09.2026 */
  --color-text: #303030;
  --color-muted: rgb(48 48 48 / .74);
  --color-primary: #12bbf0;
  --color-primary-dark: #00ace1;
  --color-secondary: #65a6df;
  --color-accent: #303030;              /* Überschriften (Quelle: #303030) */
  --color-border: #e9e9e8;
  --color-auf-dunkel: #ffffff;
  --color-primary-soft: rgb(18 187 240 / .10);
  --color-primary-soft2: rgb(18 187 240 / .05);
  --color-ok: #78b82b;                  /* Quelle: Grün der Bestätigungs-Häkchen */
  --color-danger: #d64545;
  --color-primary-hell: #8fe0fa;        /* helles Cyan für Schrift auf dunklem Bildgrund (Hero) */
  --color-nacht: #0b2733;               /* tiefes Petrol: Grund unter Hero-Bildern und Film */
  --nacht-rgb: 11 39 51;
  --color-ok-hell: #9be15d;             /* Öffnungsstatus „geöffnet" auf dunklem Grund */
  --ok-rgb: 155 225 93;

  --font-body: 'Noto Sans', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Überschriften-Skala – ausschließlich hierüber (Gate 8) */
  --fs-display: clamp(2.5rem, 1.35rem + 3.9vw, 4.75rem); /* Hero-Überschrift, auf allen Seiten gleich */
  --fs-h1: clamp(2.125rem, 1.45rem + 2.2vw, 2.625rem);   /* 42 px @1440 */
  --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);      /* 36 px @1440 */
  --fs-h3: clamp(1.3rem, 1.15rem + .55vw, 1.625rem);     /* 26 px @1440 */
  --fs-h4: 1.375rem;                                     /* 22 px */
  --fs-lead: 1.125rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-kicker: .8125rem;

  --radius: 20px;
  --radius-sm: 15px;
  --radius-pill: 50px;
  --radius-hero: 90px;
  --shadow: 0 10px 30px -12px rgb(48 48 48 / .18), 0 2px 8px -4px rgb(48 48 48 / .10);
  --shadow-lg: 0 24px 50px -20px rgb(48 48 48 / .28);

  --container: 1180px;
  --container-narrow: 820px;
  --container-pad: clamp(1rem, 4vw, 2rem);

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --band: clamp(3.5rem, 8vw, 6.5rem);
  --header-h: 84px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;   /* keine Silbentrennung, nur Notbremse bei Überbreite */
}
h1, h2, h3, h4 { line-height: 1.2; color: var(--color-accent); font-weight: 600; margin: 0 0 var(--space-2); letter-spacing: -.01em; }
h1 { font-size: var(--fs-h1); line-height: 1.15; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); line-height: 1.3; }
p { margin: 0 0 var(--space-2); }
p:last-child { margin-bottom: 0; }
a { color: var(--color-primary-dark); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
img, picture, video { max-width: 100%; height: auto; display: block; }
strong { font-weight: 600; }
ul, ol { padding-left: 1.25rem; margin: 0 0 var(--space-2); }
li { margin-bottom: .35rem; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }
.icon { display: inline-block; vertical-align: middle; flex: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); }
.container--narrow { max-width: var(--container-narrow); }
.band { padding-block: var(--band); overflow-x: clip; background: var(--color-bg); }
.btn-reihe--mitte { justify-content: center; margin-top: var(--space-4); }
.band--soft { background: var(--color-surface); }
.band--cyan {
  background-color: var(--color-primary-dark);
  background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 55%, var(--color-secondary) 140%);
  color: var(--color-auf-dunkel);
}
.band--cyan h2, .band--cyan h3, .band--cyan p, .band--cyan .kicker { color: var(--color-auf-dunkel); }
.band--cyan .vorteile { color: var(--color-text); }
.band--cyan .vorteile span:last-child { color: var(--color-text); }
.band--cyan a:not(.btn) { color: var(--color-auf-dunkel); }
/* Links in der weißen Karten-Box auf dem Cyan-Band (z. B. Ratgeber-Angebot) bleiben dunkel/cyan lesbar */
.band--cyan .karten-box a:not(.btn) { color: var(--color-primary-dark); }
.band--eng { padding-block: calc(var(--band) * .6); }

.kicker {
  display: block;
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  margin: 0 0 .75rem;
}
.intro { font-size: var(--fs-lead); color: var(--color-muted); max-width: 62ch; }
.band__kopf { max-width: 760px; margin-bottom: var(--space-4); }
.band__kopf--mitte { margin-inline: auto; text-align: center; }
.band__kopf--mitte .intro { margin-inline: auto; }
.akzent { color: var(--color-primary-dark); }
.band--cyan .akzent { color: var(--color-auf-dunkel); opacity: .9; }

.raster { display: grid; gap: var(--space-3); }
.raster > * { min-width: 0; }
@media (min-width: 720px) {
  .raster--2 { grid-template-columns: repeat(2, 1fr); }
  .raster--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 720px) and (max-width: 979px) { .raster--3 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Skip-Link / Vorschau ---------- */
.skip-link { position: absolute; left: -999px; top: 0; background: var(--color-primary-dark); color: var(--color-auf-dunkel); padding: .75rem 1.25rem; min-height: 48px; display: inline-flex; align-items: center; z-index: 1000; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; text-decoration: none; }
.vorschau-etikett { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 950; margin: 0; padding: .35rem .9rem; border-radius: var(--radius-pill); background: var(--color-text); color: var(--color-auf-dunkel); font-size: var(--fs-small); box-shadow: var(--shadow); pointer-events: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem; min-height: 48px;
  border-radius: var(--radius-pill);
  font: inherit; font-weight: 600; font-size: var(--fs-body); line-height: 1.2;
  cursor: pointer; border: 2px solid transparent; text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn:hover, .btn:focus-visible { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn--primary { background: var(--color-primary); color: var(--color-auf-dunkel); box-shadow: 0 8px 20px -8px rgb(18 187 240 / .7); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--color-primary-dark); color: var(--color-auf-dunkel); }
.btn--ghost { border-color: var(--color-primary); color: var(--color-primary-dark); background: transparent; }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.btn--weiss { background: var(--color-auf-dunkel); color: var(--color-primary-dark); }
.btn--weiss:hover, .btn--weiss:focus-visible { background: var(--color-surface); color: var(--color-primary-dark); }
.btn--rand-weiss { border-color: var(--color-auf-dunkel); color: var(--color-auf-dunkel); }
.btn--rand-weiss:hover, .btn--rand-weiss:focus-visible { background: rgb(255 255 255 / .16); color: var(--color-auf-dunkel); }
.btn--klein { padding: .6rem 1.2rem; min-height: 44px; font-size: var(--fs-small); }
.btn-reihe { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.text-link { font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; }
.text-link .icon { transition: transform .2s ease; }
.text-link:hover .icon { transform: translateX(3px); }

/* ---------- Kopfzeile ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; isolation: isolate;
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow .2s ease;
}
/* Glas-Hintergrund auf eigener Ebene: backdrop-filter direkt an der Kopfzeile
   macht sie zum Bezugsrahmen für das fixierte Handy-Menü, das dann nur so hoch
   wie die Kopfzeile wäre (15.10.2026 gemessen: Menü zeigte nur „Home"). */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(255 255 255 / .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.site-header.ist-gescrollt { box-shadow: 0 6px 24px -12px rgb(48 48 48 / .25); }
.header-inner { display: flex; align-items: center; gap: var(--space-2); min-height: var(--header-h); }
.logo { display: block; margin-right: auto; }
.logo img { width: auto; height: 62px; }
.header-actions { display: flex; align-items: center; gap: var(--space-1); }
.header-cta { padding: .7rem 1.3rem; min-height: 44px; font-size: var(--fs-small); }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; align-items: center; }
.site-nav li { margin: 0; position: relative; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .85rem;
  color: var(--color-text); font-weight: 500; font-size: .9375rem; border-radius: var(--radius-pill);
  transition: background .2s ease, color .2s ease;
}
.site-nav a:hover, .site-nav a:focus-visible { background: var(--color-primary-soft); color: var(--color-primary-dark); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--color-primary-dark); font-weight: 600; }
.sub-toggle { display: none; }
.sub-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: .5rem; flex-direction: column; gap: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.sub-menu li { width: 100%; }
.sub-menu a { display: flex; width: 100%; border-radius: 10px; }
.has-sub:hover > .sub-menu, .has-sub:focus-within > .sub-menu, .has-sub.ist-offen > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.site-nav__mobil-cta { display: none; }

.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; position: relative; border-radius: 12px; }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
  content: ""; position: absolute; left: 10px; width: 24px; height: 2px; background: var(--color-accent); border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease, top .25s ease;
}
.nav-toggle__bar { top: 21px; }
.nav-toggle__bar::before { top: -7px; left: 0; }
.nav-toggle__bar::after { top: 7px; left: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { top: 0; transform: rotate(-45deg); }

/* ---------- Hero (seit 15.10.2026: Vollbild auf jeder Seite, ein Baustein) ----------
   Bild oder Film füllt den Bildschirm unter der Kopfzeile, Text unten links,
   Standortkarte rechts. Ecke unten rechts 90 px gerundet wie in der Quelle.
   Gleiche Maße auf allen Seiten (Agenturregel „Hero überall gleich"). */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  border-end-end-radius: var(--radius-hero);
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(3.5rem, 10vh, 7rem) clamp(1.75rem, 5vh, 3.5rem);
  background: var(--color-nacht);
  color: var(--color-auf-dunkel);
}
.hero__medium {
  position: absolute; inset: 0; z-index: -2;
  transform: translate3d(0, var(--hero-y, 0px), 0) scale(var(--hero-s, 1));
  transform-origin: 50% 35%;
}
.hero__medium picture { display: contents; }
.hero__medium img, .hero__medium video { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-lage, 50% 50%); }
.hero__medium video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.hero__medium img, .hero__medium video { animation: hero-ein 2.6s cubic-bezier(.2, .75, .15, 1) both; }
@keyframes hero-ein { from { transform: scale(1.12); } to { transform: none; } }
.hero__medium video.laeuft { opacity: 1; }
/* Verlauf gerichtet statt flächig: unten links dunkel (Text), oben rechts offen (Motiv) */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(var(--nacht-rgb) / .84) 0%, rgb(var(--nacht-rgb) / .74) 36%, rgb(var(--nacht-rgb) / .4) 58%, rgb(var(--nacht-rgb) / 0) 78%),
    linear-gradient(0deg, rgb(var(--nacht-rgb) / .72) 0%, rgb(var(--nacht-rgb) / .3) 38%, rgb(var(--nacht-rgb) / 0) 66%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--color-nacht); opacity: var(--hero-dunkel, 0);
}
.hero__inner { position: relative; display: grid; gap: clamp(1.25rem, 3vh, 2rem); grid-template-columns: minmax(0, 1fr); align-items: end; }
.hero__inner > * { min-width: 0; }
.hero__text { max-width: 860px; }
.hero__kicker { display: table; color: var(--color-auf-dunkel); margin-bottom: 1rem; text-shadow: 0 1px 12px rgb(var(--nacht-rgb) / .5); }
.hero__titel {
  font-size: var(--fs-display); font-weight: 700; line-height: 1.04; letter-spacing: -.025em;
  color: var(--color-auf-dunkel); margin: 0 0 1.25rem; text-wrap: balance;
}
.hero__titel .hero__marke { color: var(--color-primary-hell); }
.hero__unterzeile { display: inline-block; font-size: .7em; line-height: 1.12; letter-spacing: -.015em; margin-top: .12em; }
/* Handy und Tablet: Text steht höher im Bild, daher Verlauf über die ganze Höhe */
@media (max-width: 999px) {
  .hero::before {
    background: linear-gradient(0deg, rgb(var(--nacht-rgb) / .92) 0%, rgb(var(--nacht-rgb) / .8) 45%, rgb(var(--nacht-rgb) / .7) 80%, rgb(var(--nacht-rgb) / .62) 100%);
  }
}
.hero__intro { font-size: var(--fs-lead); line-height: 1.6; color: rgb(255 255 255 / .92); max-width: 58ch; margin: 0 0 1.5rem; }
.hero__knoepfe { margin-top: 0; }
/* Wortweises Aufsteigen der Überschrift (Spannen setzt main.js) */
.wort { display: inline-block; overflow: clip; overflow-clip-margin: .14em; vertical-align: bottom; padding-bottom: .05em; }
.wort > span { display: inline-block; transform: translateY(108%); transition: transform 1s cubic-bezier(.2, .75, .15, 1); transition-delay: var(--wv, 0ms); }
.hero.ist-bereit .wort > span { transform: none; }
.hero__kicker, .hero__intro, .hero__knoepfe, .hero__info { transition: opacity .8s ease, transform .8s cubic-bezier(.2, .75, .15, 1); }
.js .hero:not(.ist-bereit) .hero__kicker, .js .hero:not(.ist-bereit) .hero__intro,
.js .hero:not(.ist-bereit) .hero__knoepfe, .js .hero:not(.ist-bereit) .hero__info { opacity: 0; transform: translateY(16px); }
.hero.ist-bereit .hero__intro { transition-delay: .35s; }
.hero.ist-bereit .hero__knoepfe { transition-delay: .5s; }
.hero.ist-bereit .hero__info { transition-delay: .65s; }

/* Standortkarte im Hero: Glas, Öffnungsstatus live, beide Standorte mit Telefon */
.hero__info {
  background: rgb(var(--nacht-rgb) / .38); border: 1px solid rgb(255 255 255 / .26);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; color: var(--color-auf-dunkel);
}
.hero__status { display: flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; font-size: var(--fs-small); font-weight: 600; }
.hero__status-punkt { flex: none; width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / .6); }
.hero__status.ist-offen .hero__status-punkt { background: var(--color-ok-hell); box-shadow: 0 0 0 0 rgb(var(--ok-rgb) / .6); animation: status-puls 2.2s ease-out infinite; }
@keyframes status-puls { 70% { box-shadow: 0 0 0 9px rgb(var(--ok-rgb) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--ok-rgb) / 0); } }
.hero__info-titel { font-size: var(--fs-kicker); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .85); margin: 0 0 .5rem; }
.hero__standorte { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero__standorte li { margin: 0; min-width: 0; display: grid; gap: .1rem; padding: .7rem .8rem; border-radius: var(--radius-sm); background: rgb(255 255 255 / .1); transition: background .25s ease; }
.hero__standorte li:hover, .hero__standorte li:focus-within { background: rgb(255 255 255 / .2); }
.hero__standort { display: grid; color: var(--color-auf-dunkel); min-height: 44px; align-content: center; }
.hero__standort:hover, .hero__standort:focus-visible { text-decoration: none; color: var(--color-auf-dunkel); }
.hero__standort-name { font-weight: 700; line-height: 1.25; }
.hero__standort-strasse { font-size: .8125rem; color: rgb(255 255 255 / .88); }
.hero__standort-tel { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; color: var(--color-auf-dunkel); font-weight: 600; font-size: var(--fs-small); white-space: nowrap; }
.hero__standort-tel:hover, .hero__standort-tel:focus-visible { color: var(--color-auf-dunkel); }
/* Weiter-Hinweis: eine Linie, in der ein Lichtstreifen nach unten läuft */
.hero__weiter { display: none; }
@media (min-width: 1000px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) 360px; column-gap: clamp(2rem, 5vw, 5rem); }
  .hero__weiter { display: block; position: absolute; left: 50%; bottom: 1rem; width: 44px; height: 56px; margin-left: -22px; }
  .hero__weiter span { position: absolute; left: 21px; top: 6px; width: 2px; height: 44px; border-radius: 2px; background: rgb(255 255 255 / .25); overflow: hidden; }
  .hero__weiter span::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--color-auf-dunkel); animation: weiter-lauf 2s cubic-bezier(.6, 0, .3, 1) infinite; }
}
@keyframes weiter-lauf { to { top: 100%; } }
.hero-anker { scroll-margin-top: var(--header-h); }

/* ---------- Zweispalter Text + Bild ---------- */
.duo { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 900px) { .duo { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } .duo--umgekehrt > :first-child { order: 2; } }
.duo__text .btn-reihe { margin-top: var(--space-3); }
.bild-rahmen { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.bild-rahmen img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.bild-rahmen--hoch img { aspect-ratio: 3 / 4; }
.bildgruppe { position: relative; }
.bildgruppe .bild-rahmen:nth-child(2) { position: absolute; width: 58%; right: -4%; bottom: -12%; border: 6px solid var(--color-bg); box-shadow: var(--shadow-lg); }
@media (max-width: 899px) { .bildgruppe { margin-bottom: 14%; } }

/* ---------- Vorteile (Startseite) ---------- */
.vorteile {
  list-style: none; margin: 0; padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--color-bg); border: 1.5px solid var(--color-primary); border-radius: var(--radius);
  box-shadow: var(--shadow); display: grid; gap: .25rem;
}
.vorteil { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; margin: 0; border-bottom: 1px solid var(--color-border); font-weight: 500; }
.vorteil:last-child { border-bottom: 0; }
.vorteil__icon { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary); color: var(--color-auf-dunkel); }

/* ---------- Karten (Fachbereiche) ---------- */
.karten-band .container { }
.karten-box {
  background: var(--color-bg); border-radius: var(--radius) var(--radius) 30px 30px;  /* Quelle: 20/20/30/30 */
  padding: clamp(1.5rem, 4vw, 3.25rem); color: var(--color-text); box-shadow: var(--shadow-lg);
}
.karten-box .kicker { color: var(--color-primary-dark); }
.karten-box h2, .karten-box h3, .karten-box p { color: var(--color-text); }
.karten-box .karte__body h3 { color: var(--color-accent); }
.karten-box .intro { color: var(--color-muted); }
.karte {
  display: flex; flex-direction: column;
  background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.karte:hover, .karte:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-primary); }
/* Kachel, die als Ganzes verlinkt ist: Der Schwebe-Effekt ist der Hinweis, nicht
   eine Unterstreichung des gesamten Kachelinhalts (globale Regel a:hover). */
a.karte:hover, a.karte:focus-visible { text-decoration: none; }
/* Pfeil der Kachel wandert mit, wie bei jedem .text-link der Seite. */
a.karte:hover .text-link .icon { transform: translateX(3px); }
/* Das Anheben zurueckholen: .auftritt.ist-sichtbar (transform: none) hat dieselbe
   Spezifitaet wie .karte:hover und steht spaeter, gewann also gegen die Zeile darueber. */
.karte.ist-sichtbar:hover, .karte.ist-sichtbar:focus-within { transform: translateY(-4px); }
.karte__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.karte__body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.karte__body h3 { font-size: var(--fs-h4); margin-bottom: .4rem; }
.karte__body p { color: var(--color-muted); font-size: var(--fs-small); margin-bottom: 1rem; }
.karte__link { margin-top: auto; align-self: flex-start; }
.karte__link::after { content: none; }

/* ---------- Bewertungen ---------- */
.stimmen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.stimme {
  margin: 0; background: var(--color-bg); color: var(--color-text); border-radius: var(--radius-sm);
  padding: 1.5rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .75rem;
}
.stimme { min-width: 0; }
.stimme__kopf { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.stimme__kopf > div { min-width: 0; }
.stimme__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary-dark); display: grid; place-items: center; font-weight: 700; }
.stimme__name { font-weight: 600; margin: 0; line-height: 1.2; }
.stimme__quelle { display: flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--color-muted); margin: 0; flex-wrap: wrap; }
.stimme p { margin: 0; color: var(--color-text); font-size: var(--fs-small); line-height: 1.6; }
.band--cyan .stimme p, .band--cyan .stimme__name { color: var(--color-text); }
.band--cyan .stimme__quelle { color: var(--color-muted); }
@media (min-width: 720px) { .stimmen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stimme { grid-column: span var(--sp2, 1); } }
@media (min-width: 1000px) { .stimmen { grid-template-columns: repeat(6, minmax(0, 1fr)); } .stimme { grid-column: span var(--sp6, 2); } }

/* Wischbare Reihe auf dem Handy (gleicher Inhalt, bessere Darbietung).
   Mobil zuerst: Grundregel ist die Reihe, ab 720 px übernimmt wieder das Raster
   des jeweiligen Bausteins. --wisch-rand = Innenabstand des umgebenden Kastens,
   damit die Karten bis an dessen Kante laufen (15.10.2026). */
.swipe {
  --wisch-rand: var(--container-pad);
  display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  gap: var(--space-2); padding: .25rem var(--wisch-rand) 1rem; margin-inline: calc(-1 * var(--wisch-rand));
  scroll-padding-inline: var(--wisch-rand); scrollbar-width: none;
}
.swipe::-webkit-scrollbar { display: none; }
.swipe > * { flex: 0 0 84%; scroll-snap-align: start; margin: 0; }
.karten-box .swipe { --wisch-rand: clamp(1.5rem, 4vw, 3.25rem); }
@media (min-width: 720px) {
  .swipe { display: grid; overflow: visible; scroll-snap-type: none; padding: 0; margin-inline: 0; }
  .swipe > * { flex: initial; }
}

/* ---------- Ablauf ---------- */
.ablauf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.ablauf > *, .schritt > div, .duo > *, .karriere-teaser > *, .kontakt-karten > *, .standorte > *, .spektrum > * { min-width: 0; }
@media (min-width: 900px) { .ablauf { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .ablauf__bild { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); counter-reset: schritt; }
.schritt { min-width: 0; }
.vorteile, .footer-nav ul { grid-template-columns: minmax(0, 1fr); }
.stimmen > *, .vorteile > *, .footer-inner > *, .checkliste > *, .hours__row > * { min-width: 0; }
.schritt {
  position: relative; display: flex; gap: 1.1rem; margin: 0; padding: 1.25rem 1.35rem;
  background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.schritt:hover { border-color: var(--color-primary); box-shadow: var(--shadow); }
.schritt__nr { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary); color: var(--color-auf-dunkel); display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; }
.schritt h3 { font-size: var(--fs-h4); margin-bottom: .3rem; }
.schritt p { margin: 0; color: var(--color-muted); font-size: var(--fs-small); }

/* ---------- Standorte ---------- */
.standorte { display: grid; gap: var(--space-3); }
@media (min-width: 900px) { .standorte { grid-template-columns: 1fr 1fr; } }
.standort {
  background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow);
}
.standort__body { padding: 1.5rem; display: grid; gap: .75rem; }
.standort__body h3 { margin: 0; font-size: var(--fs-h3); }
.standort__zeile { display: flex; align-items: flex-start; gap: .7rem; margin: 0; }
.standort__zeile .icon { color: var(--color-primary-dark); margin-top: .2rem; }
.standort__zeile a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -.55rem; }
.standort__aktionen { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .25rem; }
.standort .map-consent { margin: 0; border: 0; border-radius: 0; border-top: 1px solid var(--color-border); }
.standort .map-consent__frame { height: 300px; }

.map-consent { border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); }
.map-consent__inner { padding: var(--space-3); text-align: center; }
.map-consent__text { margin: 0 auto var(--space-2); max-width: 52ch; font-size: var(--fs-small); color: var(--color-muted); }
.map-consent__text a, .yolawo-consent__inner a { display: inline-block; padding-block: .75rem; margin-block: -.75rem; font-weight: 600; }
.map-consent__frame { display: block; width: 100%; height: 360px; border: 0; }

/* Öffnungszeiten */
.hours { margin: 0; display: grid; gap: .3rem; }
.hours__row { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-small); }
.hours__row:last-child { border-bottom: 0; }
.hours dt { font-weight: 600; margin: 0; }
.hours dd { margin: 0; color: var(--color-muted); text-align: right; }
.legal a, .intro a, .kurs-karte a, .hinweis-box a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; }

/* ---------- Kontaktkarten ---------- */
.kontakt-karten { display: grid; gap: var(--space-3); }
@media (min-width: 900px) { .kontakt-karten { grid-template-columns: 1fr 1fr; } }
.kontakt-karte { background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow); }
.kontakt-karte h2 { font-size: var(--fs-h3); }
.kontakt-karte h3 { font-size: var(--fs-kicker); letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary-dark); margin: 1.5rem 0 .6rem; }
.kontakt-karte h3:first-of-type { margin-top: 1rem; }
.kontakt-karte .hours { max-width: 360px; }
.kontakt-karte .standort__zeile { margin-bottom: .4rem; }
.kontakt-karte .standort__zeile a { font-weight: 600; }
.kontakt-karte .map-consent { margin-top: 1.5rem; }
.kontakt-karte .map-consent__frame { height: 280px; }

/* ---------- Leistungsspektrum (Fachbereichsseiten) ---------- */
.spektrum { display: grid; gap: var(--space-3); }
@media (min-width: 900px) { .spektrum--2 { grid-template-columns: 1fr 1fr; } }
.spektrum__gruppe { background: var(--color-bg); color: var(--color-text); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.spektrum__bild { position: relative; }
.spektrum__bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.spektrum__bild h3 {
  position: absolute; inset: auto 0 0 0; margin: 0; padding: 1.25rem 1.5rem; color: var(--color-auf-dunkel);
  background: linear-gradient(0deg, rgb(48 48 48 / .78), rgb(48 48 48 / 0)); font-size: var(--fs-h3); text-shadow: 0 1px 6px rgb(0 0 0 / .35);
}
.spektrum__body { padding: .5rem 1.5rem 1.5rem; }
.spektrum__body > p { color: var(--color-muted); padding-top: 1rem; }
.akkordeon { border-top: 1px solid var(--color-border); }
.akkordeon summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; color: var(--color-accent);
}
.akkordeon summary h4 { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.spektrum__body--zwei { padding-top: 0; }
@media (min-width: 900px) {
  .spektrum__body--zwei { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; padding: 0 1.75rem 1.5rem; }
  .spektrum__body--zwei > p { grid-column: 1 / -1; }
  .spektrum__body--zwei .akkordeon { align-self: start; }
}
.akkordeon summary::-webkit-details-marker { display: none; }
.akkordeon summary .icon { color: var(--color-primary-dark); transition: transform .25s ease; }
.akkordeon[open] summary .icon { transform: rotate(45deg); }
.akkordeon ul { margin: 0 0 1.1rem; padding-left: 0; list-style: none; display: grid; gap: .45rem; }
.akkordeon li { position: relative; padding-left: 1.6rem; margin: 0; color: var(--color-text); font-size: var(--fs-small); line-height: 1.55; }
.akkordeon li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--color-primary); }
.band--cyan .spektrum__gruppe h3, .band--cyan .spektrum__gruppe p, .band--cyan .spektrum__gruppe summary { color: var(--color-text); }
.band--cyan .spektrum__bild h3 { color: var(--color-auf-dunkel); }
.band--cyan .spektrum__body > p { color: var(--color-muted); }

/* Zusatzangebote / Listen mit Häkchen */
.checkliste { list-style: none; padding: 0; margin: 0 0 var(--space-2); display: grid; gap: .5rem; }
.checkliste li { position: relative; padding-left: 1.9rem; margin: 0; }
.checkliste li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---------- CTA-Band ---------- */
.cta-band { text-align: center; }
.cta-band .band__kopf { margin-bottom: var(--space-3); }
.cta-band .btn-reihe { justify-content: center; margin-top: 0; }

/* ---------- Karriere-Teaser ---------- */
.karriere-teaser { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 900px) { .karriere-teaser { grid-template-columns: 1fr 1fr; } }
.karriere-teaser .bildgruppe .bild-rahmen:nth-child(2) { width: 52%; }

/* ---------- Kurse: Yolawo-Widget (2-Klick) ---------- */
.yolawo-consent { border: 1.5px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); overflow: hidden; }
.yolawo-consent__inner { padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center; }
.yolawo-consent__inner p { max-width: 56ch; margin-inline: auto; color: var(--color-muted); }
.yolawo-isolation-wrapper { padding: 0; margin: 0; width: 100%; max-width: 100%; overflow-x: hidden; overflow-y: visible; }
.yolawo-widget { width: 100%; min-height: 800px; border: none; display: block; }
.kurs-karte { background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow); }
.kurs-karte h3 { margin-bottom: .5rem; }
.kurs-karte__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.kurs-karte__meta li { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: var(--fs-small); margin: 0; }
.kurs-karte__meta .icon { color: var(--color-primary-dark); }
.hinweis-box { border-left: 4px solid var(--color-primary); background: var(--color-primary-soft2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1rem 1.25rem; font-size: var(--fs-small); }

/* ---------- Über uns ---------- */
.zitat { font-size: var(--fs-h3); font-weight: 600; line-height: 1.35; color: var(--color-accent); margin: 0 0 var(--space-2); }
.zitat .icon { color: var(--color-primary); }
.portrait { max-width: 460px; }
.unterschrift { font-weight: 600; margin-top: var(--space-2); }
.unterschrift small { display: block; font-weight: 400; color: var(--color-muted); }

/* ---------- Rechtstexte ---------- */
.legal h1 { margin-bottom: var(--space-3); }
.legal h2 { font-size: var(--fs-h3); margin-top: var(--space-4); }
.legal h3 { font-size: var(--fs-h4); margin-top: var(--space-3); }
.legal p, .legal li { color: var(--color-text); }
.legal .ki-transparenz { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.legal .ki-transparenz img { flex: none; margin-top: .2rem; }
.legal .ki-transparenz p { margin: 0; font-size: var(--fs-small); }
.legal__block { padding: 1rem 1.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
.legal__block p { margin: 0; }
.agb-formular { border: 1px dashed var(--color-border); border-radius: var(--radius-sm); padding: 1.25rem; }
.agb-formular p { margin-bottom: .75rem; }

/* ---------- Hinweisleiste ---------- */
.announce { background: var(--color-accent); color: var(--color-auf-dunkel); font-size: var(--fs-small); }
.announce__inner { display: flex; align-items: center; gap: var(--space-2); padding-block: .5rem; }
.announce p { margin: 0; color: var(--color-auf-dunkel); flex: 1; }
.announce a { color: var(--color-auf-dunkel); text-decoration: underline; }
.announce__close { background: none; border: 0; color: var(--color-auf-dunkel); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 .25rem; min-width: 44px; min-height: 44px; }

/* ---------- Fußzeile ---------- */
/* Fußzeile: schließt ohne Zwischenraum an den letzten Abschnitt an, Trennung
   allein über den Hintergrund (Julian, 09.09.2026) */
.site-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); margin-top: 0; }
.footer-inner { display: grid; gap: var(--space-4); padding-block: var(--band) var(--space-4); }
@media (min-width: 720px) { .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .footer-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); } }
.footer-col p { font-size: var(--fs-small); color: var(--color-muted); }
.footer-col__title { font-weight: 600; color: var(--color-accent); margin: 0 0 .6rem; font-size: var(--fs-body); }
.footer-col__title + .footer-col__title, .footer-adresse + .footer-col__title, .footer-hinweis + .footer-col__title { margin-top: 1.5rem; }
.footer-brand__logo { width: 110px; height: auto; margin-bottom: .75rem; }
.footer-col p.footer-brand__claim { font-weight: 600; color: var(--color-accent); font-size: var(--fs-body); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.footer-nav li { margin: 0; }
.footer-nav a, .footer-adresse a, .footer-col a { color: var(--color-text); font-size: var(--fs-small); display: inline-flex; align-items: center; min-height: 44px; margin-block: -.6rem; }
.footer-nav a:hover, .footer-adresse a:hover { color: var(--color-primary-dark); }
.footer-adresse { font-size: var(--fs-small); line-height: 1.7; color: var(--color-muted); }
.footer-adresse a { font-weight: 600; }
.footer-col p.footer-hinweis { font-size: .8rem; margin-top: .5rem; }
.footer-bottom { border-top: 1px solid var(--color-border); }
.footer-bottom__inner { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; align-items: center; padding-block: 1rem; font-size: .8125rem; color: var(--color-muted); }
.footer-bottom__nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bottom__nav a { color: var(--color-text); font-size: .8125rem; display: inline-flex; align-items: center; min-height: 44px; }
.tel-link { white-space: nowrap; }

/* ---------- Schwebender Rezeptions-Knopf (vor dem Laden von Docmedico) ---------- */
.rezeption-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 850;
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .55rem 1.1rem .55rem .6rem; min-height: 56px;
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--color-primary-dark); color: var(--color-auf-dunkel);
  font: inherit; text-align: left; box-shadow: 0 12px 28px -10px rgb(0 172 225 / .7), 0 2px 6px rgb(48 48 48 / .15);
  transition: transform .2s ease, background .2s ease;
}
.rezeption-fab:hover, .rezeption-fab:focus-visible { background: var(--color-primary); transform: translateY(-2px); }
.rezeption-fab[hidden] { display: none; }
.rezeption-fab__icon { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--color-auf-dunkel); color: var(--color-primary-dark); display: grid; place-items: center; }
.rezeption-fab__text { display: grid; line-height: 1.15; }
.rezeption-fab__text strong { font-size: .95rem; font-weight: 700; }
.rezeption-fab__text small { font-size: .72rem; opacity: .9; }
.rezeption-fab.ist-laden { opacity: .7; pointer-events: none; }
@media (max-width: 600px) { .rezeption-fab { right: 14px; bottom: 14px; } .rezeption-fab__text small { display: none; } }

/* ---------- Einblendung beim Scrollen ---------- */
.auftritt { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--verzug, 0ms); }
.auftritt.ist-sichtbar { opacity: 1; transform: none; }

/* ---------- Einwilligungsbanner (nur mit Meta-Pixel) ---------- */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: var(--color-bg); border-top: 3px solid var(--color-primary); box-shadow: 0 -6px 24px rgb(48 48 48 / .14); }
.consent[hidden] { display: none; }
.consent__inner { max-width: var(--container); margin: 0 auto; padding: var(--space-2); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.consent__text { flex: 1 1 26rem; }
.consent__title { margin: 0 0 .35rem; font-size: 1.05rem; }
.consent__text p { margin: 0; font-size: var(--fs-small); color: var(--color-muted); max-width: 75ch; }
.consent__actions { display: flex; gap: var(--space-1); flex: 0 0 auto; margin-left: auto; }
.consent__actions .btn { min-width: 10rem; }

/* ---------- Admin (Template) ---------- */
.admin-bar { border-bottom: 2px solid var(--color-primary); }
.admin-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; padding-top: .6rem; padding-bottom: .6rem; }
.admin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .35rem; }
.admin-nav a { padding: .45rem .7rem; border-radius: 8px; font-size: var(--fs-small); font-weight: 500; color: var(--color-text); white-space: nowrap; }
.admin-nav a:hover { background: var(--color-surface); }
.admin-nav a.is-active { background: var(--color-primary); color: var(--color-auf-dunkel); }
.admin-nav__burger, .admin-nav__checkbox { display: none; }
.btn--sm { padding: .35rem .75rem; font-size: .8rem; min-height: 36px; }
.form { margin-top: var(--space-3); }
.form__group { margin-bottom: var(--space-3); }
.form__group label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.form__group input, .form__group textarea, .form__group select { width: 100%; padding: .75rem; border: 1px solid var(--color-border); border-radius: 10px; font: inherit; background: var(--color-bg); color: var(--color-text); }
.form__group input:focus, .form__group textarea:focus, .form__group select:focus { border-color: var(--color-primary); outline: none; }
.form__hint { font-size: var(--fs-small); color: var(--color-muted); }
.form__note { margin-top: var(--space-2); font-weight: 600; }
.form__note--ok { color: var(--color-ok); }
.form__note--err { color: var(--color-danger); }
.form__notice { margin: 0 0 var(--space-2); padding: .7rem var(--space-2); border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface); font-size: .92rem; }
.form__notice--ok { border-color: var(--color-ok); }
.form__notice--err { border-color: var(--color-danger); }
.dash__progress { margin: var(--space-3) 0; }
.dash__bar { height: 10px; border-radius: 999px; background: var(--color-border); overflow: hidden; margin-bottom: .4rem; }
.dash__bar span { display: block; height: 100%; background: var(--color-primary); }
.dash__groups { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 760px) { .dash__groups { grid-template-columns: 1fr 1fr; align-items: start; } }
.dash__group { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-auf-dunkel); overflow: hidden; }
.dash__group-head { display: flex; align-items: center; gap: .6rem; padding: .75rem var(--space-3); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.dash__group-head h2 { margin: 0; font-size: 1rem; flex: 1; }
.dash__count { font-size: .8rem; font-weight: 700; color: var(--color-muted); padding: .1rem .5rem; border-radius: 999px; background: var(--color-auf-dunkel); border: 1px solid var(--color-border); }
.dash__count.is-done { color: var(--color-auf-dunkel); background: var(--color-ok); border-color: var(--color-ok); }
.dash__list { list-style: none; margin: 0; padding: .35rem var(--space-3) var(--space-2); display: flex; flex-direction: column; }
.dash__item { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--color-border); }
.dash__item:last-child { border-bottom: 0; }
.dash__mark { flex: 0 0 1.3rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: var(--color-auf-dunkel); background: var(--color-border); }
.dash__item--done .dash__mark { background: var(--color-ok); }
.dash__label { flex: 1; font-size: .9rem; }
.dash__optional, .dash__manual { display: inline-block; margin-left: .4rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; padding: .05rem .35rem; border-radius: 4px; }
.dash__optional { color: var(--color-muted); background: var(--color-surface); }
.dash__manual { color: var(--color-text); background: var(--color-primary-soft); }
.trk__topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.trk__ranges { display: flex; gap: .35rem; flex-wrap: wrap; }
.trk__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.trk__kpi { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-auf-dunkel); padding: var(--space-2) var(--space-3); text-align: center; }
.trk__kpi strong { display: block; font-size: 1.8rem; line-height: 1.1; color: var(--color-primary-dark); }
.trk__kpi span { font-size: .8rem; color: var(--color-muted); }
.trk__cols { display: grid; grid-template-columns: 1fr; gap: var(--space-2); margin: .5rem 0 var(--space-3); }
@media (min-width: 760px) { .trk__cols { grid-template-columns: 1fr 1fr; } .trk__cols--three { grid-template-columns: repeat(3, 1fr); } .trk__cols--wide { grid-template-columns: 1fr; } }
.trk__panel { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-auf-dunkel); padding: var(--space-2) var(--space-3); }
.trk__list, .trk__table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.trk__list td, .trk__table td, .trk__table th { padding: .35rem .3rem; border-bottom: 1px solid var(--color-border); text-align: left; }
.trk__chart { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 140px; padding: .5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-auf-dunkel); overflow-x: auto; }
.trk__col { flex: 1 0 4px; min-width: 4px; height: 100%; display: flex; align-items: flex-end; }
.trk__colbar { display: block; width: 100%; background: var(--color-primary); border-radius: 2px 2px 0 0; min-height: 2px; }
.trk__line { position: absolute; inset: .5rem; width: calc(100% - 1rem); height: calc(100% - 1rem); pointer-events: none; }
.trk__line polyline { fill: none; stroke: var(--color-secondary); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.trk__realtime { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .65rem var(--space-2); margin: .75rem 0; border: 1px solid var(--color-border); border-left: 4px solid var(--color-ok); border-radius: var(--radius-sm); font-size: .9rem; }
.trk-mini { display: block; height: 7px; border-radius: 999px; background: var(--color-border); overflow: hidden; }
.trk-mini__fill { display: block; height: 100%; background: var(--color-primary); }
.kmp__hint, .kmp__pixel { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); padding: var(--space-2) var(--space-3); margin: var(--space-3) 0; }
.legal__hint { margin-top: var(--space-4); padding: var(--space-2); background: var(--color-surface); border-left: 4px solid var(--color-primary); border-radius: 0 10px 10px 0; }

/* =========================================================================
   Responsiv
   ========================================================================= */
@media (max-width: 979px) {
  :root { --header-h: 72px; }
  .logo img { height: 52px; }
  .header-cta { display: none; }
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
    background: var(--color-bg); overflow-y: auto; padding: var(--space-2) var(--container-pad) var(--space-4);
    display: none;
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li { border-bottom: 1px solid var(--color-border); }
  .site-nav a { display: flex; width: 100%; padding: .9rem .5rem; font-size: 1.0625rem; border-radius: 0; min-height: 52px; }
  .has-sub { display: grid; grid-template-columns: 1fr auto; }
  .sub-toggle { display: grid; place-items: center; width: 52px; height: 52px; border: 0; background: transparent; color: var(--color-primary-dark); cursor: pointer; }
  .sub-toggle .icon { transition: transform .2s ease; }
  .sub-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
  /* GEÄNDERT 2026-10-19: „.site-nav ul { display:flex }“ schlug „.sub-menu { display:none }“, und
     „visibility: visible“ hob das Verstecken des geschlossenen Menüs auf. Folge: Das Untermenü
     „Leistungen“ lag unsichtbar mitten über der Seite und fing Fingertipps ab (Feedback 19.10.). */
  .site-nav .sub-menu { grid-column: 1 / -1; position: static; opacity: 1; visibility: inherit; transform: none; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 .5rem .75rem; display: none; min-width: 0; }
  .site-nav .has-sub.ist-offen > .sub-menu { display: flex; }
  .sub-menu li { border-bottom: 0; }
  .sub-menu a { min-height: 46px; padding: .6rem .5rem; font-size: 1rem; }
  .site-nav__mobil-cta { display: grid; gap: .75rem; margin-top: var(--space-3); }
  .site-nav__mobil-cta .btn { width: 100%; }
  .site-nav a.site-nav__tel { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem .25rem; font-weight: 600; color: var(--color-text); }
  .site-nav__tel .icon { color: var(--color-primary-dark); }
  body.menue-offen { overflow: hidden; }
}
@media (max-width: 600px) {
  :root { --radius-hero: 48px; }
  .btn-reihe .btn { width: 100%; }
  .footer-bottom__inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .auftritt { opacity: 1; transform: none; }
  .karte.ist-sichtbar:hover, .karte.ist-sichtbar:focus-within { transform: none; }
  .hero__medium video { display: none; }
}
@media print {
  .site-header, .site-footer .btn, .nav-toggle, .hero__medium video, .map-consent, .yolawo-consent { display: none; }
}


/* ---------- Ratgeber / Krankheitsbild-Seiten (Briefing 09.09.2026, mobil zuerst) ---------- */
.entwurf-hinweis { background: var(--color-accent); color: var(--color-auf-dunkel); font-size: var(--fs-small); padding: .6rem 0; }
.entwurf-hinweis strong { color: var(--color-auf-dunkel); }
.entwurf-marke { color: var(--color-primary-dark); font-weight: 600; }
.kb-kopf { background: var(--color-surface); padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(1.25rem, 3vw, 2rem); }
.kb-kopf h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); max-width: 26ch; }
.brotkrumen { font-size: var(--fs-small); color: var(--color-muted); margin-bottom: .75rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.brotkrumen a { color: var(--color-muted); display: inline-flex; align-items: center; min-height: 44px; margin-block: -.6rem; }
.brotkrumen [aria-current] { color: var(--color-text); font-weight: 600; }
.kb-meta { font-size: var(--fs-small); color: var(--color-muted); margin: .25rem 0 0; }
.kb-meta a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -.6rem; }
.kb-sprung { position: sticky; top: var(--header-h); z-index: 20; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.kb-sprung ul { list-style: none; margin: 0; padding: .5rem 0; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.kb-sprung ul::-webkit-scrollbar { display: none; }
.kb-sprung li { flex: none; }
.kb-sprung a { display: inline-flex; align-items: center; min-height: 44px; padding: .35rem .9rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: 600; color: var(--color-text); white-space: nowrap; }
.kb-sprung a:hover, .kb-sprung a:focus-visible { border-color: var(--color-primary); color: var(--color-primary-dark); text-decoration: none; }
.kb .band--eng { padding-block: clamp(2.25rem, 5vw, 4rem); }
.kb h2 { font-size: var(--fs-h3); margin-bottom: 1rem; }
.kb .intro { margin-bottom: var(--space-3); }
.kb-duo { display: grid; gap: var(--space-4); align-items: center; }
.kb-bild { max-width: 520px; }
.kb-kurz { border-left: 4px solid var(--color-primary); padding-left: 1.1rem; margin-bottom: var(--space-3); }
.kb-kurz p { font-size: var(--fs-lead); color: var(--color-text); margin-bottom: .75rem; }
.kb-kurz p:last-child { margin-bottom: 0; }
.kb-liste { margin-bottom: var(--space-3); }
.kb-liste li { line-height: 1.55; }
.kb-karten { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.kb-karte { background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 1.1rem 1.25rem; }
.band--soft .kb-karte { border-color: transparent; box-shadow: var(--shadow); }
.kb-karte h3 { font-size: 1.0625rem; margin-bottom: .35rem; }
.kb-karte p { margin: 0; color: var(--color-muted); font-size: var(--fs-small); line-height: 1.6; }
.kb-schritte { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); counter-reset: kbs; }
.kb-schritte li { position: relative; padding-left: 3.25rem; counter-increment: kbs; }
.kb-schritte li::before { content: counter(kbs); position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--color-primary); color: var(--color-auf-dunkel); font-weight: 700; display: grid; place-items: center; }
.kb-schritte h3 { font-size: 1.0625rem; margin-bottom: .3rem; }
.kb-schritte p { margin: 0; color: var(--color-muted); font-size: var(--fs-small); line-height: 1.6; }
.kb-angebot { display: grid; gap: var(--space-4); }
.kb-angebot h3 { font-size: var(--fs-h4); margin: 1.25rem 0 .6rem; }
.kb-angebot h3 a { color: var(--color-accent); display: inline-flex; align-items: center; min-height: 44px; margin-block: -.4rem; }
.kb-angebot h3 a:hover { color: var(--color-primary-dark); }
.kb-angebot__hinweis { font-size: var(--fs-small); color: var(--color-muted); margin-top: 1rem; }
.kb-termin { background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 1.5rem; align-self: start; position: sticky; top: calc(var(--header-h) + 64px); }
.kb-termin h3 { font-size: var(--fs-h4); margin-bottom: .4rem; }
.kb-termin > p { color: var(--color-muted); font-size: var(--fs-small); }
.kb-termin__btn { width: 100%; justify-content: center; margin: .5rem 0 1rem; }
.kb-termin__tel { line-height: 1.7; margin-bottom: .75rem; }
.kb-termin__tel a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; min-height: 44px; }
.quellen { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); counter-reset: q; }
.quellen li { position: relative; padding: 1rem 1.25rem 1rem 3.25rem; background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); counter-increment: q; }
.quellen li::before { content: counter(q); position: absolute; left: 1rem; top: 1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary-dark); font-weight: 700; font-size: var(--fs-small); display: grid; place-items: center; }
.quellen p { margin: 0 0 .5rem; color: var(--color-text); }
.quellen__ref { font-size: var(--fs-small); color: var(--color-muted); margin: 0; }
.quellen__ref a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; font-weight: 600; }
.faq { display: grid; }
.faq__item summary h3 { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.faq__a { padding: 0 0 1.1rem; }
.faq__a p { margin: 0; color: var(--color-text); line-height: 1.65; }
.pruefvermerk { background: var(--color-primary-soft2); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 1.5rem; }
.pruefvermerk h2 { font-size: var(--fs-h4); margin-bottom: .5rem; }
.pruefvermerk p { margin-bottom: .5rem; }
.video-klick { margin: var(--space-3) 0 0; }
.video-klick__flaeche { aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: .75rem; padding: 1.5rem; background: var(--color-accent); color: var(--color-auf-dunkel); border-radius: var(--radius-sm); }
.video-klick__titel { font-weight: 600; color: var(--color-auf-dunkel); margin: 0; }
.video-klick__text { font-size: var(--fs-small); color: var(--color-auf-dunkel); opacity: .85; max-width: 46ch; margin: 0; }
.video-klick__text a { color: var(--color-auf-dunkel); text-decoration: underline; }
.video-klick iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-sm); display: block; }
.video-klick figcaption { font-size: var(--fs-small); color: var(--color-muted); margin-top: .5rem; }
@media (min-width: 720px) {
  .kb-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .kb-duo { grid-template-columns: 1.15fr .85fr; }
  .kb-angebot { grid-template-columns: 1.4fr 1fr; }
}

/* =========================================================================
   Erlebnis-Ebene (15.10.2026, Agentur Krüger)
   Bewegung und Interaktion über den bestehenden Bausteinen: Scroll-Fortschritt,
   Kennzahlen, Karten mit Neigung und Lichtkegel, Film-Band, Ablauf als
   Scroll-Geschichte, Bild-Enthüllung, kompakter Rezeptions-Knopf.
   Alles ohne JavaScript sichtbar und bedienbar; prefers-reduced-motion schaltet
   die Bewegung ab (Block am Ende).
   ========================================================================= */

/* ---------- Kopfzeile: Lesefortschritt als Cyan-Linie ---------- */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  transform-origin: 0 50%; transform: scaleX(var(--fortschritt, 0));
  pointer-events: none;
}

/* ---------- Glas-Knopf (auf Bild/Film) ---------- */
.btn--glas {
  color: var(--color-auf-dunkel); border-color: rgb(255 255 255 / .55);
  background: rgb(255 255 255 / .08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn--glas:hover, .btn--glas:focus-visible { background: rgb(255 255 255 / .2); color: var(--color-auf-dunkel); border-color: var(--color-auf-dunkel); }
/* Rahmen-Knöpfe im Hero sehen aus wie der Glas-Knopf (Cyan-Schrift wäre auf dem Bildgrund zu blass) */
.hero .btn--ghost { color: var(--color-auf-dunkel); border-color: rgb(255 255 255 / .55); background: rgb(255 255 255 / .08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero .btn--ghost:hover, .hero .btn--ghost:focus-visible { background: rgb(255 255 255 / .2); color: var(--color-auf-dunkel); border-color: var(--color-auf-dunkel); }
/* Primärknopf: Lichtkante läuft beim Überfahren durch */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s ease;
}
.btn--primary:hover::after, .btn--primary:focus-visible::after { transform: translateX(120%); }
.btn[data-magnet] { transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .35s cubic-bezier(.2, .75, .15, 1); }

/* ---------- Kennzahlen (Startseite, Abschnitt „Warum") ---------- */
.kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.75rem 0 0; }
.kennzahl { margin: 0; padding: 1rem 0 0; border-top: 2px solid var(--color-primary); min-width: 0; }
.kennzahl dt { order: 2; font-size: var(--fs-small); color: var(--color-muted); font-weight: 500; line-height: 1.35; }
.kennzahl dd { margin: 0 0 .25rem; font-size: var(--fs-h2); font-weight: 700; line-height: 1; color: var(--color-primary-dark); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kennzahl { display: flex; flex-direction: column; }
.kennzahl dd { order: 1; }

/* ---------- Karten: Bildzoom, Neigung, Lichtkegel, Pfeilkreis ---------- */
.karte { position: relative; transform-style: preserve-3d; will-change: transform; }
.karte::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgb(18 187 240 / .16), transparent 60%);
  opacity: 0; transition: opacity .35s ease;
}
.karte:hover::before { opacity: 1; }
.karte__bild { display: block; overflow: hidden; position: relative; }
.karte__bild img { transition: transform 1.1s cubic-bezier(.2, .75, .15, 1); }
.karte:hover .karte__bild img, .karte:focus-within .karte__bild img { transform: scale(1.07); }
.karte__link { gap: .6rem; }
.karte__link .icon {
  width: 34px; height: 34px; padding: 8px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid var(--color-primary); color: var(--color-primary-dark);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.karte:hover .karte__link .icon, .karte__link:focus-visible .icon { background: var(--color-primary); color: var(--color-auf-dunkel); transform: translateX(4px); }
.karte__link:hover { text-decoration: none; }
.karte--uebersicht { background: var(--color-surface); border-color: transparent; }
/* Neigung setzt main.js über --rx/--ry; ohne JS bleibt das Anheben aus style.css */
.karte.ist-geneigt, .karte.ist-geneigt.ist-sichtbar:hover {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
  transition: transform .12s linear, box-shadow .25s ease, border-color .25s ease;
}

/* Patientenstimmen: Lichtkegel und leichtes Anheben */
.stimme { position: relative; transition: transform .35s cubic-bezier(.2, .75, .15, 1), box-shadow .35s ease; }
.stimme::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgb(18 187 240 / .12), transparent 60%);
  opacity: 0; transition: opacity .35s ease;
}
.stimme:hover::before { opacity: 1; }
.stimme.ist-sichtbar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ---------- Film-Band: Rahmen wächst beim Scrollen auf volle Breite ---------- */
.film-band { padding-block: var(--band) 0; background: var(--color-bg); overflow-x: clip; }
.film-band__kopf { margin-bottom: var(--space-4); }
.film-band__buehne { --p: 0; display: flex; justify-content: center; }
.film-band__rahmen {
  position: relative; overflow: hidden; background: var(--color-nacht);
  --rahmen-b: min(100% - 2 * var(--container-pad), var(--container) - 2 * var(--container-pad));
  width: calc(var(--rahmen-b) + (100% - var(--rahmen-b)) * var(--p));
  border-radius: calc(var(--radius) * (1 - var(--p))) calc(var(--radius) * (1 - var(--p))) var(--radius-hero) calc(var(--radius) * (1 - var(--p)));
  aspect-ratio: 16 / 9; max-height: 88svh;
}
.film-band__rahmen video, .film-band__rahmen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-band__rahmen video { opacity: 0; transition: opacity .8s ease; }
.film-band__rahmen video.laeuft { opacity: 1; }
.film-band__schalter {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 2; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .5); background: rgb(var(--nacht-rgb) / .45); color: var(--color-auf-dunkel);
  display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s ease;
}
.film-band__schalter:hover, .film-band__schalter:focus-visible { background: rgb(var(--nacht-rgb) / .7); }
.film-band__schalter svg { width: 18px; height: 18px; }
.film-band__schalter .icon-play { display: none; }
.film-band__schalter[aria-pressed="true"] .icon-pause { display: none; }
.film-band__schalter[aria-pressed="true"] .icon-play { display: block; }
@media (max-width: 719px) { .film-band__rahmen { aspect-ratio: 4 / 5; } }

/* ---------- Ablauf als Scroll-Geschichte: Fortschrittslinie, aktiver Schritt ---------- */
.schritte { position: relative; }
@media (min-width: 900px) {
  .schritte { padding-left: 0; }
  .schritte::before, .schritte::after {
    content: ""; position: absolute; left: calc(1.35rem + 23px); top: 2.5rem; bottom: 2.5rem; width: 2px; border-radius: 2px; z-index: 0;
  }
  .schritte::before { background: var(--color-border); }
  .schritte::after { background: linear-gradient(var(--color-primary), var(--color-primary-dark)); transform-origin: 50% 0; transform: scaleY(var(--ablauf-p, 0)); }
  .schritt { background: transparent; border-color: transparent; z-index: 1; padding-block: 1.75rem; }
  .schritt:hover { box-shadow: none; border-color: transparent; }
  .js .schritt .schritt__nr { background: var(--color-bg); color: var(--color-primary-dark); box-shadow: inset 0 0 0 2px var(--color-primary); transition: background .4s ease, color .4s ease, transform .4s ease; }
  .js .schritt.ist-aktiv .schritt__nr, .js .schritt.ist-erledigt .schritt__nr { background: var(--color-primary); color: var(--color-auf-dunkel); }
  .js .schritt.ist-aktiv .schritt__nr { transform: scale(1.12); }
  .js .schritt.ist-aktiv { background: var(--color-bg); border-color: var(--color-border); box-shadow: var(--shadow); transition: background .4s ease, box-shadow .4s ease, border-color .4s ease; }
  .band--soft .schritt.ist-aktiv { border-color: transparent; }
  .schritte { gap: 14vh; padding-block: 4vh 10vh; }
  .schritte .schritt { align-items: flex-start; }
}

/* ---------- Bild-Enthüllung: Rahmen öffnet sich von unten, Bild sinkt in Position ---------- */
.js .bild-rahmen.enthuellen { clip-path: inset(100% 0 0 0 round var(--radius)); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); }
.js .bild-rahmen.enthuellen img { transform: scale(1.18); transition: transform 1.6s cubic-bezier(.2, .75, .15, 1); }
.js .bild-rahmen.enthuellen.ist-enthuellt { clip-path: inset(0 0 0 0 round var(--radius)); }
.js .bild-rahmen.enthuellen.ist-enthuellt img { transform: scale(1); }
/* Bildgruppen: zweites Bild läuft beim Scrollen leicht gegen (main.js setzt --tiefe) */
.bildgruppe .bild-rahmen:nth-child(2) { translate: 0 var(--tiefe, 0px); }
.bildgruppe:has(.bild-rahmen:only-child) { margin-bottom: 0; }

/* Einblendung: zusätzlich ein Hauch Unschärfe, der beim Ankommen weicht */
.js .auftritt { filter: blur(6px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .75, .15, 1), filter .7s ease; transition-delay: var(--verzug, 0ms); }
.js .auftritt.ist-sichtbar { filter: none; }

/* ---------- Leistungsspektrum: Bild zoomt, Akkordeon gleitet ---------- */
.spektrum__bild { overflow: hidden; }
.spektrum__bild img { transition: transform 1.2s cubic-bezier(.2, .75, .15, 1); }
.spektrum__gruppe:hover .spektrum__bild img { transform: scale(1.05); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .akkordeon::details-content { block-size: 0; overflow: clip; transition: block-size .45s cubic-bezier(.2, .75, .15, 1), content-visibility .45s allow-discrete; }
  .akkordeon[open]::details-content { block-size: auto; }
}
.akkordeon summary { transition: color .2s ease; }
.akkordeon summary:hover { color: var(--color-primary-dark); }

/* ---------- Rezeptions-Knopf: kompakt beim Lesen, voll beim Überfahren ---------- */
.rezeption-fab__text { max-width: 12rem; overflow: hidden; white-space: nowrap; transition: max-width .4s ease, opacity .3s ease; }
.rezeption-fab.ist-kompakt { padding-right: .6rem; gap: 0; }
/* Im Hero stehen Termin-Knopf und Telefonnummern schon: dort keinen zweiten Knopf darüberlegen */
.rezeption-fab.ist-im-hero { opacity: 0; transform: translateY(16px); pointer-events: none; }
.rezeption-fab { transition: transform .3s ease, opacity .3s ease, background .2s ease, padding .35s ease, gap .35s ease; }
.rezeption-fab.ist-kompakt .rezeption-fab__text { max-width: 0; opacity: 0; }
.rezeption-fab.ist-kompakt:hover, .rezeption-fab.ist-kompakt:focus-visible { padding-right: 1.1rem; gap: .75rem; }
.rezeption-fab.ist-kompakt:hover .rezeption-fab__text, .rezeption-fab.ist-kompakt:focus-visible .rezeption-fab__text { max-width: 12rem; opacity: 1; }

/* ---------- Mobiles Menü: gleitet ein statt aufzuspringen ---------- */
@media (max-width: 979px) {
  .site-nav { display: block; visibility: hidden; opacity: 0; transform: translateY(-12px); transition: opacity .25s ease, transform .3s cubic-bezier(.2, .75, .15, 1), visibility .3s; }
  .site-nav[data-open="true"] { visibility: visible; opacity: 1; transform: none; }
  /* Geschlossenes Menü nimmt keinen einzigen Fingertipp an, egal was darin sichtbar geschaltet ist */
  .site-nav:not([data-open="true"]), .site-nav:not([data-open="true"]) * { pointer-events: none; }
  .site-nav > ul > li { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
  .site-nav[data-open="true"] > ul > li { opacity: 1; transform: none; }
  .site-nav[data-open="true"] > ul > li:nth-child(2) { transition-delay: .03s; }
  .site-nav[data-open="true"] > ul > li:nth-child(3) { transition-delay: .06s; }
  .site-nav[data-open="true"] > ul > li:nth-child(4) { transition-delay: .09s; }
  .site-nav[data-open="true"] > ul > li:nth-child(5) { transition-delay: .12s; }
  .site-nav[data-open="true"] > ul > li:nth-child(6) { transition-delay: .15s; }
  .site-nav[data-open="true"] > ul > li:nth-child(7) { transition-delay: .18s; }
}

/* =========================================================================
   Handy-Optimierung (15.10.2026, Agentur Krüger)
   Lange Kartenstapel werden am Handy zu Wischreihen mit Fortschrittsleiste,
   Paare (zwei Standorte, zwei Zielgruppen) zu einem Umschalter. Ohne
   JavaScript bleibt alles untereinander sichtbar; ab 720 bzw. 900 px gilt das
   bisherige Raster. Leiste und Umschalter baut main.js.
   ========================================================================= */

/* Raster behält ab Tablet seinen eigenen Abstand (.swipe setzt den kleineren) */
@media (min-width: 720px) { .raster.swipe { gap: var(--space-3); } }

/* ---------- Leiste unter einer Wischreihe: Zähler, Fortschritt, Pfeile ---------- */
.wisch-leiste { display: flex; align-items: center; gap: .9rem; margin-top: .35rem; color: var(--color-primary-dark); }
.band--cyan .wisch-leiste { color: var(--color-auf-dunkel); }
.band--cyan .karten-box .wisch-leiste { color: var(--color-primary-dark); }
/* Kurze Rezensionen nicht auf die Höhe der längsten strecken (leere Fläche) */
.stimmen.swipe { align-items: flex-start; }
@media (min-width: 720px) { .stimmen.swipe { align-items: stretch; } }
.wisch-leiste__zahl { flex: none; min-width: 3.4rem; font-size: var(--fs-small); font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.wisch-leiste__spur { position: relative; flex: 1; height: 3px; border-radius: 3px; background: currentColor; opacity: .9; overflow: hidden; }
.wisch-leiste__spur::before { content: ""; position: absolute; inset: 0; background: var(--color-bg); opacity: .72; }
.band--cyan .wisch-leiste__spur::before { background: var(--color-primary-dark); opacity: .6; }
.band--cyan .karten-box .wisch-leiste__spur::before { background: var(--color-bg); opacity: .72; }
.wisch-leiste__daumen {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: currentColor;
  width: var(--daumen-b, 30%); transform: translateX(var(--daumen-x, 0px)); transition: transform .12s linear;
}
.wisch-leiste__pfeile { flex: none; display: flex; gap: .5rem; }
.wisch-leiste__pfeil {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1.5px solid currentColor; background: transparent; color: inherit; padding: 0;
  transition: background .2s ease, color .2s ease, opacity .2s ease, transform .15s ease;
}
.wisch-leiste__pfeil:active { transform: scale(.94); }
.wisch-leiste__pfeil:disabled { opacity: .35; cursor: default; }
.wisch-leiste__pfeil--zurueck .icon { transform: rotate(180deg); }
@media (hover: hover) { .wisch-leiste__pfeil:not(:disabled):hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-auf-dunkel); } }
.band--cyan .wisch-leiste__pfeil:not(:disabled):active { background: var(--color-auf-dunkel); color: var(--color-primary-dark); }
@media (min-width: 720px) { .wisch-leiste { display: none; } }

/* ---------- Umschalter: zwei Standorte bzw. zwei Zielgruppen ---------- */
.umschalter {
  display: flex; gap: .25rem; padding: .3rem; margin: 0 0 var(--space-3);
  border-radius: var(--radius-pill); background: var(--color-primary-soft);
  position: sticky; top: calc(var(--header-h) + .5rem); z-index: 30;
}
/* Klebt der Umschalter über einer weißen Karte, braucht er eine eigene, deckende Fläche */
.band--cyan .umschalter { background: var(--color-primary-dark); box-shadow: 0 10px 24px -12px rgb(var(--nacht-rgb) / .45), inset 0 0 0 1px rgb(255 255 255 / .25); }
.umschalter__knopf {
  flex: 1 1 0; min-width: 0; min-height: 48px; padding: .55rem .9rem; border: 0; border-radius: var(--radius-pill);
  font: inherit; font-size: var(--fs-small); font-weight: 600; line-height: 1.2; cursor: pointer;
  background: transparent; color: var(--color-primary-dark); transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.band--cyan .umschalter__knopf { color: var(--color-auf-dunkel); }
.umschalter__knopf[aria-selected="true"] { background: var(--color-bg); color: var(--color-primary-dark); box-shadow: var(--shadow); }
.band:not(.band--cyan) .umschalter { background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border), 0 10px 24px -14px rgb(48 48 48 / .3); }
.band:not(.band--cyan) .umschalter__knopf[aria-selected="true"] { background: var(--color-primary); color: var(--color-auf-dunkel); box-shadow: 0 8px 20px -10px rgb(18 187 240 / .8); }
.ist-umschalter > .ist-aus { display: none; }
.ist-umschalter > .ist-neu { animation: umschalten .45s cubic-bezier(.2, .75, .15, 1) both; }
@keyframes umschalten { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Ab 900 px stehen beide nebeneinander: main.js nimmt dann .ist-aus wieder weg */
@media (min-width: 900px) {
  .umschalter { display: none; }
  .ist-umschalter > .ist-neu { animation: none; }
}

/* ---------- Ablauf am Handy: Schritte als Wischreihe ---------- */
.schritte.swipe { display: flex; padding: .25rem var(--wisch-rand) 1rem; margin-inline: calc(-1 * var(--wisch-rand)); }
.schritte.swipe .schritt { flex-direction: column; gap: .9rem; }
@media (min-width: 720px) {
  .schritte.swipe { display: grid; padding: 0; margin-inline: 0; }
  .schritte.swipe .schritt { flex-direction: row; gap: 1.1rem; }
}
@media (min-width: 900px) { .schritte.swipe { padding-block: 4vh 10vh; } }
/* ---------- Fußzeile am Handy kompakter, Platz für den Rezeptions-Knopf ---------- */
.footer-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.footer-inner { gap: var(--space-3); }
.footer-bottom__inner { padding-bottom: 5.75rem; }
@media (min-width: 720px) {
  .footer-inner { gap: var(--space-4); }
  .footer-nav ul { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom__inner { padding-bottom: 1rem; padding-right: 5.5rem; }
}
@media (min-width: 1300px) { .footer-bottom__inner { padding-right: var(--container-pad); } }

/* ---------- Ratgeber: Sprungleiste zeigt, dass es seitlich weitergeht ---------- */
.kb-sprung ul { scroll-padding-inline: 1rem; }
.kb-sprung[data-rest~="rechts"] ul { mask-image: linear-gradient(90deg, var(--color-text) calc(100% - 56px), transparent); -webkit-mask-image: linear-gradient(90deg, var(--color-text) calc(100% - 56px), transparent); }
.kb-sprung[data-rest~="links"] ul { mask-image: linear-gradient(90deg, transparent, var(--color-text) 56px); -webkit-mask-image: linear-gradient(90deg, transparent, var(--color-text) 56px); }
.kb-sprung[data-rest~="links"][data-rest~="rechts"] ul { mask-image: linear-gradient(90deg, transparent, var(--color-text) 56px, var(--color-text) calc(100% - 56px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, var(--color-text) 56px, var(--color-text) calc(100% - 56px), transparent); }
.kb-sprung a[aria-current="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-auf-dunkel); }
.kb-sprung a { transition: background .25s ease, border-color .25s ease, color .25s ease; }

/* ---------- Bewegung reduziert: alles steht, alles sichtbar ---------- */
@media (prefers-reduced-motion: reduce) {
  .ist-umschalter > .ist-neu { animation: none; }
  .wisch-leiste__daumen { transition: none; }
  .js .auftritt { filter: none; }
  .wort > span { transform: none; transition: none; }
  .js .hero:not(.ist-bereit) .hero__kicker, .js .hero:not(.ist-bereit) .hero__intro,
  .js .hero:not(.ist-bereit) .hero__knoepfe, .js .hero:not(.ist-bereit) .hero__info { opacity: 1; transform: none; }
  .js .bild-rahmen.enthuellen { clip-path: none; }
  .js .bild-rahmen.enthuellen img { transform: none; }
  .hero__medium { transform: none; }
  .hero__medium img, .hero__medium video { animation: none; }
  .hero__status.ist-offen .hero__status-punkt { animation: none; }
  .hero__weiter span::after { animation: none; }
  .karte.ist-geneigt { transform: none; }
  .film-band__buehne { --p: 1; }
  .site-nav > ul > li { opacity: 1; transform: none; }
}

/* =========================================================================
   Korrekturrunde 19.10.2026 (Feedback der Praxis, Agentur Krüger)
   ========================================================================= */

/* ---------- Standortfarben: München grün, Oberschleißheim im Markenblau ----------
   Wunsch der Praxis: Patienten sollen an der Farbe sehen, ob sie beim richtigen
   Standort sind. Gilt überall gleich: Hero, Standortkarten, Kontakt, Reiter, Fuß, Warteliste. */
:root { --color-muenchen: #4c8a17; --color-muenchen-hell: #9be15d; }
[data-ort="oberschleissheim"] { --ort: var(--color-primary-dark); --ort-hell: var(--color-primary-hell); --ort-rgb: 0 172 225; }
[data-ort="muenchen"] { --ort: var(--color-muenchen); --ort-hell: var(--color-muenchen-hell); --ort-rgb: 76 138 23; }

.hero__info-kopf { display: flex; align-items: center; gap: .45rem; margin: 0 0 .7rem; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--color-auf-dunkel); }
.hero__info-kopf .icon { flex: none; color: var(--color-primary-hell); }
.hero__standorte li[data-ort] { box-shadow: inset 4px 0 0 var(--ort-hell); padding-left: .95rem; }
.hero__standorte li[data-ort] .hero__standort-name { color: var(--ort-hell); }

.standort[data-ort], .kontakt-karte[data-ort] { border-top: 6px solid var(--ort); }
.standort[data-ort] .standort__body h3, .kontakt-karte[data-ort] > h2 { color: var(--ort); }
.standort[data-ort] .standort__zeile .icon, .kontakt-karte[data-ort] .standort__zeile .icon, .kontakt-karte[data-ort] h3 { color: var(--ort); }
.umschalter__knopf[data-ort]:not([aria-selected="true"]) { color: var(--ort); }
.umschalter__knopf[data-ort][aria-selected="true"],
.band:not(.band--cyan) .umschalter__knopf[data-ort][aria-selected="true"] { background: var(--ort); color: var(--color-auf-dunkel); box-shadow: 0 8px 20px -10px rgb(var(--ort-rgb) / .8); }
.footer-col__title[data-ort]::before { content: ""; display: inline-block; width: .65em; height: .65em; border-radius: 50%; background: var(--ort); margin-right: .5em; vertical-align: .05em; }

/* ---------- Termin-Knopf auffälliger ---------- */
.hero__knoepfe .btn--primary { min-height: 56px; padding-inline: 1.9rem; font-size: 1.0625rem; font-weight: 700; box-shadow: 0 12px 30px -8px rgb(18 187 240 / .9), 0 0 0 4px rgb(255 255 255 / .16); }
/* Am Handy: Termin dauerhaft in der Kopfzeile (die Kopfzeile klebt oben). Der schwebende
   Rezeptions-Knopf wäre dann ein zweiter Knopf zum selben Ziel und entfällt dort. */
.header-cta { gap: .45rem; }
.header-cta .icon { flex: none; }
@media (max-width: 979px) {
  .header-cta { display: inline-flex; padding: .55rem 1rem; min-height: 44px; font-size: .9375rem; }
  .rezeption-fab { display: none !important; }
}
@media (max-width: 479px) { .header-cta__rest { display: none; } }
@media (max-width: 600px) {
  /* Zweitknopf im Start-Hero tritt zurück, damit „Termin vereinbaren“ sofort ins Auge fällt */
  .hero__knoepfe .btn--zweit { width: auto; min-height: 44px; padding: .55rem 1.2rem; font-size: var(--fs-small); background: transparent; border-color: rgb(255 255 255 / .4); }
}

/* ---------- Handy: kürzere Wege zwischen den Abschnitten ---------- */
@media (max-width: 719px) {
  :root { --band: 2.75rem; }
  .band__kopf { margin-bottom: var(--space-3); }
  .duo, .ablauf { gap: var(--space-3); }
  .film-band { padding-top: var(--band); }
}

/* ---------- Kurse: ganzes Angebot als Kacheln ---------- */
@media (min-width: 720px) { .raster--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .raster--4 { grid-template-columns: repeat(4, 1fr); } }
.kurs-kachel { display: flex; flex-direction: column; gap: .4rem; background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 1.35rem 1.25rem 1.25rem; box-shadow: var(--shadow); }
.kurs-kachel__nr { font-size: var(--fs-small); font-weight: 700; letter-spacing: .08em; color: var(--color-primary-dark); font-variant-numeric: tabular-nums; }
.kurs-kachel h3 { margin: 0; font-size: 1.25rem; }
.kurs-kachel p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--color-muted); }
.kurs-kachel__marke { margin-top: auto; padding-top: .6rem; font-size: .8125rem; font-weight: 600; color: var(--color-primary-dark); }
.kurs-hinweis { max-width: 760px; margin: var(--space-4) auto 0; }

/* ---------- Warteliste: So geht es nach der Anmeldung weiter ---------- */
.wl-weiter { list-style: none; margin: 0 auto var(--space-2); padding: 0; max-width: 960px; display: grid; gap: .75rem; counter-reset: none; }
@media (min-width: 720px) { .wl-weiter { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); } }
.wl-weiter li { margin: 0; display: flex; gap: .85rem; align-items: flex-start; background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 1rem 1.1rem; }
.wl-weiter__nr { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary); color: var(--color-auf-dunkel); font-weight: 700; font-size: .9375rem; }
.wl-weiter strong { display: block; margin-bottom: .15rem; }
.wl-weiter span:not(.wl-weiter__nr) { display: block; font-size: .9375rem; line-height: 1.5; color: var(--color-muted); }
.wl-wartezeit { max-width: 960px; margin: 0 auto var(--space-4); font-size: .9375rem; color: var(--color-muted); text-align: center; }
.wl-wartezeit strong { color: var(--color-text); }
@media (max-width: 719px) {
  .wl-weiter { gap: .5rem; }
  .wl-weiter li { padding: .75rem .9rem; gap: .75rem; align-items: center; }
  .wl-weiter span:not(.wl-weiter__nr) { font-size: .875rem; }
}

/* ---------- Patientenstimmen-Film (19.10.2026) ---------- */
.stimmen-film { margin: 0 auto var(--space-4); max-width: 960px; }
.stimmen-film__rahmen { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--color-nacht); box-shadow: 0 24px 48px -24px rgb(var(--nacht-rgb) / .55); }
.stimmen-film__rahmen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--color-nacht); }
.stimmen-film__start { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; border: 0; padding: 0; background: rgb(var(--nacht-rgb) / .12); cursor: pointer; color: var(--color-primary-dark); }
.stimmen-film__start[hidden] { display: none; }
.stimmen-film__start svg { box-sizing: content-box; width: 30px; height: 30px; padding: 22px 21px 22px 25px; border-radius: 50%; background: var(--color-auf-dunkel); box-shadow: 0 10px 30px -8px rgb(var(--nacht-rgb) / .6); transition: transform .2s ease; }
.stimmen-film__start:hover svg, .stimmen-film__start:focus-visible svg { transform: scale(1.08); }
.stimmen-film__start:focus-visible { outline: 3px solid var(--color-auf-dunkel); outline-offset: -6px; }