/* ========================================================================== controlpunkt.com, Designsystem v4 Stand 2026-07-14. Spezifikation: docs/DESIGN.md. v2 ("Messzeichnung") ist gestrichen. Passkreuze, Gradnetz, Kennungen, Register, Randnotizen, Blattkopf und Maßstabsleiste sind entfernt: sie waren Kostüm, kein Träger. Was bleibt, kommt aus dem Geschäft: der dunkle Grund, das EINE helle Blatt (das Dokument für den Großkunden) und der Druckvektor (die Kernaussage als Bild). Kanonische Marken-Werte (die einzigen drei Hex-Anker, alles andere ist daraus in OKLCH abgeleitet, keine zweite Palette): Punkt-Violett #9842F3 Canvas #1E162C (entschieden Tommy 2026-07-17; #0E1726 ist nur noch historischer Papierwert) Amber #F59E0B (genau einmal: der Druckvektor des Risikoteams) Schrift: Archivo (die Seite), Azeret Mono (NUR Zahlen, Preise, Rufnummer), Poppins (nur das Wortzeichen). Alle selbst gehostet, kein CDN. Das System gilt auf ALLEN Seiten: eine Spalte (.wrap), eine Sektion (.section), ein Kopf (.hero). Kein Sonderraster für die Startseite. ========================================================================== */ /* --- 1. Schriften -------------------------------------------------------- */ /* Poppins, ausschliesslich für das Wortzeichen (bestehende Identität). */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/poppins-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; } /* Archivo, variabel (wght 100..900), OFL, Omnibus Type. Die Seitenschrift. */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/archivo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Azeret Mono, variabel (wght 400..600), OFL, Displaay. NUR Zahlen, Preise, Dauer-Angaben, Rufnummer. Nie Fließtext, nie Pseudo-Kennungen, nie Formularlabel. */ @font-face { font-family: "Azeret Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/azeret-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: "Azeret Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/azeret-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --- 2. Tokens ----------------------------------------------------------- */ /* FARBSTRATEGIE, committed (Tommy, 14.07.). Vorher: dunkles Marineblau plus ein leuchtender Akzent. Das ist wörtlich Anti-Referenz 1 aus PRODUCT.md (der MSSP-Reflex): die Schlösser waren weg, die Farbwelt war dieselbe. Auf die Kategorie Security-Beratung rät ein Fremder diese Palette im ersten Versuch. Jetzt: Punkt-Violett trägt als FLÄCHE. Drei Oberflächen, drei Bedeutungen, sonst nichts. Jede ist eine Klasse, die dieselben Tokens neu belegt. Es gibt keine zweite Palette, nur drei Belegungen einer Palette. 1. DAS FELD (.brandfield) Getränktes Violett. Hier spricht controlpunkt: Kopfzeile, Kopf, Abgrenzung, Vertrauen, Kontakt, Fußzeile. Weiße Typo, keine Icons. 2. DER GRUND (:root) Violettschwarz, KEIN Marineblau. Hier wird gezeichnet und belegt: das Netz, die Fälle. 3. DAS BLATT (.invert) Papierweiß. Das Dokument, das der Kunde jemandem vorlegt, der Macht über ihn hat. Unverändert. Es ist die einzige Fläche mit dieser Bedeutung. Alle Neutralen kippen auf die Marken-Hue (301). Kein reines Schwarz, kein reines Weiß. Kontraste unten sind gerechnet (sRGB, WCAG 2.x), nicht geschätzt. */ /* DIE ZEICHENFLÄCHE (.pressure). Der Druckvektor ist eine Zeichnung: seine Marken sind violett, und Violett auf Violett trägt keine Information. Er steht auf /fahrplan im Kopf, also auf dem FELD, und dort wäre die Platte, auf die der Amber-Pfeil auftrifft, unsichtbar (1.9:1). Also stellt er sich den Grund selbst wieder her. Dieselben Werte wie :root, an EINER Stelle deklariert: eine Selektorliste, keine zweite Palette. */ :root, .pressure { color-scheme: dark; /* Kanon. Die drei Hex-Anker der Marke, alles andere ist daraus abgeleitet. */ --cp-violet: #9842F3; /* oklch(0.585 0.247 301) */ --cp-amber: #F59E0B; --cp-canvas: #0E1726; /* NUR historischer Papierwert, wird nirgends neu verwendet. Markengrund ist #1E162C (--cp-ground), entschieden Tommy 2026-07-17, gilt auch LinkedIn. */ --cp-hue: 301; /* Violett-Rampe, OKLCH, eine Hue */ --cp-violet-text: oklch(0.82 0.130 var(--cp-hue)); /* Links, Marken auf Grund, 9.4:1 */ --cp-violet-lift: oklch(0.72 0.190 var(--cp-hue)); /* Preise, Ziffern auf Grund, 6.4:1 */ --cp-violet-deep: oklch(0.45 0.215 var(--cp-hue)); /* Violett auf dem hellen Blatt */ --cp-violet-line: oklch(0.585 0.247 var(--cp-hue) / 0.42); /* gezogene Linien, Rahmen */ --cp-violet-wash: oklch(0.585 0.247 var(--cp-hue) / 0.10); /* Flächen-Tints */ /* Amber, ausschließlich der Druckvektor auf /fahrplan. Genau einmal. */ --cp-amber-text: oklch(0.80 0.155 70); /* DER GRUND. Violettschwarz (#1E162C), nicht Marineblau. */ --cp-ground: oklch(0.222 0.042 var(--cp-hue)); --cp-ground-2: oklch(0.278 0.046 var(--cp-hue)); /* gehobene Fläche: Karten, Panele */ --cp-ink: oklch(0.960 0.010 295); /* Überschriften, 15.5:1 */ --cp-ink-2: oklch(0.855 0.022 292); /* Fließtext, 11.1:1 */ --cp-muted: oklch(0.705 0.034 288); /* Sekundärtext, 6.6:1 */ /* Zwei Linienstärken mit klarer Zuständigkeit: --cp-rule-strong trägt JEDE sichtbare Begrenzung eines Bedienelements (Knopfrahmen, Feldunterkante). 3.9:1 auf dem Grund, WCAG 1.4.11 erfüllt. --cp-rule und --cp-rule-2 sind Haarlinien zur Gliederung und dürfen nie die einzige Begrenzung eines Bedienelements sein. */ --cp-rule-strong: oklch(0.575 0.055 var(--cp-hue)); /* 3.9:1 */ --cp-rule: oklch(0.440 0.048 var(--cp-hue)); --cp-rule-2: oklch(0.335 0.045 var(--cp-hue)); --cp-focus: var(--cp-violet-text); --cp-danger: oklch(0.72 0.16 25); /* Knopf-Vertrag: jede Oberfläche legt fest, wie ihr Hauptknopf aussieht. Auf dem Grund ist er Punkt-Violett mit Weiß (4.76:1). */ --cp-btn-bg: var(--cp-violet); --cp-btn-fg: #fff; --cp-btn-bg-over: oklch(0.52 0.235 var(--cp-hue)); /* Schrift */ --cp-font: "Archivo", "Helvetica Neue", Arial, sans-serif; --cp-font-mono: "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace; --cp-font-mark: "Poppins", var(--cp-font); /* nur Wortzeichen */ /* Maße */ --cp-max: 1180px; --gutter: clamp(20px, 4vw, 48px); --measure: 62ch; /* Abstände, 8er-Modul */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --cp-radius: 0px; /* Keine abgerundeten Ecken. */ /* Die Farbe des hellen Blattes, als Token. Die Übergabe-Marke im Netz IST ein kleines Stück dieses Blattes und muss es zitieren, nicht kopieren: der Wert stand dort hartkodiert und wäre beim nächsten Anfassen auseinandergelaufen. */ --cp-paper: oklch(0.972 0.005 292); /* Das Liniennetz. Kein neues Farb-Token, nur Maße. DESIGN.md 9. */ --net-track: 3px; /* Linienstärke */ --net-dot: 11px; /* Station */ --net-hub: 22px; /* Der Knotenpunkt. Doppelter Stationsdurchmesser, offener Ring statt voller Punkt: der Umsteigebahnhof ist keine Station wie die anderen, er ist die, an der sich der Weg entscheidet. Dritte und letzte Marke im System. */ /* Aliasse für den Bestand (faelle, vertrauen, kontakt, Rechtstexte, /en/*). Sie erben damit dasselbe System, ohne dass ihr Markup sofort umgebaut werden muss. Keine zweite Palette, nur andere Namen für dieselben Tokens. */ --cp-sheet: var(--cp-ground-2); --cp-hairline: var(--cp-rule); --cp-violet-ink: var(--cp-violet-text); --cp-font-display: var(--cp-font); --cp-font-body: var(--cp-font); --cp-max-wide: var(--cp-max); --cp-measure: var(--measure); --frame-max: var(--cp-max); /* Der Kontrollpunkt. Fester Vermessungspunkt, das Signaturmotiv des Aufnahme-Auftritts. Ein Mass, zwei Bauteile (cp-fix, cp-fix--survey), keine neue Palette: beide zitieren --cp-violet und --cp-violet-deep. */ --fix-survey: clamp(96px, 12vw, 132px); } /* DAS FELD. Getränktes Punkt-Violett, die tragende Fläche der Marke. Referenz: zuehlke.com, das getränkte Markenfeld. Eine gesättigte Farbe wird zum Markenraum, die Typo wird weiß, es gibt keine Icons und keinen zweiten Akzent. Weiß auf dem Feld: 8.2:1. Auf dem Feld ist Violett KEIN Akzent mehr, es ist der Grund. Der Akzent ist das Weiße. Deshalb werden Links, Preise und der Hauptknopf hier hell, nicht violett: Violett auf Violett trägt keine Information. */ .brandfield { --cp-ground: oklch(0.440 0.170 var(--cp-hue)); /* #6431A0 */ --cp-ground-2: oklch(0.375 0.165 var(--cp-hue)); /* vertiefte Fläche im Feld */ --cp-ink: oklch(0.990 0.006 var(--cp-hue)); /* 8.2:1 */ --cp-ink-2: oklch(0.945 0.022 var(--cp-hue)); /* 7.2:1 */ --cp-muted: oklch(0.855 0.050 var(--cp-hue)); /* 5.4:1 */ --cp-rule-strong: oklch(0.720 0.095 var(--cp-hue)); /* 3.3:1, WCAG 1.4.11 */ --cp-rule: oklch(0.640 0.115 var(--cp-hue)); --cp-rule-2: oklch(0.560 0.140 var(--cp-hue)); --cp-violet-text: oklch(0.990 0.006 var(--cp-hue)); --cp-violet-lift: oklch(0.990 0.006 var(--cp-hue)); --cp-violet-line: oklch(0.990 0.006 var(--cp-hue) / 0.45); --cp-violet-wash: oklch(0.990 0.006 var(--cp-hue) / 0.10); --cp-focus: oklch(0.990 0.006 var(--cp-hue)); --cp-btn-bg: oklch(0.990 0.006 var(--cp-hue)); --cp-btn-fg: oklch(0.300 0.150 var(--cp-hue)); /* 13.4:1 auf dem Knopf */ --cp-btn-bg-over: oklch(0.900 0.055 var(--cp-hue)); background: var(--cp-ground); color: var(--cp-ink-2); color-scheme: dark; } /* Das helle Blatt: das Dokument, das der Kunde seinem Großkunden vorlegt. Der Grund dafür wird auf der Seite NICHT erklärt. */ .invert { --cp-ground: oklch(0.972 0.005 292); --cp-ground-2: oklch(1 0 0); --cp-ink: oklch(0.225 0.030 272); --cp-ink-2: oklch(0.330 0.028 274); --cp-muted: oklch(0.505 0.028 282); --cp-rule-strong: oklch(0.62 0.030 290); --cp-rule: oklch(0.80 0.020 290); --cp-rule-2: oklch(0.885 0.015 292); --cp-violet-text: var(--cp-violet-deep); --cp-violet-lift: var(--cp-violet-deep); --cp-focus: var(--cp-violet-deep); --cp-btn-bg: var(--cp-violet-deep); --cp-btn-fg: #fff; --cp-btn-bg-over: oklch(0.36 0.190 var(--cp-hue)); background: var(--cp-ground); color: var(--cp-ink-2); color-scheme: light; } /* --- 3. Basis ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Landet die Seite direkt auf einem Anker (/faelle#saas), springt sie sofort dorthin statt sekundenlang ueber die halbe Seite zu fahren: die Fahrt liess Leser auf leeren dunklen Zwischenflaechen zurueck (R11, vier von sieben Personas, "fast den Tab geschlossen"). */ html:has(:target) { scroll-behavior: auto; } body { margin: 0; background-color: var(--cp-ground); color: var(--cp-ink-2); font-family: var(--cp-font); font-size: 1.0625rem; font-weight: 400; line-height: 1.7; /* helle Schrift auf dunklem Grund, +0.05 */ -webkit-font-smoothing: antialiased; } /* KEIN overflow-x: hidden. Es stand hier und hat den Kopfzeilen-Überlauf auf dem Telefon lautlos verschluckt: bei 360px waren 20 von 44 Pixeln des Menüknopfs unerreichbar, und man konnte nicht einmal hinscrollen. Eine Sicherung, die den Fehler versteckt, statt ihn zu melden, ist schlimmer als keine. Überlauf wird an der Ursache repariert und bleibt sichtbar, wenn er wiederkommt. */ /* Sprungziele landen nicht bündig an der Oberkante. Zwölf Stationsanker zeigen hierher. */ [id] { scroll-margin-top: var(--s-7); } h1, h2, h3, h4 { color: var(--cp-ink); margin: 0; text-wrap: balance; font-weight: 700; } /* Typoskala. Vorher brach sie unten zusammen: h3 (19.2px) war nur 13 Prozent größer als der Fließtext (17px), das registriert niemand als Hierarchie. Jetzt: 48 / 32 / 23 / 17. Jeder Schritt mindestens 35 Prozent. */ h1 { font-size: clamp(1.95rem, 1.15rem + 2.4vw, 2.7rem); line-height: 1.08; letter-spacing: -0.03em; } h2 { font-size: clamp(1.5rem, 1.15rem + 1.35vw, 2rem); line-height: 1.16; letter-spacing: -0.025em; } h3 { font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.45rem); line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; } p { margin: 0 0 var(--s-4); max-width: var(--measure); } strong { color: var(--cp-ink); font-weight: 600; } a { color: var(--cp-violet-text); text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color 120ms ease; } a:hover { text-decoration-thickness: 2px; } /* Telefonnummer hinter einem Klick (2026-08-27): kein tel:-Link im Quelltext, Harvester ernten den Footer nicht mehr. Der Button traegt sich wie ein Link. */ .tel-reveal { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; color: var(--cp-violet-text); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } .tel-reveal:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--cp-focus); outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Die Utilities (mt-*, measure-*, subhead, ...) stehen als Abschnitt 19 am DATEIENDE, damit sie wie die frueheren Inline-Styles jede Komponenten- Regel gleicher Spezifitaet schlagen. Hier stand der alte mt-Block. */ .skip-link { position: absolute; left: var(--s-5); top: -80px; z-index: 90; background: var(--cp-violet); color: #fff; font-weight: 600; padding: var(--s-3) var(--s-5); text-decoration: none; } .skip-link:focus { top: var(--s-5); } /* Zahlen. Mono ist die Instrumentenschrift: was gemessen oder bezahlt wird, steht in Mono. Sonst nichts. */ .num, .price, .amount, .fact b, .pricecard .amount, .contact__tel { font-family: var(--cp-font-mono); font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.01em; } /* --- 4. Layout: eine Spalte, eine Sektion, ein Kopf ---------------------- */ /* Gilt auf jeder Seite. Es gibt kein zweites Raster. */ .wrap { width: min(var(--cp-max), 100%); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--cp-rule-2); } .section--plain { border-top: 0; } /* Typ B (DESIGN.md, Abschnitt "Angebotskarte und Flow"): kurze, inhaltlich fortlaufende Blöcke rücken zusammen, statt mit dem vollen Großabschnitts- Abstand (231px) auseinanderzustehen. Nur --s-6 (32px). Der erste Block eines Laufs behält den oberen Abstand zum Großabschnitt davor, der letzte den unteren zum nächsten. :has ist bereits im Einsatz (siehe .sitefoot). */ .section--flow + .section--flow { border-top: 0; padding-top: var(--s-6); } .section--flow:has(+ .section--flow) { padding-bottom: var(--s-6); } .hero { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 72px); } .lead { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); line-height: 1.55; color: var(--cp-ink-2); max-width: 54ch; } /* Kleinlabel. 0.8125rem = 13px ist die harte Untergrenze der Seite (DESIGN.md 9, die Anti-Söldner-Klausel). Sie galt bisher nur im Netz und wurde überall sonst gerissen, zuletzt vom Produktnamen selbst. Sie gilt jetzt für JEDES Label auf jeder Fläche. */ .eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--cp-muted); margin: 0 0 var(--s-4); max-width: none; } /* Der Kontrollpunkt: fester Vermessungspunkt als Signaturmotiv. Zwei Bauteile, keine neue Farbe: beide zitieren nur --cp-violet und --cp-violet-deep, die bereits im Kanon stehen. cp-fix: die kleine Marke, immer neben einem echten Textlabel (Eyebrow). cp-fix--survey: das grosse Vermessungszeichen fuer die Aufnahme- und Faelle-Hero, Ring + Kernpunkt + Sichtlinien zu Knoten. Beide sind rein dekorativ (aria-hidden, focusable="false") und ersetzen nie ein Label. */ .cp-fix { flex: 0 0 auto; } .cp-fix .fix-ring { fill: none; stroke: var(--cp-violet); stroke-width: 2; } .cp-fix .fix-core { fill: var(--cp-violet); stroke: none; } .cp-fix--onpaper .fix-ring, .sheet .cp-fix .fix-ring, .invert .cp-fix .fix-ring { stroke: var(--cp-violet-deep); } .cp-fix--onpaper .fix-core, .sheet .cp-fix .fix-core, .invert .cp-fix .fix-core { fill: var(--cp-violet-deep); } .cp-fix--survey { width: var(--fix-survey); height: auto; aspect-ratio: 132 / 104; flex: 0 0 auto; } .cp-fix--survey .fix-ring { fill: none; stroke: var(--cp-violet); stroke-width: 3; } .cp-fix--survey .fix-core { fill: var(--cp-violet); } .cp-fix--survey .fix-sight { stroke: var(--cp-violet-line); stroke-width: 1.5; } .cp-fix--survey .fix-node { fill: none; stroke: var(--cp-violet-line); stroke-width: 1.5; } .cp-fix--survey .fix-node--measured { fill: var(--cp-violet); stroke: none; } @media (max-width: 480px) { .cp-fix--survey .fix-sight, .cp-fix--survey .fix-node { display: none; } } /* Hero-Raster mit dem Vermessungszeichen links neben dem Anspruch, nur auf /aufnahme (/assessment) und /faelle (/cases). Unter 720px faellt es auf eine Spalte zurueck; das Zeichen steht im Markup vor .hero__claim, also stapelt es sich dort automatisch darueber, ohne eigene Regel. */ .hero--survey { display: grid; gap: var(--s-5); } @media (min-width: 720px) { .hero--survey { grid-template-columns: auto minmax(0, 1fr); align-items: center; } } /* Finale Abnahme 2026-08-27: ab 1000px war die rechte Haelfte des Hero-Bands leer und das Vermessungszeichen hing klein links (Tommy: Leerflaechen). Jetzt traegt das Zeichen die rechte Haelfte: es ist die eine Grafik, die das Produkt bedeutet (der eingemessene Referenzpunkt, PRODUCT.md), keine Dekoration. Links bleibt der Claim in Lesebreite. */ @media (min-width: 1000px) { .hero--survey { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-8); } .hero--survey .cp-fix--survey { order: 2; width: clamp(260px, 28vw, 400px); justify-self: end; } } /* --- 5. Kopfzeile, zweizeilig --------------------------------------------- B4e ist bindend: Rufnummer und E-Mail stehen im Kopf JEDER Seite, nicht erst ab 1220px. Zeile 1 trägt Wortzeichen und Erreichbarkeit, Zeile 2 die Navigation. DESIGN.md Abschnitt 8. */ .masthead { padding-block: 0; border-bottom: 0; } /* Zeile 1 ist ein Raster, kein Flexbalken mit space-between. Der alte Balken hat drei nicht schrumpfbare Kinder nebeneinander gestellt (Wortzeichen, Rufnummer mit white-space: nowrap, Menüknopf) und ist deshalb unter 400px aus der Seite gelaufen. Der Menüknopf, also die EINZIGE Navigation auf dem Telefon, lag bei 320px komplett außerhalb. Jetzt tragen Wortzeichen und Menüknopf die Zeile; die Rufnummer ist ein drittes Rasterkind, das unter 560px in eine eigene volle Zeile fällt, statt zu drängeln. Sie verschwindet nie (B4e, DESIGN.md 8), sie wird größer. */ .masthead__row1 { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--cp-rule-2); } .logo { display: inline-flex; align-items: baseline; gap: 3px; text-decoration: none; min-width: 0; } .logo span { font-family: var(--cp-font-mark); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--cp-ink); white-space: nowrap; } /* Der Punkt ist das Signaturzeichen. Auf dem Grund ist er violett, auf dem Feld wäre Violett auf Violett unsichtbar: dort ist er die Papierfarbe. Der Punkt ist immer die Farbe, die die Fläche NICHT ist. */ .logo i { width: 7px; height: 7px; border-radius: 50%; background: var(--cp-violet); display: block; } .brandfield .logo i { background: var(--cp-ink); } .masthead__direct { grid-column: 2; justify-self: end; min-width: 0; display: flex; align-items: center; gap: var(--s-5); } .masthead__direct .tel { font-family: var(--cp-font-mono); font-size: 0.85rem; font-weight: 500; color: var(--cp-violet-text); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; } .masthead__direct .tel:hover { text-decoration: underline; text-underline-offset: 0.25em; } .masthead__direct .mail { font-size: 0.85rem; color: var(--cp-ink-2); text-decoration: none; white-space: nowrap; } .masthead__direct .mail:hover { color: var(--cp-ink); text-decoration: underline; text-underline-offset: 0.25em; } .masthead__direct .lang { font-size: 0.8125rem; color: var(--cp-muted); letter-spacing: 0.06em; text-decoration: none; } .masthead__direct .lang:hover { color: var(--cp-ink); } /* Unter 1040px ziehen Mail und Sprachumschalter ins Menüpanel. */ @media (max-width: 1039px) { .masthead__direct .mail, .masthead__direct .lang { display: none; } } /* Unter 560px bekommt die Rufnummer eine eigene Zeile unter dem Wortzeichen. Damit ist der Überlauf baulich unmöglich, nicht nur unwahrscheinlich: in Zeile 1 stehen dann nur noch zwei Kinder. */ @media (max-width: 559px) { .masthead__row1 { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s-3); } .masthead__direct { grid-column: 1 / -1; grid-row: 2; justify-self: start; padding-top: var(--s-3); border-top: 1px solid var(--cp-rule-2); width: 100%; } .masthead__direct .tel { font-size: 0.95rem; } } /* .nav sitzt bereits in
, das Mass und Gutter liefert. Kein zweites width/padding-inline hier, sonst rücken die Links gegenüber Zeile 1 nach innen und die Haarlinie bricht ab. */ .nav { display: flex; gap: var(--s-5); align-items: center; padding-block: var(--s-2); border-bottom: 1px solid var(--cp-rule-2); } .nav a { font-size: 0.95rem; font-weight: 500; color: var(--cp-ink-2); text-decoration: none; padding-block: var(--s-2); border-bottom: 1px solid transparent; transition: color 120ms ease, border-bottom-color 120ms ease; } .nav a:hover, .nav a[aria-current="page"] { color: var(--cp-ink); border-bottom-color: var(--cp-violet); } @media (max-width: 1039px) { .nav { display: none; } } /* Mobile Navigation: details/summary, funktioniert ohne JavaScript. */ .nav-mobile { display: none; } @media (max-width: 1039px) { .nav-mobile { display: block; position: relative; } .nav-mobile summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--cp-rule); } .nav-mobile summary::-webkit-details-marker { display: none; } .nav-mobile summary::marker { content: ""; } .nav-mobile__icon, .nav-mobile__icon::before, .nav-mobile__icon::after { width: 18px; height: 1.5px; background: var(--cp-ink); display: block; } .nav-mobile__icon { position: relative; } .nav-mobile__icon::before, .nav-mobile__icon::after { content: ""; position: absolute; left: 0; } .nav-mobile__icon::before { top: -6px; } .nav-mobile__icon::after { top: 6px; } .nav-mobile__panel { position: absolute; right: 0; top: calc(100% + var(--s-3)); z-index: 80; background: var(--cp-ground-2); border: 1px solid var(--cp-rule); padding: var(--s-5); min-width: 262px; display: flex; flex-direction: column; gap: var(--s-4); box-shadow: 0 14px 40px oklch(0.1 0.05 var(--cp-hue) / 0.5); } .nav-mobile__panel a { font-size: 1rem; font-weight: 500; color: var(--cp-ink); text-decoration: none; } .nav-mobile__panel a:hover { color: var(--cp-violet-text); } .nav-mobile__panel .tel, .nav-mobile__panel .mail { padding-top: var(--s-3); border-top: 1px solid var(--cp-rule-2); color: var(--cp-violet-text); } .nav-mobile__panel .tel { font-family: var(--cp-font-mono); font-variant-numeric: tabular-nums; } .nav-mobile__panel .mail { border-top: 0; padding-top: 0; } .nav-mobile__panel .lang { font-size: 0.85rem; color: var(--cp-muted); } } /* --- 6. Der zweispaltige Kopf und der Druckvektor ------------------------- v4: .hero--home heißt .hero--split, weil er nicht mehr startseiten-eigen ist. Er steht jetzt auf /fahrplan, neben dem Druckvektor (DESIGN.md 7). Die Startseite bekommt einen einspaltigen Kopf plus das Liniennetz. */ .hero--split { display: grid; gap: clamp(40px, 5vw, 64px); grid-template-columns: 1fr; align-items: start; } @media (min-width: 1040px) { .hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 5vw, 80px); } } /* Der Kopf der Startseite. Er ließ ab 1040px rund 45 Prozent der ersten Bildschirmbreite rechts leer stehen und schob das Netz komplett unter den Falz: bei 1440x900 begann die H2 bei 892px, die erste Stationszeile 209px UNTER der Kante. Das Netz hat .doors genau deshalb ersetzt, damit drei Türen gleichwertig sichtbar sind (PRODUCT.md, Grundsatz 5). Jetzt zwei Spalten: links die These und die Handlung (Knopf, Rufnummer), rechts die Erklärung und der Preis. Die Copy aus B1 bleibt vollständig und wörtlich, sie steht nur nebeneinander statt untereinander. Das ist der halbe Kopf in der Höhe, und das Netz rutscht über den Falz. */ .hero--home { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; padding-block: clamp(24px, 2.4vw, 32px) clamp(24px, 2vw, 28px); } @media (min-width: 1040px) { .hero--home { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); column-gap: clamp(40px, 4vw, 64px); } } /* Der Lead trägt im zweispaltigen Kopf die Erklärung, nicht die Stimme. Bei 1.3rem und 46ch war er 226px hoch und hat allein das Netz unter den Falz geschoben. Er bleibt wörtlich (B1), er wird nur ruhiger gesetzt. */ .hero--home .lead { margin-bottom: 0; max-width: 52ch; font-size: clamp(1.05rem, 0.98rem + 0.32vw, 1.15rem); line-height: 1.5; } .hero--home .actions { margin-top: var(--s-4); } .hero__claim h1 { max-width: 20ch; } /* Die Startseiten-H1 (SALES-STORY.md, Main Message) ist ein einzelner langer Fragesatz mit drei Adressaten, wörtlich aus dem Käufertest, nicht kürzbar. 20ch würde ihn auf sieben bis acht Zeilen zwingen. Breiter setzen und die Schrift etwas zurücknehmen, damit er in drei bis vier Zeilen bricht, statt die Seite zu dominieren. Bricht bewusst über mehrere Zeilen (Bauauftrag). */ .hero--home .hero__claim h1 { max-width: 32ch; font-size: clamp(1.7rem, 1.05rem + 2.4vw, 2.5rem); } /* Zwei Sätze, zwei Rollen: die Lage des Käufers, dann die Entlastung. Die Entlastung trägt die volle Tinte. */ .hero__claim h1 .setup { display: block; color: var(--cp-muted); font-weight: 600; font-size: 0.62em; line-height: 1.25; letter-spacing: -0.02em; margin-bottom: var(--s-3); } .hero__claim h1 .relief { display: block; color: var(--cp-ink); } .hero__claim .lead { margin-top: var(--s-6); } /* Die Angebotszeile: Name, Dauer, Preis. Die einzige Stelle im Kopf mit Mono. */ .hero__offer { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--cp-rule); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-4); max-width: none; } .hero__offer b { color: var(--cp-ink); font-weight: 600; } /* KEIN Trenner als Haarlinie mehr. Er war als border-left gebaut, und sobald die Zeile umbrach (im schmalen Kopf ab Werk, auf dem Telefon immer), führte dieser Rahmen die neue Zeile an: dann stand dort genau der 2px-Seitenstreifen, der auf dieser Seite verboten ist, nur diesmal aus Versehen erzeugt. Ein Umbruch darf keine Dekoration erfinden können. Die drei Angaben stehen jetzt untereinander, getrennt durch Raum. */ .hero__offer { display: grid; row-gap: var(--s-1); justify-items: start; } .hero__offer span { padding-left: 0; border-left: 0; } .hero__offer .price { color: var(--cp-violet-lift); font-size: 1.05rem; } /* Die rechte Spalte des Startseiten-Kopfs. Sie stand als .hero__pitch leer: 151px Inhalt in einer 449px hohen Zeile, darunter tote Fläche ohne Kante, die drei Käufer als Ladefehler lasen. Jetzt trägt sie die drei Fakten, die dieselben Käufer als Kaufgrund nannten: das Angebot als Klickziel und die beiden Fragen samt ihrer Einschränkung. Startseiten-lokal: .hero__offer bleibt für die sieben anderen Seiten unangetastet, dieses Bauteil hängt an .hero__facts. */ .hero__facts { display: grid; row-gap: var(--s-2); align-content: start; } .hero__fact { border-top: 1px solid var(--cp-rule); padding-top: var(--s-3); display: grid; row-gap: var(--s-2); } .hero__fact__q { margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--cp-muted); max-width: none; } .hero__fact__a { margin: 0; font-size: 1rem; line-height: 1.4; font-weight: 600; color: var(--cp-ink); max-width: 46ch; } .hero__fact__limit { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--cp-muted); max-width: 50ch; } /* Plate 1: das Angebot ist das einzige Klickziel im Kopf rechts. Ein mit Flächen-Hover, sonst nichts. Plate 2 und 3 sind Prosa mit Inline-Link, kein Block-Hover, kein Rahmen, kein Flächen-Tint. */ a.hero__fact--offer { text-decoration: none; color: inherit; transition: border-color 120ms ease; } .hero__fact--offer b { color: var(--cp-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color 120ms ease; } .hero__fact--offer span { max-width: none; } .hero__fact--offer .price { color: var(--cp-violet-lift); font-size: 1.05rem; font-family: var(--cp-font-mono); font-variant-numeric: tabular-nums; } a.hero__fact--offer:hover { border-top-color: var(--cp-rule-strong); } a.hero__fact--offer:hover b { color: var(--cp-ink); } a.hero__fact--offer:active { transform: translateY(1px); } /* Angebotskarte im Hero der Unterseiten (Typ A, DESIGN.md). Zitiert die Token der .pricecard, steht aber im Kopf auf dem Feld. Sie wird NIE auf Claim-Höhe gestreckt: die Höhe kommt aus echtem Inhalt. Vertikal zentriert (align-self: center, Tommy 2026-07-24), damit die Rest-Leere sich oben und unten teilt. NICHT interaktiv: kein , kein