/* ============================================================================
   Leistungsseiten — /sanitaer-staefa/ und /heizung-staefa/
   Farben, Schriften und Kanten aus dem bestehenden Auftritt übernommen:
   Grund #1A1A1A, Fläche im Grün #3A4743, Akzent im Rot #E30613.
   Aufbau: Titelblock, Leistungen als Raster, Notfallband, Ablauf, Gebiet,
   Fragen. Keine eigenen Schriften — es gelten die der Seite.
   ========================================================================== */

.lst{
  --lst-bg:#1A1A1A;
  --lst-flaeche:#222624;
  --lst-linie:#333B38;
  --lst-gruen:#3A4743;
  --lst-rot:#E30613;
  --lst-ink:#EDEDED;
  --lst-text:rgba(237,237,237,.66);
  --lst-leise:rgba(237,237,237,.42);

  background:var(--lst-bg); color:var(--lst-ink);
  font-family:"Inter Tight", "Nunito Sans", system-ui, sans-serif;
  font-size:16px; line-height:1.62;
}
.lst *{ box-sizing:border-box; }
.lst-in{ width:100%; max-width:1080px; margin:0 auto; padding:0 clamp(20px,4vw,40px); }

.lst-kick{
  margin:0 0 10px; font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lst-rot);
}

/* ───────────────────────── Titelblock ───────────────────────── */
.lst-kopf{
  padding:clamp(38px,6vw,84px) 0 clamp(30px,4.5vw,56px);
  border-bottom:1px solid var(--lst-linie);
}
.lst-kopf h1{
  margin:0 0 16px; font-weight:700; line-height:1.08;
  font-size:clamp(30px,4.6vw,54px); letter-spacing:-.015em;
  text-wrap:balance;
}
.lst-kopf h1 .zeile{ display:block; color:var(--lst-leise); font-weight:400; }
.lst-lead{
  margin:0; max-width:62ch; font-size:clamp(16px,1.5vw,18.5px);
  color:var(--lst-text);
}
.lst-lead strong{ color:var(--lst-ink); font-weight:600; }

.lst-wege{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.lst-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 20px; border-radius:2px; text-decoration:none;
  font-size:14px; font-weight:600; letter-spacing:.01em;
  border:1px solid var(--lst-rot); background:var(--lst-rot); color:#FFF;
  transition:background .15s ease, color .15s ease;
}
.lst-btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; }
.lst-btn:hover{ background:transparent; color:var(--lst-rot); }
.lst-btn--leise{ background:transparent; border-color:var(--lst-linie); color:var(--lst-ink); }
.lst-btn--leise:hover{ background:var(--lst-flaeche); color:var(--lst-ink); border-color:var(--lst-gruen); }

/* ───────────────────────── Abschnitte ───────────────────────── */
.lst-abs{ padding:clamp(34px,5vw,64px) 0; border-bottom:1px solid var(--lst-linie); }
.lst-abs h2{
  margin:0 0 8px; font-size:clamp(21px,2.5vw,30px); font-weight:700;
  letter-spacing:-.01em; line-height:1.2; text-wrap:balance;
}
.lst-abs p{ margin:0 0 14px; max-width:66ch; color:var(--lst-text); }
.lst-abs p:last-child{ margin-bottom:0; }
.lst-abs strong{ color:var(--lst-ink); font-weight:600; }

/* ───────────────────────── Leistungsraster ───────────────────────── */
.lst-raster{
  display:grid; gap:12px; margin-top:26px;
  grid-template-columns:repeat(auto-fit, minmax(258px, 1fr));
}
.lst-karte{
  padding:24px 22px 22px; background:var(--lst-flaeche);
  border:1px solid var(--lst-linie); border-radius:2px;
}
.lst-karte-ic{
  display:inline-flex; width:34px; height:34px; margin-bottom:14px;
  align-items:center; justify-content:center;
  background:var(--lst-gruen); border-radius:2px;
}
.lst-karte-ic svg{ width:18px; height:18px; fill:none; stroke:#FFF; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.lst-karte h3{
  margin:0 0 8px; font-size:16.5px; font-weight:650; line-height:1.3;
}
.lst-karte p{ margin:0; font-size:14.6px; color:var(--lst-text); max-width:none; }

