/* ==========================================================================
   basis.css — zentrales Stylesheet für alle Seiten
   MedArbeiter Website-1

   Aufbau:
     1. Tokens (:root)          — einzige Stelle für Farben, Schriften, Maße
     2. Reset & Grundlagen
     3. Layout (Sektion, Wrapper, Raster)
     4. Typografie
     5. Buttons und Links
     6. Bausteine (Karte, Kachel, Kennzahl, Schritt, Zitat)
     7. Medien (Bild, Video, Shorts, Karte)
     8. Einbettungen (Consent-Gate, Formular)
     9. Interaktion ohne JS (details/summary)
    10. Platzhalter
    11. Header und Footer
    12. Hilfsklassen
    13. Zugänglichkeit und Druck

   WICHTIG — warum diese Datei so gebaut ist:
   Jede Sektion liegt in einem eigenen HTML-Widget in Elementor. Elementor
   umschließt jedes Widget mit eigenen div-Ebenen. Deshalb funktionieren
   Geschwister-Selektoren ÜBER Sektionsgrenzen hinweg nicht
   (kein ".w-sec + .w-sec", kein ":first-of-type" für Sektionen).
   Jede Sektion bringt ihre Abstände und ihren Hintergrund selbst mit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Diese Werte kommen aus dem Design-System des Kunden und sind die EINZIGE
   Stelle, an der Farben und Schriften definiert werden. Nirgends im Markup
   stehen Hex-Werte oder Schriftnamen.
   -------------------------------------------------------------------------- */
:root {
  /* Marke — Werte aus design-system.md Abschnitt 2.
     Gelieferte Rollen unveraendert eintragen, fehlende ableiten
     (Regeln in references/designsystem.md). Die Werte hier sind
     Platzhalter und werden bei jedem Kunden ersetzt. */
  /* Herzhalt — design-system.md Abschnitt 2 / Styleguide 07/2026.
     brand, accent, ink, bg geliefert (farbe_ci_treu: ja), Rest abgeleitet. */
  --c-brand:        #5F1419;   /* geliefert: Dunkelrot */
  --c-brand-dark:   #470F13;   /* abgeleitet: brand -25 % Helligkeit */
  --c-brand-soft:   #EFE8E8;   /* abgeleitet: brand 10 % ueber Weiss */
  --c-accent:       #2D645A;   /* geliefert: Gruen (Pflegedienst) — je Seite >= 3x */
  --c-accent-soft:  #E6ECEB;   /* abgeleitet: accent 12 % ueber Weiss */
  /* Herzhalt: Der Akzent ist dunkel. Schrift auf Akzentflaechen ist deshalb
     Weiss, und auf dunklen Markenflaechen traegt eine aufgehellte Fassung. */
  --c-on-accent:    #FFFFFF;   /* 6,8:1 auf accent */
  --c-accent-hell:  #A8D5CB;   /* 8,2:1 auf brand, 9,7:1 auf brand-dark */

  /* Neutrale */
  /* --c-ink traegt die Ueberschriften, --c-ink-soft den gesamten Fliesstext.
     Deshalb wird --c-ink-soft gegen JEDE Flaechenfarbe geprueft, nicht nur
     gegen Weiss: ein Wert, der auf Weiss 4,6:1 erreicht, faellt auf einer
     getoenten Flaeche schnell unter 4,5:1. Im Zweifel abdunkeln. */
  --c-ink:          #2D2D2D;   /* geliefert: Dunkelgrau, 13,8:1 */
  --c-ink-soft:     #5E5E5E;   /* abgeleitet: >= 5,37:1 auf allen Flaechen */
  --c-line:         #E6E6E6;   /* abgeleitet: ink 12 % ueber Weiss */
  --c-bg:           #FFFFFF;   /* geliefert: reines Weiss laut Styleguide */
  --c-bg-alt:       #EDEAEA;   /* abgeleitet: brand-soft entsaettigt */
  --c-on-brand:     #FFFFFF;   /* 13,1:1 auf brand */

  /* Schrift — Abschnitt 3. Immer mit vollstaendiger Systemschrift-Kette
     dahinter, nie eine Google-Fonts-Einbindung. */
  /* Hausschriften laut Styleguide: Como Bold (Ueberschriften), Avenir
     (Unterueberschriften Black, Fliesstext Medium). Lizenzschriften, beim
     Livegang lokal hinterlegen. Bis dahin greift die Systemkette. */
  --f-text:    "Avenir", "Avenir Next", "Nunito Sans", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --f-display: "Como", "Avenir Next", "Avenir", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --f-accent:  var(--f-display);

  /* Typo-Skala — bewusst gross, Vorgabe des Bausystems. */
  --t-h1:      clamp(2.25rem, 1.30rem + 3.4vw, 3.75rem);
  --t-h2:      clamp(1.75rem, 1.15rem + 2.1vw, 2.75rem);
  --t-h3:      clamp(1.20rem, 1.02rem + 0.7vw, 1.50rem);
  --t-lead:    clamp(1.06rem, 0.98rem + 0.4vw, 1.25rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --lh-tight:  1.14;
  --lh-head:   1.22;
  --lh-body:   1.62;

  /* Masse */
  --w-wrap:    1220px;
  --w-text:    68ch;
  /* Sektionsabstand. Bewusst knapp: bei 5,25rem oben UND unten standen
     zwischen zwei Abschnitten bis zu 10,5rem Leerraum, was als "sehr viele
     Freiflaechen" zurueckkam. Die Luft gehoert INNERHALB der Bausteine
     (Kartenpolster, Abstand Lead zu Text), nicht zwischen die Abschnitte. */
  --sp-sec:    clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem);
  --sp-gap:    clamp(1.25rem, 0.95rem + 1.1vw, 2rem);
  --sp-pad:    clamp(1.25rem, 0.85rem + 1.6vw, 2.5rem);
  --r-sm:      8px;
  --r-md:      14px;
  --r-lg:      22px;
  --shadow:    0 2px 4px rgba(0, 0, 0, .05), 0 12px 28px rgba(95, 20, 25, .09);
  --focus:     3px solid var(--c-accent);
}

/* --------------------------------------------------------------------------
   2. Reset & Grundlagen
   Alles unter .w-root, damit Theme- und Elementor-Styles nicht kollidieren.
   -------------------------------------------------------------------------- */
.w-root, .w-root *, .w-root *::before, .w-root *::after { box-sizing: border-box; }

.w-root {
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-bg);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

.w-root p,
.w-root h1, .w-root h2, .w-root h3, .w-root h4,
.w-root ul, .w-root ol, .w-root figure, .w-root blockquote { margin: 0; }

.w-root ul, .w-root ol { padding: 0; list-style: none; }

.w-root img,
.w-root video,
.w-root iframe { display: block; max-width: 100%; }

.w-root img { height: auto; }

/* Kein horizontaler Overflow — häufiger Mobile-Fehler. */
.w-root { overflow-x: clip; }
.w-root * { min-width: 0; }
/* Fliesstext darf hart brechen, Ueberschriften nicht: dort zerreisst
   break-word lange Woerter mitten im Wort ("Pflegefach-kraefte"). */
.w-root p, .w-root li { overflow-wrap: break-word; }
.w-root h1, .w-root h2, .w-root h3, .w-root h4 { overflow-wrap: normal; hyphens: auto; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

/* Sektion: bringt Hintergrund und vertikale Abstände selbst mit.
   Der umgebende Elementor-Container muss auf volle Breite und
   Innenabstand 0 stehen, sonst greifen die Flächenfarben nicht bis zum Rand. */
.w-sec {
  padding-block: var(--sp-sec);
  background: var(--c-bg);
  color: var(--c-ink);
}

/* Farbrhythmus einer Seite.
   Regel: der Abschnitt direkt vor dem Footer hat nie die Footer-Farbe. */
.w-sec--alt   { background: var(--c-bg-alt); }
.w-sec--soft  { background: var(--c-brand-soft); }
.w-sec--brand { background: var(--c-brand); color: var(--c-on-brand); }
.w-sec--dark  { background: var(--c-brand-dark); color: var(--c-on-brand); }

.w-sec--brand .w-eyebrow,
.w-sec--dark  .w-eyebrow,
.w-sec--brand .w-lead,
.w-sec--dark  .w-lead,
.w-sec--brand .w-text,
.w-sec--dark  .w-text { color: rgba(255, 255, 255, .88); }

.w-sec--brand a:not(.w-btn),
.w-sec--dark  a:not(.w-btn) { color: var(--c-on-brand); }

/* Sektion ohne oberen oder unteren Abstand, wenn zwei gleichfarbige
   Sektionen direkt aufeinanderfolgen. */
.w-sec--tight-top    { padding-top: 0; }
.w-sec--tight-bottom { padding-bottom: 0; }
.w-sec--flush        { padding-block: 0; }

.w-wrap {
  width: 100%;
  max-width: var(--w-wrap);
  margin-inline: auto;
  padding-inline: var(--sp-pad);
}

/* Sektionskopf: Überschrift plus optionaler Einleitungstext.
   Die Eyebrow ist optional und trägt Information (Ort, Zeitraum, Kategorie).
   Sie ist kein Pflichtlabel über jeder Überschrift — das wirkt schablonenhaft. */
.w-head { max-width: var(--w-text); margin-bottom: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); }
.w-head--center { margin-inline: auto; text-align: center; }
.w-head--wide { max-width: none; }

/* Raster. Spaltenzahl über --cols, Mindestbreite über --min.
   auto-fit sorgt dafür, dass Tablet und Mobile ohne eigene Regeln funktionieren. */
.w-grid {
  display: grid;
  gap: var(--sp-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr));
}
.w-grid--2 { --min: 380px; }
.w-grid--3 { --min: 290px; }
.w-grid--4 { --min: 215px; }

/* Feste Spaltenzahl, wenn auto-fit nicht passt (z.B. exakt 3 Teamkarten). */
.w-grid--fixed { grid-template-columns: repeat(var(--cols, 3), 1fr); }
@media (max-width: 900px) { .w-grid--fixed { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .w-grid--fixed { grid-template-columns: 1fr; } }

/* Zweispalter Text/Bild. --split steuert das Verhältnis. */
.w-split {
  display: grid;
  gap: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem);
  align-items: center;
  grid-template-columns: var(--split, 1fr 1fr);
}
@media (max-width: 860px) {
  .w-split { grid-template-columns: 1fr; }
  .w-split--flip > :first-child { order: 2; }
}
.w-split--top { align-items: start; }

/* --------------------------------------------------------------------------
   4. Typografie
   -------------------------------------------------------------------------- */
.w-h1, .w-h2, .w-h3 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -.015em;
  color: inherit;
  text-wrap: balance;
}
.w-h1 { font-size: var(--t-h1); line-height: var(--lh-tight); }
.w-h2 { font-size: var(--t-h2); line-height: var(--lh-head); }
.w-h3 { font-size: var(--t-h3); line-height: 1.3; }

/* Akzentschrift: ausschließlich für einzelne Wörter innerhalb einer
   Überschrift. Nie für Fließtext, nie für eine ganze Überschrift. */
.w-accent-word { font-family: var(--f-accent); font-weight: 400; }

.w-eyebrow {
  display: block;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--c-ink-soft);
  margin-bottom: .55rem;
}

.w-lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--c-ink-soft);
  max-width: var(--w-text);
  margin-top: 1rem;
}

.w-text { max-width: var(--w-text); }
.w-text + .w-text { margin-top: .9rem; }

.w-list { display: grid; gap: .7rem; margin-top: 1.1rem; }
.w-list li { position: relative; padding-left: 1.85rem; }
.w-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: .7rem; height: .7rem;
  border-radius: 3px;
  background: var(--c-accent);
}
/* Variante mit Bildmarke statt Punkt — Icon-Größe immer identisch. */
.w-list--icon li { padding-left: 2.25rem; }
.w-list--icon li::before { display: none; }
.w-list--icon .w-list-icon {
  position: absolute; left: 0; top: .18em;
  width: 1.4rem; height: 1.4rem; object-fit: contain;
}

/* --------------------------------------------------------------------------
   5. Buttons und Links
   Regel aus der Revisionshistorie: jeder CTA ist ein Button mit sichtbarer
   Kontur oder Füllung. Reine Textlinks als CTA sind zu schlecht erkennbar.
   -------------------------------------------------------------------------- */
.w-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.7rem;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.w-btn--primary {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-on-brand);
}
.w-btn--primary:hover { background: var(--c-brand-dark); border-color: var(--c-brand-dark); }

.w-btn--secondary {
  background: transparent;
  border-color: var(--c-brand);
  color: var(--c-brand);
}
.w-btn--secondary:hover { background: var(--c-brand); color: var(--c-on-brand); }

.w-btn--accent {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}
.w-btn--accent:hover { filter: brightness(.93); }

/* Auf Markenflächen invertieren, damit der Rand sichtbar bleibt. */
.w-sec--brand .w-btn--secondary,
.w-sec--dark  .w-btn--secondary { border-color: var(--c-on-brand); color: var(--c-on-brand); }
.w-sec--brand .w-btn--secondary:hover,
.w-sec--dark  .w-btn--secondary:hover { background: var(--c-on-brand); color: var(--c-brand); }

.w-btns { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.6rem; }

/* Textlink innerhalb von Fließtext — kein CTA. */
.w-link { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }

/* Kontaktzeile (Telefon, E-Mail) */
.w-contact { display: grid; gap: .2rem; }
.w-contact a { color: inherit; text-decoration: none; font-weight: 600; }
.w-contact a:hover { text-decoration: underline; }
.w-contact span { font-size: var(--t-small); color: var(--c-ink-soft); }

/* --------------------------------------------------------------------------
   6. Bausteine
   -------------------------------------------------------------------------- */

