/* ============================================================
   Physio Humanitas — Co-located Tenant CSS
   Mix: "Liora" Grundlayout (warm-creme, Salbei, geclippte Ecken,
   Playfair-Italic-Akzente) + "Wellness Nutritionist" Effekte
   (Wort-Reveal, Sticky-Stack-Cards, Film-Korn, filmischer Start).
   Marke: Salbei-Grün als Hauptakzent + Marken-Orange als Highlight.
   CSS-Isolation: alles unter .phh-root (Regel 13).
   ============================================================ */

/* Die Schriften kommen NICHT mehr von Google, sondern selbst gehostet aus
   physio-fonts.ts (Urbanist) und dem Root-Layout (Playfair Display).
   Der fruehere @import an dieser Stelle war doppelt kaputt: er lud die
   Besucher-IP zu Google UND wurde vom Browser verworfen, weil ein @import
   nach anderen Regeln ungueltig ist. Ergebnis war eine Ersatzschrift. */

/* ---------- Typografie: keine Witwen ----------
   Ein einzelnes Wort in der letzten Zeile sieht schlampig aus. Der Browser
   bricht Ueberschriften jetzt ausgeglichen um und vermeidet in Fliesstexten
   Schlusszeilen mit nur einem Wort — automatisch, auf jeder Fensterbreite. */
.phh-root h1, .phh-root h2, .phh-root h3, .phh-root h4,
.phh-root .phh-h2, .phh-root .phh-h3 { text-wrap: balance; }
.phh-root p, .phh-root li, .phh-root .phh-lead { text-wrap: pretty; }
/* Sicherheitsnetz: gebundene Wortgruppen duerfen nie aus dem Kasten laufen */
.phh-root { overflow-wrap: break-word; }

.phh-root {
  /* Warme Liora-Palette */
  --hc-bg: #f7f3ee;
  --hc-bg2: #f1eee8;
  --hc-bg3: #eef2ec;          /* leicht grünstichig */
  --hc-surface: rgba(252, 250, 247, 0.72);
  --hc-surface-strong: rgba(252, 250, 247, 0.9);
  --hc-text: #2f312d;
  --hc-soft: #5f625b;
  --hc-line: #d8d1c7;

  /* Marke: Salbei-Grün (Haupt) + Orange (Highlight) */
  --hc-sage: #8fa08c;
  --hc-sage-dark: #6f7f6d;
  --hc-sage-deep: #4f5d4d;
  --hc-dark-sage: #21271f;    /* dunkle Stack-Section */
  --hc-warm: #d9650f;         /* Marken-Orange (sparsam) */
  --hc-warm-soft: #f0a35e;

  --hc-shadow: 0 24px 60px rgba(32, 28, 23, 0.1);
  --hc-shadow-soft: 0 12px 28px rgba(32, 28, 23, 0.08);

  --clip-14: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  --clip-12: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  --clip-10: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);

  background: var(--hc-bg);
  color: var(--hc-text);
  font-family: 'Urbanist', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip statt hidden: verhindert horizontales Scrollen, OHNE position:sticky zu brechen */
  overflow-x: clip;
  position: relative;
}

.phh-root h1, .phh-root h2, .phh-root h3, .phh-root h4 { margin: 0; color: var(--hc-text); font-weight: 600; letter-spacing: -0.04em; line-height: 0.98; }
.phh-root p { margin: 0; }
.phh-root a { text-decoration: none; color: inherit; }
.phh-root img { max-width: 100%; display: block; }
.phh-root *, .phh-root *::before, .phh-root *::after { box-sizing: border-box; }

/* Playfair-Italic Akzentwort */
.phh-serif { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; letter-spacing: -0.02em; color: var(--hc-sage-deep); }

