/* layout-2026.css: gemeinsames Raster der Unterseiten von ssc-container.de (Stand 21.10.2026, Breite angepasst 26.10.2026: siehe Abschnitt "Volle Breite" am Ende)
   Inhaltsbreite 1280 px wie die Startseite (1376 px Gesamtbreite inkl. 48 px Rand je Seite).
   Wirkt nur auf Seiten mit <body class="l26"> (Werbeseiten zusaetzlich class="l26 l26-lp").
   Bausteine: l26-wrap, l26-sec, l26-head, l26-hero + l26-facts, l26-intro + l26-buy, l26-grid, l26-feat,
   l26-gal, l26-pair, l26-split, l26-faq, l26-links, l26-artikel, l26-cta. Spezifikation: _werkzeug/layout-spec.md */

/* ---------- Grundwerte ---------- */
body.l26{
  --l26-pad:48px; --l26-gap:24px; --l26-spalt:56px; --l26-sec:80px;
  --l26-ink:#24272B; --l26-ink2:rgba(36,39,43,.7); --l26-ink3:rgba(36,39,43,.5);
  --l26-line:rgba(36,39,43,.1); --l26-acc:#E8650D; --l26-soft:#F4F5F6; --l26-r:22px;
  --l26-shadow:0 6px 22px rgba(36,39,43,.08),0 1px 3px rgba(36,39,43,.05);
  background:#fff;
}
@media(max-width:980px){body.l26{--l26-pad:28px;--l26-gap:20px;--l26-spalt:40px;--l26-sec:60px}}
@media(max-width:640px){body.l26{--l26-pad:20px;--l26-gap:16px;--l26-spalt:28px;--l26-sec:44px}}

/* ---------- Raster-Container: 1280 px Inhalt, Rand wie Startseite ---------- */
body.l26 .l26-wrap,
body.l26 .wrap{box-sizing:border-box;width:100%;max-width:1376px;margin-left:auto;margin-right:auto;padding-left:var(--l26-pad);padding-right:var(--l26-pad)}
body.l26 > nav[aria-label="Brotkrumen"]{box-sizing:border-box;max-width:1376px!important;padding-left:var(--l26-pad)!important;padding-right:var(--l26-pad)!important}
body.l26:not(.l26-lp) > footer{box-sizing:border-box;max-width:1376px!important;padding-left:var(--l26-pad)!important;padding-right:var(--l26-pad)!important}
/* Trennlinie ueber der Fusszeile nur so breit wie der Inhalt */
body.l26:not(.l26-lp) > footer{border-top:0!important;background:linear-gradient(rgba(36,39,43,.08),rgba(36,39,43,.08)) center top/calc(100% - 2 * var(--l26-pad)) 1px no-repeat}
body.l26 .l26-main{display:block;padding:0!important;margin:0}

/* ---------- Abschnitte (Baender ueber die volle Fensterbreite, Inhalt im Raster) ---------- */
.l26-sec{padding:var(--l26-sec) 0}
.l26-sec--grau{background:var(--l26-soft)}
.l26-sec:not(.l26-sec--grau) + .l26-sec:not(.l26-sec--grau),
.l26-sec--grau + .l26-sec--grau{padding-top:0}
.l26-sec.l26-sec--start{padding-top:20px}
.l26-sec > .l26-wrap > :first-child{margin-top:0!important}
.l26-sec > .l26-wrap > :last-child{margin-bottom:0!important}

/* ---------- Abschnittskopf ---------- */
.l26-head{margin:0 0 36px}
body.l26 .l26-head > h2,
body.l26 .l26-links > h2{margin:0!important;font-family:Sora,system-ui,sans-serif;font-weight:700;font-size:32px!important;line-height:1.18;letter-spacing:-.01em;color:var(--l26-ink);text-wrap:balance}
body.l26 .l26-head > p{margin:14px 0 0!important;max-width:760px}
.l26-head--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px var(--l26-spalt);align-items:end}
body.l26 .l26-head--split > p{margin:0!important;max-width:none}
.l26-head--mitte{text-align:center}
body.l26 .l26-head--mitte > p{margin-left:auto!important;margin-right:auto!important}
@media(max-width:980px){body.l26 .l26-head > h2,body.l26 .l26-links > h2{font-size:27px!important}}
@media(max-width:900px){.l26-head--split{grid-template-columns:1fr}}
@media(max-width:640px){body.l26 .l26-head > h2,body.l26 .l26-links > h2{font-size:23px!important}.l26-head{margin-bottom:24px}}