/* Karte: Grundform für Leistungen, Vorteile, Team, Stellen. */
.w-card {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: clamp(1.25rem, 1rem + .9vw, 1.9rem);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.w-sec--alt .w-card,
.w-sec--soft .w-card { background: var(--c-bg); }
.w-sec--brand .w-card,
.w-sec--dark  .w-card { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }

/* Icons bleiben dezent: etwa 80 % der Höhe der zugehörigen Überschrift.
   Dekorative Icons dürfen die Karte nicht dominieren. */
.w-card__icon {
  width: var(--icon, 2rem);
  height: var(--icon, 2rem);
  object-fit: contain;
  stroke-width: 1.5;
}
.w-card__icon--l { --icon: 2.5rem; }
.w-card__text { color: var(--c-ink-soft); }
.w-sec--brand .w-card__text,
.w-sec--dark  .w-card__text { color: rgba(255,255,255,.85); }
.w-card__foot { margin-top: auto; padding-top: .9rem; }

/* Karte mit Bildkopf. Das Bild sitzt in einem Rahmen mit festem
   Seitenverhältnis, damit der spätere Bildtausch das Layout nicht verschiebt. */
.w-card--media { padding: 0; overflow: hidden; }
.w-card--media .w-card__body { padding: clamp(1.35rem, 1rem + 1.1vw, 2rem); display: grid; gap: .7rem; }

/* Kennzahl / Trust-Band */
.w-stat { display: grid; gap: .3rem; }
.w-stat__value {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.8rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--c-brand);
}
.w-sec--brand .w-stat__value,
.w-sec--dark  .w-stat__value { color: var(--c-accent-hell); }
.w-stat__label { font-size: var(--t-small); color: var(--c-ink-soft); }
.w-sec--brand .w-stat__label,
.w-sec--dark  .w-stat__label { color: rgba(255,255,255,.85); }

/* Schritt — nur verwenden, wenn der Inhalt wirklich eine Abfolge ist. */
.w-step { display: grid; gap: .6rem; }
.w-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.15rem;
}

/* Zitat als Text — nur zulässig, wenn ausdrücklich keine Videos vorliegen.
   Standard für Testimonials ist .w-short (9:16 Video). */
.w-quote { display: grid; gap: 1rem; }
.w-quote__text { font-size: var(--t-lead); line-height: 1.5; }
.w-quote__by { display: flex; align-items: center; gap: .8rem; }
.w-quote__by img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; }
.w-quote__name { font-weight: 600; }
.w-quote__role { font-size: var(--t-small); color: var(--c-ink-soft); }

/* Rezension — Karte für Google-Bewertungen und Angehörigenstimmen.
   Inhalte werden NIE erfunden: entweder echte Bewertungen aus dem
   Google-Unternehmensprofil oder ein sichtbar markierter Platzhalter. */
.w-review {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: clamp(1.35rem, 1rem + 1.1vw, 1.9rem);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.w-review__stars { display: flex; gap: .15rem; color: var(--c-accent); }
.w-review__stars svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.w-review__text { flex: 1; }
.w-review__by { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.w-review__avatar {
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--c-brand-soft);
  color: var(--c-brand);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  flex: 0 0 auto;
}
.w-review__name { font-weight: 600; }
.w-review__meta { font-size: var(--t-small); color: var(--c-ink-soft); }

/* Gesamtbewertung, z. B. über dem Kachelraster */
.w-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  margin-bottom: 1.5rem;
}
.w-rating__value {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--c-brand);
}
.w-rating__count { font-size: var(--t-small); color: var(--c-ink-soft); }

/* Ortsliste / Einzugsgebiet */
.w-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.w-chip {
  padding: .5rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: var(--t-small);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. Medien
   Jeder Bildrahmen hat ein festes Seitenverhältnis. Der Platzhalter beim Bau
   und das echte Kundenfoto beim Tausch erfüllen dieselbe Vorgabe, deshalb
   verschiebt der Bildtausch das Layout nicht.
   -------------------------------------------------------------------------- */
.w-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-bg-alt);
  aspect-ratio: var(--ar, 3 / 2);
}
.w-media > img,
.w-media > video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
/* Standardsatz — deckt sich mit den vorhandenen Platzhalterbildern,
   damit beim Bildtausch nichts beschnitten werden muss. */
.w-media--169  { --ar: 16 / 9; }   /* quer, Hero, Teaser, Galerie */
.w-media--45   { --ar: 4 / 5; }    /* hoch, Portraets, Karten */
.w-media--11   { --ar: 1 / 1; }    /* quadratisch */
.w-media--short { --ar: 9 / 16; }  /* Shorts-Poster */

/* Zusatzformate — nur verwenden, wenn eigenes Bildmaterial in genau diesem
   Verhaeltnis vorliegt. Der Platzhalterbestand deckt sie NICHT ab. */
.w-media--43   { --ar: 4 / 3; }
.w-media--32   { --ar: 3 / 2; }
.w-media--portrait { --ar: 3 / 4; }
.w-media--hoch { --ar: 2 / 3; }
.w-media--frei { aspect-ratio: auto; }
.w-media--frei > img { height: auto; object-fit: contain; }

/* Editorial-Überlappung — ein Element ragt in die vorige Sektion hinein.
   Sparsam einsetzen, höchstens einmal pro Seite. Auf Mobil immer aus,
   sonst entsteht Überdeckung statt Schichtung. */
.w-overlap { margin-top: clamp(-5rem, -3rem - 3vw, -2.5rem); position: relative; z-index: 2; }
@media (max-width: 860px) { .w-overlap { margin-top: 0; } }

/* Bildunterschrift */
.w-figure { display: grid; gap: .55rem; }
.w-figure figcaption { font-size: var(--t-small); color: var(--c-ink-soft); }

/* Bildstrecke */
.w-gallery { display: grid; gap: var(--sp-gap); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

/* Hero
   Drei zugelassene Varianten. Text steht nie ungeschützt auf einem Foto,
   und das Foto wird nie eingefärbt oder mit Verlauf überzogen. */
.w-hero { position: relative; }

/* Der Hero läuft bis an die Fensterkante — dort sind runde Ecken falsch.
   .w-media bringt sie mit, hier werden sie zurückgenommen. */
.w-hero__media { border-radius: 0; }

/* a) Textband — farbige Fläche endet am Text */
.w-hero--band .w-hero__media { --ar: 16 / 9; }
.w-hero--band .w-hero__inner {
  position: absolute; inset: 0;
  display: flex; align-items: center;
}
.w-hero__bands { display: grid; justify-items: start; gap: clamp(.7rem, .4rem + .9vw, 1.15rem); }
.w-hero__band {
  display: inline-block;
  padding: clamp(.6rem, .4rem + .6vw, 1rem) clamp(1rem, .7rem + 1.2vw, 2rem);
  background: var(--c-brand);
  color: var(--c-on-brand);
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.15;
}
.w-hero__band--accent { background: var(--c-accent); color: var(--c-on-accent); }

/* b) Textkarte — transluzente Markenfläche hinter dem Textblock,
      höchstens 55 % der Breite */
.w-hero--card .w-hero__media { --ar: 16 / 9; }
.w-hero--card .w-hero__inner { position: absolute; inset: 0; display: flex; align-items: center; }
.w-hero__card {
  max-width: min(55%, 640px);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--r-lg);
  /* Transparenz als rgba direkt in der Farbe — nicht über eine
     separate Opazitätsangabe, die in Elementor nicht ausgegeben wird. */
  background: color-mix(in srgb, var(--c-brand) 88%, transparent);
  color: var(--c-on-brand);
}
.w-hero__card .w-h1,
.w-hero__card .w-lead,
.w-hero__card .w-eyebrow { color: var(--c-on-brand); }
/* Mobile: kein Text auf dem Bild.
   Das Bild bleibt 16:9 und wird gar nicht beschnitten — damit koennen dort
   keine Koepfe oder Haende abgeschnitten werden. Der Text sitzt darunter auf
   der Markenflaeche und ist immer lesbar. */
@media (max-width: 860px) {
  .w-hero--band .w-hero__inner,
  .w-hero--card .w-hero__inner {
    position: static;
    background: var(--c-brand);
    color: var(--c-on-brand);
    padding-block: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  }
  .w-hero--card .w-hero__card {
    max-width: none;
    padding: 0;
    background: none;
    border-radius: 0;
  }
  .w-hero--band .w-hero__band {
    background: none;
    padding: 0;
  }
  .w-hero--band .w-hero__band--accent { color: var(--c-accent-hell); }
  .w-hero__bands { gap: .35rem; }
}

/* c) Split — Bild und Text nebeneinander, kein Text auf Bild */
.w-hero--split { padding-block: var(--sp-sec); }
.w-hero--split .w-hero__media { --ar: 16 / 9; }

/* Fallback für Browser ohne color-mix */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .w-hero__card { background: var(--c-brand); }
}

/* Auf sehr kleinen Höhen darf der Hero nicht überlaufen. */
.w-hero__inner .w-wrap { width: 100%; }

/* --------------------------------------------------------------------------
   8. Einbettungen
   Grundregel: kein Element wird im unsichtbaren Zustand gebaut, dessen
   Sichtbarkeit von fremdem JavaScript abhängt. Alles unten funktioniert
   auch dann, wenn kein Skript lädt.
   -------------------------------------------------------------------------- */

/* Rahmen mit festem Seitenverhältnis für Video */
.w-embed {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-brand-dark);
  aspect-ratio: var(--ar, 16 / 9);
}
.w-embed--short { --ar: 9 / 16; }
.w-embed > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Video-Vorschau: statisches, lokal gehostetes Standbild plus Play-Fläche.
   Das Element ist ein echter Link auf das Video. Lädt das Skript, wird der
   Klick abgefangen und der Player eingesetzt. Lädt es nicht, öffnet der Link
   das Video — nichts geht verloren. */
.w-video { position: relative; display: block; text-decoration: none; }
.w-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.w-video__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 42, 64, .28);
  transition: background-color .15s ease;
}
.w-video:hover .w-video__play { background: rgba(20, 42, 64, .40); }
.w-video__play::after {
  content: "";
  width: clamp(3.5rem, 2.5rem + 3vw, 5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-on-brand);
  clip-path: circle(50%);
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
}
.w-video__triangle {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-42%, -50%);
  width: 0; height: 0;
  border-style: solid;
  border-width: .75rem 0 .75rem 1.25rem;
  border-color: transparent transparent transparent var(--c-brand);
  pointer-events: none;
}
/* Videoplatzhalter — farbige Fläche in Markenfarbe, KEIN Bildplatzhalter.
   Solange kein Video vorliegt, wird hier nichts Fotografisches gezeigt: ein
   Bild an dieser Stelle sieht aus wie fertiger Inhalt und wird beim Tausch
   übersehen. Die Fläche macht sofort sichtbar, dass hier noch etwas fehlt,
   und sie nimmt schon die Markenfarbe an, sodass die Sektion im Entwurf
   richtig wirkt.
   Gilt für die Videosektion (16:9) und für Testimonial-Shorts (9:16). */
.w-vph {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: 1.25rem;
  text-align: center;
  background: var(--c-brand);
  color: var(--c-on-brand);
}
/* Bildplatzhalter als Farbfläche — Rückfalllösung.
   Nur verwenden, wenn die Platzhalterbilder aus assets/platzhalter/ in der
   Bauumgebung nicht verfügbar sind. Dann bekommt jeder Bildslot statt eines
   Fotos eine Fläche in Markenfarbe mit Motivangabe, im korrekten
   Seitenverhältnis. Das Layout stimmt damit bereits, und beim Bildtausch
   wird nur die Fläche gegen das Foto getauscht. */
.w-iph {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.25rem;
  text-align: center;
  background: var(--c-brand-soft);
  color: var(--c-brand);
}
.w-iph--brand { background: var(--c-brand); color: var(--c-on-brand); }
.w-iph__motiv { font-weight: 700; line-height: 1.3; }
.w-iph__spec { font-size: var(--t-small); opacity: .8; }

/* Auf Sektionen, die selbst schon in Markenfarbe liegen, die hellere Tönung
   nehmen, damit die Fläche sich abhebt. */
.w-vph--soft { background: var(--c-brand-soft); color: var(--c-brand); }
.w-vph--accent { background: var(--c-accent); color: var(--c-on-accent); }

.w-vph__glyph {
  width: clamp(3rem, 2.2rem + 2.4vw, 4.25rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid currentColor;
  position: relative;
  flex: 0 0 auto;
}
.w-vph__glyph::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-38%, -50%);
  width: 0; height: 0;
  border-style: solid;
  border-width: .6rem 0 .6rem 1rem;
  border-color: transparent transparent transparent currentColor;
}
.w-vph__label { font-weight: 700; line-height: 1.25; }
.w-vph__note { font-size: var(--t-small); opacity: .82; max-width: 30ch; }

.w-video__label {
  position: absolute; left: 1rem; bottom: 1rem;
  padding: .4rem .8rem;
  border-radius: var(--r-sm);
  background: rgba(20, 42, 64, .78);
  color: #fff;
  font-size: var(--t-small);
  font-weight: 600;
}

/* Einbettungen laden direkt. Die Einwilligung setzt spaeter Complianz in
   WordPress — ein eigenes Freigabe-Feld im Markup waere doppelt und wuerde
   dort zweimal fragen. Was bleibt, ist die feste Mindesthoehe, damit beim
   Laden nichts springt. */

/* Formularkarte.
   Feste Mindesthöhe, weil der GHL-Embed mit height:100% kommt und in einem
   Container mit automatischer Höhe sonst auf null zusammenfällt.
   --min-h wird pro Formular aus dem data-height des Embeds gesetzt. */
.w-form {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  padding: clamp(1rem, .7rem + 1vw, 1.75rem);
  min-height: var(--min-h, 640px);
}
.w-form iframe {
  width: 100%;
  min-height: var(--min-h, 640px);
  height: var(--min-h, 640px);
  border: 0;
  border-radius: var(--r-sm);
  display: block;
}
/* Auf keiner Sektion mit Fremdeinbettung läuft eine Einblendanimation. */
.w-form, .w-form *, .w-embed, .w-embed * { animation: none !important; }

/* Karte (Google Maps) — auf dem .w-embed, das embeds.js nach der Freigabe
   erzeugt. Die Mindesthoehe kommt aus data-height des Embeds. */
