/* ==========================================================================
FLIESEN BRANDHOFF — Fliesenlegerbetrieb mit Referenzfilter
Basis-Stufe (29 EUR). Standbilder, ein Einblende-Effekt pro Abschnitt,
Hover und Fokus. Kein Parallax, kein Pinning, kein Scrub, kein Zaehler.
Herkunft
--------
Uebersetzt aus dem Claude-Design-Entwurf "Fliesen Brandhoff.dc.html" nach
`docs/regeln/vorlagen.md`. Der Entwurf lud Oswald und Open Sans von Google,
vierzehn Fotos von Unsplash und arbeitete mit sc-for, {{ }} und
style-hover. Dazu liefen drei Javascript-Ablaeufe gleichzeitig: ein
Hero-Wechsler alle sechs Sekunden mit Ken-Burns-Zoom, vier Zahlen, die sich
beim Laden hochzaehlten, und ein Cookie-Band. Nichts davon laeuft in einem
Browser ohne die Claude-Design-Umgebung, und nichts davon ist auf der
Basis-Stufe erlaubt.
Abweichungen vom Entwurf, jede mit Grund
----------------------------------------
1. Oswald ist ersetzt durch Barlow Semi Condensed (Ersetzungstabelle,
`docs/vorlagen/uebernahme-anleitung.md`, Schritt 4). Vorhanden, selbst
gehostet, dieselbe schmale Grotesk.
2. Barlow Semi Condensed liegt hier NUR in 600 und 700 vor. Der Entwurf
verlangte Oswald in 400, 500, 600 und 700; 400 und 500 haette der
Browser synthetisch gestaucht (`_shared/handwerk/README.md`).
Ueberschriften laufen deshalb in 600, die staerksten Zeilen
(Hero-Titel, Zahlenband, Knoepfe) in 700. Wo der Entwurf einen
leichteren Schnitt wollte, ist die Schrift kleiner und gesperrt, nicht
duenner.
3. Kursiv ist gestrichen. Zu keiner der beiden Dateien liegt ein kursiver
Schnitt vor; `font-style: italic` erzeugt darauf eine schraeg gescherte
Faelschung. Der Entwurf setzte die drei Kundenstimmen kursiv — sie
laufen jetzt im normalen Schnitt mit typografischen
Anfuehrungszeichen.
4. Font Awesome ist nicht eingebunden (V3). Alle Zeichen stehen inline aus
`_shared/handwerk/icons.svg.html`. Vier Zeichen fehlten dort und sind
im selben Stil dazugezeichnet und in die gemeinsame Datei
zurueckgeschrieben worden: `mosaic`, `sealing`, `trowel`, `building`.
5. Der Hero-Wechsler mit drei Bildern, Selbstlauf alle sechs Sekunden,
Ken-Burns-Zoom und drei Punkten ist ein Standbild geworden (V7). Die
Texte der beiden weggefallenen Folien sind nicht verloren — sie stehen
in den Leistungskarten "Badsanierung komplett" und "Feinsteinzeug &
Grossformate".
6. Die vier Zahlen im Band zaehlten sich beim Laden in einer Sekunde hoch.
Sie stehen jetzt einfach da (V7).
7. Der Referenzfilter lief ueber vier Javascript-Knoepfe. Er laeuft jetzt
ueber vier `` plus `:checked` (V8) — bedienbar mit
der Tastatur, funktioniert mit abgeschaltetem Skript.
8. Das Cookie-Band ist ersatzlos weg (V12). Beide Knoepfe setzten
denselben Zustand und blendeten das Band nur aus; gespeichert wurde
nichts. Die Demo laedt ohnehin nichts von Dritten.
9. Der Kartenplatzhalter "[ KARTE ANFAHRT ]" mit dem Hinweis "Karte wird
erst nach Zustimmung geladen" ist eine gezeichnete Umgebungskarte
geworden (V12, Muster aus `lindenhof`). Kein Dritter sieht die Adresse
des Besuchers, und nichts verspricht mehr eine Karte, die nie kommt.
10. Das Formular hat kein `action` und einen `type="button"`-Knopf (V12).
Im Entwurf tauschte es nach dem Absenden seinen Inhalt gegen "Ihre
Anfrage ist bei uns eingegangen" aus, ohne dass irgendwo etwas ankam.
11. Die sechs Leistungskarten trugen im Entwurf sechs Fotos, von denen
fuenf identisch in der Referenzgalerie ein zweites Mal vorkamen.
Dasselbe Foto an zwei Stellen entwertet beide. Die Karten tragen jetzt
gezeichnete Zeichen; die Fotos bleiben der Galerie vorbehalten.
12. Die fuenf gefuellten Sterne ueber jeder Kundenstimme sind ersatzlos
weg (V11). Eine Bewertung, die niemand vergeben hat, steht auf keiner
unserer Seiten.
13. Die Kundenstimmen BLEIBEN mit Namen stehen — ausdrueckliche
Entscheidung von Benedikt am 20.08.2026. Die Portraits dazu werden
erzeugt, nie ein Foto eines echten Menschen unter falschem Namen. Im
Markup steht dazu ``.
14. Verband, Kammer und Rechtsform sind gestrichen (V11): "Meisterbetrieb
der Fliesenlegerinnung", "Meisterbetrieb der HWK", "Innung,
Handwerkskammer" und "Fliesen Brandhoff GmbH" sind Angaben ueber echte
Organisationen bzw. einen echten Registereintrag. An ihrer Stelle
stehen Aussagen ueber die eigene Arbeit: "fester Ansprechpartner auf
jeder Baustelle", "in dritter Generation". Auch der Gruendername
"Heinrich Brandhoff" ist weg, das Gruendungsjahr 1978 bleibt.
"Ausbildungsbetrieb seit 1994" heisst jetzt "Wir bilden im eigenen
Betrieb aus" — ohne Jahreszahl, die niemand pruefen kann.
15. Die dreimal genannte Norm "DIN 18534" ist zu "Abdichtung im
Nassbereich" geworden. Normnummern und -staende veralten; eine
Vorlage, die sie nennt, veraltet mit.
16. "Fuenf Jahre Gewaehrleistung" stand im Zahlenband und im vierten
Ablaufschritt. Eine Frist mit Zahl muss im Streitfall zur
tatsaechlichen Frist passen. Im Band steht jetzt das Einsatzgebiet
(60 km), im Ablaufschritt nur noch, woran die Frist haengt: "Die
Gewaehrleistung laeuft ab der Abnahme."
17. "Freie Kapazitaeten ab November 2022" im Aufrufband ist ein Datum, das
seit Jahren vorbei ist. Es heisst jetzt "Wir nennen Ihnen den naechsten
freien Termin" — ein Weg statt eines Datums, der nicht veraltet.
18. Aus "44 Jahre Erfahrung" (gerechnet 1978 bis 2022) sind 48 geworden;
die Jahreszahl im Fuss steht auf 2026 (V10). Unter dem Zahlenband
steht neu ein Satz, dass es Beispielzahlen eines erfundenen Betriebs
sind.
19. Anschrift, Telefon, E-Mail und Ortsname sind erkennbar erfunden (V10,
Benedikts Vorgabe vom 20.08.2026): Musterstrasse 118, 12345
Musterstadt, 0123 456789, info@fliesen-brandhoff.example. Die
Ortsangaben der acht Referenzen und der drei Kundenstimmen sind
ebenfalls Muster-Orte. Die Faxnummer ist weg: eine zweite erfundene
Nummer bringt nichts und war im Entwurf ohnehin eine andere als die
angezeigte.
20. Der fest sitzende "Anrufen"-Knopf zeigte auf eine dritte Nummer:
echt aussehende Ortsvorwahl, eine Ziffer mehr als die angezeigte
Nummer. Die Ziffern des Entwurfs sind hier ABSICHTLICH nicht
wiedergegeben — unter einer echt aussehenden Nummer haengt
moeglicherweise ein echter Anschluss, der nie gefragt wurde (V10),
und ein Kommentar wird mit ausgeliefert. Der Knopf ist zur Leiste am
unteren Bildrand geworden (Anrufen, Angebot), und jeder tel:-Verweis
auf der Seite zeigt auf dieselbe Nummer, die auch dasteht.
21. Impressum und Datenschutz zeigten im Fuss beide auf `#kontakt` und
fuehrten damit ins Leere. Sie zeigen jetzt auf den Abschnitt
`#rechtliches` am Seitenende (V17), ebenso der Verweis in der
Datenschutz-Zeile des Formulars.
22. NEU hinzugefuegt: vier ``-Aufklapper neben dem Formular
(Dauer, Staub, kleine Auftraege, eigenes Material). Der Entwurf
verstreute diese Antworten in Fussnoten und Karten; als Aufklapper
sind sie auffindbar und kosten kein Javascript.
23. Die Navigation liegt unter 1000 px nicht als Klappmenue vor, sondern
gar nicht — dafuer haelt die Leiste am unteren Bildrand Anruf und
Angebot bereit. Ein Klappmenue braucht Javascript oder einen
Checkbox-Trick; beides waere mehr Mechanik als Nutzen bei sechs
Abschnitten.
Farblogik
---------
Der Grund ist neutral: Weiss #ffffff traegt die Seite, #f4f2ef hebt jeden
zweiten Abschnitt ab. Anthrazit #22262b fuehrt alle Ueberschriften und alle
dunklen Baender, #1b1e22 ist der Fuss.
Ein einziger Akzent, und er darf ALLES: Text, Knopf, Rahmen, Flaeche.
--accent #a84a12 auf hellem Grund
--accent-2 #8d3d0e Hover-Flaeche
--accent-lt #e58b46 Text, NUR auf dunklem Grund
Das ist die wichtigste Abweichung. Der Entwurf setzte durchgaengig
#c25a1c: als Text auf Weiss (4,4:1), als Text auf #f4f2ef (3,9:1) und als
Knopffarbe mit weisser Schrift (4,4:1). Alle drei liegen unter 4,5:1 —
und das betrifft jeden Knopf der Seite, nicht eine Randstelle. #a84a12 ist
derselbe Ton, zwei Stufen dunkler, und traegt weisse Schrift mit 5,8:1.
Gemessene Kontraste (relative Luminanz nach WCAG 2.1, gerechnet)
----------------------------------------------------------------
--ink #22262b auf --paper #ffffff 15,2:1
--ink #22262b auf --wash #f4f2ef 13,6:1
--body #3c4148 auf --paper 10,3:1
--body #3c4148 auf --wash 9,2:1
--muted #5d646c auf --paper 6,0:1
--muted #5d646c auf --wash 5,4:1
--muted #5d646c auf --accent-wash #f7ede6 5,2:1
--accent #a84a12 auf --paper 5,8:1
--accent #a84a12 auf --wash 5,1:1
--accent #a84a12 auf --accent-wash 5,0:1
#ffffff auf --accent #a84a12 5,8:1
#ffffff auf --accent-2 #8d3d0e 7,5:1 (Hover-Flaeche)
#ffffff auf --dark #22262b 15,2:1
#ffffff auf --dark-2 #1b1e22 16,7:1
--on-dark #d8d4ce auf --dark 10,3:1
--on-dark #d8d4ce auf --dark-2 11,3:1
--on-dark #d8d4ce auf --ph-dark #2c3137 8,9:1
--on-dark-soft #9aa1a9 auf --dark 5,8:1
--on-dark-soft #9aa1a9 auf --dark-2 6,4:1
--accent-lt #e58b46 auf --dark 5,9:1
--accent-lt #e58b46 auf --dark-2 6,5:1
--dim #b9bfc5 auf --dark 8,2:1 (Filter, unausgewaehlt)
--on-accent-soft #fbe6d8 auf --accent 4,8:1
--body #3c4148 auf Platzhalter #e7e3dd 8,1:1
#5b6570 auf #ffffff 5,9:1 (Rechtliches)
Auf dem Hero-Foto wurde nicht geschaetzt. Gerechnet ist der unguenstigste
Fall, den ein Foto ueberhaupt liefern kann — ein Pixel in reinem Weiss.
Das eingebaute `img/hero.jpg` bleibt deutlich darunter: die linke
Bildhaelfte, in der die Ueberschrift steht, ist eine unbeleuchtete Ecke.
Die Rechnung gilt also weiter, auch wenn das Bild einmal getauscht wird:
HERO (`img/hero.jpg`, Schleier #181b1f)
Auf dem Handy liegt der Schleier gleichmaessig bei 88 %. Auf dem
Rechner laeuft er von 92 % links auf 74 % rechts; der Text endet bei
rund 56 % der Fensterbreite, dort betraegt er 85,7 %. Ein weisses
Pixel wird darunter zu rgb(57,60,63).
Weiss (h1, Knoepfe) auf 85,7 % 11,1:1 auf 88 % 12,1:1
--on-dark (Vorspann) auf 85,7 % 7,5:1 auf 88 % 8,2:1
Der Entwurf lief von 88 % auf 25 %. Bei 25 % Schleier bleibt von einem
weissen Pixel rgb(197,198,199) — weisse Schrift darauf haette 1,7:1,
der Vorspann in --on-dark 1,2:1.
Deshalb faellt der Verlauf hier nur noch von 92 % auf 74 %.
Auf dem Hero steht ABSICHTLICH kein Text in --accent-lt: der Ton
erreicht ueber 85,7 % Schleier nur 4,3:1. Die Zeile "Fliesen &
Naturstein seit 1978" ist deshalb eine gefuellte Flaeche in --accent
mit weisser Schrift (5,8:1), kein farbiger Text.
REFERENZKACHELN (`img/ref-*.jpg`, Verlauf auf #181b1f)
Die Bildunterschrift liegt ueber dem Foto. Der Verlauf steht ab 2rem
unter der Oberkante bei 88 % und faellt bis zum unteren Rand auf
94 %; der Text beginnt 2,2rem unter der Oberkante, liegt also
vollstaendig im Bereich ab 88 %. Ein weisses Pixel wird unter 88 % zu
rgb(52,54,58).
Weiss (Titel) 12,1:1
--dim #b9bfc5 (Ortsangabe) 6,5:1
Beide Werte sind Untergrenzen; weiter unten steht der Schleier bei
94 %, dort sind es 14,6:1 und 7,9:1.
Der Halt bei 2rem ist Absicht. Zuerst stand er auf 55 % der
Kachelhoehe, und das lag bei einzeiligem Titel UNTER dem Titel: die
Kachelunterschrift ist dann 92,8 px hoch, der Titel beginnt bei
35,2 px — 37,9 % — und dort trug der Schleier erst 60,7 %. Ein weisses
Pixel wird darunter zu rgb(115,117,119), weisse Schrift kommt auf
4,6:1. Die Ortsangabe stand tiefer und war mit rund 7:1 nie in Gefahr;
der Titel bestand knapp — aber die Zeile "12,1:1" im Kopf war falsch,
und mit einem zweizeiligen Titel waere es schlechter geworden statt
besser: eine hoehere Kachelunterschrift schiebt die 55-%-Marke nach
unten, der Titel bleibt bei 35,2 px. Eine Laengenangabe kennt dieses
Problem nicht.
GEZEICHNETE KARTE (`.map`, eigene --map-*-Toene)
Die Beschriftungen stehen auf drei Gruenden, nicht nur auf --map-bg:
--map-ink #5d646c auf --map-bg #f4f2ef 5,4:1
--map-ink #5d646c auf --map-block #e6e2dc 4,6:1
--map-bg #f4f2ef auf --map-ink (Kaestchen B) 5,4:1
--map-accent-ink #8d3d0e auf der Akzentflaeche
(12 % --map-accent ueber --map-block, rgb(223,208,196)) 5,0:1
und, wo die Zeile "Brandhoff" ueber die Flaeche hinausragt,
auf --map-block #e6e2dc 5,8:1
Die Zeile "Brandhoff" stand zuerst in --map-accent #a84a12 und kam
dort auf 3,8:1 — der einzige Text der Seite unter 4,5:1. Sie laeuft
jetzt im dunkleren --map-accent-ink; Fahne, Rahmen und Flaeche
bleiben in --map-accent.
Was ABSICHTLICH nie Text traegt:
--line-2 #d9d4cd nur Rahmen und Trennstriche
#3b4149 nur Rahmen im dunklen Filter
#e6e2dc traegt Text an genau einer Stelle: als --map-block unter den
Beschriftungen der gezeichneten Karte. Dort ist es oben gerechnet.
Als --line ist es nur Rahmen.
Aus dem Entwurf ersetzt, weil sie Text trugen und durchfielen:
#c25a1c auf #ffffff 4,4:1 / auf #f4f2ef 3,9:1 (Akzenttext) -> --accent
#ffffff auf #c25a1c 4,4:1 (JEDER Knopf der Seite) -> --accent
#6f767e auf #f4f2ef 4,1:1 (Formularbeschriftungen) -> --muted
#8b9198 auf #ffffff 3,2:1 (Wortmarken-Unterzeile, Zusatz) -> --muted
#a2a8ae auf #ffffff 2,4:1 (Fussnote unter dem Formular) -> --muted
#ddd7cf auf #f4f2ef 1,3:1 (die vier Schrittnummern) -> --accent
Die Schrittnummern waren im Entwurf praktisch unsichtbar. Sie tragen
die Reihenfolge und stehen deshalb jetzt im Akzent, nicht in einem
Grauton knapp ueber dem Hintergrund.
Bilder
------
Dreizehn eigene Aufnahmen in `img/`, erzeugt statt von einer fremden Seite
geholt (V3, V13). Die Beschreibungen dazu stehen in
`docs/vorlagen/bild-prompts-fliesen-brandhoff.md`.
img/hero.jpg 1920x1080 199 KB CSS-Hintergrund in `.hero`,
vorgeladen im (V18)
img/betrieb.jpg 1200x900 82 KB `.split__img`
img/ref-*.jpg (8x) 1024x768 52-134 KB `.work img`
img/stimme-*.jpg (3x) 288x288 12-15 KB `.voice__img`, rund auf 96 px
Grenzen aus `docs/VORLAGEN-STUFEN.md`: Hero hoechstens 250 KB, jedes andere
Bild hoechstens 150 KB. Beides eingehalten.
Die Portraits sind erzeugte Menschen, nie das Foto eines echten Menschen
unter falschem Namen (Benedikt, 20.08.2026). Sie liegen quadratisch auf den
Kopf zugeschnitten vor, damit der runde 96-px-Ausschnitt das Gesicht zeigt
und nicht den halben Raum.
Die Regeln `.ph`, `.ph--dark`, `.ph--round` und `.ph__txt` bleiben stehen,
obwohl die Seite keinen Platzhalter mehr enthaelt: Wer ein Bild wieder
herausnimmt, braucht sie sofort, und die Kontrastzeile
`--body auf Platzhalter #e7e3dd` verweist darauf.
Aufbau der Datei
----------------
Mobil zuerst. Alle Media Queries sind min-width; die schmale Ansicht ist
der Ausgangszustand, breitere Fenster bekommen Spalten dazu. Geprueft bei
360, 768 und 1280 Pixeln.
========================================================================== */
/* ── Schriften (selbst gehostet, latin-Teilmenge, 94 548 B = 92,3 KB) ──────
Barlow Semi Condensed traegt NUR 600 und 700 — beides statische Dateien,
ein @font-face je Schnitt. Open Sans ist variabel; deklariert ist der
Bereich, der auch benutzt wird (400 bis 700), nicht die volle Achse
300–800. Kursive gibt es zu keiner der beiden. */
@font-face {
font-family: "Barlow Semi Condensed";
src: url("../vendor/fonts/barlow-semi-condensed-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Barlow Semi Condensed";
src: url("../vendor/fonts/barlow-semi-condensed-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Open Sans";
src: url("../vendor/fonts/open-sans-var.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
/* Barlow Semi Condensed ist schmal. Faellt sie aus, wird eine Ueberschrift
in Arial Narrow oder Arial deutlich breiter und bricht eine Zeile
spaeter um — deshalb steht auf keiner Titelzeile eine feste Hoehe. */
--font-title: "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
--font-text: "Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
--ink: #22262b;
--body: #3c4148;
--muted: #5d646c;
--accent: #a84a12;
--accent-2: #8d3d0e; /* Hover-Flaeche, weisse Schrift darauf 7,5:1 */
--accent-lt: #e58b46; /* Text, nur auf dunklem Grund */
--accent-wash: #f7ede6;
--on-accent-soft: #fbe6d8;
--paper: #ffffff;
--wash: #f4f2ef;
--dark: #22262b;
--dark-2: #1b1e22;
--on-dark: #d8d4ce;
--on-dark-soft: #9aa1a9;
--dim: #b9bfc5;
--line: #e6e2dc;
--line-2: #d9d4cd;
--line-dark: #3b4149;
--ph-bg: #e7e3dd;
--ph-dark: #2c3137;
--focus: #a84a12;
--focus-halo: #ffffff;
--wrap: 1170px;
--pad: clamp(1rem, 4vw, 1.25rem);
--notice: 26px; /* Hoehe der Demo-Hinweisleiste, fix im Markup */
--quickbar: 58px; /* Hoehe der Handy-Leiste am unteren Bildrand */
--radius: 0px; /* Fliesen haben scharfe Kanten. Absicht, kein Versehen. */
}
.is-dark {
--focus: #ffffff;
--focus-halo: #1b1e22;
}
/* ── Grundlagen ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--notice) + 1rem);
}
body {
margin: 0;
padding-top: var(--notice);
padding-bottom: var(--quickbar);
font-family: var(--font-text);
font-size: 1rem;
line-height: 1.75;
color: var(--body);
background: var(--paper);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
font-family: var(--font-title);
font-weight: 600;
color: var(--ink);
line-height: 1.12;
letter-spacing: .01em;
text-transform: uppercase;
margin: 0 0 .5rem;
text-wrap: balance;
}
h1 { font-weight: 700; font-size: clamp(2.15rem, 7.6vw, 3.7rem); }
h2 { font-size: clamp(1.75rem, 5.2vw, 2.5rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); text-decoration: underline; }
::selection { background: var(--accent); color: #fff; }
.wrap {
width: 100%;
max-width: var(--wrap);
margin: 0 auto;
padding-inline: var(--pad);
}
/* Ersatz fuer die duennen Oswald-Schnitte des Entwurfs: kleiner Grad,
gesperrt, kraeftig — statt einer synthetisch gestauchten 400. */
.eyebrow {
display: block;
font-family: var(--font-text);
font-size: .78rem;
font-weight: 700;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 .7rem;
}
.is-dark .eyebrow { color: var(--accent-lt); }
.rule {
width: 64px;
height: 3px;
background: var(--accent);
border: 0;
margin: 1.1rem 0 0;
}
.rule--accent { margin-bottom: 1.4rem; }
/* Auf dunklem Grund ist --accent als Strich zu dunkel (2,7:1 gegen #22262b).
Der Zierstrich nimmt dort denselben Ton wie der Akzenttext. */
.is-dark .rule { background: var(--accent-lt); }
.icon { width: 1.25rem; height: 1.25rem; flex: none; vertical-align: -.18em; }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.skip {
position: absolute;
left: 50%;
top: calc(var(--notice) + .5rem);
transform: translate(-50%, -250%);
z-index: 200;
background: var(--ink);
color: #fff;
padding: .7rem 1.2rem;
font-weight: 700;
font-size: .9rem;
letter-spacing: .06em;
}
.skip:focus { transform: translate(-50%, 0); color: #fff; text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
box-shadow: 0 0 0 6px var(--focus-halo);
}
/* ── Einblenden: genau ein Effekt pro Abschnitt ──────────────────────────── */
.has-reveal [data-reveal] {
opacity: 0;
transform: translateY(12px);
}
.has-reveal [data-reveal].is-in {
opacity: 1;
transform: none;
transition: opacity 400ms ease-out, transform 400ms ease-out;
}
/* ── Knoepfe ────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6rem;
font-family: var(--font-title);
font-weight: 700;
font-size: .95rem;
letter-spacing: .12em;
text-transform: uppercase;
padding: 1rem 1.9rem;
border: 2px solid transparent;
border-radius: var(--radius);
cursor: pointer;
text-align: center;
transition: background-color 170ms ease, color 170ms ease, border-color 170ms ease;
}
.btn:hover { text-decoration: none; }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
/* Nur auf dunklem Grund, deshalb weisse Kante. */
.btn--ghost { background: transparent; border-color: rgb(255 255 255 / .6); color: #fff; }
.btn--ghost:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--sm { padding: .75rem 1.3rem; font-size: .85rem; }
.btn--block { width: 100%; }
/* ── Kopfleiste ─────────────────────────────────────────────────────────── */
.topbar {
background: var(--dark);
color: var(--on-dark-soft);
font-size: .82rem;
line-height: 1.5;
}
.topbar__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .3rem 1.6rem;
padding-block: .6rem;
}
.topbar__item { display: inline-flex; align-items: center; gap: .5rem; }
.topbar .icon { color: var(--accent-lt); width: 1rem; height: 1rem; }
.topbar__tel {
margin-left: auto;
color: var(--on-dark);
font-weight: 700;
letter-spacing: .08em;
}
.topbar__tel:hover { color: var(--accent-lt); }
/* Die Zeiten stehen auf dem Handy im Kontaktteil; hier kosten sie eine
ganze Zeile ueber der Falz. */
.topbar__hide { display: none; }
/* ── Header ─────────────────────────────────────────────────────────────── */
.header {
background: var(--paper);
border-bottom: 1px solid var(--line);
box-shadow: 0 2px 12px rgb(34 38 43 / .06);
}
.header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
min-height: 68px;
padding-block: .7rem;
}
.brand { display: flex; align-items: center; gap: .8rem; }
.brand:hover { text-decoration: none; }
/* Vier Quadrate im Verband — das Zeichen des Entwurfs, ohne Inline-Styles. */
.brand__mark {
display: grid;
grid-template-columns: 11px 11px;
grid-template-rows: 11px 11px;
gap: 3px;
flex: none;
}
.brand__mark span { display: block; background: var(--ink); }
.brand__mark span:nth-child(1),
.brand__mark span:nth-child(4) { background: var(--accent); }
.brand__name {
display: block;
font-family: var(--font-title);
font-weight: 600;
font-size: 1.6rem;
line-height: 1.05;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink);
}
.brand__sub {
display: block;
font-size: .62rem;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--muted);
margin-top: .25rem;
}
.nav { display: none; }
.header__cta { display: none; }
/* ── Hero ───────────────────────────────────────────────────────────────── */
/* Standbild, kein Wechsler, kein Zoom, keine Parallaxe (V7). Der Schleier
liegt auf dem Handy gleichmaessig bei 88 %; auf dem Rechner faellt er von
92 % links auf 74 % rechts, und dort, wo der Text endet, betraegt er
85,7 %. Gerechnete Werte im Kopf dieser Datei.
`background-color` traegt den Hero auch dann, wenn `img/hero.jpg` noch
nicht da ist — die Ueberschrift steht dann auf Anthrazit statt auf einem
Foto und bleibt lesbar. */
.hero {
position: relative;
background-color: var(--dark);
background-image:
linear-gradient(180deg, rgb(24 27 31 / .88) 0%, rgb(24 27 31 / .88) 100%),
var(--ew-kopfbild, url("../img/hero.jpg"));
background-size: cover;
background-position: center;
color: #fff;
}
.hero__inner { padding-block: clamp(3.25rem, 12vw, 7rem); }
.hero__badge {
display: inline-block;
background: var(--accent);
color: #fff;
font-family: var(--font-title);
font-weight: 700;
font-size: .82rem;
letter-spacing: .2em;
text-transform: uppercase;
padding: .6rem 1rem;
margin: 0 0 1.3rem;
}
.hero h1 { color: #fff; margin-bottom: 1.1rem; max-width: 15ch; }
.hero__sub {
font-size: clamp(1.02rem, 2.4vw, 1.15rem);
line-height: 1.8;
color: var(--on-dark);
max-width: 34rem;
margin: 0 0 2.1rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }
/* ── Zahlenband ─────────────────────────────────────────────────────────── */
.stats { background: var(--wash); border-bottom: 1px solid var(--line); }
.stats__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.8rem 1.2rem;
text-align: center;
padding-block: clamp(2rem, 6vw, 2.4rem) 0;
}
.stats__grid p { margin: 0; }
.stat__num {
display: block;
font-family: var(--font-title);
font-weight: 700;
font-size: clamp(2.2rem, 7vw, 2.8rem);
line-height: 1;
color: var(--accent);
}
.stat__lbl {
display: block;
font-size: .76rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
margin-top: .5rem;
}
.stats__note {
text-align: center;
font-size: .78rem;
color: var(--muted);
margin: 1.4rem 0 0;
padding-bottom: clamp(1.6rem, 5vw, 2rem);
}
/* ── Abschnitte ─────────────────────────────────────────────────────────── */
.section { padding-block: clamp(3.25rem, 9vw, 5.75rem); }
.section--wash { background: var(--wash); }
.section.is-dark { background: var(--dark); color: var(--on-dark); }
.section.is-dark h2,
.section.is-dark h3 { color: #fff; }
.section__head { max-width: 44rem; margin: 0 auto 2.6rem; text-align: center; }
.section__head .rule { margin-inline: auto; }
.section__head h2 + .rule + p { color: var(--muted); margin: 1.4rem 0 0; }
.is-dark .section__head h2 + .rule + p { color: var(--on-dark-soft); }
/* ── Leistungskarten ────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.card {
background: var(--paper);
border: 1px solid var(--line);
padding: 1.9rem 1.6rem 1.7rem;
transition: box-shadow 250ms ease, transform 250ms ease, border-color 250ms ease;
}
.card:hover {
box-shadow: 0 18px 34px rgb(34 38 43 / .13);
transform: translateY(-4px);
border-color: var(--line-2);
}
.card__icon {
width: 56px; height: 56px;
margin: 0 0 1.1rem;
background: var(--accent-wash);
color: var(--accent);
display: grid;
place-items: center;
}
.card__icon .icon { width: 1.6rem; height: 1.6rem; }
.card__tag {
font-size: .68rem;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 .35rem;
}
.card h3 { margin-bottom: .55rem; }
.card h3 + p { font-size: .95rem; color: var(--muted); margin: 0; }
/* ── Betrieb: Bild links, Text rechts ───────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
.split__media { position: relative; }
/* Nur Hoehen, KEIN aspect-ratio: zusammen mit min-height wuerde das
Seitenverhaeltnis eine Mindestbreite erzwingen (300 px hoch = 400 px
breit) und bei 360 px die ganze Spalte aufblaehen. */
.split__media .ph { min-height: 300px; }
/* Dasselbe fuer das Foto: feste Hoehe, `cover` schneidet die Ueberbreite ab.
Das Bild ist 4:3; bei 360 px waere es sonst 270 px hoch und der
Jahres-Schild ueberdeckte die halbe Aufnahme. */
.split__img { display: block; width: 100%; height: 300px; object-fit: cover; }
.split__badge {
position: absolute;
right: 0;
bottom: -1.4rem;
max-width: 15rem;
background: var(--accent);
color: #fff;
padding: 1.2rem 1.5rem;
margin: 0;
box-shadow: 0 12px 30px rgb(34 38 43 / .22);
}
.split__num {
display: block;
font-family: var(--font-title);
font-weight: 700;
font-size: 2.4rem;
line-height: 1;
}
.split__lbl { display: block; font-size: .85rem; line-height: 1.5; margin-top: .4rem; }
.split__body .rule { margin-bottom: 1.6rem; }
.facts {
display: grid;
grid-template-columns: 1fr;
gap: .6rem 1.6rem;
list-style: none;
padding: 0;
margin: 1.8rem 0 0;
font-size: .95rem;
}
.facts li { display: flex; align-items: flex-start; gap: .65rem; }
.facts .icon { color: var(--accent); margin-top: .28rem; width: 1.15rem; height: 1.15rem; }
.split__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.3rem;
margin-top: 2rem;
}
.split__or { font-size: .9rem; color: var(--muted); }
/* ── Ablauf in vier Schritten ───────────────────────────────────────────── */
.steps {
display: grid;
grid-template-columns: 1fr;
gap: 1.4rem;
list-style: none;
padding: 0;
margin: 0;
}
.step {
background: var(--wash);
border-top: 3px solid var(--accent);
padding: 1.7rem 1.5rem 1.8rem;
}
.section--wash .step { background: var(--paper); }
/* Im Entwurf stand diese Zahl in #ddd7cf auf #f4f2ef — 1,3:1, praktisch
unsichtbar. Sie traegt die Reihenfolge und steht deshalb im Akzent. */
.step__no {
font-family: var(--font-title);
font-weight: 700;
font-size: 2.4rem;
line-height: 1;
color: var(--accent);
margin: 0 0 .5rem;
}
.step__icon { margin: 0 0 .7rem; color: var(--muted); }
.step__icon .icon { width: 1.5rem; height: 1.5rem; }
.step h3 { margin-bottom: .45rem; }
.step h3 + p { font-size: .92rem; color: var(--muted); margin: 0; }
/* ── Referenzen: Radios plus :checked, kein Javascript ──────────────────── */
.works { border: 0; margin: 0; padding: 0; min-width: 0; }
/* Die Radios bleiben bedienbar und mit der Tastatur erreichbar; sie sind nur
optisch entfernt. Sichtbar ist das