/* =========================================================================
   AKQUISEHAUS TEAM – akquisehaus-team.de
   Schlanke Landingpage, Farbschema wie akquisehaus.de (Nacht / Signal-Orange)
   ========================================================================= */

:root{
  --night:    #111A23;
  --night-2:  #0B1219;
  --ink:      #101820;
  --muted:    #5F6B78;
  --line:     #E7E2DA;
  --sand:     #FBF7F2;
  --white:    #FFFFFF;
  --orange:   #FF6A2B;
  --orange-dk:#E4551A;
  --green:    #17B26A;

  --shell:    1120px;
  --r:        18px;
  --ease:     cubic-bezier(.22,1,.36,1);

  --font-h:   'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-b:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:88px; overflow-x:clip; }

body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--font-b);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{ font-family:var(--font-h); font-weight:700; letter-spacing:-.02em; line-height:1.14; margin:0; }
h1{ font-size:clamp(34px,5.2vw,60px); }
h2{ font-size:clamp(26px,3.4vw,42px); }
h3{ font-size:clamp(18px,1.6vw,21px); }
p{ margin:0 0 1em; }

.shell{ width:100%; max-width:var(--shell); margin:0 auto; padding:0 22px; }
.sec{ padding:clamp(56px,7vw,96px) 0; }
.sec--dark{ background:var(--night); color:var(--white); }
.sec--dark h2{ color:var(--white); }
.lead{ font-size:clamp(17px,1.5vw,19px); color:var(--muted); max-width:62ch; }
.sec--dark .lead{ color:#B9C4CF; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-h); font-size:12.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange); margin-bottom:14px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--orange); border-radius:2px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-h); font-weight:600; font-size:15px;
  padding:14px 26px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease), background .25s, box-shadow .25s, color .25s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--orange); color:#fff; box-shadow:0 10px 26px rgba(255,106,43,.32); }
.btn--primary:hover{ background:var(--orange-dk); }
.btn--ghost{ border-color:rgba(16,24,32,.18); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); }
.sec--dark .btn--ghost{ border-color:rgba(255,255,255,.3); color:#fff; }
.sec--dark .btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.07); }

/* ---------- Header ---------- */
.head{
  position:sticky; top:0; z-index:50;
  background:rgba(251,247,242,.88);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.head__in{ display:flex; align-items:center; justify-content:space-between; gap:18px; height:74px; }
.logo{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-h); font-weight:700; font-size:19px; letter-spacing:-.02em; }
.logo__mark{ width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--night); color:var(--orange); }
.logo__mark svg{ width:21px; height:21px; }
.logo em{ font-style:normal; color:var(--orange); }
.nav{ display:flex; align-items:center; gap:26px; }
.nav a{ font-size:14.5px; font-weight:500; color:var(--muted); transition:color .2s; }
.nav a:hover{ color:var(--ink); }
@media (max-width:900px){ .nav{ display:none; } }

