:root{
  --bg:#0B0D0E; --surface:#141618; --surface-2:#1a1d1f;
  --text:#F5F1E8; --muted:#a8a29c; --border:#2a2a2a;
  --gold:#C8A96A; --green:#6F806D;
  --max:1200px; --gap:clamp(1.5rem,4vw,3rem);
  --radius:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-weight:400; line-height:1.65; font-size:clamp(1rem,0.96rem + 0.2vw,1.0625rem);
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem)}
section{padding:clamp(4rem,9vw,7.5rem) 0}
h1,h2,h3{line-height:1.15; letter-spacing:-0.02em; font-weight:800}
h1{font-size:clamp(2.1rem,1.3rem + 4vw,4.25rem)}
h2{font-size:clamp(1.6rem,1.1rem + 2.4vw,2.75rem); margin-bottom:1rem}
h3{font-size:clamp(1.15rem,1rem + 0.7vw,1.5rem); font-weight:700; letter-spacing:-0.01em}
p{color:var(--muted)}
strong{color:var(--text); font-weight:600}
.gold{color:var(--gold)}
a{color:inherit}
.eyebrow{
  display:inline-block; font-size:.75rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1.25rem;
}
.eyebrow::before{content:""; display:inline-block; width:2rem; height:1px; background:var(--gold); vertical-align:middle; margin-right:.75rem}

/* NAV */
header{position:sticky; top:0; z-index:100; background:rgba(11,13,14,.75); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .3s}
header.scrolled{border-bottom-color:var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:1.1rem}
.logo{font-weight:800; font-size:1.25rem; letter-spacing:-0.03em; text-decoration:none; flex-shrink:0}
.logo span{color:var(--gold)}
.nav-links{display:flex; gap:2rem; align-items:center; margin-left:auto}
.nav-links a{text-decoration:none; font-size:.925rem; color:var(--text); opacity:.72; transition:opacity .2s, color .2s}
.nav-links a:hover{opacity:1; color:var(--gold)}
.btn{
  display:inline-block; padding:.85rem 1.6rem; border-radius:999px;
  font-weight:600; font-size:.95rem; text-decoration:none; cursor:pointer;
  border:1px solid transparent; transition:all .22s ease; white-space:nowrap;
}
.btn-primary{background:var(--gold); color:#0B0D0E}
.btn-primary:hover{background:#d9bc7d; transform:translateY(-1px)}
.btn-ghost{border-color:rgba(245,241,232,.32); color:var(--text); background:rgba(245,241,232,.03)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold); background:rgba(200,169,106,.07)}
.btn-sm{padding:.6rem 1.15rem; font-size:.875rem}
.burger{display:none; background:none; border:0; color:var(--text); cursor:pointer; padding:.5rem}

/* HERO */
.hero{padding-top:clamp(2.75rem,7vw,7rem); padding-bottom:clamp(2.5rem,6vw,6rem); position:relative}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(900px 480px at 78% 8%, rgba(200,169,106,.10), transparent 62%);
}
.hero-inner{position:relative; max-width:54rem}
.hero p.lead{font-size:clamp(1.05rem,1rem + 0.5vw,1.3rem); margin:1.5rem 0 2rem; max-width:41rem}
.hero-cta{display:flex; gap:1rem; flex-wrap:wrap; align-items:center}
.hero-trust{margin-top:2rem; font-size:.875rem; color:var(--muted); display:flex; gap:1.25rem; flex-wrap:wrap}
.hero-trust span{display:flex; align-items:center; gap:.5rem}
.hero-trust span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--green); flex-shrink:0}

