/* 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}
/* Sanftes Scrollen nur für die, die Bewegung nicht reduziert haben —
   sonst erzwingt der Sprung zum Anker genau die Animation, die der
   Besucher im System abbestellt hat. */
@media (prefers-reduced-motion: no-preference){
  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;}
  }

/* Das aufgeklappte Kopfzeilen-Menü ist durch das Panel unten ersetzt. */

/* ===== 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 (Durchwahl fürs Gebiet) --- */
.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;}
/* padding:0 ist nicht kosmetisch: GeneratePress gibt jedem button 10px 20px,
   und mit border-box blieb dem 40px-Knopf rechnerisch keine Innenbreite —
   das Kreuz rutschte aus der Mitte des Hover-Kreises. */
.pmh-modal__x{position:absolute;top:12px;right:12px;width:40px;height:40px;padding:0;display:grid;place-items:center;background:none;border:none;border-radius:50%;line-height:0;cursor:pointer;color:var(--muted);transition:background .15s,color .15s;}
.pmh-modal__x svg{display:block;}
/* Runder, ruhiger Hover statt der eckigen grauen Kachel (Kundenwunsch 30.08.2026). */
.pmh-modal__x:hover,.pmh-modal__x:focus-visible{background:rgba(40,18,52,.08);color:var(--ink);}
.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;}
/* Die Rufnummer steht als Kontaktangabe im Kasten, nicht als dritter Knopf:
   erst die Zeile, welche Nummer das ist, darunter die Nummer selbst. Sie ist
   trotzdem ein tel:-Link — auf dem Handy wählt man die Nummer, die man sieht. */
/* Ohne Kasten: Label klein darüber, die Nummer groß und selbst der Anrufweg.
   Der graue Rahmen mit Padding wirkte wie ein Fremdkörper (30.08.2026). */
.pmh-modal__tel{display:flex;flex-direction:column;gap:2px;margin-bottom:22px;}
.pmh-modal__tel[hidden]{display:none;}
.pmh-modal__tel-label{color:var(--muted);font-size:13px;}
.pmh-modal__tel-label{letter-spacing:.04em;text-transform:uppercase;font-weight:700;font-size:11.5px;}
.pmh-modal__tel-nr{font-family:'Schibsted Grotesk',sans-serif;font-weight:800;font-size:30px;letter-spacing:-.015em;color:var(--green-deep);text-decoration:none;}
.pmh-modal__tel-nr:hover{text-decoration:underline;text-underline-offset:4px;}
.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;}

/* ==================================================================
   Kopfzeile am Handy

   Das Logo war auf 32px gestaucht, damit auf schmalen Bildschirmen
   nichts überläuft — mit 5px/9px Innenabstand obendrein. Das Ergebnis
   war eine hohe Leiste mit einer kleinen Marke darin: viel Luft, wenig
   Wiedererkennung. Umgekehrt ist es richtig: wenig Innenabstand, große
   Marke. Das Herz ist das, woran die Leute die Firma erkennen.

   Die Werte stehen als Variablen, weil das Menü-Panel dieselbe Geometrie
   braucht — der Schließen-Knopf muss exakt dort sitzen, wo eben noch der
   Menü-Knopf war (siehe unten). Zwei getrennte Zahlensätze wären nach
   der ersten Änderung auseinandergelaufen.
   ================================================================== */
:root{
  --kopf-aussen: 10px;   /* Abstand der Pille zum Bildschirmrand */
  --kopf-oben:   18px;   /* Abstand nach oben (= .pmh-kopf padding-top) */
  --kopf-innen:  10px;   /* Innenabstand der Pille rechts */
  --kopf-knopf:  44px;   /* Kantenlänge von Menü- und Schließen-Knopf */
  --kopf-logo:   56px;   /* Logohöhe am Handy */
  /* Höhe der Pille: Logo + Innenabstand oben und unten + die beiden
     Hairlines des Rahmens. Daraus errechnet sich, wie weit der
     Schließen-Knopf von oben sitzen muss. */
  --kopf-pille:  calc(var(--kopf-logo) + 2 * var(--kopf-innen) + 2px);
}

