/* Pflege mit Herz – Design (portiert aus Claude-Design-Export) */

:root {
  --bg: oklch(0.99 0.006 96);
  --card: #ffffff;
  --cta: #7bb932;
  --cta-ink: oklch(0.26 0.07 135);
  --green: #7bb932;
  --green-deep: #5f9322;
  --green-soft: oklch(0.955 0.05 132);
  --ink: oklch(0.255 0.06 330);
  --line: oklch(0.92 0.012 320);
  --muted: oklch(0.50 0.038 330);
  --peach: #f4b483;
  --purple: #7f2e88;
  --purple-soft: oklch(0.95 0.035 330);
  --surface: #ffffff;
}

/* --- Basis / Reset (Design geht von Nullstellung aus) --- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:'Schibsted Grotesk',system-ui,sans-serif;line-height:1.05}
/* GeneratePress-Wrapper neutralisieren – wir rendern Full-Bleed */
.site-content,.site-main{padding:0;margin:0;max-width:none}

/* --- Design-CSS (extrahiert) --- */
/* (Canvas-Runtime-CSS entfernt) */

*{box-sizing:border-box;margin:0;padding:0}
  
  ::selection{background:#7bb93255}
  img{display:block}
  .blob{position:absolute;border-radius:50%;filter:blur(72px);pointer-events:none;will-change:transform,opacity}
  @keyframes drA{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(80px,-50px) scale(1.2)}66%{transform:translate(-44px,40px) scale(.9)}}
  @keyframes drB{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-64px,52px) scale(1.14)}66%{transform:translate(52px,-28px) scale(1.06)}}
  @keyframes drC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(56px,40px) scale(1.24)}}
  @keyframes fadeP{0%,100%{opacity:.5}50%{opacity:.12}}
  @keyframes fadeG{0%,100%{opacity:.12}50%{opacity:.5}}
  @keyframes mq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  .grain::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.14;mix-blend-mode:soft-light;pointer-events:none}
  .tile img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  .tile:hover img{transform:scale(1.07)}
  @media (max-width:980px){
    [style*="grid-template-columns:1fr 1fr 0.74fr"]{grid-template-columns:1fr 1fr !important;}
    [style*="grid-template-columns:1.6fr 1fr 1fr 1.2fr"]{grid-template-columns:1fr 1fr !important;}
    [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr 1fr !important;}
  }
  @media (max-width:760px){
    .nav-links{display:none !important;}
    .burger-btn{display:grid !important;}
    [style*="grid-template-columns:1fr 1fr 0.74fr"]{grid-template-columns:1fr !important;}
    [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;}
    [style*="grid-template-columns:0.82fr 1.18fr"]{grid-template-columns:1fr !important;}
    [style*="grid-template-columns:auto 1fr"]{grid-template-columns:1fr !important;}
    [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr !important;}
    [style*="grid-template-columns:1.35fr 1fr"]{grid-template-columns:1fr !important;}
    [style*="grid-template-columns:1fr 0.92fr"]{grid-template-columns:1fr !important;}
    [style*="grid-template-columns:1.6fr 1fr 1fr 1.2fr"]{grid-template-columns:1fr !important;}
    [style*="font-size:84px"]{font-size:clamp(44px,12vw,70px) !important;}
    [style*="font-size:62px"]{font-size:40px !important;}
    [style*="font-size:54px"]{font-size:36px !important;}
    [style*="font-size:50px"]{font-size:34px !important;}
    [style*="font-size:48px"]{font-size:32px !important;}
    [style*="font-size:46px"]{font-size:32px !important;}
    [style*="margin-right:calc(-50vw + 50%)"]{margin-right:0 !important; border-radius:30px !important;}
    [style*="margin-right:calc(max"]{margin-right:0 !important; transform:none !important;}
    [style*="position:sticky"]{position:static !important;}
  }
  @media (max-width:560px){
    .head-cta{display:none !important;}
  }

  /* mobile fix: spacing-agnostic selectors */
  @media (max-width:820px){
    [style*="grid-template-columns"]{grid-template-columns:1fr !important;}
    [style*="position: sticky"]{position:static !important;}
    [style*="margin-right: calc("]{margin-right:0 !important; transform:none !important; border-radius:30px !important;}
  }
  @media (max-width:760px){
    h1{font-size:clamp(38px,10vw,62px) !important;}
    h2{font-size:clamp(27px,6.5vw,42px) !important;}
  }

