/* kw-bundle-quellen: css/style.css, css/custom.css */
/* Erzeugt von css-bundeln.py. Nicht von Hand bearbeiten —
   Änderungen gehören in die Quelldateien, dann erneut ausführen. */
/* ── css/style.css ── */
/* Baukasten-Container: erzeugt keine eigene Layout-Box */
.ws-block{display:contents}

/* style.css v2 -- Design-System v2 + uebernommene FLOW1-Komponenten (07+) */

/*
   ============================================================
   DESIGN-SYSTEM v2 -- Standard-Baukasten
   Modern-minimalistisch, conversion-orientiert, Haus-Stil-konform.
   Ersetzt FLOW1-style.css. Bestands-Sections laufen ueber die
   Alias-Schicht (#01b) unveraendert weiter.
   Richtung: A/Premium ruhig -- Vertrauen, Waerme, grosse Lesbarkeit.
   ============================================================ */

/* -- 01  MARKEN-TOKENS (kommen pro Kunde aus tokens.js --
        hier neutrale Standard-Fallbacks) -- */
:root {
  --c-primary:        #00a8b5;
  --c-primary-mid:    #008d98;
  --c-primary-dark:   #00727b;
  --c-secondary:      #dbe8ea;
  --c-secondary-mid:  #849294;
  --c-secondary-dark: #2c3b3d;
  --c-tertiary:       #0b8a93;
  --c-tertiary-mid:   #09757d;
  --c-tertiary-dark:  #065f66;
  --c-neutral:        #b4d4d8;
  --c-neutral-mid:    #87a3a6;
  --c-neutral-dark:   #5a7174;
  --c-neutral-light:  #eef6f7;
  --c-white:          #ffffff;
  --c-black:          #0a1314;
  --t-primary:        #003c41;
  --t-secondary:      #2c3b3d;

  --font-heading: 'Open Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body:    'Open Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  --fw-heading: 700;
  --fw-body: 400;

  /* Spacing-Vertrag: 8px-Skala (--sp-1..9) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --r-card: 14px;
  --r-btn: 8px;
  --r-pill: 999px;
  --bw-card: 1px;
  --bw-btn: 2px;

  /* Fluid-Typo-Skala (ueberschreibbar durch --fs-hN aus Guidelines) */
  --fs-display: clamp(2.35rem, 5vw, 3.9rem);
  --fs-1: var(--fs-h1, clamp(2.1rem, 4vw, 3.1rem));
  --fs-2: var(--fs-h2, clamp(1.7rem, 3vw, 2.3rem));
  --fs-3: var(--fs-h3, clamp(1.35rem, 2.2vw, 1.7rem));
  --fs-4: var(--fs-h4, clamp(1.15rem, 1.6vw, 1.35rem));
  --fs-5: var(--fs-h5, 1.125rem);
  --fs-6: var(--fs-h6, 1rem);
  --fs-body: clamp(1rem, 1.05vw, 1.0625rem);

  /* Layout */
  --container-max: 1200px;
  --container-px: clamp(20px, 5vw, 48px);
  --section-py: clamp(48px, 8vw, 128px);
  --grid-gap: clamp(20px, 3vw, 32px);   /* EIN Gutter fuer das ganze 12-Grid */

  /* Tiefe (weich, nie hart) */
  --shadow-1: 0 1px 2px rgba(3,40,44,.05), 0 8px 24px rgba(3,40,44,.07);
  --shadow-2: 0 2px 4px rgba(3,40,44,.05), 0 18px 48px rgba(3,40,44,.10);
  --hairline: rgba(0,60,65,.10);
}

/* -- 01b  ALIAS-BRUeCKE fuer FLOW1-Bestands-Sections (NICHT in neuen
        Sections verwenden -- nur damit Altbestand weiterlaeuft) -- */
:root {
  --font: var(--font-body);
  --sp-xxs: var(--sp-3); --sp-xs: var(--sp-5); --sp-sm: var(--sp-6);
  --sp-md: var(--sp-7);  --sp-lg: var(--sp-8); --sp-xl: var(--sp-9);
  --sp-xxl: clamp(96px, 10vw, 128px);
  --mg-xxs: var(--sp-2); --mg-xs: var(--sp-3); --mg-sm: var(--sp-4);
  --mg-md: var(--sp-5);  --mg-lg: var(--sp-6); --mg-xl: var(--sp-7);
  --mg-xxl: var(--sp-8);
  --gap-main: 40px; --gap-md: 20px; --gap-btn: var(--sp-4); --gap-sm: var(--sp-2);
  --border-w: var(--bw-btn);
  --t-neutral: var(--t-secondary); --t-tertiary: var(--t-primary);
}

/* -- 02  RESET -- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: 1.6;
  color: var(--t-secondary);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; }
:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; border-radius: 4px; }
/* Bewegung reduzieren: abmildern, nicht abschalten.
   Vorher stand hier  *{animation:none;transition:none}  — das nahm der Seite
   JEDE Rueckmeldung: gemessen am 12.08.2026 fielen 47 von 47 Uebergaengen aus,
   Knoepfe und Karten reagierten sichtbar nicht mehr. Wer Bewegung reduziert,
   will keine defekte Seite. Also: Eigenbewegung aus, Scroll-Einblenden aus,
   kein Verschieben durch Zeigen — Farbe, Rahmen und Schatten bleiben in ihrer
   entworfenen Geschwindigkeit. Das entspricht dem Verhalten von liniarwood
   und projektgast; die vier Seiten sollen sich gleich anfuehlen. */
/* Reduced-Motion-Abschaltung am 17.08.2026 auf Wunsch von Romeo ENTFERNT:
   Die Bewegung dieser Site soll auf jedem Geraet laufen, auch wenn im
   Betriebssystem "Bewegung reduzieren" aktiv ist. Frueher stand hier ein
   @media (prefers-reduced-motion: reduce)-Block. Bewusste Entscheidung —
   nicht "aus Versehen verloren", bitte nicht kommentarlos neu einbauen. */

/* -- 03  CONTAINER & SECTION-RHYTHMUS -- */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); }
.container--wide { max-width: 1440px; }
.section { padding-block: var(--section-py); }
.section--tight { padding-block: clamp(32px, 5vw, 72px); }
.section--tinted { background: var(--c-neutral-light); }

/* -- 03b  12-SPALTEN-GRID -- VERBINDLICHER LAYOUT-VERTRAG ------------------
   Jede Section legt ihren Inhalt ueber .grid auf dieselben 12 Spuren + denselben
   Gutter -> alle linken UND rechten Kanten fluchten ueber die ganze Seite.
   Neue Sections: <div class="grid"><div class="col-span-7">...</div>...</div>.
   Erlaubtes Span-Vokabular (Summe je Zeile = 12): 12 | 6/6 | 7/5 | 5/7 | 8/4 |
   4/4/4 | 3/3/3/3 | 6/3/3. Unter 900px -> 1 Spalte (alles span 12), 640px erst recht. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}
.grid--center { align-items: center; }
.col-span-1{grid-column:span 1}.col-span-2{grid-column:span 2}.col-span-3{grid-column:span 3}
.col-span-4{grid-column:span 4}.col-span-5{grid-column:span 5}.col-span-6{grid-column:span 6}
.col-span-7{grid-column:span 7}.col-span-8{grid-column:span 8}.col-span-9{grid-column:span 9}
.col-span-10{grid-column:span 10}.col-span-11{grid-column:span 11}.col-span-12{grid-column:span 12}
/* Tablet: grosszuegig auf 2 Spalten-Haelften brechen, damit nichts quetscht */
@media (max-width: 991px) {
  .grid > [class*="col-span-"] { grid-column: span 6; }
}
/* Handy: strikt einspaltig */
@media (max-width: 639px) {
  .grid { gap: var(--sp-6); }
  .grid > [class*="col-span-"] { grid-column: span 12; }
}

/* -- 04  TYPOGRAFIE -- */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  color: var(--t-primary);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-bottom: var(--sp-3);
}
h1,.h1 { font-size: var(--fs-1); }
h2,.h2 { font-size: var(--fs-2); }
h3,.h3 { font-size: var(--fs-3); line-height: 1.2; }
h4,.h4 { font-size: var(--fs-4); line-height: 1.25; }
h5,.h5 { font-size: var(--fs-5); line-height: 1.3; }
h6,.h6 { font-size: var(--fs-6); line-height: 1.35; }
.display { font-size: var(--fs-display); line-height: 1.05; }

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

/* Eyebrow (ersetzt .preheadline optisch, Klasse bleibt) */
.preheadline {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-primary-dark);
  margin-bottom: var(--sp-4);
}
.preheadline::before { content: ''; width: 28px; height: 2px; background: var(--c-primary); }
.subheadline { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.65; color: var(--t-secondary); margin-bottom: var(--sp-5); max-width: 62ch; }
.caption { font-size: 14px; line-height: 1.5; color: var(--c-secondary-mid); margin-bottom: var(--sp-3); }
.label { font-size: 16px; font-weight: 600; }
.label-sm { font-size: 14px; font-weight: 600; }

.text-white, .text-white :is(h1,h2,h3,h4,h5,h6,p,.preheadline,.subheadline) { color: var(--c-white); }
.text-white .preheadline::before { background: var(--c-white); }
.text-white-muted { color: rgba(255,255,255,.8); }

/* -- 05  BUTTONS (Touch >= 48px, klare Hierarchie: 1 Primaer pro Section) -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 48px; padding: 12px 26px;
  font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.3;
  border-radius: var(--r-btn); border: var(--bw-btn) solid transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
  white-space:normal;text-align:center;justify-content:center;
}
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn--primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
.btn--primary:hover { background: var(--c-primary-mid); border-color: var(--c-primary-mid); }
.btn--primary:active { background: var(--c-primary-dark); border-color: var(--c-primary-dark); }

.btn--ghost { background: transparent; border-color: var(--c-primary); color: var(--c-primary-dark); }
.btn--ghost:hover { background: var(--c-neutral-light); }
.btn--ghost:active { background: var(--c-secondary); }

.btn--back { background: var(--c-neutral-light); border-color: transparent; color: var(--t-primary); }
.btn--back:hover { background: var(--c-secondary); }

.btn--lg { min-height: 56px; padding: 16px 34px; font-size: 17px; }

/* Telefon-CTA -- wichtigster Conversion-Weg im Pflege-Kontext */
.btn--tel { background: var(--t-primary); border-color: var(--t-primary); color: var(--c-white); font-variant-numeric: tabular-nums; }
.btn--tel:hover { background: var(--c-secondary-dark); border-color: var(--c-secondary-dark); }

.cta-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 600; color: var(--c-primary-dark);
  transition: color .2s, gap .2s;
}
.cta-link:hover { color: var(--c-primary); gap: 12px; }
.cta-link--light { color: var(--c-white); }
.cta-link--light:hover { color: var(--c-neutral); }

/* -- 06  KARTEN (Hairline + weicher Schatten statt 2px-Rahmen) -- */
.card {
  background: var(--c-white);
  border: var(--bw-card) solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--c-neutral-light); }
.card__img-placeholder {
  width: 100%; aspect-ratio: 16/9; background: var(--c-neutral-light);
  display: flex; align-items: center; justify-content: center; color: var(--c-neutral-mid);
}
.card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; gap: var(--sp-3); }
.card__kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-primary-dark); }
.card__title { margin-bottom: 0; }
.card__text { color: var(--t-secondary); font-size: 15px; flex: 1; }

/* -- 07  TRUST & BADGES (Pflege: Kasse, Pruefnote, Region) -- */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--c-neutral-light); color: var(--t-primary);
  font-size: 13px; font-weight: 600; border: 1px solid var(--hairline);
}
.badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary); flex-shrink: 0; font-style: normal; }
.trustrow { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* -- 08  FORMULARE (grosse Ziele, klare Labels -- Angehoerige 50+) -- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; color: var(--t-primary); }
.field input, .field select, .field textarea {
  min-height: 50px; padding: 12px 14px;
  border: 1px solid var(--hairline); border-radius: var(--r-btn);
  background: var(--c-white); color: var(--t-primary); font-size: 16px;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 20%, transparent);
}
.field .hintext { font-size: 12.5px; color: var(--c-secondary-mid); }

/* -- 09  UTILITIES -- */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
.grid-4 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-4); }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: repeat(2,1fr); gap: var(--sp-7); }
  .grid-3 { grid-template-columns: repeat(3,1fr); }
  .grid-4 { grid-template-columns: repeat(4,1fr); }
}
.stack-2 > * + * { margin-top: var(--sp-2); }
.stack-4 > * + * { margin-top: var(--sp-4); }
.stack-6 > * + * { margin-top: var(--sp-6); }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--c-white); color: var(--t-primary); padding: 12px 18px; z-index: 999; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

/* == AB HIER: uebernommene FLOW1-Komponenten (unveraendert, laufen ueber die Alias-Bruecke) == */

/* -- 07  TOPBAR -- */
.topbar {
  background: var(--c-primary);
  padding: 10px 0;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  flex-wrap: wrap;
}
.topbar__contact { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.topbar__item {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; color: var(--c-white); font-weight: 400;
  transition: color .2s;
}
.topbar__item:hover { color: var(--c-secondary); }
.topbar__item svg { flex-shrink: 0; }
.topbar__social { display: flex; align-items: center; gap: 10px; }
.topbar__social a {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-white);
  transition: background .2s;
}
.topbar__social a:hover { background: rgba(255,255,255,.2); }

/* -- 08  NAVIGATION -- */
.nav-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-secondary);
  transition: box-shadow .25s;
}
.nav-header.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.1); }

