/* ============================================================
   PRAXERA HEADER · FULLSCREEN INDEX (C) — Produktion
   Minimal-Bar (cream auf #050505) + ☰ → cinematisches Vollbild-Index-
   Overlay (3 Kategorie-Spalten + Index 01–15 + Hover-Bild + Demo-CTA).
   Ersetzt das Hell-Mega auf Desktop (nav-submenus hidden); Mobile nutzt
   den bestehenden Burger mit allen 15 Services. Controller: praxera-header.js
   Konsolidiert aus dem verifizierten Prototyp (_proto/_common.css + c.css).
   ============================================================ */
:root{
  --hh:84px; --hpad:clamp(20px,4.2vw,60px);
  --pcream:#F8F6F1; --ppaper:#050505; --paccent:#6E2F3F;
  --pline:rgba(248,246,241,.12); --pline-soft:rgba(248,246,241,.06);
  --pease:cubic-bezier(.22,.61,.36,1);
  --rise:cubic-bezier(.16,1,.3,1); --wipe:cubic-bezier(.77,0,.175,1);
}

/* Header-Text/Logo/Nav/CTA → cream (übersteuert die helle Yucca-Bar) */
.header{ border-bottom:none !important; color:var(--pcream) !important; }
.header .h-logo-mark{ color:var(--pcream) !important; }
.header .h-logo-inner.h-logo-text{ color:var(--pcream) !important; }
.header .nav .n-menu .n-item .n-text{ color:var(--pcream) !important; }
.header .nav .n-menu .n-item .n-link{ color:var(--pcream) !important; text-decoration:none; }
.header .nav .n-menu .n-item .arrow svg path{ fill:var(--pcream) !important; }
.header .h-cart.h-cta-slot .h-cta-btn.h-btn{
  font-family:'Syne',system-ui,sans-serif !important; text-transform:uppercase; letter-spacing:.05em; font-weight:600;
  font-size:.84rem !important; color:var(--pcream) !important; border-radius:0 !important;
  box-shadow:inset 0 0 0 1px rgba(248,246,241,.30) !important;
}
.header .h-cart.h-cta-slot .h-cta-btn.h-btn:hover{ color:#fff !important; box-shadow:inset 0 0 0 1px var(--paccent) !important; }

/* ---------- Minimal-Leiste ---------- */
.header{
  position:fixed !important; top:0 !important; left:0 !important; width:100% !important;
  height:88px !important; padding:0 var(--hpad) !important;
  background:transparent !important; justify-content:flex-start !important;
  transition:height .5s var(--pease), background .5s var(--pease) !important;
}
.header.is-scrolled{
  height:70px !important; background:rgba(244,243,242,.9) !important; border-bottom:1px solid rgba(27,25,22,.08) !important;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
html.c-js .header .nav{ display:none !important; }
.header .h-cart.h-cta-slot{ margin-left:auto !important; }

.c-index-btn{
  display:inline-flex; align-items:center; gap:.85rem; margin-left:1.8rem;
  background:none; border:0; cursor:pointer; padding:.5rem .2rem; color:var(--pcream);
  font:600 .9rem/1 'Syne',system-ui,sans-serif; letter-spacing:.16em; text-transform:uppercase;
}
.c-index-btn .c-burger{ display:flex; flex-direction:column; justify-content:space-between; width:26px; height:11px; }
.c-index-btn .c-burger i{ display:block; height:1.5px; width:100%; background:currentColor; transform-origin:center; transition:transform .45s var(--wipe), width .4s var(--wipe), opacity .3s; }
.c-index-btn:hover .c-burger i:first-child{ width:70%; }
.c-index-btn:hover .c-burger i:last-child{ width:85%; }

.nav-submenus{ display:none !important; }

/* ---------- Auto-Flip: heller Hero → dunkler Header (site-weit; Klasse via praxera-header.js) ----------
   Höhere Spezifität als die cream-Basisregeln oben (.header.header-on-light … statt .header …),
   deckt ALLE Header-Elemente inkl. dem CTA-Button ab (den die alte leistung.css-Regel vergaß). */
.header.header-on-light, .header.is-scrolled,
.header.header-on-light .h-logo-mark, .header.is-scrolled .h-logo-mark,
.header.header-on-light .h-logo-inner, .header.is-scrolled .h-logo-inner,
.header.header-on-light .h-logo-inner.h-logo-text, .header.is-scrolled .h-logo-inner.h-logo-text,
.header.header-on-light .h-logo-line, .header.is-scrolled .h-logo-line,
.header.header-on-light .nav .n-menu .n-item .n-text, .header.is-scrolled .nav .n-menu .n-item .n-text,
.header.header-on-light .nav .n-menu .n-item .n-link, .header.is-scrolled .nav .n-menu .n-item .n-link,
.header.header-on-light .c-index-btn, .header.is-scrolled .c-index-btn,
.header.header-on-light .c-index-label, .header.is-scrolled .c-index-label{ color:var(--ppaper) !important; }
.header.header-on-light .nav .n-menu .n-item .arrow svg path, .header.is-scrolled .nav .n-menu .n-item .arrow svg path{ fill:var(--ppaper) !important; }
.header.header-on-light .h-cart.h-cta-slot .h-cta-btn.h-btn, .header.is-scrolled .h-cart.h-cta-slot .h-cta-btn.h-btn{
  color:var(--ppaper) !important;
  box-shadow:inset 0 0 0 1px rgba(5,5,5,.30) !important;
}
.header.header-on-light .h-cart.h-cta-slot .h-cta-btn.h-btn:hover, .header.is-scrolled .h-cart.h-cta-slot .h-cta-btn.h-btn:hover{
  color:var(--paccent) !important;
  box-shadow:inset 0 0 0 1px var(--paccent) !important;
}

/* ============================================================ OVERLAY */
.c-overlay{
  position:fixed; inset:0; z-index:80; isolation:isolate;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s var(--pease), visibility .4s var(--pease);
}
.c-overlay.is-open, .c-overlay.is-closing{ opacity:1; visibility:visible; pointer-events:auto; }

.c-ov-bg{
  position:absolute; inset:0; background:#070707;
  -webkit-clip-path:inset(0 0 100% 0); clip-path:inset(0 0 100% 0);
  transition:-webkit-clip-path .62s var(--wipe), clip-path .62s var(--wipe);
}
.c-overlay.is-open .c-ov-bg{ -webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0); }
.c-overlay.is-closing .c-ov-bg{ -webkit-clip-path:inset(0 0 100% 0); clip-path:inset(0 0 100% 0); transition-duration:.45s; transition-timing-function:cubic-bezier(.7,0,.2,1); }

.c-ov-frame{ position:absolute; inset:0; display:flex; flex-direction:column; padding:clamp(28px,3.6vh,42px) var(--hpad); }

/* Top-Bar */
.c-ov-top{ display:flex; align-items:center; justify-content:space-between; gap:2.5rem; flex:0 0 auto; }
.c-ov-logo{ display:flex; flex-direction:column; line-height:1.05; text-decoration:none; color:var(--pcream); font-family:'Koh Santepheap',Georgia,serif; flex-shrink:0; }
.c-ov-logo-1{ font-weight:700; font-size:clamp(16px,1.25vw,19px); }
.c-ov-logo-2{ font-weight:400; font-size:clamp(12px,.95vw,15px); opacity:.82; }
.c-ov-topnav{ display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:.5rem 2.4rem; flex:1; }
.c-ov-topnav a{ text-decoration:none; color:rgba(248,246,241,.82); font:600 clamp(12px,.9vw,14px)/1.25 'Syne',sans-serif; text-transform:uppercase; letter-spacing:.12em; position:relative; padding:.2rem 0; transition:color .3s var(--pease); }
.c-ov-topnav a::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:var(--paccent); transform:scaleX(0); transform-origin:right center; transition:transform .4s var(--wipe); }
.c-ov-topnav a:hover{ color:#fff; }
.c-ov-topnav a:hover::after{ transform:scaleX(1); transform-origin:left center; }
.c-ov-close{ display:inline-flex; align-items:center; gap:.7em; background:none; border:0; cursor:pointer; color:var(--pcream); font:600 clamp(10px,.8vw,12px)/1 'Syne',sans-serif; letter-spacing:.16em; text-transform:uppercase; flex-shrink:0; }
.c-ov-close-icon{ position:relative; width:18px; height:18px; }
.c-ov-close-icon i{ position:absolute; top:50%; left:0; width:100%; height:1.5px; background:currentColor; }
.c-ov-close-icon i:first-child{ transform:rotate(45deg); }
.c-ov-close-icon i:last-child{ transform:rotate(-45deg); }
.c-ov-close:hover .c-ov-close-icon{ transform:rotate(90deg); transition:transform .5s var(--wipe); }

/* Content */
.c-ov-content{
  flex:1 1 auto; min-height:0; align-content:center; align-items:center;
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,.82fr);
  gap:clamp(2.5rem,5vw,6rem); width:100%; max-width:1440px; margin:0 auto; padding-block:clamp(16px,3vh,40px);
}
.c-ov-cols{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(1.6rem,3vw,3.4rem); }
.c-ov-cols:hover .c-ov-link{ opacity:.45; transition:opacity .3s var(--pease); }
.c-ov-cols .c-ov-link:hover{ opacity:1; }