@media (max-width:760px){
  .pmh-site > header > div{
    padding-left:var(--kopf-aussen) !important;
    padding-right:var(--kopf-aussen) !important;
  }
  .pmh-site > header > div > div{
    padding:var(--kopf-innen) var(--kopf-innen) var(--kopf-innen) 16px !important;
    gap:12px !important;
  }
  /* Doppelt so groß wie vorher. width:auto hält das Seitenverhältnis. */
  .pmh-site > header img{
    height:56px !important;width:auto !important;padding:0 !important;
  }
}

/* Sehr schmale Geräte: etwas kleiner, sonst drängt das Logo den Knopf. */
@media (max-width:360px){
  .pmh-site > header img{height:48px !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;}
}


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

/* Knopf-System — EINE Quelle für alle Knöpfe.

   Drei Stufen, mehr braucht die Seite nicht:
     .pmh-btn            primär, grün — die Haupthandlung eines Abschnitts
     .pmh-btn--white     sekundär, weiß — daneben, auf farbigem Grund
     .pmh-link           tertiär, Textlink mit Unterstrich — Weiterführung

   Größen: --md und --sm. Sonst nichts.

   Wichtig sind die Zustände: Vorher gab es KEINE :hover-Regel im Theme.
   Deshalb griffen die Regeln des Eltern-Themes, und derselbe Knopf wurde
   auf einer Seite grau-weiß und auf der nächsten gar nicht. Die doppelte
   Klasse (.pmh-btn.pmh-btn) hebt die Spezifität über fremde Ein-Klassen-
   Regeln, ohne dass irgendwo !important nötig wird. */
.pmh-btn{
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--green); color:var(--cta-ink);
  font-family:var(--font-text); font-weight:700; font-size:17px; line-height:1.2;
  padding:17px 30px; border-radius:var(--r-pill);
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}
.pmh-btn.pmh-btn:hover{ background:var(--green-deep); color:#fff; }
.pmh-btn.pmh-btn:focus-visible{
  background:var(--green-deep); color:#fff;
  outline:2px solid var(--purple); outline-offset:3px;
}

.pmh-btn--white{
  background:#fff; color:var(--purple); border-color:rgba(127,46,136,.16);
}
/* Der weiße Knopf steht meist auf farbigem Grund — beim Überfahren darf er
   deshalb nicht die Grundfarbe annehmen, sonst verschwindet er. */
.pmh-btn--white.pmh-btn--white:hover{ background:rgba(255,255,255,.82); color:var(--purple); }
.pmh-btn--white.pmh-btn--white:focus-visible{
  background:#fff; color:var(--purple);
  outline:2px solid #fff; outline-offset:3px;
}

/* =========================================================================
   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. */

/* =========================================================================
   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 */
  /* Stand auf 900. Dieser eine Schnitt kostete 46 KB auf jeder Seite —
     für 271 Zeichen auf der ganzen Website. 800 ist ohnehin geladen
     und in der Wirkung kaum zu unterscheiden. */
  font-family:var(--font-display); font-weight:800;
  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 26px; gap:9px}