.w-embed--map { --ar: 16 / 10; }
@media (max-width: 700px) { .w-embed--map { --ar: 4 / 3; } }

/* --------------------------------------------------------------------------
   9. Interaktion ohne JavaScript
   FAQ und Stellenliste laufen über details/summary. Nativ, tastaturbedienbar,
   funktioniert auch ohne Skript.
   -------------------------------------------------------------------------- */
.w-acc { display: grid; gap: .7rem; }
.w-acc__item {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  overflow: hidden;
}
.w-acc__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1rem, .8rem + .8vw, 1.6rem);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.w-acc__item > summary::-webkit-details-marker { display: none; }
.w-acc__item > summary::after {
  content: "";
  flex: 0 0 auto;
  width: .7rem; height: .7rem;
  border-right: 2px solid var(--c-brand);
  border-bottom: 2px solid var(--c-brand);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.w-acc__item[open] > summary::after { transform: rotate(-135deg); }
.w-acc__body { padding: 0 clamp(1rem, .8rem + .8vw, 1.6rem) 1.35rem; color: var(--c-ink-soft); }

/* Stellenangebot */
.w-job__meta { font-size: var(--t-small); color: var(--c-ink-soft); font-weight: 400; }

/* Es gibt keine sichtbaren Platzhaltermarkierungen. Was noch fehlt, steht
   im Bauprotokoll und als HTML-Kommentar an Ort und Stelle — nicht als
   gestrichelte Kontur auf der Seite. Die Seite soll fertig aussehen. */
/* --------------------------------------------------------------------------
   11. Header und Footer
   -------------------------------------------------------------------------- */
.w-head-bar {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
  position: sticky; top: 0; z-index: 40;
}
.w-head-bar__inner {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 74px;
  padding-block: .6rem;
}
.w-head-bar__logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.w-head-bar__logo img { height: 48px; width: auto; }
/* Schwebender Header — Variante für die Startseite.
   Der Header sitzt transparent über dem Hero statt darüber zu kleben.
   Bewusst NICHT sticky: Ein transparenter Header, der beim Scrollen über
   hellen Inhalt wandert, braucht ein Skript, das ihn umfärbt — und nichts
   auf dieser Seite darf von JavaScript abhängen. Wer die Navigation
   dauerhaft sichtbar braucht, nimmt die Standardvariante.
   Voraussetzung: Der Hero ist dunkel genug oder hat ein Bild, auf dem
   helle Schrift trägt. Sonst nicht verwenden. */
.w-head-bar--float {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: transparent;
  border-bottom: none;
  color: var(--c-on-brand);
}
.w-head-bar--float .w-nav a,
.w-head-bar--float .w-head-bar__logo { color: var(--c-on-brand); }
.w-head-bar--float .w-nav a:hover { color: var(--c-on-brand); text-decoration: underline; }
.w-head-bar--float .w-btn--secondary { border-color: var(--c-on-brand); color: var(--c-on-brand); }
.w-head-bar--float .w-btn--secondary:hover { background: var(--c-on-brand); color: var(--c-brand); }
.w-head-bar--float .w-navmob > summary { border-color: rgba(255,255,255,.55); }
.w-head-bar--float .w-navmob__bars,
.w-head-bar--float .w-navmob__bars::before,
.w-head-bar--float .w-navmob__bars::after { background: var(--c-on-brand); }
/* Der Hero muss dann oben Platz für den Header lassen. */
.w-hero--under-float .w-hero__inner { padding-top: 74px; }

.w-nav { display: flex; gap: 1.5rem; margin-left: auto; }
.w-nav a { text-decoration: none; color: inherit; font-weight: 600; }
.w-nav a:hover { color: var(--c-brand); }
.w-nav a[aria-current="page"] { color: var(--c-brand); text-decoration: underline; text-underline-offset: 6px; }
.w-head-bar__actions { display: flex; align-items: center; gap: .75rem; }

/* Mobile-Navigation ohne JavaScript: details/summary. */
.w-navmob { margin-left: auto; display: none; }
.w-navmob > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
}
.w-navmob > summary::-webkit-details-marker { display: none; }
.w-navmob__bars, .w-navmob__bars::before, .w-navmob__bars::after {
  display: block; width: 22px; height: 2px; background: var(--c-ink); content: "";
}
.w-navmob__bars { position: relative; }
.w-navmob__bars::before { position: absolute; top: -7px; }
.w-navmob__bars::after  { position: absolute; top: 7px; }
.w-navmob__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
  padding: 1rem var(--sp-pad) 1.5rem;
  display: grid; gap: .9rem;
  box-shadow: var(--shadow);
}
.w-navmob__panel a { text-decoration: none; color: inherit; font-weight: 600; }

@media (max-width: 980px) {
  .w-nav, .w-head-bar__actions { display: none; }
  .w-navmob { display: block; }
  .w-head-bar { position: relative; }
}

.w-foot { background: var(--c-brand-dark); color: var(--c-on-brand); padding-block: clamp(2.5rem, 1.8rem + 2.6vw, 4rem); }
.w-foot a { color: rgba(255,255,255,.9); text-decoration: none; }
.w-foot a:hover { text-decoration: underline; }
.w-foot__grid { display: grid; gap: var(--sp-gap); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.w-foot__title { font-weight: 700; margin-bottom: .8rem; }
.w-foot__links { display: grid; gap: .5rem; }
.w-foot__bottom {
  margin-top: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex; flex-wrap: wrap; gap: 1rem 1.6rem;
  align-items: center;
  font-size: var(--t-small);
  color: rgba(255,255,255,.8);
}
.w-foot__legal { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-left: auto; }
.w-foot__social { display: flex; gap: .6rem; }
.w-foot__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--r-sm);
}
.w-foot__social img, .w-foot__social svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   12. Hilfsklassen
   -------------------------------------------------------------------------- */
.w-mt-0 { margin-top: 0 !important; }
.w-mt-1 { margin-top: .75rem; }
.w-mt-2 { margin-top: 1.5rem; }
.w-mt-3 { margin-top: 2.25rem; }
.w-center { text-align: center; }
.w-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   13. Zugänglichkeit und Druck
   -------------------------------------------------------------------------- */
.w-root :where(a, button, summary, [tabindex]):focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.w-skip {
  position: absolute; left: -9999px;
  background: var(--c-brand); color: var(--c-on-brand);
  padding: .8rem 1.2rem; z-index: 100;
}
.w-skip:focus { left: 1rem; top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .w-root *, .w-root *::before, .w-root *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .w-head-bar, .w-navmob, .w-video__play { display: none !important; }
  .w-sec { padding-block: 1.5rem; }
}

/* ==========================================================================
   14. Bausteine aus der Praxis
   Ergänzungen aus den Revisionen vom 05.09.2026. Bewusst am Ende und in einem
   eigenen Block, damit sie beim nächsten Skill-Update sichtbar bleiben.
   ========================================================================== */

/* --- Kein weißer Rand um die Seite --- */
html, body { margin: 0; padding: 0; }
html { background: var(--c-bg); }

/* --------------------------------------------------------------------------
   Bereichsfarben — optional, standardmäßig aus
   --------------------------------------------------------------------------
   Jede Seite kann eine eigene Nebenfarbe tragen. Ohne Konfiguration trägt
   jede Seite Gold als Bereichsfarbe, also die Akzentfarbe der Marke — die
   Voreinstellung unten. Nichts weiter zu tun.

   Bringt ein Kunde weitere Logofarben mit und soll jede Seitengruppe eine
   eigene bekommen, definierst du je Farbe vier Werte und eine Klasse, die
   am <body> oder am Wurzel-<div> der Seite steht. Vier Werte, weil einer
   nicht reicht: Die Fläche ist meist zu hell, um darauf zu schreiben, und
   als Buttonfläche wirkt ein blasser Ton wie eine deaktivierte Schaltfläche.

     --c-bereich       die Fläche (Hero-Band, Icon-Fläche, Chip)
     --c-bereich-on    Schrift auf dieser Fläche
     --c-bereich-soft  die Tönung für Sektionsflächen
     --c-bereich-text  abgedunkelte Fassung für Schrift auf hellem Grund
     --c-bereich-btn   kräftigerer Ton für Buttonflächen
     --c-cta           Fläche des CTA-Bands vor dem Footer

   Jeder Textwert muss auf seiner Fläche mindestens 4,5:1 erreichen. Prüfe
   das je Paar, nicht nur gegen Weiß.

   Muster:

     :root { --c-gruen: #66A683; --c-gruen-soft: #EDF5F0;
             --c-gruen-text: #426B55; --c-gruen-btn: #47805F; }
     .w-bereich--gruen {
       --c-bereich: var(--c-gruen);       --c-bereich-on: #10251A;
       --c-bereich-soft: var(--c-gruen-soft);
       --c-bereich-text: var(--c-gruen-text);
       --c-bereich-btn: var(--c-gruen-btn); --c-bereich-btn-on: #FFFFFF;
       --c-cta: var(--c-gruen-btn);
     }

   Alle Bausteine unten lesen ausschließlich die --c-bereich-Werte. Wer eine
   Bereichsfarbe einführt, muss deshalb keinen einzigen Baustein anfassen. */
:root {
  /* Voreinstellung: Gold als Fläche, Braun als Schrift auf hellem Grund.
     Gold schreibt auf Weiß nicht lesbar, deshalb trägt dort die Markenfarbe. */
  /* Herzhalt: Gruen als Flaeche (Akzentband, Schrittnummer, Panelkante),
     Dunkelrot als Schrift und Icon auf hellem Grund, rosa Toenung als Flaeche.
     Die Seite Pflegedienst schaltet ueber .w-bereich--pflege auf Gruen um. */
  --c-bereich:        var(--c-accent);
  --c-bereich-on:     var(--c-on-accent);
  --c-bereich-soft:   var(--c-brand-soft);
  --c-bereich-text:   var(--c-brand);
  --c-bereich-btn:    var(--c-accent);
  --c-bereich-btn-on: var(--c-on-accent);
  /* Fläche des CTA-Bands. Bleibt auf Goldseiten braun, weil Weiß auf Gold
     nicht lesbar wäre. */
  --c-cta: var(--c-brand);
}

/* Mehr Luft */
:root {
  --sp-sec: clamp(4.25rem, 2.8rem + 5.4vw, 7rem);
  --sp-gap: clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem);
}

/* --- Fließtext grau, Überschriften schwarz --- */
.w-root p, .w-root li, .w-root dd,
.w-root .w-text, .w-root .w-acc__body { color: var(--c-ink-soft); }
.w-root h1, .w-root h2, .w-root h3, .w-root h4,
.w-root .w-h1, .w-root .w-h2, .w-root .w-h3 { color: var(--c-ink); }
.w-sec--brand p, .w-sec--brand li, .w-sec--dark p, .w-sec--dark li { color: rgba(255,255,255,.88); }
.w-sec--brand .w-h1, .w-sec--brand .w-h2, .w-sec--brand .w-h3,
.w-sec--dark .w-h1, .w-sec--dark .w-h2, .w-sec--dark .w-h3 { color: var(--c-on-brand); }
/* Der Footer ist eine dunkle Fläche — dort ist alles hell, auch Überschriften. */
.w-foot p, .w-foot li { color: rgba(255,255,255,.85); }
.w-foot .w-h1, .w-foot .w-h2, .w-foot .w-h3,
.w-foot h1, .w-foot h2, .w-foot h3, .w-foot .w-foot__title { color: var(--c-on-brand); }

/* Buttons behalten ihre eigenen Farben. */
.w-root .w-btn--primary,
.w-root .w-btn--primary:link, .w-root .w-btn--primary:visited { color: var(--c-on-brand); }
.w-root .w-btn--secondary,
.w-root .w-btn--secondary:link, .w-root .w-btn--secondary:visited { color: var(--c-brand); }
.w-root .w-btn--secondary:hover { color: var(--c-on-brand); }
.w-root .w-sec--brand .w-btn--secondary,
.w-root .w-sec--dark .w-btn--secondary { color: var(--c-on-brand); }
.w-root .w-sec--brand .w-btn--secondary:hover,
.w-root .w-sec--dark .w-btn--secondary:hover { color: var(--c-brand); }
/* Der Akzentbutton nimmt einen kräftigeren Ton der Bereichsfarbe — die
   Pastelltöne selbst würden auf Weiß wie eine inaktive Schaltfläche wirken. */
.w-btn--accent {
  background: var(--c-bereich-btn);
  border-color: var(--c-bereich-btn);
  color: var(--c-bereich-btn-on);
}
.w-sec--brand .w-btn--accent, .w-sec--dark .w-btn--accent {
  background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent);
}
/* Die allgemeine Linkfarbe unten ist spezifischer als die Buttonklassen —
   deshalb die Buttonfarben hier noch einmal mit .w-root davor. */
.w-root .w-btn--accent,
.w-root .w-btn--accent:link, .w-root .w-btn--accent:visited { color: var(--c-bereich-btn-on); }
.w-root .w-sec--brand .w-btn--accent,
.w-root .w-sec--dark .w-btn--accent { color: var(--c-on-accent); }

/* --- Kein Blau: jeder Link trägt die Bereichsfarbe --- */
/* Riegel gegen Browserblau: jeder Link im Dokument bekommt eine Farbe aus dem
   Design, auch der besuchte. Ohne :visited faerbt der Browser sonst violett.

   ACHTUNG, hier ist schon einmal etwas kaputtgegangen: `a:link` hat eine
   hoehere Spezifitaet (0,2,1) als eine Klassenkombination wie
   `.w-root .w-btn--primary` (0,2,0). Ohne die Ausnahmen unten faerbt diese
   Regel deshalb auch Buttons und Menuepunkte um — auf der Nachbarschaftshilfe
   stand die Buttonschrift dadurch in derselben Farbe wie die Buttonflaeche und
   war unsichtbar. Buttons und Navigation bringen ihre Farben selbst mit. */
