/* PNT Pflegedienste – Komponenten. Baut auf bootstrap.min.css (Reboot, Raster, Hilfsklassen) und tokens.css auf.
   Klassennamen geteilter Bausteine wie bei pnt-senioreneinrichtungen.de; eigene Bausteine mit Präfix pd-. */

/* ---------- Basis ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  scroll-padding-bottom: var(--mobilbar-h);
  accent-color: var(--pnt-locate);
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html:has(.so-subnav) { scroll-padding-top: calc(var(--header-h) + 90px); }
::selection { background: var(--pnt-locate); color: #fff; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}
/* Lange Einzelwörter („Datenschutzerklärung“) dürfen schmal nicht überlaufen */
h1 { overflow-wrap: break-word; }
@media (max-width: 575.98px) { h1 { hyphens: auto; hyphenate-limit-chars: 16 6 6; } }  /* nur sehr lange Wörter trennen */
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, figure, blockquote, address { margin: 0; font-style: normal; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--pnt-accent); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
a:hover { color: var(--navy); }
strong, b { font-weight: 700; }
a[href^="tel:"] { white-space: nowrap; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; box-shadow: none; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 300;
  padding: .75rem 1.25rem;
  border-radius: var(--radius-s);
  background: var(--navy);
  color: #fff;
  font-weight: 700;
}
.skip-link:focus { top: 12px; color: #fff; }

/* Entwurfsband und Prüfmarken: nur auf Nicht-Produktions-Hosts */
.pd-entwurf { margin: 0; padding: .375rem var(--gutter); background: var(--draft-bg); color: var(--draft-ink); font-size: var(--fs-xs); font-weight: 700; text-align: center; }

/* ---------- Buttons, Links, Tags ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 52px;
  text-decoration: none;
  transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1), transform var(--dur-1) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 1.15em; height: 1.15em; }
/* Bootstrap setzt .btn:focus-visible { outline: 0 } mit höherer Spezifität als :focus-visible: eigener Fokusring nötig */
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: none; }

.text-link, .phone-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.text-link .icon { transition: transform var(--dur-2) var(--ease-out); }
.text-link:hover .icon { transform: translateX(4px); }
.phone-link { color: var(--navy); font-size: 1.25rem; }

.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tags li {
  padding: .3rem .8rem;
  border-radius: var(--radius-full);
  background: var(--blue-tint);
  color: var(--navy);
  font-size: var(--fs-s);
  font-weight: 600;
  line-height: 1.4;
}

.disc { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--blue-tint); color: var(--pnt-accent); }
.disc .icon { width: 24px; height: 24px; }


/* ---------- Aufnahme-Leiste (Desktop) ---------- */
.pd-utility { background: var(--masthead-deep); color: var(--on-navy); font-size: var(--fs-s); --focus: #fff; }
.pd-utility__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--utility-h); }
.pd-utility__aki { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin: 0; }
.pd-utility a { color: #fff; font-weight: 700; text-decoration: none; }
.pd-utility a:hover { text-decoration: underline; color: #fff; }
.pd-utility__aki abbr { color: var(--purple-on-navy); font-weight: 800; letter-spacing: .04em; text-decoration: none; }
.aki-wort b { font-weight: inherit; color: var(--purple-on-navy); }
.pd-utility__links { display: flex; gap: 1.5rem; }
.pd-utility__links a { font-weight: 600; }
.site-nav__tel { display: none; }
.pd-utility__puls { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-on-navy); box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue-on-navy) 60%, transparent); }
@media (max-width: 1199.98px) { .pd-utility { display: none; } }

/* ---------- Kopfbereich ---------- */
.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--line-on-navy); background: var(--masthead); --focus: #fff; transition: box-shadow var(--dur-2); }
.site-header.is-scrolled { box-shadow: var(--shadow-header); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--header-h); }
.site-logo { display: block; flex: none; }
.site-logo img { width: auto; height: var(--logo-h); }

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 1.75rem); }
.site-nav__list { display: flex; align-items: center; gap: clamp(.125rem, .6vw, .75rem); }
.site-nav__item { position: relative; display: flex; align-items: center; }
.site-nav__item--mobil { display: none; }
.site-nav__link {
  position: relative;
  display: block;
  padding: .75rem .5rem;
  color: #fff;
  font-size: var(--fs-m);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav__link::after {
  content: '';
  position: absolute;
  inset: auto .5rem .4rem;
  height: 2px;
  border-radius: 2px;
  background: var(--purple-on-navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.site-nav__link:hover { color: #fff; }
.site-nav__link:hover::after, .site-nav__link[aria-current]::after, .has-mega.is-open > .site-nav__link::after { transform: scaleX(1); }
.site-nav__sub-toggle { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -.75rem; margin-right: -.375rem; padding: 0; border: 0; background: none; color: #fff; }
.site-nav__sub-toggle .icon { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.has-sub:not(.has-mega):hover .site-nav__sub-toggle .icon, .has-sub.is-open .site-nav__sub-toggle .icon, .has-mega.is-open .site-nav__sub-toggle .icon { transform: rotate(180deg); }

.site-nav__sub {
  position: absolute;
  top: 100%;
  left: -.5rem;
  z-index: 10;
  min-width: 320px;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: #fff;
  --focus: var(--pnt-accent);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--dur-1), transform var(--dur-2) var(--ease-out), visibility var(--dur-1);
}
.has-sub:hover .site-nav__sub, .has-sub:focus-within .site-nav__sub, .has-sub.is-open .site-nav__sub { opacity: 1; visibility: visible; transform: none; }
.has-sub.is-shut .site-nav__sub { opacity: 0; visibility: hidden; }
.site-nav__sub a { display: flex; flex-direction: column; padding: .625rem .875rem; border-radius: var(--radius-s); color: var(--navy); text-decoration: none; line-height: 1.35; }
.site-nav__sub a:hover { background: var(--blue-tint); }
.site-nav__sub strong { display: flex; align-items: center; gap: .375rem; font-size: var(--fs-m); }
.site-nav__sub strong .icon { width: .95em; height: .95em; color: var(--muted); }
.site-nav__sub span { color: var(--muted); font-size: var(--fs-s); }
.site-nav__sub-all { margin-top: .25rem; border-top: 1px solid var(--line); padding-top: .25rem; }
.site-nav__sub-all a { flex-direction: row; align-items: center; justify-content: space-between; color: var(--pnt-accent); font-weight: 700; }
.site-nav__end { display: flex; align-items: center; gap: 1rem; }
.site-nav__end .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; }
.site-nav__end .btn-primary span { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.site-nav__end .btn-primary small { font-size: var(--fs-xs); font-weight: 600; opacity: .9; }
@media (min-width: 1200px) {
  .site-header .site-nav__end .btn-primary {
    --bs-btn-color: var(--navy);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--navy);
    --bs-btn-hover-bg: var(--blue-tint);
    --bs-btn-hover-border-color: var(--blue-tint);
    --bs-btn-active-color: var(--navy);
    --bs-btn-active-bg: var(--blue-tint);
    --bs-btn-active-border-color: var(--blue-tint);
    gap: .75rem;
    min-height: 52px;
    padding-block: .375rem;
    text-align: left;
  }
  .site-header .site-nav__end .btn-primary .icon { color: var(--pnt-accent); }
  .site-nav__end .btn-primary small { color: var(--muted); opacity: 1; }
}

/* Megamenü Standorte: hängt am Kopfbereich, nicht am Menüpunkt, damit es mittig unter der Leiste sitzt */
.site-nav__item.has-mega { position: static; }
.site-nav__mega {
  position: absolute;
  top: calc(100% - 6px);
  left: 50%;
  z-index: 10;
  width: min(1040px, calc(100vw - 2 * var(--gutter)));
  padding: 1.25rem 1.25rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: #fff;
  --focus: var(--pnt-accent);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out), visibility var(--dur-2);
}
.has-mega.is-open .site-nav__mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.has-mega.is-shut .site-nav__mega { opacity: 0; visibility: hidden; }
.site-nav__mega-foot { display: flex; flex-wrap: wrap; gap: .25rem 2rem; margin: .75rem 0 0; padding-top: .75rem; border-top: 1px solid var(--line); }
.site-nav__mega-foot a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--pnt-accent); font-weight: 700; text-decoration: none; }
.site-nav__mega-foot a:hover { text-decoration: underline; text-underline-offset: .25em; }
.site-nav__mega-foot .icon { width: 1em; height: 1em; }

.nav-toggle { display: none; place-items: center; width: 48px; height: 48px; margin-right: -8px; padding: 0; border: 0; border-radius: var(--radius-s); background: none; color: #fff; }
.nav-toggle .icon { width: 28px; height: 28px; }
.nav-toggle__close, .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

@media (max-width: 1199.98px) {
  .nav-toggle { display: grid; }
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    padding: 1rem var(--gutter) 2rem;
    overflow-y: auto;
    background: #fff;
    --focus: var(--pnt-accent);
    border-top: 1px solid var(--line);
    visibility: hidden;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--dur-3) var(--ease-out), opacity var(--dur-1), visibility var(--dur-3);
  }
  .site-nav.is-open { visibility: visible; opacity: 1; clip-path: inset(0); }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__item, .site-nav__item--mobil { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .site-nav__link, .site-nav__link:hover { color: var(--navy); }
  .site-nav__link { flex: 1; padding: 1rem 0; font-size: 1.25rem; }
  .site-nav__link::after { display: none; }
  .site-nav__sub-toggle { width: 48px; height: 56px; margin: 0; color: var(--navy); }
  .site-nav__sub { display: none; position: static; flex-basis: 100%; min-width: 0; padding: 0 0 .75rem; border: 0; box-shadow: none; opacity: 1; visibility: inherit; transform: none; }
  .has-sub.is-open .site-nav__sub { display: block; }
  .site-nav__item.has-mega { position: relative; }
  .site-nav__mega { display: none; position: static; flex-basis: 100%; width: auto; padding: 0 0 .75rem; border: 0; box-shadow: none; opacity: 1; visibility: inherit; transform: none; }
  .has-mega.is-open .site-nav__mega { display: block; transform: none; }
  .site-nav__mega-foot { border-top: 0; padding-top: 0; flex-direction: column; }
  .site-nav__end { flex-direction: column; align-items: stretch; }
  .site-nav__tel { display: inline-flex; }
  body.nav-open { overflow: hidden; }
}

/* ---------- Startseite: Hero ---------- */
.pd-hero { padding-top: .5rem; }
.pd-hero__panel {
  --focus: #fff;
  position: relative;
  box-shadow: var(--shadow-lift);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: stretch;
  min-height: clamp(460px, 40vw, 600px);
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--panel-bg);
  color: var(--on-navy);
}
.pd-hero__main { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 4.6vw, 4.5rem) clamp(1.5rem, 4.4vw, 4rem); }
.pd-hero h1 { color: #fff; font-size: clamp(2.125rem, 1.2rem + 2.6vw, 3.375rem); line-height: 1.08; }
.pd-hero h1 span, .pd-hero h1 em { display: block; }
.pd-hero h1 span { max-width: 17ch; text-wrap: balance; }
.pd-hero h1 em { max-width: 44ch; text-wrap: pretty; margin-top: .45em; color: var(--on-panel); font-size: .5em; font-style: normal; font-weight: 400; letter-spacing: 0; line-height: 1.3; }
.pd-hero__lede { max-width: 40em; margin: 1.5rem 0 0; color: var(--on-navy); font-size: var(--fs-l); line-height: 1.6; }
.pd-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.25rem; }
.pd-hero__tel {
  display: inline-flex;
  align-items: center;
  gap: .875rem;
  min-height: 64px;
  padding: .5rem 1.5rem .5rem .5rem;
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--navy);
  text-decoration: none;
  box-shadow: var(--shadow-on-navy);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.pd-hero__tel:hover { color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-on-navy-lift); }
