/* ========================================================================== PEARL CLEAN — Design-System Quelle: bau-brief.md §2 (Tokens 1:1). Geschmack-Skill: high-end-visual-design. ========================================================================== */ /* ---------- 1) TOKENS ---------- */ :root { /* Farben (bau-brief §2.1) */ --creme: #f0ede3; --creme-tief: #e6e1d4; --sand: #dcd4c7; --perl: #fbfbf9; --mauve: #6f4640; --mauve-matt: #85605a; --mauve-tief: #3a2320; --rose: #7f5650; --rose-hell: #a87a72; --hairline-12: oklch(44.9% 0.053 37 / 0.12); --hairline-22: oklch(44.9% 0.053 37 / 0.22); --hairline-38: oklch(44.9% 0.053 37 / 0.38); --schatten-glas: 0 26px 40px -28px oklch(44.9% 0.053 37 / 0.28); --schatten-nah: 0 1px 0 0 oklch(44.9% 0.053 37 / 0.18); --grad-perlmutt: linear-gradient( 104deg, oklch(97% 0.012 24), oklch(99% 0.006 48), oklch(95% 0.016 36), oklch(98% 0.008 28) ); /* Radien — der einzige Kreis ist die Perle */ --r: 0px; --r-perle: 999px; /* Typografie */ --font-display: "Prata", "Iowan Old Style", Georgia, serif; --font-body: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif; --fs-display-xl: clamp(3.6rem, 11vw, 10.5rem); --fs-display-s: clamp(3rem, 8.2vw, 8.25rem); --fs-h1: clamp(2.4rem, 4.6vw, 4.25rem); --fs-h2: clamp(1.95rem, 3.4vw, 3.1rem); --fs-h3: clamp(1.3rem, 1.75vw, 1.6rem); --fs-lead: clamp(1.15rem, 1.5vw, 1.4rem); --fs-body: clamp(1.02rem, 1.08vw, 1.125rem); --fs-body-s: 0.975rem; --fs-data: clamp(1.35rem, 2.2vw, 2.1rem); --fs-eyebrow: 0.8125rem; --fs-caption: 0.875rem; /* Rhythmus-Karte (bau-brief §2.3) */ --sp-null: 0px; --sp-eng: clamp(1.6rem, 2.6vw, 2.5rem); --sp-knapp: clamp(2.4rem, 4vw, 3rem); --sp-mittel: clamp(3.6rem, 5.6vw, 5rem); --sp-gross: clamp(5rem, 7.4vw, 6rem); --sp-weit: clamp(7rem, 9.5vw, 11rem); --sp-sehrweit: clamp(8.5rem, 12vw, 14rem); --sp-maximal: clamp(9.5rem, 14vw, 16rem); --sp-footer: clamp(4rem, 6.5vw, 7rem); /* Motion (bau-brief §2.4) */ --ease-wisch: cubic-bezier(0.76, 0, 0.18, 1); --ease-fall: cubic-bezier(0.33, 0.9, 0.36, 1); --d-press: 140ms; --d-hover: 200ms; --d-ui: 240ms; --d-reveal: 780ms; --d-tropfen: 900ms; /* Raster */ --max: 1440px; --gutter: clamp(22px, 5vw, 96px); } /* ---------- 2) RESET ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--creme); color: var(--mauve); font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: 1.68; -webkit-font-smoothing: antialiased; /* `hidden` auf body allein reicht nicht — der Scroll wandert dann auf . `clip` klemmt den Ausbruch (.bruch-ausbruch-r, margin-right:-8%) wirklich ab und erzeugt anders als `hidden` KEINEN neuen Scroll-Container, die gepinnten Scroll-Szenen bleiben also intakt. Ältere Browser fallen auf hidden zurück. */ overflow-x: hidden; overflow-x: clip; padding-bottom: 0; } html { overflow-x: hidden; overflow-x: clip; } body.hat-fab { padding-bottom: 0; } @media (max-width: 767px) { body.hat-fab { padding-bottom: 6rem; } } img, video { max-width: 100%; display: block; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4, p, figure { margin: 0; } svg { display: block; } /* ---------- 3) TYPOGRAFIE ---------- */ .display-xl { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-xl); letter-spacing: -0.035em; line-height: 0.92; color: var(--mauve); text-wrap: balance; font-feature-settings: "liga", "kern"; } .display-s { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-s); letter-spacing: -0.03em; line-height: 0.94; color: var(--mauve); text-wrap: balance; font-feature-settings: "liga", "kern"; } h1, .h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); letter-spacing: -0.02em; line-height: 1.02; color: var(--mauve); text-wrap: balance; } h2, .h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); letter-spacing: -0.015em; line-height: 1.06; color: var(--mauve); text-wrap: balance; } h3, .h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h3); letter-spacing: -0.005em; line-height: 1.2; color: var(--mauve); } .lead { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-lead); line-height: 1.55; max-width: 46ch; color: var(--mauve-matt); } .body-text, p { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: 1.68; max-width: 62ch; } .body-s { font-size: var(--fs-body-s); line-height: 1.6; } .data-wert { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-data); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.05; color: var(--mauve); } .eyebrow { display: block; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.18em; line-height: 1; color: var(--rose); margin-bottom: var(--sp-eng); } .caption { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.4; color: var(--mauve-matt); } /* optischer Randausgleich Display */ .display-xl > br + *, .optisch { margin-left: -0.06em; } /* ---------- 4) LAYOUT ---------- */ .wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .wrap-weit { max-width: 1680px; margin-inline: auto; padding-inline: var(--gutter); } section { position: relative; } .tonbruch { background: var(--mauve-tief); color: var(--perl); } .tonbruch .lead { color: color-mix(in oklch, var(--perl) 78%, var(--sand)); } .tonbruch .eyebrow { color: var(--rose-hell); } /* Rhythmus-Karte als Utility */ [data-sp="null"] { padding-block: var(--sp-null); } [data-sp="eng"] { padding-block: var(--sp-eng); } [data-sp="knapp"] { padding-block: var(--sp-knapp); } [data-sp="mittel"] { padding-block: var(--sp-mittel); } [data-sp="gross"] { padding-block: var(--sp-gross); } [data-sp="weit"] { padding-block: var(--sp-weit); } [data-sp="sehrweit"] { padding-block: var(--sp-sehrweit); } [data-sp="maximal"] { padding-block: var(--sp-maximal); } [data-sp="footer"] { padding-block: var(--sp-footer); } [data-sp-top="knapp"] { padding-top: var(--sp-knapp); } [data-sp-top="null"] { padding-top: var(--sp-null); } /* ---------- 5) NAV ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter); transition: background var(--d-ui) var(--ease-wisch), box-shadow var(--d-ui) var(--ease-wisch); } .nav.ist-hell { background: color-mix(in oklch, var(--creme) 88%, transparent); backdrop-filter: blur(14px) saturate(1.05); box-shadow: var(--schatten-nah); } .nav-logo { display: inline-flex; align-items: center; height: 64px; padding: 6px 14px; background: var(--perl); border-radius: var(--r-perle); box-shadow: var(--schatten-nah); } .nav-logo img { height: 100%; width: auto; } @media (max-width: 767px) { .nav-logo { height: 48px; padding: 4px 10px; } .nav { padding: 14px var(--gutter); } } .nav-links { display: none; align-items: center; gap: clamp(18px, 1.9vw, 34px); /* Sicherheitsabstand zum CTA — sonst stoßen KONTAKT und Button auf 1280px aneinander */ margin-right: clamp(18px, 2vw, 36px); } /* Erst ab 1200px ist Platz für alle sieben Links nebeneinander. Darunter übernimmt das Burger-Menü — sonst bricht „ÜBER UNS" zweizeilig um. */ @media (min-width: 1200px) { .nav-links { display: flex; } } .nav-links a { position: relative; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.14em; color: var(--mauve); padding-bottom: 12px; white-space: nowrap; } .nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: 10px; height: 10px; border-radius: var(--r-perle); background: var(--perl); border: 1px solid var(--mauve); box-shadow: inset 0 0 4px oklch(98% 0.006 48 / 0.9); } .nav-cta { display: none; } @media (min-width: 1024px) { .nav-cta { display: inline-flex; align-items: center; gap: 0.5em; padding: 12px 22px; background: var(--rose); color: var(--perl); font-weight: 600; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.12em; /* Brach bei 1280px zweizeilig um (46px → 68px hoch, gemessen 03.08.2026) — genau im verbreitetsten Laptop-Format. */ white-space: nowrap; transition: transform var(--d-press) var(--ease-wisch), background var(--d-hover) var(--ease-wisch); } .nav-cta:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .nav-cta:hover { background: var(--rose-hell); } } } .nav-burger { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--hairline-38); background: var(--perl); } /* Muss zum .nav-links-Breakpoint passen (1200px), sonst gibt es zwischen 1024 und 1199px weder Links noch Burger. */ @media (min-width: 1200px) { .nav-burger { display: none; } } .nav-burger span { display: block; width: 18px; height: 1.5px; background: var(--mauve); position: relative; } .nav-burger span::before, .nav-burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--mauve); transition: transform var(--d-ui) var(--ease-wisch); } .nav-burger span::before { top: -6px; } .nav-burger span::after { top: 6px; } .mobil-menu { position: fixed; inset: 0; z-index: 90; background: var(--creme); display: flex; flex-direction: column; padding: 96px var(--gutter) var(--gutter); gap: 4px; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity var(--d-ui) var(--ease-wisch), transform var(--d-ui) var(--ease-wisch); } .mobil-menu.ist-offen { opacity: 1; pointer-events: auto; transform: translateY(0); } .mobil-menu a { font-family: var(--font-display); font-size: 2.2rem; padding: 14px 0; border-bottom: 1px solid var(--hairline-12); color: var(--mauve); } .mobil-menu-schliessen { position: absolute; top: 18px; right: var(--gutter); width: 44px; height: 44px; } /* Formular-Umschalter Unternehmen/Privat (Befund 03.08.2026): Die Panels trugen inline `display:grid`. Das schlägt per Spezifität die UA-Regel `[hidden]{display:none}` — beide Formulare waren gleichzeitig sichtbar, obwohl das JS `hidden` korrekt umschaltete. Jetzt über Klasse statt inline. */ [data-modus] { display: grid; gap: 20px; } [data-modus][hidden] { display: none; } /* ---------- 6) BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.6em; padding: 17px 30px; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.12em; border-radius: var(--r); transition: transform var(--d-press) var(--ease-wisch), background var(--d-hover) var(--ease-wisch), color var(--d-hover) var(--ease-wisch), border-color var(--d-hover) var(--ease-wisch); } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--rose); color: var(--perl); } @media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--rose-hell); } } .btn-linie { border: 1px solid var(--mauve); color: var(--mauve); } @media (hover: hover) and (pointer: fine) { .btn-linie:hover { background: var(--mauve); color: var(--perl); } } .btn-invert { background: var(--perl); color: var(--mauve-tief); } @media (hover: hover) and (pointer: fine) { .btn-invert:hover { background: var(--sand); } } .textlink { display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body-s); letter-spacing: 0.02em; color: var(--mauve); border-bottom: 1px solid var(--hairline-38); padding-bottom: 2px; transition: border-color var(--d-hover) var(--ease-wisch), gap var(--d-hover) var(--ease-wisch); } .textlink::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-perle); background: var(--perl); border: 1px solid var(--mauve); flex: none; } @media (hover: hover) and (pointer: fine) { .textlink:hover { border-color: var(--mauve); gap: 0.8em; } } /* ---------- 7) FIXE KONTAKT-FABS (ab Pixel 1) ---------- */ .fabs { position: fixed; right: 24px; bottom: 24px; z-index: 80; display: flex; flex-direction: column; gap: 12px; } .fab { width: 56px; height: 56px; border-radius: var(--r-perle); background: var(--perl); border: 1px solid var(--mauve); display: flex; align-items: center; justify-content: center; box-shadow: var(--schatten-glas); position: relative; transition: transform var(--d-press) var(--ease-wisch); } .fab::before { content: ""; position: absolute; inset: 3px; border-radius: var(--r-perle); background: var(--grad-perlmutt); opacity: 0.55; pointer-events: none; } /* Anruf + WhatsApp (03.08.2026): Anrufen ist der Hauptweg für Privatkunden, deshalb als kräftigster Button. WhatsApp behält seine Signalfarbe — daran erkennt man ihn ohne Beschriftung. */ .fab-tel { background: var(--mauve); border-color: var(--mauve); } .fab-tel svg { stroke: var(--perl); } .fab-tel::before { opacity: 0.18; } .fab-wa { background: #25d366; border-color: #1eb455; } .fab-wa svg { color: #fff; } .fab-wa::before { opacity: 0.14; } /* Solange keine echte Rufnummer hinterlegt ist, zeigen die Buttons aufs Formular. Der Haken bleibt sichtbar, damit es beim Go-Live nicht vergessen wird. */ .fab[data-nummer-fehlt]::after { content: ""; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: var(--r-perle); background: var(--rose); border: 2px solid var(--creme); } .fab svg { width: 22px; height: 22px; position: relative; z-index: 1; stroke: var(--mauve); } .fab:active { transform: scale(0.94); } @media (hover: hover) and (pointer: fine) { .fab:hover { transform: scale(1.05); } } /* ---------- 8) HEAD / VIDEO ---------- */ .head { position: relative; width: 100%; overflow: hidden; background: var(--mauve-tief); isolation: isolate; } .head-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Punze-Lesbarkeit (Härtetest 02.08.2026): Bei .hero-punze scheint das Video DURCH die ausgestanzten Buchstaben. Läuft dort gerade eine helle Fensterpartie, verschwindet das Wort auf der Creme-Fläche. Das Video wird deshalb nur im Punzen-Hero abgedunkelt — die Buchstaben stehen damit in JEDEM Frame dunkel gegen die helle Fläche, die Idee bleibt unangetastet. */ .hero-punze .head-media { /* Startvideo „Abzieher" ist hell (weißer Schaum + Gegenlicht). Die Headline entsteht aus dem durchscheinenden Video — ohne Absenkung stünden helle Buchstaben auf heller Creme-Fläche und wären unlesbar. */ filter: brightness(0.58) saturate(1.06) contrast(1.12); } .head-scrim { position: absolute; inset: 0; background: linear-gradient( 180deg, oklch(28% 0.04 34 / 0.12) 0%, oklch(28% 0.04 34 / 0.48) 100% ); z-index: 1; } .head-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; /* Befund 03.08.2026: Das KI-Label sitzt fix unten rechts im Hero und schnitt bei langen Headlines mitten durch den Text (unternehmen/privat/jobs/sonderleistungen). Der Textblock hält jetzt unten immer mindestens die Label-Höhe frei. */ padding: 0 var(--gutter) max(var(--sp-gross), 4.75rem); } @media (max-width: 767px) { .head-content { padding-bottom: max(var(--sp-mittel), 3.75rem); } } .head-eyebrow { color: var(--perl); opacity: 0.92; } .head .display-s { color: var(--perl); } @media (prefers-reduced-motion: reduce) { .head-media { animation: none !important; } } /* ---------- 8b) HERO H-A „DIE KLARSICHT-PUNZE" ---------- */ .hero-punze { height: 100vh; min-height: 620px; } /* Die Punzen-Fläche (.hero-beschlag inkl. SVG-Masken-Variante) wurde am 03.08.2026 auf Anweisung entfernt — sie lag als weißer Schleier über dem Startvideo. Die Headline ist jetzt echte Schrift, siehe .hero-h1-real weiter unten. */ .hero-punze-content { position: absolute; /* Seit dem Wegfall der Punze sitzt der Block mittig im Hero (vorher inset:60%, dadurch wurde der CTA unten abgeschnitten). Oben Platz für die Navigation. */ inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 96px var(--gutter) var(--sp-mittel); } /* ---- Hero-Inhalt (Startseite) ---- 03.08.2026 auf Anweisung umgebaut: Die Punze (Headline aus einer milchigen Fläche ausgestanzt) ist raus — sie legte einen weißen Schleier über das Startvideo. Jetzt echte Schrift auf klarem Video, Lesbarkeit über den Scrim. */ .hero-punze-content > .eyebrow { display: none; } .hero-h1-real { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.3rem, 6.4vw, 5.4rem); line-height: 1.04; letter-spacing: -0.02em; color: var(--perl); text-align: center; text-wrap: balance; margin: 0; text-shadow: 0 2px 28px oklch(22% 0.03 34 / 0.55); } .hero-punze-lead { color: var(--perl); opacity: 0.94; text-align: center; margin-top: 1.15rem; max-width: 54ch; text-shadow: 0 1px 18px oklch(22% 0.03 34 / 0.5); } .hero-punze-cta { margin-top: var(--sp-eng); } .hero-punze-meta { margin-top: var(--sp-knapp); text-align: center; color: var(--perl); opacity: 0.82; } @media (max-width: 767px) { /* Handyansicht: Block mittig im Hero statt am unteren Rand */ .hero-punze-content { inset: 0; justify-content: center; padding: 88px var(--gutter) var(--sp-mittel); } .hero-h1-real { font-size: clamp(2.1rem, 8.4vw, 3.1rem); } .hero-punze-lead { font-size: var(--fs-body-s); margin-top: 0.9rem; } } /* ---------- 8c) KLÄRUNGS-SZENE (unternehmen) ---------- */ .klaerung-buehne { position: relative; overflow: hidden; } .klaerung-basis { width: 100%; height: 100%; object-fit: cover; filter: blur(14px) saturate(0.9); } .klaerung-maske { position: absolute; inset: 0; clip-path: circle(14% at 50% 50%); } .klaerung-maske img { width: 100%; height: 100%; object-fit: cover; } /* ---------- 9) HAIRLINE-ZEILEN ---------- */ .zeilen { border-top: 1px solid var(--hairline-22); } .zeile { display: grid; grid-template-columns: 24px 1fr; gap: 20px 28px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--hairline-22); min-height: 84px; } .zeile-perle { width: 10px; height: 10px; border-radius: var(--r-perle); background: var(--perl); border: 1px solid var(--mauve); align-self: start; margin-top: 8px; position: relative; } .zeile-perle::after { content: ""; position: absolute; inset: -2px; border-radius: var(--r-perle); background: var(--grad-perlmutt); opacity: 0.5; z-index: -1; } .zeile-inhalt { display: grid; gap: 6px; } .zeile-titel { font-weight: 600; font-size: 1.05rem; color: var(--mauve); } .zeile-text { color: var(--mauve-matt); font-size: var(--fs-body-s); max-width: 58ch; } .zeile-meta { font-family: var(--font-body); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--rose); font-size: 0.95rem; } @media (min-width: 900px) { .zeile { grid-template-columns: 24px minmax(0, 1fr) auto; } } /* scroll-driven Hairline-Zeichnung (native), Fallback per JS-IO-Klasse */ .zeile-linie { height: 1px; background: var(--mauve); transform-origin: left; transform: scaleX(0); } @supports (animation-timeline: view()) { .zeile-linie { animation: zeichne-linie linear forwards; animation-timeline: view(); animation-range: entry 0% cover 30%; } } .zeile-linie.ist-sichtbar { transform: scaleX(1); transition: transform 900ms var(--ease-wisch); } @keyframes zeichne-linie { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ---------- 10) CARD-GRIDS (explizite Spalten, kein auto-fit) ---------- */ .grid-3x2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 900px) { .grid-3x2 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .grid-3x2 { grid-template-columns: 1fr; } } .grid-2x2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media (max-width: 620px) { .grid-2x2 { grid-template-columns: 1fr; } } .grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 900px) { .grid-3col { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .grid-3col { grid-template-columns: 1fr; } } .karte { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); } .karte img { width: 100%; height: 100%; object-fit: cover; } .karte-scrim { position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 45%, oklch(28% 0.04 34 / 0.82) 100% ); } .karte-inhalt { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; color: var(--perl); display: grid; gap: 8px; } .karte-titel { font-family: var(--font-display); font-size: 1.5rem; } .karte-meta { font-size: var(--fs-body-s); opacity: 0.88; max-width: 32ch; } .karte-turnus { font-weight: 600; font-variant-numeric: tabular-nums; font-size: clamp(1.1rem, 1.6vw, 1.5rem); color: var(--perl); } /* ---------- 11) FORMULARE ---------- */ .formular { display: grid; gap: 20px; } .feld { display: grid; gap: 8px; position: relative; } .feld label { font-family: var(--font-body); font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mauve-matt); } .feld input, .feld select, .feld textarea { padding: 15px 16px; background: var(--creme-tief); border: 1px solid var(--hairline-22); color: var(--mauve); font-size: 1rem; transition: border-color var(--d-hover) var(--ease-wisch), background var(--d-hover) var(--ease-wisch); } .tonbruch .feld input, .tonbruch .feld select, .tonbruch .feld textarea { background: oklch(28% 0.04 34 / 0.55); border-color: oklch(98% 0.006 48 / 0.22); color: var(--perl); } .feld input::placeholder, .feld textarea::placeholder { color: var(--mauve-matt); opacity: 0.7; } .tonbruch .feld input::placeholder, .tonbruch .feld textarea::placeholder { color: var(--sand); opacity: 0.55; } .feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--rose-hell); box-shadow: 0 0 0 3px oklch(61% 0.055 30 / 0.28); } .feld textarea { min-height: 120px; resize: vertical; } .feld.hat-fehler input, .feld.hat-fehler select, .feld.hat-fehler textarea { border: 1.5px solid var(--rose); } .feld-fehler { display: none; font-size: 0.8125rem; color: var(--mauve); } .feld.hat-fehler .feld-fehler { display: block; } .feld-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .check { display: flex; gap: 12px; align-items: flex-start; } .check input { margin-top: 4px; flex: none; width: 18px; height: 18px; accent-color: var(--rose); } .check-text { font-size: var(--fs-body-s); color: var(--mauve-matt); } .tonbruch .check-text { color: var(--sand); } .formular-status { display: none; padding: 16px 18px; border: 1px solid var(--hairline-38); font-size: var(--fs-body-s); gap: 8px; transform: scale(0.96); opacity: 0; transition: transform var(--d-ui) var(--ease-wisch), opacity var(--d-ui) var(--ease-wisch); } .formular-status.ist-sichtbar { display: flex; transform: scale(1); opacity: 1; } .formular-status.ok { background: var(--perl); color: var(--mauve-tief); border-color: var(--sand); } .formular-status.fehler { background: var(--creme-tief); color: var(--mauve); border-color: var(--rose); } .modus-umschalter { display: inline-flex; border: 1px solid var(--hairline-38); margin-bottom: var(--sp-eng); } .modus-umschalter button { padding: 12px 22px; font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mauve-matt); transition: background var(--d-hover) var(--ease-wisch), color var(--d-hover) var(--ease-wisch); } .modus-umschalter button[aria-selected="true"] { background: var(--mauve); color: var(--perl); } /* ---------- 12) FOOTER ---------- */ .footer { background: var(--mauve-tief); color: var(--perl); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 48px); } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } /* § 0e-24 (03.08.2026): Der Filter `brightness(0) invert(1)` hat die mauve Wortmarke des Kunden zur weißen Silhouette umgefärbt — eine Ein-Farb-Negativvariante ist KEIN zulässiger Eigenweg am fremden Logo. Man ändert den Untergrund, nicht das Logo: Das Original steht jetzt auf einer Perlweiß-Plakette, so wie in der Navigation auch. */ .footer-logo { height: 110px; width: auto; margin-bottom: 18px; padding: 12px 18px; background: var(--perl); border-radius: var(--r-perle); box-shadow: var(--schatten-nah); } /* h4 → h3 (Heading-Order-Sprung behoben 03.08.2026), Selektor mitgezogen. Farbe war `--rose-hell` auf dunklem Footer = 3,94:1 und damit unter WCAG AA (4,5:1). */ .footer h3, .footer h4 { font-family: var(--font-body); font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sand); margin-bottom: 16px; } .footer a, .footer p { color: color-mix(in oklch, var(--perl) 82%, var(--sand)); font-size: var(--fs-body-s); } .footer ul { display: grid; gap: 10px; } .footer-bottom { margin-top: var(--sp-gross); padding-top: 24px; border-top: 1px solid oklch(98% 0.006 48 / 0.16); display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; font-size: 0.8125rem; color: var(--sand); } /* ---------- 13) REVEALS (IO) ---------- */ /* FAIL-SAFE (Befund 02.08.2026): Der Startzustand opacity:0 gilt NUR, wenn JS + IntersectionObserver wirklich da sind ( wird inline im gesetzt). Ohne JS, bei blockiertem Skript oder einem Fehler vor dem Observer bleibt der Inhalt sichtbar — sonst steht der Besucher vor einer halb weißen Seite. */ .reveal { opacity: 1; transform: none; } .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--d-reveal) var(--ease-wisch), transform var(--d-reveal) var(--ease-wisch); } .reveal.ist-sichtbar { opacity: 1; transform: translateY(0); } /* gleicher Fail-safe wie bei .reveal — ohne JS bleibt der Inhalt sichtbar */ .reveal-stagger > * { opacity: 1; transform: none; } .js .reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity var(--d-reveal) var(--ease-wisch), transform var(--d-reveal) var(--ease-wisch); } .reveal-stagger.ist-sichtbar > * { opacity: 1; transform: translateY(0); } .reveal-stagger.ist-sichtbar > *:nth-child(1) { transition-delay: 0ms; } .reveal-stagger.ist-sichtbar > *:nth-child(2) { transition-delay: 45ms; } .reveal-stagger.ist-sichtbar > *:nth-child(3) { transition-delay: 90ms; } .reveal-stagger.ist-sichtbar > *:nth-child(4) { transition-delay: 135ms; } .reveal-stagger.ist-sichtbar > *:nth-child(5) { transition-delay: 180ms; } .reveal-stagger.ist-sichtbar > *:nth-child(6) { transition-delay: 225ms; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- 14) PARALLAX-BAHNEN (Zwei Einstiege) ---------- */ .bahnen { display: grid; min-height: 78vh; position: relative; } /* Befund 03.08.2026: Der Hochzug (-4rem) schob die Bahnen-Bilder über die Headline. Danach blieben nur 21px Abstand — die Überschrift klebte an den Bildern. Der Hochzug ist jetzt ganz raus; der Abstand kommt sauber aus dem Sektionskopf. */ @media (min-width: 900px) { .bahnen { grid-template-columns: var(--bahn-links, 47%) 1fr; } } @media (max-width: 899px) { .bahnen { grid-template-columns: 1fr; } } /* Sektionskopf: Überschrift + Einleitung mit echtem Atem. Vorher stand die H2 in einer 16ch-Zwangsjacke (545px), während rechts daneben 895px Weißraum ungenutzt blieben, und klebte 21px über den Bildern. */ /* Grundregel statt Einzelfall-Flickerei (Befund 03.08.2026): Ein Fließtext direkt unter einer Überschrift bekommt IMMER Luft. Vorher steckten überall kopierte Magic Numbers (14px, 6px, teils 0px) — der Text klebte an der Headline. Inline-Styles gewinnen weiter, diese Regel fängt nur die Fälle ohne eigenen Wert ab. */ h2 + .lead, h2 + .body-s, .h2 + .lead, .h2 + .body-s { margin-top: var(--sp-knapp); } .sektionskopf { max-width: 22ch; margin: 0 0 var(--sp-knapp); } .sektionskopf-lead { max-width: 58ch; margin: 0 0 var(--sp-mittel); color: var(--mauve-matt); } @media (max-width: 899px) { .sektionskopf { max-width: 100%; } .sektionskopf-lead { margin-bottom: var(--sp-eng); } } .bahn { position: relative; overflow: hidden; min-height: 50vh; display: flex; align-items: flex-end; } .bahn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; will-change: transform; } .bahn-scrim { position: absolute; inset: 0; background: linear-gradient( 180deg, oklch(28% 0.04 34/0) 40%, oklch(28% 0.04 34/0.72) 100% ); z-index: 1; } .bahn-inhalt { position: relative; z-index: 2; padding: 48px; color: var(--perl); display: grid; gap: 14px; } .bahn-titel { font-family: var(--font-display); font-size: clamp(2.2rem, 4.6vw, 4.25rem); letter-spacing: -0.02em; line-height: 1; } .bahn-text { max-width: 40ch; color: color-mix(in oklch, var(--perl) 88%, var(--sand)); font-size: var(--fs-body-s); } /* ---------- 16) DER TAKT / BAHNEN-VERSATZ-SZENE ---------- */ .takt-buehne { position: relative; height: 200vh; } .takt-sticky { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; } /* Mobil (Befund 03.08.2026): `height:200vh` blieb stehen, obwohl der Inhalt nicht mehr gepinnt ist — dadurch folgte auf die Szene ein riesiges leeres Feld. Gleichzeitig kollabierten die Bildbahnen, sodass die hell gestylte Schrift auf hellem Grund stand und praktisch unlesbar war. Mobil ist die Szene deshalb eine normale Sektion: ein Bild als Kopf, darunter dunkle Schrift auf Creme. */ @media (max-width: 899px) { .takt-buehne { height: auto; } .takt-sticky { grid-template-columns: 1fr; height: auto; position: relative; padding-block: var(--sp-mittel); gap: 24px; overflow: visible; } .takt-bahn { height: 34vh; min-height: 220px; } /* zweite Bahn mobil weglassen — eine reicht als Bildanker */ .takt-bahn.b { display: none; } .takt-zahl { color: var(--mauve); opacity: 1; } .takt-zustand { color: var(--mauve-matt); opacity: 1; } .takt-zustand.ist-aktiv { color: var(--mauve); } .takt-liste .marginalie-kapitel { color: var(--rose); opacity: 1; } } .takt-bahn { position: relative; overflow: hidden; } .takt-bahn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; } /* Befund 03.08.2026 („die Bilder sind über der Schrift"): Der Text liegt zwar auf z-index 2, ging aber im hellen, detailreichen Bild trotzdem unter — vor allem die Kapitelzeile und die inaktiven Schritte. Der Scrim deckt jetzt die ganze Bahn ab und ist links, wo der Text steht, deutlich dichter. */ .takt-bahn-scrim { position: absolute; inset: 0; background: linear-gradient( 90deg, oklch(24% 0.035 34 / 0.82) 0%, oklch(24% 0.035 34 / 0.55) 42%, oklch(24% 0.035 34 / 0.18) 72%, transparent 100% ), linear-gradient(0deg, oklch(24% 0.035 34 / 0.72), transparent 62%); } /* Die Kapitelzeile nutzt sonst die Rosé-Akzentfarbe — auf dem hellen Bahnenbild war sie nicht lesbar. Innerhalb der Takt-Szene deshalb hell. */ .takt-liste .marginalie-kapitel { color: var(--perl); opacity: 0.9; } .takt-liste { position: absolute; left: var(--gutter); bottom: var(--sp-gross); z-index: 2; display: grid; gap: 10px; max-width: 30ch; } @media (max-width: 899px) { .takt-liste { position: relative; left: auto; bottom: auto; padding: 0 var(--gutter); } } .takt-zustand { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; color: var(--sand); /* war 0.5 — inaktive Schritte waren auf dem Bild praktisch unlesbar */ opacity: 0.72; transition: opacity var(--d-hover) var(--ease-wisch), color var(--d-hover) var(--ease-wisch); } .takt-zustand.ist-aktiv { opacity: 1; color: var(--perl); } .takt-zahl { position: absolute; top: var(--sp-gross); left: var(--gutter); z-index: 2; font-family: var(--font-display); font-size: clamp(4rem, 8vw, 7rem); color: var(--perl); opacity: 0.9; } @media (max-width: 899px) { /* Mobil steht die Szene auf Creme statt auf dunklem Bild — Schrift muss dunkel sein. Diese Regeln stehen bewusst NACH dem früheren Mobil-Block, sonst gewinnt die helle Grundfarbe per Quellreihenfolge (Befund 03.08.2026). */ .takt-zahl { position: relative; top: auto; left: auto; padding: 0 var(--gutter); color: var(--mauve); opacity: 1; } .takt-zustand { color: var(--mauve-matt); opacity: 1; } .takt-zustand.ist-aktiv { color: var(--mauve); } .takt-liste .marginalie-kapitel { color: var(--rose); opacity: 1; } } /* ---------- 17) EDITORIALE AUSSTATTUNGS-ZEILEN ---------- */ .ausstattung-zeile { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(20px, 4vw, 56px); } @media (max-width: 899px) { .ausstattung-zeile { grid-template-columns: 1fr; } } .ausstattung-zeile.ist-invertiert { direction: rtl; } .ausstattung-zeile.ist-invertiert > * { direction: ltr; } .ausstattung-bild { position: relative; overflow: hidden; } .ausstattung-bild img { width: 100%; height: 100%; object-fit: cover; will-change: transform; } .ausstattung-marginalie { font-family: var(--font-body); font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--rose); writing-mode: vertical-rl; display: none; } @media (min-width: 1024px) { .ausstattung-marginalie { display: block; } } /* ---------- 18) SVG-EINSATZGEBIETSKARTE ---------- */ .karte-svg-wrap { width: 100%; overflow: hidden; } .karte-svg { width: 100%; height: auto; display: block; } .karte-svg path { fill: none; stroke: var(--mauve); stroke-width: 1; stroke-dasharray: 1400; stroke-dashoffset: 1400; } @supports (animation-timeline: view()) { .karte-svg path { animation: zeichne-karte linear forwards; animation-timeline: view(); animation-range: entry 0% cover 60%; } } .karte-svg path.ist-sichtbar { stroke-dashoffset: 0; transition: stroke-dashoffset 1400ms var(--ease-wisch); } @keyframes zeichne-karte { to { stroke-dashoffset: 0; } } /* ---------- 18a) EDITORIALE TABELLE (unternehmen: Turnus & Umfang) ---------- */ .tabelle-editorial { display: grid; grid-template-columns: 1.3fr 1fr 2fr 1fr; border-top: 1px solid var(--hairline-22); } .tabelle-editorial .zk { padding: 22px 16px; border-bottom: 1px solid var(--hairline-22); font-size: var(--fs-body-s); } .tabelle-editorial .zk-kopf { font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; color: var(--mauve-matt); padding-top: 12px; padding-bottom: 12px; } .tabelle-editorial .zk-name { font-weight: 600; color: var(--mauve); } .tabelle-editorial .zk-turnus { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--rose); } .tabelle-editorial .zeile-zebra { background: color-mix(in oklch, var(--sand) 34%, transparent); } @media (max-width: 767px) { .tabelle-editorial { grid-template-columns: 1fr; } .tabelle-editorial .zk-kopf { display: none; } .tabelle-editorial .zk { padding: 8px 4px; border-bottom: none; } .tabelle-editorial .zk-name { padding-top: 20px; border-top: 1px solid var(--hairline-22); } } /* ---------- 18b) RESPONSIVE SPLIT-LAYOUTS (ersetzen inline grid-template-columns) ---------- */ /* Befund 03.08.2026: Mit 38% blieben der Textspalte nur 492px (1440px) bzw. 376px (1100px). Der Lead brach dadurch auf ~36 Zeichen pro Zeile um — ausgefranst und gequetscht, während das Formular daneben großzügig atmete. 45% bringt die Textspalte auf ~580px. */ .split-38-62 { display: grid; grid-template-columns: 45% 1fr; gap: clamp(32px, 5vw, 72px); } .split-50-50 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; } /* 38% ließen der Textspalte auf unternehmen.html nur ~29–32 Zeichen pro Zeile (Befund 03.08.2026) — ausgefranst. 44% bringt sie auf eine lesbare Breite. */ .split-62-38 { display: grid; /* war 62% — dadurch blieben der Textspalte rechts nur ~29–32 Zeichen pro Zeile (Befund 03.08.2026, unternehmen.html). 56% gibt ihr eine lesbare Breite. */ grid-template-columns: 56% 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; } .split-47-53 { display: grid; grid-template-columns: 47% 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; } @media (max-width: 899px) { .split-38-62, .split-50-50, .split-62-38, .split-47-53 { grid-template-columns: 1fr; } } /* ---------- 19) UTILITY ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .zentriert { text-align: center; margin-inline: auto; } .bruch-ausbruch-r { position: relative; } @media (min-width: 900px) { .bruch-ausbruch-r { margin-right: -8%; /* Deckel gegen Viewport-Überlauf (Befund 03.08.2026: ragte bei 1440px 32px über den rechten Rand — bei längerem Text würde dort real etwas abgeschnitten). */ max-width: calc(100vw - var(--gutter)); } } /* Befund 03.08.2026: In zweispaltigen Split-Layouts ragte der Rechts-Ausbruch (`margin-right: -8%`) nicht nach außen, sondern in die NACHBARSPALTE — auf unternehmen.html schnitt das Treppenhaus-Bild die ersten Buchstaben von „Sechs Objekttypen, ein Prinzip" ab. Dort bricht das Element jetzt nach LINKS zum Seitenrand aus, wo es hingehört. */ .split-62-38 > .bruch-ausbruch-r, .split-47-53 > .bruch-ausbruch-r { margin-right: 0; } @media (min-width: 900px) { .split-62-38 > .bruch-ausbruch-r, .split-47-53 > .bruch-ausbruch-r { margin-left: -8%; } } .bruch-ueberlapp { position: relative; } @media (min-width: 900px) { .bruch-ueberlapp.oben { margin-top: -5rem; } } .marginalie-satz { max-width: 62ch; font-size: var(--fs-body); line-height: 1.68; color: var(--mauve); } .marginalie-kapitel { font-family: var(--font-body); font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--rose); display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .marginalie-kapitel::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-perle); background: var(--perl); border: 1px solid var(--mauve); } /* Rechtsseiten */ .recht-body h2 { font-size: var(--fs-h2); margin-top: var(--sp-mittel); margin-bottom: var(--sp-eng); } .recht-body h3 { margin-top: var(--sp-knapp); margin-bottom: 10px; } .recht-body p, .recht-body li { max-width: 62ch; color: var(--mauve-matt); margin-bottom: 14px; } .recht-body a { text-decoration: underline; text-underline-offset: 3px; } .recht-body ul { list-style: disc; padding-left: 1.4em; } .recht-body ul li { display: list-item; } /* ---------- 20) KI-TRANSPARENZ (EU AI Act Art. 50, Pflicht ab 02.08.2026) ---------- */ .bild-symbol { position: relative; margin: 0; } .bild-symbol figcaption { margin-top: 8px; font-family: var(--font-body); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--mauve-matt); } .tonbruch .bild-symbol figcaption { color: var(--sand); } .karte-inhalt .ki-hinweis, .bahn-inhalt .ki-hinweis { display: block; margin-top: 6px; font-family: var(--font-body); font-weight: 500; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.13em; color: color-mix(in oklch, var(--perl) 82%, var(--sand)); opacity: 0.82; } .head-ki-label { position: absolute; z-index: 3; right: var(--gutter); /* Befund 03.08.2026: Unten im Hero ist es zwischen zwei Textzonen eingeklemmt — darunter die per `margin-top:-3.5rem` hochgezogene H1, darüber die Eyebrow in .head-content. Jede Bottom-Position kollidiert mit einer der beiden. Das Label sitzt deshalb jetzt OBEN rechts direkt unter der Navigation: dort liegt im Hero nie Fließtext, unabhängig von Headline-Länge und Breakpoint. */ top: 6rem; bottom: auto; font-family: var(--font-body); font-weight: 500; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--perl); opacity: 0.82; padding: 6px 12px; background: oklch(28% 0.04 34 / 0.38); backdrop-filter: blur(6px); } @media (max-width: 767px) { .head-ki-label { right: 16px; top: 5.25rem; bottom: auto; font-size: 0.625rem; padding: 5px 10px; } }