/* breite-2026.css: volle Fensterbreite fuer ssc-container.de (Stand 26.10.2026)
   Prinzip wie apple.com: Baender mit Hintergrund laufen randlos ueber 100 % Breite,
   der Inhalt nutzt die Fensterbreite fluid (Rand 20 bis 72 px, Inhalt rund 2/3 der Fensterbreite: 1280 bis 1760 px, Korrektur 27.10.2026),
   Fliesstext bleibt lesbar schmal (ca. 760 px) und steht in zweispaltigen Reihen.
   Wird in jeder Seite NACH den bestehenden Stylesheets eingebunden.
   Unterseiten mit <body class="l26">: Raster in layout-2026.css (nutzt dieselben Werte).
   Werbeseiten (l26-lp) bleiben bewusst unveraendert. */

:root{
  --b26-pad:clamp(20px,4vw,72px);                         /* Seitenrand links/rechts */
  --b26-inhalt:clamp(1280px,66.667vw,1760px);                                    /* groesste Inhaltsbreite */
  --b26-max:calc(var(--b26-inhalt) + 2 * var(--b26-pad)); /* Inhalt + Rand, fuer max-width mit innerem Rand */
  --b26-text:760px;                                       /* Lesebreite Fliesstext */
}

/* ---------- Inhaltskante (27.10.2026) ----------
   Container mit max-width:var(--b26-max) zaehlen ihren Seitenrand mit (border-box). Damit steht der Inhalt auf
   Startseite, Kaufen, Angebot und Einsatzbereiche bei --b26-inhalt (2/3 der Fensterbreite) wie auf allen Unterseiten
   (layout-2026.css). Vorher lag er dort 72 px je Seite weiter aussen. Kopfzeile und Logo unveraendert.
   Zweite Schreibweise mit Leerzeichen: so steht der Stil im DOM, nachdem support.js die x-dc-Seiten aufgebaut hat. */
[style*="max-width:var(--b26-max)"],[style*="max-width: var(--b26-max)"]{box-sizing:border-box}

/* ---------- Startseite (index.html) ---------- */
/* Ueberblick (#ueberblick): steht seit 27.10.2026 unter den Haeufigen Fragen und nutzt dasselbe
   Raster wie diese (Klasse b26-faq: Kopf links, Text und Liste rechts), damit beide Bloecke
   an denselben Spaltenkanten stehen. Die fruehere Sonderregel 5fr/7fr entfaellt.
   Preisliste ab Tablet-Breite immer zweispaltig, damit keine Zeile mitten im Preis umbricht. */
@media(min-width:900px){#ueberblick ul{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* Haeufige Fragen: Kopf links mitlaufend, Fragen rechts in zwei Spalten */
@media(min-width:1200px){
  .b26-faq{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,3fr);grid-template-rows:auto auto 1fr;column-gap:clamp(48px,5vw,120px);align-items:start}
  .b26-faq > :not(.b26-faq__liste){grid-column:1}
  .b26-faq > .b26-faq__liste{grid-column:2;grid-row:1 / span 3}
}
.b26-faq__liste{align-items:start}

/* Startseite, Feinschliff 27.10.2026 (Klassen nur in index.html) */
/* Unter dem Produktraster: Antworttext waechst auf sehr breiten Schirmen mit, damit zur Hinweisliste
   (buendig mit der dritten Kachelspalte) kein Loch entsteht */
@media(min-width:1600px){
  .b26-unterkacheln > p{max-width:min(100% - 180px,1000px)!important;font-size:clamp(14.5px,.66vw,17px)!important}
  .b26-unterkacheln > ul{font-size:clamp(14px,.6vw,15.5px)!important}
}
.b26-unterkacheln > ul > li{text-wrap:balance}
/* Preisrechner: Typ-Knoepfe als ruhiges 3 x 3-Raster; auf dem Telefon weniger Innenabstand, damit "Büro+WC" passt */
@media(max-width:560px){.b26-chips > button{padding-left:6px!important;padding-right:6px!important}}
/* Kennzahlen im Titelbild: auf dem Telefon drei schmale Spalten in einer Reihe (keine Restreihe), die Trennstriche entfallen dort */
@media(max-width:560px){.b26-stats > div[style*="width:1px"],.b26-stats > div[style*="width: 1px"]{display:none}.b26-stats.rstats{display:grid!important;grid-template-columns:repeat(3,auto);justify-content:space-between;column-gap:14px!important;row-gap:0!important}.b26-stats > div > div:first-child{font-size:clamp(16px,4.9vw,22px)!important;white-space:nowrap}}
/* Gebraucht-Kasten: auf dem Telefon schmalerer Innenrand */
@media(max-width:560px){.b26-gebraucht{padding:28px 20px 30px!important}}
/* Fusszone: Linkspalten auf dem Telefon mit etwas weniger Abstand */
@media(max-width:560px){.b26-fusslinks{gap:24px!important}}

/* Ueber-uns-Bild waechst mit der Breite (Bild 1200 x 800, object-fit cover) */
.b26-bildhoehe{height:clamp(380px,26vw,600px)!important}
@media(max-width:980px){.b26-bildhoehe{height:380px!important}}

/* Fliesstext in breiten Spalten auf Lesebreite begrenzen */
.b26-lesen > p{max-width:var(--b26-text)}

/* Produkt-Kacheln (Startseite, kaufen.html): gleich breite Kacheln, letzte Reihe mittig.
   Spalten: ab 981 px 3 (3 x 3 bei 9 Typen), darunter 2, Telefon 1. */
.b26-kacheln{--k:3}
.b26-kacheln > *{box-sizing:border-box;flex:0 0 calc((100% - (var(--k) - 1) * 16px) / var(--k));min-width:0}
@media(max-width:980px){.b26-kacheln{--k:2}}
@media(max-width:560px){.b26-kacheln{--k:1}}