/* ════════════════════════════════════════════════════════════
   Curamore — gemeinsame Styles (alle Seiten laden diese Datei)
   Tokens · Typografie · Komponenten · Header · Hero · Motion-Helfer
   ════════════════════════════════════════════════════════════ */
:root{
  --brand:#6A247E; --brand-2:#8E3FA0; --brand-soft:#B48EB6; --accent:#D6477E;
  --bg:#FFFFFF; --surface:#FBF6FC; --card:#FFFFFF; --fg:#2A1B2E; --muted:#6B5B73; --border:#ECE2EF;
  --shadow-sm:0 2px 8px -2px rgb(106 36 126/.12);
  --shadow:0 18px 50px -20px rgb(106 36 126/.28);
  --shadow-lg:0 40px 80px -30px rgb(106 36 126/.40);
  --radius-sm:.6rem; --radius:1rem; --radius-lg:1.75rem; --radius-pill:999px;
  --text-eyebrow:.8rem; --text-body:1.0625rem; --text-lead:clamp(1.15rem,1.4vw,1.35rem);
  --text-h4:clamp(1.1rem,1.4vw,1.3rem); --text-h3:clamp(1.25rem,2.2vw,1.6rem);
  --text-h2:clamp(1.55rem,3.6vw,2.6rem); --text-h1:clamp(1.95rem,5.2vw,4rem);
  --lh-tight:1.08; --lh-snug:1.3; --lh-body:1.65;
  --tracking-tight:-.02em; --tracking-label:.14em;
  --dur:.4s; --ease-out:cubic-bezier(.16,1,.3,1); --focus:var(--brand);
  /* Pastell-Palette — freundlich & hochwertig */
  --pastel-lilac:#F3E9F8; --pastel-rose:#FCEAF1; --pastel-mint:#E9F6F0; --pastel-peach:#FCF0E6; --pastel-sky:#EAF1FB;
  color-scheme: light;
}
html.dark{
  --bg:#1A141E; --surface:#241B2A; --card:#2C2233; --fg:#ECE7EF; --muted:#B9AEC0;
  --brand:#C79BD2; --brand-2:#B873C9; --brand-soft:#A877B6; --accent:#E879A6; --border:#3A2E42;
  --shadow:0 18px 50px -20px rgb(0 0 0/.6); --shadow-lg:0 40px 80px -30px rgb(0 0 0/.7);
  --pastel-lilac:#241B2A; --pastel-rose:#2A1B26; --pastel-mint:#1C2622; --pastel-peach:#2A2018; --pastel-sky:#1B212C;
  color-scheme: dark;
}
/* Pastell-Flächen */
.bg-lilac{ background:var(--pastel-lilac); } .bg-rose{ background:var(--pastel-rose); }
.bg-mint{ background:var(--pastel-mint); } .bg-peach{ background:var(--pastel-peach); } .bg-sky{ background:var(--pastel-sky); }
/* pastellige Icon-Chips (Varianten) */
.chip-rose{ background:var(--pastel-rose)!important; color:var(--accent)!important; }
.chip-mint{ background:var(--pastel-mint)!important; color:#2E8B6F!important; }
.chip-sky{ background:var(--pastel-sky)!important; color:#3F6FB0!important; }
.chip-peach{ background:var(--pastel-peach)!important; color:#C77A3A!important; }
html.dark .chip-rose,html.dark .chip-mint,html.dark .chip-sky,html.dark .chip-peach{ color:var(--brand-soft)!important; }

/* WhatsApp-Button (schwebend, alle Seiten) */
.wa-fab{ position:fixed; right:1rem; bottom:1rem; z-index:280; display:inline-flex; align-items:center; gap:.5rem;
  background:#25D366; color:#fff; font-weight:700; padding:.8rem 1rem; border-radius:999px; box-shadow:var(--shadow);
  text-decoration:none; transition:transform .3s var(--ease-out), box-shadow .3s, opacity .3s var(--ease-out), visibility .3s; }
.wa-fab:hover{ transform:translateY(-2px) scale(1.03); box-shadow:var(--shadow-lg); }
/* Erreicht der Button beim Scrollen den Footer, blendet er sauber aus (JS setzt .wa-atfoot) */
.wa-fab.wa-atfoot{ opacity:0; visibility:hidden; transform:translateY(14px) scale(.92); pointer-events:none; }
.wa-fab svg{ width:1.6rem; height:1.6rem; flex:none; }
.wa-fab .wa-label{ display:none; }
@media (min-width:640px){ .wa-fab .wa-label{ display:inline; } }

/* Interaktive Elemente: Quiz & Checkliste */
.quiz-opt{ display:block; width:100%; text-align:left; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:.85rem 1rem; background:var(--card); font-weight:600; cursor:pointer; transition:.2s; margin-top:.6rem; }
.quiz-opt:hover{ border-color:var(--brand); background:var(--surface); }
.quiz-opt.sel{ border-color:var(--brand); background:color-mix(in srgb,var(--brand) 12%,transparent); }
.chk-item{ display:flex; gap:.75rem; align-items:flex-start; padding:.7rem .9rem; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--card); cursor:pointer; transition:.2s; margin-top:.6rem; }
.chk-item:hover{ border-color:var(--brand-soft); }
.chk-item input{ margin-top:.2rem; width:1.15rem; height:1.15rem; accent-color:var(--brand); flex:none; }
.chk-item.done{ background:var(--pastel-mint); border-color:#bfe6d6; }
.chk-item.done .chk-label{ text-decoration:line-through; opacity:.7; }
.progress-track{ height:10px; border-radius:999px; background:var(--border); overflow:hidden; }
.progress-fill{ height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--brand),var(--accent)); transition:width .5s var(--ease-out); }
*{ box-sizing:border-box; }
html,body{ overflow-x:clip; }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:'Mulish',system-ui,sans-serif;
  font-size:var(--text-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased;
  transition:background .4s var(--ease-out), color .4s var(--ease-out); }
h1,h2,h3,h4{ font-family:'Fraunces',Georgia,serif; line-height:var(--lh-tight);
  letter-spacing:var(--tracking-tight); text-wrap:balance; font-weight:600; margin:0; }
p{ text-wrap:pretty; }
a{ color:inherit; }
.eyebrow{ font-size:var(--text-eyebrow); font-weight:700; letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--brand); }
html.dark .eyebrow{ color:var(--brand-soft); }
.lead{ font-size:var(--text-lead); line-height:var(--lh-snug); font-weight:500; color:var(--muted); }
.container{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); }
.section{ padding-block:clamp(4rem,8vw,7rem); position:relative; }
.prose-measure{ max-width:62ch; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:.55rem; font-weight:700; border-radius:var(--radius-sm);
  padding:.85rem 1.4rem; font-size:1rem; line-height:1; transition:transform .3s var(--ease-out),
  box-shadow .3s var(--ease-out), background .3s, color .3s; will-change:transform; cursor:pointer; border:0; }