.pmh-btn--sm{font-size:15px; padding:12px 20px; gap:8px}
.pmh-btn--purple{background:var(--purple); color:#fff; border-color:transparent}
.pmh-btn--purple.pmh-btn--purple:hover{background:#682373; color:#fff}
.pmh-btn--purple.pmh-btn--purple:focus-visible{
  background:#682373; color:#fff; outline:2px solid var(--green); outline-offset:3px;
}

/* Tertiär: der Textlink mit Unterstrich. Lag bisher siebenmal in drei
   Maßvarianten inline in den Templates — ohne Klasse, ohne Zustand. */
.pmh-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-text); font-weight:700; font-size:16px;
  color:var(--ink); text-decoration:none;
  border-bottom:2px solid var(--green); padding-bottom:4px;
  transition:color .16s ease, border-color .16s ease;
}
.pmh-link:hover{ color:var(--green-deep); border-color:var(--green-deep); }
.pmh-link:focus-visible{ outline:2px solid var(--purple); outline-offset:3px; border-radius:2px; }
.pmh-link--on-dark{ color:#fff; border-color:rgba(255,255,255,.55); }
.pmh-link--on-dark:hover{ color:#fff; border-color:#fff; }

/* 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; line-height:1.2;
  background:var(--green); color:var(--cta-ink);
  padding:17px; border:1px solid transparent; border-radius:var(--r-pill); cursor:pointer;
  width:100%;
  transition:background-color .16s ease, color .16s ease;
}
.pmh-form-submit:hover{ background:var(--green-deep); color:#fff; }
.pmh-form-submit:focus-visible{
  background:var(--green-deep); color:#fff; outline:2px solid #fff; outline-offset:3px;
}
.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;
  /* Je Gebiet gesetzt (--plz-groesse): kleine Flaechen bekommen kleinere
     Zahlen, sonst ragen sie ins Nachbargebiet. 19px gilt, wo nichts steht. */
  font-size:var(--plz-groesse,19px);
  fill:#fff; letter-spacing:-.01em;
  paint-order:stroke; stroke:rgba(26,10,32,.30); stroke-width:3px; stroke-linejoin:round;
}
/* Der Ortsname steht bewusst leiser als die Zahl: leichtere Schrift, kleiner,
   etwas zurückgenommen. Die Größe kommt je Fläche aus den Daten. */
.pmh-karte__ort{
  font-family:var(--font-text); font-weight:600; fill:#fff; fill-opacity:.88;
  letter-spacing:.01em;
  paint-order:stroke; stroke:rgba(26,10,32,.28); stroke-width:2.5px; stroke-linejoin:round;
}
@media (max-width:760px){
  .pmh-karte__plz{font-size:calc(var(--plz-groesse,19px) * 1.26)}
  .pmh-karte__ort{font-size:13px !important}
}

/* =========================================================================
   Fester Kontakt-Anker am rechten Rand (footer.php)
   Wer eine lange Seite gelesen hat, soll den Weg zur Kontaktaufnahme nicht
   suchen müssen. Am Desktop eine schmale Lasche rechts mittig, auf dem
   Handy ein runder Knopf unten rechts — dort, wo der Daumen ohnehin liegt.
   z-index bewusst zwischen Inhalt/Mobilmenü (60) und Modalen (1000).
   ========================================================================= */
/* Die Lasche am rechten Rand war mit 15px Schrift und 13px Innenrand so
   zurückhaltend, dass sie im Blick untergeht — dabei ist sie auf jeder
   Seite der kürzeste Weg zur Anfrage. Jetzt 17px und mehr Raum. */
.pmh-sticky-cta{
  position:fixed; right:0; top:50%; transform:translateY(-50%);
  z-index:90;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  background:var(--purple); color:#fff; text-decoration:none;
  padding:26px 16px; border-radius:18px 0 0 18px;
  font-family:var(--font-text); font-weight:700; font-size:17px; letter-spacing:.07em;
  box-shadow:0 10px 30px rgba(40,20,48,.25);
  transition:background-color .16s ease;
}
/* Die Schrift läuft von oben nach unten — die Lasche bleibt so schmal,
   dass sie keinen Inhalt verdeckt. */
.pmh-sticky-cta__txt{writing-mode:vertical-rl}
.pmh-sticky-cta svg{width:23px; height:23px; flex:none}
.pmh-sticky-cta:hover{background:#682373; color:#fff}
/* Der globale lila Fokusring wäre auf der lila Lasche unsichtbar. */
.pmh-sticky-cta:focus-visible{
  background:#682373; color:#fff;
  outline:3px solid var(--green); outline-offset:3px;
}
@media (max-width:760px){
  .pmh-sticky-cta{
    top:auto; right:16px; bottom:16px; transform:none;
    width:62px; height:62px; padding:0; border-radius:50%;
    justify-content:center;
  }
  .pmh-sticky-cta__txt{display:none}
  .pmh-sticky-cta svg{width:24px; height:24px}
}

/* ------------------------------------------------------------------
   Mobil: größere Lesetexte (Tom, 30.08.2026 — „Schriften viel zu klein“).
   Die Größen oben sind für den Desktop gesetzt; auf dem Handy sitzt das
   Auge näher an kleinerem Glas, trotzdem wirken 15px dort zierlicher als
   am Monitor. Deshalb hier gezielt die Leseklassen angehoben — nicht die
   Überschriften, die skalieren über clamp() schon mit.
   ------------------------------------------------------------------ */
@media (max-width: 760px){
  .pmh-text{font-size:16.5px; line-height:1.6}
  .pmh-text--lg{font-size:17.5px}
  .pmh-lead{font-size:18px; line-height:1.62}
  .pmh-hero__lede{font-size:19px}
  .pmh-prose-body{font-size:17.5px}
  .pmh-card__title{font-size:19px}
  .pmh-eyebrow{font-size:13px}
  /* Kleingedrucktes bleibt lesbar, statt unter 13px zu fallen */
  .pmh-chip, .pmh-karte + p{font-size:14px}
}


/* ==================================================================
   Mobiles Menü
   Fährt von rechts ein, im Markenverlauf wie das Seitenende. Die
   Einträge stehen linksbündig und mit Trennlinien untereinander —
   mittig gesetzte Links in einem schwebenden Kästchen sahen unfertig
   aus (Kundenwunsch 31.08.2026). Unten die beiden Handlungen, die
   Besucher mobil am ehesten brauchen: beraten lassen und anrufen.
   ================================================================== */
/* Solange das Panel nicht offen ist, nimmt es keine Berührungen an.

   Ohne diese Zeile lag es nach dem Schließen noch 320 Millisekunden lang
   über der Kopfzeile und fing jeden Tipp ab — gemessen: 50ms nach dem
   Schließen traf man den Panel-Kopf, nach 150ms das Panel, nach 300ms
   die Hintergrundebene, und erst nach 400ms den Menü-Knopf. Wer zweimal
   kurz hintereinander tippte, hatte das Gefühl, der Knopf reagiere mal
   und mal nicht. Er reagierte nie — der Tipp kam gar nicht an. */
.pmh-menue{position:fixed;inset:0;z-index:120;pointer-events:none;}
.pmh-menue.is-auf{pointer-events:auto;}
.pmh-menue[hidden]{display:none;}
.pmh-menue__bd{position:absolute;inset:0;background:rgba(20,8,28,.5);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .28s ease;}
.pmh-menue.is-auf .pmh-menue__bd{opacity:1;}
.pmh-menue__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(88vw,420px);
  /* Reines Lila mit nur einem Hauch Grün ganz unten. Ein voller Grün-Anteil
     ergab in der Mitte dieselbe schlammige Mischzone wie früher auf der Karte. */
  background:linear-gradient(168deg,#8c3396 0%,#7f2e88 38%,#5f2166 100%);
  color:#fff;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 18px) 26px calc(env(safe-area-inset-bottom,0px) + 24px);
  box-shadow:-20px 0 60px rgba(20,8,28,.4);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.22,.61,.36,1);
  overflow-y:auto;overscroll-behavior:contain;
}
.pmh-menue.is-auf .pmh-menue__panel{transform:translateX(0);}
@media (prefers-reduced-motion:reduce){
  .pmh-menue__bd,.pmh-menue__panel{transition:none;}
}

.pmh-menue__kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:22px;margin-bottom:6px;}
.pmh-menue__logo{height:40px;width:auto;display:block;}
/* !important, weil GeneratePress jedem button Hintergrund und Farbe gibt —
   ohne das saß hier ein dunkelgrauer Kreis auf dem lila Panel. */