/* --- Mobile-Navigation: Burger-Toggle (ersetzt das entfernte Canvas-Runtime) --- */
@media (max-width:760px){
  [data-pmh-nav].is-open{
    display:flex !important;flex-direction:column;gap:16px;
    position:absolute;top:72px;left:16px;right:16px;
    background:#fff;color:var(--ink);padding:22px 24px;border-radius:20px;
    box-shadow:0 24px 60px rgba(20,8,28,.22);z-index:60;font-size:17px;
  }
  [data-pmh-nav].is-open a{color:var(--ink) !important}
}

/* ===== Zusätzliche Seiten-CSS ===== */
/* + leistungen */

  
  
  
  
  
  
  
  
  
  
  .mobile-menu{display:none;}
  @media (max-width:980px){
    [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr 1fr !important;}
    [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr 1fr !important;}
  }
  @media (max-width:760px){
    .nav-links{display:none !important;}
    .burger-btn{display:grid !important; margin-left:auto !important;}
    .mnav-cb:checked ~ .mobile-menu{display:block !important;}
    [style*="display:grid"][style*="grid-template-columns"]{grid-template-columns:1fr !important;}
    [style*="position:sticky"]{position:static !important;}
    [style*="margin-right:calc(-50vw + 50%)"]{margin-right:0 !important; border-radius:30px !important;}
    [style*="margin-right:calc(max"]{margin-right:0 !important; transform:none !important;}
    h1{font-size:clamp(38px,9vw,56px) !important;}
    h2{font-size:clamp(26px,6vw,40px) !important;}
  }

  /* mobile fix: spacing-agnostic selectors */
  
  

/* + ueber-uns */

  
  
  
  
  
  
  
  
  
  
  
  
  .tile:hover img{transform:scale(1.06)}
  
  
  

  /* mobile fix: spacing-agnostic selectors */
  
  

/* + kontakt */

  
  
  
  
  
  
  
  
  
  
  details>summary{list-style:none;cursor:pointer}
  details>summary::-webkit-details-marker{display:none}
  details[open] .faq-plus{transform:rotate(45deg)}
  
  
  

  /* mobile fix: spacing-agnostic selectors */
  
  