a, a:link, a:visited { color: var(--c-bereich-text, var(--c-brand)); }
.w-root a:not(.w-btn):not(.w-nav a),
.w-root a:not(.w-btn):not(.w-nav a):link,
.w-root a:not(.w-btn):not(.w-nav a):visited { color: var(--c-bereich-text); }
.w-root a:not(.w-btn):not(.w-chip):not(.w-head-bar__logo):not(.w-foot__logo):not(.w-nav a) {
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.w-root .w-text a, .w-root p a, .w-root li a { font-weight: 600; }
.w-nav a, .w-nav a:link, .w-nav a:visited,
.w-navmob__panel > a, .w-navmob__panel > a:link,
.w-navmob__panel > a:visited { color: var(--c-ink); }
.w-nav a[aria-current="page"], .w-nav a[aria-current="page"]:link { color: var(--c-bereich-text); text-decoration-color: var(--c-bereich); }
.w-foot a, .w-foot a:link, .w-foot a:visited { color: rgba(255,255,255,.9); }
.w-foot a:hover { color: var(--c-accent-hell); }
/* Auf Markenflaechen sind Links hell — aber Buttons bringen ihre Schriftfarbe
   selbst mit. Ohne :not(.w-btn) liegt dieser Selektor mit a:link bei 0,2,1 und
   schlaegt jede Buttonregel der Form .w-root .w-btn--… (0,2,0). Genau derselbe
   Fehler wie beim Blauriegel weiter oben. */
.w-sec--brand a:not(.w-btn), .w-sec--dark a:not(.w-btn),
.w-sec--brand a:not(.w-btn):link, .w-sec--dark a:not(.w-btn):link,
.w-sec--brand a:not(.w-btn):visited, .w-sec--dark a:not(.w-btn):visited { color: var(--c-on-brand); }
.w-sec--brand .w-btn--accent:link, .w-sec--dark .w-btn--accent:link { color: var(--c-on-accent); }
.w-acc__body a { color: var(--c-bereich-text); }

/* --- Runde Ecken überall gleich --- */
.w-hero__band, .w-vph { border-radius: var(--r-md); }

/* --- Hero Variante A ---
   Das Band steht im unteren Bilddrittel. Damit es beim Seitenaufruf sicher
   sichtbar ist, ist die Bildhöhe gedeckelt: 16:9, aber nie höher als 58 % der
   Fensterhöhe. Der Text im Band ist immer hell — Schwarz auf Braun war ein
   Vererbungsfehler aus der Überschriftenregel oben. */
.w-hero--band .w-hero__bild { position: relative; }
.w-hero--band .w-hero__media { width: 100%; max-height: min(70vh, 680px); }
.w-hero--band .w-hero__inner {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding-bottom: clamp(1.5rem, 1rem + 2.2vw, 3rem);
}
.w-hero--band .w-hero__bands { justify-items: start; text-align: left; }
.w-root .w-hero--band .w-h1.w-hero__bands { color: var(--c-on-brand); }
.w-hero--band .w-hero__band {
  width: fit-content; max-width: min(100%, 26ch);
  background: var(--c-brand);
  color: var(--c-on-brand);
  overflow-wrap: normal;
  hyphens: auto;
}
.w-hero--band .w-hero__band--accent {
  max-width: min(100%, 40ch);
  background: var(--c-bereich);
  color: var(--c-bereich-on);
}
/* Ersatzfläche, wenn für eine Seite kein Motiv vorliegt: gleiche Geometrie,
   gleiche Bänder, nur ein Farbfeld statt eines Fotos. */
.w-hero__flaeche {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(70vh, 680px);
  background: var(--c-bereich-soft);
  background-image:
    radial-gradient(circle at 82% 26%, var(--c-bereich) 0, transparent 42%),
    radial-gradient(circle at 18% 82%, var(--c-brand-soft) 0, transparent 46%);
}
.w-hero__unten { padding-block: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); }
.w-hero__unten .w-lead { max-width: 62ch; }
.w-hero__unten .w-text { max-width: 68ch; }

@media (max-width: 860px) {
  .w-hero--band .w-hero__inner {
    position: static; align-items: stretch;
    background: var(--c-brand); color: var(--c-on-brand);
    padding-block: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  }
  .w-hero--band .w-hero__band { background: none; padding: 0; }
  .w-hero--band .w-hero__band--accent { background: none; padding: 0; color: var(--c-accent-hell); }
  .w-hero--band .w-hero__media, .w-hero__flaeche { max-height: none; }
}

/* --- Wortumbrüche: nie mitten im Wort ---
   Der Skill setzt overflow-wrap: break-word auch auf Überschriften. Bei einem
   langen Wort in einer schmalen Karte zerreißt das den Begriff. Stattdessen
   Silbentrennung und, wenn die nicht greift, ein leichter Schriftausgleich. */
.w-root h1, .w-root h2, .w-root h3,
.w-root .w-h1, .w-root .w-h2, .w-root .w-h3 {
  overflow-wrap: normal;
  hyphens: auto;
  text-wrap: balance;
}
.w-card .w-h3 { font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); }
.w-grid--4 { --min: 250px; }
.w-grid--3 { --min: 300px; }

/* --- Mehr Luft zwischen den Bausteinen --- */
.w-root .w-lead + .w-text, .w-root .w-lead + p,
.w-root .w-lead + .w-list, .w-root .w-lead + .w-merk,
.w-root .w-lead + .w-iconlist,
.w-root .w-lead + ul { margin-top: clamp(1.5rem, 1.1rem + 1vw, 2.15rem); }
.w-root .w-text + .w-text { margin-top: 1.15rem; }
.w-root .w-card__text + .w-card__text { margin-top: 1rem; }
.w-head { margin-bottom: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem); }
.w-head .w-lead { margin-top: 1rem; }
.w-btns { margin-top: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); gap: .9rem; }
.w-card { padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem); }
.w-split { gap: clamp(2rem, 1.4rem + 3vw, 4.5rem); }
.w-acc__item + .w-acc__item { margin-top: .8rem; }

/* --- Header --- */
.w-nav a, .w-navmob__panel > a { white-space: nowrap; }
.w-nav { gap: clamp(.85rem, .3rem + 1vw, 1.5rem); }
@media (max-width: 1150px) {
  .w-nav, .w-head-bar__actions { display: none; }
  .w-navmob { display: block; }
  .w-head-bar { position: sticky; top: 0; }
}
.w-navmob__panel a.w-btn--primary { color: var(--c-on-brand); }
.w-navmob__panel a.w-btn--secondary { color: var(--c-brand); }

/* --- Bereichsfarbe an weiteren Stellen --- */
.w-eyebrow { color: var(--c-bereich-text); }
.w-step__num { background: var(--c-bereich); color: var(--c-bereich-on); }
.w-list li::before { background: var(--c-bereich); }
.w-acc__item > summary::after { border-color: var(--c-bereich-text); }
.w-chip { border-color: var(--c-bereich); color: var(--c-bereich-text); background: var(--c-bereich-soft); }
a.w-chip:hover { background: var(--c-bereich); color: var(--c-bereich-on); }
.w-contact__wert { color: var(--c-bereich-text); }
.w-quote__name { color: var(--c-bereich-text); }

/* --- Icons --- */
.w-icon {
  width: var(--icon, 1.5rem); height: var(--icon, 1.5rem); flex: 0 0 auto;
  color: var(--c-bereich-text);
  stroke: currentColor; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.w-card > .w-icon {
  --icon: 1.55rem; box-sizing: content-box;
  padding: .65rem; margin-bottom: 1rem;
  border-radius: var(--r-sm);
  background: var(--c-bereich-soft); color: var(--c-bereich-text);
}
.w-sec--brand .w-card > .w-icon, .w-sec--dark .w-card > .w-icon {
  background: var(--c-accent); color: var(--c-on-accent);
}
.w-sec--brand .w-icon, .w-sec--dark .w-icon { color: var(--c-accent-hell); }

/* --- Merkliste --- */
.w-merk {
  display: grid; gap: 0;
  margin-top: clamp(1.5rem, 1.1rem + 1vw, 2.15rem);
  border-top: 1px solid var(--c-line);
}
.w-merk > li {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  padding-block: clamp(.95rem, .7rem + .6vw, 1.35rem);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--t-lead); line-height: 1.45; color: var(--c-ink-soft);
}
.w-merk .w-icon {
  --icon: 1.35rem; box-sizing: content-box; padding: .5rem;
  border-radius: var(--r-sm);
  background: var(--c-bereich-soft); color: var(--c-bereich-text);
  margin-top: -.15rem;
}
.w-merk strong { color: var(--c-ink); font-weight: 700; }
.w-merk__zusatz { display: block; font-size: var(--t-small); margin-top: .2rem; }
.w-sec--brand .w-merk, .w-sec--dark .w-merk { border-top-color: rgba(255,255,255,.22); }
.w-sec--brand .w-merk > li, .w-sec--dark .w-merk > li {
  border-bottom-color: rgba(255,255,255,.22); color: rgba(255,255,255,.88);
}
.w-sec--brand .w-merk strong, .w-sec--dark .w-merk strong { color: var(--c-on-brand); }
.w-sec--brand .w-merk .w-icon, .w-sec--dark .w-merk .w-icon {
  background: rgba(255,255,255,.14); color: var(--c-accent-hell);
}

.w-iconlist { display: grid; gap: 1rem; margin-top: clamp(1.5rem, 1.1rem + 1vw, 2.15rem); }
.w-iconlist li {
  display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start;
  color: var(--c-ink-soft);
}
.w-iconlist .w-icon { --icon: 1.35rem; margin-top: .18rem; }

/* --- Hervorgehobener Block --- */
.w-panel {
  margin-top: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  padding: clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem);
  border-radius: var(--r-md);
  background: var(--c-bereich-soft);
  border-left: 4px solid var(--c-bereich);
}
.w-panel__label {
  display: block; font-size: var(--t-small); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-bereich-text); margin-bottom: .5rem;
}
.w-panel__wert {
  display: block; font-family: var(--f-display);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  font-weight: 700; line-height: 1.35; color: var(--c-ink);
}
.w-panel p { margin-top: .7rem; font-size: var(--t-small); }

/* --- Kontaktzeilen --- */
.w-contact__zeile { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
.w-contact__zeile + .w-contact__zeile { margin-top: .95rem; }
.w-contact__zeile .w-icon { --icon: 1.3rem; margin-top: .15rem; }
.w-contact__label { display: block; font-size: var(--t-small); color: var(--c-ink-soft); }
.w-contact__wert {
  font-family: var(--f-display); font-weight: 700; font-size: 1.125rem;
  text-decoration: none;
}
a.w-contact__wert:hover { text-decoration: underline; }

/* --- Footer --- */
.w-foot__logo { display: inline-block; margin-bottom: 1.15rem; }
.w-foot__logo img { height: 68px; width: auto; }
.w-foot .w-contact span, .w-foot .w-contact__label { color: rgba(255,255,255,.82); }
.w-foot .w-contact__wert { color: var(--c-on-brand); }
.w-foot .w-icon { color: var(--c-accent-hell); }
.w-foot__bottom { justify-content: flex-start; }

/* --- Einbettungen --- */
.w-embed--form { width: 100%; min-height: var(--min-h, 585px); }
.w-embed--form iframe { width: 100%; border: none; border-radius: var(--r-md); display: block; }
.w-embed--karte {
  width: 100%; min-height: 380px; border-radius: var(--r-md); overflow: hidden;
  background: var(--c-bg); border: 1px solid var(--c-line);
}
.w-embed--karte iframe { width: 100%; border: none; display: block; }

/* --- Linkliste --- */
.w-linkliste { display: grid; gap: .7rem; margin-top: clamp(1.5rem, 1.1rem + 1vw, 2.15rem); }
.w-linkliste a {
  display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center;
  padding: clamp(.9rem, .7rem + .5vw, 1.15rem) clamp(1rem, .8rem + .6vw, 1.35rem);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-bg); text-decoration: none;
  color: var(--c-ink); font-weight: 600;
}
.w-linkliste a, .w-linkliste a:link, .w-linkliste a:visited { color: var(--c-ink); }
.w-linkliste a:hover { border-color: var(--c-bereich); background: var(--c-bereich-soft); }
.w-linkliste .w-icon { --icon: 1.25rem; color: var(--c-bereich-text); }
.w-linkliste__pfeil { --icon: 1.1rem; color: var(--c-ink-soft); }

/* Die getönte Sektionsfläche und das Abschlussband tragen die Bereichsfarbe.
   Damit prägt sie die Seite, statt nur an Einzelteilen aufzutauchen. */
.w-sec--soft { background: var(--c-bereich-soft); }
.w-sec--brand { background: var(--c-cta); }
/* Das Markenband im Hero bleibt braun — es trägt die Marke, nicht den Bereich.
   Das steht schon oben in Abschnitt 14 und wird hier bewusst NICHT wiederholt:
   eine zweite Regel gleicher Spezifität an dieser Stelle hat in Revision 5 das
   Akzentband mit überschrieben und die Bereichsfarbe im Hero auf allen Seiten
   nach Braun gezogen. */

/* ==========================================================================
   15. Bewegung
   Drei Arten: Einblenden beim Scrollen, Bilder, die durch ihren Rahmen
   wandern, und Rückmeldung beim Zeigen.

   Einblenden und Bildzug steuert `assets/bewegung.js`. Die erste Fassung hat
   beides rein in CSS über `animation-timeline: view()` gelöst — das läuft nur
   in Chrome und Edge, in Safari und Firefox stand die Seite vollkommen still.
   Genau so ist es beim Kunden angekommen.

   Die Sicherheitsregel des Skills bleibt gewahrt: Das Stylesheet allein
   versteckt nichts. Die Klasse `w-vor` vergibt ausschließlich das Skript, und
   nur an Elemente, die in diesem Moment unterhalb des Fensters liegen. Fällt
   das Skript aus, ist die Seite vollständig sichtbar. Was beim Laden schon im
   Bild steht, wird nie angefasst — deshalb flackert auch nichts.

   Die Rückmeldung beim Zeigen läuft weiter rein in CSS.

   Ausgenommen bleiben Formulare, Einbettungen und Freigabefelder — dort
   erzwingt Abschnitt 8 bereits `animation: none`.
   ========================================================================== */