/* ---------- Stadt-Hero: Bildflaeche auf volle Rasterbreite ---------- */
body.l26 .l26-hero{margin:0!important;border-radius:var(--l26-r);min-height:480px;display:flex;align-items:center}
body.l26 .l26-hero .in{padding:72px 64px;max-width:700px;box-sizing:border-box}
body.l26 .l26-hero h1{font-size:46px!important;line-height:1.1!important}
@media(max-width:980px){body.l26 .l26-hero{min-height:400px}body.l26 .l26-hero .in{padding:48px 36px}body.l26 .l26-hero h1{font-size:38px!important}}
@media(max-width:640px){body.l26 .l26-hero{min-height:0}body.l26 .l26-hero .in{padding:32px 22px}body.l26 .l26-hero h1{font-size:clamp(26px,7.4vw,32px)!important;line-height:1.18!important}}

/* ---------- Fakten-Leiste: eine durchgehende Leiste, gleich breite Felder ---------- */
.l26-facts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:#fff;border:1px solid var(--l26-line);border-radius:var(--l26-r);box-shadow:var(--l26-shadow);margin-top:var(--l26-gap)}
.l26-facts > *{margin:0!important;padding:24px 28px!important;text-align:center;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.l26-facts > * + *{border-left:1px solid var(--l26-line)!important}
/* Hero und Leiste als eine Einheit */
.l26-hero:has(+ .l26-facts){border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}
.l26-hero + .l26-facts{margin-top:0;border-top:0;border-top-left-radius:0;border-top-right-radius:0}
@media(max-width:760px){.l26-facts{grid-auto-flow:row}.l26-facts > * + *{border-left:0!important;border-top:1px solid var(--l26-line)!important}.l26-facts > *{padding:16px 20px!important}}
body.l26 .l26-facts + .antwort,
body.l26 .l26-facts + .hinweis{margin-top:var(--l26-gap)!important}

/* ---------- Produkt-Einstieg: Text links, Bild rechts, darunter Kaufpreis-Leiste ---------- */
.l26-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--l26-gap) var(--l26-spalt);align-items:center}
.l26-intro > * {min-width:0}
.l26-intro__bild img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#fff;border-radius:var(--l26-r);border:1px solid var(--l26-line);box-shadow:var(--l26-shadow);margin:0!important}
.l26-intro__bild--foto img{object-fit:cover}
@media(max-width:900px){.l26-intro{grid-template-columns:1fr}}

.l26-buy{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));padding:0!important;margin-top:40px!important}
.l26-buy > div[style*="height:1px"]{display:none}
.l26-buy__teil{padding:28px 32px;min-width:0}
.l26-buy__teil ~ .l26-buy__teil{border-left:1px solid var(--l26-line)}
.l26-buy__teil > :first-child{margin-top:0!important}
.l26-buy__teil--aktion{display:flex;flex-direction:column;justify-content:center}
.l26-buy table.spec{margin-top:6px!important}
@media(max-width:900px){.l26-buy{grid-template-columns:1fr}.l26-buy__teil ~ .l26-buy__teil{border-left:0;border-top:1px solid var(--l26-line)}}
@media(max-width:640px){.l26-buy__teil{padding:22px 20px}}

