/* ════════════════════════════════════════════════════════════════
   Intensia Pflegedienst — gemeinsames Design-System (site.css)
   Konzept „Vitalpuls" · Lila/Weiß + Mint-Petrol · Fraunces × Mulish
   ════════════════════════════════════════════════════════════════ */
:root{
  --primary:#6A247E; --primary-deep:#4A1857; --secondary:#B48EB6;
  --hnav:#8A3FA6; --hnav-light:#EFE1F8; /* Menü-Textfarbe: helles Lila statt Schwarz */
  --accent:#1F8E78; --accent-soft:#7FC8B8; --accent-tint:#EAF6F2; --primary-soft:#F3EEF6;
  --bg:#FBFAFC; --surface:#FFFFFF; --fg:#2A2230; --muted:#6B6473; --border:#ECE6F0;
  --shadow-sm:0 1px 2px rgb(74 24 87/.06);
  --shadow:0 18px 50px -24px rgb(74 24 87/.25);
  --shadow-lg:0 30px 70px -30px rgb(74 24 87/.35);
  --radius:.9rem; --radius-lg:1.4rem;
  --text-eyebrow:.78rem; --text-body:1.0625rem;
  --text-lead:clamp(1.12rem,1.4vw,1.32rem);
  --text-h3:clamp(1.2rem,2.1vw,1.55rem);
  --text-h2:clamp(1.65rem,3.6vw,2.45rem);
  --text-h1:clamp(2.3rem,5.4vw,4rem);
  --lh-tight:1.08; --lh-body:1.62;
  --tracking-tight:-.02em; --tracking-label:.16em;
  --focus:var(--accent);
}
html.dark{
  --primary:#C49BD0; --primary-deep:#D9BEE3; --secondary:#B48EB6;
  --hnav:#C9A2DB; --hnav-light:#EFE1F8;
  --accent:#54C9AD; --accent-soft:#7FC8B8; --accent-tint:#1c2b2a; --primary-soft:#241B2C;
  --bg:#181520; --surface:#221C2B; --fg:#ECE7F0; --muted:#B6AEC0; --border:#312A3C;
  --shadow:0 20px 50px -24px rgb(0 0 0/.55);
  --shadow-lg:0 34px 80px -30px rgb(0 0 0/.65);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
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; overflow-x:clip;
  transition:background .4s ease,color .4s ease;
}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif; line-height:var(--lh-tight);
  letter-spacing:var(--tracking-tight); font-weight:600; text-wrap:balance; margin:0; color:var(--fg)}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
ul{margin:0}
::selection{background:var(--accent-soft); color:var(--primary-deep)}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{margin-inline:auto; max-width:78rem; padding-inline:1.25rem}
@media(min-width:768px){.wrap{padding-inline:2rem}}
.section{padding-block:clamp(4rem,8vw,7rem)}
/* zwei direkt aufeinander folgende Bereiche sollen nicht doppelt Luft haben */
.section-pb-tight{padding-bottom:clamp(1.5rem,2.5vw,2.25rem)}
.section-pt-tight{padding-top:clamp(1.5rem,2.5vw,2.25rem)}
.eyebrow{display:inline-flex; align-items:center; gap:.55rem; font-size:var(--text-eyebrow);
  font-weight:700; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--accent)}
.eyebrow::before{content:""; width:1.7rem; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--secondary))}
.eyebrow.center{justify-content:center}
.lead{font-size:var(--text-lead); line-height:1.4; color:var(--muted); font-weight:500; max-width:60ch}
.h2{font-size:var(--text-h2)} .h1{font-size:var(--text-h1)}
.text-muted{color:var(--muted)}
.prose{max-width:65ch; color:var(--muted); font-size:var(--text-body); line-height:var(--lh-body)}
.prose strong{color:var(--fg); font-weight:700}
.grid{display:grid}
.center{text-align:center}
.mx-auto{margin-inline:auto}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s,border-color .5s}
.card:hover{box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--secondary) 55%,transparent)}
.card.pad{padding:1.75rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:700;font-size:.97rem;border-radius:999px;padding:.85rem 1.5rem;cursor:pointer;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,background .3s,color .3s,border-color .3s;
  border:1.5px solid transparent; min-height:48px; line-height:1; text-align:center}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 12px 26px -12px var(--accent)}
