@charset "utf-8";
/* Anfang Optik-Klassen (technik.js): Überschrift mit korrigierter Stufe behält das Aussehen der Designer-Stufe, z. B. <h3 class="h6"> */
.h1 { font-size: 1.6rem; color: #7a1f1f; line-height: 120%; text-align: left; font-weight: bold; margin-top: 0.67em; margin-bottom: 0.67em; }
.h2 { font-size: 1.3rem; color: #a83232; line-height: 120%; text-align: left; font-weight: bold; margin-top: 0.83em; margin-bottom: 0.83em; }
.h3 { font-size: 1.4rem; color: #7a1f1f; line-height: 120%; text-align: left; font-weight: 500; margin-top: 1em; margin-bottom: 1em; }
.h4 { font-size: 1.6rem; color: #7a1f1f; line-height: 120%; text-align: center; font-weight: 500; margin-top: 1.33em; margin-bottom: 1.33em; }
.h5 { font-size: 1.5rem; color: #7a1f1f; line-height: 120%; text-align: left; font-weight: 300; margin-top: 1.67em; margin-bottom: 1.67em; }
.h6 { font-size: 1.5rem; color: #7a1f1f; line-height: 120%; text-align: left; font-weight: 600; margin-top: 2.33em; margin-bottom: 2.33em; }
/* Ende Optik-Klassen */
/* Hauskrankenpflege Eventus – Stylesheet (mobile first)
   Gestaltung: freundlich und frisch – helle Rosé- und Pfirsichtöne, Weinrot aus dem Logo,
   das graue Dach aus dem Logo als wiederkehrendes Motiv (Hausform, Dachlinien, Dach-Marker). */

/* ---------- Farben & Grundwerte ---------- */
:root {
  --wein: #7a1f1f;            /* Logo-Rot: Buttons, Akzente – 10:1 auf Weiß */
  --wein-dunkel: #521414;     /* Hover */
  --beere: #a83232;           /* Dachzeilen, Kicker – 5,9:1 auf Weiß */
  --rose: #fbeeec;            /* Abschnittsfläche */
  --rose-zart: #fff8f6;       /* sehr helle Fläche */
  --pfirsich: #f6cdbd;        /* Deko-Flächen, Marker – nie als Textfarbe */
  --mint: #e1f2ec;            /* frischer Akzent für Haken */
  --mint-dunkel: #24705d;     /* Haken auf Mint – 5,6:1 */
  --dach: #8e8e8e;            /* Dachgrau aus dem Logo – nur Deko */
  --text: #2e2627;
  --text-grau: #5e5455;       /* 7:1 auf Weiß */
  --weiss: #ffffff;
  --linie: #eddcd8;
  --fuss: #2b2021;
  --fokus: #a83232;
  --fokus-dunkel: #ffd27a;
  --radius: 22px;
  --radius-klein: 12px;
  --schatten: 0 18px 50px -22px rgba(82, 20, 20, 0.35);
  --schatten-klein: 0 8px 24px -12px rgba(82, 20, 20, 0.28);
  --breite: 82rem;
  --weich: cubic-bezier(0.22, 0.8, 0.24, 1);
  --schrift: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: 7rem; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--weiss);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 1rem; }
.wrap--schmal { max-width: 54rem; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 1000;
  background: var(--wein); color: var(--weiss); padding: 0.75rem 1rem; border-radius: var(--radius-klein);
}
.skip-link:focus { top: 1rem; color: var(--weiss); }

/* ---------- Schrift-Klassen (Hausregel, Farben aus der Eventus-Palette) ---------- */
.schrift1 { font-size: 1.2em; color: #a83232; text-align: left; line-height: 1.2; font-weight: bold; }
.schrift2 { font-size: 1.1em; color: #7a1f1f; line-height: 1.2; }
.schrift3 { font-size: 1.1em; color: #999; line-height: 1.2; }
.schrift4 { font-size: 1.0em; color: #a83232; line-height: 1.0; text-decoration: underline; }
.schrift5 { font-size: 1.0em; color: #FFF; text-align: center; }
.schrift6 { font-size: 1.6em; color: #FFF; text-align: center; }

/* Bedienelemente (Menü, Knöpfe, Karten) in der Seitenschrift – Fließtext-Links behalten die Designer-Optik aus style_wbs.css */
.rufleiste__notruf, .kontaktzeile a, .nav__link, .subnav a, .btn, .pfeil-link, .fachbereiche a, .hero__karte,
.kontaktkarte__wert, .kontaktkarte__text a, .site-footer a, .karte a, .skip-link, .nach-oben { font-family: inherit; }

/* ---------- Puls-Punkt (Rufbereitschaft) ---------- */
.puls {
  position: relative; display: inline-block; width: 0.7rem; height: 0.7rem; flex: 0 0 auto;
  border-radius: 50%; background: #e2463d;
}
.puls::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #e2463d;
  animation: puls 1.8s ease-out infinite;
}
@keyframes puls { from { transform: scale(1); opacity: 0.7; } to { transform: scale(2.8); opacity: 0; } }

/* ---------- Handy/Tablet: Leiste oben – fixiert, immer sichtbar ---------- */
.mobilleiste { position: sticky; top: 0; z-index: 600; background: var(--weiss); box-shadow: 0 2px 14px rgba(82, 20, 20, 0.12); }
.mobilleiste__inner { display: flex; align-items: center; gap: 0.35rem; min-height: 56px; }
.mobilleiste__link, .nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; border-radius: 50%;
}
.mobilleiste__link img { width: 32px; height: 32px; transition: transform 0.25s var(--weich); }
.mobilleiste__link:hover img { transform: scale(1.1); }
.nav-toggle {
  margin-left: auto; background: var(--wein); color: var(--weiss); border: 0; padding: 0;
  font: inherit; cursor: pointer; width: 46px; height: 46px;
}
.nav-toggle .icon { width: 26px; height: 26px; }
.nav-toggle[aria-expanded="true"] { background: var(--wein-dunkel); }
.no-js .nav-toggle { display: none; }

/* ---------- Rufbereitschaft-Leiste ---------- */
.rufleiste { background: var(--wein); color: #fbe3df; font-size: 0.92rem; }
.rufleiste__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 2rem; min-height: 40px; padding-top: 0.3rem; padding-bottom: 0.3rem; }
.rufleiste__notruf, .rufleiste__notruf:visited { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--weiss); text-decoration: none; font-size: inherit; }
.rufleiste__notruf:hover { color: var(--weiss); text-decoration: underline; }
.rufleiste__notruf strong { font-weight: 700; }
.rufleiste__zeiten { display: none; }
.rufleiste :focus-visible { outline-color: var(--fokus-dunkel); }

/* ---------- Kopfbereich: Handy = Logo mittig ---------- */
.site-header { background: var(--weiss); }
.header__inner { display: flex; flex-direction: column; align-items: center; padding-top: 1.4rem; padding-bottom: 0.6rem; }
.logo { display: block; flex: 0 0 auto; }
.logo img { width: min(78vw, 330px); height: auto; }
.kontaktzeile { display: none; }

/* ---------- Navigation Handy ---------- */
#hauptmenue { display: none; }
#hauptmenue.is-open {
  display: block; position: fixed; top: 56px; left: 0; right: 0; z-index: 590;
  max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); overflow-y: auto;
  background: var(--weiss); box-shadow: 0 16px 30px rgba(82, 20, 20, 0.2); padding: 0 1rem;
  border-top: 3px solid var(--pfirsich);
}
.no-js #hauptmenue { display: block; width: 100%; }
.nav { list-style: none; margin: 0; padding: 0.25rem 0 1rem; }
.nav li { margin: 0; border: 0; }
.nav li::marker { content: none; }
.nav__item + .nav__item { border-top: 1px solid var(--linie); }
.nav__link, .nav__toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  font: inherit; font-weight: 600; color: var(--text); text-decoration: none;
  background: none; border: 0; padding: 0.75rem 0.25rem; cursor: pointer; text-align: left; min-height: 44px;
}
.nav__link:visited { color: var(--text); text-decoration: none; }
.nav__toggle::after {
  content: ""; width: 0.5em; height: 0.5em; margin-left: 0.5rem; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform 0.2s;
}
.nav__toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
.nav__link:hover, .nav__toggle:hover { color: var(--wein); }
.nav__item.is-current > .nav__toggle, .nav__link[aria-current="page"] { color: var(--wein); }
.subnav { list-style: none; margin: 0; padding: 0 0 0.5rem 1rem; display: none; }
.nav__toggle[aria-expanded="true"] + .subnav { display: block; }
.no-js .subnav { display: block; }
.subnav a { display: block; padding: 0.55rem 0.25rem; color: var(--text); text-decoration: none; min-height: 44px; }
.subnav a:visited { color: var(--text); }
.subnav a:hover { color: var(--wein); text-decoration: underline; }
.subnav a[aria-current="page"] { color: var(--wein); font-weight: 600; }
.nav__cta { display: inline-block; margin-top: 0.75rem; }

/* ---------- Desktop: Logo links, rechts Kontaktzeile + Menü – fixiert ---------- */
@media (min-width: 80em) {
  .mobilleiste { display: none; }
  .rufleiste__inner { justify-content: space-between; }
  .rufleiste__zeiten { display: inline; }
  .site-header { position: sticky; top: 0; z-index: 500; transition: box-shadow 0.3s; }
  .site-header.ist-gescrollt { box-shadow: 0 6px 24px -10px rgba(82, 20, 20, 0.3); }
  .header__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 0.9rem; padding-bottom: 0.9rem; }
  .logo img { width: 190px; transition: width 0.3s var(--weich); }
  .ist-gescrollt .logo img { width: 175px; }
  .header__rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }

  .kontaktzeile { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; font-size: 0.92rem; }
  .kontaktzeile li { margin: 0; border: 0; }
  .kontaktzeile li::marker { content: none; }
  .kontaktzeile a { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text-grau); text-decoration: none; font-size: 0.92rem; }
  .kontaktzeile a:hover { color: var(--wein); text-decoration: underline; }
  .kontaktzeile img { width: 26px; height: 26px; }

  #hauptmenue, .no-js #hauptmenue { display: block; width: auto; }
  .nav { display: flex; align-items: center; gap: 0; padding: 0; font-size: 0.94rem; }
  .nav__item, .nav__item + .nav__item { border-top: 0; position: relative; }
  .nav__link, .nav__toggle { position: relative; width: auto; padding: 0.55rem 0.5rem; font-weight: 600; white-space: nowrap; border-radius: 999px; }
  .nav__link:hover, .nav__toggle:hover { color: var(--wein); background: var(--rose-zart); }
  /* kleines Dach über dem aktiven Menüpunkt – Motiv aus dem Logo */
  .nav__link::before, .nav__toggle::before {
    content: ""; position: absolute; left: 50%; top: -0.15rem; width: 0.8rem; height: 0.8rem;
    border-top: 3px solid var(--wein); border-left: 3px solid var(--wein);
    transform: translateX(-50%) rotate(45deg) scale(0); transition: transform 0.25s var(--weich);
  }
  .nav__link:hover::before, .nav__toggle:hover::before,
  .nav__link[aria-current="page"]::before, .nav__item.is-current > .nav__toggle::before { transform: translateX(-50%) rotate(45deg) scale(1); }
  .subnav {
    position: absolute; top: calc(100% + 0.4rem); left: 0; min-width: 17rem; padding: 0.6rem; z-index: 10;
    background: var(--weiss); border-radius: var(--radius-klein); box-shadow: var(--schatten);
    border-top: 4px solid var(--pfirsich);
  }
  .subnav::before { content: ""; position: absolute; left: 0; right: 0; top: -0.8rem; height: 0.8rem; }
  .nav__item:last-child .subnav, .nav__item:nth-last-child(2) .subnav, .nav__item:nth-last-child(3) .subnav { left: auto; right: 0; }
  .no-js .subnav { display: none; }
  .nav__item:hover > .subnav, .no-js .nav__item:focus-within > .subnav { display: block; animation: aufklappen 0.25s var(--weich); }
  .subnav a { padding: 0.5rem 0.8rem; min-height: 0; border-radius: 8px; }
  .subnav a:hover { background: var(--rose); text-decoration: none; }
  .nav__cta { margin: 0 0 0 0.5rem; padding: 0.65rem 1.25rem; }
  .nav__cta::before { display: none; }
}
@keyframes aufklappen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Buttons ---------- */
.btn, .btn:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: inherit; font-weight: 700; text-decoration: none; text-align: center;
  padding: 0.85rem 1.6rem; border-radius: 999px; border: 2px solid var(--wein);
  background: var(--wein); color: var(--weiss); cursor: pointer; min-height: 48px; line-height: 1.3;
  box-shadow: 0 10px 22px -12px rgba(122, 31, 31, 0.8);
  transition: transform 0.25s var(--weich), background-color 0.25s, box-shadow 0.25s, color 0.25s;
}
.btn:hover { background: var(--wein-dunkel); border-color: var(--wein-dunkel); color: var(--weiss); transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(82, 20, 20, 0.9); }
.btn--hell, .btn--hell:visited { background: var(--weiss); color: var(--wein); box-shadow: none; }
.btn--hell:hover { background: var(--rose); color: var(--wein-dunkel); border-color: var(--wein-dunkel); }
.btn--rahmen, .btn--rahmen:visited { background: transparent; border-color: var(--weiss); color: var(--weiss); box-shadow: none; }
.btn--rahmen:hover { background: var(--weiss); color: var(--wein); border-color: var(--weiss); }
.btn--klein, .btn--klein:visited { padding: 0.6rem 1.2rem; min-height: 44px; font-size: 0.95rem; }
.btn-gruppe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* Pfeil-Link */
.pfeil-link, .pfeil-link:visited { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--wein); text-decoration: none; }
.pfeil-link::after { content: "→"; transition: transform 0.25s var(--weich); }
.pfeil-link:hover { color: var(--wein-dunkel); text-decoration: underline; }
.pfeil-link:hover::after { transform: translateX(4px); }
.link-zeile { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 1.5rem; }

