/* ============================================================
   BURGWACHT Schlüsseldienst – Stylesheet v2
   Nachtblau + Messing · 0 externe Requests (Systemfonts) · 0 JS
   ============================================================ */
:root{
  --nacht:#101d2e; --nacht-tief:#0a1420; --nacht-hell:#1b3049;
  --messing:#c08a2d; --messing-hell:#e6bb62; --messing-dunkel:#8f6316;
  --papier:#f7f5f0; --karte:#ffffff; --tint:#efe9dc;
  --tinte:#17222f; --tinte-soft:#4a5867; --linie:#ddd7ca;
  --gruen:#1f7a4d; --radius:12px;
  --shadow:0 2px 14px rgba(16,29,46,.10);
  --shadow-hover:0 10px 26px rgba(16,29,46,.16);
  --disp:"Avenir Next Condensed","Arial Narrow","Helvetica Neue Condensed","Roboto Condensed",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--tinte);background:var(--papier);line-height:1.6;font-size:1.0625rem}
h1,h2,h3{font-family:var(--disp);line-height:1.1;letter-spacing:.3px;color:var(--tinte);font-weight:700}
h1{font-size:clamp(2rem,5.5vw,3.2rem)}
h2{font-size:clamp(1.5rem,3.6vw,2.15rem);margin-bottom:.6em;position:relative;padding-bottom:.35em}
h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--messing),var(--messing-hell))}
.sec-dark h2::after{background:linear-gradient(90deg,var(--messing-hell),transparent)}
h3{font-size:1.3rem;margin-bottom:.35em}
p{margin-bottom:1em}
a{color:var(--nacht)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
section{padding:60px 0}
ul.clean{list-style:none}
ol,section ul:not(.clean):not(.chips):not(.linklist){padding-left:20px;margin-bottom:1em}

/* ---------- Header ---------- */
.topbar{background:var(--nacht-tief);color:#cfd8e3;font-size:.85rem;padding:6px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.topbar strong{color:var(--messing-hell)}
header.site{background:var(--nacht);position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(0,0,0,.3)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.logo{color:#fff;text-decoration:none;font-family:var(--disp);font-weight:700;font-size:1.4rem;letter-spacing:1px;display:flex;align-items:center;gap:10px;text-transform:uppercase}
.logo .key{width:28px;height:28px;fill:var(--messing-hell);filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
nav.main{display:flex;gap:2px;flex-wrap:wrap}
nav.main a{color:#dbe4ee;text-decoration:none;padding:8px 10px;border-radius:6px;font-size:.93rem}
nav.main a:hover,nav.main a[aria-current="page"]{background:rgba(230,187,98,.15);color:var(--messing-hell)}
.btn{display:inline-block;text-decoration:none;font-weight:700;border-radius:9px;padding:13px 22px;text-align:center;transition:transform .12s ease,box-shadow .12s ease;border:none;font-size:1rem;cursor:pointer}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--messing-hell);outline-offset:2px}
.btn-call{background:linear-gradient(180deg,var(--messing-hell),var(--messing));color:#161006!important;box-shadow:0 3px 0 var(--messing-dunkel),0 6px 14px rgba(192,138,45,.35)}
.btn-call:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--messing-dunkel),0 10px 20px rgba(192,138,45,.4)}
.btn-ghost{border:2px solid var(--linie);color:var(--tinte);background:#fff}
.btn-ghost.hell{border-color:rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.08)}
.btn-ghost.hell:hover{background:rgba(255,255,255,.16)}

/* ---------- Hero mit Schlüsselbart-Muster ---------- */
.hero{
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><g fill="none" stroke="%23ffffff" stroke-opacity="0.05" stroke-width="2"><circle cx="30" cy="30" r="12"/><path d="M40 40l26 26v10h8v-8h8l6-6"/><circle cx="90" cy="95" r="8"/></g></svg>') repeat,
    radial-gradient(ellipse at 85% -10%,rgba(230,187,98,.16),transparent 55%),
    linear-gradient(160deg,var(--nacht) 0%,#152740 65%,var(--nacht-hell) 100%);
  color:#eef2f7;padding:66px 0 74px;border-bottom:4px solid var(--messing);
}
.hero h1{color:#fff;max-width:22ch;text-wrap:balance}
.hero .sub{font-size:1.15rem;color:#c8d3e0;max-width:58ch;margin:16px 0 26px}
.hero .cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero .tel-big{font-family:var(--disp);font-size:2rem;font-weight:700;color:var(--messing-hell);text-decoration:none;white-space:nowrap;letter-spacing:1px}
.eyebrow{font-family:var(--disp);text-transform:uppercase;letter-spacing:2.5px;font-size:.85rem;color:var(--messing);font-weight:700;display:block;margin-bottom:8px}
.eyebrow.hell{color:var(--messing-hell)}
.trustline{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;font-size:.95rem;color:#b9c6d5}
.trustline span::before{content:"✓ ";color:var(--messing-hell);font-weight:700}

/* ---------- Festpreis-Plakette (Messing-Schlüsselanhänger) ---------- */
.plakette{
  display:inline-flex;flex-direction:column;justify-content:center;
  background:linear-gradient(145deg,var(--messing-hell) 0%,var(--messing) 55%,#9a6f1f 100%);
  color:#161006;border-radius:16px;padding:16px 24px 16px 48px;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 4px rgba(0,0,0,.15),0 8px 20px rgba(0,0,0,.35);
  font-family:var(--disp);min-width:220px;transform:rotate(-1.5deg);
}
.plakette::before{
  content:"";position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;border-radius:50%;
  background:var(--nacht);box-shadow:inset 0 2px 4px rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.55);
}
.plakette::after{ /* Lichtkante */
  content:"";position:absolute;inset:0;border-radius:16px;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 48%,transparent 56%);
  pointer-events:none;
}
.plakette .p-label{font-size:.78rem;text-transform:uppercase;letter-spacing:1.8px;font-weight:700;opacity:.85}
.plakette .p-preis{font-size:2.2rem;font-weight:700;line-height:1.05}
.plakette .p-sub{font-size:.85rem;font-weight:600;opacity:.85}

/* ---------- Karten, Icons & Grids ---------- */
.grid{display:grid;gap:20px}
@media(min-width:720px){.grid.c2{grid-template-columns:1fr 1fr}.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease;position:relative;overflow:hidden}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--messing),transparent 70%);opacity:0;transition:opacity .15s}
.card:hover::before{opacity:1}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--messing-dunkel)}
.mehr{font-weight:700;text-decoration:none;color:var(--messing-dunkel);font-size:.95rem}
.mehr:hover{color:var(--messing)}
.svc-ico{display:inline-flex;width:52px;height:52px;border-radius:13px;margin-bottom:14px;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--nacht),var(--nacht-hell));color:var(--messing-hell);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 10px rgba(16,29,46,.25)}
.svc-ico svg{width:28px;height:28px}