.pd-hero__tel .icon { width: 48px; height: 48px; padding: 13px; border-radius: 50%; background: var(--pnt-accent); color: #fff; }
.pd-hero__tel span { display: flex; flex-direction: column; font-family: var(--font-head); font-size: 1.375rem; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.pd-hero__tel small { color: var(--muted); font-family: var(--font-text); font-size: var(--fs-xs); font-weight: 600; }
.pd-hero__link .icon { transition: transform var(--dur-2) var(--ease-out); }
.pd-hero__link:hover .icon { transform: translateX(4px); }
.pd-hero__media { position: relative; margin: 0; overflow: hidden; }
.pd-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* weicher Übergang vom Verlauf ins Bild */
.pd-hero__media::before { content: ''; position: absolute; inset: 0 auto 0 0; z-index: 1; width: 22%; background: linear-gradient(90deg, color-mix(in srgb, var(--pnt-accent-dark) 55%, transparent), transparent); pointer-events: none; }

@media (max-width: 991.98px) {
  .pd-hero__panel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pd-hero__media { order: -1; aspect-ratio: 16 / 9; }
  .pd-hero__media::before { inset: auto 0 0; width: auto; height: 30%; background: linear-gradient(0deg, color-mix(in srgb, var(--pnt-accent-dark) 50%, transparent), transparent); }
}
@media (max-width: 575.98px) {
  .pd-hero__lede { font-size: var(--fs-m); }
  .pd-hero__cta { margin-top: 1.75rem; }
  .pd-hero__tel { width: 100%; }
  .pd-hero__tel span { font-size: 1.25rem; }
}

/* Infoleiste unter dem Hero */
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem clamp(1rem, 3vw, 2.5rem); margin-top: var(--gap); padding: 1rem clamp(1rem, 2.4vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--radius-l); background: #fff; box-shadow: var(--shadow-card); }
.strip li { display: flex; align-items: center; gap: .875rem; color: var(--navy); font-size: var(--fs-m); font-weight: 700; line-height: 1.35; }
.strip a { color: inherit; text-decoration: none; }
.strip a:hover { text-decoration: underline; }
.strip .icon { flex: none; width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--blue-tint); color: var(--pnt-accent); }
@media (max-width: 991.98px) { .strip { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Abschnitte ---------- */
.section { padding-block: var(--section); }
.section--tint { background: var(--tint); }
.section:not(.section--tint) + .section:not(.section--tint) { padding-top: 0; }
.pd-hero + .wrap + .section, .pd-hero + .section { padding-top: clamp(2.5rem, 5vw, 4rem); }
/* Seitenkopf (Brotkrumen + .so-head/.wf-hero im ersten .wrap) bringt seinen Abstand mit: die erste Sektion beginnt ohne Polster */
main > .wrap:first-child + .section { padding-top: 0; }
.section__title { margin-bottom: var(--block); font-size: var(--fs-headline); }
.section__title span, .section__title em { display: block; }
.section__title em { margin-top: .2em; color: var(--pnt-locate); font-size: .68em; font-style: normal; font-weight: 400; letter-spacing: 0; }
.section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 2rem; margin-bottom: var(--block); }
.section__head .section__title { margin-bottom: 0; }
.section__intro { max-width: 68ch; margin: calc(var(--block) * -.5) 0 var(--block); }

/* ---------- Leistungskarten ---------- */
/* Höchstens drei Spalten, auch im vollen Raster (1320 px), wie Standort- und Hauskarten */
.pd-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(290px, (100% - 2 * var(--gap)) / 3)), 1fr)); gap: var(--gap); }
/* Gruppen mit genau vier Karten (/leistungen/) stehen ab 1200 px in einer Reihe statt 3 + 1 */
@media (min-width: 1200px) { .pd-services--4 { grid-template-columns: repeat(4, 1fr); } }
.pd-service {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: #fff;
  transition: border-color var(--dur-2), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
/* Nur Karten mit verlinktem Titel reagieren; Infokarten (Kontakt, Werte, Gründe) bleiben ruhig */
.pd-service:has(:is(h2, h3) > a):is(:hover, :focus-within) { border-color: var(--line-locate); box-shadow: var(--shadow-card); transform: translateY(-2px); }
/* App-Icons der Leistungen (farbige Kacheln aus assets/images/icons/): eigene Farben, kein Filter, kein Umfärben */
.pd-app { display: block; flex: none; width: 48px; height: 48px; }
.pd-service .pd-app { margin-bottom: .25rem; }
.pd-service .disc { margin-bottom: .25rem; transition: background-color var(--dur-2), color var(--dur-2); }
.pd-service:has(:is(h2, h3) > a):hover .disc { background: var(--pnt-accent); color: #fff; }
.pd-service :is(h2, h3) { font-size: var(--fs-card); }
.pd-service h3 a { display: inline-flex; align-items: center; gap: .5rem; color: var(--navy); text-decoration: none; }
.pd-service h3 a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-l); }
.pd-service h3 a:focus-visible { outline: none; }
.pd-service h3 a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
.pd-service h3 .icon { width: 1em; height: 1em; color: var(--pnt-accent); transition: transform var(--dur-2) var(--ease-out); }
.pd-service:hover h3 .icon { transform: translateX(4px); }
.pd-service p { margin: 0; font-size: var(--fs-m); line-height: 1.55; }
.pd-service__host { margin-top: auto !important; padding-top: .5rem; color: var(--muted); font-size: var(--fs-s) !important; }
.pd-service--extern { background: var(--tint); border-color: transparent; }
.pd-service--extern .disc { background: #fff; }
.pd-service__logo { display: flex; align-items: center; height: 64px; margin-bottom: .25rem; }
.pd-service__logo img { width: auto; height: 56px; max-width: 100%; object-fit: contain; object-position: left center; }
/* Auf getönten Sektionen verschwände die getönte Karte: dort weiß mit Rand wie die übrigen Karten */
.section--tint .pd-service--extern { border-color: var(--line); background: #fff; }
.section--tint .pd-service--extern .disc { background: var(--blue-tint); }

/* ---------- Standort- und WG-Karten ---------- */
.house-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--gap); }
.house {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), opacity var(--dur-2), filter var(--dur-2), border-color var(--dur-2);
}
.house:hover { transform: translateY(-2px); border-color: var(--line-locate); box-shadow: var(--shadow-lift); }
.house:focus-within { border-color: var(--pnt-accent); }
.house__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--tint); }
.house__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
.house:hover .house__media img { transform: scale(1.045); }
.house__typ { position: absolute; left: .75rem; top: .75rem; padding: .25rem .75rem; border-radius: var(--radius-full); background: rgba(255, 255, 255, .94); color: var(--navy); font-size: var(--fs-xs); font-weight: 700; }
/* Standortarten wie die Marker: ambulant Navy gefüllt, 1:1 Intensiv Lila gefüllt, WG weiß mit lila Rand */
.house--ambulant .house__typ { background: var(--navy); color: #fff; }
.house--intensiv .house__typ { background: var(--pnt-locate); color: #fff; }
.house--wg .house__typ { border: 2px solid var(--pnt-locate); color: var(--pnt-locate); }
.house__body { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: var(--card-pad-y) var(--card-pad-x) 1.25rem; }
.house__body > p { margin: 0; }
.house__place { margin: 0; color: var(--muted); font-size: 1rem; font-weight: 500; }
.house h3 { font-size: var(--fs-card); }
.house__link { color: inherit; text-decoration: none; }
.house__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-l); }
.house__link:focus-visible { outline: none; }
.house__link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }
.house__fakt { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--navy); font-weight: 600; }
.house__fakt .icon { color: var(--pnt-locate); }
.house .tags { margin-top: .5rem; }
.house__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-inline: var(--card-pad-x); padding-block: .5rem; border-top: 1px solid var(--line); }
.house__phone { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; color: var(--navy); font-weight: 700; text-decoration: none; white-space: nowrap; }
.house__phone .icon { color: var(--pnt-locate); }
.house__phone:hover { color: var(--pnt-accent); }
.house__more { display: inline-flex; align-items: center; gap: .4rem; color: var(--pnt-accent); font-weight: 700; white-space: nowrap; }
.house__more .icon { transition: transform var(--dur-2) var(--ease-out); }
.house:hover .house__more .icon { transform: translateX(5px); }