/* Der Schließen-Knopf sitzt exakt dort, wo eben noch der Menü-Knopf war.

   Vorher lag er 13px höher: Er saß im Kopf des Panels und richtete sich
   nach dessen Innenabstand, der Menü-Knopf dagegen mittig in der Pille.
   Beim Auf- und Zuklappen sprang er unter dem Finger weg — wer zweimal
   hintereinander tippt, trifft daneben.

   Jetzt wird er am Handy absolut gesetzt, aus denselben Variablen wie
   die Pille: seitlich Außen- plus Innenabstand, senkrecht mittig zur
   Pillenhöhe. Ändert sich die Kopfzeile, wandert er mit. */
.pmh-menue__x{width:var(--kopf-knopf);height:var(--kopf-knopf);padding:0;flex:none;
  display:grid;place-items:center;
  background:rgba(255,255,255,.16) !important;border:none;border-radius:50%;color:#fff !important;
  cursor:pointer;line-height:0;transition:background .15s;}

@media (max-width:760px){
  .pmh-menue__kopf{
    position:relative;min-height:var(--kopf-pille);
    padding-bottom:18px;margin-bottom:4px;
  }
  .pmh-menue__logo{height:var(--kopf-logo);}
  .pmh-menue__x{
    position:fixed;
    top:calc(var(--kopf-oben) + (var(--kopf-pille) - var(--kopf-knopf)) / 2);
    /* +1px für die Hairline des Pillenrahmens, innerhalb derer der
       Menü-Knopf sitzt — ohne sie läge der Schließen-Knopf um genau
       diesen Pixel daneben. */
    right:calc(var(--kopf-aussen) + var(--kopf-innen) + 1px);
    z-index:2;
  }
}
.pmh-menue__x:hover,.pmh-menue__x:focus-visible{background:rgba(255,255,255,.3) !important;}
.pmh-menue__x svg{display:block;}