.btn-primary:hover{box-shadow:0 18px 34px -12px var(--accent)}
/* Dark-Mode: Akzent ist nahezu weiß → Button-Text dunkel, damit lesbar */
.btn-secondary{background:transparent; color:var(--fg); border-color:var(--border)}
.btn-secondary:hover{border-color:var(--accent); color:var(--accent)}
.btn-light{background:var(--surface); color:var(--primary-deep); box-shadow:var(--shadow-sm)}
.btn-on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-on-dark:hover{background:rgba(255,255,255,.12)}
.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem;border-radius:999px;
  background:var(--primary-soft); color:var(--primary); font-weight:600; font-size:.85rem; border:1px solid var(--border)}

.icon-tile{width:3.1rem;height:3.1rem;border-radius:.85rem;display:grid;place-items:center;flex:none;
  background:var(--accent-tint); color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.icon-tile svg{width:1.5rem;height:1.5rem}
.icon-tile.lila{background:var(--primary-soft); color:var(--primary); border-color:color-mix(in srgb,var(--primary) 20%,transparent)}
.icon-tile.sm{width:2.5rem;height:2.5rem}

/* ── Header ───────────────────────────────────────────── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .4s,box-shadow .4s,backdrop-filter .4s}
.site-header{--hfg:var(--hnav)}
body.hero-dark .site-header{--hfg:var(--hnav-light)}
.site-header.scrolled{background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:saturate(160%) blur(14px);box-shadow:var(--shadow-sm);border-bottom:1px solid var(--border)}
/* gescrollt IMMER dunkle Schrift auf hellem Header (auch auf hero-dark-Unterseiten) — Spezifität schlägt body.hero-dark */
.site-header.scrolled,body.hero-dark .site-header.scrolled{--hfg:var(--hnav)}
.site-header .nav-link,.site-header .brand-text,.site-header .hbtn{color:var(--hfg)}
.brand{display:flex;align-items:center;gap:.7rem}
/* ── Marken-Logo Header (Bildmarke + Schriftzug getrennt) ── */
.brand-lock{display:flex;align-items:center;gap:10px}
.brand-lock .bl-mark{height:clamp(2.1rem,4.8vw,2.7rem);width:auto;display:block;transform:translateY(-5px)}
.brand-lock .bl-word{height:clamp(1.94rem,4.44vw,2.49rem);width:auto;display:block}
.brand-lock .mark-w,.brand-lock .word-w{display:none}
/* weiße Variante, wenn die Kopfzeilen-Schrift hell ist (dunkler Hero oben ODER Dark-Mode) */
body.hero-dark .site-header:not(.scrolled) .brand-lock .mark-c,
body.hero-dark .site-header:not(.scrolled) .brand-lock .word-c{display:none}
body.hero-dark .site-header:not(.scrolled) .brand-lock .mark-w,
body.hero-dark .site-header:not(.scrolled) .brand-lock .word-w{display:block}
html.dark .site-header .brand-lock .mark-c,
html.dark .site-header .brand-lock .word-c{display:none}
html.dark .site-header .brand-lock .mark-w,
html.dark .site-header .brand-lock .word-w{display:block}
/* Footer-Logo (getrennte Bildmarke+Schriftzug → Abstand/Höhe justierbar; hell → farbig · Dark-Mode → weiß) */
.footer-lock{display:inline-flex;align-items:center;gap:5px}
.footer-lock .fl-mark{height:clamp(2.4rem,5vw,3rem);width:auto;display:block;transform:translateY(-5px)}
.footer-lock .fl-word{height:clamp(2.2rem,4.6vw,2.75rem);width:auto;display:block}
.footer-lock .fmark-w,.footer-lock .fword-w{display:none}
html.dark .footer-lock .fmark-c,html.dark .footer-lock .fword-c{display:none}
html.dark .footer-lock .fmark-w,html.dark .footer-lock .fword-w{display:block}
.brand-text{font-family:'Kaushan Script','Fraunces',cursive;font-weight:400;font-size:1.6rem;letter-spacing:.01em;line-height:1;padding-bottom:.05em}
.brand-lockup{display:flex;flex-direction:column;justify-content:center;line-height:1.02}
.brand-sub{font-family:'Mulish',sans-serif;font-weight:600;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-top:.18em}
.site-header .brand-sub{color:var(--hfg);opacity:.72}
.nav{display:none;align-items:center;gap:1.7rem}
@media(min-width:1024px){.nav{display:flex}}
.nav-link{position:relative;font-weight:600;font-size:.95rem;padding:.4rem .1rem;opacity:.92}
.nav-link::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--secondary));transition:width .3s}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{width:100%}
.nav-link:hover{opacity:1}
.nav-link[aria-current="page"]{opacity:1;color:var(--accent)}
.hbtn{display:grid;place-items:center;border-radius:999px;padding:.6rem;background:transparent;border:0;cursor:pointer}
.hbtn:hover{background:color-mix(in srgb,var(--primary-soft) 70%,transparent)}
.lg-only{display:none}@media(min-width:1024px){.lg-only{display:inline-flex}}
.lg-hide{display:grid}@media(min-width:1024px){.lg-hide{display:none}}