/* ---------- Chips & Ortslisten ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px;list-style:none}
.chips li{background:#fff;border:1px solid var(--linie);border-radius:999px;padding:5px 14px;font-size:.9rem;box-shadow:0 1px 3px rgba(16,29,46,.06)}
.linklist{columns:2;gap:24px;list-style:none}
@media(min-width:720px){.linklist{columns:3}.linklist.az{columns:4}}
.linklist li{margin-bottom:8px;break-inside:avoid}
.linklist a{text-decoration:none}
.linklist a:hover{color:var(--messing-dunkel);text-decoration:underline}
.linklist.az li{font-size:.95rem;margin-bottom:6px}

/* ---------- Ablauf / Schritte ---------- */
.steps{counter-reset:s;display:grid;gap:18px}
@media(min-width:720px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps .step{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);position:relative}
.steps .step::before{
  counter-increment:s;content:counter(s);
  display:inline-flex;width:40px;height:40px;border-radius:50%;
  background:linear-gradient(150deg,var(--nacht),var(--nacht-hell));color:var(--messing-hell);
  font-family:var(--disp);font-weight:700;font-size:1.3rem;align-items:center;justify-content:center;margin-bottom:12px;
  box-shadow:0 3px 8px rgba(16,29,46,.3)}
.sec-dark .steps .step{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#c8d3e0;box-shadow:none}
.sec-dark .steps .step h3{color:#fff}
.sec-dark .steps .step::before{background:var(--messing);color:#161006}

/* ---------- Tabellen ---------- */
table.preise{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
table.preise th,table.preise td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--linie);font-variant-numeric:tabular-nums}
table.preise th{background:var(--nacht);color:#fff;font-family:var(--disp);letter-spacing:.8px;font-weight:600;text-transform:uppercase;font-size:.9rem}
table.preise tr:nth-child(even) td{background:#faf8f3}
table.preise tr:hover td{background:#f3edde}
table.preise tr:last-child td{border-bottom:none}
table.preise td.preis{font-weight:700;white-space:nowrap;color:var(--messing-dunkel)}
.tabelle-scroll{overflow-x:auto;border-radius:var(--radius)}

/* ---------- FAQ ---------- */
details.faq{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);margin-bottom:12px;box-shadow:var(--shadow)}
details.faq summary{cursor:pointer;font-weight:700;padding:16px 20px;font-family:var(--disp);font-size:1.15rem;list-style:none;position:relative;padding-right:48px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:18px;top:10px;font-size:1.6rem;color:var(--messing);transition:transform .15s}
details.faq[open] summary::after{content:"–"}
details.faq .a{padding:0 20px 18px;color:var(--tinte-soft)}
details.faq.dunkel{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);box-shadow:none}
details.faq.dunkel summary{color:#fff}
details.faq.dunkel .a{color:#c8d3e0}

/* ---------- Abschnitts-Varianten ---------- */
.sec-dark{background:
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><g fill="none" stroke="%23ffffff" stroke-opacity="0.04" stroke-width="2"><circle cx="30" cy="30" r="12"/><path d="M40 40l26 26v10h8v-8h8l6-6"/></g></svg>') repeat,
  linear-gradient(160deg,var(--nacht),var(--nacht-hell));color:#d9e2ec}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark a{color:var(--messing-hell)}
.sec-card{background:var(--tint)}
.sec-tint{background:linear-gradient(180deg,var(--papier),var(--tint))}
.warnbox{border-left:5px solid var(--messing);background:#fff;padding:20px 24px;border-radius:0 var(--radius) var(--radius) 0;box-shadow:var(--shadow);color:var(--tinte)}
.warnbox h3{margin-bottom:.3em}

/* ---------- Formular ---------- */
form.anfrage{display:grid;gap:14px;background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
@media(min-width:720px){form.anfrage{grid-template-columns:1fr 1fr}form.anfrage .full{grid-column:1/-1}}
form.anfrage label{font-weight:600;font-size:.92rem;display:block;margin-bottom:4px}
form.anfrage input,form.anfrage select,form.anfrage textarea{width:100%;padding:12px;border:1.5px solid var(--linie);border-radius:8px;font:inherit;background:var(--papier)}
form.anfrage input:focus,form.anfrage select:focus,form.anfrage textarea:focus{outline:3px solid var(--messing-hell);border-color:var(--messing)}

/* ---------- Footer ---------- */
footer.site{background:var(--nacht-tief);color:#aebbca;padding:48px 0 96px;font-size:.95rem;border-top:4px solid var(--messing)}
footer.site h3{color:#fff;font-size:1.05rem;margin-bottom:10px;font-family:var(--disp);letter-spacing:1px;text-transform:uppercase}
footer.site a{color:#c6d2df;text-decoration:none}
footer.site a:hover{color:var(--messing-hell)}
footer.site .cols{display:grid;gap:28px}
@media(min-width:720px){footer.site .cols{grid-template-columns:2fr 1.2fr 1fr 1fr}footer.site{padding-bottom:48px}}
footer.site ul{list-style:none}
footer.site li{margin-bottom:6px}
.legal{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:.85rem;display:flex;gap:18px;flex-wrap:wrap}

/* ---------- Sticky Call-Leiste (mobil) ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:linear-gradient(180deg,var(--messing-hell),var(--messing));padding:11px 14px;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 -4px 14px rgba(0,0,0,.3)}
.callbar a{color:#161006;text-decoration:none;font-family:var(--disp);font-weight:700;font-size:1.35rem;letter-spacing:.5px}
@media(min-width:900px){.callbar{display:none}}

/* ---------- Ads-Landingpage ---------- */
.badge-frei{display:inline-block;background:var(--gruen);color:#fff;border-radius:999px;padding:7px 18px;font-weight:700;font-size:.95rem;margin-bottom:16px;box-shadow:0 3px 8px rgba(0,0,0,.3)}

/* ---------- Mobile-Feinschliff ---------- */
@media(max-width:600px){
  section{padding:44px 0}
  .hero{padding:48px 0 56px}
  nav.main{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{white-space:nowrap;flex:0 0 auto}
  header.site .wrap{justify-content:space-between}
  header.site{position:static}              /* mobil nicht sticky – mehr Sichtfläche, Callbar übernimmt den CTA */
  .hero .tel-big{font-size:1.6rem}
  .plakette{min-width:180px;padding:13px 18px 13px 42px}
  .plakette .p-preis{font-size:1.8rem}
  body{font-size:1rem}
  .linklist,.linklist.az{columns:2}
}

/* ============================================================
   v4-Feinschliff: Bewegung & Tiefe (rein CSS, kein JS)
   ============================================================ */
@keyframes aufblenden{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero h1{animation:aufblenden .5s ease-out both}
.hero .sub{animation:aufblenden .5s ease-out .08s both}
.hero .cta-row{animation:aufblenden .5s ease-out .16s both}
.hero .trustline{animation:aufblenden .5s ease-out .24s both}
.grid .card:nth-child(1){animation:aufblenden .45s ease-out .05s both}
.grid .card:nth-child(2){animation:aufblenden .45s ease-out .12s both}
.grid .card:nth-child(3){animation:aufblenden .45s ease-out .19s both}
.grid .card:nth-child(n+4){animation:aufblenden .45s ease-out .26s both}
@media (prefers-reduced-motion:reduce){.hero h1,.hero .sub,.hero .cta-row,.hero .trustline,.grid .card{animation:none}}
:target{scroll-margin-top:90px}
.hero .tel-big{position:relative}
.hero .tel-big::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:2px;background:var(--messing-hell);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.hero .tel-big:hover::after{transform:scaleX(1)}
details.faq summary:hover{color:var(--messing-dunkel)}
.sec-dark .linklist a{color:#c8d3e0}
.sec-dark .linklist a:hover{color:var(--messing-hell)}

/* ---------- v4-Feinschliff ---------- */
@keyframes pulsieren{0%,100%{box-shadow:0 -4px 14px rgba(0,0,0,.3)}50%{box-shadow:0 -4px 22px rgba(192,138,45,.65)}}
.callbar{animation:pulsieren 2.4s ease-in-out infinite}
.chips li:hover{border-color:var(--messing);color:var(--messing-dunkel);transform:translateY(-1px);transition:all .12s}
section[id],h2[id]{scroll-margin-top:90px}
.hero .wrap{position:relative}
.linklist a{transition:color .1s}
::selection{background:var(--messing-hell);color:#161006}