/* ==========================================================================
   VIF Consulting — Website Theme
   CI: Gold #C8A74B · Anthrazit #404040 · Dark Mode
   Design angelehnt an Hannus-Website, Marke = VIF Consulting
   ========================================================================== */

:root{
  /* === VIF Consulting CI — extrahiert aus Visitenkarte v2 (brand/brand-colors.md) === */
  --gold:#C8A74B;          /* Primär / Akzent */
  --gold-2:#D8BC6B;        /* Hover-Aufhellung */
  --gold-dark:#A8852C;     /* Gold dunkel — Tiefe, Gradient, Hover-Rand */
  --gold-soft:rgba(200,167,75,.12);
  --gold-line:rgba(200,167,75,.40);
  --bg:#101012;            /* Ink — tiefster Grund */
  --bg2:#17171B;           /* Zwischenfläche (abgesetzte Sektionen) */
  --bg3:#1B1B1F;           /* Dark (CI) — Modal */
  --card:#1E1E23;          /* Card angehoben */
  --line:#2C2C33;
  --line2:#242429;
  --txt:#ECEAE5;           /* Cream — warmes Off-White als Haupttext */
  --txt-dim:#BBBBBB;       /* Gray BBB */
  --mut:#909090;           /* Gray 909 — gedämpft auf dunkel */
  --mut2:#555555;          /* Gray 555 */
  --cream:#ECEAE5;
  --anthrazit:#404040;
  --green:#34d399;
  --red:#ef4444;
  --maxw:1180px;
  --head-h:74px;
  --font:'Arial Rounded MT Bold','Arial Rounded MT','Helvetica Rounded','Segoe UI',Arial,'Helvetica Neue',sans-serif;
  --font-body:'Segoe UI',Arial,'Helvetica Neue',sans-serif;
  --ease:.28s ease;
}