/* ---------- Abschnitte ---------- */
.section { position: relative; padding: 3.5rem 0; }
.section--alt { background: var(--rose-zart); }
.section--rose { background: var(--rose); }
.section__intro { max-width: 52rem; }
.lead { font-size: 1.15rem; color: var(--text); }

/* Dachzeile mit kleinem Dach davor */
.dachzeile { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--beere); }
.dachzeile::before {
  content: ""; width: 0.7rem; height: 0.7rem; margin-top: 0.35rem;
  border-top: 3px solid currentColor; border-left: 3px solid currentColor; transform: rotate(45deg);
}
.abschnitt-kopf { text-align: center; max-width: 54rem; margin: 0 auto 2.5rem; }
.abschnitt-kopf .section__intro { margin-left: auto; margin-right: auto; }
.abschnitt-kopf h4, .abschnitt-kopf .h4 { margin: 0.5rem 0 1rem; font-weight: 700; line-height: 1.25; }
.abschnitt-kopf .hero__headline { margin-top: 0.4rem; font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); font-weight: 800; color: var(--wein); }

.kicker { display: block; font-size: 0.9rem; line-height: 1.45; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--beere); margin-bottom: 0.5rem; }

/* ---------- Hero Startseite: Text links, Bild in Hausform rechts ---------- */
.page-hero { position: relative; padding: 1.5rem 0 3rem; overflow-x: clip; }
.page-hero__grid { position: relative; display: grid; gap: 2.5rem; align-items: center; }
.page-hero--start {
  background:
    radial-gradient(circle at 12% 18%, rgba(246, 205, 189, 0.55), transparent 42%),
    radial-gradient(circle at 92% 85%, rgba(225, 242, 236, 0.9), transparent 38%),
    linear-gradient(180deg, var(--rose-zart), var(--rose));
  padding-top: 2.5rem; padding-bottom: 4rem;
}
.hero__blasen span {
  position: absolute; border-radius: 50%; background: rgba(246, 205, 189, 0.45);
  animation: schweben 12s ease-in-out infinite;
}
.hero__blasen span:nth-child(1) { width: 9rem; height: 9rem; left: -3rem; bottom: 12%; }
.hero__blasen span:nth-child(2) { width: 4rem; height: 4rem; left: 44%; top: 10%; background: rgba(168, 50, 50, 0.08); animation-delay: -4s; }
.hero__blasen span:nth-child(3) { width: 6rem; height: 6rem; right: 6%; top: 6%; background: rgba(225, 242, 236, 0.9); animation-delay: -8s; }
@keyframes schweben { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(12px, -18px); } }