.nav__inner {
  height: 72px;
  display: flex; align-items: center; gap: 32px;
}
.nav__logo {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.nav__logo-mark {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-primary);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-white); font-size: 15px; font-weight: 700;
  flex-shrink: 0;
}
.nav__logo-text {
  display: flex; flex-direction: column;
}
.nav__logo-name { font-size: 14px; font-weight: 700; color: var(--t-primary); line-height: 1.2; }
.nav__logo-sub  { font-size: 11px; color: var(--c-secondary-mid); letter-spacing: .03em; }
.nav__logo-img  { height: 46px; width: auto; display: block; }

.nav__menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav__link {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 12px;
  font-size: 14px; font-weight: 600; color: var(--t-primary);
  border-radius: 6px;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.nav__link:hover { background: var(--c-neutral-light); color: var(--c-primary); }
.nav__link svg { width: 14px; height: 14px; }

.nav__cta { margin-left: 12px; }

/* Burger */
.nav__burger {
  display: none; flex-direction: column; gap: 5px;
  padding: 6px; width: 32px; margin-left: auto;
}
.nav__burger span {
  display: block; height: 2px; background: var(--t-primary);
  border-radius: 2px; transition: all .25s;
}
.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -- 09  HERO (3-Panel -- ideenmitholz adjacent-sibling pattern) -- */
.hero {
  position: relative;
  height: calc(100vh - 68px);
  min-height: 480px;
  max-height: 820px;
  overflow: hidden;
  background: #0a1314;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0,0,0,.05);
}
/* Global vignette -- z-2 = behind panels (z-3), darkens photo only */
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.82) 0%, transparent 38%),
    linear-gradient(to top,    rgba(0,0,0,.80) 0%, transparent 32%);
}

/* Floating headline + intro -- auf dem 12-Grid: Headline 7, Intro 5 */
.hero__overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  margin: 0 auto;
  max-width: var(--container-max);
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
  padding: 44px var(--container-px) 0 var(--container-px);
  pointer-events: none;
}
.hero__overlay > :first-child { grid-column: span 7; }
.hero__overlay > :last-child  { grid-column: span 5; }
.hero__overlay > * { pointer-events: auto; }
.hero__title {
  font-size: 40px; line-height: 1.35; letter-spacing: -.5px;
  font-weight: 700; color: var(--c-white); text-wrap: balance;
  text-shadow: none;
}
.hero__overlay-right { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.hero__body {
  font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.92); margin: 0;
  text-shadow: none;
}
.hero__cta-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 600; color: var(--c-white);
  border-bottom: 1px solid var(--c-primary);
  padding-bottom: 2px; width: fit-content;
  transition: color .2s, border-color .2s;
}
.hero__cta-link:hover { color: var(--c-primary); border-color: var(--c-primary); }
.hero__cta-link svg { transition: transform .2s; }
.hero__cta-link:hover svg { transform: translateX(4px); }

/* --- Panel row -- same width and padding as .container --- */
.hero__panels {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: var(--container-max);
  height: 100%;
  display: flex;
  padding-inline-start: calc(var(--container-px) - 32px);
  padding-inline-end: var(--container-px);
  z-index: 3;
}

/* --- Each column -- equal thirds, never changes width --- */
.hero__panel {
  position: relative;
  flex: 1;
  cursor: pointer;
  overflow: hidden;
}
/* Thin divider using ::after so it sits above bg images */
.hero__panel:not(:last-of-type)::after {
  content: '';
  position: absolute; right: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to top,
    rgba(255,255,255,.42) 0%,
    rgba(255,255,255,.10) 55%,
    transparent 100%);
  z-index: 10; pointer-events: none;
}

/* --- Full-width bg -- direct children of .hero, always full viewport width --- */
.hero__panel-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  background-size: cover;
  background-position: center;
  transition: opacity .18s ease, transform .3s ease;
  transform: scale(1);
}
.hero__panel-bg--active {
  opacity: 1;
  visibility: visible;
  transform: scale(1.04);
}

/* Satin overlay -- full panel, gradient fades out before text area */
.hero__panel-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 1;
  pointer-events: none;
  transition: background .4s ease;
}
.hero__panel.hovered .hero__panel-overlay {
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(255,255,255,.10) 18%,
    rgba(255,255,255,.13) 52%,
    rgba(255,255,255,.04) 72%,
    transparent 84%);
  backdrop-filter: brightness(.85) blur(8px) saturate(1.1);
}

/* Bottom content area -- z-index:3 */
.hero__panel-bottom {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 120px 32px 40px;
  z-index: 3;
}

/* Title -- always visible, slight upward nudge on hover */
.hero__panel-title {
  font-size: 20px; font-weight: 700; color: var(--c-white);
  transition: transform .25s ease, color .22s;
  line-height: 1.3;
  text-shadow: none;
}
.hero__panel.hovered .hero__panel-title {
  color: var(--c-white);
  transform: translateY(-4px);
}

/* Expand -- desc + button, collapses via max-height */
.hero__panel-expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height .38s ease;
  display: flex; flex-direction: column; gap: 14px;
}
.hero__panel.hovered .hero__panel-expand {
  max-height: 220px;
}
.hero__panel-expand p {
  font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.92); margin: 0; max-width: 28ch;
  padding-top: 10px;
  text-shadow: none;
}
.hero__panel-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  background: var(--c-primary); border: 2px solid var(--c-primary);
  border-radius: var(--r-btn); color: var(--c-white);
  font-family: var(--font); font-size: 14px; font-weight: 600;
  width: fit-content; transition: background .18s, border-color .18s;
}
.hero__panel-btn:hover { background: var(--c-tertiary); border-color: var(--c-tertiary); }

/* -- 10  SERVICES SECTION (Orbit diagram) -- */
.services-section {
  padding-block: var(--sp-xl);
  background: var(--c-white);
}
.services-section__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: center;
}
.services-section__grid > :first-child { grid-column: span 7; }  /* Text */
.services-section__grid > :last-child  { grid-column: span 5; }  /* Orbit/Visual */
.services-section__text h2 { margin-bottom: var(--mg-sm); }
.services-section__text p  { color: var(--t-secondary); }
.svc-detail h3 { font-size: 24px; line-height: 32px; color: var(--t-primary); }
.svc-detail p  { font-size: 15px; line-height: 1.7; }

/* Orbit diagram -- 520x520 container, bubbles overlap center circle */
.orbit-diagram {
  position: relative;
  width: 520px;
  height: 520px;
  flex-shrink: 0;
}

/* Center image circle */
.orbit-center {
  position: absolute;
  left: 40px; top: 40px;
  width: 440px; height: 440px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--c-primary-dark), var(--c-black));
  transition: background .4s ease;
  overflow: hidden;
  z-index: 1;
}

/* Orbit bubbles -- z-index 2 so they sit above the circle */
.orbit-bubble {
  position: absolute;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--c-secondary-dark);
  border: none;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--font);
  font-size: 12px; font-weight: 600; line-height: 1.3;
  color: var(--c-white);
  cursor: pointer;
  padding: 8px;
  z-index: 2;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.orbit-bubble:hover {
  background: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(0,168,181,.28);
}
.orbit-bubble--active {
  background: var(--c-primary-dark) !important;
  box-shadow: 0 0 0 4px rgba(0,168,181,.22);
}
.orbit-bubble:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 3px;
}

/* -- 11  THREE CARDS SECTION -- */
.cards-section {
  padding-block: var(--sp-xl);
  background: var(--c-neutral-light);
}
.cards-section__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.cards-section__grid > * { grid-column: span 4; }   /* 3 gleiche Karten = 4/4/4 */

/* -- 12  BERATUNG SECTION (teal bg) -- */
.beratung-section {
  padding-block: 44px;   /* kompakt, naeher am Figma */
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-tertiary-mid) 100%);
}
.beratung-section__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: center;
}
.beratung-section__grid > :first-child { grid-column: span 7; }  /* Text */
.beratung-section__grid > :last-child  { grid-column: span 5; }  /* Karte */
.beratung-section__text { }
.beratung-section__text .preheadline {
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 14px;
}
.beratung-section__text h1 {
  color: var(--c-white);
  margin-bottom: var(--mg-md);
}
.beratung-section__text p { color: rgba(255,255,255,.82); }

/* KPI stats */
.kpi-row {
  display: flex;
  gap: 40px;
  margin-top: var(--mg-xl);
  flex-wrap: wrap;
}
.kpi {
  display: flex; flex-direction: column; gap: 4px;
}
.kpi__value {
  font-size: 36px; font-weight: 700; line-height: 1;
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
}
.kpi__value span { font-size: .7em; color: rgba(255,255,255,.6); }
.kpi__value .kw-p,
.kpi__value .kw-p span { font-size: inherit; color: inherit; }
.kpi__label { font-size: 14px; color: rgba(255,255,255,.65); font-weight: 400; }

/* Profile card (in beratung section) */
.profile-card {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  border: var(--border-w) solid rgba(255,255,255,.2);
  border-radius: var(--r-card);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 480px;
}
.profile-card__avatar {
  width: 108px; height: 108px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  border: 3px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 700; color: var(--c-white);
  overflow: hidden; flex-shrink: 0;
}
.profile-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-card__name { font-size: 21px; font-weight: 700; color: var(--c-white); line-height: 1.3; }
.profile-card__role { font-size: 14px; color: rgba(255,255,255,.65); font-weight: 400; margin: 0; }
.profile-card__body { font-size: 16px; color: rgba(255,255,255,.85); line-height: 1.6; margin: 0; }

/* -- 13  PROFILE + FAQ SECTION -- */
.profaq-section {
  padding-block: var(--sp-xl);
  background: var(--c-white);
}
.profaq-section__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}
.profaq-section__grid > :first-child { grid-column: span 5; }  /* Intro/Kontakt */
.profaq-section__grid > :last-child  { grid-column: span 7; }  /* FAQ-Akkordeon */

/* Contact profile */
.contact-profile { }
.contact-profile h2 { margin-bottom: var(--mg-sm); }
.contact-profile > p { color: var(--t-secondary); margin-bottom: var(--mg-xl); }
.contact-card {
  /* Gradient-Rahmen: innen neutral-light (padding-box), Rand = Teal-Verlauf (border-box) */
  background:
    linear-gradient(var(--c-neutral-light), var(--c-neutral-light)) padding-box,
    /* Verlauf laeuft rundherum (im Uhrzeigersinn) ueber den ganzen Rahmen */
    conic-gradient(from 210deg,
      var(--c-primary) 0%,
      var(--c-tertiary-mid) 30%,
      var(--c-primary-dark) 55%,
      var(--c-tertiary) 78%,
      var(--c-primary) 100%) border-box;
  border: var(--border-w) solid transparent;
  border-radius: var(--r-card);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 66px;   /* Platz fuer die nach oben ueberragenden Avatare */
}
/* Zwei runde Personen-Bilder, mittig, ragen ueber die Kartenoberkante */
.contact-card__avatars {
  display: flex; justify-content: center;
  margin: -94px 0 6px;
}
.contact-card__avatar {
  width: 108px; height: 108px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-tertiary-dark));
  border: 4px solid var(--c-neutral-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; color: var(--c-white);
  overflow: hidden; flex-shrink: 0;
}
.contact-card__avatars .contact-card__avatar { margin: 0 -14px; }
.contact-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.contact-card__avatar svg { opacity: .85; }
.contact-card__name { font-size: 20px; font-weight: 700; color: var(--t-primary); line-height: 1.3; }
.contact-card__role { font-size: 13px; font-weight: 700; color: var(--c-primary); text-transform: uppercase; letter-spacing: .05em; }

.contact-card__details { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.contact-card__item {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--t-secondary);
}
.contact-card__item svg { flex-shrink: 0; color: var(--c-primary); }
.contact-card__item a:hover { color: var(--c-primary); }

/* FAQ Accordion */
.faq { }
.faq__title { margin-bottom: var(--mg-lg); }
.faq__list { display: flex; flex-direction: column; gap: 10px; }

.faq__item {
  border: var(--border-w) solid var(--c-secondary);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-white);
}
.faq__item[open] { border-color: var(--c-primary); }

.faq__item summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-size: 16px; font-weight: 600; color: var(--t-primary);
  cursor: pointer; list-style: none; user-select: none;
  transition: background .18s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item[open] summary { background: var(--c-neutral-light); }
.faq__item summary:hover { background: var(--c-neutral-light); }

.faq__chevron { color: var(--c-primary); flex-shrink: 0; transition: transform .25s; }
[open] .faq__chevron { transform: rotate(180deg); }

.faq__answer {
  padding: 4px 20px 20px;
  font-size: 16px; line-height: 22px; color: var(--t-secondary);
  border-top: 1px solid var(--c-secondary);
}

/* -- 14  FOOTER -- */
.footer {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-tertiary-mid) 100%);
}
.footer__main {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  padding-block: 64px;
}
.footer__main > :first-child { grid-column: span 6; }              /* Marke/Adresse */
.footer__main > :not(:first-child) { grid-column: span 2; }        /* 3 Link-Spalten = 6/2/2/2 */
.footer__brand { }
.footer__logo {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.footer__logo-mark {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-primary);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-white); font-size: 15px; font-weight: 700;
  flex-shrink: 0;
}
.footer__logo-name { font-size: 14px; font-weight: 700; color: var(--c-white); }
.footer__logo-sub  { font-size: 11px; color: rgba(255,255,255,.4); }
.footer__logo-icon { width: 40px; height: 40px; display: block; flex-shrink: 0; }

.footer__address {
  font-size: 14px; color: rgba(255,255,255,.45); line-height: 1.7;
}
.footer__address a:hover { color: rgba(255,255,255,.8); }

.footer__socials { display: flex; gap: 8px; margin-top: 20px; }
.footer__social {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5);
  transition: background .2s, color .2s;
}
.footer__social:hover { background: var(--c-primary); color: var(--c-white); }

.footer__col h4 {
  font-size: 14px; font-weight: 700; color: rgba(255,255,255,.65);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 16px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 8px; }
