/* ============================================================
   Lokalheld digital – Landingpage-Stylesheet
   Design-System 1:1 aus index.html + Landingpage-Komponenten.
   Genutzt von /webdesign und allen /webdesign-[stadt]-Seiten.
   ============================================================ */

/* ---------- RESET & TOKENS ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
:root{
  --bg:#0a0d18; --bg-2:#0c1020; --surface:#121829; --surface-2:#1a2238;
  --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.16);
  --text:#eaeef8; --muted:#9aa4be; --muted-2:#6c7593;
  --brand:#6366f1; --brand-2:#22d3ee;
  --grad:linear-gradient(135deg,#6366f1 0%,#22d3ee 100%);
  --grad-soft:linear-gradient(135deg,rgba(99,102,241,.18),rgba(34,211,238,.18));
  --radius:16px; --radius-sm:11px;
  --shadow:0 10px 40px rgba(0,0,0,.35); --shadow-lg:0 30px 80px rgba(0,0,0,.5);
  --glow:0 8px 30px rgba(99,102,241,.45);
  --transition:.35s cubic-bezier(.4,0,.2,1); --maxw:1180px;
}
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{ font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); line-height:1.7; overflow-x:hidden; width:100%; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:'Sora',sans-serif; line-height:1.15; letter-spacing:-.02em; }
::selection{ background:rgba(99,102,241,.4); color:#fff; }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

/* ---------- ANIMATIONS ---------- */
@keyframes floatOrb{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(20px,-30px) scale(1.08);} }
@keyframes floatOrb2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-30px,20px) scale(1.12);} }
@keyframes pulseRing{ 0%{ transform:scale(.9); opacity:.85;} 70%{ transform:scale(1.6); opacity:0;} 100%{ opacity:0;} }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:none;} }