.page-hero__text { position: relative; z-index: 1; }
.page-hero h1 { margin: 0 0 1.25rem; color: var(--text); font-family: var(--schrift-titel); }
.hero__slogan {
  display: block; font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4.3rem); font-weight: 800;
  line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 0.35em; color: var(--text);
}
.hero__marker { position: relative; color: var(--wein); white-space: nowrap; }
.hero__marker::after {
  content: ""; position: absolute; left: -0.08em; right: -0.08em; bottom: 0.08em; height: 0.3em; z-index: -1;
  background: var(--pfirsich); border-radius: 999px; transform-origin: left; animation: marker 1.1s 0.5s var(--weich) both;
}
@keyframes marker { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__slogan2 { display: block; font-size: 1.3em; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 0.4em; }
.hero__headline { display: block; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); font-weight: 600; color: var(--text); line-height: 1.4; }
.page-hero .lead { max-width: 38rem; }

.hero__punkte { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; list-style: none; padding: 0; margin: 1.75rem 0 0; font-weight: 600; font-size: 0.97rem; }
.hero__punkte li { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; border: 0; }
.hero__punkte li::marker { content: none; }
.hero__punkte li::before {
  content: ""; width: 1.4rem; height: 1.4rem; border-radius: 50%; flex: 0 0 auto;
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324705d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 0.9rem no-repeat;
}

/* Bild in Hausform mit gezeichneter Dachlinie */
.hero__haus { position: relative; margin: 0 auto; width: min(100%, 34rem); padding-top: 2.2rem; }
.hero__haus img {
  width: 100%; aspect-ratio: 1 / 1.02; object-fit: cover; object-position: 38% center;
  clip-path: polygon(50% 0, 100% 24%, 100% 100%, 0 100%, 0 24%);
  border-radius: 0 0 var(--radius) var(--radius);
}
.hero__dach { position: absolute; left: -3%; top: 0; width: 106%; height: auto; overflow: visible; z-index: 2; pointer-events: none; }
.hero__dach path {
  fill: none; stroke: var(--dach); stroke-width: 16; stroke-linejoin: miter; stroke-linecap: butt;
  stroke-dasharray: 1000; stroke-dashoffset: 0; animation: dach-zeichnen 1.8s 0.3s var(--weich) both;
}
@keyframes dach-zeichnen { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

.hero__karte, .hero__karte:visited {
  position: absolute; left: -0.5rem; bottom: 1.5rem; z-index: 3;
  display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1.2rem;
  background: var(--weiss); color: var(--text); text-decoration: none; line-height: 1.35; font-size: 0.95rem;
  border-radius: 16px; box-shadow: var(--schatten); animation: schweben 7s ease-in-out infinite;
}
.hero__karte strong { color: var(--wein); }
.hero__karte:hover { color: var(--wein); text-decoration: underline; }

.hero__siegel {
  position: absolute; right: -0.25rem; top: 32%; z-index: 3; width: 7.2rem; height: 7.2rem;
  border-radius: 50%; background: var(--wein); color: var(--weiss); box-shadow: var(--schatten);
  display: grid; place-items: center;
}
.hero__siegel svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: drehen 22s linear infinite; }
.hero__siegel text { fill: #fbe3df; font-size: 10.5px; font-weight: 700; letter-spacing: 2.2px; }
.hero__siegel-jahr { position: relative; text-align: center; line-height: 1.05; font-size: 0.78rem; }
.hero__siegel-jahr strong { font-size: 1.45rem; }
@keyframes drehen { to { transform: rotate(360deg); } }

/* ---------- Laufband ---------- */
.laufband { background: var(--wein); color: var(--weiss); overflow: hidden; padding: 0.95rem 0; font-weight: 600; letter-spacing: 0.02em; }
.laufband__spur { display: flex; width: max-content; animation: laufen 45s linear infinite; }
.laufband:hover .laufband__spur { animation-play-state: paused; }
.laufband span { display: inline-flex; align-items: center; white-space: nowrap; padding: 0 1.4rem; }
.laufband span::after { content: ""; width: 0.55rem; height: 0.55rem; margin-left: 2.8rem; border-top: 2px solid var(--pfirsich); border-left: 2px solid var(--pfirsich); transform: rotate(45deg) translateY(2px); }
@keyframes laufen { to { transform: translateX(-50%); } }

/* ---------- Zweiter Hero-Block: Fachbereiche, Bild links ---------- */
.page-hero--bild-links { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.page-hero--bild-links h2, .page-hero--bild-links .h2 { color: var(--text); margin: 0.6rem 0 1.25rem; font-family: var(--schrift-titel); }
.page-hero--bild-links .hero__slogan2 { color: var(--wein); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); }
.page-hero__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); box-shadow: var(--schatten); }