/* PROBLEM */
.problem{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.cards-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.25rem; margin-top:3rem}
.pcard{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.25rem); display:flex; flex-direction:column;
  transition:border-color .25s, transform .25s;
}
.pcard:hover{border-color:rgba(200,169,106,.5); transform:translateY(-3px)}
.pcard .quote{font-size:1.1rem; font-weight:600; color:var(--text); line-height:1.4; min-height:3.2em}
.pcard .tag{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--green); font-weight:600; margin-bottom:1rem}
.pcard p{font-size:.95rem; margin:1rem 0 1.5rem; flex:1}
.pcard .resolve{margin-top:auto; padding-top:1.25rem; border-top:1px solid var(--border)}
.pcard .resolve a{display:flex; align-items:center; justify-content:space-between; text-decoration:none; font-weight:600; font-size:.95rem}
.pcard .resolve a::after{content:"→"; color:var(--gold); transition:transform .2s}
.pcard .resolve a:hover::after{transform:translateX(4px)}
.pcard .price{font-size:.85rem; color:var(--gold); font-weight:600; letter-spacing:.02em}

/* STEPS */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2.5rem 2rem; margin-top:3.5rem; counter-reset:step}
.step{position:relative; padding-top:3.25rem; counter-increment:step}
.step::before{
  content:counter(step,decimal-leading-zero); position:absolute; top:0; left:0;
  font-size:2.25rem; font-weight:800; color:var(--gold); opacity:.32; letter-spacing:-0.04em;
}
.step h3{margin-bottom:.6rem}
.step p{font-size:.95rem}

/* INCLUDED */
.included{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.inc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:.9rem 2.5rem; margin-top:3rem}
.inc{display:flex; gap:.9rem; align-items:flex-start; padding:.65rem 0; font-size:.975rem}
.inc svg{flex-shrink:0; margin-top:.3rem}
.extras{margin-top:3.5rem; padding-top:2.5rem; border-top:1px solid var(--border)}
.extras p{margin-top:1rem; font-size:.95rem}
.chips{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem}
.chip{border:1px solid var(--border); border-radius:999px; padding:.45rem 1rem; font-size:.85rem; color:var(--muted)}

/* USP */
.usp-box{
  margin-top:3rem; background:var(--surface-2); border:1px solid var(--border);
  border-left:3px solid var(--gold); border-radius:var(--radius);
  padding:clamp(1.75rem,4vw,2.75rem); max-width:44rem;
}
.usp-box .line{font-size:clamp(1.1rem,1rem + 0.8vw,1.5rem); font-weight:700; color:var(--text); line-height:1.45}
.usp-box .line + .line{margin-top:.5rem}
.usp-box .rest{color:var(--muted); font-weight:400; font-size:1rem; margin-top:.4rem; display:block}
.usp-note{margin-top:1.75rem; font-size:.9rem}

/* PRICING */
.pricing{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.25rem; margin-top:3.5rem; align-items:start}
.plan{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:clamp(1.75rem,3.5vw,2.5rem); display:flex; flex-direction:column; height:100%;
}
.plan.featured{border-color:rgba(200,169,106,.55); position:relative; background:var(--surface-2)}
.plan.featured::before{
  content:"Meistgewählt"; position:absolute; top:-0.75rem; left:2.5rem;
  background:var(--gold); color:#0B0D0E; font-size:.7rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:.3rem .85rem; border-radius:999px;
}
.plan .num{font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600}
.plan h3{margin:.75rem 0 .5rem}
.plan .p{font-size:1.85rem; font-weight:800; letter-spacing:-0.03em; margin:.75rem 0 .25rem}
.plan .per{font-size:.85rem; color:var(--muted); margin-bottom:1.75rem}
.plan ul{list-style:none; display:flex; flex-direction:column; gap:.7rem; margin-bottom:2rem; flex:1}
.plan li{font-size:.925rem; color:var(--muted); padding-left:1.4rem; position:relative}
.plan li::before{content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--gold); opacity:.7}
.plan li.hl{color:var(--text); font-weight:600}
.plan .eta{font-size:.85rem; color:var(--green); font-weight:500; margin-bottom:1.5rem}
.plan .btn{width:100%; text-align:center}
.mod-note{margin-top:2.5rem; text-align:center; font-size:.925rem}