/* Der Endzustand der Einblendung ist nicht `transform: none`, sondern die
   Variable --lift. Grund: Eine laufende Animation gewinnt in der Kaskade gegen
   jede normale Regel — ein Hover-transform auf demselben Element wäre wirkungslos.
   Über die Variable greift der Hover in den Endzustand der Animation hinein.
   @property macht sie überblendbar, sonst springt die Bewegung nur. */
@property --lift {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

/* --- Einblenden beim Scrollen ------------------------------------------
   Gesteuert von assets/bewegung.js, nicht von einer Scroll-Zeitachse in CSS.
   Grund: `animation-timeline: view()` laeuft nur in Chrome und Edge; in
   Safari und Firefox stand die Seite dadurch vollkommen still.

   Die Sicherheitsregel bleibt trotzdem gewahrt: `.w-vor` wird ausschliesslich
   vom Skript gesetzt, und nur auf Elemente, die zu diesem Zeitpunkt unterhalb
   des Fensters liegen. Ohne Skript vergibt niemand diese Klasse, also ist
   auch nichts versteckt. Das Stylesheet allein blendet nichts aus. */
@media (prefers-reduced-motion: no-preference) {
  .w-vor {
    opacity: 0;
    transform: translateY(2rem);
  }
  .w-da {
    opacity: 1;
    transform: translateY(var(--lift, 0px));
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.75,.3,1),
                --lift .22s ease;
  }
  /* Text hebt sich nur, ohne blasser zu werden. Halb sichtbarer Fliesstext
     liest sich als Ladefehler — das war der Befund aus Revision 7. */
  .w-head.w-vor, .w-merk > li.w-vor, .w-linkliste a.w-vor { opacity: 1; }

  /* Reihenfolge innerhalb eines Blocks: zwei Stufen, nicht sechs. */
  /* Die Kopfzeile rückt beim Scrollen enger zusammen und bekommt eine Kante.
     Die Klasse setzt bewegung.js; ohne Skript bleibt die Kopfzeile so, wie
     sie beim Laden aussieht — also vollständig brauchbar. */
  .w-head-bar { transition: box-shadow .28s ease; }
  .w-head-bar__inner { transition: min-height .28s ease; }
  .w-head-bar__logo img { transition: height .28s ease; }
  .w-head-bar--klein { box-shadow: 0 2px 18px rgba(95, 20, 25, .13); }
  .w-head-bar--klein .w-head-bar__inner { min-height: 60px; }
  .w-head-bar--klein .w-head-bar__logo img { height: 38px; }

  .w-grid > *:nth-child(2).w-da,
  .w-reihen > *:nth-child(2).w-da,
  .w-merk > li:nth-child(2).w-da { transition-delay: .07s; }
  .w-grid > *:nth-child(n+3).w-da,
  .w-reihen > *:nth-child(n+3).w-da,
  .w-merk > li:nth-child(n+3).w-da { transition-delay: .14s; }

  /* Die Marke der Reihe und die Schrittnummer wachsen mit auf. */
  .w-vor .w-reihe__marke, .w-vor.w-step .w-step__num { transform: scale(.84); }
  .w-da .w-reihe__marke, .w-da.w-step .w-step__num {
    transform: scale(1);
    transition: transform .5s cubic-bezier(.2,.8,.3,1) .05s;
  }
}

/* --- Rückmeldung beim Zeigen ---
   Startet immer aus dem sichtbaren Zustand, funktioniert deshalb ohne jede
   Bedingung. Nur auf Geräten mit echtem Zeiger, damit auf dem Touchscreen
   kein Zustand hängen bleibt. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {

  /* Karten heben sich leicht an. Bewusst kein Skalieren: eine skalierte
     Rasterzelle überlappt ihre Nachbarn und schiebt Text unscharf. */
  .w-card, .w-linkliste a, .w-review {
    transition: transform .22s ease, box-shadow .22s ease,
                border-color .22s ease, --lift .22s ease;
  }
  .w-card:hover, .w-linkliste a:hover, .w-review:hover {
    transform: translateY(-4px);
    --lift: -4px;   /* damit der Hover auch im Endzustand der Einblendung greift */
    box-shadow: var(--shadow);
  }

  /* Das Bild vergrößert sich innerhalb seines Rahmens. Der Rahmen behält sein
     Seitenverhältnis, deshalb verschiebt sich kein Layout. */
  .w-media > img { transition: transform .5s cubic-bezier(.2,.6,.2,1); }
  .w-card:hover .w-media:not(.w-media--quer) > img,
  .w-gallery > .w-media:not(.w-media--quer):hover > img,
  .w-split .w-media:not(.w-media--quer):hover > img { transform: scale(1.045); }
  /* Ein Bild mit Querzug bekommt keinen Zoom beim Zeigen: Zwei Bewegungen auf
     demselben Motiv heben sich gegenseitig auf, statt sich zu ergänzen. Der
     Scrolleffekt ist hier die Aussage, der Hover wäre nur Rauschen. */

  /* Buttons und Icons: kleine Bewegung, keine Größenänderung des Kastens. */
  .w-btn { transition: background-color .18s ease, color .18s ease,
                       border-color .18s ease, transform .18s ease; }
  .w-btn:hover { transform: translateY(-2px); }
  .w-btn:active { transform: translateY(0); }

  .w-card > .w-icon, .w-merk .w-icon { transition: transform .25s ease; }
  .w-card:hover > .w-icon, .w-merk > li:hover .w-icon { transform: scale(1.08); }

  /* Akkordeon und Kontaktzeilen bekommen eine ruhige Farbüberblendung. */
  .w-acc__item > summary { transition: background-color .18s ease, color .18s ease; }
  .w-acc__item > summary:hover { background: var(--c-bereich-soft); }
  .w-contact__wert { transition: color .18s ease; }

  /* Der Pfeil in der Linkliste rückt in die Richtung, in die er zeigt. */
  .w-linkliste__pfeil { transition: transform .22s ease; }
  .w-linkliste a:hover .w-linkliste__pfeil { transform: translate(3px, -3px); }
}

/* --- Bewegung im Hero ---
   Der Hero ist von der Scroll-Einblendung ausgenommen (siehe oben), weil er
   immer im ersten Bild steht. Er bekommt stattdessen eine Bewegung beim Laden.

   Sie läuft ausdrücklich von sichtbar nach sichtbar: kein Element beginnt
   durchsichtig, es bewegt sich nur. Damit kann hier nichts hängen bleiben,
   auch wenn eine Animation gar nicht erst startet — der Ruhezustand ist
   bereits der fertige Zustand. Nur die Bewegung ist neu, nicht die Sichtbarkeit. */
@media (prefers-reduced-motion: no-preference) {

  /* Das Foto kommt aus einer leichten Vergrößerung zur Ruhe. Der Rahmen behält
     sein Seitenverhältnis, deshalb verschiebt sich nichts im Layout. */
  @keyframes w-hero-bild {
    from { transform: scale(1.03); }
    to   { transform: scale(1); }
  }
  .w-hero--band .w-hero__media > img,
  .w-hero__flaeche {
    animation: w-hero-bild 1.1s cubic-bezier(.16,.7,.28,1) both;
  }

  /* Die Bänder setzen sich von unten. Das Akzentband zuerst, das Markenband
     eine Idee später — dadurch liest sich der Kopf als eine Bewegung und
     nicht als zwei gleichzeitige. */
  @keyframes w-hero-band {
    from { transform: translateY(8px); }
    to   { transform: translateY(0); }
  }
  .w-hero--band .w-hero__band {
    animation: w-hero-band .6s cubic-bezier(.16,.7,.28,1) both;
  }
  .w-hero--band .w-hero__band--accent { animation-delay: .05s; }
  .w-hero--band .w-hero__band:not(.w-hero__band--accent) { animation-delay: .14s; }

}

/* --------------------------------------------------------------------------
   14. Bausteine aus Revision 8
   -------------------------------------------------------------------------- */

/* Ein einzelner Aktionsbutton, der auf ein Kachelraster oder eine Galerie
   folgt, steht mittig unter dem Raster statt links am Rand. Der Selektor
   bleibt innerhalb einer Sektion — er greift nie ueber eine Sektionsgrenze
   hinweg und bleibt damit auch als einzelnes Elementor-Widget gueltig. */
.w-grid + .w-btns,
.w-reihen + .w-btns,
.w-gallery + .w-btns,
.w-steps + .w-btns { justify-content: center; }

/* Formular neben dem Text statt darunter. Die rechte Spalte ist die breitere
   — das Formular braucht mehr Platz als die Erlaeuterung daneben. Unter
   980 px stapelt der Block, dann steht das Formular wieder unter dem Text. */
.w-formsplit {
  display: grid;
  gap: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
}
.w-formsplit > .w-head { margin-bottom: 0; max-width: none; }
@media (max-width: 980px) { .w-formsplit { grid-template-columns: 1fr; } }

/* Rechtstexte. Als schmale Spalte am linken Rand blieb die halbe Seite leer.
   96 statt 68 Zeichen Zeilenlaenge, begrenzt vom Wrapper. Kein zweites
   Layout, nur eine andere Breite — und ausdruecklich KEIN
   Inhaltsverzeichnis daneben. */
.w-recht { display: block; }
.w-recht__inhalt { max-width: none; }
.w-recht__inhalt > p,
.w-recht__inhalt > ul,
.w-recht__inhalt > ol,
.w-recht__inhalt > h2,
.w-recht__inhalt > h3 { max-width: 96ch; }
.w-recht__inhalt > h2 { padding-top: .4rem; }

/* Ein Raster mit weniger Karten, als es Spalten gaebe, steht sonst links
   angeschlagen und laesst rechts eine Luecke. Mit --mitte behalten die Karten
   ihre Breite und die Gruppe rueckt in die Seitenmitte. Typischer Fall: zwei
   Teamportraets statt drei, weil nur zwei Namen belegt sind. */
.w-grid--mitte { justify-content: center; }
.w-grid--fixed.w-grid--mitte {
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 24rem));
}
@media (max-width: 820px) {
  .w-grid--fixed.w-grid--mitte { grid-template-columns: minmax(0, 24rem); }
}

/* Ein breiterer Rahmen fuer Inhalte, die fuer sich stehen — etwa ein Video
   ohne Ueberschrift direkt unter dem Hero, das dann selbst Gewicht braucht. */
.w-wrap--weit { max-width: 1480px; }
.w-sec--video { padding-block: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); }

/* Der Sprunganker darf nicht unter der klebenden Kopfzeile landen. */
.w-root [id] { scroll-margin-top: 6rem; }

/* Netzwerk-Icons in der Fusszeile: links der Webdesign-Hinweis, mittig die
   Icons, rechts Impressum und Datenschutz. Unter 760 px zentriert gestapelt. */
.w-foot__social { display: flex; gap: .6rem; margin-inline: auto; }
.w-foot__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--r-sm);
  transition: transform .15s ease, border-color .15s ease;
}
.w-foot__social svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .w-foot__social a:hover { transform: scale(1.12); border-color: rgba(255,255,255,.6); }
}
@media (max-width: 760px) {
  .w-foot__bottom { flex-direction: column; text-align: center; }
  .w-foot__legal { margin-left: 0; justify-content: center; }
  .w-foot__social { margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   16. Bausteine aus Revision 9 und 10
   -------------------------------------------------------------------------- */

/* Vier Kacheln mit Fliesstext nebeneinander lassen pro Zeile knapp 22 Zeichen
   uebrig — das liest sich als Wortliste, nicht als Text. Prosakacheln stehen
   deshalb zu zweit: zwei mal zwei statt vier nebeneinander. Vier Spalten
   bleiben den Ablaufschritten vorbehalten, deren Text kurz ist. */
.w-grid--paar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .w-grid--paar { grid-template-columns: 1fr; } }


/* --- Reihen: die Alternative zum Kachelraster ---
   Eine Aufzaehlung mit Fliesstext muss nicht als Raster gleichfoermiger Kaesten
   stehen. Hier: kein Kasten, kein Schatten, nur eine Haarlinie zwischen den
   Eintraegen. Links eine Marke (Icon oder Zahl), daneben Ueberschrift und Text,
   rechts optional die Aktion. Der Text bekommt dadurch die doppelte Breite
   gegenueber einer Kachel, und die Seite bekommt einen zweiten Rhythmus neben
   dem Raster. */
.w-reihen {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  border-top: 1px solid var(--c-line);
}
.w-reihen--zwei {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
}
@media (max-width: 820px) { .w-reihen--zwei { grid-template-columns: 1fr; } }

.w-reihe {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, .85rem + .7vw, 1.5rem);
  align-items: start;
  padding-block: clamp(1.2rem, 1rem + .9vw, 1.75rem);
  border-bottom: 1px solid var(--c-line);
}
.w-reihe--aktion { grid-template-columns: auto minmax(0, 1fr) auto; }
.w-reihe--aktion > .w-btn { align-self: center; }
/* Die Aktionsspalte soll ueber alle Zeilen auf derselben Kante stehen. Jede
   Zeile ist ein eigenes Raster, deshalb uebernimmt sie die Spalten der Liste
   per subgrid. Browser ohne subgrid ignorieren die Zeile und behalten die
   Spalten von oben — dann steht die Aktion je Zeile, was ebenfalls traegt. */
.w-reihen:not(.w-reihen--zwei) { grid-template-columns: auto minmax(0, 1fr) auto; }
.w-reihen:not(.w-reihen--zwei) > .w-reihe {
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}
@media (max-width: 820px) {
  .w-reihe--aktion { grid-template-columns: auto minmax(0, 1fr); }
  .w-reihe--aktion > .w-btn { grid-column: 2; justify-self: start; margin-top: 1rem; }
}
.w-reihe__marke {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem; flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--c-bereich-soft); color: var(--c-bereich-text);
  font-family: var(--f-display); font-weight: 700; font-size: 1.05rem;
  line-height: 1;
}
.w-reihe__marke .w-icon { --icon: 1.45rem; color: inherit; }
.w-reihe .w-h3 { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); }
.w-reihe p { margin-top: .45rem; max-width: 70ch; }
.w-sec--soft .w-reihen, .w-sec--alt .w-reihen { border-top-color: var(--c-line); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .w-reihe__marke { transition: transform .2s ease; }
  .w-reihe--aktion:hover .w-reihe__marke { transform: scale(1.07); }
}