.fachbereiche { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }
.fachbereiche li {
  position: relative; margin: 0; padding: 1rem 1.2rem 1rem 3.4rem; border: 0;
  background: var(--rose-zart); border-radius: var(--radius-klein); line-height: 1.55;
  transition: transform 0.25s var(--weich), background-color 0.25s;
}
.fachbereiche li::marker { content: none; }
.fachbereiche li::before {
  content: ""; position: absolute; left: 1.25rem; top: 1.45rem; width: 0.85rem; height: 0.85rem;
  border-top: 3px solid var(--wein); border-left: 3px solid var(--wein); transform: rotate(45deg);
}
.fachbereiche li:hover { transform: translateX(6px); background: var(--rose); }
.fachbereiche strong { color: var(--wein); }
.fachbereiche a, .fachbereiche a:visited { color: var(--text); font-size: inherit; text-decoration: underline; text-decoration-color: var(--pfirsich); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.fachbereiche a:hover { color: var(--wein); text-decoration-color: var(--wein); }
/* Unterpunkte im Kasten (Kunde 28.10.2026: zwei Kästen Leistungen / Wohngemeinschaften) */
.fachbereiche .fachbereiche__punkte { list-style: none; margin: 0.45rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.fachbereiche .fachbereiche__punkte li { padding: 0 0 0 1.05rem; background: none; border-radius: 0; transition: none; }
.fachbereiche .fachbereiche__punkte li::before { left: 0; top: 0.62em; width: 0.42rem; height: 0.42rem; border: 0; border-radius: 50%; background: var(--beere); transform: none; }
.fachbereiche .fachbereiche__punkte li:hover { transform: none; background: none; }

/* ---------- Raster & Karten ---------- */
.grid { display: grid; gap: 1.5rem; }
.karte {
  position: relative; background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten-klein);
  padding: 1.75rem; transition: transform 0.35s var(--weich), box-shadow 0.35s;
}
.karte:hover { transform: translateY(-6px); box-shadow: var(--schatten); }
.karte h5, .karte .h5 { margin: 0 0 0.6rem; font-weight: 700; font-size: 1.3rem; line-height: 1.25; }
.karte p:last-child { margin-bottom: 0; }
.karte--bild { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.karte__bild { overflow: hidden; clip-path: polygon(0 16%, 50% 0, 100% 16%, 100% 100%, 0 100%); background: var(--rose); }
.karte__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.6s var(--weich); }
.karte--bild:hover .karte__bild img { transform: scale(1.07); }
.karte__inhalt { padding: 1.25rem 1.6rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.karte__inhalt .pfeil-link { margin-top: auto; }
.karte__inhalt p { margin-bottom: 1.1rem; }

.zweispaltig { display: grid; gap: 2.5rem; align-items: center; }
.bild { margin: 0; }

/* ---------- Über uns ---------- */
.ueber h3, .ueber .h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); font-weight: 700; line-height: 1.25; margin-top: 0; }
.ueber__video video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--fuss);
  border-radius: var(--radius); box-shadow: var(--schatten);
}
.zitat { position: relative; margin: 1.5rem 0 0; padding: 1.5rem 1.6rem 1.4rem 4.2rem; background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten-klein); }
.zitat::before { content: "„"; position: absolute; left: 1.1rem; top: -0.6rem; font-size: 4.8rem; line-height: 1; font-family: Georgia, serif; color: var(--pfirsich); }
.zitat blockquote { margin: 0; }
.zitat p { font-size: 1.12rem; font-style: italic; margin-bottom: 0.5rem; color: var(--wein); }
.zitat figcaption { font-weight: 600; font-size: 0.95rem; color: var(--text-grau); }
.zitat figcaption::before { content: "– "; }

/* ---------- Zahlen-Band ---------- */
.zahlen {
  position: relative; overflow: hidden; padding: 3rem 0; color: var(--weiss);
  background: linear-gradient(120deg, var(--wein-dunkel), var(--wein) 55%, var(--beere));
}
.zahlen::before, .zahlen::after {
  content: ""; position: absolute; width: 22rem; height: 22rem; border: 18px solid rgba(255, 255, 255, 0.06);
  border-right: 0; border-bottom: 0; transform: rotate(45deg);
}
.zahlen::before { left: -8rem; top: 4rem; }
.zahlen::after { right: -6rem; top: 6rem; }
.zahlen__grid { position: relative; display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); text-align: center; }
.zahl { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.zahl__wert {
  display: flex; align-items: baseline; justify-content: center; min-height: clamp(2.4rem, 1.6rem + 3vw, 3.6rem);
  font-family: var(--schrift-titel); font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); font-weight: 800; line-height: 1;
}
.zahl__vorsatz { font-size: 0.5em; font-weight: 700; }
.zahl__wert--klein { align-items: center; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
.zahl__text { font-size: 0.97rem; color: #fbe3df; max-width: 14rem; }

/* ---------- Wohngemeinschaften ---------- */
.wgs::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3rem;
  background: var(--weiss); clip-path: ellipse(70% 100% at 50% 0);
}
.wg {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  background: var(--weiss); border-radius: var(--radius); padding: 1rem 1rem 1.6rem; box-shadow: var(--schatten-klein);
  transition: transform 0.35s var(--weich), box-shadow 0.35s;
}
.wg:hover { transform: translateY(-6px) rotate(-0.6deg); box-shadow: var(--schatten); }
.wg__nr {
  position: absolute; right: 1.1rem; top: -1.6rem; z-index: 2; font-family: var(--schrift-titel);
  font-size: 3.6rem; font-weight: 800; line-height: 1; color: var(--weiss);
  -webkit-text-stroke: 2px var(--beere); text-shadow: 4px 4px 0 var(--pfirsich);
}
.wg__bild { width: 100%; overflow: hidden; border-radius: 16px; }
.wg__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.6s var(--weich); }
.wg:hover .wg__bild img { transform: scale(1.06); }
.wg h5, .wg .h5 { margin: 1.1rem 0.4rem 0.5rem; font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.wg p { margin: 0 0.4rem 1.2rem; color: var(--text-grau); }
.wg .btn { margin: auto 0.4rem 0; }

/* ---------- Vorteile ---------- */
/* Kopf mit Text in zwei Spalten auf rosé Fläche, Dach-Motiv als Deko */
.vorteile__kopf {
  position: relative; overflow: hidden; margin-bottom: 2.5rem; padding: 2rem 1.5rem;
  background: var(--rose-zart); border-radius: var(--radius); border-left: 6px solid var(--pfirsich);
}
.vorteile__kopf::after {
  content: ""; position: absolute; right: -3rem; bottom: -6rem; width: 14rem; height: 14rem;
  border-top: 16px solid rgba(122, 31, 31, 0.06); border-left: 16px solid rgba(122, 31, 31, 0.06); transform: rotate(45deg);
}
.vorteile__kopf > div { position: relative; }
.vorteile h4, .vorteile .h4 { text-align: left; font-weight: 700; margin: 0.5rem 0 1rem; }
.karte--symbol { border-top: 4px solid var(--pfirsich); }
.symbol { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin-bottom: 1rem; border-radius: 50%; background: var(--rose); transition: transform 0.35s var(--weich), background-color 0.35s; }
.symbol svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: var(--wein); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.karte--symbol:hover .symbol { transform: rotate(-8deg) scale(1.08); background: var(--pfirsich); }

/* ---------- Galerie ---------- */
.galerie { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 9rem; grid-auto-flow: dense; }
.galerie li { margin: 0; border: 0; }
.galerie li::marker { content: none; }
.galerie__gross { grid-column: span 2; grid-row: span 2; }
.galerie__hoch { grid-row: span 2; }
.galerie__link { position: relative; display: block; height: 100%; border-radius: 16px; overflow: hidden; cursor: zoom-in; }
.galerie__link img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--weich); }
.galerie__link::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s;
  background: linear-gradient(180deg, transparent 50%, rgba(82, 20, 20, 0.55)) ,
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2M11 8v6M8 11h6'/%3E%3C/svg%3E") right 0.8rem bottom 0.8rem / 1.8rem no-repeat;
}
.galerie__link:hover img { transform: scale(1.07); }
.galerie__link:hover::after, .galerie__link:focus-visible::after { opacity: 1; }
.galerie__link:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.hinweis { font-size: 0.95rem; color: var(--text-grau); margin-top: 1.25rem; text-align: center; }