.footer__col a {
  font-size: 14px; color: rgba(255,255,255,.4);
  transition: color .2s;
}
.footer__col a:hover { color: rgba(255,255,255,.9); }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-block: 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,.3);
}
.footer__bottom-links { display: flex; gap: 20px; }
.footer__bottom-links a { transition: color .2s; }
.footer__bottom-links a:hover { color: rgba(255,255,255,.7); }

/* -- 15  UTILITIES -- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.img-bg-dark {
  background: linear-gradient(135deg, var(--c-secondary-dark) 0%, var(--c-neutral-dark) 100%);
}

/* -- 16  RESPONSIVE -- */

/* Tablet <= 991px -- Headings skalieren fluid (kein fixes px mehr) */
@media (max-width: 991px) {
  .hero__overlay           { padding: 40px var(--container-px) 0; }
  .hero__overlay > *       { grid-column: 1 / -1; }
  .hero__panel-expand p    { display: none; }

  /* 12-Grid-Sections stapeln -- Selektoren muessen die Basis-Spezifitaet (:first/:last) treffen */
  .hero__overlay > :first-child, .hero__overlay > :last-child,
  .services-section__grid > :first-child, .services-section__grid > :last-child,
  .beratung-section__grid > :first-child, .beratung-section__grid > :last-child,
  .profaq-section__grid > :first-child, .profaq-section__grid > :last-child { grid-column: 1 / -1; }
  .orbit-diagram           { transform: scale(.78); transform-origin: top center; margin-bottom: -80px; }
  .profile-card            { max-width: none; }

  .cards-section__grid > * { grid-column: span 6; }        /* Tablet: 2 Karten nebeneinander */

  .footer__main > :first-child     { grid-column: 1 / -1; }   /* Marke voll */
  .footer__main > :not(:first-child) { grid-column: span 4; } /* dann 3 Link-Spalten */

  .nav__menu { display: none; }
  .nav__cta  { display: none; }
  .nav__burger { display: flex; }
  .nav__menu.open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: fixed; top: 72px; left: 0; right: 0; bottom: 0;
    background: var(--c-white); padding: 24px var(--container-px);
    gap: 4px; border-top: 1px solid var(--c-secondary);
    overflow-y: auto;
  }
  .nav__menu.open .nav__link { font-size: 18px; padding: 12px 8px; width: 100%; }
}

/* Mobile Landscape <= 767px (Headings fluid -- keine fixen px) */
@media (max-width: 767px) {
  /* Hero -- vertical stack on mobile */
  .hero { height: auto; min-height: 480px; max-height: none; }
  .hero__overlay { display: none; }
  .hero__panels { flex-direction: column; }
  .hero__panel { flex: none; height: 33.333vh; min-height: 140px; }
  .hero__panel:not(:last-of-type)::after {
    top: auto; right: 0; bottom: 0; left: 0; width: auto; height: 1px;
    background: linear-gradient(to right,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.10) 55%,
      transparent 100%);
  }
  /* On mobile .hovered panel shows bg (touch: first panel default) */
  .hero__panel-expanded p { display: none; }

  .orbit-diagram { display: none; }
  .cards-section__grid > * { grid-column: 1 / -1; }   /* Handy: Karten einspaltig */
  .kpi-row { gap: 24px; }
  .kpi__value { font-size: 28px; }
}

/* Mobile Portrait <= 478px (Headings fluid -- keine fixen px) */
@media (max-width: 478px) {
  .footer__main > :not(:first-child) { grid-column: 1 / -1; }   /* Footer komplett einspaltig */
  .topbar__contact { gap: 12px; }
}

/* -- 17  SCROLL REVEAL -- */
/* Versteckt wird NUR, wenn das DS-Script laeuft (html.dsjs -- Marker wird als
   allererstes im js_code gesetzt). Ohne JS bleibt alles sichtbar: Vorschau
   oder Export ohne Script zeigen nie leere Sections. */
html.dsjs .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
html.dsjs .reveal.visible { opacity: 1; transform: none; }

/* (weiterer Reduced-Motion-Block entfernt, s.o.) */

/* -- 18  INTERACTIVE COMPONENTS (Mast-Muster, token-basiert, Vanilla) --------
   Interaktion wird EINMAL hier gebaut -- Sections nutzen NUR diese Klassen und
   bauen keine eigenen Akkordeons/Tabs/Slider/Modals/Marquees mehr.
   Muster nach Mast (nocodesupply.co/mast/docs), Umsetzung ohne Framework/CDN:
   - Accordion:  <details>/<summary>; exklusive Gruppen ueber natives
                 name-Attribut (<details name="faq">). Kein JS noetig.
   - Modal:      <dialog class="modal"> + data-modal-open="id" am Trigger,
                 data-modal-close am Schliessen-Button. Backdrop-Klick schliesst.
   - Tabs:       .tabs-component > .tabs-menu (.tabs-link) + .tabs-pane;
                 erstes Pane traegt cc-active im Markup (No-JS-Fallback).
   - Marquee:    reines CSS. Inhalt im 2. .marquee-group EXAKT duplizieren.
                 Tempo via --marquee-duration am .marquee-wrapper.
   - Slider:     CSS scroll-snap. Slides pro Breakpoint als Props am
                 .slider-component: style="--lg:3; --md:2; --sm:1.15".
   - Animation:  data-animate="fade" | "stagger-children" (ersetzt .reveal in
                 neuen Sections; greift wie .reveal nur unter html.dsjs).
----------------------------------------------------------------------------- */

/* --- Accordion --- */
.accordion-item { border-bottom: 1px solid var(--c-secondary); }
.accordion-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: var(--fw-heading, 700);
  color: var(--t-primary); font-size: 17px; line-height: 1.35;
}
.accordion-trigger::-webkit-details-marker { display: none; }
.accordion-trigger:hover .accordion-title { color: var(--c-primary); }
.accordion-icon {
  width: 20px; height: 20px; flex-shrink: 0; color: var(--c-primary);
  transition: transform .25s ease;
}
details[open] > .accordion-trigger .accordion-icon { transform: rotate(45deg); }
.accordion-content_spacer {
  padding: 0 0 var(--sp-5); color: var(--t-secondary);
  font-size: 15.5px; line-height: 1.65; max-width: 70ch;
}
details[open] > .accordion-content { animation: ds-acc-in .28s ease; }
@keyframes ds-acc-in { from { opacity: 0; transform: translateY(-6px); } }
/* Karten-Variante */
.accordion-item.cc-card {
  border: var(--bw-card, 1px) solid var(--c-secondary); border-radius: var(--r-card);
  background: var(--c-white); margin-bottom: var(--sp-3);
}
.accordion-item.cc-card .accordion-trigger { padding: var(--sp-4) var(--sp-5); }
.accordion-item.cc-card .accordion-content_spacer { padding: 0 var(--sp-5) var(--sp-5); }

/* --- Modal (<dialog>) --- */
.modal {
  position: relative; border: 0; border-radius: var(--r-card);
  background: var(--c-white); color: var(--t-secondary);
  padding: var(--sp-6); width: 100%; max-width: min(600px, calc(100vw - 32px));
  box-shadow: 0 24px 64px rgba(0, 0, 0, .18);
}
.modal::backdrop { background: rgba(0, 0, 0, .5); }
.modal[open] { animation: ds-modal-in .22s ease; }
@keyframes ds-modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.modal-close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--c-neutral-light); color: var(--t-primary);
  transition: background .18s ease;
}
.modal-close:hover { background: var(--c-secondary); }

/* --- Tabs --- */
.tabs-menu {
  display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--c-secondary);
}
.tabs-menu::-webkit-scrollbar { display: none; }
.tabs-link {
  padding: 12px 18px; white-space: nowrap; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  color: var(--t-secondary); background: none;
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .18s ease, border-color .18s ease;
}
.tabs-link:hover { color: var(--t-primary); }
.tabs-link.cc-active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.tabs-pane { display: none; padding-top: var(--sp-5); }
.tabs-pane.cc-active { display: block; }
/* Pill-Variante */
.tabs-menu.cc-pills { border-bottom: 0; }
.tabs-menu.cc-pills .tabs-link {
  border: 1px solid var(--c-secondary); border-radius: var(--r-pill); margin-bottom: 0;
}
.tabs-menu.cc-pills .tabs-link.cc-active {
  background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white);
}

/* --- Marquee (reines CSS; 2 identische .marquee-group erforderlich) --- */
.marquee-component { overflow: hidden; }
.marquee-wrapper {
  display: flex; width: max-content;
  animation: ds-marquee var(--marquee-duration, 30s) linear infinite;
}
.marquee-component:hover .marquee-wrapper { animation-play-state: paused; }
.marquee-group {
  display: flex; align-items: center; flex-shrink: 0;
  gap: var(--gap, var(--grid-gap)); padding-right: var(--gap, var(--grid-gap));
}
@keyframes ds-marquee { to { transform: translateX(-50%); } }

/* --- Inline Video --- */
.inline-video_component {
  position: relative; overflow: hidden; border-radius: var(--r-card);
  background: var(--c-black);
}
.inline-video_video { display: block; width: 100%; height: 100%; object-fit: cover; }
.inline-video_poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .3s ease;
}
.is-playing .inline-video_poster { opacity: 0; pointer-events: none; }
.inline-video_playback { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; }
.inline-video_playback-button {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .55); color: #fff; transition: background .18s ease;
}
.inline-video_playback-button:hover { background: rgba(0, 0, 0, .75); }
.inline-video_playback-button svg { width: 18px; height: 18px; }
.inline-video_playback-button[data-video="pause"] { display: none; }
.is-playing .inline-video_playback-button[data-video="pause"] { display: flex; }
.is-playing .inline-video_playback-button[data-video="play"] { display: none; }

/* --- Slider (scroll-snap; Props: --lg/--md/--sm/--xs = Slides pro Ansicht) --- */
.slider-component { position: relative; --n: var(--lg, 3); }
.slider-track {
  display: flex; gap: var(--gap, var(--grid-gap));
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-slide {
  flex: 0 0 calc((100% - (var(--n) - 1) * var(--gap, var(--grid-gap))) / var(--n));
  scroll-snap-align: start; min-width: 0;
}
.slider-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-top: var(--sp-5);
}
.slider-arrows { display: flex; gap: var(--sp-2); }
.slider-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--c-secondary); background: var(--c-white); color: var(--t-primary);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .18s ease, color .18s ease;
}
.slider-arrow:hover { border-color: var(--c-primary); color: var(--c-primary); }
.slider-arrow:disabled { opacity: .35; cursor: default; }
.slider-arrow svg { width: 18px; height: 18px; }
.slider-pagination { display: flex; gap: 8px; }
.slider-pagination_button {
  width: 8px; height: 8px; border-radius: 99px; border: 0; padding: 0;
  background: var(--c-secondary); cursor: pointer;
  transition: background .18s ease, width .18s ease;
}
.slider-pagination_button.cc-active { background: var(--c-primary); width: 22px; }
@media (max-width: 991px) { .slider-component { --n: var(--md, 2); } }
@media (max-width: 767px) { .slider-component { --n: var(--sm, 1.15); } }
@media (max-width: 478px) { .slider-component { --n: var(--xs, 1.05); } }

/* --- data-animate (ersetzt .reveal in neuen Sections) --- */
html.dsjs [data-animate] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
html.dsjs [data-animate].visible { opacity: 1; transform: none; }
html.dsjs [data-animate="stagger-children"] { opacity: 1; transform: none; transition: none; }
html.dsjs [data-animate="stagger-children"] > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: var(--stagger-delay, 0ms);
}
html.dsjs [data-animate="stagger-children"].visible > * { opacity: 1; transform: none; }

/* (weiterer Reduced-Motion-Block entfernt, s.o.) */

/* -- 19  UTILITIES (Mast u-*; Regel: max. 4 Utilities je Element, sonst
         eigene Klasse in der Section) -- */
.u-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }
.u-img-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.u-link-cover { position: absolute; inset: 0; z-index: 1; }
.u-aspect-1x1 { aspect-ratio: 1 / 1; }
.u-aspect-16x9 { aspect-ratio: 16 / 9; }
.u-aspect-4x3 { aspect-ratio: 4 / 3; }
.u-w-100 { width: 100%; }
.u-overflow-hidden { overflow: hidden; }
.u-d-none { display: none; }