.btn-primary{ background:var(--brand); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
html.dark .btn-primary{ color:#1A141E; }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-ghost{ background:transparent; color:inherit; border:1.5px solid var(--border); }
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand); }
.btn-onhero{ background:rgba(255,255,255,.14); color:#fff; border:1.5px solid rgba(255,255,255,.45);
  backdrop-filter:blur(6px); }
.btn-onhero:hover{ background:rgba(255,255,255,.24); transform:translateY(-2px); }

/* Cards */
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:box-shadow .4s var(--ease-out), transform .4s var(--ease-out); }
.card-lift:hover{ box-shadow:var(--shadow); transform:translateY(-4px); }

/* Header */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:50; color:#fff; background:transparent;
  transition:background .4s var(--ease-out), color .4s var(--ease-out), box-shadow .4s, backdrop-filter .4s; }
.site-header.scrolled{ background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px) saturate(1.2); color:var(--fg); box-shadow:var(--shadow-sm); }
.navlink{ position:relative; font-weight:600; font-size:.97rem; opacity:.9; padding:.35rem 0; }
.navlink::after{ content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:currentColor; transition:width .3s var(--ease-out); border-radius:2px; }
.navlink:hover{ opacity:1; } .navlink:hover::after{ width:100%; }
.navlink.active{ opacity:1; } .navlink.active::after{ width:100%; }

/* Leistungen-Submenü (Dropdown) */
.navitem{ position:relative; display:inline-flex; align-items:center; }
.navitem > .navlink{ display:inline-flex; align-items:center; gap:.28rem; }
.navitem > .navlink .caret{ transition:transform .3s var(--ease-out); }
.navitem:hover > .navlink .caret, .navitem:focus-within > .navlink .caret, .navitem.open > .navlink .caret{ transform:rotate(180deg); }
.subnav{ position:absolute; top:100%; left:-1rem; padding-top:.85rem; min-width:15rem; z-index:90;
  opacity:0; visibility:hidden; transform:translateY(.4rem); pointer-events:none;
  transition:opacity .22s var(--ease-out), transform .22s var(--ease-out); }