/* ---------- Bildvorschau (liegt im Fenster über der Seite) ---------- */
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--weiss); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(43, 18, 18, 0.82); }
.lightbox :focus-visible { outline: 3px solid var(--fokus-dunkel); outline-offset: 3px; }
.lightbox__figur { margin: 0; width: 100%; height: 100%; padding: 4.5rem 1rem 6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; }
.lightbox__bild { max-width: min(100%, 1100px); max-height: 100%; width: auto; height: auto; min-height: 0; object-fit: contain; border-radius: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.lightbox__text { max-width: 60rem; text-align: center; font-size: 0.95rem; color: #fbe3df; background: rgba(43, 18, 18, 0.85); padding: 0.4rem 0.9rem; border-radius: 8px; }
.lightbox__knopf { position: absolute; width: 50px; height: 50px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; background: var(--weiss); color: var(--wein); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.lightbox__knopf:hover { background: var(--pfirsich); }
.lightbox__schliessen { top: 1rem; right: 1rem; }
.lightbox__zurueck { bottom: 1.25rem; left: calc(50% - 62px); }
.lightbox__weiter { bottom: 1.25rem; right: calc(50% - 62px); }
@media (min-width: 48em) {
  .lightbox__figur { padding: 4rem 6rem 3rem; }
  .lightbox__zurueck { bottom: auto; top: 50%; left: 1.5rem; transform: translateY(-50%); }
  .lightbox__weiter { bottom: auto; top: 50%; right: 1.5rem; transform: translateY(-50%); }
}

/* ---------- CTA mit Kontaktformular ---------- */
.section--cta {
  overflow: hidden; color: var(--weiss);
  background:
    radial-gradient(circle at 85% 10%, rgba(246, 205, 189, 0.22), transparent 40%),
    linear-gradient(135deg, var(--wein-dunkel), var(--wein) 50%, var(--beere));
}
.cta__dach { position: absolute; right: -8rem; top: 1.5rem; width: 34rem; opacity: 0.12; pointer-events: none; }
.cta__dach path { fill: none; stroke: var(--weiss); stroke-width: 18; }
.cta__kopf { position: relative; text-align: center; max-width: 50rem; margin: 0 auto; }
.cta__kopf .schrift6 { display: block; font-family: var(--schrift-titel); font-weight: 800; line-height: 1.2; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); margin-bottom: 1rem; }
.cta__kopf .section__intro { color: #fbe3df; margin-left: auto; margin-right: auto; }
.section--cta .btn-gruppe { justify-content: center; }
.section--cta .btn:not(.btn--rahmen), .section--cta .btn:not(.btn--rahmen):visited { background: var(--weiss); color: var(--wein); border-color: var(--weiss); }
.section--cta .btn:not(.btn--rahmen):hover { background: var(--pfirsich); border-color: var(--pfirsich); color: var(--wein-dunkel); }
.section--cta :focus-visible { outline-color: var(--fokus-dunkel); }

/* Pflegeauto fährt auf einer gestrichelten Straße ins Bild */
.cta__strasse {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  margin: 2.25rem 0 2rem; padding-bottom: 1rem; border-bottom: 3px dashed rgba(255, 255, 255, 0.35);
}
.cta__auto { position: relative; width: min(70vw, 300px); filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.3)); }
.cta__unterwegs { font-weight: 700; color: #fbe3df; text-align: center; }
.js-animation .cta__auto { transform: translateX(-120vw); }
.js-animation .cta__strasse.ist-sichtbar .cta__auto { animation: anfahren 1.6s var(--weich) forwards; }
@keyframes anfahren {
  0% { transform: translateX(-120vw); }
  70% { transform: translateX(14px) rotate(-1deg); }
  85% { transform: translateX(-4px) rotate(0.5deg); }
  100% { transform: translateX(0); }
}

/* Kontaktkarten unter dem CTA */
.kontaktkarten { position: relative; list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 1.25rem; }
.kontaktkarte {
  position: relative; margin: 0; border: 0; display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  padding: 2rem 1.5rem 1.75rem; text-align: center; color: var(--text);
  background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten);
  transition: transform 0.35s var(--weich);
}
.kontaktkarte::marker { content: none; }
.kontaktkarte:hover { transform: translateY(-6px); }
.kontaktkarte img { width: 3.2rem; height: 3.2rem; margin-bottom: 0.4rem; }
.kontaktkarte__puls { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: 0.4rem; border-radius: 50%; background: var(--rose); }
.kontaktkarte__puls .puls { width: 1rem; height: 1rem; }
.kontaktkarte__titel { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--beere); }
.kontaktkarte__wert, .kontaktkarte__wert:visited { font-family: var(--schrift-titel); font-size: 1.35rem; font-weight: 800; color: var(--wein); text-decoration: none; overflow-wrap: anywhere; }
.kontaktkarte__wert:hover { color: var(--wein-dunkel); text-decoration: underline; }
.kontaktkarte__text { font-size: 0.95rem; color: var(--text-grau); }
.kontaktkarte__text a, .kontaktkarte__text a:visited { color: var(--wein); font-size: inherit; }
.section--cta .kontaktkarte :focus-visible { outline-color: var(--fokus); }
.kontaktkarte--notruf { background: var(--rose-zart); outline: 3px solid var(--pfirsich); outline-offset: -3px; }

/* ---------- FAQ (akkordion.css + Feinschliff) ---------- */
.faq { text-align: center; }
.faq h6, .faq .h6 { text-align: center; margin: 0.5rem 0 2rem; font-weight: 700; }
.faq .acc { margin: 0 0 0.85rem; min-width: 0; }
.faq .acc .choice { background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; transition: box-shadow 0.3s, border-color 0.3s; }
.faq .acc .choice:hover { border-color: var(--pfirsich); box-shadow: var(--schatten-klein); }
.faq .acc label { border-bottom: 0; padding: 1rem 0.5rem 1rem 1.25rem; font-weight: 600; line-height: 1.4; color: var(--text); }
.faq .acc label.close { padding-right: 1.25rem; text-align: right; }
.faq .acc label:nth-child(odd)::after, .faq .acc input.open:checked ~ label.close::after {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-left: 0.75rem; border-radius: 50%;
  background: var(--rose); color: var(--wein); font-size: 1.3rem; line-height: 1; font-weight: 700;
}
.faq .acc input.open:checked ~ label:nth-child(odd)::after { display: none; }
.faq .acc input.open:checked ~ label { background: var(--rose); color: var(--wein); }
.faq .acc input.open:checked ~ label.close::after { background: var(--wein); color: var(--weiss); }
.faq .acc .panel { background: var(--rose-zart); }
.faq .acc input.open:checked ~ .panel { padding: 1.5rem 1.6rem; }
.faq .acc .panel ul { padding-left: 1.25rem; }
.faq .acc .panel li { margin-bottom: 0.5rem; }
/* FAQ auf Unterseiten (Grund-/Behandlungspflege): Abstand zum Text davor, Antworten linksbündig */
.faq--seite { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--linie); }
.faq--seite .acc .panel { text-align: left; }