/* === Marken-Tokens aus den Web-Guidelines === */
:root{
  /* Marken-Farben */
  --c-primary: #325155;
  --c-primary-mid: #63a2aa;
  --c-primary-dark: #325155;
  --c-primary-soft: #7ccad5;
  --c-secondary: #ededed;
  --c-secondary-mid: #d5d5d5;
  --c-secondary-dark: #777777;
  --c-tertiary: #ededed;
  --c-tertiary-mid: #d5d5d5;
  --c-tertiary-dark: #777777;
  --c-neutral: #9fc4c9;
  --c-neutral-mid: #79969a;
  --c-neutral-dark: #52676a;
  --c-neutral-light: #f1f8f9;
  --c-white: #ffffff;
  --c-black: #06181a;
  --c-accent-1: #7ccad5;
  --c-accent-2: #7ccad5;
  --c-accent-3: #7ccad5;
  --c-accent-4: #7ccad5;
  --c-accent-5: #7ccad5;
  --t-primary: #065f66;
  --t-secondary: #52676a;
  --t-negativ: #ffffff;
  --t-positiv: #06181a;

  /* Typografie */
  --font-heading: "Nunito", sans-serif;
  --font-body: "Inter", sans-serif;
  --fw-heading: 700;
  --fw-body: 400;
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 28px;
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-h6: 16px;

  /* Radien & Rahmen */
  --r-card: 14px;
  --r-btn: 50px;
  --r-pill: 9999px;
  --bw-card: 2px;
  --bw-btn: 2px;

  /* Spacing-Skala (universell, 8px-Basis) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
}

/* ── css/custom.css ── */
/* custom.css — Manuelle Anpassungen für diese Website.
   Diese Datei wird bei einem erneuten Export/Deploy NIE überschrieben.
   Alle Handkorrekturen NUR hier eintragen (nicht in style.css oder den Seiten-HTMLs).
   Allgemeingültige Verbesserungen zusätzlich in die Section-Bibliothek zurückspielen,
   damit künftige Projekte sie automatisch bekommen. */

/* ====================================================================
   SCHRIFTEN – selbst gehostet
   Quelle fonts.google.com, Lizenz SIL Open Font License 1.1 (Selbst-
   hosting ausdrücklich erlaubt). Die Dateien liegen in ./fonts, die
   Details stehen in fonts/README.txt.
   Grund: Beim Einbinden über fonts.googleapis.com baut der Browser des
   Besuchers eine Verbindung zu Google auf und überträgt dabei die
   IP-Adresse. Selbst gehostet passiert das nicht.
   Inter und Nunito sind Variable Fonts – eine Datei pro Familie und
   Subset trägt alle Gewichte. Die unicode-range-Angaben sind aus dem
   Google-CSS übernommen: so lädt der Browser latin-ext nur nach, wenn
   ein Zeichen daraus wirklich vorkommt.
   font-display: swap – Text ist sofort lesbar, die Schrift tauscht nach.
   ==================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  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: 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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 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: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/nunito-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: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/nunito-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;
}

/* Navigationshöhe als Token nachgereicht: style.css setzt die 72px in
   .nav__inner noch als Zahl. Hier einmal definiert, unten überall referenziert.
   → Zurückspielen: gehört als --nav-h in den Token-Block von style.css. */
:root { --nav-h: 72px; --topbar-h: 0px; }

/* ====================================================================
   PRIMÄRFARBE auf den Stand der Web-Guidelines
   Der Marken-Block in style.css ist bei Primary veraltet (#325155 /
   #63a2aa / #325155). Der Guidelines-Editor führt #119098 / #0f7b83 /
   #0c666d. Alle übrigen Marken-Tokens (Secondary, Neutral, Text, Black,
   White) stimmen bereits überein und bleiben unangetastet.
   → Zurückspielen: Primary-Reihe im Marken-Block von style.css
     aktualisieren, dann entfällt dieser Override.
   ==================================================================== */
:root {
  --c-primary:      #119098;
  --c-primary-mid:  #0f7b83;
  --c-primary-dark: #0c666d;
}

/* ====================================================================
   INFO-LEISTE über der Navigation (Block "topbar-01")
   Das Layout kommt komplett aus der Topbar-Komponente in style.css
   (Abschnitt 07: .topbar / .topbar__inner / .topbar__contact /
   .topbar__item / .topbar__social) — die war fertig vorhanden und nur auf
   keiner Seite eingebaut. Hier stehen nur drei begründete Abweichungen.
   ==================================================================== */

/* 1) Sichtbarkeit: nur ab Desktop (≥1025px). Darunter läuft die Navigation
      über den Burger, und dessen Panel hängt fix auf top:var(--nav-h) —
      eine mitscrollende Leiste darüber würde das Panel gegen die
      Navigation schieben. Telefon und E-Mail stehen mobil im Hero und im
      Footer. Die Leiste ist bewusst nicht sticky, nur die Nav bleibt oben. */
.topbar { display: none; }
@media (min-width: 1025px) {
  :root { --topbar-h: 44px; }
  .topbar { display: block; }
}

/* Farbe bleibt bewusst die Komponenten-Vorgabe var(--c-primary): der
   Marken-Block (style.css ab "Marken-Tokens aus den Web-Guidelines")
   setzt --c-primary auf #325155, weiße Schrift darauf ergibt gemessen
   8,59:1 — AA (4,5:1) erfüllt. Kein Override nötig. Achtung beim
   Marken-Wechsel: mit der neutralen Fallback-Palette (#00a8b5) wären es
   nur 2,89:1. */

/* 2) Feste Höhe statt padding-getriebener: --topbar-h geht in die
      Hero-Rechnung ein und muss ein bekannter Wert sein. Gleichzeitig wird
      die Klickfläche der Links so bar-hoch (44px) statt nur textzeilenhoch
      (20px). Optisch identisch, weil mittig ausgerichtet. */
.topbar { padding-block: 0; }
.topbar__inner { min-height: var(--topbar-h); }
.topbar__item  { min-height: var(--topbar-h); }

/* ====================================================================
   FIX: Hero-Höhe rechnet mit 68px statt der echten Navigationshöhe
   Alle drei Hero-Blöcke (hero-17 auf 22 Seiten, hero-18 Startseite,
   hero-19 Erstberatung) setzen calc(85vh - 68px) — die Nav ist aber 72px
   hoch (.nav__inner in style.css). Ergebnis: der Hero steht überall 4px
   über der 85%-Falz, wo die min-height greift.
   Jetzt die Formel aus den Bau-Richtlinien:
     calc(var(--m-heroh, 85) * 1vh - var(--nav-h))
   Damit ist die Höhe pro Seite über --m-heroh steuerbar (z.B.
   .sec-hero-17 { --m-heroh: 70 } für einen flacheren Hero).
   dvh-Zeile: hero-18/19 hatten sie schon, hero-17 nicht — auf Mobil-
   browsern mit ein-/ausfahrender Toolbar springt vh sonst.
   --topbar-h steckt mit drin, damit die Falz auch mit der Info-Leiste bei
   85% liegt (die Leiste ist nur ab 1025px sichtbar, darunter ist das
   Token 0px – die Rechnung stimmt also in beiden Fällen).
   → Zurückspielen: 68px in allen Hero-Sections durch die Formel ersetzen.
   ==================================================================== */
.ws-block .sec-hero-17 .hero1,
.ws-block .sec-hero-18,
.ws-block .sec-hero-19 {
  min-height: calc(var(--m-heroh, 85) * 1vh - var(--nav-h) - var(--topbar-h));
  min-height: calc(var(--m-heroh, 85) * 1dvh - var(--nav-h) - var(--topbar-h));
}
/* hero-17 stapelt ab 900px und gibt die Höhe dann an den Inhalt ab. Diese
   Regel steht in der Section mit 2 Klassen und würde von der 3-Klassen-
   Regel oben überstimmt — deshalb hier gleichwertig nachgezogen. */
@media (max-width: 900px) {
  .ws-block .sec-hero-17 .hero1 { min-height: 0; }
}

/* Startseiten-Hero (hero-18, Split mit zwei Peek-Streifen): die min-height
   greift dort nie — der Hero ist konstant 874px hoch, unabhängig von der
   Fensterhöhe. Ursache ist nicht vh, sondern das eingeklappte Peek-Panel:
   es behält min-width:300px, wird im 104px schmalen Streifen umgebrochen
   und dadurch 874px hoch — obwohl es unsichtbar ist (visibility:hidden).
   Deshalb hier height statt min-height + overflow:hidden: damit bestimmt
   wieder der Viewport die Höhe und das unsichtbare Panel wird beschnitten.
   Breakpoint 900px = der Punkt, an dem die Section auf Zeilenlayout
   umschaltet (Section-eigen, nicht der 1024er-Vertrag).
   BEWUSSTE ABWEICHUNG von den Bau-Richtlinien §3.2: die sehen für den
   Split-Hero zusätzlich max-height:720px vor. Damit war die Startseite ab
   ~983px Fensterhöhe niedriger als alle Unterseiten (1440x1080: 720 statt
   802px, 1920x1200: 720 statt 904px), weil der Standard-Hero laut §3.2
   keine Kappung hat. Auf Wunsch gleiche Höhe überall → keine Kappung.
   → Zurückspielen: height in hero-18 ergänzen und im Panel min-width:300px
     auf den ausgeklappten Zustand beschränken. */
@media (min-width: 900px) {
  .ws-block .sec-hero-18 {
    height: calc(var(--m-heroh, 85) * 1vh - var(--nav-h) - var(--topbar-h));
    height: calc(var(--m-heroh, 85) * 1dvh - var(--nav-h) - var(--topbar-h));
    overflow: hidden;
  }
}

/* ====================================================================
   FIX: Intro-Panel läuft auf Tablet seitlich aus dem Viewport
   (Blöcke features-06/07/08, Klasse .detail-intro__panel)
   Das Panel blutet per negativem Margin aus dem Container heraus und
   kompensiert das mit --pad-x: 48px. --container-px ist aber
   clamp(20px, 5vw, 48px), sinkt also unter 960px Viewport – die Differenz
   schiebt das Panel über den rechten Rand (834px → +6px, 768px → +10px,
   horizontale Scrollleiste). --pad-x muss dem Container folgen.
   Eine Ebene mehr Spezifität (.ws-block davor), weil die Section-Regel als
   inline-<style> im <body> steht und sonst gewinnt.
   → Zurückspielen in die Section-Bibliothek: --pad-x dort direkt auf
     var(--container-px) setzen, dann entfällt dieser Override.
   ==================================================================== */
.ws-block [class*="sec-"] .detail-intro__panel { --pad-x: var(--container-px); }
.ws-block .sec-features-04 .stack-section__grid { --pad-x: var(--container-px); }


/* ====================================================================
   FIX: 12-Spalten-Grids kollabieren nicht mit (Blöcke features-04, -54)
   Beide setzen im Stapel-Breakpoint zwar "> * { grid-column: 1 / -1 }",
   behalten aber repeat(12, minmax(0,1fr)) mit 48px Gap. Allein die 11
   Gaps ergeben 528px Mindestbreite → auf 390px schiebt das den Textblock
   158px über den rechten Rand. Sobald jedes Kind volle Breite hat, muss
   das Grid einspaltig werden; der Row-Gap bleibt unverändert 48px, das
   Layout sieht also identisch aus – nur ohne Phantom-Spalten.
   Breakpoints wie in den Sections (960 bzw. 991), damit Umbruch und
   Kollaps zusammenfallen.
   → Zurückspielen: in beiden Sections grid-template-columns: 1fr in den
     jeweiligen Stapel-Breakpoint aufnehmen (dort dann gleich auf den
     Breakpoint-Vertrag 1024/767 ziehen).
   ==================================================================== */
@media (max-width: 991px) {
  .ws-block .sec-v57  .kbl__grid,
  .ws-block .sec-v108 .pfaq__grid,
  .ws-block .sec-v27  .lead__card { grid-template-columns: 1fr; }

  /* faq-05 zusätzlich: die Stapel-Regel ".pfaq__grid > *" (2 Klassen) wird
     von ".pfaq__grid > .pfaq__right { grid-column: span 7 }" (3 Klassen)
     überspezifiziert – die rechte Spalte stapelt deshalb nie. Vier Klassen
     ziehen sie zurück auf volle Breite.
     → Zurückspielen: in faq-05 die span-Regel im Media-Query mit
       zurücksetzen. */
  .ws-block .sec-v108 .pfaq__grid > .pfaq__right { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .ws-block .sec-features-04 .stack-section__grid,
  .ws-block .sec-features-08 .timeline__panel-inner { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ws-block .sec-features-04 .stack-card { grid-template-columns: 1fr; }
}

/* ====================================================================
   HAUPTNAVIGATION (Block "header-06")
   Struktur laut Redaktionstabelle: M1 und M4 mit Untermenü, M2/M3/M5/M6
   flach. Ohne CTA-Button — der wurde auf Wunsch entfernt; die Erstberatung
   (T3) läuft über den Footer-CTA und die Hero-Buttons.
   Werte ausschließlich aus den Tokens von style.css (--sp-*, --r-*,
   --shadow-*, Farb-Rollen).
   ==================================================================== */

/* Aktive Seite hervorheben — Markup setzt aria-current="page", identisch
   zum Hover-Zustand aus style.css.
   --c-primary-mid statt --c-primary (17.08.2026): auf der hellen Fläche
   --c-neutral-light kam --c-primary nur auf 4,22:1, jetzt 4,67:1.
   barrierefreiheit.py sieht das nicht — es rechnet jede Farbe gegen Weiß,
   dort steht --c-primary mit 4,53:1 knapp im Grünen. */
.nav__link[aria-current="page"] {
  background: var(--c-neutral-light);
  color: var(--c-primary-mid);
}

/* Aktiver Hauptpunkt, wenn eine seiner Unterseiten offen ist. Der Trigger ist
   ein <button> (kein Link auf die Seite selbst) → Klasse statt aria-current;
   aria-current sitzt auf dem passenden Unterpunkt im Panel. */
.nav__link.is-active { background: var(--c-neutral-light); color: var(--c-primary-mid); }

/* -- Untermenüs ------------------------------------------------------
   Getoggelt vom Mega-Menü-Teil in script.js: Trigger trägt data-mg="<id>",
   Panel die Klasse .mgpanel → .open. Klick daneben und Escape schließen,
   aria-expanded setzt das Script. Kein zusätzliches JS. */
.nav__item { position: relative; display: flex; }
.nav__link--toggle { text-align: left; }
.nav__link svg { transition: transform .2s ease; }
.nav__link--toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__sub {
  display: none;
  position: absolute; top: calc(100% + var(--sp-2)); left: 0;
  z-index: 210;                                   /* über .nav-header (200) */
  width: max-content; max-width: 22rem;
  padding: var(--sp-2);
  background: var(--c-white);
  border: var(--bw-card) solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
}
.nav__sub.open { display: block; }
/* Unsichtbare Bruecke ueber den Abstand zum Trigger: ohne sie verlaesst der
   Mauszeiger beim Runterfahren zum Panel kurz .nav__item, mouseleave feuert
   und schliesst das Menue, bevor der Zeiger das Panel erreicht (betrifft nur
   "Ambulante Pflege", der einzige Hover-Trigger — siehe script.js). */
.nav__sub::before {
  content: '';
  position: absolute; top: calc(-1 * var(--sp-2)); left: 0; right: 0;
  height: var(--sp-2);
}

/* Panels aus der rechten Menühälfte (aktuell nur Karriere) rechtsbündig zum
   Trigger: linksbündig blieben bei 1025px Viewport nur 3px bis zum Rand,
   rechtsbündig sind es über 200px. Das Markup setzt die Klasse anhand der
   Position im Menü. */
.nav__sub--right { left: auto; right: 0; }
.nav__sub-list { display: flex; flex-direction: column; gap: var(--sp-1); }
.nav__sub-link {
  display: block;
  padding: var(--sp-3);
  border-radius: var(--r-btn);
  font-size: 14px; font-weight: var(--fw-heading);
  color: var(--t-primary);
  transition: background .2s, color .2s;
}
.nav__sub-link:hover,
.nav__sub-link[aria-current="page"] {
  background: var(--c-neutral-light);
  color: var(--c-primary);
}

/* -- Tablet & Mobil: Burger -------------------------------------------
   Breakpoint-Vertrag: Tablet ≤1024px. style.css schaltet erst bei 991px um,
   deshalb sind dessen Umschalt-Regeln hier gespiegelt (style.css ist
   generiert = tabu).
   → Zurückspielen: header-06 sollte generell bei 1024px umschalten. */
@media (max-width: 1024px) {
  .nav__menu   { display: none; }
  .nav__burger { display: flex; }
  .nav__menu.open {
    display: flex; flex-direction: column; align-items: flex-start;
    /* +1px = die border-bottom der .nav-header, sonst überlappt das Panel
       die Navigation um genau diese Linie. */
    position: fixed; top: calc(var(--nav-h) + 1px); left: 0; right: 0; bottom: 0;
    background: var(--c-white);
    padding: var(--sp-5) var(--container-px);
    gap: var(--sp-1);
    border-top: var(--bw-card) solid var(--hairline);
    overflow-y: auto;
  }
  /* Touch-Targets ≥44px: 18px Zeile + 2×--sp-3 = 48px. */
  .nav__menu.open .nav__link {
    font-size: var(--fs-5); padding: var(--sp-3) var(--sp-2); width: 100%;
  }

  /* Untermenüs klappen als Akkordeon auf statt als schwebendes Panel —
     gleiche Mechanik, nur andere Positionierung. */
  .nav__item { display: block; width: 100%; }
  .nav__menu.open .nav__link--toggle { width: 100%; justify-content: space-between; }
  .nav__menu.open .nav__sub.open {
    position: static; width: auto; max-width: none;
    margin: var(--sp-1) 0 var(--sp-2) var(--sp-2);
    padding: 0 0 0 var(--sp-3);
    background: none; box-shadow: none; border-radius: 0;
    border: 0; border-left: var(--bw-btn) solid var(--c-secondary);
  }
  /* 16px Zeile + 2×--sp-3 = 46px Touch-Target. */
  .nav__menu.open .nav__sub-link { font-size: var(--fs-6); padding: var(--sp-3); }
}

/* ====================================================================
   BEREICHS-AKZENTFARBEN (Web-Guidelines)
   Eine Akzentfarbe pro Bereich, je drei Stufen (Base / Dark / Light).
   Die Primärfarbe bleibt unangetastet: Buttons, Links und CTAs sind
   ausnahmslos türkis. Pro Section immer nur eine Bereichsfarbe.
   Angewendet über eine Bereichsklasse am <body> (setzt das Markup, siehe
   CHANGES.txt); ohne Bereichsklasse ändert sich nichts.
   Kontraste gemessen (Weiß = #fff):
     Dark auf Weiß           4,95:1  ✓ AA-Text
     Dark auf Light (Pill)   4,56:1  ✓ AA-Text
     Base auf Weiß           3,05:1  ✓ AA für grafische Elemente
     Base auf Light          2,81:1  ✗ — Base-Icons deshalb nur auf Weiß,
                                        nie auf der Light-Fläche.
   ==================================================================== */
:root {
  /* Ambulante Pflege — Akzent 1 (Honiggold), Werte aus dem
     Guidelines-Editor, inkl. Mid-Ton. */
  --c-honiggold:        #C28905;
  --c-honiggold-mid:    #AB7905;
  --c-honiggold-dark:   #946804;
  --c-honiggold-light:  #FAF6EB;
  /* 1:1 Intensivpflege — Akzent 2 (Violett), Werte aus dem
     Guidelines-Editor. Das Himmelblau aus der Mail war ein anderer Stand.
     Der Editor-Wert "Light" #8a84d8 ist ein mittelheller Ton, keine
     Pill-Fläche: Dark darauf ergibt nur 2,40:1. Er läuft deshalb als
     -midlight mit, und für die Pill-Fläche ist ein blasser Tint nach dem
     Verfahren von Akzent 1 abgeleitet (7,28:1). */
  --c-violett:          #6b63c9;
  --c-violett-mid:      #5c55b2;
  --c-violett-dark:     #4d469a;
  --c-violett-midlight: #8a84d8;
  --c-violett-light:    #F5F5FC;
  /* Kommende Bereiche. Base kommt aus den Guidelines, Dark und Light sind
     nach demselben Verfahren abgeleitet, das euren beiden fertigen Paaren
     zugrunde liegt: gleicher Farbton und gleiche Sättigung, nur die
     Helligkeit wandert bis zum Zielkontrast.
       Light = 1,085:1 gegen Weiß   (Vorlagen: 1,08 / 1,09)
       Dark  = 4,58:1 gegen Light   (Vorlagen: 4,59 / 4,56)
     Gegenprobe: auf Honiggold und Himmelblau angewandt liefert das
     Verfahren #946904/#FAF6EB bzw. #3071C1/#F3F6FB – 1 bis 2 Farbwerte
     neben euren Originalen. Vorschlag, bis die Guidelines eigene Werte
     festlegen. */
  /* Tagespflege — Terrakotta */
  --c-terrakotta:        #DF773B;
  --c-terrakotta-dark:   #B4541D;
  --c-terrakotta-light:  #FBF5F1;
  /* Krankenbeförderung — Verkehrsgrün */
  --c-verkehrsgruen:       #22A951;
  --c-verkehrsgruen-dark:  #1A803E;
  --c-verkehrsgruen-light: #EAFAF0;
  /* Intensiv-WG — Lavendel */
  --c-lavendel:         #AA83CD;
  --c-lavendel-dark:    #8C58BB;
  --c-lavendel-light:   #F9F4FC;
  /* Senioren- und Demenz-WG — Beere */
  --c-beere:            #D7749D;
  --c-beere-dark:       #C63A74;
  --c-beere-light:      #FCF4F7;
  /* Wohnen — Koralle */
  --c-koralle:          #DC7768;
  --c-koralle-dark:     #C7422E;
  --c-koralle-light:    #FCF4F2;
}

/* Bereichs-Scope: schaltet die drei Rollen für alles darunter. */
.area-ambulante-pflege {
  --area-base:  var(--c-honiggold);
  --area-dark:  var(--c-honiggold-dark);
  --area-light: var(--c-honiggold-light);
}
.area-intensivpflege {
  --area-base:  var(--c-violett);
  --area-dark:  var(--c-violett-dark);
  --area-light: var(--c-violett-light);
}
/* Für die kommenden Bereiche schon angelegt: eine neue Bereichsseite
   braucht nur noch die passende Klasse am <body>. */
.area-tagespflege {
  --area-base:  var(--c-terrakotta);
  --area-dark:  var(--c-terrakotta-dark);
  --area-light: var(--c-terrakotta-light);
}
.area-krankenbefoerderung {
  --area-base:  var(--c-verkehrsgruen);
  --area-dark:  var(--c-verkehrsgruen-dark);
  --area-light: var(--c-verkehrsgruen-light);
}
.area-intensiv-wg {
  --area-base:  var(--c-lavendel);
  --area-dark:  var(--c-lavendel-dark);
  --area-light: var(--c-lavendel-light);
}
.area-senioren-demenz-wg {
  --area-base:  var(--c-beere);
  --area-dark:  var(--c-beere-dark);
  --area-light: var(--c-beere-light);
}
.area-wohnen {
  --area-base:  var(--c-koralle);
  --area-dark:  var(--c-koralle-dark);
  --area-light: var(--c-koralle-light);
}

/* -- Preheadlines und kleine Labels im Dark-Ton statt Türkis -----------
   Vier Klassen nötig, weil die Section-Regeln als inline-<style> im <body>
   stehen (z.B. ".sec-features-04 .stack-section__left .preheadline"). */
/* .preheadline trägt seit 24.08.2026 den Bereichston (Romeo): auf der
   Intensivpflege-Seite stand sie türkis statt lila. Die frühere Vorgabe
   „Preheadline bleibt türkis wie überall sonst" ist damit zurückgenommen.
   Das !important ist Pflicht, nicht Bequemlichkeit: der kw-kontrast-Block
   am Dateiende (erzeugt von barrierefreiheit.py) zwingt .preheadline
   pauschal auf #955800 !important. Zwei !important entscheidet die
   Spezifität — 4 Klassen hier gegen 1 dort.
   .sc-kicker weiterhin NICHT: der Kicker sitzt auf den dunklen
   Stapelkarten (#2c3b3d / #1a4a5a), dort ist der Dark-Ton mit 1,1–2,4:1
   unlesbar. */
body[class*="area-"] .ws-block [class*="sec-"] .card__kicker,
body[class*="area-"] .ws-block [class*="sec-"] .preheadline { color: var(--area-dark) !important; }

/* Ausnahme: sec-v13 setzt die Preheadline hell auf dunkle Fläche — der
   Dark-Ton wäre dort nicht lesbar, bleibt also weiß. Ein Selektor mehr
   (.sec-v13.sec-v13), damit die Regel unabhängig von der Reihenfolge über
   der Bereichsregel steht. */
body[class*="area-"] .ws-block .sec-v13.sec-v13 .preheadline { color: rgba(255,255,255,.75) !important; }

/* Auf den Intensivpflege-Seiten trägt die Fläche des Bandes selbst den
   Bereichston (siehe Regel weiter unten), dort steht die Preheadline im
   hellen Bereichston statt in reinem Weiß: 7,28:1 links, 5,7:1 rechts.
   Zwei Selektoren doppelt (6 Klassen), damit die Regel unabhängig von der
   Reihenfolge über der Ausnahme darüber steht — beide wären sonst gleich. */
body.area-intensivpflege.area-intensivpflege .ws-block .sec-v13.sec-v13 .preheadline {
  color: var(--area-base) !important;
}

/* -- Icons in den Leistungskarten im Base-Ton -------------------------- */
body[class*="area-"] .ws-block [class*="sec-"] .timeline__dot,
body[class*="area-"] .ws-block [class*="sec-"] .bento__icon,
body[class*="area-"] .ws-block [class*="sec-"] .card__icon,
body[class*="area-"] .ws-block [class*="sec-"] .svc__icon { color: var(--area-base); }
body[class*="area-"] .ws-block [class*="sec-"] .timeline__dot { background: var(--area-base); }

/* Kundenvorgabe: "Icons in den Leistungskarten bekommen den Base Ton".
   Die Timeline-Knoten sind diese Icons – die Sections setzen sie sonst auf
   --c-secondary-dark (grau). Weißes Häkchen auf Base = 3,05:1, für ein
   grafisches Element AA-konform. */
body[class*="area-"] .ws-block [class*="sec-"] .timeline__node {
  background: var(--area-base);
}

/* Der aktive Knoten bleibt weiß mit Ring, sonst wäre offen von
   geschlossen nicht zu unterscheiden. Die background-Zeile muss hier
   stehen, weil die Regel darüber sonst gewinnt (5 vs. 6 Klassen). */
body[class*="area-"] .ws-block [class*="sec-"] .timeline__step:has(details[open]) .timeline__node {
  background: var(--c-white);
  border-color: var(--area-base);
  color: var(--area-base);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--area-base) 18%, transparent);
}

/* Die Kontaktkarte im Block faq-01 hatte testweise die Light-Fläche und
   Dark-Labels. Warmes Gold neben dem kühlen Teal der Karte wirkte
   schmutzig statt gesetzt – zurückgenommen, die Karte bleibt neutral. */

/* -- Bereichs-Pill: wiederkehrendes Erkennungselement -------------------
   Light-Fläche, Dark-Text. Ersetzt im Hero der Bereichsseiten die
   Preheadline. */
.area-pill {
  display: inline-flex; align-items: center;
  margin-bottom: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--area-light);
  color: var(--area-dark);
  font-size: 13px; font-weight: var(--fw-heading);
  letter-spacing: .04em;
}