/* mobile menu */
#mobile-menu{position:fixed;inset:0;z-index:70;display:none}
#mobile-menu.open{display:block}
#mobile-menu .scrim{position:absolute;inset:0;background:rgba(20,12,28,.5)}
#mobile-menu .panel{position:absolute;right:0;top:0;height:100%;width:84%;max-width:24rem;padding:1.75rem;
  display:flex;flex-direction:column;gap:.2rem;background:var(--surface);box-shadow:var(--shadow-lg);overflow-y:auto}
#mobile-menu .panel a.m-link{padding:.8rem 0;font-size:1.1rem;font-weight:600;border-bottom:1px solid var(--border)}

/* ── Atmosphäre / Aura ────────────────────────────────── */
.aura{position:absolute;border-radius:50%;filter:blur(60px);opacity:.6;pointer-events:none;will-change:transform}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2%,-3%,0) scale(1.08)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.07);opacity:.75}}
.aura.a1{animation:drift 16s ease-in-out infinite}
.aura.a2{animation:breathe 9s ease-in-out infinite}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1.16) translate3d(-1.5%,-1%,0)}}
.kenburns{animation:kenburns 24s ease-in-out infinite alternate;will-change:transform}
@media (prefers-reduced-motion: reduce){.kenburns{animation:none;transform:scale(1.04)}}
@keyframes kenburns-flip{from{transform:scaleX(-1) scale(1.06)}to{transform:scaleX(-1) scale(1.16) translate3d(-1.5%,-1%,0)}}
.flip-x{transform:scaleX(-1)}
.kenburns.flip-x{animation-name:kenburns-flip}
@media (prefers-reduced-motion: reduce){.kenburns.flip-x{animation:none;transform:scaleX(-1) scale(1.04)}}
.has-anim{position:relative}
canvas.layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
[data-tilt]{transform-style:preserve-3d}
[data-spin],[data-grow]{transform-box:fill-box;transform-origin:50% 50%}
#breath-group,[data-breathe]{transform-box:fill-box;transform-origin:50% 70%}

/* ── Page hero (Unterseiten) — mit Foto + Overlay ─────── */
.page-hero{position:relative;overflow:hidden;padding:9rem 0 clamp(3rem,7vw,5.5rem);
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-deep) 100%)}
.page-hero .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-hero .hero-overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(120deg,var(--primary-deep) 8%,color-mix(in srgb,var(--primary) 78%,transparent) 48%,color-mix(in srgb,var(--primary-deep) 30%,transparent) 100%)}
/* Dark-Mode: Unterseiten-Kopf dunkel halten. --primary/--primary-deep sind im
   Dark-Mode hell (helles Lila) → der Kopfbereich wirkte heller als der Rest der
   Seite. Hier feste dunkle Lila-Töne, damit der Kopf zum Rest passt. */