/* ---------- Fußzeile ---------- */
.site-footer { position: relative; background: var(--fuss); color: #e9dcda; padding: 4rem 0 1.5rem; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--wein), var(--beere), var(--pfirsich)); }
.site-footer a, .site-footer a:visited { color: var(--weiss); font-size: inherit; }
.site-footer a:hover { color: var(--pfirsich); text-decoration-thickness: 2px; }
.site-footer :focus-visible { outline-color: var(--fokus-dunkel); }
.footer__grid { display: grid; gap: 2rem; line-height: 1.9; }
.footer__titel { color: var(--weiss); font-size: 1.15rem; margin: 0 0 0.9rem; padding-bottom: 0.45rem; border-bottom: 3px solid var(--pfirsich); display: inline-block; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.25rem; border: 0; }
.site-footer li::marker { content: none; }
.footer__unten { border-top: 1px solid rgba(255, 255, 255, 0.18); margin-top: 2.5rem; padding-top: 1.25rem; font-size: 0.95rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }
.footer__unten p { margin: 0; }

/* Platzhalter (vor Livegang entfernen) */
.platzhalter { background: #fff3cd; color: #5c4400; padding: 0.1em 0.35em; border-radius: 4px; font-weight: 600; }

/* ---------- Nach oben ---------- */
.nach-oben {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 400; display: grid; place-items: center;
  width: 3.1rem; height: 3.1rem; border-radius: 50%; background: var(--wein); color: var(--weiss);
  box-shadow: var(--schatten); opacity: 0; transform: translateY(1rem); pointer-events: none;
  transition: opacity 0.3s, transform 0.3s var(--weich), background-color 0.25s;
}
.nach-oben svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nach-oben.ist-sichtbar { opacity: 1; transform: none; pointer-events: auto; }
.nach-oben:hover { background: var(--wein-dunkel); color: var(--weiss); }

/* ---------- Einblenden beim Scrollen (nur mit JavaScript und ohne Bewegungs-Einschränkung) ---------- */
.js-animation .einblenden { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--weich), transform 0.8s var(--weich); }
.js-animation .einblenden.ist-sichtbar { opacity: 1; transform: none; }
.js-animation .grid > .einblenden:nth-child(2), .js-animation .zahlen__grid > .einblenden:nth-child(2) { transition-delay: 0.12s; }
.js-animation .grid > .einblenden:nth-child(3), .js-animation .zahlen__grid > .einblenden:nth-child(3) { transition-delay: 0.24s; }
.js-animation .grid > .einblenden:nth-child(4), .js-animation .zahlen__grid > .einblenden:nth-child(4) { transition-delay: 0.36s; }

/* ---------- Tablet ---------- */
@media (min-width: 40em) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .galerie { grid-auto-rows: 11rem; }
  .hero__karte { left: -1.5rem; }
  .hero__siegel { right: -1.5rem; width: 8rem; height: 8rem; }
}

/* ---------- Desktop ---------- */
@media (min-width: 64em) {
  .section { padding: 5rem 0; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .zweispaltig { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .zahlen__grid { grid-template-columns: repeat(4, 1fr); }
  .page-hero--start { padding-top: 3.5rem; padding-bottom: 5.5rem; }
  .page-hero--start .page-hero__grid { grid-template-columns: 1.08fr 0.92fr; gap: 4rem; }
  .hero__haus { width: 100%; }
  .hero__dach { left: -7%; width: 114%; }
  .page-hero--bild-links { padding-top: 5rem; padding-bottom: 5rem; }
  .page-hero--bild-links .page-hero__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
  /* Gespiegelte Variante: Bild links bis an den Bildschirmrand, Text rechts (im HTML bleibt der Text zuerst = Lesereihenfolge) */
  .page-hero--bild-links .page-hero__grid > .bild { order: -1; margin-right: 0; margin-left: calc((min(100vw, var(--breite)) - 100vw) / 2 - 1rem); align-self: stretch; }
  .page-hero--bild-links .page-hero__grid > .bild img { height: 100%; min-height: 30rem; aspect-ratio: auto; border-radius: 0 160px 160px 0; object-position: 30% center; }
  .vorteile__kopf { padding: 2.75rem 3rem; }
  .vorteile__kopf > div { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; align-items: start; }
  .vorteile__kopf .dachzeile, .vorteile__kopf h4, .vorteile__kopf .h4 { grid-column: 1 / -1; justify-self: start; }
  .vorteile__kopf p { margin: 0; }
  .galerie { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 12rem; }
  .kontaktkarten { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
  .cta__strasse { flex-direction: row; justify-content: flex-start; gap: 2rem; }
  .cta__auto { width: 300px; }
  .cta__unterwegs { font-size: 1.2rem; text-align: left; }
  .footer__grid { grid-template-columns: 2fr 1fr; }
  .wg-liste { gap: 2rem; padding-top: 1rem; }
}

/* ---------- Cookie-Hinweis (cookiehinweis/) in den Farben der Seite ---------- */
.cc-window.cc-floating {
  max-width: 22rem; padding: 1.4rem 1.5rem 1.3rem; font-family: var(--schrift); font-size: 0.95rem; line-height: 1.55;
  border-radius: var(--radius); box-shadow: 0 22px 50px -18px rgba(43, 18, 18, 0.65);
  border-top: 5px solid var(--pfirsich);
}
.cc-window .cc-message { margin-bottom: 1rem; }
.cc-window .cc-link, .cc-window .cc-link:visited { opacity: 1; padding: 0; font-family: inherit; font-size: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.cc-window .cc-link:hover { color: var(--weiss); }
.cc-window .cc-btn {
  font-family: inherit; font-size: 0.95rem; font-weight: 700; padding: 0.65rem 1.2rem; border-radius: 999px;
  transition: background-color 0.25s, color 0.25s, transform 0.25s var(--weich);
}
.cc-window .cc-btn:hover { background: var(--pfirsich) !important; border-color: var(--pfirsich) !important; color: var(--wein-dunkel) !important; transform: translateY(-2px); text-decoration: none; }
.cc-window :focus-visible { outline: 3px solid var(--fokus-dunkel); outline-offset: 3px; }

/* ==================== Unterseiten ==================== */

/* Seitenkopf: Panoramabild mit weicher Unterkante, darüber eine Karte mit Brotkrumen und Titel */
.unterseite-kopf { position: relative; background: var(--rose-zart); padding-bottom: 0.5rem; }
.unterseite-kopf__bild { position: relative; height: clamp(11rem, 27vw, 23rem); overflow: hidden; clip-path: ellipse(115% 100% at 50% 0); }
.unterseite-kopf__bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; animation: kopf-zoom 14s ease-out both; }
.unterseite-kopf__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(82, 20, 20, 0.04), rgba(82, 20, 20, 0.28)); }
@keyframes kopf-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.unterseite-kopf__karte {
  position: relative; z-index: 2; margin-top: -3.25rem; max-width: 54rem; padding: 1.5rem 1.5rem 1.6rem;
  background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten);
}
/* kleines Dach über der Karte – Motiv aus dem Logo */
.unterseite-kopf__karte::before {
  content: ""; position: absolute; left: 1.7rem; top: -0.95rem; width: 1.9rem; height: 1.9rem;
  border-top: 5px solid var(--wein); border-left: 5px solid var(--wein); transform: rotate(45deg);
}
.unterseite-kopf h1 { margin: 0.45rem 0 0; font-family: var(--schrift-titel); color: var(--text); }
.unterseite-kopf__titel { display: block; font-size: clamp(1.75rem, 1.2rem + 2.3vw, 2.9rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; color: var(--wein); }

.brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; font-size: 0.88rem; color: var(--text-grau); }
.brotkrumen li { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; border: 0; }
.brotkrumen li::marker { content: none; }
.brotkrumen li + li::before { content: "›"; color: var(--beere); font-weight: 700; }
.brotkrumen a, .brotkrumen a:visited { color: var(--text-grau); font-family: inherit; font-size: inherit; }
.brotkrumen a:hover { color: var(--wein); }

