wird nur programmatisch fokussiert (Sprungmarke),
* ist nie selbst eine Tab-Station — der Fokusring des Browsers wäre hier ein
* über 9000 px hoher Rahmen um die halbe Seite. Gilt ausschließlich für
* #inhalt, alle echten Tab-Ziele behalten ihren Ring. */
#inhalt:focus {
outline: none;
}
/* §3.7-B2: Der Mini-CTA in der Testimonial-Karte fiel auf Phones auf
* 3–4 px (vw-Token ohne Untergrenze) — als Conversion-Element unlesbar
* und weit unter der 24-px-Touch-Norm. */
.text-info_testimonial .link_underline-animated {
font-size: clamp(14px, 1.11vw, 18px);
min-height: 24px;
display: inline-flex;
align-items: center;
}
/* §4.3: Komplettservice-Lkw-Banner zeigte mobil fast nur Landschaft —
* Zugmaschine + Schriftzug sitzen in der Bildmitte. */
@media (max-width: 479px) {
img[src*='proteccolor-lkw-fuhrpark-banner'] {
object-position: 52% 50%;
}
}
/* §3.5-B3: Team-Rollen-Labels brachen mobil mitten im Wort um
* („QUALITÄTSMANAGEM/ENT") — mit Trennstrich statt hartem Umbruch. */
.label-large,
.label {
overflow-wrap: normal;
hyphens: auto;
-webkit-hyphens: auto;
}
/* §8.6b: Logo-Laufband und Footer-Marquee liefen auch bei
* prefers-reduced-motion endlos weiter (WCAG 2.3.3/2.2.2). */
@media (prefers-reduced-motion: reduce) {
.clients-grid,
[class*='marquee'] {
animation-play-state: paused !important;
}
.clients-grid *,
[class*='marquee'] * {
animation-play-state: paused !important;
}
}
/* §8.1: Footer-Links unterschritten die 24-px-Touch-Zielhöhe. */
.link_footer {
padding-block: 4px;
min-height: 24px;
display: inline-flex;
align-items: center;
}
/* §8.5: Bei 320 px ragte der Hero-Claim 10 px in die GSAP-Masken —
* „Flexibel vo…" wurde rechts gekappt. */
@media (max-width: 340px) {
.section_hero-home .text-wrap_hero-home {
padding-inline: 18px;
}
}
/* §8.1: Screenreader-Volltext für GSAP-zerlegte Absätze (siehe Basis.astro). */
.sr-volltext {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* Runde-4-Feedback (Fabio 23.08.2026): Über-uns-Header etwas nach links
* schieben — rechts (Rest der Halle + Logo) ist interessanter als das
* geparkte Auto links. Mobil (<768) gilt weiter die 85%-Regel oben. */
/* object-position griff hier nicht: Auf breiten Slots beschneidet Cover
* nur vertikal. Die Bildbox ist aber 120 % breit und mittig — flex-end
* schiebt sie an den rechten Anschlag: sichtbar wird der rechte Teil
* der Halle samt Logo, das Auto links verschwindet fast ganz. */
/* Runde 4 (Fabio): „mehr vom rechten Gebäudeteil" — der breite Desktop-
* Slot zeigt das Foto in voller Breite (Cover beschneidet nur vertikal),
* CSS kann nichts verschieben. Gelöst am Quellbild: links 405 px
* (Auto-Zone) beschnitten, Stufen neu als 500/1000/1600/1900w. */
/* Über-uns-/Leistungs-Header: Das Webflow-Parallax-Skript verschiebt das
* Cover-Bild beim Scrollen per transform und reißt dabei oben/unten
* schwarze Lücken auf (PW-Screenshot 23.08., 96 px bei 1700er-Breite).
* Der Mikroeffekt ist die kaputte Darstellung nicht wert — Transform aus,
* Bild füllt den Rahmen exakt. */
.image-wrap_about-a .image_cover.parallax {
transform: none !important;
/* Und weil der Parallax-Effekt hier ohnehin abgeschaltet ist: Die 120-%-
* Überbreite aus dem Original (`.image_cover.parallax { width: 120% }`,
* ab 1920 px zusätzlich `max-width: 120%`) wird vom Rahmen nur noch
* weggeschnitten — sie verlangt aber eine um 20 % größere Quelldatei.
* Bei 1920 px Fenster war der Bildkasten 2304 px breit, bei 2560 px sogar
* 3072 px. Kappen senkt die Auflösungsanforderung der flachen
* Leistungs-Banner spürbar (Zweitlauf-Befund A1/A2, 26.08.2026).
*
* Wirkt ausschließlich auf /nasslackierung und /komplettservice:
* Auf /ueber-uns und /pulverbeschichtung schrumpft das Bild als Flex-Item
* ohnehin auf Containerbreite, dort ist das Ergebnis mit und ohne Kappung
* bitgleich (gemessen). PWs Ausschnitt-Vorgabe vom 23.08. für das
* Fassadenbild bleibt damit unangetastet. */
width: 100%;
max-width: 100%;
}
/* Fassaden-Header: PW-Vorgabe 23.08. — die linke untere Hallenecke muss
* links unten im Bild sichtbar sein. Quellbild neu ab x=160 beschnitten
* (Ecke bleibt, Auto raus); der vertikale Cover-Ausschnitt wird so gelegt,
* dass Gebäudeunterkante UND Logo im Fenster liegen. */
@media (min-width: 768px) {
img[src*='firmengebaeude-proteccolor-fassade-logo'] {
object-position: 0% 62%;
}
}
/* Timon-Zitat ~20 % größer (PW 23.08.). */
.text-info_testimonial .text_body-bold {
font-size: 17px;
}
/* Hero gestreckt (PW 24.08.): Zwischen Knöpfen und der unteren Zeile
* (Scroll-Hinweis + TÜV-Badge) lagen ungenutzt bis zu 259 px, während
* H1/Claim/Knöpfe eng aufeinander saßen. Der Textblock füllt jetzt die
* freie Höhe und ist unten verankert: Die Knöpfe enden knapp über dem
* TÜV-Badge, die Abstände dazwischen wachsen mit.
* Selbstregulierend: Bei breiten Fenstern (große vw-H1) und flachen
* Fenstern bleibt weniger Platz — die clamp-Abstände schrumpfen mit,
* statt in die untere Zeile zu laufen. */
/* Zweitlauf-Befund: Die Hero-Streckung galt erst ab 992 px — zwischen 768
* und 991 klaffte dadurch bis zu 570 px Leere zwischen Knöpfen und der
* unteren Zeile. Grenze auf 768 gezogen. */
@media (min-width: 768px) {
.section_hero-home .home-hero_top-tile {
flex: 1 1 auto;
min-height: 0;
}
.section_hero-home .headline_hero-home {
height: 100%;
justify-content: flex-end;
padding-bottom: clamp(16px, 3vh, 34px);
grid-row-gap: clamp(24px, 6vh, 64px);
row-gap: clamp(24px, 6vh, 64px);
}
.section_hero-home .button-group_hero-home {
margin-top: 0;
}
}
/* ══ Zweitlauf-Befunde 26.08.2026 (adversarialer Check vor dem Livegang) ══ */
/* BLOCKER: Fluid-Typografie ohne Untergrenze.
* Das Webflow-Original definiert alle Textgrößen ab 768 px rein in vw und
* deckelt sie nach unten NICHT — px-Werte gibt es nur unter 767 px. Ein
* einziges Pixel Fensterbreite (767→768) halbierte damit die Schrift:
* Fließtext 16 → 6,8 px, Button-Beschriftung 10,9 → 5,1 px. Betroffen war
* jede Breite bis ~1728 px, also alle Tablets und kleineren Notebooks.
* Gemessen im Zweitlauf über 26 Breiten (Minimum 4,32 px).
*
* Fix als Token-Override (anpassungen.css lädt zuletzt): dieselbe
* vw-Skalierung, aber mit Unter- UND Obergrenze. Erst ab 768 px, damit die
* bestehenden Mobil-Overrides des Originals unangetastet bleiben.
* Die Obergrenzen halten sehr breite Schirme im Rahmen; bei den bisher
* abgenommenen Breiten (1440–1920) ändert sich praktisch nichts.
* Zu JEDER Größe gehört die Zeilenhöhe mit Untergrenze — sonst kollidieren
* die Zeilen (eigener Befund: Hero-Unterzeile, Zeilenabstand < Schriftgröße). */
@media (min-width: 768px) {
/* ⚠️ Doppelter Selektor mit Absicht: Unter 991 px setzt das Original
* dieselben Token nicht auf :root, sondern auf `body` — eine :root-Regel
* allein verliert dort (gemessen: 768-900 px blieben unverändert bei
* 6,8 px Fließtext). Deshalb beides. */
:root,
body {
--_🔠-typography---size--body-1: clamp(16px, 1.11vw, 24px);
--_🔠-typography---line-height--body-1: clamp(25px, 1.78vw, 38px);
--_🔠-typography---size--body-2: clamp(14px, 0.89vw, 19px);
--_🔠-typography---line-height--body-2: clamp(21px, 1.33vw, 28px);
--_🔠-typography---size--button-1: clamp(13px, 0.78vw, 16px);
--_🔠-typography---line-height--button-1: clamp(18px, 1.11vw, 23px);
--_🔠-typography---size--button-2: clamp(12px, 0.67vw, 15px);
--_🔠-typography---line-height--button-2: clamp(16px, 0.9vw, 20px);
--_🔠-typography---size--label-1: clamp(12px, 0.67vw, 15px);
--_🔠-typography---line-height--label-1: clamp(16px, 0.89vw, 20px);
--_🔠-typography---size--label-2: clamp(11px, 0.56vw, 13px);
--_🔠-typography---line-height--label-2: clamp(14px, 0.67vw, 16px);
--_🔠-typography---size--h5: clamp(18px, 1.56vw, 30px);
--_🔠-typography---line-height--h5: clamp(22px, 1.78vw, 34px);
--_🔠-typography---size--h4: clamp(20px, 2vw, 38px);
--_🔠-typography---line-height--h4: clamp(24px, 2.22vw, 42px);
}
/* Header-CTA + Navigation: Trefferfläche nach WCAG 2.2 (mind. 24 px hoch).
* Gemessen war der Haupt-CTA bei 768 px nur 73 × 12 px groß. */
.cta_small,
.nav_menu-link,
.nav-link {
min-height: 24px;
display: inline-flex;
align-items: center;
}
}
/* Hero-Unterzeile: Die GSAP-Zeilen erbten eine vw-Zeilenhöhe, die zwischen
* 768 und ~1050 px KLEINER war als die Schrift — die Unterlängen schnitten
* durch die nächste Zeile. Feste relative Zeilenhöhe für den Claim. */
.section_hero-home .text-wrap_hero-home p,
.section_hero-home .text-wrap_hero-home .gsap_split_line {
line-height: 1.45 !important;
}
/* Formular-Rückmeldungen waren praktisch unlesbar: weiße Schrift auf
* hellem Grund (1,25:1 bzw. 1,36:1) — ausgerechnet auf der einzigen
* Conversion-Strecke. Dunkle Schrift, WCAG-konform. */
.w-form-done,
.w-form-done div,
.w-form-fail,
.w-form-fail div {
color: #0f2b22 !important;
}
.w-form-fail,
.w-form-fail div {
color: #7a1420 !important;
}
/* Nachzügler: Diese Klassen setzen ihre Schriftgröße direkt (statt über die
* Token) und blieben deshalb vom Clamp oben unberührt — gemessen zwischen
* 6,9 und 11,9 px. Betrifft Footer-Spaltenköpfe, Rollen-Labels der Team- und
* Kontaktkarten, Kennzahlen-Labels, Button-Beschriftung auf Phones und den
* Pflicht-Link im Einwilligungstext des Formulars. */
.label-large-2,
.label-large,
.label {
font-size: clamp(12px, 0.67vw, 15px) !important;
line-height: clamp(16px, 0.95vw, 20px) !important;
}
.berschrift-footer {
font-size: clamp(13px, 0.9vw, 17px) !important;
}
.text-size-large.text_body-bold {
font-size: clamp(14px, 1vw, 18px) !important;
}
.button-text,
.w-form-label,
.w-checkbox-input + span,
.w-checkbox a {
font-size: clamp(12px, 0.78vw, 15px) !important;
}
/* ══════════════════════════════════════════════════════════════════════════
Zweitlauf-Befunde 26.08.2026, zweite Runde
══════════════════════════════════════════════════════════════════════════ */
/* D4 (axe target-size, wcag258): Der Spalten-Titel „Kontakt" in der Fußzeile
* ist als einziger Titel ein Link und misst mobil nur 55,8 × 16 px. Die
* anderen Titel sind und daher nicht betroffen. min-height hebt die
* Trefffläche auf die geforderten 24 px; die Breite bleibt bei 55,8 px
* (gemessen). Hinweis: Das Element ist Flex-Item seiner Spalte, inline-flex
* wird deshalb zu flex blockifiziert — hier ohne Folge, weil die Spalte ihre
* Kinder am Anfang ausrichtet und die Breite dadurch nicht wächst. */
a.berschrift-footer {
display: inline-flex;
align-items: center;
min-height: 24px;
}
/* B1 — Footer 480–602 px: Die Spalte „Geschäftszeiten" verschwand komplett.
* Das Webflow-Original stellt die drei Fußzeilen-Spalten unter 768 px auf
* `flex-flow: row` um — die Kurzform setzt flex-wrap dabei auf nowrap. Die
* Spalten selbst haben `flex: none`, können also auch nicht schrumpfen. Ihr
* Mindestbedarf summiert sich auf 580,7 px (229,2 + 159,0 + 128,5 px Spalten
* + 2 × 32 px Abstand) — mehr, als der Container unterhalb von ca. 603 px
* Viewport hergibt. Folge: Die Spalte lief rechts aus dem Viewport und wurde
* von `body { overflow-x: clip }` ersatzlos abgeschnitten. Bei 480 px waren
* 85 % davon weg, ohne Scrollbalken zum Nachscrollen — Geschäftszeiten sind
* auf einer Handwerksseite keine Nebensache.
*
* flex-wrap: wrap greift ausschließlich, solange die Zeile nicht passt — ab
* 603 px bleibt das Layout deshalb bitgenau wie bisher (nachgemessen in
* 10-px-Schritten von 400 bis 800 px). Kein !important nötig: anpassungen.css
* lädt zuletzt, und die Langform schlägt die Kurzform bei gleicher
* Spezifität. */
@media screen and (min-width: 480px) and (max-width: 767px) {
.footer_columns-2.left {
flex-wrap: wrap;
}
}
/* B2 — Lange URLs in Rechtstexten liefen aus dem Bild: Auf /datenschutz endet
* der Absatz „Beschwerderecht bei der zuständigen Aufsichtsbehörde" mit einer
* 83 Zeichen langen, unumbrechbaren URL (bfdi.bund.de), die im HTML als
* nackter Text steht. Bei 320 px war die Zeile 526 px breit — 222 px davon
* lagen hinter dem rechten Bildrand. Scrollen half nicht, weil html und body
* `overflow-x: clip` tragen: Der Mittelteil der Adresse war schlicht weg.
* Die zuständige Regel in RechtstextInhalt.astro setzt nur Größe und
* Abstände, kein Umbruchverhalten — deshalb hier ergänzt. */
.section_body-legal p,
.section_body-legal li,
.section_body-legal a,
.section_body-legal td {
overflow-wrap: break-word;
}
/* NEU 26.08.2026 (bei der Nachmessung von B2 gefunden): Auf der Startseite
* lief die Kachel-Überschrift „Pulverbeschichtung" rechts aus dem Bild — bei
* 320 px waren 54 px weg, das Wortende fehlte sichtbar, und bei 360 px (viele
* Android-Geräte) noch 14 px. Die Größe steht fest auf 32 px, das Wort ist mit
* 18 Zeichen das längste der drei Kacheln.
*
* Die Kurve ist so gelegt, dass sie bei 375 px genau die ursprünglichen 32 px
* erreicht: Ab dort ändert sich nichts, und einen Sprung an der Grenze gibt es
* nicht. Gemessen: 320 → 25,0 px (Bedarf ≤ 25,8), 360 → 30,1 px (Bedarf
* ≤ 30,4), 374 → 31,9 px. Die Untergrenze fängt Geräte unter 280 px ab. */
@media screen and (max-width: 374px) {
.leistungen-paragraph {
font-size: max(20px, calc(12.73vw - 15.7px));
}
}
/* B4 — Kopf-CTA „Projekt anfragen" wurde links angeschnitten: Der Knopf ist bei
* 320 px Fensterbreite nur 127,6 px breit, sein Inhalt braucht aber 141 px
* (Text 127,2 + Pfeil 16 + Innenabstand 11,5). Der Text ragte deshalb 7 px über
* die linke Knopfkante hinaus und wurde von dessen `overflow: hidden`
* abgeschnitten — sichtbar fehlte das „P" von „PROJEKT".
*
* Das ist KEIN reines Alt-Geräte-Thema, wie es zunächst aussah: 320 px ist die
* Prüfbreite für WCAG 2.2 Erfolgskriterium 1.4.10 (Reflow), und ein
* Desktop-Browser mit 400 % Zoom landet real bei 318 px. Betroffen sind also
* vor allem Menschen, die die Schrift vergrößern — nicht nur iPhones von 2016.
* Abgeschnittener Text ist dort ein Informationsverlust, kein Schönheitsfehler.
*
* Statt eines Umbaus entfällt unterhalb von 400 px der dekorative Pfeil. Das
* bringt 16 px — mehr als die fehlenden 14 px — und lässt Schriftgröße,
* Trefffläche und Beschriftung unangetastet. Der Pfeil trägt keine Information;
* das Ziel steht im Text. Ab 400 px ist er unverändert da.
*
* Gilt bewusst NUR für .cta_small (den Knopf in der Kopfzeile). Die großen
* Schaltflächen im Seiteninhalt behalten ihren Pfeil auf jeder Breite. */
@media screen and (max-width: 399px) {
.cta_small .button_icon-wrap {
display: none;
}
}
/* Und für den engsten Fall — 318 px, also 400 % Zoom auf einem 1280er Fenster —
* fehlte danach noch genau 1 px. Der seitliche Innenabstand des Knopfes geht
* dort von 5,76 auf 3 px zurück; das reicht und bleibt optisch unauffällig,
* weil unterhalb von 340 px ohnehin jeder Pixel zählt. */
@media screen and (max-width: 339px) {
/* Selektor bewusst zweistufig: Weiter oben steht bereits
* `.nav_right .cta_small { padding-left: 0.6em }` (Spezifität 0,2,0).
* Eine einstufige `.cta_small`-Regel verliert dagegen, obwohl sie später
* steht — beim ersten Versuch blieb sie wirkungslos und wurde nur durch
* Nachmessen im Browser entdeckt. */
.nav_right .cta_small {
padding-left: 3px;
padding-right: 3px;
}
/* Letzte 4 px: Die Beschriftung ist gesperrt gesetzt (0,75 px Laufweite auf
* 16 Zeichen = 12 px allein aus den Abständen). Auf 0,04em zurückgenommen
* bleibt der gesperrte Charakter erhalten, es passt aber auch bei 318 px —
* der Breite, bei der ein Desktop-Browser mit 400 % Zoom real landet. */
.nav_right .cta_small .button-text {
letter-spacing: 0.04em;
}
}
/* ── Kundenmeldung 28.08.2026 (Livegang-Tag): TÜV-Badge abgeschnitten ── */
/* Der Hero ist im Original fest 100vh hoch, sein Inhalt (Überschriften +
* Claim + Knöpfe + untere Zeile mit Scroll-Tag und TÜV-Badge) braucht bei
* flachen Fenstern aber mehr: Bei 1512×750 war der Inhalt 850 px hoch,
* das Badge ragte 125 px über die Sektion hinaus und wurde beschnitten
* (nachgemessen am Live-Stand). Die Sektion darf mitwachsen — auf hohen
* Fenstern ändert sich nichts, weil der Inhalt dort kleiner als 100svh ist. */
.section_hero-home {
height: auto;
min-height: 100svh;
}
/* Nachbesserung zum Badge-Fix (PW-Screenshot 28.08., zweiter Anlauf): Der
* mitwachsende Hero allein reichte nicht — das Badge endete rechnerisch
* an der Fensterkante (16 px Luft bei 1722×1025) und kippte bei real
* kleinerem Viewport (Lesezeichenleiste) unter die Falte. Zwei Griffe:
* fester Puffer nach unten, und bei knapper Fensterhöhe wird das Badge
* kleiner, damit der ganze Hero-Inhalt in den ersten Blick passt. */
.section_hero-home .home-hero_bottom-tile {
padding-bottom: 40px;
}
@media (max-height: 1080px) {
.section_hero-home .iso-badge-image {
/* 200 px war PW zu klein (28.08., dritter Anlauf) — 260 px wirkt fast wie
* das Original (300) und spart trotzdem genug Hoehe fuer die Falte. */
width: 260px;
height: auto;
}
/* Vierter Anlauf (PW 28.08.): Der Puffer unter dem Badge lag UNTER der
* Falte, weil der Hero-Inhalt (136 px Kopfabstand + 61 px Blockluecke +
* Bloecke) die Fensterhoehe um Haaresbreite ueberragte — gemessen 942 px
* Inhalt bei 940 px Fenster. Bei knapper Hoehe werden deshalb die OBEREN
* Abstaende gestaucht; space-between verteilt den gewonnenen Platz, und
* die untere Zeile (Scroll-Tag + Badge) bekommt sichtbar Luft zur Kante. */
.section_hero-home .content_hero-home {
padding-top: 104px;
row-gap: clamp(20px, 3.5vh, 44px);
}
}