.navitem:hover .subnav, .navitem:focus-within .subnav, .navitem.open .subnav{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.subnav-inner{ background:var(--card); color:var(--fg); border:1px solid var(--border); border-radius:14px;
  box-shadow:0 22px 48px -16px color-mix(in srgb, var(--brand) 45%, transparent); padding:.5rem; display:grid; gap:.1rem; }
.subnav-inner a{ display:flex; align-items:center; gap:.55rem; padding:.5rem .7rem; border-radius:9px;
  font-size:.9rem; font-weight:600; color:var(--fg); opacity:.85; white-space:nowrap;
  transition:background .2s, color .2s, opacity .2s; }
.subnav-inner a::before{ content:''; width:5px; height:5px; border-radius:99px; background:var(--accent); flex:none; opacity:.5; transition:opacity .2s, transform .2s; }
.subnav-inner a:hover{ background:var(--surface); color:var(--brand); opacity:1; }
.subnav-inner a:hover::before{ opacity:1; transform:scale(1.5); }
.subnav-inner a.sub-all{ color:var(--brand); opacity:1; border-bottom:1px solid var(--border); border-radius:0; margin-bottom:.15rem; padding-bottom:.6rem; }

/* Terminbuchung (Kontakt) — Booking-Widget, portiert von Intensia, im Curamore-Design (Lila-Palette) */
.booking-grid{ display:grid; grid-template-columns:1fr; }
@media(min-width:760px){ .booking-grid{ grid-template-columns:1.05fr .95fr; } }
.booking-cal{ padding:1.5rem; border-bottom:1px solid var(--border); }
@media(min-width:760px){ .booking-cal{ border-bottom:0; border-right:1px solid var(--border); } }
.bk-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.bk-cal-head strong{ font-family:'Fraunces',Georgia,serif; font-size:1.1rem; }
.bk-nav{ width:2.2rem; height:2.2rem; border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--card); cursor:pointer; color:var(--fg); display:grid; place-items:center; transition:border-color .2s, color .2s; }
.bk-nav:hover:not(:disabled){ border-color:var(--brand); color:var(--brand); }
.bk-nav:disabled{ opacity:.3; cursor:not-allowed; }
.bk-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem; margin-bottom:.4rem; }
.bk-weekdays span{ text-align:center; font-size:.68rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.bk-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem; }
.bk-day{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); border:1px solid transparent; font-size:.9rem; font-weight:600; background:transparent; cursor:pointer; color:var(--fg); font-family:inherit; transition:background .2s, color .2s; }
.bk-day.is-free{ background:var(--pastel-lilac); color:var(--brand); }
.bk-day.is-free:hover{ background:var(--brand); color:#fff; }
.bk-day.is-sel{ background:var(--brand)!important; color:#fff!important; box-shadow:0 6px 16px -6px color-mix(in srgb, var(--brand) 60%, transparent); }
.bk-day.is-off{ color:var(--muted); opacity:.4; cursor:default; }
.bk-day.is-empty{ cursor:default; }
.bk-hint{ margin-top:.9rem; font-size:.78rem; color:var(--muted); }
.booking-side{ padding:1.6rem; display:flex; flex-direction:column; justify-content:center; background:var(--surface); }
.bk-side-title{ font-weight:700; margin-bottom:.7rem; }
.bk-slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.bk-slot{ padding:.6rem .2rem; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--card); font-weight:600; font-size:.92rem; cursor:pointer; color:var(--fg); font-family:inherit; transition:border-color .18s, color .18s, background .18s; }
.bk-slot:hover{ border-color:var(--brand); color:var(--brand); }
.bk-slot.is-booked{ opacity:.4; text-decoration:line-through; cursor:not-allowed; }
.bk-slot.is-sel{ background:var(--brand); color:#fff; border-color:var(--brand); }
.bk-form label{ display:block; font-weight:600; font-size:.84rem; margin-bottom:.7rem; color:var(--fg); }
.bk-form input,.bk-form textarea{ width:100%; margin-top:.25rem; padding:.6rem .7rem; border:1px solid var(--border); border-radius:var(--radius-sm); font:inherit; background:var(--bg); color:var(--fg); }
.bk-form input[type=checkbox]{ width:auto; flex:none; margin-top:.25rem; padding:0; accent-color:var(--brand); } /* Einwilligungs-Checkbox nicht auf 100% strecken */
.bk-form input:focus,.bk-form textarea:focus{ outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand); }
.bk-done{ text-align:center; }
.bk-check{ display:inline-grid; place-items:center; width:3rem; height:3rem; border-radius:50%; background:var(--brand); color:#fff; font-size:1.5rem; margin-bottom:.6rem; }
/* Dark-Mode: --brand ist dann helles Lila → dunkle Schrift auf Auswahl/Häkchen (wie .btn-primary) */
html.dark .bk-day.is-free:hover,html.dark .bk-day.is-sel{ color:#1A141E!important; }
html.dark .bk-slot.is-sel,html.dark .bk-check{ color:#1A141E; }

/* Hero */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.hero.page{ min-height:clamp(420px,66svh,640px); }
.hero-bg{ position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 55% at 78% 18%, color-mix(in srgb,var(--brand-soft) 55%, transparent), transparent 70%),
    radial-gradient(70% 65% at 12% 88%, color-mix(in srgb,var(--accent) 30%, transparent), transparent 70%),
    linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 48%, #5A1E6E 100%); }
/* Dark-Mode: Hero dunkel halten. Die Marken-Gradient-Farben (--brand/--brand-2)
   sind im Dark-Mode hell (helles Lila) → der Hero wirkte heller als der Rest der
   Seite. Hier ein dunkler Lila-Verlauf mit dezentem Marken-Schimmer. */
html.dark .hero-bg{
  background:
    radial-gradient(60% 55% at 78% 18%, color-mix(in srgb,var(--brand) 20%, transparent), transparent 70%),
    radial-gradient(70% 65% at 12% 88%, color-mix(in srgb,var(--accent) 14%, transparent), transparent 70%),
    linear-gradient(135deg, #2A1233 0%, #201829 55%, #1A141E 100%); }
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.mesh{ position:absolute; inset:-20%; z-index:0; pointer-events:none; opacity:.55;
  background:radial-gradient(40% 40% at 30% 30%, rgba(255,255,255,.18), transparent 60%);
  animation:drift 16s ease-in-out infinite; }
@keyframes drift{ 0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(3%,-4%,0) scale(1.06)} 100%{transform:translate3d(0,0,0) scale(1)} }

/* Dezentes Hero-Hintergrundfoto (kaum sichtbar, menschlich) */
.hero-faint{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.20; mix-blend-mode:soft-light; pointer-events:none; z-index:0; }
html.dark .hero-faint{ opacity:.14; mix-blend-mode:screen; }

/* „Ein Tag voller Fürsorge" — autonome Tag-Nacht-Szene (robust, kein Pin/Sticky) */
.daycycle{ position:relative; }
.dc-sticky{ position:relative; height:100svh; min-height:560px; max-height:760px; overflow:hidden; }
.dc-stage{ position:relative; width:100%; height:100%; }
.dc-svg{ position:absolute; inset:0; width:100%; height:100%; }
.dc-overlay{ position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center;
  padding-top:clamp(1.5rem,5vh,3.5rem); pointer-events:none; }
.dc-caption{ text-align:center; color:#fff; max-width:36rem; padding:1rem 1.4rem; margin-inline:1rem;
  background:rgba(26,20,30,.32); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18);
  border-radius:1rem; text-shadow:0 1px 10px rgba(0,0,0,.35); }
.dc-step{ position:absolute; left:50%; transform:translateX(-50%); }
/* Schritt-Pips + pulsierendes Pflege-Herz in der Szene */
.dc-pip{ width:9px; height:9px; border-radius:999px; background:rgba(255,255,255,.4); transition:transform .3s var(--ease-out), background .3s; }
.dc-pip.on{ background:#fff; transform:scale(1.35); }
.dc-heartbeat{ transform-box:fill-box; transform-origin:center; animation:hb 1.1s ease-in-out infinite; }
@keyframes hb{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.28) } }
@media (prefers-reduced-motion: reduce){ .dc-heartbeat{ animation:none } }

/* ── Vollgas: moderne Scroll-Effekte ───────────────────────────── */
/* Scroll-Fortschrittsbalken oben */
#scrollbar{ position:fixed; top:0; left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--brand),var(--accent)); z-index:300; pointer-events:none; will-change:transform; }
/* Cursor-Spotlight auf dunklen Marken-Flächen (Desktop, dezent) */
.spot{ position:relative; isolation:isolate; }
.spot::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,-300px), rgba(255,255,255,.20), transparent 64%);
  opacity:0; transition:opacity .45s var(--ease-out); }