/* ---------- Raster fuer Karten/Typen/Merkmale: gleich breite Spalten, letzte Reihe mittig ---------- */
.l26-grid{--n:3;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--l26-gap)}
.l26-grid > *{box-sizing:border-box;flex:0 0 calc((100% - (var(--n) - 1) * var(--l26-gap)) / var(--n));min-width:0;margin:0!important}
.l26-grid--1{--n:1}.l26-grid--2{--n:2}.l26-grid--3{--n:3}.l26-grid--4{--n:4}.l26-grid--5{--n:5}
/* Textkarten im Zweierraster: ungerade letzte Karte ueber die volle Breite statt allein in der Mitte (nicht bei Bildern) */
@media(min-width:561px){.l26-grid--2:not(.l26-gal) > :last-child:nth-child(odd):not(:first-child){flex-basis:100%}}
@media(max-width:1100px){.l26-grid--4,.l26-grid--5{--n:3}}
@media(max-width:900px){.l26-grid--3,.l26-grid--4,.l26-grid--5{--n:2}}
@media(max-width:560px){.l26-grid,.l26-grid--2,.l26-grid--3,.l26-grid--4,.l26-grid--5{--n:1}}
body.l26 .l26-grid > a.card{transition:border-color .2s ease,box-shadow .2s ease}
body.l26 .l26-grid > a.card:hover{border-color:rgba(232,101,13,.35);box-shadow:0 14px 34px rgba(36,39,43,.12)}

/* Merkmal ohne Kachel: Linie oben, Text darunter (Einsatzbereiche, Eignung, Schritte) */
body.l26 .l26-feat{background:none!important;border:0!important;border-top:2px solid var(--l26-ink)!important;border-radius:0!important;box-shadow:none!important;padding:22px 0 0!important}
body.l26 .l26-feat p{margin-top:10px!important}
@media(min-width:1101px){body.l26 .l26-grid--4 > .l26-feat > :first-child,body.l26 .l26-grid--5 > .l26-feat > :first-child{min-height:2.5em}}

/* Bildreihe */
.l26-gal img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#fff;border-radius:16px;border:1px solid var(--l26-line)}

/* ---------- Zwei gleich breite Spalten mit je eigener Ueberschrift ---------- */
.l26-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px var(--l26-spalt);align-items:start}
.l26-pair > *{min-width:0}
body.l26 .l26-pair > * > h2:first-child{margin:0 0 16px!important;font-size:26px!important;line-height:1.2}
body.l26 .l26-pair > * > :last-child{margin-bottom:0!important}
body.l26 .l26-pair > * > :first-child{margin-top:0!important}
/* Spalte aus genau Ueberschrift + Karte: Karte waechst auf die Hoehe der Nachbarspalte (Unterkanten buendig) */
@media(min-width:901px){
  .l26-pair:has(> div > h2:first-child + .card:last-child){align-items:stretch}
  .l26-pair > div:has(> h2:first-child + .card:last-child){display:flex;flex-direction:column}
  .l26-pair > div > h2:first-child + .card:last-child{flex:1 1 auto}
}
/* Bild in einer Paar-Spalte */
.l26-pair .l26-gal img{margin:0}
@media(max-width:900px){.l26-pair{grid-template-columns:1fr}}
@media(max-width:640px){body.l26 .l26-pair > * > h2:first-child{font-size:22px!important}}

/* ---------- Ueberschrift links, Inhalt rechts (6/6) ---------- */
.l26-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px var(--l26-spalt);align-items:start}
.l26-split > *{min-width:0}
body.l26 .l26-split > h2{margin:0!important;font-size:26px!important;line-height:1.2}
@media(max-width:640px){body.l26 .l26-split > h2{font-size:22px!important}}
.l26-split > div > :first-child{margin-top:0!important}
.l26-split > div > :last-child{margin-bottom:0!important}
.l26-split + .l26-split,
.l26-pair + .l26-split,
.l26-grid + .l26-split,
.l26-wrap > p + .l26-split{margin-top:56px;padding-top:56px;border-top:1px solid var(--l26-line)}
@media(max-width:900px){.l26-split{grid-template-columns:1fr}.l26-split + .l26-split,.l26-pair + .l26-split,.l26-grid + .l26-split,.l26-wrap > p + .l26-split{margin-top:40px;padding-top:40px}}

/* ---------- Haeufige Fragen zweispaltig (zwei unabhaengige Spalten fuer aufklappbare Fragen) ---------- */
body.l26 .l26-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px var(--l26-gap);align-items:start;max-width:none}
.l26-faq__col{display:flex;flex-direction:column;gap:12px;min-width:0}
body.l26-lp .l26-faq__col{gap:10px}
@media(max-width:900px){body.l26 .l26-faq{grid-template-columns:1fr}}