/* Linke Spalte: Liste + Demo-CTA — luftige Liste füllt den Raum, CTA direkt darunter */
.c-ov-left{ display:flex; flex-direction:column; gap:clamp(2.2rem,4.6vh,3.6rem); }
.c-ov-actions{
  align-self:flex-start; display:flex; flex-wrap:wrap; gap:1rem 1.1rem;
  opacity:0; transform:translateY(14px);
  transition:opacity .55s var(--pease), transform .7s var(--rise);
}
.c-overlay.is-open .c-ov-actions{ opacity:1; transform:translateY(0); transition-delay:.55s; }
.c-ov-btn{
  display:inline-flex; align-items:center; gap:.6em; padding:clamp(13px,1vw,15px) clamp(20px,1.7vw,25px); border-radius:0;
  font:600 clamp(11px,.85vw,13px)/1 'Syne',sans-serif; letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  transition:background .45s var(--pease), color .45s var(--pease), border-color .45s var(--pease);
}
.c-ov-btn-arrow{ transition:transform .45s var(--wipe); }
.c-ov-btn:hover .c-ov-btn-arrow{ transform:translateX(6px); }
.c-ov-btn-primary{ background:var(--paccent); color:var(--pcream); border:1px solid var(--paccent); }
.c-ov-btn-primary:hover{ background:transparent; color:var(--pcream); border-color:var(--pcream); }
.c-ov-btn-ghost{ background:transparent; color:var(--pcream); border:1px solid rgba(110,47,63,.75); }
.c-ov-btn-ghost:hover{ background:var(--paccent); border-color:var(--paccent); color:#fff; }

/* Kategorie-Headline + Port-Signatur */
.c-ov-cat{ margin-bottom:1.7rem; }
.c-ov-cat .c-ov-line-inner{
  position:relative; display:block;
  font:600 clamp(12px,.9vw,14px)/1.25 'Syne',sans-serif; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(248,246,241,.72); padding-bottom:12px; border-bottom:1px solid rgba(248,246,241,.18);
  /* 2-Zeilen-Reserve: „Digitales Praxismanagement" bricht um — ohne Reserve
     säßen Trennlinien + Listen-Start der 3 Spalten auf verschiedenen Höhen. */
  min-height:calc(2.5em + 12px);
}
.c-ov-cat .c-ov-line-inner::before{ content:""; position:absolute; left:0; bottom:-1px; width:30px; height:1px; background:var(--paccent); }
/* Kategorie-Headline als Link zur Kategorie-Seite (Hover wie die Service-Links).
   Pfeil inline hinterm Text (nicht flex/rechtsbündig) — bricht die lange
   Kategorie um, bleibt er sauber am Wortende. */
.c-ov-cat-link{ color:inherit; text-decoration:none; transition:color .35s var(--pease); }
.c-ov-cat-go{ display:inline-block; margin-left:.45em; color:var(--paccent); opacity:0; transform:translateX(-6px); transition:opacity .35s var(--pease), transform .45s var(--pease); font-size:.9em; letter-spacing:0; }
.c-ov-cat-link:hover, .c-ov-cat-link:focus-visible{ color:#fff; }
.c-ov-cat-link:hover .c-ov-cat-go, .c-ov-cat-link:focus-visible .c-ov-cat-go{ opacity:1; transform:translateX(0); }

.c-ov-list{ list-style:none; margin:0; padding:0; }
.c-ov-item{ margin:0; }
.c-ov-line{ display:block; overflow:hidden; }
.c-ov-line-inner{ display:block; transform:translateY(110%); transition:transform .85s var(--rise); will-change:transform; }
.c-overlay.is-open .c-ov-line-inner{ transform:translateY(0); transition-delay:calc(var(--i,0) * .04s + .2s); }
.c-overlay.is-closing .c-ov-line-inner{ transform:translateY(110%); transition:transform .4s cubic-bezier(.7,0,.2,1); transition-delay:0s; }

.c-ov-link{ display:block; text-decoration:none; padding:1.16rem 0; }
.c-ov-link .c-ov-line-inner{ display:flex; align-items:baseline; gap:1rem; }
.c-ov-ix{ font:300 clamp(9px,.75vw,11px)/1 'Onest',sans-serif; font-variant-numeric:tabular-nums; letter-spacing:.04em; color:rgba(248,246,241,.55); min-width:1.9em; transition:color .35s var(--pease); }
.c-ov-label{ position:relative; font:600 clamp(15px,1.05vw,18px)/1.12 'Syne',sans-serif; text-transform:uppercase; letter-spacing:-.005em; color:rgba(248,246,241,.9); transition:color .35s var(--pease); }
.c-ov-label::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:var(--paccent); transform:scaleX(0); transform-origin:right center; transition:transform .45s var(--wipe); }
.c-ov-go{ margin-left:auto; align-self:center; color:var(--paccent); opacity:0; transform:translateX(-6px); transition:opacity .35s var(--pease), transform .45s var(--pease); font-size:clamp(11px,.85vw,13px); }
.c-ov-link:hover .c-ov-ix, .c-ov-link:focus-visible .c-ov-ix{ color:var(--paccent); }
.c-ov-link:hover .c-ov-label, .c-ov-link:focus-visible .c-ov-label{ color:#fff; }
.c-ov-link:hover .c-ov-label::after, .c-ov-link:focus-visible .c-ov-label::after{ transform:scaleX(1); transform-origin:left center; }
.c-ov-link:hover .c-ov-go, .c-ov-link:focus-visible .c-ov-go{ opacity:1; transform:translateX(0); }
.c-ov-link.is-active .c-ov-label{ color:#fff; }
.c-ov-link.is-active .c-ov-ix{ color:var(--paccent); }

/* Preview */
.c-ov-preview{ align-self:start; opacity:0; transition:opacity .6s var(--pease); }
.c-overlay.is-open .c-ov-preview{ opacity:1; transition-delay:.32s; }
.c-ov-figure{ position:relative; width:100%; aspect-ratio:4/5; max-height:min(40vh,380px); overflow:hidden; background:#000; border:1px solid var(--pline); }
.c-ov-figure img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); filter:grayscale(.4) contrast(1.03) brightness(.97); transition:opacity .6s var(--pease), transform 1.3s var(--pease); border-radius:0 !important; }
.c-ov-figure img.show{ opacity:1; transform:scale(1); }
.c-ov-figure::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 60px 6px rgba(0,0,0,.5); pointer-events:none; }
.c-ov-cap{ padding:18px 0 0; }
.c-ov-cap-ix{ display:block; font:600 clamp(10px,.75vw,11px)/1 'Syne',sans-serif; letter-spacing:.2em; text-transform:uppercase; color:var(--paccent); margin-bottom:10px; }
.c-ov-cap-title{ font:600 clamp(17px,1.45vw,21px)/1.08 'Syne',sans-serif; text-transform:uppercase; letter-spacing:-.01em; color:var(--pcream); margin:0 0 10px; }
.c-ov-cap-desc{ font:300 clamp(12px,.9vw,14px)/1.55 'Onest',sans-serif; color:rgba(248,246,241,.88); margin:0 0 14px; max-width:42ch; }
.c-ov-cap-cta{ display:inline-flex; align-items:center; gap:.5em; font:600 clamp(10px,.75vw,11px)/1 'Syne',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--pcream); }
.c-ov-cap-cta .pa{ color:var(--paccent); transition:transform .4s var(--pease); }
.c-ov-preview:hover .c-ov-cap-cta .pa{ transform:translateX(5px); }