/* Inhalt + Randspalte */
.seite { padding-top: 2.5rem; }
.seite__raster { display: grid; gap: 2.5rem; align-items: start; }
.inhalt { min-width: 0; }
.inhalt h2, .inhalt .h2 {
  position: relative; margin: 2.25rem 0 0.9rem; padding-left: 2.1rem;
  font-family: var(--schrift-titel); font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem); font-weight: 700; line-height: 1.25; color: var(--wein);
}
.inhalt h2::before, .inhalt .h2::before {
  content: ""; position: absolute; left: 0.25rem; top: 0.6em; width: 0.85rem; height: 0.85rem;
  border-top: 3px solid var(--pfirsich); border-left: 3px solid var(--pfirsich); transform: rotate(45deg);
}
.inhalt h3, .inhalt .h3 {
  position: relative; margin: 2rem 0 0.8rem; padding-left: 2.1rem;
  font-family: var(--schrift-titel); font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); font-weight: 700; line-height: 1.3; color: var(--wein);
}
.inhalt h3::before, .inhalt .h3::before {
  content: ""; position: absolute; left: 0.25rem; top: 0.55em; width: 0.75rem; height: 0.75rem;
  border-top: 3px solid var(--pfirsich); border-left: 3px solid var(--pfirsich); transform: rotate(45deg);
}
/* Leistungen: drei Blöcke untereinander (Behandlungspflege, Pflegeversicherung, Zusatzleistungen) */
.leistung-block { scroll-margin-top: 7rem; }
.leistung-block + .leistung-block { margin-top: 3.5rem; padding-top: 3rem; border-top: 2px solid var(--rose); }
.inhalt .leistung-block > h2:first-child, .inhalt .leistung-block > div:first-child > h2:first-child, .inhalt .leistung-block > .h2:first-child, .inhalt .leistung-block > div:first-child > .h2:first-child { margin-top: 0; font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.15rem); }
.fachbereiche strong a, .fachbereiche strong a:visited { color: var(--wein); }
.inhalt .gruppe h3, .inhalt .gruppe .h3 { margin-top: 0; font-size: 1.22rem; }
.zitat--seite { margin: 1.5rem 0 0.5rem; }
.inhalt > h2:first-child, .inhalt > div:first-child > h2:first-child, .inhalt > .h2:first-child, .inhalt > div:first-child > .h2:first-child { margin-top: 0; }
.inhalt a:not(.btn), .inhalt a:not(.btn):visited { color: var(--wein); font-family: inherit; font-size: inherit; }
.inhalt a:not(.btn):hover { color: var(--wein-dunkel); }
.einleitung { font-size: 1.18rem; line-height: 1.65; }
.einleitung--mitte { text-align: center; max-width: 52rem; margin: 0 auto 2.5rem; }
.hervorhebung {
  padding: 1.1rem 1.3rem; font-weight: 600; background: var(--rose);
  border-left: 5px solid var(--wein); border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}

/* Listen mit Haken */
.haken-liste { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.55rem; }
.haken-liste li { position: relative; margin: 0; padding-left: 2.1rem; border: 0; line-height: 1.55; }
.haken-liste li::marker { content: none; }
.haken-liste li::before {
  content: ""; position: absolute; left: 0; top: 0.12em; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324705d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
}
.haken-liste--kasten { padding: 1.25rem 1.4rem; background: var(--rose-zart); border-radius: var(--radius-klein); }
.haken-liste--kasten.haken-liste--einspaltig { grid-template-columns: 1fr; }
.haken-liste--kacheln li { padding: 0.85rem 1rem 0.85rem 3rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; transition: border-color 0.25s, transform 0.25s var(--weich); }
.haken-liste--kacheln li::before { left: 0.9rem; top: 0.9rem; }
.haken-liste--kacheln li:hover { border-color: var(--pfirsich); transform: translateY(-2px); }

/* Pflegeleitbild: nummerierte Leitsätze */
.leitsaetze { list-style: none; padding: 0; margin: 0; counter-reset: leitsatz; display: grid; gap: 1rem; }
.leitsaetze li {
  counter-increment: leitsatz; position: relative; margin: 0; border: 0; padding: 1.25rem 1.4rem 1.25rem 4.6rem;
  background: var(--weiss); border-radius: var(--radius-klein); box-shadow: var(--schatten-klein); transition: transform 0.3s var(--weich);
}
.leitsaetze li::marker { content: none; }
.leitsaetze li::before {
  content: counter(leitsatz, decimal-leading-zero); position: absolute; left: 1.1rem; top: 1.05rem;
  font-family: var(--schrift-titel); font-size: 1.7rem; font-weight: 800; line-height: 1;
  color: var(--weiss); -webkit-text-stroke: 1.5px var(--beere); text-shadow: 3px 3px 0 var(--pfirsich);
}
.leitsaetze li:hover { transform: translateX(6px); }

/* Karten mit Text (Grundpflege, Leitsätze Demenz) */
.punkt-karten { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 1rem; }
.punkt-karten li { margin: 0; padding: 1.2rem 1.4rem; background: var(--weiss); border: 0; border-top: 4px solid var(--pfirsich); border-radius: var(--radius-klein); box-shadow: var(--schatten-klein); }
.punkt-karten li::marker { content: none; }
.punkt-karten--titel strong:first-child { display: block; margin-bottom: 0.25rem; font-size: 1.08rem; color: var(--wein); }

/* Zusatzleistungen */
.gruppe { padding: 1.5rem 1.6rem; background: var(--weiss); border-top: 4px solid var(--pfirsich); border-radius: var(--radius); box-shadow: var(--schatten-klein); }
.inhalt .gruppe h2, .inhalt .gruppe .h2 { margin-top: 0; font-size: 1.22rem; }
.gruppe .haken-liste { margin-bottom: 0; }
.inhaltsbild { margin: 2rem 0 0; }
.inhaltsbild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); box-shadow: var(--schatten); }

/* Video auf Über uns */
.video { margin: 2rem 0 0; }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 621; background: var(--fuss); border-radius: var(--radius); box-shadow: var(--schatten); }

/* Bilder der WG-Seiten */
.galerie.galerie--klein { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); grid-auto-rows: auto; margin-top: 2rem; }
.galerie--klein img { height: auto; aspect-ratio: 3 / 2; }