/* ---------- Weiterfuehrende Links + Fussnote, mittig ---------- */
.l26-links{text-align:center}
body.l26 .l26-links > h2{font-size:22px!important;margin-bottom:18px!important}
.l26-links > div{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
body.l26 .l26-links > div > a{margin:0!important}
body.l26 .l26-links > p{max-width:860px;margin:36px auto 0!important}

/* ---------- Ratgeber: Lesespalte 800 px (wie bisher, Tabellen passen) + mitlaufende Seitenspalte 400 px ---------- */
.l26-artikel{display:grid;grid-template-columns:minmax(0,800px) minmax(0,1fr);column-gap:80px;align-items:start}
.l26-artikel__text{grid-column:1;grid-row:1;min-width:0}
.l26-artikel__text > :first-child{margin-top:0!important}
/* Seitenspalte so hoch wie der Text; mitlaufend ist der Angebots-Kasten (passt in jede Fensterhoehe), das Inhaltsverzeichnis bleibt oben */
.l26-artikel__seite{grid-column:2;grid-row:1;align-self:stretch;display:flex;flex-direction:column;gap:18px;min-width:0}
.l26-artikel__seite > :last-child{position:sticky;top:96px}
body.l26 .l26-artikel__seite > *{margin:0!important}
body.l26 .l26-artikel__seite .cta,
body.l26 .l26-artikel__seite .cta2{display:block;text-align:center;margin:10px 0 0!important}
body.l26 .l26-artikel__seite p{margin-bottom:8px!important}
/* Einstieg der Ratgeber im selben Spaltenraster wie Lesespalte + Seitenspalte */
.l26-intro--artikel{grid-template-columns:minmax(0,800px) minmax(0,1fr);column-gap:80px}
/* niedrige Bildschirme: Seitenspalte nicht mitlaufen lassen, damit nichts abgeschnitten wird */
@media(max-height:520px){.l26-artikel__seite > :last-child{position:static}}
/* hohe Fenster (Spalte bis ca. 760 px passt ganz hinein): ganze Seitenspalte samt Inhaltsverzeichnis mitlaufend */
@media(min-width:1101px) and (min-height:900px){.l26-artikel__seite{position:sticky;top:96px;align-self:start}.l26-artikel__seite > :last-child{position:static}}
@media(max-width:1100px){
  .l26-artikel{grid-template-columns:minmax(0,1fr)}
  .l26-artikel__seite,.l26-artikel__text{grid-column:1;grid-row:auto}
  .l26-artikel__text{max-width:820px}
  .l26-artikel__seite{position:static;align-self:start;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;margin-bottom:44px}
  .l26-artikel__seite > :last-child{position:static}
  .l26-intro--artikel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--l26-spalt)}
  /* Ratgeber ohne Kopfbild (h1 steht in der Lesespalte): erst Ueberschrift und Text, Seitenspalte danach */
  .l26-artikel:has(> .l26-artikel__text h1){row-gap:48px}
  .l26-artikel:has(> .l26-artikel__text h1) > .l26-artikel__text{grid-row:1}
  .l26-artikel:has(> .l26-artikel__text h1) > .l26-artikel__seite{grid-row:2;margin-bottom:0}
}
@media(max-width:900px){.l26-intro--artikel{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){
  .l26-artikel__seite{grid-template-columns:minmax(0,1fr)}
  /* lange Ratgeber-Titel: etwas kleiner, damit lange Woerter (z. B. Verteidigungsindustrie) nicht mitten im Wort umbrechen */
  body.l26 .l26-intro--artikel h1,body.l26 .l26-artikel__text h1{font-size:clamp(22px,7vw,32px)!important;-webkit-hyphens:auto;hyphens:auto}
}

/* ---------- Abschluss-CTA ueber die volle Breite ---------- */
.l26-cta{position:relative;background:#24272B;overflow:hidden}
.l26-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 340px at 80% 20%,rgba(255,255,255,.08),transparent),radial-gradient(500px 300px at 15% 90%,rgba(255,255,255,.05),transparent);pointer-events:none}
body.l26 .l26-cta > .l26-wrap{position:relative;display:flex;justify-content:space-between;align-items:center;gap:28px var(--l26-spalt);padding-top:64px;padding-bottom:64px}
.l26-cta__text{max-width:720px;min-width:0}
body.l26 .l26-cta__text > :first-child{font-size:32px!important;line-height:1.18!important;margin:0!important}
body.l26 .l26-cta__text > p{margin:12px 0 0!important}
.l26-cta__knoepfe{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}
body.l26 .l26-cta .l26-cta__knoepfe > *{margin:0!important}
@media(max-width:900px){body.l26 .l26-cta > .l26-wrap{flex-direction:column;align-items:flex-start;padding-top:48px;padding-bottom:48px}body.l26 .l26-cta__text > :first-child{font-size:26px!important}}
@media(max-width:640px){.l26-cta__knoepfe{width:100%;flex-direction:column}body.l26 .l26-cta .l26-cta__knoepfe > *{text-align:center}}

