/* ==========================================================================
   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.
   -------------------------------------------------------------------------- */
/* Proxima Nova, lokal eingebunden (uploads/site/fonts). 600 faellt auf Bold. */
@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNovaRegular.woff") format("woff"),
       url("fonts/ProximaNovaRegular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNovaBold.woff") format("woff"),
       url("fonts/ProximaNovaBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNovaBlack.woff") format("woff"),
       url("fonts/ProximaNovaBlack.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


: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. */
  --c-brand:        #3C1577;   /* Hauptfarbe (design-system.md: brand) */
  --c-brand-dark:   #2B0F56;   /* Footer, Hover (abgeleitet: brand, Helligkeit x0,72) */
  --c-brand-soft:   #EFECF4;   /* abgeleitet: brand 8 % ueber Weiss */
  --c-accent:       #D3CEEA;   /* Zweitakzent (design-system.md: accent) — nur Flaeche, nie Schrift auf Weiss */
  --c-accent-soft:  #E8E5F3;   /* abgeleitet: accent 45 % ueber Weiss */

  /* 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:          #1B2027;   /* design-system.md: ink */
  --c-ink-soft:     #4A5260;   /* abgeleitet: ink aufgehellt, >= 5,1:1 auf allen Flaechen */
  --c-line:         #E4E2EA;   /* abgeleitet: ink 12 % ueber Weiss, leicht in brand */
  --c-bg:           #FFFFFF;   /* design-system.md: bg */
  --c-bg-alt:       #F6F5FB;   /* design-system.md: bg_alt */
  --c-on-brand:     #FFFFFF;   /* abgeleitet: 13,4:1 auf brand */

  /* Schrift — Abschnitt 3. Immer mit vollstaendiger Systemschrift-Kette
     dahinter, nie eine Google-Fonts-Einbindung. */
  --f-text:    "Proxima Nova", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-display: "Proxima Nova", system-ui, -apple-system, "Segoe UI", 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(60, 21, 119, .10);
  --focus:     3px solid var(--c-brand);   /* accent waere auf Weiss nur 1,5:1 */
}

/* --------------------------------------------------------------------------
   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: #1A1207;
}
.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); }
.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: #1A1207;
  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: #1A1207; }

/* 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); }
  .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: #1A1207; }

.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. */
  --c-bereich:        var(--c-accent);
  --c-bereich-on:     #1A1207;
  --c-bereich-soft:   var(--c-accent-soft);
  --c-bereich-text:   var(--c-brand);
  --c-bereich-btn:    var(--c-accent);
  --c-bereich-btn-on: #1A1207;
  /* 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: #1A1207;
}
/* 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: #1A1207; }

/* --- 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); }
/* 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: #1A1207; }
.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-bereich); }
  .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: #1A1207;
}
.w-sec--brand .w-icon, .w-sec--dark .w-icon { color: var(--c-accent); }

/* --- 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);
}

.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); }
.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(59, 37, 15, .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); }

/* ==========================================================================
   18. Levivo — Ergaenzungen beim Bau (19.09.2026), siehe bauprotokoll.md
   Keine neuen Farben: alle Werte kommen aus den Tokens oben.
   ========================================================================== */

/* a) Sechs Menuepunkte plus Bewerbungsbutton brauchen mehr Breite als die
      vier Standardpunkte. Darunter die mobile Fassung, damit kein
      Menuepunkt umbricht oder ueberlappt (gestaltung.md, Abschnitt 13). */
.w-nav a { flex: 0 0 auto; }
.w-head-bar__actions .w-btn { white-space: nowrap; }
@media (max-width: 1290px) {
  .w-nav, .w-head-bar__actions { display: none; }
  .w-navmob { display: block; }
  .w-head-bar { position: sticky; top: 0; }
}

/* b) Linkregel auf dunklen Flaechen (gestaltung.md, Abschnitt 33): Die
      allgemeine Regel `.w-root a:not(.w-btn):not(.w-nav a):link` ist
      spezifischer als `.w-foot a` und `.w-sec--brand a` und faerbte Footer-
      und Bandlinks in brand auf brand-dark. Gleiche Selektorkette plus Flaeche. */
.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.w-contact__wert:not(.w-btn):not(.w-nav a):link,
.w-root .w-foot a.w-contact__wert:not(.w-btn):not(.w-nav a):visited { color: var(--c-on-brand); }
.w-root .w-foot a:not(.w-btn):not(.w-nav a):hover { color: var(--c-accent); }
.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); }

/* c) Videovorschau: Der Link .w-video hatte keine eigene Hoehe, dadurch sass
      die Play-Flaeche am oberen Rand statt mittig auf dem Vorschaubild. */
.w-embed > .w-video { position: absolute; inset: 0; }

/* d) Abstandsklassen: `.w-root p, h1…h4 { margin: 0 }` ist spezifischer als
      `.w-mt-*` und hat die Abstaende an Absaetzen und Zwischenueberschriften
      (Stellenanzeigen, Rechtstexte) geschluckt. */
.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-mt-0 { margin-top: 0; }

/* e) Kopfzeile etwas breiter als der Inhaltsrahmen, damit sechs Menuepunkte
      und der Bewerbungsbutton auch bei 1440 px mit Luft nebeneinander stehen. */
.w-head-bar > .w-wrap { max-width: 1400px; }

/* f) Auf der getoenten Sektionsflaeche (w-sec--soft = accent-soft) lagen
      Reihenmarken, Merklisten-Icons, Kachel-Icons und Panels in derselben
      Farbe wie der Grund und verschwanden. Dort traegt der volle Akzent. */
.w-sec--soft .w-reihe__marke,
.w-sec--soft .w-merk .w-icon,
.w-sec--soft .w-card > .w-icon { background: var(--c-accent); }
.w-sec--soft .w-panel { background: var(--c-bg); }

/* g) Karten mit Bildkopf: Das spaetere `.w-card { padding: … }` in Abschnitt 14
      ueberschrieb `.w-card--media { padding: 0 }`, das Portraet sass eingerueckt. */
.w-card.w-card--media { padding: 0; }

/* ==========================================================================
   19. Levivo — Revision 2 (19.09.2026)
   ========================================================================== */

/* a) Hero mit Hintergrundvideo (Startseite). Eigene MP4-Datei statt YouTube:
      kein Play-Button, kein Titelbalken, keine Einwilligung noetig.
      Bis das erste Bild da ist, traegt die Markenflaeche die Baender. */
.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;
}
/* iOS/Safari zeigt bei blockiertem Autoplay (Stromsparmodus) sonst einen
   eigenen Startknopf. */
.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;
}

/* b) Ken-Burns-Effekt auf jedem Hero-Bild: langsames Heran- und
      Wegzoomen, endlos. Ersetzt die einmalige Einblendung aus Abschnitt 16.
      Nicht auf Videos (die bewegen sich selbst) und nicht bei reduzierter
      Bewegung. Der Rahmen schneidet ab, das Layout bleibt stehen. */
@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;
  }
}


/* --------------------------------------------------------------------------
   20. Dauerhafte Kontaktleiste (mobil) und zweiter Kopfzeilen-Button

   Die Kontaktaufnahme muss auf jedem Geraet jederzeit erreichbar sein.
   Am Desktop stehen dafuer zwei Buttons in der Kopfzeile. Unterhalb des
   Umschaltpunkts (980 px) wandern diese ins Burger-Menue, deshalb
 uebernimmt dort eine feste Leiste am unteren Rand.
   -------------------------------------------------------------------------- */

/* Zwei Buttons brauchen in der Kopfzeile mehr Platz als einer. Zwischen
   980 und 1200 px werden Abstaende und Button-Innenabstand knapper, damit
   die Zeile einzeilig bleibt. */
@media (min-width: 981px) and (max-width: 1200px) {
  .w-nav { gap: 1rem; }
  .w-head-bar__inner { gap: .9rem; }
  .w-head-bar__actions { gap: .5rem; }
  .w-head-bar__actions .w-btn { padding-inline: .9rem; font-size: .9rem; }
}

.w-callbar { display: none; }

@media (max-width: 980px) {
  .w-callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--c-line);
    border-top: 1px solid var(--c-line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .w-callbar__btn {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 58px; padding: .5rem .75rem;
    background: var(--c-bg); color: var(--c-ink);
    font-weight: 700; text-decoration: none; font-size: 1rem;
  }
  .w-callbar__btn .w-icon { width: 20px; height: 20px; flex: none; }
  .w-callbar__btn--ruf { background: var(--c-brand); color: var(--c-on-brand); }
  .w-callbar__btn--ruf .w-icon { color: var(--c-on-brand); }

  /* Damit die Leiste den Fussbereich nicht verdeckt. */
  .w-root { padding-bottom: 58px; }

  /* Sprunganker muessen ueber der Leiste landen. */
  .w-root [id] { scroll-margin-top: 1.5rem; }
}


/* --------------------------------------------------------------------------
   21. Sprungliste, Wochenplan, Bildstreifen

   Drei Bausteine, die aus bestehenden Teilen abgeleitet sind: die Sprungliste
   ist eine w-linkliste ohne Icon, der Wochenplan eine schmale Kartenreihe,
   der Bildstreifen eine Reihe, die alle drei Sekunden ein Bild weiterrueckt.
   -------------------------------------------------------------------------- */

/* Sprungliste: wie die Linkliste, nur ohne Icon-Spalte. */
.w-sprungliste a { grid-template-columns: 1fr auto; }
.w-sprungliste a[aria-current="true"] { border-color: var(--c-brand); background: var(--c-brand-soft); }

/* Wochenplan: drei grosse Karten in der ersten Reihe, vier in der zweiten.
   Zwoelf Spalten machen beides moeglich: erst 3 x 4 Spalten, dann 4 x 3.
   Unter 900 px zwei Karten je Reihe, unter 560 px eine. */
.w-wochenplan {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(.7rem, .55rem + .5vw, 1rem);
}
.w-wochenplan .w-card {
  grid-column: span 4;
  padding: clamp(1.25rem, 1rem + .9vw, 2rem);
  gap: .9rem;
  text-align: center;
  align-content: start;
}
.w-wochenplan .w-card:nth-child(n + 4) { grid-column: span 3; }
.w-wochenplan .w-tag {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.05rem, .95rem + .35vw, 1.3rem);
  line-height: 1.2;
  color: var(--c-ink);
}
.w-wochenplan .w-slot { display: grid; gap: .15rem; }
.w-wochenplan .w-slot__zeit {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--c-brand);
}
.w-wochenplan .w-slot__was {
  font-size: clamp(.95rem, .9rem + .2vw, 1.08rem);
  color: var(--c-ink-soft);
  line-height: 1.4;
}
@media (max-width: 900px) {
  .w-wochenplan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-wochenplan .w-card,
  .w-wochenplan .w-card:nth-child(n + 4) { grid-column: auto; }
}
@media (max-width: 560px) {
  .w-wochenplan { grid-template-columns: 1fr; }
}

/* Hilfsklasse: Abstand nach unten, Gegenstueck zu .w-mt-3. */
.w-mb-3 { margin-bottom: 2.25rem; }
.w-root .w-mb-3 { margin-bottom: 2.25rem; }


/* --------------------------------------------------------------------------
   22. levivo living — Bausteine aus Broschuere und Expose

   Die Drucksachen zum Betreuten Wohnen (Broschuere und Expose, Stand
   09.09.2026) haben eine eigene, fertige Bildsprache: Augenbrauen-Zeile,
   violette Ueberschrift mit kurzer Minzlinie darunter, Kennzahlenband in
   Violett, Karten mit violetter Kante und Symbol, helle Flieder- und
   Minzfelder fuer Hinweise, Tabellen mit duennen Linien, eine grosse Zahl
   als Preisanker. Diese Bausteine bilden genau das nach — mit den Tokens
   der Website, damit die Seite dieselbe Seite bleibt.
   -------------------------------------------------------------------------- */

:root {
  --c-mint:      #96DAC5;   /* Zweitakzent der Drucksachen (Linie, Balken) */
  --c-mint-soft: #DCF1EA;   /* Flaeche fuer Hinweisfelder */
  --c-flieder:   #EFEDF8;   /* Flaeche der Drucksachen, heller als accent-soft */
}

/* a) Minzlinie unter der Ueberschrift — das Erkennungszeichen jeder
      Doppelseite. Nur als Zusatzklasse, nie als Standard. */
.w-h2--linie::after,
.w-h3--linie::after {
  content: "";
  display: block;
  width: 4.5rem; height: 4px;
  margin-top: .85rem;
  border-radius: 2px;
  background: var(--c-mint);
}

/* b) Zitatzeile mit Balken (Expose Seite 3, Broschuere Seite 2). */
.w-zitatzeile {
  margin-top: 1.75rem;
  padding-left: 1.1rem;
  border-left: 4px solid var(--c-brand);
  font-family: var(--f-display);
  font-size: var(--t-lead);
  font-style: italic;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-ink);
}