/* ====================================================================
   BEREICHSLINIE IM HERO (Block hero-17)
   Feine senkrechte Linie genau auf der Kante zwischen Textspalte und
   Bildfläche, im Base-Ton des Bereichs. Oben und unten läuft sie aus,
   damit sie als Designdetail wirkt und nicht als Rahmen.
   Nur ab 1025px: darunter stapelt hero-17 (Bild über Text), dann gibt es
   keine senkrechte Kante mehr.
   Das Grid ist 1fr 1fr, die Kante liegt also exakt bei 50%.
   KORREKTUR 25.08.2026: Hier stand 901px — die echte Stapelgrenze liegt aber
   bei 1024px. Sie kommt aus dem Bundle
   (@media (max-width:1024px){ .sec-hero-17 section.hero1{grid-template-columns:1fr} })
   und schlägt die 900er-Regel im Seiten-Style, weil `section.hero1` die
   höhere Spezifität hat. Zwischen 901 und 1024 Pixeln war das Layout
   deshalb gestapelt und die senkrechte Linie trotzdem an — sie lief mitten
   durch Bild und Text und endete frei in der Luft.
   Wer diese Grenze ändert, muss BEIDE Blöcke anfassen: diesen und den
   queren darunter. Sie müssen lückenlos aneinanderstoßen.
   ==================================================================== */
