/* ============================================================
   JP MARKETING — Design-System (Multi-Page)
   Fokus: flüssig (keine Scroll-Scrubs), lesbar (Scrims + Schatten)
   ============================================================ */

:root{
  --void:#0b0a08;
  --ink:#050403;
  --panel:#131009;
  --panel-2:#1a1610;
  --line:rgba(198,161,91,.20);
  --line-soft:rgba(232,223,207,.09);

  --bone:#f2ece0;
  --bone-dim:#ccc3ae;
  --stone:#a49a86;
  --muted:#7b7364;

  --gold:#cAa25e;
  --gold:#c9a25e;
  --gold-soft:#e0c488;
  --gold-bright:#f0dcab;

  --serif:"Bodoni Moda","Didot","Playfair Display",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --pad:clamp(1.15rem,5vw,6rem);
  --maxw:1320px;
  --nav-h:68px;

  --ease:cubic-bezier(.22,.7,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:var(--nav-h); }
body{
  background:var(--void); color:var(--bone);
  font-family:var(--sans); font-weight:400; line-height:1.65;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }

/* ---------- Typo ---------- */
.display{ font-family:var(--serif); font-weight:500; letter-spacing:-.01em; line-height:1.03; font-size:clamp(2.3rem,5.5vw,5rem); }
.display em{ font-style:italic; color:var(--gold-soft); }
.eyebrow{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.34em; font-size:.7rem; font-weight:600; color:var(--gold); }
.lede{ max-width:52ch; color:var(--bone-dim); font-size:clamp(1.02rem,1.3vw,1.22rem); font-weight:400; margin-top:1.1rem; }
.lede strong{ color:var(--bone); font-weight:600; }
.center{ text-align:center; }
.section-sub{ color:var(--stone); margin-top:.6rem; font-size:.98rem; }
.mono{ font-family:var(--serif); font-style:italic; font-weight:600; color:var(--gold); }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; font-family:var(--sans);
  font-size:.82rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:.95rem 1.7rem;
  border-radius:3px; transition:transform .2s var(--ease), background .25s, color .25s, border-color .25s; cursor:pointer; border:1px solid transparent; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-gold{ background:var(--gold); color:#1a1206; border-color:var(--gold); box-shadow:0 8px 30px rgba(201,162,94,.25); }
.btn-gold:hover{ background:var(--gold-bright); border-color:var(--gold-bright); }
.btn-ghost{ background:rgba(255,255,255,.04); color:var(--bone); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-soft); }

/* ---------- Navigation ---------- */
.topbar{ position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; padding:0 var(--pad);
  background:linear-gradient(180deg, rgba(6,5,3,.85), rgba(6,5,3,0)); transition:background .3s, border-color .3s; border-bottom:1px solid transparent; }
.topbar.scrolled{ background:rgba(8,7,4,.94); border-bottom-color:var(--line-soft); }
.brand{ font-family:var(--sans); font-size:1.02rem; letter-spacing:.2em; font-weight:700; text-transform:uppercase; text-decoration:none; color:var(--bone); }
.brand .mono{ font-size:1.15em; margin-right:.1em; }
.topnav{ display:flex; gap:1.45rem; align-items:center; }
.topnav a{ color:var(--bone-dim); text-decoration:none; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500; transition:color .2s; position:relative; }
.topnav a:hover,.topnav a.active{ color:var(--bone); }
.topnav a.active:not(.cta-link)::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--gold); }
.topnav a.cta-link{ color:#1a1206; background:var(--gold); padding:.6rem 1.15rem; border-radius:3px; }
.topnav a.cta-link:hover{ background:var(--gold-bright); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ width:24px; height:2px; background:var(--bone); transition:.25s; }

/* ---------- HERO (mit Video/Bild + Scrim für Lesbarkeit) ---------- */
.hero{ position:relative; min-height:clamp(560px,86vh,900px); display:flex; align-items:flex-end; overflow:hidden; background:#000; }
.hero.hero-short{ min-height:clamp(420px,60vh,620px); }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video,.hero-media img{ width:100%; height:100%; object-fit:cover; }
/* Doppel-Scrim: garantiert Kontrast unten-links */
.hero-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(4,3,2,.82) 0%, rgba(4,3,2,.5) 42%, rgba(4,3,2,.05) 75%),
    linear-gradient(0deg, rgba(4,3,2,.9) 0%, rgba(4,3,2,.25) 34%, rgba(4,3,2,0) 60%); }
.hero-inner{ position:relative; z-index:2; padding:0 var(--pad) clamp(2.5rem,7vh,5rem); max-width:min(70ch,100%);
  text-shadow:0 2px 30px rgba(0,0,0,.55); }
.hero-inner .display{ font-size:clamp(2.6rem,8vw,6.4rem); margin:.5rem 0 .3rem; }
.hero-inner .lede{ text-shadow:0 1px 16px rgba(0,0,0,.7); }
.hero-cta{ display:flex; gap:.9rem; margin-top:1.7rem; flex-wrap:wrap; }
.hero-tag{ position:absolute; left:var(--pad); top:calc(var(--nav-h) + 1.2rem); z-index:2; font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }
.scroll-hint{ margin-top:2rem; font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--bone-dim); }
.scroll-hint .arrow{ display:inline-block; margin-left:.4em; animation:bob 1.8s infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

/* ---------- Reveal mit 3D-Tilt (IntersectionObserver, GPU) ---------- */
[data-reveal]{ opacity:0; transform:perspective(1200px) translateY(52px) rotateX(9deg); transform-origin:50% 100%;
  transition:opacity .8s var(--ease), transform .8s var(--ease); will-change:opacity,transform; }
[data-reveal].rv-in{ opacity:1; transform:perspective(1200px) translateY(0) rotateX(0deg); }

/* ---------- Scroll-getriebene Effekte (CSS, laufen off-main-thread) ---------- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .hero-media{ animation:heroZoom linear both; animation-timeline:view(); animation-range:cover; will-change:transform; }
    @keyframes heroZoom{ from{ transform:scale(1.04) translateY(0) } to{ transform:scale(1.2) translateY(3%) } }
    [data-par]{ animation:parFloat linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; will-change:transform; }
    @keyframes parFloat{ from{ transform:translateY(46px) } to{ transform:translateY(-46px) } }
    [data-par-slow]{ animation:parSlow linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; will-change:transform; }
    @keyframes parSlow{ from{ transform:translateY(24px) } to{ transform:translateY(-24px) } }
  }
}

/* Hero-Inhalte immer sofort per CSS einblenden (nicht von JS/IO abhängig) */
@keyframes rise{ from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none} }
.hero-inner [data-reveal]{ opacity:1; transform:none; animation:rise .8s var(--ease) both; }
.hero-inner [data-reveal][data-reveal-delay="1"]{ animation-delay:.1s; }
.hero-inner [data-reveal][data-reveal-delay="2"]{ animation-delay:.2s; }
.hero-inner [data-reveal][data-reveal-delay="3"]{ animation-delay:.3s; }
.hero-inner [data-reveal][data-reveal-delay="4"]{ animation-delay:.4s; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }

/* ---------- Sektions-Grundgerüst ---------- */
.section{ padding:clamp(4rem,10vh,7.5rem) 0; }
.section.tight{ padding:clamp(2.5rem,6vh,4rem) 0; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.section-head{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.section-head .eyebrow{ display:block; margin-bottom:.9rem; }
.section-head .display{ max-width:20ch; }
.section-alt{ background:linear-gradient(180deg,var(--ink),var(--void)); border-block:1px solid var(--line-soft); }

/* ---------- Stat-Leiste ---------- */
.factbar{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); max-width:var(--maxw); margin:0 auto; }
.factbar li{ background:var(--void); padding:2.4rem 1rem; display:flex; flex-direction:column; gap:.5rem; align-items:center; text-align:center; }
.factbar .num{ font-family:var(--serif); font-size:clamp(2rem,4vw,3.4rem); color:var(--gold-soft); line-height:1; }
.factbar .lbl{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--stone); }

/* ---------- Leistungs-Karten ---------- */
.cards{ max-width:var(--maxw); margin:2.5rem auto 0; padding:0 var(--pad); display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.card{ background:var(--panel); border:1px solid var(--line-soft); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .3s, transform .3s var(--ease); }
.card:hover{ border-color:var(--line); transform:translateY(-4px); }
.card-media{ aspect-ratio:16/10; overflow:hidden; background:#000; }
.card-media img{ width:100%; height:100%; object-fit:cover; filter:brightness(.85) saturate(.95); transition:transform .6s var(--ease), filter .4s; }
.card:hover .card-media img{ transform:scale(1.05); filter:brightness(1) saturate(1); }
.card-body{ padding:1.6rem 1.5rem 1.8rem; }
.card-kicker{ font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.card h3{ font-family:var(--serif); font-weight:500; font-size:1.55rem; margin:.4rem 0 .7rem; }
.card h3 em{ font-style:italic; color:var(--gold-soft); }
.card p{ color:var(--bone-dim); font-size:.96rem; }
.card ul{ list-style:none; margin-top:1rem; }
.card li{ padding:.55rem 0; border-top:1px solid var(--line-soft); color:var(--bone-dim); font-size:.9rem; position:relative; padding-left:1.3rem; }
.card li::before{ content:"→"; position:absolute; left:0; color:var(--gold); }

/* 3D-Tilt (Zeiger) — nur auf Geräten mit Hover */
[data-tilt]{ transform-style:preserve-3d; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
[data-tilt].tilting{ transition:transform .05s linear; }
[data-tilt] .card-media img{ transition:transform .3s var(--ease); }
[data-tilt]:hover{ box-shadow:0 30px 70px rgba(0,0,0,.5); }

/* Kinetische Laufschrift */
.marquee{ overflow:hidden; border-block:1px solid var(--line-soft); padding:1.15rem 0; background:var(--ink); }
.marquee-track{ display:flex; gap:2.6rem; width:max-content; animation:marq 34s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee span{ font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,2.1vw,1.7rem); color:var(--stone); white-space:nowrap; display:flex; align-items:center; gap:2.6rem; }
.marquee span b{ color:var(--gold-soft); font-style:normal; font-weight:500; }
.marquee .sep{ color:var(--gold); font-style:normal; }
@keyframes marq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- Galerie / Arbeiten ---------- */
.gallery-grid{ max-width:var(--maxw); margin:2.5rem auto 0; padding:0 var(--pad); display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:1rem; }
.g-item{ position:relative; overflow:hidden; border:1px solid var(--line-soft); border-radius:4px; cursor:pointer; background:#000; }
.g-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), filter .5s; filter:saturate(.92) brightness(.88); }
.g-item:hover img{ transform:scale(1.05); filter:saturate(1) brightness(1); }
.g-item.wide{ grid-column:span 2; }
.g-item.tall{ grid-row:span 2; }
.g-item figcaption{ position:absolute; left:1rem; bottom:.9rem; right:1rem; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; opacity:0; transform:translateY(8px); transition:.35s var(--ease); text-shadow:0 2px 14px #000; }
.g-item:hover figcaption{ opacity:1; transform:none; }

/* ---------- Split (Bild + Text) ---------- */
.split{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.5rem,5vw,4.5rem); align-items:center; }
.split.rev{ grid-template-columns:1fr 1.1fr; }
.split-media{ border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#000; aspect-ratio:4/3; }
.split-media img,.split-media video{ width:100%; height:100%; object-fit:cover; }
.split h2{ margin-bottom:1rem; }

/* ---------- Immersive 3D ---------- */
.ext-viewport{ max-width:1100px; margin:2.4rem auto 0; padding:0 var(--pad); perspective:1600px; cursor:grab; user-select:none; }
.ext-viewport.grabbing{ cursor:grabbing; }
.ext-scene{ position:relative; aspect-ratio:16/9; transform-style:preserve-3d; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#000; box-shadow:0 40px 120px rgba(0,0,0,.6); }
.ext-layer{ position:absolute; inset:0; }
.ext-house img{ width:100%; height:100%; object-fit:cover; }
.ext-sky{ background:radial-gradient(120% 100% at 60% 0%, #2a2114, #0a0806 70%); transform:translateZ(-120px) scale(1.2); }
.ext-glare{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 40%, rgba(240,220,171,.1) 50%, transparent 60%); transform:translateZ(40px); }
.ext-hint{ text-align:center; margin-top:1.1rem; font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--stone); }

/* ---------- ROI-Rechner ---------- */
.calc-grid{ max-width:var(--maxw); margin:2.5rem auto 0; padding:0 var(--pad); display:grid; grid-template-columns:1.15fr .85fr; gap:1.6rem; align-items:stretch; }
.calc-controls{ background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:clamp(1.5rem,3vw,2.4rem); }
.calc-price{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); padding-bottom:1.4rem; margin-bottom:1.4rem; border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; }
.calc-price strong{ color:var(--gold-soft); font-family:var(--serif); font-style:italic; }
.ctrl{ margin-bottom:1.9rem; }
.ctrl:last-child{ margin-bottom:0; }
.ctrl label{ display:flex; justify-content:space-between; align-items:baseline; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); margin-bottom:.85rem; }
.ctrl output{ font-family:var(--serif); color:var(--gold-soft); font-size:1.05rem; text-transform:none; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--gold) var(--fill,30%),rgba(232,223,207,.15) var(--fill,30%)); outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--gold-bright); border:3px solid var(--ink); cursor:pointer; box-shadow:0 0 0 1px var(--gold),0 4px 14px rgba(0,0,0,.5); transition:transform .12s; }
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.12); }
input[type=range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--gold-bright); border:3px solid var(--ink); cursor:pointer; }
.calc-result{ background:linear-gradient(160deg,#191309,#0d0b07); border:1px solid var(--line); border-radius:6px; padding:clamp(1.5rem,3vw,2.4rem); display:flex; flex-direction:column; justify-content:center; text-align:center; }
.result-label{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.result-value{ font-family:var(--serif); font-size:clamp(2.6rem,6vw,4.4rem); color:var(--bone); line-height:1; margin:.5rem 0 1.4rem; }
.result-value .unit{ font-size:.3em; letter-spacing:.15em; color:var(--stone); }
.result-rows{ border-top:1px solid var(--line-soft); }
.result-rows div{ display:flex; justify-content:space-between; padding:.8rem 0; border-bottom:1px solid var(--line-soft); font-size:.9rem; }
.result-rows span{ color:var(--stone); }
.result-rows strong{ color:var(--bone-dim); font-weight:400; font-family:var(--serif); }

/* ---------- Formular ---------- */
.form-card{ max-width:820px; margin:0 auto; padding:clamp(1.8rem,4vw,3rem); background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field{ margin-bottom:0; }
.field.full{ grid-column:1 / -1; }
.field label{ display:block; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-dim); margin-bottom:.55rem; }
.field .opt{ color:var(--muted); }
.field input,.field textarea{ width:100%; background:var(--ink); border:1px solid var(--line-soft); color:var(--bone); font-family:var(--sans); font-size:1rem; padding:.9rem 1rem; border-radius:4px; transition:border-color .2s; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--gold); }
.field textarea{ resize:vertical; min-height:96px; }
.slots{ border:none; margin:1.4rem 0; }
.slots legend{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-dim); margin-bottom:.85rem; }
.slots .req{ color:var(--gold); }
.slot-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.7rem; }
.slot{ background:var(--ink); border:1px solid var(--line-soft); color:var(--bone-dim); padding:.85rem 1rem; border-radius:4px; cursor:pointer; text-align:left; font-family:var(--sans); font-size:.88rem; transition:border-color .2s,background .2s; display:flex; flex-direction:column; gap:.25rem; }
.slot .s-day{ color:var(--bone); }
.slot .s-time{ font-size:.75rem; color:var(--stone); }
.slot:hover{ border-color:var(--gold); }
.slot.selected{ border-color:var(--gold); background:rgba(201,162,94,.13); box-shadow:inset 0 0 0 1px var(--gold); }
.slot.selected .s-time{ color:var(--gold-soft); }
.hp{ position:absolute; left:-9999px; opacity:0; }
.submit-btn{ width:100%; margin-top:1.5rem; padding:1.1rem; background:var(--gold); color:#1a1206; border:none; border-radius:4px; font-family:var(--sans); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.84rem; cursor:pointer; transition:background .2s; }
.submit-btn:disabled{ background:transparent; color:var(--muted); border:1px solid var(--line-soft); cursor:not-allowed; }
.submit-btn:not(:disabled):hover{ background:var(--gold-bright); }
.form-status{ margin-top:1.1rem; text-align:center; font-size:.95rem; color:var(--gold-soft); min-height:1.2em; }
.form-status.err{ color:#e89078; }
.form-success{ text-align:center; padding:2rem 1rem; }
.form-success .chk{ width:64px; height:64px; border-radius:50%; border:2px solid var(--gold); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto 1.2rem; }

/* ---------- Kontakt-Infos ---------- */
.contact-info{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:var(--maxw); margin:0 auto 2.5rem; padding:0 var(--pad); }
.info-tile{ background:var(--panel); border:1px solid var(--line-soft); border-radius:6px; padding:1.6rem; text-align:center; }
.info-tile .k{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.info-tile .v{ margin-top:.5rem; color:var(--bone); }

/* ---------- Admin ---------- */
.admin-shell{ min-height:100vh; padding:calc(var(--nav-h) + 2rem) var(--pad) 4rem; max-width:1200px; margin:0 auto; }
.admin-gate{ max-width:420px; margin:6vh auto 0; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:2.4rem; text-align:center; }
.admin-bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.admin-stats{ display:flex; gap:.8rem; flex-wrap:wrap; }
.pill{ background:var(--panel); border:1px solid var(--line-soft); border-radius:999px; padding:.5rem 1rem; font-size:.8rem; color:var(--bone-dim); }
.pill strong{ color:var(--gold-soft); }
.table-scroll{ overflow-x:auto; border:1px solid var(--line-soft); border-radius:8px; }
table.leads{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:760px; }
table.leads th,table.leads td{ text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--line-soft); vertical-align:top; }
table.leads th{ background:var(--panel-2); color:var(--gold); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; }
table.leads tr:hover td{ background:rgba(255,255,255,.02); }
table.leads a{ color:var(--gold-soft); }
.empty{ text-align:center; padding:3rem; color:var(--stone); }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line); background:var(--ink); padding:clamp(3rem,7vh,4.5rem) var(--pad) 2.5rem; }
.footer-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; }
.footer-grid h4{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.footer-grid a{ display:block; color:var(--bone-dim); text-decoration:none; padding:.35rem 0; font-size:.92rem; }
.footer-grid a:hover{ color:var(--gold-soft); }
.foot-brand{ font-family:var(--sans); font-size:1.2rem; letter-spacing:.2em; font-weight:700; text-transform:uppercase; margin-bottom:.6rem; }
.foot-brand .mono{ font-size:1.1em; }
.foot-note{ color:var(--stone); font-size:.9rem; max-width:36ch; }
.foot-bottom{ max-width:var(--maxw); margin:2.4rem auto 0; padding-top:1.6rem; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

/* ---------- CTA-Band ---------- */
.cta-band{ text-align:center; padding:clamp(4rem,10vh,7rem) var(--pad); background:linear-gradient(160deg,#191309,#0b0a07); border-block:1px solid var(--line-soft); }
.cta-band .display{ max-width:22ch; margin:0 auto 1.6rem; }

/* ---------- Lightbox ---------- */
.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(4,3,2,.96); display:none; align-items:center; justify-content:center; padding:4vw; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:90vh; border:1px solid var(--line); border-radius:4px; }
.lb-close{ position:absolute; top:1.2rem; right:1.6rem; background:none; border:0; color:#fff; font-size:2.4rem; cursor:pointer; line-height:1; }

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .nav-toggle{ display:flex; }
  .topnav{ position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; gap:0; background:rgba(10,8,5,.98); border-bottom:1px solid var(--line);
    padding:1rem var(--pad) 1.4rem; transform:translateY(-120%); transition:transform .35s var(--ease); }
  .topnav.open{ transform:none; }
  .topnav a{ width:100%; padding:.9rem 0; border-bottom:1px solid var(--line-soft); font-size:.95rem; }
  .topnav a.cta-link{ margin-top:.8rem; text-align:center; padding:.9rem; }
  .topnav a.active:not(.cta-link)::after{ display:none; }
  .cards{ grid-template-columns:1fr; }
  .calc-grid{ grid-template-columns:1fr; }
  .split,.split.rev{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .contact-info{ grid-template-columns:1fr; }
  .factbar{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; gap:1.6rem; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }
  .g-item.tall{ grid-row:span 1; }
}
@media (max-width:560px){
  .gallery-grid{ grid-template-columns:1fr; }
  .g-item.wide{ grid-column:span 1; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* ============================================================
   3D-SCROLL-JOURNEY (Three.js + GSAP)
   ============================================================ */
#bg{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0; display:block; opacity:0; }
#smooth-wrapper{ position:relative; z-index:1; }
.journey-overlays{ position:fixed; inset:0; z-index:3; pointer-events:none; transition:opacity .5s ease; }
.journey-overlays.hide{ opacity:0 !important; pointer-events:none; }
/* nur für Screenreader/Suchmaschinen sichtbar (crawlbarer H1-Text) */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#bg{ transition:opacity .5s ease; }
#bg.hide{ opacity:0 !important; }
.j-cap{ position:absolute; left:var(--pad); top:50%; transform:translateY(calc(-50% + 34px));
  max-width:min(62ch,88vw); opacity:0; transition:opacity .7s var(--ease), transform .7s var(--ease);
  text-shadow:0 3px 44px rgba(0,0,0,.75); }
.j-cap.active{ opacity:1; transform:translateY(-50%); }
.j-cap .eyebrow{ display:block; margin-bottom:1rem; }
.j-cap h1,.j-cap h2{ font-family:var(--serif); font-weight:500; line-height:1.02; letter-spacing:-.01em; }
.j-cap h1{ font-size:clamp(2.8rem,10vw,7.5rem); margin:.3rem 0; }
/* Hero-Wortmarke (maskierte Zeilen) */
.hero-lockup{ font-family:var(--serif); line-height:.88; margin:.5rem 0 .5rem; font-weight:600; }
.hero-lockup .ll{ display:block; overflow:visible; padding:0; white-space:nowrap; }
.hero-lockup .ll em{ display:inline-block; font-style:italic; color:var(--gold-soft);
  font-size:clamp(2rem,5vw,4rem); letter-spacing:.16em; animation:lockRise .8s var(--ease) .2s both; }
.hero-lockup .ll b{ display:inline-block; font-weight:600; color:var(--bone);
  font-size:clamp(2.4rem,8.2vw,6rem); letter-spacing:.006em; text-shadow:0 4px 40px rgba(0,0,0,.55);
  animation:lockRise .9s var(--ease) .38s both; }
@keyframes lockRise{ from{ opacity:0; transform:translateY(.5em); } to{ opacity:1; transform:translateY(0); } }
.j-cap h2{ font-size:clamp(2.1rem,6vw,4.8rem); }
.j-cap em{ font-style:italic; color:var(--gold-soft); }
.j-cap .lede{ text-shadow:0 2px 22px #000; }
.j-cap .btn{ pointer-events:auto; margin-top:1.7rem; }
.j-hint{ position:fixed; left:50%; bottom:3.5vh; transform:translateX(-50%); z-index:3;
  color:var(--bone-dim); font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; pointer-events:none; text-align:center; }
.j-hint .arrow{ display:block; margin-top:.45rem; animation:bob 1.8s infinite; }
#journey{ position:relative; height:760vh; z-index:1; }        /* transparent: Canvas sichtbar */
.grounded{ position:relative; z-index:1; background:var(--void); }  /* deckt Canvas ab */
[data-speed], [data-lag]{ will-change:transform; }

@media (max-width:920px){
  .j-cap{ left:var(--pad); right:var(--pad); }
}
@media (prefers-reduced-motion:reduce){
  #bg{ opacity:1 !important; }
}


/* ============================================================
   RECHTSSEITEN + COOKIE-BANNER + FOOTER-LINKS
   ============================================================ */
.legal{ max-width:820px; margin:0 auto; padding:calc(var(--nav-h) + 3rem) var(--pad) 4rem; }
.legal h1{ font-family:var(--serif); font-weight:500; font-size:clamp(2rem,5vw,3.2rem); margin-bottom:.4rem; }
.legal .updated{ color:var(--stone); font-size:.85rem; margin-bottom:2.2rem; }
.legal h2{ font-family:var(--serif); font-weight:500; font-size:1.5rem; color:var(--gold-soft); margin:2rem 0 .7rem; }
.legal h3{ font-size:1rem; letter-spacing:.02em; margin:1.3rem 0 .4rem; color:var(--bone); }
.legal p,.legal li{ color:var(--bone-dim); font-size:.98rem; line-height:1.75; }
.legal ul{ margin:.4rem 0 .4rem 1.2rem; }
.legal a{ color:var(--gold-soft); }
.legal .box{ background:var(--panel); border:1px solid var(--line-soft); border-radius:8px; padding:1.4rem 1.6rem; margin:1rem 0; }

.foot-bottom .legal-links a{ color:var(--bone-dim); text-decoration:none; margin:0 .35rem; }
.foot-bottom .legal-links a:hover{ color:var(--gold-soft); }
.foot-bottom .legal-links button{ background:none; border:0; color:var(--bone-dim); cursor:pointer; font:inherit; margin:0 .35rem; }
.foot-bottom .legal-links button:hover{ color:var(--gold-soft); }

/* Cookie-Banner */
.cookie-banner{ position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%) translateY(160%);
  width:min(680px,94vw); z-index:300; background:rgba(14,12,9,.98); border:1px solid var(--line);
  border-radius:12px; padding:1.4rem 1.5rem; box-shadow:0 30px 80px rgba(0,0,0,.6); transition:transform .5s var(--ease); }
.cookie-banner.show{ transform:translateX(-50%) translateY(0); }
.cookie-banner p{ color:var(--bone-dim); font-size:.9rem; line-height:1.6; margin-bottom:1rem; }
.cookie-banner p a{ color:var(--gold-soft); }
.cookie-actions{ display:flex; gap:.7rem; flex-wrap:wrap; }
.cookie-actions button{ flex:1; min-width:130px; padding:.8rem 1rem; border-radius:4px; font-family:var(--sans);
  font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.76rem; cursor:pointer; border:1px solid var(--line); }
.cookie-actions .c-accept{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.cookie-actions .c-accept:hover{ background:var(--gold-bright); }
.cookie-actions .c-decline{ background:transparent; color:var(--bone-dim); }
.cookie-actions .c-decline:hover{ border-color:var(--gold); color:var(--bone); }
/* ============================================================
   KUNDEN / REFERENZEN + REVIEWS (statische Vorschau + Fallback)
   ============================================================ */
.proj-grid{ max-width:var(--maxw); margin:2.5rem auto 0; padding:0 var(--pad); display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.proj-card{ position:relative; background:var(--panel); border:1px solid var(--line-soft); border-radius:10px; overflow:hidden;
  transition:border-color .35s, transform .35s var(--ease), box-shadow .35s var(--ease); }
.proj-card:hover{ border-color:var(--accent,var(--gold)); transform:translateY(-6px); box-shadow:0 28px 70px rgba(0,0,0,.55); }
.proj-thumb{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; text-decoration:none; background:#0b0a08; }
/* Fallback (immer da, nie schwarz) */
.proj-fallback{ position:absolute; inset:0; z-index:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  background:radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--accent,#c9a25e) 34%, #0b0a08), #0b0a08 70%); }
.proj-fallback b{ font-family:var(--serif); font-style:italic; font-weight:700; font-size:2.6rem; color:var(--accent,var(--gold-soft)); line-height:1; }
.proj-fallback i{ font-style:normal; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); }
/* Screenshot on top of fallback */
.proj-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; z-index:1;
  opacity:0; transition:opacity .5s, transform .6s var(--ease); }
.proj-thumb img.loaded{ opacity:1; }
.proj-card:hover .proj-thumb img.loaded{ transform:scale(1.04); }
.proj-chrome{ position:absolute; top:0; left:0; right:0; z-index:2; height:26px; display:flex; align-items:center; gap:5px; padding:0 10px;
  background:linear-gradient(180deg, rgba(8,7,4,.92), rgba(8,7,4,.35) 70%, transparent); }
.proj-chrome s{ width:8px; height:8px; border-radius:50%; background:#3a352c; text-decoration:none; }
.proj-chrome s:nth-child(1){ background:#e0765f; } .proj-chrome s:nth-child(2){ background:#e0b45f; } .proj-chrome s:nth-child(3){ background:#7fc08a; }
.proj-chrome em{ margin-left:.4rem; font-style:normal; font-size:.68rem; letter-spacing:.04em; color:var(--bone-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.proj-visit{ position:absolute; z-index:3; left:50%; bottom:14px; transform:translateX(-50%) translateY(10px); opacity:0;
  background:var(--gold); color:#1a1206; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.6rem 1.1rem; border-radius:4px; transition:.35s var(--ease); white-space:nowrap; }
.proj-card:hover .proj-visit{ opacity:1; transform:translateX(-50%) translateY(0); }
.proj-meta{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:1rem 1.1rem; }
.proj-meta h3{ font-family:var(--serif); font-weight:500; font-size:1.12rem; }
.proj-meta .cat{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.proj-num{ font-family:var(--serif); font-style:italic; color:var(--stone); font-size:1.1rem; }

.reviews-grid{ max-width:var(--maxw); margin:2.5rem auto 0; padding:0 var(--pad); display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.review-card{ background:var(--panel); border:1px solid var(--line-soft); border-radius:10px; padding:1.6rem; transition:border-color .3s, transform .3s var(--ease); }
.review-card:hover{ border-color:var(--line); transform:translateY(-3px); }
.review-card .stars{ color:var(--gold); letter-spacing:3px; font-size:.95rem; }
.review-card blockquote{ margin:.9rem 0 1.2rem; color:var(--bone-dim); font-size:.98rem; line-height:1.65; }
.review-card figcaption{ display:flex; align-items:center; gap:.8rem; border-top:1px solid var(--line-soft); padding-top:1rem; }
.r-avatar{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  font-family:var(--serif); font-weight:600; color:#0b0a08; background:var(--accent,var(--gold)); }
.r-who{ display:flex; flex-direction:column; gap:.15rem; }
.r-name{ font-family:var(--serif); color:var(--bone); }
.r-cat{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); }

@media (max-width:1200px){ .proj-grid,.reviews-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){ .proj-grid,.reviews-grid{ grid-template-columns:1fr; } }

/* Termin: Datum + Uhrzeit */
.dt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:560px){ .dt-grid{ grid-template-columns:1fr; } }
.slots input[type=date], .slots input[type=time]{ color-scheme:dark; }
.slot-hint{ margin-top:.85rem; font-size:.86rem; color:var(--gold-soft); }
.info-tile .v a{ color:var(--bone); text-decoration:none; }
.info-tile .v a:hover{ color:var(--gold-soft); }

/* ============================================================
   ÜBER UNS · PROZESS · FAQ
   ============================================================ */
.ueber-points{ list-style:none; margin:1.4rem 0 0; }
.ueber-points li{ position:relative; padding:.6rem 0 .6rem 1.8rem; border-top:1px solid var(--line-soft); color:var(--bone-dim); }
.ueber-points li::before{ content:"✦"; position:absolute; left:0; color:var(--gold); }
.ueber-points strong{ color:var(--bone); font-weight:600; }

.steps{ max-width:var(--maxw); margin:2.5rem auto 0; padding:0 var(--pad); display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.step{ position:relative; background:var(--panel); border:1px solid var(--line-soft); border-radius:10px; padding:1.8rem 1.5rem; overflow:hidden; transition:border-color .3s, transform .3s var(--ease); }
.step:hover{ border-color:var(--gold); transform:translateY(-5px); }
.step-n{ font-family:var(--serif); font-style:italic; font-size:2.6rem; color:var(--gold-soft); line-height:1; display:block; margin-bottom:.6rem; }
.step h3{ font-family:var(--serif); font-weight:500; font-size:1.25rem; margin-bottom:.5rem; }
.step p{ color:var(--bone-dim); font-size:.94rem; line-height:1.6; }
.step::after{ content:""; position:absolute; inset:0 0 auto 0; height:2px; background:linear-gradient(90deg,var(--gold),transparent); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.step:hover::after{ transform:scaleX(1); }

.faq{ max-width:820px; margin:2.5rem auto 0; padding:0 var(--pad); }
.faq details{ border:1px solid var(--line-soft); border-radius:8px; margin-bottom:.8rem; background:var(--panel); overflow:hidden; transition:border-color .25s; }
.faq details[open]{ border-color:var(--line); }
.faq summary{ cursor:pointer; padding:1.1rem 1.4rem; font-family:var(--serif); font-size:1.1rem; color:var(--bone); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--gold); font-size:1.5rem; line-height:1; transition:transform .25s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details>div{ padding:0 1.4rem 1.2rem; }
.faq details p{ color:var(--bone-dim); font-size:.96rem; line-height:1.65; }

@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }

/* ============================================================
   ADMIN-POLISH + UI-FEINSCHLIFF
   ============================================================ */
.admin-gate{ position:relative; background:linear-gradient(165deg,#17120a,#0d0b07); box-shadow:0 40px 120px rgba(0,0,0,.55); }
.admin-gate::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; border-radius:8px 8px 0 0; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.admin-gate input{ text-align:center; letter-spacing:.3em; }
.admin-bar{ background:linear-gradient(160deg,#17120a,#0d0b07); border:1px solid var(--line-soft); border-radius:12px; padding:1.4rem 1.6rem; }
.admin-bar .display{ background:linear-gradient(90deg,var(--bone),var(--gold-soft)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pill{ background:linear-gradient(160deg,#1a140c,#100d08); border:1px solid var(--line); }
.pill strong{ font-family:var(--serif); font-size:1.05em; }
table.leads th{ position:sticky; top:0; }
table.leads tbody tr:nth-child(even) td{ background:rgba(255,255,255,.015); }
table.leads tbody tr{ transition:background .2s; }
table.leads tbody tr:hover td{ background:rgba(201,162,94,.06); }
table.leads td:first-child{ color:var(--stone); white-space:nowrap; }

/* Button-Glanz (dezent, premium) */
.btn-gold{ position:relative; overflow:hidden; }
.btn-gold::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-18deg); transition:left .6s var(--ease); }
.btn-gold:hover::after{ left:130%; }

/* Nav-Hover: sanftes Aufleuchten */
.topnav a:not(.cta-link)::after{ content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px; background:var(--gold); transition:right .3s var(--ease); }
.topnav a:not(.cta-link):hover::after{ right:0; }
.topnav a.active:not(.cta-link)::after{ right:0; }

/* Karten-Glow beim Hover (Leistungs-Karten) */
.card{ position:relative; }
.card::before{ content:""; position:absolute; inset:0; border-radius:6px; padding:1px; pointer-events:none; opacity:0; transition:opacity .35s;
  background:linear-gradient(160deg,rgba(224,196,136,.5),transparent 40%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.card:hover::before{ opacity:1; }

.slot-hint.warn{ color:#e6b8a0; }

/* ============================================================
   PREISE-SEITE · PAKETE + KAUF-POPUP
   ============================================================ */
.pricing{ max-width:var(--maxw); margin:2.6rem auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; align-items:start; }
.price-card{ position:relative; background:linear-gradient(170deg,var(--panel),var(--ink));
  border:1px solid var(--line-soft); border-radius:16px; padding:2rem 1.7rem 1.9rem;
  display:flex; flex-direction:column; transition:border-color .3s, transform .3s var(--ease); }
.price-card:hover{ border-color:var(--line); transform:translateY(-4px); }
.price-card.featured{ border-color:var(--gold); background:linear-gradient(170deg,#1c1509,#0d0a06);
  box-shadow:0 30px 90px rgba(201,162,94,.16); }
.price-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:#1a1206; font-size:.66rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:.4rem .9rem; border-radius:999px; white-space:nowrap; }
.price-head{ text-align:center; padding-bottom:1.3rem; margin-bottom:1.3rem; border-bottom:1px solid var(--line-soft); }
.price-name{ font-family:var(--serif); font-style:italic; font-size:1.7rem; color:var(--gold-soft); margin-bottom:.2rem; }
.price-tag{ color:var(--stone); font-size:.86rem; }
.price-amount{ font-family:var(--serif); font-size:2.9rem; font-weight:600; color:var(--bone); margin-top:.9rem; line-height:1; letter-spacing:-.01em; }
.price-amount .cur{ font-size:1.4rem; vertical-align:top; color:var(--gold); margin-right:.1em; }
.price-amount .per{ display:block; font-family:var(--sans); font-style:normal; font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--stone); margin-top:.5rem; }
.price-list{ list-style:none; margin:0 0 1.6rem; padding:0; display:flex; flex-direction:column; gap:.62rem; flex:1; }
.price-list li{ position:relative; padding-left:1.7rem; font-size:.92rem; color:var(--bone-dim); line-height:1.45; }
.price-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--gold); font-weight:700; }
.price-list li b{ color:var(--bone); font-weight:600; }
.price-btn{ width:100%; justify-content:center; }
.pricing-note{ max-width:640px; margin:2.2rem auto 0; padding:0 var(--pad); color:var(--bone-dim); font-size:.94rem; }
.pricing-note b{ color:var(--gold-soft); }

.trust-row{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.trust-item{ text-align:center; padding:1.4rem 1rem; background:var(--panel); border:1px solid var(--line-soft); border-radius:12px; }
.trust-n{ display:block; font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--gold-soft); margin-bottom:.35rem; }
.trust-l{ display:block; font-size:.82rem; color:var(--stone); line-height:1.4; }

/* ---------- Modal ---------- */
.modal-overlay{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:1.2rem;
  background:rgba(4,3,2,.78); backdrop-filter:blur(6px); animation:mfade .25s ease; }
.modal-overlay[hidden]{ display:none !important; }   /* sonst überschreibt display:grid das hidden-Attribut */
@keyframes mfade{ from{opacity:0} to{opacity:1} }
.modal{ position:relative; width:min(560px,100%); max-height:92vh; overflow-y:auto;
  background:linear-gradient(170deg,#17120a,#0b0a07); border:1px solid var(--line);
  border-radius:18px; padding:clamp(1.5rem,4vw,2.4rem); box-shadow:0 40px 120px rgba(0,0,0,.6);
  animation:mrise .3s var(--ease); }
@keyframes mrise{ from{opacity:0; transform:translateY(24px) scale(.98)} to{opacity:1; transform:none} }
.modal-close{ position:absolute; top:.9rem; right:1.1rem; background:none; border:0; color:var(--stone);
  font-size:1.9rem; line-height:1; cursor:pointer; transition:color .2s; padding:.2rem; }
.modal-close:hover{ color:var(--bone); }
.modal-h{ font-family:var(--serif); font-weight:500; font-size:1.8rem; margin:.3rem 0 .5rem; }
.modal-h span{ color:var(--gold-soft); font-style:italic; }
.modal-sub{ color:var(--bone-dim); font-size:.95rem; margin-bottom:1.2rem; }
.modal-sub b{ color:var(--bone); }
.plan-pill{ display:inline-block; background:rgba(201,162,94,.12); border:1px solid var(--line);
  border-radius:999px; padding:.5rem 1rem; font-size:.84rem; color:var(--bone-dim); margin-bottom:1.4rem; }
.plan-pill b{ color:var(--gold-soft); }
.modal .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.modal .field.full{ grid-column:1 / -1; }
.modal-fineprint{ font-size:.76rem; color:var(--stone); margin-top:.9rem; text-align:center; }
.success-check{ width:64px; height:64px; margin:0 auto 1.2rem; border-radius:50%;
  background:linear-gradient(160deg,var(--gold),var(--gold-soft)); color:#1a1206;
  font-size:2rem; font-weight:700; display:grid; place-items:center; animation:pop .4s var(--ease); }
@keyframes pop{ from{transform:scale(.4); opacity:0} to{transform:scale(1); opacity:1} }
#modalSuccess{ text-align:center; }
#modalSuccess .btn{ margin-top:1.2rem; }

@media (max-width:900px){
  .pricing{ grid-template-columns:1fr; max-width:460px; }
  .price-card.featured{ order:-1; }
  .trust-row{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .modal .form-grid{ grid-template-columns:1fr; }
}

/* Admin: Typ-Badges + Zusatzzeile */
.tp{ display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.22rem .55rem; border-radius:999px; white-space:nowrap; }
.tp-order{ background:rgba(201,162,94,.16); color:var(--gold-soft); border:1px solid var(--line); }
.tp-contact{ background:rgba(232,223,207,.08); color:var(--bone-dim); border:1px solid var(--line-soft); }
.sub-cell{ font-size:.8rem; color:var(--stone); }

/* ============================================================
   SCHWEBENDER WHATSAPP-KONTAKT-BUTTON
   ============================================================ */
.wa-widget{ position:fixed; right:clamp(1rem,3vw,1.8rem); bottom:clamp(1rem,3vw,1.8rem); z-index:300;
  display:flex; flex-direction:column; align-items:flex-end; gap:.8rem; }
.wa-fab{ display:inline-flex; align-items:center; gap:.55rem; border:0; cursor:pointer;
  background:linear-gradient(160deg,#25d366,#128c4b); color:#fff; font-family:var(--sans); font-weight:600;
  font-size:.9rem; padding:.85rem 1.15rem; border-radius:999px; box-shadow:0 12px 34px rgba(18,140,75,.45);
  transition:transform .2s var(--ease), box-shadow .25s; }
.wa-fab:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(18,140,75,.55); }
.wa-fab:active{ transform:translateY(-1px); }
.wa-ic{ flex-shrink:0; }
.wa-fab-txt{ white-space:nowrap; }
.wa-widget.open .wa-fab-txt{ display:none; }
.wa-widget.open .wa-fab{ padding:.85rem; }

.wa-panel{ width:min(340px,calc(100vw - 2rem)); background:linear-gradient(180deg,#17120a,#0c0a07);
  border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.55);
  animation:waPop .28s var(--ease); transform-origin:bottom right; }
@keyframes waPop{ from{opacity:0; transform:translateY(14px) scale(.96)} to{opacity:1; transform:none} }
.wa-head{ display:flex; align-items:center; gap:.7rem; padding:1rem 1.1rem; background:linear-gradient(160deg,#128c4b,#0e6b3a); color:#fff; }
.wa-avatar{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.18);
  display:grid; place-items:center; font-family:var(--serif); font-weight:600; font-size:1rem; letter-spacing:.02em; }
.wa-title{ font-weight:700; font-size:.95rem; letter-spacing:.02em; }
.wa-status{ font-size:.74rem; opacity:.9; display:flex; align-items:center; gap:.35rem; margin-top:.1rem; }
.wa-dot{ width:7px; height:7px; border-radius:50%; background:#8effb0; box-shadow:0 0 0 0 rgba(142,255,176,.7); animation:waPulse 2s infinite; }
@keyframes waPulse{ 0%{box-shadow:0 0 0 0 rgba(142,255,176,.6)} 70%{box-shadow:0 0 0 7px rgba(142,255,176,0)} 100%{box-shadow:0 0 0 0 rgba(142,255,176,0)} }
.wa-x{ margin-left:auto; background:none; border:0; color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; opacity:.85; padding:.1rem .3rem; }
.wa-x:hover{ opacity:1; }
.wa-body{ padding:1.1rem 1.1rem 1.2rem; }
.wa-lead{ color:var(--bone-dim); font-size:.9rem; line-height:1.5; margin-bottom:.9rem; }
.wa-topics{ display:flex; flex-direction:column; gap:.45rem; margin-bottom:1rem; }
.wa-chip{ display:flex; align-items:center; gap:.6rem; text-align:left; width:100%; cursor:pointer;
  background:var(--panel); border:1px solid var(--line-soft); color:var(--bone-dim); font-family:var(--sans);
  font-size:.86rem; padding:.6rem .8rem; border-radius:10px; transition:.18s; }
.wa-chip:hover{ border-color:var(--line); color:var(--bone); }
.wa-chip.active{ border-color:#25d366; background:rgba(37,211,102,.12); color:var(--bone); }
.wa-chip-ic{ font-size:1.05rem; }
.wa-namelbl{ display:block; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--stone); margin-bottom:.35rem; }
.wa-namelbl span{ text-transform:none; letter-spacing:0; }
.wa-name{ width:100%; background:var(--ink); border:1px solid var(--line-soft); border-radius:9px;
  color:var(--bone); font-family:var(--sans); font-size:.9rem; padding:.6rem .75rem; margin-bottom:1rem; }
.wa-name:focus{ outline:none; border-color:#25d366; }
.wa-send{ display:block; text-align:center; text-decoration:none; background:linear-gradient(160deg,#25d366,#128c4b);
  color:#fff; font-weight:700; font-size:.92rem; padding:.85rem; border-radius:11px; transition:transform .18s, box-shadow .2s; box-shadow:0 10px 26px rgba(18,140,75,.4); }
.wa-send:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(18,140,75,.5); }
.wa-fine{ text-align:center; font-size:.72rem; color:var(--stone); margin-top:.7rem; }
@media (max-width:560px){ .wa-fab-txt{ display:none; } .wa-fab{ padding:.9rem; } }

/* Nav früher zu Hamburger (mehr Menüpunkte) – nur Navigation, andere Layouts bleiben */
@media (max-width:1080px) and (min-width:921px){
  .nav-toggle{ display:flex; }
  .topnav{ position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; gap:0; background:rgba(10,8,5,.98);
    border-bottom:1px solid var(--line); padding:1rem var(--pad) 1.4rem; transform:translateY(-120%); transition:transform .35s var(--ease); }
  .topnav.open{ transform:none; }
  .topnav a{ width:100%; padding:.9rem 0; border-bottom:1px solid var(--line-soft); font-size:.95rem; }
  .topnav a.cta-link{ margin-top:.8rem; text-align:center; padding:.9rem; }
  .topnav a.active:not(.cta-link)::after{ display:none; }
}

/* ============================================================
   KI-ASSISTENT-SEITE
   ============================================================ */
.ki-hero{ min-height:clamp(560px,80vh,780px); align-items:center; }
.ki-hero-grid{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto;
  padding:calc(var(--nav-h) + 2rem) var(--pad) 2.5rem; display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:center; }
.ki-trustline{ margin-top:1.3rem; font-size:.82rem; color:var(--bone-dim); letter-spacing:.01em; }

.ki-chat{ background:linear-gradient(180deg,#17120a,#0b0a07); border:1px solid var(--line);
  border-radius:18px; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.5); max-width:400px; margin-left:auto; width:100%; }
.ki-chat-head{ background:linear-gradient(160deg,#1c1509,#120d06); padding:.85rem 1.1rem; font-size:.82rem; font-weight:600;
  color:var(--bone-dim); border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:.5rem; }
.ki-chat-dot{ width:8px; height:8px; border-radius:50%; background:#8effb0; box-shadow:0 0 0 0 rgba(142,255,176,.7); animation:waPulse 2s infinite; }
.ki-chat-body{ padding:1.1rem; display:flex; flex-direction:column; gap:.6rem; }
.ki-msg{ max-width:82%; padding:.6rem .85rem; border-radius:13px; font-size:.88rem; line-height:1.45; animation:kiIn .5s var(--ease) both; }
.ki-msg.in{ align-self:flex-start; background:var(--panel-2); color:var(--bone); border:1px solid var(--line-soft); border-bottom-left-radius:4px; }
.ki-msg.out{ align-self:flex-end; background:linear-gradient(160deg,var(--gold),var(--gold-soft)); color:#1a1206; font-weight:500; border-bottom-right-radius:4px; }
.ki-msg:nth-child(2){ animation-delay:.15s; } .ki-msg:nth-child(3){ animation-delay:.3s; }
.ki-msg:nth-child(4){ animation-delay:.45s; } .ki-msg:nth-child(5){ animation-delay:.6s; }
@keyframes kiIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.ki-chat-foot{ padding:.7rem 1.1rem; border-top:1px solid var(--line-soft); font-size:.74rem; color:var(--stone); text-align:center; }

.ki-feats{ max-width:var(--maxw); margin:2.6rem auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.ki-feat{ background:linear-gradient(165deg,var(--panel),var(--ink)); border:1px solid var(--line-soft);
  border-radius:14px; padding:1.7rem 1.5rem; transition:border-color .3s, transform .3s var(--ease); }
.ki-feat:hover{ border-color:var(--gold); transform:translateY(-5px); }
.ki-feat-ic{ font-size:1.9rem; display:block; margin-bottom:.7rem; }
.ki-feat h3{ font-family:var(--serif); font-weight:500; font-size:1.25rem; margin-bottom:.4rem; }
.ki-feat p{ color:var(--bone-dim); font-size:.92rem; line-height:1.55; }

.ki-tags{ max-width:900px; margin:2.4rem auto 0; padding:0 var(--pad); display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.ki-tags span{ background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:.6rem 1.15rem; font-size:.9rem; color:var(--bone-dim); }

@media (max-width:900px){
  .ki-hero-grid{ grid-template-columns:1fr; gap:1.8rem; }
  .ki-chat{ margin:0 auto; }
  .ki-feats{ grid-template-columns:1fr; max-width:460px; }
}

/* ============================================================
   GRÜNDER-KARTE (Über uns)
   ============================================================ */
.founder{ max-width:var(--maxw); margin:2.6rem auto 0; padding:1.9rem clamp(1.4rem,3vw,2.2rem);
  background:linear-gradient(160deg,var(--panel),var(--ink)); border:1px solid var(--line-soft);
  border-radius:16px; display:flex; gap:1.8rem; align-items:center; }
.founder-avatar{ flex-shrink:0; width:88px; height:88px; border-radius:50%;
  background:linear-gradient(160deg,var(--gold),var(--gold-soft)); color:#1a1206;
  font-family:var(--serif); font-weight:600; font-size:2.1rem; letter-spacing:.02em;
  display:grid; place-items:center; box-shadow:0 12px 34px rgba(201,162,94,.3); }
.founder-name{ font-family:var(--serif); font-weight:500; font-size:1.6rem; margin:.2rem 0 .15rem; }
.founder-role{ color:var(--gold-soft); font-size:.88rem; letter-spacing:.04em; margin-bottom:.7rem; }
.founder-bio{ color:var(--bone-dim); font-size:.95rem; line-height:1.6; max-width:64ch; }
.founder-links{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.founder-links a{ text-decoration:none; font-size:.82rem; font-weight:600; letter-spacing:.03em;
  color:var(--gold); border:1px solid var(--line); border-radius:999px; padding:.5rem .95rem; transition:.2s; }
.founder-links a:hover{ background:rgba(201,162,94,.12); color:var(--gold-soft); border-color:var(--gold); }
@media (max-width:640px){ .founder{ flex-direction:column; text-align:center; } .founder-links{ justify-content:center; } .founder-bio{ text-align:left; } }

/* 4-Karten-Layout (Home-Leistungen inkl. KI) */
.cards.four{ grid-template-columns:repeat(4,1fr); }
.card-ki{ border-color:var(--line); }
.card-link{ display:inline-block; margin-top:.9rem; color:var(--gold); font-size:.84rem; font-weight:600;
  letter-spacing:.04em; text-decoration:none; transition:.2s; }
.card-link:hover{ color:var(--gold-soft); transform:translateX(3px); }
@media (max-width:1080px){ .cards.four{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:920px){ .cards.four{ grid-template-columns:1fr; } }

/* Finale CTA – Risiko-Umkehr-Zeile */
.cta-risk{ color:var(--bone-dim); font-size:.95rem; margin:.8rem auto 0; max-width:56ch; }
.cta-final .hero-cta{ margin-top:1.6rem; }

/* KI-Hero Mobil: doppeltes Padding vermeiden (hero-inner sitzt in ki-hero-grid) */
@media (max-width:900px){
  .ki-hero-grid{ padding-top:calc(var(--nav-h) + 1.4rem); padding-bottom:2rem; }
  .ki-hero-grid .hero-inner{ padding-left:0; padding-right:0; }
  .ki-hero .hero-cta .btn{ flex:1 1 auto; justify-content:center; }
}