/* Die Links kommen aus pmh_primary_menu() als flache <a> mit Inline-Farbe —
   deshalb hier mit !important auf Weiß gezogen. */
.pmh-menue__links{display:flex;flex-direction:column;}
.pmh-menue__links a{
  display:block;padding:17px 2px;font-family:var(--font-display),sans-serif;
  font-size:21px;font-weight:700;letter-spacing:-.015em;
  color:#fff !important;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.pmh-menue__links a:first-child{border-top:1px solid rgba(255,255,255,.18);}
.pmh-menue__links a:hover,.pmh-menue__links a:focus-visible{color:var(--green-bright) !important;}
.pmh-menue__links a[aria-current="page"]{color:var(--green-bright) !important;}

.pmh-menue__fuss{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;
  align-items:flex-start;gap:14px;}
.pmh-menue__cta{display:inline-block;background:var(--green);color:var(--cta-ink);
  font-weight:700;font-size:16px;padding:14px 24px;border-radius:999px;text-decoration:none;}
.pmh-menue__cta:hover,.pmh-menue__cta:focus-visible{filter:brightness(1.06);}
.pmh-menue__tel{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;
  font-family:var(--font-display),sans-serif;font-weight:800;font-size:22px;letter-spacing:-.01em;}
.pmh-menue__tel:hover,.pmh-menue__tel:focus-visible{text-decoration:underline;text-underline-offset:4px;}
.pmh-menue__zeiten{font-size:14px;opacity:.8;}

body.pmh-nav-open{overflow:hidden;}

/* Kopfzeilen-Knöpfe: gleiche Form für Telefon und Burger. Der Burger trug
   seine Maße inline und hatte weder Hover noch Fokusrahmen. */
.burger-btn{display:none;place-items:center;width:44px;height:44px;padding:0;
  border:none;border-radius:50%;background:rgba(255,255,255,.16) !important;
  color:var(--on-dark) !important;cursor:pointer;line-height:0;transition:background .15s;}
.burger-btn:hover,.burger-btn:focus-visible{background:rgba(255,255,255,.3) !important;}
.burger-btn svg{display:block;}


/* ==================================================================
   Kopfzeile: bleibt stehen, weicht beim Herunterscrollen
   Vorher lag sie fest über dem Hero — wer weit unten war, musste zum
   Menü ganz nach oben zurück. Jetzt fährt sie beim Herunterscrollen
   hinaus und bei der kleinsten Aufwärtsbewegung wieder herein.
   ================================================================== */
.pmh-kopf{position:fixed;top:0;left:0;right:0;z-index:100;padding-top:18px;
  transition:transform .28s ease, padding-top .2s ease;will-change:transform;}
body.pmh-kopf-weg .pmh-kopf{transform:translateY(calc(-100% - 12px));}
/* Beim Scrollen bleibt die Optik dieselbe — nur dichter.
   Zuerst wurde daraus ein weißer Balken über die volle Breite, mit
   dunkel eingefärbtem Logo: Das sah unfertig aus und wechselte beim
   Erreichen des Seitenanfangs sichtbar zurück (Kundenwunsch 31.08.2026).
   Jetzt behält die Leiste ihre Pillenform, das Logo bleibt weiß; über
   hellem Inhalt wird der Glasgrund nur kräftiger, damit alles lesbar
   bleibt. Kein Formwechsel, kein Farbsprung. */
body.pmh-kopf-fest .pmh-kopf{padding-top:12px;}
/* Über hellem Inhalt braucht die weiße Schrift Grund unter den Füßen.
   Mit 0.9 Deckkraft war die Leiste dabei praktisch undurchsichtig — vom
   Glaseindruck des Seitenanfangs (0.34) blieb nichts übrig, und der
   Wechsel beim Scrollen fiel als dunkler Kasten auf.

   Jetzt 0.66 und dafür kräftigere Unschärfe: Das ist der übliche Weg
   beim Milchglas — weniger Farbe, mehr Streuung. Nachgerechnet bleibt
   weiße Schrift auf diesem Grund bei 5,4:1 Kontrast und damit deutlich
   über den geforderten 4,5:1, selbst wenn darunter reines Weiß liegt. */
body.pmh-kopf-fest .pmh-kopf > div > div{
  background:rgba(38,16,48,.66) !important;
  backdrop-filter:blur(26px) saturate(1.5) !important;
  -webkit-backdrop-filter:blur(26px) saturate(1.5) !important;
  border-color:rgba(255,255,255,.22) !important;
  box-shadow:0 8px 26px rgba(20,8,28,.2) !important;
}


/* ==================================================================
   Untermenü „Wohnen" — die drei Häuser
   ================================================================== */
.pmh-nav__gruppe{position:relative;display:inline-flex;align-items:center;}
.pmh-nav__gruppe > a{display:inline-flex;align-items:center;gap:5px;}
.pmh-nav__pfeil{opacity:.75;transition:transform .18s ease;}
.pmh-nav__gruppe:hover .pmh-nav__pfeil,
.pmh-nav__gruppe:focus-within .pmh-nav__pfeil{transform:rotate(180deg);}

/* Am Rechner: klappt beim Überfahren auf. focus-within nimmt die Tastatur mit —
   wer sich durchtabbt, sieht dieselbe Liste. Die Brücke aus padding-top hält
   die Maus auf dem Weg nach unten in der Gruppe, sonst schließt sie zu früh. */
@media (min-width:961px){
  .pmh-nav__unter{
    position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(4px);
    min-width:270px;padding:8px;margin-top:14px;
    background:#fff;border-radius:18px;border:1px solid var(--line);
    box-shadow:0 20px 50px rgba(20,8,28,.16);
    display:flex;flex-direction:column;gap:2px;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:70;
  }
  .pmh-nav__gruppe::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px;}
  .pmh-nav__gruppe:hover .pmh-nav__unter,
  .pmh-nav__gruppe:focus-within .pmh-nav__unter{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
  }
  .pmh-nav__unter a{
    display:block;padding:11px 14px;border-radius:12px;
    font-size:14.5px;font-weight:600;line-height:1.35;
    color:var(--ink) !important;white-space:normal;
  }
  .pmh-nav__unter a:hover,.pmh-nav__unter a:focus-visible{background:var(--green-soft);color:var(--green-deep) !important;}
  .pmh-nav__unter a[aria-current="page"]{color:var(--green-deep) !important;}
}
@media (prefers-reduced-motion:reduce){
  .pmh-nav__unter,.pmh-nav__pfeil{transition:none;}
}

