/* Wiederverwendbare Bausteine für Unterseiten (Aufbau nach Design-Screenshot) */

/* Baustein: Seiten-Hero mit Hintergrundbild */
.b-hero{position:relative;min-height:min(78svh,720px);display:flex;align-items:flex-end;padding:calc(var(--kopf) + 3rem) 0 4rem;background:#000;overflow:hidden}
.b-hero__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.b-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.55) 55%,rgba(0,0,0,.25) 100%)}
.b-hero .wrap{position:relative;z-index:1}
.b-hero h1{font-size:clamp(1.9rem,4.6vw,3.4rem);max-width:20ch;margin-bottom:.7em}
.b-hero p{max-width:58ch;font-size:1.05rem;margin-bottom:1.6rem}

/* Baustein: Unternavigation mit Ankern */
.b-subnav{background:var(--dunkel);border-bottom:1px solid var(--linie);position:sticky;top:var(--kopf);z-index:50}
.b-subnav ul{display:flex;gap:.4rem 1.6rem;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;justify-content:center}
.b-subnav ul::-webkit-scrollbar{display:none}
.b-subnav a{display:block;padding:.85rem .2rem;text-decoration:none;font-size:.9rem;white-space:nowrap;border-bottom:3px solid transparent;min-height:48px}
.b-subnav a:hover{border-bottom-color:var(--rot)}
@media (max-width:640px){.b-subnav ul{justify-content:flex-start;padding:0 1.25rem}}
section[id]{scroll-margin-top:calc(var(--kopf) + 56px)}

/* Baustein: Textabschnitt mit Überschrift, Text und Liste */
.b-text{max-width:900px}
.b-text h2,.b-split h2,.b-reihe h2,.b-bildtext h2{font-size:clamp(1.5rem,3vw,2.2rem)}
.b-text ul,.b-split ul,.b-bildtext ul{padding-left:1.2rem;margin:0 0 1em}
.b-text li,.b-split li,.b-bildtext li{margin-bottom:.45rem}

/* Baustein: Merkmalsliste, nummerierte Spalten */
.b-merkmale{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.8rem;counter-reset:m}
@media (min-width:700px){.b-merkmale{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.b-merkmale{grid-template-columns:repeat(4,1fr)}}
.b-merkmale li{border-top:3px solid var(--rot);padding-top:1rem;counter-increment:m}
.b-merkmale li::before{content:"0" counter(m);display:block;font-weight:600;color:var(--rot);font-size:1.1rem;margin-bottom:.4rem}
.hell .b-merkmale li::before{color:var(--rot-dunkel)}

/* Baustein: zweispaltig, Text links, Liste rechts */
.b-split{display:grid;gap:2.5rem}
@media (min-width:900px){.b-split{grid-template-columns:1fr 1fr;gap:4rem}}
.b-liste{list-style:none;margin:0;padding:0}
.b-liste li{padding:1rem 0 1rem 1.2rem;border-left:3px solid var(--rot);border-bottom:1px solid var(--linie);margin:0}
.hell .b-liste li{border-bottom-color:#c4c4c4}

/* Baustein: Reihe von Einträgen mit Überschrift */
.b-reihe__raster{display:grid;gap:2rem;margin-top:2rem}
@media (min-width:900px){.b-reihe__raster{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.b-reihe__raster--zwei{}
@media (min-width:900px){.b-reihe__raster--zwei{grid-template-columns:repeat(2,1fr)}}
.b-reihe__eintrag{border-top:1px solid var(--linie);padding-top:1.1rem}
.hell .b-reihe__eintrag{border-top-color:#9a9a9a}
.b-reihe__eintrag h3{font-size:1.1rem}
.b-reihe__einleitung{max-width:75ch}

/* Baustein: Text mit Bild */
.b-bildtext{display:grid;gap:2.5rem;align-items:center}
@media (min-width:900px){.b-bildtext{grid-template-columns:1fr 1fr;gap:4rem}}
.b-bildtext img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* Baustein: Aufruf mit Hintergrundbild */
.b-aufruf{position:relative;overflow:hidden;background:#000;padding:clamp(4rem,9vw,7rem) 0}
.b-aufruf__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.b-aufruf::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.7)}
.b-aufruf .wrap{position:relative;z-index:1}
.b-aufruf h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.b-aufruf p{max-width:60ch}