/* TRUST */
.trust-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1rem 2.5rem; margin-top:3rem}
.trust-item{padding:1.25rem 0; border-top:1px solid var(--border)}
.trust-item h3{font-size:1.05rem; margin-bottom:.5rem}
.trust-item p{font-size:.925rem}
.honest{
  margin-top:3rem; padding:1.5rem 1.75rem; border:1px dashed var(--border);
  border-radius:var(--radius); font-size:.925rem; color:var(--muted); max-width:44rem;
}
.honest strong{color:var(--gold)}

/* FAQ */
.faq{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.faq-list{margin-top:3rem; max-width:50rem}
details{border-bottom:1px solid var(--border)}
summary{
  padding:1.35rem 2.5rem 1.35rem 0; cursor:pointer; list-style:none;
  font-weight:600; font-size:1.02rem; position:relative; color:var(--text);
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+"; position:absolute; right:.25rem; top:50%; transform:translateY(-50%);
  color:var(--gold); font-size:1.5rem; font-weight:400; transition:transform .25s;
}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details p{padding:0 3rem 1.5rem 0; font-size:.95rem}
details[open] p{animation:fade .3s ease}
@keyframes fade{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}

/* CONTACT */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); margin-top:3rem; align-items:start}
form{display:flex; flex-direction:column; gap:1.1rem}
.field{display:flex; flex-direction:column; gap:.45rem}
label{font-size:.85rem; font-weight:500; color:var(--muted)}
input,textarea{
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:.85rem 1rem; color:var(--text); font-family:inherit; font-size:.95rem;
  transition:border-color .2s, background .2s; width:100%;
}
input:focus,textarea:focus{outline:none; border-color:var(--gold); background:var(--surface-2)}
textarea{resize:vertical; min-height:7rem}
.hint{font-size:.8rem; color:var(--muted); margin-top:.25rem}
.contact-side{display:flex; flex-direction:column; gap:1.75rem}
.channel{padding:1.25rem 0; border-top:1px solid var(--border)}
.channel .k{font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600}
.channel .v{font-size:1.05rem; font-weight:600; margin-top:.4rem; word-break:break-word}
.channel a{text-decoration:none}
.channel a:hover{color:var(--gold)}

/* FOOTER */
footer{padding:clamp(3rem,6vw,4.5rem) 0 2.5rem; border-top:1px solid var(--border)}
.foot{display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:flex-start}
.foot-brand{max-width:24rem}
.foot-brand .logo{margin-bottom:.85rem; display:inline-block}
.foot-brand p{font-size:.9rem}
.foot-links{display:flex; gap:2rem; flex-wrap:wrap}
.foot-links a{text-decoration:none; font-size:.9rem; color:var(--muted)}
.foot-links a:hover{color:var(--gold)}
.foot-bottom{margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--border); font-size:.8rem; color:var(--muted); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}

/* MOBILE */
@media (max-width:820px){
  .contact-grid{grid-template-columns:1fr}
  .wrap{padding:0 1.25rem}
  .nav-links{display:none}
  .nav-links.open{
    display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--surface);
    border-bottom:1px solid var(--border); padding:.35rem 0;
  }
  .nav-links.open a{padding:.95rem 1.25rem; width:100%; font-size:1rem; color:var(--text); opacity:1}
  .nav-links.open a:hover{background:var(--surface-2); color:var(--gold)}
  .eyebrow{font-size:.7rem; letter-spacing:.14em}
  .eyebrow::before{width:1.25rem; margin-right:.5rem}
  .burger{display:block}
  .plan .p{font-size:1.65rem}
  /* Header: Logo + Burger mit gleichem Rand wie Inhalt */
  .nav{padding-block:1rem}
  .nav .logo{font-size:1.15rem; margin-left:0}
  .nav .btn-sm{padding:.55rem 1rem; font-size:.85rem}
  html{scroll-padding-top:5rem}
  /* Mobil: kompaktere vertikale Rhythmen */
  .hero{padding-top:2rem; padding-bottom:2.25rem}
  .hero p.lead{margin:1.25rem 0 1.75rem}
  .hero-trust{margin-top:1.5rem; gap:.65rem; flex-direction:column}
  .hero-cta{gap:.75rem}
  .hero-cta .btn{width:100%; text-align:center}
  section{padding:clamp(3rem,9vw,4.5rem) 0}
  .cards-3{gap:1rem; margin-top:2rem}
  .steps{gap:1.75rem; margin-top:2.25rem}
  .plans{gap:1rem; margin-top:2.25rem}
  .inc-grid{margin-top:2rem}
  .faq-list{margin-top:2rem}
  .contact-grid{margin-top:2rem}
  h2{margin-bottom:.85rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}