/* Im mobilen Panel steht „Wohnen" auf einer Stufe mit allem anderen. Die
   drei Häuser liegen hinter einem Pfeil daneben — zuerst waren sie immer
   ausgeklappt, dadurch stach der Punkt heraus und wirkte ausgewählt
   (Kundenwunsch 31.08.2026). Der Pfeil ist eine eigene Schaltfläche: Ein
   Tipp auf „Wohnen" führt weiter auf die Seite, ein Tipp auf den Pfeil
   klappt die Häuser auf. */
.pmh-menue__links .pmh-nav__gruppe{display:block;}
.pmh-menue__links .pmh-nav__gruppe > a{
  border-bottom:1px solid rgba(255,255,255,.18);
  padding-right:52px;  /* Platz für den Pfeil, der darüber sitzt */
}
.pmh-menue__links .pmh-nav__pfeil{display:none;}

.pmh-menue__auf{
  position:absolute;right:-6px;top:8px;width:44px;height:44px;padding:0;
  display:grid;place-items:center;background:rgba(255,255,255,.12) !important;
  border:none;border-radius:50%;color:#fff !important;cursor:pointer;line-height:0;
  transition:background .15s, transform .22s ease;
}
.pmh-menue__auf:hover,.pmh-menue__auf:focus-visible{background:rgba(255,255,255,.24) !important;}
.pmh-menue__auf svg{display:block;}
.pmh-menue__gruppe{position:relative;}
.pmh-menue__gruppe.ist-auf .pmh-menue__auf{transform:rotate(180deg);}