.house-grid li.is-hidden { display: none; }

/* ---------- Kliniken-Band ---------- */
.pd-band { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--gap) var(--gap-l); align-items: center; padding: var(--panel-pad); overflow: hidden; border-radius: var(--radius-l); background: linear-gradient(145deg, var(--navy) 0%, var(--navy-deep) 100%); color: var(--on-navy); --focus: #fff; }
.pd-band h2 { margin-bottom: 1rem; color: #fff; font-size: var(--fs-sub); }
.pd-band h2 em { display: block; margin-top: .2em; color: var(--purple-on-navy); font-size: .7em; font-style: normal; font-weight: 400; }
.pd-band ul { display: grid; gap: .5rem; margin: 1.25rem 0 0; }
.pd-band li { display: flex; gap: .625rem; }
.pd-band li .icon { margin-top: .2em; color: var(--blue-on-navy); }
.pd-band a:not(.btn) { color: #fff; }
.pd-band__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
@media (max-width: 991.98px) { .pd-band { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Schritte ---------- */
.steps { padding: var(--panel-pad); border-radius: var(--radius-l); background: var(--tint); scroll-margin-top: calc(var(--header-h) + 16px); }
.steps h2 { margin-bottom: var(--block); font-size: var(--fs-sub); }
.steps__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--gap); counter-reset: schritt; }
.steps__list li { padding: var(--card-pad-y); border-radius: var(--radius-m); background: #fff; counter-increment: schritt; }
.steps__list li::before { content: counter(schritt); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1.25rem; border-radius: 50%; background: var(--pnt-accent); color: #fff; font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; }
.steps__list h3 { margin-bottom: .5rem; font-family: var(--font-text); font-size: var(--fs-l); letter-spacing: 0; line-height: 1.35; }
.steps__list p { margin: 0; font-size: var(--fs-m); line-height: 1.55; }
@media (max-width: 575.98px) { .steps { padding-inline: 1.125rem; } }
.steps__body { position: relative; z-index: 1; }
.steps--aside .steps__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: var(--gap); align-items: stretch; }
.steps--aside .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
.steps + .so-layout { margin-top: var(--block); }
@media (max-width: 1199.98px) { .steps--aside .steps__body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) { .steps--aside .steps__list { grid-template-columns: minmax(0, 1fr); } }

/* Aufnahme-Karte neben den Schritten */
.pd-intake { padding: var(--card-pad); border-radius: var(--radius-m); background: #fff; color: var(--text); box-shadow: var(--shadow-card); }
.pd-intake h3 { margin-bottom: .5rem; font-size: var(--fs-card); }
.pd-intake > p { font-size: var(--fs-m); line-height: 1.55; }
.pd-intake__check { margin: 1.25rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.pd-intake__check p { margin-bottom: .5rem; color: var(--navy); font-weight: 700; }
.pd-intake__check li { display: flex; gap: .5rem; font-size: 1rem; line-height: 1.5; }
.pd-intake__check li + li { margin-top: .25rem; }
.pd-intake__check .icon { margin-top: .2em; width: 1.05em; height: 1.05em; color: var(--pnt-accent); }

/* Telefonblock: große Nummer mit runder Scheibe. Einziger Baustein dafür (Aufnahme-, Kontakt- und Standortkarten, Fuß).
   Auf Weiß: blaue Scheibe, Navy-Nummer. --navy auf Navy-Flächen: weiße Scheibe, weiße Nummer. */
.pd-tel { display: flex; align-items: center; gap: .875rem; color: var(--navy); text-decoration: none; }
.pd-intake .pd-tel { margin: 1.25rem 0 .25rem; }
.pd-tel .icon { flex: none; width: 52px; height: 52px; padding: 14px; border-radius: 50%; background: var(--pnt-accent); color: #fff; transition: transform var(--dur-2) var(--ease-out); }
.pd-tel:hover { color: var(--navy); }
.pd-tel:hover .icon { transform: scale(1.06); }
.pd-tel span { display: flex; flex-direction: column; font-family: var(--font-head); font-size: clamp(1.3125rem, 5.6vw, 1.5rem); font-weight: 700; line-height: 1.15; }
.pd-tel small { color: var(--muted); font-family: var(--font-text); font-size: var(--fs-s); font-weight: 600; white-space: normal; }
.pd-tel--navy, .pd-tel--navy:hover { color: #fff; }
.pd-tel--navy .icon { background: #fff; color: var(--navy); }
.pd-tel--navy small { color: var(--blue-on-navy); }

/* ---------- Standortkarte (includes/standort-karte.php) ---------- */
.pk { --pk-land: #f8fafd; --pk-land-mit: #dce7f6; --pk-land-dim: #f8fafd; --pk-grenze: #b9c8de; }
.pk--section { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.25rem var(--gap-l); }
.pk__titel { grid-column: 1 / -1; margin-bottom: .75rem; }
.pk__seite { min-width: 0; }
/* Die Liste steht in voller Länge (kein eigener Scrollbereich); ab 992 px klebt die Karte rechts unter dem Kopf und läuft mit */
.pk--section .pk__seite { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 992px) {
  .pk--section .pk-map { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }
  /* Nie höher als der Bildschirm unter dem Kopf (abzüglich Google-Hinweis darunter) */
  .pk--section .pk-map__stage { max-height: calc(100vh - var(--header-h) - 3rem - var(--pk-hinweis, 0px)); }
}

/* Filterzeile: eine Reihe über beide Spalten, Segment-Control + zwei Selects + Reset rechts */
.pk-filter { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; min-width: 0; }
/* Rahmen als ::after über den Feldern: jedes Feld ist selbst 44 px hoch, das Segment so hoch wie die Selects */
.pk-seg { position: relative; display: flex; flex: none; min-width: 0; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-s); background: #fff; }
.pk-seg::after { content: ''; position: absolute; inset: 0; border: 1.5px solid var(--line-strong); border-radius: inherit; pointer-events: none; }
.pk-chip { position: relative; margin: 0; cursor: pointer; }
.pk-chip + .pk-chip { border-left: 1px solid var(--line); }
.pk-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pk-chip span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1rem; color: var(--navy); font-size: var(--fs-s); font-weight: 600; white-space: nowrap; transition: background-color var(--dur-1), color var(--dur-1); }
.pk-chip:hover span { background: rgba(16, 46, 89, .05); }
.pk-chip input:checked + span { background: var(--navy); color: #fff; }
.pk-seg:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.pk-select { position: relative; display: flex; flex: 1 1 0; align-items: center; min-width: 0; min-height: 44px; margin: 0; border: 1.5px solid var(--line-strong); border-radius: var(--radius-s); background: #fff; transition: border-color var(--dur-1); }
.pk-select:hover { border-color: var(--navy); }
.pk-select:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.pk-select > span { flex: none; padding-left: .875rem; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.pk-select select {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 41px;
  padding: 0 2.25rem 0 .5rem;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102e59' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .625rem center / 18px;
  color: var(--navy);
  font: inherit;
  font-size: var(--fs-s);
  font-weight: 600;
  text-overflow: ellipsis;
  appearance: none;
  cursor: pointer;
}
.pk-select select:focus-visible { outline: 0; }
.pk-filter__reset { display: inline-flex; flex: none; align-items: center; gap: .375rem; min-height: 44px; margin-left: auto; padding: 0 .25rem; border: 0; background: none; color: var(--pnt-accent); font: inherit; font-size: var(--fs-s); font-weight: 700; white-space: nowrap; cursor: pointer; }
.pk-filter__reset[hidden] { display: none; }
.pk-filter__reset .icon { width: 18px; height: 18px; }
@media (max-width: 1439.98px) { .pk-chip span { padding: 0 .75rem; } .pk-filter__reset { justify-content: center; width: 44px; padding: 0; } .pk-filter__reset span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.pk-filter__reset:hover { text-decoration: underline; text-underline-offset: .25em; }
.pk-filter__reset:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-radius: var(--radius-s); }

.pk-list { display: grid; gap: .25rem; }
.pk--section .pk-list { align-content: start; }
.pk--section .pk-item { scroll-margin-bottom: 1rem; }
.pk-item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 .875rem; padding: .5rem .5rem .5rem .375rem; border-radius: var(--radius-m); transition: background-color var(--dur-1); }
.pk-item.is-hidden { display: none; }
.pk-leer { display: grid; justify-items: start; gap: .5rem; padding: 1rem .5rem; }
.pk-leer[hidden] { display: none; }
.pk-leer p { margin: 0; color: var(--navy); line-height: 1.5; }
.pk-leer__reset, .pk-leer__tel { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0; border: 0; background: none; color: var(--pnt-accent); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.pk-leer__reset:hover, .pk-leer__tel:hover { text-decoration: underline; text-underline-offset: .25em; }
.pk-leer__reset:focus-visible, .pk-leer__tel:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-s); }
.pk-leer .icon { width: 1.05em; height: 1.05em; }
.pk-leist { position: relative; z-index: 1; grid-column: 2; display: flex; flex-wrap: wrap; gap: .25rem .375rem; width: max-content; max-width: 100%; margin: .25rem 0 0; padding: 0; list-style: none; }
.pk-leist li { display: grid; place-items: center; width: 28px; height: 28px; color: var(--pnt-accent); }
.pk-leist :is(.icon, .pd-app) { width: 28px; height: 28px; }
/* Icons, Legende und Infokarte verlinken auf die Leistungsseite; die Badges liegen über dem gestreckten Standortlink (.pk-leist hat z-index) */
.pk-leist__link { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: inherit; transition: transform var(--dur-2) var(--ease-out); }
.pk-leist__link:hover { transform: translateY(-2px); }
.pk-leist__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pk-legende li a, .pk-info__leistungen li a { display: inline-flex; align-items: center; gap: inherit; color: inherit; text-decoration: none; }
.pk-legende li a:hover, .pk-info__leistungen li a:hover { text-decoration: underline; text-underline-offset: .2em; }
.pk-legende li a:focus-visible, .pk-info__leistungen li a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-s); }
.pk-legende { flex: none; margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--line); }
.pk-legende__titel { margin: 0 0 .5rem; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.pk-legende ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem .75rem; margin: 0; padding: 0; list-style: none; }
.pk-legende li, .pk-info__leistungen li { display: flex; align-items: center; gap: .375rem; color: var(--navy); line-height: 1.3; }
.pk-legende li { font-size: var(--fs-xs); }
.pk-legende .icon, .pk-info__leistungen .icon { flex: none; width: 18px; height: 18px; color: var(--pnt-accent); }
.pk-legende .pd-app, .pk-info__leistungen .pd-app { width: 24px; height: 24px; }
@media (min-width: 1201px) { .pk-legende ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pk-item.is-hover, .pk-item.is-aktiv { background: #fff; }
/* Auch auf weißem Grund sichtbar (Hover auf Eintrag oder Marker) */
.pk-item.is-hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.pk-item.is-aktiv { box-shadow: inset 0 0 0 1.5px var(--pnt-accent); }
.pk-nr { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pnt-locate); color: #fff; font-size: var(--fs-s); font-weight: 800; font-variant-numeric: tabular-nums; transition: background-color var(--dur-1), transform var(--dur-2) var(--ease-out); }
.pk-item[data-art="ambulant"] .pk-nr { background: var(--navy); }
.pk-item[data-art="wg"] .pk-nr { background: #fff; box-shadow: inset 0 0 0 2px var(--pnt-locate); color: var(--pnt-locate); }
.pk-item[data-art~="wg"][data-art~="ambulant"] .pk-nr, .pk-item[data-art~="wg"][data-art~="intensiv"] .pk-nr { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--pnt-locate); }
.pk-item[data-art~="wg"][data-art~="ambulant"] .pk-nr { background: var(--navy); }
.pk-item.is-hover .pk-nr, .pk-item.is-aktiv .pk-nr { background: var(--pnt-accent); box-shadow: none; color: #fff; transform: scale(1.08); }
.pk-item > .pk-nr { grid-row: 1 / span 2; grid-column: 1; }
.pk-item > .pk-item__more { grid-row: 1 / span 2; grid-column: 3; }
.pk-item__link { grid-column: 2; display: flex; flex-direction: column; min-width: 0; color: var(--navy); line-height: 1.3; text-decoration: none; }
.pk-item__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.pk-item__link strong { font-size: var(--fs-m); }
.pk-item__link span { overflow: hidden; color: var(--muted); font-size: var(--fs-s); text-overflow: ellipsis; white-space: nowrap; }
.pk-item__link:focus-visible { outline: 0; }
.pk-item:has(.pk-item__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }
.pk-item__more { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--line); border-radius: 50%; background: #fff; color: var(--navy); transition: border-color var(--dur-1), background-color var(--dur-1), transform var(--dur-2) var(--ease-out); }
.pk-item__more .icon { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.pk-item__more:hover { border-color: var(--navy); }
.pk-item__more[aria-expanded="true"] { border-color: var(--pnt-accent); background: var(--pnt-accent); color: #fff; }
.pk-item__more[aria-expanded="true"] .icon { transform: rotate(45deg); }

.pk-map { position: relative; min-width: 0; margin: 0; }
.pk-map__stage { position: relative; overflow: hidden; border-radius: var(--radius-l); background: linear-gradient(160deg, #f8fbff, #edf3fb); box-shadow: inset 0 0 0 1px var(--line); }
.pk--section .pk-map__stage { aspect-ratio: 1; }
.pk--menu .pk-map__stage { aspect-ratio: .95; border-radius: var(--radius-m); }
.pk--single .pk-map__stage { aspect-ratio: 1.6; }
.pk-svg { display: block; width: 100%; height: 100%; }
.pk-land { fill: var(--pk-land); stroke: var(--pk-grenze); stroke-width: .5; stroke-linejoin: round; transition: fill var(--dur-3) var(--ease-out), opacity var(--dur-3); }
.pk-land--mit { fill: var(--pk-land-mit); }
.pk-land.is-dim { fill: var(--pk-land-dim); }
.pk-stadt circle { fill: #8a97ab; }
.pk-stadt text { fill: var(--muted); font-family: var(--font-text); font-size: 10px; font-weight: 600; }
.pk-marker { cursor: pointer; text-decoration: none; transition: opacity var(--dur-2); }
.pk-marker.is-aus { opacity: .14; pointer-events: none; }
.pk-marker__leine { stroke: var(--pnt-locate); stroke-width: 1.4; stroke-dasharray: 2.5 2.5; opacity: .7; }
.pk-marker__anker { fill: var(--pnt-locate); }
.pk-marker__kreis { fill: var(--pnt-locate); stroke: #fff; stroke-width: 2.4; transform-box: fill-box; transform-origin: center; transition: transform var(--dur-2) var(--ease-out), fill var(--dur-1); }
.pk-marker--ambulant .pk-marker__kreis { fill: var(--navy); }
/* Pflegedienst und WG am selben Ort: Ring der WG mit dem Punkt des Pflegedienstes darin */
.pk-marker--kombi .pk-marker__kreis { fill: #fff; stroke: var(--pnt-locate); stroke-width: 2.6; }
.pk-marker__innen { fill: var(--pnt-locate); transform-box: fill-box; transform-origin: center; transition: fill var(--dur-1); }
.pk-marker--kombi-ambulant .pk-marker__innen { fill: var(--navy); }
.pk-marker.is-hover .pk-marker__innen, .pk-marker.is-aktiv .pk-marker__innen { fill: var(--pnt-accent); }
.pk-marker.is-hover .pk-marker__innen { transform: scale(1.25); }
.pk-marker--wg .pk-marker__kreis { fill: #fff; stroke: var(--pnt-locate); stroke-width: 2.6; }
.pk-marker__nr { fill: #fff; font-family: var(--font-text); font-size: 11px; font-weight: 800; text-anchor: middle; pointer-events: none; }
.pk-marker--wg .pk-marker__nr { fill: var(--pnt-locate); }
.pk-marker__ring { fill: none; stroke: var(--pnt-accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pk-marker.is-hover .pk-marker__kreis, .pk-marker.is-aktiv .pk-marker__kreis { fill: var(--pnt-accent); stroke: #fff; }
.pk-marker.is-hover .pk-marker__kreis { transform: scale(1.25); }
.pk-marker.is-hover .pk-marker__nr, .pk-marker.is-aktiv .pk-marker__nr { fill: #fff; }
.anim [data-reveal="karte"].pk-ruhig .pk-marker__kreis, .anim [data-reveal="karte"].pk-ruhig .pk-marker__nr { transition-delay: 0s; }
.pk-marker.is-aktiv .pk-marker__ring { opacity: .5; }
.pk-marker__label { fill: var(--navy); font-family: var(--font-text); font-size: 15px; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round; opacity: 0; transition: opacity var(--dur-1); pointer-events: none; }
.pk-marker.is-hover .pk-marker__label, .pk--single .pk-marker.is-aktiv .pk-marker__label { opacity: 1; }
.pk--single .pk-marker:not(.is-aktiv) { opacity: .45; }

.pk-modus { position: absolute; top: .75rem; right: .75rem; z-index: 3; display: flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-full); background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-card); }
/* Optisch flach (32 px), Trefferfläche per ::before auf 44 px */
.pk-modus__btn { position: relative; min-height: 32px; padding: 0 .75rem; border: 0; border-radius: var(--radius-full); background: none; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; transition: background-color var(--dur-1), color var(--dur-1); }
.pk-modus__btn::before { content: ''; position: absolute; inset: -6px 0; }
.pk-modus__btn:hover { color: var(--navy); }
.pk-modus__btn[aria-pressed="true"] { background: var(--navy); color: #fff; }
.pk-modus__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.pk-google { position: absolute; inset: 0; z-index: 2; overflow: hidden; background: var(--tint); }
/* Zwei Rahmen übereinander: der neue blendet ein, der alte skaliert mit (Zoom-Eindruck; Werte setzt pnt-karte.js) */
.pk-google iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; pointer-events: none; transform-origin: center; transition: opacity .9s ease-in-out, transform .9s cubic-bezier(.4, 0, .2, 1); }
.pk-google iframe.is-aktiv { opacity: 1; pointer-events: auto; }
.pk-google :is(iframe, .pk-gm).pk-google__sofort { transition: none; }
/* Eigene Marker über der Einbettung. Bedient jemand die Google-Karte selbst (Fokus im Rahmen), blenden sie aus, sonst liefen sie auseinander */
.pk-google__orte { position: absolute; inset: 0; z-index: 3; pointer-events: none; transition: opacity var(--dur-2); }
.pk-google.is-bedient .pk-google__orte { opacity: 0; pointer-events: none; }
.pk-google.is-bedient .pk-gm__punkt { pointer-events: none; }
.pk-gm { position: absolute; top: 0; left: 0; width: 0; height: 0; pointer-events: none; transition: transform .9s cubic-bezier(.4, 0, .2, 1); }
.pk-gm__punkt { position: absolute; top: -8px; left: -8px; box-sizing: border-box; width: 16px; height: 16px; border: 2.4px solid #fff; border-radius: 50%; background: var(--pnt-locate); box-shadow: 0 1px 3px rgba(16, 46, 89, .3); pointer-events: auto; cursor: pointer; transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-1), border-color var(--dur-1); }
.pk-gm__punkt::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
.pk-gm--ambulant .pk-gm__punkt { background: var(--navy); }
.pk-gm--kombi .pk-gm__punkt { border: 2.6px solid var(--pnt-locate); background: var(--pnt-locate); box-shadow: inset 0 0 0 2.4px #fff; }
.pk-gm--kombi-ambulant .pk-gm__punkt { background: var(--navy); }
.pk-gm--wg .pk-gm__punkt { border: 2.6px solid var(--pnt-locate); background: #fff; }
.pk-gm.is-hover, .pk-gm.is-aktiv { z-index: 1; }
.pk-gm.is-hover .pk-gm__punkt, .pk-gm.is-aktiv .pk-gm__punkt { border-color: #fff; background: var(--pnt-accent); }
.pk-gm.is-hover .pk-gm__punkt { transform: scale(1.4); }
.pk--single .pk-gm:not(.is-aktiv) { opacity: .45; }
.pk-gm__label { position: absolute; top: 0; left: 14px; transform: translateY(-50%); color: var(--navy); font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 4px #fff; opacity: 0; transition: opacity var(--dur-1); }
.pk-gm--links .pk-gm__label { right: 14px; left: auto; }
.pk-gm.is-hover .pk-gm__label, .pk--single .pk-gm.is-aktiv .pk-gm__label { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pk-google :is(iframe, .pk-gm) { transition: none; } }
/* Google-Modus: der Schlüssel weicht dem Google-Feld oben links und steht unten mittig über der Kartenleiste */
@media (min-width: 576px) {
  .pk:not(.pk--menu).is-google .pk-schluessel { top: auto; bottom: calc(1.75rem + var(--pk-hinweis, 0px)); left: 50%; transform: translateX(-50%); white-space: nowrap; }
  /* Offene Infokarte deckt die Kartenfläche ab: der Schlüssel (rein dekorativ) blendet so lange aus */
  .pk--section.has-info .pk-schluessel { display: none; }
}
.pk.is-google .pk-svg { visibility: hidden; }
.pk-schluessel { position: absolute; top: .75rem; left: .75rem; z-index: 3; display: flex; flex-wrap: wrap; gap: .125rem .875rem; margin: 0; padding: .375rem .625rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: rgba(255, 255, 255, .92); color: var(--navy); font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; }
.pk-schluessel span { display: inline-flex; align-items: center; gap: .375rem; }
.pk-schluessel i { box-sizing: border-box; width: 12px; height: 12px; border: 2px solid var(--pnt-locate); border-radius: 50%; background: var(--pnt-locate); }
.pk-schluessel .pk-schluessel__ambulant { border-color: var(--navy); background: var(--navy); }
.pk-schluessel .pk-schluessel__wg { background: #fff; }
.pk-schluessel .pk-schluessel__kombi { background: var(--pnt-locate); box-shadow: inset 0 0 0 2px #fff; }
.pk-map__hinweis { margin-top: .5rem; color: var(--muted); font-size: var(--fs-xs); }

.pk-preview {
  --tx: -50%;
  --ty: 12px;
  position: absolute;
  top: var(--py, 0);
  left: var(--px, 0);
  z-index: 2;
  display: grid;
  gap: .125rem;
  max-width: 260px;
  padding: .625rem .875rem;
  border-radius: var(--radius-s);
  background: #fff;
  box-shadow: var(--shadow-lift);
  color: var(--navy);
  line-height: 1.3;
  pointer-events: none;
  transform: translate(var(--tx), var(--ty));
}
.pk-preview[hidden] { display: none; }
.pk-preview strong { font-size: var(--fs-s); }
.pk-preview span { color: var(--muted); font-size: var(--fs-xs); }
.pk-preview.is-oben { --ty: calc(-100% - 40px); }
.pk-preview.is-links { --tx: calc(-100% + 24px); }
.pk-preview.is-rechts { --tx: -24px; }

.pk-info { position: absolute; left: .875rem; right: .875rem; bottom: .875rem; z-index: 3; pointer-events: none; }
.pk-info__card { width: min(360px, 100%); max-height: calc(100% - 1.75rem); padding: 1.125rem 1.25rem 1.25rem; overflow-y: auto; border-radius: var(--radius-m); background: #fff; box-shadow: var(--shadow-lift); color: var(--text); pointer-events: auto; }
.pk-info__card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pk-info__card:not([hidden]) { animation: pk-info var(--dur-2) var(--ease-out); }
.pk-info__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: start; margin-bottom: .75rem; }
.pk-info__head h3 { margin: 0; font-family: var(--font-text); font-size: var(--fs-l); letter-spacing: 0; line-height: 1.3; }
.pk-info__typ { margin: 0; color: var(--pnt-locate); font-size: var(--fs-xs); font-weight: 700; }
.pk-info__angebot { margin: .75rem 0 .125rem; color: var(--navy); font-size: var(--fs-s); font-weight: 700; }
.pk-info__close { display: grid; place-items: center; width: 44px; height: 44px; margin: -.5rem -.625rem 0 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); }
.pk-info__close:hover { background: var(--tint); color: var(--navy); }
.pk-info__close .icon { width: 20px; height: 20px; }
.pk-info__adresse { margin: 0 0 .5rem; font-size: 1rem; line-height: 1.45; }
.pk-info__kontakt { display: grid; gap: .125rem; margin: 0 0 .75rem; }
.pk-info__kontakt a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--navy); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.pk-info__kontakt a:hover { color: var(--pnt-accent); }
.pk-info__kontakt .icon { flex: none; width: 1.05em; height: 1.05em; color: var(--pnt-accent); }
.pk-info__leistungen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem .75rem; margin: 0 0 .875rem; padding: 0; list-style: none; }
.pk-info__leistungen li { font-size: var(--fs-xs); font-weight: 600; }

/* Megamenü: zwei Listen (Pflegedienste, Intensivpflege-WGs) und Mini-Karte, ohne Filter und ohne Scrollen */
.pk--menu { display: grid; grid-template-columns: 1fr 1fr 340px; gap: .5rem 1.75rem; text-align: left; }
.pk--menu .pk__seite { display: contents; }
.pk-intro { grid-column: 1 / 3; margin: 0; color: var(--muted); font-size: var(--fs-s); }
.pk--menu .pk-spalte { min-width: 0; max-height: 70vh; overflow: hidden auto; scrollbar-width: thin; scrollbar-color: rgba(16, 46, 89, .25) transparent; }
.pk-gruppe { margin: 0 0 .25rem; font-size: 1rem; font-weight: 800; }
.pk-gruppe a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; padding: 0 .75rem; border-bottom: 1px solid var(--line); color: var(--navy); text-decoration: none; }
.pk-gruppe a:hover { color: var(--pnt-accent); }
.pk-gruppe .icon { flex: none; width: 1em; height: 1em; transition: transform var(--dur-2) var(--ease-out); }
.pk-gruppe a:hover .icon { transform: translateX(3px); }
.pk--menu .pk-list { gap: 0; }
.pk--menu .pk-item { grid-template-columns: minmax(0, 1fr); min-height: 48px; padding: .25rem .75rem; border-radius: var(--radius-s); }
.pk--menu .pk-item.is-hover { background: var(--blue-tint); }
.pk--menu .pk-item__link { grid-column: 1; align-items: flex-start; justify-content: center; min-height: 40px; }
.pk--menu .pk-item__link strong { font-size: 1rem; }
.pk--menu .pk-item__link span { font-size: var(--fs-xs); }
.pk--menu .pk-map { grid-column: 3; grid-row: 1 / span 2; align-self: start; }
.pk--menu .pk-schluessel { position: static; margin-top: .5rem; }
.pk--menu .pk-marker.is-hover .pk-marker__kreis { transform: scale(1.4); }
@media (max-width: 1199.98px) {
  .pk--menu { display: block; }
  .pk--menu .pk__seite { display: block; }
  .pk--menu .pk-map, .pk-intro { display: none; }
  .pk--menu .pk-spalte { max-height: none; overflow: visible; }
  .pk--menu .pk-spalte + .pk-spalte { margin-top: .75rem; }
  .pk-gruppe a { padding-left: 0; }
}

@media (max-width: 991.98px) {
  .pk--section { grid-template-columns: minmax(0, 1fr); }
  .pk--section .pk-filter { order: 1; }
  .pk--section .pk-map { order: 2; }
  .pk--section .pk__seite { order: 3; }
  .pk--section .pk-map__stage { aspect-ratio: 1.05; }
  .pk-seg { width: 100%; flex-wrap: wrap; }
  .pk-chip { flex: 1 1 auto; }
  .pk-chip { flex: 1 1 auto; }
  .pk-select { flex: 1 1 calc(50% - .3125rem); }
  .pk-info { left: .5rem; right: .5rem; bottom: .5rem; }
}
@media (max-width: 575.98px) {
  /* Schmal: der Schlüssel würde die Stadtnamen verdecken, darum unter der Karte */
  .pk-schluessel { position: static; margin-top: .5rem; padding: 0; border: 0; background: none; }
  .pk-modus { top: .5rem; right: .5rem; }
  .pk-legende ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479.98px) {
  .pk-select { flex-basis: 100%; }
  .pk-chip span { padding: 0 .5rem; font-size: var(--fs-xs); }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .pk-seg { flex: 1 1 100%; }
  .pk-chip { flex: 1 1 auto; }
  .pk-select { flex-basis: calc(50% - .3125rem); }
}
@media (min-width: 1200px) {
  .pk-filter { flex-wrap: nowrap; }
}

/* Lage auf Standortseiten */
.so-section .pk { margin-top: var(--stack); }
.so-lage { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.so-lage p { display: flex; gap: .75rem; margin: 0; color: var(--navy); line-height: 1.45; }
.so-lage p .icon { flex: none; margin-top: .15em; width: 22px; height: 22px; color: var(--pnt-locate); }
.pk-detail-titel { margin-top: var(--section); }

/* ---------- Themenseiten: Kopf, Textkarten, Kosten, Quellen ---------- */
/* Brotkrumen, Seitenkopf und Plattenkopf liegen auf der Navy-Rückwand, die über die ganze Breite reicht */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: 0; padding-block: 1rem .25rem; color: var(--muted); font-size: 1rem; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb .icon { width: 16px; height: 16px; }
.breadcrumb [aria-current] { color: var(--navy); font-weight: 600; }
@media (max-width: 575.98px) { .breadcrumb [aria-current], .breadcrumb .icon:last-of-type { display: none; } }

.wf-hero { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside); grid-template-rows: minmax(0, 1fr) auto; gap: var(--gap) var(--aside-gap); padding-block: .5rem var(--block); }
.wf-hero + .steps, .wf-hero + .so-layout:has(.wf-duo) { margin-top: calc(var(--gap) - var(--block)); }
.wf-hero > * { border-radius: var(--radius-l); }
.wf-head { display: flex; flex-direction: column; justify-content: center; gap: 1rem; grid-row: span 2; padding: var(--panel-pad); background: var(--panel-bg); --focus: #fff; }
.wf-head h1 { color: #fff; font-size: var(--fs-display); }
.wf-head h1 > span, .wf-head h1 > em { display: block; }
.wf-head h1 em { margin-top: .2em; color: var(--on-panel); font-size: .62em; font-style: normal; font-weight: 400; letter-spacing: 0; text-wrap: pretty; }
.wf-head .so-claim { max-width: 62ch; margin: 0; color: var(--on-navy); }
.wf-head .so-claim a, .wf-head .so-claim a:hover { color: #fff; }
.wf-hero figure { position: relative; min-height: clamp(220px, 22vw, 300px); overflow: hidden; background: var(--tint); }
.wf-hero figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wf-hero__sprung { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; background: var(--navy); color: #fff; font-family: var(--font-head); font-size: 1.375rem; font-weight: 700; line-height: 1.25; text-decoration: none; --focus: #fff; }
.wf-hero__sprung small { display: block; margin-bottom: .125rem; color: var(--on-navy); font-family: var(--font-text); font-size: var(--fs-s); font-weight: 600; }
.wf-hero__sprung:hover { color: #fff; }
.wf-hero__sprung .icon { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--fill-on-navy-strong); transition: background-color var(--dur-2), transform var(--dur-2) var(--ease-out); }
.wf-hero__sprung:hover .icon { background: var(--fill-on-navy-hover); transform: translateY(3px); }
@media (min-width: 992px) { .wf-hero figure:last-child { grid-row: span 2; } }
@media (max-width: 991.98px) {
  .wf-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .wf-head { grid-row: auto; }
  .wf-hero figure { aspect-ratio: 3 / 2; min-height: 0; }
}

.so-claim { color: var(--navy); font-size: var(--fs-lead); font-weight: 500; line-height: 1.45; text-wrap: pretty; }
@media (max-width: 575.98px) { .so-claim { font-size: var(--fs-l); line-height: 1.55; } }

.wf-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); padding-bottom: var(--block); }
.wf-duo > section { padding: clamp(1.25rem, 2.5vw, var(--card-pad-x)); border-radius: var(--radius-l); background: var(--tint); scroll-margin-top: calc(var(--header-h) + 24px); }
.wf-duo > section:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.wf-duo > section:nth-child(2) { background: var(--blue-tint); }
.wf-duo h2 { margin-bottom: .75rem; font-size: var(--fs-card-l); }
.wf-duo p { max-width: 68ch; }
.pd-check { display: grid; gap: .5rem; }
.pd-check li { display: flex; gap: .625rem; font-size: var(--fs-m); line-height: 1.5; }
.pd-check .icon { margin-top: .2em; color: var(--pnt-accent); }
.pd-check--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem 2rem; }
/* Neben der 380er-Randspalte wird die zweispaltige Textkarte unter 1400 zu schmal */
@media (max-width: 1399.98px) { .so-main .wf-duo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) { .wf-duo, .pd-check--2 { grid-template-columns: minmax(0, 1fr); } }

.wf-kosten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.wf-kosten > div { padding: var(--tile-pad); border-radius: var(--radius-m); background: var(--tint); }
.wf-kosten dt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .375rem .75rem; color: var(--navy); font-size: var(--fs-l); font-weight: 700; }
.wf-kosten dd { margin-top: .375rem; font-size: var(--fs-m); line-height: 1.5; }
.wf-traeger { padding: .2rem .7rem; border-radius: var(--radius-full); background: #fff; font-size: var(--fs-s); font-weight: 600; }
.wf-note { max-width: 68ch; margin-top: 1.25rem; color: var(--muted); font-size: 1rem; }
@media (max-width: 767.98px) { .wf-kosten { grid-template-columns: minmax(0, 1fr); } }

.wf-weitere ul { display: flex; flex-direction: column; }
.wf-weitere .text-link { justify-content: space-between; width: 100%; }

.linkliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--gap); }
.linkliste li { position: relative; padding: var(--tile-pad); border: 1px solid var(--line); border-radius: var(--radius-m); background: #fff; transition: border-color var(--dur-2), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.linkliste li:hover { border-color: var(--line-locate); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.linkliste__von { display: block; margin-bottom: .25rem; color: var(--pnt-locate); font-size: var(--fs-s); font-weight: 700; }
.linkliste a { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; font-size: var(--fs-l); font-weight: 700; line-height: 1.35; text-decoration: none; }
.linkliste a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-m); }
.linkliste a:focus-visible { outline: none; }
.linkliste a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
.linkliste .icon { flex: none; width: 1.1em; height: 1.1em; margin-top: .15em; transition: transform var(--dur-2) var(--ease-out); }
.linkliste li:hover .icon { transform: translate(2px, -2px); }
.linkliste p { margin: .5rem 0 0; font-size: var(--fs-m); line-height: 1.5; }

/* ---------- Seitenlayout mit Randspalte ---------- */
.so-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside); gap: var(--aside-gap); align-items: start; padding-bottom: var(--section); }
.so-section { padding-block: var(--block); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 80px); }
.so-main > .so-section:first-child, .so-main > .wf-duo + .so-section { border-top: 0; }
.so-section h2 { margin-bottom: 1.125rem; font-size: var(--fs-sub); }
.so-section > p { max-width: 68ch; }
.so-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); display: flex; flex-direction: column; gap: var(--gap); }
/* Mit Sprungleiste (Standortseiten) rutscht die Seitenspalte unter Kopf und Leiste, sonst verdeckt die Leiste den Kartentitel */
@media (min-width: 1200px) { html:has(.so-subnav) .so-aside { top: calc(var(--header-h) + 66px + 1.5rem); } }
.so-card { padding: var(--card-pad); border: 1px solid var(--line); border-radius: var(--radius-l); background: #fff; }
.so-card h2 { margin-bottom: .5rem; font-size: var(--fs-card); }

/* Aufnahme-Kontaktkarte: Modifier von .so-card (weiß); --panel auf Navy (Fuß) */
.pd-aki { display: flex; flex-direction: column; gap: .5rem; }
.pd-aki__label { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; color: var(--muted); font-size: var(--fs-s); font-weight: 700; }
.pd-aki__note { margin: 0; color: var(--muted); font-size: var(--fs-s); }
.pd-aki--panel { border: 0; background: var(--fill-on-navy); color: var(--on-navy); }
.pd-aki--panel .pd-aki__label, .pd-aki--panel .pd-aki__note { color: var(--on-navy); }
.pd-aki--panel .text-link { color: #fff; }
@media (max-width: 1199.98px) {
  .so-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .so-aside { position: static; padding-top: 2rem; border-top: 1px solid var(--line); }
}

/* ---------- Standort- und WG-Seite ---------- */
.so-head { display: flex; flex-direction: column; align-items: flex-start; gap: .875rem; padding-block: .5rem var(--block); }
.so-main > .so-head { padding-top: 0; } /* Kopf in der linken Spalte (Rechtsseiten): Randspalte beginnt auf Höhe der H1 */
.so-head h1 { font-size: var(--fs-display); }
.so-head h1 span { display: block; }
.so-head h1 em { display: block; margin-top: .2em; color: var(--pnt-locate); font-size: .62em; font-style: normal; font-weight: 400; letter-spacing: 0; }
.so-head .so-claim { max-width: 68ch; margin: 0; }
.so-address { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; margin: 0; color: var(--muted); font-size: var(--fs-m); }
.so-address .icon { color: var(--pnt-locate); }
.so-address a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

.so-gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--gap); height: clamp(260px, 34vw, 480px); }
.so-gallery--1 { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); height: clamp(220px, 28vw, 400px); }
.so-gallery--2 { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); }
.so-gallery figure { position: relative; overflow: hidden; border-radius: var(--radius-l); background: var(--tint); }
.so-gallery--3 figure:first-child { grid-row: span 2; }
.so-gallery img { width: 100%; height: 100%; object-fit: cover; }
/* Bildausschnitt per Datenfeld bilder[0].fokus (oben, mitte, unten); CSP verbietet style-Attribute */
.so-gallery--fokus-oben img { object-position: 50% 20%; }
.so-gallery--fokus-mitte img { object-position: 50% 50%; }
.so-gallery--fokus-unten img { object-position: 50% 80%; }
.so-gallery figcaption { position: absolute; left: .75rem; bottom: .75rem; padding: .25rem .75rem; border-radius: var(--radius-full); background: rgba(255, 255, 255, .92); color: var(--navy); font-size: var(--fs-xs); font-weight: 600; }
@media (max-width: 767.98px) {
  .so-gallery, .so-gallery--2 { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); height: auto; aspect-ratio: 4 / 3; }
  .so-gallery figure:not(:first-child) { display: none; }
}

.so-subnav { position: sticky; top: var(--header-h); z-index: 20; margin-top: 1.25rem; border-bottom: 1px solid var(--line); background: #fff; }
@media (max-width: 1199.98px) { .so-subnav { position: static; } }
.so-subnav ul { display: flex; gap: .25rem; overflow-x: auto; padding-block: .625rem; scrollbar-width: none; }
.so-subnav a { display: flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: var(--radius-full); color: var(--navy); font-size: 1rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-1), color var(--dur-1); }
.so-subnav a:hover { background: var(--tint); }
.so-subnav a.is-active { background: var(--navy); color: #fff; }

.so-steckbrief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--stack); }
.so-steckbrief > div { padding: var(--tile-pad); border-radius: var(--radius-m); background: var(--tint); }
.so-steckbrief dt { color: var(--pnt-locate); font-size: var(--fs-s); font-weight: 700; }
.so-steckbrief > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.so-steckbrief + .pd-check { margin-top: var(--stack); }
.so-steckbrief dd { color: var(--navy); font-size: var(--fs-m); font-weight: 600; line-height: 1.45; }
@media (max-width: 767.98px) { .so-steckbrief { grid-template-columns: minmax(0, 1fr); } }


.so-contact { display: flex; flex-direction: column; gap: 1rem; padding: var(--card-pad); border-radius: var(--radius-l); background: var(--navy); color: var(--on-navy); --focus: #fff; }
.so-contact h2 { color: #fff; font-size: var(--fs-card); line-height: 1.35; }
.so-contact-address { display: flex; gap: .625rem; margin: 0; padding-top: 1rem; border-top: 1px solid var(--line-on-navy); font-size: 1rem; }
.so-contact-address .icon { margin-top: .15em; color: var(--blue-on-navy); }
.so-contact-address a { color: #fff; font-weight: 700; }

.so-person { display: flex; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.so-person:first-child { border-top: 0; }
.so-person:last-child { padding-bottom: 0; } /* unten nur der Karteninnenabstand, wie oben */
.so-person-avatar { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--blue-tint); color: var(--pnt-accent); }
img.so-person-avatar { object-fit: cover; }
.so-person h3 { font-family: var(--font-text); font-size: var(--fs-m); letter-spacing: 0; }
.so-person p { margin: 0; color: var(--muted); font-size: var(--fs-s); }

.pd-status { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .75rem; border-radius: var(--radius-full); background: var(--status-tint); color: var(--status); font-size: var(--fs-s); font-weight: 700; }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--gap-l); align-items: start; }
.faq-layout__intro { position: sticky; top: calc(var(--header-h) + 2rem); display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.faq-layout__intro .section__title, .faq-layout__intro p { margin: 0; }
.faq { border-top: 1px solid var(--line); interpolate-size: allow-keywords; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.25rem 0; list-style: none; cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item h3 { font-family: var(--font-text); font-size: var(--fs-l); letter-spacing: 0; line-height: 1.4; text-wrap: pretty; transition: color var(--dur-1); }
.faq__item summary:hover h3 { color: var(--pnt-accent); }
.faq__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--purple-tint); color: var(--pnt-locate); transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2), color var(--dur-2); }
.faq__item[open] .faq__icon { background: var(--pnt-locate); color: #fff; transform: rotate(135deg); }
.faq__answer { padding: 0 3.75rem 1.5rem 0; max-width: 46em; }
.faq__item::details-content { height: 0; overflow: clip; transition: height var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete; }
.faq__item[open]::details-content { height: auto; }
@media (max-width: 991.98px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .faq-layout__intro { position: static; }
  .faq__answer { padding-right: 0; }
}

/* ---------- Abschluss-Band ---------- */
main:has(> .section--tint:last-child) + .cta { padding-top: var(--section); }
.cta { padding-bottom: var(--tail); }
.cta__panel { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem 3rem; padding: var(--panel-pad); overflow: hidden; border-radius: var(--radius-l); background: var(--panel-bg); color: rgba(255, 255, 255, .92); --focus: #fff; }
.cta__text { flex: 1 1 26rem; max-width: 40rem; }
.cta h2 { margin-bottom: .75rem; color: #fff; font-size: var(--fs-sub); }
.cta h2 span, .cta h2 em { display: block; }
.cta h2 em { margin-top: .2em; color: var(--on-panel); font-size: .7em; font-style: normal; font-weight: 400; letter-spacing: 0; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.cta__phone { display: inline-flex; align-items: center; gap: .875rem; color: #fff; text-decoration: none; }
.cta__phone .icon { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--fill-on-navy-strong); transition: background-color var(--dur-2); }
.cta__phone:hover { color: #fff; }
.cta__phone:hover .icon { background: var(--fill-on-navy-hover); }
.cta__phone span { display: flex; flex-direction: column; font-family: var(--font-head); font-size: 1.375rem; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.cta__phone small { font-family: var(--font-text); color: var(--on-navy); font-size: var(--fs-s); font-weight: 500; }

/* ---------- Partnerlogos ---------- */
.partners { padding-bottom: var(--tail); }
/* Eine Zeile, nie umbrechen: bei Überlauf seitlich scrollen (Wischen, Tab, Pfeile), pnt.js blendet die Pfeile ein */
.partners__slider { position: relative; display: flex; align-items: center; gap: .25rem; }
/* Slider: feste Slots je Breite (--partners-n), Verschiebung um ganze Logos (--partners-i aus pnt.js) */
.partners__viewport { flex: 1 1 auto; min-width: 0; padding: .5rem 0; overflow: hidden; }
.partners__list { --partners-n: 4; --partners-i: 0; display: flex; margin: 0; padding: 0; list-style: none; transform: translateX(calc(var(--partners-i) * -100% / var(--partners-n))); transition: transform var(--dur-3) var(--ease-out); }
.partners__list li { display: flex; flex: 0 0 calc(100% / var(--partners-n)); align-items: center; justify-content: center; padding-inline: clamp(.75rem, 2vw, 1.5rem); }
.partners__slider.is-fit .partners__list { justify-content: center; transform: none; }
@media (max-width: 991.98px) { .partners__list { --partners-n: 3; } }
@media (max-width: 575.98px) { .partners__list { --partners-n: 2; } }
.partners__list a { display: block; border-radius: var(--radius-s); opacity: .55; transition: opacity var(--dur-2); }
.partners__list a:hover, .partners__list a:focus-visible { opacity: 1; }
.partners__list img { width: auto; height: clamp(48px, 4.6vw, 64px); max-width: 100%; object-fit: contain; filter: grayscale(1); transition: filter var(--dur-2); }
.partners__list img.is-white { filter: brightness(0); }
.partners__list a:hover img:not(.is-white), .partners__list a:focus-visible img:not(.is-white) { filter: none; }
/* Pfeile randlos, über den Rändern der Logozeile; sichtbar nur bei Hover oder Tastaturfokus in der Sektion (Touch: immer) */
.partners__btn { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-full); background: rgba(255, 255, 255, .92); color: var(--pnt-accent); box-shadow: var(--shadow-card); cursor: pointer; opacity: 0; transform: translateY(-50%); transition: opacity var(--dur-2), background-color var(--dur-1); }
.partners__btn[data-partners-zurueck] { left: var(--gutter); }
.partners__btn[data-partners-weiter] { right: var(--gutter); }
.partners__slider:hover .partners__btn, .partners__slider:focus-within .partners__btn, .partners__btn:focus-visible { opacity: 1; }
.partners__btn:hover { background: var(--blue-tint); }
.partners__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.partners__btn .icon { width: 22px; height: 22px; }
@media (hover: none) { .partners__btn { opacity: 1; } }

/* ---------- Fußbereich ---------- */
.site-footer { padding-bottom: calc(clamp(8px, 2vw, 1.5rem) + var(--mobilbar-h)); }
.site-footer__panel { position: relative; padding: var(--panel-pad); overflow: hidden; border-radius: var(--radius-l); background: var(--navy); color: var(--on-navy); font-size: 1rem; --focus: #fff; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__titel { margin: 0 0 .5rem; color: #fff; font: 700 1.0625rem/1.2 var(--font-head); }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 2rem var(--gap-l); align-items: start; }
.site-footer__brand img { width: auto; height: clamp(52px, 5vw, 64px); margin-bottom: 1.25rem; }
.site-footer__brand p { max-width: 44rem; line-height: 1.6; }
.site-footer__brand p + p { margin-top: .75rem; }
.site-footer__brand a { text-decoration: underline; }
.site-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line-on-navy); }
.site-footer__cols a { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding-block: .25rem; font-weight: 600; line-height: 1.3; }
.site-footer__cols a .icon { width: .9em; height: .9em; color: var(--on-navy); }
.site-footer__zentrale { margin: 0; }
.site-footer__zentrale p { margin-bottom: .25rem; }
.site-footer__zentrale a { display: flex; }
.site-footer__zentrale .icon { width: 18px; height: 18px; color: var(--blue-on-navy); }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-on-navy); font-size: var(--fs-s); }
.site-footer__bottom p { margin: 0 auto 0 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.site-footer__legal a, .site-footer__legal button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: #fff; }
.site-footer__legal button:hover { text-decoration: underline; }
.site-footer__social { display: flex; gap: .5rem; }
.site-footer__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fill-on-navy); transition: background-color var(--dur-2); }
.site-footer__social a:hover { background: var(--pnt-accent); }
@media (max-width: 991.98px) {
  .site-footer__top { grid-template-columns: minmax(0, 1fr); }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) { .site-footer__cols { grid-template-columns: minmax(0, 1fr); } }

/* Mobile Aufnahme-Leiste */
.pd-mobilbar { display: none; }
@media (max-width: 1199.98px) {
  .pd-mobilbar {
    position: fixed;
    inset: auto 0 0;
    z-index: 90;
    display: flex;
    gap: .625rem;
    padding: .5rem var(--gutter) calc(.5rem + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: var(--shadow-bar);
  }
  .pd-mobilbar .btn { flex: 1; min-height: 56px; padding-inline: .75rem; }
}

/* ---------- Einwilligung ---------- */
.einwilligung { width: min(680px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--radius-l); background: #fff; color: var(--text); box-shadow: var(--shadow-dialog); }
.einwilligung::backdrop { background: rgba(11, 34, 68, .55); }
.einwilligung__form { padding: clamp(1.25rem, 4vw, 2.25rem); }
.einwilligung__title { margin: 0 0 .75rem; color: var(--ink); font: 700 var(--fs-card-l)/1.2 var(--font-head); letter-spacing: -.01em; }
.einwilligung p { font-size: 1rem; }
.einwilligung__options { margin: 1.25rem 0; border-top: 1px solid var(--line); }
.einwilligung__options li { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .875rem 0; border-bottom: 1px solid var(--line); }
.einwilligung__options label { display: flex; flex-direction: column; color: var(--navy); cursor: pointer; }
.einwilligung__options label span { color: var(--muted); font-size: var(--fs-s); }
.einwilligung__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.einwilligung__actions .btn { flex: 1 1 auto; }
.switch { appearance: none; position: relative; flex: none; width: 56px; height: 32px; margin: 0; border-radius: var(--radius-full); background: #6c7a8e; cursor: pointer; transition: background-color var(--dur-2); }
.switch::after { content: ''; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform var(--dur-2) var(--ease-out); }
.switch:checked { background: var(--pnt-accent); }
.switch:checked::after { transform: translateX(24px); }
.switch:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Rechtstexte ---------- */
.pd-prose { max-width: 72ch; }
.pd-prose h2 { margin: 2.5rem 0 .75rem; font-size: var(--fs-card-l); }
.pd-prose > :first-child { margin-top: 0; }
.pd-prose h3 { margin: 1.75rem 0 .5rem; font-family: var(--font-text); font-size: var(--fs-l); letter-spacing: 0; }
.pd-prose ul { margin: 0 0 1em; padding-left: 1.25rem; list-style: disc; }
.pd-prose li + li { margin-top: .25rem; }
.pd-prose address { margin-bottom: 1em; }

/* ---------- Bewegung ----------
   Leitidee: Kartenraster blenden gestaffelt ein, die Karte setzt ihre Punkte nacheinander. Ohne JS bleibt alles sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  /* Hero-Einstieg mit eigenen Dauern (einmalig, gestaffelt); Schleife (puls) ebenso. Sonst nur --dur-* */
  .anim .pd-hero h1 span, .anim .pd-hero h1 em { animation: rise .9s var(--ease-out) both; }
  .anim .pd-hero h1 em { animation-delay: .1s; }
  .anim .pd-hero__lede { animation: rise .8s var(--ease-out) .2s both; }
  .anim .pd-hero__cta { animation: rise .8s var(--ease-out) .3s both; }
  .pd-hero__media img { animation: settle 1.6s var(--ease-out) both; }

  .pd-utility__puls { animation: puls 2.4s ease-out infinite; }

  .anim [data-reveal=""] { transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); transition-delay: var(--reveal-delay, 0s); }
  .anim [data-reveal=""]:not(.is-in) { opacity: 0; transform: translateY(16px); }

  .pk-marker__kreis, .pk-marker__nr { transform-box: fill-box; transform-origin: center; }
  .anim [data-reveal="karte"] .pk-land { transition: fill var(--dur-3) var(--ease-out), opacity calc(2 * var(--dur-3)) var(--ease-out); }
  .anim [data-reveal="karte"] .pk-marker__kreis, .anim [data-reveal="karte"] .pk-marker__nr { transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2), fill var(--dur-1); transition-delay: calc(var(--i, 0) * 55ms + 250ms), calc(var(--i, 0) * 55ms + 250ms), 0s; }
  .anim [data-reveal="karte"]:not(.is-in) .pk-land { opacity: .3; }
  .anim [data-reveal="karte"]:not(.is-in) .pk-marker__kreis, .anim [data-reveal="karte"]:not(.is-in) .pk-marker__nr { opacity: 0; transform: scale(.3); }
  .pk-marker.is-hover .pk-marker__ring { animation: ring var(--dur-3) var(--ease-out); }

  .einwilligung[open] { animation: sheet var(--dur-3) var(--ease-out); }
  .einwilligung[open]::backdrop { animation: fade var(--dur-2) ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@keyframes rise { from { opacity: 0; transform: translateY(.7em); } }
@keyframes settle { from { transform: scale(1.06); } }
@keyframes ring { from { opacity: .7; transform: scale(.75); } to { opacity: 0; transform: scale(1.5); } }
@keyframes pk-info { from { opacity: 0; transform: translateY(10px); } }
@keyframes puls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue-on-navy) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes sheet { from { opacity: 0; transform: translateY(32px); } }
@keyframes fade { from { opacity: 0; } }

@media print {
  .pd-utility, .site-header, .site-footer, .cta, .pd-mobilbar, .so-subnav, .einwilligung, .partners { display: none !important; }
}
@media (forced-colors: active) {
  .btn, .pk-chip span, .house, .pd-service { border: 1px solid CanvasText; }
}

/* ---------- Styleguide ---------- */
.sg-swatch { height: 72px; border: 1px solid var(--line); border-radius: var(--radius-m); }
.sg-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.sg-kopf { display: none; overflow: hidden; border-radius: var(--radius-m); }
.sg-kopf .site-header { position: static; }
@media (min-width: 1200px) { .sg-kopf { display: block; } }
.sg-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; }
.sg-leist { margin-top: 1rem; }
.sg-kontrast { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.sg-kontrast th, .sg-kontrast td { padding: .5rem .75rem; border-bottom: 1px solid var(--line); text-align: left; }

/* Feedback 2: Inhalte */
.pd-hero__lede a, .pd-hero__lede a:hover { color: #fff; }
h1 abbr[title] { text-decoration: none; } /* Bundesländer-Kurzform in Überschriften ohne gepunktete Linie, Tooltip bleibt */
/* Hero: Telefon und E-Mail als gleich gebaute Kacheln. Ab 992 px (Hero zweispaltig) stehen sie nebeneinander, sobald zwei Kacheln
   à 230 px passen (etwa ab 1180 px Fenster), mit kleinerer Scheibe und Schrift; sonst in voller Breite untereinander. */
.pd-hero__cta { gap: .75rem; align-items: stretch; }
.pd-hero__cta .pd-hero__tel { flex: 1 1 auto; }
.pd-hero__tel--mail span { font-size: 1.125rem; white-space: normal; }
@media (max-width: 575.98px) { .pd-hero__tel--mail span { font-size: 1rem; } } /* bricht nur am <wbr> vor dem @ */
@media (min-width: 992px) {
  .pd-hero__cta .pd-hero__tel { flex: 1 1 auto; min-width: 0; gap: .75rem; padding-right: 1rem; }
  .pd-hero__cta .pd-hero__tel--mail { flex: 2 1 260px; } /* die Adresse braucht mehr Platz als die Nummer */
  .pd-hero__tel .icon { width: 40px; height: 40px; padding: 11px; }
  .pd-hero__tel span { font-size: 1.125rem; }
  .pd-hero__tel--mail span { font-size: .9375rem; }
}
/* Partner ohne Website: Logo ohne Link, gleich gedämpft wie die verlinkten */
.partners__list li > span { display: block; opacity: .55; }

/* Feedback 2: Karte */
/* Standorte der PNT Kinderkrankenpflege: gleicher Marker wie die eigenen Standorte, nur in Kinderblau (Nummer in Navy für Kontrast); der Elefant bleibt dem Leistungs-Icon vorbehalten; alle Ziele extern */
.pk-marker--kinder .pk-marker__kreis { fill: var(--pnt-kinder); }
.pk-marker--kinder .pk-marker__nr { fill: var(--navy); }
.pk-marker--kinder .pk-marker__leine { stroke: var(--pnt-kinder); }
.pk-marker--kinder .pk-marker__anker { fill: var(--pnt-kinder); }
.pk-nr--kinder { background: var(--pnt-kinder); color: var(--navy); }
.pk-item__link strong .icon { width: .8em; height: .8em; margin-left: .3em; vertical-align: -.05em; }
.pk-schluessel .pk-schluessel__kinder { border-color: var(--pnt-kinder); background: var(--pnt-kinder); }
.pk-gm--kinder .pk-gm__punkt { background: var(--pnt-kinder); }
/* Mit dem fünften Eintrag passt der Schlüssel nicht mehr in eine Zeile neben die Kartenumschaltung (oben rechts) und verdeckte den Norden:
   in der Sektion steht er ab 576 px unten links (Frankreich und Saarland, ohne Standorte) als Spalte, im Google-Modus unten mittig und darf umbrechen */
@media (min-width: 576px) {
  .pk--section .pk-schluessel { top: auto; bottom: .75rem; flex-direction: column; align-items: flex-start; }
  /* Google-Modus: gleiche Spalte, aber rechts unten (links sitzt das Google-Logo, unten die Lizenzzeile) */
  .pk.pk--section.is-google .pk-schluessel { left: auto; right: 1.25rem; transform: none; }
}