.
Ohne diese Regel landet der komplette Schritttext in der 60px-Nummernspalte. */
.proc-row>*:not(.proc-num):not(h3):not(.hx),.proc-row>*:not(.proc-num):not(.hx):not(.hx){grid-column:1/-1;}
/* Zwei Ausnahmen, die absichtlich breiter als der Bildschirm bleiben: */
.data-table{min-width:680px;} /* scrollt innerhalb .table-wrap */
.marquee-track,.marquee-item{min-width:auto;} /* Laufband */
/* lange Zeichenketten ohne Trennmöglichkeit (Telefonnummern, Normketten) */
.mono,.split-eyebrow,.eyebrow,.proc-tag,.answer-box{overflow-wrap:anywhere;}
/* .rev-glink hat width:max-content, dagegen hilft min-width:0 nicht */
.rev-glink{width:auto;max-width:100%;}
/* lange Komposita in Überschriften: erst Silbentrennung, dann harter Umbruch */
.acc,.sec-title,.split-h,h1,h2,h3,.hx2,.hx{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;}
}
/* .split-imgs .split-visual-wrap trägt zwei Klassen und ist damit spezifischer
als der Sammelselektor oben. Ohne diese Zeile bleibt aspect-ratio:1/1 aktiv,
die Kachel wird so breit wie hoch und sprengt ihre Rasterspalte. */
@media (max-width:980px){
.split-imgs .split-visual-wrap{aspect-ratio:auto;}
}
/* Rechtstexte: Impressum und Datenschutz nutzen .legal-wrap statt .wrap
und werden von der generischen Regel oben nicht erfasst. Lange Komposita
wie „Auftragsverarbeitungsvertrag" passen bei 320px sonst nicht. */
@media (max-width:880px){
.legal-wrap,.legal-wrap *{min-width:0;}
.legal-wrap{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;}
.legal-wrap a,.legal a{overflow-wrap:anywhere;}
}
/* ── Sehr schmale Displays (≤400px) ──────────────────────────────────
Das FAQ-Plus (.ic) ist flex:0 0 40px und kann nicht schrumpfen. Neben
langen Komposita in Großbuchstaben passt es bei 320px nicht mehr in
die Zeile und wird herausgedrückt. Abstand und Symbol verkleinern,
lange Wörter trennen lassen. */
@media (max-width:400px){
.faq-q{gap:12px;font-size:16px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;}
.faq-q .ic{flex:0 0 32px;height:32px;font-size:16px;}
}
/* ── Kapitales ẞ im Versalsatz ─────────────────────────────
`text-transform:uppercase` bildet ß nach Unicode auf SS ab. Bei der
Maß-Familie entsteht dadurch ein anderes Wort („MASSE" = Gewicht),
deshalb steht das Zeichen ẞ (U+1E9E) direkt im Markup. DIN 5008
empfiehlt es für Großbuchstaben seit 2020. Betrifft nur Maße/Maßen
und Zusammensetzungen; FUSSGÄNGER, STRASSE oder HEISSPLASTIK bleiben
bei SS, dort ist die Schreibung eindeutig.
Die beiden Hauptschriften oben liefern das Zeichen nicht: ihre
`unicode-range` endet bei U+00FF. Ergänzt wird es aus dem
latin-ext-Subset DERSELBEN Schriften, als zweite Deklaration der
gleichen Familie mit `unicode-range:U+1E9E`. Der Browser holt sich
damit nur dieses eine Zeichen dort, und zwar automatisch aus der
Schrift, die an der Stelle ohnehin läuft: Archivo in Überschriften,
IBM Plex Sans im übrigen Text. Geladen werden die Dateien nur auf
Seiten, die ein ẞ zeigen.
FRÜHER stand hier ein `` um jedes Zeichen, mit
eigenen Familiennamen ArchivoSZ/PlexSZ. Das war die Ursache eines
sichtbaren Fehlers: In einem Flex-Container wird JEDES Kindelement
zum eigenen Flex-Item. In `.faq-q` (display:flex, space-between)
riß der Span Lücken von 169 bis 240px mitten ins Wort
(„IN WELCHEN MA … ẞ … EN"), in `.toc li a` (flex-direction:column)
stapelte er das Wort sogar über drei Zeilen. Per CSS ist das am Span
nicht zu heilen: Flex-Items werden blockifiziert, `display:inline`
greift also nicht. Der Fallback auf Zeichenebene braucht gar kein
Element und kann den Fehler deshalb nicht wieder erzeugen.
Die Mehrdeutigkeit, die den früheren Umweg begründete, existiert
seit der Schriftauslagerung nicht mehr: die Hauptdeklarationen
stehen in DIESER Datei und schließen U+1E9E über ihre
`unicode-range` sauber aus, es gibt also keine Überlappung. */
@font-face{
font-family:'Archivo';
font-style:normal;
font-weight:100 900;
font-stretch:100%;
font-display:swap;
src:url('fonts/archivo-latin-ext.woff2') format('woff2');
unicode-range:U+1E9E;
}
@font-face{
font-family:'IBM Plex Sans';
font-style:normal;
font-weight:100 700;
font-stretch:100%;
font-display:swap;
src:url('fonts/plexsans-latin-ext.woff2') format('woff2');
unicode-range:U+1E9E;
}
/* ── Überschrift links, Text rechts (Paket 05) ───────────────────────
Die betroffenen Abschnitte stapeln Überschrift und Text in einem auf
860px begrenzten Container, dadurch bleibt die rechte Seitenhälfte
leer. Dieser Modifier hebt die Begrenzung auf und stellt zwei Spalten
her, wie auf Stellplätzen. Typografie kommt weiterhin aus den
seiteneigenen Regeln (.content-inner h2, .content-inner p), deshalb
bleibt der Container seine Klasse behalten.
Achtung: NICHT über .content-block-inner lösen — diese Klasse ist auf
LKW-Parkplatz nur ein Breitenbegrenzer, eine globale Grid-Regel
darauf würde die Seite zerlegen. */
.head-left{max-width:none;display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:start;}
.head-left > .hl-title{position:sticky;top:120px;}
.head-left > .hl-body > p:last-child{margin-bottom:0;}
@media (max-width:980px){
.head-left{grid-template-columns:1fr;gap:28px;}
.head-left > .hl-title{position:static;}
}
/* ── Letzte Karte allein in der Zeile (Paket 05) ─────────────────────
Kartenraster mit 4 Elementen in 3 Spalten lassen die vierte Karte
allein stehen, zwei Drittel der Zeile bleiben leer. Sie spannt jetzt
über die volle Breite.
`:last-child:nth-child(3n+1)` greift nur, wenn das letzte Element in
der ersten Spalte einer Zeile beginnt, also tatsächlich allein steht.
Die Media Queries sind nötig, weil der Selektor die echte Spaltenzahl
nicht kennt: im zweispaltigen Zustand ist die vierte Karte NICHT
allein und darf nicht gespannt werden.
Die Regel wirkt nur mit der Zusatzklasse `span-last` am Raster, weil
dieselbe Rasterklasse auf verschiedenen Seiten verschiedene Umbruch-
punkte hat: .feat3-grid ist auf „Einen Parkplatz markieren" ab 769px
dreispaltig, auf „Thermoplastische Bodenmarkierung" erst ab 981px.
Eine ungebundene Regel haette dort im zweispaltigen Zustand gespannt.
Deshalb wird `span-last` gezielt gesetzt, nicht global. */
@media (min-width:981px){
.feat-grid.span-last > :last-child:nth-child(3n+1){grid-column:1 / -1;}
}
@media (min-width:769px){
.feat3-grid.span-last > :last-child:nth-child(3n+1){grid-column:1 / -1;}
}
/* ── RAL-Farbauswahl (Paket 07) ──────────────────────────────────────
Bisher nur auf 5 Seiten seiteneigen definiert. Zentral abgelegt,
damit der Baustein auf jeder Seite gleich aussieht. Werte entsprechen
der Referenz (leitlinien). */
.ral-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;}
.ral-swatch{width:44px;height:44px;border:1px solid var(--line);transition:transform .15s;}
.ral-swatch:hover{transform:scale(1.15);}
/* ── Blogkarten „Das könnte Sie auch interessieren" (Paket 07) ───────
Vorher nur auf 7 bzw. 9 Seiten seiteneigen definiert. Zentral, damit
der Baustein auf allen 32 Seiten identisch aussieht. Werte = Referenz. */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line2);border:1px solid var(--line2);}
.related-card{background:var(--bg);padding:32px;display:flex;flex-direction:column;gap:14px;transition:background .2s;}
.related-card:hover{background:var(--concrete);}
.related-card .date{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);}
.related-card h3,.related-card .hx{font-family:'Archivo',sans-serif;font-weight:800;font-size:18px;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1;}
.related-card p{font-size:14px;color:var(--muted);line-height:1.55;}
.related-card .card-link{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid transparent;align-self:flex-start;padding-bottom:2px;transition:border-color .2s;}
.related-card .card-link:hover{border-bottom-color:var(--accent);}
.card-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:16px;background:#0c0c0c;}
@media(max-width:980px){.related-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.related-grid{grid-template-columns:1fr;}}
/* ── Leistungssegmente vollflächig klickbar (Paket 09) ────────────────
.svc bringt position:relative schon mit. Die Deckfläche liegt über
der Karte, der Beratungslink darüber, damit er weiter eigenständig
funktioniert. */
.svc-cover{position:absolute;inset:0;z-index:0;}
/* Inline-Links im Kacheltext müssen über der Deckfläche liegen, sonst
schluckt sie der Segmentlink (auf der Startseite betraf das den
redaktionellen Link „Sperrflächen"). */
.svc p a,.svc-desc a,.bento-item p a,.bento-card p a,.part-item p a,.eco-item p a{position:relative;z-index:2;}
/* Kundenwunsch „Link im ganzen Segment", auch auf den Themenseiten.
Umgesetzt über den vorhandenen „Mehr Infos"-Link statt über eine zweite
Deckfläche: der Link spannt sich per ::after über die ganze Kachel auf.
Vorteil gegenüber .svc-cover: der Kacheltext bleibt markierbar und
Inline-Links bleiben erreichbar. */
.svc,.bento-item,.bento-card,.part-item,.eco-item{position:relative;}
/* Der Link darf selbst nicht positioniert sein, sonst bezieht sich inset:0
auf den Link statt auf die Kachel (so war es auf leitlinien.html). */
.svc>a:last-child:not(.svc-cover):not([href^="#"]),.bento-item>a:last-child:not([href^="#"]),.bento-card>a:last-child:not([href^="#"]),
.part-item>a:last-child:not([href^="#"]),.eco-item>a:last-child:not([href^="#"]){position:static;}
.svc>a:last-child:not(.svc-cover):not([href^="#"])::after,.bento-item>a:last-child:not([href^="#"])::after,.bento-card>a:last-child:not([href^="#"])::after,
.part-item>a:last-child:not([href^="#"])::after,.eco-item>a:last-child:not([href^="#"])::after{content:"";position:absolute;inset:0;z-index:1;}
.svc:hover,.bento-item:hover,.bento-card:hover,.part-item:hover,.eco-item:hover{cursor:pointer;}
.svc-cover:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;}
/* Alles, was eigenständig anklickbar bleiben muss, liegt über der
Deckfläche. Der Beratungslink war von Anfang an dabei, die Links im
Fließtext nicht — dadurch war der einzige redaktionelle Inline-Link
der Startseite („Sperrflächen" in Kachel 03) nicht mehr erreichbar,
der Klick landete auf der Kachelseite. Das arbeitete gegen den
Kundenwunsch, die interne Verlinkung im Text zu stärken. Als Regel
für alle Absatzlinks, damit ein künftiger Textlink nicht wieder
verdeckt wird. */
.svc > .svc-link,.svc p a{position:relative;z-index:2;}
/* ── Links im Fließtext sichtbar machen (Paket 09) ────────────────────
Bisher gab es diese Regel nur auf dem Parkplatz-Hub, überall sonst
nahm ein Textlink die Farbe des Absatzes an und war nicht als Link
erkennbar. Bewusst eng gefasst: nur Links ohne eigene Klasse in
Inhaltsabsätzen, damit Buttons, Karten, Menü und Fußzeile unberührt
bleiben. */
.wrap p > a:not([class]),
.content-body a:not(.btn),
.proc-row a:not(.btn){
color:var(--accent);
border-bottom:1px solid rgba(235,169,16,.4);
transition:border-color .2s;
}
.wrap p > a:not([class]):hover,
.content-body a:not(.btn):hover,
.proc-row a:not(.btn):hover{border-bottom-color:var(--accent);}
/* ── Inhaltsverzeichnis (Paket 09) ───────────────────────────────────
Bisher nur seiteneigen auf den drei Hubs. Zentral, damit es auf den
elf neuen Seiten identisch aussieht. Werte = Vorlage Parkplatz-Hub. */
.toc-sec{background:var(--bg2);padding:44px 0;border-bottom:1px solid var(--line2);}
.toc{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:start;}
.toc p{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);padding-top:4px;margin:0;}
.toc ol{list-style:none;counter-reset:toc;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding:0;}
.toc li{counter-increment:toc;display:flex;}
.toc li a{display:flex;flex-direction:column;gap:10px;width:100%;background:var(--concrete);border:1px solid var(--line2);padding:18px;font-family:'Archivo',sans-serif;font-weight:800;font-size:13.5px;line-height:1.2;text-transform:uppercase;letter-spacing:-.005em;transition:border-color .2s,color .2s,background .2s;}
.toc li a::before{content:"/ " counter(toc,decimal-leading-zero);font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:10px;letter-spacing:.15em;color:var(--accent);text-transform:none;}
.toc li a:hover{border-color:var(--accent);color:var(--accent);background:var(--bg);}
@media(max-width:980px){.toc{grid-template-columns:1fr;gap:18px;} .toc ol{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.toc ol{grid-template-columns:1fr;}}
/* ── Zeilenbreite der Abschnittsüberschriften (Paket 11) ──────────────
`.sec-title` war seiteneigen auf max-width:900px gedeckelt, obwohl im
`.sec-head` bis zu 1376px Platz stehen. Dadurch brachen Überschriften
um, die bequem in eine Zeile passen („Was sind Markierungsarbeiten?"
braucht 1060px). Gemessen über 35 Seiten bei 1440/1280/1024:
900px → 137 einzeilig, 1200px → 234, 1280px → 242. Bei 1200px wird
kein `.sec-intro` schmaler als 220px und nichts läuft über; darüber
bringt es kaum noch etwas und die Zeile wird zu lang zum Lesen. */
h1.sec-title,h2.sec-title,.hx2.sec-title{max-width:1400px;}
/* 1400 statt 1200 nachgezogen: bei breiten Fenstern wächst die Schrift
auf 68px, die Zeile braucht dann rund 1335px. `.wrap` deckelt ohnehin
auf 1440px, mehr als ~1376px stehen also nie zur Verfügung — 1400 wirkt
damit wie „kein Deckel", gemessen identisch (161 einzeilig bei 1920/1600/1440). */
/* ── Gezielter Umbruch, nur wo er gebraucht wird (Paket 11) ───────────
Ab 900px steht „Was sind Markierungsarbeiten?" in einer Zeile, ein
fester
würde sie dort unnötig brechen. Darunter passt die Zeile
nicht mehr und das gelbe Wort würde zerlegt — dort schaltet sich der
Umbruch zu, damit „MARKIERUNGSARBEITEN?" zusammenbleibt. */
.br-eng{display:none;}
@media(max-width:899px){.br-eng{display:inline;}}
/* ── Bento-Kacheln: Beschreibungstext (Paket 06) ──────────────────────
Drei Seiten tragen die Kacheln ohne Absatz, entsprechend fehlte die
Regel. Werte wie auf stellplaetze, wo die Kacheln schon Text haben. */
.bento-card p,
.bento-item p{font-size:14px;color:var(--muted);line-height:1.5;}
/* .bento-item ist die zweite Kachelvariante (schraffierte-schwarz-gelb,
fussgaengerueberweg). Ohne diese Regel steht der Text dort in 16px
und voller Textfarbe, also wie eine zweite Überschrift. */
/* ── Bilder in den Bestandteile-Kacheln (Paket 08) ────────────────────
Der Kunde hat auf acht Seiten „Bilder fehlen bei den Segmenten"
gemeldet. Vorbild sind die Leistungssegmente der Startseite (.svc-img).
Die negative Außenkante muss zur Innenkante der jeweiligen Kachel
passen: .bento-card hat 28px seitlich, .bento-item und .svc je 32px. */
.bento-img{aspect-ratio:16/10;background:#0a0a0a;overflow:hidden;max-height:300px;}
/* Innenabstand vereinheitlicht: .bento-item stand auf piktogramme bei
32px 28px, .bento-card auf sperrflaechen ebenso, auf stellplaetze bei
32px. Ohne gleichen Wert sitzt die Bildkante nicht bündig. */
.bento-item,.bento-card{padding:32px;}
.bento-card .bento-img{margin:0 -32px;}
.bento-item .bento-img{margin:0 -32px;}
.part-item .bento-img{margin:0 -24px;}
.bento-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.bento-card:hover .bento-img img,
.bento-item:hover .bento-img img{transform:scale(1.04);}
/* ── Bildgalerie „Kurzer Einblick“ (Paket 08, Gruppe 3) ───────────────
Zwei Abschnitte versprachen einen visuellen Einblick und zeigten kein
einziges Bild. Eigene Klasse, damit die Galerie nicht von den je Seite
verschiedenen Kachelbausteinen abhängt. */
.galerie-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line2);border:1px solid var(--line2);margin-top:44px;}
.galerie-item{background:var(--bg);display:flex;flex-direction:column;}
.galerie-item img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform .4s;}
.galerie-item:hover img{transform:scale(1.04);}
.galerie-item figcaption{padding:18px 22px;font-size:13.5px;color:var(--muted);line-height:1.5;}
@media(max-width:700px){.galerie-grid{grid-template-columns:1fr;}}
/* ── Einzelbild im Zweispalter (Paket 08) ─────────────────────────────
`.split-imgs` ist ein 1fr-1fr-Raster. Steht dort nur ein Bild, blieb
die halbe Breite leer und das Bild wirkte zu klein (Kundenpunkt
Flughafenmarkierungen). Ein einzelnes Bild nimmt jetzt beide Spalten. */
.split-imgs > .split-visual-wrap:only-child{grid-column:1 / -1;}
.split-imgs > .split-visual-wrap:only-child{aspect-ratio:4/5;}
/* 4:5 statt 16/10 (Nachbesserung Paket 04): die Schwesterseiten nutzen fuer das
grosse Einzelbild im Zweispalter `.split-visual{aspect-ratio:4/5}`. Mit 16/10
blieb das Flughafenbild halb so hoch und die 4:5-Quelle wurde beschnitten. */
/* ============================================================
Nachbesserung Paket 06: Hero-Kennzahlenleisten trennen sauber
------------------------------------------------------------
Die Regel „Kundenfeedback G1" oben schaltet auf Mobil fuer alles mit
[class*="hero"] die Silbentrennung ab (hyphens:manual !important).
Das trifft auch `.hero-stat` — dort sind die Zellen aber so schmal,
dass lange Woerter brechen MUESSEN. Ohne Trennung brach es mitten im
Wort: „DEUTSCHLAN/D", „ARBSTAETT/V" (Kundenpunkt, extern bestaetigt).
Gemessen: 164 zerschnittene Woerter ueber 9 Breiten (ab 600px), mit
dieser Regel 0. Silbentrennung greift, weil lang="de" gesetzt ist.
Betrifft nur die Kennzahlenzellen, nicht die Ueberschriften.
============================================================ */
.hero-stat .l, .hero-stat .v {
-webkit-hyphens: auto !important;
hyphens: auto !important;
overflow-wrap: break-word;
}
/* Unter 360px reicht auch die getrennte Silbe nicht mehr: gemessen bleiben
bei 320px nur 99px Innenbreite, „DEUTSCH-" braucht 101px. Deshalb dort
weniger Seitenabstand (24/20 -> 18/12 = 116px innen) und eine etwas
kleinere Kennzahl. Gleiches Mittel wie bei der G1-Korrektur der
Ueberschriften, keine Aenderung oberhalb von 360px. */
@media (max-width: 360px) {
.hero-stat { padding: 18px 12px; }
.hero-stat .v { font-size: 17px; }
}
/* ============================================================
Paket 07: Ankersprünge landen nicht mehr hinter dem festen Kopf
------------------------------------------------------------
`nav.nav` ist `position:fixed` und 79px hoch (1440px) bzw. 75px
(<=980px). Ohne `scroll-margin-top` beginnt der Zielabschnitt bei
y=0 und damit hinter dem Kopf. Gemessen vor der Regel (1440px,
170 TOC-Anker): 1 Ueberschrift verdeckt (-36px), 6 mit nur 1px
Luft, uebrige >=16px. `scroll-margin` kam im Projekt 0x vor.
Wert = Kopfhoehe + 25px Luft. Wirkt nur beim Scrollen, aendert
kein Layout.
============================================================ */
:target { scroll-margin-top: 104px; }
section[id], .content-block[id], .features-3col[id], .feature-split[id],
.features-bento[id], .eco[id], .proc[id], .split[id], .stats-sec[id],
.final[id], .toc-sec[id] { scroll-margin-top: 104px; }
@media (max-width: 980px) {
:target { scroll-margin-top: 96px; }
section[id], .content-block[id], .features-3col[id], .feature-split[id],
.features-bento[id], .eco[id], .proc[id], .split[id], .stats-sec[id],
.final[id], .toc-sec[id] { scroll-margin-top: 96px; }
}
/* ============================================================
Navigation: Dropdown-Auslöser sind Schaltflächen, keine Links
------------------------------------------------------------
„Leistungen" und „Ratgeber" oeffnen ein Menue und navigieren nie.
Als `` waren sie auf 33 Seiten ein toter Anker
(`id="ratgeber"` gab es 0x) und wurden von Screenreadern als Link
angekuendigt. Jetzt `