/* ───────────────────────── Notfallband ───────────────────────── */
.lst-notfall{
  background:var(--lst-rot); color:#FFF;
  padding:clamp(28px,4vw,46px) 0; border-bottom:1px solid var(--lst-linie);
}
.lst-notfall .lst-kick{ color:rgba(255,255,255,.72); }
.lst-notfall h2{ margin:0 0 10px; font-size:clamp(20px,2.4vw,28px); font-weight:700; }
.lst-notfall p{ margin:0; max-width:60ch; color:rgba(255,255,255,.9); }
.lst-notfall-nr{
  display:inline-flex; align-items:center; gap:10px; margin-top:20px;
  padding:13px 22px; background:#FFF; color:var(--lst-rot);
  text-decoration:none; font-weight:700; font-size:17px; border-radius:2px;
}
.lst-notfall-nr svg{ width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.lst-notfall-nr:hover{ background:rgba(255,255,255,.88); }

/* ───────────────────────── Ablauf ───────────────────────── */
.lst-schritte{ display:grid; gap:1px; margin-top:24px; background:var(--lst-linie); }
.lst-schritt{
  display:grid; grid-template-columns:52px 1fr; gap:16px; align-items:start;
  padding:20px 22px; background:var(--lst-bg);
}
.lst-schritt b{
  font-family:ui-monospace,Consolas,monospace; font-size:12px; font-weight:400;
  letter-spacing:.1em; color:var(--lst-rot); padding-top:3px;
}
.lst-schritt h3{ margin:0 0 5px; font-size:15.5px; font-weight:650; }
.lst-schritt p{ margin:0; font-size:14.6px; color:var(--lst-text); }

/* ───────────────────────── Einsatzgebiet ───────────────────────── */
.lst-orte{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; padding:0; list-style:none; }
.lst-orte li{
  padding:8px 14px; background:var(--lst-flaeche); border:1px solid var(--lst-linie);
  border-radius:2px; font-size:14px; color:var(--lst-text);
}
.lst-orte li:first-child{ border-color:var(--lst-gruen); color:var(--lst-ink); font-weight:600; }

/* ───────────────────────── Fragen ───────────────────────── */
.lst-fragen{ margin-top:24px; border-top:1px solid var(--lst-linie); }
.lst-frage{ border-bottom:1px solid var(--lst-linie); }
.lst-frage summary{
  display:flex; align-items:flex-start; gap:14px; cursor:pointer;
  padding:18px 0; list-style:none; font-size:16px; font-weight:600; line-height:1.4;
}
.lst-frage summary::-webkit-details-marker{ display:none; }
.lst-frage summary::before{
  content:"+"; flex:none; width:24px; height:24px; margin-top:-1px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--lst-linie); border-radius:2px;
  font-size:15px; font-weight:400; color:var(--lst-rot); line-height:1;
}
.lst-frage[open] summary::before{
  content:"−"; background:var(--lst-rot); border-color:var(--lst-rot); color:#FFF;
}
.lst-frage summary:hover::before{ border-color:var(--lst-gruen); }
.lst-frage-in{ padding:0 0 20px 38px; }
.lst-frage-in p{ margin:0; font-size:15px; color:var(--lst-text); max-width:64ch; }

/* ───────────────────────── Abschluss ───────────────────────── */
.lst-schluss{ padding:clamp(34px,5vw,64px) 0; background:var(--lst-flaeche); }
.lst-schluss h2{ margin:0 0 10px; font-size:clamp(21px,2.5vw,30px); font-weight:700; }
.lst-schluss p{ margin:0 0 22px; max-width:60ch; color:var(--lst-text); }
.lst-weiter{
  display:flex; flex-wrap:wrap; gap:18px; margin-top:26px;
  padding-top:20px; border-top:1px solid var(--lst-linie); font-size:14px;
}
.lst-weiter a{ color:var(--lst-text); text-decoration:none; border-bottom:1px solid var(--lst-linie); }
.lst-weiter a:hover{ color:var(--lst-ink); border-color:var(--lst-rot); }

@media (max-width:560px){
  .lst-schritt{ grid-template-columns:1fr; gap:6px; }
  .lst-frage-in{ padding-left:0; }
}