.spot:hover::before{ opacity:1; }
.spot > *{ position:relative; z-index:1; }
/* Deko-Ebenen bleiben aus dem Fluss — sonst werden sie in Grid-Karten zu eigenen Zellen */
.spot > .mesh, .spot > .absolute{ position:absolute; }
/* Clip-Reveal-Medien: ohne JS sichtbar (Fallback), Motor übernimmt den Wipe */
.no-anim .gallery figure, .no-anim [data-clip]{ clip-path:none!important; }
/* clip-path bei Reduced-Motion: GSAP legt den Wipe gar nicht erst an (siehe main.js) */
/* sanftes „Magnet"-Heben großer Bild-Container beim Reveal nicht nötig — GSAP steuert */
/* Eyebrow als Marken-Linie */
.eyebrow.line::before{ content:""; display:inline-block; width:1.6rem; height:2px; vertical-align:middle;
  margin-right:.6rem; background:currentColor; transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--ease-out); }
.eyebrow.line.in::before{ transform:scaleX(1); }

/* Hero mit Foto-Spalte */
/* Leistungs-Karten mit Bild-Header */
.svc-media{ position:relative; margin:0; aspect-ratio:16/10; overflow:hidden; background:var(--surface); }
.svc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.card-lift:hover .svc-media img{ transform:scale(1.07); }
.svc-icon{ margin-top:-2.4rem; position:relative; z-index:2; border:3px solid var(--card);
  background:var(--brand)!important; color:#fff!important; box-shadow:var(--shadow-sm); }
html.dark .svc-icon{ color:#fff!important; }
.hero-grid{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center; }
@media (min-width:900px){ .hero-grid{ grid-template-columns:1.05fr .95fr; } }
.hero-photo .frame{ position:relative; max-width:440px; margin-inline:auto; aspect-ratio:4/5; overflow:hidden;
  box-shadow:0 0 0 10px rgba(255,255,255,.14), var(--shadow-lg); }
.hero-photo img{ width:100%; height:100%; object-fit:cover; }
/* Tablet: Hero-Foto kompakt NEBEN Text (statt gross & mittig darunter), Text bekommt mehr Raum */
@media (min-width:768px) and (max-width:1023px){
  .hero.page .hero-grid{ grid-template-columns:1.38fr .62fr!important; gap:1.75rem; align-items:center; }
  .hero.page .hero-photo .frame{ max-width:240px; aspect-ratio:3/4; box-shadow:0 0 0 6px rgba(255,255,255,.14), var(--shadow); }
  .hero.page .hero-photo .tagcard{ transform:scale(.82); transform-origin:left bottom; }
}
/* Mobil: Hero-Foto wandert in den ersten (weissen) Inhaltsbereich, dezent pink gerahmt — antippbar/zoombar */
.hero-mobile-shot{ display:block; margin:0 0 1.5rem; padding:.45rem; background:var(--card);
  border:2px solid color-mix(in srgb,var(--accent) 38%, #fff); border-radius:1.25rem; box-shadow:var(--shadow-sm); }
.hero-mobile-shot img{ width:100%; height:auto; display:block; border-radius:.9rem; cursor:zoom-in; aspect-ratio:4/3; object-fit:cover; }
@media (min-width:768px){ .hero-mobile-shot{ display:none!important; } }
@media (max-width:767px){
  img.pink-frame-mobile{ border-radius:1rem;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 38%, #fff), var(--shadow-sm); }
}
.hero-photo .tagcard{ position:absolute; left:-.5rem; bottom:1rem; }
@keyframes kenburns{ from{ transform:scale(1.02) } to{ transform:scale(1.12) } }
.kenburns{ animation:kenburns 20s ease-in-out infinite alternate; will-change:transform; }
/* Personen-Fotos: Zoom waechst von der Oberkante nach unten, damit der Zoom
   niemals Koepfe anschneidet (Standard-Origin 50%/50% beschnitt oben ~6 %). */
.kenburns.kb-top{ transform-origin:50% 0; }
.hero-photo img.kb-top{ object-position:50% 0; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
.floaty{ animation:floaty 8s ease-in-out infinite; }
/* sanftes Foto-Reveal (clip) — vom Motor gesteuert; Fallback: sichtbar */
.reveal-img{ }
@media (prefers-reduced-motion: reduce){ .kenburns,.floaty{ animation:none!important; } }

/* Foto-Galerie „Einblicke" */
.gallery img{ width:100%; height:100%; object-fit:cover; }

/* Breadcrumb */
.crumbs{ font-size:.85rem; color:rgba(255,255,255,.8); display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.crumbs a:hover{ color:#fff; text-decoration:underline; }

/* Bild-Rahmen: abgerundetes Rechteck statt organischer Ei-Form */
.blob{ -webkit-mask:none; mask:none; }
.blob-1,.blob-2,.blob-3{ border-radius:1.5rem; }
/* Geschäftsführung Kocoglu — Foto auf weißem Hintergrund: Schatten hebt es ab */
.kocoglu-portrait{ margin:0; }
.kocoglu-portrait img{ width:100%; height:auto; display:block; border-radius:1.5rem; background:#fff;
  box-shadow:0 24px 60px -18px rgba(20,20,30,.28), 0 0 0 1px rgba(20,20,30,.06); }
.ring-soft{ box-shadow:0 0 0 10px color-mix(in srgb,var(--brand-soft) 30%, transparent), var(--shadow); }
/* Herz-Wasserzeichen: liegt als Overlay auf dem Foto, nicht im Bild selbst */
.heart-wm{ position:absolute; right:1.25rem; bottom:1.25rem; width:min(38%,150px); height:auto;
  fill:#fff; opacity:.55; pointer-events:none; filter:drop-shadow(0 3px 10px rgba(0,0,0,.45)); }

/* split chars */
[data-split]{ display:inline-block; }
.char{ display:inline-block; }
/* Grid-Kinder duerfen nicht von unteilbaren Woertern aufgeblaeht werden */
.hero-grid > *, .hero .container > *{ min-width:0; }
[data-split]{ overflow-wrap:break-word; }
/* nicht gesplittete Ueberschriften duerfen trennen (lang=de) */
h1,h2{ overflow-wrap:break-word; hyphens:auto; }

/* Preloader */
#preloader{ position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand) 0%, var(--brand-2) 60%, #5A1E6E 100%); }
#preloader .pmark{ width:min(74vw,280px); height:auto; }

/* accordion */
details.acc{ border:1px solid var(--border); border-radius:var(--radius); background:var(--card); overflow:hidden; }
details.acc+details.acc{ margin-top:.75rem; }
details.acc>summary{ list-style:none; cursor:pointer; padding:1.1rem 1.3rem; font-weight:700;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; }
details.acc>summary::-webkit-details-marker{ display:none; }
details.acc>summary .chev{ transition:transform .3s var(--ease-out); flex:none; color:var(--brand); }
details.acc[open]>summary .chev{ transform:rotate(45deg); }
details.acc .acc-body{ padding:0 1.3rem 1.3rem; color:var(--muted); }

.icon-chip{ width:3.1rem; height:3.1rem; border-radius:.85rem; display:grid; place-items:center; flex:none;
  background:color-mix(in srgb,var(--brand-soft) 26%, transparent); color:var(--brand); }
html.dark .icon-chip{ background:color-mix(in srgb,var(--brand) 22%, transparent); color:var(--brand-soft); }

.pill{ display:inline-flex; align-items:center; gap:.45rem; border-radius:var(--radius-pill);
  padding:.4rem .9rem; font-size:.85rem; font-weight:700; }

/* link card (subpage teasers) — inline "Mehr erfahren →" mit Pfeil direkt hinter dem Text */
.linkcard{ display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; }
.linkcard .arrow{ display:inline-block; line-height:1; transition:transform .3s var(--ease-out); }
.linkcard:hover .arrow{ transform:translateX(5px); }

:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:4px; }
.skip{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }
.skip:focus{ position:fixed; width:auto; height:auto; clip:auto; top:.75rem; left:.75rem; z-index:300;
  background:var(--fg); color:var(--bg); padding:.6rem 1rem; border-radius:.5rem; }

[data-tilt]{ transform-style:preserve-3d; }
[data-spin],[data-grow]{ transform-box:fill-box; transform-origin:50% 50%; }
.petal,.bcore,.cyc-node{ transform-box:fill-box; transform-origin:50% 50%; }

/* CDN/JS fail-safe: show everything */
.no-anim [data-reveal]>*, .no-anim [data-split] .char, .no-anim [data-depth]{ opacity:1!important; transform:none!important; }
.no-anim #preloader{ display:none!important; }

/* Reduced-Motion: DÄMPFEN statt KILLEN.
   Vorher stand hier "*{animation:none!important; transition-duration:.001ms!important}".
   Das hat auch die kleinen, sinntragenden Animationen erschlagen (EKG-Kurve,
   Puls-Punkt am Vitalmonitor) — die Seite wirkte tot und Elemente sprangen
   ohne Überblendung auf. Jetzt: grosse Bewegung aus, kleine Bewegung bleibt. */
@media (prefers-reduced-motion: reduce){
  /* Grossflaechige Dauerbewegung und Parallax-Spielereien: aus */
  .mesh,.kenburns,.floaty,.hero-canvas{ animation:none!important; }
  /* Uebergaenge bleiben, nur kurz — kein hartes Aufspringen */
  *{ transition-duration:.18s!important; }
  /* Endlos-Schleifen ruhiger, aber nicht tot (Puls, EKG, Blüte) */
  .animate-pulse{ animation-duration:3s!important; }
}
/* Wenn der Animations-Motor gar nicht laeuft (CDN geblockt): alles statisch sichtbar */
.no-anim [data-draw] path,.no-anim [data-draw] line,.no-anim [data-draw] polyline,
.no-anim [data-draw] circle,.no-anim [data-draw] ellipse{ stroke-dashoffset:0!important; }
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion: reduce){ @view-transition{ navigation:none; } }

/* ── Header kompakter (war zu breit) ─────────────────────────── */
.site-header nav[aria-label="Hauptnavigation"]{ gap:1rem; }
.site-header .header-cta{ font-size:.84rem; padding:.5rem .85rem; gap:.4rem; }
.site-header .header-cta svg{ width:.95rem; height:.95rem; }
@media (max-width:1279px){
  .site-header nav[aria-label="Hauptnavigation"] a[href="karriere.html"]{ display:none; }
}

/* Telefon-Button im gescrollten (hellen) Header: dezent, Schrift dunkel wie die Menue-Eintraege.
   WICHTIG: der Button traegt seitenweise nur .btn-onhero (weisse Schrift fuer den dunklen Hero) —
   nur auf index.html zusaetzlich .header-cta. Im gescrollten Header wurde die weisse Nummer daher
   auf hellem Grund unsichtbar. Darum hier .btn-onhero IM gescrollten Header ansteuern (die Hero-
   „Anrufen"-Buttons liegen im <main>, nicht im Header, und bleiben unberuehrt). */
.site-header.scrolled .btn-onhero{ color:var(--fg); background:color-mix(in srgb,var(--brand) 5%, transparent); border-color:color-mix(in srgb,var(--fg) 16%, transparent); backdrop-filter:none; }
.site-header.scrolled .btn-onhero:hover{ background:color-mix(in srgb,var(--brand) 11%, transparent); color:var(--brand); border-color:color-mix(in srgb,var(--brand) 30%, transparent); }
html.dark .site-header.scrolled .btn-onhero{ color:var(--fg); border-color:color-mix(in srgb,#fff 18%, transparent); }

/* ─── Leistungstabelle Pflegegrade ────────────────────────────────────────
   Kompakte, ruhige Tabelle: heller Lila-Grund, abwechselnde Zeilentoene,
   Leistungs-Spalte links in kraeftigerem Lila. Zahlen mit Tabellenziffern,
   damit die Spalten fluchten. Passt ohne Seitwaerts-Scrollen in den Text-
   bereich; unter 1024px zeigt der Picker nur EINEN Pflegegrad.            */
.pg-scroll{ --pg-tint:color-mix(in srgb, var(--brand) 5%, #fff);
  --pg-tint-alt:color-mix(in srgb, var(--brand) 11%, #fff);
  --pg-lead:color-mix(in srgb, var(--brand) 15%, #fff);
  --pg-lead-alt:color-mix(in srgb, var(--brand) 22%, #fff);
  --pg-line:color-mix(in srgb, var(--brand) 14%, transparent);
  overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; border:1px solid var(--pg-line); border-radius:14px;
  background:var(--pg-tint); }
html.dark .pg-scroll{ --pg-tint:color-mix(in srgb, var(--brand) 8%, var(--card));
  --pg-tint-alt:color-mix(in srgb, var(--brand) 15%, var(--card));
  --pg-lead:color-mix(in srgb, var(--brand) 20%, var(--card));
  --pg-lead-alt:color-mix(in srgb, var(--brand) 27%, var(--card));
  --pg-line:color-mix(in srgb, var(--brand) 22%, transparent); }
.pg-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.pg-table caption{ caption-side:bottom; text-align:left; padding:.7rem .75rem .75rem;
  font-size:.78rem; line-height:1.55; color:var(--muted); }
.pg-table th, .pg-table td{ padding:.55rem .65rem; }
.pg-table tbody tr + tr > *{ border-top:1px solid var(--pg-line); }

/* Kopfzeile: je hoeher der Pflegegrad, desto kraeftiger der Markenton */
.pg-grade{ color:#fff; font-weight:700; font-size:.82rem; line-height:1.25; text-align:center;
  background:var(--brand-2); padding-block:.7rem; }
/* Die zwei hellsten Koepfe tragen dunkle Schrift — weiss faellt dort unter 4,5:1 */
.pg-grade-1{ background:color-mix(in srgb, var(--brand-2) 62%, #fff); color:var(--fg); }
.pg-grade-2{ background:color-mix(in srgb, var(--brand-2) 68%, #fff); color:var(--fg); }
.pg-grade-3{ background:color-mix(in srgb, var(--brand-2) 88%, #fff); }
.pg-grade-4{ background:var(--brand-2); }
.pg-grade-5{ background:var(--brand); }
html.dark .pg-grade{ color:#1A141E; }
html.dark .pg-grade-1{ background:color-mix(in srgb, var(--brand) 45%, var(--card)); color:var(--fg); }
html.dark .pg-grade-2{ background:color-mix(in srgb, var(--brand) 72%, var(--card)); }
html.dark .pg-grade-3{ background:color-mix(in srgb, var(--brand) 86%, var(--card)); }
html.dark .pg-grade-4,html.dark .pg-grade-5{ background:var(--brand); }
.pg-table thead th:first-child{ background:var(--pg-lead); }
.pg-table thead th{ border-bottom:1px solid color-mix(in srgb, var(--brand) 30%, transparent); }

/* Leistungs-Spalte: kraeftigeres Lila, klebt beim seitlichen Scrollen links */
.pg-row{ position:sticky; left:0; z-index:1; text-align:left; font-weight:600; font-size:.86rem;
  line-height:1.35; background:var(--pg-lead); width:34%; }
.pg-row small{ display:block; margin-top:.1rem; font-weight:500; font-size:.73rem; color:var(--muted); }
/* Preise: ruhig statt fett — abwechselnde Zeilentoene statt Kaestchen */
.pg-cell{ text-align:center; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--fg); background:var(--pg-tint); white-space:nowrap; }
.pg-table tbody tr:nth-child(even) .pg-cell{ background:var(--pg-tint-alt); }
.pg-table tbody tr:nth-child(even) .pg-row{ background:var(--pg-lead-alt); }
.pg-cell.none{ color:var(--muted); font-weight:500; }
.pg-cell .unit{ display:block; font-weight:500; font-size:.72rem; color:var(--muted); margin-top:.1rem; }

/* Pflegegrad-Umschalter — nur auf schmalen Schirmen. Ohne JS: die Radios
   liegen als Geschwister vor der Tabelle und blenden per :checked die
   nicht gewaehlte Spalte aus. Dadurch steht die Tabelle nur EINMAL im
   Markup (keine doppelte Pflege der Betraege). */
.pg-radio{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
/* 5 Tabs immer in EINER Zeile — gleichbreite Spalten, damit Grad 5 nicht umbricht */
.pg-picker{ display:grid; grid-template-columns:repeat(5,1fr); gap:.4rem; margin-bottom:1rem; }
.pg-picker label{ border:1px solid var(--border); border-radius:999px; padding:.45rem .35rem;
  text-align:center; font-weight:600; font-size:.82rem; color:var(--muted); cursor:pointer; background:var(--card);
  transition:background .25s var(--ease-out), color .25s, border-color .25s; }
@media (max-width:360px){ .pg-picker label{ font-size:.76rem; padding:.42rem .2rem; } }
.pg-picker label:hover{ border-color:var(--brand); color:var(--brand); }
#pgr1:checked ~ .pg-picker label[for="pgr1"],#pgr2:checked ~ .pg-picker label[for="pgr2"],
#pgr3:checked ~ .pg-picker label[for="pgr3"],#pgr4:checked ~ .pg-picker label[for="pgr4"],
#pgr5:checked ~ .pg-picker label[for="pgr5"]{ background:var(--brand); border-color:transparent; color:#fff; }
html.dark #pgr1:checked ~ .pg-picker label[for="pgr1"],html.dark #pgr2:checked ~ .pg-picker label[for="pgr2"],
html.dark #pgr3:checked ~ .pg-picker label[for="pgr3"],html.dark #pgr4:checked ~ .pg-picker label[for="pgr4"],
html.dark #pgr5:checked ~ .pg-picker label[for="pgr5"]{ color:#1A141E; }
.pg-radio:focus-visible ~ .pg-picker label[for]{ outline:2px solid var(--brand); outline-offset:2px; }

@media (max-width:1023px){
  .pg-scroll{ overflow:visible; }
  .pg-table{ font-size:.9rem; }
  .pg-row{ position:static; width:auto; }
  .pg-cell{ width:32%; }
  /* erst alle Grad-Spalten aus … */
  .pg-table tr > *:nth-child(n+2){ display:none; }
  /* … dann die gewaehlte wieder ein */
  #pgr1:checked ~ .pg-scroll .pg-table tr > *:nth-child(2),
  #pgr2:checked ~ .pg-scroll .pg-table tr > *:nth-child(3),
  #pgr3:checked ~ .pg-scroll .pg-table tr > *:nth-child(4),
  #pgr4:checked ~ .pg-scroll .pg-table tr > *:nth-child(5),
  #pgr5:checked ~ .pg-scroll .pg-table tr > *:nth-child(6){ display:table-cell; }
}
@media (max-width:479px){
  .pg-table{ font-size:.85rem; }
  .pg-table th, .pg-table td{ padding:.5rem .55rem; }
  .pg-row{ font-size:.82rem; }
  .pg-cell{ width:38%; }
}
@media (min-width:1024px){ .pg-picker,.pg-radio{ display:none; } }

/* ─── Lightbox ─────────────────────────────────────────────────────────────
   Inhaltsbilder sind klickbar, öffnen groß, lassen sich durchblättern.     */
img.zoomable{ cursor:zoom-in; }
.lb{ position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column;
  background:rgba(20,12,24,.92); backdrop-filter:blur(6px); opacity:0; visibility:hidden;
  transition:opacity .28s var(--ease-out), visibility .28s; }
.lb.open{ opacity:1; visibility:visible; }
.lb-bar{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.1rem; color:#fff; }
.lb-count{ font-size:.85rem; letter-spacing:.08em; opacity:.7; }
.lb-btn{ width:2.75rem; height:2.75rem; flex:none; display:grid; place-items:center; border-radius:999px;
  color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  transition:background .2s, transform .2s; }
.lb-btn:hover{ background:rgba(255,255,255,.24); }
.lb-btn:active{ transform:scale(.94); }
.lb-btn:disabled{ opacity:.3; cursor:not-allowed; }
.lb-stage{ position:relative; flex:1 1 auto; display:grid; place-items:center; padding:0 1rem; min-height:0; overflow:hidden; touch-action:none; }
.lb-stage img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  border-radius:12px; box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
  transform-origin:center center; will-change:transform; cursor:zoom-in; user-select:none; -webkit-user-drag:none; }
.lb-stage img.zoomed{ cursor:grab; border-radius:0; }
.lb-stage img.zoomed:active{ cursor:grabbing; }
.lb.is-zoomed .lb-nav{ opacity:0; pointer-events:none; }
.lb-tools{ display:flex; align-items:center; gap:.5rem; }
.lb-zoom{ font-size:.8rem; letter-spacing:.04em; opacity:.75; min-width:3.6rem; text-align:center; }
.lb-nav{ transition:opacity .2s; }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); }
.lb-nav.prev{ left:.6rem; } .lb-nav.next{ right:.6rem; }
.lb-foot{ flex:none; padding:.75rem 1.1rem 1.1rem; color:#fff; display:grid; gap:.7rem; justify-items:center; }
.lb-cap{ font-size:.92rem; opacity:.85; text-align:center; max-width:60ch; }
.lb-thumbs{ display:flex; gap:.5rem; overflow-x:auto; max-width:100%; padding:.2rem; scrollbar-width:thin; }
.lb-thumbs button{ flex:none; width:64px; height:48px; border-radius:8px; overflow:hidden;
  border:2px solid transparent; opacity:.55; transition:opacity .2s, border-color .2s; }
.lb-thumbs button img{ width:100%; height:100%; object-fit:cover; display:block; }
.lb-thumbs button[aria-current="true"]{ opacity:1; border-color:var(--accent); }
.lb-thumbs button:hover{ opacity:1; }
@media (max-width:640px){ .lb-thumbs button{ width:52px; height:40px; } }
@media (prefers-reduced-motion: reduce){ .lb{ transition:none; } }

/* Lightbox offen: schwebende Elemente treten zurueck */
body.lb-open .wa-fab, body.lb-open #cookie-banner{ visibility:hidden; }