/* ---------- Werbeseiten (lp-*): eigenes Seitensystem, nur Raster angleichen ---------- */
@media(min-width:901px){
  body.l26-lp .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--l26-spalt)}
  body.l26-lp .box ul{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px}
}
body.l26-lp .leiste .wrap > div{text-align:center}
body.l26-lp .leiste .wrap > div + div{border-left:1px solid var(--l26-line)}
@media(max-width:900px){body.l26-lp .leiste .wrap > div:nth-child(odd){border-left:0}}
body.l26-lp .hero-grid > *{min-width:0}
/* Kopfzeile wie Startseite: volle Fensterbreite, Logo am Rand (48 px), nicht an der 1280er Kante */
body.l26-lp .top > .wrap{max-width:none}
@media(max-width:640px){body.l26-lp{--l26-pad:16px}}
@media(max-width:400px){body.l26-lp .typen{grid-template-columns:minmax(0,1fr)}body.l26-lp .typ > div:first-child{min-width:0;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}}

/* ---------- sehr schmale Telefone (bis 370 px): Abschnittsueberschriften etwas kleiner, damit lange Woerter nicht mitten im Wort umbrechen ---------- */
@media(max-width:370px){body.l26 .l26-head > h2,body.l26 .l26-pair > * > h2:first-child,body.l26 .l26-split > h2{font-size:21px!important}}

/* =====================================================================
   Volle Breite (26.10.2026, Oskar: "3/3 des Bildschirms nutzen")
   Inhalt rund 2/3 der Fensterbreite: clamp(1280px,66.667vw,1760px) (Korrektur 27.10.2026, vorher 2400 px).
   Werte identisch mit breite-2026.css. Werbeseiten (l26-lp) bleiben unveraendert.
   ===================================================================== */
:root{--b26-pad:clamp(20px,4vw,72px);--b26-inhalt:clamp(1280px,66.667vw,1760px);--b26-max:calc(var(--b26-inhalt) + 2 * var(--b26-pad));--b26-text:760px}
@media(min-width:981px){body.l26:not(.l26-lp){--l26-pad:var(--b26-pad)}}
@media(min-width:1600px){body.l26:not(.l26-lp){--l26-spalt:clamp(56px,4vw,112px);--l26-sec:96px}}
body.l26:not(.l26-lp) .l26-wrap,
body.l26:not(.l26-lp) .wrap{max-width:var(--b26-max)}
body.l26:not(.l26-lp) > nav[aria-label="Brotkrumen"],
body.l26:not(.l26-lp) > footer{max-width:var(--b26-max)!important}

/* Fliesstext bleibt lesbar (ca. 760 px), auch wenn die Spalte breiter wird */
body.l26:not(.l26-lp) .l26-intro > div:not(.l26-intro__bild) > p,
body.l26:not(.l26-lp) .l26-pair > * > p,
body.l26:not(.l26-lp) .l26-split > div > p,
body.l26:not(.l26-lp) .l26-split > div > ul,
body.l26:not(.l26-lp) .l26-split > div > ol{max-width:var(--b26-text)}
body.l26:not(.l26-lp) .l26-head > p{max-width:var(--b26-text)}