/* --------------------------------------------------------------------------
   17. Bildbausteine
   Gegen leere Flaechen neben linksbuendigen Koepfen, gegen Weiss auf Weiss am
   Hero-Uebergang, und fuer Bildstrecken, die mehr sein sollen als ein Raster.
   -------------------------------------------------------------------------- */

/* c) Bildkomposition: grosses Motiv, versetztes Zweitbild, Salbeiflaeche
      dahinter. Fuer Zweispalter neben Text, Akkordeon oder Kopf. */
.w-collage { position: relative; padding: 0 0 clamp(2.5rem, 1.8rem + 3vw, 4.5rem) clamp(2.5rem, 1.8rem + 3vw, 4.5rem); --rand: var(--c-bg); }
.w-collage::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: 58%; height: 62%;
  background: var(--c-accent); border-radius: var(--r-md);
}
.w-collage > .w-media { position: relative; z-index: 1; }
.w-collage > .w-media + .w-media {
  position: absolute; z-index: 2; left: 0; bottom: 0; width: 52%;
  border: 6px solid var(--rand); box-sizing: content-box;
  box-shadow: var(--shadow);
}
.w-collage--rechts { padding: 0 clamp(2.5rem, 1.8rem + 3vw, 4.5rem) clamp(2.5rem, 1.8rem + 3vw, 4.5rem) 0; }
.w-collage--rechts::before { left: auto; right: 0; }
.w-collage--rechts > .w-media + .w-media { left: auto; right: 0; }
.w-sec--alt .w-collage { --rand: var(--c-bg-alt); }
.w-sec--soft .w-collage { --rand: var(--c-bereich-soft); }
@media (max-width: 860px) {
  .w-collage { max-width: 34rem; }
}

/* d) Zweispalter, dessen Bildspalte beim Scrollen neben langen Akkordeons
      stehen bleibt. Mobil wird daraus ein normaler Stapel. */
.w-split--sticky { align-items: start; }
@media (min-width: 861px) {
  .w-split--sticky > .w-collage { position: sticky; top: 7rem; }
}

/* e) Bildband: randloses Mosaik aus einem Querformat und zwei Hochformaten.
      2,22 : 1 : 1 gleicht 16:9 und 4:5 auf dieselbe Hoehe aus. */
.w-bildband {
  display: grid; gap: .5rem;
  grid-template-columns: 2.222fr 1fr 1fr;
}
.w-bildband > .w-media { border-radius: 0; }
@media (max-width: 720px) {
  .w-bildband { grid-template-columns: 1fr 1fr; }
  .w-bildband > .w-media:first-child { grid-column: 1 / -1; }
}

/* f) Kopf mit Bild daneben, damit rechts neben einem linksbuendigen
      Sektionskopf keine leere Flaeche bleibt. */
.w-kopfbild { display: grid; gap: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem); grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; margin-bottom: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem); }
.w-kopfbild > .w-head { margin-bottom: 0; }
@media (max-width: 860px) { .w-kopfbild { grid-template-columns: 1fr; } }

/* g) Hero-Textteil auf gebrochenem Weiss, damit Hero und Folgesektion nicht
      Weiss an Weiss stehen. */
.w-hero__unten { background: var(--c-bg-alt); }

/* h) Lightbox fuer die Bildstrecke „Einblicke" (Revision 2). Reines CSS ueber
      :target, funktioniert ohne JavaScript und in einem Elementor-HTML-Widget.
      Klick aufs Bild oeffnet es gross, Klick daneben oder auf × schliesst,
      ‹ und › blaettern. */
.w-lupe { display: block; cursor: zoom-in; }
.w-lupe::after {
  content: "+"; position: absolute; right: .75rem; bottom: .75rem; z-index: 2;
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--c-brand); color: var(--c-on-brand);
  font-size: 1.5rem; font-weight: 700; line-height: 1;
}
.w-lupe:focus-visible { outline: var(--focus); outline-offset: 3px; }
.w-lightbox {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(24, 16, 14, .9);
  padding: clamp(3.5rem, 2rem + 4vw, 5rem) clamp(1rem, .5rem + 4vw, 5rem);
  place-items: center;
}
.w-lightbox:target { display: grid; }
.w-lightbox__flaeche { position: absolute; inset: 0; cursor: zoom-out; }
.w-lightbox__bild { position: relative; margin: 0; pointer-events: none; }
.w-lightbox__bild img { display: block; max-width: 100%; max-height: 80vh; width: auto; height: auto; border-radius: var(--r-md); }
.w-root .w-lightbox a.w-lightbox__zu,
.w-root .w-lightbox a.w-lightbox__vor,
.w-root .w-lightbox a.w-lightbox__zurueck {
  position: absolute; z-index: 2; display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--c-brand); border: 2px solid var(--c-on-brand);
  font-size: 1.9rem; line-height: 1; text-decoration: none;
}
/* Pfeile und Kreuz immer weiss: dieselbe Selektorkette wie die allgemeine
   Linkregel (.w-root a:not(.w-btn):not(.w-nav a):link, 0,4,2) plus Klasse,
   sonst faerbt sie die Zeichen rot auf Rot. */
.w-root .w-lightbox a.w-lightbox__zu:not(.w-btn):not(.w-nav a):link,
.w-root .w-lightbox a.w-lightbox__zu:not(.w-btn):not(.w-nav a):visited,
.w-root .w-lightbox a.w-lightbox__vor:not(.w-btn):not(.w-nav a):link,
.w-root .w-lightbox a.w-lightbox__vor:not(.w-btn):not(.w-nav a):visited,
.w-root .w-lightbox a.w-lightbox__zurueck:not(.w-btn):not(.w-nav a):link,
.w-root .w-lightbox a.w-lightbox__zurueck:not(.w-btn):not(.w-nav a):visited { color: var(--c-on-brand); }
.w-root .w-lightbox a.w-lightbox__zu { top: 1rem; right: 1rem; }
.w-root .w-lightbox a.w-lightbox__zurueck { left: 1rem; top: 50%; transform: translateY(-50%); }
.w-root .w-lightbox a.w-lightbox__vor { right: 1rem; top: 50%; transform: translateY(-50%); }
.w-root .w-lightbox a.w-lightbox__zu:hover,
.w-root .w-lightbox a.w-lightbox__vor:hover,
.w-root .w-lightbox a.w-lightbox__zurueck:hover { background: var(--c-brand-dark); }
@media (max-width: 720px) {
  .w-root .w-lightbox a.w-lightbox__zurueck, .w-root .w-lightbox a.w-lightbox__vor { top: auto; bottom: 1rem; transform: none; }
}
.w-gallery--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .w-gallery--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .w-gallery--drei { grid-template-columns: 1fr; } }

/* i) Sprunglink „Zum Inhalt springen": wurde von der allgemeinen Linkregel
      rot auf rotem Grund gefaerbt (1,0:1, nur beim Tabben sichtbar). */
.w-root a.w-skip:not(.w-btn):not(.w-nav a):link,
.w-root a.w-skip:not(.w-btn):not(.w-nav a):visited,
a.w-skip:link, a.w-skip:visited { color: var(--c-on-brand); background: var(--c-brand); }

/* Hausvorgaben: Hero-Text linksbuendig, Ken Burns, Hero-Video */
.w-root .w-hero__unten,
.w-root .w-hero__unten .w-head { text-align: left; }
.w-root .w-hero__unten .w-btns { justify-content: flex-start; }

.w-hero__media--video { background: var(--c-brand-dark); }
.w-hero__media--video > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  pointer-events: none;
}
.w-hero__video::-webkit-media-controls,
.w-hero__video::-webkit-media-controls-start-playback-button,
.w-hero__video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes w-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
  }
  .w-root .w-hero .w-hero__media > img {
    animation: w-kenburns 16s ease-in-out infinite alternate;
    transform-origin: var(--pos, 50% 50%);
    will-change: transform;
  }
}

/* Herzhalt: Bereichsfarbe der Seite Pflegedienst (Styleguide S. 8,
   Farbkonzept Pflegedienst: Dunkelrot plus gedecktes Gruen). Icons, Eyebrows,
   Links und getoente Flaechen tragen dort Gruen statt Dunkelrot. */
.w-bereich--pflege {
  --c-bereich-text: var(--c-accent);
  --c-bereich-soft: var(--c-accent-soft);
}

/* Herzhalt: Links auf dunklen Flaechen. Die allgemeine Linkregel
   (.w-root a:not(.w-btn):not(.w-nav a):link, Spezifitaet 0,4,2) lag ueber
   .w-foot a:link und .w-sec--brand a:link und faerbte Footerlinks und
   Kontaktwerte dunkelrot auf Dunkelrot. Gleiche Kette plus Flaechenklasse. */
.w-root .w-foot a:not(.w-btn):not(.w-nav a),
.w-root .w-foot a:not(.w-btn):not(.w-nav a):link,
.w-root .w-foot a:not(.w-btn):not(.w-nav a):visited { color: rgba(255, 255, 255, .92); }
.w-root .w-foot a:not(.w-btn):not(.w-nav a):hover { color: var(--c-accent-hell); }
.w-root .w-sec--brand a:not(.w-btn):not(.w-nav a):link,
.w-root .w-sec--brand a:not(.w-btn):not(.w-nav a):visited,
.w-root .w-sec--dark a:not(.w-btn):not(.w-nav a):link,
.w-root .w-sec--dark a:not(.w-btn):not(.w-nav a):visited { color: var(--c-on-brand); }

/* Herzhalt: Abstandsklassen greifen auch an p und Ueberschriften. Die
   Grundregel .w-root p/h2 { margin: 0 } (0,1,1) lag ueber .w-mt-2 (0,1,0),
   dadurch klebten in Impressum und Datenschutz die Absaetze aneinander. */
.w-root .w-mt-1 { margin-top: .75rem; }
.w-root .w-mt-2 { margin-top: 1.5rem; }
.w-root .w-mt-3 { margin-top: 2.25rem; }
.w-root .w-recht__inhalt > h2 { margin-top: clamp(2.25rem, 1.8rem + 1.4vw, 3rem); }
.w-root .w-recht__inhalt > h2:first-child { margin-top: 0; }
.w-root .w-recht__inhalt > h3 { margin-top: 1.75rem; }
.w-root .w-recht__inhalt > p { margin-top: .85rem; }

/* Herzhalt: Startopazitaet der Einblendung nach references/bewegung.md
   (Struktur 0,55, Reihen und Akkordeon 0,68). Der Grundwert 0 liess Bausteine
   im unteren Fensterbereich kurz vollstaendig verschwinden. */
@media (prefers-reduced-motion: no-preference) {
  .w-root .w-vor { opacity: .55; }
  .w-root .w-reihe.w-vor, .w-root .w-acc__item.w-vor { opacity: .68; }
  .w-root .w-head.w-vor, .w-root .w-merk > li.w-vor, .w-root .w-linkliste a.w-vor { opacity: 1; }
}

/* Herzhalt: Endzustand der Einblendung mit gleicher Spezifitaet wie der
   Startzustand oben, sonst bleibt .w-root .w-vor (0,55) dauerhaft stehen. */
@media (prefers-reduced-motion: no-preference) {
  .w-root .w-vor.w-da,
  .w-root .w-reihe.w-vor.w-da,
  .w-root .w-acc__item.w-vor.w-da { opacity: 1; }
}

/* Herzhalt: Untermenues fuer Alltagsbegleitung und Pflegedienst.
   Desktop: oeffnet bei Hover und bei Tastaturfokus (focus-within), ohne Skript.
   Mobil: Unterpunkte eingerueckt unter dem jeweiligen Hauptpunkt. */
