/* ========================================================================== HAUSTECHNIK ELLERMANN — Sanitaer, Heizung und Elektro aus einer Hand 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 "Haustechnik Ellermann.dc.html" nach `docs/regeln/vorlagen.md`. Der Entwurf lud Oswald und Open Sans von Google, Font Awesome 6.5.1 von cdnjs, elf Fotos von Unsplash und eine Kartenkachel von tile.openstreetmap.org; dazu sc-for, sc-if, {{ }} und style-hover — nichts davon laeuft in einem Browser ohne die Claude-Design-Umgebung. Der Entwurf ist im Sichtungsbericht als Premium gefuehrt. Gebaut wird nach Benedikts Entscheidung vom 20.08.2026 nur die Starter-Fassung: kein js/scroll.js, keine Parallaxe, keine scroll-gebundenen Zaehler. 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. Der Entwurf verlangte Oswald in 400, 500, 600 und 700. Vorliegen tun nur 600 und 700 (`_shared/handwerk/README.md`). 400 und 500 wuerde der Browser synthetisch stauchen. Alle Ueberschriften laufen deshalb in 600, die staerksten Zeilen (Hero-Titel, Zahlenband, Notdienst-Nummer) in 700. Wo der Entwurf leicht wollte, ist die Schrift kleiner und gesperrt — nicht duenner. 3. Kursiv ist gestrichen. Zu Open Sans liegt hier KEIN kursiver Schnitt vor; der Entwurf setzte die drei Kundenstimmen kursiv. Sie laufen jetzt im normalen Schnitt mit typografischen Anfuehrungszeichen. 4. Font Awesome ist vollstaendig ersetzt durch gezeichnete Strichsymbole aus `_shared/handwerk/icons.svg.html` (V3, V6). Inline, kein Abruf, keine Icon-Schrift. Zwei Symbole fehlten und sind dort neu angelegt: `arrow-right` (Nr. 50, war fa-angle-right) und `triangle-warning` (Nr. 51, war fa-triangle-exclamation). Das Portrait-Zeichen `user` (Nr. 31, aus der gleichzeitigen Uebernahme "Dachdeckerei Kessler") trug die Portrait-Platzhalter; seit die erzeugten Fotos drin sind, steht es nicht mehr im Markup. 5. Die Hero-Bildfolge aus drei Fotos mit Ken-Burns-Fahrt, 6-Sekunden-Timer und drei Punkten ist EIN Standbild geworden (V7). Die Punkte sind weg — sie haetten ohne Skript nichts mehr geschaltet (V12). 6. `background-attachment: fixed` im Zahlenband ist ein Standbild geworden (V7: Parallaxe ist der Premium-Stufe vorbehalten). 7. Die vier Zahlen im Band zaehlten am Scrollstand hoch. Sie stehen jetzt einfach da (V7, VORLAGEN-STUFEN.md). 8. Die Blink-Animation am Warndreieck des Notdienst-Bandes ist gestrichen. Dauerblinken ist keine Bedienungs-Rueckmeldung, sondern Dekoration — und fuer manche Menschen ein Problem, nicht ein Hinweis. 9. Der Cookie-Hinweis ist ERSATZLOS weg (V12). Seine beiden Knoepfe haben im Entwurf nur das Fenster zugeschoben; die Seite laedt ohnehin nichts von Dritten. Damit faellt auch der Fusszeilen-Verweis "Cookie-Einstellungen" weg. 10. Die eingebettete Kartenkachel von tile.openstreetmap.org ist eine gezeichnete Umgebungskarte geworden (V3, V12). Keine Kacheln, keine Koordinaten, kein Dritter, der die Adresse des Besuchers sieht. 11. Die fuenf Referenzkacheln waren `` — ein Bild einer fertigen Badsanierung, das in Wahrheit zum Formular sprang. Sie sind jetzt `
` (V12: nichts, was nur so tut). 12. Die Fuenf-Sterne-Reihe ueber jeder Kundenstimme ist weg (V11). Eine Bewertung, die niemand vergeben hat, steht auf keiner unserer Seiten. 13. Facebook, Instagram und Xing sind weg — in der Kopfleiste wie im Fuss. Alle fuenf Symbole zeigten im Entwurf auf `#` (V17). 14. Impressum, Datenschutz und AGB bleiben verlinkt und zeigen auf den Abschnitt `#rechtliches` am Seitenende (V17). 15. Anschrift, Telefon, E-Mail und alle Ortsnamen sind erkennbar erfunden (V10, Benedikts Vorgabe vom 20.08.2026): Musterstrasse 214, 12345 Musterstadt, 0123 456789, info@haustechnik-ellermann.example. Der Entwurf nannte eine echte Strasse in Osnabrueck, eine erreichbare Domain und acht echte Nachbarorte — unter so einer Anschrift sitzt moeglicherweise ein echter Betrieb, der nie gefragt wurde. Aus dem Einsatzgebiet wurden Musterberg, Musterhausen, Musterfelde, Musterbach und Musterwalde. 16. Die Faxnummer ist gestrichen. Sie haette eine zweite erfundene Nummer gebraucht und ein Symbol, das der Satz nicht hat. 17. Namentlich genannte Organisationen sind allgemein beschrieben (V11): "Innungsfachbetrieb SHK Osnabrueck" und "Elektro-Innung Osnabrueck-Emsland" -> "Mitglied der oertlichen Handwerksinnungen". "BAFA-/KfW-Foerderung" -> "die staatliche Foerderung". "E-Check nach DIN VDE" -> "Pruefung der ortsfesten Elektroanlage mit Protokoll": E-CHECK ist ein geschuetztes Zeichen und hat auf einer erfundenen Seite nichts zu suchen. 18. 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 ``. Der Entwurf hatte zu den Stimmen gar kein Bild; die drei Portraits sind neu. In der ersten Stimme heisst es statt "Herr Kruse" jetzt "der Monteur": ein erfundener Mitarbeitername weniger. 19. Die Jahreszahl im Fuss war "2022–2026"; sie lautet jetzt "2026". Gegruendet 1978, das Abzeichen am Betriebsbild nennt 48 Jahre — das passt zu 2026 und bleibt. 20. NEU hinzugefuegt: ein Filter ueber den sechs Leistungen (Alle, Sanitaer, Heizung, Elektro). Der Entwurf trug die Gewerke bereits als Etikett auf jeder Karte, aber ohne Bedienung. Der Filter laeuft ueber vier `` plus `:checked` (V8) — bedienbar mit der Tastatur, funktioniert mit abgeschaltetem Skript, und mit abgeschaltetem CSS stehen alle sechs Karten untereinander da. 21. NEU hinzugefuegt: vier `
`-Aufklapper "Gut zu wissen" neben dem Kontaktformular. Der Entwurf beantwortete Notdienstpreis, Bauzeit, Festpreis und Hausverwaltung nirgends; als Aufklapper kosten die Antworten keine einzige Zeile Javascript. 22. Das Formular hat kein `action` und einen `type="button"`, im Markup steht der Grund (V12). Der Entwurf fing `submit` ab und schrieb "Ihre Anfrage ist eingegangen" — eine Zusage ohne Deckung. 23. Die Beispielpreise ("Notdienst ab 89 EUR Anfahrt", "Wartungsvertrag ab 14,90 EUR im Monat", "Anlagenpruefung ab 189 EUR") bleiben, mit dem Hinweis darunter, dass es Beispielwerte eines erfundenen Betriebs sind. Farblogik --------- Zwei Farben tragen die Seite, und der Entwurf hat darin recht: Dunkelblau #0d3b5c fuehrt Ueberschriften, Kopfleiste, Zahlenband und Stellenteil, Rot #c8102e ist der eine Akzent — Knopf, Etikett, Notdienst. Der Grund ist Weiss, die ruhigen Abschnitte liegen auf #f4f6f8. Was jede Farbe darf: --red #c8102e auf HELLEM Grund alles: Text, Knopf, Rahmen, Flaeche. Auf dunklem Blau NIE Text — 1,99:1 (siehe unten). --red-lt #ffa3ae nur auf DUNKLEM Grund. Dort traegt sie Text und Symbole; auf Weiss waere sie unlesbar. --blue #0d3b5c Text auf hell, Flaeche als dunkles Band. --blue-3 #134a70 nur Flaeche (Kacheln im Stellenteil, Hover in der Handy-Leiste). Weisse Schrift darauf 9,37:1. Gemessene Kontraste (relative Luminanz nach WCAG 2.1, gerechnet) ---------------------------------------------------------------- --ink #4a4f54 auf --paper #ffffff 8,28:1 --ink #4a4f54 auf --wash #f4f6f8 7,64:1 --ink #4a4f54 auf --field #fafbfc 7,99:1 (Formularfeld) --muted #5f676e auf --paper 5,75:1 --muted #5f676e auf --wash 5,31:1 --muted #5f676e auf --field 5,55:1 --blue #0d3b5c auf --paper 11,68:1 --blue #0d3b5c auf --wash 10,79:1 --blue #0d3b5c auf --field 11,28:1 --red #c8102e auf --paper 5,88:1 --red #c8102e auf --wash 5,43:1 --red #c8102e auf --red-wash #fdeef0 5,23:1 #ffffff auf --red #c8102e 5,88:1 #ffffff auf --red-2 #a80d26 7,63:1 (Hover-Flaeche) #ffffff auf --blue #0d3b5c 11,68:1 #ffffff auf --blue-2 #092a42 14,77:1 #ffffff auf --blue-3 #134a70 9,37:1 --on-dark #dbe4eb auf --blue 9,07:1 --on-dark #dbe4eb auf --blue-3 7,28:1 --on-dark-soft #a9bccd auf --blue 5,99:1 --on-dark-soft #a9bccd auf --blue-2 7,57:1 --on-dark-soft #a9bccd auf --blue-3 4,80:1 --on-dark-2 #93a8b8 auf --blue-2 6,00:1 (Fuss) --red-lt #ffa3ae auf --blue 6,18:1 --red-lt #ffa3ae auf --blue-2 7,81:1 --red-lt #ffa3ae auf --blue-3 4,95:1 --on-red #ffd8dd auf --red 4,52:1 Die zwei Fotobaender sind ueber dem FERTIGEN Foto nachgemessen, Pixel fuer Pixel: Schleier auf das Bild gerechnet, dann der schlechteste Wert der ganzen Flaeche genommen. (Die erste Fassung dieser Datei rechnete gegen ein reinweisses Pixel, weil die Fotos noch fehlten. Die echten Werte liegen erwartungsgemaess darueber.) HERO (`img/hero.jpg`, Verlauf 94 % -> 88 % -> 82 % #092a42, waagerecht) Der Text steht links, wo der Schleier am dichtesten ist. Das Foto haelt das linke Drittel bewusst dunkel und detailarm (Mittelwert 26 von 255). Weiss (h1, Knoepfe) links 10,83:1 ueber die ganze Breite 8,86:1 --on-dark (Vorspann) links 8,41:1 ueber die ganze Breite 6,88:1 ZAHLENBAND (`img/zahlen.jpg`, Schleier 92 % #0d3b5c) Bei 92 % Deckung traegt das Foto nur noch 8 % bei; die Werte liegen deshalb dicht an der Rechnung gegen Weiss. Weiss (die vier Zahlen) 9,27:1 --on-dark-soft (Beschriftung) 4,75:1 --red-lt (die vier Symbole) 4,90:1 GEZEICHNETE KARTE (`.map`, eigene --map-*-Toene) Die Beschriftungen stehen auf vier Gruenden, nicht nur auf --map-bg: --map-ink #4a4f54 auf --map-bg #eef1f4 7,30:1 --map-ink #4a4f54 auf --map-block #dfe5ea 6,52:1 --map-ink #4a4f54 auf --map-road #ffffff 8,28:1 --map-ink #4a4f54 auf den zwei Schildchen (90 % --map-bg ueber --map-block, #edf0f3) 7,23:1 --map-bg #eef1f4 auf --map-ink (Kaestchen "G") 7,30:1 --map-accent-ink #a80d26 auf der Akzentflaeche (12 % --map-accent ueber --map-bg, #e9d6dc) 5,50:1 Die Zeile "Ellermann" stand zuerst in --map-accent #c8102e und kam dort auf 4,24:1 — der einzige Text der Seite unter 4,5:1. Sie laeuft jetzt im dunkleren --map-accent-ink. REFERENZ-BESCHRIFTUNG (#092a42, konstant 94 % unter dem Text) Ueber allen fuenf Referenzfotos gemessen: schlechtester Wert 12,44:1 (`ref-werkstatt.jpg`), bester 13,26:1 (`ref-gaeste-wc.jpg`). Der erste Entwurf hatte hier einen Verlauf bis 0 %. Eine dreizeilige Beschriftung stand damit mit ihrer obersten Zeile im durchsichtigen Teil — auf einem hellen Foto waere sie kaum zu lesen. Jetzt ist die gesamte Textflaeche konstant bei 94 %; nur die obersten 2,6rem, in denen nie Text steht, blenden aus. Weiss auf 94 % ueber Weiss 12,41:1 Was ABSICHTLICH unter 4,5:1 liegt und deshalb NIE Text traegt: nichts. Jede Flaeche dieser Seite, auf der Text steht, ist oben aufgefuehrt. Aus dem Entwurf ersetzt, weil sie Text trugen und durchfielen: #8b939b auf Weiss 3,11:1 (Untertitel der Marke, Preiszeile der Leistungen, Zusatz unter jedem Namen) -> --muted #5f676e #6c757d auf Weiss 4,69:1 (Datenschutz-Ankreuzfeld) -> --muted, deutlicher #ff6b7e auf #0d3b5c 4,26:1 ("Stellenangebote") -> --red-lt #ffa3ae #c8102e auf #0d3b5c 1,99:1 (die Symbole in Kopfleiste und Zahlenband waren rot auf Dunkelblau und praktisch unsichtbar) -> --red-lt `opacity:.75` auf der Zeile mit den Bueroezeiten in der Kopfleiste ist gestrichen; die Farbe steht jetzt direkt da (--on-dark-soft). 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. Die 19 Fotos sind erzeugt und eingebaut (nano_banana_pro, 2K, dann auf Zielgroesse verkleinert). Die Beschreibungen dazu stehen in `docs/vorlagen/bild-prompts-haustechnik-ellermann.md`. Hero und Zahlenband sind CSS-Hintergruende (`img/hero.jpg`, `img/zahlen.jpg`); das Hero-Bild wird deshalb im Kopf der Seite vorgeladen (V18). Alle uebrigen Bilder sind `` mit `loading="lazy"`, `width` und `height` — das reserviert den Platz, bevor das Bild da ist, und die Seite springt beim Laden nicht. ========================================================================== */ /* ── Schriften (selbst gehostet, latin-Teilmenge, 94 548 B = 92,3 KB) ───── Barlow Semi Condensed liegt als zwei statische Dateien vor und traegt NUR 600 und 700. Open Sans ist variabel (Achse 300–800); deklariert wird nur der Bereich, der auch benutzt wird: 400 bis 700. 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 { --font-title: "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --font-body: "Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --blue: #0d3b5c; --blue-2: #092a42; /* Fuss */ --blue-3: #134a70; /* nur Flaeche: Kacheln im Stellenteil, Hover in der Handy-Leiste */ --red: #c8102e; --red-2: #a80d26; /* Hover-Flaeche, weisse Schrift darauf 7,63:1 */ --red-lt: #ffa3ae; /* Text und Symbole, nur auf dunklem Grund */ --red-wash: #fdeef0; --ink: #4a4f54; --muted: #5f676e; --paper: #ffffff; --wash: #f4f6f8; --field: #fafbfc; /* Formularfeld */ --line: #e3e7eb; --line-2: #d7dde2; --on-dark: #dbe4eb; --on-dark-soft: #a9bccd; --on-dark-2: #93a8b8; /* Fuss */ --on-red: #ffd8dd; --focus: #c8102e; --focus-halo: #ffffff; --wrap: 1170px; --pad: clamp(1rem, 4vw, 1.5rem); --notice: 26px; /* Hoehe der Demo-Hinweisleiste, fix im Markup */ --quickbar: 58px; /* Hoehe der Handy-Leiste am unteren Bildrand */ } /* Auf dunklem Grund braucht der Fokusring die umgekehrte Aufteilung, sonst verschwindet der weisse Hof im Weiss des Rings. */ .is-dark { --focus: #ffffff; --focus-halo: #092a42; } /* ── 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-body); font-size: 1rem; line-height: 1.75; color: var(--ink); 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(--blue); line-height: 1.18; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 .5em; text-wrap: pretty; } /* Barlow Semi Condensed laeuft schmal; faellt sie aus, wird Arial Narrow breiter und bricht eine Zeile spaeter um. Deshalb nirgends feste Hoehen fuer Titelzeilen. */ h1 { font-size: clamp(2.05rem, 7.4vw, 3.55rem); font-weight: 700; line-height: 1.08; } h2 { font-size: clamp(1.65rem, 5vw, 2.45rem); } h3 { font-size: 1.3rem; } h4 { font-size: 1.02rem; letter-spacing: .08em; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } a { color: var(--red); text-decoration: none; } a:hover { color: var(--blue); text-decoration: underline; } ::selection { background: var(--red); color: #fff; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); } /* Die gesperrte Kleinzeile ueber jeder Ueberschrift. Im Entwurf war das Oswald 400; hier ist es Open Sans 700, klein und gesperrt — das haelt den Ton, ohne einen Schnitt zu erfinden, den die Datei nicht hat. */ .eyebrow { display: block; font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--red); margin: 0 0 .9rem; } .is-dark .eyebrow { color: var(--red-lt); } /* Der rote Balken unter jeder Ueberschrift — das durchgaengige Zeichen des Entwurfs. Reine Flaeche, nie Text darauf. */ .rule { width: 70px; height: 4px; background: var(--red); border: 0; margin: 1.35rem 0; } .rule--center { margin-inline: auto; } .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(--blue); 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: 600; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; padding: 1rem 2rem; border: 2px solid transparent; cursor: pointer; text-align: center; transition: background-color 170ms ease, color 170ms ease, border-color 170ms ease; } .btn:hover { text-decoration: none; } .btn--red { background: var(--red); border-color: var(--red); color: #fff; } .btn--red:hover { background: var(--blue); border-color: var(--blue); color: #fff; } .btn--blue { background: var(--blue); border-color: var(--blue); color: #fff; } .btn--blue:hover { background: var(--red); border-color: var(--red); 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: #fff; border-color: #fff; color: var(--blue); } /* Nur auf rotem Grund. */ .btn--onred { background: #fff; border-color: #fff; color: var(--red); } .btn--onred:hover { background: var(--blue); border-color: var(--blue); color: #fff; } .btn--block { width: 100%; } /* ── Kopfleiste ─────────────────────────────────────────────────────────── */ .topbar { background: var(--blue); 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.4rem; padding-block: .6rem; } .topbar__item { display: inline-flex; align-items: center; gap: .5rem; } .topbar .icon { color: var(--red-lt); width: 1rem; height: 1rem; } .topbar__mail { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; color: var(--on-dark); } .topbar__mail:hover { color: #fff; } /* E-Mail und Bueroezeiten stehen auf dem Handy weiter unten auf der Seite; hier oben wuerden sie eine ganze Zeile ueber der Falz kosten. */ .topbar__hide { display: none; } /* ── Kopf ───────────────────────────────────────────────────────────────── */ .header { background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 3px 16px rgb(13 59 92 / .10); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; padding-block: .7rem; } .brand { display: flex; align-items: center; gap: .8rem; } .brand:hover { text-decoration: none; } .brand__mark { width: 46px; height: 46px; flex: none; background: var(--red); color: #fff; display: grid; place-items: center; font-family: var(--font-title); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; } .brand__name { display: block; font-family: var(--font-title); font-weight: 600; font-size: 1.45rem; line-height: 1; text-transform: uppercase; letter-spacing: .02em; color: var(--blue); } .brand__sub { display: block; font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin-top: .4rem; } .nav { display: none; } /* Der Notdienst-Knopf im Kopf: zwei Zeilen, die zweite traegt die Nummer. */ .calltile { display: inline-flex; align-items: center; gap: .65rem; background: var(--red); color: #fff; padding: .7rem 1rem; } .calltile:hover { background: var(--blue); color: #fff; text-decoration: none; } .calltile .icon { width: 1.4rem; height: 1.4rem; } .calltile__lbl { display: block; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; line-height: 1.2; } .calltile__num { display: block; font-family: var(--font-title); font-weight: 700; font-size: 1.15rem; line-height: 1.15; letter-spacing: .02em; } /* MUSS nach .calltile stehen: beide Regeln haben dieselbe Spezifitaet, und die spaetere gewinnt. Auf dem Handy traegt die Leiste am unteren Bildrand den Notdienst; hier oben braeuchte der Knopf drei Zeilen. */ .header__cta { display: none; } /* ── Hero ───────────────────────────────────────────────────────────────── */ /* Standbild, kein Video, keine Bildfolge, keine Parallaxe (V7). Der Verlauf laeuft waagerecht von 94 % auf 82 % Deckung; der Text steht links, wo es am dichtesten ist. Das Foto ist passend dazu bestellt: linkes Drittel dunkle, leere Wand. Nachgemessene Werte im Kopf dieser Datei. `background-color` traegt die Flaeche, solange das Bild laedt — deshalb sieht die Seite in der ersten Zehntelsekunde ruhig aus, nicht kaputt. Weil das Bild erst mit dieser Datei entdeckt wuerde, laedt der Seitenkopf es ausdruecklich vor (V18). */ .hero { position: relative; background-color: var(--blue); background-image: linear-gradient(90deg, rgb(9 42 66 / .94) 0%, rgb(9 42 66 / .88) 55%, rgb(9 42 66 / .82) 100%), var(--ew-kopfbild, url("../img/hero.jpg")); background-size: cover; background-position: center; color: #fff; } .hero__inner { padding-block: clamp(3.25rem, 11vw, 7.4rem); } .hero__body { max-width: 660px; } .hero__badge { display: inline-block; margin: 0; background: var(--red); color: #fff; font-family: var(--font-title); font-weight: 600; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; padding: .55rem 1rem; } .hero h1 { color: #fff; margin: 1.35rem 0 0; } .hero .rule { margin: 1.5rem 0 1.35rem; } .hero__sub { font-size: clamp(1rem, 2.4vw, 1.18rem); line-height: 1.7; color: var(--on-dark); max-width: 560px; margin: 0 0 2.1rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; } /* ── Drei Gewerke ───────────────────────────────────────────────────────── */ .trades-band { background: var(--wash); padding-bottom: clamp(.75rem, 2.5vw, 1.5rem); } .trades { display: grid; grid-template-columns: 1fr; gap: 1.4rem; padding-top: clamp(2.5rem, 7vw, 4.4rem); } .trade { background: var(--paper); padding: 2rem 1.75rem 1.75rem; border-bottom: 4px solid var(--red); box-shadow: 0 3px 18px rgb(13 59 92 / .13); transition: box-shadow 200ms ease; } .trade:hover { box-shadow: 0 10px 28px rgb(13 59 92 / .22); } .trade__icon { width: 62px; height: 62px; background: var(--blue); color: #fff; display: grid; place-items: center; margin: 0 0 1.3rem; } .trade__icon .icon { width: 1.7rem; height: 1.7rem; } .trade h3 { margin-bottom: .6rem; } .trade p { font-size: .97rem; margin-bottom: 1.1rem; } .trade__more { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-title); font-weight: 600; font-size: .92rem; letter-spacing: .12em; text-transform: uppercase; } .trade__more .icon { width: 1.05rem; height: 1.05rem; } /* ── Abschnitte ─────────────────────────────────────────────────────────── */ .section { padding-block: clamp(3rem, 8vw, 5.5rem); } .section--wash { background: var(--wash); } .section--wash + .section--wash { padding-top: 0; } .section__head { max-width: 700px; margin: 0 auto 2.8rem; text-align: center; } .section__head h2 { margin: 0; } .section__head p { margin: 0; } /* ── Ueber den Betrieb ──────────────────────────────────────────────────── */ .about { display: grid; grid-template-columns: 1fr; gap: 2.6rem; align-items: center; } .about__media { position: relative; } .about__img { width: 100%; height: 320px; object-fit: cover; } .about__badge { position: absolute; right: 0; bottom: -1.1rem; background: var(--red); color: #fff; padding: 1.1rem 1.5rem; font-family: var(--font-title); text-align: center; line-height: 1; margin: 0; } .about__num { display: block; font-size: 2.7rem; font-weight: 700; } .about__lbl { display: block; font-family: var(--font-body); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-top: .55rem; } .checks { display: grid; grid-template-columns: 1fr; gap: .75rem 1.6rem; margin: 1.6rem 0 2rem; } .checks span { display: flex; align-items: flex-start; gap: .7rem; font-size: .97rem; } .checks .icon { color: var(--red); margin-top: .28rem; } .boss { display: flex; align-items: center; gap: 1.2rem; border-top: 1px solid var(--line-2); padding-top: 1.5rem; } .boss__img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: center top; flex: none; } .boss__name { display: block; font-family: var(--font-title); font-weight: 600; font-size: 1.25rem; text-transform: uppercase; color: var(--blue); line-height: 1.15; } .boss__role { display: block; font-size: .88rem; color: var(--muted); margin-top: .3rem; } /* ── Zahlenband ─────────────────────────────────────────────────────────── */ /* Standbild und feste Zahlen. Der Entwurf hatte hier `background-attachment: fixed` und vier Zaehler am Scrollstand — beides ist der Premium-Stufe vorbehalten (VORLAGEN-STUFEN.md). */ .stats { background-color: var(--blue); background-image: linear-gradient(rgb(13 59 92 / .92), rgb(13 59 92 / .92)), url("../img/zahlen.jpg"); background-size: cover; background-position: center; color: var(--on-dark-soft); padding-block: clamp(2.75rem, 8vw, 4.6rem); } .stats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; text-align: center; } .stats__grid p { margin: 0; } .stats .icon { width: 1.9rem; height: 1.9rem; color: var(--red-lt); } .stat__num { display: block; font-family: var(--font-title); font-weight: 700; font-size: clamp(2.3rem, 8vw, 3rem); line-height: 1; color: #fff; margin: .8rem 0 .5rem; } .stat__lbl { display: block; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; line-height: 1.5; } /* ── Leistungen mit Filter: Radios plus :checked, kein Javascript ───────── */ .svc { position: relative; } /* Die Radios bleiben bedienbar und mit der Tastatur erreichbar; sie sind nur optisch entfernt. Sichtbar ist das — ein Bild einer fertigen Badsanierung, das in Wahrheit zum Formular sprang. Deshalb
(V12). */ .refs { display: grid; grid-template-columns: 1fr; gap: 14px; } .ref { position: relative; margin: 0; min-height: 220px; overflow: hidden; background: var(--blue); } .ref img { width: 100%; height: 100%; object-fit: cover; } .ref__cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 2.6rem 1.1rem 1.1rem; background: linear-gradient( 0deg, rgb(9 42 66 / .94) 0%, rgb(9 42 66 / .94) calc(100% - 2.6rem), rgb(9 42 66 / 0) 100% ); color: #fff; } .ref__ttl { display: block; font-family: var(--font-title); font-weight: 600; font-size: 1.15rem; line-height: 1.2; text-transform: uppercase; } .ref__meta { display: block; font-size: .87rem; color: var(--on-dark); margin-top: .35rem; } /* ── Kundenstimmen ──────────────────────────────────────────────────────── */ .voices { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .voice { background: var(--paper); border-top: 4px solid var(--blue); padding: 1.9rem 1.6rem; margin: 0; } .voice__img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: center top; margin: 0 0 1.1rem; } /* Kein kursiver Schnitt vorhanden — das Zitat traegt die typografischen Anfuehrungszeichen im Text, nicht eine geschraegte Faelschung. */ .voice blockquote { margin: 0 0 1.2rem; font-size: 1rem; line-height: 1.8; } .voice__who { display: block; font-family: var(--font-title); font-weight: 600; font-size: 1.15rem; text-transform: uppercase; color: var(--blue); } .voice__meta { display: block; font-size: .86rem; color: var(--muted); margin-top: .25rem; } /* ── Stellenangebote ────────────────────────────────────────────────────── */ .jobs { background: var(--blue); padding-block: clamp(3rem, 8vw, 5rem); } .jobs__grid { display: grid; grid-template-columns: 1fr; gap: 2.4rem; align-items: center; } .jobs h2 { color: #fff; } .jobs__lead { color: var(--on-dark); max-width: 560px; } .joblist { display: grid; gap: .75rem; margin: 1.8rem 0 1.6rem; } .job { margin: 0; background: var(--blue-3); border-left: 4px solid var(--red); padding: 1.1rem 1.3rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .35rem 1.2rem; } .job__ttl { font-family: var(--font-title); font-weight: 600; font-size: 1.12rem; text-transform: uppercase; color: #fff; } .job__meta { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-soft); white-space: nowrap; } .jobs__media { border: 8px solid var(--blue-3); } .jobs__media img { width: 100%; height: 340px; object-fit: cover; } /* ── Kontakt ────────────────────────────────────────────────────────────── */ .contact { display: grid; grid-template-columns: 1fr; gap: 2.4rem; align-items: start; } .form { display: grid; gap: 1.1rem; } .form__pair { display: grid; grid-template-columns: 1fr; gap: 1.1rem; } .field { margin: 0; } .field label, .field > .label { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: .45rem; } .field input, .field select, .field textarea { width: 100%; padding: .85rem .95rem; border: 1px solid var(--line-2); background: var(--field); font-family: var(--font-body); font-size: 1rem; color: var(--ink); } .field textarea { resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; } .consent { display: flex; gap: .8rem; align-items: flex-start; font-size: .88rem; line-height: 1.65; color: var(--muted); margin: 0; } .consent input { margin-top: .3rem; flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--red); } .form__note { margin: 0; font-size: .82rem; color: var(--muted); } /* Aufklapper "Gut zu wissen" —
/ statt eines Skripts: bedienbar mit der Tastatur, auffindbar ueber die Suche im Browser. */ .facts { margin-top: 2.2rem; } .facts details { border: 1px solid var(--line); background: var(--paper); margin-bottom: .55rem; } .facts summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.15rem; cursor: pointer; font-weight: 700; font-size: .95rem; color: var(--blue); list-style: none; } .facts summary::-webkit-details-marker { display: none; } .facts summary:hover { color: var(--red); } .facts summary .icon { color: var(--red); transition: transform 200ms ease; } .facts details[open] summary .icon { transform: rotate(180deg); } .facts__body { padding: 0 1.15rem 1.15rem; font-size: .94rem; color: var(--muted); } .infobox { background: var(--wash); border-top: 4px solid var(--red); padding: 1.75rem 1.5rem; } .infobox h3 { margin-bottom: 1.2rem; } .infobox address { font-style: normal; } .contactlist { display: grid; gap: .9rem; font-size: .97rem; } .contactlist > div { display: flex; align-items: flex-start; gap: .8rem; } .contactlist .icon { color: var(--red); margin-top: .25rem; } .hours { border-top: 1px solid var(--line-2); margin-top: 1.5rem; padding-top: 1.3rem; } .hours h4 { color: var(--blue); margin-bottom: .9rem; } .hours__row { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .32rem 0; font-size: .93rem; } .hours__row--duty { color: var(--red); font-weight: 700; } /* Gezeichnete Umgebungskarte statt eines Kartendienstes: keine Kacheln, keine Koordinaten, kein Dritter, der die Adresse des Besuchers sieht. Anschrift und Anfahrt stehen als Text daneben — die Zeichnung ist keine Informationsquelle. */ .mapwrap { background: var(--wash); border-top: 1px solid var(--line); } .mapwrap__inner { padding-block: clamp(2rem, 6vw, 3rem); } .map { display: block; width: 100%; height: auto; border: 1px solid var(--line-2); background: #eef1f4; --map-bg: #eef1f4; --map-block: #dfe5ea; --map-road: #ffffff; --map-ink: #4a4f54; --map-frame: #d7dde2; --map-accent: #c8102e; /* Nur fuer die Zeile "Ellermann": sie steht auf der 12-%-Akzentflaeche, und --map-accent kommt dort auf 4,24:1. Dieser dunklere Ton (dieselbe Farbe wie --red-2) schafft 5,50:1. Fahne, Rahmen und Flaeche bleiben in --map-accent. */ --map-accent-ink: #a80d26; } .map__note { font-size: .8rem; color: var(--muted); margin: .7rem 0 0; } /* ── Fuss ───────────────────────────────────────────────────────────────── */ .footer { background: var(--blue-2); color: var(--on-dark-2); font-size: .95rem; padding-top: clamp(2.75rem, 8vw, 4.2rem); } .footer__grid { display: grid; grid-template-columns: 1fr; gap: 2.2rem; padding-bottom: 2.6rem; } .footer h2 { font-family: var(--font-title); font-size: 1.1rem; font-weight: 600; letter-spacing: .1em; color: #fff; margin: 0 0 1.1rem; } .footer__brand { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; } .footer__mark { width: 42px; height: 42px; flex: none; background: var(--red); color: #fff; display: grid; place-items: center; font-family: var(--font-title); font-weight: 700; font-size: 1.35rem; } .footer__name { font-family: var(--font-title); font-weight: 600; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .04em; color: #fff; } .footer a { color: var(--on-dark-2); } .footer a:hover { color: #fff; } .footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; } .footer__duty { display: block; background: var(--red); color: #fff; font-family: var(--font-title); font-weight: 700; font-size: 1.45rem; letter-spacing: .03em; text-align: center; padding: .85rem 1rem; margin-bottom: 1rem; } .footer__duty:hover { background: var(--red-2); color: #fff; text-decoration: none; } .footer__legal { border-top: 1px solid rgb(255 255 255 / .1); } .footer__legalinner { display: flex; flex-direction: column; gap: .8rem; padding-block: 1.3rem; font-size: .84rem; } .footer__legalinner p { margin: 0; } .footer__links { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; } /* ── Handy-Leiste am unteren Bildrand ───────────────────────────────────── */ .quickbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: grid; grid-template-columns: 1fr 1fr; height: var(--quickbar); background: var(--blue); border-top: 1px solid rgb(255 255 255 / .12); } .quickbar a { display: flex; align-items: center; justify-content: center; gap: .5rem; color: #fff; font-family: var(--font-title); font-weight: 600; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; } .quickbar a:hover { text-decoration: none; background: var(--blue-3); } .quickbar a + a { background: var(--red); } .quickbar a + a:hover { background: var(--red-2); } /* Zurueck nach oben — erst ab Rechnerbreite, sonst kollidiert er mit der Leiste am unteren Bildrand. */ .totop { display: none; } /* ══ Ab 700px ════════════════════════════════════════════════════════════ */ @media (min-width: 700px) { .topbar__hide { display: inline-flex; } /* Die drei Gewerke schieben sich in den Hero hinein — wie im Entwurf, aber erst ab dieser Breite. Auf dem Handy stehen sie normal darunter. */ .trades { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: -5.5rem; padding-top: 0; position: relative; z-index: 5; } .hero__inner { padding-bottom: clamp(7rem, 16vw, 10.9rem); } .checks { grid-template-columns: 1fr 1fr; } .about__img { height: 420px; } .about__badge { right: -1.2rem; } .stats__grid { grid-template-columns: repeat(4, 1fr); } .svc__grid { grid-template-columns: 1fr 1fr; } .refs { grid-template-columns: 1fr 1fr; } .ref--big { grid-column: span 2; min-height: 300px; } .voices { grid-template-columns: 1fr 1fr; } .voice:last-child { grid-column: span 2; } .form__pair { grid-template-columns: 1fr 1fr; } .infobox { padding: 2rem 1.9rem; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.6rem; } .footer__legalinner { flex-direction: row; align-items: center; justify-content: space-between; } } /* ══ Ab 1000px ═══════════════════════════════════════════════════════════ */ @media (min-width: 1000px) { html { scroll-padding-top: calc(var(--notice) + 92px + 1rem); } .header { position: sticky; top: var(--notice); z-index: 60; } .header__inner { min-height: 92px; gap: 2rem; } .nav { display: flex; align-items: center; gap: .2rem; margin-left: auto; font-family: var(--font-title); font-weight: 600; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; } .nav a { padding: .55rem .7rem; color: var(--blue); border-bottom: 3px solid transparent; } .nav a:hover { color: var(--red); border-bottom-color: var(--red); text-decoration: none; } .header__cta { display: inline-flex; } .about { grid-template-columns: 1fr 1fr; gap: 3.5rem; } .about__img { height: 470px; } .svc__grid { grid-template-columns: repeat(3, 1fr); } .refs { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 220px; gap: 20px; } .ref { min-height: 0; } .ref--big { grid-column: 1; grid-row: span 2; min-height: 0; } .voices { grid-template-columns: repeat(3, 1fr); } .voice:last-child { grid-column: auto; } .jobs__grid { grid-template-columns: 1.3fr 1fr; gap: 3.4rem; } .jobs__media img { height: 400px; } .contact { grid-template-columns: 1.45fr 1fr; gap: 3rem; } .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 2.8rem; } .quickbar { display: none; } body { padding-bottom: 0; } .totop { display: grid; place-items: center; position: fixed; right: 22px; bottom: 28px; z-index: 80; width: 46px; height: 46px; background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgb(13 59 92 / .3); } .totop:hover { background: var(--red); color: #fff; text-decoration: none; } } /* ── Bewegung aus ───────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .has-reveal [data-reveal], .has-reveal [data-reveal].is-in { opacity: 1; transform: none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ── Druck ──────────────────────────────────────────────────────────────── */ @media print { #ew-demo-notice, .quickbar, .totop, .header, .topbar, .hero__actions, .svc__tabs { display: none; } body { padding: 0; color: #000; background: #fff; } .hero, .stats, .jobs, .alarm { background: none; color: #000; } .hero h1, .hero__sub, .stat__num, .stat__lbl, .jobs h2, .jobs__lead, .alarm h2, .alarm p, .job__ttl, .job__meta { color: #000; } .footer { background: none; color: #000; } .footer h2, .footer__name, .footer a { color: #000; } /* Auf Papier gibt es keine Filterknoepfe — alle sechs Leistungen werden gedruckt, egal was am Bildschirm ausgewaehlt war. */ .svc__grid .card { display: flex !important; } .facts details { border: 1px solid #999; } .facts__body { display: block !important; } } /* ── Rechtliches ─────────────────────────────────────────────────────────── Sprungziel fuer Impressum, Datenschutz und AGB. Die Fusszeile und das Ankreuzfeld im Formular verweisen darauf; ohne dieses Ziel waeren das Verweise ins Leere (V17). */ .legalnote { max-width: 1170px; margin-inline: auto; padding: 1.75rem clamp(1rem, 4vw, 1.75rem) 2.5rem; font-size: .85rem; line-height: 1.7; color: var(--muted); background: var(--paper); } .legalnote h2 { font-size: 1rem; margin: 0 0 .35rem; color: var(--blue); } .legalnote p { margin: 0; max-width: 62ch; }