@media (min-width: 1025px) {
  body[class*="area-"] .ws-block .sec-hero-17 .hero1 { position: relative; }
  body[class*="area-"] .ws-block .sec-hero-17 .hero1::after {
    content: '';
    position: absolute; top: 0; bottom: 0; left: 50%;
    /* Sitzt bündig auf der Kante: rechte Linienkante genau bei 50%, die
       Linie steht also vollständig auf der hellen Seite und stößt direkt
       an die Bildfläche. Der frühere weiße Abstand ist raus.
       Hinweis: Gold direkt an gesättigtem Türkis wirkt durch
       Simultankontrast etwas wärmer, als der Farbwert ist – gemessen
       rendert die Linie exakt #C28905. */
    width: 4px; margin-left: -4px;
    /* Verlauf von unten nach oben: unten voll, nach oben auslaufend. */
    background: linear-gradient(to top,
      var(--area-base) 0%,
      var(--area-base) 40%,
      transparent 100%);
    pointer-events: none;
    z-index: 1;
  }
}

/* Gestapelte Ansicht (Tablet/Mobil, ≤1024px): Bild liegt oben, Text darunter
   — die Kante ist jetzt waagerecht. Die Bereichslinie legt sich deshalb quer
   auf die Unterkante des Bildes, statt zu verschwinden (Romeo, 25.08.2026).
   Träger ist die Bildfläche selbst, damit die Linie exakt auf der Kante
   sitzt und nicht auf einer gerechneten Höhe.
   Verlauf analog zur senkrechten Fassung: von der Anfangskante voll,
   zur Gegenkante auslaufend — dort von unten nach oben, hier von links
   nach rechts. Farbe bleibt --area-base, also lila auf den
   Intensivpflege-Seiten und honiggold auf den ambulanten. */
@media (max-width: 1024px) {
  body[class*="area-"] .ws-block .sec-hero-17 .hero1__media { position: relative; }
  body[class*="area-"] .ws-block .sec-hero-17 .hero1__media::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 4px;
    background: linear-gradient(to right,
      var(--area-base) 0%,
      var(--area-base) 40%,
      transparent 100%);
    pointer-events: none;
    z-index: 1;
  }
}

/* ====================================================================
   BEREICHSLINIE AN DER OBERKANTE DES CTA-BANDS
   Gleiche Handschrift wie die Linie im Hero: 3px im Base-Ton, an beiden
   Enden auslaufend. Sie sitzt auf der Kante, an der das farbige Band
   beginnt.
   Umgesetzt als zusätzliche Hintergrund-Ebene statt als Pseudo-Element:
   .cta-band hat ::before und ::after bereits für die Deko-Kreise belegt.
   Die Ebene verschiebt außerdem nichts im Layout, anders als ein
   border-top.
   Gilt nur auf Seiten mit Bereichsklasse – also Leistungsseiten
   Ambulante Pflege / Intensivpflege und die 37 Ortsseiten. Startseite,
   Karriere, Kontakt und Rechtliches bleiben ohne.
   Zwei Varianten, weil die Bereichsseiten zwei verschiedene CTA-Blöcke
   nutzen: cta-02 (.beratung-section) auf Hub- und Ortsseiten, cta-04
   (.cta-band) auf den Leistungs-Detailseiten.
   ==================================================================== */
/* Farbstopps getauscht (Romeo, 25.08.2026): das HELLE gehört nach oben,
   das Dunkle nach unten — deshalb steht --c-tertiary-mid bei 0% und
   --c-primary bei 100%.
   Winkel 160° statt 135°, gleich wie beim CTA-Band (.sec-v13): auf einer
   breiten, flachen Fläche spannt CSS die Verlaufsachse über die Diagonale,
   135° kippt dadurch optisch fast ins Waagerechte und der Übergang zerläuft
   über die ganze Breite. 160° hält ihn kompakt, liest sich als Licht von
   oben und wirkt nicht wie der Framework-Standardverlauf.
   Beide farbigen Bänder tragen damit denselben Winkel — die im Abschnitt
   „FARBIGE BÄNDER" angestrebte Familie. */
body[class*="area-"] .ws-block .beratung-section {
  background-image:
    linear-gradient(to right, var(--area-base) 0%, var(--area-base) 40%,
                    transparent 100%),
    linear-gradient(160deg, var(--c-tertiary-mid) 0%, var(--c-primary) 100%);
  background-size: 100% 4px, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: top left, center center;
}
/* Erstberatung-Strich im gruenen CTA-Kasten: auf Ambulante-Pflege-
   Seiten in der Bereichsfarbe (Honiggold/Orange) statt im Primary-Gruen,
   das auf dem gruenen Verlauf sonst kaum zu sehen ist. */
body.area-ambulante-pflege .beratung-section__text .preheadline::before {
  background: var(--area-base);
  height: 3px;
}
/* Gleiches Muster fuer Intensivpflege-Ortsseiten: Strich in der
   Bereichsfarbe (Lila/Violett via --area-base), 3px dick. */
body.area-intensivpflege .beratung-section__text .preheadline::before {
  background: var(--area-base);
  height: 3px;
}

/* Verlaufswinkel 160° statt 135° (Romeo, 25.08.2026): der Verlauf soll
   überwiegend von oben kommen und nur leicht seitlich geneigt sein, nicht
   flach diagonal von links nach rechts.
   Farbstopps getauscht: das HELLE gehört nach oben, das Dunkle nach unten —
   deshalb steht --c-tertiary-mid bei 0% und --c-primary bei 100%. */
body[class*="area-"] .ws-block .sec-v13 .cta-band {
  background-image:
    linear-gradient(to right, var(--area-base) 0%, var(--area-base) 40%,
                    transparent 100%),
    linear-gradient(160deg, var(--c-tertiary-mid) 0%, var(--c-primary) 100%);
  background-size: 100% 4px, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: top left, center center;
}

/* ZURÜCKGENOMMEN 24.08.2026: Hier stand kurzzeitig eine Regel, die auf den
   Intensivpflege-Seiten die ganze FLÄCHE des CTA-Bands lila einfärbte. Romeo
   wollte nur die Preheadline im Bereichston, nicht das Band — das Band bleibt
   türkis wie auf allen anderen Seiten. Nicht erneut einbauen. */

/* Textlink in den Peek-Streifen des Startseiten-Heros: .cta-link ist in
   style.css auf --c-primary-dark gesetzt, das wäre auf der dunklen
   Streifenfläche unlesbar. Hier weiß, Pfeil rückt beim Hover nach. */
.ws-block .sec-hero-18 .hs18__panel .cta-link { color: var(--c-white); }
.ws-block .sec-hero-18 .hs18__panel .cta-link svg { transition: transform .2s ease; }
.ws-block .sec-hero-18 .hs18__panel .cta-link:hover svg { transform: translateX(4px); }

/* ====================================================================
   BENTO-GRID (Block features-22): längliche Kachel nach rechts
   Die Kachel wurde bisher automatisch platziert und landete unten links
   (Spalten 1–2). Jetzt fest auf Spalte 3–4; unten links bleibt bewusst
   frei. Die beiden kleinen Kacheln bleiben, wo sie sind.
   Nur im Vierspalter ab 992px: bei 601–991px hat das Grid zwei Spalten
   und ab 600px eine – dort würde eine feste Spaltenangabe das gestapelte
   Layout zerlegen.
   ==================================================================== */
@media (min-width: 992px) {
  .ws-block .sec-v16 .bento__tile--wide { grid-column: 3 / span 2; }
}

/* NACHTRAG 25.08.2026: Kachel wächst mit dem Text statt ihn abzuschneiden.
   Der Block setzt die Zeilenhöhe fest auf 150px (28px Innenabstand → 94px
   nutzbar). Icon 42px + Titel + zwei Textzeilen brauchen rund 123px; der
   Rest lief mit overflow:hidden oben aus der Kachel — das Icon der breiten
   Kachel „Unser Einsatzgebiet" wirkte verrutscht. Jetzt 150px als Minimum,
   die Zeile wächst bei längerem Text mit; die dunkle 2×2-Kachel zieht mit.
   Dazu: der klassenlose Wrapper um Titel+Text (nur in den Kacheln mit
   Wrapper) bekommt denselben 8px-Gap wie die Kacheln ohne Wrapper, damit
   alle drei gleich atmen.
   NUR ab 992px: darunter setzt der Block selbst 160px (bis 991px) bzw. auto
   (bis 600px) — eine unbeschränkte Regel hier hätte wegen des zusätzlichen
   .ws-block-Selektors beide überfahren und die Mobilansicht aller 39 Seiten
   mit diesem Block verstellt. */
@media (min-width: 992px) {
  .ws-block .sec-v16 .bento__grid { grid-auto-rows: minmax(150px, auto); }
  /* NACHTRAG 16.09.2026: Die Zeile darf wachsen, trotzdem blieb das
     Icon-Kaestchen als einziges Element mit fester Hoehe schrumpfbar
     und wurde in der flex-Spalte auf rund 20px zusammengedrueckt.
     Festnageln, damit alle Kacheln dasselbe 42er-Kaestchen zeigen. */
  .ws-block .sec-v16 .bento__icon { flex: 0 0 auto; }
}
.ws-block .sec-v16 .bento__tile > div:not([class]) {
  display: flex; flex-direction: column; gap: 8px;
}

/* NACHTRAG 24.08.2026: Die unten beschriebene Umstellung war nur bei EINER
   der drei Flächen angekommen. Beratungsband und sec-v13 liefen weiter auf
   var(--c-tertiary-mid) — und dieses Token wird im Bundle zweimal gesetzt
   (#09757d früh, #d5d5d5 spät); das Grau gewinnt. Beide Bänder liefen also
   nach rechts ins Hellgrau, weiße Schrift dort bei 1,47:1. Jetzt tragen alle
   drei dieselbe Rezeptur var(--c-primary) → var(--c-primary-dark) = 6,69:1.
   Merksatz: ein Token, das an zwei Stellen im :root steht, ist kein Token,
   sondern eine Wette auf die Reihenfolge. */

/* ====================================================================
   FARBIGE BÄNDER DURCHGÄNGIG IM PRIMÄR-TON
   Das Beratungsband (cta-02) lief als einziges noch von var(--c-primary)
   in var(--c-tertiary-mid) – und Tertiär ist laut Guidelines ein Grau
   (#d5d5d5). Das Band wurde dadurch nach rechts hell und entfärbt, und
   weiße Schrift lag dort bei 1,47:1.
   Alle drei farbigen Flächen nutzen jetzt dieselbe Rezeptur aus der
   Primär-Reihe: Mid → Dark. Weiße Schrift liegt damit durchgehend
   zwischen 5,02:1 und 6,69:1, und die Bänder sehen wie eine Familie aus
   statt wie drei verschiedene.
   Der volle Primärton #119098 bleibt dort, wo er laut Guidelines
   hingehört – als Akzent auf Flächen ohne Text (Icons, Marker, Punkte).
   ==================================================================== */

/* ====================================================================
   KONTAKTSEITE: Abstand zwischen den beiden Kartenreihen
   Seit der Kopf von features-19 weg ist, standen dort 128px unteres
   Padding von features-113 plus 96px oberes Padding von features-19
   übereinander – rund 224px Leerraum. Auf je --sp-6 (32px) reduziert,
   macht 64px.
   Zusätzlich der Spaltenabstand: features-113 arbeitet mit --grid-gap
   (32px auf Desktop), das team__grid hatte feste 20px. Dadurch waren die
   Karten unterschiedlich breit (347 vs. 355px) und die Reihen liefen
   nicht untereinander auf. Jetzt beide auf --grid-gap.
   Beide Blöcke kommen ausschließlich auf kontakt.html vor.
   ==================================================================== */
.ws-block .sec-features-113 { padding-bottom: var(--sp-6); }
.ws-block .sec-v12 .team { padding-top: var(--sp-6); }
.ws-block .sec-v12 .team__grid { gap: var(--grid-gap); }

/* ====================================================================
   COOKIE-BANNER (Steuerung in custom.js)
   Leiste am unteren Rand, überlagert den Inhalt nicht dauerhaft und
   schiebt nichts. Beide Schaltflächen sind gleich groß und gleich
   prominent – Ablehnen darf nicht schwerer sein als Zustimmen.
   ==================================================================== */