/* ===== MEHRSEITEN-KOMPONENTEN ===== */
.nav-links a.active{opacity:1; color:var(--gold)}

/* Unterseiten-Kopf */
.page-head{
  padding-top:clamp(3rem,7vw,5.5rem); padding-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--border); position:relative;
}
.page-head::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(700px 340px at 78% 0%, rgba(200,169,106,.08), transparent 64%);
}
.page-head .inner{position:relative; max-width:48rem}
.page-head h1{font-size:clamp(1.9rem,1.2rem + 3vw,3.25rem)}
.page-head p{margin-top:1.25rem; font-size:clamp(1rem,.96rem + .35vw,1.175rem); max-width:40rem}

/* Brotkrumen */
.crumbs{font-size:.8rem; color:var(--muted); margin-bottom:1.25rem; display:flex; gap:.5rem; flex-wrap:wrap}
.crumbs a{text-decoration:none; color:var(--muted)}
.crumbs a:hover{color:var(--gold)}
.crumbs span{opacity:.45}

/* Zweispaltiges Layout */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start}
.split-wide{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.5rem); align-items:start}

/* Inhaltsblöcke */
.block{margin-bottom:clamp(2.5rem,5vw,4rem)}
.block:last-child{margin-bottom:0}
.block h2{margin-bottom:.85rem}
.block > p{font-size:1.0125rem; max-width:42rem}
.block > p + p{margin-top:.9rem}

/* Paket-Detailkarte */
.detail{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:clamp(1.75rem,3.5vw,2.75rem); margin-bottom:1.5rem;
}
.detail.featured{border-color:rgba(200,169,106,.5); background:var(--surface-2)}
.detail-head{display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.5rem}
.detail-head h3{font-size:clamp(1.25rem,1.1rem + .7vw,1.65rem)}
.detail-head .num{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:.4rem}
.detail .price-tag{text-align:right; flex-shrink:0}
.detail .price-tag .big{font-size:1.6rem; font-weight:800; letter-spacing:-.02em; display:block}
.detail .price-tag .small{font-size:.85rem; color:var(--muted)}
.detail .for{font-size:.95rem; color:var(--gold); font-weight:600; margin-bottom:1rem}
.detail ul{list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.6rem 1.5rem; margin-top:1.25rem}
.detail li{font-size:.925rem; color:var(--muted); padding-left:1.35rem; position:relative}
.detail li::before{content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--gold); opacity:.7}
.detail li.hl{color:var(--text); font-weight:600}

/* Modul-Tabelle */
.mods{width:100%; border-collapse:collapse; margin-top:1.75rem; font-size:.925rem}
.mods th, .mods td{text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--border); vertical-align:top}
.mods th{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; border-bottom-color:rgba(200,169,106,.3)}
.mods td:first-child{color:var(--text); font-weight:600; white-space:nowrap}
.mods td{color:var(--muted)}
.mods tr:last-child td{border-bottom:0}

