.sz-abschnitt { padding-block: var(--sz-raum-8); }
.sz-abschnitt + .sz-abschnitt:not([class*="sz-grund--"]) { padding-block-start: 0; }
.sz-abschnitt__raster { display: grid; gap: var(--sz-raum-6); align-items: start; }
.sz-abschnitt__inhalt { display: grid; gap: var(--sz-raum-5); }
.sz-abschnitt__listentitel { font-weight: 600; color: var(--sz-blau); margin-block-end: var(--sz-raum-3); }
.sz-haken { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sz-raum-3); max-inline-size: var(--sz-breite-text); }
.sz-haken li { display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--sz-raum-3); align-items: start; }
.sz-haken svg { inline-size: 2.2rem; block-size: 2.2rem; color: var(--sz-orange-text); margin-block-start: .2rem; }
.sz-grund--blau .sz-haken svg { color: var(--sz-orange); }
.sz-abschnitt__bild { margin: 0; }
.sz-abschnitt__bild-datei { inline-size: 100%; border-radius: var(--sz-rund-m); background: var(--sz-hell); }
.sz-abschnitt__bild figcaption { font-size: var(--sz-text-xs); color: var(--sz-tinte-leise); margin-block-start: var(--sz-raum-2); }
@media (min-width: 62rem) {
	.sz-abschnitt[data-bild] .sz-abschnitt__raster { grid-template-columns: 1.2fr 1fr; gap: var(--sz-raum-7); }
	.sz-abschnitt[data-bild="links"] .sz-abschnitt__bild { order: -1; }
	.sz-abschnitt[data-bild="links"] .sz-abschnitt__raster { grid-template-columns: 1fr 1.2fr; }
}
/* Bild unten über die volle Breite, Bild hochkant in schmalerer Spalte, Text nach dem Inhalt (Ben 07.10.2026). */
.sz-abschnitt[data-bild="unten"] .sz-abschnitt__raster { grid-template-columns: minmax(0, 1fr) !important; }
.sz-abschnitt[data-bild="unten"] .sz-abschnitt__bild { max-inline-size: none !important; margin-inline: 0 !important; }
.sz-abschnitt[data-bild="unten"] .sz-abschnitt__bild::before { display: none; }
.sz-abschnitt[data-bildformat="hoch"] .sz-abschnitt__bild-datei { inline-size: 100%; block-size: auto; object-fit: contain; }
@media (min-width: 62rem) { .sz-abschnitt[data-bildformat="hoch"] .sz-abschnitt__raster { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important; } .sz-abschnitt[data-bildformat="hoch"] .sz-abschnitt__bild { max-inline-size: 36rem; } }
/* Hochformat: Bildspalte so breit wie das Bild, sonst klafft eine Lücke zwischen Bild und Text, besonders wenn der Wechsel das Bild nach links legt (Oliver 07.10.2026, KRA «Ausführung passend zu Ihren Anforderungen»). */
@media (min-width: 62rem) { .sz-abschnitt[data-bildformat="hoch"] .sz-abschnitt__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 36rem) !important; } .sz-abschnitt[data-bild="links"][data-bildformat="hoch"] .sz-abschnitt__raster { grid-template-columns: minmax(0, 36rem) minmax(0, 1fr) !important; } }
.sz-abschnitt__nachtext { font-size: var(--sz-text-s); }
.sz-zweispaltig { display: grid; gap: var(--sz-raum-5); }
@media (min-width: 48rem) { .sz-zweispaltig { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sz-raum-7); } }
.sz-zweispaltig h3, .sz-abschnitt .sz-text h3 { font-size: var(--sz-text-m); color: var(--sz-blau); margin-block-end: var(--sz-raum-2); }
.sz-hervorgehoben { padding: var(--sz-raum-5); border-inline-start: 4px solid var(--sz-orange); background: var(--sz-hell); }
.sz-kennung { font-size: var(--sz-text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sz-orange-text); }
.sz-unterblock { margin-block-start: var(--sz-raum-5); }
.sz-unterblock h4 { font-size: var(--sz-text-s); color: var(--sz-blau); margin-block-end: var(--sz-raum-2); }
/* Über uns (Ben 07.10.2026): Slogan, Unterzeile, Maschinenpark in vier Feldern, Bildpaar, Kennzeichnung «In Planung». */
.sz-slogan { font-size: var(--sz-text-l); font-weight: 700; color: var(--sz-orange-text); line-height: var(--sz-zeile-eng); text-wrap: balance; }
.sz-unterzeile { font-size: var(--sz-text-l); font-weight: 600; color: var(--sz-blau); line-height: var(--sz-zeile-eng); }
/* Maschinenpark mit mehr Luft (Oliver 07.10.2026: «zu dicht»): zwei Spalten, mehr Innenabstand, Listen locker. */
.sz-felder { display: grid; gap: var(--sz-raum-6); }
@media (min-width: 48rem) { .sz-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sz-raum-6) var(--sz-raum-7); } }
.sz-felder > div { padding: var(--sz-raum-5) var(--sz-raum-6) var(--sz-raum-6); border-block-start: 3px solid var(--sz-orange); background: var(--sz-hell); }
.sz-felder h4 { font-size: var(--sz-text-l); color: var(--sz-blau); margin-block-end: var(--sz-raum-4); }
.sz-felder ul { margin: 0; padding-inline-start: 2rem; display: grid; gap: var(--sz-raum-3); }
.sz-felder li { line-height: 1.5; }
.sz-abschnitt:has(.sz-felder, .sz-panorama) .sz-abschnitt__inhalt { max-inline-size: none; }
/* Drei Felder (KRA-Eignung, Oliver 07.10.2026): volle Breite nutzen, Fließtext davor und danach bleibt lesbar schmal. */
@media (min-width: 64rem) { .sz-felder.ist-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sz-abschnitt .sz-felder h3 { font-size: var(--sz-text-l); color: var(--sz-blau); margin-block-end: var(--sz-raum-4); }
.sz-felder p { margin: 0; line-height: 1.5; }
.sz-felder ul li + li { margin-block-start: 0; }
.sz-bildpaar { display: grid; gap: var(--sz-raum-5); align-items: start; }
/* Gleiche Höhe: Breite je Bild nach Seitenverhältnis (Oliver 07.10.2026). */
@media (min-width: 48rem) { .sz-bildpaar { display: flex; align-items: flex-start; } .sz-bildpaar__bild { flex: var(--sz-verh, 1) 1 0; min-inline-size: 0; } }
.sz-bildpaar__bild { margin: 0; }
.sz-bildpaar__datei { display: block; inline-size: 100%; block-size: auto; }
.sz-bildpaar__bild figcaption { font-size: var(--sz-text-s); color: var(--sz-tinte-leise); padding-block-start: var(--sz-raum-3); }
.sz-abschnitt:has(.sz-bildpaar) .sz-abschnitt__inhalt { max-inline-size: none; }
.sz-plan { display: inline-block; padding: .2rem 1.2rem; border-radius: 999px; background: #FDECD0; color: var(--sz-orange-text); font-size: var(--sz-text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sz-abschnitt[data-bild="unten"] .sz-abschnitt__bild { max-inline-size: 96rem !important; }

/* Panorama (KRA-Eignung, Oliver 07.10.2026 «try a different layout»): Foto über die volle Breite als flacher Streifen
   zwischen Einstieg und Feldern; kein Leerraum neben kurzem Text. */
.sz-panorama { margin: var(--sz-raum-4) 0; } /* Luft zu Text und Feldern (Oliver 07.10.2026) */
.sz-panorama__datei { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 55%; }
@media (min-width: 48rem) { .sz-panorama__datei { aspect-ratio: 3 / 1; } }

/* Logoleiste (Oliver 07.10.2026): Firmen im Verbund nebeneinander, Logo einheitlich hoch. */
.sz-logoleiste { list-style: none; margin: var(--sz-raum-4) 0 0; padding: 0; display: grid; gap: var(--sz-raum-5); }
@media (min-width: 48rem) { .sz-logoleiste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sz-logoleiste__eintrag { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sz-raum-2); block-size: 100%; padding: var(--sz-raum-5); background: var(--sz-hell); border-block-start: 3px solid var(--sz-orange); color: var(--sz-tinte); text-decoration: none; }
.sz-logoleiste__logofeld { display: flex; align-items: center; block-size: 8rem; margin-block-end: var(--sz-raum-3); }
.sz-logoleiste__logo { display: block; block-size: 5.6rem; inline-size: auto; max-inline-size: 100%; object-fit: contain; object-position: left center; }
.sz-logoleiste__eintrag .sz-logoleiste__name { margin: 0; color: var(--sz-blau); font-size: var(--sz-text-l); line-height: 1.25; }
.sz-logoleiste__eintrag span { color: var(--sz-tinte-leise); font-size: var(--sz-text-s); line-height: 1.55; }
.sz-logoleiste__knopf { margin-block-start: auto; display: inline-flex; align-items: center; gap: .8rem; min-block-size: 4.4rem; padding: 1rem 2rem; border: 1px solid var(--sz-blau); color: var(--sz-blau); font-weight: 600; font-size: var(--sz-text-s); }
.sz-logoleiste__eintrag > span:not(.sz-logoleiste__knopf):not(.sz-logoleiste__logofeld) { margin-block-end: var(--sz-raum-4); }
.sz-logoleiste__knopf::after { content: "→"; }
a.sz-logoleiste__eintrag:hover .sz-logoleiste__knopf { background: var(--sz-blau); color: var(--sz-invers); }
/* Firmenkarten zentriert und ausgeglichen (Oliver 07.10.2026). */
.sz-logoleiste__eintrag { align-items: center; text-align: center; padding-inline: var(--sz-raum-6); }
.sz-logoleiste__logofeld { justify-content: center; inline-size: 100%; }
.sz-logoleiste__logo { object-position: center; }
.sz-logoleiste__eintrag .sz-logoleiste__name, .sz-logoleiste__eintrag > span:not(.sz-logoleiste__knopf):not(.sz-logoleiste__logofeld) { max-inline-size: 38ch; text-wrap: balance; }
.sz-logoleiste__eintrag { padding-block-end: var(--sz-raum-6); } /* etwas mehr Luft unter dem Knopf (Oliver 07.10.2026) */