.cc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9500;
  background: var(--c-white);
  border-top: var(--bw-card) solid var(--hairline);
  box-shadow: var(--shadow-2);
}
.cc[hidden] { display: none; }
.cc__inner {
  max-width: var(--container-max); margin-inline: auto;
  padding: var(--sp-5) var(--container-px);
  display: flex; align-items: center; gap: var(--sp-6);
  flex-wrap: wrap;
}
.cc__text { flex: 1 1 32rem; min-width: 0; }
.cc__titel { font-weight: var(--fw-heading); color: var(--t-primary); margin-bottom: var(--sp-1); }
.cc__text p { font-size: 14px; line-height: 1.6; color: var(--t-secondary); }
.cc__text a { color: var(--c-primary-dark); text-decoration: underline; }
.cc__aktionen { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.cc__aktionen .btn { flex: 1 1 auto; min-width: 11rem; justify-content: center; }

@media (max-width: 767px) {
  .cc__inner { gap: var(--sp-4); padding: var(--sp-4) var(--container-px); }
  .cc__aktionen { width: 100%; }
  .cc__aktionen .btn { flex: 1 1 45%; min-width: 0; }
}

/* Footer: Link zum erneuten Öffnen, sieht aus wie die Meta-Links */
.ft186__meta button {
  font-size: 12.5px; color: var(--c-neutral-dark);
  text-decoration: underline; cursor: pointer;
}
.ft186__meta button:hover { color: var(--t-primary); }

/* ====================================================================
   RECHTSTEXTE (Block legal-01 auf Impressum und Datenschutz)
   Der Baukasten liefert für diese Seiten keinen Inhaltsblock – die
   beiden Seiten bestanden nur aus Kopf und Fuß. Hier eine schlichte
   Lesespalte aus den Tokens, ohne neue Farben.
   ==================================================================== */
.sec-legal-01 .legal { padding-block: var(--section-py); background: var(--c-white); }
.sec-legal-01 .legal__inner {
  max-width: 46rem;
  /* Deutsche Langwörter wie "Datenschutzerklärung" sind auf 390px breiter
     als die Textspalte und erzeugten dort 33px Überlauf. Die Seite ist
     lang="de", also trennt der Browser korrekt. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.sec-legal-01 .legal h1 { margin-bottom: var(--sp-7); }
.sec-legal-01 .legal h2 {
  font-size: var(--fs-4);
  margin-top: var(--sp-7); margin-bottom: var(--sp-3);
  color: var(--t-primary);
}
.sec-legal-01 .legal p { color: var(--t-secondary); line-height: var(--lh-body, 1.7); }
.sec-legal-01 .legal p + p { margin-top: var(--sp-4); }
.sec-legal-01 .legal a { color: var(--c-primary-dark); text-decoration: underline; }

/* Redaktionshinweis – erklärt, was im Text noch zu tun ist. Fliegt mit dem
   fertigen Rechtstext raus. */
.sec-legal-01 .legal__hinweis {
  font-size: 13px; color: var(--c-neutral-dark);
  border-left: var(--bw-btn) solid var(--c-secondary);
  padding-left: var(--sp-3); margin-top: var(--sp-2);
}

/* Warnkasten: unübersehbar, damit die Platzhalterseite nicht versehentlich
   live geht. Bewusst in --c-error und nicht in einer Markenfarbe. */
.sec-legal-01 .legal__warnung {
  margin-bottom: var(--sp-7);
  padding: var(--sp-4) var(--sp-5);
  border: var(--bw-btn) solid var(--c-error, #c0392b);
  border-radius: var(--r-sm, 12px);
  background: var(--c-error-bg, #fdf0ee);
  color: #8f2c20;
  font-size: 14px; line-height: 1.6;
}

/* ============================================================
   17. Ambulante-Detailseiten: Hero-17 + Intro-Panel — Briefing-Fixes
   Ueberschreibt die inline-Body-Section-Styles per hoeherer Spezifitaet
   (.sec-hero-17 section.hero1 ...). Ziel: rem statt px, Tokens statt Hex,
   Breakpoint 1024 statt 900, var(--nav-h) statt 68px, Ueberlappung entschaerft.
   ============================================================ */

/* 17a. Hero-Hoehe: Magic Number 68px -> var(--nav-h) */
.sec-hero-17 section.hero1 { min-height: calc(85vh - var(--nav-h, 72px)); }

/* 17b. Farben nur ueber Tokens (statt #fff / #0e8f98 / #065f66) */
.sec-hero-17 section.hero1 .hero1__text { background: var(--c-white); }
.sec-hero-17 section.hero1 .hero1__media {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark, var(--c-primary)) 100%);
}

/* 17c. Groessen in rem + --sp-Tokens (statt px) */
.sec-hero-17 section.hero1 .hero1__eyebrow { font-size: 0.8125rem; margin-bottom: var(--sp-4); }
.sec-hero-17 section.hero1 h1 { font-size: clamp(2.125rem, 4vw, 3.25rem); margin: 0 0 var(--sp-5); }
.sec-hero-17 section.hero1 .hero1__body { font-size: 1.125rem; margin: 0 0 var(--sp-6); }
.sec-hero-17 section.hero1 .hero1__actions { gap: var(--sp-5); }
.sec-hero-17 section.hero1 .hero1__phone { font-size: 0.9375rem; gap: var(--sp-2); }
/* 17c-2. Textspalte in die Container-Flucht (statt eigener 640px-Kasten)
   Die Section setzt max-width:40rem + margin-left:auto. Sobald das Fenster
   breiter als dieser Kasten ist, wandert der Textanfang mit der Fensterbreite,
   während Nav, features-04 und alle folgenden Sections auf der festen
   Container-Linie stehen (gemessen 1440px: Hero 72px statt 120px; bei ~880px
   Fenster 145px statt 85px).
   Jetzt füllt der Innenkasten die halbe Bildschirmspalte, und der linke Einzug
   rechnet die Container-Linie selbst aus:
     max(--container-px, 100% - --container-max/2 + --container-px)
   100% ist die Breite von .hero1__text, also die halbe Seitenbreite. Oberhalb
   von --container-max ergibt das genau den Rand, den .container per
   margin-inline:auto erzeugt; darunter greift --container-px, weil der
   Container dort randbündig sitzt. Bewusst kein 100vw: eine sichtbare
   Scrollleiste würde die beiden Linien sonst um einige Pixel auseinanderziehen.
   Der rechte Einzug bleibt unverändert, der Abstand zur Bildkante also auch.
   → Zurückspielen in die Section-Bibliothek: in hero-17 den festen
     max-width-Kasten durch diesen Einzug ersetzen. */
.sec-hero-17 section.hero1 .hero1__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  /* Einzeleigenschaften statt Kurzform: eine padding-Kurzform mit var() darin
     laesst sich im Browser nicht in Einzelwerte zerlegen und ist schwer zu
     pruefen. So ist jede Seite fuer sich belegbar. */
  padding-block: 3.5rem;
  padding-inline-end: clamp(1.75rem, 5vw, 5rem);
  padding-inline-start: max(var(--container-px), calc(100% - var(--container-max) / 2 + var(--container-px)));
}

/* 17d. Breakpoint normalisieren: Ein-Spalter ab 1024px statt 900px */
@media (max-width: 1024px) {
  .sec-hero-17 section.hero1 { grid-template-columns: 1fr; min-height: 0; }
  .sec-hero-17 section.hero1 .hero1__media { min-height: 20rem; order: -1; }
  /* Ein-Spalter: die Textspalte ist jetzt so breit wie die Seite, der Einzug
     ist damit schlicht --container-px — dieselbe Linie wie .container. */
  .sec-hero-17 section.hero1 .hero1__inner { margin: 0; max-width: none; padding: var(--sp-7) var(--container-px); }
}

/* 17e. Ueberlappung Intro-Panel (features-07): Wert wie beratungsbesuche (-160px),
   aber responsiv abgestuft, damit beim Kleinerwerden die Hero-Buttons frei bleiben. */
.sec-features-07 .detail-intro .detail-intro__panel { margin-top: -160px; }
@media (max-width: 1024px) {
  .sec-features-07 .detail-intro .detail-intro__panel { margin-top: -96px; }
}
@media (max-width: 767px) {
  .sec-features-07 .detail-intro .detail-intro__panel { margin-top: -48px; }
}

/* 17f. Hero reserviert unten Platz = Ueberlapp-Hoehe -> die Panel-Ueberlappung
   trifft IMMER leeren Raum statt den Button (adaptiv, an 17e gekoppelt).
   padding-bottom am flex-Container .hero1__text schafft ein leeres Band unten. */
.sec-hero-17 section.hero1 .hero1__text { padding-bottom: 160px; }
@media (max-width: 1024px) {
  .sec-hero-17 section.hero1 .hero1__text { padding-bottom: 96px; }
}
@media (max-width: 767px) {
  .sec-hero-17 section.hero1 .hero1__text { padding-bottom: 48px; }
}

/* 18. Topbar + Nav BEIDE sticky (gestapelt): Topbar oben, Nav dockt darunter an.
   Topbar-Hoehe ~44px (padding 10px + Inhalt); Nav bekommt top = Topbar-Hoehe.
   29.09.2026: --topbar-h nur ab 1025px, wie in Abschnitt INFO-LEISTE. Vorher
   galt 44px auch darunter, obwohl die Topbar dort display:none ist — die Nav
   klebte mobil/Tablet 44px unter dem oberen Rand, darueber eine leere Luecke. */
@media (min-width: 1025px) {
  :root { --topbar-h: 44px; }
}
.topbar { position: sticky; top: 0; z-index: 210; }
.nav-header { top: var(--topbar-h); }

/* 19. Container an Vorgabe/projekt gast angleichen: 1200px INHALT (vorher 1104px).
   Vorher: --container-max 1200px (border-box) minus 2x48px Rand = 1104px Inhalt -> zu schmal.
   Jetzt:  80rem (1280px) minus 2x40px = 1200px Inhalt; Rand 40px Desktop .. 20px Mobil.
   Identisch zu projekt gast, konform zum Section-System-Briefing. */
:root { --container-max: 80rem; --container-px: clamp(1.25rem, 5vw, 2.5rem); }

/* kw-marken v1 — bewusst festgelegt, nicht automatisch */
/* Diese Farbwerte hat Romeo am 19.08.2026 ausdrücklich so bestätigt.
   Sie standen vorher im automatisch erzeugten kw-kontrast-Block und
   waeren beim naechsten Lauf verschwunden, weil barrierefreiheit.py
   Markenfarben nicht mehr von sich aus aendert. Hier stehen sie als
   normale Deklaration — also als Entscheidung, nicht als Automatik.
   Der Wert in Klammern ist die urspruengliche Markenfarbe. */
:root {
  --c-neutral-mid:     #637b7e;   /* Markenwert war #79969a */
  --c-primary:         #0f838a;   /* Markenwert war #119098 */
  --c-secondary-dark:  #757575;   /* Markenwert war #777777 */
  --c-tertiary-dark:   #757575;   /* Markenwert war #777777 */
}

/* kw-rich v1 */
/* ── 1. Felder, die Blockelemente erlauben (div, li, td) ─────────────────── */
[data-kw] h3, [data-kw] h4, [data-kw] h5, [data-kw] h6{
  display:block; margin:var(--sp-4, 1rem) 0 var(--sp-2, .5rem);
  font-size:1rem; font-weight:var(--fw-semibold, 600); line-height:1.35;
  color:var(--t-primary, inherit); letter-spacing:-.005em;
}
[data-kw] p{ margin:0 0 var(--sp-3, .75rem); }
[data-kw] ul, [data-kw] ol{ display:block; margin:0 0 var(--sp-3, .75rem); padding-left:1.35em; }
/* Das Design-System setzt global ul,ol{list-style:none} — hier wieder aktivieren */
[data-kw] ul{ list-style:disc outside; }
[data-kw] ol{ list-style:decimal outside; }
[data-kw] li{ display:list-item; margin:0 0 var(--sp-2, .5rem); }
[data-kw] li:last-child{ margin-bottom:0; }
[data-kw] li::marker{ color:var(--c-primary, currentColor); }
[data-kw] ul ul{ list-style:circle outside; margin:var(--sp-2, .5rem) 0 0; }

/* ── 2. Felder, die KEINE Blockelemente erlauben (p, span) ───────────────── */
/* span-Elemente sind überall zulässig; display:block macht daraus Zeilen.    */
.kw-h{
  display:block; margin:var(--sp-4, 1rem) 0 var(--sp-2, .5rem);
  font-weight:var(--fw-semibold, 600); line-height:1.35;
  color:var(--t-primary, inherit);
}
.kw-p{ display:block; margin:0 0 var(--sp-3, .75rem); }
.kw-list{ display:block; margin:0 0 var(--sp-3, .75rem); }
.kw-li{
  display:block; position:relative;
  padding-left:1.35em; margin:0 0 var(--sp-2, .5rem);
}
/* Punkt aus ::before statt list-style — unabhängig von Browser und Reset */
.kw-li::before{
  content:"\2022"; position:absolute; left:.35em; top:0;
  color:var(--c-primary, currentColor); font-weight:700; line-height:inherit;
}
.kw-list-num{ counter-reset:kwli; }
.kw-list-num > .kw-li{ padding-left:1.7em; counter-increment:kwli; }
.kw-list-num > .kw-li::before{
  content:counter(kwli) "."; left:0;
  font-weight:var(--fw-semibold, 600); font-variant-numeric:tabular-nums;
}

/* ── 3. Im Editor: leere Punkte müssen anklickbar bleiben ────────────────── */
/* Ein leeres span mit display:block wäre 0 Pixel hoch — der Schreibzeiger
   wäre unsichtbar. Beim Speichern werden leere Punkte ohnehin entfernt.      */
.kw-li:empty, .kw-p:empty, .kw-h:empty{ min-height:1.25em; }

/* ── 4. Ränder: erstes Element oben, letztes unten ohne Abstand ──────────── */
[data-kw] > *:first-child{ margin-top:0; }
[data-kw] > *:last-child{ margin-bottom:0; }
/* AUSNAHME (25.08.2026): Beginnt ein Marker mit einer Überschrift und folgt
   er auf anderen Inhalt, kassiert die Regel darüber deren margin-top — die
   Überschrift klebt dann am Absatz des vorherigen Markers (gesehen auf
   intensivpflege-muelheim.html, "Unser Einzugsgebiet in drei Stufen"; dort
   war mit einem <br> gegengesteuert worden). Der Abstand gehört ans CSS,
   nicht in den Text. Das :not(:first-child) sorgt dafür, dass der oberste
   Marker im Container weiterhin bündig oben sitzt. */
[data-kw]:not(:first-child) > .kw-h:first-child{ margin-top:var(--sp-4, 1rem); }

/* ── 5. Zwei Absatz-Bauweisen auf einen Abstand bringen ──────────────────── */
/* Der Editor legt Text mal als <span class="kw-p">Text</span> ab (180x auf
   dieser Site), mal packt er mehrere Absätze in EINEN Marker und trennt sie
   als <div>…</div><br><div>…</div> (3x). Ein <div> bringt keinen eigenen
   Abstand mit, der Zwischenraum entstand dort allein aus den <br> — deshalb
   waren die Abstände im FAQ mal groß, mal eng, je nachdem wie der Text
   gespeichert wurde. Aufräumen im Markup hilft nicht dauerhaft: beim
   nächsten Speichern schreibt der Editor es wieder so. Also hier:
   die inneren <div> bekommen denselben Abstand wie ein .kw-p, und die
   Trenn-<br> zwischen ihnen werden wirkungslos.
   Bewusst nur DIREKTE Kinder des Markers — <br> innerhalb eines Absatzes
   bleiben echte Zeilenumbrüche. */
[data-kw].kw-p > div{ margin:0 0 var(--sp-3, .75rem); }
[data-kw].kw-p > div:last-child{ margin-bottom:0; }
[data-kw].kw-p > br{ display:none; }
[data-kw] strong, [data-kw] b{ font-weight:var(--fw-semibold, 600); }
/* /kw-rich */

/* ============================================================
   17f. Hero-Bild: echtes <img> statt Hintergrundflaeche
   Die Regeln 17b/17d oben setzen nur min-height. Ein <img> braucht
   zusaetzlich height + object-fit, sonst zieht es sich im Ein-Spalter
   (ab 1024px) auf sein Seitenverhaeltnis von 4:3 auf.
   ============================================================ */
.sec-hero-17 section.hero1 img.hero1__media {
  display: block; width: 100%; height: 100%; min-width: 0; object-fit: cover;
}
@media (max-width: 1024px) {
  .sec-hero-17 section.hero1 img.hero1__media { height: 20rem; min-height: 20rem; }
}

/* ============================================================
   Bildplatz befüllt → Platzhalter-Beschriftung ausblenden.
   Die Beschriftung (Initiale "M", "Temp", Berufsbezeichnung) steht als
   eigenes Kind-Element in der Fläche, damit Fläche und Text getrennt
   bearbeitbar sind. Liegt ein Bild darin, hätte sie sonst auf dem Foto
   gestanden. kw-api.php schreibt beim Bildwechsel immer eine url(…) ins
   style-Attribut — daran ist der befüllte Zustand ohne JavaScript erkennbar.
   ============================================================ */
[data-kw-bg][style*="url("] > .beschriftung { display: none; }

/* ============================================================
   Eingesetzte Icons: Größe erzwingen.

   Der Editor ergänzt beim Einsetzen eines SVG KEINE width/height.
   Die mitgelieferten Icons tragen width="20" height="20"; ein
   hochgeladenes SVG bringt oft nur einen viewBox mit — und füllt
   dann seinen Träger randlos aus (gemessen: 42×42 statt 20×20 in
   einem 42er-Kasten, das Icon sprengt die abgerundete Fläche).

   Erste Regel: nie größer als der Träger.
   Zweite Regel: SVGs ohne eigenes Maß bekommen die Hausgröße 20px.
   Bewusst OHNE !important und mit niedriger Spezifität — Abschnitte,
   die ihre Icon-Größe selbst setzen, behalten Vorrang.
   ============================================================ */
[data-kw-icon="1"] svg { max-width: 100%; max-height: 100%; }
[data-kw-icon="1"] svg:not([width]) { width: 20px; height: 20px; }

/* Stapel-Karten leistungen-hub (14.08.2026): Beschriftung der Bildflaeche
   verschwindet, sobald ein echtes Bild gesetzt ist — sonst stuende
   "Pflege daheim" quer ueber dem Foto. */
[data-kw-bg][style*="url("] > .sc-image__label{ display:none; }


/* kw-landmark v1 */
.kw-skip{position:absolute;left:-9999px;top:0;z-index:9999;padding:.75rem 1.25rem;background:#000;color:#fff;font:inherit;text-decoration:underline;border-radius:0 0 .25rem 0}.kw-skip:focus{left:0}

/* ====================================================================
   ÜBERSCHRIFT IM AKKORDEON-PANEL KLEINER ALS DER PANEL-TITEL
   Gemessen am 25.08.2026 auf 8 Seiten (alltagsbegleitung, behandlungspflege,
   entlastungsbetrag, grundpflege, hauswirtschaft, verhinderungspflege,
   leistungs-detail, intensivpflege): Die Section setzt im geöffneten Panel
   `.timeline__content h3` auf 20px — der aufklappbare `.accordion-title`
   darüber hat aber nur 18px. Das Untergeordnete war damit größer als das
   Übergeordnete, deshalb wirkten die Unterüberschriften im FAQ zu groß.
   Jetzt sauber gestaffelt: Titel 18px → Überschrift 16px → Text 14,5px.
   Ein Selektor mehr als in der Section (.ws-block davor), damit die Regel
   den inline-<style>-Block im Body schlägt.
   → Zurückspielen: gehört als Korrektur in die features-08-Section, dort
     steht die 20px-Zeile. Siehe Rückspiel-Paket kw-rich.
   ==================================================================== */
.ws-block .sec-features-08 .timeline__content h3{ font-size: 16px; }

/* Zwischenüberschriften IM Antworttext (h4 aus dem Editor):
   Es gibt bereits `[data-kw] h3…h6{ font-size:1rem }` im kw-rich-Block, die
   greift hier aber NICHT. Grund: Der Editor legt den Text als
   <p data-kw="…"><span class="kw-p"><p>…</p><h4>…</h4></span></p> ab — ein
   Blockelement in einem <p>. Das ist ungültiges HTML, der Browser schließt
   den Absatz beim Parsen und hängt das h4 AUSSERHALB des Markers ein. Im
   DOM ist es damit kein Nachfahre von [data-kw] mehr und fällt auf die
   Design-System-Größe --fs-4 zurück (18,4–21,6px) — bei 14,5px Fließtext.
   Deshalb hier über den Section-Container statt über den Marker, das greift
   unabhängig davon, wohin der Parser das h4 verschiebt.
   Staffelung: Titel 18px → Panel-Überschrift 16px → Zwischenüberschrift
   15px → Fließtext 14,5px.
   → Die eigentliche Ursache ist das <p> als Marker-Träger; sauber wäre ein
     <div>. Gilt für 6 Marker auf behandlungspflege.html.
   Größe: KEINE eigene, sondern die des Fließtexts (14,5px) — die
   Zwischenüberschrift ist damit schlicht fett, nicht größer. Vorbild ist
   liniarwood (/linoline/), wo dieselben Zwischenüberschriften als
   <span class="kw-h"> stehen; `.kw-h` setzt bewusst nur font-weight und
   keine font-size (Romeo, 27.08.2026). */
.ws-block .sec-features-08 .timeline__content h4{
  font-size: 14.5px; font-weight: var(--fw-semibold, 600); line-height: 1.35;
  margin: var(--sp-4, 1rem) 0 var(--sp-2, .5rem);
  color: var(--t-primary, inherit);
}


/* ── kw-zustand 1.0 — erzeugt von kw-zustand-css.py ──────────────────────
   Icon-Farben für Hover und Aktiv, gesetzt im Website-Editor.
   Nicht von Hand ändern: Skript erneut laufen lassen.
   ───────────────────────────────────────────────────────────────────── */

/* Der Träger blendet seinen Hintergrund über; das Symbol soll mitgehen. */
svg[data-kw-ih] [data-kwh], svg[data-kw-ia] [data-kwa] {
  transition: fill .18s ease, stroke .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  svg[data-kw-ih] [data-kwh], svg[data-kw-ia] [data-kwa] { transition: none; }
}

/* !important, weil die Normalfarbe als Inline-Style an der Fläche steht — */
/* ohne das käme sie nie gegen ihre eigene Angabe an.                      */

/* Hover */
*:hover > svg[data-kw-ih="1"] [data-kwh*="f"],
*:hover > * > svg[data-kw-ih="2"] [data-kwh*="f"],
*:hover > * > * > svg[data-kw-ih="3"] [data-kwh*="f"],
*:hover > * > * > * > svg[data-kw-ih="4"] [data-kwh*="f"],
*:hover > * > * > * > * > svg[data-kw-ih="5"] [data-kwh*="f"],
*:hover > * > * > * > * > * > svg[data-kw-ih="6"] [data-kwh*="f"],
*:hover > * > * > * > * > * > * > svg[data-kw-ih="7"] [data-kwh*="f"],
*:hover > * > * > * > * > * > * > * > svg[data-kw-ih="8"] [data-kwh*="f"] {
  fill: var(--kwh) !important;
}
*:hover > svg[data-kw-ih="1"] [data-kwh*="s"],
*:hover > * > svg[data-kw-ih="2"] [data-kwh*="s"],
*:hover > * > * > svg[data-kw-ih="3"] [data-kwh*="s"],
*:hover > * > * > * > svg[data-kw-ih="4"] [data-kwh*="s"],
*:hover > * > * > * > * > svg[data-kw-ih="5"] [data-kwh*="s"],
*:hover > * > * > * > * > * > svg[data-kw-ih="6"] [data-kwh*="s"],
*:hover > * > * > * > * > * > * > svg[data-kw-ih="7"] [data-kwh*="s"],
*:hover > * > * > * > * > * > * > * > svg[data-kw-ih="8"] [data-kwh*="s"] {
  stroke: var(--kwh) !important;
}

/* Aktiv — Marken dieser Site: .open, [aria-current="page"], .is-active, .orbit-bubble--active, .is-invalid, .is-open, .active, [aria-selected="true"], .is-a, .is-b, .is-c, .is-d.
   Hier braucht es KEINE Tiefen-Kette: Anders als ":hover", das jeder
   Vorfahr bis body mitträgt, passt eine Zustands-Klasse nur auf das
   Element, das sie wirklich hat. Ein Nachfahren-Selektor genügt —
   das spart rund 12 KB gegenüber der ausgeschriebenen Kette. */
.open svg[data-kw-ia] [data-kwa*="f"],
[aria-current="page"] svg[data-kw-ia] [data-kwa*="f"],
.is-active svg[data-kw-ia] [data-kwa*="f"],
.orbit-bubble--active svg[data-kw-ia] [data-kwa*="f"],
.is-invalid svg[data-kw-ia] [data-kwa*="f"],
.is-open svg[data-kw-ia] [data-kwa*="f"],
.active svg[data-kw-ia] [data-kwa*="f"],
[aria-selected="true"] svg[data-kw-ia] [data-kwa*="f"],
.is-a svg[data-kw-ia] [data-kwa*="f"],
.is-b svg[data-kw-ia] [data-kwa*="f"],
.is-c svg[data-kw-ia] [data-kwa*="f"],
.is-d svg[data-kw-ia] [data-kwa*="f"] {
  fill: var(--kwa) !important;
}
.open svg[data-kw-ia] [data-kwa*="s"],
[aria-current="page"] svg[data-kw-ia] [data-kwa*="s"],
.is-active svg[data-kw-ia] [data-kwa*="s"],
.orbit-bubble--active svg[data-kw-ia] [data-kwa*="s"],
.is-invalid svg[data-kw-ia] [data-kwa*="s"],
.is-open svg[data-kw-ia] [data-kwa*="s"],
.active svg[data-kw-ia] [data-kwa*="s"],
[aria-selected="true"] svg[data-kw-ia] [data-kwa*="s"],
.is-a svg[data-kw-ia] [data-kwa*="s"],
.is-b svg[data-kw-ia] [data-kwa*="s"],
.is-c svg[data-kw-ia] [data-kwa*="s"],
.is-d svg[data-kw-ia] [data-kwa*="s"] {
  stroke: var(--kwa) !important;
}


/* ============================================================
   Footer: Notfallnummer
   Eigener Block unter den Kontaktlinks. Bewusst in der Signalfarbe
   und nicht in der Markenfarbe, damit die Nummer im Notfall sofort
   gefunden wird. Selektoren mit .ft186__col a, weil die Spaltenregel
   sonst Farbe und Schriftgroesse gewinnt.
   ============================================================ */
.sec-v186 .ft186__col a.ft186__notruf {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding: 10px 12px;
  border: 2px solid var(--c-error, #c0392b);
  border-radius: var(--r-sm, 12px);
  background: var(--c-error-bg, #fdf0ee);
  color: #8f2c20;
  transition: background .18s ease, border-color .18s ease;
}
.sec-v186 .ft186__col a.ft186__notruf:hover,
.sec-v186 .ft186__col a.ft186__notruf:focus-visible {
  background: #f8ded9; border-color: #8f2c20; color: #8f2c20;
}
.sec-v186 .ft186__notruf-icon { display: flex; flex: 0 0 auto; }
.sec-v186 .ft186__notruf-body { display: flex; flex-direction: column; line-height: 1.25; }
.sec-v186 .ft186__notruf-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.sec-v186 .ft186__notruf-nr { font-size: 16px; font-weight: 700; }

/* ============================================================
   features-22 (.sec-v16): Icon-Groesse deckeln
   Die Kachel-Icons sassen bisher nur so gross in ihrer 42er-Box, wie
   die width/height im SVG selbst angaben. Wird ein Icon ueber den
   KW-Editor getauscht, kommen die Masse der hochgeladenen Datei mit
   (z. B. 512x512) oder fehlen ganz, und das Icon sprengt die Kachel.
   Diese Regel deckelt die Groesse nach oben, ohne die regulaeren
   20er- und 22er-Icons anzutasten.
   ============================================================ */
.ws-block .sec-v16 .bento__icon > svg { max-width: 22px; max-height: 22px; flex: 0 0 auto; }

/* ============================================================
   features-22: Icon-Kaestchen nicht stauchen
   Feste Zeilenhoehe + flex-Spalte = das einzige Element mit fester
   Hoehe gibt nach. Icon-Box festnageln, Zeilen mitwachsen lassen.
   ============================================================ */

/* kw-kontrast v1 */
/* Farbkontraste auf WCAG AA gebracht (4,5:1 für normalen Text).
   Erzeugt von barrierefreiheit.py. Markenfarben bleiben unangetastet —
   korrigiert wird die Schriftfarbe auf der jeweiligen Fläche. */
.nav__logo-sub{ color:var(--c-neutral-dark) !important; }   /* 5,19:1 statt 1,47:1 */
/* /kw-kontrast */