/* c) Kennzahlenband: breiter Streifen in Violett mit leichtem Verlauf. */
.w-sec--verlauf { background-image: linear-gradient(104deg, #43198A 0%, #2F0E62 100%); }

/* d) Karte mit violetter Kante — die Grundleistungen. Die leise Variante
      ohne Kante steht fuer alles, was zusaetzlich buchbar ist. */
.w-card--kante { border-left: 4px solid var(--c-brand); }
.w-root .w-card--leise { background: var(--c-flieder); border-color: transparent; }

/* e) Dunkle Karte fuer Betraege (Expose Seite 6). */
.w-root .w-card--dunkel {
  background: var(--c-brand);
  border-color: var(--c-brand);
}
.w-card--dunkel .w-h3,
.w-card--dunkel .w-betrag { color: #FFFFFF; }
.w-card--dunkel .w-card__text { color: rgba(255, 255, 255, .86); }
.w-card--dunkel > .w-icon { background: rgba(255, 255, 255, .16); color: #FFFFFF; }
.w-betrag {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-brand);
}

/* f) Hinweisfeld in Minz — in den Drucksachen traegt es immer den Satz,
      der eine Sorge ausraeumt. Deshalb anders eingefaerbt als das
      Flieder-Feld, das Zusatzangebote erklaert. */
.w-panel--mint { background: var(--c-mint-soft); border-left-color: #3FA98B; }
.w-panel--mint .w-panel__label { color: #1C6450; }

/* g) Zeitplan: drei Phasen mit farbigem Balken oben (Expose Seite 7). */
.w-phasen {
  display: grid; gap: var(--sp-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(1.5rem, 1.1rem + 1vw, 2.15rem);
}
.w-phase { padding-top: 1.1rem; border-top: 6px solid var(--c-line); }
.w-phase--eins { border-top-color: var(--c-mint); }
.w-phase--zwei { border-top-color: var(--c-brand); }
.w-phase--drei { border-top-color: var(--c-accent); }
.w-phase__label {
  display: block; margin-bottom: .35rem;
  font-size: var(--t-small); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--c-ink-soft);
}
.w-phase .w-h3 { color: var(--c-brand); }
.w-phase p { margin-top: .5rem; font-size: var(--t-body); color: var(--c-ink-soft); line-height: 1.55; }
@media (max-width: 820px) { .w-phasen { grid-template-columns: 1fr; } }

/* h) Rautenliste — die Ausstattungsliste der Drucksachen. Zwei Spalten,
      damit sechs Punkte nicht sechs Kacheln brauchen. */
.w-raute {
  display: grid; gap: .8rem clamp(1.5rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(1.25rem, 1rem + .8vw, 1.75rem);
}
.w-raute > li {
  display: grid; grid-template-columns: auto 1fr; gap: .75rem;
  font-size: var(--t-body); line-height: 1.5; color: var(--c-ink-soft);
}
.w-raute > li::before {
  content: "\25C6";
  color: var(--c-brand);
  font-size: .72em;
  line-height: 1.9;
}
.w-raute strong { color: var(--c-ink); }
@media (max-width: 760px) { .w-raute { grid-template-columns: 1fr; } }

/* i) Tabelle mit duennen Linien. Unter 720 px wird jede Zeile zu einem
      Block; die Spaltennamen stehen dann vor dem Wert (data-spalte). */
.w-tabelle { width: 100%; border-collapse: collapse; margin-top: clamp(1.25rem, 1rem + .8vw, 1.75rem); }
.w-tabelle th {
  text-align: left;
  padding: .55rem .85rem;
  font-size: var(--t-small); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-brand);
  border-bottom: 2px solid var(--c-brand);
  white-space: nowrap;
}
.w-tabelle td {
  padding: .8rem .85rem;
  font-size: var(--t-body); color: var(--c-ink-soft);
  border-bottom: 1px solid var(--c-line);
  vertical-align: baseline;
}
.w-tabelle td:first-child { font-weight: 700; color: var(--c-ink); white-space: nowrap; }
.w-tabelle .w-zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.w-tabelle tbody tr:nth-child(even) td { background: var(--c-bg-alt); }
.w-tabelle .w-chip { padding: .3rem .75rem; font-size: .8125rem; }
.w-tabelle .w-chip--frei { border-color: #3FA98B; background: var(--c-mint-soft); color: #14523F; }
@media (max-width: 720px) {
  .w-tabelle, .w-tabelle tbody, .w-tabelle tr, .w-tabelle td { display: block; width: 100%; }
  .w-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .w-tabelle tr {
    margin-bottom: .85rem; padding: .35rem .95rem .6rem;
    border: 1px solid var(--c-line); border-left: 4px solid var(--c-brand);
    border-radius: var(--r-md);
  }
  .w-tabelle td { border-bottom: 0; padding: .35rem 0; }
  .w-tabelle tbody tr:nth-child(even) td { background: transparent; }
  .w-tabelle td[data-spalte]::before {
    content: attr(data-spalte) ": ";
    font-size: var(--t-small); color: var(--c-ink-soft);
  }
  .w-tabelle td:first-child::before { content: ""; }
  .w-tabelle td:first-child { font-size: var(--t-lead); padding-top: .55rem; }
}

/* j) Preisanker: eine sehr grosse Zahl auf Fliederflaeche. Die Zahl steht
      vollstaendig im Markup — bewegung.js zaehlt sie nur hoch, wenn das
      Feld ins Bild kommt. Ohne Skript steht sofort der Endwert da. */
.w-preisfeld {
  max-width: 48rem; margin-inline: auto;
  padding: clamp(1.75rem, 1.3rem + 1.8vw, 3rem) clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem);
  border-radius: var(--r-lg);
  background: var(--c-flieder);
  text-align: center;
}
.w-grosszahl {
  display: flex; align-items: baseline; justify-content: center;
  flex-wrap: wrap; gap: .5rem;
  margin-top: .6rem;
}
.w-grosszahl__wert {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(4rem, 2.2rem + 9vw, 8.5rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
}
.w-grosszahl__dazu {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.1rem, .95rem + .7vw, 1.6rem);
  color: var(--c-ink);
}
.w-preisfeld .w-eyebrow { color: var(--c-ink-soft); }
.w-preisfeld .w-text { max-width: 54ch; margin-inline: auto; }

/* k) Ortskachel — die Entfernungen der Broschuere, Symbol ueber der Zahl. */
.w-kachel {
  display: grid; justify-items: center; gap: .35rem;
  padding: clamp(1rem, .8rem + .7vw, 1.5rem) .75rem;
  border-radius: var(--r-md);
  background: var(--c-flieder);
  text-align: center;
}
.w-kachel .w-icon { --icon: 1.5rem; color: var(--c-brand); margin-bottom: .2rem; }
.w-kachel .w-stat__value { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
.w-kachel .w-stat__label { font-size: .875rem; }

/* l) Kleingedrucktes: zieht ueber die ganze Breite und laeuft in zwei
      Spalten, damit der Pflichttext nicht als Textwand dasteht. */
.w-kleingedrucktes {
  columns: 2; column-gap: clamp(2rem, 1rem + 4vw, 4rem);
  margin-top: 1.25rem;
  font-size: .8125rem; line-height: 1.6; color: var(--c-ink-soft);
}
.w-kleingedrucktes p { max-width: none; margin: 0 0 .85rem; break-inside: avoid; }
.w-kleingedrucktes p:last-child { margin-bottom: 0; }
.w-kleingedrucktes strong { color: var(--c-ink); font-weight: 700; }
@media (max-width: 760px) { .w-kleingedrucktes { columns: 1; } }

/* Das Eurozeichen gehoert optisch zur Zahl, darf sie aber nicht ueberwiegen.
   Es steht ausserhalb des Zaehlfeldes, weil das Zaehlwerk dessen Textinhalt
   ersetzt. */
.w-grosszahl__euro {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(2.2rem, 1.4rem + 4vw, 4.2rem);
  line-height: 1;
  color: var(--c-brand);
}
.w-grosszahl__dazu { padding-bottom: .35rem; margin-left: .35rem; }


/* --------------------------------------------------------------------------
   Bildstreifen

   Eine Reihe Bilder ueber die volle Breite, die alle drei Sekunden um genau
   ein Bild weiterrueckt: links laeuft eines hinaus, von rechts kommt das
   naechste nach. Die Bilder behalten ihr Seitenverhaeltnis, deshalb ist jeder
   Schritt unterschiedlich weit — genau das macht die Bewegung lebendig.
   Endlos laeuft er, weil bewegung.js das durchgelaufene Bild hinten wieder
   anhaengt; Pfeile zum Weiterschalten setzt ebenfalls das Skript.

   Ohne Skript steht der Streifen still und zeigt die ersten Bilder. Es ist
   also nie etwas leer, nur unbewegt.
   -------------------------------------------------------------------------- */
.w-streifen { position: relative; overflow: hidden; }
.w-streifen__spur { display: flex; gap: .5rem; width: max-content; }
.w-streifen .w-media {
  flex: none;
  height: clamp(220px, 13rem + 13vw, 460px);
  width: auto;
  border-radius: 0;
}
.w-streifen__pfeil {
  position: absolute; top: 50%; z-index: 2;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--c-brand);
  box-shadow: 0 2px 10px rgba(27, 32, 39, .18);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.w-streifen__pfeil:hover { background: var(--c-brand); color: #FFFFFF; }
.w-streifen__pfeil:focus-visible { outline: var(--focus); outline-offset: 2px; }
.w-streifen__pfeil svg {
  width: 1.3rem; height: 1.3rem;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.w-streifen__pfeil--zurueck { left: clamp(.5rem, 2vw, 1.5rem); }
.w-streifen__pfeil--vor { right: clamp(.5rem, 2vw, 1.5rem); }

/* --------------------------------------------------------------------------
   23. Minzton als zweiter Akzent auf allen Seiten

   Der Minzton stammt aus den Drucksachen von levivo living. Damit er nicht
   wie eine Fremdfarbe nur auf einer Unterseite steht, traegt er ab hier drei
   wiederkehrende Stellen der ganzen Website: die kurze Linie unter jeder
   Sektionsueberschrift, die Schrittnummern und die Oberkante des Fusses.
   Mehr nicht — er soll Akzent bleiben, nicht zweite Hauptfarbe werden.
   -------------------------------------------------------------------------- */

/* a) Kurze Linie unter der Sektionsueberschrift. */
.w-root .w-head .w-h2::after {
  content: "";
  display: block;
  width: 4.5rem; height: 4px;
  margin-top: .85rem;
  border-radius: 2px;
  background: var(--c-mint);
}
.w-root .w-head--center .w-h2::after { margin-inline: auto; }

/* b) Schrittnummern: Minzflaeche, Schrift in der Hauptfarbe. */
.w-root .w-step__num { background: var(--c-mint-soft); color: var(--c-brand); }
.w-sec--brand .w-step__num, .w-sec--dark .w-step__num { background: var(--c-mint); color: #10332A; }

/* c) Oberkante des Fusses. */
.w-foot { border-top: 4px solid var(--c-mint); }

/* d) Abschnitt mit Bild im Hintergrund. Das Bild liegt als eigenes Element
      darunter statt als background-image: so laedt es verzoegert und bleibt
      beim Bildtausch an einer Stelle, die man in der Mediathek wiederfindet.
      Der dunkle Schleier darueber haelt die Kachel lesbar. */
.w-sec--bild { position: relative; isolation: isolate; }
.w-sec--bild { padding-block: clamp(3.5rem, 2.4rem + 4.4vw, 6.5rem); }
.w-sec--bild > .w-sec__bild { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.w-sec--bild > .w-sec__bild img { width: 100%; height: 100%; object-fit: cover; }
.w-sec--bild > .w-sec__bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27, 32, 39, .42), rgba(27, 32, 39, .28));
}
.w-sec--bild .w-preisfeld {
  background: rgba(239, 237, 248, .96);
  box-shadow: 0 18px 50px rgba(27, 32, 39, .3);
}

/* --------------------------------------------------------------------------
   24. Hero, Fassung 2: Textkachel am linken Rand

   Vorbild ist der Titel der Broschuere: Die Kachel haengt am linken Rand und
   steht unten buendig auf der Bildkante, statt frei im Bild zu schweben. Der
   Text darin beginnt genau auf der Spaltenkante der Seite, damit Titel und
   Inhalt darunter fluchten — dafuer sorgt das max() in der linken Polsterung:
   auf schmalen Schirmen der normale Seitenrand, auf breiten der Abstand bis
   zur Mittelspalte. Unter 860 px wird daraus wieder ein voller Farbblock
   unter dem Bild; das war schon vorher so und bleibt.
   -------------------------------------------------------------------------- */
.w-hero { overflow: hidden; }
.w-hero--band .w-hero__inner {
  align-items: flex-end;
  padding-bottom: 0;
}
.w-hero--band .w-hero__inner > .w-wrap { max-width: none; padding-inline: 0; }
.w-hero--band .w-hero__bands {
  width: fit-content;
  max-width: min(100%, 60ch);
  gap: .4rem;
  padding-block: clamp(1.1rem, .85rem + 1.1vw, 1.9rem);
  padding-right: clamp(1.5rem, 1rem + 2.4vw, 3.25rem);
  padding-left: max(var(--sp-pad), calc((100% - var(--w-wrap)) / 2 + var(--sp-pad)));
  background: var(--c-brand);
  color: var(--c-on-brand);
  border-radius: 0 var(--r-lg) 0 0;
}
.w-hero--band .w-hero__band,
.w-hero--band .w-hero__band--accent {
  max-width: none;
  padding: 0;
  background: none;
}
/* Die obere Zeile ist die Augenbraue der Drucksachen: klein, gesperrt, in
   der Zweitfarbe — nicht ein zweites, gleich lautes Band. */
.w-hero--band .w-hero__band--accent {
  font-size: clamp(.95rem, .9rem + .25vw, 1.15rem);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.35;
  color: var(--c-accent);
}

@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__inner > .w-wrap { padding-inline: var(--sp-pad); }
  .w-hero--band .w-hero__bands {
    width: auto; max-width: none;
    padding: 0;
    background: none;
    border-radius: 0;
  }
}

/* Einfahren beim Seitenaufruf: Die Kachel kommt von links herein, einmal,
   knapp unter einer Sekunde. Sie ist dabei nie unsichtbar — sie steht nur
   kurz links ausserhalb des Bildes, und .w-hero schneidet das ab, deshalb
   entsteht auch keine Querscrollleiste. Faellt die Animation aus (altes
   System, reduzierte Bewegung), steht die Kachel sofort an ihrem Platz.
   Nur ab 861 px: darunter ist die Kachel ein voller Block unter dem Bild,
   bei dem ein Hereinfahren von der Seite keinen Sinn ergibt. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .w-hero--band .w-hero__bands {
    animation: w-einfahren .9s cubic-bezier(.22, .78, .28, 1) .15s both;
  }
}
@keyframes w-einfahren {
  from { transform: translateX(-102%); }
  to   { transform: translateX(0); }
}


/* ------------------------------------------------------------------
   26. Siebenerraster: drei Karten in der ersten Reihe, vier in der zweiten.
   Gleiche Logik wie der Wochenplan, aber ohne dessen Kacheltypografie.
   Im Einsatz beim Grundservice auf der Living-Seite (sieben Leistungen).
------------------------------------------------------------------ */
.w-grid--34 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.w-grid--34 > * { grid-column: span 4; }
.w-grid--34 > :nth-child(n + 4) { grid-column: span 3; }
@media (max-width: 900px) {
  .w-grid--34 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-grid--34 > *,
  .w-grid--34 > :nth-child(n + 4) { grid-column: auto; }
}
@media (max-width: 560px) {
  .w-grid--34 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   27. Markenabgleich Oktober 2026

   Grundlage: alle Drucksachen von levivo (Flyer 2025, Allgemeine Broschuere
   Juni 2026, Falttheke, Seniorenwegweiser, A4-Plakat, Roll-ups, Broschuere
   Betreutes Wohnen, levivo living Expose, Visitenkarte). Was dort in JEDEM
   Dokument wiederkehrt, gilt hier als Markenregel:

   - Schrift: In den Drucksachen Poppins; auf der Website bleibt auf\n     Kundenwunsch Proxima Nova (Abschnitt 1).
   - Farbe: ein Indigo #362D7A fuer Logo, Ueberschriften UND Fliesstext;
     Lavendel-Flaechen (#EAE7F6, #D5CAE9, #9A93BF); Minze #D1EFE0 als
     einziger Kontrast, immer als runde Flaeche ("Stoerer").
   - Formen: Kreise und grosse Boegen statt Ecken. Fotos sitzen in runden
     Ausschnitten, Flaechen enden in weichen Wellen.
   - Listen: das umrandete Plus als Aufzaehlungszeichen.
   - Kein Schwarz, kein Grau: auch die Nebentexte sind ein entsaettigtes Indigo.

   Dieser Block steht bewusst am Ende und ueberschreibt nur, er loescht
   nichts darueber. Zurueck zum alten Stand: Block entfernen.
   ========================================================================== */

/* ---- Schrift: Proxima Nova bleibt (Abschnitt 1), auf Kundenwunsch 22.10.2026 */

/* ---- Tokens aus den Drucksachen ---------------------------------------- */
:root {
  --c-brand:       #362D7A;   /* Logo, Ueberschriften, Balken (Plakat, Flyer) */
  --c-brand-dark:  #2A2363;   /* Fuss, Hover */
  --c-brand-soft:  #EEEBF7;
  --c-accent:      #D5CAE9;   /* Lavendel mittel (Flyer-Flaechen) */
  --c-accent-soft: #EAE7F6;   /* Lavendel hell, Grundflaeche aller Drucksachen */
  --c-flieder:     #EAE7F6;
  --c-lila:        #9A93BF;   /* Wellenflaeche Broschuere/Falttheke */
  --c-mint:        #96DAC5;   /* Linie unter Ueberschriften (levivo living) */
  --c-mint-soft:   #D1EFE0;   /* Stoerer-Kreise aller Drucksachen */

  --c-ink:         #2E2768;   /* Ueberschriften: Indigo, nicht Schwarz */
  --c-ink-soft:    #4E4A78;   /* Fliesstext: 6,7:1 auf Lavendel, 8,2:1 auf Weiss */
  --c-line:        #E2DDF0;
  --c-bg-alt:      #F5F3FA;

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-bogen: clamp(72px, 9vw, 150px);   /* der grosse Bogen der Bildausschnitte */
  --shadow: 0 2px 6px rgba(54, 45, 122, .06), 0 14px 34px rgba(54, 45, 122, .10);

  /* Bereichsfarben (Voreinstellung) auf die neue Palette ziehen */
  --c-cta: var(--c-brand);
}
.w-root {
  --c-bereich: var(--c-accent);
  --c-bereich-soft: var(--c-accent-soft);
  --c-bereich-text: var(--c-brand);
  --c-bereich-btn: var(--c-brand);
  --c-bereich-btn-on: #FFFFFF;
}

/* ---- Typografie -------------------------------------------------------- */
.w-root button, .w-root input, .w-root select, .w-root textarea { font-family: var(--f-text); }
.w-root { color: var(--c-ink-soft); }
.w-root .w-h1, .w-root .w-h2 { font-weight: 700; letter-spacing: -.012em; }
.w-root .w-h3 { font-weight: 600; letter-spacing: -.005em; }
.w-root .w-lead { color: var(--c-ink-soft); line-height: 1.6; }
.w-root .w-sec--brand .w-lead, .w-root .w-sec--dark .w-lead,
.w-root .w-sec--brand .w-text, .w-root .w-sec--dark .w-text,
.w-root .w-sec--brand p, .w-root .w-sec--dark p { color: rgba(255, 255, 255, .88); }
.w-root strong, .w-root b { font-weight: 600; }
.w-root .w-text strong, .w-root .w-lead strong { color: var(--c-ink); }

/* Augenbraue: die kleine Minz-Pille der Flyer ("in Cloppenburg"). */
.w-root .w-eyebrow {
  display: inline-block;
  width: fit-content;
  padding: .3rem .85rem;
  border-radius: 999px;
  background: var(--c-mint-soft);
  color: var(--c-brand);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.4;
  margin-bottom: .95rem;
}
.w-root .w-sec--brand .w-eyebrow,
.w-root .w-sec--dark .w-eyebrow { background: rgba(209, 239, 224, .16); color: var(--c-mint-soft); }

/* ---- Aufzaehlung: das umrandete Plus aller Drucksachen ------------------ */
.w-root .w-list li { padding-left: 2rem; }
.w-root .w-list li::before {
  top: .22em;
  width: 1.15rem; height: 1.15rem;
  border-radius: 0;
  background: var(--c-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 3.2h5.2v6.2h6.2v5.2h-6.2v6.2H9.4v-6.2H3.2V9.4h6.2z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 3.2h5.2v6.2h6.2v5.2h-6.2v6.2H9.4v-6.2H3.2V9.4h6.2z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.w-root .w-sec--brand .w-list li::before,
.w-root .w-sec--dark .w-list li::before { background: var(--c-mint-soft); }

/* ---- Buttons: rund wie die Kreisformen der Marke ----------------------- */
.w-root .w-btn {
  border-radius: 999px;
  padding: .9rem 1.65rem;
  font-weight: 600;
  letter-spacing: .005em;
}
.w-root .w-btn--accent,
.w-root .w-btn--accent:link,
.w-root .w-btn--accent:visited {
  background: var(--c-mint-soft); border-color: var(--c-mint-soft); color: var(--c-brand);
}
.w-root .w-btn--accent:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--c-brand); filter: none; }

/* ---- Kopfzeile --------------------------------------------------------- */
.w-head-bar { border-bottom-color: var(--c-accent-soft); }
.w-nav a { font-weight: 500; }
.w-head-bar__actions .w-btn { padding: .72rem 1.35rem; }
.w-navmob > summary { border-radius: 999px; border-color: var(--c-accent); }

/* ---- Hero -------------------------------------------------------------- */
@media (min-width: 861px) {
  .w-root .w-hero--band .w-hero__bands { border-radius: 0 var(--r-bogen) 0 0; padding-right: clamp(2.25rem, 1.4rem + 3.6vw, 5rem); }
}
.w-root .w-nav a:not([aria-current]) { color: var(--c-ink); }
.w-root .w-hero--band .w-hero__band--accent { color: var(--c-mint-soft); font-weight: 500; letter-spacing: .02em; }
.w-hero__claim {
  display: block;
  margin-top: .35rem;
  font-size: clamp(1.05rem, .95rem + .45vw, 1.35rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  color: #FFFFFF;
}

/* Stoerer: der Minzkreis der Drucksachen, leicht gedreht. */
.w-stoerer {
  position: absolute; z-index: 3;
  right: max(var(--sp-pad), calc((100% - var(--w-wrap)) / 2 + var(--sp-pad)));
  bottom: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  width: clamp(9.5rem, 7.5rem + 6vw, 12.5rem); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-mint-soft);
  color: var(--c-brand);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; padding: 1.1rem; text-align: center;
  text-decoration: none;
  transform: rotate(-8deg);
  box-shadow: 0 10px 30px rgba(42, 35, 99, .22);
  transition: transform .25s ease;
}
.w-stoerer:hover { transform: rotate(-4deg) scale(1.03); }
.w-root a.w-stoerer, .w-root a.w-stoerer:link, .w-root a.w-stoerer:visited { color: var(--c-brand); text-decoration: none; }
.w-stoerer__titel { font-weight: 700; font-size: clamp(.98rem, .9rem + .35vw, 1.2rem); line-height: 1.15; }
.w-stoerer__text { font-size: clamp(.72rem, .68rem + .2vw, .82rem); line-height: 1.3; }
.w-stoerer__text u { text-underline-offset: 2px; }
@media (max-width: 860px) {
  .w-stoerer { top: 1rem; bottom: auto; right: 1rem; width: 8.25rem; padding: .8rem; }
  .w-stoerer__text { font-size: .7rem; }
}
@media (max-width: 600px) {
  .w-stoerer { width: 6.6rem; top: .75rem; right: .75rem; padding: .6rem; gap: 0; }
  .w-stoerer__titel { font-size: .8rem; line-height: 1.2; hyphens: manual; }
  .w-stoerer__text { display: none; }
}
/* Ueberschriften nicht mitten in kurzen Woertern trennen ("Pfle-ge").
   Nur wenn ein Wort wirklich nicht passt, bricht es um. */
.w-root .w-h1, .w-root .w-h2, .w-root .w-h3 { hyphens: manual; overflow-wrap: break-word; }

/* ---- Karten, Bewertungen, Felder: weicher, ohne harte Raender ---------- */
.w-root .w-card,
.w-root .w-review { border-radius: var(--r-lg); }
.w-root .w-sec--soft .w-card, .w-root .w-sec--alt .w-card,
.w-root .w-sec--soft .w-review, .w-root .w-sec--alt .w-review { border-color: transparent; }
.w-root .w-sec--soft .w-card, .w-root .w-sec--soft .w-review { box-shadow: 0 1px 2px rgba(54,45,122,.04); }

/* Karten-Icon im Kreis: Minzflaeche wie die Stoerer. */
.w-root .w-card > .w-icon,
.w-root .w-sec--soft .w-card > .w-icon {
  border-radius: 50%;
  padding: .8rem;
  background: var(--c-mint-soft);
  color: var(--c-brand);
}

.w-root .w-vor > .w-icon { border-radius: 50%; background: var(--c-mint-soft); color: var(--c-brand); }
.w-root .w-h2 + .w-lead { margin-top: 1.15rem; }

/* Bewertungen: das grosse, schraege Anfuehrungszeichen der Falttheke. */
.w-root .w-review { position: relative; padding-top: clamp(2.6rem, 2.1rem + 1.4vw, 3.2rem); }
.w-root .w-review::before {
  content: "\201D";
  position: absolute; top: .35rem; left: clamp(1.2rem, .95rem + 1vw, 1.75rem);
  font: italic 700 3.6rem/1 var(--f-display);
  color: var(--c-accent);
}
.w-root .w-review__avatar { background: var(--c-mint-soft); color: var(--c-brand); }
.w-root .w-review__name { color: var(--c-ink); }

.w-root .w-acc__item { border-radius: var(--r-md); }
.w-root .w-acc__item > summary { font-weight: 500; color: var(--c-ink); }

/* ---- Bilder: grosse Boegen statt Ecken -------------------------------- */
.w-root .w-media { border-radius: var(--r-lg); }
.w-root .w-split > .w-media { border-radius: var(--r-lg) var(--r-bogen) var(--r-lg) var(--r-lg); }
.w-root .w-split--flip > .w-media { border-radius: var(--r-bogen) var(--r-lg) var(--r-lg) var(--r-lg); }
.w-root .w-collage > .w-media:first-child { border-radius: var(--r-lg) var(--r-bogen) var(--r-lg) var(--r-lg); }
.w-root .w-collage > .w-media + .w-media { border-radius: var(--r-lg); }
/* Flaeche hinter der Bildkomposition: Kreis statt Rechteck. */
.w-root .w-collage::before {
  width: auto; height: 72%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-accent);
  left: -3%; bottom: -4%;
}
.w-root .w-collage--rechts::before { left: auto; right: -3%; }
.w-root .w-streifen .w-media, .w-root .w-bildband > .w-media,
.w-root .w-hero .w-hero__media { border-radius: 0; }

/* ---- Farbflaechen ----------------------------------------------------- */
.w-root .w-sec--verlauf { background-image: none; }
.w-root .w-sec--brand .w-stat__value,
.w-root .w-sec--dark .w-stat__value { color: var(--c-mint-soft); }
.w-root .w-sec--brand .w-icon, .w-root .w-sec--dark .w-icon { color: var(--c-mint-soft); }

/* Weicher Bogen am Uebergang in eine Farbflaeche: die vorige Sektion woelbt
   sich in die naechste hinein, wie die Wellen der Broschueren. Die Farbe der
   vorigen Sektion setzt marke.js als --vorher; ohne Skript gibt es keinen
   Bogen, nur die gerade Kante wie bisher. */
.w-root .w-sec--brand, .w-root .w-sec--dark, .w-root .w-sec--soft { position: relative; }
.w-root .w-sec[data-bogen]::before,
.w-foot[data-bogen]::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px;
  height: clamp(26px, 1rem + 2.6vw, 58px);
  background: var(--vorher);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  pointer-events: none;
}
.w-root .w-sec[data-bogen] { padding-top: calc(var(--sp-sec) + clamp(14px, .5rem + 1.6vw, 34px)); }
.w-root .w-sec[data-bogen] > .w-wrap { position: relative; }

/* ---- Fuss ------------------------------------------------------------- */
.w-foot { position: relative; border-top: 0; background: var(--c-brand-dark); }
.w-foot[data-bogen] { padding-top: calc(clamp(2.5rem, 1.8rem + 2.6vw, 4rem) + clamp(18px, .6rem + 2vw, 40px)); }
.w-foot__social a { border-radius: 50%; }
.w-foot .w-foot__title { font-weight: 600; }

/* ---- Zitat-Band (Herr S., aus den Drucksachen) ------------------------ */
.w-zitatband { text-align: center; }
.w-zitatband__zeichen {
  display: block;
  font: italic 700 clamp(4.5rem, 3.5rem + 4vw, 7rem)/.7 var(--f-display);
  color: var(--c-mint-soft);
  margin-bottom: .4rem;
}
.w-zitatband blockquote { margin: 0 auto; max-width: none; }
.w-zitatband .w-zitatband__text { max-width: 22ch; margin-inline: auto; }
.w-zitatband__text {
  font-size: clamp(1.45rem, 1.05rem + 1.7vw, 2.3rem);
  font-weight: 600; line-height: 1.3; letter-spacing: -.01em;
  color: #FFFFFF;
  text-wrap: balance;
}
.w-zitatband__von { display: block; margin-top: 1.1rem; font-size: var(--t-small); color: rgba(255,255,255,.82); }

/* ---- Drei Fragen der Angehoerigen ------------------------------------- */
.w-fragen { counter-reset: frage; display: grid; gap: var(--sp-gap); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.w-frage { position: relative; padding: clamp(1.4rem, 1.1rem + 1vw, 2rem); padding-top: clamp(3.4rem, 3rem + 1vw, 4rem); background: #FFFFFF; border-radius: var(--r-lg); }
.w-frage::before {
  counter-increment: frage; content: counter(frage);
  position: absolute; top: clamp(1.1rem, .9rem + .6vw, 1.5rem); left: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-mint-soft); color: var(--c-brand); font-weight: 700;
}
.w-frage__frage { display: block; font-weight: 600; font-size: var(--t-h3); line-height: 1.3; color: var(--c-ink); margin-bottom: .6rem; }
.w-frage p { color: var(--c-ink-soft); }

/* ---- Mobil: Boegen kleiner, damit nichts eng wird --------------------- */
@media (max-width: 860px) {
  :root { --r-bogen: 64px; }
  .w-root .w-collage::before { height: 60%; }
}
@media (prefers-reduced-motion: reduce) { .w-stoerer, .w-stoerer:hover { transition: none; transform: rotate(-8deg); } }

/* Kopfzitat: eine echte Stimme ueber den Google-Bewertungen (Herr S., aus den Drucksachen) */
.w-root .w-kopfzitat { margin: 1.4rem 0 0; padding: .2rem 0 .2rem 1.2rem; border-left: 4px solid var(--c-mint); }
.w-root .w-kopfzitat blockquote { margin: 0; font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem); font-weight: 700; line-height: 1.35; color: var(--c-brand); text-wrap: balance; }
.w-root .w-kopfzitat figcaption { margin-top: .5rem; font-size: var(--t-small); color: var(--c-ink-soft); }

/* Bild in der Angebotskachel (Startseite): Reihenfolge Icon, Bild, Text, CTA.
   Volle Kachelbreite, flaches 16:10, damit die Kachel nicht in die Hoehe waechst. */
.w-root .w-card > .w-card__bild { --ar: 16 / 10; width: 100%; margin: -.1rem 0 .35rem; border-radius: var(--r-md); }

/* Startseite: Icons in den Angebotskacheln mittig. */
.w-root #start-angebote .w-card > .w-icon { align-self: center; }

/* Bewertungs-Karussell: zwei Bewertungen sichtbar (mobil eine), Pfeile links
   und rechts, endlos. Greift erst, wenn bewegung.js .ist-aktiv setzt; ohne
   Skript bleibt das normale Zweierraster mit allen Bewertungen stehen. */
.w-karussell { position: relative; }
.w-karussell.ist-aktiv .w-karussell__fenster { overflow: hidden; border-radius: var(--r-lg); }
.w-karussell.ist-aktiv .w-karussell__spur { display: flex; gap: var(--sp-gap); grid-template-columns: none; will-change: transform; }
.w-karussell.ist-aktiv .w-karussell__spur > li { flex: 0 0 calc((100% - var(--sp-gap)) / 2); }
@media (max-width: 760px) { .w-karussell.ist-aktiv .w-karussell__spur > li { flex-basis: 100%; } }
.w-karussell__pfeil {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 50%;
  background: var(--c-brand); color: #FFFFFF; cursor: pointer;
  box-shadow: 0 6px 18px rgba(42, 35, 99, .22);
  transition: background .2s ease, transform .2s ease;
}
.w-karussell__pfeil[hidden] { display: none; }
.w-karussell__pfeil:hover { background: var(--c-brand-dark); }
.w-karussell__pfeil:focus-visible { outline: var(--focus); outline-offset: 3px; }
.w-karussell__pfeil svg { width: 1.3rem; height: 1.3rem; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.w-karussell__pfeil--zurueck { left: -1.5rem; }
.w-karussell__pfeil--vor { right: -1.5rem; }
@media (max-width: 1320px) { .w-karussell__pfeil--zurueck { left: -.5rem; } .w-karussell__pfeil--vor { right: -.5rem; } }
@media (max-width: 760px) {
  .w-karussell.ist-aktiv { padding-bottom: 4rem; }
  .w-karussell__pfeil { top: auto; bottom: 0; transform: none; }
  .w-karussell__pfeil--zurueck { left: calc(50% - 3.5rem); }
  .w-karussell__pfeil--vor { right: calc(50% - 3.5rem); }
}
/* Bildquellen fuer den Bildtausch per Elementor (siehe functions.php,
   kunde_bildplaetze_sync). Im Frontend unsichtbar, im Editor als kleine
   beschriftete Kachel unter der jeweiligen Sektion. */
.elementor-widget.w-bildquelle { display: none !important; }
body.elementor-editor-active .elementor-widget.w-bildquelle {
  display: block !important;
  width: 150px !important; max-width: 150px !important; flex: none !important;
  align-self: flex-start;
  margin: 6px 0 6px max(16px, calc((100% - 1220px) / 2 + 16px)) !important;
  padding: 22px 6px 6px; border-radius: 10px;
  background: #D1EFE0; outline: 2px dashed #362D7A; outline-offset: -2px;
  position: relative; cursor: pointer;
}
body.elementor-editor-active .elementor-widget.w-bildquelle::before {
  content: "Bild tauschen"; position: absolute; top: 4px; left: 8px;
  font: 600 11px/1.2 system-ui, sans-serif; color: #362D7A;
}
body.elementor-editor-active .elementor-widget.w-bildquelle img { width: 100%; height: 80px; object-fit: cover; border-radius: 6px; display: block; }

/* ==========================================================================
   28. Bildplatz-Einstellungen aus Elementor (22.10.2026)
   Werte kommen aus den 'Bild tauschen'-Kacheln (--bq-*). Ohne Werte gilt das
   Layout wie bisher.
   ========================================================================== */
img[data-bildplatz] {
  scale: calc(var(--bq-zoom, 1) * var(--bq-flip, 1)) calc(var(--bq-zoom, 1) * var(--bq-flipy, 1));
  translate: var(--bq-x, 0) var(--bq-y, 0);
  rotate: var(--bq-rot, 0deg);
}
img[data-bildplatz][style*="--bq-pos"] { object-position: var(--bq-pos) !important; transform-origin: var(--bq-pos) !important; }
img[data-bildplatz][style*="--bq-fit"] { object-fit: var(--bq-fit) !important; }
img[data-bildplatz][style*="--bq-filter"] { filter: var(--bq-filter) !important; }
.w-media:not(.w-hero__media)[style*="--bq-ar"] { aspect-ratio: var(--bq-ar) !important; }
.w-media:not(.w-hero__media)[style*="--bq-h:"] { height: var(--bq-h) !important; aspect-ratio: auto !important; }
.w-media[style*="--bq-r:"] { border-radius: var(--bq-r) !important; }
.w-sec__bild:has(img[style*="--bq-"]) { overflow: hidden; }

/* --------------------------------------------------------------------------
   Ergaenzung 26.10.2026: Bildband als eigene Sektion und Reel-Reihe
   -------------------------------------------------------------------------- */
/* Bildband ohne Text drumherum: randlos, Abstand kommt von den Nachbarn. */
.w-sec--bildband { padding-block: 0; background: var(--c-bg); }

/* Tagesablauf als Raster: 2 oben, 3 unten (Stationaer, 26.10.2026) */
.w-reihen.w-reihen--tag {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(.9rem, .7rem + .8vw, 1.5rem);
  border-top: 0;
}
.w-reihen.w-reihen--tag > .w-reihe {
  grid-column: span 2;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: .9rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 0;
  border-radius: var(--r-md);
  background: var(--c-bg);
}
.w-reihen.w-reihen--tag > .w-reihe:nth-child(-n+2) { grid-column: span 3; }
.w-reihen--tag .w-reihe p { margin-top: .4rem; }
@media (max-width: 900px) {
  .w-reihen.w-reihen--tag { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-reihen.w-reihen--tag > .w-reihe,
  .w-reihen.w-reihen--tag > .w-reihe:nth-child(-n+2) { grid-column: span 1; }
  .w-reihen.w-reihen--tag > .w-reihe:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .w-reihen.w-reihen--tag { grid-template-columns: minmax(0, 1fr); }
  .w-reihen.w-reihen--tag > .w-reihe,
  .w-reihen.w-reihen--tag > .w-reihe:nth-child(-n+2),
  .w-reihen.w-reihen--tag > .w-reihe:last-child { grid-column: 1 / -1; }
}
/* Tagesablauf als Bildkarten: Foto oben, Nummer auf der Bildkante, keine Kartenflaeche.
   Hebt sich damit vom Wochenplan (weisse Karten) ab. */
.w-reihen.w-reihen--bilder > .w-reihe {
  padding: 0; background: transparent; border-radius: 0; gap: 0;
}
.w-reihen--bilder .w-reihe__bild { border-radius: var(--r-md); overflow: hidden; }
.w-reihen--bilder .w-reihe__marke {
  position: relative; z-index: 1;
  margin: -1.45rem 0 .85rem 1.1rem;
  background: var(--c-brand); color: var(--c-on-brand);
  box-shadow: 0 0 0 4px var(--c-bereich-soft);
}
.w-sec--soft .w-reihen--bilder .w-reihe__marke { background: var(--c-brand); }
.w-reihen--bilder .w-reihe > div:last-child { padding-inline: .15rem; }
/* --------------------------------------------------------------------------
   Seite Aktuelles (27.10.2026)
   Termine und Rueckblick-Kacheln sind native Elementor-Container und -Widgets,
   damit Eintraege im Editor per Duplizieren/Loeschen gepflegt werden koennen.
   Die Regeln hier holen sie optisch in das Design der HTML-Sektionen.
   -------------------------------------------------------------------------- */
.elementor .e-con.w-akt-sec { padding: var(--sp-sec) 0; background: var(--c-bg); }
.elementor .e-con.w-akt-sec--soft { background: var(--c-brand-soft); }
.elementor .e-con.w-akt-wrap {
  width: 100%; max-width: var(--w-wrap); margin-inline: auto;
  padding-inline: var(--sp-pad);
}
/* Termine: Kopf links, Liste rechts */
.elementor .e-con.w-akt-split { flex-direction: row; align-items: flex-start; gap: clamp(2rem, 1rem + 4vw, 5rem); }
.elementor .e-con.w-akt-split > .w-akt-split__kopf { flex: 0 0 34%; position: sticky; top: 7rem; }
.elementor .e-con.w-akt-split > .w-termine { flex: 1 1 0; }
.elementor .e-con.w-termine { border-top: 1px solid var(--c-line); }
.elementor .e-con.w-termin {
  flex-direction: row; align-items: center; gap: clamp(1rem, .7rem + 1vw, 1.6rem);
  padding-block: clamp(1rem, .85rem + .6vw, 1.4rem);
  border-bottom: 1px solid var(--c-line);
}
.elementor .e-con.w-termin > .w-termin__datum { flex: 0 0 auto; width: 5.25rem; }
.elementor .e-con.w-termin > .w-termin__inhalt { flex: 1 1 0; gap: .2rem; }
.w-root .w-termin__datum .elementor-heading-title {
  display: flex; align-items: center; justify-content: center;
  height: 4.25rem; border-radius: var(--r-md);
  background: var(--c-mint-soft, var(--c-accent-soft)); color: var(--c-brand);
  font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; line-height: 1;
}
.w-root .w-termin__titel .elementor-heading-title {
  font-family: var(--f-display); font-weight: 700; color: var(--c-ink);
  font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.3;
}
.w-root .w-termin__text, .w-root .w-termin__text p,
.w-root .w-termine__hinweis, .w-root .w-termine__hinweis p {
  margin: 0; font-family: var(--f-text); color: var(--c-ink-soft); font-size: var(--t-small);
}
.w-root .w-termine__hinweis { margin-top: 1rem; font-style: italic; }

/* Rueckblick-Kacheln: drei Spalten */
.elementor .e-con.w-news {
  flex-direction: row; flex-wrap: wrap; gap: var(--sp-gap);
  margin-top: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
}
.elementor .e-con.w-news > .w-news__karte {
  flex: 0 0 calc((100% - 2 * var(--sp-gap)) / 3); width: auto;
  gap: 0; padding-bottom: 1.6rem;
  background: var(--c-bg); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.elementor .e-con.w-news > .w-news__karte:hover { transform: translateY(-3px); }
.w-root .w-news__bild { margin: 0 !important; }
.w-root .w-news__bild img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 0;
}
.w-root .w-news__karte > .elementor-widget:not(.w-news__bild) { padding-inline: clamp(1.25rem, 1rem + .8vw, 1.6rem); }
.w-root .w-news__label { margin-top: 1.3rem; }
.w-root .w-news__label .elementor-heading-title {
  display: inline-block; padding: .3rem .85rem; border-radius: 999px;
  background: var(--c-mint-soft, var(--c-accent-soft)); color: var(--c-brand);
  font-family: var(--f-text); font-size: .8125rem; font-weight: 500; line-height: 1.4;
}
.w-root .w-news__titel { margin-top: .85rem; }
.w-root .w-news__titel .elementor-heading-title {
  font-family: var(--f-display); font-weight: 700; color: var(--c-ink);
  font-size: var(--t-h3); line-height: 1.3;
}
.w-root .w-news__text { margin-top: .6rem; flex: 1 1 auto; }
.w-root .w-news__text, .w-root .w-news__text p {
  margin: 0; font-family: var(--f-text); color: var(--c-ink-soft); line-height: var(--lh-body);
}
.w-root .w-news__datum { margin-top: 1rem; }
.w-root .w-news__datum .elementor-heading-title {
  font-family: var(--f-text); font-size: var(--t-small); font-weight: 600; color: var(--c-brand);
}
@media (max-width: 1000px) {
  .elementor .e-con.w-news > .w-news__karte { flex-basis: calc((100% - var(--sp-gap)) / 2); }
  .elementor .e-con.w-akt-split { flex-direction: column; }
  .elementor .e-con.w-akt-split > .w-akt-split__kopf { flex-basis: auto; position: static; }
  .elementor .e-con.w-akt-split > .w-termine { width: 100%; }
}
@media (max-width: 640px) {
  .elementor .e-con.w-news > .w-news__karte { flex-basis: 100%; }
  .elementor .e-con.w-termin > .w-termin__datum { width: 4.25rem; }
  .w-root .w-termin__datum .elementor-heading-title { height: 3.75rem; font-size: 1.1rem; }
}
/* Sieben Menuepunkte (mit Aktuelles, 27.10.2026): mobile Navigation schon unter 1360 px,
   sonst wird es zwischen 1290 und 1360 px eng. */
@media (max-width: 1360px) {
  .w-nav, .w-head-bar__actions { display: none; }
  .w-navmob { display: block; }
  .w-head-bar { position: sticky; top: 0; }
}

/* Aktuelles: zwei Kacheln nebeneinander, mehr Text (27.10.2026) */
.elementor .e-con.w-news > .w-news__karte { flex-basis: calc((100% - var(--sp-gap)) / 2); padding-bottom: clamp(1.6rem, 1.3rem + 1vw, 2.25rem); }
.w-root .w-news__bild img { aspect-ratio: 16 / 9; }
.w-root .w-news__karte > .elementor-widget:not(.w-news__bild) { padding-inline: clamp(1.4rem, 1rem + 1.4vw, 2.25rem); }
.w-root .w-news__label { margin-top: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.w-root .w-news__text p + p { margin-top: .85rem; }
.w-root .w-news__text { margin-top: .8rem; }
@media (max-width: 760px) {
  .elementor .e-con.w-news > .w-news__karte { flex-basis: 100%; }
}

/* Stationaer, Unser Programm: Wochenplan-Button rechts neben dem Kopf, Wochenplan-Raster vorerst aus (27.10.2026) */
.w-head-zeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.w-head-zeile > .w-head { flex: 1 1 auto; }
.w-root .w-head-zeile__btns { flex: 0 0 auto; margin-top: clamp(2.6rem, 2.2rem + 1.2vw, 3.4rem); }
.w-wochenplan-block { display: none !important; }
@media (max-width: 900px) {
  .w-head-zeile { flex-direction: column; gap: 0; }
  .w-root .w-head-zeile__btns { margin-top: 1.5rem; }
}

/* Stationaer: Programm endet mit dem Fotostreifen, kein lila Rest darunter (Wochenplan ist ausgeblendet) */
.w-root #stationaer-programm { padding-bottom: 0; }
.w-root #stationaer-programm .w-streifen { margin-bottom: 0; }

/* Farbstriche links an Kacheln und Zitaten entfernt (27.10.2026, wirkte zu sehr nach Vorlage) */
.w-root .w-panel, .w-root .w-panel--mint, .w-root .w-card--kante { border-left: 0; }
.w-root .w-zitatzeile, .w-root .w-kopfzitat { border-left: 0; padding-left: 0; }
.w-root .w-tabelle tr { border-left: 1px solid var(--c-line); }
/* Verfuegbarkeits-Chips in der Tabelle nicht umbrechen */
.w-root .w-tabelle .w-chip { display: inline-block; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Echte Stimmen (27.10.2026): Zitate aus den Interview-Transkripten
   .w-stimme       Porträt + grosses Zitat, je Seite hoechstens einmal
   .w-zitat-klein  kurzes Zitat im Fliesstext oder in einer Kachel
   Bewusst ohne Farbstrich am Rand.
   -------------------------------------------------------------------------- */
.w-stimme {
  margin: 0; display: grid; align-items: center;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  gap: clamp(1.75rem, 1rem + 3.5vw, 4.5rem);
  max-width: 1040px; margin-inline: auto;
}
.w-stimme--rechts { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.w-stimme--rechts .w-stimme__bild { order: 2; }
.w-root .w-stimme__bild { border-radius: var(--r-lg); overflow: hidden; }
.w-stimme__text { position: relative; }
.w-stimme__text::before {
  content: "\201E"; display: block; height: .55em; margin-bottom: .35rem;
  font: 700 clamp(4rem, 3rem + 3vw, 6rem)/.6 var(--f-display); color: var(--c-accent);
}
.w-root .w-stimme__zitat {
  margin: 0; font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.95rem); line-height: 1.38; color: var(--c-ink);
  text-wrap: pretty;
}
.w-stimme__von { margin-top: 1.4rem; display: grid; gap: .2rem; }
.w-root .w-stimme__von strong { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; color: var(--c-brand); }
.w-root .w-stimme__von span { font-size: var(--t-small); color: var(--c-ink-soft); }
@media (max-width: 760px) {
  .w-stimme, .w-stimme--rechts { grid-template-columns: minmax(0, 1fr); }
  .w-stimme--rechts .w-stimme__bild { order: 0; }
  .w-root .w-stimme__bild { max-width: 320px; }
}
.w-zitat-klein { margin: clamp(1.25rem, 1rem + .8vw, 1.75rem) 0 0; max-width: 62ch; }
.w-root .w-zitat-klein blockquote {
  margin: 0; font-family: var(--f-display); font-weight: 600; font-style: italic;
  font-size: clamp(1.02rem, .97rem + .25vw, 1.15rem); line-height: 1.5; color: var(--c-ink);
}
.w-root .w-zitat-klein figcaption { margin-top: .45rem; font-size: var(--t-small); color: var(--c-ink-soft); }
.w-reihe .w-zitat-klein { margin-top: .9rem; }
.w-root .w-reihe .w-zitat-klein blockquote { font-size: 1rem; }
.w-card .w-zitat-klein { margin-top: 1rem; }
.w-root .w-kopfzitat figcaption { margin-top: .5rem; }
/* Stimmen: Feinschliff */
.w-root .w-stimme__text::before { height: auto; margin-bottom: .9rem; line-height: .35; }
.w-root .w-stimme__von, .w-root .w-stimme__von *, .w-root .w-zitat-klein figcaption { font-style: normal; }
.w-root .w-zitat-klein { margin-top: clamp(1.25rem, 1rem + .8vw, 1.75rem); }
.w-root .w-reihe .w-zitat-klein { margin-top: .9rem; }
.w-root .w-card .w-zitat-klein { margin-top: 1rem; }
.w-root .w-stimme__text::before { margin-bottom: 1.5rem; }

/* Ansprechpartnerinnen mit Portraet (Ueber uns, 28.10.2026): Bild links, Text rechts; mobil untereinander. */
.w-root .w-card--person { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: clamp(1.1rem, .8rem + 1vw, 1.75rem); align-items: start; }
.w-root .w-card--person .w-card__portraet { --ar: 4 / 5; width: 100%; margin: 0; }
.w-root .w-card--person .w-card__inhalt { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.w-root .w-card--person .w-zitat-klein { margin-top: .6rem; }
@media (max-width: 520px) {
  .w-root .w-card--person { grid-template-columns: minmax(0, 1fr); }
  .w-root .w-card--person .w-card__portraet { max-width: 14rem; }
}

/* Zitatkarte unter einem Bild, leicht ueberlappend (Ambulant, Vorteile, 28.10.2026). */
.w-root .w-vorteile-links { display: flex; flex-direction: column; min-width: 0; }
.w-root .w-zitatkarte { position: relative; z-index: 1; margin: calc(-1 * clamp(2rem, 1.2rem + 3vw, 4rem)) clamp(.75rem, .3rem + 2vw, 2rem) 0; padding: clamp(1rem, .8rem + .8vw, 1.5rem); display: grid; grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); gap: clamp(1rem, .8rem + .8vw, 1.4rem); align-items: center; background: var(--c-bg); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.w-root .w-zitatkarte__bild { --ar: 4 / 5; border-radius: var(--r-md); }
.w-root .w-zitatkarte blockquote { margin: 0; font-family: var(--f-display); font-weight: 600; font-style: italic; font-size: clamp(.98rem, .94rem + .2vw, 1.08rem); line-height: 1.5; color: var(--c-ink); }
.w-root .w-zitatkarte figcaption { margin-top: .6rem; display: flex; flex-direction: column; font-style: normal; }
.w-root .w-zitatkarte figcaption strong { font-family: var(--f-display); font-weight: 700; color: var(--c-brand); }
.w-root .w-zitatkarte figcaption span { font-size: var(--t-small); color: var(--c-ink-soft); }
@media (max-width: 520px) {
  .w-root .w-zitatkarte { margin: 1rem 0 0; grid-template-columns: minmax(0, 1fr); }
  .w-root .w-zitatkarte__bild { max-width: 7rem; }
}

/* Kurzes Zitat unter Fliesstext, mit kurzer Minzlinie abgesetzt statt grossem Abstand (28.10.2026). */
.w-root .w-zitat-klein--abgesetzt { position: relative; margin-top: clamp(1.4rem, 1.2rem + .6vw, 1.8rem); padding-top: 1.1rem; }
.w-root .w-zitat-klein--abgesetzt::before { content: ""; position: absolute; top: 0; left: 0; width: 2.75rem; height: 3px; border-radius: 3px; background: var(--c-mint); }


/* ==========================================================================
   29. Mauszeiger aus der Bildmarke (28.10.2026, weicher 2. Fassung)

   Abgeleitet aus Abschnitt 27: die Wortmarke ist duenn, rund und geometrisch,
   der i-Punkt ein exakter Kreis. Beide Zeiger folgen dieser Hand:
     - Standard: ein schlanker Pfeil mit abgerundeten Ecken statt scharfer
       Spitzen, Markenindigo mit kraeftigem weissem Saum, damit der Zeiger
       auf Fotos und Mitteltoenen nicht verschwindet. Die Pfeilform bleibt,
       weil die Spitze die genaue Position zeigt; ein reiner Punkt nimmt
       aelteren Besuchern diese Genauigkeit.
     - Klickbar: ein Haarlinien-Ring mit kleinem Punkt — der i-Punkt der
       Wortmarke.

   Der Kern wird ueber Weichzeichnen und hartes Schneiden gerundet, damit
   keine Ecke gefast wirkt. Der weisse Saum ist danach eine echte
   Konturversetzung: die Flaeche wird mit einem kreisfoermigen Element um
   genau einen Betrag in jede Richtung aufgeweitet. Nur so liegt der Saum
   als exakte Form um den Zeiger und folgt auch der Innenecke zwischen
   Schaft und Fahne. Weichzeichnen allein wuerde diese Kerbe zuschmieren
   und aus dem Saum einen Fleck machen.

   Die Bilder stecken als PNG direkt in dieser Datei. Das spart die eigene
   Anfrage, sonst blitzt beim ersten Ueberfahren der Systemzeiger auf.
   PNG statt SVG, weil Safari keine SVG-Zeiger darstellt. image-set liefert
   die doppelte Aufloesung an scharfe Bildschirme, die Zeile davor ist der
   Rueckfall fuer aeltere Browser.

   Zur Liste unten: mehrere Bausteine setzen selbst cursor:pointer, teils
   ueber zusammengesetzte Selektoren (.w-acc__item > summary). Deshalb steht
   jeder Treffer doppelt da — einmal schlicht, einmal mit .w-root davor —,
   sonst gewinnt die aeltere Regel und es bleibt bei der Hand.

   Schreibmarke, Groessenaenderung, Lupe und gesperrte Felder bleiben
   Systemsache. Alles nur fuer echte Mauszeiger: Touch bekommt nichts davon.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {

  /* ---- Standardzeiger ------------------------------------------------- */
  html {
    cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAVFBMVEXh3+tnYJobEGhFPYQ/NoCCfayqqv+gncHBvtYAAAD9/f4zKnj+/v739/k5MXwmHG+YlLv5+fr5+fv9/f34+PpNRYn9/f65ttFsZZ2NiLOtqcjJx9tp7WNgAAAAHHRSTlP8/f////oD/PsA/P4Eaf7/+zGPsU/+0f36+/z7kQODJAAAAOxJREFUeNrV09tywyAMBFCc9KaVsAv4lvj//7NLHGfaAHmvPMOLz2ikxXYmIZiYtMqJB+ZRrEWcAQvgm8KNuJ46ILaE8/hW7RxFfZAMhn6YHFJ91B30em6JHSifDXNN3AGFcplQigNkca2JB8j1CYzP4jfohwt7POXxp4NSRHkBzv2K1AYMC7dbqUSt3RsBrzX52pAnLrhwz407lEEFbNMXW3dsw7TLoGzm2zli4SSuFpSElLx9AJPqpRgxd8inSeQyw1qkkDvYXsD76sqkCWRv4XMItSHlECHGsfLZHUDscTTAbRZ5BZp/1j8AP1vIKOTU6Fb0AAAAAElFTkSuQmCC") 2 1, auto;
    cursor: -webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAVFBMVEXh3+tnYJobEGhFPYQ/NoCCfayqqv+gncHBvtYAAAD9/f4zKnj+/v739/k5MXwmHG+YlLv5+fr5+fv9/f34+PpNRYn9/f65ttFsZZ2NiLOtqcjJx9tp7WNgAAAAHHRSTlP8/f////oD/PsA/P4Eaf7/+zGPsU/+0f36+/z7kQODJAAAAOxJREFUeNrV09tywyAMBFCc9KaVsAv4lvj//7NLHGfaAHmvPMOLz2ikxXYmIZiYtMqJB+ZRrEWcAQvgm8KNuJ46ILaE8/hW7RxFfZAMhn6YHFJ91B30em6JHSifDXNN3AGFcplQigNkca2JB8j1CYzP4jfohwt7POXxp4NSRHkBzv2K1AYMC7dbqUSt3RsBrzX52pAnLrhwz407lEEFbNMXW3dsw7TLoGzm2zli4SSuFpSElLx9AJPqpRgxd8inSeQyw1qkkDvYXsD76sqkCWRv4XMItSHlECHGsfLZHUDscTTAbRZ5BZp/1j8AP1vIKOTU6Fb0AAAAAElFTkSuQmCC") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAVFBMVEV3caWGgK/LyNyjn8PAvdYAAAA1LHn9/P3///86MXxDO4P///8lHG/////////////////////X1eTp6PCalbytqclSSoyEfq1bVJJrZZ67uNJjXJfmrDIEAAAAHHRSTlP//////wD//QT//7j/kMxKbC3/////////////eWdyVAAAAdZJREFUeNrtltlygzAMRZ22BhkMBkyWJv//n5U3SAwUifYxemEmMzq5lq5sCSklSBcQPtwQLh9MZ/oEYgNAdqWLpj9EECBNGcMcIQiANgHK7gBBeAHDY0wEYAMaTPzW+mZ9IdgEIWvMqwpVqCEQmMdIgJkAPMIEQEJxdoSWR5gBLg4QXgGRwLFUBtBX304GIQOoSKCbMgNgKb95pswBqOHGMuUCgBpYplwCmKZcAfBMuQZgmXIVwDHlJoBK2AYES7Ww04ttQDRlLY8CkHAizMUvACSM+2OxAVChDLfgyAMAXVQYj/thBeMwPRacGigV9Yspfe8EmQK9AOxO9cutLMZLAF28h+rGMKyMI4gls5Hw4asnJX2Y0gjftUr3mnMxEN/GB7Yt1j1KGKh3c3id75erjVU7ewnexQ0JADC3zK0qNnSkskQJIm04vmXuOGOQMBIl4I4EjU+v8f96J2HuZEsqIkbfNV3vFz3XkmsYJddJ0p34tCcC+H2HPMqTAkgdB9n6hUcppb/oCuYIFbWV1sWJU4MZEJY++zkOJbkLmQQz26IFtgIpn2xBW3VyAOb03hdtR1uVFgCXBb0BSVwYl4B4BQFxZRVrPwIAY8n6Y7wBb8Ab8E+AH3MMX0Cm+wurAAAAAElFTkSuQmCC") 2x) 2 1, auto;
    cursor: image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAVFBMVEXh3+tnYJobEGhFPYQ/NoCCfayqqv+gncHBvtYAAAD9/f4zKnj+/v739/k5MXwmHG+YlLv5+fr5+fv9/f34+PpNRYn9/f65ttFsZZ2NiLOtqcjJx9tp7WNgAAAAHHRSTlP8/f////oD/PsA/P4Eaf7/+zGPsU/+0f36+/z7kQODJAAAAOxJREFUeNrV09tywyAMBFCc9KaVsAv4lvj//7NLHGfaAHmvPMOLz2ikxXYmIZiYtMqJB+ZRrEWcAQvgm8KNuJ46ILaE8/hW7RxFfZAMhn6YHFJ91B30em6JHSifDXNN3AGFcplQigNkca2JB8j1CYzP4jfohwt7POXxp4NSRHkBzv2K1AYMC7dbqUSt3RsBrzX52pAnLrhwz407lEEFbNMXW3dsw7TLoGzm2zli4SSuFpSElLx9AJPqpRgxd8inSeQyw1qkkDvYXsD76sqkCWRv4XMItSHlECHGsfLZHUDscTTAbRZ5BZp/1j8AP1vIKOTU6Fb0AAAAAElFTkSuQmCC") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAVFBMVEV3caWGgK/LyNyjn8PAvdYAAAA1LHn9/P3///86MXxDO4P///8lHG/////////////////////X1eTp6PCalbytqclSSoyEfq1bVJJrZZ67uNJjXJfmrDIEAAAAHHRSTlP//////wD//QT//7j/kMxKbC3/////////////eWdyVAAAAdZJREFUeNrtltlygzAMRZ22BhkMBkyWJv//n5U3SAwUifYxemEmMzq5lq5sCSklSBcQPtwQLh9MZ/oEYgNAdqWLpj9EECBNGcMcIQiANgHK7gBBeAHDY0wEYAMaTPzW+mZ9IdgEIWvMqwpVqCEQmMdIgJkAPMIEQEJxdoSWR5gBLg4QXgGRwLFUBtBX304GIQOoSKCbMgNgKb95pswBqOHGMuUCgBpYplwCmKZcAfBMuQZgmXIVwDHlJoBK2AYES7Ww04ttQDRlLY8CkHAizMUvACSM+2OxAVChDLfgyAMAXVQYj/thBeMwPRacGigV9Yspfe8EmQK9AOxO9cutLMZLAF28h+rGMKyMI4gls5Hw4asnJX2Y0gjftUr3mnMxEN/GB7Yt1j1KGKh3c3id75erjVU7ewnexQ0JADC3zK0qNnSkskQJIm04vmXuOGOQMBIl4I4EjU+v8f96J2HuZEsqIkbfNV3vFz3XkmsYJddJ0p34tCcC+H2HPMqTAkgdB9n6hUcppb/oCuYIFbWV1sWJU4MZEJY++zkOJbkLmQQz26IFtgIpn2xBW3VyAOb03hdtR1uVFgCXBb0BSVwYl4B4BQFxZRVrPwIAY8n6Y7wBb8Ab8E+AH3MMX0Cm+wurAAAAAElFTkSuQmCC") 2x) 2 1, auto;
  }

  /* ---- Klickbares: Ring mit Punkt ------------------------------------- */
  .w-root a[href],
  .w-root button,
  .w-root summary,
  .w-root label[for],
  .w-root [role="button"],
  .w-acc__item > summary,
  .w-navmob > summary,
  .w-root .w-btn,
  .w-root .w-link,
  .w-root .w-streifen__pfeil,
  .w-root .w-karussell__pfeil,
  .w-root .w-callbar__btn,
  a[href],
  button,
  summary,
  label[for],
  [role="button"],
  .w-btn,
  .w-link,
  .w-streifen__pfeil,
  .w-karussell__pfeil,
  .w-callbar__btn {
    cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAVFBMVEWwrMwpIHFoYZuPirXn5uqkpL+/v9T9/f5VVapBOIE/P38AAP+AeqvAvNjg3u8AAAD9/f7////+/v7///8kGm7a1+r9/f4cEmn29fhsZp7r6vT4+PlQDviQAAAAHHRSTlP+/fv8HQoMawP7BAH5//8A+AKwzfz+j/pI/P4riAiJZwAAATNJREFUeNqtk0d2AzEIQJE0xU4Doa65/z3D9BLHycIs/Dzi0wHwD4HXAnaRX4BdcUR2QB6bPjLHvpk+roDFhokoBPnhYXcCm74nMnefklemUtwIWPWRQPkCIUDxHohXAjZ7o0olJ0K1KD362AFrG7E35HKH2GUnMFCeiRlAJlUo3hDbFvEWqfjq7AZIAWTkBXHgqQR01WsaJhewZHAv4nMgAiDRZNJqyQKWEiTxVgJpL6aMLUH64gPAIQXGjsArJWg3PoCbGvpf4EGIwKckpTXPkvxZpipLp9ZGVX9qlE7BNfYADNdWm1Orp0587MPSEoDxNM2xEOOVHsetVTLEzWncQrzH0TKJqBJEj/ayURYlNoVPkJ1zed/K09IOkZ3jmN8Oe31c+4d/r4czX8+z07MvP95volU8CgsyMTsAAAAASUVORK5CYII=") 16 16, pointer;
    cursor: -webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAVFBMVEWwrMwpIHFoYZuPirXn5uqkpL+/v9T9/f5VVapBOIE/P38AAP+AeqvAvNjg3u8AAAD9/f7////+/v7///8kGm7a1+r9/f4cEmn29fhsZp7r6vT4+PlQDviQAAAAHHRSTlP+/fv8HQoMawP7BAH5//8A+AKwzfz+j/pI/P4riAiJZwAAATNJREFUeNqtk0d2AzEIQJE0xU4Doa65/z3D9BLHycIs/Dzi0wHwD4HXAnaRX4BdcUR2QB6bPjLHvpk+roDFhokoBPnhYXcCm74nMnefklemUtwIWPWRQPkCIUDxHohXAjZ7o0olJ0K1KD362AFrG7E35HKH2GUnMFCeiRlAJlUo3hDbFvEWqfjq7AZIAWTkBXHgqQR01WsaJhewZHAv4nMgAiDRZNJqyQKWEiTxVgJpL6aMLUH64gPAIQXGjsArJWg3PoCbGvpf4EGIwKckpTXPkvxZpipLp9ZGVX9qlE7BNfYADNdWm1Orp0587MPSEoDxNM2xEOOVHsetVTLEzWncQrzH0TKJqBJEj/ayURYlNoVPkJ1zed/K09IOkZ3jmN8Oe31c+4d/r4czX8+z07MvP95volU8CgsyMTsAAAAASUVORK5CYII=") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAVFBMVEXMyt2gnMDBvtZ0bqM/NoAAAAD+/f7+/v4vJnX+/v7///87Mn2Zlbz///////9sZZ0nHXBMRIn///+OibT////W1OREPINhWpbl5O6Dfay7uNKvq8ozpD37AAAAHHRSTlP//////wD8BP+1cv//i0v///8s/9H+////////Esq8ywAAArVJREFUeNrtV2tzqyAQ3TZVFEENPmL0///Puw/iKCJxmm93ynTaRHcPZ19wCtmHC/4A/ncAta7fAOzcEhhw5k6/XK2t1rVTrydXAchY6TJfV6ndGUQMAA2dzYNV1vziCoDKlHcfwOCaBw/hYiQgQr9me7jdC7/G28yPdIQEHP012S6rt8cw9NSqAwIc/In+8GCve0MhNIzV3olFf0AIAdh/Ye8OXgmEjjE6RgjyAIE/8e/QuDL7IpiqqNqGUpklACR/XVsVj0kSb3FJP0wPRHhQHvYIsO9eNJjR8CmV95aqZoxnW7UUhdshQJiAAfmTf1+v44Qf6t4jLGEaYEvAoRXmn4iWKvPO8keV8u4HY6uzEwAiMGP+JkpVJgWTqaKPiDBVBUXXxxmgFW6C9fryLFXmaKBokJgORvFVVEVAAfYlBKx/Lha+JaWFla/QvWjNvpRbANzuye1S8gmyGUjLD0oqMW+w6Uc4RDAwAdl/bsaxmYUDU6AaDbtKbgAcv+cNFH/LjQySkeIrv8MiMR0Bak5BIxEQgW+sCP98ewoYQ8Mx2iiA5i2Nj5iNKyJQMajPinltEQGwLwDtEzKuh4HPm04D6E8B7PUQ+rMkzh8l8eMy+rDfNFJVQLyRMp6W2+9bWZI8vx0mv0F0mNz7ccbjcjgbZxlH06YPFKpSvj3TIDyT78kjjQnYkyNNKOChnDpUu4BAAODkWjg91plcfXqs+8Q3iBC7WNB/nLipU1cbh4qmsautGIfj5Qihsuo5isjl6mm51N3IBSOE5YcHcb3eW/pK+Tv4HwWGFGx6btUFgTUkdHr3TmCwhuEWHsxGo4xPDqdU7yWOiKReNNbSNbi6BfJTiXQi85TuQ5nH+khdFZrUPHavElVcJp5IXa90tS1xWZ3SunBFa6fUNlxR+ym9//c/0x8ArX90VGoV2skVGAAAAABJRU5ErkJggg==") 2x) 16 16, pointer;
    cursor: image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAVFBMVEWwrMwpIHFoYZuPirXn5uqkpL+/v9T9/f5VVapBOIE/P38AAP+AeqvAvNjg3u8AAAD9/f7////+/v7///8kGm7a1+r9/f4cEmn29fhsZp7r6vT4+PlQDviQAAAAHHRSTlP+/fv8HQoMawP7BAH5//8A+AKwzfz+j/pI/P4riAiJZwAAATNJREFUeNqtk0d2AzEIQJE0xU4Doa65/z3D9BLHycIs/Dzi0wHwD4HXAnaRX4BdcUR2QB6bPjLHvpk+roDFhokoBPnhYXcCm74nMnefklemUtwIWPWRQPkCIUDxHohXAjZ7o0olJ0K1KD362AFrG7E35HKH2GUnMFCeiRlAJlUo3hDbFvEWqfjq7AZIAWTkBXHgqQR01WsaJhewZHAv4nMgAiDRZNJqyQKWEiTxVgJpL6aMLUH64gPAIQXGjsArJWg3PoCbGvpf4EGIwKckpTXPkvxZpipLp9ZGVX9qlE7BNfYADNdWm1Orp0587MPSEoDxNM2xEOOVHsetVTLEzWncQrzH0TKJqBJEj/ayURYlNoVPkJ1zed/K09IOkZ3jmN8Oe31c+4d/r4czX8+z07MvP95volU8CgsyMTsAAAAASUVORK5CYII=") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAVFBMVEXMyt2gnMDBvtZ0bqM/NoAAAAD+/f7+/v4vJnX+/v7///87Mn2Zlbz///////9sZZ0nHXBMRIn///+OibT////W1OREPINhWpbl5O6Dfay7uNKvq8ozpD37AAAAHHRSTlP//////wD8BP+1cv//i0v///8s/9H+////////Esq8ywAAArVJREFUeNrtV2tzqyAQ3TZVFEENPmL0///Puw/iKCJxmm93ynTaRHcPZ19wCtmHC/4A/ncAta7fAOzcEhhw5k6/XK2t1rVTrydXAchY6TJfV6ndGUQMAA2dzYNV1vziCoDKlHcfwOCaBw/hYiQgQr9me7jdC7/G28yPdIQEHP012S6rt8cw9NSqAwIc/In+8GCve0MhNIzV3olFf0AIAdh/Ye8OXgmEjjE6RgjyAIE/8e/QuDL7IpiqqNqGUpklACR/XVsVj0kSb3FJP0wPRHhQHvYIsO9eNJjR8CmV95aqZoxnW7UUhdshQJiAAfmTf1+v44Qf6t4jLGEaYEvAoRXmn4iWKvPO8keV8u4HY6uzEwAiMGP+JkpVJgWTqaKPiDBVBUXXxxmgFW6C9fryLFXmaKBokJgORvFVVEVAAfYlBKx/Lha+JaWFla/QvWjNvpRbANzuye1S8gmyGUjLD0oqMW+w6Uc4RDAwAdl/bsaxmYUDU6AaDbtKbgAcv+cNFH/LjQySkeIrv8MiMR0Bak5BIxEQgW+sCP98ewoYQ8Mx2iiA5i2Nj5iNKyJQMajPinltEQGwLwDtEzKuh4HPm04D6E8B7PUQ+rMkzh8l8eMy+rDfNFJVQLyRMp6W2+9bWZI8vx0mv0F0mNz7ccbjcjgbZxlH06YPFKpSvj3TIDyT78kjjQnYkyNNKOChnDpUu4BAAODkWjg91plcfXqs+8Q3iBC7WNB/nLipU1cbh4qmsautGIfj5Qihsuo5isjl6mm51N3IBSOE5YcHcb3eW/pK+Tv4HwWGFGx6btUFgTUkdHr3TmCwhuEWHsxGo4xPDqdU7yWOiKReNNbSNbi6BfJTiXQi85TuQ5nH+khdFZrUPHavElVcJp5IXa90tS1xWZ3SunBFa6fUNlxR+ym9//c/0x8ArX90VGoV2skVGAAAAABJRU5ErkJggg==") 2x) 16 16, pointer;
  }

  /* ---- Was eigene Zeiger behaelt -------------------------------------- */
  /* Doppelte Klasse hebt die Gewichtung ueber die Klickliste darueber. */
  .w-root .w-lupe.w-lupe, .w-lupe.w-lupe { cursor: zoom-in; }
  .w-root .w-lightbox__flaeche.w-lightbox__flaeche,
  .w-lightbox__flaeche.w-lightbox__flaeche { cursor: zoom-out; }
  input, textarea, select, [contenteditable="true"] { cursor: auto; }
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="search"], input[type="number"], textarea { cursor: text; }
  input[type="checkbox"], input[type="radio"], select { cursor: pointer; }
  :disabled, [aria-disabled="true"] { cursor: not-allowed; }
}


/* ==========================================================================
   30. Tabellennotizen und Tabelle auf dem Handy (28.10.2026)

   a) Die Saetze direkt ueber und unter einer Tabelle sind Fussnoten zur
      Tabelle, kein Fliesstext. Mit der normalen Lesebreite von 68ch brechen
      sie mitten im Satz um, waehrend die Tabelle darueber die volle Breite
      nutzt. Das sieht nach Fehler aus, nicht nach Absicht. Sie laufen
      deshalb auf Tabellenbreite. Die beiden Regeln stehen absichtlich
      getrennt: faellt :has() in einem alten Browser aus, greift die erste
      trotzdem.

   b) Auf dem Handy wird jede Tabellenzeile zur Karte. Bisher stand der
      Spaltenname inline vor dem Wert, dadurch begann jeder Wert an einer
      anderen Stelle. Jetzt sitzt der Name in einer eigenen festen Spalte,
      die Werte stehen untereinander auf einer Kante. Unter 520 px ist dafuer
      kein Platz, dort steht der Name als kleine Zeile ueber dem Wert.
   ========================================================================== */

/* ---- a) Fussnoten zur Tabelle ---------------------------------------- */
.w-tabelle + .w-text { max-width: none; }
.w-text:has(+ .w-tabelle) { max-width: none; }

/* ---- b) Kartenansicht: Spaltenname als eigene Spalte ----------------- */
@media (max-width: 720px) {
  .w-tabelle td[data-spalte] {
    position: relative;
    padding-left: 7.75rem;
    min-height: 1.5em;
  }
  .w-tabelle td[data-spalte]::before {
    content: attr(data-spalte);
    position: absolute;
    left: 0;
    top: .35rem;
    width: 7.25rem;
    font-size: var(--t-small);
    font-weight: 600;
    line-height: 1.35;
    color: var(--c-ink-soft);
  }
}

@media (max-width: 520px) {
  .w-tabelle td[data-spalte] { padding-left: 0; min-height: 0; }
  .w-tabelle td[data-spalte]::before {
    position: static;
    display: block;
    width: auto;
    margin-bottom: .05rem;
    font-size: .75rem;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
}


/* ==========================================================================
   31. Gesperrte Einbettungen einpassen (28.10.2026)
       Im Browser an der echten Laufzeitansicht geprueft, nicht geraten.

   Complianz haengt KEINEN eigenen Behaelter ein. Es schreibt seine Klassen
   auf unseren vorhandenen Rahmen:
     .w-embed.w-embed--short.cmplz-blocked-content-container.cmplz-placeholder-1
   Damit treffen uns zwei fremde Regeln:
     1. .cmplz-blocked-content-container setzt display:flex und
        height:inherit auf den Rahmen.
     2. Zu .cmplz-placeholder-N erzeugt Complianz eine eigene Regel mit
        festen Pixelmaszen. Die leitet es aus der Eigengroesse des iframes
        ab. Unsere iframes tragen bewusst keine width- und height-Attribute,
        weil der Rahmen das Seitenverhaeltnis vorgibt. Dadurch landet
        Complianz bei rund 112 x 199 px und die Kachel schrumpft.

   Deshalb hier Anzeige, Breite, Hoehe und Seitenverhaeltnis zurueckholen.
   Das greift erst nach Complianz' Verarbeitung, vorher stimmt die Kachel
   ohnehin.

   Dazu die Optik: statt des dunklen Fremdfotos die ruhige Flieder-Flaeche
   und Markenschrift, damit eine gesperrte Kachel aussieht wie die eigenen
   .w-vph-Platzhalter daneben.
   ========================================================================== */

/* ---- Rahmen mit Seitenverhaeltnis zurueckholen ------------------------ */
.w-embed.cmplz-blocked-content-container,
.w-embed[class*="cmplz-placeholder-"] {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: var(--ar, 16 / 9) !important;
  background-image: none !important;
  background-color: var(--c-accent-soft) !important;
  box-shadow: none !important;
  animation: none !important;
}

/* ---- Karte und Formular rechnen mit Mindesthoehe statt Verhaeltnis ---- */
.w-embed--karte.cmplz-blocked-content-container,
.w-embed--karte[class*="cmplz-placeholder-"],
.w-embed--form.cmplz-blocked-content-container,
.w-embed--form[class*="cmplz-placeholder-"] {
  display: block !important;
  position: relative;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  background-image: none !important;
  background-color: var(--c-accent-soft) !important;
  box-shadow: none !important;
}

/* ---- Hinweis mittig und in Markenschrift ------------------------------ */
.w-embed .cmplz-blocked-content-notice,
.w-embed--karte .cmplz-blocked-content-notice,
.w-embed--form .cmplz-blocked-content-notice {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2;
  max-width: min(86%, 22rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: inherit;
  font-size: .9375rem !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--c-brand) !important;
}

/* Die Kategoriezeile unter dem Link doppelt dessen Aussage. */
.w-embed .cmplz-blocked-content-notice-body,
.w-embed--karte .cmplz-blocked-content-notice-body,
.w-embed--form .cmplz-blocked-content-notice-body {
  display: none !important;
}


/* ---- Standbild auf der gesperrten Kachel --------------------------------
   Jede Videokachel traegt in --poster ein Standbild aus dem Video, als
   eigene Datei unter uploads/site/poster. Solange die Einwilligung fehlt,
   zeigt die Kachel dieses Bild statt einer leeren Flaeche; der Verlauf
   darueber haelt den Hinweis lesbar. Das Bild liegt bewusst auf dem
   eigenen Server: so wird vor der Einwilligung nichts von Google geladen.
-------------------------------------------------------------------------- */
.w-embed[style*="--poster"].cmplz-blocked-content-container,
.w-embed[style*="--poster"][class*="cmplz-placeholder-"] {
  background-image:
    linear-gradient(180deg, rgba(42, 35, 99, .28) 0%, rgba(42, 35, 99, .60) 45%, rgba(42, 35, 99, .82) 100%),
    var(--poster) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.w-embed[style*="--poster"].cmplz-blocked-content-container .cmplz-blocked-content-notice,
.w-embed[style*="--poster"][class*="cmplz-placeholder-"] .cmplz-blocked-content-notice {
  color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}


/* --------------------------------------------------------------------------
   32. Cookie-Banner: Reste der TCF-Fassung ausblenden (03.11.2026)

   Complianz gibt die Banner-Vorlage immer vollstaendig aus, auch die
   Elemente, die nur mit eingeschaltetem TCF-Framework gefuellt werden.
   TCF ist hier aus, deshalb bleiben in diesen Elementen die Platzhalter
   stehen ({vendor_count}). Sie sind optisch schon verborgen, tauchen aber
   in Textauszuegen und Vorlesewerkzeugen auf. Mit display:none sind sie
   auch dort weg.
   -------------------------------------------------------------------------- */
.cmplz-cookiebanner .cmplz-manage-vendors.tcf,
.cmplz-cookiebanner .cmplz-read-more-purposes.tcf,
.cmplz-cookiebanner .cmplz-manage-options.tcf,
.cmplz-cookiebanner .cmplz-manage-third-parties,
#cmplz-manage-consent-container .cmplz-manage-vendors.tcf { display: none !important; }


/* --------------------------------------------------------------------------
   33. Kartenrahmen links wieder schliessen (03.11.2026)

   Abschnitt 27 hat die farbigen Striche links an Kacheln und Feldern
   entfernt. Bei den Feldern (.w-panel) war das richtig: die haben nur
   diesen einen Rand. Die Karten dagegen haben einen umlaufenden Rahmen,
   dem damit die linke Seite fehlte. Hier kommt nur Breite und Art zurueck,
   nicht die Farbe: so bleibt der Rahmen in weichen Abschnitten weiterhin
   unsichtbar und ist sonst so dezent wie die anderen drei Seiten.
   -------------------------------------------------------------------------- */
.w-root .w-card--kante { border-left-width: 1px; border-left-style: solid; }


/* --------------------------------------------------------------------------
   34. Silbentrennung in Ueberschriften und Kartentiteln (03.11.2026)

   Lange Woerter wie ‚Einzugsbegleitung‘ passen in einer schmalen Kachel
   nicht in eine Zeile. Ohne Trennhilfe bricht der Browser mitten im Wort
   ohne Bindestrich um. Mit hyphens:auto trennt er an den richtigen Stellen
   und setzt einen Bindestrich.
   -------------------------------------------------------------------------- */
.w-root .w-card .w-h3,
.w-root .w-h3,
.w-root .w-card__text,
.w-root .w-chip,
.w-root .w-tabelle td,
.w-root .w-tabelle th {
  -webkit-hyphens: auto;
          hyphens: auto;
  overflow-wrap: break-word;
}


/* --------------------------------------------------------------------------
   35. Augenbraue aus der H1 geloest (03.11.2026)

   Die Augenbraue stand bisher als erstes Band in der H1. Fuer Suchmaschinen
   und Vorlesewerkzeuge war die Ueberschrift damit eine Mischung aus Standort,
   Seitentitel und Claim. Jetzt traegt ein Rahmen die Bandanordnung, die
   Augenbraue ist ein eigenes Element darueber, und die H1 ist nur noch das
   Hauptband. Optisch bleibt alles, wie es war: der Rahmen behaelt die
   Klassen .w-h1 und .w-hero__bands, die H1 behaelt .w-hero__band.
   -------------------------------------------------------------------------- */
.w-root .w-hero__bands > h1.w-hero__band {
  margin: 0;
  font: inherit;
  font-weight: 700;
  letter-spacing: inherit;
  color: inherit;
}


/* --------------------------------------------------------------------------
   36. Bild auf Texthoehe im geteilten Block (03.11.2026)

   Im Block ‚Ein Team, das zusammenhaelt‘ war das Bild quadratisch und endete
   auf halber Hoehe der Textspalte. Mit diesem Zusatz waechst das Bild auf die
   Hoehe des Textes mit, ohne das Seitenverhaeltnis zu verzerren: der
   Ausschnitt wird beschnitten, nicht gestaucht. Unter 860 Pixeln steht das
   Bild wieder ueber dem Text und bekommt ein ruhiges 4:3.
   -------------------------------------------------------------------------- */
.w-root .w-split--bildhoch { align-items: stretch; }
.w-root .w-media--hoch {
  aspect-ratio: auto;
  height: 100%;
  min-height: clamp(18rem, 14rem + 14vw, 30rem);
  overflow: hidden;
}
.w-root .w-media--hoch > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
@media (max-width: 860px) {
  .w-root .w-media--hoch { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}

/* Mehr Luft zwischen den Absaetzen der Textspalte im selben Block. */
.w-root .w-split--bildhoch .w-text { margin-top: 1.1rem; }


/* --------------------------------------------------------------------------
   37. Grundservice-Raster gleichmaessig (03.11.2026)

   Abschnitt 26 hatte die sieben Karten in drei breite und vier schmale
   geteilt. Der Kunde liest das als Fehler. Jetzt sind alle Karten gleich
   breit: drei pro Reihe. Die siebte Karte steht allein in der letzten Reihe
   und rueckt in die Mitte, damit die Reihe nicht nach links kippt.
   -------------------------------------------------------------------------- */
.w-root .w-grid--34 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.w-root .w-grid--34 > * { grid-column: auto; }
.w-root .w-grid--34 > :last-child:nth-child(3n + 1) { grid-column: 2; }
@media (max-width: 900px) {
  .w-root .w-grid--34 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-root .w-grid--34 > :last-child:nth-child(3n + 1) { grid-column: auto; }
}
@media (max-width: 560px) {
  .w-root .w-grid--34 { grid-template-columns: minmax(0, 1fr); }
}


/* --------------------------------------------------------------------------
   38. Nacharbeiten aus der Sichtpruefung (03.11.2026)
   -------------------------------------------------------------------------- */

/* a) Kartenrahmen links hatte die falsche Farbe.
      Abschnitt 33 hat nur Breite und Art zurueckgeholt. Die Farbe kam damit
      aus dem Kurzschreibweise-Reset von Abschnitt 27 und war die Textfarbe
      statt der Linienfarbe — der Rand wirkte links dunkler. Jetzt wird die
      Farbe mitgesetzt, in weichen Abschnitten weiter unsichtbar wie die
      anderen drei Seiten. */
.w-root .w-card--kante { border-left: 1px solid var(--c-line); }
.w-root .w-sec--soft .w-card--kante,
.w-root .w-sec--alt .w-card--kante { border-left-color: transparent; }

/* b) Grundservice-Raster: vier Karten in der ersten Reihe, drei in der
      zweiten. Beide Reihen laufen damit ueber die volle Breite, kein
      Einzelstueck bleibt uebrig. Die vier schmalen Karten werden von selbst
      hoeher, weil der Text mehr Zeilen braucht. Hebt Abschnitt 37 auf. */
.w-root .w-grid--34 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.w-root .w-grid--34 > * { grid-column: span 3; }
.w-root .w-grid--34 > :nth-child(n + 5) { grid-column: span 4; }
.w-root .w-grid--34 > :last-child:nth-child(3n + 1) { grid-column: span 4; }
@media (max-width: 900px) {
  .w-root .w-grid--34 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-root .w-grid--34 > *,
  .w-root .w-grid--34 > :nth-child(n + 5),
  .w-root .w-grid--34 > :last-child:nth-child(3n + 1) { grid-column: auto; }
}
@media (max-width: 560px) {
  .w-root .w-grid--34 { grid-template-columns: minmax(0, 1fr); }
}

/* c) Karte: kein festes Seitenverhaeltnis.
      Eine Karte bekommt ihre Hoehe vom eingebetteten Rahmen, nicht aus 16:9.
      Sonst steht unter der Karte eine leere Flaeche. */
.w-root .w-embed--karte { aspect-ratio: auto; }
.w-root .w-embed--karte > iframe { position: static; height: auto; min-height: 420px; }

/* d) Abstaende: ein randloser Bilderstreifen stiess direkt an den Text
      darueber. */
.w-root .w-wrap + .w-streifen,
.w-root .w-wrap + .w-bildband { margin-top: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); }
.w-root .w-embed--karte + .w-text { margin-top: .9rem; }
.w-root .w-mb-2 { margin-bottom: clamp(1.1rem, .9rem + .6vw, 1.5rem); }
.w-root .w-mb-3 { margin-bottom: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); }


/* --------------------------------------------------------------------------
   39. Luft ueber einem Abschnitt mit Farbwechsel (03.11.2026)

   .w-sec--tight-top setzt den oberen Abstand auf null. Das ist richtig, wenn
   zwei gleichfarbige Abschnitte aufeinanderfolgen (so auf Ueber uns beim
   Campus). Auf Ambulant folgte der weisse Fragenblock aber auf den
   fliederfarbenen Einsatzgebiet-Block: Dort klebte die Ueberschrift am
   oberen Rand. Dieser Abschnitt traegt jetzt .w-sec--luft-oben.
   -------------------------------------------------------------------------- */
.w-root .w-sec--luft-oben { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }


/* --------------------------------------------------------------------------
   40. Bildunterschrift (03.11.2026)

   Fuer Fotos, bei denen der Name der abgebildeten Person den Beleg traegt.
   Steht unter dem Bild beziehungsweise unter einer Bildkomposition.
   -------------------------------------------------------------------------- */
.w-root .w-bildtext {
  margin: .7rem 0 0;
  max-width: 44ch;
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--c-ink-soft);
}
.w-root .w-collage-spalte { position: relative; }
.w-root .w-collage + .w-bildtext {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 44%;
  margin: 0;
  padding-top: .5rem;
  border-top: 3px solid var(--c-mint);
  color: var(--c-brand);
  font-weight: 600;
}
@media (max-width: 860px) {
  .w-root .w-collage + .w-bildtext { position: static; max-width: 44ch; margin-top: .9rem; }
}

/* ===== 41 Bildhinweis im Hero (Visualisierung) ===== */
.w-root .w-hero .w-hero__media { position: relative; }
.w-root .w-hero__bildhinweis {
  position: absolute;
  right: clamp(.75rem, 3vw, 1.6rem);
  bottom: .7rem;
  z-index: 3;
  margin: 0;
  max-width: min(36ch, 72%);
  padding: .3rem .62rem;
  border-radius: .45rem;
  background: rgba(26, 18, 54, .52);
  text-align: right;
  font-size: .72rem;
  line-height: 1.35;
  color: #fff;
}
@media (max-width: 860px) {
  .w-root .w-hero__bildhinweis {
    right: .6rem;
    left: .6rem;
    bottom: .5rem;
    max-width: none;
    text-align: left;
    font-size: .68rem;
  }
}

/* ===== 42 Naht unter dem Hero (Subpixel-Luecke) ===== */
.w-root .w-hero { margin-bottom: -1px; }

/* ===== 43 Bildslider in den Rueckblick-Karten ===== */
.w-root .w-slider { position: relative; }
.w-root .w-slider__spur {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.w-root .w-slider__spur::-webkit-scrollbar { display: none; }
.w-root .w-slider__spur > img { flex: 0 0 100%; scroll-snap-align: start; }
.w-root .w-slider__pfeil {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--c-brand);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
  cursor: pointer;
  transition: background .2s ease, opacity .2s ease;
}
.w-root .w-slider--mehrere .w-slider__pfeil { display: flex; }
.w-root .w-slider__pfeil svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.w-root .w-slider__pfeil--zurueck { left: .6rem; }
.w-root .w-slider__pfeil--vor { right: .6rem; }
.w-root .w-slider__pfeil:hover:not([disabled]) { background: #fff; }
.w-root .w-slider__pfeil[disabled] { opacity: .3; cursor: default; }
.w-root .w-slider__punkte { position: absolute; inset: auto 0 .55rem; display: none; justify-content: center; gap: .32rem; z-index: 2; }
.w-root .w-slider--mehrere .w-slider__punkte { display: flex; }
.w-root .w-slider__punkt { width: .45rem; height: .45rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); cursor: pointer; transition: width .2s ease, background .2s ease; }
.w-root .w-slider__punkt[aria-current="true"] { background: #fff; width: .85rem; border-radius: .45rem; }
@media (prefers-reduced-motion: reduce) { .w-root .w-slider__spur { scroll-behavior: auto; } }
/* ===== 44 Rueckblick-Karussell (Elementor Bild-Karussell) ===== */
.w-root .w-news__slider .elementor-image-carousel-wrapper { margin: 0; }
.w-root .w-news__slider .swiper-slide img,
.w-root .w-news__slider .swiper-slide figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}
.w-root .w-news__slider .elementor-swiper-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--c-brand);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
  font-size: .85rem;
  transition: background .2s ease;
}
.w-root .w-news__slider .elementor-swiper-button:hover { background: #fff; }
.w-root .w-news__slider .elementor-swiper-button-prev { left: .6rem; }
.w-root .w-news__slider .elementor-swiper-button-next { right: .6rem; }
.w-root .w-news__slider .swiper-pagination { position: static; margin-top: .55rem; }
.w-root .w-news__slider .swiper-pagination-bullet { background: var(--c-brand); opacity: .28; box-shadow: none; }
.w-root .w-news__slider .swiper-pagination-bullet-active { opacity: 1; }
.w-root .w-news__slider .swiper:has(.swiper-slide:only-child) .elementor-swiper-button,
.w-root .w-news__slider .swiper:has(.swiper-slide:only-child) .swiper-pagination,
.w-root .w-news__slider .swiper-container:has(.swiper-slide:only-child) .elementor-swiper-button,
.w-root .w-news__slider .swiper-container:has(.swiper-slide:only-child) .swiper-pagination { display: none; }
/* ===== 45 Merkliste in einer Reihe ===== */
.w-root .w-merk--reihe {
  grid-template-columns: repeat(3, 1fr);
  gap: 0 var(--sp-gap);
}
.w-root .w-merk--reihe > li { border-bottom: 0; align-items: start; }
@media (max-width: 860px) {
  .w-root .w-merk--reihe { grid-template-columns: 1fr; }
  .w-root .w-merk--reihe > li { border-bottom: 1px solid var(--c-line); }
  .w-root .w-merk--reihe > li:last-child { border-bottom: 0; }
}

/* ===== 46 Vorlaeufig ausgeblendet (Platzhalter) =====
   Klasse entfernen, sobald der echte Inhalt vorliegt. */
.w-root .w-verborgen { display: none !important; }

/* ===== 47 Landingpage fuer Google Ads (Seite 454) =====
   Die Seite ist Zielseite fuer Anzeigen. Alles, was vom Formular
   wegfuehrt, ist ausgeblendet: Hauptnavigation, mobiles Menue, der
   Bewerben-Button und die Navigationsspalte im Fuss. Impressum,
   Datenschutz, Kontaktdaten und die Soziale-Netzwerke-Leiste bleiben
   stehen, weil sie rechtlich bzw. fuer das Vertrauen hingehoeren.
   Bei einer weiteren Landingpage die Seiten-ID hier ergaenzen. */
body.page-id-454 .w-nav,
body.page-id-454 .w-navmob,
body.page-id-454 .w-head-bar__actions .w-btn--secondary { display: none; }
body.page-id-454 .w-head-bar__logo { pointer-events: none; cursor: default; }
body.page-id-454 .w-foot__grid > div:has(.w-foot__links) { display: none; }

/* Platzhalter fuer das Anfrageformular. Faellt automatisch weg, sobald
   der iframe im HTML-Widget steht, weil dann kein .w-lp__formplatz-text
   mehr enthalten ist. */
.w-root .w-lp__formplatz:has(.w-lp__formplatz-text) {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 2px dashed var(--c-line);
  border-radius: var(--r-md, .75rem);
  background: var(--c-soft, #f6f5fa);
}
.w-root .w-lp__formplatz-text {
  margin: 0; text-align: center; color: var(--c-muted, #6b6880);
  display: grid; gap: .45rem; font-size: .95rem; line-height: 1.5;
}
.w-root .w-lp__formplatz-text strong { font-size: 1.05rem; color: var(--c-text, #1a1236); }
.w-root .w-lp__formplatz-text code { font-size: .9em; }