/* Erzeugt von tools/build.ps1: Design-Variablen der Standardseite (dunkles Design) nur im Cookie-Dialog. */ /* ========================================================================== 01 · Design Tokens – die einzige Quelle für Farbe, Schrift, Raum, Raster und Bewegung. Komponenten verwenden nur diese Werte; neue Werte gehören hierher, nicht in eine Komponente. Übersicht: docs/V12-DESIGN-SYSTEM.md V12 „Licht & Format“ (Redesign seit 13.10.2026, Master Brief des Inhabers): – Dunkelkammer und Abzug: dunkle Räume zeigen die Arbeiten, helle Flächen tragen Information (Angebote, Preise, Formulare) – der Wechsel ist Absicht, nicht Dekoration. – Licht: Elektroblau aus dem Lichtmalerei-Portrait des Inhabers erscheint nur als langsam bewegtes Licht in wenigen dunklen Bereichen (nie auf Text, Knöpfen, Linien). Bronze bleibt Logo-P und „Preisrechner“. – Schrift: Space Grotesk 400/500 für alles (wie bis V11; Entscheid des Inhabers 14.10.2026). Titel 500 mit enger Laufweite, Text 400. ========================================================================== */ .consent { /* --- Markenfarben ------------------------------------------------------- */ --ivory: #f1ece4; /* Abzug: helle Grundfläche (seit V4) */ --paper: #e6dfd4; /* Abzug, abgesetzt */ --espresso: #1b1613; /* Tinte auf Hell, dunkle Fläche im hellen Design */ --carbon: #141110; /* Grundfläche im dunklen Design */ --carbon-2: #1c1815; /* dunkel, abgesetzt */ --night: #0b0a09; /* Dunkelkammer: Start, Abschluss, Fusszeile */ --taupe: #9c897a; /* Linien; Nebentext nur auf Dunkel */ --taupe-ink: #6a5e54; /* Nebentext auf Ivory (5,3:1) / Paper (4,7:1) */ --ash: #ab9f94; /* Nebentext auf Dunkel (7,3:1 auf --carbon) */ --bronze: #b4865b; /* Logo-P und „Preisrechner“ auf Dunkel (5,7:1) */ --bronze-ink: #7d5a38; /* derselbe Ton als Text auf Hell (5,2:1 auf Ivory) */ /* Licht (V12): Elektroblau der Lichtmalerei – nur als Leuchten (.licht, 15-licht.css), nie als Text- oder Flächenfarbe. */ --licht: #2c63ff; --licht-hell: #5cc8ff; --licht-tief: #1b2499; --blueprint: #1e3d60; /* Nerd-Corner */ --blueprint-deep: #162f4c; --blueprint-ink: #dde9f5; --blue: #28629b; /* Nerd-Corner hell: 4,8:1 auf Papier */ --blue-light: #93bde6; /* --- Schriftfamilien -------------------------------------------------- */ --font-sans: "Space Grotesk", "Space Grotesk Fallback", "Helvetica Neue", Arial, sans-serif; --font-serif: "Fraunces", Georgia, "Iowan Old Style", serif; --font-mono: "Share Tech Mono", ui-monospace, "SF Mono", Consolas, monospace; /* --- Stärke (Space Grotesk gibt es nur als 400 und 500) ----------------- Nur diese zwei Werte verwenden – alles darüber würde der Browser als unschönes Kunst-Fett errechnen (darum zusätzlich font-synthesis-weight: none in 02-base.css). Die Breiten-Tokens (--wdth-*) stammen aus dem Redesign mit Mona Sans; Space Grotesk hat keine Breitenachse, darum stehen sie alle auf „normal“ und wirken nicht. */ --wdth-mega: normal; --wdth-display: normal; --wdth-h1: normal; --wdth-h2: normal; --wdth-h3: normal; --wdth-text: normal; --wdth-label: normal; --wght-mega: 500; --wght-display: 500; --wght-h1: 500; --wght-h2: 500; --wght-h3: 500; --wght-h4: 500; --wght-text: 400; --wght-medium: 500; --wght-strong: 500; --wght-label: 500; /* --- Schriftgrade nach Rolle (fluid, 390 → 1440 → 1920 px) ------------ Space Grotesk ist breit: Titel-Grade wie bis V11 (dort erprobt – „Immobilienfotografie“ bleibt auch bei 1280 px in einer Zeile). Rolle klein 1440 gross Verwendung mega 40 96 112 Startseite: die vier Einstiege display 48 90 100 Abschluss („Ihr Projekt“) h1 40 67 72 Seitentitel h2 30 46 48 Abschnittstitel h3 22 27 28 Gruppen, Pakete, Karten h4 17 19 19 Namen, Schritte, Listen statement 26 44 50 Aussagen in Fraunces lead 19 23 24 Vorspann body 16 17 17 Fliesstext small 15 15 15 Nebentext, Beschreibungen caption 13 13 13 Bildlegenden, Hinweise label 13 13 13 Etiketten (keine Versalien) button 15 15 15 Schaltflächen */ /* V13 „Das Bild zuerst“ (21.10.2026): grösserer Massstab der Titel – h1 44 → 95 → 104, h2 32 → 55 → 56, display 48 → 106 → 120. Die Spalten begrenzen; lange Titel („Unternehmen & Content“) brechen ausgeglichen in zwei Zeilen (text-wrap: balance). */ --text-mega: clamp(2.5rem, 1.2rem + 5.4vw, 7rem); --text-display: clamp(3rem, 1.6rem + 5.6vw, 7.5rem); --text-h1: clamp(2.5rem, 1.55rem + 4.9vw, 6.5rem); --text-h2: clamp(2rem, 1.45rem + 2.2vw, 3.5rem); --text-h3: clamp(1.375rem, 1.22rem + 0.62vw, 1.75rem); --text-h4: clamp(1.0625rem, 1.02rem + 0.18vw, 1.1875rem); --text-statement: clamp(1.625rem, 1.12rem + 2.08vw, 3.125rem); --text-lead: clamp(1.1875rem, 1.06rem + 0.52vw, 1.5rem); --text-body: clamp(1rem, 0.975rem + 0.1vw, 1.0625rem); --text-small: 0.9375rem; --text-caption: 0.8125rem; --text-label: 0.8125rem; --text-button: 0.9375rem; --leading-mega: 0.95; --leading-display: 0.95; --leading-h1: 0.98; --leading-h2: 1.04; --leading-h3: 1.15; --leading-h4: 1.3; --leading-lead: 1.45; --leading-body: 1.62; --leading-small: 1.55; --tracking-mega: -0.045em; --tracking-display: -0.04em; --tracking-h1: -0.035em; --tracking-h2: -0.026em; --tracking-h3: -0.016em; --tracking-h4: -0.006em; --tracking-lead: -0.008em; --tracking-label: 0.01em; --tracking-caps: 0.16em; /* nur Nerd-Corner */ /* Lesemasse (Space Grotesk: 1ch ≈ ein Durchschnittsbuchstabe). */ --measure: 62ch; --measure-lead: 46ch; --measure-narrow: 38ch; /* --- Raum: 4-px-Raster ------------------------------------------------ */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ /* Fluider Rhythmus (Handy → Desktop) – V12 etwas mehr Luft */ --section: clamp(5rem, 2.8rem + 8.8vw, 10.5rem); /* 80 → 171 → 168 (V13: mehr Luft) */ --section-s: clamp(3rem, 2.1rem + 3.6vw, 6rem); /* 48 → 86 → 96 */ --head-gap: clamp(2.25rem, 1.4rem + 3.4vw, 5rem); /* Abschnittskopf → Inhalt */ --flow: 1em; /* Absatzabstand */ /* --- Raster ------------------------------------------------------------- */ --page-max: 1600px; --page-wide: 1920px; --gutter: clamp(1.25rem, 0.55rem + 2.9vw, 3.5rem); /* 20 → 51 → 56 */ --gap: clamp(1rem, 0.62rem + 1.5vw, 2rem); /* 16 → 32 → 32 */ --header-h: 4.5rem; --hairline: 1px; --form-max: 46rem; /* Breakpoints (in @media als Zahl geschrieben): 560 grosse Handys 900 Tablet hoch → Desktop-Raster 1100 breite Lesespalten 1240 volle Navigation (darunter „Menü“) 1440 grosse Bildschirme */ /* --- Bewegung ------------------------------------------------------------- Dauer Kurve micro 120 ms --ease-soft Druck, Farbe fast 220 ms --ease-soft Hover, Fokus, Unterstriche base 380 ms --ease-out Menü, Dropdown, Filter reveal 760 ms --ease-out Titel über Maske, Bild öffnet sich cinematic 1150 ms --ease-out Formate der Startseite, Grossansicht travel 1600 ms --ease-in-out lange Fahrten drift 44 s linear-ish Licht wandert (nur dunkle Räume) --ease-out schnell an, lange Auslauf – wie ein Objektiv, das scharf stellt --ease-in-out symmetrisch – Kamerafahrt --ease-in für Abgänge (kurz) --ease-soft Farbe und Deckkraft */ --dur-micro: 120ms; --dur-fast: 220ms; --dur-base: 380ms; --dur-reveal: 760ms; --dur-cinematic: 1150ms; --dur-travel: 1600ms; --dur-drift: 44s; --stagger: 45ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-soft: cubic-bezier(0.33, 1, 0.68, 1); /* --- Formen --------------------------------------------------------------- Das Interface bleibt eckig wie ein Abzug – nur Eingabefelder und kleine Bedienelemente bekommen 2 px (weicher am Finger), Karten nie. */ --radius-0: 0; --radius-1: 2px; /* --- Ebenen ------------------------------------------------------------- */ --z-sheet: 1; --z-totop: 80; --z-menu: 90; --z-header: 100; --z-consent: 200; --z-intro: 500; --z-skip: 1000; } @media (max-width: 1099px) { .consent { --header-h: 4rem; } } /* --- Paletten --------------------------------------------------------------- Hell = Grundwerte. Dunkel ist Standard (data-theme="dark" im , vom Kopfskript aus der gespeicherten Wahl). Seit 14.10.2026 (Entscheid des Inhabers „alles folgt dem Schalter“) gilt das für die ganze Website – auch der Webdesign-Bereich zeigt nicht mehr die umgekehrte Grundfarbe, und Abschnitte wechseln nur noch im Ton (siehe Flächen unten). Farbänderungen immer in beiden Blöcken. */ .consent { --bg: var(--ivory); --bg-alt: var(--paper); --bg-deep: var(--night); --fg: var(--espresso); --fg-soft: var(--taupe-ink); --line: rgba(27, 22, 19, 0.14); --line-strong: rgba(27, 22, 19, 0.34); --placeholder: var(--paper); --header-bg: rgba(241, 236, 228, 0.94); --bronze-text: var(--bronze-ink); /* umgekehrte Grundfarbe: Flächen, die den anderen Bereich zeigen */ --bg-invert: var(--carbon); --fg-invert: #ece6dc; --theme-color: #f1ece4; /* Licht ist auf hellem Grund fast unsichtbar – bewusst. */ --licht-staerke: 0.32; /* Beige der Gutschein-Karte (Rahmen, Band, Schleife) – nur dort (Auftrag des Inhabers 30.09.2026). */ --gift: #b59c75; /* Zustände: gedämpft, keine Signalfarben. Text auf --bg ≥ 5,5 : 1. */ --error: #9b3b2a; --error-bg: rgba(155, 59, 42, 0.08); --success: #3f6b48; --success-bg: rgba(63, 107, 72, 0.09); --focus: var(--fg); --disabled-opacity: 0.45; --field-bg: rgba(255, 255, 255, 0.5); color-scheme: light; } .consent { --bg: var(--carbon); --bg-alt: var(--carbon-2); --bg-deep: var(--night); --fg: #ece6dc; --fg-soft: var(--ash); --line: rgba(236, 230, 220, 0.12); --line-strong: rgba(236, 230, 220, 0.3); --placeholder: #201b18; --header-bg: rgba(20, 17, 16, 0.94); --bronze-text: var(--bronze); --bg-invert: var(--ivory); --fg-invert: var(--espresso); --theme-color: #141110; --licht-staerke: 1; --gift: #d3bc97; --error: #e8977f; --error-bg: rgba(232, 151, 127, 0.09); --success: #9cc7a4; --success-bg: rgba(156, 199, 164, 0.09); --focus: var(--fg); --disabled-opacity: 0.45; --field-bg: rgba(236, 230, 220, 0.04); color-scheme: dark; } /* Abgesetzte Fläche (.surface--invert, .palette-invert): bis 14.10.2026 die umgekehrte Grundfarbe (im dunklen Design hell, im hellen dunkel). Seit dem Entscheid des Inhabers „alles folgt dem Schalter“ eine Stufe tiefer im SELBEN Design – Papier im hellen, Anthrazit im dunklen. Der Klassenname blieb, damit die Seiten unverändert bleiben. */ :is(.palette-invert, .surface--invert) { --bg: var(--paper); --bg-alt: #ddd5c8; /* Nebentext eine Spur dunkler: auch auf #ddd5c8 ≥ 4,5 : 1. */ --fg-soft: #62574d; --placeholder: #ddd5c8; } :root[data-theme="dark"] :is(.palette-invert, .surface--invert) { --bg: var(--carbon-2); --bg-alt: #241f1b; --fg-soft: var(--ash); --placeholder: #2a241f; } /* Flächen (seit 14.10.2026: alle folgen dem Schalter): --alt leicht abgesetzt (gleiche Helligkeit) --invert eine Stufe tiefer im selben Design (Papier / Anthrazit) --deep im dunklen Design die Dunkelkammer (Nacht), im hellen Elfenbein (Start, Abschluss; die Fusszeile im hellen auf Papier) --paper Werkzeuge auf Papier (Preisrechner, Formular, Rechtstexte): im dunklen Design hell, im hellen eine Stufe dunkler als die Seite */ .surface--alt { --bg: var(--bg-alt); background: var(--bg); } .surface--invert { background: var(--bg); color: var(--fg); } .surface--deep { --bg: var(--night); --bg-alt: #15120f; --fg: #efe9e0; --fg-soft: #bdb1a4; --line: rgba(239, 233, 224, 0.13); --line-strong: rgba(239, 233, 224, 0.32); --placeholder: #1d1916; --bronze-text: var(--bronze); --licht-staerke: 1; --field-bg: rgba(239, 233, 224, 0.04); --error: #e8977f; --success: #9cc7a4; --focus: var(--fg); background: var(--bg); color: var(--fg); color-scheme: dark; } .surface--paper { --bg: var(--ivory); --bg-alt: var(--paper); --fg: var(--espresso); --fg-soft: var(--taupe-ink); --line: rgba(27, 22, 19, 0.14); --line-strong: rgba(27, 22, 19, 0.34); --placeholder: var(--paper); --bronze-text: var(--bronze-ink); --licht-staerke: 0.32; --field-bg: rgba(255, 255, 255, 0.5); --error: #9b3b2a; --error-bg: rgba(155, 59, 42, 0.08); --success: #3f6b48; --focus: var(--fg); background: var(--bg); color: var(--fg); color-scheme: light; } /* Helles Design: die Dunkelkammer wird Abzug (Elfenbein), das Licht tritt wie auf jedem hellen Grund zurück; Werkzeuge liegen eine Stufe dunkler auf Papier, damit sie als eigene Fläche stehen. */ :root:not([data-theme="dark"]) .surface--deep { --bg: var(--ivory); --bg-alt: var(--paper); --fg: var(--espresso); --fg-soft: var(--taupe-ink); --line: rgba(27, 22, 19, 0.14); --line-strong: rgba(27, 22, 19, 0.34); --placeholder: var(--paper); --bronze-text: var(--bronze-ink); --licht-staerke: 0.32; --field-bg: rgba(255, 255, 255, 0.5); --error: #9b3b2a; --success: #3f6b48; color-scheme: light; } :root:not([data-theme="dark"]) .site-footer.surface--deep { --bg: var(--paper); --bg-alt: #ddd5c8; --fg-soft: #62574d; } :root:not([data-theme="dark"]) .surface--paper { --bg: var(--paper); --bg-alt: #ddd5c8; /* Nebentext eine Spur dunkler: auch auf #ddd5c8 ≥ 4,5 : 1. */ --fg-soft: #62574d; --placeholder: #ddd5c8; } /* --- V14 „Der Schnitt“ (22.10.2026, Redesign nach dem Director's Cut) --------- Eine Schräge für Kanten, Masken und Übergänge – aus dem Kinetic-Entwurf (Bewegung). Sie nimmt die Diagonalen des Logos auf, kopiert aber nicht deren 45°. Seit dem zweiten Feinschliff (Inhaber 22.10.2026: „überall gleichen Winkel“) EIN Winkel: 7,5° gegen die Senkrechte. Eine schräge Kante versetzt sich darum um ihre Höhe × tan(7,5°) – --schnitt-o = --schnitt-h × --schnitt-k –, nie um feste Pixel oder Prozent der Breite (das ergab je nach Format 1,5° bis 10°). Die Höhe kommt aus dem CSS (Knöpfe, Mosaik, Intro) oder wird gemessen (js/12-schnitt.js, js/17-bildmaske.js). Rahmen und Effekte auf schrägen Formen laufen parallel zur Kante (05-schnitt.css). Zwei Bewegungen: --ease-cut (schnell rein, hart gebremst) für Schnitte, --ease-out für das Ausrollen. Nur clip-path, transform, opacity. Verwendung: 05-schnitt.css, 06-intro.css, 21-media.css, 30-page-hero.css, 40-start.css, 90-motion.css. */ .consent { --ease-cut: cubic-bezier(0.76, 0, 0.18, 1); --dur-cut: 720ms; --schnitt-k: 0.13165; /* tan(7,5°) */ --poly-full: polygon(0 0, 100% 0, 100% 100%, 0 100%); } /* ========================================================================== 29 · Cookie-Hinweis (js/consent.js) Ruhiges Kärtchen unten links. Alle Knöpfe sind gleich gestaltet (gleiche Grösse, Haarlinie) – „Nur notwendige“ ist so leicht wie „Alle akzeptieren“. Seit 08.10.2026 drei Kategorien: „Einstellungen“ klappt im Kärtchen die Auswahl auf (Notwendig fest, Statistik, Marketing). Blendet einmal kurz auf; bei reduzierter Bewegung steht es einfach da. ========================================================================== */ .consent { position: fixed; left: max(var(--gutter), env(safe-area-inset-left, 0px)); bottom: max(var(--gutter), env(safe-area-inset-bottom, 0px)); z-index: var(--z-consent); /* 32 rem (vorher 30): drei Knöpfe nebeneinander, auch „Auswahl speichern“ */ width: min(32rem, calc(100vw - 2 * var(--gutter))); padding: var(--space-5); background: var(--bg-alt); box-shadow: inset 0 0 0 1px var(--line-strong), 0 24px 48px -24px rgba(0, 0, 0, 0.45); color: var(--fg); } @media (prefers-reduced-motion: no-preference) { .consent:not([hidden]) { animation: intro-rise var(--dur-reveal) var(--ease-out) 600ms backwards; } } .consent-title { margin: 0 0 var(--space-2); font-size: var(--text-body); font-weight: var(--wght-medium); line-height: 1.3; } .consent-text { margin: 0; color: var(--fg-soft); font-size: var(--text-small); line-height: 1.6; } /* Klickfläche mindestens 24 px hoch (Launch-Prüfung 29.09.2026: war 19 px); Innenabstand + gleich viel negativer Rand – die Zeile bleibt gleich hoch. */ .consent-text a { display: inline-block; padding-block: 0.3rem; margin-block: -0.3rem; color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 0.28em; } .consent-text a:hover, .consent-text a:focus-visible { text-decoration-color: currentColor; } /* Auswahl: eine Zeile je Kategorie, Haarlinie dazwischen. Das Kästchen ist ein echtes Eingabefeld (Tastatur, Screenreader), nur eckig gezeichnet. */ .consent-wahl { margin-top: var(--space-4); border-top: 1px solid var(--line); } .consent-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; padding-block: var(--space-3); border-bottom: 1px solid var(--line); } .consent-zeile input { appearance: none; display: grid; place-items: center; width: 1.125rem; height: 1.125rem; margin: 0.15rem 0 0; border: 1px solid var(--fg); background: transparent; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-soft); } .consent-zeile input::after { content: ""; width: 0.55rem; height: 0.3rem; margin-top: -0.12rem; border-left: 1.5px solid var(--bg-alt); border-bottom: 1.5px solid var(--bg-alt); transform: rotate(-45deg); opacity: 0; } .consent-zeile input:checked { background: var(--fg); } .consent-zeile input:checked::after { opacity: 1; } .consent-zeile input:disabled { cursor: default; opacity: 0.55; } .consent-zeile label { display: grid; gap: 0.1rem; cursor: pointer; } .consent-zeile input:disabled + label { cursor: default; } .consent-name { font-size: var(--text-small); font-weight: var(--wght-medium); } .consent-immer { margin-left: var(--space-2); color: var(--fg-soft); font-weight: 400; } .consent-info { color: var(--fg-soft); font-size: var(--text-caption); line-height: 1.5; } .consent-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); } .consent-btn { flex: 1 1 0; min-height: 2.75rem; padding: 0 var(--space-3); white-space: nowrap; box-shadow: inset 0 0 0 1px var(--fg); color: var(--fg); font-size: var(--text-small); font-weight: var(--wght-medium); text-align: center; transition: background-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft); } .consent-btn:hover, .consent-btn:focus-visible { background: var(--fg); color: var(--bg-alt); } .consent-btn[hidden] { display: none; } /* Lange Auswahl auf kleinen Bildschirmen: das Kärtchen scrollt in sich. */ .consent.is-wahl { max-height: calc(100dvh - 2 * var(--gutter)); overflow-y: auto; overscroll-behavior: contain; } /* Handy: drei gleich breite Knöpfe passen nicht nebeneinander – zwei oben, „Einstellungen“ darunter über die ganze Breite (gleich gestaltet). */ @media (max-width: 479px) { .consent { padding: var(--space-4); } .consent-btn { flex-basis: calc(50% - var(--space-1)); padding: 0 var(--space-2); } }