/* ============================================================ zeus-redesign — Design-Sprache „Petrol-Licht" Weiß ist die Bühne, Petrol ist das Licht. Tokens siehe DESIGN.md. Copy ist freigegeben und fest. ============================================================ */ :root { /* Bühnen */ --bg: #ffffff; --bg-tint: #eff6f6; --bg-deep: #061719; --bg-deep-2: #0a2124; /* Petrol-Familie (gemessen, Markenkern) */ --petrol: #0e5e63; --petrol-hell: #14787c; --petrol-tief: #0a4548; --mint: #46b8b1; --mint-hell: #67cdc6; /* Tinte */ --ink: #0b1b1d; --ink-soft: #3d5457; --ink-leise: #5a7375; --dunkel-ink: #e9f4f3; --dunkel-soft: #afcfcc; /* Linien & Flächen */ --linie: rgba(14, 94, 99, 0.14); --linie-dunkel: rgba(103, 205, 198, 0.18); --karte-schatten: 0 1px 2px rgba(11, 27, 29, 0.05), 0 8px 24px rgba(11, 27, 29, 0.07), 0 24px 64px rgba(14, 94, 99, 0.1); /* Schimmer: das eine bewegte Licht */ --shimmer: linear-gradient(110deg, var(--petrol) 0%, #2e9e96 30%, var(--mint-hell) 50%, #2e9e96 70%, var(--petrol) 100%); /* Typo */ --f-display: 'Clash Display', 'Avenir Next', sans-serif; --f-body: 'Switzer', 'Helvetica Neue', sans-serif; --fs-hero: clamp(2.9rem, 6.4vw, 5.5rem); --fs-h2: clamp(2.1rem, 4vw, 3.4rem); --fs-h3: clamp(1.25rem, 2vw, 1.6rem); --fs-mega: clamp(4.5rem, 12vw, 9rem); --fs-body: 1.0625rem; /* Z-Skala */ --z-orb: 0; --z-inhalt: 2; --z-grain: 60; --z-kopf: 100; --z-mobilnav: 110; } /* ---------- Reset & Grundstimmung ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.65; overflow-x: clip; } /* Korn über allem: nimmt den Flächen die Sterilität */ body::after { content: ''; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; transform: translateZ(0); /* eigene Ebene: Korn erzwingt sonst Repaints beim Scrollen */ opacity: 0.026; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } img { max-width: 100%; display: block; } /* width/height-Attribute dienen nur der Platzreservierung — sobald CSS die Breite setzt, muss die Höhe mitwachsen, sonst frisst object-fit das Motiv */ .haus-foto img, .beweis-foto img, .kronzeuge-bild img { height: auto; } h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.06; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } h1 em, h2 em { font-style: normal; color: var(--petrol); } p { margin: 0; } a { color: inherit; } .wrap { max-width: 1220px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); } section { position: relative; } section[id] { scroll-margin-top: 92px; } ::selection { background: rgba(20, 120, 124, 0.22); } /* FOUC-Schutz: Der Hero wird per GSAP eingeblendet. Ohne diesen Startzustand ist er beim Laden erst voll sichtbar und springt dann für die from()-Animation auf unsichtbar zurück — das flackert. Mit aktivem JS (.js, im gesetzt) starten die Hero-Bausteine unsichtbar; die Animation blendet sie ein. Läuft keine Motion (reduced motion / kein GSAP), nimmt main.js die .js-Klasse wieder weg und alles ist sofort sichtbar. */ html.js .hero-signal, html.js .hero h1, html.js .hero-lead, html.js .hero-ctas, html.js .hero-garantie, html.js .beweis-foto, html.js .hero .beweis-karte { opacity: 0; } /* Kein border-radius hier: das würde die eigene Rundung des fokussierten Elements (z. B. Pill-Buttons 999px) auf 4px zwingen und einen eckigen, versetzten Ring erzeugen. Der Outline folgt automatisch der Element-Rundung. */ :focus-visible { outline: 2px solid var(--petrol-hell); outline-offset: 3px; } /* Skip-Link: erstes fokussierbares Element, überspringt die Nav. Off-screen per transform (kein Layout-Thrash), fährt bei Fokus oben links ein. */ .skip-link { position: fixed; left: 12px; top: 12px; z-index: 200; padding: 12px 20px; border-radius: 10px; background: var(--petrol); color: #ffffff; font-weight: 600; text-decoration: none; box-shadow: 0 12px 30px rgba(14, 94, 99, 0.4); transform: translateY(-200%); transition: transform 0.2s ease; } .skip-link:focus { transform: translateY(0); } /* Nur für Screenreader: visuell versteckt, aber vorlesbar (Live-Regionen) */ .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- Formular-Absicherung (Welle 22) ---------- */ /* Honeypot: raus aus dem Sichtfeld und aus der Tab-Reihenfolge, aber im DOM (Bots füllen es aus, das JS verwirft solche Einsendungen still) */ .hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Fehlzustand: Meldung unterm Feld, Feld bekommt eine warme Signalkante. Kein Rot-Alarm-Kasten: eine Zeile Klartext reicht. */ .feld-fehler { margin: 6px 0 0; font-size: 0.88rem; line-height: 1.4; color: #b3261e; } input.ist-fehler, select.ist-fehler, textarea.ist-fehler { border-color: #b3261e !important; } .ist-fehler .kal-tage { outline: 1px solid rgba(179, 38, 30, 0.4); border-radius: 8px; } /* Bestätigung nach dem Absenden: ersetzt den Formular-Inhalt */ .form-danke { display: grid; gap: 14px; justify-items: start; padding-block: 12px; } .form-danke:focus { outline: none; } .form-danke .danke-titel { font-family: var(--f-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; margin: 0; } .form-danke p { margin: 0; color: var(--ink-soft); } .form-danke .danke-alt { font-size: 0.92rem; color: var(--ink-leise); } .form-danke .danke-alt a { color: var(--petrol); } /* ---------- Schimmer-Grundlagen ---------- */ @keyframes schimmer-lauf { from { background-position: 0% 50%; } to { background-position: 200% 50%; } } @keyframes orb-drift { from { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(4%, 6%, 0) scale(1.08); } to { transform: translate3d(-3%, -4%, 0) scale(0.96); } } @keyframes marquee-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes sheen-zug { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(240%) skewX(-18deg); } } /* ---------- Buttons ---------- */ .btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; /* border:0 PFLICHT: als