html.dark .page-hero{background:linear-gradient(135deg,#2A1730 0%,#1C1522 100%)}
html.dark .page-hero .hero-overlay{
  background:linear-gradient(120deg,rgba(24,21,32,.9) 6%,color-mix(in srgb,#3B2247 60%,transparent) 50%,rgba(24,21,32,.5) 100%)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero, .page-hero h1, .page-hero .crumb, .page-hero .lead, .page-hero .eyebrow{color:#fff}
.page-hero .eyebrow{color:#7FC8B8}
.page-hero .eyebrow::before{background:linear-gradient(90deg,#7FC8B8,#fff)}
.page-hero .lead{color:#F0E6F4;max-width:62ch}
.crumb{font-size:.85rem;font-weight:600;color:#D9BEE3;display:flex;gap:.5rem;align-items:center;margin-bottom:1.4rem}
.crumb a{opacity:.85}.crumb a:hover{opacity:1;text-decoration:underline}
.page-hero h1{font-size:var(--text-h1);max-width:18ch;margin-top:.4rem}

/* ── Bild-Reveal (Clip-Wipe) + Frames ─────────────────── */
.media-frame{overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);background:var(--primary-soft)}
.media-frame.soft{box-shadow:var(--shadow)}
[data-img-reveal]{will-change:transform;display:block;width:100%}
.img-cover{width:100%;height:100%;object-fit:cover;display:block}
/* Über uns – Leitung: Güler kleiner + Video-Player daneben */
.gueler-duo{display:grid;grid-template-columns:1fr;gap:1.75rem;max-width:none}
@media(min-width:1024px){
  /* figure löst sich auf, damit das Portrait nur bis zur Video-Unterkante reicht
     und die Bildunterschrift in einer eigenen Zeile darunter sitzt */
  .gueler-duo{grid-template-columns:minmax(0,270px) 1fr;grid-template-rows:auto auto;align-items:stretch;gap:.65rem 2.5rem}
  .gueler-duo > figure{display:contents}
  .gueler-portrait{grid-column:1;grid-row:1}
  .gueler-duo .gueler-video{grid-column:2;grid-row:1}
  .gueler-duo figcaption{grid-column:2;grid-row:2;margin-top:0!important}
  .gueler-portrait-frame{height:100%}}

/* ── Tablet: Video oben über die volle Breite, darunter Portrait links, Text rechts ── */
@media(min-width:768px) and (max-width:1023px){
  .gueler-section .wrap{display:grid;grid-template-columns:minmax(0,260px) 1fr;
    grid-template-areas:"video video" "portrait text";gap:1.75rem 2rem;align-items:start}
  .gueler-section .wrap > div:not(.gueler-text){display:contents}
  .gueler-duo{display:contents}
  .gueler-duo > figure{grid-area:video;margin:0}
  .gueler-portrait{grid-area:portrait;max-width:260px;margin-inline:0}
  .gueler-text{grid-area:text}
  .gueler-portrait-frame{height:auto}
  .gueler-portrait-frame .img-cover{height:auto;aspect-ratio:4/5}
}

/* ── Handy: Video zuerst, das Portrait darunter ── */
@media(max-width:767px){
  .gueler-duo{display:flex;flex-direction:column}
  .gueler-duo > figure{order:1;margin:0}
  .gueler-portrait{order:2;margin-top:1.75rem}
  .gueler-portrait-frame{height:auto}
  .gueler-portrait-frame .img-cover{height:auto;aspect-ratio:4/5}
}
.gueler-portrait{max-width:270px;margin-inline:auto}
/* Portrait genauso hoch wie der Videorahmen daneben */
.gueler-portrait-frame{height:100%;min-height:100%}
.gueler-portrait-frame .img-cover{width:100%;height:100%;object-fit:cover;display:block}
.gueler-text .prose{max-width:none}
.gueler-video{aspect-ratio:16/9;background:#000}
.video-frame{aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.video-frame video{width:100%;height:100%;display:block;object-fit:cover}
.gueler-video video{width:100%;height:100%;display:block;object-fit:cover}

/* ── Feature list ─────────────────────────────────────── */
.feat{display:flex;gap:.85rem;align-items:flex-start}
.feat .dot{flex:none;margin-top:.5rem;width:.6rem;height:.6rem;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
.feat-grid{display:grid;grid-template-columns:1fr;gap:.9rem 1.5rem}
@media(min-width:640px){.feat-grid.two{grid-template-columns:1fr 1fr}}

.stat-num{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(2.4rem,5vw,3.4rem);
  color:var(--primary);line-height:1;letter-spacing:-.02em}

.quote-band{position:relative;overflow:hidden;background:
  radial-gradient(120% 140% at 80% -20%, color-mix(in srgb,var(--secondary) 30%,transparent), transparent 60%),
  linear-gradient(135deg,var(--primary) 0%,var(--primary-deep) 100%)}
.quote-band, .quote-band h2, .quote-band blockquote{color:#fff}

/* Video-Bereiche im dunkel-lila Leitzitat-Look (außer Über-uns) */
.video-band{position:relative;overflow:hidden;background:
  radial-gradient(120% 140% at 80% -20%, color-mix(in srgb,var(--secondary) 30%,transparent), transparent 60%),
  linear-gradient(135deg,var(--primary) 0%,var(--primary-deep) 100%)}
.video-band, .video-band h2, .video-band .h2{color:#fff}
.video-band .prose, .video-band figcaption, .video-band .text-muted{color:#E7D9EC}
.video-band .eyebrow{color:#7FC8B8}
.video-band .pulse-ekg{display:block;margin:0 auto 1.5rem}
/* Video-Kopf: Herzschlag steht neben dem Label statt darüber — spart Höhe */
.video-band .video-eyebrow{display:flex;align-items:center;justify-content:center;gap:.55rem}
.video-band .video-eyebrow .pulse-ekg{margin:0;flex:none}
/* Überschriften der Video-Bereiche einzeilig, solange sie passen */
@media(min-width:1024px){ .video-band .h2{white-space:nowrap} }

.gallery-img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:var(--radius);background:var(--primary-soft)}
.photo{background:var(--primary-soft)}

/* ── FAQ Akkordeon ────────────────────────────────────── */
.faq{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.faq + .faq{margin-top:.8rem}
.faq summary{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.15rem 1.4rem;background:none;border:0;cursor:pointer;font:inherit;font-weight:700;color:var(--fg);text-align:left;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary .chev{flex:none;transition:transform .35s}
.faq[open] summary .chev{transform:rotate(45deg)}
.faq .panel{padding:0 1.4rem;max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease}
.faq[open] .panel{padding:0 1.4rem 1.3rem;max-height:30rem}
.faq .panel p{color:var(--muted)}

/* ── Timeline ─────────────────────────────────────────── */
.timeline{position:relative}
.step{display:flex;gap:1.25rem}
.step .num{grid-place:center;display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:50%;
  font-family:'Fraunces',serif;font-weight:600;color:#fff;background:var(--primary)}
.step.accent .num{background:var(--accent)}

/* ── Footer ───────────────────────────────────────────── */
.site-footer{background:var(--surface);border-top:1px solid var(--border)}
.site-footer a:hover{color:var(--accent)}
.foot-bottom{border-top:1px solid var(--border)}

/* ── Preloader ────────────────────────────────────────── */
#preloader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#FBFAFC}
#preloader .pre-logo{display:flex;align-items:center;gap:clamp(.2rem,1.2vw,.7rem)}
#preloader .pre-mark{height:clamp(78px,21vw,132px);width:auto;display:block;will-change:transform;transform-origin:50% 50%}
#preloader .pre-word{height:clamp(72px,19.4vw,122px);width:auto;display:block}

/* ── Utilities (Fallback, falls Tailwind blockt) ──────── */
.hidden{display:none}
.flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between}
.flex-wrap{flex-wrap:wrap}

/* ── CDN-fail-safe + reduced motion ───────────────────── */
[data-split]{display:inline-block}
.no-anim [data-reveal] > *, .no-anim [data-split], .no-anim [data-depth], .no-anim [data-fade], .no-anim [data-img-reveal]{opacity:1 !important;transform:none !important;clip-path:none !important}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .aura{opacity:.5 !important}
}

/* ════════ Startseite — Ausbau ════════ */
/* dezentes Hero-Hintergrundfoto (kaum sichtbar) */
.hero-photo-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.08;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 100% at 70% 30%, #000 30%, transparent 78%);
          mask-image:radial-gradient(120% 100% at 70% 30%, #000 30%, transparent 78%)}
html.dark .hero-photo-bg{opacity:.12}

/* Leistungen-Liste */
.leistung{display:flex;gap:1rem;align-items:flex-start;padding:1.35rem 1.4rem;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s,border-color .45s}
.leistung:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.leistung h3{font-size:1.12rem;margin-bottom:.25rem}
.leistung p{color:var(--muted);font-size:.93rem;line-height:1.55}
.leistung .go{margin-top:.6rem;display:inline-flex;align-items:center;gap:.35rem;font-weight:700;font-size:.85rem;color:var(--accent)}
.leistung .go svg{transition:transform .35s}
.leistung:hover .go svg{transform:translateX(4px)}

/* ════════ MEGA: Vitalbogen — 24h Scroll-Story ════════ */
.story24{position:relative;min-height:410vh;color:#fff;background:#0C0916}
.story24-stage{position:sticky;top:0;height:100vh;min-height:600px;overflow:hidden;display:flex;align-items:center}
.story24 .sky{position:absolute;inset:0;opacity:0;will-change:opacity}
.story24 .sky[data-sky="morning"]{background:linear-gradient(155deg,#5A1E6E 0%,#9A4E84 50%,#D98E73 100%);opacity:1}
.story24 .sky[data-sky="day"]{background:linear-gradient(155deg,#175A66 0%,#2E8F86 55%,#6FB7A6 100%)}
.story24 .sky[data-sky="evening"]{background:linear-gradient(155deg,#3A1247 0%,#6A247E 55%,#B06A8E 100%)}
.story24 .sky[data-sky="night"]{background:linear-gradient(160deg,#0C0916 0%,#1B1426 55%,#33214B 100%)}
.story24 .grain{position:absolute;inset:0;opacity:.5;background:
  radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.35), transparent 60%),
  radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,.25), transparent 60%),
  radial-gradient(1.5px 1.5px at 45% 80%, rgba(255,255,255,.2), transparent 60%);pointer-events:none}
.story24 canvas.layer{z-index:1}
.story24-inner{position:relative;z-index:3;width:100%}
.story24-head .eyebrow{color:#9FE6D5}
.story24-head .eyebrow::before{background:linear-gradient(90deg,#9FE6D5,#fff)}
.story24-head h2{color:#fff;font-size:clamp(1.7rem,4vw,3rem);max-width:18ch;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.story24-head p{color:rgba(255,255,255,.94);max-width:52ch;margin-top:.9rem;text-shadow:0 1px 16px rgba(0,0,0,.3)}
.arc-wrap{position:absolute;inset:0;z-index:2;pointer-events:none}
.arc-wrap svg{position:absolute;inset:0;width:100%;height:100%}
.celest-glow{filter:drop-shadow(0 0 22px rgba(255,255,255,.55))}
.stations{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.5rem}
.station{background:rgba(24,13,34,.56);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-lg);
  padding:1.2rem;backdrop-filter:blur(9px);box-shadow:0 16px 42px -24px rgba(0,0,0,.65);will-change:transform,opacity}
.station .time{font-family:'Fraunces',serif;font-size:1.35rem;font-weight:600;color:#fff;display:flex;align-items:center;gap:.5rem}
.station .time svg{width:1.15rem;height:1.15rem;color:#9FE6D5}
.station h3{color:#fff;font-size:1.05rem;margin:.5rem 0 .3rem}
.station p{color:rgba(255,255,255,.95);font-size:.88rem;line-height:1.5}
/* TABLET (768–1023px): gepinnte Buehne bleibt, aber mit kuerzerem Scrollweg.
   Vorher war sie hier komplett abgeschaltet — die Animation lief "ins Leere",
   weil der Abschnitt nur ~680px hoch war statt 410vh. */
@media(min-width:768px) and (max-width:1023px){
  .story24{min-height:240vh}
  .story24-stage{position:sticky;top:0;height:100vh;min-height:520px;display:flex;align-items:center}
  .stations{grid-template-columns:repeat(2,1fr)}
}
/* HANDY (<=767px): keine gepinnte Buehne — sonst verzoegert der lange
   Scrollweg das Scrollen spuerbar. Statisches Farbbild statt Animation. */
@media(max-width:767px){
  .story24{min-height:auto;background:linear-gradient(160deg,#3A1247,#6A247E 60%,#175A66)}
  .story24-stage{position:static;height:auto;min-height:0;display:block;padding-block:4.5rem}
  .story24 .sky,.story24 .arc-wrap{display:none}
}
@media(max-width:767px){
  .stations{grid-template-columns:1fr;margin-top:2rem}
}
/* Vitalbogen: animierten Bogen ohne JS / bei Reduced-Motion ausblenden (Story bleibt lesbar) */
.no-anim .arc-wrap{display:none}
.no-anim .story24,.no-anim .story24-stage{min-height:auto;position:static;height:auto}
.no-anim .story24-stage{padding-block:4rem;display:block}
@media (prefers-reduced-motion: reduce){
  .story24 .arc-wrap{display:none}
  .story24{min-height:auto}
  .story24-stage{position:static;height:auto;min-height:0;display:block;padding-block:4rem}
}

/* ---- Editorial „Worauf Sie sich verlassen können" (borderless statt Kacheln) ---- */
.assure-grid{display:grid;gap:0 3.5rem;max-width:62rem;margin-inline:auto}
@media(min-width:768px){.assure-grid{grid-template-columns:1fr 1fr}}
.assure{display:flex;gap:1.1rem;align-items:flex-start;padding:1.5rem 0;border-bottom:1px solid var(--border)}
.assure>div{flex:1}
.assure h3{font-family:'Fraunces',serif;font-size:1.14rem;font-weight:600;color:var(--fg);line-height:1.2}
.assure p{margin-top:.4rem;color:var(--muted);font-size:.95rem;line-height:1.6}
.assure-ic{flex:none;width:3rem;height:3rem;border-radius:.9rem;display:grid;place-items:center;background:rgba(31,142,120,.12);color:var(--accent)}
.assure-ic svg{width:1.5rem;height:1.5rem}
.assure-ic.lila{background:rgba(106,36,126,.12);color:var(--primary)}

/* ---- Blog / Artikel-Typografie ---- */
.article-body{font-size:1.08rem;line-height:1.75;color:var(--fg)}
.article-body h2{font-size:clamp(1.35rem,2.6vw,1.7rem);margin:2.2rem 0 .8rem}
.article-body p{margin-bottom:1.1rem;color:var(--fg)}
.article-body p.lead{color:var(--fg)}
.article-list{margin:0 0 1.4rem;padding:0;list-style:none;display:grid;gap:.7rem}
.article-list li{position:relative;padding-left:1.6rem;color:var(--muted)}
.article-list li::before{content:"";position:absolute;left:0;top:.55em;width:.6rem;height:.6rem;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--accent-soft),var(--accent))}
.article-quote{margin:2rem 0;padding:1.25rem 1.5rem;border-left:3px solid var(--accent);
  background:var(--primary-soft);border-radius:.6rem;font-family:'Fraunces',serif;font-size:1.2rem;
  font-style:italic;color:var(--primary-deep)}
html.dark .article-quote{color:var(--fg)}

/* ---- Intensiv „Für wen wir da sind": Kästchen auf Mobil als Kreis-Badges ---- */
@media(max-width:767px){
  .who-grid{display:flex!important;flex-wrap:wrap;justify-content:center;gap:1.6rem 1.1rem;margin-top:2rem!important}
  .who-grid>.card{width:calc(50% - .8rem);min-width:94px;max-width:150px;background:none;border:0;box-shadow:none;padding:0;
    display:flex;flex-direction:column;align-items:center;text-align:center}
  .who-grid>.card .icon-tile{width:4.5rem;height:4.5rem;border-radius:50%;margin:0 0 .55rem}
  .who-grid>.card .icon-tile svg{width:1.9rem;height:1.9rem}
  .who-grid>.card h3{font-size:.8rem!important;margin-top:0!important;font-weight:600;line-height:1.15}
  .who-grid>.card p{display:none}
}


/* ---- Terminbuchung (Kontakt) ---- */
.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',serif;font-size:1.1rem}
.bk-nav{width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:1.2rem;line-height:1;color:var(--fg);display:grid;place-items:center}
.bk-nav:hover{border-color:var(--accent);color:var(--accent)}
.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:.7rem;font-weight:700;color:var(--muted);letter-spacing:.03em}
.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:.6rem;border:1px solid transparent;font-size:.9rem;font-weight:600;background:transparent;cursor:pointer;color:var(--fg);font-family:inherit}
.bk-day.is-free{background:var(--accent-tint);color:var(--accent)}
.bk-day.is-free:hover{background:var(--accent);color:#fff}
.bk-day.is-sel{background:var(--accent)!important;color:#fff!important;box-shadow:0 6px 16px -6px var(--accent)}
.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(--primary-soft)}
.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:.6rem;border:1px solid var(--border);background:var(--surface);font-weight:600;font-size:.92rem;cursor:pointer;color:var(--fg);font-family:inherit}
.bk-slot:hover{border-color:var(--accent);color:var(--accent)}
.bk-slot.is-booked{opacity:.4;text-decoration:line-through;cursor:not-allowed}
.bk-slot.is-sel{background:var(--accent);color:#fff;border-color:var(--accent)}
.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:.6rem;font:inherit;background:var(--surface);color:var(--fg)}
.bk-form input[type=checkbox]{width:auto;flex:none;margin-top:.25rem;padding:0}/* Einwilligungs-Checkbox nicht auf 100% strecken */
.bk-form input:focus,.bk-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.bk-done{text-align:center}
.bk-check{display:inline-grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--accent);color:#fff;font-size:1.5rem;margin-bottom:.6rem}

/* ---- Unternehmensverbund-Diagramm (3 Häuser, responsiv ohne Tailwind-Abh.) ---- */
.verbund-grid{display:grid;grid-template-columns:1fr;gap:.7rem}
@media(min-width:560px){.verbund-grid{grid-template-columns:repeat(3,1fr)}}

/* 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-lg);
  text-decoration:none; transition:transform .3s ease, box-shadow .3s; }
.wa-fab:hover{ transform:translateY(-2px) scale(1.03); box-shadow:var(--shadow-lg); }
.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; } }
@media print{ .wa-fab{ display:none !important; } }

/* Footer: Text-Box 40px breiter, Menü etwas nach rechts */
@media(min-width:768px){
  .site-footer .grid > :first-child{margin-right:-40px}
  .site-footer .grid > :nth-child(2){margin-left:40px}
}

/* ─── Lightbox ─────────────────────────────────────────────────────────────
   Inhaltsbilder sind klickbar und lassen sich als Galerie durchblättern.
   Hero-Bilder bleiben ausgenommen.                                          */
img.zoomable{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;
  background:rgba(16,10,22,.93);backdrop-filter:blur(6px);opacity:0;visibility:hidden;
  transition:opacity .28s ease,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;cursor:pointer}
.lb-btn:hover{background:rgba(255,255,255,.24)}
.lb-btn:active{transform:scale(.94)}
.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}
/* Beim Zoomen stoeren die Pfeile — sie treten zurueck */
.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}
.lb-thumbs button{flex:none;width:64px;height:48px;border-radius:8px;overflow:hidden;cursor:pointer;
  border:2px solid transparent;opacity:.55;transition:opacity .2s,border-color .2s;background:none;padding:0}
.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}}
body.lb-open .wa-fab, body.lb-open #cookie-banner{visibility:hidden}

/* ─── Video-Vollbild ──────────────────────────────────────────────────────── */
.vid-fs{position:absolute;top:.7rem;right:.7rem;z-index:4;width:2.4rem;height:2.4rem;display:grid;place-items:center;
  border-radius:.6rem;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.45);color:#fff;cursor:pointer;
  backdrop-filter:blur(4px);opacity:0;transition:opacity .2s,background .2s}
.video-frame:hover .vid-fs,.gueler-video:hover .vid-fs,.vid-fs:focus-visible{opacity:1}
.vid-fs:hover{background:rgba(0,0,0,.65)}
/* Auf Touch-Geraeten gibt es kein Hover — dort dauerhaft zeigen */
@media(hover:none),(pointer:coarse){ .vid-fs{opacity:.9} }
/* Im Vollbild darf das Video nicht beschnitten werden */
video:fullscreen,video:-webkit-full-screen{object-fit:contain!important;width:100%;height:100%;background:#000}
.video-frame:fullscreen,.gueler-video:fullscreen{aspect-ratio:auto;width:100%;height:100%;border-radius:0;display:grid;place-items:center;background:#000}
.video-frame:fullscreen video,.gueler-video:fullscreen video{object-fit:contain}
/* Safari: Transformierte Vorfahren stoeren das Vollbild-Rendering */
html.has-fullscreen [data-fade],html.has-fullscreen [data-reveal],html.has-fullscreen [data-tilt]{transform:none!important}