/* === Light Theme Overrides — CI bleibt, Hintergrund + Schrift gespiegelt === */
html[data-theme="light"]{
  --bg:#F8F5EE;            /* warmes Off-White */
  --bg2:#F0ECE1;           /* abgesetzt */
  --bg3:#FFFFFF;           /* Modal/Card-Surface */
  --card:#FFFFFF;
  --line:#E2DCCB;
  --line2:#EBE5D4;
  --txt:#1A1A1E;
  --txt-dim:#4A4A52;
  --mut:#6E6E76;
  --mut2:#9A9A9F;
  --cream:#1A1A1E;
  --anthrazit:#404040;
  --gold-soft:rgba(184,144,30,.10);
  --gold-line:rgba(184,144,30,.45);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--font-body);line-height:1.6;
  overflow-x:hidden;
  transition:background-color .4s ease,color .4s ease;
}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4{color:var(--txt)}
html[data-theme="light"] .lcard strong{color:var(--txt)}
html[data-theme="light"] .cc-cat-h b{color:var(--txt)}
html[data-theme="light"] .nav .seg a:hover{color:var(--txt)}
html[data-theme="light"] .brand .bt b{color:var(--txt)}
html[data-theme="light"] .mobnav a{color:var(--txt-dim);border-bottom-color:var(--line)}
html[data-theme="light"] .nav .seg a{color:var(--txt-dim)}
html[data-theme="light"] .nav .seg a:hover{color:var(--txt)}
html[data-theme="light"] .scarcity b{color:var(--gold-dark)}
html[data-theme="light"] .card .gain{color:#0a7a3a}

/* Light: Card-Background solid + leichtere Schatten */
html[data-theme="light"] .card{
  background:linear-gradient(165deg,#FFFFFF,#FBF8EF);
  border-color:rgba(0,0,0,.06);
  box-shadow:0 2px 10px -4px rgba(0,0,0,.08);
}
html[data-theme="light"] .card:hover{
  box-shadow:0 24px 60px -22px rgba(0,0,0,.18),0 12px 44px -16px rgba(200,167,75,.25);
}
html[data-theme="light"] .lcard{background:linear-gradient(165deg,#FFFFFF,#FBF8EF);border-color:rgba(0,0,0,.06)}

/* Light: Sektion-alt sanfter Verlauf */
html[data-theme="light"] .section.alt{
  background:linear-gradient(180deg,#F8F5EE 0%,#F0ECE1 14%,#F0ECE1 86%,#F8F5EE 100%);
}

/* Light: Header heller + Burger dunkel */
html[data-theme="light"] .head{background:rgba(248,245,238,.86);border-bottom-color:var(--line)}
html[data-theme="light"] .burger span{background:#1A1A1E}
html[data-theme="light"] .mobnav{background:var(--bg2);border-bottom-color:var(--line)}

/* Light: Hero-Gradient dezenter */
html[data-theme="light"] .hero::before{
  background:
    radial-gradient(680px 420px at 78% 8%,rgba(200,167,75,.18),transparent 60%),
    radial-gradient(540px 380px at 8% 90%,rgba(200,167,75,.10),transparent 60%);
}
html[data-theme="light"] .hero h1{color:var(--txt)}
html[data-theme="light"] .orb{opacity:.18 !important;filter:blur(70px)}
html[data-theme="light"] .fly-ico{opacity:.18 !important}

/* Light: Banner */
html[data-theme="light"] .kibanner{
  background:linear-gradient(135deg,#FBF3DA 0%,#FFFFFF 62%);
  border-color:var(--gold-line);
}
html[data-theme="light"] .kibanner h2,
html[data-theme="light"] .kibanner h2 *{color:var(--txt)}

/* Light: Buttons */
html[data-theme="light"] .btn-ghost{background:#FFFFFF;border-color:var(--line)}
html[data-theme="light"] .btn-ghost:hover{color:var(--gold-dark);border-color:var(--gold-line)}

/* Light: Footer */
html[data-theme="light"] .foot{background:var(--bg2);border-top-color:var(--line)}
html[data-theme="light"] .foot .slogan .slg-hl{color:var(--txt)}

/* Light: Form Inputs */
html[data-theme="light"] .bk-form input,
html[data-theme="light"] .bk-form textarea{background:#FFFFFF;border-color:var(--line);color:var(--txt)}
html[data-theme="light"] .bk-close{background:#F0ECE1;border-color:var(--line);color:var(--mut)}
html[data-theme="light"] .bk-mini{border-top-color:var(--line)}

/* Light: Consent */
html[data-theme="light"] .cc-inner,html[data-theme="light"] .cc-modal{background:#FFFFFF;border-color:var(--gold-line)}
html[data-theme="light"] .cc-cat{border-color:var(--line)}
html[data-theme="light"] .cc-cat-h b{color:var(--txt)}
html[data-theme="light"] .cc-switch span{background:#D5D0C0}
html[data-theme="light"] .cc-close{background:#F0ECE1;border-color:var(--line)}

/* === Theme-Toggle Button === */
.theme-toggle{
  background:var(--gold-soft);border:1px solid var(--gold-line);
  color:var(--gold);cursor:pointer;
  width:40px;height:40px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  margin-right:8px;transition:var(--ease);
  flex-shrink:0;
}
.theme-toggle:hover{background:var(--gold);color:#0a0a0a;box-shadow:0 0 16px -4px rgba(200,167,75,.6)}
.theme-toggle svg{width:18px;height:18px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
html[data-theme="light"] .theme-toggle svg{transform:rotate(180deg)}
.theme-toggle .ico-moon{display:none}
.theme-toggle .ico-sun{display:block}
html[data-theme="light"] .theme-toggle .ico-sun{display:none}
html[data-theme="light"] .theme-toggle .ico-moon{display:block}
#themeToggleMobile{display:none}
@media(max-width:760px){
  #themeToggleMobile{display:inline-flex}
}
a{color:var(--gold);text-decoration:none;transition:color var(--ease)}
a:hover{color:var(--gold-2)}
h1,h2,h3,h4{font-family:var(--font);color:#fff;line-height:1.15;margin:0}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.gold{color:var(--gold)}
.center{text-align:center}

/* ---------- HEADER / NAV ---------- */
.head{
  position:sticky;top:0;z-index:200;height:var(--head-h);
  background:rgba(16,16,18,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.head-in{max-width:var(--maxw);margin:0 auto;height:100%;padding:0 22px;
  display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand svg{width:38px;height:38px;flex-shrink:0}
.brand .bt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.brand .bt b{font-family:var(--font);color:var(--cream);font-size:17px;font-weight:700;display:block}
.brand .bt span{font-size:8.5px;color:var(--mut);letter-spacing:.13em;text-transform:uppercase;margin-top:5px;display:block}
.nav{display:flex;align-items:center;gap:20px}
.nav .seg{display:inline-flex;align-items:center;gap:10px}
.nav .seg a{position:relative;color:var(--txt-dim);font-size:13.5px;font-weight:600;letter-spacing:.05em;
  font-family:var(--font-body);text-transform:uppercase;padding:9px 10px 13px;white-space:nowrap;
  transition:color .25s ease,text-shadow .25s ease}
.nav .seg a:hover{color:#fff}
/* futuristische Glow-Unterstrich-Linie */
.nav .seg a::after{content:"";position:absolute;left:8px;right:8px;bottom:1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  box-shadow:0 0 10px rgba(200,167,75,.85),0 0 4px rgba(200,167,75,.6);
  transform:scaleX(0);transform-origin:center;opacity:0;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .35s ease}
.nav .seg a:hover::after{transform:scaleX(.55);opacity:.45}
.nav .seg a.active{color:var(--gold);text-shadow:0 0 16px rgba(200,167,75,.5)}
.nav .seg a.active::after{transform:scaleX(1);opacity:1}
.mobnav a.active{color:var(--gold);text-shadow:0 0 14px rgba(200,167,75,.4)}
.nav .btn-book{margin-left:6px}
/* Cockpit-Demo — hervorgehobener Nav-Eintrag (Hauptthema) */
.nav .seg a.nav-cockpit{
  color:#0a0a0a;background:linear-gradient(135deg,var(--gold),var(--gold-2));
  border-radius:8px;padding:8px 14px 8px;margin-left:4px;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  box-shadow:0 0 16px -4px rgba(200,167,75,.6);
  transition:transform var(--ease),box-shadow var(--ease);
}
.nav .seg a.nav-cockpit::after{display:none}
/* "NEW"-Badge im Cockpit-Demo-Nav-Eintrag */
.nav-new{
  display:inline-block;background:#0a0a0a;color:var(--gold);
  font-size:.62rem;font-weight:800;letter-spacing:.08em;
  padding:2px 6px;border-radius:4px;margin-right:4px;
  vertical-align:middle;line-height:1.2;
}
.mobnav a.nav-cockpit .nav-new{background:var(--gold);color:#0a0a0a}
.nav .seg a.nav-cockpit:hover{color:#0a0a0a;transform:translateY(-1px);
  box-shadow:0 6px 22px -4px rgba(200,167,75,.7)}
.mobnav a.nav-cockpit{color:var(--gold);font-weight:700}

/* burger */
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:var(--ease)}
.mobnav{display:none;position:fixed;inset:var(--head-h) 0 auto 0;z-index:199;
  background:var(--bg2);border-bottom:1px solid var(--line);padding:14px 22px 22px;flex-direction:column;gap:6px}
.mobnav.open{display:flex}
.mobnav a{color:var(--txt-dim);font-size:16px;font-weight:600;padding:11px 4px;border-bottom:1px solid var(--line2)}
.mobnav a:last-of-type{border-bottom:0}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:1px solid transparent;
  font-family:var(--font);font-weight:700;font-size:14px;border-radius:10px;text-transform:uppercase;letter-spacing:.06em;
  padding:13px 22px;transition:var(--ease);text-decoration:none;line-height:1;min-height:46px}
.btn-p{background:var(--gold);color:#0a0a0a;border-color:var(--gold);box-shadow:0 0 18px -6px rgba(200,167,75,.5)}
.btn-p:hover{background:var(--gold-2);color:#0a0a0a;transform:translateY(-2px);
  box-shadow:0 12px 30px -8px rgba(200,167,75,.55),0 0 22px -4px rgba(200,167,75,.5)}
.btn-o{background:transparent;color:var(--gold);border-color:var(--gold-line);box-shadow:0 0 16px -6px rgba(200,167,75,.35)}
.btn-o:hover{background:var(--gold-soft);color:var(--gold-2);border-color:var(--gold);box-shadow:0 0 22px -4px rgba(200,167,75,.5)}
.btn-ghost{background:#171717;color:var(--txt-dim);border-color:var(--line)}
.btn-ghost:hover{color:var(--gold);border-color:var(--gold-line);box-shadow:0 0 16px -6px rgba(200,167,75,.4)}
.btn-book{background:var(--gold-soft);color:var(--gold);border:1px solid var(--gold-line);
  font-size:13px;font-weight:700;padding:9px 17px;min-height:40px;border-radius:9px;
  text-transform:uppercase;letter-spacing:.06em;
  box-shadow:0 0 14px -4px rgba(200,167,75,.45);
  transition:background var(--ease),color var(--ease),box-shadow var(--ease),border-color var(--ease)}
.btn-book:hover{background:var(--gold);color:#0a0a0a;border-color:var(--gold);box-shadow:0 0 20px -2px rgba(200,167,75,.75)}
.btn svg{width:18px;height:18px}

/* ---------- HERO ---------- */
.hero{position:relative;padding:clamp(56px,9vw,104px) 0 clamp(40px,6vw,72px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(680px 420px at 78% 8%,rgba(200,167,75,.14),transparent 60%),
    radial-gradient(540px 380px at 8% 90%,rgba(200,167,75,.07),transparent 60%);}
.hero-in{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:999px;
  padding:7px 15px;margin-bottom:22px}
.hero h1{font-size:clamp(28px,4.7vw,46px);letter-spacing:-.01em;text-align:right}   /* rechtsbündig auf der Seite */
.hero h1 .ln{display:block}
.hero h1 .ln1{font-size:.8551em}  /* Zeile 1 skaliert, damit beide Zeilen exakt gleich breit sind */
.hero h1 .sm{font-size:.7em}      /* "Weniger" / "Mehr" 30% kleiner als das jeweilige Nomen */
.hero h1 .acc{color:var(--gold)}
.hero-sub{font-size:clamp(16px,2.2vw,20px);color:var(--txt-dim);max-width:660px;margin:22px 0 0;line-height:1.55}
.hero-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-trust{display:flex;flex-wrap:wrap;gap:22px;margin-top:40px;color:var(--mut);font-size:13.5px}
.hero-trust b{color:var(--gold);font-family:var(--font)}

/* ---------- SECTIONS ---------- */
.section{padding:clamp(50px,8vw,88px) 0;position:relative}
.section.alt{background:linear-gradient(180deg,#101012 0%,#17171b 14%,#17171b 86%,#101012 100%)}
.sec-head{max-width:720px;margin:0 0 42px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.kicker{font-family:var(--font);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.sec-head h2{font-size:clamp(25px,4vw,40px)}
.sec-head p{color:var(--txt-dim);font-size:16.5px;margin:16px 0 0}

/* Über-mich Intro mit Porträt */
.ueber-intro{display:flex;align-items:center;gap:40px;margin-bottom:44px}
.ueber-intro .sec-head{margin:0}
.portrait{flex-shrink:0;position:relative}
.portrait img{width:210px;height:210px;border-radius:50%;object-fit:cover;object-position:center 28%;
  border:3px solid var(--gold-line);background:#f3f1ec;box-shadow:0 16px 44px -14px rgba(0,0,0,.75)}
.portrait::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid var(--gold-soft);pointer-events:none}
@media(max-width:760px){
  .ueber-intro{flex-direction:column;text-align:center;gap:24px}
  .ueber-intro .sec-head{text-align:center}
  .portrait img{width:170px;height:170px}
}

/* grid helper */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}

/* cards */
.card{background:linear-gradient(165deg,#1e1e24,#161619);border:1px solid rgba(255,255,255,.05);border-radius:18px;padding:26px;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .4s ease;position:relative;overflow:hidden}
.card:hover{transform:translateY(-6px);border-color:var(--gold-line);
  box-shadow:0 24px 60px -22px rgba(0,0,0,.7),0 12px 44px -16px rgba(200,167,75,.22)}
.card .ico{width:46px;height:46px;border-radius:11px;background:var(--gold-soft);
  border:1px solid var(--gold-line);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.card .ico svg{width:24px;height:24px;stroke:var(--gold);fill:none;stroke-width:1.8}
.card .ico img{width:30px;height:30px;display:block;object-fit:contain}
.card h3{font-size:clamp(16px,2.2vw,19px);margin-bottom:9px}
.card p{color:var(--txt-dim);font-size:clamp(13.5px,1.8vw,14.5px);margin:0;line-height:1.6}
.card .pain{color:var(--gold);font-size:12.5px;font-weight:700;font-family:var(--font);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;display:block}
/* Cockpit-Karte: vollständig klickbar, externer Link */
a.card-link{text-decoration:none;color:inherit;display:block}
a.card-link:hover{border-color:var(--gold);box-shadow:0 24px 60px -18px rgba(0,0,0,.7),0 16px 48px -14px rgba(200,167,75,.45)}
.card-ext{display:inline-block;margin-left:6px;font-size:.85em;color:var(--gold);transition:transform .25s ease}
a.card-link:hover .card-ext{transform:translate(2px,-2px)}
.card .gain{color:var(--green);font-size:13px;font-weight:400;font-style:italic;margin-top:12px;display:block;line-height:1.5}
.card .gain b{font-weight:700;font-style:italic;white-space:nowrap}
.step-n{width:38px;height:38px;border-radius:10px;background:var(--gold);color:#0a0a0a;
  font-family:var(--font);font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.scarcity{margin-top:16px;color:var(--mut);font-size:13.5px}
.scarcity b{color:var(--gold);font-family:var(--font)}
.scarcity b.scarcity-hot{color:var(--green)}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.tags span{font-size:11.5px;color:var(--gold);background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:6px;padding:4px 9px;font-weight:600}
.price{font-family:var(--font);color:var(--gold);font-size:14px;font-weight:700;margin-top:14px}

/* ---------- KI-CHECK BANNER (auffälliger CTA) ---------- */
.kibanner{position:relative;border-radius:20px;overflow:hidden;
  background:linear-gradient(135deg,#1c1708 0%,#101012 62%);
  border:1px solid var(--gold-line);padding:clamp(30px,5vw,52px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.kibanner::after{content:"";position:absolute;top:-40%;right:-10%;width:420px;height:420px;
  background:radial-gradient(circle,rgba(200,167,75,.18),transparent 65%);pointer-events:none}
.kibanner .kb-txt{position:relative;z-index:1;max-width:620px}
.kibanner .kb-tag{font-family:var(--font);color:var(--gold);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.kibanner h2{font-size:clamp(24px,3.6vw,38px);line-height:1.12}
.kibanner p{color:var(--txt-dim);font-size:16px;margin:14px 0 0}
.kibanner .kb-act{position:relative;z-index:1;display:flex;flex-direction:column;gap:11px}
.pulse{animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(200,167,75,.45)}70%{box-shadow:0 0 0 16px rgba(200,167,75,0)}100%{box-shadow:0 0 0 0 rgba(200,167,75,0)}}

/* ---------- FOOTER ---------- */
.foot{background:var(--bg2);border-top:1px solid var(--line);padding:clamp(34px,5vw,52px) 0 22px}
.foot-grid{display:flex;justify-content:center;text-align:center}
.foot .brand-foot{display:inline-block}
.foot-logo{width:240px;max-width:78%;height:auto;display:block;margin-bottom:14px}
.foot h4{font-family:var(--font);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:15px}
.foot a:hover{color:var(--gold)}
.foot .slogan{font-family:var(--font);color:var(--gold);
  font-size:clamp(30px,6vw,56px);line-height:1.12;letter-spacing:-.01em;margin:0;
  display:flex;flex-direction:column;gap:2px;perspective:800px}
/* IMMER sichtbar + IMMER animiert (kein JS/Observer nötig) — durchgehende Welle + Glow */
.foot .slogan .slg-line{display:block;transform-origin:center;
  animation:slgWave 4.2s ease-in-out infinite, slgGlow 3.6s ease-in-out infinite;
  animation-delay:calc(.45s * var(--i)), calc(.45s * var(--i));
  will-change:transform,text-shadow}
@keyframes slgWave{
  0%   {transform:translateX(0)   translateY(0)   skewX(0deg)}
  25%  {transform:translateX(9px) translateY(-2px) skewX(-2deg)}
  50%  {transform:translateX(0)   translateY(-5px) skewX(0deg)}
  75%  {transform:translateX(5px) translateY(-2px) skewX(1deg)}
  100% {transform:translateX(0)   translateY(0)   skewX(0deg)}
}
@keyframes slgGlow{
  0%,100%{text-shadow:0 0 0 transparent}
  50%{text-shadow:0 0 24px rgba(200,167,75,.45)}
}
.foot .slogan .slg-hl{color:var(--cream)}
@media(prefers-reduced-motion:reduce){
  .foot .slogan .slg-line{opacity:1;transform:none;transition:none;animation:none}
  .foot .slogan.slg-go .slg-hl{animation:none}
}
.foot-bottom{max-width:var(--maxw);margin:34px auto 0;padding:20px 22px 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--mut2);font-size:12.5px}
.foot-bottom a{color:var(--mut);font-size:12.5px}
.foot-legal{display:inline-flex;gap:20px;flex-wrap:wrap}

/* ---------- LEGAL PAGES ---------- */
.legal{max-width:760px;margin:0 auto;padding:clamp(40px,7vw,76px) 22px}
.legal h1{font-size:clamp(27px,4vw,40px);margin-bottom:8px}
.legal .upd{color:var(--mut);font-size:13px;margin-bottom:30px}
.lcard{background:linear-gradient(165deg,#1e1e24,#161619);border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:20px 22px;margin-bottom:14px}
.lcard .lbl{font-family:var(--font);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px}
.lcard p{color:var(--txt-dim);font-size:14.5px;line-height:1.75;margin:0}
.lcard p+p{margin-top:10px}
.lcard strong{color:#fff}

/* ---------- TOAST (nach erfolgreichem Versand) ---------- */
.toast{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.92);
  background:var(--bg3);border:1px solid var(--gold-line);
  color:var(--txt);padding:38px 40px;border-radius:20px;
  line-height:1.55;text-align:center;
  width:min(480px,92vw);
  box-shadow:0 40px 100px -20px rgba(0,0,0,.85),0 0 0 100vmax rgba(4,4,6,.55);
  opacity:0;transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1);
  z-index:2000;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.toast.success{border-color:rgba(52,211,153,.6)}
.toast-ico{width:64px;height:64px;flex-shrink:0;color:var(--green);
  background:rgba(52,211,153,.15);border:1px solid rgba(52,211,153,.4);border-radius:50%;padding:15px}
.toast-ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.toast-text b{display:block;font-family:var(--font);font-weight:700;font-size:22px;color:var(--txt);margin-bottom:8px;line-height:1.25}
.toast-text span{display:block;font-weight:400;color:var(--txt-dim);font-size:16px;line-height:1.5}
html[data-theme="light"] .toast{background:#FFFFFF}
@media(max-width:520px){
  .toast{padding:30px 24px;gap:14px}
  .toast-ico{width:54px;height:54px;padding:13px}
  .toast-text b{font-size:19px}
  .toast-text span{font-size:15px}
}

/* ---------- BOOKING POPUP ---------- */
.bk-ov{position:fixed;inset:0;z-index:1000;background:rgba(4,4,4,.74);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:18px;opacity:0;transition:opacity .25s}
.bk-ov.show{display:flex;opacity:1}
.bk-modal{position:relative;width:100%;max-width:560px;max-height:92vh;overflow:auto;
  background:var(--bg3);border:1px solid var(--gold-line);border-radius:18px;
  padding:30px clamp(20px,4vw,34px);transform:translateY(14px);transition:transform .3s;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.bk-ov.show .bk-modal{transform:translateY(0)}
.bk-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:10px;
  background:#1c1c1c;border:1px solid var(--line);color:var(--mut);font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:var(--ease)}
.bk-close:hover{color:#fff;border-color:var(--mut)}
.bk-modal .bk-tag{font-family:var(--font);color:var(--gold);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.bk-modal h3{font-size:clamp(21px,3.4vw,27px);line-height:1.15}
.bk-modal .bk-lead{color:var(--txt-dim);font-size:15.5px;margin:13px 0 22px;line-height:1.55}
.bk-points{list-style:none;padding:0;margin:0 0 24px}
.bk-points li{display:flex;align-items:flex-start;gap:11px;color:var(--txt-dim);font-size:14.5px;margin-bottom:11px}
.bk-points li svg{width:19px;height:19px;stroke:var(--gold);fill:none;stroke-width:2;flex-shrink:0;margin-top:1px}
.bk-acts{display:flex;flex-direction:column;gap:10px}
.bk-mini{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--mut);font-size:12.5px;line-height:1.6}
.bk-mini a{color:var(--gold)}
.bk-acts{margin-top:4px}
.bk-back{background:none;border:0;color:var(--mut);font-size:13px;cursor:pointer;padding:0 0 14px;font-family:var(--font-body)}
.bk-back:hover{color:var(--gold)}
.bk-notice{display:flex;align-items:flex-start;gap:9px;
  background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:11px;
  padding:12px 14px;margin:0 0 16px;color:var(--txt);font-size:13.5px;line-height:1.5}
.bk-notice svg{width:18px;height:18px;flex-shrink:0;stroke:var(--gold);fill:none;stroke-width:2;margin-top:1px}
.bk-notice b{color:var(--gold);font-family:var(--font)}
.bk-form{display:flex;flex-direction:column;gap:11px;margin-top:6px}
.bk-form input,.bk-form textarea,.bk-form select{width:100%;background:#141418;border:1px solid var(--line);border-radius:9px;
  color:var(--txt);font-family:var(--font-body);font-size:15px;padding:12px 13px;outline:none;transition:border-color var(--ease)}
.bk-form input::placeholder,.bk-form textarea::placeholder{color:var(--mut2)}
.bk-form input:focus,.bk-form textarea:focus,.bk-form select:focus{border-color:var(--gold-line)}
.bk-form input.invalid,.bk-form textarea.invalid,.bk-form select.invalid{border-color:var(--red)}
.bk-form input.valid,.bk-form textarea.valid,.bk-form select.valid{border-color:rgba(52,211,153,.55)}
.bk-form textarea{resize:vertical;min-height:80px}
.bk-form .btn{justify-content:center;margin-top:4px}
.bk-form .btn-p:not(.btn-ready){background:var(--line)!important;color:var(--mut2)!important;border-color:transparent!important;box-shadow:none!important;cursor:not-allowed;pointer-events:none;opacity:1}
.bk-field{display:flex;flex-direction:column;gap:4px}
/* Telefon: Select inline als Prefix im selben Input-Feld */
.bk-phone{
  display:flex;align-items:stretch;
  background:#141418;border:1px solid var(--line);border-radius:9px;
  transition:border-color var(--ease);overflow:hidden;
}
.bk-phone:focus-within{border-color:var(--gold-line)}
.bk-phone:has(input.invalid){border-color:var(--red)}
.bk-phone:has(input.valid){border-color:rgba(52,211,153,.55)}
.bk-phone select{
  flex:0 0 auto;width:auto;
  background:transparent;border:0;color:var(--gold);
  font-family:var(--font-body);font-weight:700;font-size:15px;
  padding:12px 22px 12px 13px;cursor:pointer;outline:none;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23C8A74B' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat:no-repeat;background-position:right 6px center;
}
.bk-phone .land-sep{
  align-self:center;width:1px;height:22px;
  background:var(--gold-line);flex-shrink:0;
}
.bk-phone input{
  flex:1;min-width:0;
  background:transparent;border:0;color:var(--txt);
  padding:12px 13px;outline:none;font-size:15px;border-radius:0;
}
.bk-phone input:focus,.bk-phone select:focus{border-color:transparent}
/* Eigene .valid/.invalid am Input nicht visualisieren — Container macht es */
.bk-phone input.invalid,.bk-phone input.valid{border-color:transparent}
.bk-err{color:var(--red);font-size:12.5px;line-height:1.4;min-height:0;
  max-height:0;overflow:hidden;opacity:0;transition:max-height .25s ease,opacity .2s ease,margin-top .2s ease}
.bk-err.show{max-height:40px;opacity:1;margin-top:2px}
.bk-check .bk-checkbox{display:flex;flex-direction:row;gap:10px;align-items:flex-start;cursor:pointer}
.bk-check .bk-checkbox input[type="checkbox"]{flex:0 0 16px;width:16px;height:16px;margin-top:2px;accent-color:var(--gold);cursor:pointer}
.bk-check-text{display:flex;flex-direction:column;flex:1;min-width:0}
.bk-check-title{display:block;font-size:13px;color:var(--txt);line-height:1.4}
.bk-check-title abbr{color:var(--mut);text-decoration:none}
.bk-check .bk-checkbox a{color:var(--gold)}
.bk-check .bk-checkbox.invalid-check .bk-check-title{color:var(--red)}
.bk-check-desc{display:block;font-size:9px;margin-top:4px;color:var(--mut);line-height:1.5}
html[data-theme="light"] .bk-form input,
html[data-theme="light"] .bk-form textarea,
html[data-theme="light"] .bk-form select{background:#FFFFFF;color:var(--txt)}
html[data-theme="light"] .bk-phone select{background-color:#FFFFFF}
.bk-formmsg{font-size:13.5px;line-height:1.55}
.bk-formmsg.ok{color:var(--green)}
.bk-formmsg.err{color:var(--red)}
.bk-formmsg.info{color:var(--txt-dim)}

/* ---------- ANIMATIONEN / SCHWEBENDE ELEMENTE ---------- */
.hero-in, .section .container{position:relative;z-index:1}
.orb{position:absolute;z-index:0;border-radius:50%;pointer-events:none;filter:blur(58px);
  background:radial-gradient(circle,rgba(200,167,75,.42),transparent 70%);animation:drift 18s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(28px,-36px) scale(1.15)}}

/* Schwebende Themen-Icons (passend zum Business Case) */
.fly-ico{position:absolute;z-index:0;pointer-events:none;opacity:.14;
  filter:drop-shadow(0 0 7px rgba(200,167,75,.22));animation:fly 22s ease-in-out infinite;will-change:transform}
.fly-ico svg,.fly-ico img{display:block;width:100%;height:100%;object-fit:contain}
.fly-ico.spin svg,.fly-ico.spin img{animation:spin 30s linear infinite}
@keyframes fly{0%,100%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(20px,-28px) rotate(7deg)}66%{transform:translate(-16px,18px) rotate(-6deg)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Scroll-Reveal (JS setzt .reveal + .reveal-in; ohne JS bleibt alles sichtbar) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.reveal-in{opacity:1;transform:none}

/* Hero-Einstieg (rein CSS) */
.hero .eyebrow{animation:rise .7s ease both}
.hero h1{animation:rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:.05s}
.hero-sub{animation:rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:.16s}
.hero-acts{animation:rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:.26s}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* Icons sanft schweben */
.card .ico{animation:floaty 5.5s ease-in-out infinite}
.card:nth-child(2) .ico{animation-delay:.7s}
.card:nth-child(3) .ico{animation-delay:1.4s}
.card:nth-child(4) .ico{animation-delay:.4s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* KI-Banner: durchlaufender Lichtschein */
.kibanner::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 36%,rgba(200,167,75,.10) 50%,transparent 64%);
  transform:translateX(-120%);animation:sheen 7.5s ease-in-out infinite}
@keyframes sheen{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}

/* Primär-Button: kurzer Glanz beim Hover */
.btn-p{position:relative;overflow:hidden}
.btn-p::after{content:"";position:absolute;top:0;left:0;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-260%) skewX(-18deg);pointer-events:none}
.btn-p:hover::after{animation:shine .75s ease}
@keyframes shine{to{transform:translateX(360%) skewX(-18deg)}}

@media (prefers-reduced-motion: reduce){
  .orb, .kibanner::before, .card .ico, .btn-p::after, .fly-ico, .fly-ico.spin svg{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .hero .eyebrow, .hero h1, .hero-sub, .hero-acts{animation:none}
}

/* ---------- CONSENT BANNER ---------- */
.cc-banner{position:fixed;left:0;right:0;bottom:0;z-index:1500;transform:translateY(110%);
  transition:transform .35s ease;padding:0 14px 14px}
.cc-banner.show{transform:translateY(0)}
.cc-inner{max-width:1080px;margin:0 auto;background:var(--bg3);border:1px solid var(--gold-line);
  border-radius:16px;padding:20px 22px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.8)}
.cc-text{flex:1;min-width:260px}
.cc-text h4{font-size:16px;margin-bottom:6px}
.cc-text p{margin:0;color:var(--txt-dim);font-size:13.5px;line-height:1.55}
.cc-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cc-btns .btn{font-size:14px;padding:11px 18px;min-height:44px}

/* Settings-Modal */
.cc-ov{position:fixed;inset:0;z-index:1600;background:rgba(4,4,4,.74);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:18px}
.cc-ov.show{display:flex}
.cc-modal{position:relative;width:100%;max-width:560px;max-height:92vh;overflow:auto;
  background:var(--bg3);border:1px solid var(--gold-line);border-radius:18px;padding:30px clamp(20px,4vw,32px);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.cc-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:10px;
  background:#1c1c1c;border:1px solid var(--line);color:var(--mut);font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:var(--ease)}
.cc-close:hover{color:#fff;border-color:var(--mut)}
.cc-modal h3{font-size:23px;margin-bottom:8px}
.cc-lead{color:var(--txt-dim);font-size:14.5px;margin:0 0 20px;line-height:1.55}
.cc-cat{border:1px solid var(--line);border-radius:12px;padding:15px 16px;margin-bottom:12px}
.cc-cat-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.cc-cat-h b{font-family:var(--font);color:#fff;font-size:15px}
.cc-cat p{margin:0;color:var(--mut);font-size:13px;line-height:1.55}
.cc-pill{font-size:11px;font-weight:700;color:var(--gold);background:var(--gold-soft);
  border:1px solid var(--gold-line);border-radius:999px;padding:4px 11px;font-family:var(--font)}
.cc-switch{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0}
.cc-switch input{opacity:0;width:0;height:0;position:absolute}
.cc-switch span{position:absolute;inset:0;background:#333;border-radius:14px;cursor:pointer;transition:background .2s}
.cc-switch span::before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  background:#fff;border-radius:50%;transition:left .2s}
.cc-switch input:checked + span{background:var(--gold)}
.cc-switch input:checked + span::before{left:23px}
.cc-switch input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
.cc-modal-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.cc-modal-btns .btn{flex:1;justify-content:center;min-width:130px}
@media(max-width:600px){
  .cc-inner{flex-direction:column;align-items:stretch}
  .cc-btns{justify-content:stretch}
  .cc-btns .btn{flex:1;justify-content:center}
  .cc-modal-btns{flex-direction:column}
}

/* ---------- CARD EXPAND (Hover/Dwell, kein Button) ---------- */
/* Nur Karten mit Long-Text bekommen Expand-Cues (Pointer + "Mehr ›") */
.card:has(.card-long){cursor:pointer}
.card-long{
  display:block;
  max-height:0;overflow:hidden;opacity:0;
  margin-top:0;border-top:1px solid transparent;padding-top:0;
  transition:
    max-height .65s cubic-bezier(.2,.7,.2,1),
    opacity .4s ease,
    margin-top .45s ease,
    padding-top .45s ease,
    border-top-color .35s ease;
}
.card-long p{margin:0}
.card.open .card-long{
  max-height:640px;opacity:1;
  margin-top:0;border-top-color:transparent;padding-top:0;
}
/* Beim Öffnen den Kurz-Teaser ausblenden — verhindert doppelten Textinhalt */
.card > p{transition:opacity .25s ease}
.card.open > p{display:none}
/* Satzweises Einblenden via JS-gespliteten <span class="sent" style="--i:N"> */
.card-long .sent{
  display:inline;opacity:0;
  transition:opacity .45s ease;
}
.card.open .card-long .sent{
  opacity:1;
  transition-delay:calc(.18s + .12s * var(--i,0));
}
/* "Mehr ›"-Hint — unauffällig, nur bei Hover sichtbar (nur Karten mit Long-Text) */
.card:has(.card-long)::after{
  content:"Mehr ›";
  position:absolute;top:18px;right:18px;
  font-family:var(--font-body);font-size:.7rem;letter-spacing:.05em;font-weight:700;
  color:var(--gold);
  opacity:0;transition:opacity .35s ease,transform .35s ease;
  pointer-events:none;transform:translateX(-4px);
}
.card:hover::after{opacity:.75;transform:translateX(0)}
.card.open::after{opacity:0 !important}
/* Touch: dezent immer sichtbar, weil kein Hover */
@media(hover:none){
  .card:has(.card-long)::after{opacity:.4;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .card-long{transition:none}
  .card-long .sent{transition:none}
  .card::after{transition:opacity .15s ease}
}

/* ---------- RESPONSIVE ---------- */

/* Tablet landscape + small desktop: 2-spaltig, etwas kompaktere Cards */
@media(max-width:1024px){
  .g3{grid-template-columns:repeat(2,1fr);gap:16px}
  .card{padding:22px}
}

/* Tablet portrait + großes Handy quer: weiterhin 2-spaltig */
@media(max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr}
}

/* Handy: Nav ausblenden, Burger einblenden, Banner stapeln */
@media(max-width:760px){
  .nav{display:none}
  .burger{display:flex}
  .foot-grid{grid-template-columns:1fr}
  .kibanner{flex-direction:column;align-items:flex-start}
  .kibanner .kb-act{width:100%}
  .kibanner .kb-act .btn{width:100%;justify-content:center}
}

/* Kleines Handy (Hochformat): 1-spaltig, kompakte Cards, große Touch-Flächen */
@media(max-width:520px){
  .g3,.g2{grid-template-columns:1fr;gap:14px}
  .card{padding:18px 16px}
  .card h3{font-size:16px}
  .card p{font-size:13.5px}
  .card .gain{font-size:12px}
  .tags span{font-size:11px;padding:3px 8px}
  .card-toggle{min-height:44px;font-size:.82rem;padding:.5rem 0 0}
  .card-long p{font-size:13.5px}
}

/* Sehr kleines Handy */
@media(max-width:440px){
  .hero-acts{flex-direction:column}
  .hero-acts .btn{width:100%;justify-content:center}
  .card{padding:16px 14px}
}