/* ============================================================
   KEMMLER — Standortseiten (Bonn, Köln, Paderborn)
   Baut auf site.css und blog.css auf.
   ============================================================ */

.st-hero{padding-bottom:64px}
.st-hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;align-items:end}
.st-h1{max-width:16ch}
.st-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.st-pills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.st-pills li{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;border-radius:var(--r-full);background:var(--gray-50);border:1px solid var(--gray-200);font-size:13px;font-weight:600;color:var(--text-2)}
.st-pills li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--red)}

.st-office{background:var(--dark);color:#fff;border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:6px}
.st-office .section-label{color:rgba(227,6,19,.9);margin-bottom:6px}
.st-office strong{font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.3}
.st-office address{font-style:normal;font-size:15px;line-height:1.6;color:var(--text-inv2);margin-bottom:8px}
.st-office a{font-size:15px;color:#fff;min-height:32px;display:flex;align-items:center}
.st-office a:hover{color:rgba(255,255,255,.75)}
.st-hours{font-size:13px;color:var(--text-inv3);margin-top:4px}

.st-proof{background:var(--dark);color:#fff}
.st-stats{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:36px 0}
.st-stats strong{display:block;font-size:clamp(26px,2.8vw,36px);font-weight:900;letter-spacing:-.03em;line-height:1.1}
.st-stats span{font-size:14px;color:var(--text-inv2)}

.st-section{padding:88px 0}
.st-soft{background:var(--gray-50);border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200)}
.st-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:64px;align-items:start}
.st-h2{font-size:clamp(26px,3vw,40px);font-weight:900;letter-spacing:-.035em;line-height:1.12;color:var(--text);max-width:22ch;overflow-wrap:break-word;hyphens:auto}
.st-text{font-size:17px;line-height:1.7;color:var(--text-2);margin-top:16px;max-width:60ch}

.st-cards{list-style:none;display:flex;flex-direction:column;gap:14px}
.st-cards li{border:1px solid var(--gray-200);border-radius:var(--r-md);padding:22px 24px;background:#fff}
.st-cards h3,.st-why h3,.st-steps h3{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--text);margin-bottom:6px}
.st-cards p,.st-why p,.st-steps p{font-size:15px;line-height:1.6;color:var(--text-2)}

.st-area{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.st-area li{min-height:38px;display:inline-flex;align-items:center;padding:0 14px;border-radius:var(--r-full);background:#fff;border:1px solid var(--gray-200);font-size:14px;font-weight:600;color:var(--text)}

.st-why{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:36px}
.st-why li{border-top:3px solid var(--red);padding-top:18px}

.st-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:36px;counter-reset:st}
.st-steps li{background:#fff;border:1px solid var(--gray-200);border-radius:var(--r-md);padding:24px;counter-increment:st}
.st-steps li::before{content:counter(st);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--dark);color:#fff;font-weight:800;font-size:15px;margin-bottom:14px}

.st-faq{max-width:none}
.st-neighbors{padding-top:28px;font-size:14px;color:var(--text-2);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.st-neighbors a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:3px;min-height:32px;display:inline-flex;align-items:center}

@media (max-width:1100px){
  .st-hero-grid,.st-two{grid-template-columns:1fr;gap:36px}
  .st-why,.st-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .st-section{padding:64px 0}
  .st-why,.st-steps{grid-template-columns:1fr}
  .st-ctas .btn{width:100%;justify-content:center}
}