/* + ambulante-dienste */

  
  
  
  
  
  
  
  
  
  @keyframes popIn{0%{opacity:0;transform:translateY(16px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
  @keyframes fadeOv{0%{opacity:0}100%{opacity:1}}
  
  .hex{transition:transform .16s cubic-bezier(.2,.7,.2,1), filter .16s;}
  .hex:hover{transform:scale(1.07);filter:brightness(1.04);z-index:5;}
  @media (max-width:980px){
    .grid-2{grid-template-columns:1fr !important;}
    .foot-grid{grid-template-columns:1fr 1fr !important;}
    .lst-grid{grid-template-columns:1fr 1fr !important;}
  }
  @media (max-width:760px){
    .lst-grid{grid-template-columns:1fr !important;}
    .nav-links{display:none !important;}
    .burger{display:grid !important;}
    .hero-h1{font-size:clamp(38px,10.5vw,52px) !important;}
    .pad{padding-left:18px !important;padding-right:18px !important;}
    .hero-pad{padding-top:140px !important;padding-bottom:62px !important;}
    .sec-pad{padding-top:64px !important;padding-bottom:64px !important;}
    .steps-grid{grid-template-columns:1fr !important;}
    .foot-grid{grid-template-columns:1fr !important;gap:32px !important;}
    .h2-big{font-size:34px !important;}
    .hero-cta{flex-direction:column !important;align-items:stretch !important;}
    .hero-cta>a{justify-content:center !important;}
  }
  @media (max-width:520px){
    .head-cta{display:none !important;}
  }

/* + stationaere-pflege */

  
  ::selection{background:color-mix(in oklab,var(--accent,#9a5a3a),transparent 70%)}
  .ph{position:relative;background:var(--ph);display:grid;place-items:center;overflow:hidden}
  .ph::before{content:attr(data-label);font-family:'Hanken Grotesk',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);opacity:.7;text-align:center;padding:0 24px;max-width:80%}
  details>summary{list-style:none}
  
  
  
  

  /* mobile fix: spacing-agnostic selectors */
  
  

/* + wg-pflege */

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  /* mobile fix: spacing-agnostic selectors */
  
  

/* --- Prosa-Seiten (page.php: Impressum, Datenschutz, einfache Seiten) --- */
.pmh-prose{max-width:760px;margin:0 auto;}
.pmh-prose-title{font-family:'Schibsted Grotesk',sans-serif;font-size:clamp(32px,6vw,52px);letter-spacing:-0.02em;margin-bottom:28px;color:var(--ink);}
.pmh-prose-body{font-size:17px;line-height:1.7;color:var(--ink);}
.pmh-prose-body h2{font-family:'Schibsted Grotesk',sans-serif;font-size:26px;margin:38px 0 12px;letter-spacing:-0.01em;}
.pmh-prose-body h3{font-family:'Schibsted Grotesk',sans-serif;font-size:20px;margin:28px 0 8px;}
.pmh-prose-body p{margin:0 0 16px;}
.pmh-prose-body a{color:var(--green-deep);text-decoration:underline;}
.pmh-prose-body ul,.pmh-prose-body ol{margin:0 0 16px 22px;}
.pmh-prose-body li{margin:6px 0;}

/* --- Einsatzgebiete: Hex-Grid --- */
.hex-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;max-width:620px;margin:0 auto;gap:4px;}
.hex-grid .hex{margin:2px;}

/* --- Modal (Gebiets-Ansprechpartner) --- */
.pmh-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;}
.pmh-modal[hidden]{display:none;}
.pmh-modal__bd{position:absolute;inset:0;background:rgba(20,8,28,.55);backdrop-filter:blur(4px);}
.pmh-modal__box{position:relative;background:#fff;border-radius:24px;max-width:420px;width:100%;padding:34px 30px 30px;box-shadow:0 30px 80px rgba(20,8,28,.35);z-index:1;}
.pmh-modal__x{position:absolute;top:12px;right:16px;background:none;border:none;font-size:28px;line-height:1;cursor:pointer;color:var(--muted);}
.pmh-modal__eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep);margin-bottom:8px;}
.pmh-modal__title{font-family:'Schibsted Grotesk',sans-serif;font-size:26px;letter-spacing:-.02em;margin-bottom:8px;}
.pmh-modal__lead{color:var(--muted);font-size:15px;margin-bottom:18px;}
.pmh-modal__ap{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.pmh-modal__photo{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto;}
.pmh-modal__name{font-weight:700;font-size:16px;}
.pmh-modal__role{color:var(--muted);font-size:14px;}
.pmh-modal__cta{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:var(--cta-ink);font-weight:700;padding:13px 22px;border-radius:999px;text-decoration:none;}
body.pmh-modal-open{overflow:hidden;}

.pmh-modal__ap[hidden]{display:none;}

/* --- Mobile Header: Überlauf auf kleinen Screens verhindern --- */
@media (max-width:480px){
  .pmh-site > header > div{padding-left:10px !important;padding-right:10px !important;}
  .pmh-site > header > div > div{padding-left:14px !important;}
  .pmh-site > header img{height:32px !important;padding:5px 9px !important;}
}

/* --- Header-Containing-Block + globaler Überlaufschutz (Mobile) --- */
.pmh-site{position:relative;overflow-x:clip;}

/* --- Einsatzgebiete: Chemnitz-Karte (Waben absolut positioniert) --- */
.hex-map{position:relative;width:100%;max-width:600px;margin:0 auto;aspect-ratio:640/500;container-type:inline-size;}
.hex-map .hex{transition:transform .16s cubic-bezier(.2,.7,.2,1),filter .16s;}
.hex-map .hex:hover{transform:scale(1.06);filter:brightness(1.04);z-index:5;}

/* --- Header: saubere Zwischenbreiten (6 Menüpunkte) --- */
.nav-links a{white-space:nowrap;}
.head-cta{white-space:nowrap;}
@media (max-width:1120px){
  .nav-links{gap:16px !important;font-size:14px !important;}
}
@media (max-width:960px){
  .nav-links{display:none !important;}
  .burger-btn{display:grid !important;}
}
@media (max-width:960px) and (min-width:761px){
  [data-pmh-nav].is-open{
    display:flex !important;flex-direction:column;gap:16px;
    position:absolute;top:84px;left:24px;right:24px;
    background:#fff;color:var(--ink);padding:22px 24px;border-radius:20px;
    box-shadow:0 24px 60px rgba(20,8,28,.22);z-index:60;font-size:17px;
  }
  [data-pmh-nav].is-open a{color:var(--ink) !important;white-space:normal;}
}

/* --- GP-Layout-Margin neutralisieren (weißer Streifen über dem Hero, sitewide) --- */
body .site-main, .separate-containers .site-main{margin:0 !important;}

/* --- Mobil: CTA-Zeilen (Button + Telefon) umbrechen lassen statt clippen --- */
@media (max-width:760px){
  main div[style*="display: flex"][style*="gap: 14px"],
  main div[style*="display: flex"][style*="gap: 16px"],
  main div[style*="display: flex"][style*="gap: 18px"]{flex-wrap:wrap !important;}
  main p{overflow-wrap:break-word;}
}

/* ===== Betreutes Wohnen (Klingerstraße) — Responsive, gescopt auf .bw-page ===== */
@media (max-width:980px){
  .bw-page .grid-2{grid-template-columns:1fr !important;}
  .bw-page .apt-grid{grid-template-columns:1fr 1fr !important;}
}
@media (max-width:760px){
  .bw-page .apt-grid{grid-template-columns:1fr !important;}
  .bw-page .cost-row{grid-template-columns:1fr !important; gap:36px !important;}
  .bw-page .pad{padding-left:18px !important; padding-right:18px !important;}
  .bw-page .hero-pad{padding-top:140px !important; padding-bottom:60px !important;}
  .bw-page .sec-pad{padding-top:64px !important; padding-bottom:64px !important;}
  .bw-page .h2-big{font-size:34px !important;}
  .bw-page .hero-cta{flex-direction:column !important; align-items:stretch !important;}
  .bw-page .hero-cta>a{justify-content:center !important;}
  .bw-page .stat-row{gap:26px !important;}
}

/* =========================================================================
   Seiten-Hero — EINE Definition für alle Unterseiten
   Ersetzt 9× identische Inline-Styles. Gradient, Radius, Padding und der
   grüne Leucht-Blob leben ab hier nur noch an einer Stelle.
   ========================================================================= */
.pmh-hero{
  position:relative; z-index:1; overflow:hidden;
  background:linear-gradient(150deg,#7f2e88,#7d765b);                                        /* Fallback ohne color-mix */
  background:linear-gradient(150deg,var(--purple),color-mix(in oklab,var(--purple),var(--green) 52%));
  color:#fff;
  padding:170px 38px 90px;
  border-radius:0 0 48px 48px;
}
/* grüner Leucht-Blob oben rechts (war vorher als <span class="blob"> im Markup) */
.pmh-hero::before{
  content:""; position:absolute; width:480px; height:480px; border-radius:50%;
  background:var(--green); opacity:.34; top:-120px; right:6%;
  filter:blur(72px); pointer-events:none;
  animation:drC 18s ease-in-out infinite;
}
.pmh-hero__inner{position:relative; max-width:1280px; margin:0 auto}
.pmh-hero__inner--narrow{max-width:760px}

@media (max-width:980px){
  .pmh-hero{padding:150px 30px 74px}
}
@media (max-width:760px){
  .pmh-hero{padding:132px 20px 58px; border-radius:0 0 32px 32px}
  .pmh-hero::before{width:320px; height:320px; top:-90px}
}
/* Bewegung reduzieren respektieren (Barrierefreiheit) */
@media (prefers-reduced-motion: reduce){
  .pmh-hero::before,.blob{animation:none !important}
}

/* =========================================================================
   Hintergrund-Atmosphäre (Grain + 3 driftende Farbblobs)
   War 8× identisch als Inline-Markup in den Templates — jetzt via pmh_grain().
   ========================================================================= */
.grain{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.grain .blob:nth-child(1){width:780px; height:780px; background:var(--purple); top:-12%; left:-12%; opacity:.28; animation:drA 26s ease-in-out infinite, fadeP 19s ease-in-out infinite}
.grain .blob:nth-child(2){width:740px; height:740px; background:var(--green);  top:26%;  right:-14%; opacity:.28; animation:drB 30s ease-in-out infinite, fadeG 19s ease-in-out infinite}
.grain .blob:nth-child(3){width:640px; height:640px; background:var(--purple); bottom:-14%; left:24%; opacity:.22; animation:drC 24s ease-in-out infinite, fadeG 22s ease-in-out infinite}

/* =========================================================================
   Wiederkehrende Bausteine (waren 34× / 19× als Inline-Style dupliziert)
   ========================================================================= */
.pmh-eyebrow{font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase}

.pmh-btn{
  text-decoration:none; display:inline-flex; align-items:center; gap:10px;
  background:var(--green); color:var(--cta-ink);
  font-weight:700; font-size:17px; padding:18px 30px; border-radius:999px;
  box-shadow:0 14px 32px rgba(123,185,50,.4);
  border:none; cursor:pointer; font-family:inherit;
}
.pmh-btn--white{
  background:rgba(255,255,255,.95); color:var(--purple);
  box-shadow:none; gap:11px; padding:18px 28px;
}

/* =========================================================================
   Seitenüberschrift im Hero — EINE Definition für alle Unterseiten
   Vorher gab es sieben Varianten (62/64/66/84px, Gewicht 800 vs 900,
   Zeilenhöhe 0.95 bis 1.06). Übernommen wurde die Fassung der Seite
   „Aktuelles": etwas kleiner und vor allem mitwachsend — die Schrift
   skaliert zwischen 38px (Handy) und 56px (großer Bildschirm) mit.
   ========================================================================= */
.pmh-hero h1{
  font-family:'Schibsted Grotesk', system-ui, sans-serif;
  font-weight:800;
  font-size:clamp(38px, 6vw, 56px);
  line-height:1.04;
  letter-spacing:-.025em;
  max-width:760px;
  text-wrap:balance;
}

/* =========================================================================
   Tastaturbedienung sichtbar machen
   Bisher gab es im ganzen Theme keinen einzigen Fokus-Stil, dafür 14×
   „outline: none" in den Formularen — wer ohne Maus bedient, sah nicht,
   wo er sich befindet. Bei dieser Zielgruppe ist das keine Kleinigkeit.
   ========================================================================= */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:3px solid var(--purple);
  outline-offset:3px;
  border-radius:4px;
}
/* Auf dunklem Grund (Hero, Farbbänder) braucht der Ring hellen Kontrast */
.pmh-hero :focus-visible,
.pmh-surface--brand :focus-visible{
  outline-color:#ffffff;
}

/* Bei geöffnetem Mobilmenü darf die Seite dahinter nicht mitscrollen.
   Das JS setzt die Klasse bereits (assets/js/main.js) — die Regel fehlte. */
body.pmh-nav-open{overflow:hidden}

/* =========================================================================
   Raster, die auf schmalen Fenstern nie umgebrochen sind
   Die alten Regeln zielten auf die kompakte Schreibweise
   (grid-template-columns:repeat(3,1fr)); das Markup schreibt sie aber mit
   Leerzeichen. Dadurch griff keine einzige — Footer und die Vierer-Raster
   blieben bis zum Handy vierspaltig gequetscht.
   ========================================================================= */
@media (max-width:980px){
  .pmh-grid-4,
  main [style*="repeat(4, 1fr)"]{grid-template-columns:1fr 1fr !important}
  .site-footer-grid{grid-template-columns:1fr 1fr !important}
}
@media (max-width:640px){
  .pmh-grid-4,
  main [style*="repeat(4, 1fr)"]{grid-template-columns:1fr !important}
  .site-footer-grid{grid-template-columns:1fr !important; gap:32px !important}
}

/* =========================================================================
   FUNDAMENT — ab hier liegt jeder wiederkehrende Wert genau einmal.
   Alle Zahlen sind die im Bestand gezählten Mehrheitswerte, keine
   Neuerfindung. Solange kein Template die Klassen benutzt, ändert dieser
   Block nichts.
   ========================================================================= */
:root{
  --font-display:'Schibsted Grotesk', system-ui, sans-serif;
  --font-text:'Hanken Grotesk', system-ui, sans-serif;

  --green-bright:#a7e06a;   /* heller Akzent auf dunklem Grund (7× hart codiert) */
  --star:#f4a623;           /* Bewertungssterne (9× als rgb(244,166,35)) */
  --on-dark:#ffffff;
  --error-ink:#b3261e; --error-bg:#fff3f2; --error-line:#f2b8b5;

  --r-pill:999px; --r-field:14px; --r-card:24px; --r-tile:30px; --r-band:36px;

  --shadow-card: 0 8px 28px rgba(40,20,48,.06);   /* 39× im Bestand */
  --shadow-lift: 0 14px 40px rgba(40,20,48,.12);
  --shadow-media:0 16px 44px rgba(40,20,48,.13);
  --shadow-photo:0 6px 18px rgba(40,20,48,.18);
  --shadow-deep: 0 30px 70px rgba(40,20,48,.23);

  --sp-tight:40px; --sp-sm:60px; --sp-md:100px; --sp-lg:120px;
  --gap-grid:18px; --gutter:38px; --gutter-s:20px;
}

/* --- Typografie-Stufen --------------------------------------------------- */
.pmh-h1--xl{                                  /* Startseite, Video-Hero */
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(42px,7vw,76px); line-height:.98; letter-spacing:-.03em;
  max-width:840px; text-wrap:balance; text-shadow:0 4px 40px rgba(20,8,28,.35);
}
.pmh-hero-media h1{                           /* Standortseite, Bild-Hero */
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(38px,6vw,56px); line-height:1.04; letter-spacing:-.025em;
  max-width:760px; text-wrap:balance; text-shadow:0 4px 30px rgba(20,8,28,.30);
}
.pmh-h2{                                      /* ersetzt 12 Größen 36–54px */
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(30px,4.2vw,44px); line-height:1.02; letter-spacing:-.03em;
  text-wrap:balance;
}
.pmh-h2--xl{font-size:clamp(34px,5vw,50px)}   /* nur Startseite */
.pmh-h2--cta{                                 /* Abschluss-Band, bewusst 900 */
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(34px,5.2vw,56px); line-height:.95; letter-spacing:-.04em;
  text-wrap:balance;
}
.pmh-card__title{
  font-family:var(--font-display); font-weight:700;
  font-size:20px; line-height:1.2; letter-spacing:-.02em;
}
.pmh-card__title--lg{font-size:24px}
.pmh-hero__lede{font-size:20px; line-height:1.5; opacity:.94; max-width:520px; margin-top:22px}
.pmh-lead{font-size:17.5px; line-height:1.6; color:var(--muted); max-width:440px}
.pmh-text{font-size:15px; line-height:1.55; color:var(--muted)}
.pmh-text--lg{font-size:16.5px; line-height:1.6}

/* --- Flächen ------------------------------------------------------------- */
.pmh-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-card); padding:28px; box-shadow:var(--shadow-card);
}
.pmh-card--lg{border-radius:var(--r-tile); box-shadow:var(--shadow-media)}
.pmh-card--float{box-shadow:var(--shadow-lift)}

.pmh-surface--brand{
  background:linear-gradient(150deg,#7f2e88,#7d765b);
  background:linear-gradient(150deg,var(--purple),color-mix(in oklab,var(--purple),var(--green) 52%));
  color:var(--on-dark);
}

/* --- Bausteine ----------------------------------------------------------- */
.pmh-btn--md{font-size:16px; padding:15px 28px; gap:9px; box-shadow:none}
.pmh-btn--sm{font-size:15px; padding:13px 22px; gap:8px; box-shadow:none}
.pmh-btn--purple{background:var(--purple); color:var(--on-dark)}

/* Absende-Knopf: erbt die Schrift NICHT von allein — das war der Grund,
   warum drei der vier Formulare in der System-Schrift rendern. */
.pmh-form-submit{
  font-family:var(--font-text); font-weight:700; font-size:17px;
  background:var(--green); color:var(--cta-ink);
  padding:16px; border:none; border-radius:var(--r-field); cursor:pointer;
  width:100%;
}
.pmh-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; color:var(--ink);
  background:var(--surface); border:1px solid var(--line);
  padding:8px 15px; border-radius:var(--r-pill);
}
.pmh-icon{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--green-soft); color:var(--green-deep);
  font-size:22px; margin-bottom:16px; flex:0 0 auto;
}
.pmh-icon--num{border-radius:14px; font-family:var(--font-display); font-weight:800; font-size:20px}

/* =========================================================================
   Hero-Bildfolge auf der Startseite
   Fünf Bilder lösen sich ab: 7 s sichtbar, 1,2 s Überblendung, dazu ein sehr
   langsamer Zoom (Ken Burns), abwechselnd hinein und heraus — damit es atmet
   statt zu pulsieren. Reines CSS, damit die Bilder auch ohne JavaScript laufen.
   Gesamtlauf: 5 × 7 s = 35 s.
   ========================================================================= */
.pmh-slides{position:absolute; inset:0; overflow:hidden; z-index:0}
.pmh-slides picture,
.pmh-slides img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.pmh-slides picture{opacity:0; animation:pmhFade 35s linear infinite}
.pmh-slides img{transform-origin:center; animation:pmhZoomIn 35s ease-in-out infinite}
/* gegenläufiger Zoom bei jedem zweiten Bild */
.pmh-slides picture:nth-child(2n) img{animation-name:pmhZoomOut}

.pmh-slides picture:nth-child(1),.pmh-slides picture:nth-child(1) img{animation-delay:0s}
.pmh-slides picture:nth-child(2),.pmh-slides picture:nth-child(2) img{animation-delay:7s}
.pmh-slides picture:nth-child(3),.pmh-slides picture:nth-child(3) img{animation-delay:14s}
.pmh-slides picture:nth-child(4),.pmh-slides picture:nth-child(4) img{animation-delay:21s}
.pmh-slides picture:nth-child(5),.pmh-slides picture:nth-child(5) img{animation-delay:28s}

/* 0–1,2 s einblenden · bis 7 s stehen · 7–8,2 s ausblenden · Rest unsichtbar */
@keyframes pmhFade{
  0%{opacity:0} 3.4%{opacity:1} 20%{opacity:1} 23.4%{opacity:0} 100%{opacity:0}
}
@keyframes pmhZoomIn { 0%{transform:scale(1)}    23.4%{transform:scale(1.06)} 100%{transform:scale(1.06)} }
@keyframes pmhZoomOut{ 0%{transform:scale(1.06)} 23.4%{transform:scale(1)}    100%{transform:scale(1)} }

/* Wer „Bewegung reduzieren" eingestellt hat, sieht nur das erste Bild — ruhig und scharf. */
@media (prefers-reduced-motion: reduce){
  .pmh-slides picture{animation:none; opacity:0}
  .pmh-slides picture:nth-child(1){opacity:1}
  .pmh-slides img{animation:none; transform:none}
}

/* =========================================================================
   Karte der Postleitzahlgebiete (Ambulante Dienste)
   Löst die schematische Wabendarstellung ab: die Umrisse sind maßstabsgetreu
   (Quelle OpenStreetMap, ODbL). Farbe = Versorgungsbereich.
   ========================================================================= */
.pmh-karte{position:relative; width:100%; max-width:760px; margin:0 auto}
.pmh-karte__flaeche{
  stroke:#fff; stroke-width:2; cursor:pointer;
  opacity:.92;
  transform-box:fill-box; transform-origin:center;
  transition:opacity .18s ease, filter .18s ease, transform .18s cubic-bezier(.2,.7,.2,1), stroke-width .18s ease;
}
/* Beim Überfahren hebt sich das Gebiet deutlich heraus: heller, größer, mit kräftigerem Rand */
.pmh-karte__flaeche:hover,
.pmh-karte__flaeche:focus-visible{
  opacity:1;
  filter:brightness(1.18) saturate(1.15) drop-shadow(0 6px 14px rgba(40,20,48,.28));
  transform:scale(1.045);
  stroke-width:3.5;
}
.pmh-karte__flaeche:focus-visible{outline:3px solid var(--purple); outline-offset:2px}
.pmh-karte__plz{
  font-family:var(--font-display); font-weight:800; font-size:19px;
  fill:#12240a; letter-spacing:-.01em;
}
@media (max-width:760px){ .pmh-karte__plz{font-size:24px} }