/* ===== Service-Seiten (Schlüsseldienst & Städte) ===== */

.service-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px var(--pad-desktop);
}
@media (max-width: 900px){
  .service-wrap{ padding: 20px var(--pad-mobile); }
}

/* Hero */
.service-hero{
  background:#fff;
  padding: 8px 0 4px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 20px;
  align-items: center;
}
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
}
.hero-copy h1{ margin: 0 0 8px; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.2rem); }
.lead{ color:#3b444e; font-size:1.05rem; margin:0 0 12px; }
.hero-actions{ display:flex; gap:10px; flex-wrap: wrap; margin: 10px 0 12px; }
.pills{ display:flex; gap:8px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.pills li{
  border:1px solid var(--border); background:#f7f9fc; padding:6px 10px; border-radius:999px; font-weight:700;
  font-size:.95rem;
}
.hero-visual img{
  width:100%; height:auto; border-radius:16px; display:block;
  box-shadow:0 14px 40px rgba(0,0,0,.08);
}

/* Sektionen */
.service-section{ background:#fff; }
.service-section.alt{ background: #fafcff; }
.h2{ margin: 0 0 10px; font-size: 1.45rem; }

/* Cards / Medienliste */
.card{
  border:1px solid var(--border); background:#fff; border-radius:16px; padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.grid-4{ display:grid; gap:16px; grid-template-columns: repeat(4,1fr); }
@media (max-width: 1100px){ .grid-4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .grid-4{ grid-template-columns: 1fr; } }

.grid-3{ display:grid; gap:16px; grid-template-columns: repeat(3,1fr); }
@media (max-width: 900px){ .grid-3{ grid-template-columns: 1fr; } }

.media{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--border); background:#fff; border-radius:14px; padding:12px;
}
.media img{ width:92px; height:72px; object-fit:cover; border-radius:10px; flex:0 0 92px; }

/* Buttons – an HGS-Stil angelehnt */
.btn-primary, .btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:10px; text-decoration:none; font-weight:800; cursor:pointer;
}
.btn-primary{ background: var(--brand); color:#fff; border:none; }
.btn-primary:hover{ filter: brightness(.95); }
.btn-secondary{ background:#f7f9fc; color:#111; border:1px solid #dfe6ef; }
.btn-secondary:hover{ background:#fff; }

.cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.cta-row .btn-primary, .cta-row .btn-secondary{ min-width: 240px; }

/* Schritte */
.steps{ margin: 8px 0 0 22px; }
.steps li{ margin-bottom:6px; }
.hint{ color:#6a727c; }

/* Städte-Liste */
.city-list{ display:flex; gap:10px; flex-wrap:wrap; list-style:none; margin:8px 0 0; padding:0; }
.city-list li a{
  display:inline-block; padding:8px 12px; border-radius:999px;
  border:1px solid var(--border); background:#fff; font-weight:700;
}
.city-list li a:hover{ background:#f7fbff; border-color: rgba(0,183,255,.35); }

/* FAQ */
.faq details{
  border:1px solid var(--border); border-radius:12px; background:#fff; padding:10px 12px; margin-bottom:8px;
}
.faq summary{
  cursor:pointer; list-style:none; font-weight:800;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq .answ{ margin-top:8px; color:#2a3138; }















/* ===== City Service Shared (Schlüsseldienst Städte) ===== */

/* Root + typischer Seitenhintergrund */
.city-service{ background:#fff; }

/* Zentrische Breite + einheitliche Innenabstände (wie 1200px-Grid überall) */
.svc-inner{
  max-width:1200px;
  margin:0 auto;
  padding:24px var(--pad-desktop);
}
@media (max-width: 1000px){
  .svc-inner{ padding:20px var(--pad-mobile); }
}

/* ---------- HERO ---------- */
.svc-hero{
  /* Wenn du ein Bild/Farbverlauf nutzt, lass es full-bleed,
     aber der Inhalt darin ist durch .svc-inner begrenzt */
  background:#f7f9fc; /* oder dein Bild/Gradient */
  padding:0;          /* kein doppeltes Padding – .svc-inner regelt das */
}
.svc-hero .hero-wrap{
  display:grid;
  grid-template-columns: 1.1fr .9fr; /* Text/Bild-Aufteilung */
  gap:24px;
  align-items:center;
}
@media (max-width: 900px){
  .svc-hero .hero-wrap{
    grid-template-columns:1fr;
    gap:16px;
  }
}
.svc-hero h1{ 
  margin:0 0 8px;
  font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.6rem);
  letter-spacing:-.02em;
  font-weight:900;
}
.svc-hero p.lead{
  margin:0;
  color:#3b444e; 
  font-weight:600;
}
.svc-hero .hero-media{
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.1);
}
.svc-hero .hero-media img{
  display:block; width:100%; height:100%; object-fit:cover;
}

/* ---------- GENERISCHE SEKTIONEN ---------- */
.svc-section + .svc-section{ margin-top:12px; }
.svc-section .section-head{ margin:0 0 10px; }
.svc-section .section-head .eyebrow{
  display:inline-block; margin-bottom:6px;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800;
  color:#2b3138; opacity:.75;
}
.svc-section .section-head h2{
  margin:0; 
  font-size: clamp(1.4rem, 1.05rem + .9vw, 1.8rem);
  font-weight:900; letter-spacing:-.01em;
}

/* ---------- GRID / CARDS (für Vorteile, Orte, Leistungen etc.) ---------- */
.svc-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1000px){ .svc-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){  .svc-grid{ grid-template-columns: 1fr; } }

.svc-card{
  border:1px solid var(--border);
  background:#fff;
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.svc-card h3{
  margin:0 0 6px; font-size:1.05rem; font-weight:800; letter-spacing:-.01em;
}
.svc-card p{ margin:0; color:#48515a; }

/* Bildkarte */
.svc-card--media .media{
  border-radius:12px; overflow:hidden; margin: -2px -2px 10px -2px;
}
.svc-card--media .media img{ display:block; width:100%; height:220px; object-fit:cover; }

/* ---------- LISTEN (Einsatzorte / Stadtteile) ---------- */
.svc-list{
  display:flex; flex-wrap:wrap; gap:8px 12px;
  padding:0; margin:0; list-style:none;
}
.svc-list li{
  border:1px solid var(--border);
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
  font-weight:700;
}

/* ---------- INFO-/HINWEIS-BOX ---------- */
.svc-note{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.05);
  color:#3b444e;
}

/* ---------- CTA-BUTTONS (HGS Stil) ---------- */
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.btn-primary, .btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:10px;
  text-decoration:none; font-weight:800; cursor:pointer;
}
.btn-primary{ background:var(--brand); color:#fff; border:none; }
.btn-primary:hover{ filter:brightness(.95); }
.btn-secondary{ background:#f7f9fc; color:#111; border:1px solid #dfe6ef; }
.btn-secondary:hover{ background:#fff; }

/* ---------- FAQ ---------- */
.svc-faq{ display:flex; flex-direction:column; gap:10px; }
.svc-faq details{
  border:1px solid var(--border); border-radius:12px;
  background:#fff; padding:12px;
}
.svc-faq summary{
  cursor:pointer; font-weight:800;
  list-style:none; /* Safari */
}
.svc-faq summary::-webkit-details-marker{ display:none; }
.svc-faq p{ margin:.5rem 0 0; color:#48515a; }

/* ---------- RESPONSIVE BILDER ---------- */
img.responsive{ display:block; width:100%; height:auto; }

/* ---------- SPACING-UTILITIES ---------- */
.mt-0{ margin-top:0!important; }
.mt-8{ margin-top:8px!important; }
.mt-12{ margin-top:12px!important; }
.mt-16{ margin-top:16px!important; }
.mb-0{ margin-bottom:0!important; }