/* ---------- Hero ---------- */
.hero{ padding:clamp(52px,7vw,96px) 0 clamp(48px,6vw,80px); }
.hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,64px); align-items:center; }
@media (max-width:900px){ .hero__grid{ grid-template-columns:1fr; } }
.hero p.lead{ margin-top:20px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero__stats{ display:flex; flex-wrap:wrap; gap:36px; margin-top:40px; padding-top:28px; border-top:1px solid var(--line); }
.stat b{ display:block; font-family:var(--font-h); font-size:30px; line-height:1.1; }
.stat span{ font-size:13.5px; color:var(--muted); }

.card-panel{
  background:var(--night); color:#fff; border-radius:26px;
  padding:30px 28px; box-shadow:0 30px 70px rgba(17,26,35,.22);
}
.card-panel h3{ color:#fff; font-size:19px; margin-bottom:16px; }
.pricebox{ display:flex; align-items:baseline; gap:10px; margin:4px 0 18px; }
.pricebox b{ font-family:var(--font-h); font-size:46px; letter-spacing:-.03em; }
.pricebox span{ color:#96A3B0; font-size:14px; }
.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.ticks li{ display:flex; gap:11px; font-size:14.8px; color:#D5DDE4; line-height:1.5; }
.ticks li::before{
  content:"✓"; flex:none; width:20px; height:20px; border-radius:50%;
  background:rgba(23,178,106,.16); color:var(--green);
  display:grid; place-items:center; font-size:12px; font-weight:700; margin-top:2px;
}
.card-panel .btn{ width:100%; margin-top:22px; }

/* ---------- Karten-Raster ---------- */
.grid{ display:grid; gap:20px; margin-top:44px; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid--3,.grid--4{ grid-template-columns:1fr; } }

.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 24px; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(17,26,35,.09); }
.card h3{ margin-bottom:9px; }
.card p{ margin:0; font-size:15px; color:var(--muted); }
.card__no{
  display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  background:rgba(255,106,43,.12); color:var(--orange);
  font-family:var(--font-h); font-weight:700; font-size:15px; margin-bottom:16px;
}
.sec--dark .card{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.11); }
.sec--dark .card h3{ color:#fff; }
.sec--dark .card p{ color:#AEBAC5; }

/* ---------- Vergleich ---------- */
.compare{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; }
@media (max-width:860px){ .compare{ grid-template-columns:1fr; } }
.compare__col{ border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; background:var(--white); }
.compare__col--hl{ border-color:var(--orange); box-shadow:0 16px 44px rgba(255,106,43,.15); position:relative; }
.compare__col--hl::after{
  content:"Empfehlung"; position:absolute; top:-12px; left:24px;
  background:var(--orange); color:#fff; font-family:var(--font-h); font-weight:600;
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 12px; border-radius:999px;
}
.compare__col h3{ font-size:17px; color:var(--muted); font-weight:600; }
.compare__col--hl h3{ color:var(--ink); }
.compare__price{ font-family:var(--font-h); font-size:34px; font-weight:700; letter-spacing:-.03em; margin:10px 0 4px; }
.compare__note{ font-size:13.5px; color:var(--muted); margin:0 0 18px; }
.compare ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14.5px; color:var(--muted); }
.compare ul li{ display:flex; gap:9px; }
.compare ul li::before{ content:"–"; color:var(--orange); }

/* ---------- FAQ ---------- */
.faq{ margin-top:40px; display:grid; gap:12px; max-width:840px; }
.faq details{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:18px 22px; }
.faq summary{
  cursor:pointer; list-style:none; font-family:var(--font-h); font-weight:600; font-size:16.5px;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--orange); font-size:22px; font-weight:400; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:12px 0 0; font-size:15px; color:var(--muted); }

/* ---------- Kontakt ---------- */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start; }
@media (max-width:860px){ .contact{ grid-template-columns:1fr; } }
.form{ display:grid; gap:14px; }
.field{ display:grid; gap:6px; }
.field label{ font-size:13.5px; font-weight:600; color:#C8D2DB; font-family:var(--font-h); }
.field input,.field textarea,.field select{
  font-family:var(--font-b); font-size:15px; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:12px; padding:13px 15px; outline:none; transition:border-color .2s, background .2s;
}
.field input::placeholder,.field textarea::placeholder{ color:#7C8895; }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--orange); background:rgba(255,255,255,.09); }
.field select option{ color:#101820; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .form__row{ grid-template-columns:1fr; } }
.form__hint{ font-size:12.5px; color:#8A96A3; margin:0; }
.form__hint a{ text-decoration:underline; }

.contact__direct{ display:grid; gap:14px; margin-top:26px; }
.contact__direct a{
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  border-radius:14px; padding:16px 18px; transition:border-color .2s, transform .2s var(--ease);
}
.contact__direct a:hover{ border-color:var(--orange); transform:translateX(3px); }
.contact__direct b{ display:block; font-family:var(--font-h); font-size:15.5px; color:#fff; }
.contact__direct span{ font-size:13.5px; color:#96A3B0; }
.contact__ico{
  flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,106,43,.15); color:var(--orange); font-size:18px;
}

/* ---------- Footer ---------- */
.foot{ background:var(--night-2); color:#8C98A5; padding:40px 0; }
.foot__in{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; }
.foot nav{ display:flex; flex-wrap:wrap; gap:22px; }
.foot nav a{ font-size:14px; transition:color .2s; }
.foot nav a:hover{ color:var(--orange); }
.foot__legal{ font-size:13px; margin:0; }

/* ---------- Rechtstexte ---------- */
.legal{ max-width:760px; }
.legal h1{ font-size:clamp(30px,4vw,44px); margin-bottom:22px; }
.legal h2{ font-size:22px; margin:36px 0 10px; }
.legal p,.legal li{ color:var(--muted); font-size:15.5px; }
.legal address{ font-style:normal; color:var(--ink); line-height:1.8; }