/* Bottom */
.c-ov-bottom{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; flex:0 0 auto; }
.c-ov-meta-line{ font:300 .9rem/1.3 'Onest',sans-serif; color:rgba(248,246,241,.62); }
.c-ov-meta-line a{ color:inherit; text-decoration:none; }
.c-ov-meta-line a:hover{ color:#fff; }
.c-ov-socials{ display:flex; gap:1.6rem; }
.c-ov-socials a{ text-decoration:none; color:rgba(248,246,241,.62); font:500 .78rem/1 'Onest',sans-serif; letter-spacing:.12em; text-transform:uppercase; transition:color .3s var(--pease); }
.c-ov-socials a:hover{ color:#fff; }

.c-ov-top, .c-ov-bottom{ opacity:0; transition:opacity .55s var(--pease); }
.c-overlay.is-open .c-ov-top{ opacity:1; transition-delay:.12s; }
.c-overlay.is-open .c-ov-bottom{ opacity:1; transition-delay:.5s; }

body.c-lock{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .c-ov-bg{ -webkit-clip-path:none !important; clip-path:none !important; transition:none !important; }
  .c-ov-line-inner, .c-overlay.is-open .c-ov-line-inner, .c-overlay.is-closing .c-ov-line-inner{ transform:none !important; transition:none !important; }
  .c-ov-figure img{ transform:none !important; }
  .c-ov-preview, .c-ov-top, .c-ov-bottom, .c-ov-demo{ transition:opacity .2s linear !important; transform:none !important; }
}

/* Mobile: Overlay + ☰ aus; Burger (alle 15) + Kategorie-Labels */
@media (max-width:900px){
  .c-index-btn{ display:none !important; }
  .c-overlay{ display:none !important; }
  .h-mobile-menu{ justify-content:flex-start !important; overflow-y:auto !important; }
  .h-mm-cat{ display:block; margin:16px 0 6px; font:600 11px/1 'Syne',system-ui,sans-serif; letter-spacing:.18em; text-transform:uppercase; color:rgba(248,246,241,.4); }
  .h-mm-cat-link{ text-decoration:none; color:rgba(248,246,241,.62); }
  .h-mm-cat-go{ color:var(--paccent); letter-spacing:0; }
  .h-mm-sub{ padding-bottom:8px !important; }
}
@media (max-width:1180px){
  .c-ov-content{ grid-template-columns:minmax(0,1.5fr) minmax(280px,.9fr); }
  .c-ov-cols{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.4rem 2.4rem; }
}