/* * Alle Regeln tragen .sz-richtung-werk davor: Komponenten-CSS wird erst beim Rendern eingereiht und * steht damit spaeter im Dokument; eine Klasse mehr gewinnt unabhaengig von der Reihenfolge. * * Richtung «werk», 14.09.2026. Vorbilder: kanadevia-inova.com (Fotoaufmacher mit Verlauf), * vjt.com (grosse Titel, ein Akzentwort), hadrian.co (Linienraster auf Dunkelblau, Monoschrift), * endress.com (zweistufige Kopfzeile, Filterknoepfe). Ueberschreibt Tokens und Komponenten. * Orange nur noch fuer den Hauptknopf, das Akzentwort und den Express-Punkt. */ :root { --sz-breite: 148rem; --sz-rand: clamp(2rem, 0.072rem + 4.944vw, 8rem); --sz-text-xl: clamp(2.4rem, 2.05rem + 0.899vw, 3.2rem); --sz-text-2xl: clamp(3.2rem, 2.324rem + 2.247vw, 5.2rem); --sz-text-3xl: clamp(3.6rem, 1.6rem + 5.6vw, 8.8rem); /* Handy ca. 38 px statt 42 (Prüflauf 07.10.2026), Desktop unverändert bei 8.8rem */ --sz-raum-8: clamp(6.4rem, 3.596rem + 7.19vw, 12.8rem); --sz-rund-s: 2px; --sz-rund-m: 2px; /* Oliver 14.09.2026: keine Monoschrift. Beschriftungen in Fira Sans, Ziffern tabellarisch. */ --sz-schrift-mono: var(--sz-schrift); --sz-linie-hell: rgb(255 255 255 / 0.16); --sz-linie-raster: rgb(255 255 255 / 0.07); --sz-raster: linear-gradient(var(--sz-linie-raster) 1px, transparent 1px), linear-gradient(90deg, var(--sz-linie-raster) 1px, transparent 1px); } .sz-richtung-werk :where(h1, h2) { letter-spacing: -0.025em; } .sz-richtung-werk :where(h2) { line-height: 1.05; } .sz-richtung-werk .sz-kopf { max-width: 96rem; gap: var(--sz-raum-4); } .sz-richtung-werk .sz-kopf__vorspann { font-size: var(--sz-text-l); } /* Augenbraue: Monoschrift statt orangem Strich */ .sz-richtung-werk .sz-augenbraue { font-family: var(--sz-schrift-mono); font-size: var(--sz-text-xs); font-weight: 500; letter-spacing: 0.08em; color: var(--sz-tinte-leise); } .sz-richtung-werk .sz-augenbraue::before { inline-size: 1.6rem; block-size: 1px; background: currentColor; } .sz-richtung-werk .sz-grund--blau .sz-augenbraue { color: var(--sz-invers-leise); } .sz-richtung-werk .sz-akzent { color: var(--sz-orange); } /* Knoepfe: kantig, mit Pfeil */ .sz-richtung-werk .sz-knopf { font-size: var(--sz-text-s); letter-spacing: 0.01em; padding: 1.2rem 2.4rem; } .sz-richtung-werk .sz-knopf--primaer::after, .sz-richtung-werk .sz-knopf--sekundaer::after { content: ""; inline-size: 1.6rem; block-size: 1.6rem; background: currentColor; flex: none; transition: transform .15s ease; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .sz-richtung-werk .sz-knopf:hover::after { transform: translateX(3px); } /* Dunkle Flaechen mit Linienraster */ /* Raster ueberall mittig verankert, damit die senkrechten Linien ueber Abschnittsgrenzen durchlaufen; Flaechen vor dem Fuss unten, der Fuss oben, so teilen sie sich die Grenzlinie (Oliver 28.09.2026). */ .sz-richtung-werk .sz-grund--blau { background-color: var(--sz-blau); background-image: var(--sz-raster); background-size: 9.6rem 9.6rem; background-position: center bottom; } /* ---------------- Kopfzeile zweistufig ---------------- */ .sz-richtung-werk .sz-kopfzeile { border: 0; box-shadow: 0 1px 0 var(--sz-linie); } .sz-richtung-werk .sz-kopfzeile__leiste { background: var(--sz-blau-tief); color: var(--sz-invers); font-size: var(--sz-text-xs); } .sz-richtung-werk .sz-kopfzeile__leiste-reihe { display: flex; align-items: center; justify-content: space-between; gap: var(--sz-raum-5); block-size: 4.8rem; overflow: hidden; } .sz-richtung-werk .sz-kopfzeile__leiste a { color: var(--sz-invers); text-decoration: none; display: inline-flex; align-items: center; gap: var(--sz-raum-2); min-block-size: 3.2rem; } .sz-richtung-werk .sz-kopfzeile__leiste a:hover span { text-decoration: underline; } .sz-richtung-werk .sz-kopfzeile__leiste a:focus-visible { outline-color: var(--sz-orange); } .sz-richtung-werk .sz-kopfzeile__leiste svg { inline-size: 1.5rem; block-size: 1.5rem; } .sz-richtung-werk .sz-kopfzeile__fakten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sz-raum-2) var(--sz-raum-6); font-family: var(--sz-schrift-mono); letter-spacing: 0.02em; } .sz-richtung-werk .sz-kopfzeile__fakten li { display: inline-flex; align-items: center; gap: var(--sz-raum-2); min-block-size: 3.2rem; white-space: nowrap; } .sz-richtung-werk .sz-kopfzeile__punkt { inline-size: 0.8rem; block-size: 0.8rem; border-radius: 50%; background: var(--sz-orange); flex: none; box-shadow: 0 0 0 4px rgb(238 155 35 / 0.2); } .sz-richtung-werk .sz-kopfzeile__leiste-wege { display: flex; align-items: center; gap: var(--sz-raum-5); } .sz-richtung-werk .sz-kopfzeile__leiste .sz-sprachwahl__knopf { min-block-size: 3.2rem; border-color: var(--sz-linie-hell); color: var(--sz-invers); font-family: var(--sz-schrift-mono); font-size: var(--sz-text-xs); } .sz-richtung-werk .sz-kopfzeile__leiste .sz-sprachwahl__liste { font-size: var(--sz-text-s); } .sz-richtung-werk .sz-kopfzeile__leiste .sz-sprachwahl__liste a { color: var(--sz-blau); } .sz-richtung-werk .sz-kopfzeile__reihe { min-block-size: 9.6rem; padding-block: 1.2rem; gap: var(--sz-raum-6); } .sz-richtung-werk .sz-kopfzeile__logo-bild { inline-size: clamp(15rem, 12.6rem + 4vw, 20rem); } .sz-richtung-werk .sz-kopfzeile__schalter { border-width: 1px; } .sz-richtung-werk .sz-nur-mobil { display: contents; } @media (max-width: 61.99rem) { .sz-richtung-werk .sz-kopfzeile__leiste .sz-kopfzeile__telefon, .sz-richtung-werk .sz-kopfzeile__leiste .sz-kopfzeile__mail { display: none; } .sz-richtung-werk .sz-kopfzeile__fakten { font-size: 1.2rem; gap: var(--sz-raum-2) var(--sz-raum-4); } } /* Handy: ein Fakt in Kurzform, damit die Leiste einzeilig bleibt (Oliver 28.09.2026). */ .sz-richtung-werk .sz-kopfzeile__fakt-kurz { display: none; } /* Slogan in der oberen Leiste statt der zwei Fakten (die stehen im Aufmacher ohnehin), Schriftfamilie der Seite, orange. Erst ab 1200 px; darunter zeigt die Leiste wie bisher die Fakten (Oliver 05.10.2026: mit beidem zu voll). */ .sz-richtung-werk .sz-kopfzeile__fakten .sz-kopfzeile__slogan { font-family: var(--sz-schrift); font-weight: 600; color: var(--sz-invers); } /* weiß, Orange nur für Hervorhebungen (Oliver 07.10.2026) */ @media (min-width: 75rem) { .sz-richtung-werk .sz-kopfzeile__fakten > li:not(.sz-kopfzeile__slogan) { display: none; } } @media (max-width: 74.99rem) { .sz-richtung-werk .sz-kopfzeile__fakten .sz-kopfzeile__slogan { display: none; } } @media (max-width: 47.99rem) { .sz-richtung-werk .sz-kopfzeile__fakten .sz-kopfzeile__fakt-zweit { display: none; } .sz-richtung-werk .sz-kopfzeile__fakt-lang { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } .sz-richtung-werk .sz-kopfzeile__fakt-kurz { display: inline; } } @media (min-width: 62rem) { .sz-richtung-werk .sz-nur-mobil { display: none; } .sz-richtung-werk .sz-kopfzeile__paneel { gap: clamp(2.4rem, -1.6rem + 4vw, 6.4rem); } .sz-richtung-werk .sz-menue__liste { gap: clamp(2.4rem, 0.4rem + 2.2vw, 4.8rem); } .sz-richtung-werk .sz-menue__liste a { min-block-size: 8.8rem; font-weight: 500; } .sz-richtung-werk .sz-menue__liste .current-menu-item > a, .sz-richtung-werk .sz-menue__liste .current-menu-ancestor > a, .sz-richtung-werk .sz-menue__liste .current-page-ancestor > a { box-shadow: inset 0 -3px 0 var(--sz-blau); } /* Hover nutzt dieselbe Linie wie der aktive Punkt, nur leiser. Vorher kam eine zweite Unterstreichung dazu (Oliver 16.09.2026). */ .sz-richtung-werk .sz-menue__liste a:hover, .sz-richtung-werk .sz-menue__liste a:focus-visible { color: var(--sz-blau); text-decoration: none; box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--sz-blau) 45%, transparent); } .sz-richtung-werk .sz-menue__liste .current-menu-item > a:hover, .sz-richtung-werk .sz-menue__liste .current-menu-ancestor > a:hover, .sz-richtung-werk .sz-menue__liste .current-page-ancestor > a:hover { box-shadow: inset 0 -3px 0 var(--sz-blau); } } @media (min-width: 62rem) and (max-width: 75rem) { .sz-richtung-werk .sz-kopfzeile__leiste .sz-kopfzeile__mail span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } /* ---------------- Aufmacher: Foto bildschirmbreit, Verlauf, grosser Titel ---------------- */ .sz-richtung-werk .sz-aufmacher { position: relative; isolation: isolate; overflow: hidden; background: var(--sz-blau); color: var(--sz-invers); padding: 0; } .sz-richtung-werk .sz-aufmacher__raster { position: static; grid-template-columns: 1fr !important; align-items: start; min-block-size: clamp(44rem, 30rem + 30vh, 76rem); padding-block: var(--sz-raum-7) var(--sz-raum-7); } .sz-richtung-werk .sz-aufmacher__bild { position: absolute; inset: 0; z-index: 0; margin: 0; max-inline-size: none; } .sz-richtung-werk .sz-aufmacher__bild-datei { inline-size: 100%; block-size: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; } .sz-richtung-werk .sz-aufmacher::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(0 36 58 / 0.95) 0%, rgb(0 48 79 / 0.86) 36%, rgb(0 48 79 / 0.35) 72%, rgb(0 48 79 / 0.12) 100%), linear-gradient(0deg, rgb(0 36 58 / 0.55) 0%, transparent 50%); } .sz-richtung-werk .sz-aufmacher[data-variante="schlicht"]::before { background: none; } .sz-richtung-werk .sz-aufmacher[data-variante="schlicht"] .sz-aufmacher__merkmale li { background: none; } .sz-richtung-werk .sz-aufmacher[data-variante="schlicht"] { background-image: var(--sz-raster); background-size: 9.6rem 9.6rem; background-position: center bottom; } .sz-richtung-werk .sz-aufmacher[data-variante="schlicht"] .sz-aufmacher__raster { min-block-size: clamp(32rem, 24rem + 16vh, 48rem); } .sz-richtung-werk .sz-aufmacher__text { position: relative; z-index: 2; max-inline-size: 110rem; gap: var(--sz-raum-5); } .sz-richtung-werk .sz-aufmacher__titel { max-inline-size: 11.5em; color: var(--sz-invers); font-size: var(--sz-text-3xl); line-height: 1.02; font-weight: 600; } .sz-richtung-werk .sz-aufmacher[data-variante="schlicht"] .sz-aufmacher__titel { font-size: var(--sz-text-2xl); max-inline-size: 15em; } .sz-richtung-werk .sz-aufmacher .sz-augenbraue, .sz-richtung-werk .sz-aufmacher__vorspann { color: var(--sz-invers-leise); } .sz-richtung-werk .sz-aufmacher__vorspann { max-inline-size: 58ch; } .sz-richtung-werk .sz-aufmacher__merkmale { gap: 0; } .sz-richtung-werk .sz-aufmacher__merkmale li { background: none; border: 0; border-inline-start: 1px solid var(--sz-linie-hell); border-radius: 0; padding: 0.2rem var(--sz-raum-4); color: var(--sz-invers); font-family: var(--sz-schrift-mono); font-size: var(--sz-text-xs); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; } .sz-richtung-werk .sz-aufmacher__merkmale li:first-child { border: 0; padding-inline-start: 0; } .sz-richtung-werk .sz-aufmacher .sz-knopf--sekundaer { border-color: var(--sz-invers); color: var(--sz-invers); } .sz-richtung-werk .sz-aufmacher .sz-knopf--sekundaer:hover { background: var(--sz-invers); color: var(--sz-blau); } .sz-richtung-werk .sz-aufmacher :where(a, button):focus-visible { outline-color: var(--sz-orange); } .sz-richtung-werk .sz-brotkrumen--eingebettet .sz-brotkrumen__liste li { color: var(--sz-invers-leise); font-family: var(--sz-schrift-mono); font-size: var(--sz-text-xs); } .sz-richtung-werk .sz-brotkrumen--eingebettet .sz-brotkrumen__liste a { color: var(--sz-invers); } .sz-richtung-werk .sz-brotkrumen--eingebettet .sz-brotkrumen__liste li + li::before { border-color: var(--sz-invers-leise); } @media (max-width: 47.99rem) { .sz-richtung-werk .sz-aufmacher::before { background: linear-gradient(0deg, rgb(0 36 58 / 0.96) 0%, rgb(0 48 79 / 0.88) 60%, rgb(0 48 79 / 0.6) 100%); } .sz-richtung-werk .sz-aufmacher__merkmale { row-gap: var(--sz-raum-2); } } /* ---------------- Kacheln ---------------- */ .sz-richtung-werk .sz-kacheln__rahmen { gap: var(--sz-raum-7); } .sz-richtung-werk .sz-kacheln__liste { gap: var(--sz-raum-7) clamp(2rem, 1.2rem + 1.4vw, 3.2rem); } .sz-richtung-werk .sz-kacheln__karte, .sz-richtung-werk .sz-grund--hell .sz-kacheln__karte { border: 0; border-radius: 0; background: transparent; overflow: visible; } .sz-richtung-werk .sz-kacheln__bild { aspect-ratio: 4 / 3; border-radius: 0; transition: transform .4s ease; } .sz-richtung-werk .sz-kacheln__karte--link { overflow: hidden; } .sz-richtung-werk .sz-kacheln__karte--link:hover .sz-kacheln__bild { transform: scale(1.03); } .sz-richtung-werk .sz-kacheln__text { padding: var(--sz-raum-4) 0 0; border-block-start: 1px solid var(--sz-linie); margin-block-start: var(--sz-raum-4); } .sz-richtung-werk .sz-kacheln__karte:not(:has(img)) .sz-kacheln__text { margin-block-start: 0; } .sz-richtung-werk .sz-kacheln__titel { font-size: var(--sz-text-xl); font-weight: 600; } .sz-richtung-werk .sz-kacheln__merkmal { font-family: var(--sz-schrift-mono); color: var(--sz-tinte-leise); font-weight: 400; } .sz-richtung-werk .sz-kacheln__pfeil { color: var(--sz-blau); } .sz-richtung-werk .sz-kacheln__karte--link:hover { border-color: transparent; } .sz-richtung-werk .sz-kacheln[data-variante="wege"] .sz-kacheln__liste { gap: 0; border-block-start: 1px solid var(--sz-linie); border-inline-start: 1px solid var(--sz-linie); } .sz-richtung-werk .sz-kacheln[data-variante="wege"] .sz-kacheln__karte { border: 0; border-inline-end: 1px solid var(--sz-linie); border-block-end: 1px solid var(--sz-linie); } .sz-richtung-werk .sz-kacheln[data-variante="wege"] .sz-kacheln__text { border: 0; margin: 0; padding: var(--sz-raum-6) var(--sz-raum-5); min-block-size: 26rem; } .sz-richtung-werk .sz-kacheln[data-variante="wege"] .sz-kacheln__karte--link:hover { background: var(--sz-hell); } .sz-richtung-werk .sz-kacheln__nr { font-family: var(--sz-schrift-mono); font-size: var(--sz-text-s); font-weight: 400; color: var(--sz-tinte-leise); } .sz-richtung-werk .sz-grund--blau .sz-kacheln__karte { background: transparent; } .sz-richtung-werk .sz-grund--blau .sz-kacheln__text, .sz-richtung-werk .sz-grund--blau[data-variante="wege"] .sz-kacheln__liste, .sz-richtung-werk .sz-grund--blau[data-variante="wege"] .sz-kacheln__karte { border-color: var(--sz-linie-hell); } .sz-richtung-werk .sz-grund--blau .sz-kacheln__nr, .sz-richtung-werk .sz-grund--blau .sz-kacheln__merkmal { color: var(--sz-invers-leise); } .sz-richtung-werk .sz-grund--blau .sz-kacheln__pfeil { color: var(--sz-invers); } /* ---------------- Fakten ---------------- */ .sz-richtung-werk .sz-fakten[data-variante="leiste"] { background-color: var(--sz-blau); background-image: var(--sz-raster); background-size: 9.6rem 9.6rem; background-position: center bottom; color: var(--sz-invers); padding-block: var(--sz-raum-8); } .sz-richtung-werk .sz-fakten[data-variante="leiste"] .sz-fakten__liste { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 0; } .sz-richtung-werk .sz-fakten[data-variante="leiste"] .sz-fakten__eintrag { border: 0; border-inline-start: 1px solid var(--sz-linie-hell); padding: var(--sz-raum-2) var(--sz-raum-5); gap: var(--sz-raum-3); justify-content: flex-start; } /* Zahlen auf einer Linie, auch wenn die Beschriftung darunter zwei Zeilen hat (Oliver 16.09.2026). */ .sz-richtung-werk .sz-fakten[data-variante="leiste"] .sz-fakten__liste { align-items: start; } .sz-richtung-werk .sz-fakten[data-variante="leiste"] dd { line-height: 1.1; min-block-size: 1.1em; white-space: nowrap; } .sz-richtung-werk .sz-fakten[data-variante="leiste"] .sz-fakten__liste { grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); } .sz-richtung-werk .sz-fakten[data-variante="leiste"] dd { font-size: var(--sz-text-2xl); font-weight: 600; color: var(--sz-invers); letter-spacing: -0.02em; } .sz-richtung-werk .sz-fakten[data-variante="leiste"] dt { font-family: var(--sz-schrift-mono); font-size: var(--sz-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--sz-invers-leise); } .sz-richtung-werk .sz-fakten[data-variante="liste"] .sz-fakten__eintrag dt { font-family: var(--sz-schrift-mono); font-size: var(--sz-text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sz-tinte-leise); padding-block-start: .4rem; } .sz-richtung-werk .sz-fakten[data-variante="liste"] .sz-fakten__eintrag dd { font-size: var(--sz-text-l); } .sz-richtung-werk .sz-fakten__liste { max-inline-size: 110rem; } /* ---------------- Tabelle und Filter ---------------- */ .sz-richtung-werk .sz-tabelle__rolle { border: 0; border-block-start: 2px solid var(--sz-blau); border-radius: 0; background: transparent; } .sz-richtung-werk .sz-tabelle__tabelle caption { padding-inline: 0; font-family: var(--sz-schrift-mono); font-size: var(--sz-text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--sz-tinte-leise); } .sz-richtung-werk .sz-tabelle__tabelle thead th { background: transparent; color: var(--sz-tinte-leise); font-family: var(--sz-schrift-mono); font-size: var(--sz-text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; border-block-end: 1px solid var(--sz-linie-kraeftig); padding-inline: var(--sz-raum-3); } .sz-richtung-werk .sz-tabelle__tabelle :where(th, td) { padding: var(--sz-raum-3); font-size: var(--sz-text-m); } .sz-richtung-werk .sz-tabelle__tabelle tbody th { font-family: var(--sz-schrift-mono); font-weight: 500; font-size: var(--sz-text-s); } .sz-richtung-werk .sz-tabelle__tabelle tbody tr:nth-child(even) { background: transparent; } .sz-richtung-werk .sz-tabelle__tabelle tbody tr:hover { background: var(--sz-blau-hauch); } .sz-richtung-werk .sz-grund--hell .sz-tabelle__tabelle tbody tr:hover { background: var(--sz-papier); } .sz-richtung-werk .sz-tabelle__suche { max-inline-size: none; grid-template-columns: 1fr; } .sz-richtung-werk .sz-tabelle__suche input { max-inline-size: 56rem; } .sz-richtung-werk .sz-tabelle__suche label { font-family: var(--sz-schrift-mono); font-size: var(--sz-text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--sz-tinte-leise); } .sz-richtung-werk .sz-tabelle__suche input { min-block-size: 5.2rem; font-size: var(--sz-text-l); border-radius: 0; border-width: 0 0 2px; border-color: var(--sz-blau); background: transparent; padding-inline: 0; } .sz-richtung-werk .sz-tabelle__chips { display: flex; flex-wrap: wrap; gap: var(--sz-raum-2); grid-column: 1 / -1; margin-block-start: var(--sz-raum-3); } .sz-richtung-werk .sz-tabelle__chip { display: inline-flex; align-items: center; gap: var(--sz-raum-2); min-block-size: 4rem; padding: 0 var(--sz-raum-4); font: 500 var(--sz-text-s) var(--sz-schrift); color: var(--sz-blau); background: var(--sz-papier); border: 1px solid var(--sz-linie-kraeftig); border-radius: 999px; cursor: pointer; } .sz-richtung-werk .sz-tabelle__chip span { font-family: var(--sz-schrift-mono); font-size: var(--sz-text-xs); color: var(--sz-tinte-leise); } .sz-richtung-werk .sz-tabelle__chip[aria-pressed="true"] { background: var(--sz-blau); border-color: var(--sz-blau); color: var(--sz-invers); } .sz-richtung-werk .sz-tabelle__chip[aria-pressed="true"] span { color: var(--sz-invers-leise); } .sz-richtung-werk .sz-tabelle__treffer { grid-column: 1 / -1; font-family: var(--sz-schrift-mono); font-size: var(--sz-text-s); color: var(--sz-blau); } /* ---------------- Abschnitt, Schritte, FAQ, Handlung, Kontakt ---------------- */ .sz-richtung-werk .sz-abschnitt__bild-datei { border-radius: 0; } .sz-richtung-werk .sz-haken svg, .sz-richtung-werk .sz-grund--blau .sz-haken svg { color: var(--sz-blau); } .sz-richtung-werk .sz-grund--blau .sz-haken svg { color: var(--sz-invers); } .sz-richtung-werk .sz-schritte__schritt { border-block-start: 1px solid var(--sz-linie-kraeftig); padding-block-start: var(--sz-raum-5); } .sz-richtung-werk .sz-schritte__schritt::before { font-family: var(--sz-schrift-mono); font-size: var(--sz-text-s); font-weight: 400; color: var(--sz-tinte-leise); } .sz-richtung-werk .sz-grund--blau .sz-schritte__schritt { border-color: var(--sz-linie-hell); } .sz-richtung-werk .sz-grund--blau .sz-schritte__schritt::before { color: var(--sz-invers-leise); } .sz-richtung-werk .sz-schritte__titel { font-size: var(--sz-text-xl); } .sz-richtung-werk .sz-faq__frage { font-size: var(--sz-text-xl); font-weight: 500; padding-block: var(--sz-raum-5); } .sz-richtung-werk .sz-faq__frage::after { border-color: var(--sz-blau); } .sz-richtung-werk .sz-faq__liste { max-inline-size: 110rem; border-color: var(--sz-linie-kraeftig); } .sz-richtung-werk .sz-handlung { padding-block: var(--sz-raum-8); } .sz-richtung-werk .sz-handlung__titel { font-size: var(--sz-text-2xl); } .sz-richtung-werk .sz-handlung__telefon svg { color: var(--sz-invers); } .sz-richtung-werk .sz-kontakt__karte { border-radius: 0; border: 1px solid var(--sz-linie); border-block-start: 3px solid var(--sz-blau); } .sz-richtung-werk .sz-grund--hell .sz-kontakt__karte { border-color: transparent; border-block-start-color: var(--sz-blau); } .sz-richtung-werk .sz-kontakt__weg svg { color: var(--sz-blau); } .sz-richtung-werk .sz-kontakt__formular-rahmen { border-radius: 0; } /* ---------------- Fusszeile ---------------- */ .sz-richtung-werk .sz-fusszeile { background-color: var(--sz-blau-tief); background-image: var(--sz-raster); background-size: 9.6rem 9.6rem; background-position: center top; } .sz-richtung-werk .sz-fusszeile__wege svg { color: var(--sz-invers-leise); } .sz-richtung-werk .sz-fusszeile__claim { font-family: var(--sz-schrift-mono); font-size: var(--sz-text-xs); text-transform: uppercase; letter-spacing: .06em; } /* Nachtrag nach Sichtprüfung 14.09.2026 */ .sz-richtung-werk .sz-tabelle__weitere { min-block-size: 4rem; padding: 0 3.2rem 0 var(--sz-raum-4); border: 1px solid var(--sz-linie-kraeftig); border-radius: 999px; font: 500 var(--sz-text-s) var(--sz-schrift); color: var(--sz-blau); background-color: var(--sz-papier); cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.8rem) 50%, calc(100% - 1.3rem) 50%; background-size: .5rem .5rem; background-repeat: no-repeat; } .sz-richtung-werk .sz-tabelle__weitere.is-aktiv { border-color: var(--sz-blau); box-shadow: inset 0 0 0 1px var(--sz-blau); } @media (max-width: 47.99rem) { /* Auf dem Telefon eine wischbare Zeile statt eines Knopfstapels */ .sz-richtung-werk .sz-tabelle__chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--sz-rand)); padding-inline: var(--sz-rand); padding-block-end: var(--sz-raum-2); scrollbar-width: none; } .sz-richtung-werk .sz-tabelle__chip, .sz-richtung-werk .sz-tabelle__weitere { flex: none; white-space: nowrap; } .sz-richtung-werk .sz-aufmacher__merkmale { flex-direction: column; } .sz-richtung-werk .sz-aufmacher__merkmale li, .sz-richtung-werk .sz-aufmacher__merkmale li:first-child { border: 0; padding-inline-start: 1.6rem; position: relative; } .sz-richtung-werk .sz-aufmacher__merkmale li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .9em; inline-size: .8rem; block-size: 1px; background: currentColor; } } .sz-richtung-werk .sz-tabelle__chips .sz-tabelle__weitere { inline-size: auto; max-inline-size: 100%; flex: none; } /* Keine Monoschrift: Beschriftungen etwas kräftiger, Ziffern gleich breit */ .sz-richtung-werk :is(.sz-augenbraue, .sz-aufmacher__merkmale li, .sz-fakten dt, .sz-tabelle__tabelle thead th, .sz-tabelle__tabelle caption, .sz-tabelle__suche label, .sz-fusszeile__claim, .sz-kacheln__nr, .sz-kacheln__merkmal) { font-weight: 600; letter-spacing: .1em; font-variant-numeric: tabular-nums; } .sz-richtung-werk .sz-schritte__schritt::before { font-weight: 600; letter-spacing: .1em; font-variant-numeric: tabular-nums; } .sz-richtung-werk .sz-aufmacher .sz-aufmacher__merkmale li { font-size: var(--sz-text-s); letter-spacing: .01em; text-transform: none; font-weight: 500; } .sz-richtung-werk .sz-kopfzeile__fakten { letter-spacing: 0; } .sz-richtung-werk .sz-tabelle__tabelle tbody th, .sz-richtung-werk .sz-tabelle__treffer, .sz-richtung-werk .sz-tabelle__chip span { font-variant-numeric: tabular-nums; } .sz-richtung-werk .sz-tabelle__tabelle tbody th { font-weight: 600; font-size: var(--sz-text-m); } .sz-richtung-werk .sz-kopfzeile__leiste .sz-sprachwahl__knopf { font-weight: 600; } /* ---------------- Kacheln «Vitrine»: Produktübersicht ---------------- */ .sz-richtung-werk .sz-kacheln[data-variante="vitrine"] .sz-kacheln__liste { gap: clamp(1.2rem, .6rem + 1vw, 2.4rem); } .sz-richtung-werk .sz-kacheln[data-variante="vitrine"] .sz-kacheln__karte { position: relative; overflow: hidden; isolation: isolate; min-block-size: clamp(26rem, 20rem + 9vw, 36rem); background: var(--sz-blau); color: var(--sz-invers); justify-content: flex-end; } .sz-richtung-werk .sz-kacheln[data-variante="vitrine"] .sz-kacheln__bild { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; aspect-ratio: auto; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .sz-richtung-werk .sz-kacheln[data-variante="vitrine"] .sz-kacheln__karte::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(0 36 58 / 0) 20%, rgb(0 36 58 / .7) 55%, rgb(0 36 58 / .96) 100%); /* dunkler: weiße Schrift auf hellen Fotos (Prüflauf 07.10.2026) */ transition: opacity .3s ease; } .sz-richtung-werk .sz-kacheln[data-variante="vitrine"] .sz-kacheln__karte--ohne-bild { background-color: var(--sz-blau); background-image: var(--sz-raster); background-size: 4.8rem 4.8rem; } .sz-richtung-werk .sz-kacheln[data-variante="vitrine"] .sz-kacheln__karte--ohne-bild::before { background: linear-gradient(180deg, transparent 40%, rgb(0 36 58 / .6) 100%); } .sz-richtung-werk .sz-kacheln[data-variante="vitrine"] .sz-kacheln__text { border: 0; margin: 0; padding: clamp(2rem, 1.2rem + 1.4vw, 3.2rem); gap: var(--sz-raum-2); flex: none; grid-template-columns: 1fr auto; align-items: end; } .sz-richtung-werk .sz-kacheln[data-variante="vitrine"] .sz-kacheln__nr { grid-column: 1 / -1; color: var(--sz-invers); font-size: var(--sz-text-xs); } .sz-richtung-werk .sz-kacheln[data-variante="vitrine"] .sz-kacheln__titel { grid-column: 1; font-size: var(--sz-text-xl); line-height: 1.1; letter-spacing: -.01em; hyphens: manual; overflow-wrap: normal; text-wrap: balance; } .sz-richtung-werk .sz-kacheln[data-variante="vitrine"] .sz-kacheln__link { color: var(--sz-invers); } .sz-richtung-werk .sz-kacheln[data-variante="vitrine"] .sz-kacheln__beschreibung { grid-column: 1; color: var(--sz-invers-leise); font-size: var(--sz-text-m); max-inline-size: 40ch; } .sz-richtung-werk .sz-kacheln[data-variante="vitrine"] .sz-kacheln__pfeil { grid-column: 2; grid-row: 2 / span 2; align-self: end; margin: 0; padding: 0; display: grid; place-items: center; inline-size: 5.2rem; block-size: 5.2rem; border: 1px solid rgb(255 255 255 / .45); color: var(--sz-invers); transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .sz-richtung-werk .sz-kacheln[data-variante="vitrine"] .sz-kacheln__karte--link:hover .sz-kacheln__bild { transform: scale(1.05); } .sz-richtung-werk .sz-kacheln[data-variante="vitrine"] .sz-kacheln__karte--link:hover .sz-kacheln__pfeil { background: var(--sz-orange); border-color: var(--sz-orange); color: var(--sz-blau); } .sz-richtung-werk .sz-kacheln[data-variante="vitrine"] .sz-kacheln__karte--link:has(.sz-kacheln__link:focus-visible) { outline: 3px solid var(--sz-orange); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .sz-richtung-werk .sz-kacheln[data-variante="vitrine"] .sz-kacheln__bild { transition: none; } } /* Kopfleiste: Telefon und E-Mail lesbar gross (Oliver 14.09.2026, vorher 12 px) */ .sz-richtung-werk .sz-kopfzeile__leiste { font-size: var(--sz-text-s); } .sz-richtung-werk .sz-kopfzeile__leiste-wege { gap: var(--sz-raum-6); } .sz-richtung-werk .sz-kopfzeile__leiste :is(.sz-kopfzeile__telefon, .sz-kopfzeile__mail) { font-size: var(--sz-text-m); font-weight: 600; min-block-size: 4rem; } .sz-richtung-werk .sz-kopfzeile__leiste :is(.sz-kopfzeile__telefon, .sz-kopfzeile__mail) svg { inline-size: 1.8rem; block-size: 1.8rem; } .sz-richtung-werk .sz-kopfzeile__leiste .sz-sprachwahl__knopf { min-block-size: 3.6rem; font-size: var(--sz-text-s); } @media (max-width: 47.99rem) { .sz-richtung-werk .sz-kopfzeile__fakten { font-size: var(--sz-text-xs); } } /* ===================================================================== * Komponenten gehobene Mittelklasse (14.09.2026). Vorbilder: Herrenknecht * (Formular neben Standortbild mit Route), Endress (ruhige Flächen), * Krones (Fußzeile mit Gruppen). Blau trägt, Orange bleibt Hauptaktion. * ===================================================================== */ .sz-richtung-werk { --sz-schatten-flaeche: 0 1px 2px rgb(0 36 58 / .06), 0 24px 48px -24px rgb(0 36 58 / .24); --sz-linie-blau: rgb(0 48 79 / .14); } /* ---- Kontakt: Formular als Fläche, daneben Bild und blaue Kontaktkarte ---- */ .sz-richtung-werk .sz-kontakt .sz-kontakt__raster { gap: var(--sz-raum-7); } .sz-richtung-werk .sz-kontakt .sz-kontakt__inhalt { gap: var(--sz-raum-6); } .sz-richtung-werk .sz-kontakt .sz-kontakt__formular-rahmen { background: var(--sz-papier); border: 0; border-block-start: 3px solid var(--sz-blau); border-radius: 0; padding: clamp(2.4rem, 1.4rem + 2.4vw, 5.6rem); box-shadow: var(--sz-schatten-flaeche); } .sz-richtung-werk .sz-kontakt .sz-kontakt__seite { display: grid; align-content: start; } .sz-richtung-werk .sz-kontakt .sz-kontakt__bild { margin: 0; } .sz-richtung-werk .sz-kontakt .sz-kontakt__bild-datei { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 11; object-fit: cover; } .sz-richtung-werk .sz-kontakt .sz-kontakt__karte { background-color: var(--sz-blau); background-image: var(--sz-raster); background-size: 4.8rem 4.8rem; color: var(--sz-invers); border: 0; border-radius: 0; padding: clamp(2.4rem, 1.6rem + 2vw, 4.8rem); gap: var(--sz-raum-4); } .sz-richtung-werk .sz-kontakt .sz-kontakt__augenbraue { font-size: var(--sz-text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sz-invers-leise); } .sz-richtung-werk .sz-kontakt .sz-kontakt__weg { color: var(--sz-invers); font-size: var(--sz-text-l); font-weight: 600; gap: var(--sz-raum-3); min-block-size: 4.8rem; overflow-wrap: anywhere; } .sz-richtung-werk .sz-kontakt .sz-kontakt__weg--telefon { font-size: var(--sz-text-xl); letter-spacing: -.01em; } .sz-richtung-werk .sz-kontakt .sz-kontakt__weg svg { inline-size: 2.2rem; block-size: 2.2rem; color: var(--sz-orange); } .sz-richtung-werk .sz-kontakt .sz-kontakt__weg:focus-visible, .sz-richtung-werk .sz-kontakt .sz-kontakt__route:focus-visible { outline-color: var(--sz-orange); } .sz-richtung-werk .sz-kontakt .sz-kontakt__anschrift { display: grid; gap: var(--sz-raum-2); margin-block-start: var(--sz-raum-3); padding-block-start: var(--sz-raum-5); border-block-start: 1px solid var(--sz-linie-hell); color: var(--sz-invers-leise); } .sz-richtung-werk .sz-kontakt .sz-kontakt__name { color: var(--sz-invers); font-size: var(--sz-text-m); font-weight: 600; } .sz-richtung-werk .sz-kontakt .sz-kontakt__route { justify-self: start; display: inline-flex; align-items: center; gap: var(--sz-raum-2); min-block-size: 4.4rem; color: var(--sz-invers); font-weight: 600; text-decoration: underline; text-underline-offset: .3em; text-decoration-color: rgb(255 255 255 / .4); } .sz-richtung-werk .sz-kontakt .sz-kontakt__route svg { inline-size: 1.8rem; block-size: 1.8rem; transition: transform .15s ease; } .sz-richtung-werk .sz-kontakt .sz-kontakt__route:hover svg { transform: translateX(3px); } @media (min-width: 62rem) { .sz-richtung-werk .sz-kontakt .sz-kontakt__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(4rem, 1rem + 4vw, 9.6rem); } .sz-richtung-werk .sz-kontakt .sz-kontakt__seite { position: sticky; inset-block-start: 16rem; } } /* ---- Abschnitt mit Bild: halbe-halbe, Rastermotiv versetzt hinter dem Bild ---- */ .sz-richtung-werk .sz-abschnitt { isolation: isolate; } .sz-richtung-werk .sz-abschnitt .sz-abschnitt__inhalt { gap: var(--sz-raum-5); } .sz-richtung-werk .sz-abschnitt .sz-text { max-inline-size: 80rem; } /* Fließtext 800 px breit (Oliver 07.10.2026), vorher 64ch */ /* Reine Textabschnitte ohne Bild: rund zwei Drittel der Breite (ca. 860 px), sonst bleiben am Desktop 500 px leer (Oliver 07.10.2026: «66 % long text ~800–900 px»). */ @media (min-width: 62rem) { .sz-richtung-werk .sz-abschnitt:not([data-bild]) .sz-abschnitt__kopf, .sz-richtung-werk .sz-abschnitt:not([data-bild]) .sz-text { max-inline-size: min(86rem, 66.6%); } } .sz-richtung-werk .sz-abschnitt .sz-abschnitt__bild { position: relative; } .sz-richtung-werk .sz-abschnitt .sz-abschnitt__bild-datei { display: block; position: relative; } .sz-richtung-werk .sz-abschnitt .sz-abschnitt__bild figcaption { font-size: var(--sz-text-m); margin-block-start: 0; padding-block-start: var(--sz-raum-2); border-block-start: 1px solid var(--sz-linie); } @media (min-width: 62rem) { .sz-richtung-werk .sz-abschnitt[data-bild] .sz-abschnitt__raster, .sz-richtung-werk .sz-abschnitt[data-bild="links"] .sz-abschnitt__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(4.8rem, 0rem + 6vw, 12rem); align-items: center; } /* Bild neben dem Text kleiner als die halbe Breite, kleine Quellbilder werden sonst aufgeblasen (Oliver 01.10.2026). */ /* Oliver 07.10.2026: Text über rund zwei Drittel, Bild ein Drittel und ohne Lücke an den Rand (vorher 3:2 mit schmalem Text). */ .sz-richtung-werk .sz-abschnitt[data-bild] .sz-abschnitt__raster { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .sz-richtung-werk .sz-abschnitt[data-bild="links"] .sz-abschnitt__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .sz-richtung-werk .sz-abschnitt[data-bild]:not([data-bild="unten"]) :is(.sz-text, .sz-haken) { max-inline-size: none; } .sz-richtung-werk .sz-abschnitt[data-bild]:not([data-bild="unten"]) .sz-abschnitt__bild { margin-inline: 0; } .sz-richtung-werk .sz-abschnitt .sz-abschnitt__bild { max-inline-size: 44rem; margin-inline: auto; } /* Figur statt Bild begrenzen, damit das Rasterdekor am Bild bleibt */ /* Bildformat «groß» (Oliver 07.10.2026, KRA-Werkstattfoto): Bildspalte breiter als die Textspalte, ohne Breitenbremse. */ .sz-richtung-werk .sz-abschnitt[data-bildformat="gross"] .sz-abschnitt__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } .sz-richtung-werk .sz-abschnitt[data-bild="links"][data-bildformat="gross"] .sz-abschnitt__raster { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .sz-richtung-werk .sz-abschnitt[data-bildformat="gross"] .sz-abschnitt__bild { max-inline-size: none; } /* Bildformat «mittel» (Oliver 07.10.2026): zwischen Drittel und groß. */ .sz-richtung-werk .sz-abschnitt[data-bildformat="mittel"] .sz-abschnitt__raster { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .sz-richtung-werk .sz-abschnitt[data-bild="links"][data-bildformat="mittel"] .sz-abschnitt__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } .sz-richtung-werk .sz-abschnitt[data-bildformat="mittel"] .sz-abschnitt__bild { max-inline-size: none; } .sz-richtung-werk .sz-abschnitt[data-bild] .sz-abschnitt__bild::before { content: ""; position: absolute; z-index: -1; inset-block-end: calc(-1 * var(--sz-raum-5)); inset-inline-end: calc(-1 * var(--sz-raum-5)); /* Eckwinkel in Logo-Orange (Oliver 07.10.2026, Variante A statt Raster und Kessel-Zeichen). */ inline-size: 58%; block-size: 58%; border-inline-end: 7px solid var(--sz-orange); border-block-end: 7px solid var(--sz-orange); } .sz-richtung-werk .sz-abschnitt[data-bild="links"] .sz-abschnitt__bild::before { inset-inline-end: auto; inset-inline-start: calc(-1 * var(--sz-raum-5)); border-inline-end: 0; border-inline-start: 7px solid var(--sz-orange); } .sz-richtung-werk .sz-grund--blau.sz-abschnitt[data-bild] .sz-abschnitt__bild::before { opacity: 1; } } /* ---- Hakenliste: runde Marken, Trennlinien, ohne Bild zweispaltig ---- */ .sz-richtung-werk .sz-abschnitt__listentitel { font-size: var(--sz-text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sz-tinte-leise); } .sz-richtung-werk .sz-haken { gap: 0; border-block-start: 1px solid var(--sz-linie); } .sz-richtung-werk .sz-haken li { grid-template-columns: 2.8rem 1fr; gap: var(--sz-raum-4); align-items: center; padding-block: var(--sz-raum-3); border-block-end: 1px solid var(--sz-linie); } .sz-richtung-werk .sz-haken svg { inline-size: 2.8rem; block-size: 2.8rem; padding: .6rem; margin: 0; border-radius: 50%; background: var(--sz-blau-hauch); color: var(--sz-blau); } .sz-richtung-werk .sz-grund--hell .sz-haken svg { background: var(--sz-papier); } .sz-richtung-werk .sz-grund--blau .sz-haken, .sz-richtung-werk .sz-grund--blau .sz-haken li { border-color: var(--sz-linie-hell); } .sz-richtung-werk .sz-grund--blau .sz-haken svg { background: rgb(255 255 255 / .12); color: var(--sz-invers); } @media (min-width: 62rem) { .sz-richtung-werk .sz-abschnitt:not([data-bild]) .sz-haken { max-inline-size: none; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sz-raum-7); } } /* ---- Fakten als Datenblatt: zweispaltig, Beschriftung über dem Wert ---- */ .sz-richtung-werk .sz-fakten[data-variante="liste"] .sz-fakten__liste { max-inline-size: none; grid-template-columns: 1fr; column-gap: var(--sz-raum-7); border-block-start: 2px solid var(--sz-blau); } .sz-richtung-werk .sz-fakten[data-variante="liste"] .sz-fakten__eintrag { grid-template-columns: 1fr; gap: var(--sz-raum-1); padding-block: var(--sz-raum-4); } .sz-richtung-werk .sz-fakten[data-variante="liste"] .sz-fakten__eintrag dd { font-size: var(--sz-text-l); font-weight: 500; color: var(--sz-tinte); line-height: var(--sz-zeile-mittel); } @media (min-width: 62rem) { .sz-richtung-werk .sz-fakten[data-variante="liste"] .sz-fakten__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sz-richtung-werk .sz-grund--blau .sz-fakten[data-variante="liste"] .sz-fakten__liste { border-block-start-color: var(--sz-invers); } .sz-richtung-werk .sz-grund--blau .sz-fakten[data-variante="liste"] .sz-fakten__eintrag dd { color: var(--sz-invers); } /* ---- FAQ: Kopf links (mitlaufend), Fragen rechts, Plus-Zeichen ---- */ .sz-richtung-werk .sz-faq .sz-faq__liste { max-inline-size: none; border-block-start: 2px solid var(--sz-blau); } .sz-richtung-werk .sz-faq .sz-faq__frage { grid-template-columns: 1fr 4rem; gap: var(--sz-raum-5); padding-block: var(--sz-raum-5); font-size: var(--sz-text-l); font-weight: 600; } .sz-richtung-werk .sz-faq .sz-faq__frage::after { inline-size: 4rem; block-size: 4rem; border: 1px solid var(--sz-linie-kraeftig); border-radius: 50%; transform: none; color: var(--sz-blau); background: linear-gradient(currentColor, currentColor) center / 1.4rem 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 1.4rem no-repeat; transition: background-size .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; } .sz-richtung-werk .sz-faq .sz-faq__frage:hover::after { border-color: var(--sz-blau); } .sz-richtung-werk .sz-faq .sz-faq__eintrag[open] .sz-faq__frage::after { transform: none; color: var(--sz-invers); border-color: var(--sz-blau); background-color: var(--sz-blau); background-size: 1.4rem 2px, 2px 0; } .sz-richtung-werk .sz-faq .sz-faq__antwort { padding-block: 0 var(--sz-raum-5); padding-inline-end: 6.4rem; max-inline-size: 76ch; color: var(--sz-tinte-leise); } .sz-richtung-werk .sz-grund--blau.sz-faq .sz-faq__frage::after { color: var(--sz-invers); border-color: var(--sz-linie-hell); } .sz-richtung-werk .sz-grund--blau.sz-faq .sz-faq__liste { border-block-start-color: var(--sz-invers); } @media (min-width: 62rem) { .sz-richtung-werk .sz-faq .sz-faq__rahmen:has(> .sz-kopf) { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(4rem, 1rem + 4vw, 9.6rem); align-items: start; } /* FAQ-Überschrift bleibt stehen, nicht mehr sticky (Oliver 07.10.2026). */ /* Gruppierte FAQ (Oliver 07.10.2026 «rethink the layout»): Überschrift über die volle Breite, je Gruppe Titel links, Fragen rechts, oben bündig. */ .sz-richtung-werk .sz-faq .sz-faq__rahmen.ist-gruppiert:has(> .sz-kopf) { grid-template-columns: minmax(0, 1fr); } .sz-richtung-werk .sz-faq .sz-faq__block { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(4rem, 1rem + 4vw, 9.6rem); align-items: start; } } /* ---- Handlungsband: Aussage links, Kontaktwege als Karte rechts ---- */ .sz-richtung-werk .sz-handlung { padding-block: var(--sz-raum-8); } .sz-richtung-werk .sz-handlung .sz-handlung__text { gap: var(--sz-raum-4); } .sz-richtung-werk .sz-handlung .sz-handlung__text p { font-size: var(--sz-text-l); } .sz-richtung-werk .sz-grund--blau.sz-handlung .sz-handlung__text p { color: var(--sz-invers-leise); } .sz-richtung-werk .sz-handlung .sz-handlung__wege { display: grid; justify-items: start; gap: var(--sz-raum-4); justify-content: stretch; padding: clamp(2.4rem, 1.6rem + 2vw, 4.8rem); border: 1px solid var(--sz-linie); } .sz-richtung-werk .sz-grund--blau.sz-handlung .sz-handlung__wege { border-color: var(--sz-linie-hell); background: rgb(0 36 58 / .35); } /* Helle Fassung, z. B. Dringend-Band direkt unter dem dunklen Aufmacher (16.09.2026). */ .sz-richtung-werk .sz-handlung:not(.sz-grund--blau) .sz-handlung__wege { background: var(--sz-papier); } .sz-richtung-werk .sz-handlung:not(.sz-grund--blau) .sz-handlung__telefon, .sz-richtung-werk .sz-handlung:not(.sz-grund--blau) .sz-handlung__telefon svg { color: var(--sz-blau); } .sz-richtung-werk .sz-handlung .sz-handlung__telefon { font-size: var(--sz-text-xl); letter-spacing: -.01em; } /* Kontaktkarte (Oliver 07.10.2026: «this is good! use it throughout»): Telefon mit orangem Kreis als Blickfang, E-Mail darunter, Knopf am Ende. */ .sz-richtung-werk .sz-handlung .sz-handlung__wege { gap: var(--sz-raum-3); border-block-start: 4px solid var(--sz-orange); } .sz-richtung-werk .sz-handlung .sz-handlung__marke { margin: 0; font-size: var(--sz-text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sz-orange); } .sz-richtung-werk .sz-handlung:not(.sz-grund--blau) .sz-handlung__marke { color: var(--sz-orange-text); } .sz-richtung-werk .sz-handlung .sz-handlung__telefon { gap: var(--sz-raum-3); font-size: clamp(2.2rem, 1.2rem + 1.4vw, 3rem); font-weight: 700; line-height: 1.1; white-space: nowrap; } .sz-richtung-werk .sz-handlung .sz-handlung__telefon svg { flex: none; inline-size: 3rem; block-size: 3rem; /* 54 px Kreis wie freigegeben, vorher nur über die Bricks-Mindestgröße */ padding: 1.2rem; box-sizing: content-box; border-radius: 50%; background: var(--sz-orange); color: var(--sz-blau); } .sz-richtung-werk .sz-handlung .sz-handlung__telefon:hover span { text-decoration: underline; text-underline-offset: 4px; } .sz-richtung-werk .sz-handlung .sz-handlung__mail { color: inherit; font-size: var(--sz-text-m); text-underline-offset: 3px; overflow-wrap: anywhere; } .sz-richtung-werk .sz-grund--blau.sz-handlung .sz-handlung__mail { color: var(--sz-invers); } /* weiß (Oliver 07.10.2026) */ .sz-richtung-werk .sz-handlung .sz-handlung__wege .sz-knoepfe { margin-block-start: var(--sz-raum-4); } @media (min-width: 62rem) { .sz-richtung-werk .sz-handlung .sz-handlung__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(4rem, 1rem + 4vw, 9.6rem); } } /* ---- Schritte: große Ziffer, blaue Marke auf der Linie ---- */ .sz-richtung-werk .sz-schritte .sz-schritte__liste { gap: var(--sz-raum-6) clamp(2rem, 1rem + 1.6vw, 4rem); } .sz-richtung-werk .sz-schritte .sz-schritte__schritt { position: relative; gap: var(--sz-raum-3); padding-block-start: var(--sz-raum-5); border-block-start: 1px solid var(--sz-linie-kraeftig); } .sz-richtung-werk .sz-schritte .sz-schritte__schritt::after { content: ""; position: absolute; inset-block-start: -2px; inset-inline-start: 0; inline-size: 4.8rem; block-size: 3px; background: var(--sz-blau); } .sz-richtung-werk .sz-schritte .sz-schritte__schritt::before { font-size: var(--sz-text-2xl); font-weight: 400; letter-spacing: -.02em; line-height: 1; color: var(--sz-blau); } .sz-richtung-werk .sz-grund--blau.sz-schritte .sz-schritte__schritt { border-color: var(--sz-linie-hell); } .sz-richtung-werk .sz-grund--blau.sz-schritte .sz-schritte__schritt::after { background: var(--sz-invers); } .sz-richtung-werk .sz-grund--blau.sz-schritte .sz-schritte__schritt::before { color: var(--sz-invers); } /* ---- Hinweis: leise Fußnote statt Kasten (Freigabe-Hinweise bleiben auffällig) ---- */ .sz-richtung-werk .sz-hinweis:not([data-variante="freigabe"]) .sz-hinweis__kasten { display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--sz-raum-3); align-items: start; max-inline-size: 84ch; padding: var(--sz-raum-4) 0 0; background: transparent; border: 0; border-block-start: 1px solid var(--sz-linie); border-radius: 0; color: var(--sz-tinte-leise); } .sz-richtung-werk .sz-hinweis:not([data-variante="freigabe"]) .sz-hinweis__kasten::before { content: "i"; display: grid; place-items: center; inline-size: 2.2rem; block-size: 2.2rem; margin-block-start: .1rem; border: 1.5px solid currentColor; border-radius: 50%; font: 600 1.3rem/1 var(--sz-schrift); color: var(--sz-blau); } /* ---- Wege-Kacheln: orange Linie wächst beim Überfahren (Oliver 07.10.2026, wie der Eckwinkel), Pfeil im Quadrat ---- */ .sz-richtung-werk .sz-kacheln[data-variante="wege"] .sz-kacheln__karte { position: relative; transition: background-color .2s ease; } .sz-richtung-werk .sz-kacheln[data-variante="wege"] .sz-kacheln__karte--link::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: -1px; block-size: 4px; background: var(--sz-orange); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; } .sz-richtung-werk .sz-kacheln[data-variante="wege"] .sz-kacheln__karte--link:hover::before { transform: scaleX(1); } .sz-richtung-werk .sz-kacheln[data-variante="wege"] .sz-kacheln__text { gap: var(--sz-raum-3); padding: clamp(2.4rem, 1.6rem + 1.6vw, 4rem); } .sz-richtung-werk .sz-kacheln[data-variante="wege"] .sz-kacheln__pfeil { display: grid; place-items: center; inline-size: 4.4rem; block-size: 4.4rem; margin-block-start: auto; padding: 0; border: 1px solid var(--sz-linie-kraeftig); transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .sz-richtung-werk .sz-kacheln[data-variante="wege"] .sz-kacheln__pfeil svg { inline-size: 2rem; block-size: 2rem; } .sz-richtung-werk .sz-kacheln[data-variante="wege"] .sz-kacheln__karte--link:hover .sz-kacheln__pfeil { background: var(--sz-blau); border-color: var(--sz-blau); color: var(--sz-invers); } .sz-richtung-werk .sz-kacheln[data-variante="wege"] .sz-kacheln__karte--link:hover .sz-kacheln__pfeil svg { transform: none; } /* ---- Fußzeile: Marke mit Satz, Kontakt, Seiten in zwei Spalten ---- */ .sz-richtung-werk .sz-fusszeile .sz-fusszeile__raster { gap: var(--sz-raum-7); padding-block: var(--sz-raum-8) var(--sz-raum-7); align-items: start; } .sz-richtung-werk .sz-fusszeile .sz-fusszeile__marke { display: grid; gap: var(--sz-raum-5); align-content: start; } .sz-richtung-werk .sz-fusszeile .sz-fusszeile__logo { inline-size: 22rem; margin: 0; } .sz-richtung-werk .sz-fusszeile .sz-fusszeile__claim { max-inline-size: 22ch; font-size: var(--sz-text-xl); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-transform: none; color: var(--sz-invers); } .sz-richtung-werk .sz-fusszeile .sz-fusszeile__titel { margin-block-end: var(--sz-raum-4); font-size: var(--sz-text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sz-invers-leise); } .sz-richtung-werk .sz-fusszeile .sz-fusszeile__anschrift { color: var(--sz-invers-leise); } .sz-richtung-werk .sz-fusszeile .sz-fusszeile__wege a { font-size: var(--sz-text-m); font-weight: 600; } .sz-richtung-werk .sz-fusszeile .sz-fusszeile__menue { display: block; columns: 2; column-gap: var(--sz-raum-6); } .sz-richtung-werk .sz-fusszeile .sz-fusszeile__menue li { break-inside: avoid; } .sz-richtung-werk .sz-fusszeile .sz-fusszeile__menue a { min-block-size: 4.4rem; } /* 25.09.2026: Daumenziel, war 3.6rem */ @media (min-width: 48rem) { .sz-richtung-werk .sz-fusszeile .sz-fusszeile__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 62rem) { .sz-richtung-werk .sz-fusszeile .sz-fusszeile__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); } } /* Nachträge nach Sichtprüfung der Komponenten */ .sz-richtung-werk .sz-fusszeile .sz-fusszeile__claim { max-inline-size: none; } .sz-richtung-werk .sz-fusszeile .sz-fusszeile__claim span { display: block; } @media (max-width: 47.99rem) { .sz-richtung-werk .sz-kontakt .sz-kontakt__weg { font-size: var(--sz-text-m); } .sz-richtung-werk .sz-kontakt .sz-kontakt__weg--telefon { font-size: var(--sz-text-l); } } /* ===================================================================== * Abstandsrhythmus (Messung über 53 Seiten, 14.09.2026) * Jeder Abschnitt hat oben und unten raum-8. Gleiche Flächen hintereinander * teilen sich einen Abstand. Hinweise hängen am Inhalt davor und schließen * am Seitenende mit vollem Abstand zur Fußzeile. * ===================================================================== */ .sz-richtung-werk #brx-content > :is(.sz-abschnitt, .sz-kacheln, .sz-fakten[data-variante="liste"], .sz-tabelle, .sz-faq, .sz-schritte, .sz-kontakt) { padding-block: var(--sz-raum-8); } .sz-richtung-werk #brx-content > :is(.sz-abschnitt, .sz-kacheln, .sz-fakten[data-variante="liste"], .sz-tabelle, .sz-faq, .sz-schritte, .sz-kontakt):not([class*="sz-grund--"]) + :is(.sz-abschnitt, .sz-kacheln, .sz-fakten[data-variante="liste"], .sz-tabelle, .sz-faq, .sz-schritte, .sz-kontakt):not([class*="sz-grund--"]), .sz-richtung-werk #brx-content > :is(.sz-abschnitt, .sz-kacheln, .sz-fakten[data-variante="liste"], .sz-tabelle, .sz-faq, .sz-schritte, .sz-kontakt).sz-grund--hell + :is(.sz-abschnitt, .sz-kacheln, .sz-fakten[data-variante="liste"], .sz-tabelle, .sz-faq, .sz-schritte, .sz-kontakt).sz-grund--hell { padding-block-start: 0; } .sz-richtung-werk #brx-content > .sz-hinweis { padding-block: var(--sz-raum-6) 0; } /* Auf gleicher Fläche direkt unter den Inhalt davor ziehen statt mittig im Leerraum zu schweben */ .sz-richtung-werk #brx-content > :not([class*="sz-grund--"]):not(.sz-aufmacher):not(.sz-handlung):not(.sz-fakten[data-variante="leiste"]):not([data-bild]) + .sz-hinweis:not([class*="sz-grund--"]), .sz-richtung-werk #brx-content > .sz-grund--hell:not([data-bild]) + .sz-hinweis.sz-grund--hell { margin-block-start: calc(var(--sz-raum-6) - var(--sz-raum-8)); padding-block-start: 0; } .sz-richtung-werk #brx-content > .sz-hinweis + .sz-hinweis { margin-block-start: 0; padding-block-start: var(--sz-raum-4); } .sz-richtung-werk #brx-content > .sz-hinweis:last-child { padding-block-end: var(--sz-raum-8); } /* Nachmessung: Hinweis vor einer anderen Fläche klebte an deren Kante (135 bis 146 px Inhalt zu Inhalt). Hinweise schließen deshalb immer mit vollem Abstand; ein gleichfarbiger Abschnitt danach verzichtet auf seinen oberen. */ .sz-richtung-werk #brx-content > .sz-hinweis { padding-block-end: var(--sz-raum-8); } .sz-richtung-werk #brx-content > .sz-hinweis:not([class*="sz-grund--"]) + :is(.sz-abschnitt, .sz-kacheln, .sz-fakten[data-variante="liste"], .sz-tabelle, .sz-faq, .sz-schritte, .sz-kontakt):not([class*="sz-grund--"]) { padding-block-start: 0; } .sz-richtung-werk #brx-content > .sz-hinweis + .sz-hinweis { padding-block-start: 0; margin-block-start: calc(var(--sz-raum-5) - var(--sz-raum-8)); } /* Wege-Kacheln ohne feste Mindesthöhe: der Leerraum in der Karte zählte 60 px zum Abstand dazu */ .sz-richtung-werk .sz-kacheln[data-variante="wege"] .sz-kacheln__text { min-block-size: 0; } /* Titelumbrüche (Oliver 14.09.2026): keine Silbentrennung in Überschriften ab Tablet, ausgewogene Zeilen. Lange Aufmachertitel (über 42 Zeichen) kleiner und breiter, damit sie in zwei bis drei Zeilen stehen statt in vier. */ @media (min-width: 48rem) { .sz-richtung-werk :is(h1, h2, h3) { hyphens: manual; } } .sz-richtung-werk :is(h1, h2) { text-wrap: balance; } .sz-richtung-werk .sz-aufmacher[data-laenge="lang"] .sz-aufmacher__titel { font-size: clamp(3.4rem, 1.8rem + 3.4vw, 6.8rem); max-inline-size: 14.5em; line-height: 1.05; } .sz-richtung-werk .sz-aufmacher[data-variante="schlicht"][data-laenge="lang"] .sz-aufmacher__titel { font-size: var(--sz-text-2xl); max-inline-size: 16.5em; } @media (max-width: 47.99rem) { .sz-richtung-werk .sz-aufmacher .sz-aufmacher__titel { overflow-wrap: break-word; } } /* Aufmacher ohne Blitz beim Laden: unscharfe Minivorschau unter dem Foto, Foto wird vorgeladen (sz_lqip, wp_head). Titelbreiten in em statt ch: ch hängt an der geladenen Schrift und änderte beim Nachladen selbst die Breite. */ .sz-richtung-werk .sz-aufmacher .sz-aufmacher__bild { overflow: hidden; background-color: var(--sz-blau); } .sz-richtung-werk .sz-aufmacher .sz-aufmacher__bild::before { content: ""; position: absolute; inset: -4rem; background: var(--sz-lqip, none) center / cover no-repeat; filter: blur(2.4rem); transform: scale(1.1); } .sz-richtung-werk .sz-aufmacher .sz-aufmacher__bild-datei { position: relative; } /* Kontrast Aufmacher (Messung am Foto hinter dem Text, 14.09.2026): Vorspann fiel auf 3,6 zu 1, Titel stellenweise unter 3 zu 1, auf dem Telefon Augenbraue und Brotkrumen auf 3,1 zu 1. Dichterer Verlauf hinter der Textspalte, Vorspann fast weiß, leichter Schatten als Rückhalt bei hellen Bildstellen, oben auf dem Telefon mehr Deckung. */ .sz-richtung-werk .sz-aufmacher::before { /* Text endet bei etwa 52 % der Breite; rechts davon soll das Foto sichtbar sein (Oliver 16.09.2026). */ background: linear-gradient(90deg, rgb(0 36 58 / 0.9) 0%, rgb(0 42 69 / 0.86) 48%, rgb(0 46 76 / 0.8) 58%, rgb(0 48 79 / 0.4) 68%, rgb(0 48 79 / 0.1) 80%, rgb(0 48 79 / 0.03) 100%), linear-gradient(0deg, rgb(0 36 58 / 0.4) 0%, transparent 55%); } .sz-richtung-werk .sz-aufmacher[data-variante="bild"] .sz-aufmacher__vorspann { color: rgb(255 255 255 / 0.94); } /* Leichter Schatten unter dem Titel: das orangefarbene Akzentwort liegt bei hellerem Verlauf teils über hellen Bildstellen (16.09.2026). */ .sz-richtung-werk .sz-aufmacher[data-variante="bild"] .sz-aufmacher__titel { text-shadow: 0 1px 3px rgb(0 30 50 / 0.45); } .sz-richtung-werk .sz-aufmacher[data-variante="bild"] .sz-aufmacher__text :is(.sz-aufmacher__titel, .sz-aufmacher__vorspann, .sz-augenbraue, .sz-aufmacher__merkmale li, .sz-brotkrumen li) { text-shadow: 0 1px 1.6rem rgb(0 36 58 / 0.55); } .sz-richtung-werk .sz-aufmacher[data-variante="bild"] .sz-augenbraue, .sz-richtung-werk .sz-aufmacher[data-variante="bild"] .sz-brotkrumen--eingebettet .sz-brotkrumen__liste li { color: rgb(255 255 255 / 0.9); } @media (max-width: 47.99rem) { .sz-richtung-werk .sz-aufmacher::before { background: linear-gradient(0deg, rgb(0 36 58 / 0.97) 0%, rgb(0 42 69 / 0.93) 55%, rgb(0 48 79 / 0.88) 100%); } } /* Einheitliche Aufmacherhöhe (Oliver 14.09.2026). Gemessen: Fotoaufmacher 608 bis 793 px, schlichte 384 bis 633 px, weil lange Titel und Vorspanne das Maß bestimmten. Ab Tablet feste Mindesthöhe je Variante, Inhalt unten ausgerichtet; der Vorspann darf breiter laufen, damit auch die längsten Seiten in den Rahmen passen. Auf dem Telefon bleibt die Höhe inhaltsabhängig. */ @media (min-width: 62rem) { /* Text etwas höher im Aufmacher (Oliver 16.09.2026): mehr Luft nach unten. */ .sz-richtung-werk .sz-aufmacher .sz-aufmacher__raster { padding-block: 4.8rem 8rem; } .sz-richtung-werk .sz-aufmacher[data-variante="bild"] .sz-aufmacher__raster, .sz-richtung-werk .sz-aufmacher[data-variante="blau"] .sz-aufmacher__raster { min-block-size: 76rem; } /* Schlichte Aufmacher ohne feste Höhe: bei kurzem Inhalt (Rechtstexte) blieb ein leeres blaues Feld (Oliver 14.09.2026). Einheitlich ist hier der Abstand, nicht die Höhe. */ .sz-richtung-werk .sz-aufmacher[data-variante="schlicht"] .sz-aufmacher__raster { min-block-size: 0; padding-block: var(--sz-raum-7) var(--sz-raum-7); } .sz-richtung-werk .sz-aufmacher .sz-aufmacher__vorspann { max-inline-size: 66ch; } } /* Sprachwahl mit zwei Sprachen: beide Kürzel sichtbar, aktive Sprache hervorgehoben (16.09.2026). */ .sz-richtung-werk .sz-sprachwahl--direkt { display: inline-flex; align-items: stretch; min-block-size: 3.6rem; border: 1px solid var(--sz-linie-hell); } .sz-richtung-werk .sz-sprachwahl--direkt > * { display: inline-flex; align-items: center; padding-inline: 1.2rem; font-size: var(--sz-text-s); font-weight: 600; letter-spacing: .04em; color: var(--sz-invers); text-decoration: none; } .sz-richtung-werk .sz-sprachwahl--direkt .sz-sprachwahl__aktiv { background: var(--sz-invers); color: var(--sz-blau); box-shadow: none; } .sz-richtung-werk .sz-sprachwahl--direkt .sz-sprachwahl__link:hover, .sz-richtung-werk .sz-sprachwahl--direkt .sz-sprachwahl__link:focus-visible { background: rgb(255 255 255 / .14); } /* Hinweis, wenn die Browsersprache eine andere Sprachfassung nahelegt (sz-kopfzeile.js). */ .sz-sprachhinweis { background: var(--sz-hell); color: var(--sz-blau); border-block-end: 1px solid var(--sz-linie); box-shadow: inset 0 3px 0 var(--sz-orange); font-size: var(--sz-text-s); font-weight: 600; } .sz-sprachhinweis .sz-innen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sz-raum-2) var(--sz-raum-5); padding-block: var(--sz-raum-2); } .sz-sprachhinweis a { display: inline-flex; align-items: center; min-block-size: 4.4rem; color: inherit; text-decoration: underline; text-underline-offset: .2em; } .sz-sprachhinweis button { display: inline-flex; align-items: center; min-block-size: 4.4rem; margin-inline-start: auto; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: .4rem 1.2rem; } /* ---- Hauptmenü mit Paneelen (16.09.2026) ---- */ .sz-richtung-werk .sz-menue__punkt { position: relative; } .sz-richtung-werk .sz-menue__auf { inline-size: 3.2rem; block-size: 3.2rem; padding: 0; border: 0; background: none; color: var(--sz-blau); cursor: pointer; display: inline-grid; place-items: center; } .sz-richtung-werk .sz-menue__auf::before { content: ""; inline-size: .7rem; block-size: .7rem; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: translateY(-.15rem) rotate(45deg); transition: transform .2s; } .sz-richtung-werk .sz-menue__punkt[data-offen] > .sz-menue__auf::before { transform: translateY(.15rem) rotate(-135deg); } .sz-richtung-werk .sz-menue__paneel { display: none; } /* Produkt-Paneel: Übersichtskarte links, sechs Produktkarten mit Bild oben rechts (28.09.2026). Selektoren mit a, damit sie die Paneel-Linkregel schlagen. */ .sz-richtung-werk .sz-menue__paneel a.sz-menue__uebersicht { display: flex; flex-direction: column; gap: var(--sz-raum-2); padding: var(--sz-raum-5); border-radius: var(--sz-rund-m); background: var(--sz-blau-hauch); color: var(--sz-tinte); text-decoration: none; box-shadow: none; min-block-size: 0; } .sz-richtung-werk .sz-menue__paneel a.sz-menue__uebersicht > * { display: block; } .sz-richtung-werk .sz-menue__paneel a.sz-menue__uebersicht strong { font-size: var(--sz-text-l); line-height: 1.25; color: var(--sz-blau); } .sz-richtung-werk .sz-menue__paneel a.sz-menue__uebersicht > span:not(.sz-menue__gruppentitel) { font-size: var(--sz-text-s); color: var(--sz-tinte-leise); } .sz-richtung-werk .sz-menue__paneel a.sz-menue__uebersicht .sz-menue__uebersicht-pfeil { margin-block-start: var(--sz-raum-2); padding-block-start: var(--sz-raum-2); font-weight: 600; color: var(--sz-blau); } .sz-richtung-werk .sz-menue__paneel a.sz-menue__uebersicht { transition: background .15s; } .sz-richtung-werk .sz-menue__paneel a.sz-menue__uebersicht:hover, .sz-richtung-werk .sz-menue__paneel a.sz-menue__uebersicht:focus-visible { background: color-mix(in srgb, var(--sz-blau) 12%, var(--sz-papier)); text-decoration: none; } .sz-richtung-werk .sz-menue__paneel a.sz-menue__uebersicht:hover strong, .sz-richtung-werk .sz-menue__paneel a.sz-menue__uebersicht:hover .sz-menue__uebersicht-pfeil { text-decoration: none; } .sz-richtung-werk .sz-kacheln[data-variante="vitrine"][data-kompakt] .sz-kacheln__karte { min-block-size: clamp(22rem, 18rem + 6vw, 28rem); } .sz-richtung-werk .sz-menue__karten { display: grid; gap: var(--sz-raum-3); } .sz-richtung-werk .sz-menue__eigen a { display: inline-flex !important; align-items: center; gap: var(--sz-raum-2); } .sz-richtung-werk .sz-menue__marke { font-family: var(--sz-schrift-mono); font-size: 1.1rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sz-blau); background: var(--sz-orange); padding: .1rem .6rem; border-radius: .3rem; line-height: 1.6; } .sz-richtung-werk .sz-menue__paneel a.sz-menue__karte { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--sz-raum-2); padding: 0; border-radius: var(--sz-rund-s); text-decoration: none; text-align: start; min-block-size: 0; } .sz-richtung-werk .sz-menue__paneel a.sz-menue__karte:hover { text-decoration: none; } .sz-richtung-werk .sz-menue__karte img, .sz-richtung-werk .sz-menue__karte-leer { display: block; inline-size: 100%; aspect-ratio: 16 / 9; block-size: auto; object-fit: cover; border-radius: var(--sz-rund-s); background: var(--sz-blau); } .sz-richtung-werk .sz-menue__karte-text { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; gap: .2rem; line-height: 1.35; text-align: start; } .sz-richtung-werk .sz-menue__karte-text strong { color: var(--sz-blau); } .sz-richtung-werk .sz-menue__karte-text span { font-size: var(--sz-text-xs); color: var(--sz-tinte-leise); } /* Hover ruhig: das Bild bekommt einen orangen Rand, sonst bewegt sich nichts (Oliver 28.09.2026: Unterstreichung gefiel nicht). */ .sz-richtung-werk .sz-menue__paneel a.sz-menue__karte:hover .sz-menue__karte-text strong, .sz-richtung-werk .sz-menue__paneel a.sz-menue__karte:focus-visible .sz-menue__karte-text strong { text-decoration: none; color: var(--sz-blau); } .sz-richtung-werk .sz-menue__karte img, .sz-richtung-werk .sz-menue__karte-leer { transition: box-shadow .15s; } /* Hover: Bild zoomt leicht, sonst nichts (Oliver 28.09.2026: kein Rahmen, keine Unterstreichung). */ .sz-richtung-werk .sz-menue__paneel a.sz-menue__karte { overflow: hidden; } .sz-richtung-werk .sz-menue__paneel a.sz-menue__karte img, .sz-richtung-werk .sz-menue__paneel a.sz-menue__karte .sz-menue__karte-leer { transition: transform .3s ease; } .sz-richtung-werk .sz-menue__paneel a.sz-menue__karte:hover img, .sz-richtung-werk .sz-menue__paneel a.sz-menue__karte:hover .sz-menue__karte-leer, .sz-richtung-werk .sz-menue__paneel a.sz-menue__karte:focus-visible img { transform: scale(1.04); } .sz-richtung-werk .sz-menue__paneel a.sz-menue__karte:focus-visible { outline: 2px solid var(--sz-orange); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .sz-richtung-werk .sz-menue__paneel a.sz-menue__karte:hover img { transform: none; } } .sz-richtung-werk .sz-menue__punkt[data-offen] > .sz-menue__paneel { display: block; } .sz-richtung-werk .sz-menue__gruppen { display: grid; gap: var(--sz-raum-5); } .sz-richtung-werk .sz-menue__gruppe, .sz-richtung-werk .sz-menue__gruppe ul { list-style: none; margin: 0; padding: 0; } .sz-richtung-werk .sz-menue__gruppentitel { margin: 0 0 var(--sz-raum-2); font-family: var(--sz-schrift-mono); font-size: var(--sz-text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--sz-tinte-leise); } .sz-richtung-werk .sz-menue__paneel a { min-block-size: 3.6rem; padding: .3rem 0; font-weight: 500; box-shadow: none; } .sz-richtung-werk .sz-menue__paneel a:hover, .sz-richtung-werk .sz-menue__paneel a:focus-visible { box-shadow: none; text-decoration: underline; text-underline-offset: .3em; } @media (max-width: 61.99rem) { /* Handymenue liegt als Ebene unter dem Kopf, statt ihn aufzuschieben: Logo und Knopf bleiben stehen, die Seite springt nicht (Oliver 29.09.2026). */ .sz-richtung-werk .sz-kopfzeile { position: relative; } .sz-richtung-werk .sz-kopfzeile__reihe { flex-wrap: nowrap; } .sz-richtung-werk .sz-kopfzeile__paneel { position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: 5; padding: 0 var(--sz-rand) var(--sz-raum-5); background: var(--sz-papier); border-block-start: 1px solid var(--sz-linie); box-shadow: 0 16px 32px rgb(0 36 58 / .18); max-block-size: calc(100dvh - 14.4rem); overflow-y: auto; overscroll-behavior: contain; } /* Trennlinie ueber die ganze Zeile, auch bei Punkten mit Pfeil. */ .sz-richtung-werk .sz-menue__liste > li { border-block-end: 1px solid var(--sz-linie); } .sz-richtung-werk .sz-menue__liste > li > a { border-block-end: 0; } /* Knopf zeigt den offenen Zustand als Kreuz, Breite bleibt gleich. */ .sz-richtung-werk .sz-kopfzeile__linien, .sz-richtung-werk .sz-kopfzeile__linien::before, .sz-richtung-werk .sz-kopfzeile__linien::after { transition: transform .2s ease, background-color .2s ease, inset .2s ease; } .sz-richtung-werk .sz-kopfzeile__schalter[aria-expanded="true"] .sz-kopfzeile__linien { background: transparent; } .sz-richtung-werk .sz-kopfzeile__schalter[aria-expanded="true"] .sz-kopfzeile__linien::before { inset-block-start: 0; transform: rotate(45deg); } .sz-richtung-werk .sz-kopfzeile__schalter[aria-expanded="true"] .sz-kopfzeile__linien::after { inset-block-start: 0; transform: rotate(-45deg); } .sz-richtung-werk .sz-menue__punkt { display: grid; grid-template-columns: 1fr auto; align-items: center; } .sz-richtung-werk .sz-menue__paneel { grid-column: 1 / -1; padding: 0 0 var(--sz-raum-4) var(--sz-raum-4); } .sz-richtung-werk .sz-menue__paneel a.sz-menue__karte { flex-direction: row; align-items: center; } .sz-richtung-werk .sz-menue__karte img, .sz-richtung-werk .sz-menue__karte-leer { inline-size: 7.2rem; flex: none; } .sz-richtung-werk .sz-menue__paneel a.sz-menue__uebersicht { margin-block-end: var(--sz-raum-3); } /* Im aufgeklappten Untermenue keine Linien unter einzelnen Links, dafuer Luft zwischen den Karten (29.09.2026). */ .sz-richtung-werk .sz-menue__paneel a { border-block-end: 0; } .sz-richtung-werk .sz-menue__karten { gap: var(--sz-raum-4); } .sz-richtung-werk .sz-menue__spalten { display: grid; gap: var(--sz-raum-5); } } /* «Ersatzteil anfragen» im Paneel farbig wie der Hauptknopf (Ben 01.10.2026), seit der Kopfknopf «Kontakt» heisst. */ .sz-richtung-werk .sz-menue__paneel .sz-menue__anfrage { margin-block: var(--sz-raum-2) var(--sz-raum-4); } /* mehr Luft zum nächsten Punkt (Oliver 07.10.2026) */ .sz-richtung-werk .sz-menue__paneel .sz-menue__anfrage a { display: inline-flex; align-items: center; gap: .8rem; min-block-size: 4.4rem; padding: 1.2rem 2.4rem; /* wie der Kontakt-Knopf (Oliver 07.10.2026) */ background: var(--sz-orange); color: var(--sz-blau); border-radius: var(--sz-rund-s); font-weight: 600; } .sz-richtung-werk .sz-menue__paneel .sz-menue__anfrage a::after { content: "→"; } .sz-richtung-werk .sz-menue__paneel .sz-menue__anfrage a:hover, .sz-richtung-werk .sz-menue__paneel .sz-menue__anfrage a:focus-visible { text-decoration: none; background: color-mix(in srgb, var(--sz-orange) 85%, var(--sz-blau)); } /* Uebersichtskarte durchgehend linksbuendig, wie die Produktkarten. */ .sz-richtung-werk .sz-menue__paneel a.sz-menue__uebersicht { align-items: flex-start; text-align: start; } .sz-richtung-werk .sz-menue__paneel a.sz-menue__uebersicht > * { align-self: flex-start; text-align: start; } @media (min-width: 62rem) { .sz-richtung-werk .sz-kopfzeile__reihe { position: relative; } /* Paneele haengen unter ihrem Menuepunkt und sind so breit wie ihr Inhalt; nur das Produkt-Paneel spannt die ganze Zeile (Oliver 28.09.2026: Abstaende wirkten seltsam). */ .sz-richtung-werk .sz-menue__punkt { display: flex; align-items: stretch; position: relative; } .sz-richtung-werk .sz-menue__punkt:has(.sz-menue__gruppen--mit-uebersicht) { position: static; } .sz-richtung-werk .sz-menue__auf { align-self: center; margin-inline-start: -.6rem; } .sz-richtung-werk .sz-menue__paneel { position: absolute; inset-inline-start: 0; inset-inline-end: auto; inset-block-start: 100%; z-index: 20; inline-size: max-content; min-inline-size: 28rem; max-inline-size: min(96rem, calc(100vw - 4rem)); background: var(--sz-papier); border-block-start: 1px solid var(--sz-linie); box-shadow: 0 16px 32px rgb(0 36 58 / .12); padding: var(--sz-raum-5) var(--sz-raum-6) var(--sz-raum-6); } /* Alle Paneele mit Uebersichtskarte spannen die ganze Zeile, gleiche Form: Inhalt links, Karte rechts in derselben Spalte (Oliver 01.10.2026). */ .sz-richtung-werk .sz-menue__punkt:has(.sz-menue__gruppen--mit-uebersicht) > .sz-menue__paneel { inset-inline: 0; inline-size: auto; max-inline-size: none; padding: var(--sz-raum-6) var(--sz-raum-6) var(--sz-raum-7); } .sz-richtung-werk .sz-menue__gruppen--mit-uebersicht { grid-template-columns: minmax(0, 1fr) 28rem; gap: var(--sz-raum-7); align-items: start; } .sz-richtung-werk .sz-menue__spalten { display: flex; gap: var(--sz-raum-8); align-items: start; } .sz-richtung-werk .sz-menue__karten--text { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sz-raum-4) var(--sz-raum-5); max-inline-size: 90rem; } .sz-richtung-werk .sz-menue__paneel a.sz-menue__karte--text { padding: var(--sz-raum-4); border: 1px solid var(--sz-linie); border-radius: var(--sz-rund-s); } .sz-richtung-werk .sz-menue__paneel a.sz-menue__karte--text:hover, .sz-richtung-werk .sz-menue__paneel a.sz-menue__karte--text:focus-visible { border-color: var(--sz-linie-kraeftig); background: var(--sz-blau-hauch); } .sz-richtung-werk .sz-menue__punkt:hover > .sz-menue__paneel, .sz-richtung-werk .sz-menue__punkt:focus-within > .sz-menue__paneel { display: block; } .sz-richtung-werk .sz-menue__gruppen--drei { grid-template-columns: repeat(3, max-content); gap: var(--sz-raum-8); } .sz-richtung-werk .sz-menue__gruppen--drei.sz-menue__gruppen--mit-uebersicht { grid-template-columns: minmax(0, 1fr) 28rem; gap: var(--sz-raum-7); } .sz-richtung-werk .sz-menue__gruppen:not(.sz-menue__gruppen--drei):not(.sz-menue__gruppen--produkte) .sz-menue__gruppe { display: grid; gap: 0; } .sz-richtung-werk .sz-menue__paneel a { display: block; min-block-size: 0; padding: .5rem 0; } /* Produkte: sechs Einträge als 2 × 3 in Leserichtung, nicht als zwei Spalten von oben nach unten (Ben 28.09.2026). */ .sz-richtung-werk .sz-menue__gruppen--produkte { grid-template-columns: minmax(0, 1fr) 28rem; gap: var(--sz-raum-7); align-items: start; } .sz-richtung-werk .sz-menue__gruppen--produkte > .sz-menue__gruppe { display: block; } .sz-richtung-werk .sz-menue__gruppen--produkte .sz-menue__gruppentitel { margin-block-end: var(--sz-raum-4); } /* Uebersichtskarte rechts auch in den anderen Paneelen (Ben 01.10.2026). */ .sz-richtung-werk .sz-menue__gruppen--produkte .sz-menue__karten { columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sz-raum-4) var(--sz-raum-5); } /* Service: zwei Leistungen als zwei große Bildkarten statt zwei Dritteln einer Dreierreihe (Ben 07.10.2026). */ .sz-richtung-werk .sz-menue__gruppen--produkte .sz-menue__karten--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); max-inline-size: 72rem; } .sz-richtung-werk .sz-menue__eigen a.sz-menue__marke { display: inline; } /* Brücke: Zwischen Menüzeile und Paneel darf kein Pixel ohne Hover liegen, sonst klappt es beim Herunterfahren zu. */ .sz-richtung-werk .sz-menue__paneel::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: -1.6rem; block-size: 1.6rem; } } /* Unter 1100 px passt die Uebersichtskarte neben drei Spalten nicht mehr; dann nur die Spalten (01.10.2026). */ @media (min-width: 62rem) and (max-width: 68.74rem) { .sz-richtung-werk .sz-menue__gruppen--drei.sz-menue__gruppen--mit-uebersicht { grid-template-columns: minmax(0, 1fr); } .sz-richtung-werk .sz-menue__paneel .sz-menue__gruppen--drei a.sz-menue__uebersicht { display: none; } } /* Bildunterschriften überall fett (Oliver 07.10.2026), dunkelblau, linksbündig unter dem Bild. */ .sz-richtung-werk figure figcaption, .sz-richtung-werk :is(.sz-abschnitt__bild, .sz-bildpaar__bild, .sz-video__vorschau, .sz-video__figur) figcaption, .sz-richtung-werk .sz-video__beschriftung { font-weight: 500; color: var(--sz-blau); text-align: start; font-size: var(--sz-text-m); padding-block-start: var(--sz-raum-2); margin-block-start: 0; } /* Oliver 07.10.2026: 500, etwas größer, näher am Bild */ .sz-richtung-werk .sz-grund--blau figure figcaption, .sz-richtung-werk .sz-grund--blau :is(.sz-abschnitt__bild, .sz-bildpaar__bild) figcaption { color: var(--sz-invers); } /* Kennzahlenleiste ausgewogen (Oliver 07.10.2026): volle Breite, gleiche Spalten, Zahl etwas kleiner, damit auch «20 bis 50 Mitarbeiter» in seiner Spalte bleibt. */ .sz-richtung-werk .sz-fakten[data-variante="leiste"] .sz-fakten__liste { max-inline-size: none; } @media (min-width: 62rem) { .sz-richtung-werk .sz-fakten[data-variante="leiste"] .sz-fakten__liste:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sz-richtung-werk .sz-fakten[data-variante="leiste"] dd { font-size: clamp(2.8rem, 2rem + 1.4vw, 4rem); } .sz-richtung-werk .sz-fakten[data-variante="leiste"] dt { text-wrap: balance; } /* Kennzahlenleiste flacher (Oliver 07.10.2026: 20 % weniger Innenabstand oben und unten), Einleitung darüber hell und lesbar breit. */ .sz-richtung-werk .sz-fakten[data-variante="leiste"] { padding-block: calc(var(--sz-raum-8) * .8); } .sz-richtung-werk .sz-fakten[data-variante="leiste"] .sz-kopf__vorspann { color: var(--sz-invers); max-inline-size: 72ch; } /* Slogan nur einmal (Oliver 07.10.2026): steht er im Aufmacher (Über uns), entfällt er in der Kopfleiste. */ .sz-richtung-werk:has(.sz-aufmacher__nachtitel .sz-slogan) .sz-kopfzeile__slogan { display: none; } @media (min-width: 75rem) { .sz-richtung-werk:has(.sz-aufmacher__nachtitel .sz-slogan) .sz-kopfzeile__fakten > li:not(.sz-kopfzeile__slogan, .sz-kopfzeile__fakt-kurz) { display: inline-flex; } } /* Abstand zwischen Text und Bild überall mindestens 4 rem (Oliver 07.10.2026 «spacing between images and text, throughout»): Rasterabstand 2,4 rem plus 1,6 rem bei Bildern in derselben Spalte wie der Text. */ .sz-richtung-werk :is(.sz-bildpaar, .sz-video__vorschau) { margin-block-start: var(--sz-raum-4); } @media (max-width: 61.99rem) { .sz-richtung-werk .sz-kontakt__bild { margin-block: var(--sz-raum-4); } } /* Gruppentitel der FAQ: gleiche Oberkante wie die Frageliste daneben (2 px Linie), etwas größer. */ .sz-richtung-werk .sz-faq .sz-faq__gruppe { padding-block-start: calc(var(--sz-raum-5) + .5rem); border-block-start: 2px solid var(--sz-orange); font-size: var(--sz-text-xl); line-height: var(--sz-zeile-eng); text-wrap: balance; } /* ================================================================ Rangordnung und Abstände (Oliver 07.10.2026 «think through the spacing & font hierarchy throughout»). Schrift: H2 · H3 (Abschnitt-, Kachel-, FAQ-Gruppentitel) · 20 px (Fragen, Feldtitel) · Fließtext 18 px überall. Abstand: Überschrift→Unterzeile 16 · Überschrift→Fließtext 24 · Überschrift→Kacheln/Listen/Fakten/Tabelle/FAQ 48 · Text→Kästen oder Bild darunter rund 40. ================================================================ */ .sz-richtung-werk .sz-kacheln__beschreibung { font-size: var(--sz-text-m); } .sz-richtung-werk .sz-abschnitt__nachtext { font-size: var(--sz-text-m); } .sz-richtung-werk :is(.sz-fakten__rahmen, .sz-faq__rahmen, .sz-schritte__rahmen, .sz-finder__rahmen) { row-gap: var(--sz-raum-7); } .sz-richtung-werk .sz-tabelle__rahmen > .sz-kopf { margin-block-end: var(--sz-raum-6); } .sz-richtung-werk .sz-abschnitt__inhalt > .sz-felder { margin-block-start: var(--sz-raum-4); } .sz-richtung-werk .sz-video .sz-kopf + :is(.sz-video__raster, .sz-video__figur) { margin-block-start: var(--sz-raum-7); } .sz-richtung-werk .sz-kontakt__inhalt > .sz-kopf + .sz-text { margin-block-start: calc(var(--sz-raum-5) - var(--sz-raum-6)); } /* Abschluss-Block kompakter (Oliver 07.10.2026 «more compact to be able to see the FAQ earlier»): weniger Innenabstand, Überschrift eine Stufe kleiner, Fließtext normal groß, Links direkt unter dem Text. */ .sz-richtung-werk .sz-handlung { padding-block: var(--sz-raum-7); } .sz-richtung-werk .sz-handlung .sz-handlung__titel { font-size: clamp(2.8rem, 2rem + 1.4vw, 3.8rem); } .sz-richtung-werk .sz-handlung .sz-handlung__text { gap: var(--sz-raum-3); } .sz-richtung-werk .sz-handlung .sz-handlung__text p { font-size: var(--sz-text-m); } .sz-richtung-werk .sz-handlung .sz-handlung__text .sz-handlung__links { margin-block-start: var(--sz-raum-2); } .sz-richtung-werk .sz-handlung .sz-handlung__wege { padding: clamp(2rem, 1.4rem + 1.2vw, 3.2rem); } .sz-richtung-werk .sz-handlung .sz-handlung__text .sz-knoepfe { margin-block-start: var(--sz-raum-3); } /* Karte nur fürs Telefon: schmaler, vertikal mittig neben dem Text (Oliver 07.10.2026, Hierarchie). */ @media (min-width: 62rem) { .sz-richtung-werk .sz-handlung .sz-handlung__raster { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; } .sz-richtung-werk .sz-handlung .sz-handlung__wege { justify-self: end; } } /* Mega-Menü: alle Bilder gleich groß, Zoom nur innerhalb des Rahmens (Oliver 07.10.2026). */ .sz-richtung-werk .sz-menue__karte-bild { display: block; inline-size: 100%; aspect-ratio: 16 / 9; overflow: hidden; } .sz-richtung-werk .sz-menue__karte-bild > img, .sz-richtung-werk .sz-menue__karte-bild > .sz-menue__karte-leer { inline-size: 100%; block-size: 100%; aspect-ratio: auto; object-fit: cover; } /* Service-Fotos zeigen Menschen: Ausschnitt oben ansetzen, damit das 16:9-Feld keine Köpfe abschneidet (Oliver 07.10.2026). */ .sz-richtung-werk .sz-menue__karte[href*="/service/"] img { object-position: 50% 0; } /* Abschluss-Block etwas luftiger (Oliver 07.10.2026 «slightly more padding»). */ .sz-richtung-werk .sz-handlung { padding-block: calc(var(--sz-raum-7) + var(--sz-raum-4)); } /* Kopffoto läuft weich in eine direkt folgende blaue Kennzahlenleiste aus, beide wirken wie ein Element (Oliver 07.10.2026). */ .sz-richtung-werk .sz-aufmacher[data-variante="bild"]:has(+ .sz-fakten[data-variante="leiste"])::after { content: ""; position: absolute; inset: auto 0 0 0; block-size: 40%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(0 48 79 / 0) 0%, rgb(0 48 79 / .85) 65%, var(--sz-blau) 100%); } .sz-richtung-werk .sz-aufmacher[data-variante="bild"]:has(+ .sz-fakten[data-variante="leiste"]) .sz-aufmacher__text { position: relative; z-index: 2; } /* nur der Text über den Verlauf, das Foto bleibt im Hintergrund */ /* Kennzahlenleiste direkt unter dem Kopffoto: wenig Abstand, der Verlauf verbindet beides (Oliver 07.10.2026). */ .sz-richtung-werk .sz-aufmacher[data-variante="bild"] + .sz-fakten[data-variante="leiste"] { padding-block-start: var(--sz-raum-7); } .sz-richtung-werk .sz-aufmacher[data-variante="bild"]:has(+ .sz-fakten[data-variante="leiste"]) .sz-aufmacher__raster { min-block-size: 0; padding-block-end: calc(var(--sz-raum-7) * 3); } .sz-richtung-werk .sz-fakten[data-variante="leiste"] .sz-kopf__titel { color: var(--sz-invers); font-size: clamp(2.6rem, 2rem + 1vw, 3.4rem); } /* H2 auf der blauen Kennzahlenleiste (07.10.2026) */ /* Über uns: Kopffoto auf dem Desktop bildschirmfüllend unter der Kopfzeile, die Kennzahlenleiste folgt direkt (Oliver 07.10.2026). */ @media (min-width: 62rem) { .sz-richtung-werk .sz-aufmacher[data-variante="bild"]:has(+ .sz-fakten[data-variante="leiste"]) .sz-aufmacher__raster { min-block-size: calc(100svh - 16rem); } } /* Kennzahlenleiste direkt unter dem Kopffoto ohne Raster, damit Foto und Leiste nahtlos ineinander übergehen (Oliver 07.10.2026). */ .sz-richtung-werk .sz-aufmacher[data-variante="bild"] + .sz-fakten[data-variante="leiste"] { background-image: none; } /* QR-Code zum Fotos-Nachreichen nur am Rechner: am Handy ist man schon dort, der Link im Text reicht (Oliver 07.10.2026, Prüflauf). */ @media (max-width: 61.99rem) { .sz-richtung-werk .sz-abschnitt__bild:has(img[src*="/assets/qr/"]) { display: none; } } /* Englische Überschriften nicht automatisch trennen («construc-tion»); Deutsch braucht die Trennung für lange Komposita. */ .sz-richtung-werk:lang(en) :is(h1, h2, h3), :lang(en) .sz-richtung-werk :is(h1, h2, h3) { hyphens: manual; } /* Filterleisten am Handy: weicher Rand rechts zeigt, dass es weitergeht (Prüflauf 07.10.2026). */ @media (max-width: 61.99rem) { .sz-richtung-werk .sz-tabelle__chips { mask-image: linear-gradient(90deg, #000 85%, transparent); } } /* Handy: Text füllt fast die ganze Karte, deshalb Abdunklung schon ab oben (Prüflauf 07.10.2026). */ @media (max-width: 47.99rem) { .sz-richtung-werk .sz-kacheln[data-variante="vitrine"] .sz-kacheln__karte:not(.sz-kacheln__karte--ohne-bild)::before { background: linear-gradient(180deg, rgb(0 36 58 / .6) 0%, rgb(0 36 58 / .8) 45%, rgb(0 36 58 / .96) 100%); } }