.w-nav { align-items: center; }
.w-nav__gruppe { position: relative; display: flex; align-items: center; }
.w-nav__gruppe > a { display: inline-flex; align-items: center; gap: .4rem; }
.w-nav__gruppe > a::after {
  content: ""; width: .4em; height: .4em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.18em) rotate(45deg); opacity: .65;
  transition: transform .2s ease;
}
.w-nav__gruppe:hover > a::after,
.w-nav__gruppe:focus-within > a::after { transform: translateY(.05em) rotate(225deg); }
.w-nav__drop {
  position: absolute; top: calc(100% + .9rem); left: -1rem; z-index: 50;
  min-width: 18rem; display: grid; gap: .1rem; padding: .5rem;
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-md); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-.35rem);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
/* Bruecke ueber den Abstand, damit das Menue beim Hinfahren offen bleibt. */
.w-nav__drop::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
.w-nav__gruppe:hover > .w-nav__drop,
.w-nav__gruppe:focus-within > .w-nav__drop {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.w-nav .w-nav__drop a {
  display: block; padding: .6rem .85rem; border-radius: var(--r-sm);
  font-weight: 500; text-decoration: none;
}
.w-nav .w-nav__drop a:hover,
.w-nav .w-nav__drop a:focus-visible { background: var(--c-bereich-soft); color: var(--c-bereich-text); }
.w-navmob__panel { max-height: calc(100vh - 5rem); overflow-y: auto; }
.w-navmob__gruppe { display: grid; gap: .55rem; }
.w-navmob__gruppe > a { text-decoration: none; font-weight: 600; }
.w-navmob__sub {
  display: grid; gap: .55rem; margin-left: .2rem; padding-left: .9rem;
  border-left: 2px solid var(--c-line);
}
.w-root .w-navmob__sub a:not(.w-btn):not(.w-nav a),
.w-root .w-navmob__sub a:not(.w-btn):not(.w-nav a):link,
.w-root .w-navmob__sub a:not(.w-btn):not(.w-nav a):visited {
  color: var(--c-ink-soft); font-weight: 500; font-size: .95em; text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  .w-nav__drop, .w-nav__gruppe > a::after { transition: none; }
}

/* Herzhalt: Dropdown so breit wie der laengste Punkt. Ohne width wird die
   absolut positionierte Box auf die schmale Menuegruppe begrenzt. */
.w-nav .w-nav__drop { width: max-content; max-width: calc(100vw - 2rem); }

/* Herzhalt: Unterseiten von Alltagsbegleitung und Pflegedienst.
   Bereichsleiste unter dem Kopf trennt die beiden Unternehmen sichtbar;
   Farbe kommt aus der Bereichsklasse (Pflegedienst gruen). */
.w-bereichnav { background: var(--c-bereich-soft); border-bottom: 1px solid var(--c-line); }
.w-bereichnav__inner {
  display: flex; align-items: center; gap: .4rem 1.5rem;
  min-height: 3.1rem; padding-block: .55rem;
  overflow-x: auto; white-space: nowrap; scrollbar-width: none;
}
.w-bereichnav__inner::-webkit-scrollbar { display: none; }
.w-root .w-bereichnav a:not(.w-btn):not(.w-nav a),
.w-root .w-bereichnav a:not(.w-btn):not(.w-nav a):link,
.w-root .w-bereichnav a:not(.w-btn):not(.w-nav a):visited {
  color: var(--c-ink); text-decoration: none; font-weight: 500; font-size: .95rem;
}
.w-root .w-bereichnav a.w-bereichnav__name:not(.w-btn):not(.w-nav a),
.w-root .w-bereichnav a.w-bereichnav__name:not(.w-btn):not(.w-nav a):link,
.w-root .w-bereichnav a.w-bereichnav__name:not(.w-btn):not(.w-nav a):visited {
  color: var(--c-bereich-text); font-weight: 700; margin-right: .5rem;
}
.w-root .w-bereichnav a[aria-current="page"]:not(.w-btn):not(.w-nav a),
.w-root .w-bereichnav a[aria-current="page"]:not(.w-btn):not(.w-nav a):link {
  color: var(--c-bereich-text); text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--c-bereich); text-underline-offset: 6px;
}
.w-root .w-bereichnav a:not(.w-btn):not(.w-nav a):hover { color: var(--c-bereich-text); }
/* Aktive Unterseite im Dropdown: Flaeche statt Unterstrich. */
.w-nav .w-nav__drop a[aria-current="page"] {
  text-decoration: none; background: var(--c-bereich-soft); color: var(--c-bereich-text);
}

/* Herzhalt: Akzentfarben der beiden Unternehmen (Kundenvorgabe 27.10.).
   Alltagsbegleitung #CD2823 (Weiss darauf 5,4:1), Pflegedienst #2C6359
   (Weiss darauf 6,4:1). Gilt fuer die Bereichsseite und alle Unterseiten.
   Die --c-bereich-Werte muessen hier neu stehen, weil sie in :root bereits
   aufgeloest sind. */
.w-bereich--alltag {
  --c-accent: #CD2823; --c-accent-soft: #FAEAE9; --c-on-accent: #FFFFFF; --c-accent-hell: #F6C4C1;
  --c-bereich: var(--c-accent); --c-bereich-on: #FFFFFF;
  --c-bereich-btn: var(--c-accent); --c-bereich-btn-on: #FFFFFF;
  --c-bereich-soft: var(--c-accent-soft);
}
.w-bereich--pflege {
  --c-accent: #2C6359; --c-accent-soft: #E7EFED; --c-on-accent: #FFFFFF; --c-accent-hell: #A6CCC4;
  --c-bereich: var(--c-accent); --c-bereich-on: #FFFFFF;
  --c-bereich-btn: var(--c-accent); --c-bereich-btn-on: #FFFFFF;
  --c-bereich-text: var(--c-accent); --c-bereich-soft: var(--c-accent-soft);
}

/* Herzhalt: Startseite, Abschnitt "Zwei Bereiche". Links Alltagsbegleitung,
   rechts Pflegedienst: je ein senkrechter Verlauf Dunkelrot - Akzent -
   Dunkelrot, beide Haelften gehen waagerecht weich ineinander ueber.
   Unterhalb 721px stehen die Karten untereinander; dann laeuft der Verlauf
   senkrecht: oben Rot (Alltagsbegleitung), unten Blau (Pflegedienst). */