/* Zu: Höhe 0 und unsichtbar. Auf: die tatsächliche Höhe, die das Skript
   misst — mit „auto" gäbe es keine Bewegung. */
.pmh-menue__links .pmh-nav__unter{
  display:flex;flex-direction:column;overflow:hidden;
  max-height:0;opacity:0;
  transition:max-height .28s ease, opacity .2s ease, padding .28s ease;
  padding:0 0 0 4px;
}
.pmh-menue__gruppe.ist-auf .pmh-nav__unter{opacity:1;padding:6px 0 12px 4px;}
.pmh-menue__links .pmh-nav__unter a{
  padding:11px 2px 11px 20px;font-size:16px;font-weight:600;
  border:none !important;opacity:.92;position:relative;
}
.pmh-menue__links .pmh-nav__unter a::before{
  content:"";position:absolute;left:2px;top:50%;width:9px;height:1px;
  background:rgba(255,255,255,.55);
}
@media (prefers-reduced-motion:reduce){
  .pmh-menue__links .pmh-nav__unter,.pmh-menue__auf{transition:none;}
}

/* Die Marke über der Hero-Überschrift („Ambulante Pflege & Wohngemeinschaften ·
   Chemnitz & Limbach-Oberfrohna") entfällt am Handy. Sie bricht dort auf zwei
   Zeilen und drängt sich zwischen Bild und Überschrift, ohne etwas zu sagen,
   was nicht direkt darunter steht. !important, weil das Element seine
   Ausrichtung als inline-Style mitbringt. */
@media (max-width:760px){
  .pmh-hero-marke{ display:none !important; }
}