/* Info-Kasten */
.note{
  border:1px solid var(--border); border-left:3px solid var(--gold);
  border-radius:8px; padding:1.25rem 1.5rem; background:var(--surface-2);
  font-size:.925rem; color:var(--muted); margin-top:1.5rem;
}
.note strong{color:var(--text)}
.note.warn{border-left-color:#C87A5A}
.note.warn strong{color:#E09A78}

/* Faktenliste (Über uns) */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.25rem; margin-top:2.5rem}
.fact{border-top:2px solid var(--gold); padding-top:1.1rem}
.fact .n{font-size:clamp(1.6rem,1.3rem + 1vw,2.25rem); font-weight:800; letter-spacing:-.03em; color:var(--text)}
.fact .l{font-size:.85rem; color:var(--muted); margin-top:.35rem}

/* Beispiele / Arbeitsprobe */
.proof-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:border-color .25s, transform .25s;
}
.proof-card:hover{border-color:rgba(200,169,106,.5); transform:translateY(-3px)}
.proof-card .shot{border-bottom:1px solid var(--border); background:var(--surface-2); padding:1.5rem; text-align:center; color:var(--muted); font-size:.85rem}
.proof-card .body{padding:1.5rem}
.proof-card h3{margin-bottom:.5rem}
.proof-card p{font-size:.925rem}
.soon{
  border:1px dashed var(--border); border-radius:var(--radius);
  padding:clamp(2rem,5vw,3.5rem); text-align:center; margin-top:2.5rem;
}
.soon .ico{font-size:1.75rem; margin-bottom:.75rem; display:block; opacity:.7}
.soon h3{margin-bottom:.6rem}
.soon p{max-width:34rem; margin:0 auto; font-size:.95rem}

/* CTA-Band */
.cta-band{
  background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  text-align:center;
}
.cta-band h2{margin-bottom:1rem}
.cta-band p{max-width:36rem; margin:0 auto 2rem; font-size:1.0125rem}
.cta-band .btns{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap}

/* Rechtsseiten (Impressum/Datenschutz/404) */
.legal{max-width:44rem}
.legal h2{margin-top:2.5rem; margin-bottom:1rem; font-size:clamp(1.15rem,1rem + .7vw,1.5rem)}
.legal h2:first-child{margin-top:0}
.legal p, .legal li{font-size:.95rem; color:var(--muted)}
.legal ul{margin:.75rem 0 0 1.25rem; display:flex; flex-direction:column; gap:.4rem}
.legal a{color:var(--gold); text-decoration:none}
.legal a:hover{text-decoration:underline}

/* 404 */
.nf{text-align:center; padding:clamp(4rem,10vw,8rem) 0}
.nf .code{font-size:clamp(4rem,3rem + 8vw,9rem); font-weight:800; letter-spacing:-.05em; color:var(--gold); opacity:.28; line-height:1}
.nf h1{font-size:clamp(1.5rem,1.1rem + 2vw,2.5rem); margin:1.25rem 0 1rem}
.nf p{max-width:32rem; margin:0 auto 2.25rem; font-size:1.0125rem}

@media (max-width:820px){
  .split, .split-wide{grid-template-columns:1fr; gap:2rem}
  .detail-head{flex-direction:column; gap:1rem}
  .detail .price-tag{text-align:left}
  /* Tabellen mobil als Karten stapeln */
  .mods, .mods tbody, .mods tr, .mods td{display:block; width:100%}
  .mods{table-layout:auto; font-size:.925rem; border-top:1px solid var(--border)}
  .mods thead{display:none}
  .mods tr{border-bottom:1px solid var(--border); padding:1rem 0}
  .mods tr:last-child{border-bottom:0}
  .mods td{border:0; padding:0}
  .mods td{white-space:normal; padding-right:.75rem}
  .mods td:first-child{color:var(--text); font-weight:700; font-size:1rem; margin-bottom:.4rem}
  .mods td:nth-child(2){margin-bottom:.5rem}
  .mods td:last-child{color:var(--gold); font-weight:600; font-size:.9rem}
  .cta-band .btns .btn{width:100%}
  .legal h2{margin-top:2rem}
}

/* Einfache Punktliste */
.plainlist{list-style:none; display:flex; flex-direction:column; gap:.6rem; margin-top:1.5rem}
.plainlist li{font-size:.95rem; color:var(--muted); padding-left:1.35rem; position:relative}
.plainlist li::before{content:""; position:absolute; left:0; top:.58em; width:6px; height:6px; border-radius:50%; background:var(--gold); opacity:.7}