/* Film-Korn-Overlay */
.phh-noise {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout-Helfer ---------- */
/* Ein Maß für ALLE Sektionen: gleiche Randabstände wie der Hero, damit die ganze
   Seite von oben bis unten links/rechts bündig läuft (Kappe 1840px für Ultrawide) */
.phh-wrap { width: 100%; max-width: 1840px; margin: 0 auto; padding: 0 clamp(20px, 4.5vw, 76px); }
.phh-section { padding: 112px 0; position: relative; }
.phh-section.warm { background: linear-gradient(180deg, #f8faf6 0%, #f2f5f0 100%); }
.phh-section.warm2 { background: linear-gradient(180deg, #eef3ed 0%, #f5f2ec 100%); }
.phh-section.green { background: radial-gradient(circle at top left, rgba(143,160,140,0.08), transparent 24%), linear-gradient(180deg, #eef2ec 0%, #e8ede6 100%); }

/* Dunkelgrüne Sektion (wie Philosophie-Stack).
   Wichtig: helle Karten (.phh-card / .phh-form) behalten dunklen Text —
   daher nur h2 (Sektions-Überschrift) hell, NICHT h3 (steckt in hellen Karten). */
.phh-section.dark { background: linear-gradient(180deg, #2b3429 0%, #21271f 100%); color: #e8ede6; }
.phh-section.dark h2 { color: #f4f7f2; }
.phh-section.dark h2 .phh-serif { color: var(--hc-sage); }
.phh-section.dark .phh-lead { color: rgba(232,237,230,0.90); }
.phh-section.dark .phh-lead strong { color: #fff; }
.phh-section.dark .phh-eyebrow { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: rgba(232,237,230,0.82); }
/* Kontaktdaten (kein helles Karten-Element) hell */
.phh-section.dark .phh-contact-row { color: rgba(232,237,230,0.92); }
.phh-section.dark .phh-contact-row .ck { color: #f4f7f2; }
.phh-section.dark .phh-contact-row a { color: rgba(232,237,230,0.82); }
.phh-section.dark .phh-contact-row .ci { background: rgba(217,101,15,0.16); border-color: rgba(217,101,15,0.36); color: var(--hc-warm-soft); }
/* Stats (Praxis-Sektion) */
.phh-section.dark .phh-stat { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
.phh-section.dark .phh-stat .num { color: var(--hc-sage); }
.phh-section.dark .phh-stat .lbl { color: rgba(232,237,230,0.7); }
.phh-section.dark .phh-btn-primary { background: var(--hc-warm); color: #fff; }
.phh-section.dark .phh-btn-primary:hover { background: #c4570b; }
/* Info-Karte (z. B. Öffnungszeiten) grün-getönt statt hell — Formular bleibt hell */
.phh-section.dark .phh-card { background: rgba(143,160,140,0.12); border-color: rgba(255,255,255,0.12); box-shadow: none; }
.phh-section.dark .phh-card h3 { color: #f4f7f2; }
.phh-section.dark .phh-card h3 svg { color: var(--hc-sage) !important; }
.phh-section.dark .phh-card p { color: rgba(232,237,230,0.88); }
.phh-section.dark .phh-card-icon { color: var(--hc-sage); background: rgba(143,160,140,0.18); border-color: rgba(255,255,255,0.14); }
.phh-section.dark .phh-checklist li { color: rgba(232,237,230,0.92); }
.phh-section.dark .phh-checklist li svg { color: var(--hc-sage); }
.phh-section.dark .phh-card-link { color: var(--hc-sage); }
/* Das CTA-Band ist selbst dunkelgruen (siehe .phh-cta-band) — steht immer auf heller Sektion */
.phh-section.dark .phh-zeit-zeile { border-bottom-color: rgba(255,255,255,0.14); }
.phh-section.dark .phh-zeit-zeile .tag { color: #f4f7f2; }
.phh-section.dark .phh-zeit-zeile .uhr { color: rgba(232,237,230,0.90); }
.phh-section.dark .phh-zeit-zeile .uhr.zu { color: rgba(232,237,230,0.58); }
.phh-section.dark .phh-zeiten-titel b { color: var(--hc-sage); }
.phh-section.dark .phh-zeiten-titel i { color: rgba(232,237,230,0.48); }
.phh-section.dark .phh-zeiten-titel::before { background: rgba(255,255,255,0.18); }
.phh-section.dark .phh-zeiten-hinweis { color: rgba(232,237,230,0.78); border-top-color: rgba(255,255,255,0.14); }

.phh-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 14px;
  background: rgba(252,250,247,0.58); border: 1px solid rgba(216,209,199,0.9);
  color: var(--hc-soft); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); margin-bottom: 22px; clip-path: var(--clip-10);
}
.phh-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--hc-warm); box-shadow: 0 0 0 5px rgba(217,101,15,0.14); }
/* .sage-Variante nutzt bewusst denselben orangen Punkt wie alle anderen Pills (Einheitlichkeit) */
.phh-eyebrow.sage::before { background: var(--hc-warm); box-shadow: 0 0 0 5px rgba(217,101,15,0.14); }

/* Ausgewogener Zeilenumbruch fuer Ueberschriften — nie ein einzelnes Wort
   allein in der letzten Zeile (keine Schusterjungen/Witwen). */
.phh-root h1, .phh-root h2, .phh-root h3, .phh-root .phh-h2, .phh-root .phh-h3 { text-wrap: balance; }
/* Einheitliche Größe für ALLE Sektions-Überschriften (H2) — keine Sonder-Größen mehr */
.phh-h2 { font-size: clamp(2.1rem, 3.8vw, 3.2rem); line-height: 1.04; letter-spacing: -0.045em; font-weight: 600; }
.phh-h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -0.03em; }
.phh-lead { font-size: clamp(1.09rem, 1.5vw, 1.3rem); line-height: 1.8; color: rgba(47,49,45,0.86); }
.phh-muted { color: var(--hc-soft); }
.phh-center { text-align: center; }
.phh-center .phh-lead { max-width: 60ch; margin-left: auto; margin-right: auto; }
/* Zentrierter Fliesstext: alle Zeilen gleich lang statt ausgefranst.
   Braucht .phh-root davor, sonst gewinnt die allgemeine pretty-Regel. */
.phh-root .phh-center .phh-lead { text-wrap: balance; }

/* ---------- Buttons (geclippte Ecken) ---------- */
.phh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; border: none; line-height: 1; white-space: nowrap; clip-path: var(--clip-12);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}
/* Am Desktop rechtsbündig (Gegenstück zum Text links), auf dem Handy mittig */
.phh-media-right { max-width: 400px; margin-left: auto; }
@media (max-width: 959px) {
  .phh-media-right { margin-left: auto; margin-right: auto; }
  /* Einzelne Buttons in gestapelten Split-Spalten mittig statt linksbündig */
  .phh-center-mobile { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
}

/* Handy: kompaktere Buttons – 48px bleiben bequem tippbar (Mindestmaß 44px) */
@media (max-width: 560px) {
  .phh-btn { min-height: 48px; padding: 0 18px; font-size: 12.5px; letter-spacing: 0.05em; gap: 8px; }
  .phh-btn svg { width: 16px; height: 16px; }
}
/* Sehr schmale Geräte (ab iPhone SE): langer Button-Text darf umbrechen,
   sonst schiebt white-space:nowrap den Button über den Bildschirmrand */
@media (max-width: 400px) {
  .phh-btn { white-space: normal; text-align: center; padding: 12px 14px; line-height: 1.25; max-width: 100%; }
  .phh-reviews-badge { flex-wrap: wrap; justify-content: center; gap: 8px 12px; padding: 12px 14px; max-width: 100%; }
}
.phh-btn-primary { background: var(--hc-sage-dark); color: #fcfaf7; }
.phh-btn-primary:hover { background: var(--hc-sage-deep); transform: translateY(-1px); }
.phh-btn-warm { background: var(--hc-warm); color: #fff; }
.phh-btn-warm:hover { background: #c4570b; transform: translateY(-1px); }
.phh-btn-secondary { background: rgba(252,250,247,0.72); border: 1px solid rgba(216,209,199,0.95); color: var(--hc-text); }
.phh-btn-secondary:hover { border-color: rgba(143,160,140,0.8); transform: translateY(-1px); }
.phh-btn-ghost { background: transparent; border: 1px solid var(--hc-sage); color: var(--hc-sage-deep); }
.phh-btn-ghost:hover { background: var(--hc-sage); color: #fcfaf7; }
.phh-btn-light { background: var(--hc-surface-strong); border: 1px solid var(--hc-line); color: var(--hc-text); }
/* Link-Buttons: Textfarbe darf NICHT von `.phh-root a { color: inherit }` überschrieben werden */
.phh-root a.phh-btn-warm { color: #fff; }
.phh-root a.phh-btn-primary { color: #fcfaf7; }

/* ---------- Audi-Rücklicht-Sweep auf dem Haupt-CTA (orange) ---------- */
/* Durchgehend laufendes Licht (kein Stopp) via wanderndem Gradienten */
.phh-btn-warm { position: relative; overflow: hidden; }
.phh-btn-warm::before, .phh-btn-warm::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-repeat: no-repeat; background-size: 220% 100%; background-position: -60% 0;
}
/* breiter, weicher Lichtschein */
.phh-btn-warm::before {
  background-image: linear-gradient(100deg, transparent 38%, rgba(255,255,255,0.28) 50%, transparent 62%);
  filter: blur(7px);
}
/* schmaler, heller Kernstrahl (das „Rücklicht") */
.phh-btn-warm::after {
  background-image: linear-gradient(100deg, transparent 44%, rgba(255,214,176,0.55) 48.5%, rgba(255,255,255,0.96) 50%, rgba(255,214,176,0.55) 51.5%, transparent 56%);
  filter: blur(1px);
}
@media (min-width: 1024px) {
  .phh-btn-warm::before { animation: phhAudiSweep 3.2s linear infinite; }
  .phh-btn-warm::after  { animation: phhAudiSweep 3.2s linear infinite; }
}
@keyframes phhAudiSweep {
  0%   { background-position: -60% 0; }
  100% { background-position: 160% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .phh-btn-warm::before, .phh-btn-warm::after { animation: none !important; background-image: none !important; }
}
.phh-root a.phh-btn-secondary { color: var(--hc-text); }
.phh-root a.phh-btn-ghost { color: var(--hc-sage-deep); }
.phh-root a.phh-btn-light { color: var(--hc-text); }

/* ---------- Header (full-width, transparent über Hero → solide beim Scrollen) ---------- */
.phh-header { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); will-change: transform; }
/* Beim Ausblenden auch den angehobenen Logo-Block mitnehmen (ragt 34px unter die Leiste) */
.phh-header.is-hidden { transform: translateY(calc(-100% - 44px)); }
.phh-header::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 240ms ease; background: linear-gradient(180deg, rgba(18,26,20,0.5) 0%, rgba(18,26,20,0) 100%); }
.phh-header.is-transparent::before { opacity: 1; }
/* Volle Breite — Logo und Buttons bündig mit den Hero-Rändern */
.phh-nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 1840px; margin: 0 auto; padding: 9px clamp(20px, 4.5vw, 76px); border-bottom: 1px solid transparent; transition: background 240ms ease, box-shadow 240ms ease, padding 240ms ease; }
.phh-nav-actions { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; }
.phh-header.is-solid .phh-nav { background: transparent; box-shadow: none; border-bottom-color: transparent; }
/* Eine durchgehende Form: schlanke Leiste + links angehobener Logo-Block, rechts abgeschraegt */
.phh-header.is-solid .phh-nav::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: -34px; z-index: 0; pointer-events: none;
  background: rgba(247,243,238,0.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  filter: drop-shadow(0 4px 18px rgba(32,28,23,0.10));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), 292px calc(100% - 34px), 212px 100%, 0 100%);
}
.phh-logo { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; min-width: 0; height: 42px; width: 125px; flex: 0 0 auto; }
.phh-logo img { position: absolute; left: 0; top: -3px; height: 78px; width: auto; display: block; }
.phh-logo .logo-solid { height: 78px; display: none; }
/* Handy: Logo und angehobener Block kleiner, damit oben nichts erschlagen wirkt */
@media (max-width: 720px) {
  .phh-logo { width: 100px; height: 40px; }
  .phh-logo img, .phh-logo .logo-solid { height: 62px; top: -2px; }
  .phh-header.is-solid .phh-nav::before {
    bottom: -24px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 186px calc(100% - 24px), 138px 100%, 0 100%);
  }
}
.phh-header.is-solid .phh-logo .logo-light { display: none; }
.phh-header.is-solid .phh-logo .logo-solid { display: block; }
.phh-nav-links { display: none; align-items: center; gap: 10px; }
/* Nav-Links als Pills (wie die Telefon-Pill) */
.phh-nav-links a {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(252,250,247,0.72); border: 1px solid rgba(216,209,199,0.95); color: var(--hc-text);
  clip-path: var(--clip-10); transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.phh-nav-links a:hover { border-color: rgba(143,160,140,0.8); transform: translateY(-1px); }
.phh-header.is-transparent .phh-nav-links a { background: rgba(252,250,247,0.9); border-color: rgba(255,255,255,0.6); }
.phh-nav-phone { display: none; min-height: 42px; padding: 0 17px; font-size: 14px; font-weight: 700; }
/* Telefon-Pill über Hero transparent: leicht milchiges Glas, gut lesbar */
.phh-header.is-transparent .phh-nav-phone { background: rgba(252,250,247,0.92); border-color: rgba(255,255,255,0.6); color: var(--hc-text); }
.phh-nav-cta { display: none; min-height: 42px; padding: 0 18px; font-size: 0.9rem; gap: 8px; }
.phh-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; background: rgba(255,255,255,0.16); color: #fff; border: 1px solid rgba(255,255,255,0.45); clip-path: var(--clip-10); }
.phh-header.is-solid .phh-burger { background: var(--hc-sage-dark); color: #fcfaf7; border-color: transparent; }

/* Vollbild-Menü */
.phh-menu { position: fixed; inset: 0; z-index: 12000; overflow-y: auto; background: #f7f3ee; }
.phh-menu::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(58% 52% at 88% 0%, rgba(143,160,140,0.16), transparent 62%); }
.phh-menu-bar { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; padding: 6px clamp(20px, 4.5vw, 76px); }
.phh-menu-logo img { height: 78px; width: auto; display: block; }
@media (max-width: 720px) { .phh-menu-logo img { height: 62px; } .phh-menu-bar { padding-top: 8px; } }
.phh-menu-close { align-self: center; width: 46px; height: 46px; background: var(--hc-sage-dark); color: #fcfaf7; border: none; cursor: pointer; display: grid; place-items: center; clip-path: var(--clip-10); transition: background 0.2s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.phh-menu-close:hover { background: var(--hc-sage-deep); transform: rotate(90deg); }
.phh-menu-inner { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; padding: 30px clamp(20px, 6vw, 64px) clamp(40px, 8vw, 80px); display: grid; grid-template-columns: 1fr; gap: 40px; }
/* Große Primärlinks – nur die wichtigen Seiten */
.phh-menu-primary { display: flex; flex-direction: column; }
/* Schriftgröße so gewählt, dass die Navi-Spalte exakt so hoch ist wie die
   Termin-Karte daneben (5 Einträge × Zeilenhöhe = Kartenhöhe) */
.phh-menu-primary a { display: flex; align-items: center; gap: 16px; color: var(--hc-text); font-size: clamp(1.35rem, 2.8vw, 2.3rem); font-weight: 600; letter-spacing: -0.03em; padding: 13.5px 2px; border-bottom: 1px solid rgba(143,160,140,0.18); transition: color 0.2s ease; }
.phh-menu-primary a > span { transition: transform 0.28s cubic-bezier(0.16,1,0.3,1); }
.phh-menu-primary a::after { content: '→'; font-size: 0.6em; color: var(--hc-sage-dark); opacity: 0; transform: translateX(-12px); transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.16,1,0.3,1); }
.phh-menu-primary a:hover { color: var(--hc-sage-deep); }
.phh-menu-primary a:hover > span { transform: translateX(9px); }
.phh-menu-primary a:hover::after { opacity: 1; transform: translateX(0); margin-left: auto; }
/* CTA als kompakte Karte */
.phh-menu-cta { display: flex; flex-direction: column; align-items: flex-start; align-self: start; gap: 6px; padding: 28px clamp(24px, 3vw, 36px); background: linear-gradient(180deg, #2b3429 0%, #21271f 100%); color: #e8ede6; clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); }
.phh-menu-cta-kicker { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--hc-sage); }
.phh-menu-cta h3 { color: #f4f7f2; font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 500; letter-spacing: -0.03em; margin: 6px 0 0; }
.phh-menu-cta h3 .phh-serif { color: var(--hc-sage); }
.phh-menu-contact { list-style: none; margin: 18px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 11px; width: 100%; }
.phh-menu-contact li { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: rgba(232,237,230,0.86); }
.phh-menu-contact svg { color: var(--hc-sage); flex-shrink: 0; }
.phh-menu-contact a { color: rgba(232,237,230,0.86); }
.phh-menu-contact a:hover { color: #fff; }
.phh-menu-cta .phh-btn-warm { align-self: stretch; justify-content: center; margin-top: 8px; }
/* Rechtliches als kleine Fußzeile */
.phh-menu-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 24px; border-top: 1px solid rgba(143,160,140,0.22); }
.phh-menu-legal a { font-size: 0.85rem; color: var(--hc-soft); font-weight: 600; transition: color 0.2s ease; }
.phh-menu-legal a:hover { color: var(--hc-sage-dark); }

/* ---------- HERO (hell + interaktive Körperkarte „Wo tut's weh?") ---------- */
.phh-hero { position: relative; width: 100%; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; overflow: hidden; background: linear-gradient(180deg, #2b3429 0%, #21271f 100%); }
.phh-hero::before { content: ""; position: absolute; top: -160px; right: -120px; width: 600px; height: 600px; border-radius: 999px; background: radial-gradient(circle, rgba(143,160,140,0.28), transparent 70%); pointer-events: none; }
.phh-hero::after { content: ""; position: absolute; bottom: -160px; left: -120px; width: 480px; height: 480px; border-radius: 999px; background: radial-gradient(circle, rgba(217,101,15,0.16), transparent 70%); pointer-events: none; }
/* Hintergrund-Video im Hero */
.phh-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.phh-hero-video-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, rgba(28,34,26,0.92) 0%, rgba(28,34,26,0.74) 48%, rgba(28,34,26,0.55) 100%); }
@media (prefers-reduced-motion: reduce) { .phh-hero-video { display: none; } }

/* ---------- Hochformat-Video-Kachel (geteilt: Patientengeschichte + Praxis-Seite) ---------- */
.phh-reel { position: relative; aspect-ratio: 9 / 16; overflow: hidden; clip-path: var(--clip-14); background: #dfe4dc; box-shadow: 0 22px 46px -20px rgba(82,96,79,0.34); }
/* scale(1.045): schneidet einen evtl. dünnen schwarzen Video-Rand sauber weg */
.phh-reel video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transform: scale(1.045); }
.phh-reel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,26,18,0.66), transparent 48%); pointer-events: none; z-index: 1; transition: opacity 0.3s ease; }
.phh-reel-cap { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.6); pointer-events: none; transition: opacity 0.25s ease; }
.phh-reel-cap b { display: block; font-size: 0.98rem; font-weight: 700; letter-spacing: -0.01em; }
.phh-reel-cap span { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.9; margin-top: 2px; }
/* Play-Button (Ton beim Antippen) */
.phh-reel-play { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); z-index: 3; display: grid; place-items: center; width: 62px; height: 62px; padding-left: 3px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.88); background: rgba(217,101,15,0.94); color: #fff; cursor: pointer; box-shadow: 0 12px 30px rgba(0,0,0,0.38); transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), background 0.25s ease, opacity 0.25s ease; }
.phh-reel-play:hover { transform: translate(-50%, -50%) scale(1.09); background: var(--hc-warm); }
/* Abspiel-Zustand: Overlay, Play-Button & Caption ausblenden, native Steuerung frei */
.phh-reel.is-playing::after { opacity: 0; }
.phh-reel.is-playing .phh-reel-play,
.phh-reel.is-playing .phh-reel-cap { opacity: 0; visibility: hidden; }
.phh-reel.is-playing video { transform: none; }

/* ---------- Patientengeschichte — Cover-Story (volle Breite, dunkel) ---------- */
.phh-story { position: relative; overflow: hidden; background: linear-gradient(180deg, #242c21 0%, var(--hc-dark-sage) 100%); padding: clamp(58px, 9vh, 104px) 0; }
.phh-story::before { content: ''; position: absolute; top: -180px; right: -140px; width: 560px; height: 560px; border-radius: 999px; background: radial-gradient(circle, rgba(217,101,15,0.13), transparent 70%); pointer-events: none; }
.phh-story::after { content: ''; position: absolute; bottom: -200px; left: -160px; width: 520px; height: 520px; border-radius: 999px; background: radial-gradient(circle, rgba(143,160,140,0.16), transparent 70%); pointer-events: none; }
.phh-story-head { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(252,250,247,0.18); color: rgba(232,237,230,0.88); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.phh-story-head .issue { color: rgba(232,237,230,0.55); text-align: right; }
.phh-story-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; padding-top: clamp(32px, 5vh, 54px); }
.phh-story-grid > * { min-width: 0; }
.phh-story-lede { color: rgba(232,237,230,0.85); font-size: clamp(1.02rem, 1.35vw, 1.18rem); line-height: 1.7; max-width: 46ch; }
.phh-story-lede b { color: #fff; }
/* Der Zähler ist der Held der Sektion: riesige Serifen-Ziffer in Marken-Orange */
.phh-story-counter { margin-top: 6px; }
.phh-story-counter .num { display: block; font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; font-size: clamp(4.4rem, 10.5vw, 9rem); line-height: 1.04; letter-spacing: -0.02em; color: var(--hc-warm-soft); text-shadow: 0 8px 40px rgba(217,101,15,0.25); }
.phh-story-counter .unit { display: block; margin-top: 2px; color: #fff; font-size: clamp(1.05rem, 1.7vw, 1.4rem); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.phh-story-quote { margin: clamp(22px, 3.5vh, 32px) 0 0; max-width: 54ch; padding-left: 18px; border-left: 2px solid rgba(217,101,15,0.55); font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500; font-size: clamp(1.08rem, 1.55vw, 1.32rem); line-height: 1.6; color: rgba(252,250,247,0.92); }
.phh-story-attr { margin-top: 12px; display: flex; align-items: baseline; gap: 10px; font-family: var(--font-sans, inherit); font-style: normal; }
.phh-story-attr b { color: #fff; font-size: 0.98rem; letter-spacing: -0.01em; }
.phh-story-attr span { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hc-sage); font-weight: 700; }
.phh-story-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(20px, 3vh, 28px); }
.phh-story-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid rgba(252,250,247,0.22); background: rgba(252,250,247,0.05); color: #fff; font-size: 12.5px; font-weight: 600; clip-path: var(--clip-10); }
.phh-story-chip svg { color: var(--hc-warm-soft); flex: 0 0 auto; }
.phh-story-cta { margin-top: clamp(24px, 3.5vh, 32px); }
/* Video im Passepartout-Rahmen — klar als echtes Patientenvideo markiert */
.phh-story-media { display: grid; justify-items: center; }
.phh-story-frame { position: relative; width: min(100%, 620px); padding: 10px; background: rgba(252,250,247,0.07); border: 1px solid rgba(252,250,247,0.22); box-shadow: 0 34px 70px -28px rgba(0,0,0,0.55); }
/* Querformat-Testimonial: 16:9 statt der 9:16-Reel-Grundform */
.phh-story-reel { width: 100%; aspect-ratio: 16 / 9; }
.phh-story-live { position: absolute; top: 20px; left: 20px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; background: rgba(18,22,16,0.72); border: 1px solid rgba(252,250,247,0.25); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.phh-story-live i { width: 7px; height: 7px; border-radius: 999px; background: var(--hc-warm); box-shadow: 0 0 0 0 rgba(217,101,15,0.6); animation: phhPulse 2s ease-out infinite; }
@keyframes phhPulse { to { box-shadow: 0 0 0 9px rgba(217,101,15,0); } }
.phh-story-hint { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 2; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 2px 10px rgba(0,0,0,0.6); pointer-events: none; transition: opacity 0.25s ease; }
.phh-reel.is-playing .phh-story-hint,
.phh-reel.is-playing .phh-story-live { opacity: 0; visibility: hidden; }  /* 17.09.2026 Aileen: das Schild lag beim Abspielen ueber Werners Gesicht */
.phh-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 960px) {
  .phh-story-head { font-size: 11px; letter-spacing: 0.3em; }
  /* Gleiche Spalten: das Querformat-Video braucht mehr Breite */
  .phh-story-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  /* Video weit an den rechten Rand — Editorial-Achse wie im Hero */
  .phh-story-media { justify-items: end; }
  .phh-story-frame { transform: rotate(-1.8deg); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
  .phh-story-frame:hover { transform: rotate(0deg); }
}

/* Praxis-Video (Hochformat) im Split – Breite begrenzen & zentrieren */
.phh-praxisvideo-media { display: flex; justify-content: center; }
.phh-praxisvideo-media .phh-reel { width: 100%; max-width: 300px; }
@media (min-width: 1024px) {
  .phh-reel { transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease; }
  .phh-reel:not(.is-playing):hover { transform: translateY(-10px) scale(1.015); box-shadow: 0 44px 74px -24px rgba(82,96,79,0.5); }
}

/* ---------- Google-Bewertungen ---------- */
/* Zentrierter Vertrauens-Kopf mit kombiniertem Google-Badge */
.phh-reviews-head { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; max-width: 820px; margin: 0 auto 48px; }
.phh-reviews-head .phh-h2 { white-space: nowrap; }
@media (max-width: 720px) { .phh-reviews-head .phh-h2 { white-space: normal; } }
.phh-reviews-badge { display: inline-flex; align-items: center; gap: 16px; background: #fffdfa; border: 1px solid rgba(143,160,140,0.22); clip-path: var(--clip-12); padding: 12px 24px; box-shadow: 0 16px 34px -18px rgba(82,96,79,0.30); margin-top: 4px; }
.phh-reviews-badge .rate { display: inline-flex; align-items: center; gap: 10px; }
.phh-reviews-badge .rate b { font-size: 1.8rem; line-height: 1; letter-spacing: -0.03em; color: var(--hc-text); }
.phh-reviews-badge-div { width: 1px; height: 26px; background: rgba(143,160,140,0.32); }
.phh-reviews-badge .cnt { font-size: 0.86rem; color: var(--hc-soft); font-weight: 600; }
.phh-reviews-stars { display: inline-flex; gap: 1px; color: #f5a623; }
.phh-reviews-stars.sm { color: #f5a623; margin: 10px 0 4px; }
/* Reviews sitzen auf einem eigenen, leicht abgesetzten Panel */
/* Laufband-Wand: zwei Reihen, gegenläufig, weiche Ränder, pausiert bei Hover */
.phh-marquee { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.phh-marquee-row { overflow: hidden; }
.phh-marquee-track { display: flex; gap: 22px; width: max-content; will-change: transform; animation: phh-marquee 64s linear infinite; }
.phh-marquee-row.reverse .phh-marquee-track { animation-direction: reverse; }
.phh-marquee-row:hover .phh-marquee-track { animation-play-state: paused; }
@keyframes phh-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .phh-marquee-track { animation: none; } }

/* ---------- Bewertungen auf dem Handy: wischen statt zusehen ----------
   Am Desktop laeuft das Band von allein und man sieht drei bis vier
   Bewertungen gleichzeitig. Auf dem Handy passt nur eine Karte ins Bild,
   das Band zieht sie weg, bevor man zu Ende gelesen hat, und links und
   rechts sind die Nachbarn angeschnitten.

   Deshalb: kein Selbstlauf, sondern wischen mit Einrasten. Die Bewegung
   bleibt erhalten, nur bestimmt jetzt der Daumen das Tempo. */
@media (max-width: 860px) {
  .phh-marquee-row { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .phh-marquee-row::-webkit-scrollbar { display: none; }
  .phh-marquee-track { animation: none; width: max-content; padding: 4px 0 8px; }
  .phh-rev-chip { scroll-snap-align: center; flex-basis: 84vw; }
  /* Die zweite Reihe laeuft am Desktop rueckwaerts; beim Wischen waere das
     nur verwirrend, sie verhaelt sich hier wie die erste. */
  .phh-marquee-row.reverse .phh-marquee-track { animation-direction: normal; }
}

.phh-rev-chip { flex: 0 0 clamp(290px, 80vw, 384px); display: flex; flex-direction: column; padding: 26px 26px 24px; background: #fffdfa; border: 1px solid rgba(143,160,140,0.18); border-left: 3px solid var(--hc-sage); clip-path: var(--clip-12); box-shadow: 0 16px 34px -20px rgba(82,96,79,0.30); }
.phh-rev-chip-top { display: flex; align-items: center; gap: 12px; }
.phh-review-avatar { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 999px; background: linear-gradient(135deg, var(--hc-sage), var(--hc-sage-dark)); color: #fff; font-weight: 700; font-size: 1.15rem; box-shadow: 0 6px 14px rgba(111,127,109,0.28); }
.phh-review-who { display: flex; flex-direction: column; line-height: 1.3; margin-right: auto; }
.phh-review-who b { font-size: 0.96rem; color: var(--hc-text); letter-spacing: -0.01em; }
.phh-review-who span { font-size: 0.76rem; color: var(--hc-soft); }
.phh-rev-chip .phh-reviews-stars.sm { margin: 12px 0 8px; }
.phh-rev-chip blockquote { margin: 0; color: rgba(47,49,45,0.82); font-size: 0.94rem; line-height: 1.62;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.phh-reviews-cta { display: flex; justify-content: center; margin-top: 44px; }

/* ---------- Magazin / Blog ---------- */
.phh-blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 0.8rem; color: var(--hc-soft); font-weight: 600; }
.phh-blog-meta span { display: inline-flex; align-items: center; gap: 6px; }
.phh-blog-cat { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hc-sage-dark); }
/* Hervorgehobener neuester Artikel */
.phh-blog-featured { display: grid; grid-template-columns: 1fr; gap: 26px; margin-bottom: 52px; color: inherit; }
@media (min-width: 860px) { .phh-blog-featured { grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; } }
.phh-blog-featured-media { aspect-ratio: 16 / 10; overflow: hidden; clip-path: var(--clip-14); }
.phh-blog-featured-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.phh-blog-featured:hover .phh-blog-featured-media img { transform: scale(1.04); }
.phh-blog-featured-body { display: flex; flex-direction: column; gap: 14px; }
.phh-blog-featured-body .phh-blog-cat { color: var(--hc-warm); }
.phh-blog-featured-body h2 { color: var(--hc-text); }
/* Artikel-Raster */
.phh-blog-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 620px) { .phh-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .phh-blog-grid { grid-template-columns: repeat(3, 1fr); } }
.phh-blog-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; color: inherit; }
.phh-blog-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.phh-blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.phh-blog-card:hover .phh-blog-card-media img { transform: scale(1.05); }
.phh-blog-card-media .phh-blog-cat { position: absolute; left: 12px; top: 12px; background: rgba(247,243,238,0.94); color: var(--hc-sage-dark); padding: 5px 11px; clip-path: var(--clip-10); }
.phh-blog-card-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; flex: 1; }
.phh-blog-card-body h3 { font-size: 1.14rem; letter-spacing: -0.02em; line-height: 1.28; color: var(--hc-text); }
.phh-blog-card-body p { color: rgba(47,49,45,0.86); font-size: 1.02rem; line-height: 1.65; }
.phh-blog-card-body .phh-card-link { margin-top: auto; padding-top: 14px; }
.phh-section.dark .phh-blog-card-body h3 { color: #f4f7f2; }
.phh-section.dark .phh-blog-card-body p { color: rgba(232,237,230,0.78); }
.phh-section.dark .phh-blog-card-media .phh-blog-cat { background: rgba(33,39,31,0.85); color: var(--hc-sage); }
/* Artikeltext */
.phh-article { max-width: 720px; margin: 0 auto; }

/* --- Häufige Fragen (Aufklapp-Liste) --- */
/* Ab Tablet zweispaltig: 5 Fragen links, 5 rechts */
.phh-faq { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 12px; align-content: start; }
@media (min-width: 900px) { .phh-faq { grid-template-columns: 1fr 1fr; gap: 12px 28px; } }
.phh-faq-item { background: linear-gradient(180deg, rgba(238,243,236,0.96) 0%, rgba(231,238,229,0.98) 100%); border: 1px solid rgba(143,160,140,0.18); clip-path: var(--clip-12); }
.phh-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; cursor: pointer; list-style: none; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; color: var(--hc-text); }
.phh-faq-item summary::-webkit-details-marker { display: none; }
.phh-faq-item summary svg { flex: 0 0 auto; color: var(--hc-sage-dark); transition: transform 0.25s ease; }
.phh-faq-item[open] summary svg { transform: rotate(180deg); }
.phh-faq-item p { margin: 0; padding: 0 24px 22px; color: rgba(47,49,45,0.84); line-height: 1.75; font-size: 1rem; max-width: 66ch; }
@media (min-width: 1024px) {
  .phh-faq-item { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
  .phh-faq-item:hover { border-color: rgba(143,160,140,0.36); box-shadow: 0 12px 26px -18px rgba(82,96,79,0.4); }
}

/* --- Magazin: Suchfeld --- */
.phh-search { display: flex; align-items: center; gap: 12px; max-width: 540px; margin: 0 auto 44px; padding: 14px 20px; background: rgba(255,253,250,0.78); border: 1px solid rgba(143,160,140,0.28); clip-path: var(--clip-12); box-shadow: 0 14px 30px -22px rgba(82,96,79,0.4); }
.phh-search svg { color: var(--hc-sage-dark); flex: 0 0 auto; }
.phh-search input { flex: 1; border: 0; background: transparent; outline: none; font: inherit; font-size: 1rem; color: var(--hc-text); }
.phh-search input::placeholder { color: rgba(47,49,45,0.5); }
.phh-search-count { color: rgba(47,49,45,0.62); font-size: 0.95rem; margin-bottom: 22px; }

/* --- Beitrag: zweispaltig mit Seiten-Box --- */
.phh-article-layout { display: grid; grid-template-columns: 1fr; gap: 40px; }
.phh-article-layout .phh-article { max-width: none; margin: 0; }
@media (min-width: 960px) {
  .phh-article-layout { grid-template-columns: minmax(0,1fr) 320px; gap: 52px; align-items: start; }
  .phh-article-aside { position: sticky; top: 96px; }
}
.phh-aside-card { padding: 26px; }
.phh-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hc-sage-dark); }
.phh-aside-text { margin-top: 14px; font-size: 0.98rem; line-height: 1.7; color: rgba(47,49,45,0.82); }
.phh-aside-sep { height: 1px; width: 100%; background: rgba(47,49,45,0.1); margin: 22px 0; }
.phh-aside-actions { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.phh-aside-actions .phh-card-link { color: var(--hc-sage-dark); }
.phh-share-row { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.phh-share-btn { width: 44px; height: 44px; display: grid; place-items: center; color: var(--hc-sage-dark); background: rgba(143,160,140,0.12); border: 1px solid rgba(143,160,140,0.24); clip-path: var(--clip-10); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.phh-share-btn:hover { background: var(--hc-sage-dark); color: #fff; transform: translateY(-2px); }
.phh-share-copied { margin-top: 12px; font-size: 0.85rem; color: var(--hc-sage-dark); font-weight: 600; }
.phh-article-lead { font-size: clamp(1.14rem, 1.6vw, 1.32rem); line-height: 1.7; color: var(--hc-text); font-weight: 500; margin-bottom: 28px; }
.phh-article h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.15; margin: 34px 0 12px; color: var(--hc-text); }
.phh-article p { color: rgba(47,49,45,0.88); font-size: 1.12rem; line-height: 1.8; margin-bottom: 16px; }
.phh-article-tips { margin: 34px 0 8px; }
.phh-article-note { font-size: 0.86rem; color: var(--hc-soft); font-style: italic; border-top: 1px solid rgba(143,160,140,0.2); padding-top: 20px; margin-top: 32px; }
.phh-section.dark .phh-reviews-agg { background: rgba(143,160,140,0.12); border-color: rgba(255,255,255,0.14); }
.phh-section.dark .phh-reviews-agg-top b { color: #f4f7f2; }
/* Editorial-Layout: volle Breite mit großzügigem Randabstand, Masthead oben,
   Bühne in der Mitte, Vertrauens-Fußzeile unten — wie ein Magazin-Cover */
.phh-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1840px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; padding: 96px clamp(20px, 4.5vw, 76px) 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.phh-hero-stage { flex: 1; display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; padding: 16px 0; }
/* Grid-Kinder dürfen schrumpfen — sonst drückt breiter Inhalt das Layout über den Rand */
.phh-hero-stage > * { min-width: 0; }
.phh-hero-content { max-width: 640px; }
.phh-hero-kicker { display: inline-flex; align-items: center; gap: 12px; color: rgba(232,237,230,0.78); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.phh-hero-kicker::before { content: ''; width: 28px; height: 1px; background: var(--hc-warm); flex: 0 0 auto; }
.phh-hero .phh-hero-title { color: #fff; margin-top: 20px; font-size: clamp(2.8rem, 7vw, 6.8rem); line-height: 0.94; letter-spacing: -0.045em; font-weight: 500; }
.phh-hero .phh-hero-title .phh-serif { color: var(--hc-warm-soft); display: inline-block; }
.phh-root .phh-hero-desc { color: rgba(232,237,230,0.82); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.75; max-width: 52ch; margin-top: clamp(30px, 4vh, 46px); }
.phh-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.phh-hero-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.24); }
.phh-hero-foot .rate { display: flex; align-items: center; gap: 9px; }
.phh-hero-foot .rate .stars { display: flex; gap: 2px; color: var(--hc-warm-soft); }
.phh-hero-foot .rate b { color: #fff; font-size: 0.98rem; }
.phh-hero-foot .rate span { color: rgba(232,237,230,0.7); font-size: 0.88rem; }
.phh-hero-foot .cred { display: flex; align-items: center; gap: 9px; color: #fff; font-size: 0.9rem; font-weight: 600; }
.phh-hero-foot .cred svg { color: var(--hc-sage); flex: 0 0 auto; }
.phh-hero-foot .scrollcue { display: none; align-items: center; gap: 12px; color: rgba(232,237,230,0.66); font-size: 11px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; }
.phh-hero-foot .scrollcue::after { content: ''; width: 1px; height: 30px; background: linear-gradient(180deg, rgba(232,237,230,0.7), transparent); }

/* Animation: Floating-Card sanftes Schweben */
@keyframes phhFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Unterseiten-Hero ---------- */
.phh-page-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #f7f3ee 0%, #eef2ec 100%); border-bottom: 1px solid rgba(143,160,140,0.16); padding: 118px 0 64px; }
/* Themen-Hintergrundbild im Seiten-Hero: dunkelgrüner Humanitas-Verlauf von links,
   nach rechts transparent — das Foto bleibt scharf und deutlich sichtbar */
.phh-page-hero-bg { position: absolute; inset: 0; z-index: 0; }
.phh-page-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

/* Inhalts-Bild-Leiste auf Leistungs-Seiten: breit am Desktop, hoeher am Handy */
.phh-media-band img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
@media (max-width: 700px) { .phh-media-band img { aspect-ratio: 3 / 2; } }
/* Standbild liegt DARUNTER und steht sofort im HTML — dadurch ist oben vom
   ersten Moment an das Bild zu sehen und nicht erst die dunkelgruene Flaeche.
   Frueher stand hier opacity:0 am Video, das erst per JavaScript aufgedeckt
   wurde: bis das JS lief, sah man nur Gruen. */
/* Ebenen im Hero-Hintergrund, von unten nach oben:
   1. Standbild  2. Video  3. abdunkelnder Verlauf (::after)
   Bewusst OHNE z-index: dann entscheidet die Reihenfolge im HTML, und der
   Verlauf bleibt garantiert oben. Mit z-index am Video lag es ueber dem
   Verlauf und die Ueberschrift wurde unlesbar, sobald das Video kam. */
.phh-page-hero-standbild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%; display: block;
}
.phh-page-hero-bg video { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; position: relative; }
/* Video-Hero (Praxis): hoeher, damit vom Video mehr sichtbar ist und es nicht abgeschnitten wirkt */
.phh-page-hero:has(.phh-page-hero-video) { min-height: 68vh; display: flex; align-items: center; }
.phh-page-hero-bg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    #21271f 0%,
    rgba(33,39,31,0.95) 32%,
    rgba(53,66,50,0.72) 55%,
    rgba(79,93,77,0.28) 78%,
    rgba(33,39,31,0.06) 100%); }
.phh-page-hero > .phh-wrap { position: relative; z-index: 1; }
/* Auf Seiten mit Hintergrundbild: Hero dunkel, Texte hell */
.phh-root .phh-page-hero:has(.phh-page-hero-bg) { background: var(--hc-dark-sage); border-bottom-color: rgba(33,39,31,0.25); }
.phh-root .phh-page-hero:has(.phh-page-hero-bg) h1 { color: #f4f7f2; }
.phh-root .phh-page-hero:has(.phh-page-hero-bg) .phh-lead { color: rgba(232,237,230,0.85); }
.phh-root .phh-page-hero:has(.phh-page-hero-bg) .phh-crumb { color: rgba(232,237,230,0.55); }
.phh-root .phh-page-hero:has(.phh-page-hero-bg) .phh-crumb a { color: rgba(232,237,230,0.85); }
.phh-root .phh-page-hero:has(.phh-page-hero-bg) .phh-eyebrow { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); color: rgba(232,237,230,0.88); }
.phh-root .phh-page-hero:has(.phh-page-hero-bg) .phh-btn-secondary,
.phh-root .phh-page-hero:has(.phh-page-hero-bg) a.phh-btn-secondary { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.28); color: #f4f7f2; }
/* Hero-Feintuning: im breiten Ausschnitt die Behandlungsszene zeigen (überschreibt die globalen Bild-Regeln) */
.phh-page-hero .phh-page-hero-bg img[src$="behandlung-nacken.jpg"] { object-position: center 55%; transform: scaleX(-1); }
.phh-page-hero .phh-page-hero-bg img[src$="behandlung-krankengymnastik.jpg"] { object-position: center 45%; }
.phh-page-hero h1 { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 0.95; letter-spacing: -0.06em; font-weight: 500; max-width: 18ch; }
.phh-page-hero .phh-lead { margin-top: 20px; max-width: 60ch; }
.phh-crumb { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hc-soft); margin-bottom: 18px; }
.phh-crumb a { color: var(--hc-sage-dark); }

/* ---------- Cards / Grid ---------- */
.phh-grid { display: grid; gap: 18px; }
.phh-grid-2 { grid-template-columns: 1fr; }
.phh-grid-3 { grid-template-columns: 1fr; }
.phh-card {
  position: relative; display: flex; flex-direction: column; padding: 28px;
  background: linear-gradient(180deg, rgba(238,243,236,0.96) 0%, rgba(231,238,229,0.98) 100%);
  border: 1px solid rgba(143,160,140,0.16); box-shadow: 0 10px 24px rgba(82,96,79,0.05), 0 2px 8px rgba(82,96,79,0.03);
  clip-path: var(--clip-14); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.phh-card:hover { transform: translateY(-3px); border-color: rgba(143,160,140,0.3); box-shadow: 0 16px 34px rgba(82,96,79,0.08); }
.phh-card-icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 20px; background: rgba(143,160,140,0.14); border: 1px solid rgba(111,127,109,0.22); color: var(--hc-sage-dark); clip-path: var(--clip-10); }
.phh-card h3 { font-size: 1.3rem; margin-bottom: 10px; letter-spacing: -0.04em; }
.phh-card p { color: rgba(47,49,45,0.84); line-height: 1.75; font-size: 1.06rem; }
.phh-card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; color: var(--hc-text); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.phh-card-link svg { transition: transform 180ms ease; }
.phh-card:hover .phh-card-link svg { transform: translateX(3px); }
.phh-pillar { text-align: center; align-items: center; }
.phh-pillar .phh-card-icon { margin-left: auto; margin-right: auto; }

/* ---------- Leistungs-Karten-Effekte (Spotlight, Akzentlinie, Icon) ---------- */
.phh-svc { position: relative; overflow: hidden; isolation: isolate; }
.phh-svc > * { position: relative; z-index: 1; }
/* Cursor-Spotlight (folgt der Maus) */
.phh-svc::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 0.35s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(143,160,140,0.20), rgba(217,101,15,0.06) 35%, transparent 62%);
}
/* Akzentlinie oben (Orange → Grün) fährt ein */
.phh-svc::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--hc-warm), var(--hc-sage));
  transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
@media (min-width: 1024px) {
  .phh-svc:hover::before { opacity: 1; }
  .phh-svc:hover::after { transform: scaleX(1); }
  .phh-svc .phh-card-icon { transition: background 0.35s ease, color 0.35s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease; }
  .phh-svc:hover .phh-card-icon { background: linear-gradient(135deg, var(--hc-warm-soft), var(--hc-warm)); color: #fff; transform: translateY(-3px) rotate(-6deg) scale(1.08); box-shadow: 0 14px 28px rgba(217,101,15,0.34); }
  .phh-svc h3 { transition: color 0.25s ease; }
  .phh-svc:hover h3 { color: var(--hc-sage-deep); }
  .phh-svc .phh-card-link { color: var(--hc-sage-dark); transition: gap 0.2s ease; }
  .phh-svc:hover .phh-card-link { gap: 12px; }
}

/* ---------- Leistungen: Karten mit Skelett-Illustration im Hintergrund ---------- */
.phh-spinesec { padding: 0 0 clamp(180px, 24vh, 260px); position: relative; }
.phh-spinesec-intro { padding: 120px 0 44px; }
.phh-spinesec-pin { position: static; }
.phh-spinesec-body { position: relative; }
.phh-spinesec-bg { position: absolute; inset: -20px 0; z-index: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.phh-spinesec-bg img { height: 100%; max-height: 780px; width: auto; object-fit: contain; opacity: 0.5; -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 48%, #000 46%, transparent 86%); mask-image: radial-gradient(ellipse 60% 80% at 50% 48%, #000 46%, transparent 86%); }
.phh-spinesec-row { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 20px; }
.phh-spinesec-row:last-child { margin-bottom: 0; }
.phh-connect, .phh-spinesec-gap { display: none; }

/* ---------- Skelett auf dem Handy ----------
   Problem: Am Desktop fuellt die Illustration die Sektion (761 px Bild auf
   721 px Flaeche, also 106 %) und die Karten liegen links und rechts DARUM.
   Auf dem Handy stapeln sich die Karten untereinander, die Flaeche wird
   2652 px hoch, das Bild bleibt bei 780 px = 29 % und verschwindet als
   blasser Streifen hinter deckenden Karten. Genau das war zu sehen: nichts.

   Loesung: Das Skelett bleibt beim Scrollen stehen (sticky) und die Karten
   wandern darueber hinweg. Man geht also am Skelett entlang, statt es zu
   verlieren. Das negative margin-bottom nimmt dem Bild seinen Platz im
   Fluss, damit die Karten wieder oben anfangen. */
@media (max-width: 979px) {
  .phh-spinesec-bg {
    position: sticky;
    inset: auto;
    top: 15vh;
    height: 70vh;
    margin-bottom: -70vh;
    z-index: 0;
  }
  .phh-spinesec-bg img {
    height: 100%;
    max-height: none;
    /* Wasserzeichen-Staerke. Hoeher getestet (0,42): dann scheint das
       Skelett durch die Karten und drueckt den Kontrast des Textes.
       Auf dem Handy liegen die Karten UEBER dem Bild, am Desktop daneben,
       deshalb muss es hier deutlich zurueckhaltender sein. */
    opacity: 0.22;
  }
  /* Karten bleiben deckend, damit der Text voll lesbar ist. Das Skelett
     wirkt in den Zwischenraeumen und als Schatten dahinter.
     Bewusst OHNE backdrop-filter: der kostet auf dem Handy am meisten
     Leistung und braeuchte es hier gar nicht. */
  /* Mehr Luft zwischen den Karten, damit das Skelett dazwischen durchschaut */
  .phh-spinesec-row { gap: 22px; margin-bottom: 26px; }
}
/* Karten gleiten von außen herein – nur am Desktop. Auf dem Handy sind die
   Karten volle Breite; ein seitlicher Versatz würde über den Rand ragen. */
@media (min-width: 980px) {
  .phh-spinesec .reveal.is-left { transform: translateX(-44px); }
  .phh-spinesec .reveal.is-right { transform: translateX(44px); }
  .phh-spinesec .reveal.is-left.active, .phh-spinesec .reveal.is-right.active { transform: none; }
}

@media (min-width: 980px) {
  .phh-spinesec-row { grid-template-columns: 1fr 70px 150px 70px 1fr; gap: 0; align-items: stretch; margin-bottom: clamp(8px, 1.6vh, 18px); }
  .phh-spinesec-row > .phh-card { height: 100%; min-height: 0; }
  /* Kompakte Karten nur in dieser Sektion, damit alles auf eine Seite passt */
  /* Höhenabhängig: schrumpft auf niedrigen Bildschirmen, damit alle 6 Karten immer komplett passen */
  .phh-spinesec .phh-card { padding: clamp(10px, 1.6vh, 16px) 20px; }
  .phh-spinesec .phh-card-icon { width: clamp(32px, 4.2vh, 42px); height: clamp(32px, 4.2vh, 42px); margin-bottom: clamp(6px, 1.1vh, 11px); }
  .phh-spinesec .phh-card-icon svg { width: clamp(15px, 2vh, 19px); height: clamp(15px, 2vh, 19px); }
  .phh-spinesec .phh-card h3 { font-size: clamp(1rem, 1.85vh, 1.14rem); margin-bottom: clamp(3px, 0.7vh, 6px); }
  .phh-spinesec .phh-card p { font-size: clamp(0.82rem, 1.55vh, 0.9rem); line-height: 1.45; }
  .phh-spinesec .phh-card-link { padding-top: clamp(8px, 1.3vh, 13px); font-size: 11px; }
  .phh-spinesec-gap { display: block; align-self: center; }
  /* Länge folgt der Skelett-Silhouette: oben/unten länger (schmale Stellen),
     mittlere Reihe kurz — dort hängen die Handflächen, der Punkt darf nicht darüber */
  .phh-connect { display: block; width: 62px; height: 2px; position: relative; align-self: center; }
  .phh-connect.left { justify-self: start; background: linear-gradient(90deg, rgba(143,160,140,0.18), var(--hc-sage)); }
  .phh-connect.right { justify-self: end; background: linear-gradient(90deg, var(--hc-sage), rgba(143,160,140,0.18)); }
  .phh-spinesec-row:nth-child(3) .phh-connect { width: 30px; }
  .phh-connect::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 999px; background: var(--hc-warm); transform: translateY(-50%); box-shadow: 0 0 0 4px rgba(217,101,15,0.16); transition: box-shadow 0.25s ease, transform 0.25s ease; }
  .phh-connect.left::after { right: -3px; }
  .phh-connect.right::after { left: -3px; }
  /* Nur der Verbindungspunkt der Karte leuchtet, ueber der man wirklich ist (nicht beide) */
  .phh-spinesec-row:has(.phh-card.is-left:hover) .phh-connect.left::after,
  .phh-spinesec-row:has(.phh-card.is-right:hover) .phh-connect.right::after { box-shadow: 0 0 0 7px rgba(217,101,15,0.26); }
  .phh-spinesec-row:has(.phh-card.is-left:hover) .phh-connect.left { background: linear-gradient(90deg, rgba(217,101,15,0.2), var(--hc-warm)); }
  .phh-spinesec-row:has(.phh-card.is-right:hover) .phh-connect.right { background: linear-gradient(90deg, var(--hc-warm), rgba(217,101,15,0.2)); }
}

/* ---------- Split ---------- */
.phh-split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.phh-media, .phh-inner { position: relative; }
.phh-inner { padding: 10px; background: rgba(252,250,247,0.52); border: 1px solid rgba(143,160,140,0.14); box-shadow: 0 18px 38px rgba(82,96,79,0.06); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }

/* Bild mit geclippten Ecken */
.phh-aura { position: relative; overflow: hidden; clip-path: var(--clip-12); }
.phh-aura img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; filter: saturate(0.96) contrast(0.99); }
.phh-aura:hover img { transform: scale(1.04); }
/* Reservierter Team-Platz (Foto folgt) — dezent in Praxisfarben statt leerer Kachel */
/* ---------- Team-Kachel ----------
   Zwei Zustaende, EIN Aussehen: Wer ein bestaetigtes Portrait hat, bekommt
   das Foto; alle anderen eine ruhige Flaeche mit ihrer Initiale. Das
   Namensschild sitzt in beiden Faellen an derselben Stelle unten. */
.phh-teamcard { position: relative; overflow: hidden; }
.phh-teamcard > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phh-teamcard-flaeche {
  position: absolute; inset: 0;
  display: grid; place-items: center; align-content: center;
  padding-bottom: 86px;
  background: linear-gradient(158deg, #f2f5f0 0%, #e6ebe4 100%);
  border: 1px dashed rgba(143,160,140,0.42);
  color: var(--hc-sage);
}
.phh-teamcard-flaeche b {
  font-size: 2.9rem; font-weight: 700; line-height: 1; color: var(--hc-sage);
  letter-spacing: -0.02em;
}

/* Namensschild — Kasten im Stil der uebrigen Bild-Etiketten */
.phh-teamcard-tag {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 12px;
  background: rgba(252,250,247,0.94);
  border: 1px solid rgba(143,160,140,0.24);
  clip-path: var(--clip-10);
  box-shadow: 0 10px 26px rgba(32,28,23,0.18);
  pointer-events: none;
}
/* Das Schild sass zu schwer auf dem Foto und „Physiotherapeutin“ brach mit
   einem einzelnen „n“ in die zweite Zeile um (Praxis am 20.08.2026). Groessen
   wie im Laufband, wo es die Praxis ausdruecklich richtig fand, und die Rolle
   darf nicht mehr getrennt werden. */
.phh-teamcard-tag b {
  font-size: 0.94rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--hc-text);
}
.phh-teamcard-tag > span { font-size: 0.78rem; line-height: 1.3; color: rgba(47,49,45,0.74); }
/* Statt das Umbrechen zu verbieten — dann ragte der Text auf schmalen Geraeten
   aus dem Schild — wird an einer echten Silbengrenze getrennt
   („Physio-therapeutin“). Loesung von Phil, uebernommen am 24.08.2026,
   nachdem meine Fassung bei 320 px bis zu 40 px abgeschnitten hat. */
.phh-teamcard-tag > span { overflow-wrap: normal; -webkit-hyphens: auto; hyphens: auto; }
/* Handy: die Schilder nahmen fast ein Drittel der Kachel ein */
@media (max-width: 599px) {
  .phh-teamcard-tag { left: 8px; right: 8px; bottom: 8px; padding: 8px 10px; }
  .phh-teamcard-tag b { font-size: 0.86rem; }
  .phh-teamcard-tag > span { font-size: 0.7rem; line-height: 1.25; }
  .phh-teamcard-tag .z { font-size: 0.58rem; letter-spacing: 0.08em; margin-top: 2px; }
}
/* Sehr schmal: sonst passt „Praxismanagement“ selbst mit Trennung nicht */
@media (max-width: 400px) {
  .phh-teamcard-tag { left: 6px; right: 6px; bottom: 6px; padding: 7px 9px; }
  .phh-teamcard-tag b { font-size: 0.8rem; }
  .phh-teamcard-tag > span { font-size: 0.64rem; }
}
/* Kleinste Geraete (iPhone SE) */
@media (max-width: 345px) {
  .phh-teamcard-tag { left: 4px; right: 4px; bottom: 4px; padding: 6px 7px; }
  .phh-teamcard-tag b { font-size: 0.74rem; }
  .phh-teamcard-tag > span { font-size: 0.57rem; line-height: 1.2; }
  .phh-teamcard-tag .z { font-size: 0.52rem; }
}
.phh-teamcard-tag .z {
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--hc-sage-dark); font-weight: 700; margin-top: 3px;
}
@media (min-width: 1024px) {
  .phh-teamcard-tag { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}

/* Laufband-Karten sind schmaler als die Karussell-Kacheln */
.phh-film-card .phh-teamcard-flaeche { padding-bottom: 74px; }
.phh-film-card .phh-teamcard-flaeche b { font-size: 2.3rem; }
/* Laufband und Karussell tragen jetzt dasselbe Schild — die drei
   Sonderwerte, die hier standen, sind in die Grundregel gewandert. */
.phh-aura .ovl { display: none; }
.phh-aura .tag { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 12px; background: rgba(252,250,247,0.92); border: 1px solid rgba(143,160,140,0.2); color: var(--hc-sage-dark); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; clip-path: var(--clip-10); }

.phh-ph { width: 100%; min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, rgba(143,160,140,0.1), rgba(216,209,199,0.18)); color: var(--hc-soft); text-align: center; padding: 24px; clip-path: var(--clip-12); }
.phh-ph svg { color: var(--hc-sage); }
.phh-ph .lbl { font-size: 0.84rem; font-weight: 600; }

/* ---------- Checklisten ---------- */
.phh-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.phh-checklist li { display: flex; align-items: flex-start; gap: 11px; line-height: 1.65; font-size: 1.03rem; color: rgba(47,49,45,0.88); }
.phh-checklist li svg { color: var(--hc-sage-dark); flex-shrink: 0; margin-top: 2px; }

/* ---------- STICKY STACK CARDS (Wellness-Nutritionist-Effekt) ---------- */
.phh-stack { background: var(--hc-dark-sage); color: #e8ede6; padding: 100px 0 56px; position: relative; }
.phh-stack-head { max-width: 1840px; margin: 0 auto 48px; padding: 0 clamp(20px, 4.5vw, 76px); text-align: center; }
.phh-stack-head .phh-eyebrow { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: rgba(232,237,230,0.8); }
.phh-stack-head h2 { color: #f4f7f2; margin: 0 auto; }
/* 17.09.2026 Aileen: "Menschlichkeit" nie in eine eigene Zeile, auch am Handy nicht */
.phh-stack-head .phh-stack-titel { white-space: nowrap; font-size: clamp(14px, 5.6vw, 3.2rem); }
.phh-stack-container { max-width: 1840px; margin: 0 auto; padding: 0 clamp(20px, 4.5vw, 76px) 8vh; }
.phh-stack-card {
  position: sticky; top: 96px; margin-bottom: 28px;
  display: grid; grid-template-columns: 1fr; min-height: 380px;
  background: linear-gradient(180deg, #2b3429 0%, #232b21 100%);
  border: 1px solid rgba(255,255,255,0.08); overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.phh-stack-content { position: relative; padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.phh-stack-num { position: absolute; top: 24px; right: 30px; font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(3.5rem, 7vw, 5.5rem); color: rgba(217,101,15,0.4); line-height: 1; pointer-events: none; }
.phh-stack-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hc-sage); }
.phh-stack-card h3 { color: #f4f7f2; font-size: clamp(1.7rem, 2.5vw, 2.2rem); letter-spacing: -0.04em; line-height: 1.02; }
.phh-stack-card h3 .phh-serif { color: var(--hc-sage); }
.phh-stack-card p { color: rgba(232,237,230,0.74); line-height: 1.75; font-size: 1.02rem; max-width: 46ch; }
/* Ablauf-Schritte: große Serifen-Nummer in Marken-Orange + gestrichelte
   Verbindungslinie, die auf dem Desktop in den Lücken zwischen den Karten sichtbar wird */
.phh-step-num { font-family: 'Playfair Display', serif; font-style: italic; font-size: 2.4rem; line-height: 1; color: rgba(217,101,15,0.7); pointer-events: none; }
@media (min-width: 960px) {
  .phh-steps { position: relative; }
  .phh-steps::before { content: ''; position: absolute; top: 44px; left: 6%; right: 6%; border-top: 2px dashed rgba(217,101,15,0.4); }
  .phh-steps .phh-card { position: relative; z-index: 1; }
}

.phh-stack-list { list-style: none; padding: 14px 0 0; margin: 0; display: grid; gap: 11px; border-top: 1px solid rgba(255,255,255,0.1); }
.phh-stack-list li { display: flex; align-items: center; gap: 11px; color: #e8ede6; font-size: 0.95rem; font-weight: 500; }
.phh-stack-list svg { color: var(--hc-sage); flex: 0 0 auto; }
/* ---------- Team-Laufband (Auto-Marquee, schräge Ecken) ---------- */
.phh-filmstrip { overflow: hidden; margin: clamp(40px, 7vh, 76px) 0; }
.phh-filmstrip-row { overflow: hidden; }
.phh-filmstrip-track { display: flex; gap: 16px; width: max-content; will-change: transform; animation: phh-filmstrip 48s linear infinite; }
.phh-filmstrip-row:hover .phh-filmstrip-track { animation-play-state: paused; }
@keyframes phh-filmstrip { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.phh-film-card { position: relative; flex: 0 0 auto; width: 255px; height: 340px; overflow: hidden; clip-path: var(--clip-14); box-shadow: 0 18px 44px rgba(32,28,23,0.16); background: #dfe4dc; }
.phh-film-card img { height: 100%; width: 100%; object-fit: cover; display: block; }
@media (max-width: 1023px) {
  .phh-film-card { width: 180px; height: 240px; }
  .phh-filmstrip-track { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .phh-filmstrip-track { animation: none; }
}

.phh-stack-img { position: relative; min-height: 260px; overflow: hidden; }
/* Handy/Tablet: Stapel-Effekt wie am Desktop — die Karten schieben sich beim
   Scrollen uebereinander.
   Frueher war er hier abgeschaltet, weil die naechste Karte das Foto
   verdeckte. Der wahre Grund war die Hoehe: die Karten waren 671 bis 982 px
   hoch und passten damit auf KEINEM Handy in den Bildschirm (auf dem
   iPhone SE fehlten 328 px). Eine Karte, die hoeher ist als das Fenster,
   kann nicht sauber kleben — man sieht ihr Ende nie.
   Deshalb wird die Karte hier auf 82 % der Fensterhoehe gedeckelt: der Text
   bekommt, was er braucht, das Foto nimmt den Rest und wird beschnitten.
   So passt jede Karte, und das Stapeln wirkt wie am Desktop. */
@media (max-width: 959px) {
  /* Alle Saeulen bekommen DIESELBE Groesse und bleiben mittig im Bild
     stehen, waehrend sich die naechste wie eine Karte darueberschiebt.
     76vh Hoehe + 12vh Abstand oben = oben und unten gleich viel Luft.
     Gemessen: der Textblock braucht hoechstens 330 px (49vh auf dem
     iPhone SE), das Foto bekommt den Rest und wird beschnitten. */
  .phh-stack-card {
    position: sticky;
    top: 12vh;
    margin-bottom: 18px;
    min-height: 0;
    height: 76vh;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .phh-stack-img { min-height: 0; }
  .phh-stack-content { padding: 26px 24px; gap: 12px; }
  .phh-stack-card p { font-size: 0.97rem; line-height: 1.62; }
  .phh-stack-num { font-size: 3rem; top: 14px; right: 20px; }
  .phh-stack-list { padding-top: 12px; gap: 9px; }
  .phh-stack-list li { font-size: 0.92rem; }
  /* Luft unter dem Stapel, damit die letzte Karte auch wieder weggleitet */
  .phh-stack-container { padding-bottom: 12vh; }
}
.phh-stack-img img { width: 100%; height: 100%; object-fit: cover; }
.phh-stack-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(35,43,33,0.55) 0%, rgba(35,43,33,0.08) 45%, transparent 70%); pointer-events: none; }

/* ---------- Stats ---------- */
/* Über-uns-Split: Checkliste + versetztes Portrait-Paar der Geschäftsführung */
.phh-team-marks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 11px; }
.phh-team-marks li { display: flex; align-items: center; gap: 11px; color: var(--hc-text); font-size: 0.98rem; font-weight: 600; }
.phh-team-marks svg { color: var(--hc-warm); flex: 0 0 auto; }
/* Team-Karussell: 2 versetzte Portraits sichtbar, Pfeile drehen das Team durch.
   Der Zickzack bleibt beim Drehen erhalten (gerade/ungerade Staffelung). */
.phh-team-carousel { max-width: 540px; margin: 0 auto; }
.phh-duo-viewport { overflow: hidden; padding-bottom: 44px; }
/* 0,65 s wirkte zaeh (Praxis am 20.08.2026: „koennte sich schneller bewegen“) */
.phh-duo-track { display: flex; transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1); }
.phh-duo-item { flex: 0 0 50%; min-width: 0; padding: 0 9px; }
.phh-duo-item:nth-child(even) { margin-top: 44px; margin-bottom: -44px; }
.phh-duo-item .phh-aura { aspect-ratio: 3 / 4; }
.phh-team-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 6px; padding: 0 9px; }
.phh-team-nav .idx { margin-right: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; color: var(--hc-sage-dark); font-variant-numeric: tabular-nums; }
.phh-team-nav button { width: 46px; height: 44px; display: grid; place-items: center; background: rgba(252,250,247,0.85); border: 1px solid rgba(143,160,140,0.4); color: var(--hc-sage-deep); cursor: pointer; clip-path: var(--clip-10); transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.phh-team-nav button:hover { background: var(--hc-warm); border-color: var(--hc-warm); color: #fff; }
@media (min-width: 960px) { .phh-team-carousel { margin-left: auto; margin-right: 0; } }
@media (prefers-reduced-motion: reduce) { .phh-duo-track { transition: none; } }

.phh-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.phh-stat { text-align: center; padding: 22px 10px; background: rgba(252,250,247,0.6); border: 1px solid rgba(143,160,140,0.14); clip-path: var(--clip-10); }
.phh-stat .num { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(2rem, 4vw, 2.8rem); color: var(--hc-sage-deep); line-height: 1; }
.phh-stat .lbl { color: var(--hc-soft); font-weight: 600; margin-top: 8px; font-size: 0.85rem; letter-spacing: 0.02em; }

/* ---------- Team ---------- */
.phh-team-card { text-align: center; padding: 16px; }
.phh-team-photo { width: 100%; aspect-ratio: 4/5; overflow: hidden; margin-bottom: 18px; clip-path: var(--clip-14); }
.phh-team-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Über-uns-Hero: Gruppenbild des gesamten Teams */
.phh-hero-teamimg { margin-top: 44px; clip-path: var(--clip-14); overflow: hidden; aspect-ratio: 5/2; }
.phh-hero-teamimg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; display: block; }
@media (max-width: 720px) { .phh-hero-teamimg { aspect-ratio: 3/2; } }
.phh-team-card h3 { font-size: 1.2rem; margin-bottom: 4px; }
.phh-team-role { color: var(--hc-sage-dark); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- Galerie ---------- */
.phh-gallery { display: grid; grid-template-columns: 1fr; gap: 16px; }
.phh-gallery .phh-aura, .phh-gallery .phh-ph { aspect-ratio: 1/1; min-height: 220px; }

/* ---------- Bild-Fokuspunkte (kein Kopf/Motiv abschneiden) ----------
   Alle Bilder werden mit object-fit: cover einheitlich zugeschnitten;
   object-position legt den Fokus fest, damit Gesichter/Motive im Bild bleiben. */
.phh-root img { object-fit: cover; }
/* Personen-Hochformate (neues Shooting): Gesichter im oberen Fünftel */
/* Tom steht auf der Bank — Kopf sitzt hoeher als bei den Menschen */
.phh-root img[src$="portrait-tom.jpg"] { object-position: center 30%; }
/* Studio-Portraits: Gesicht sitzt im oberen Drittel */
.phh-root img[src*="portrait-"] { object-position: center 22%; }
/* Bei diesen beiden sitzen die verschraenkten Arme tiefer im Bild —
   etwas weiter nach oben ruecken, damit sie ueber dem Namensschild stehen.
   Der Spielraum betraegt nur rund 42 Pixel, die Verschiebung ist also klein. */
.phh-root img[src$="portrait-seraphine.jpg"],
.phh-root img[src$="portrait-anna-2.jpg"] { object-position: center 65%; }

/* Geschäftsführungs-Duo (Hochformat) — Ausschnitt oben, damit beide Gesichter voll sichtbar sind */
.phh-root img[src$="team-geschaeftsfuehrung-duo-2.jpg"] { object-position: center 5%; }
/* Gruppenfoto – Köpfe im oberen Drittel */
.phh-root img[src$="team-gruppe-neu.jpg"] { object-position: center 30%; }
/* Behandlungsfotos – Gesichter/Hände im oberen Bereich */
.phh-root img[src$="behandlung-nacken.jpg"] { object-position: center 22%; }
.phh-root img[src$="behandlung-krankengymnastik.jpg"] { object-position: center 38%; }
/* Räume/Empfang/Stock – mittiger Zuschnitt passt */
.phh-root img[src$="echt-empfang.jpg"] { object-position: center 45%; }
.phh-root img[src$="praxis-behandlungsraum.jpg"] { object-position: center center; }

/* ---------- Online-Terminbuchung / Rückruf ---------- */
.phh-book-label { display: block; font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hc-soft); margin: 0 0 12px; }
.phh-book-step { margin-bottom: 26px; }
.phh-book-step .num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; background: var(--hc-sage-dark); color: #fcfaf7; font-size: 11px; font-weight: 800; clip-path: var(--clip-10); }
.phh-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.phh-chip { padding: 11px 15px; border: 1px solid var(--hc-line); background: rgba(252,250,247,0.7); color: var(--hc-text); font-size: 0.9rem; font-weight: 600; cursor: pointer; clip-path: var(--clip-10); transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease; text-align: center; line-height: 1.2; }
.phh-chip:hover { border-color: var(--hc-sage); transform: translateY(-1px); }
/* Handy: Auswahl-Felder auf volle Tippgröße – sie sind der Kern des Formulars */
@media (max-width: 959px) { .phh-chip { min-height: 44px; padding: 12px 15px; } }
.phh-chip.sel { background: var(--hc-sage-dark); color: #fcfaf7; border-color: var(--hc-sage-dark); }
.phh-chip .d { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; margin-bottom: 2px; }
.phh-file { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px dashed rgba(143,160,140,0.5); background: rgba(143,160,140,0.06); clip-path: var(--clip-10); cursor: pointer; color: var(--hc-sage-dark); font-size: 0.9rem; font-weight: 600; transition: background 0.15s ease; }
.phh-file:hover { background: rgba(143,160,140,0.12); }
.phh-file input { display: none; }
.phh-file .fname { color: var(--hc-text); font-weight: 600; }
.phh-book-summary { margin-top: 18px; padding: 14px 16px; background: rgba(143,160,140,0.1); border: 1px solid rgba(143,160,140,0.2); border-left: 3px solid var(--hc-sage); clip-path: var(--clip-10); font-size: 0.92rem; color: var(--hc-text); }
.phh-book-summary b { color: var(--hc-sage-dark); }

/* ---------- CTA-Band ---------- */
/* CTA-Sektion: weisse Flaeche kleiner + symmetrisch ums Band.
   oben 32px -> 112(Inhalt)+32=144 darueber; unten 72px -> 72+72(Footer)=144 darunter. Gilt auf allen Seiten. */
.phh-section:has(.phh-cta-band) { padding-top: 32px; padding-bottom: 72px; }
.phh-cta-band { position: relative; overflow: hidden; padding: 56px 44px; text-align: center; background: radial-gradient(circle at top left, rgba(143,160,140,0.18), transparent 42%), linear-gradient(160deg, #2b3429 0%, #21271f 100%); border: 1px solid rgba(255,255,255,0.10); clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); }
.phh-cta-band h2 { font-size: clamp(2.1rem, 3.8vw, 3.2rem); font-weight: 500; color: #f6f4ef; }
.phh-cta-band p { color: rgba(232,237,230,0.80); margin-top: 14px; max-width: 54ch; margin-left: auto; margin-right: auto; }
.phh-root .phh-cta-band a.phh-btn-ghost { color: #f4f7f2; border-color: rgba(255,255,255,0.5); }
@media (max-width: 380px) {
  /* Sehr schmale Geraete: Ueberschriften etwas kleiner, damit gebundene
     Wortpaare in eine Zeile passen und kein Wort allein stehen bleibt. */
  .phh-h2 { font-size: 1.78rem; }
  .phh-page-hero h1 { font-size: 1.95rem; }
}
@media (max-width: 520px) {
  /* mehr Platz fuer den Text, damit Ortsnamen nicht allein umbrechen */
  .phh-cta-band { padding: 44px 20px; }
  .phh-cta-band h2 { font-size: clamp(1.85rem, 7.4vw, 3.2rem); }
}
.phh-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }

/* ---------- Karriere ---------------------------------------------------
   Vollstaendig von Phils Zweig uebernommen (24.08.2026). Meine erste Fassung
   war eine Zeile im Abschlussband auf „Ueber uns“; Phil hat daraus ein
   eigenes Band plus eine Kachel gemacht, die auf allen Seiten steht. Das
   trifft Alex' Wunsch besser. */
.phh-karriere-abschnitt { padding-top: 46px; padding-bottom: 64px; }
.phh-section:has(.phh-cta-band) + .phh-karriere-abschnitt { padding-top: 4px; }

/* ---------- Karriere-Kachel am Seitenende ----------
   Schmale Fassung des Karriere-Bands, direkt unter dem Termin-Band.
   Bewusst heller und flacher, damit sie das Termin-Band nicht ueberstrahlt. */
.phh-karriere-kachel {
  display: grid; gap: 22px; padding: 28px 26px;
  background: rgba(143,160,140,0.10);
  border: 1px solid rgba(143,160,140,0.28);
  border-left: 3px solid var(--hc-warm);
  clip-path: var(--clip-12);
}
.phh-karriere-kachel-label {
  display: block; margin-bottom: 10px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--hc-warm);
}
.phh-karriere-kachel h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 600; line-height: 1.2;
  color: var(--hc-text);
}
.phh-karriere-kachel h3 .phh-serif { color: var(--hc-sage-deep); }
.phh-karriere-kachel p {
  margin: 10px 0 0; color: rgba(47,49,45,0.80);
  font-size: 1rem; line-height: 1.65; max-width: 52ch;
}
.phh-karriere-kachel-aktion { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.phh-karriere-kachel-mehr {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.92rem; font-weight: 600; color: var(--hc-sage-dark);
}
@media (max-width: 959px) { .phh-karriere-kachel-mehr { padding: 11px 0; } }
@media (min-width: 860px) {
  .phh-karriere-kachel {
    grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: 40px; padding: 32px 38px;
  }
  .phh-karriere-kachel-aktion { align-items: flex-end; }
}

/* ---------- Karriere-Band ----------
   Dunkle Karte mitten auf heller Seite: das Teamfoto liegt als breiter
   Streifen oben und laeuft nach unten ins Dunkle aus, darunter steht der Text.
   In einer schmalen Seitenspalte muesste das Gruppenfoto hochkant beschnitten
   werden — dabei fallen die aeusseren Personen aus dem Bild. */
.phh-karriere-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(143,160,140,0.16), transparent 62%),
    linear-gradient(168deg, #2b3429 0%, #1e241d 100%);
  border: 1px solid rgba(255,255,255,0.10);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}

.phh-karriere-foto { position: relative; aspect-ratio: 16 / 11; }
.phh-karriere-foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block;
}
/* Foto laeuft nach unten in die Kartenfarbe aus, statt hart abzuschneiden */
.phh-karriere-foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(30,36,29,0) 42%, rgba(30,36,29,0.55) 72%, rgba(30,36,29,0.95) 92%, #1e241d 100%);
}

/* Kein Hochziehen ins Foto mehr: vorher lag der halbe Textblock noch auf
   dem Bild, dadurch wirkte alles nach oben gerutscht und gedraengt. */
.phh-karriere-inhalt { position: relative; padding: 30px 26px 42px; }
.phh-karriere-inhalt .phh-eyebrow {
  background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); color: rgba(232,237,230,0.86);
}
.phh-karriere-inhalt h2 {
  margin-top: 12px; color: #f6f4ef; font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 3.05rem); line-height: 1.05;
}
.phh-karriere-inhalt h2 .phh-serif { color: var(--hc-warm-soft); }
.phh-karriere-inhalt p {
  margin: 18px 0 0; color: rgba(232,237,230,0.84);
  font-size: clamp(1.02rem, 1.25vw, 1.13rem); line-height: 1.75; max-width: 46ch;
  /* gleich lange Zeilen statt Flattersatz — braucht .phh-root davor,
     sonst gewinnt die allgemeine pretty-Regel */
}
.phh-root .phh-karriere-inhalt p { text-wrap: balance; }

/* Kleine Ueberschrift ueber den Merkmalen — gibt der rechten Spalte Halt */
.phh-karriere-label {
  display: block; margin-bottom: 14px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(232,237,230,0.52);
}
/* Merkmale als gleich breite Zeilen statt als ausgefranster Kachelblock:
   vorher standen sie zu zweit nebeneinander mit unterschiedlichen Breiten,
   die rechte Kante war zackig. */
.phh-karriere-chips {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.phh-karriere-chips li {
  display: flex; align-items: center; gap: 13px; padding: 12px 16px;
  font-size: 0.94rem; font-weight: 600; color: #e9ede7; line-height: 1.3;
  background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.14);
  clip-path: var(--clip-10);
}
.phh-karriere-chips .ic {
  flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center;
  background: rgba(217,101,15,0.16); border: 1px solid rgba(217,101,15,0.34);
  color: var(--hc-warm-soft); clip-path: var(--clip-10);
}

.phh-karriere-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.phh-root .phh-karriere-band a.phh-btn-ghost { color: #f4f7f2; border-color: rgba(255,255,255,0.48); }
@media (min-width: 1024px) {
  .phh-root .phh-karriere-band a.phh-btn-ghost:hover { background: rgba(255,255,255,0.10); }
}

/* Ab Tablet: flacherer Fotostreifen, Text darunter in zwei Spalten */
@media (min-width: 860px) {
  .phh-karriere-foto { aspect-ratio: 21 / 8; }
  .phh-karriere-inhalt {
    padding: 52px 64px 64px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 26px 72px; align-items: end;
  }
  .phh-karriere-kopf { grid-column: 1; }
  .phh-karriere-seite { grid-column: 2; }
  .phh-karriere-actions { margin-top: 30px; }
}


/* ---------- Kontakt / Formular ---------- */
.phh-form { padding: 30px; background: linear-gradient(180deg, rgba(252,250,247,0.94), rgba(249,246,241,0.98)); border: 1px solid rgba(216,209,199,0.88); box-shadow: var(--hc-shadow-soft); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.phh-field { margin-bottom: 16px; }
.phh-field label:not(.phh-checkbox), .phh-field .phh-field-label { display: block; font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hc-soft); margin-bottom: 8px; }
.phh-field input:not([type="checkbox"]), .phh-field textarea, .phh-field select { width: 100%; padding: 13px 15px; background: rgba(252,250,247,0.7); border: 1px solid var(--hc-line); color: var(--hc-text); font-size: 0.97rem; font-family: inherit; clip-path: var(--clip-10); }
.phh-field input::placeholder, .phh-field textarea::placeholder { color: #a8a89f; }
.phh-field input:focus, .phh-field textarea:focus, .phh-field select:focus { outline: none; border-color: var(--hc-sage); }
.phh-field textarea { resize: vertical; min-height: 120px; }
/* Handy: mind. 16px, sonst zoomt iOS/Safari beim Antippen automatisch rein */
@media (max-width: 959px) {
  .phh-field input:not([type="checkbox"]), .phh-field textarea, .phh-field select { font-size: 16px; }
  .phh-checkbox, .phh-checkbox span { font-size: 15px; }
}
.phh-checkbox { display: flex; align-items: flex-start; gap: 18px; font-size: 0.95rem; color: rgba(47,49,45,0.86); line-height: 1.6; }
.phh-checkbox input { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; accent-color: var(--hc-sage-dark); }
/* Auf dem Handy groesser und mit groesserem Trefferfeld: 20 px sind mit dem
   Daumen kaum zu treffen, 24 px plus Innenabstand liegen im brauchbaren
   Bereich. Ohne Einwilligung geht das Formular nicht ab, das Kaestchen muss
   also sicher zu treffen sein. */
@media (max-width: 860px) {
  .phh-checkbox input { width: 24px; height: 24px; }
  .phh-checkbox { gap: 14px; }
}
.phh-checkbox a { color: var(--hc-sage-dark); font-weight: 700; text-decoration: underline; }
.phh-form-success { text-align: center; padding: 28px 10px; }
.phh-form-success h3 { color: var(--hc-sage-dark); margin-bottom: 10px; }

/* ---------- Dunkelgruene Formular-Variante (Terminanfrage) ----------
   Helle Schrift auf dunklem Grund, Felder deutlich abgesetzt — bewusst
   kontraststark, weil das Formular von aelteren Besuchern ausgefuellt wird. */
.phh-form-dark { background: linear-gradient(160deg, #2b3429 0%, #21271f 100%); border-color: rgba(255,255,255,0.12); }
.phh-form-dark .phh-book-label { color: rgba(232,237,230,0.78); }
.phh-form-dark .phh-book-step .num { background: var(--hc-warm); color: #fff; }
.phh-form-dark .phh-chip { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.22); color: #eef2ec; }
.phh-form-dark .phh-chip:hover { background: rgba(255,255,255,0.13); border-color: var(--hc-sage); }
.phh-form-dark .phh-chip.sel { background: var(--hc-warm); border-color: var(--hc-warm); color: #fff; }
.phh-form-dark .phh-field label, .phh-form-dark .phh-field .phh-field-label { color: rgba(232,237,230,0.80); }
.phh-form-dark .phh-field input:not([type="checkbox"]),
.phh-form-dark .phh-field textarea,
.phh-form-dark .phh-field select { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.24); color: #f4f7f2; }
.phh-form-dark .phh-field input::placeholder,
.phh-form-dark .phh-field textarea::placeholder { color: rgba(232,237,230,0.52); }
.phh-form-dark .phh-field input:focus,
.phh-form-dark .phh-field textarea:focus,
.phh-form-dark .phh-field select:focus { border-color: var(--hc-sage); background: rgba(255,255,255,0.12); }
.phh-form-dark .phh-file { border-color: rgba(255,255,255,0.34); background: rgba(255,255,255,0.06); color: rgba(232,237,230,0.88); }
.phh-form-dark .phh-file:hover { background: rgba(255,255,255,0.12); }
.phh-form-dark .phh-file .fname { color: #f4f7f2; }
.phh-form-dark .phh-book-summary { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); border-left-color: var(--hc-warm); color: rgba(232,237,230,0.92); }
.phh-form-dark .phh-book-summary b { color: #fff; }
.phh-form-dark .phh-checkbox { color: rgba(232,237,230,0.90); }
.phh-form-dark .phh-checkbox a { color: #fff; }
.phh-form-dark .phh-checkbox input { accent-color: var(--hc-warm); }
.phh-form-dark .phh-muted { color: rgba(232,237,230,0.72); }
.phh-form-dark .phh-form-success h3 { color: #f6f4ef; }
.phh-form-dark .phh-form-success p { color: rgba(232,237,230,0.90); }
.phh-form-dark .phh-form-success svg { color: var(--hc-sage) !important; }
.phh-form-dark .phh-form-success a { color: var(--hc-warm) !important; }

.phh-contact-info { display: grid; gap: 18px; }
/* Kontakt-Sektion: Öffnungszeiten-Karte bündig nach unten */
.phh-contact-split > div:first-child { display: flex; flex-direction: column; }
.phh-contact-split > div:first-child > .phh-card { margin-top: auto; }
.phh-contact-split > div:last-child { display: flex; flex-direction: column; }
/* Die Formularkarte waechst NICHT auf die volle Spaltenhoehe.
   Vorher stand hier flex:1. Damit wurde die Karte auf die Hoehe der linken
   Spalte gezogen (1058 px), obwohl das Formular nur rund 600 px braucht —
   darunter klaffte eine grosse leere cremefarbene Flaeche und die Sektion
   wirkte aus dem Gleichgewicht. Jetzt ist die Karte so hoch wie ihr Inhalt
   und sitzt oben. Die Spalte selbst ist durchsichtig, es bleibt also keine
   sichtbare Luecke zurueck. */
.phh-contact-split > div:last-child > .phh-form { flex: 0 0 auto; }

/* Das Formular bleibt beim Scrollen stehen, waehrend links die Adresse und
   die Oeffnungszeiten vorbeilaufen. So ist der Weg zur Anfrage immer nur
   einen Blick entfernt, statt nach oben zurueckscrollen zu muessen.
   96 px Abstand: die Kopfzeile liegt fest oben und ist rund 72 px hoch.

   Bedingung min-height: Kleben ergibt nur Sinn, wenn das Formular (651 px)
   samt Abstand ins Fenster passt. Auf flachen Fenstern bliebe sonst das
   untere Ende samt Absende-Knopf dauerhaft ausserhalb des Bildes. */
@media (min-width: 960px) and (min-height: 780px) {
  .phh-contact-split > div:last-child > .phh-form,
  .phh-kontakt-split > div:last-child > .phh-form {
    position: sticky;
    top: 96px;
  }
}
/* Beschriftung und Wert stehen als enges Paar auf der Hoehe des Symbols.
   Vorher klaffte zwischen „Lieber anrufen?“ und der Nummer eine Zeile Luft,
   und der Text begann oben am Symbolkasten statt auf seiner Mitte. */
.phh-contact-row { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 14px; }
.phh-contact-row .ci { width: 48px; height: 48px; display: grid; place-items: center; background: rgba(217,101,15,0.12); border: 1px solid rgba(217,101,15,0.28); color: var(--hc-warm); clip-path: var(--clip-10); }
.phh-contact-row > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.phh-contact-row .ck { font-weight: 700; color: var(--hc-text); margin-bottom: 0; line-height: 1.3; }
/* lange Adressen brechen sonst aus der Spalte — break-words genuegt dafuer nicht */
.phh-contact-row > div, .phh-contact-row a { overflow-wrap: anywhere; }
.phh-contact-row a { color: rgba(47,49,45,0.88); }
/* Handy: die Tippflaeche bleibt ueber 44 px, der SICHTBARE Abstand wird per
   negativem Rand eingezogen. Loesung von Phil — meine Fassung hatte den
   Abstand verkleinert und damit auch die Tippflaeche. */
@media (max-width: 959px) {
  .phh-contact-row a { padding: 10px 0; display: inline-block; margin-top: -9px; }
}

/* ---------- Video-Kachel mit grosser Ansicht (Lightbox) ---------- */
.phh-videotile {
  position: relative; display: block; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  cursor: pointer; overflow: hidden;
}
.phh-videotile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phh-videotile-ovl {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,28,19,0.10) 0%, rgba(20,28,19,0.16) 55%, rgba(20,28,19,0.62) 100%);
}
.phh-videotile-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; display: grid; place-items: center;
  background: var(--hc-warm); color: #fff;
  clip-path: var(--clip-12);
  box-shadow: 0 12px 34px rgba(20,28,19,0.34);
  pointer-events: none;
}
.phh-videotile-label {
  position: absolute; left: 20px; bottom: 18px; pointer-events: none;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff; text-shadow: 0 2px 10px rgba(20,28,19,0.55);
}
.phh-videotile:focus-visible { outline: 3px solid var(--hc-warm); outline-offset: 3px; }

@media (min-width: 1024px) {
  .phh-videotile img { transition: transform 0.65s cubic-bezier(0.16,1,0.3,1); }
  .phh-videotile-play { transition: transform 0.3s ease, background-color 0.3s ease; }
  .phh-videotile:hover img { transform: scale(1.035); }
  .phh-videotile:hover .phh-videotile-play { transform: translate(-50%, -50%) scale(1.09); }
}

/* Grosse Ansicht ueber der ganzen Seite */
.phh-lightbox {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center; padding: 20px;
  background: rgba(12,18,12,0.93);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
@media (prefers-reduced-motion: no-preference) {
  .phh-lightbox { animation: phhFadeIn 0.22s ease-out; }
  @keyframes phhFadeIn { from { opacity: 0; } to { opacity: 1; } }
}
/* Rahmen traegt die schraegen Ecken. Das Video sitzt mit Abstand darin.
   Die Ecken sind 12px gross — deshalb muss der Innenabstand deutlich groesser
   sein, sonst schneidet die Diagonale in den Vollbild-Knopf. */
/* Breite so begrenzt, dass die Hoehe von selbst in den Bildschirm passt.
   (Ueber max-height wuerde das Seitenverhaeltnis ausgehebelt und der
   schwarze Streifen landete seitlich statt unten.) */
.phh-lightbox-inner { width: min(1560px, 100%, calc(74vh * 16 / 9.62)); }
.phh-lightbox-bar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.phh-lightbox-close {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 0 20px 0 16px;
  background: var(--hc-warm); color: #fff;
  border: 0; clip-path: var(--clip-10); cursor: pointer;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.02em;
  box-shadow: 0 10px 26px rgba(0,0,0,0.38);
}
.phh-lightbox-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (min-width: 1024px) {
  .phh-lightbox-close { transition: background-color 0.25s ease, transform 0.25s ease; }
  .phh-lightbox-close:hover { background: #c4570b; transform: translateY(-1px); }
}

.phh-lightbox-frame {
  padding: 22px;
  background: rgba(6,10,6,0.78);
  border: 1px solid rgba(255,255,255,0.10);
  clip-path: var(--clip-12);
}
.phh-lightbox-video {
  width: 100%; display: block; background: #000;
  /* Etwas hoeher als 16:9 und Bild nach oben gesetzt: unten entsteht ein
     schwarzer Streifen, in dem die Bedienleiste sitzt — sie liegt dadurch
     nicht mehr auf dem Bild und klebt nicht am Rand. */
  aspect-ratio: 16 / 9.62;
  object-fit: contain; object-position: center top;
}
@media (max-width: 640px) {
  .phh-lightbox { padding: 10px; }
  .phh-lightbox-frame { padding: 12px; }
  .phh-lightbox-inner { width: min(100%, calc(68vh * 16 / 10.6)); }
  .phh-lightbox-video { aspect-ratio: 16 / 10.6; }
  .phh-lightbox-close { min-height: 46px; font-size: 0.95rem; }
}

/* ---------- Rundgang zum Durchscrollen ----------
   Hoher Rahmen gibt den Scrollweg vor, darin klebt eine bildschirmhohe
   Buehne. Das Video laeuft mit dem Scrollen mit. */
/* Langer Scrollweg = langsamer Rundgang. 41 s Film auf ~7 Bildschirmhoehen. */
.phh-srg { position: relative; height: 1180vh; background: #141c13; }
.phh-srg-buehne {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto;
}
.phh-srg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; background: #141c13;
}
.phh-srg-schleier {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16,22,15,0.78) 0%, rgba(16,22,15,0.20) 26%,
                    rgba(16,22,15,0.20) 58%, rgba(16,22,15,0.86) 100%);
}
.phh-srg-kopf {
  position: relative; z-index: 2;
  padding: clamp(70px, 9vh, 110px) clamp(20px, 5vw, 72px) 0;
  color: #fff; text-shadow: 0 2px 20px rgba(10,16,9,0.7);
}
.phh-srg-kopf .phh-eyebrow {
  background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.24); color: rgba(255,255,255,0.92);
}
.phh-srg-kopf .phh-h2 { color: #fff; margin-top: 16px; max-width: 16ch; }
.phh-srg-kopf .phh-h2 .phh-serif { color: var(--hc-warm-soft, #f0a468); }

/* Station — wechselt beim Scrollen */
.phh-srg-station {
  position: relative; z-index: 2; align-self: end;
  margin: 0 clamp(20px, 5vw, 72px) clamp(84px, 12vh, 132px);
  max-width: 30rem; padding: 20px 24px;
  background: rgba(252,250,247,0.94);
  border: 1px solid rgba(143,160,140,0.28);
  clip-path: var(--clip-12);
  box-shadow: 0 18px 46px rgba(10,16,9,0.4);
  animation: phhSrgAuf 0.45s cubic-bezier(0.16,1,0.3,1);
}
@keyframes phhSrgAuf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.phh-srg-station b {
  display: block; font-size: 1.28rem; font-weight: 700; letter-spacing: -0.02em; color: var(--hc-text);
}
.phh-srg-station span { display: block; margin-top: 6px; font-size: 0.98rem; line-height: 1.55; color: rgba(47,49,45,0.8); }

/* Fortschritt unten */
.phh-srg-leiste {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 0 clamp(20px, 5vw, 72px) 26px;
}
.phh-srg-leiste .balken {
  width: 100%; max-width: 620px; height: 3px; background: rgba(255,255,255,0.22); overflow: hidden;
}
.phh-srg-leiste .balken i {
  display: block; height: 100%; background: var(--hc-warm); transform-origin: left; transform: scaleX(0);
}
.phh-srg-leiste .hinweis {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.86); text-shadow: 0 2px 12px rgba(10,16,9,0.6);
}
@media (prefers-reduced-motion: no-preference) {
  .phh-srg-leiste .hinweis { transition: opacity 0.4s ease; }
  .phh-srg-leiste .hinweis svg { animation: phhSrgTipp 1.8s ease-in-out infinite; }
  @keyframes phhSrgTipp { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
}
.phh-srg-leiste .hinweis.weg { opacity: 0; }

@media (max-width: 860px) {
  /* 980vh waren auf dem Handy 8271 px, also fast ZEHN Bildschirmhoehen
     Scrollen fuer ein einziges Video — mehr als die halbe Praxis-Seite.
     520vh reichen fuer den Rundgang: der Film ist 37,7 s lang, das sind
     rund sechs Bildschirme zum Durchgehen. Der Daumen kommt schneller
     voran, ohne dass die Bewegung hektisch wird. */
  .phh-srg { height: 520vh; }
  .phh-srg-station { margin-bottom: 92px; padding: 16px 18px; }
  .phh-srg-station b { font-size: 1.12rem; }
  .phh-srg-station span { font-size: 0.92rem; }
}

/* Ersatz fuer „Bewegung reduzieren“ */
.phh-srg-einfach { background: #141c13; padding: 40px 0; }
.phh-srg-einfach .phh-srg-video {
  position: static; display: block; width: min(1100px, 92%); height: auto; margin: 0 auto;
  aspect-ratio: 16 / 9; clip-path: var(--clip-12);
}

/* Startknopf */
.phh-videobtn {
  display: inline-flex; align-items: center; gap: 16px;
  margin: 0; padding: 12px 26px 12px 12px; border: 0;
  background: var(--hc-warm); color: #fff; cursor: pointer;
  text-align: left; clip-path: var(--clip-12);
  box-shadow: 0 16px 40px rgba(20,28,19,0.42);
}
.phh-videobtn .ic {
  flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center;
  background: rgba(255,255,255,0.18); clip-path: var(--clip-10);
}
.phh-videobtn .tx { display: flex; flex-direction: column; gap: 2px; }
.phh-videobtn .tx b { font-size: 1.06rem; font-weight: 700; letter-spacing: -0.01em; }
.phh-videobtn .tx > span {
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.82);
}
.phh-videobtn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (min-width: 1024px) {
  .phh-videobtn { transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
  .phh-videobtn:hover { background: #c4570b; transform: translateY(-2px); box-shadow: 0 22px 50px rgba(20,28,19,0.5); }
  .phh-videobtn .ic { transition: background-color 0.3s ease; }
  .phh-videobtn:hover .ic { background: rgba(255,255,255,0.28); }
}
@media (max-width: 860px) {
  /* auf schmalen Schirmen muss der Schleier ueber die ganze Breite decken */
  .phh-rundgangband-schleier {
    background: linear-gradient(180deg, rgba(20,28,19,0.86) 0%, rgba(20,28,19,0.90) 55%, rgba(20,28,19,0.94) 100%);
  }
  .phh-rundgangband { padding: 56px 0; }
  .phh-rundgangband-inhalt .phh-lead { margin-bottom: 26px; }
  .phh-videobtn { width: 100%; justify-content: center; padding: 12px 22px 12px 12px; }
}

/* ---------- Öffnungszeiten -----------------------------------------------
   EIN Regelsatz fuer alle drei Auftritte: Karte (Start/Kontakt/Termin), Menue
   und Fussbereich. Vorher gab es drei Klassensaetze fuer dieselbe Sache
   (.phh-hours, .phh-hours-row, .phh-hours-tab); gepflegt wurde immer nur
   einer, deshalb sah der Block je nach Seite anders aus.

   Satzregel: Tag und Uhrzeit brechen NIE innerhalb eines Wortes. Wird die
   Spalte zu schmal, rutscht die Uhrzeit als Ganzes eine Zeile tiefer und
   bleibt rechtsbuendig — das leistet flex-wrap zusammen mit margin-left:auto.
   Die Einheit „Uhr“ steht einmal in der Gruppenzeile statt hinter jeder
   Uhrzeit; das waren rund 30 px je Zeile, die den doppelten Umbruch auf dem
   Handy ausgeloest haben. */
.phh-zeiten { display: grid; gap: 22px; }
.phh-hours-li { display: block !important; }

/* Eigene Ueberschrift nur im Menue — im Fussbereich steht bereits ein h4 */
.phh-zeiten-kopf {
  display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.phh-zeiten-kopf svg { flex: 0 0 auto; color: var(--hc-sage-dark); }

/* Gruppenzeile: Wort links, Haarlinie in der Mitte, Einheit rechts */
.phh-zeiten-titel { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.phh-zeiten-titel b {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--hc-sage-dark); white-space: nowrap;
}
.phh-zeiten-titel::before {
  content: ''; order: 1; flex: 1 1 auto; min-width: 12px; height: 1px;
  background: rgba(143,160,140,0.34);
}
.phh-zeiten-titel i {
  order: 2; font-style: normal; white-space: nowrap;
  font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(47,49,45,0.45);
}

.phh-zeit-zeile {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(143,160,140,0.18);
  font-size: clamp(0.88rem, 3.4vw, 1rem); line-height: 1.45;
}
.phh-zeiten-gruppe .phh-zeit-zeile:last-child { border-bottom: none; }
.phh-zeit-zeile .tag { white-space: nowrap; font-weight: 600; color: var(--hc-text); }
.phh-zeit-zeile .uhr {
  margin-left: auto; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: rgba(47,49,45,0.82);
}
.phh-zeit-zeile .uhr.zu { color: rgba(47,49,45,0.5); }

.phh-zeiten-hinweis {
  margin: 0; padding-top: 14px; border-top: 1px solid rgba(143,160,140,0.2);
  font-size: 0.9rem; line-height: 1.6; color: rgba(47,49,45,0.72);
}
/* Sehr schmale Geraete (iPhone SE der ersten Reihe, alte Androiden): eine
   Nummer kleiner, damit Tag und Uhrzeit auch dort nebeneinander passen.
   Ab 360 px bleibt alles wie oben. */
@media (max-width: 359px) {
  .phh-zeit-zeile { font-size: 0.8rem; gap: 2px 10px; }
}

/* Kompaktfassung fuer Menue und Fussbereich: enger, ohne Trennlinien, und
   die Farben kommen vom Elternteil — so passt der Block auf jedem Grund. */
.phh-zeiten.kompakt { gap: 16px; }
.phh-zeiten.kompakt .phh-zeiten-titel { margin-bottom: 4px; }
.phh-zeiten.kompakt .phh-zeiten-titel b { color: inherit; opacity: 0.66; }
.phh-zeiten.kompakt .phh-zeiten-titel i { color: inherit; opacity: 0.42; }
.phh-zeiten.kompakt .phh-zeiten-titel::before { background: currentColor; opacity: 0.22; }
.phh-zeiten.kompakt .phh-zeit-zeile {
  padding: 4px 0; border-bottom: none; gap: 2px 14px; font-size: 0.88rem;
}
.phh-zeiten.kompakt .phh-zeit-zeile .tag { font-weight: 500; color: inherit; }
.phh-zeiten.kompakt .phh-zeit-zeile .uhr { color: inherit; opacity: 0.82; }
.phh-zeiten.kompakt .phh-zeit-zeile .uhr.zu { opacity: 0.55; }

.phh-map { width: 100%; border: 1px solid var(--hc-line); min-height: 320px; clip-path: var(--clip-12); filter: saturate(0.9) contrast(0.98); }
.phh-note-box { padding: 16px 18px; font-size: 1rem; color: rgba(47,49,45,0.86); line-height: 1.65; background: rgba(143,160,140,0.1); border: 1px solid rgba(143,160,140,0.2); border-left: 3px solid var(--hc-sage); clip-path: var(--clip-10); }

/* ---------- Rechts-Seiten ---------- */
/* ---------- Rechtsseiten: Impressum, Datenschutz, AGB, Widerruf ----------
   Der Text ist Kundentext und bleibt Wort fuer Wort unangetastet. Gestaltet
   wird nur die Darstellung: der Text liegt als Dokumentbogen auf dem cremen
   Grund, mit klarer Rangfolge der Ueberschriften und ruhigem Zeilenfall. */
/* Weniger Luft ueber dem Bogen — der Kopf und das Dokument gehoeren zusammen. */
.phh-legal-section { padding-top: clamp(28px, 4vw, 52px); }
.phh-legal {
  background: linear-gradient(180deg, rgba(252,250,247,0.97) 0%, rgba(247,243,238,0.99) 100%);
  border: 1px solid rgba(143,160,140,0.18);
  box-shadow: 0 18px 44px rgba(82,96,79,0.07), 0 2px 8px rgba(82,96,79,0.04);
  clip-path: var(--clip-14);
  padding: clamp(30px, 4.6vw, 68px) clamp(24px, 5vw, 82px);
}
.phh-legal > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.phh-legal > :first-child::before { display: none; }
.phh-legal h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 24px; line-height: 1.1; }

/* Hauptabschnitt: Haarlinie trennt, kleiner Orange-Strich markiert den Anfang.
   line-height wird bewusst zurueckgeholt — global steht 0.98, das klebt bei
   langen Ueberschriften wie „Berufsbezeichnung und berufsrechtliche …". */
.phh-legal h2 {
  position: relative;
  font-size: clamp(1.24rem, 1.9vw, 1.42rem);
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 52px 0 16px;
  padding-top: 30px;
  border-top: 1px solid rgba(143,160,140,0.26);
  /* „Verbraucherstreitbeilegung/Schlichtungsstelle:" ist laenger als eine
     Handy-Zeile. hyphens trennt, wo der Browser trennen kann; break-word ist
     das Netz darunter. Ohne dieses Netz steht das Wort bei 320 px ueber den
     Kasten hinaus — das sieht schlechter aus als ein Umbruch. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
@media (max-width: 460px) {
  /* Auf schmalen Handys etwas kleiner, damit lange Begriffe in zwei
     ordentliche Zeilen passen. */
  .phh-legal h2 { font-size: 1.12rem; }
}
.phh-legal h2::before {
  content: ''; position: absolute; top: -1px; left: 0;
  width: 34px; height: 2px; background: var(--hc-warm);
}

/* Unterpunkt: kleine, gesperrte Marke in Salbei — hebt sich klar vom
   Fliesstext ab, ohne mit den Hauptabschnitten zu konkurrieren. */
.phh-legal h3 {
  font-size: 0.83rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--hc-sage-deep);
  margin: 30px 0 10px;
}

.phh-legal p, .phh-legal li {
  line-height: 1.85;
  font-size: 1.03rem;
  color: rgba(47,49,45,0.9);
  margin-bottom: 14px;
  max-width: 68ch;              /* ruhiger Zeilenfall statt ueberlanger Zeilen */
  overflow-wrap: anywhere;      /* lange Adressen/URLs sprengen nichts */
  hyphens: auto;
  -webkit-hyphens: auto;
}
.phh-legal ul { list-style: none; padding-left: 0; margin: 0 0 18px; }
.phh-legal li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.phh-legal li::before {
  content: ''; position: absolute; left: 4px; top: 0.82em;
  width: 7px; height: 7px; background: var(--hc-sage);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.phh-legal a {
  color: var(--hc-sage-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(143,160,140,0.55);
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.phh-legal a:hover { color: var(--hc-warm); text-decoration-color: var(--hc-warm); }
.phh-legal strong { color: var(--hc-sage-deep); font-weight: 700; }

@media (max-width: 700px) {
  .phh-legal h2 { margin-top: 40px; padding-top: 24px; }
  .phh-legal p, .phh-legal li { font-size: 1rem; line-height: 1.8; }
}
/* Rechtsdokument als PDF (AGB, Widerruf) — unterschriebenes Original eingebettet */
.phh-doc-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 24px 0 30px; }
.phh-pdf { width: 100%; height: 80vh; min-height: 560px; border: 1px solid var(--hc-line); background: #fff; display: block; clip-path: var(--clip-12); }
/* PDF-Vorschau nur am Desktop: Handys/Tablets rendern eingebettete PDFs nicht
   und zeigten sonst nur einen leeren grauen Kasten. */
.phh-nur-handy { display: none; }
@media (max-width: 959px) {
  .phh-pdf-vorschau { display: none; }
  .phh-nur-handy { display: block; }
  .phh-doc-actions { flex-direction: column; align-items: stretch; }
  .phh-doc-actions .phh-btn { justify-content: center; }
}

/* ---------- Footer ---------- */
/* --treffer = zusaetzliches Treffefeld der Kontaktzeilen auf dem Handy.
   Muss VOR der Handy-Regel stehen, sonst ueberschreibt der Grundwert sie. */
.phh-footer { background: linear-gradient(180deg, #efeae2 0%, #e9e3d9 100%); border-top: 1px solid var(--hc-line); padding: 72px 0 28px; --treffer: 0px; }
.phh-footer h4 { color: var(--hc-text); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 18px; }
.phh-footer-zeiten h4 { display: flex; align-items: center; gap: 6px; }
.phh-footer-zeiten h4 svg { color: var(--hc-sage-dark); }
.phh-footer-grid { display: grid; grid-template-columns: 1fr; gap: 36px; margin-bottom: 44px; align-items: start; }
.phh-footer a { color: var(--hc-soft); transition: color 180ms ease; }
.phh-footer a:hover { color: var(--hc-sage-dark); }
.phh-footer-links { display: grid; gap: 13px; font-size: 1rem; }
/* Handy: mehr Abstand zwischen Links – bequemer zu treffen, kein Vertippen */
@media (max-width: 959px) {
  /* Zweispaltig auf dem Handy: Der Fuss war 1721 px hoch, also zwei volle
     Bildschirme. Die Laenge kam von den daumengrossen Treffefeldern, die
     bleiben auch so. Zwei Spalten halbieren die Hoehe, ohne dass ein
     Verweis kleiner wird. */
  .phh-footer-links { grid-template-columns: 1fr 1fr; gap: 4px 18px; }
  .phh-footer-links a { padding: 10px 0; }
  .phh-menu-legal { gap: 6px 20px; }
  .phh-menu-legal a { padding: 8px 0; }
  /* Vorher hatten NUR die Verweise ein Treffefeld. Ihre erste Textzeile begann
     dadurch 10 px tiefer als die der Adresse, und die Symbole standen um genau
     diese 10 px versetzt (von der Praxis am 20.08.2026 gemeldet). Jetzt haben
     alle drei Zeilen dasselbe Feld. */
  .phh-footer-contact a,
  .phh-footer-contact span { padding: 10px 0; display: inline-block; }
  .phh-footer-contact { --treffer: 10px; }
  .phh-logo { min-height: 44px; display: inline-flex; align-items: center; }
}
.phh-footer-contact { display: grid; gap: 14px; font-size: 1rem; line-height: 1.6; }
.phh-footer-contact div { display: flex; align-items: flex-start; gap: 10px; }
/* Die Adresse steht in einem span, Telefon und E-Mail in einem a. Die Regel
   `.phh-footer a` faerbte deshalb nur zwei von drei Angaben — der Strassenname
   wich sichtbar ab (von der Praxis am 20.08.2026 gemeldet). */
.phh-footer-contact span { color: var(--hc-soft); }
/* Symbol auf die Mitte der ERSTEN Textzeile setzen, nicht an deren Oberkante.
   (1.6em Zeilenhoehe minus 18px Symbol, halbiert.) Sonst sitzt das Symbol
   der zweizeiligen Adresse hoeher als die der einzeiligen Zeilen darunter. */
.phh-footer-contact svg { color: var(--hc-sage-dark); flex-shrink: 0; margin-top: calc((1.6em - 18px) / 2 + var(--treffer)); }
/* Logo doppelt so gross (104 -> 208px). Die Spalte waechst mit, damit der
   Block ausgewogen bleibt; der Text darunter behaelt seine Zeilenlaenge. */
.phh-footer-brand { max-width: 300px; }
.phh-footer-brand img { width: 100%; max-width: 208px; height: auto; margin-bottom: 18px; }
.phh-footer-brand p { margin: 0; text-wrap: pretty; }
.phh-footer-bottom { border-top: 1px solid var(--hc-line); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 12px 22px; justify-content: space-between; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hc-soft); }
.phh-footer-bottom .legal-links { display: flex; flex-wrap: wrap; gap: 16px; }
@media (max-width: 959px) {
  .phh-footer-bottom .legal-links { gap: 6px 20px; }
  .phh-footer-bottom .legal-links a { padding: 14px 0; }
}

/* ---------- Top-Button ---------- */
.phh-top { position: fixed; bottom: 24px; right: 24px; z-index: 70; width: 48px; height: 48px; cursor: pointer; border: none; background: var(--hc-sage-dark); color: #fcfaf7; display: grid; place-items: center; clip-path: var(--clip-12); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease; }
.phh-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.phh-top:hover { background: var(--hc-sage-deep); }

/* ============================================================
   EFFEKTE: Reveal + Wort-für-Wort (Wellness Nutritionist)
   ============================================================ */
.phh-root .reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.phh-root .reveal.active { opacity: 1; transform: none; }
.phh-root .reveal.delay-1 { transition-delay: 0.1s; }
.phh-root .reveal.delay-2 { transition-delay: 0.2s; }
.phh-root .reveal.delay-3 { transition-delay: 0.3s; }
.phh-root .reveal.delay-4 { transition-delay: 0.4s; }

/* Wort-Reveal: jedes Wort fährt aus einer Maske nach oben */
.phh-words .w { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.04; padding: 0.06em 0.04em 0.2em; margin: -0.06em -0.02em -0.2em; }
.phh-words .w > span { display: inline-block; transform: translateY(115%); transition: transform 0.85s cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--i, 0) * 70ms); }
.phh-words.active .w > span { transform: translateY(0); }

/* ============================================================
   DESKTOP HOVER (Regel 12) — meiste Transitions sind leicht,
   aufwändigere Scale-/Float-Effekte nur Desktop.
   ============================================================ */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 700px) {
  .phh-grid-2 { grid-template-columns: 1fr 1fr; }
  .phh-gallery { grid-template-columns: 1fr 1fr; }
  .phh-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 960px) {
  .phh-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .phh-split { grid-template-columns: 1fr 1fr; gap: 56px; }
  .phh-split.wide-media { grid-template-columns: 1.05fr 0.95fr; }
  /* Video traegt die Sektion — bekommt deshalb mehr Breite als der Text */
  .phh-split.media-gross { grid-template-columns: 0.86fr 1.14fr; gap: 52px; }
  /* Editorial-Buehne: Text links am Rand (3D-Wirbelsaeule auf Kundenwunsch entfernt) */
  .phh-hero-stage { grid-template-columns: 1fr; gap: 56px; }
  .phh-hero-content { max-width: 860px; padding-right: 24px; }
  .phh-hero-kicker { font-size: 11px; letter-spacing: 0.3em; gap: 14px; }
  .phh-hero-kicker::before { width: 44px; }
  /* Serif-Zeile linksbündig; eine Zeile bleibt eine Zeile */
  .phh-hero .phh-hero-title .phh-serif { white-space: nowrap; }
  /* Fußzeile in einer Reihe, über die volle Breite verteilt */
  .phh-hero-foot { flex-wrap: nowrap; gap: 34px; justify-content: space-between; }
  .phh-hero-foot .rate, .phh-hero-foot .cred { white-space: nowrap; }
  .phh-hero-foot .scrollcue { display: inline-flex; }
  .phh-gallery { grid-template-columns: repeat(3, 1fr); }
  /* Feste Höhe: alle drei Karten-Rahmen exakt gleich groß */
  .phh-stack-card { grid-template-columns: 1.08fr 1fr; height: 456px; }
  /* Bild füllt den Rahmen ruhig (kein Parallax hier — flackert sonst in den
     sticky Karten mit clip-path). Bewegung macht der Stapel-Effekt der Karten. */
  .phh-stack-img img { height: 100%; }
  .phh-stack-content { padding: 48px 56px; }
  /* Karte II gespiegelt: Bild links, Text rechts — Rhythmus im Stapel */
  .phh-stack-card:nth-child(2) { grid-template-columns: 1fr 1.08fr; }
  .phh-stack-card:nth-child(2) .phh-stack-img { order: -1; }
  .phh-menu-inner { grid-template-columns: 1.35fr 0.8fr; gap: 24px 64px; align-items: start; }
  .phh-menu-cta { align-self: start; }
  .phh-menu-legal { grid-column: 1 / -1; }
  .phh-footer-grid { grid-template-columns: 1.1fr 1fr 1fr 1.3fr; gap: 40px; }
  /* Die Oeffnungszeiten bekommen ein eigenes Band ueber die volle Breite,
     mit beiden Tabellen nebeneinander. Als Anhaengsel unter „Kontakt“ war
     die Spalte 160 px hoeher als alle anderen — der Fussbereich wirkte schief.
     Eine eigene schmale Spalte geht nicht: eine Tabelle braucht 274 px,
     die haette erst ab rund 1400 px Fensterbreite Platz. */
  .phh-footer-zeiten {
    grid-column: 1 / -1;
    padding-top: 28px; margin-top: 4px;
    border-top: 1px solid var(--hc-line);
  }
  .phh-footer-zeiten .phh-zeiten { grid-auto-flow: column; justify-content: start; gap: 18px 72px; }
  .phh-footer-zeiten .phh-zeiten-gruppe { min-width: 274px; }
}
@media (min-width: 1024px) {
  .phh-nav-actions { gap: 18px; }
  /* Logo bleibt auf allen Breiten gleich gross — sonst wird der Abstand zur Kopfzeile zu eng */
  .phh-nav-phone { display: inline-flex; }
  .phh-nav-cta { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .phh-story-live i { animation: none; }
  .phh-root .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .phh-words .w > span { transform: none !important; transition: none !important; }
  .phh-root * { scroll-behavior: auto !important; }
}

/* ---------- Ihr erster Besuch (Praxis-Seite) ----------
   Bewusst ruhig: keine Karten-Kaesten, nur feine Trennlinien — damit die
   Seite nicht unruhig wird. Auf dem Handy untereinander. */
.phh-erstbesuch { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 940px; margin: 0 auto; }
.phh-erstbesuch-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 4px; border-top: 1px solid rgba(143,160,140,0.22); }
.phh-erstbesuch-item:last-child { border-bottom: 1px solid rgba(143,160,140,0.22); }
.phh-erstbesuch-item .phh-card-icon { width: 44px; height: 44px; margin-bottom: 2px; }
.phh-erstbesuch-item .phh-card-icon svg { width: 21px; height: 21px; }
.phh-erstbesuch-item h3 { font-size: 1.08rem; letter-spacing: -0.03em; margin: 0; color: var(--hc-text); }
.phh-erstbesuch-item p { margin: 0; color: rgba(47,49,45,0.80); line-height: 1.7; font-size: 0.98rem; max-width: 46ch; }
@media (min-width: 760px) {
  .phh-erstbesuch { grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
  .phh-erstbesuch-item:nth-child(2) { border-top: 1px solid rgba(143,160,140,0.22); }
  .phh-erstbesuch-item:nth-child(3) { border-bottom: none; }
}
@media (min-width: 1100px) {
  .phh-erstbesuch { grid-template-columns: repeat(4, 1fr); gap: 0 40px; }
  .phh-erstbesuch-item, .phh-erstbesuch-item:last-child { border-bottom: none; }
}

/* Ortszeile in der Startseiten-H1: klein und zurueckhaltend ueber der
   Markenzeile — bringt das wichtigste lokale Keyword in die H1, ohne die
   emotionale Aussage zu ueberdecken. */
.phh-hero-ort { display: flex; width: fit-content; align-items: center; gap: 12px; font-family: inherit; font-size: clamp(10px, 1.1vw, 11px); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(232,237,230,0.78); margin-bottom: 18px; }
.phh-hero-ort::before { content: ''; width: 28px; height: 1px; background: var(--hc-warm); flex: 0 0 auto; }
@media (min-width: 960px) { .phh-hero-ort { letter-spacing: 0.3em; gap: 14px; } .phh-hero-ort::before { width: 44px; } }

/* ---------- Rundgang: Hinweis waehrend des Ladens ---------- */
.phh-srg-laedt {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  background: rgba(20,28,19,0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: rgba(244,247,242,0.92);
  font-size: 0.92rem; letter-spacing: 0.02em;
  clip-path: var(--clip-10);
}
.phh-srg-laedt .punkte { display: inline-flex; gap: 5px; }
.phh-srg-laedt .punkte i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--hc-sage);
}
@media (prefers-reduced-motion: no-preference) {
  .phh-srg-laedt .punkte i { animation: phhPunkt 1.1s ease-in-out infinite; }
  .phh-srg-laedt .punkte i:nth-child(2) { animation-delay: 0.15s; }
  .phh-srg-laedt .punkte i:nth-child(3) { animation-delay: 0.3s; }
  @keyframes phhPunkt { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
}

/* ==================================================================
   MOBIL-FEINSCHLIFF (gemessen, nicht geraten)
   Aus dem Handy-Audit vom 09.08.2026 bei 320, 390 und 430 px.
   Grundsatz: nichts abschalten, nur lesbar und treffbar machen.
   ================================================================== */
@media (max-width: 860px) {
  /* Marken- und Hinweistexte lagen bei 10 bis 10,5 px. Das ist auf dem
     Handy zu klein, besonders in Versalien mit weiter Sperrung. 11 px ist
     die Untergrenze, die noch zum Stil passt. */
  .phh-hero-ort { font-size: 11px; letter-spacing: 0.16em; }
  .phh-story-live { font-size: 11px; letter-spacing: 0.14em; }
  .phh-story-hint { font-size: 11px; letter-spacing: 0.16em; }
  .phh-story-head .issue { font-size: 11px; }

  /* Telefonnummer im Fuss war 112 x 18 px und damit kaum zu treffen. */
  .phh-footer a[href^="tel:"], .phh-footer a[href^="mailto:"] {
    display: inline-block; padding: 9px 0; min-height: 40px;
  }
}

/* Restliche Befunde aus dem Handy-Audit */
@media (max-width: 860px) {
  /* Telefon-Verweise liegen nicht alle im Fuss; global auf Daumengroesse.
     Gemessen war einer 112 x 18 px. */
  .phh-root a[href^="tel:"], .phh-root a[href^="mailto:"] { min-height: 40px; }
  .phh-root a[href^="tel:"]:not(.phh-btn), .phh-root a[href^="mailto:"]:not(.phh-btn) {
    display: inline-flex; align-items: center; padding: 8px 0;
  }
  /* Restliche 10-px-Marken */
  .phh-story-head span { font-size: 11px; }
  .phh-teamcard-tag .z { font-size: 11px; }
  .phh-aura .tag { font-size: 11px; }
}
@media (max-width: 400px) {
  /* „ganzheitlich gedacht." stand in Kursiv 4 px ueber den rechten Rand.
     Etwas kleiner gesetzt passt die Zeile sauber ins Bild. */
  .phh-hero .phh-hero-title { font-size: clamp(2.1rem, 9.5vw, 2.6rem); }
}

/* ---------- Formulare auf dem Handy ----------
   Gemessen bei 390 px: Die Karte hatte 30 px Innenrand, dadurch blieben den
   Feldern nur 288 px von 390. Mit 20 px Innenrand werden es 308 px, ohne
   dass die Karte gedraengt wirkt. Die Felder bleiben 52 px hoch und 16 px
   gross — 16 px ist wichtig, sonst zoomt iOS beim Antippen hinein. */
@media (max-width: 560px) {
  .phh-form { padding: 22px 20px; }
  .phh-field { margin-bottom: 14px; }
  /* Der Zustimmungstext stand in einer schmalen Spalte neben dem Kaestchen
     und brach dadurch stark um. Weniger Abstand gibt dem Satz mehr Breite. */
  .phh-checkbox { gap: 12px; }
  .phh-checkbox span { line-height: 1.55; }
}

/* ---------- „Mehr über uns"-Knopf im Split ----------
   Der Knopf ist ein eigenes Rasterelement. Auf dem Handy (eine Spalte)
   landet er damit von selbst UNTER den Bildern. Am Desktop wird er zurueck
   in die linke Spalte unter den Text geschoben, und die Bilder spannen
   ueber beide Zeilen — sonst wuerde der Knopf die Sektion auseinanderziehen. */
.phh-split-cta { justify-self: start; margin-top: 4px; }
@media (min-width: 960px) {
  /* Alle drei Plaetze ausdruecklich setzen. Mit nur EINER Regel ordnete das
     Raster die Elemente selbst neu an: die Bilder rutschten nach links und
     der Knopf hing allein unten. */
  .phh-split:has(> .phh-split-cta) > *:nth-child(1) { grid-column: 1; grid-row: 1; }
  .phh-split:has(> .phh-split-cta) > *:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
  .phh-split:has(> .phh-split-cta) > .phh-split-cta { grid-column: 1; grid-row: 2; align-self: start; margin-top: 30px; }
}

/* ---------- Karten-Tor (Datenschutz) ----------
   Die Google-Karte lud frueher sofort mit dem Seitenaufruf und schickte
   dabei die IP-Adresse jedes Besuchers an Google. Jetzt steht davor diese
   Flaeche, und erst ein Klick laedt die Karte. */
.phh-map-gate {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 28px 24px;
  background: linear-gradient(180deg, rgba(238,243,236,0.9) 0%, rgba(231,238,229,0.95) 100%);
  border: 1px solid rgba(143,160,140,0.22);
  clip-path: var(--clip-12);
  color: var(--hc-soft);
}
.phh-map-gate svg { color: var(--hc-sage-dark); }
.phh-map-gate p { margin: 0; font-size: 0.92rem; line-height: 1.6; max-width: 42ch; }
.phh-map-gate-link { font-size: 0.86rem; color: var(--hc-sage-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Cookie-Banner (eigener Baustein im Praxis-Design) ----------
   Beide Knoepfe stehen bewusst gleich gross und gleich auffaellig
   nebeneinander. „Ablehnen" darf nicht schwerer zu treffen sein als
   „Zustimmen" — das verlangt Paragraf 25 TDDDG in der Auslegung der
   Aufsichtsbehoerden. */
.phh-cc {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  display: flex; justify-content: center;
  padding: clamp(12px, 2.5vw, 24px);
  pointer-events: none;
}
.phh-cc-karte {
  pointer-events: auto;
  width: 100%; max-width: 720px;
  background: linear-gradient(180deg, rgba(252,250,247,0.985) 0%, rgba(247,243,238,0.99) 100%);
  border: 1px solid rgba(143,160,140,0.3);
  box-shadow: 0 26px 60px -18px rgba(32,28,23,0.34), 0 2px 10px rgba(32,28,23,0.08);
  clip-path: var(--clip-14);
  padding: clamp(20px, 3vw, 28px);
  max-height: 84vh; overflow-y: auto;
}
.phh-cc-kopf { display: flex; gap: 16px; align-items: flex-start; }
.phh-cc-icon {
  flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center;
  background: rgba(217,101,15,0.12); border: 1px solid rgba(217,101,15,0.3);
  color: var(--hc-warm); clip-path: var(--clip-10);
}
.phh-cc-karte h2 {
  font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.02em;
  margin: 0 0 8px; color: var(--hc-text);
}
.phh-cc-karte p { margin: 0; font-size: 0.93rem; line-height: 1.65; color: var(--hc-soft); }

.phh-cc-mehr {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  font-family: inherit; font-size: 0.86rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--hc-sage-deep);
}
.phh-cc-mehr svg { transition: transform 200ms ease; }
.phh-cc-mehr.auf svg { transform: rotate(180deg); }

.phh-cc-liste { margin: 6px 0 4px; border-top: 1px solid rgba(143,160,140,0.25); }
.phh-cc-zeile {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid rgba(143,160,140,0.18);
  cursor: pointer;
}
.phh-cc-zeile.fest { cursor: default; }
.phh-cc-zeile b { display: block; font-size: 0.94rem; color: var(--hc-text); margin-bottom: 3px; }
.phh-cc-zeile span { display: block; font-size: 0.85rem; line-height: 1.55; color: var(--hc-soft); }
.phh-cc-zeile input { width: 24px; height: 24px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--hc-sage-dark); }
.phh-cc-fest { flex: 0 0 auto; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hc-sage-deep); white-space: nowrap; margin-top: 3px; }

.phh-cc-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.phh-cc-btn {
  flex: 1 1 180px; min-height: 48px; padding: 13px 20px; cursor: pointer;
  font-family: inherit; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.02em;
  clip-path: var(--clip-10); border: 1px solid transparent;
  transition: background 180ms ease, border-color 180ms ease;
}
/* BEIDE Knoepfe gefuellt und gleich gross. Ein umrandeter „Ablehnen"-Knopf
   neben einem gefuellten „Annehmen"-Knopf waere zwar gleich GROSS, aber nicht
   gleich AUFFAELLIG — genau das beanstanden die Aufsichtsbehoerden als
   Nudging. Unterschieden wird nur ueber die Farbe, nicht ueber das Gewicht. */
.phh-cc-btn-ab { background: var(--hc-sage-dark); color: #fcfaf7; }
.phh-cc-btn-ab:hover { background: var(--hc-sage-deep); }
.phh-cc-btn-zu { background: var(--hc-warm); color: #fff; }
.phh-cc-btn-zu:hover { background: #c25a0d; }

.phh-cc-fuss { margin-top: 14px !important; font-size: 0.82rem !important; }
.phh-cc-fuss a { color: var(--hc-sage-deep); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .phh-cc-karte h2 { font-size: 1.05rem; }
  .phh-cc-btn { flex: 1 1 100%; }
}

/* Widerruf-Knopf in der Fusszeile sieht aus wie die anderen Rechtslinks */
.phh-consent-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: none;
}

/* ==================================================================
   AnimaContent Marketing-Tool im Praxis-Design
   Muster: marketing-tool-pattern (Vorbild ElsaMarketing).
   Schwebender Knopf IMMER unten links. Fenster scrollt (max 95vh) —
   ohne das bricht es auf kleinen Bildschirmen.
   Im Fenster bewusst KEINE Zierschrift der Praxis: Serifen-Kursiv wirkt
   dort verspielt statt geschaeftlich. Nur die Zitat-Karte ist Serife.
   ================================================================== */
.phh-mkt-knopf { position: fixed; bottom: 24px; left: 24px; z-index: 80; background: none; border: 0; padding: 0; cursor: pointer; }
.phh-mkt-knopf .ping { position: absolute; inset: 0; border-radius: 999px; background: rgba(217,101,15,0.28); animation: phhMktPing 2.4s cubic-bezier(0,0,0.2,1) infinite; }
@keyframes phhMktPing { 0% { transform: scale(1); opacity: 0.5; } 75%, 100% { transform: scale(1.9); opacity: 0; } }
.phh-mkt-knopf .kreis {
  position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 999px;
  background: linear-gradient(145deg, #2b3429, #21271f);
  border: 1px solid rgba(143,160,140,0.45);
  box-shadow: 0 6px 22px rgba(32,28,23,0.28);
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}
.phh-mkt-knopf:hover .kreis { transform: scale(1.08); border-color: var(--hc-warm); box-shadow: 0 10px 34px rgba(217,101,15,0.34); }
.phh-mkt-knopf img { width: 28px; height: 28px; object-fit: contain; transition: transform 700ms ease; }
.phh-mkt-knopf:hover img { transform: rotate(360deg); }

.phh-mkt-schleier {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  padding: 16px; opacity: 0; transition: opacity 280ms ease;
  background: radial-gradient(ellipse at 30% 20%, rgba(143,160,140,0.12), transparent 60%), rgba(24,29,22,0.94);
}
.phh-mkt-schleier.auf { opacity: 1; }
.phh-mkt-partikel { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.phh-mkt-partikel span { position: absolute; bottom: -12px; border-radius: 999px; background: rgba(217,101,15,0.22); animation-name: phhMktFloat; animation-timing-function: ease-in; animation-iteration-count: infinite; }
@keyframes phhMktFloat { from { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } to { transform: translateY(-104vh); opacity: 0; } }

.phh-mkt-karte {
  position: relative; width: 100%; max-width: 880px;
  max-height: 95vh; overflow-y: auto;          /* PFLICHT — nicht entfernen */
  background: linear-gradient(180deg, #fcfaf7 0%, #f4f0ea 100%);
  border: 1px solid rgba(143,160,140,0.3);
  clip-path: var(--clip-14);
  transform: translateY(18px) scale(0.97); opacity: 0;
  transition: transform 320ms cubic-bezier(0.16,1,0.3,1), opacity 320ms ease;
}
.phh-mkt-karte.auf { transform: none; opacity: 1; }
.phh-mkt-zu { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; background: rgba(33,39,31,0.08); border: 0; cursor: pointer; color: var(--hc-text); clip-path: var(--clip-10); }
.phh-mkt-zu:hover { background: rgba(33,39,31,0.16); }

.phh-mkt-raster { display: grid; grid-template-columns: 1fr; }
@media (min-width: 820px) { .phh-mkt-raster { grid-template-columns: 1fr 1.05fr; } }

.phh-mkt-links { padding: clamp(24px, 3.4vw, 38px); background: linear-gradient(160deg, #21271f 0%, #2b3429 100%); color: #e8ede6; }
.phh-mkt-marke { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hc-sage); margin-bottom: 16px; }
.phh-mkt-links h3 { font-size: clamp(1.6rem, 3.2vw, 2.05rem); line-height: 1.12; font-weight: 800; letter-spacing: -0.03em; color: #f4f7f2; margin: 0 0 12px; }
.phh-mkt-links h3 .hell { color: var(--hc-warm-soft); }
.phh-mkt-lead { font-size: 0.96rem; line-height: 1.7; color: rgba(232,237,230,0.8); margin: 0 0 20px; }
.phh-mkt-usp { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.phh-mkt-usp li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; line-height: 1.5; color: #e8ede6; }
.phh-mkt-usp svg { flex: 0 0 auto; color: var(--hc-warm-soft); margin-top: 2px; }
.phh-mkt-rabatt { background: rgba(217,101,15,0.14); border: 1px solid rgba(217,101,15,0.36); padding: 15px 16px; clip-path: var(--clip-10); margin-bottom: 18px; }
.phh-mkt-rabatt b { display: block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hc-warm-soft); margin-bottom: 7px; }
.phh-mkt-rabatt span { display: block; font-size: 0.88rem; line-height: 1.55; color: rgba(232,237,230,0.9); }
.phh-mkt-rabatt code { font-weight: 700; color: #fff; letter-spacing: 0.04em; }
.phh-mkt-rabatt a { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 0.9rem; font-weight: 700; color: var(--hc-warm-soft); text-decoration: none; }
.phh-mkt-zitat { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 0.98rem; line-height: 1.6; color: rgba(232,237,230,0.66); border-left: 2px solid rgba(217,101,15,0.5); padding-left: 14px; }

.phh-mkt-rechts { padding: clamp(24px, 3.4vw, 38px); }
.phh-mkt-rechts h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; color: var(--hc-text); margin: 0 0 18px; line-height: 1.35; }
.phh-mkt-rechts label { display: block; margin-bottom: 13px; }
.phh-mkt-rechts label > span { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hc-soft); margin-bottom: 6px; }
.phh-mkt-rechts input:not([type="checkbox"]), .phh-mkt-rechts textarea {
  width: 100%; padding: 12px 14px; font-family: inherit; font-size: 16px;   /* 16px: sonst zoomt iOS */
  background: rgba(252,250,247,0.8); border: 1px solid var(--hc-line); color: var(--hc-text); clip-path: var(--clip-10);
}
.phh-mkt-rechts textarea { resize: vertical; }
.phh-mkt-check { display: flex !important; align-items: flex-start; gap: 12px; margin: 4px 0 16px !important; }
.phh-mkt-check input { width: 24px; height: 24px; flex: 0 0 auto; accent-color: var(--hc-sage-dark); }
.phh-mkt-check span { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.86rem !important; font-weight: 400 !important; line-height: 1.5; color: var(--hc-soft); }
.phh-mkt-fehler { color: #B3261E; font-size: 0.88rem; margin: 0 0 12px; }
.phh-mkt-cta {
  width: 100%; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 22px; cursor: pointer; border: 0; clip-path: var(--clip-10);
  background: linear-gradient(120deg, var(--hc-warm), #e8801f); color: #fff;
  font-family: inherit; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em;
  transition: filter 200ms ease;
}
.phh-mkt-cta:hover { filter: brightness(1.07); }
.phh-mkt-klein { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; font-size: 0.8rem; color: var(--hc-soft); }

.phh-mkt-danke { padding: clamp(30px, 5vw, 52px); text-align: center; }
.phh-mkt-danke svg { color: var(--hc-sage-dark); margin-bottom: 14px; }
.phh-mkt-danke h3 { font-size: 1.4rem; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--hc-text); }
.phh-mkt-danke p { font-size: 0.95rem; line-height: 1.7; color: var(--hc-soft); max-width: 46ch; margin: 0 auto 22px; }
.phh-mkt-danke .phh-mkt-cta { width: auto; padding: 13px 30px; }

@media (prefers-reduced-motion: reduce) {
  .phh-mkt-knopf .ping, .phh-mkt-partikel span { animation: none; }
}
/* ---------- Kurze Merkmalsliste (Über uns) ---------- */
.phh-merkmale {
  list-style: none; padding: 0; margin: 22px auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
}
.phh-merkmale li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.95rem; font-weight: 600; color: var(--hc-text);
  white-space: nowrap;
}
/* Ab Tablet stehen alle drei nebeneinander in einer Reihe */
@media (min-width: 760px) {
  .phh-merkmale { flex-wrap: nowrap; gap: 28px; }
}
/* Auf schmalen Schirmen untereinander — in einer Reihe waere es unleserlich */
@media (max-width: 759px) {
  .phh-merkmale { flex-direction: column; align-items: center; gap: 9px; }
}
.phh-merkmale svg { color: var(--hc-warm); flex: 0 0 auto; }

/* Fussbereich: alle Zeilen an derselben Kante ausrichten (Symbole buendig) */
.phh-footer-contact { --sym: 26px; }
.phh-footer-contact > div { display: grid; grid-template-columns: var(--sym) 1fr; align-items: start; gap: 0; }
.phh-footer-contact > div > svg { grid-column: 1; margin-top: calc((1.6em - 18px) / 2 + var(--treffer)); }

@media (max-width: 720px) {
  .phh-footer-contact { --sym: 24px; }
}

/* Antworten duerfen eigene Zeilen haben — Oeffnungszeiten waren als
   Fliesstext kaum zu erfassen. */
.phh-faq-antwort { white-space: pre-line; }

/* ════════════════════════════════════════════════════════════════════
   NAMENSHERKUNFT · "Woher Humanitas kommt"

   NEU GEDACHT (26.08.2026). Die beiden Vorfassungen waren ein dunkler
   Kasten mit vier Absaetzen darin. Das Problem war nicht die Farbe,
   sondern die Form: eine Textwand bleibt eine Textwand.

   Jetzt eine CHRONIK. Ihr Text ist unveraendert, aber in drei Kapitel
   mit Marken gebrochen, an einer senkrechten Linie aufgereiht. Man
   sieht die Geschichte, bevor man sie liest.

   Hell statt dunkel, damit der Abschnitt atmet. Der eine dunkle Balken
   ist der Satz ihres Vaters: der einzige Moment, der stehen bleibt.

   Markenfarben aus der Logodatei gemessen: Orange #F07800, Gruen #68B028
   Das Logo ist die echte Datei, kein nachgebautes Schriftbild.

   ENTWURF. Ihr Vater wird NICHT beim Namen genannt, solange sie das
   nicht freigegeben hat. Sie selbst schreibt "mein Papa".
   ════════════════════════════════════════════════════════════════════ */
.phh-nam {
  --hu-orange: #f07800;
  --hu-gruen: #68b028;
  position: relative;
  overflow: hidden;
  padding-top: clamp(46px, 8vw, 96px);
  padding-bottom: clamp(46px, 8vw, 92px);
  background:
    radial-gradient(78% 52% at 88% 4%, rgba(240,120,0,0.09), transparent 62%),
    radial-gradient(66% 48% at 2% 96%, rgba(104,176,40,0.11), transparent 64%),
    linear-gradient(178deg, #faf7f2 0%, #f2eee6 100%);
}

/* ── Kopf ─────────────────────────────────────────────────────────── */
/* Breit genug, dass "Woher Humanitas kommt." auf dem Desktop in EINER
   Zeile steht. Bei 46ch brach es nach "Humanitas" um. */
.phh-nam-kopf { max-width: 62ch; }
.phh-nam-marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hu-orange);
}
.phh-nam-marke::before { content: ''; width: 28px; height: 2px; background: var(--hu-orange); }
.phh-nam h2 {
  font-size: clamp(1.85rem, 5.6vw, 3.15rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--hc-text);
}
.phh-nam h2 em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  color: var(--hu-orange);
}
.phh-nam-vor {
  margin: 14px 0 0;
  font-size: 0.95rem;
  color: var(--hc-soft);
}

/* ── Die Chronik: Kapitel an einer Linie ──────────────────────────── */
.phh-nam-spread {
  display: grid;
  gap: clamp(34px, 6vw, 56px);
  margin-top: clamp(32px, 5vw, 54px);
}

.phh-nam-chronik { position: relative; padding-left: 30px; }
/* Die Linie, an der die Kapitel haengen. Laeuft nach unten aus, damit
   sie nicht wie ein abgeschnittener Strich endet. */
.phh-nam-chronik::before {
  content: '';
  position: absolute;
  top: 8px; bottom: 10px; left: 5px;
  width: 1px;
  background: linear-gradient(180deg, var(--hu-gruen), rgba(104,176,40,0.5) 62%, transparent);
}
.phh-nam-kapitel { position: relative; padding-bottom: clamp(22px, 3.6vw, 32px); }
.phh-nam-kapitel:last-child { padding-bottom: 0; }
.phh-nam-kapitel::before {
  content: '';
  position: absolute;
  top: 7px; left: -30px;
  width: 11px; height: 11px;
  border: 2px solid var(--hu-gruen);
  border-radius: 50%;
  background: #faf7f2;
}
/* Das dritte Kapitel ist der Wendepunkt, deshalb ein gefuellter Punkt. */
.phh-nam-kapitel:last-child::before { background: var(--hu-orange); border-color: var(--hu-orange); }
.phh-nam-jahr {
  display: block;
  margin-bottom: 7px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hu-gruen);
}
.phh-nam-kapitel p {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(0.97rem, 2.5vw, 1.04rem);
  line-height: 1.7;
  color: rgba(47,49,45,0.86);
}

/* ── Die Urkunde mit dem echten Logo ──────────────────────────────── */
.phh-nam-urkunde {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 320px;
  padding: clamp(24px, 5vw, 32px) clamp(20px, 4vw, 26px) clamp(20px, 4vw, 26px);
  text-align: center;
  background: linear-gradient(158deg, #fff 0%, #f6f1e7 100%);
  box-shadow: 0 22px 46px rgba(47,49,45,0.18), 0 1px 0 rgba(255,255,255,0.9);
  transform: rotate(-1.6deg);
}
.phh-nam-urkunde::before {
  content: '';
  position: absolute; inset: 8px;
  border: 1px solid rgba(104,176,40,0.34);
  pointer-events: none;
}
.phh-nam-urkunde::after {
  content: '';
  position: absolute; inset: 12px;
  border: 1px solid rgba(240,120,0,0.15);
  pointer-events: none;
}
.phh-nam-urkunde-kopf {
  display: block;
  margin-bottom: clamp(15px, 3vw, 20px);
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(47,49,45,0.46);
}
.phh-nam-urkunde img {
  display: block;
  width: 100%;
  max-width: 208px;
  height: auto;
  margin: 0 auto;
}
.phh-nam-urkunde hr {
  width: 38px; height: 1px;
  margin: clamp(15px, 3vw, 20px) auto clamp(11px, 2vw, 14px);
  border: 0;
  background: var(--hu-orange);
}
.phh-nam-urkunde figcaption {
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.5;
  color: rgba(47,49,45,0.6);
}

/* ── Der Satz ihres Vaters: der eine dunkle Balken ────────────────── */
.phh-nam-zitat {
  position: relative;
  overflow: hidden;
  margin: clamp(38px, 6vw, 66px) 0 0;
  padding: clamp(34px, 6vw, 58px) clamp(22px, 5vw, 56px);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  background:
    radial-gradient(88% 120% at 6% 0%, rgba(240,120,0,0.20), transparent 58%),
    linear-gradient(160deg, #2c3529 0%, #1b211a 100%);
  text-align: center;
}
.phh-nam-zitat::before {
  content: '„';
  position: absolute;
  top: -0.06em; left: 0.06em;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(7rem, 20vw, 13rem);
  line-height: 1;
  color: var(--hu-orange);
  opacity: 0.13;
  pointer-events: none;
}
.phh-nam-zitat q {
  position: relative;
  display: block;
  margin: 0 auto;
  max-width: 22ch;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.32rem, 4.6vw, 2.3rem);
  line-height: 1.38;
  color: #fbf9f4;
  quotes: none;
}
.phh-nam-zitat cite {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(18px, 3vw, 26px);
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hu-orange);
}
.phh-nam-zitat cite::before,
.phh-nam-zitat cite::after { content: ''; width: 18px; height: 1px; background: rgba(240,120,0,0.5); }

/* ── Schluss und Unterschrift ─────────────────────────────────────── */
.phh-nam-schluss {
  display: grid;
  gap: clamp(20px, 3vw, 30px);
  margin-top: clamp(32px, 5vw, 50px);
}
.phh-nam-schluss p {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(1rem, 2.7vw, 1.13rem);
  line-height: 1.72;
  color: rgba(47,49,45,0.88);
}
.phh-nam-schluss p em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  color: var(--hc-sage-deep);
}
/* Die Unterschrift. Bewusst gross: sie ist nicht die Fussnote des
   Abschnitts, sondern sein Absender. Wer die Geschichte gelesen hat,
   soll sehen, wer sie erzaehlt hat. */
.phh-nam-sig {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 26px);
  margin-top: clamp(26px, 4vw, 40px);
  padding-top: clamp(24px, 3.5vw, 34px);
  border-top: 1px solid rgba(104,176,40,0.28);
}
.phh-nam-sig img {
  width: clamp(92px, 17vw, 186px);
  height: clamp(92px, 17vw, 186px);
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 3px solid var(--hu-orange);
  box-shadow: 0 14px 30px rgba(47,49,45,0.16);
}
.phh-nam-sig b {
  display: block;
  font-size: clamp(1.35rem, 4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--hc-text);
}
.phh-nam-sig span {
  display: block;
  margin-top: 7px;
  font-size: clamp(0.94rem, 2.5vw, 1.12rem);
  line-height: 1.5;
  color: var(--hc-soft);
}
/* Kleine Marke ueber dem Namen, damit klar ist, dass hier die Erzaehlerin
   steht und nicht irgendein Teammitglied. */
.phh-nam-sig i {
  display: block;
  margin-bottom: 8px;
  font-style: normal;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hu-orange);
}

/* ── Ab Tablet: Urkunde neben die Chronik ─────────────────────────── */
@media (min-width: 880px) {
  .phh-nam-spread {
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    align-items: center;
    gap: 60px;
  }
  .phh-nam-urkunde { margin: 0; transform: rotate(-2deg); }
}

/* ── Ab 1080px: Unterschrift NEBEN den Schlusstext ────────────────────
   Erst hier, nicht schon bei 880px: schmaler bleibt der Unterschrift zu
   wenig Platz, dann bricht "Aileen Pilgrim" auf zwei Zeilen und die
   Rolle auf drei. Darunter stehen beide untereinander. */
@media (min-width: 1080px) {
  .phh-nam-schluss {
    grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
    align-items: center;
    gap: 52px;
  }
  .phh-nam-sig {
    margin-top: 0;
    padding-top: 0;
    padding-left: clamp(30px, 3vw, 44px);
    border-top: 0;
    border-left: 1px solid rgba(104,176,40,0.28);
  }
  .phh-nam-sig img { width: 152px; height: 152px; }
  .phh-nam-sig b { font-size: 2rem; }
}

/* ── Handy: enger, Urkunde kleiner, Punkt naeher an die Linie ─────── */
@media (max-width: 560px) {
  .phh-nam-chronik { padding-left: 24px; }
  .phh-nam-kapitel::before { left: -24px; width: 10px; height: 10px; }
  .phh-nam-chronik::before { left: 4px; }
  .phh-nam-urkunde { max-width: 260px; transform: rotate(-1.2deg); }
  .phh-nam-sig img { width: 108px; height: 108px; border-width: 3px; }
}