/* Szenenmeister: Ergänzung vom 21.10.2026. Menü mit vier Spalten, Fusszeile mit Orten und Ratgebern,
   Bausteine der Orts- und Themenseiten. Ergänzt stil.css, unterseiten.css und veredelung.css, ändert dort nichts. */

/* ---------- Leistungen-Menü: vier Spalten, über die Breite des Kopfs ---------- */
@media (min-width:1100px){
  .kopf__innen{position:relative}
  .nav__gruppe{position:static}
  .nav__panel{left:var(--rand);right:var(--rand);width:auto;max-width:1120px;margin-inline:auto;top:calc(100% - 6px)}
  .nav__knopf[aria-expanded="true"]+.nav__panel{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem 2rem}
  .nav__panel a{min-height:34px;line-height:1.25}
}
.nav__panel>div{min-width:0}
.nav__panel a{overflow-wrap:anywhere}

/* ---------- Fusszeile ---------- */
@media (min-width:1100px){
  .fuss__raster{grid-template-columns:1.25fr 1fr 1fr 1fr 1fr}
}
.fuss__bewertung{margin:1rem 0 0;font-size:.9rem;color:var(--text-2)}
.fuss__bewertung a{color:var(--bernstein);text-decoration:none;display:inline-block;padding-block:.35rem;min-height:44px;line-height:1.6}
.fuss__bewertung span{display:block;font-size:.8rem;color:var(--text-2)}
.fuss__unten nav{display:flex;flex-wrap:wrap;gap:0 1.1rem}
/* Die schwebenden Knöpfe (rechts unten, 50 px + 14 px Rand) lagen am Seitenende auf «Kontakt» und
   «Cookie-Einstellungen» (gemessen 21.10.2026, elementFromPoint). Platz rechts freihalten. */
.fuss__unten{padding-right:72px}
.fuss__liste a{min-width:44px}

/* ---------- Schwebender WhatsApp-Knopf ---------- */
.schweben__knopf--wa{background:#25d366;border-color:#25d366}
.schweben__knopf--wa svg{stroke:#0b2e18}

/* ---------- Auf einen Blick ---------- */
.blick{display:grid;gap:0;border-top:1px solid var(--linie);margin:0}
.blick>div{display:grid;gap:.25rem 1.5rem;padding:1.05rem 0;border-bottom:1px solid var(--linie)}
.blick>div>*{min-width:0}
.blick dt{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bernstein)}
.blick dd{margin:0;color:var(--text);overflow-wrap:break-word}
.blick dd a{color:var(--bernstein)}
@media (min-width:760px){.blick>div{grid-template-columns:14rem 1fr;align-items:baseline}}
.abschnitt--hell .blick,.abschnitt--hell .blick>div{border-color:var(--linie-dunkel)}
.abschnitt--hell .blick dt{color:var(--braun)}
.abschnitt--hell .blick dd{color:var(--creme-text)}
.abschnitt--hell .blick dd a{color:var(--braun)}

/* ---------- Fliesstext der Ratgeber ---------- */
.prosa{max-width:46rem}
.prosa>*{min-width:0}
.prosa p{margin:0 0 1.1rem}
.prosa h3{margin:2rem 0 .6rem}
.prosa ul{margin:0 0 1.2rem;padding-left:1.2rem;list-style:disc}
.prosa li{margin:.35rem 0}
.prosa a{text-decoration:underline;text-underline-offset:3px}
.stand{margin-top:1.8rem;font-size:.85rem;color:var(--text-2)}
.abschnitt--hell .stand{color:var(--creme-text-2)}

/* ---------- Bevor du anfragst (Liste mit Häkchen statt Lobliste) ---------- */
.klaeren{margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid var(--linie-dunkel);max-width:48rem}
.klaeren h3{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--braun);margin-bottom:.9rem}
.klaeren ul{display:block;margin:0;padding:0;list-style:none}
.klaeren li{position:relative;padding:.65rem 0 .65rem 1.8rem;color:var(--creme-text-2);border-bottom:1px dashed var(--linie-dunkel);overflow-wrap:break-word}
.klaeren li::before{content:"?";position:absolute;left:0;top:.55rem;font-family:var(--serif);font-size:1.25rem;line-height:1.2;color:var(--braun)}
.klaeren li strong{color:var(--creme-text)}

/* ---------- Bilder ohne Beschnitt (Seitenverhältnis der Datei) ---------- */
.fnatur{aspect-ratio:auto}
.abschnitt-bild.fnatur img{height:auto}

/* ---------- Verwandte Seiten ---------- */
.verwandt .feature h3{overflow-wrap:break-word;hyphens:auto}
.verwandt .feature p{margin-bottom:0}

/* ---------- Lange deutsche Wörter in Überschriften ---------- */
@media (max-width:26.99rem){
  main h1,main h2{hyphens:auto;overflow-wrap:break-word}
}