/* Produkt-Einstieg: Bild wird nicht breiter als seine Datei hergibt (scharf bleiben) */
@media(min-width:1600px){
  body.l26:not(.l26-lp) .l26-intro:not(.l26-intro--artikel){grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  body.l26:not(.l26-lp) .l26-intro:not(.l26-intro--artikel) .l26-intro__bild{max-width:1100px;justify-self:end;width:100%}
}

/* Kachelraster: 4 Spalten nur bei 4 oder 8 Kacheln ab 1600 px (Reihen voll und symmetrisch) */
@media(min-width:1600px){
  body.l26:not(.l26-lp) .l26-grid--3:has(> :nth-child(4):last-child),
  body.l26:not(.l26-lp) .l26-grid--3:has(> :nth-child(8):last-child){--n:4}
}

/* Ratgeber: dreispaltige Fassung (Inhaltsverzeichnis | Text | Angebot) entfernt 27.10.2026, Aufbau wie 21.10. */

/* ---------- Regionsseiten (container-<stadt>.html), zentral seit 27.10.2026 ---------- */
/* Gleiche Bauart aller 15 Stadtseiten (Klassen r26-*): Antwortkarte zweispaltig, Einsatz-Links buendig, Karten Lieferung/Baurecht,
   Orte-Raster, Weitere Lieferregionen als Raster 5 x 3. Tablet-Regeln fuer das 9er-Produktraster nur auf Stadtseiten (:has(.r26-antwort)). Vorher wortgleich als Seiten-<style> auf allen 15 Seiten (T5/T6). */
.r26-antwort{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--l26-spalt)}
.r26-einsatz .r26-weiter a{font-weight:600}
@media(min-width:1101px){.r26-einsatz > .l26-feat{display:flex;flex-direction:column}body.l26 .r26-einsatz .r26-weiter{margin-top:auto!important;padding-top:14px}}
@media(min-width:561px) and (max-width:1100px){body.l26 .r26-einsatz{--n:1}.r26-einsatz > .l26-feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:var(--l26-spalt);align-content:start}.r26-einsatz > .l26-feat > :first-child{grid-row:1 / span 2}body.l26 .r26-einsatz > .l26-feat > p{grid-column:2;margin-top:0!important}body.l26 .r26-einsatz > .l26-feat > p + p{margin-top:8px!important}}
.r26-karte{padding:28px 32px;display:flex;flex-direction:column}
.r26-karte > p{margin:0}
.r26-karte > p + p{margin-top:12px}
.r26-karte > p:nth-last-child(2){margin-bottom:20px}
body.l26 .r26-karte > .r26-karte__links{margin-top:auto;padding-top:16px;border-top:1px solid var(--l26-line);font-size:14px;line-height:1.7}
.r26-orte{display:flex;flex-wrap:wrap;gap:8px}
body.l26 .r26-orte > .pill{margin:0}
@media(min-width:641px){.r26-orte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.r26-orte > .pill{text-align:center}}
@media(min-width:1240px){.r26-orte{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.r26-antwort{grid-template-columns:minmax(0,1fr)}.r26-antwort > p + p{margin-top:12px}}
@media(max-width:640px){.r26-karte{padding:22px 20px}}
@media(min-width:561px) and (max-width:699px){body.l26:has(.r26-antwort) .l26-grid--3:has(> :nth-child(9):last-child){--n:1}}
@media(min-width:700px) and (max-width:900px){body.l26:has(.r26-antwort) .l26-grid--3:has(> :nth-child(9):last-child){--n:3}body.l26:has(.r26-antwort) .l26-grid--3:has(> :nth-child(9):last-child) .prod > div{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}}
body.l26 .l26-links > div.r26-regionen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-width:1040px;margin:0 auto}
.r26-regionen > .pill{text-align:center}
body.l26 .l26-grid--3.r26-einsatz{row-gap:var(--l26-spalt)}
@media(max-width:900px){body.l26 .l26-links > div.r26-regionen{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){body.l26 .l26-links > div.r26-regionen{grid-template-columns:repeat(2,minmax(0,1fr))}.r26-regionen > :last-child{grid-column:1/-1}}

/* Ratgeber ab 2000 px: Lesespalte 800 px links, Seitenspalte und Einstiegsbild hoechstens 520 px rechts an der Inhaltskante (Feinschliff 27.10.2026, vorher Stilzeile "ratgeber-breit" in allen 18 Ratgebern) */
@media(min-width:2000px){body.l26 .l26-artikel,body.l26 .l26-intro--artikel{grid-template-columns:800px minmax(0,520px);justify-content:space-between}}