/* Produktfamilien-Bilder 26.10.2026 (v2510-23): Galerien auf Familien- und Modellseiten */
.fb-galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--gap,24px);margin:32px 0 0;align-items:start}
.fb-galerie.fb-zwei{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.fb-bild{margin:0}
.fb-bild .bild-rahmen{position:relative;overflow:hidden;width:100%}
.fb-bild .bild-4x3{aspect-ratio:4/3}
.fb-bild .bild-16x9{aspect-ratio:16/9}
.fb-bild .bild-1x1{aspect-ratio:1/1}
.fb-bild .bild-3x4{aspect-ratio:3/4}
.fb-galerie:not(.fb-zwei):not(.fb-galerie-einzeln) .bild-3x4{aspect-ratio:4/3}
.fb-bild .bild-schmal{aspect-ratio:3/4;background:var(--sand,#EADFCC)}
.fb-bild .bild-schmal img{object-fit:contain}
.fb-bild figcaption{margin-top:10px;font-size:.9375rem;line-height:1.4;color:var(--schiefer,#55606E)}
.fb-block{margin-top:56px}
.fb-block .t3{margin:0 0 12px}
.fb-block .text{max-width:68ch}
.fb-block .text+.text{margin-top:12px}
.fb-block-klein{margin-top:32px}
.fb-galerie-einzeln{grid-template-columns:minmax(0,520px)}
@media (max-width:767px){.fb-block{margin-top:40px}.fb-galerie-einzeln{grid-template-columns:1fr}}






/* v2510-26: ruhige Raster, einheitliche Bildgroessen (4:3), ein Rhythmus */
.fb-reihe{display:grid;gap:var(--gap,24px);margin-top:24px;grid-template-columns:repeat(2,minmax(0,1fr))}
.fb-reihe-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fb-reihe-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fb-reihe .fb-bild .bild-rahmen,.fb-paar .bild-rahmen{aspect-ratio:4/3;margin-bottom:0}
.fb-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap,24px)}
.kachel-treppen .fb-paar{margin-bottom:24px}
#ausstattung .kacheln-4.fb-treppen{grid-template-columns:repeat(5,minmax(0,1fr))}
.fb-treppen .kachel-treppen{grid-column:span 2}
.og-titel+.text{margin-top:16px;max-width:68ch}
.ts-raum+.fb-reihe{margin-top:32px}
.ts-raum .fb-reihe{margin-top:40px}
.ts-raum .fb-reihe .bild-rahmen{border-radius:16px}
.ts-foto .fb-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:none;padding:0 18px 18px}
.ts-foto .fb-thumbs picture{border-radius:12px;overflow:hidden}
.ts-foto .fb-thumbs picture{display:block;aspect-ratio:4/3;flex:none}
.ts-foto.fb-mehr figcaption{bottom:auto;top:8px}
.ts-foto.fb-k04 img{object-position:50% 36%}
.fb-pos-unten{object-position:50% 100%}
@media (min-width:768px){.karteB.fb-hoch{grid-column:3;grid-row:1 / span 2}}
.karteB .fb-reihe{margin-top:16px;gap:12px}
.karteB .fb-zweitbild{margin-top:16px}
@media (max-width:1100px){.fb-reihe-4{grid-template-columns:repeat(2,minmax(0,1fr))}#ausstattung .kacheln-4.fb-treppen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.fb-reihe-3{grid-template-columns:1fr}.fb-reihe-4{gap:12px}.fb-treppen .fb-paar{gap:12px}.tb-bild .fb-paar{gap:12px}}
@media (max-width:480px){.fb-reihe:not(.fb-reihe-4){grid-template-columns:1fr}.karteB .fb-reihe{grid-template-columns:1fr 1fr}}

/* v2510-28 */
/* A Unterflur: zwei gleiche Karten, Bilder oben */
.fb-zwei{align-items:stretch}
.fb-zwei>.karteB{display:flex;flex-direction:column}
.fb-zwei>.karteB>.fb-reihe{margin:0 0 20px;gap:var(--gap,24px)}
.fb-zwei>.karteB>.fb-reihe .bild-rahmen{border-radius:12px}
#so-funktioniert-er .fb-reihe-2{margin-top:32px}
/* A: Geht das bei meinem Pool? gleiche Hoehe, ohne Leerraum */
#passt-bei-deinem-modell .k3-2{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:stretch}
#passt-bei-deinem-modell .karteB{display:flex;flex-direction:column}
#passt-bei-deinem-modell .karteB>.tl{margin-top:auto;padding-top:16px;align-self:flex-start}
@media (max-width:899px){#passt-bei-deinem-modell .k3-2{grid-template-columns:1fr}}
/* B Ueberflur: fuenf gleich grosse Karten, 3+2 */
.fb-fuenf{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap,24px);grid-template-columns:none}
.fb-fuenf>.karteB{flex:0 0 calc((100% - 2*var(--gap,24px))/3);min-width:0;display:flex;flex-direction:column;margin:0}
.fb-fuenf>.karteB .bx{aspect-ratio:4/3;height:auto;margin-bottom:16px}
.fb-fuenf>.karteB .bx picture,.fb-fuenf>.karteB .bx img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:1023px){.fb-fuenf>.karteB{flex-basis:calc((100% - var(--gap,24px))/2)}}
@media (max-width:600px){.fb-fuenf>.karteB{flex-basis:100%}}
/* C Coverseal: Projekt ohne Bild */
#projekte-mit-coverseal .cs-projekt.cs-ohne-bild{grid-template-columns:1fr;max-width:640px}
/* F Coverseal: Hochformat-Standbild ohne Balken */
.cs-yt.cs-yt-hoch{aspect-ratio:373/675;max-width:320px;margin-inline:auto;border-radius:16px;background:#0c2036}
.cs-yt.cs-yt-hoch picture,.cs-yt.cs-yt-hoch img{width:100%;height:100%;object-fit:cover}
.cs-yt.cs-yt-hoch:has(iframe){aspect-ratio:16/9;max-width:none;border-radius:4px}
/* E Edelstahl: Ausstattung gleiche Bildhoehe (4:3), Treppen-Paar so breit wie zwei Kacheln */
#ausstattung .kachel-treppen .fb-paar{width:100%;gap:var(--gap,24px);margin-bottom:24px}
#ausstattung .kacheln-4.fb-treppen .bild-rahmen{aspect-ratio:4/3;height:auto}
@media (max-width:1100px){
#ausstattung .kacheln-4.fb-treppen{display:flex;flex-wrap:wrap;justify-content:center;gap:24px var(--gap,24px)}
#ausstattung .kacheln-4.fb-treppen>.kachel{flex:0 0 calc((100% - 2*var(--gap,24px))/3);min-width:0}
#ausstattung .kacheln-4.fb-treppen>.kachel-treppen{flex-basis:calc((200% - 2*var(--gap,24px))/3 + var(--gap,24px)*0)}
}
@media (max-width:767px){
#ausstattung .kacheln-4.fb-treppen{gap:20px 12px}
#ausstattung .kacheln-4.fb-treppen>.kachel{flex-basis:calc((100% - 12px)/2)}
#ausstattung .kacheln-4.fb-treppen>.kachel-treppen{flex-basis:100%}
#ausstattung .kachel-treppen .fb-paar{gap:12px}
}
/* E Edelstahl: Feste Masse straffen, Whirlpool ohne Bild */
#modular .bp-punkt{min-height:0;padding:18px 0}
#modular .bp-zeichnung{position:static}
#modular .bp{align-items:start}
#whirlpool .tb-reihe.tb-ohne-bild{grid-template-columns:1fr;max-width:720px}
/* F: Beschriftung mittig unter dem Hochformat-Rahmen */
.cs-yt.cs-yt-hoch+.cs-unter{max-width:320px;margin-inline:auto;text-align:center}
/* G Technik: Skimmer drei gleich grosse Bilder, gleiche Abstaende */
.ts-foto.fb-mehr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:18px;align-content:center;aspect-ratio:auto}
.ts-foto.fb-mehr>picture,.ts-foto.fb-mehr .fb-thumbs picture{display:block;flex:none;aspect-ratio:4/3;border-radius:12px;overflow:hidden;min-height:0}
.ts-foto.fb-mehr .fb-thumbs{display:contents}
.ts-foto.fb-mehr img{display:block;width:100%;height:100%;object-fit:cover}
/* v2510-29 */
/* Reihen: Bilder einer Reihe erscheinen zusammen, ohne Versatz und ohne Staffel (Oberkanten immer gleich) */
.ob-gleich :is(.kacheln-4,.kacheln-5,.kacheln-2,.weitere-reihe,.wege-raster,.fb-zwei,.fb-reihe,.fb-reihe-2,.fb-paar) .bs-bild{transform:none!important;transition-property:opacity!important;transition-delay:0ms!important}
/* Edelstahl: Projekte, zwei Karten ueber die ganze Breite, ohne Loch rechts */
.ob-gleich .weitere-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}
.ob-gleich .weitere-reihe .bild-rahmen{aspect-ratio:3/2}
/* Edelstahl: Whirlpool nur Text, mittig */
.ob-gleich #whirlpool .tb-reihe.tb-ohne-bild{margin-inline:auto;text-align:center}
.ob-gleich #whirlpool .tb-text{margin-inline:auto}
.ob-gleich #whirlpool{padding-bottom:64px}
/* Edelstahl: Leerraum zwischen Feste Masse und Laengen straffen */
.ob-gleich #modular{padding-bottom:40px}
.ob-gleich #laengen{padding-top:32px;padding-bottom:80px}
@media (max-width:767px){.ob-gleich #modular{padding-bottom:24px}.ob-gleich #laengen{padding-top:24px;padding-bottom:56px}.ob-gleich #whirlpool{padding-bottom:40px}}
.ob-gleich .weitere{padding-top:24px}
@media (min-width:768px) and (max-width:1100px){.ob-gleich #ausstattung .kacheln-4.fb-treppen>.kachel-treppen{flex-basis:calc((200% - var(--gap,24px))/3)}}
@media (max-width:767px){.ob-gleich .wege-raster>:last-child:nth-child(even){grid-column:1/-1}}
/* v2510-30 */
.ob-gleich .kacheln-5>.option-klein{display:flex;flex-direction:column;align-items:flex-start}
.ob-gleich .kacheln-5>.option-klein .kt-mehr{margin-top:auto;padding-top:10px}
.ob-gleich #faq{padding-bottom:48px}
.ob-gleich #weg-richtofferte{padding-top:48px}
@media (max-width:767px){.ob-gleich #faq{padding-bottom:32px}.ob-gleich #weg-richtofferte{padding-top:32px}}