/* Randspalte */
.seite__rand { display: grid; gap: 1.25rem; }
.randkarte { padding: 1.4rem 1.5rem; background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten-klein); }
.randkarte__titel { display: block; margin-bottom: 0.8rem; font-size: 1.1rem; font-weight: 800; color: var(--wein); }
.randkarte p { font-size: 0.95rem; }
.randkarte--kontakt { background: linear-gradient(160deg, var(--wein-dunkel), var(--wein) 55%, var(--beere)); color: #fbe3df; }
.randkarte--kontakt .randkarte__titel, .randkarte--kontakt strong { color: var(--weiss); }
.randkarte--kontakt :focus-visible { outline-color: var(--fokus-dunkel); }
.randkarte__zeile, .randkarte__zeile:visited {
  display: flex; align-items: center; gap: 0.7rem; margin-top: 0.45rem; padding: 0.55rem 0.7rem;
  color: var(--weiss); font-family: inherit; font-size: 0.97rem; font-weight: 700; line-height: 1.3; text-decoration: none;
  background: rgba(255, 255, 255, 0.12); border-radius: 12px; transition: background-color 0.25s;
}
.randkarte__zeile:hover { color: var(--weiss); background: rgba(255, 255, 255, 0.24); }
.randkarte__zeile img { width: 30px; height: 30px; flex: 0 0 auto; background: var(--weiss); border-radius: 50%; }
.randkarte__zeile--notruf .puls { margin: 0 0.55rem 0 0.45rem; }
.randkarte__links { list-style: none; margin: 0; padding: 0; }
.randkarte__links li { margin: 0; border: 0; border-top: 1px solid var(--linie); }
.randkarte__links li:first-child { border-top: 0; }
.randkarte__links li::marker { content: none; }
.randkarte__links a, .randkarte__links a:visited {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0.2rem;
  color: var(--text); font-family: inherit; font-size: 0.97rem; font-weight: 600; text-decoration: none;
}
.randkarte__links a::after { content: "→"; color: var(--beere); transition: transform 0.25s var(--weich); }
.randkarte__links a:hover, .randkarte__links a[aria-current="page"] { color: var(--wein); }
.randkarte__links a:hover::after { transform: translateX(4px); }

/* Jobs */
.job-kopf { display: grid; gap: 2rem; align-items: start; }
.job-kopf .inhaltsbild { margin: 0; }
.job-kopf > :only-child { grid-column: 1 / -1; }
.inhalt .job-kopf h2, .inhalt .job-raster h2, .inhalt .job-kopf .h2, .inhalt .job-raster .h2 { margin-top: 0; }
.job-raster { display: grid; gap: 1.5rem; margin-top: 2.5rem; align-items: start; }
.job-raster .haken-liste { margin-bottom: 0; }
.karte--rose { background: var(--rose); }
.bewerbung { display: flex; align-items: center; gap: 1.1rem; margin-top: 2rem; padding: 1.25rem 1.5rem; background: var(--rose-zart); border: 2px dashed var(--pfirsich); border-radius: var(--radius); }
.bewerbung p { margin: 0; font-weight: 600; }
.bewerbung__symbol { flex: 0 0 3rem; display: block; }
.bewerbung__symbol img { display: block; width: 3rem; height: 3rem; max-width: none; }

/* Kontakt */
.kontakt-raster { display: grid; gap: 2rem; align-items: center; }
.kontakt-details { padding: 1.75rem; background: var(--weiss); border-top: 5px solid var(--wein); border-radius: var(--radius); box-shadow: var(--schatten); }
.kontakt-details__firma { font-size: 1.15rem; }
.kontakt-wege { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.75rem; }
.kontakt-wege li { display: flex; align-items: center; gap: 0.8rem; margin: 0; border: 0; }
.kontakt-wege li::marker { content: none; }
.kontakt-wege img { width: 2.2rem; height: 2.2rem; flex: 0 0 auto; }
.kontakt-wege__puls { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: 0 0 auto; background: var(--rose); border-radius: 50%; }
.kontakt-raster .inhaltsbild, .kontakt-raster .video { margin: 0; }
.video--16x9 video { aspect-ratio: 16 / 9; }

/* Anfahrtskarte mit Zustimmung: gezeichneter Stadtplan als Platzhalter, Google Maps erst nach Klick */
.anfahrt { margin-top: 3rem; }
.karte-zustimmung {
  position: relative; overflow: hidden; min-height: 26rem; display: grid; place-items: center; padding: 2rem 1rem;
  border-radius: var(--radius); box-shadow: var(--schatten);
  background-color: #f3ece9;
  background-image:
    radial-gradient(circle at 70% 30%, rgba(225, 242, 236, 0.95) 0 7rem, transparent 7.1rem),
    linear-gradient(28deg, transparent 47%, #ffffff 47% 50.5%, transparent 50.5%),
    linear-gradient(-62deg, transparent 58%, #ffffff 58% 60%, transparent 60%),
    linear-gradient(90deg, transparent 31%, #fbdccf 31% 33%, transparent 33%),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(255, 255, 255, 0.9) 46px 50px),
    repeating-linear-gradient(90deg, transparent 0 62px, rgba(255, 255, 255, 0.9) 62px 66px);
}
.karte-zustimmung::before { content: ""; position: absolute; inset: 0; background: rgba(255, 248, 246, 0.35); backdrop-filter: blur(1.5px); }
.karte-zustimmung__inhalt {
  position: relative; max-width: 34rem; padding: 1.75rem 1.75rem 1.5rem; text-align: center;
  background: rgba(255, 255, 255, 0.94); border-radius: var(--radius); box-shadow: var(--schatten);
}
.karte-zustimmung__nadel {
  display: grid; place-items: center; width: 3.6rem; height: 3.6rem; margin: -3.4rem auto 0.75rem;
  background: var(--wein); border-radius: 50%; box-shadow: 0 10px 22px -10px rgba(82, 20, 20, 0.8);
  animation: huepfen 2.4s ease-in-out infinite;
}
.karte-zustimmung__nadel svg { width: 2rem; height: 2rem; fill: none; stroke: var(--weiss); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes huepfen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.karte-zustimmung__adresse { font-size: 1.1rem; }
.karte-zustimmung__adresse strong { color: var(--wein); }
.karte-zustimmung__text { font-size: 0.92rem; color: var(--text-grau); }
.karte-zustimmung .btn-gruppe { justify-content: center; margin-top: 1rem; }
.no-js .karte-zustimmung__knopf { display: none; }
.karte-zustimmung.ist-geladen { padding: 0; background: var(--rose-zart); }
.karte-zustimmung.ist-geladen::before { display: none; }
.karte-zustimmung iframe { display: block; width: 100%; height: 30rem; border: 0; }

/* Rechtstexte */
.rechtstext { max-width: 62rem; overflow-wrap: anywhere; }
.rechtstext p { margin-bottom: 1.1rem; }
.rechtstext strong { color: var(--wein); }
.rechtstext hr { margin: 2rem 0; border: 0; border-top: 2px dashed var(--linie); }
.impressum-raster { margin-bottom: 1.75rem; }
.impressum-raster .karte p:last-child { margin-bottom: 0; }
.bildnachweise { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.bildnachweise li { margin: 0; border: 0; }
.bildnachweise li::marker { content: none; }
.bildnachweise figure { display: flex; flex-direction: column; height: 100%; margin: 0; overflow: hidden; background: var(--weiss); border-radius: 12px; box-shadow: var(--schatten-klein); }
.bildnachweise img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--rose-zart); }
.bildnachweise figcaption { padding: 0.5rem 0.7rem; font-size: 0.8rem; color: var(--text-grau); }

/* 404 */
.fehlerseite { max-width: 40rem; margin: 0 auto; text-align: center; }
.fehlerseite .btn-gruppe { justify-content: center; }

@media (min-width: 48em) {
  .haken-liste--kasten, .haken-liste--kacheln { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .punkt-karten { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64em) {
  .unterseite-kopf__karte { margin-top: -5rem; padding: 2rem 2.5rem; }
  .seite__raster { grid-template-columns: minmax(0, 1fr) 21rem; gap: 3.5rem; }
  .seite__raster--voll { grid-template-columns: minmax(0, 1fr); }
  .seite__rand { position: sticky; top: 9rem; }
  .job-kopf { grid-template-columns: 0.9fr 1.1fr; gap: 3rem; }
  .job-raster { grid-template-columns: 1.4fr 1fr; }
  .kontakt-raster { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

/* Weniger Bewegung, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .laufband__spur { flex-wrap: wrap; width: auto; justify-content: center; }
  .laufband__spur span:nth-child(n+9) { display: none; }
}