/* ==================================================================
   Leistungskacheln auf der Startseite — enger am Handy

   Die sechs Kacheln (Nummer, Titel mit Beschreibung, Pfeil) tragen ihre
   Maße inline: 24px zwischen den drei Teilen, 28px oben und unten. Am
   Rechner nebeneinander ist das richtig — untereinander am Handy wird
   daraus eine Kachel von 274px Höhe, in der die Nummer weit über dem
   Titel und der Pfeil weit darunter schwebt. Sechsmal hintereinander
   ergibt das viel Scrollweg für wenig Inhalt.

   !important, weil die Werte im Markup stehen.
   ================================================================== */
@media (max-width:760px){
  .scp0{
    gap:11px !important;
    padding:20px 8px !important;
  }
}

/* ==================================================================
   Angemeldet: Platz für die WordPress-Leiste

   Die eigene Kopfzeile steht fest am oberen Rand — und lag damit unter
   der Leiste von WordPress, die angemeldeten Benutzern das Menü zum
   Bearbeiten zeigt. Sichtbar blieb sie zwar (sie liegt weiter oben in
   der Stapelfolge), aber die Pille verschwand halb darunter und der Weg
   ins Backend war verstellt.

   WordPress setzt dafür die Klasse admin-bar auf den body. Die Leiste
   ist am Handy 46px hoch und ab 783px Fensterbreite 32px — und ab dort
   scrollt sie mit, statt stehen zu bleiben. Beides ist hier
   nachgezogen, für die Kopfzeile wie für das Menü-Panel.
   ================================================================== */
body.admin-bar .pmh-kopf{top:46px;}
body.admin-bar .pmh-menue{top:46px;}
body.admin-bar .pmh-menue__x{top:calc(46px + var(--kopf-oben) + (var(--kopf-pille) - var(--kopf-knopf)) / 2);}

@media (min-width:783px){
  body.admin-bar .pmh-kopf{top:32px;}
  body.admin-bar .pmh-menue{top:32px;}
}

/* WordPress blendet sein eigenes Logo auf schmalen Bildschirmen aus und
   zeigt nur noch Anpassen, Bearbeiten und Neu. Das Logo ist aber der
   kürzeste Weg zurück in die Verwaltung — deshalb hier wieder sichtbar
   (ausdrücklicher Wunsch, 31.08.2026). */
@media (max-width:782px){
  #wpadminbar #wp-admin-bar-wp-logo{display:block !important;}
  #wpadminbar #wp-admin-bar-wp-logo > .ab-item{padding:0 8px !important;}
  #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon{
    margin-right:0 !important;font-size:22px !important;
  }
}

/* ==================================================================
   Rand auf dem iPhone

   Mit viewport-fit=cover reicht die Seite bis unter Status- und
   Adressleiste. Damit dort kein Inhalt verschwindet, holen wir die
   Sicherheitsabstände über env() zurück — aber als Innenabstand, nicht
   als Rand: Der Grund der Seite läuft weiter durch, es bleibt kein
   weißer Streifen.

   Vorher füllte iOS diese Streifen weiß, weil die Seite dort nicht
   hinreichte und keine Farbe angemeldet war.
   ================================================================== */
html{background:var(--bg);}
body{
  background:var(--bg);
  padding-left:env(safe-area-inset-left,0);
  padding-right:env(safe-area-inset-right,0);
}

/* Die feste Kopfzeile sitzt unter der Statusleiste, nicht darin. */
.pmh-kopf{padding-top:calc(env(safe-area-inset-top,0px) + 18px);}
body.pmh-kopf-fest .pmh-kopf{padding-top:calc(env(safe-area-inset-top,0px) + 12px);}
body.admin-bar .pmh-kopf{top:calc(46px);}

/* Die Kontakt-Lasche und der Fuß bleiben über der Adressleiste. */
@media (max-width:760px){
  .pmh-sticky-cta{bottom:calc(env(safe-area-inset-bottom,0px) + 16px);}
}
.pmh-fuss, footer.pmh-fuss{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 28px);}