/* ===================================================== website-relaunch-pro: Basis-CSS In den Projektordner kopieren als assets/css/style.css. WICHTIG: setzen; main.js entfernt die Klasse, so bleibt alles ohne JS sichtbar. STRUKTUR ist hier fertig. TOKENS sind es NICHT. ===================================================== */ /* ===================================================== TOKEN-BLOCK — KOMPLETT ERSETZEN, NICHT ÜBERNEHMEN Die Werte unten sind BEISPIELWERTE, damit die Datei allein lauffähig ist. Sie sind KEINE Vorlage. Der Agent setzt in Phase 3/4 JEDEN dieser Werte selbst, abgeleitet aus Marke, Branche und der in DESIGN.md gewählten Design-Richtung. Die QA prüft als BLOCKER, ob --fs-hero, --fs-h2, --section, --gutter, --radius und --ease sich von den Werten unten unterscheiden. Identische clamp-Werte über mehrere Projekte hinweg sind der Hauptgrund dafür, dass alle gebauten Websites gleich aussehen. Pflicht laut design-system.md: - mindestens FÜNF Untergrund-Abstufungen - --font-head ist einer der vier erlaubten Sans-Stapel, NIEMALS eine Serifenschrift (R2) - --nav-h stimmt mit der echten Navigationshöhe überein, weil die Hero-Höhe darauf rechnet (R3) ===================================================== */ :root { /* FARBEN: fünf Untergrund-Stufen, nicht eine */ --bg: #0b0c0e; --bg-2: #101216; --bg-3: #16181d; --surface: #141619; --surface-2: #1d2024; --text: #f4f5f7; --muted: #9aa1ab; --dim: #6b7280; --brand: #e0b352; --brand-ink: #101010; --brand-soft: rgba(224, 179, 82, .12); --brand-line: rgba(224, 179, 82, .38); --rare: #7aa2c2; /* Zweitakzent: maximal 2x auf der Seite */ --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16); /* TYPO — Stapel und Skala projektspezifisch setzen */ --font-head: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-hero: clamp(2.6rem, 6.5vw, 4.8rem); --fs-h2: clamp(1.9rem, 3.6vw, 2.8rem); --fs-h3: clamp(1.2rem, 1.8vw, 1.45rem); --fs-body: clamp(1rem, 1.1vw, 1.125rem); --fs-label: .8rem; /* RHYTHMUS */ --section: clamp(4.5rem, 10vw, 8rem); --container: 1200px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --radius: 16px; --radius-sm: 10px; --shadow: 0 20px 60px rgba(0, 0, 0, .35); --shadow-lg: 0 34px 84px rgba(0, 0, 0, .5); --ease: cubic-bezier(.2, .7, .2, 1); /* STAPEL-ORDNUNG (z-index): verbindliche Skala. EISERNE REGEL: Dekoration bekommt NIE einen hoeheren Wert als Inhalt. Keine rohen z-index-Zahlen im Projekt-CSS, immer diese Tokens. Der Fehler vom 28.07.2026 (Scroll-Kreis z-index 8 ueber Text z-index 7) ist mit dieser Skala nicht mehr baubar. */ --z-media: 0; /* Hero-Bild, Hintergrundmedium */ --z-overlay: 1; /* Vignette, Farbverlauf ueber dem Medium */ --z-deco: 2; /* Scroll-Pfeil, Ornamente, Muster */ --z-content: 7; /* JEDER lesbare Text und jeder Button */ --z-nav: 100; /* fixierte Navigation */ --z-float: 90; /* WhatsApp-Button */ --z-modal: 300; /* Zwei-Klick-Overlays, Dialoge */ /* FARBFLÄCHEN-GESETZ (Fehler Nr. 4 vom 29.07.2026: grauer Untertext auf Markenblau). Auf Akzent-/Markenflächen existieren GENAU ZWEI Textfarben: --on-brand für Überschriften/Buttons, --on-brand-mute für den Untertext. --muted, --ink-mute, --ink-dim sind auf farbigen Flächen VERBOTEN, sie sind auf den neutralen Untergrund gerechnet und werden auf Farbe unlesbar. Projektspezifisch setzen (bei dunkler Markenfarbe i.d.R. Weiß-Töne): */ --on-brand: #ffffff; --on-brand-mute: rgba(255, 255, 255, .85); /* Von main.js gemessen, niemals von Hand setzen: --nav-h echte Hoehe der Navigation (unterscheidet sich mobil!) --sbw Breite der Scrollleiste (fuer Vollbreite-Sektionen) */ --sbw: 0px; /* NAVIGATIONSHÖHE — muss zur echten Leiste passen (R3) */ --nav-h: 62px; } @media (min-width: 760px) { :root { --nav-h: 70px; } } /* ---------- Scroll-Fortschrittsbalken (PFLICHT auf jeder Seite) ---------- main.js setzt --p. 2px, .08s linear: ohne Übergang ruckelt er, ab 0.1s hinkt er nach. */ .progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: calc(var(--z-nav) + 1); pointer-events: none; } .progress span { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, var(--brand), var(--brand), var(--rare) 70%, var(--brand)); box-shadow: 0 0 12px var(--brand-line); /* HELLES THEME: stattdessen 0 1px 4px */ transition: width .08s linear; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; } /* ---------- Layout ---------- */ .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section); } .grid { display: grid; gap: 24px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* .split NUR für Inhaltssektionen, NIEMALS für den Hero (R1). Text links plus Bild rechts im Hero ist ein QA-Blocker. */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; } /* ---------- Typo ---------- */ h1, h2, h3 { font-family: var(--font-head); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; } h1 { font-size: var(--fs-hero); font-weight: 800; } h2 { font-size: var(--fs-h2); font-weight: 800; } h3 { font-size: var(--fs-h3); font-weight: 700; } p { max-width: 65ch; } .muted { color: var(--muted); } .kicker { display: inline-block; font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; } /* R1 ZENTRIERUNG: Sektionsköpfe sind IMMER zentriert. Kein Sonderfall. */ .section-head { text-align: center; max-width: 64ch; margin: 0 auto clamp(2rem, 5vw, 3.5rem); } .section-head .kicker { display: inline-block; margin-bottom: 14px; } .section-head h2 { margin: 0; } .section-head p { margin: 12px auto 0; max-width: 58ch; color: var(--muted); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border-radius: 999px; font-weight: 700; line-height: 1; transition: transform .2s var(--ease), background .2s, border-color .2s, color .2s; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--brand); color: var(--brand-ink); } .btn-ghost { border: 1px solid var(--line); color: var(--text); } .btn-ghost:hover { border-color: var(--brand); color: var(--brand); } /* ---------- POLISH-FUNDAMENT: Press-Feedback ---------- ═══ GESPERRT ═══ NICHT ENTFERNEN (Eiserne Regel 12, QA Pass 4). Feedback kommt beim RUNTERDRUECKEN, nicht erst beim Loslassen — der Unterschied zwischen "reagiert sofort" und "fuehlt sich tot an". Kurze .1s, damit es knackt. Auf Maus-Geraeten mischt main.js den Druck in den Magnet-Transform; diese Regeln greifen auf Touch und ueberall ohne JS. Neue eigene Komponenten bekommen ihre EIGENE :active-Regel dazu. */ .btn:active { transform: translateY(0) scale(.97); transition-duration: .1s; } .tile:active { transform: perspective(900px) scale(.98); transition-duration: .1s; } .card:active { transform: translateY(-1px) scale(.99); transition-duration: .1s; } .nav-links a:active, .footer a:active, .faq-q:active { color: var(--brand); } .burger:active span { background: var(--brand); } .theme-toggle:active, .wa-float:active, .scroll-down:active { transform: scale(.94); transition-duration: .1s; } /* ---------- Navigation ---------- */ .nav { position: fixed; inset-inline: 0; top: 0; z-index: var(--z-nav); transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; } .nav.scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); } /* ---------- BURGER-BUGFIX 13.08.2026 ---------- ═══ GESPERRT ═══ Offenes Mobil-Menü: backdrop-filter der Leiste MUSS aus sein. Ein backdrop-filter (oder filter/transform) auf .nav macht .nav zum Containing Block für position:fixed-Kinder — das Vollbild-Overlay .nav-links saß dann in der ~70px-Leiste statt im Viewport: nach dem Scrollen (.scrolled aktiv) waren die oberen Menüpunkte unerreichbar (Kundenbug vt-marl.de, 13.08.2026). !important, damit auch spätere gleich-spezifische Regeln (.nav.scrolled, Projekt-CSS) das nie wieder einschalten. Solider Hintergrund: die Leiste verschmilzt mit dem Overlay darunter. Auf Desktop existiert .open nicht (Burger versteckt). */ .nav.open { background: var(--bg); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Das Overlay ist ein NACHFAHRE der Leiste — deren Hintergrund kann eigene Kinder nicht verdecken. Deshalb blendet eine Maske auf dem Overlay (im Mobil-Block unten) alles aus, was beim Scrollen unter die Leiste wandert. */ /* Niemals transform/filter auf .nav legen — gleicher Containing-Block-Bug. */ /* 3-Zonen-Leiste: Logo links, Links EXAKT mittig, Aktionen rechts. ═══ GESPERRT ═══ Dieses Grid NIEMALS im Projekt-CSS umdefinieren. "auto minmax(0,1fr) auto" oder Flex mit space-between schiebt die Linkgruppe aus der Mitte — Fehler Nr. 2 vom 29.07.2026, wird vom Prüfskript als NAVMITTE/STRUKTUR gemessen. Nur 1fr auto 1fr zentriert die Links auf die BILDSCHIRM-Mitte, unabhängig von Logo-Breite. */ .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-block: 14px; } .nav-inner > .nav-logo, .nav-inner > .logo { justify-self: start; } .nav-inner > nav { justify-self: center; } .nav-actions { justify-self: end; display: flex; align-items: center; gap: 12px; } .nav-logo img { height: 40px; width: auto; } .nav-links { display: flex; align-items: center; gap: 28px; list-style: none; } .nav-links a { font-weight: 600; font-size: .95rem; transition: color .2s; } .nav-links a:hover, .nav-links a.active { color: var(--brand); } .nav-cta { padding: 11px 22px; } .burger { display: none; flex-direction: column; gap: 5px; padding: 10px; } .burger span { width: 24px; height: 2px; background: var(--text); transition: transform .3s var(--ease), opacity .2s; } /* ---------- Theme-Umschalter (optional) ---------- Standard-Theme in :root. Gegen-Theme hier als Override, Attribut auf . Beispiel für helles Gegen-Theme, Werte projektspezifisch setzen: */ [data-theme="light"] { --bg: #faf9f7; --surface: #ffffff; --surface-2: #f1efeb; --text: #17181a; --muted: #5c6470; --line: rgba(0, 0, 0, .1); --shadow: 0 20px 60px rgba(0, 0, 0, .1); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--text); transition: border-color .2s, color .2s; } .theme-toggle:hover { border-color: var(--brand); color: var(--brand); } .theme-toggle svg { width: 18px; height: 18px; } /* ---------- ANKER-LANDUNG (Pflicht) ---------- ═══ GESPERRT ═══ Die Navigation ist fixiert und deckt die oberen --nav-h Pixel ab. Ohne die beiden Regeln landet JEDER #anker-Sprung und jeder Klick auf den Scroll-Pfeil so, dass die Kopfzeile der Zielsektion unter der Navigation verschwindet. Genau das ist der Eindruck "die Ebenen sind schlecht geschnitten". 18px Zugabe, damit die Sektion sichtbar atmet. */ html { scroll-padding-top: calc(var(--nav-h) + 18px); } /* ACHTUNG (Messung 29.07.2026): scroll-padding-top und scroll-margin-top ADDIEREN sich im Browser. Beides zu setzen laesst jeden Sprung ~100px zu tief landen. Deshalb NUR scroll-padding-top — [id]{scroll-margin-top} bleibt 0 und wird NICHT gesetzt. */ /* ---------- HERO ---------- ═══ GESPERRT (Höhe, Anschluss, Ausbruch) ═══ R1 + R3: IMMER zentriert, IMMER exakte Höhe. Es gibt keine linksbündige und keine ungefähre Variante mehr. Der Hero beginnt Pixel an Pixel an der Nav-Unterkante (margin-top: var(--nav-h)) — ein leeres Band dazwischen war Fehler Nr. 1 vom 29.07.2026 (LEERBLOCK). */ .hero { position: relative; overflow: hidden; isolation: isolate; /* Vollbreite-Ausbruch. --sbw ist die Scrollleisten-Breite, die main.js misst. Ohne sie ist die Sektion genau um die Scrollleiste zu breit und die ganze Seite scrollt seitlich (auf Windows immer sichtbar). */ width: calc(100vw - var(--sbw)); margin-left: calc(50% - (100vw - var(--sbw)) / 2); margin-right: calc(50% - (100vw - var(--sbw)) / 2); /* R3: genau Viewport minus Navigationshöhe. min-height statt height, mit voller Absicht: bei exakter Höhe plus overflow:hidden wird Hero-Text auf kleinen Handys ABGESCHNITTEN. Ein Hero, der im Ausnahmefall 40px mitwächst, ist ein Schönheitsfehler. Abgeschnittene Schrift ist ein verlorener Kunde. Im Normalfall greift die Höhe exakt wie vorher, weil das Text-Budget aus dem Design-System eingehalten wird. */ min-height: calc(100vh - var(--nav-h)); min-height: calc(100dvh - var(--nav-h)); /* Die Navigation ist fixiert und liegt UEBER dem Inhalt. Ohne diesen Versatz beginnt das Hero unter der Leiste und der Hero-Text laeuft in sie hinein. Auf kleinen Handys verschwindet dadurch die halbe Ueberschrift. Der Versatz gehoert ins Fundament, nicht in jedes Projekt-CSS von Hand. */ margin-top: var(--nav-h); display: flex; align-items: center; justify-content: center; } /* Sehr flache Fenster: 520px Mindesthöhe wuerde hier ueber den Bildschirm hinausragen, deshalb bewusst nur dort, wo genug Platz ist. */ @media (min-height: 560px) { .hero { min-height: max(520px, calc(100dvh - var(--nav-h))); } } .hero .hero-content { position: relative; z-index: var(--z-content); display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .hero .hero-content h1 { margin-inline: auto; max-width: 15ch; } .hero .hero-content p.lead { margin-inline: auto; } .hero .hero-actions { justify-content: center; align-self: center; } /* R4 VIGNETTE: Pflicht, sobald Text über einem Bild liegt. Immer ZWEI Verläufe, nie einer. Variante je nach Lichtwelt. */ .hero-veil { position: absolute; inset: 0; z-index: var(--z-overlay); pointer-events: none; } .hero-veil.dark { background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.95) 100%), linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 22%, transparent 58%, rgba(0,0,0,.95) 100%); } /* Helle Variante: Projektfarbe für BG einsetzen (rgba des --bg-Werts). */ .hero-veil.light { background: radial-gradient(ellipse 76% 62% at 50% 48%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 34%, rgba(255,255,255,.52) 62%, rgba(255,255,255,0) 88%), linear-gradient(180deg, rgba(255,255,255,.88) 0%, transparent 18%, transparent 72%, rgba(255,255,255,.94) 100%); } /* Scroll-Pfeil: ersetzt Buttons im Hero. Drei Animationen mit UNTERSCHIEDLICHEN Laufzeiten, sonst entsteht ein Gleichtakt. */ .scroll-down { margin-top: 40px; align-self: center; width: 58px; height: 58px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-soft); border: 1.5px solid var(--brand); color: var(--brand); position: relative; cursor: pointer; transition: background .3s ease, transform .3s ease, box-shadow .3s ease, color .3s ease; animation: sdBounce 2.4s ease-in-out infinite; } .scroll-down::before { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--brand); opacity: 0; pointer-events: none; animation: sdRing 2.4s ease-out infinite; } .scroll-down svg { width: 22px; height: 22px; animation: sdSlide 1.8s ease-in-out infinite; } .scroll-down:hover { background: var(--brand); color: var(--brand-ink); transform: scale(1.08); animation-play-state: paused; } @keyframes sdBounce { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(8px) } } @keyframes sdSlide { 0%, 100% { transform: translateY(-2px); opacity: .85 } 50% { transform: translateY(3px); opacity: 1 } } @keyframes sdRing { 0% { opacity: .5; transform: scale(1) } 100% { opacity: 0; transform: scale(1.7) } } /* ACHTUNG, TEURER FEHLER: Der Scroll-Pfeil steht im FLUSS (margin-top oben), nicht absolut am unteren Rand. Wer ihn auf position: absolute; bottom: 30px; z-index: 8 umbaut, erzeugt den Fehler "Kreis liegt auf der Schrift", sobald der Hero- Text eine Zeile laenger wird oder das Fenster flacher ist. Genau so ist es am 28.07.2026 auf einer ausgelieferten Kundenseite passiert. Nicht aendern. */ .hero > .scroll-down, .hero .hero-content > .scroll-down { position: relative; z-index: var(--z-deco); } .scroll-hint { position: relative; z-index: var(--z-deco); margin-top: 40px; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; color: var(--muted); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; } .scroll-hint::after { content: ""; width: 1px; height: 44px; background: linear-gradient(to bottom, var(--brand), transparent); animation: scrollhint 2s var(--ease) infinite; } @keyframes scrollhint { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } .hero-media, .hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: var(--z-media); } .hero-overlay { position: absolute; inset: 0; z-index: var(--z-overlay); pointer-events: none; background: linear-gradient(to top, var(--bg) 4%, color-mix(in srgb, var(--bg) 55%, transparent) 45%, color-mix(in srgb, var(--bg) 25%, transparent) 100%); } .hero-content { position: relative; z-index: var(--z-content); padding-block: clamp(2rem, 6vh, 4rem); } .hero-content p.lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--muted); margin-top: 18px; max-width: 55ch; } /* Button-Paare: exakt gleich breit (1fr-Spalten am breitesten Kind) */ .hero-actions { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; margin-top: 32px; } @media (max-width: 560px) { .hero-actions { grid-auto-flow: row; width: 100%; } } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; gap: 14px; transition: transform .25s var(--ease), border-color .25s, background .25s; } .card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); background: var(--surface-2); } .card .icon { width: 52px; height: 52px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); } .card .icon svg { width: 26px; height: 26px; } .card p { color: var(--muted); font-size: .98rem; } /* R1: Karteninhalte zentriert. */ .card { text-align: center; align-items: center; } .card .more { align-self: center; } .card .more { margin-top: auto; font-weight: 700; color: var(--brand); display: inline-flex; gap: 8px; align-items: center; } /* ---------- Bildkacheln mit Tempo-Kontrast ---------- Das langsame Bild (1.6s) gegen die schnellen Details (0.25s) ist der wirksamste Luxus-Effekt. Gleiche Geschwindigkeiten wirken billig. */ .tile { position: relative; display: block; overflow: hidden; border-radius: calc(var(--radius) + 6px); min-height: 380px; border: 1px solid var(--line); background: var(--surface); isolation: isolate; transform-style: preserve-3d; will-change: transform; transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .5s var(--ease), border-color .35s, box-shadow .35s; } .tile:hover { border-color: var(--brand-line); box-shadow: var(--shadow-lg); } .tile-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transform: scale(1.06); filter: saturate(.55) contrast(1.02); transition: transform 1.6s ease, filter .6s ease; } .tile:hover .tile-bg { transform: scale(1.14); filter: saturate(1) contrast(1.06); } .tile-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.60) 55%, rgba(0,0,0,.95) 100%); } /* R1: Kachelinhalt zentriert, unten sitzend. */ .tile-content { position: relative; z-index: 2; min-height: 380px; padding: 28px 26px 30px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; } .tile-link { display: inline-flex; align-items: center; gap: 8px; align-self: center; font-weight: 700; padding-bottom: 6px; border-bottom: 1px solid transparent; transition: border-color .25s, color .25s, gap .25s; } .tile:hover .tile-link { color: var(--brand); border-color: var(--brand); gap: 14px; } /* ---------- Stats ---------- */ .stats { border-block: 1px solid var(--line); } .stat { text-align: center; padding-block: 8px; } .stat .num { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; color: var(--brand); } .stat .label { color: var(--muted); font-size: .9rem; margin-top: 6px; } /* ---------- FAQ ---------- */ .faq-item { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 22px; font-weight: 700; text-align: left; } .faq-q::after { content: "+"; font-size: 1.4rem; color: var(--brand); transition: transform .3s var(--ease); } .faq-item.open .faq-q::after { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); } .faq-a p { padding-bottom: 22px; color: var(--muted); } /* ---------- CTA-Band ---------- Als volle Markenfläche (Clever-Formel Block 7): background auf var(--brand) setzen — dann greift automatisch das Farbflächen-Gesetz unten. */ .cta-band { background: var(--surface); border-block: 1px solid var(--line); text-align: center; } .cta-band .hero-actions { justify-content: center; } /* FARBFLÄCHEN-GESETZ, technisch erzwungen: auf einer Markenfläche werden alle Grau-Töne auf die On-Brand-Farben umgebogen. .band-brand an die Sektion. */ .band-brand { background: var(--brand); border-block: 0; } .band-brand h1, .band-brand h2, .band-brand h3, .band-brand .kicker { color: var(--on-brand); } .band-brand p, .band-brand .muted, .band-brand .lead, .band-brand li { color: var(--on-brand-mute); } .band-brand .btn-primary { background: var(--on-brand); color: var(--brand); } .band-brand .btn-ghost { border-color: var(--on-brand-mute); color: var(--on-brand); } .band-brand .btn-ghost:hover { border-color: var(--on-brand); color: var(--on-brand); } /* ---------- Kontakt ---------- */ .contact-item { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .contact-item strong { display: block; margin-bottom: 4px; } .contact-item a:hover { color: var(--brand); } /* ---------- Zwei-Klick-Consent (Karte/Video) ---------- */ .consent-box { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 32px; overflow: hidden; } .consent-box p { color: var(--muted); font-size: .92rem; max-width: 46ch; } .consent-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ---------- Footer ---------- */ .footer { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } .footer h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 16px; } .footer ul { list-style: none; display: grid; gap: 10px; } .footer a:hover { color: var(--brand); } .footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: .88rem; } /* ---------- WhatsApp-Float ---------- */ .wa-float { position: fixed; right: 20px; bottom: 20px; z-index: var(--z-float); width: 58px; height: 58px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); transition: transform .2s var(--ease); } .wa-float:hover { transform: scale(1.07); } .wa-float svg { width: 30px; height: 30px; fill: #fff; } /* ---------- Rechtsseiten ---------- */ .legal { max-width: 75ch; } .legal h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.5rem; } .legal h2 { font-size: 1.35rem; margin: 2.2rem 0 .8rem; } .legal h3 { font-size: 1.1rem; margin: 1.6rem 0 .6rem; } .legal p, .legal li { color: var(--muted); margin-bottom: .8rem; } .legal ul { padding-left: 1.2rem; } .legal a { color: var(--brand); } .placeholder-block { border: 1px dashed var(--brand); border-radius: var(--radius-sm); padding: 18px; color: var(--brand); font-weight: 600; margin-block: 1rem; } /* ---------- Theme-Medien: Stills je Theme ---------- Zwei nebeneinander, CSS blendet je Theme genau eins ein. */ .img-light { display: none; } [data-theme="light"] .img-dark { display: none; } [data-theme="light"] .img-light { display: block; } /* ---------- Reveal (JS setzt .in) ---------- */ /* Werte laut design-system.md Abschnitt 5: 28px und 0.9s. Kürzer wirkt hektisch, weiter wirkt träge. */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.in { opacity: 1; transform: none; } .no-js .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } } /* ---------- POLISH-FUNDAMENT: die zwei anderen Bedienungs-Signale ---------- ═══ GESPERRT ═══ NICHT ENTFERNEN (Eiserne Regel 12, QA Pass 4). prefers-reduced-motion steht direkt darueber; diese zwei gehoeren dazu. Sie aendern im Normalfall NICHTS am Design, sie greifen nur, wenn der Besucher es in seinem System so eingestellt hat. */ @media (prefers-reduced-transparency: reduce) { .nav.scrolled { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-contrast: more) { body { --muted: color-mix(in srgb, var(--text) 80%, var(--bg)); } .btn-ghost, .theme-toggle { border-width: 2px; border-color: currentColor; } .btn-primary { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); } .card, .tile, .contact-item, .consent-box { border-color: var(--line-2); } } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { /* ---------- Mobil-Menü (Vollbild-Overlay) ---------- ═══ GESPERRT ═══ BURGER-BUGFIX + REDESIGN 13.08.2026. Zwei Regeln, die bleiben MÜSSEN: 1) KEIN justify-content:center auf .nav-links — bei vielen Menüpunkten schiebt Zentrieren die oberen Punkte über den Viewport-Rand hinaus, wo kein Scrollen sie erreicht. Stattdessen: flex-start + overflow-y + auto-Margins auf erstem/letztem li (zentriert, solange es passt, scrollt, sobald es nicht mehr passt). 2) Der Containing-Block-Fix (.nav.open weiter oben) gehört dazu. Projekt-CSS darf Schriftgröße/Abstände/Farben anpassen, aber NIE position/justify-content/overflow dieses Blocks umdefinieren. */ .nav-links { position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: center; justify-content: flex-start; gap: clamp(16px, 3.6vh, 30px); padding: calc(var(--nav-h, 76px) + 14px) 28px calc(26px + env(safe-area-inset-bottom, 0px)); background: var(--bg); font-size: 1.4rem; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; /* Maske: Menüpunkte, die im Overlay unter die Leiste scrollen, lösen sich dort auf, statt durch Logo/Schließen-Kreuz zu scheinen (das Overlay ist ein Nachfahre der Leiste, deren Hintergrund kann es nicht verdecken). */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--nav-h, 76px) - 30px), #000 calc(var(--nav-h, 76px) - 2px)); mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--nav-h, 76px) - 30px), #000 calc(var(--nav-h, 76px) - 2px)); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .28s var(--ease), visibility 0s .28s; } .nav-links li:first-child { margin-top: auto; } .nav-links li:last-child { margin-bottom: auto; } .nav-links a { display: block; padding: 6px 18px; text-align: center; } /* Gestaffelte Einblendung: Punkte gleiten nacheinander hoch. */ .nav-links li { opacity: 0; transform: translateY(14px); transition: opacity .3s var(--ease), transform .3s var(--ease); } .nav.open .nav-links { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .28s var(--ease); z-index: calc(var(--z-nav) - 1); } .nav.open .nav-links li { opacity: 1; transform: none; } .nav.open .nav-links li:nth-child(1) { transition-delay: .05s; } .nav.open .nav-links li:nth-child(2) { transition-delay: .09s; } .nav.open .nav-links li:nth-child(3) { transition-delay: .13s; } .nav.open .nav-links li:nth-child(4) { transition-delay: .17s; } .nav.open .nav-links li:nth-child(5) { transition-delay: .21s; } .nav.open .nav-links li:nth-child(6) { transition-delay: .25s; } .nav.open .nav-links li:nth-child(7) { transition-delay: .29s; } .nav.open .nav-links li:nth-child(8) { transition-delay: .33s; } .nav.open .nav-links li:nth-child(n+9) { transition-delay: .37s; } .nav.open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav.open .burger span:nth-child(2) { opacity: 0; } .nav.open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .burger { display: flex; } .nav-cta { display: none; } .split, .grid-2, .grid-3 { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } /* R3 bleibt auch mobil: exakte Höhe, nur der Mindestwert sinkt. */ .hero { min-height: 460px; } } @media (max-width: 480px) { .grid-4, .footer-grid { grid-template-columns: 1fr; } .hero-actions .btn { width: 100%; } }