.w-root .w-sec--zweifarbig {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--c-on-brand);
  background: linear-gradient(180deg, #5F1419 0%, #CD2823 50%, #5F1419 100%);
}
.w-root .w-sec--zweifarbig::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #5F1419 0%, #2C6359 50%, #5F1419 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 70%);
          mask-image: linear-gradient(90deg, transparent 30%, #000 70%);
}
.w-root .w-sec--zweifarbig .w-head .w-eyebrow,
.w-root .w-sec--zweifarbig .w-head .w-h2,
.w-root .w-sec--zweifarbig .w-head .w-lead { color: #FFFFFF; }
.w-root .w-sec--zweifarbig .w-head .w-lead { opacity: .92; }
.w-root .w-sec--zweifarbig .w-card { border-color: transparent; box-shadow: 0 18px 40px rgba(0, 0, 0, .22); }
.w-root .w-sec--zweifarbig .w-card:nth-child(1) .w-eyebrow { color: #CD2823; }
.w-root .w-sec--zweifarbig .w-card:nth-child(2) .w-eyebrow { color: #2C6359; }
@media (max-width: 720px) {
  .w-root .w-sec--zweifarbig {
    background: linear-gradient(180deg, #5F1419 0%, #CD2823 30%, #5F1419 52%, #2C6359 76%, #5F1419 100%);
  }
  .w-root .w-sec--zweifarbig::before { display: none; }
}

/* Herzhalt: Dachseiten (Start, Ueber uns, Karriere, Kontakt, Rechtstexte,
   Danke, 404) sprechen fuer Herzhalt als Ganzes und tragen nur das Rot.
   Gruen, Rot #CD2823 und Blau erscheinen dort nur an Bausteinen, die direkt
   auf eines der beiden Unternehmen verweisen (Karte oder Reihe mit Link). */
.w-bereich--dach {
  --c-accent: #5F1419; --c-accent-soft: #EFE8E8; --c-on-accent: #FFFFFF; --c-accent-hell: #F3CBCD;
  --c-bereich: #5F1419; --c-bereich-on: #FFFFFF;
  --c-bereich-btn: #5F1419; --c-bereich-btn-on: #FFFFFF;
  --c-bereich-text: #5F1419; --c-bereich-soft: #EFE8E8;
  --focus: 3px solid #5F1419;
}
/* Zweites Hero-Band sonst gleichfarbig mit dem ersten: dunklerer Rotton. */
.w-root.w-bereich--dach .w-hero--band .w-hero__band--accent { background: #470F13; }
@media (max-width: 860px) {
  .w-root.w-bereich--dach .w-hero--band .w-hero__band--accent { background: none; }
}
/* Auf roten Flaechen waere ein roter Akzentbutton unsichtbar: dort weiss. */
.w-root.w-bereich--dach .w-sec--brand .w-btn--accent,
.w-root.w-bereich--dach .w-sec--brand .w-btn--accent:link,
.w-root.w-bereich--dach .w-sec--brand .w-btn--accent:visited,
.w-root.w-bereich--dach .w-sec--dark .w-btn--accent,
.w-root.w-bereich--dach .w-sec--dark .w-btn--accent:link,
.w-root.w-bereich--dach .w-sec--dark .w-btn--accent:visited {
  background: #FFFFFF; border-color: #FFFFFF; color: #5F1419;
}
.w-root.w-bereich--dach .w-sec--brand .w-card > .w-icon,
.w-root.w-bereich--dach .w-sec--dark .w-card > .w-icon { background: #FFFFFF; color: #5F1419; }
/* Direkter Verweis auf ein Unternehmen: dessen Farbe. */
.w-bereich--dach :is(.w-card, .w-reihe):has(a[href*="/alltagsbegleitung/"]) {
  --c-accent: #CD2823; --c-accent-soft: #FAEAE9;
  --c-bereich: #CD2823; --c-bereich-btn: #CD2823; --c-bereich-text: #CD2823; --c-bereich-soft: #FAEAE9;
}
.w-bereich--dach :is(.w-card, .w-reihe):has(a[href*="/pflegedienst/"]) {
  --c-accent: #2C6359; --c-accent-soft: #E7EFED;
  --c-bereich: #2C6359; --c-bereich-btn: #2C6359; --c-bereich-text: #2C6359; --c-bereich-soft: #E7EFED;
}

/* Herzhalt: Zwei-Bereiche-Verlauf, Rot dominiert (Revision 27.10.).
   Grund ist durchgehend Dunkelrot. Links liegt ein Schleier Rot #CD2823,
   rechts ein schmalerer, halbtransparenter Schleier Gruen #2C6359 #2C6359. */
.w-root .w-sec--zweifarbig { background: #5F1419; }
.w-root .w-sec--zweifarbig::before,
.w-root .w-sec--zweifarbig::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.w-root .w-sec--zweifarbig::before {
  background: linear-gradient(180deg, rgba(205,40,35,0) 0%, rgba(205,40,35,.95) 50%, rgba(205,40,35,0) 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 25%, transparent 62%);
          mask-image: linear-gradient(90deg, #000 25%, transparent 62%);
}
.w-root .w-sec--zweifarbig::after {
  background: linear-gradient(180deg, rgba(44,99,89,0) 18%, rgba(44,99,89,.55) 56%, rgba(44,99,89,0) 92%);
  -webkit-mask-image: linear-gradient(90deg, transparent 45%, #000 85%);
          mask-image: linear-gradient(90deg, transparent 45%, #000 85%);
}
@media (max-width: 720px) {
  .w-root .w-sec--zweifarbig {
    background: linear-gradient(180deg, #5F1419 0%, #CD2823 28%, #5F1419 52%, #5F1419 62%, #31375D 80%, #5F1419 100%);
  }
  .w-root .w-sec--zweifarbig::before, .w-root .w-sec--zweifarbig::after { display: none; }
}

/* Herzhalt: Dropdowns in der Farbe des jeweiligen Unternehmens, auf jeder
   Seite. Erste Gruppe Alltagsbegleitung (Rot #CD2823), zweite Pflegedienst
   (Blau #2C6359): Kante oben, Hover und aktive Unterseite. */
.w-nav > .w-nav__gruppe:nth-child(1), .w-navmob__panel > .w-navmob__gruppe:nth-child(1) {
  --c-bereich: #CD2823; --c-bereich-text: #CD2823; --c-bereich-soft: #FAEAE9;
}
.w-nav > .w-nav__gruppe:nth-child(2), .w-navmob__panel > .w-navmob__gruppe:nth-child(2) {
  --c-bereich: #2C6359; --c-bereich-text: #2C6359; --c-bereich-soft: #E7EFED;
}
.w-nav .w-nav__drop { border-top: 3px solid var(--c-bereich); }
.w-navmob__sub { border-left-color: var(--c-bereich); }

/* Herzhalt: Startseite, Karten der beiden Unternehmen. Buttons gefuellt in
   der jeweiligen Unternehmensfarbe, beim Hover eine Stufe dunkler. */
.w-root .w-sec--zweifarbig .w-card:nth-child(1) .w-btn,
.w-root .w-sec--zweifarbig .w-card:nth-child(1) .w-btn:link,
.w-root .w-sec--zweifarbig .w-card:nth-child(1) .w-btn:visited {
  background: #CD2823; border-color: #CD2823; color: #FFFFFF;
}
.w-root .w-sec--zweifarbig .w-card:nth-child(1) .w-btn:hover,
.w-root .w-sec--zweifarbig .w-card:nth-child(1) .w-btn:focus-visible {
  background: #A51F1B; border-color: #A51F1B; color: #FFFFFF;
}
.w-root .w-sec--zweifarbig .w-card:nth-child(2) .w-btn,
.w-root .w-sec--zweifarbig .w-card:nth-child(2) .w-btn:link,
.w-root .w-sec--zweifarbig .w-card:nth-child(2) .w-btn:visited {
  background: #2C6359; border-color: #2C6359; color: #FFFFFF;
}
.w-root .w-sec--zweifarbig .w-card:nth-child(2) .w-btn:hover,
.w-root .w-sec--zweifarbig .w-card:nth-child(2) .w-btn:focus-visible {
  background: #004E79; border-color: #004E79; color: #FFFFFF;
}

/* Herzhalt: Hero-Video der Startseite. Bei reduzierter Bewegung bleibt nur
   das Standbild darunter sichtbar. */
.w-hero__media--video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Kein z-index: Das Video liegt durch die Reihenfolge ueber dem Standbild
   und bleibt so unter den Textbaendern. */
@media (prefers-reduced-motion: reduce) { .w-hero__media--video > video { display: none; } }

/* Herzhalt: Orts-Chips beim Hover/Fokus. Die allgemeine Linkregel
   (0,4,2) faerbte die Schrift in Flaechenfarbe, sie verschwand. */
.w-root a.w-chip:not(.w-btn):not(.w-nav a):hover,
.w-root a.w-chip:not(.w-btn):not(.w-nav a):focus-visible { color: #FFFFFF; background: var(--c-bereich-text); border-color: var(--c-bereich-text); }

/* Herzhalt: Orts-Chips. Der Link war inline, sein Innenabstand zaehlte nicht
   zur Zeilenhoehe, die Reihen lagen aufeinander. */
.w-chips { gap: .75rem .6rem; }
.w-chips > li { display: flex; }
.w-chip { display: inline-block; line-height: 1.3; }

/* Herzhalt: Hero-Baender (Revision 28.10.). Beim Oeffnen stehen sie an der
   bisherigen Stelle (Inhaltsspalte, mit Abstand zum Bildrand) und wandern
   dann langsam bis in die untere linke Ecke des Heros, wo sie bleiben.
   Endlage = Ecke ohne Abstand; die Startlage wird per transform vorgegeben.
   Nur ab 861px, darunter stehen die Baender unter dem Bild. */
@media (min-width: 861px) {
  .w-hero--band .w-hero__inner { padding-bottom: 0; }
  .w-hero--band .w-hero__inner > .w-wrap { max-width: none; margin: 0; padding-inline: 0; }
  .w-hero--band .w-hero__bands {
    --hz-start-x: calc(max(0px, (100vw - var(--w-wrap)) / 2) + var(--sp-pad));
    --hz-start-y: calc(-1 * clamp(1.5rem, 1rem + 2.2vw, 3rem));
  }
}
@keyframes hz-hero-ecke {
  from { transform: translate(var(--hz-start-x), var(--hz-start-y)); }
  to   { transform: none; }
}
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .w-hero--band .w-hero__bands { animation: hz-hero-ecke 2.6s cubic-bezier(.45, 0, .2, 1) .6s both; }
}

/* Herzhalt: Hero-Baender (Revision 28.10. b). Langsamer und weicher; das
   kleine obere Band schliesst dabei bis ohne Luecke an das untere an. */
@media (min-width: 861px) {
  .w-hero--band .w-hero__bands { gap: 0; }
}
@keyframes hz-hero-ecke-2 {
  from {
    transform: translate(var(--hz-start-x), var(--hz-start-y));
    gap: clamp(.7rem, .4rem + .9vw, 1.15rem);
  }
  to { transform: none; gap: 0; }
}
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .w-hero--band .w-hero__bands { animation: hz-hero-ecke-2 4.8s cubic-bezier(.65, 0, .35, 1) .5s both; }
}
/* Wo die Baender aneinanderstossen, laufen die Ecken mit der Bewegung gerade. */
@keyframes hz-band-oben { from { border-bottom-left-radius: var(--r-md); } to { border-bottom-left-radius: 0; } }
@keyframes hz-band-unten { from { border-top-left-radius: var(--r-md); } to { border-top-left-radius: 0; } }
@media (min-width: 861px) {
  .w-hero--band .w-hero__band:first-child:not(:only-child) { border-bottom-left-radius: 0; }
  .w-hero--band .w-hero__band:nth-child(2) { border-top-left-radius: 0; }
}
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .w-hero--band .w-hero__band:first-child:not(:only-child) { animation: hz-band-oben 4.8s cubic-bezier(.65, 0, .35, 1) .5s both; }
  .w-hero--band .w-hero__band:nth-child(2) { animation: hz-band-unten 4.8s cubic-bezier(.65, 0, .35, 1) .5s both; }
}

/* Herzhalt: Karrierevideo YouTube, Zwei-Klick. Der Platzhalter ist ein Button. */
button.w-yt { border: 0; font: inherit; cursor: pointer; width: 100%; white-space: normal; }
button.w-yt:hover .w-vph__glyph, button.w-yt:focus-visible .w-vph__glyph { background: rgba(255,255,255,.16); }
.w-embed > iframe.w-yt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--r-md); }

/* Herzhalt: Vorschaubilder der YouTube-Videos. Lokal gespeichert, damit vor dem
   Klick keine Verbindung zu YouTube entsteht. Abdunklung fuer lesbare Schrift. */
button.w-yt--bild { background-size: cover; background-position: center; overflow: hidden; color: #FFFFFF; }
button.w-yt--bild::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.65) 100%); transition: background .2s ease; }
button.w-yt--bild:hover::before, button.w-yt--bild:focus-visible::before { background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.55) 100%); }
button.w-yt--bild > * { position: relative; z-index: 1; }
button.w-yt--bild .w-vph__glyph { background: rgba(255,255,255,.18); }
button.w-yt--bild .w-vph__label, button.w-yt--bild .w-vph__note { text-shadow: 0 1px 3px rgba(0,0,0,.5); }


/* Herzhalt: Hover an Stellen/FAQ. bereich-soft lag fast auf der Sektionsflaeche
   (bg-alt) und hob sich nicht ab. Jetzt Bereichs-Textfarbe (dunkel, wie Chips) mit weisser Schrift. */
.w-root .w-acc__item > summary:hover,
.w-root .w-acc__item > summary:focus-visible { background: var(--c-bereich-text); color: #FFFFFF; }
.w-root .w-acc__item > summary:hover .w-job__meta,
.w-root .w-acc__item > summary:focus-visible .w-job__meta { color: #FFFFFF; opacity: .9; }
.w-root .w-acc__item > summary:hover::after,
.w-root .w-acc__item > summary:focus-visible::after { border-color: #FFFFFF; }


/* --- Pflegegrade als Kartenstapel (Revision 04.11.2026) -----------------------
   Ohne Skript stehen die Karten untereinander. Mit Skript (Klasse
   w-stapel--an) liegen sie hintereinander; ein Klick holt die naechste nach
   vorn, die Auswahlknoepfe springen direkt zu einem Pflegegrad. */
.w-stapel { display: grid; gap: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); }
.w-stapel__chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.w-root .w-stapel__chip { appearance: none; border: 1px solid var(--c-line); background: var(--c-bg); color: var(--c-ink);
  font: inherit; font-size: var(--t-small); font-weight: 600; padding: .55rem 1rem; border-radius: 999px;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.w-root .w-stapel__chip:hover { border-color: var(--c-bereich, var(--c-brand)); color: var(--c-bereich, var(--c-brand)); }
.w-root .w-stapel__chip[aria-pressed="true"] { background: var(--c-bereich, var(--c-brand)); border-color: var(--c-bereich, var(--c-brand)); color: var(--c-bereich-on, #FFFFFF); }
.w-stapel__deck { display: grid; gap: 1.25rem; max-width: 760px; }
.w-stapel__karte { background: #FFFFFF; border: 1px solid var(--c-line); border-radius: var(--r-md, 18px);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); box-shadow: 0 18px 40px -22px rgba(45, 45, 45, .30);
  display: flex; flex-direction: column; gap: 1rem; }
.w-stapel__kopf { display: flex; align-items: center; gap: 1rem; }
.w-stapel__marke { flex: 0 0 auto; width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-bereich, var(--c-brand)); color: var(--c-bereich-on, #FFFFFF); font-weight: 800; font-size: 1.35rem; }
.w-root .w-stapel__unter { margin-top: .2rem; font-size: var(--t-small); color: var(--c-ink-soft); }
.w-stapel__text { color: var(--c-ink-soft); }
.w-root .w-stapel__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.w-stapel__liste li { display: flex; gap: .6rem; align-items: flex-start; }
.w-stapel__liste svg { flex: 0 0 auto; margin-top: .25rem; color: var(--c-bereich, var(--c-brand)); }
.w-stapel__fuss { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--c-line); display: flex;
  align-items: center; justify-content: space-between; gap: 1rem; }
.w-stapel__zahl { font-size: var(--t-small); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.w-root .w-stapel__weiter { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-weight: 700;
  color: var(--c-bereich, var(--c-brand)); display: inline-flex; align-items: center; gap: .4rem; text-align: right; }
.w-root .w-stapel__weiter svg { transition: transform .25s ease; }
.w-root .w-stapel__weiter:hover svg { transform: translateX(3px); }

/* Stapelansicht */
.w-stapel--an .w-stapel__deck { display: grid; gap: 0; padding: 0 calc(3 * var(--stapel-x)) calc(3 * var(--stapel-y)) 0;
  --stapel-x: clamp(10px, 1.6vw, 22px); --stapel-y: clamp(10px, 1.4vw, 18px); }
.w-stapel--an .w-stapel__karte { grid-area: 1 / 1; transform-origin: 0 0;
  transform: translate(calc(var(--pos, 0) * var(--stapel-x)), calc(var(--pos, 0) * var(--stapel-y))) scale(calc(1 - var(--pos, 0) * .025));
  z-index: calc(10 - var(--pos, 0)); transition: transform .5s cubic-bezier(.2, .8, .3, 1), opacity .4s ease, filter .4s ease; }
.w-stapel--an .w-stapel__karte:not([data-pos="0"]) { filter: brightness(.985); }
.w-stapel--an .w-stapel__karte:not([data-pos="0"]) > * { opacity: 0; transition: opacity .2s ease; }
.w-stapel--an .w-stapel__karte[data-pos="0"] > * { opacity: 1; transition: opacity .35s ease .12s; }
.w-stapel--an .w-stapel__karte[data-tief="1"] { opacity: 0; }
.w-stapel--an .w-stapel__karte { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .w-stapel--an .w-stapel__karte, .w-stapel--an .w-stapel__karte > * { transition: none; } }

@media (min-width: 900px) {
  .w-stapel { grid-template-columns: minmax(200px, 260px) minmax(0, 820px); align-items: start; justify-content: center; gap: clamp(2rem, 1rem + 3vw, 4.5rem); }
  .w-stapel__chips { flex-direction: column; flex-wrap: nowrap; position: sticky; top: 7rem; }
  .w-root .w-stapel__chip { text-align: left; padding: .85rem 1.2rem; font-size: var(--t-body); border-radius: 14px; }
}
.w-stapel--an .w-stapel__deck { width: 100%; --stapel-x: clamp(14px, 2.2vw, 30px); --stapel-y: clamp(12px, 1.8vw, 24px); }
.w-stapel--an .w-stapel__karte:not([data-pos="0"]) { filter: none; background: #FBF9F9; box-shadow: 0 10px 26px -18px rgba(45, 45, 45, .35); }
.w-stapel--an .w-stapel__karte:not([data-pos="0"]):hover { background: #F4F1F1; }


/* --- Fachinhalte Pflegedienst (Revision 04.11.2026) --- */
.w-fach { list-style: none; margin: 0; padding: 0; }
.w-fach .w-card__icon, .w-kasse .w-card__icon { color: var(--c-bereich, var(--c-brand)); }
.w-hinweisbox { margin-top: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  background: var(--c-bg); border: 1px solid var(--c-line); border-left: 4px solid var(--c-bereich, var(--c-brand)); border-radius: var(--r-md); }
.w-hinweisbox__schritte { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); counter-reset: hb; }
.w-hinweisbox__schritte li { display: grid; gap: .35rem; align-content: start; counter-increment: hb; color: var(--c-ink-soft); }
.w-hinweisbox__schritte strong { color: var(--c-ink); }
.w-hinweisbox__schritte strong::before { content: counter(hb) ". "; color: var(--c-bereich, var(--c-brand)); }
@media (max-width: 800px) { .w-hinweisbox__schritte { grid-template-columns: 1fr; } }
#pflege-finanzierung > .w-wrap > ul { list-style: none; margin: 0; padding: 0; }
.w-kasse__kopf { display: flex; align-items: center; gap: 1rem; }
.w-kasse__kopf .w-h3 { margin: 0; }
.w-kasse__unter { margin: .15rem 0 0; font-size: var(--t-small); color: var(--c-ink-soft); }
.w-kasse__bedingung { margin: 0; padding: .55rem .85rem; border-radius: var(--r-sm, 8px); font-weight: 600; color: var(--c-ink);
  background: color-mix(in srgb, var(--c-bereich, var(--c-brand)) 10%, transparent); }
.w-fakten { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; color: var(--c-ink-soft); }
.w-fakten li { position: relative; padding-left: 1.6rem; }
.w-fakten li::before { content: ""; position: absolute; left: .1rem; top: .45em; width: .75rem; height: .4rem;
  border-left: 2px solid var(--c-bereich, var(--c-brand)); border-bottom: 2px solid var(--c-bereich, var(--c-brand)); transform: rotate(-45deg); }
.w-arten__kopf { margin-top: clamp(2rem, 1.4rem + 2vw, 3.25rem); margin-bottom: 1.25rem; }
.w-fach__notiz { margin: clamp(1.5rem, 1.1rem + 1vw, 2.25rem) 0 0; max-width: 62rem; color: var(--c-ink-soft); font-size: var(--t-small); line-height: 1.6; }
#pflege-finanzierung .w-btns { margin-top: 1.5rem; }
#pflege-finanzierung p.w-fach__notiz { margin-top: clamp(1.5rem, 1.1rem + 1vw, 2.25rem); }


/* --- Complianz-Platzhalter im Rahmen (Revision 05.11.2026) --- */
[class*="w-embed"] .cmplz-blocked-content-container, [class*="w-embed"] .cmplz-placeholder-element, [class*="w-embed"] .cmplz-blocked-content-container * { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; border-radius: var(--r-md); overflow: hidden; }
[class*="w-embed"] .cmplz-blocked-content-notice { background: var(--c-brand) !important; color: #fff !important; border: 0 !important; border-radius: var(--r-sm) !important; font: inherit !important; font-size: .95rem !important; padding: .8rem 1.1rem !important; max-width: min(90%, 340px); }

/* --- Bereichsleiste mobil: Eintraege nicht stauchen, waagerecht wischen (Revision 05.11.2026) --- */
.w-bereichnav__inner > a { flex: 0 0 auto; }

/* --- Cookie-Richtlinie wie die uebrigen Rechtstexte (Revision 05.11.2026) --- */
.w-recht #cmplz-document { max-width: none; font-size: inherit; }
.w-recht #cmplz-document h2 { font-size: var(--t-h2, 2rem); font-weight: 700; line-height: 1.2; margin: 2.2rem 0 .8rem; color: var(--c-ink); }
.w-recht #cmplz-document h3, .w-recht #cmplz-document summary h3 { font-size: var(--t-h3, 1.35rem); font-weight: 700; margin: 1.4rem 0 .5rem; color: var(--c-ink); }
.w-recht #cmplz-document p, .w-recht #cmplz-document li, .w-recht #cmplz-document td, .w-recht #cmplz-document span { font-size: 1.0625rem; line-height: 1.65; color: var(--c-ink-soft); }

/* cmplz-iframe-hidden-fix: leeres iframe deckt den Platzhalter nicht ab */
[class*="w-embed"] .cmplz-blocked-content-container > iframe.cmplz-placeholder-element { background: transparent !important; opacity: 0; }
[class*="w-embed"] .cmplz-blocked-content-container { background-color: var(--c-bg-alt) !important; }
.w-embed--karte .cmplz-blocked-content-container { height: 100% !important; box-shadow: none !important; }