/*
 * Leistungsseiten (NS-LS-1-technik, E-7509).
 *
 * Eigene Datei, damit shop.css unberuehrt bleibt: Das Layout laedt sie nur,
 * wenn es veroeffentlichte Leistungsseiten gibt (Navigation, Fusszeile,
 * Startseite) oder eine Leistungsseite gezeigt wird. Farben und Abstaende
 * kommen aus den Variablen von shop.css; wiederverwendet werden .hero,
 * .rs-block/.rs-cms, .rs-fakten, .rs-hinweis, .scard, .k-grid/.k-form.
 */

/* Fusszeile: fuenf Spalten, sobald die Spalte „Leistungen“ dazukommt. */
@media (min-width: 769px) {
    .foot-grid.mit-leistungen { grid-template-columns: 1.6fr repeat(4, 1fr); }
}

/* Vorschau eines Entwurfs – nur das Team sieht sie. */
.ls-entwurf { background: #fffbeb; border-bottom: 1px solid #fcd34d; color: #78350f; padding: .7rem 0; font-size: .92rem; }
.ls-entwurf b { margin-right: .35rem; }

/* Kopf: eine Spalte, der Text darf breiter laufen als auf der Startseite. */
.hero.ls-hero { grid-template-columns: 1fr; }
.hero.ls-hero p { max-width: 70ch; }

/*
 * Detailseite: Entwurfshinweis, Kopf und Inhalt in derselben Lesebreite
 * (ND-LS, E-9305). Die Polsterung von .container bleibt – mobil steht kein
 * Text am Rand; vorher setzte .ls-wrap sie auf 0.
 */
.container.ls-schmal { max-width: calc(900px + 2.5rem); }
.ls-wrap { padding-bottom: 3rem; }
.ls-fakten { margin: 0 0 1rem; }
.ls-fakt, .ls-fakten .rs-fakt { background: #fff; border: 1px solid var(--line); }

/* Abschnitte ohne Nummer: Ueberschrift ohne Zahlenkreis. */
.ls-wrap .rs-block > h2 { gap: 0; }

/* Haeufige Fragen als aufklappbare Eintraege. */
.ls-fragen { display: grid; gap: .5rem; margin-top: .4rem; }
.ls-frage { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.ls-frage summary { cursor: pointer; padding: .7rem 1rem; font-weight: 600; color: var(--navy); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.ls-frage summary::-webkit-details-marker { display: none; }
.ls-frage summary::after { content: "+"; color: var(--blue); font-weight: 700; }
.ls-frage[open] summary::after { content: "–"; }
.ls-antwort { padding: 0 1rem .8rem; }
.ls-antwort > *:last-child { margin-bottom: 0; }

.ls-rechner { margin: 0 0 1rem; }
.ls-rechner a { font-weight: 600; margin-left: .25rem; }

.ls-gebiet .ls-orte { color: var(--muted); font-size: .92rem; }
.ls-gebiet-abstand { margin-top: 1.5rem; }
.ls-stand { color: var(--muted-2); font-size: .85rem; margin: .2rem 0 1.5rem; }

.ls-verwandte { margin: 1.5rem 0; }
.ls-kontakt { margin-top: 1.5rem; }

/*
 * Raster der Leistungskarten (ND-LS-leistungen-darstellung, E-9300 ff.):
 * /leistungen, Startseite und „Verwandte Leistungen“ (Partial
 * shop.partials.leistung-karte). Breite = .container wie der Kopf,
 * 3 Spalten Desktop, 2 Tablet, 1 Telefon; minmax(0, 1fr), damit ein langes
 * Wort nie waagrecht aus der Seite schiebt.
 */
.ls-uebersicht { padding-bottom: 3rem; }
.ls-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 1024px) { .ls-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ls-raster { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
.ls-schmal .ls-raster { gap: 1rem; }

/* Gleich hohe Karten, „Mehr erfahren“ immer unten. */
.ls-karte { position: relative; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.ls-karte h3 { overflow-wrap: anywhere; hyphens: auto; }
.ls-karte.ist-entwurf h3 { padding-right: 4.5rem; }
.ls-karte .ls-anriss {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
    overflow: hidden; min-height: calc(1.5em * 3);
}
.ls-karte .scard-link { margin-top: auto; }

/* Entwurf: kleines Abzeichen statt Titelzusatz (nur Dev, ND-04/E-9020). */
.ls-abzeichen {
    position: absolute; top: 1rem; right: 1rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4;
    color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 999px; padding: .1rem .55rem;
}

/* Zwei weitere Wege (Solarplaner, Shop) – eigene Zeile, klar abgesetzt. */
.ls-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; }
@media (max-width: 768px) { .ls-wege { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
.ls-weg {
    display: flex; gap: 1rem; align-items: flex-start; text-decoration: none;
    background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 14px; padding: 1.4rem 1.6rem;
    transition: box-shadow .15s, border-color .15s;
}
.ls-weg:hover { box-shadow: 0 12px 30px rgba(16, 42, 77, .1); border-color: var(--blue); }
.ls-weg-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--blue); }
.ls-weg-icon svg { width: 24px; height: 24px; }
.ls-weg-text { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.ls-weg-text b { color: var(--navy); font-size: 1.05rem; }
.ls-weg-text > span:not(.scard-link) { color: var(--muted); font-size: .88rem; line-height: 1.5; }
.ls-weg .scard-link { margin-top: .2rem; }