/* ---------- TOPBAR / HEADER / WA ---------- */
.topbar{ position:fixed; top:0; left:0; right:0; z-index:1001; display:flex; align-items:center; justify-content:flex-end; gap:26px; padding:7px clamp(18px,5%,48px); background:#07090f; border-bottom:1px solid rgba(255,255,255,.06); font-size:.82rem; transition:transform .35s ease; }
.topbar.hidden{ transform:translateY(-110%); }
.topbar a{ display:inline-flex; align-items:center; gap:7px; color:rgba(255,255,255,.72); font-weight:500; transition:color .2s; white-space:nowrap; }
.topbar a:hover{ color:#fff; }
.topbar svg{ width:14px; height:14px; flex-shrink:0; }
.topbar .tb-wa{ color:#3ad06a; font-weight:600; }
.topbar .tb-wa:hover{ color:#5ee88a; }

.wa-float{ position:fixed; right:22px; bottom:22px; z-index:1400; width:56px; height:56px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 28px rgba(37,211,102,.45); transition:transform var(--transition), box-shadow var(--transition); }
.wa-float:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 12px 36px rgba(37,211,102,.6); }
.wa-float svg{ width:30px; height:30px; fill:#fff; }
@media (max-width:767px){ .wa-float{ right:14px; bottom:88px; width:52px; height:52px; } .wa-float svg{ width:27px; height:27px; } }

header{ position:fixed; top:34px; left:0; right:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; padding:16px clamp(18px,5%,48px); background:rgba(10,13,24,.72); backdrop-filter:blur(16px); border-bottom:1px solid transparent; transition:var(--transition); }
header.scrolled{ top:0; padding:11px clamp(18px,5%,48px); background:rgba(10,13,24,.94); border-bottom-color:var(--border); }
.brand{ display:flex; align-items:center; gap:11px; font-family:'Sora'; font-weight:700; font-size:1.28rem; letter-spacing:-.02em; color:#fff; }
.brand-suffix{ color:var(--brand-2); font-weight:500; font-size:.72em; margin-left:3px; letter-spacing:0; }
.brand-mark{ width:34px; height:34px; flex-shrink:0; }
nav.desktop{ display:flex; align-items:center; gap:30px; }
nav.desktop a{ color:rgba(255,255,255,.74); font-size:.93rem; font-weight:500; transition:color .2s; }
nav.desktop a:hover{ color:#fff; }
.nav-cta{ background:var(--grad); color:#06121f !important; font-weight:700 !important; padding:11px 22px; border-radius:10px; font-size:.92rem; box-shadow:var(--glow); transition:transform var(--transition),box-shadow var(--transition); }
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(99,102,241,.55); }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.burger span{ width:26px; height:2px; background:#fff; border-radius:2px; transition:var(--transition); }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu{ position:fixed; inset:0; z-index:999; background:rgba(8,11,20,.98); backdrop-filter:blur(8px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; opacity:0; pointer-events:none; transition:opacity var(--transition); }
.mobile-menu.open{ opacity:1; pointer-events:auto; }
.mobile-menu a{ font-family:'Sora'; font-size:1.5rem; font-weight:600; color:#fff; }
.mobile-menu a.nav-cta{ margin-top:12px; font-size:1.05rem; padding:15px 32px; color:#06121f; }
.mobile-menu a.mm-contact{ font-family:'Inter',sans-serif; font-size:1rem; font-weight:500; color:rgba(255,255,255,.7); }

/* ---------- LP HERO ---------- */
.lp-hero{ position:relative; overflow:hidden; background:var(--bg); padding:150px clamp(18px,5%,40px) 84px; }
.lp-hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.orb{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; }
.orb-1{ width:520px; height:520px; background:#6366f1; top:-140px; left:-90px; animation:floatOrb 16s ease-in-out infinite; }
.orb-2{ width:460px; height:460px; background:#22d3ee; bottom:-160px; right:-70px; animation:floatOrb2 20s ease-in-out infinite; }
.orb-3{ width:320px; height:320px; background:#8b5cf6; top:20%; right:16%; opacity:.28; animation:floatOrb 22s ease-in-out infinite; }
.lp-hero-grid{ position:absolute; inset:0; z-index:1; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:54px 54px; mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 40%,transparent 100%); -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 40%,transparent 100%); }
.lp-hero-vignette{ position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse 100% 100% at 50% 0%,transparent 45%,var(--bg) 100%); }
.lp-hero-inner{ position:relative; z-index:3; max-width:840px; margin:0 auto; text-align:center; }
.lp-badge{ display:inline-flex; align-items:center; gap:9px; background:rgba(99,102,241,.14); border:1px solid rgba(99,102,241,.4); color:#c7c9ff; font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:7px 16px; border-radius:50px; margin-bottom:24px; animation:fadeUp .7s ease both; }
.badge-dot{ position:relative; width:7px; height:7px; }
.badge-dot::before,.badge-dot::after{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--brand-2); }
.badge-dot::after{ animation:pulseRing 2s ease-out infinite; }
.lp-hero h1{ font-size:clamp(2.1rem,5vw,3.6rem); font-weight:800; color:#fff; margin-bottom:20px; animation:fadeUp .7s ease both .1s; }
.lp-hero-sub{ font-size:clamp(1.02rem,1.5vw,1.2rem); color:rgba(255,255,255,.8); max-width:640px; margin:0 auto 34px; animation:fadeUp .7s ease both .2s; }
.lp-hero-btns{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:46px; animation:fadeUp .7s ease both .3s; }
.lp-hero-stats{ display:flex; justify-content:center; gap:0; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:30px; animation:fadeUp .7s ease both .4s; }
.lp-hero-stat{ padding:0 clamp(16px,4vw,38px); border-right:1px solid var(--border); }
.lp-hero-stat:last-child{ border-right:none; }
.lp-hero-stat b{ display:block; font-family:'Sora'; font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:800; color:#fff; line-height:1; }
.lp-hero-stat span{ font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }

/* ---------- BREADCRUMB ---------- */
.breadcrumb{ background:var(--bg-2); border-bottom:1px solid var(--border); padding:12px clamp(18px,5%,40px); font-size:.82rem; }
.breadcrumb .inner{ max-width:var(--maxw); margin:0 auto; color:var(--muted-2); }
.breadcrumb a{ color:var(--muted); transition:color .2s; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb span{ margin:0 8px; color:var(--muted-2); }

/* ---------- BUTTONS ---------- */
.btn-primary{ position:relative; overflow:hidden; background:var(--grad); color:#06121f; font-weight:700; font-size:1.04rem; padding:17px 34px; border-radius:12px; border:none; cursor:pointer; box-shadow:var(--glow); transition:transform var(--transition),box-shadow var(--transition); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(34,211,238,.45); }
.btn-ghost{ display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.06); color:#fff; font-weight:600; font-size:1.04rem; padding:17px 30px; border-radius:12px; border:1px solid var(--border-strong); transition:var(--transition); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); }
.link-arrow{ display:inline-flex; align-items:center; gap:8px; color:var(--brand-2); font-weight:700; transition:gap var(--transition); }
.link-arrow:hover{ gap:13px; }

/* ---------- SECTION BASE ---------- */
section{ padding:clamp(58px,8vw,96px) clamp(18px,5%,40px); }
.inner{ max-width:var(--maxw); margin:0 auto; }
.sec-head{ max-width:680px; margin:0 auto 52px; text-align:center; }
.sec-label{ display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-2); margin-bottom:14px; }
.sec-title{ font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:800; color:#fff; margin-bottom:16px; }
.sec-desc{ font-size:1.05rem; color:var(--muted); }
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible{ opacity:1; transform:none; }

/* ---------- INTRO / LOCAL PROSE ---------- */
.prose{ background:var(--bg); }
.prose-inner{ max-width:820px; margin:0 auto; }
.prose-inner p{ color:var(--muted); font-size:1.05rem; margin-bottom:20px; }
.prose-inner p strong{ color:#fff; font-weight:600; }
.prose-inner h2{ font-size:clamp(1.6rem,3vw,2.2rem); color:#fff; margin:0 0 22px; }
.prose-inner h3{ font-size:1.25rem; color:#fff; margin:34px 0 12px; }

/* ---------- PROBLEM / SOLUTION ---------- */
.ps{ background:var(--bg-2); }
.ps-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.ps-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px 28px; }
.ps-card.problem{ border-color:rgba(255,120,120,.22); }
.ps-card.solution{ border-color:rgba(34,211,238,.28); }
.ps-card h3{ font-size:1.15rem; color:#fff; margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.ps-card ul{ list-style:none; display:flex; flex-direction:column; gap:13px; }
.ps-card li{ font-size:.95rem; color:rgba(255,255,255,.75); display:flex; gap:11px; align-items:flex-start; }
.ps-card.problem li::before{ content:'✕'; color:#ff7d7d; font-weight:800; flex-shrink:0; }
.ps-card.solution li::before{ content:'✓'; color:var(--brand-2); font-weight:800; flex-shrink:0; }

/* ---------- SERVICES ---------- */
.services{ background:var(--bg); }
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.svc{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px 28px; transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition); overflow:hidden; }
.svc::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform var(--transition); }
.svc:hover{ transform:translateY(-6px); border-color:var(--border-strong); box-shadow:var(--shadow); }
.svc:hover::before{ transform:scaleX(1); }
.svc-ico{ width:54px; height:54px; border-radius:14px; background:var(--grad-soft); border:1px solid rgba(99,102,241,.3); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:20px; }
.svc h3{ font-size:1.18rem; font-weight:700; color:#fff; margin-bottom:10px; }
.svc p{ font-size:.94rem; color:var(--muted); }
.svc ul{ list-style:none; margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.svc li{ font-size:.88rem; color:rgba(255,255,255,.66); display:flex; gap:9px; align-items:flex-start; }
.svc li::before{ content:'✓'; color:var(--brand-2); font-weight:800; }

/* ---------- PROCESS ---------- */
.process{ background:var(--bg-2); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.step{ position:relative; padding:30px 24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.step-num{ font-family:'Sora'; font-size:2.4rem; font-weight:800; line-height:1; margin-bottom:14px; }
.step h4{ font-size:1.08rem; color:#fff; margin-bottom:8px; }
.step p{ font-size:.9rem; color:var(--muted); }

/* ---------- REFERENCE GRID ---------- */
.refs{ background:var(--bg); }
.ref-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ref-grid.two{ grid-template-columns:repeat(2,1fr); max-width:760px; margin:0 auto; }
.ref-card{ display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.ref-card:hover{ transform:translateY(-6px); border-color:var(--border-strong); box-shadow:var(--shadow-lg); }
.ref-shot{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#0b0f1a; }
.ref-shot img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform .6s var(--transition); }
.ref-card:hover .ref-shot img{ transform:scale(1.05); }
.ref-body{ padding:18px 20px 20px; }
.ref-branche{ display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-2); margin-bottom:8px; }
.ref-body h4{ font-size:1.02rem; color:#fff; margin-bottom:5px; }
.ref-body p{ font-size:.85rem; color:var(--muted); }
.ref-highlight{ display:inline-block; margin-top:10px; font-size:.82rem; color:var(--brand-2); font-weight:600; }

/* ---------- PRICE TEASER ---------- */
.price-teaser{ background:var(--bg-2); }
.pt-card{ max-width:900px; margin:0 auto; background:linear-gradient(160deg,var(--surface),var(--bg-2)); border:1px solid var(--border); border-radius:24px; padding:48px 40px; text-align:center; }
.pt-card h2{ font-size:clamp(1.6rem,3vw,2.3rem); color:#fff; margin-bottom:14px; }
.pt-price{ font-family:'Sora'; font-size:3rem; font-weight:800; margin:10px 0 6px; }
.pt-note{ color:var(--muted); font-size:.95rem; margin-bottom:26px; }
.pt-plans{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:30px; }
.pt-plan{ flex:1; min-width:180px; max-width:240px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--radius); padding:20px 18px; text-align:left; }
.pt-plan b{ display:block; color:#fff; font-family:'Sora'; margin-bottom:4px; }
.pt-plan span{ font-size:.86rem; color:var(--muted); }

/* ---------- LOCAL BOX / NEARBY ---------- */
.local-box{ margin-top:30px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--brand-2); border-radius:var(--radius-sm); padding:24px 26px; }
.local-box h3{ font-size:1.1rem; color:#fff; margin-bottom:10px; }
.local-box p{ color:var(--muted); font-size:.98rem; margin:0; }
.nearby{ background:var(--bg-2); }
.nearby-grid{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:900px; margin:0 auto; }
.nearby-grid a{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; background:var(--surface); border:1px solid var(--border); border-radius:50px; font-size:.92rem; color:rgba(255,255,255,.82); font-weight:500; transition:var(--transition); }
.nearby-grid a:hover{ border-color:var(--brand); color:#fff; transform:translateY(-2px); }
.nearby-grid a::before{ content:'📍'; font-size:.85rem; }

/* ---------- FAQ ---------- */
.faq{ background:var(--bg); }
.faq-list{ max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
details.qa{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; transition:border-color var(--transition); }
details.qa[open]{ border-color:var(--border-strong); }
details.qa summary{ list-style:none; cursor:pointer; padding:20px 24px; font-family:'Sora'; font-weight:600; font-size:1.04rem; color:#fff; display:flex; justify-content:space-between; align-items:center; gap:16px; }
details.qa summary::-webkit-details-marker{ display:none; }
details.qa summary .plus{ flex-shrink:0; width:24px; height:24px; position:relative; transition:transform var(--transition); }
details.qa summary .plus::before,details.qa summary .plus::after{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--brand-2); }
details.qa summary .plus::before{ width:14px; height:2px; }
details.qa summary .plus::after{ width:2px; height:14px; transition:transform var(--transition); }
details.qa[open] summary .plus::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
details.qa .qa-body{ padding:0 24px 22px; color:var(--muted); font-size:.96rem; }

/* ---------- FINAL CTA / CONTACT ---------- */
.final-cta{ position:relative; overflow:hidden; background:var(--bg-2); text-align:center; }
.final-cta .orb{ opacity:.4; }
.final-cta .fc-inner{ position:relative; z-index:2; max-width:680px; margin:0 auto; }
.final-cta h2{ font-size:clamp(2rem,4vw,3rem); color:#fff; margin-bottom:18px; }
.final-cta p{ color:rgba(255,255,255,.78); font-size:1.1rem; margin-bottom:20px; }
.cta-methods{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:26px; }

/* ---------- FOOTER ---------- */
footer{ background:var(--bg); border-top:1px solid var(--border); padding:60px clamp(18px,5%,40px) 30px; }
.footer-inner{ max-width:var(--maxw); margin:0 auto; }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--border); }
.footer-brand .brand{ margin-bottom:16px; }
.footer-brand p{ color:var(--muted); font-size:.93rem; max-width:320px; }
.footer-col h5{ font-family:'Sora'; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:16px; }
.footer-col a{ display:block; color:var(--muted); font-size:.93rem; margin-bottom:11px; transition:color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-region{ padding:26px 0; border-bottom:1px solid var(--border); }
.footer-region h5{ font-family:'Sora'; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:14px; }
.footer-region .region-links{ display:flex; flex-wrap:wrap; gap:9px 18px; }
.footer-region .region-links a{ color:var(--muted); font-size:.9rem; transition:color .2s; }
.footer-region .region-links a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top:26px; }
.footer-bottom small{ color:var(--muted-2); font-size:.85rem; }
.footer-bottom .fb-links{ display:flex; gap:20px; }
.footer-bottom .fb-links a{ color:var(--muted); font-size:.85rem; }
.footer-bottom .fb-links a:hover{ color:#fff; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .services-grid,.steps{ grid-template-columns:1fr 1fr; }
  .ref-grid{ grid-template-columns:1fr 1fr; }
  .ps-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:640px){
  nav.desktop{ display:none; }
  .topbar{ justify-content:center; gap:18px; font-size:.78rem; }
  .topbar .tb-mail{ display:none; }
  .burger{ display:flex; }
  .services-grid,.steps,.ref-grid,.ref-grid.two{ grid-template-columns:1fr; }
  section{ padding:56px 18px; }
  .lp-hero{ padding:130px 18px 64px; }
  .lp-hero-stat{ padding:0 16px; }
}