/* Licht & Leitung – Ratgeber, Leistungen, Orte und deren Übersichten.
   Baut auf site.css auf (Farben, Schrift, Knöpfe, Pfad, Karten). Erzeugt von werkzeuge/inhalte_seiten.py. */

.inhalt-seite { background: var(--papier); padding-top: calc(var(--kopf-hoehe) + 28px); --fokus: var(--kupfer-text); }
.inhalt-seite h1 { overflow-wrap: break-word; hyphens: manual; }

/* ---------- Beitrag ---------- */
.beitrag {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kopf" "seite" "text";
  gap: 28px; padding: 24px 0 clamp(56px, 8vw, 96px);
}
.beitrag__kopf { grid-area: kopf; max-width: 46em; }
.beitrag__kopf h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 740; }
.beitrag__einstieg p { margin-top: 18px; font-size: 1.16rem; line-height: 1.6; color: #2b333c; }
.beitrag__stand { margin-top: 18px; font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; font-size: .92rem; color: var(--grau); }

.seitenkasten {
  grid-area: seite; align-self: start; display: grid; gap: 12px;
  padding: 22px; border-radius: var(--radius); background: var(--weiss);
  border: 1px solid var(--linie); box-shadow: var(--schatten);
}
.seitenkasten__titel { font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.seitenkasten > p { color: #2b333c; font-size: .98rem; }
.seitenkasten .knopf { width: 100%; }
.seitenkasten__tel { font-size: .95rem; color: var(--grau); }
.seitenkasten__tel a { color: var(--kupfer-text); font-weight: 650; white-space: nowrap; }

.beitrag__text { grid-area: text; max-width: 42em; min-width: 0; }
.beitrag__text > h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); font-weight: 720; margin-top: 52px; scroll-margin-top: calc(var(--kopf-hoehe) + 16px); }
.beitrag__text > h2:first-child { margin-top: 0; }
.beitrag__text > h3 { font-size: 1.2rem; font-weight: 700; margin-top: 30px; }
.beitrag__text > p, .beitrag__text > ul, .beitrag__text > ol { margin-top: 14px; color: #2b333c; }
.beitrag__text > h2 + p, .beitrag__text > h3 + p { margin-top: 12px; }
.beitrag__text ul, .beitrag__text ol { padding-left: 24px; }
.beitrag__text li + li { margin-top: 6px; }
.beitrag__text li::marker { color: var(--kupfer); }
.beitrag__text strong { font-weight: 680; color: var(--tinte); }
.beitrag__text a, .beitrag__einstieg a, .hub__mehr a, .uebersicht__kopf a { color: var(--kupfer-text); font-weight: 600; text-underline-offset: 3px; }

.beitrag__bild { aspect-ratio: 4 / 3; margin: 0 0 32px; }

/* Gliederung */
.gliederung { margin-bottom: 40px; padding: 18px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.gliederung__titel { font-weight: 700; margin-bottom: 8px; }
.gliederung ol { padding-left: 24px; display: grid; gap: 4px; }
.gliederung a { color: var(--kupfer-text); text-underline-offset: 3px; }

/* Kästen */
.kasten { margin-top: 24px; padding: 18px 22px 20px; border-radius: 14px; background: var(--weiss); border: 1px solid var(--linie); }
.kasten__titel { font-family: var(--display); font-weight: 700; font-size: 1.08rem; }
.kasten > p, .kasten > ul, .kasten > ol { margin-top: 8px; color: #2b333c; }
.kasten > p:first-child { margin-top: 0; }
.kasten ul, .kasten ol { padding-left: 22px; }
.kasten li + li { margin-top: 4px; }
.kasten--achtung { background: #fbeee4; border-color: rgba(196, 106, 47, .35); border-left: 5px solid var(--kupfer); }
.kasten--tipp { border-left: 5px solid var(--bernstein); }
.kasten--kurz { background: #fff6e0; border-color: rgba(242, 168, 29, .5); }
.beitrag__text > .kasten:first-child { margin-top: 0; }

/* Abschluss mit Anfrage */
.schluss { margin-top: 56px; padding: clamp(24px, 4vw, 36px); border-radius: 22px; background: var(--nacht); color: #fff; --fokus: var(--bernstein); }
.schluss__titel { font-family: var(--display); font-weight: 720; font-size: clamp(1.35rem, 2.4vw, 1.7rem); line-height: 1.2; text-wrap: balance; }
.schluss > p:not(.schluss__titel):not(.frage__hinweis) { margin-top: 10px; color: var(--grau-hell); }
.schluss .frage__aktion { margin-top: 22px; }
.schluss .frage__hinweis { color: var(--grau-hell); }
.schluss .frage__hinweis a { color: var(--bernstein-hell); }

@media (min-width: 1000px) {
  .beitrag {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas: "kopf seite" "text seite"; grid-template-rows: auto 1fr;
    column-gap: clamp(40px, 5vw, 80px); row-gap: 40px;
  }
  .seitenkasten { position: sticky; top: calc(var(--kopf-hoehe) + 24px); margin-top: 8px; }
}
@media (max-width: 999px) {
  .seitenkasten { max-width: 42em; }
}

/* ---------- Karten (verwandte Seiten, Übersichten) ---------- */
.karten { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.karte {
  height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px;
  border-radius: var(--radius); background: var(--weiss); border: 1px solid var(--linie); box-shadow: var(--schatten);
  text-decoration: none; color: var(--tinte); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.karte__marke { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--sand); font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--kupfer-text); }
.karte__titel { font-family: var(--display); font-weight: 700; font-size: 1.2rem; line-height: 1.22; text-wrap: balance; }
.karte__text { color: var(--grau); font-size: .98rem; }
.karte__mehr { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--kupfer-text); }
.karte__mehr svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
@media (hover: hover) {
  .karte:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(11, 15, 20, .06), 0 18px 40px -16px rgba(11, 15, 20, .28); }
  .karte:hover .karte__mehr svg { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .karte, .karte__mehr svg { transition: none; }
  .karte:hover { transform: none; }
}
.weitere .karten + .weitere__unter { margin-top: 36px; }
.weitere__unter { margin-bottom: 14px; font-family: var(--display); font-weight: 700; font-size: 1.15rem; }

/* Übersichten */
.karten--hub { margin-bottom: 8px; }
.inhalt-seite--hub .uebersicht__kopf p + p { margin-top: 10px; }
.hub__mehr { max-width: 46em; margin-top: clamp(40px, 6vw, 64px); }
.hub__mehr h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 720; margin-bottom: 10px; }
.hub__mehr p { color: #2b333c; }
.kasten--anfrage { background: var(--sand); border-color: transparent; }
.kasten--anfrage .frage__aktion { margin-top: 16px; }