/* ==========================================================================
Coreflow · Version D „Founder Refined“ · Fundament (Integration)
Grundlage: Version C (Art Direction „Ruhige Substanz“), weiterentwickelt nach Marcels Brief vom 14.10.2026
- Hochwertig ohne Effekthascherei: Tiefe entsteht aus Komposition, Kontrast, echten Medien und
kontrollierten dunklen Schatten. Keine Glows, keine Lichtflecken, keine Glasflächen, keine Verlaufsflächen.
- Rot ist Akzent, nicht Licht: Primär-Button, Eyebrow, aktive Kante, eine Zahl mit Bedeutung.
- Ruhe zwischen starken Momenten: ein Grund, wenige Flächenstufen, eine Typo-Stimme mit klarer Hierarchie.
- Material: warm-neutral, entschieden (Founder 14.10.2026). Die Anthrazit-Variante von C ist entfernt.
Alle Ströme verwenden nur die Tokens dieser Datei; neue Farben, Radien oder Schatten fragen sie bei der Integration an.
Diese Datei gehört nur der Integration (Thread „Version D: Header, Hero, Medien“).
========================================================================== */
@font-face {
font-family: "Manrope";
src: url("../assets/fonts/Manrope-Variable.woff2") format("woff2");
font-weight: 200 800;
font-display: swap;
}
/* ---------------- Material: warm-neutral Dark (entschieden) ----------------
Ein Hauch Wärme (Farbton ~35°, Sättigung ≤ 6 %), nicht braun. Grund liegt am freigegebenen #0C0C0C. */
:root {
--bg: #0d0c0b; /* Seitengrund */
--surface-1: #151412; /* Band: ruhige Section-Fläche */
--surface-2: #1c1b19; /* Karte, Medienträger */
--surface-3: #252321; /* aktiv / angehoben */
--surface-4: #2e2c29; /* Hover auf aktiv */
--line: rgba(255, 248, 238, .075);
--line-2: rgba(255, 248, 238, .14);
--line-3: rgba(255, 248, 238, .24);
--text: #f6f4f1; /* Coreflow Light aus dem Logo · 17,8:1 auf --bg */
--text-2: #b6b0a8; /* 9,1:1 auf --bg, 7,3:1 auf --surface-3 */
--text-3: #9b958d; /* Metadaten ≥ 13 px: 6,6:1 auf --bg, 5,3:1 auf --surface-3, 4,7:1 auf --surface-4 */
--scrim: rgba(13, 12, 11, .78); /* Schrift auf Medien */
}
:root {
/* ---- Marke: unverändert ---- */
--red: #e64b3b; /* Coreflow Red · 5,1:1 auf --bg */
--red-hover: #ec5c4c; /* Hover der roten Fläche */
--red-text: #f17060; /* Rot als Schrift auf Flächen (≥ 4,6:1 bis --surface-4) */
--on-red: #0c0c0c; /* Schrift auf Rot, 5,06:1 (F K1) */
--ok: #3d927a; /* einzige Grün-Ausnahme: „Erreichbar“ */
/* ---- Radien: harmonisch, eine Familie ---- */
--r-xs: 6px;
--r-sm: 10px; /* Pfeil-Kachel, kleine Steuerung */
--r-md: 14px; /* Buttons, Eingaben */
--r-lg: 20px; /* Karten, Header */
--r-xl: 28px; /* Medienbühnen */
--r-pill: 999px; /* nur Punkte, Avatare */
/* ---- Tiefe: nur dunkle, kontrollierte Schatten ---- */
--shadow-1: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 20px -12px rgba(0, 0, 0, .7);
--shadow-2: 0 2px 4px rgba(0, 0, 0, .4), 0 24px 48px -24px rgba(0, 0, 0, .85);
--shadow-3: 0 4px 10px rgba(0, 0, 0, .35), 0 48px 96px -40px rgba(0, 0, 0, .95), 0 20px 40px -24px rgba(0, 0, 0, .7);
--ring: inset 0 0 0 1px var(--line); /* Haarlinie um Flächen */
--ring-2: inset 0 0 0 1px var(--line-2);
/* ---- Typografie: eine Stimme, klare Stufen ---- */
--font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--fs-display: clamp(2.3rem, 1.5rem + 4.2vw, 5.5rem); /* nur Hero */
--fs-h2: clamp(2rem, 1.4rem + 2.2vw, 3.5rem);
--fs-h3: clamp(1.3rem, 1.1rem + .7vw, 1.75rem);
--fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.3rem);
--fs-body: clamp(.98rem, .95rem + .12vw, 1.0625rem);
--fs-small: .875rem;
--fs-meta: .8125rem;
--fs-eyebrow: .9375rem; /* 15 px Desktop, 13 px mobil (F K7) */
/* ---- Raster und Rhythmus ---- */
--max: 86rem;
--gutter: clamp(1rem, .35rem + 2.6vw, 3rem);
--sec-y: clamp(4.5rem, 2.8rem + 6vw, 9rem); /* Luft einer Section */
--head-gap: clamp(2.25rem, 1.8rem + 2.4vw, 4rem); /* Kopf → Inhalt */
/* ---- Bewegung: ruhig, kurz ---- */
--ease: cubic-bezier(.2, .7, .2, 1);
--t-fast: 150ms;
--t-mid: 280ms;
--t-slow: 700ms;
}
/* ---------------- Reset ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; scroll-padding-bottom: 4.5rem; background: var(--bg); }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font: 400 var(--fs-body)/1.6 var(--font);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(230, 75, 59, .4); color: #fff; }
.sr-only, .sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--text); color: var(--bg); border-radius: var(--r-sm); font-weight: 600; transition: top var(--t-fast); }
.skip:focus { top: 1rem; }
.tnum { font-variant-numeric: tabular-nums; }
/* ---------------- Typografie ----------------
Eine Stimme (600) für Aussagen. Die Einordnung im selben Satz ist gleich kräftig, nur gedämpft (.soft):
ruhiger als B's 300er-Kontrast, Hierarchie bleibt lesbar. */
.display, .h2, .h3 { font-weight: 600; text-wrap: balance; }
.display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.038em; }
.h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.032em; }
.h3 { font-size: var(--fs-h3); line-height: 1.18; letter-spacing: -.022em; }
.soft { color: var(--text-2); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); max-width: 36em; text-wrap: pretty; }
.meta { font-size: var(--fs-meta); color: var(--text-3); }
/* Eyebrow: steht immer ÜBER der Überschrift. Rot, Satzschreibung, keine Versalien, kein Punkt-Glow.
Optional mit Nummer davor (03), die die Section im Drei-Ebenen-Modell verankert. */
.eyebrow { display: flex; align-items: baseline; gap: .6rem; font-size: var(--fs-eyebrow); font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--red); }
.eyebrow b { font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.eyebrow b::after { content: ""; display: inline-block; width: 1px; height: .85em; margin-left: .6rem; background: var(--line-3); vertical-align: -.08em; }
@media (max-width: 767px) { :root { --fs-eyebrow: .8125rem; } }
/* ---------------- Raster ---------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
/* ---------------- Sections ----------------
.sec = eine Section auf dem Grund. .sec--band = ruhiges Band eine Stufe heller, ohne Rundung, ohne Überlappung;
oben und unten je eine Haarlinie. Sections schieben sich nicht übereinander und weichen nicht zurück. */
.sec { position: relative; padding-block: var(--sec-y); }
/* Marcel 15.10: eine Grundfarbe für die ganze Seite (#0d0c0b). Ein Band ist keine hellere Fläche mehr, nur noch eine
Section mit feiner Haarlinie oben; hellere Flächen bleiben Karten vorbehalten. */
.sec--band { background: transparent; box-shadow: inset 0 1px 0 var(--line-2); }
.sec--tight { padding-block: calc(var(--sec-y) * .66); }
/* Section-Kopf: Eyebrow über der Headline, Text darunter oder rechts daneben (.shead--split).
Zwei Formen, nicht mehr: so bleiben alle Sections eine Familie. */
.shead { display: grid; gap: 1.1rem; max-width: 46rem; margin-bottom: var(--head-gap); }
.shead > p:not(.eyebrow) { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); max-width: 38em; text-wrap: pretty; }
.shead--split { max-width: none; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.shead--split > .eyebrow { grid-column: 1 / -1; }
.shead--split > .h2 { grid-column: 1; }
.shead--split > p:not(.eyebrow), .shead--split > .shead__aside { grid-column: 2; padding-bottom: .35rem; }
.shead--center { justify-items: center; text-align: center; margin-inline: auto; }
.shead--center .eyebrow { justify-content: center; }
@media (max-width: 899px) { .shead--split { grid-template-columns: 1fr; } .shead--split > * { grid-column: 1 !important; } }
/* ---------------- Flächen ----------------
.card: Karte auf dem Grund oder Band. .card--raised: angehoben. */
.card { position: relative; background: var(--surface-2); border-radius: var(--r-lg); box-shadow: var(--ring), var(--shadow-1); }
.card--raised { background: var(--surface-3); box-shadow: var(--ring-2), var(--shadow-2); }
/* ---------------- Aktiv-Markierung (global, Brief Abschnitt 10) ----------------
EIN Zustandsmuster für alles Auswählbare: Ebenen in „Was wir machen“, „Wo stehst du?“, Themenwahl der Kontaktseite,
interaktive Empfehlungen, passende Hover-/Fokus-Zustände.
- Markierung = kurzer, GERADER roter Strich, mittig an der linken Kante (Referenz: A, „Wo stehst du“).
Er folgt nie der Rundung: Höhe höchstens 2,25 rem und immer kürzer als die gerade Kante (100 % − 2 × Radius).
- Aktiv = eine Stufe heller (--surface-3), Haarlinie --line-2, 2 px angehoben, Strich voll. Nie helle Flächen.
- Hover (nur echte Zeigegeräte) = Fläche eine Stufe heller, Strich halb. Fokus = sichtbarer Ring (global) + halber Strich.
Verwendung: Klasse .sel am Element. Aktiv über .is-active, aria-checked/-selected/-pressed="true", aria-current
oder ein vorangestelltes :checked-Input ( + ). Das Element darf ::before nicht selbst belegen;
wer ::before braucht, setzt den Strich als eigenes Element (gleiche Regeln).
Verboten: rote Ränder oder inset-Schatten, die um die Rundung laufen (C's „inset 3px 0 0 var(--red)“). */
.sel { position: relative; transition: background var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), color var(--t-fast); }
.sel::before, .sel > .sel__bar {
content: ""; position: absolute; left: 0; top: 50%; z-index: 1;
width: 3px; height: min(2.25rem, max(.75rem, calc(100% - 2 * var(--sel-r, var(--r-lg)))));
border-radius: 0 3px 3px 0; background: var(--red);
transform: translateY(-50%) scaleY(0); transform-origin: 50% 50%;
transition: transform var(--t-mid) var(--ease);
pointer-events: none;
}
.sel:has(> .sel__bar)::before { content: none; }
@media (hover: hover) and (pointer: fine) {
.sel:hover { background: var(--surface-3); }
.sel:hover::before, .sel:hover > .sel__bar { transform: translateY(-50%) scaleY(.5); }
}
.sel:focus-visible::before, .sel:focus-visible > .sel__bar { transform: translateY(-50%) scaleY(.5); }
.sel.is-active, .sel[aria-checked="true"], .sel[aria-selected="true"], .sel[aria-pressed="true"], .sel[aria-current]:not([aria-current="false"]), :checked + .sel {
background: var(--surface-3); box-shadow: var(--ring-2), var(--shadow-2); transform: translateY(-2px);
}
.sel.is-active::before, .sel[aria-checked="true"]::before, .sel[aria-selected="true"]::before, .sel[aria-pressed="true"]::before, .sel[aria-current]:not([aria-current="false"])::before, :checked + .sel::before,
.sel.is-active > .sel__bar, .sel[aria-checked="true"] > .sel__bar, .sel[aria-selected="true"] > .sel__bar, .sel[aria-pressed="true"] > .sel__bar, .sel[aria-current]:not([aria-current="false"]) > .sel__bar, :checked + .sel > .sel__bar { transform: translateY(-50%) scaleY(1); }
/* Ohne Anheben (z. B. Zeilen in einer Liste, die nicht springen sollen) */
.sel--flat.is-active, .sel--flat[aria-checked="true"], .sel--flat[aria-current]:not([aria-current="false"]), :checked + .sel--flat { transform: none; }
/* Alt-Name aus C, zeigt jetzt denselben Zustand. Neue Arbeit verwendet .sel. */
.is-active-surface { background: var(--surface-3); box-shadow: var(--ring-2), var(--shadow-2); transform: translateY(-2px); }
/* Medienfassung: Haarlinie, dunkler Schatten, keine Browser-Rahmen */
.media { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--shadow-2); }
.media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); pointer-events: none; }
.media > img, .media > video { width: 100%; height: 100%; object-fit: cover; }
/* Gekennzeichneter Video-Platzhalter in derselben Medienstruktur (Kundenfilm folgt).
Austausch ohne Layoutumbau: behält Seitenverhältnis, nur der Inhalt wechselt. */
.media--film { aspect-ratio: 16 / 9; }
.media-ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .6rem; padding: 1.5rem; text-align: center; color: var(--text-2); font-size: var(--fs-small); background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255, 255, 255, .025) 14px 15px), var(--surface-2); }
.media-ph svg { width: 2.5rem; height: 2.5rem; color: var(--text-3); }
.media-ph b { color: var(--text); font-weight: 600; font-size: 1rem; }
/* Mediensteuerung (Pause, Ton, Schließen): solide Kachel, keine Glasfläche */
.ctl { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-sm); background: var(--scrim); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); transition: background var(--t-fast); }
.ctl:hover { background: var(--surface-4); }
.ctl svg { width: 1.15rem; height: 1.15rem; }
.ctl .i-play, .ctl.is-paused .i-pause { display: none; }
.ctl.is-paused .i-play { display: block; }
.ctl .on { display: none; } .ctl[aria-pressed="true"] .on { display: block; } .ctl[aria-pressed="true"] .off { display: none; }
/* ---------------- Buttons ----------------
Ein Komponentenmodell für Header, Hero, Sections und Kontakt:
Fläche r14 + Pfeil-Kachel r10 rechts (integriertes Quadrat). Primär = Coreflow Red mit dunkler Schrift.
Kein Glow, kein roter Saum: nur ein dunkler, kurzer Schatten und eine feine Oberkante.
Größen: Standard 56 px, --sm 46 px (Header), --xs 40 px (mobiler Header). Hover: Kachel dunkler, Pfeil 3 px. */
.btn {
--h: 3.5rem;
display: inline-flex; align-items: center; gap: 1rem;
min-height: var(--h); padding: .375rem .375rem .375rem 1.35rem;
border-radius: var(--r-md);
background: var(--red); color: var(--on-red);
font-weight: 650; font-size: 1rem; letter-spacing: -.01em; line-height: 1.2;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .5), 0 8px 18px -10px rgba(0, 0, 0, .8);
transition: background var(--t-mid) var(--ease), transform var(--t-fast) var(--ease);
white-space: nowrap;
}
.btn__k { display: grid; place-items: center; flex: none; width: calc(var(--h) - .75rem); height: calc(var(--h) - .75rem); border-radius: var(--r-sm); background: rgba(12, 12, 12, .13); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .16); transition: background var(--t-mid) var(--ease); }
.btn__k svg { width: 1rem; height: 1rem; transition: transform var(--t-mid) var(--ease); }
.btn:hover { background: var(--red-hover); }
.btn:hover .btn__k { background: rgba(12, 12, 12, .2); }
.btn:hover .btn__k svg { transform: translateX(3px); }
.btn:hover .btn__k svg.is-ext { transform: translate(2px, -2px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
/* Ohne Kachel (z. B. Formular-Absenden mit Text) bekommt der Button symmetrisches Padding */
.btn:not(:has(.btn__k)) { padding-inline: 1.35rem; justify-content: center; }
/* Sekundär: dunkle Fläche, Haarlinie, Pfeil-Kachel eine Stufe heller, Pfeil in Rot */
.btn--quiet { background: var(--surface-3); color: var(--text); box-shadow: var(--ring-2), var(--shadow-1); }
.btn--quiet .btn__k { background: var(--surface-4); box-shadow: inset 0 0 0 1px var(--line); color: var(--red-text); }
.btn--quiet:hover { background: var(--surface-4); }
.btn--quiet:hover .btn__k { background: var(--surface-3); }
.btn--sm { --h: 2.875rem; font-size: .9375rem; gap: .8rem; padding-left: 1.1rem; }
.btn--xs { --h: 2.5rem; font-size: .875rem; gap: .6rem; padding-left: .9rem; border-radius: 12px; }
.btn--xs .btn__k { border-radius: 8px; }
.btn--block { width: 100%; justify-content: space-between; }
/* Sekundäraktion = Textlink (Polish Abschnitt 2). EINE Komponente für Hero, Referenzen, Bewertungen, Wissen und Kontakt.
Ruhe: neutrale helle Schrift, feine Haarlinie darunter. Hover: rote 2-px-Linie wächst von links, Pfeil 3 px weiter und rot.
Keine Box, kein Glow. Fokus: klare Kontur. Varianten:
.tlink--cta eigenständige Sekundäraktion (neben oder unter einem Primärbutton): 1rem, Trefferfläche ≥ 44 px ohne die Linie zu verschieben
.tlink--down Pfeil nach unten (Sprung innerhalb der Seite), Hover-Versatz vertikal
Markup: Alle Referenzen ansehen */
.tlink { position: relative; display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--text); padding-block: .4rem; background: linear-gradient(var(--red), var(--red)) 0 100% / 0 2px no-repeat, linear-gradient(var(--line-3), var(--line-3)) 0 100% / 100% 1px no-repeat; transition: background-size var(--t-mid) var(--ease); }
.tlink:hover { background-size: 100% 2px, 100% 1px; }
.tlink svg { flex: none; width: .9rem; height: .9rem; transition: transform var(--t-mid) var(--ease), color var(--t-mid) var(--ease); }
.tlink:hover svg { transform: translateX(3px); color: var(--red-text); }
.tlink:hover svg.is-ext { transform: translate(2px, -2px); }
.tlink--down:hover svg { transform: translateY(3px); }
.tlink:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 4px; }
.tlink--cta { font-size: 1rem; letter-spacing: -.01em; line-height: 1.5; }
.tlink--cta::before { content: ""; position: absolute; inset: -.375rem -.25rem; }
/* Transparente Konturaktion (z. B. „Projekt ansehen“ in den Referenzen): gleiche Form wie .btn, ohne Fläche,
Haarlinie als Kontur, Pfeil-Kachel ebenfalls nur Kontur. Hover: Kontur heller, Pfeil rot und 3 px weiter. Kein Glow.
Markup: Projekt ansehen */
.btn--line { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-3); }
.btn--line .btn__k { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--line:hover { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 248, 238, .42); }
.btn--line:hover .btn__k { background: transparent; color: var(--red-text); }
/* Chip: Merkmale, Tags */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .7rem; border-radius: var(--r-sm); background: var(--surface-2); box-shadow: var(--ring); font-size: var(--fs-small); color: var(--text); }
.chip svg { width: 15px; height: 15px; opacity: .8; }
/* Platzhalter: in der Internal QA Preview immer sichtbar markiert (Sandton, nicht rot, nicht grün).
In der Founder Design Preview ausgeblendet (siehe „Vorschau-Modi“ unten). */
.ph-tag { font-style: normal; display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .55rem; border-radius: var(--r-xs); font-size: .75rem; font-weight: 600; letter-spacing: .01em; line-height: 1.3; color: #efd9ae; background: rgba(28, 24, 18, .86); box-shadow: inset 0 0 0 1px rgba(239, 217, 174, .3); }
.ph-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px dashed currentColor; flex: none; }
/* Ziel folgt (Seite existiert noch nicht) */
.is-todo { text-decoration: underline dashed rgba(239, 217, 174, .5); text-underline-offset: 4px; }
/* Bewertungszeile (Inhalt fix: 5,0 · 56 Bewertungen, davon 31 auf ProvenExpert und 25 auf Google).
Sterne in Rot, ohne Glow. */
.stars-line { display: inline-grid; gap: .2rem; color: var(--text); }
.stars-line__row { display: inline-flex; align-items: center; gap: .65rem; font-size: .9375rem; }
.stars-line__row b { font-weight: 650; }
.stars-line__stars { width: 5.5rem; color: var(--red); }
.stars-line__src { font-size: var(--fs-meta); color: var(--text-2); transition: color var(--t-fast); }
.stars-line:hover .stars-line__src { color: var(--text); }
/* ---------------- Header (Brief Abschnitt 04) ----------------
Gestaltung aus C geschützt: schwebende, gerundete Leiste, Logo + Zusatztext, kompakte Navigation, roter CTA mit
Pfeil-Kachel, solide Fläche statt Glas. Neu: Navigation in Marcels Reihenfolge mit einem Dropdown „Digitale Grundlage“.
Mobil bleibt der Header wie in C (Logo, Erstgespräch, Menü); die Navigation steht im Menü. */
.hdr { position: fixed; inset: calc(.75rem + var(--refbar-off, 0px)) var(--gutter) auto; z-index: 50; max-width: calc(var(--max) - 2 * var(--gutter)); margin-inline: auto; transition: transform var(--t-mid) var(--ease); }
.hdr__in { display: flex; align-items: center; gap: 1.25rem; height: 4.25rem; padding: 0 .6875rem 0 1.375rem; border-radius: var(--r-lg); background: var(--surface-1); box-shadow: var(--ring), var(--shadow-1); transition: box-shadow var(--t-mid) var(--ease), background var(--t-mid) var(--ease); }
.hdr.is-scrolled .hdr__in { background: rgba(13, 12, 11, .8); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--ring-2), var(--shadow-2); }
/* Marcel 15.10: beim Scrollen transparenter Blur (Grundton 80 %, 16 px, Haarlinie bleibt); ganz oben unverändert. Ohne backdrop-filter fast deckend. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .hdr.is-scrolled .hdr__in { background: rgba(13, 12, 11, .96); } }
.hdr.is-hidden { transform: translateY(calc(-100% - 1rem)); }
.hdr__logo { display: flex; align-items: center; gap: .9rem; flex: none; min-height: 2.75rem; }
.hdr__logo img { width: 8.5rem; height: auto; }
.hdr__logo small { font-size: .78rem; line-height: 1.3; color: var(--text-2); max-width: 11.5rem; padding-left: .9rem; border-left: 1px solid var(--line-2); }
.hdr__nav { margin-left: auto; }
.hdr__nav ul { display: flex; gap: .125rem; }
.hdr__nav li { position: relative; }
.hdr__nav ul > li > a, .hdr__ddt { position: relative; display: flex; align-items: center; gap: .35rem; padding: .55rem .8rem; border-radius: var(--r-sm); font-size: .9375rem; font-weight: 540; color: var(--text-2); white-space: nowrap; transition: color var(--t-fast), background var(--t-fast); }
.hdr__nav ul > li > a:hover, .hdr__ddt:hover, .hdr__ddt[aria-expanded="true"] { color: var(--text); background: var(--surface-3); }
.hdr__ddt svg { width: .75rem; height: .75rem; transition: transform var(--t-mid) var(--ease); }
.hdr__ddt[aria-expanded="true"] svg { transform: rotate(180deg); }
.hdr__nav [aria-current="true"], .hdr__nav [aria-current="page"] { color: var(--text); }
.hdr__nav ul > li > a[aria-current="true"]::after, .hdr__ddt[aria-current="true"]::after,
.hdr__nav ul > li > a[aria-current="page"]::after, .hdr__ddt[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: .2rem; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--red); }
/* Dropdown: solide Fläche, zwei Einträge mit Kurzbeschreibung. Hover/aktiv = globale Aktiv-Markierung (.sel). */
.hdr__menu { position: absolute; left: -.5rem; top: calc(100% + .75rem); width: 21.5rem; padding: .5rem; display: grid; gap: .25rem; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--ring-2), var(--shadow-3); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--t-fast) var(--ease), transform var(--t-mid) var(--ease), visibility 0s linear var(--t-mid); }
.hdr__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.75rem; height: .75rem; } /* Hover-Brücke */
.hdr__dd.is-open .hdr__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hdr__mi { --sel-r: var(--r-md); display: grid; gap: .15rem; padding: .75rem .9rem .8rem 1.1rem; border-radius: var(--r-md); }
.hdr__mi b { font-weight: 600; font-size: .9375rem; color: var(--text); }
.hdr__mi span { font-size: var(--fs-meta); line-height: 1.45; color: var(--text-2); }
.hdr__mi em { font-style: normal; font-size: .6875rem; font-weight: 600; color: #efd9ae; }
.hdr__mi:hover, .hdr__mi:focus-visible { transform: none; }
.hdr__cta { flex: none; margin-left: .5rem; }
.hdr__cta-m { display: none; }
.burger { display: none; flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--r-sm); position: relative; }
.burger:hover { background: var(--surface-3); }
.burger i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--text); transition: transform var(--t-mid) var(--ease); }
.burger i:nth-child(1) { top: 17px; } .burger i:nth-child(2) { top: 26px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
.mnav { margin-top: .5rem; padding: .75rem 1rem 1rem; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--ring-2), var(--shadow-3); max-height: calc(100svh - 5rem); overflow-y: auto; }
.mnav nav { display: grid; margin-bottom: 1rem; }
.mnav nav > a, .mnav__sub a { display: block; padding: .8rem .25rem; font-size: 1.1875rem; font-weight: 560; letter-spacing: -.015em; border-bottom: 1px solid var(--line); }
.mnav__g { padding: .8rem .25rem .35rem; font-size: 1.1875rem; font-weight: 560; letter-spacing: -.015em; }
.mnav__sub a { padding: .6rem .25rem .6rem 1rem; font-size: 1rem; font-weight: 540; color: var(--text-2); }
.mnav__sub li:first-child a { box-shadow: inset 0 1px 0 var(--line); }
.mnav__qa { margin-top: .75rem; font-size: .75rem; color: #efd9ae; }
.mnav a[aria-current="page"] { color: var(--text); }
.mnav a[aria-current="page"]::after { content: ""; display: inline-block; width: 4px; height: 4px; margin-left: .6rem; border-radius: 50%; background: var(--red); vertical-align: middle; }
/* Zusatztext am Logo nur, solange Navigation und CTA ruhig Platz haben */
@media (max-width: 1379px) { .hdr__logo small { display: none; } }
@media (max-width: 1099px) { .hdr__nav ul > li > a, .hdr__ddt { padding-inline: .6rem; font-size: .875rem; } .hdr__in { gap: .75rem; } }
@media (max-width: 1023px) {
.hdr { inset-inline: .625rem; top: calc(.625rem + var(--refbar-off, 0px)); }
.hdr__nav, .hdr__cta { display: none; }
.hdr__cta-m { display: inline-flex; margin-left: auto; }
.burger { display: block; }
.hdr__in { height: 3.5rem; gap: .5rem; padding: 0 .375rem 0 1rem; border-radius: 16px; }
.hdr__logo img { width: 7.25rem; }
}
@media (max-width: 379px) { .hdr__logo img { width: 6.5rem; } }
/* Pfeil-Kachel bleibt bis 360 px; erst darunter fehlt der Platz */
@media (max-width: 359px) { .hdr__cta-m .btn__k { display: none; } .hdr__cta-m { padding-right: .9rem; } }
@media (min-width: 1024px) { .mnav { display: none; } }
/* Bare-Variante für Seiten ohne Hauptnavigation (Kontaktseite): dieselbe Leiste, rechts ein freier Platz (.hdr__slot),
den die Seite selbst füllt (Kontakt: persönlicher Ansprechpartner). Steht oben, nicht schwebend. */
.hdr--bare { position: relative; inset: auto; margin: .75rem var(--gutter) 0; max-width: calc(var(--max) - 2 * var(--gutter)); }
.hdr__slot { margin-left: auto; display: flex; align-items: center; min-width: 0; }
@media (min-width: 1024px) { .hdr--bare { margin-inline: auto; width: calc(100% - 2 * var(--gutter)); } }
@media (max-width: 1023px) { .hdr--bare { margin: .625rem .625rem 0; } }
/* ---------------- Bewegung: Ankommen ----------------
[data-rise]: Element kommt 16 px von unten, 0,7 s. Kurz und ruhig. Stufen per --d (ms). */
.js [data-rise] { opacity: 0; transform: translateY(16px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.js [data-rise].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
.js [data-rise] { opacity: 1; transform: none; }
}
/* ---------------- Vorschau-Modi (Brief Abschnitt 24) ----------------
Internal QA Preview (Standard): alle offenen Inhalte sichtbar markiert.
Founder Design Preview: Seite so, wie sie später wirken soll; Entwicklungslabels aus der Komposition genommen.
Ausblenden ist KEINE Freigabe: offene Inhalte bleiben Platzhalter, Ziele ohne Seite springen weiterhin nicht (data-ph),
die Liste der offenen Inhalte führt die QA-Ansicht und das Gate.
Markierungen, die alle Bereiche verwenden:
.ph-tag Label „Platzhalter …“ QA: sichtbar Founder: ausgeblendet
.qa-only beliebiger interner Hinweis / Notiz QA: sichtbar Founder: ausgeblendet
.founder-only Ersatzdarstellung nur für die Designansicht QA: ausgeblendet Founder: sichtbar
.is-todo Ziel folgt (gestrichelt) QA: gestrichelt Founder: normaler Link-Look
.media-ph Medien-Platzhalter in der echten Medienfläche QA: mit Text Founder: ruhige Fläche, nur Symbol
[data-ph] Link ohne Zielseite: springt in beiden Modi nicht, zeigt kurz „Diese Seite folgt.“ (base.js)
.proto Prototyp-Fußnote QA: sichtbar Founder: ausgeblendet */
.proto { font-size: .75rem; color: var(--text-3); }
.founder-only { display: none !important; }
[data-preview="founder"] .founder-only { display: revert !important; }
[data-preview="founder"] .ph-tag, [data-preview="founder"] .qa-only, [data-preview="founder"] .proto { display: none !important; }
[data-preview="founder"] .is-todo { text-decoration: none; }
[data-preview="founder"] .media-ph > :not(svg) { display: none; }
[data-preview="founder"] .media-ph { background: var(--surface-2); }
[data-preview="founder"] .media-ph svg { opacity: .55; }
/* Moduskennung der QA-Ansicht (nur QA, oben nicht im Weg: unten links, klein) und Hinweis bei Zielen ohne Seite */
.pv-chip { position: fixed; left: .5rem; bottom: .5rem; z-index: 60; padding: .3rem .55rem; border-radius: var(--r-xs); font-size: .75rem; font-weight: 600; letter-spacing: .01em; color: #efd9ae; background: rgba(28, 24, 18, .92); box-shadow: inset 0 0 0 1px rgba(239, 217, 174, .3); pointer-events: none; }
[data-preview="founder"] .pv-chip { display: none; }
@media (max-width: 767px) { .pv-chip span { display: none; } }
.pv-toast { position: fixed; left: 50%; bottom: 1.25rem; z-index: 70; transform: translate(-50%, .5rem); opacity: 0; padding: .6rem .9rem; border-radius: var(--r-sm); background: var(--surface-3); box-shadow: var(--ring-2), var(--shadow-2); color: var(--text); font-size: var(--fs-small); pointer-events: none; transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.pv-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* Hinweisleiste oben (.refbar): angefangene Anfrage (base.js) und Referrer-Banner vom Kunden-Badge. Immer höchstens eine.
Schlanke Zeile über dem schwebenden Header, scrollt mit der Seite weg (--refbar-off schiebt den Header mit).
Fläche surface-1, Haarlinie, Rot nur im Link. */
.refbar { position: relative; z-index: 51; background: var(--surface-1); border-bottom: 1px solid var(--line); }
.refbar__in { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: 1.25rem; row-gap: .2rem; min-height: 2.875rem; max-width: var(--max); margin-inline: auto; padding: .55rem 3.5rem; font-size: .875rem; line-height: 1.4; color: var(--text-2); text-align: center; }
.refbar__in b { font-weight: 600; color: var(--text); }
.refbar--anfrage .refbar__in > span:first-child { color: var(--text); }
.refbar--anfrage .refbar__t2 { color: var(--text-2); }
.refbar__go { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--red-text); white-space: nowrap; }
.refbar__go svg { width: .8rem; height: .8rem; transition: transform var(--t-fast) var(--ease); }
.refbar__go:hover svg, .refbar__go:focus-visible svg { transform: translateX(2px); }
.refbar__x { position: absolute; right: max(.5rem, calc(var(--gutter) - .75rem)); top: 50%; width: 2.25rem; height: 2.25rem; margin-top: -1.125rem; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--text-3); transition: color var(--t-fast), background var(--t-fast); }
.refbar__x:hover, .refbar__x:focus-visible { color: var(--text); background: var(--surface-3); }
.refbar__x svg { width: .75rem; height: .75rem; }
@media (max-width: 640px) {
.refbar__in { padding: .6rem 3rem .6rem var(--gutter); justify-content: flex-start; text-align: left; font-size: .8125rem; }
.refbar__t2 { display: none; }
}
/* Exit-Hinweis (base.js, Marcel 25.10): kleine Karte unten rechts, nur Desktop. Kein Overlay, kein Abdunkeln.
Erscheint ruhig von unten (Bewegung reduziert: ohne Weg). */
.exitcard { position: fixed; right: var(--gutter); bottom: 1.5rem; z-index: 60; display: grid; gap: .45rem; justify-items: start; width: min(22rem, calc(100vw - 2 * var(--gutter))); padding: 1.25rem 1.35rem 1.35rem; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--ring-2), var(--shadow-3); opacity: 0; transform: translateY(12px); transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.exitcard.is-on { opacity: 1; transform: none; }
.exitcard__e { font-size: var(--fs-meta); font-weight: 600; color: var(--red-text); }
.exitcard__h { padding-right: 2rem; font-size: 1.1875rem; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: var(--text); }
.exitcard__t { font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }
.exitcard__go { margin-top: .5rem; }
.exitcard__x { position: absolute; top: .75rem; right: .75rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-sm); color: var(--text-3); transition: color var(--t-fast), background var(--t-fast); }
.exitcard__x:hover { color: var(--text); background: var(--surface-3); }
.exitcard__x svg { width: .75rem; height: .75rem; }
@media (prefers-reduced-motion: reduce) { .exitcard { transform: none; } }
@media (max-width: 1023px) { .exitcard { display: none; } }
/* Eigene Video-Steuerung (js/ton.js, CF.spieler) für Hero, Danke-Seite und Kundenfilme */
.sp { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; z-index: 6; display: flex; align-items: center; gap: .375rem; padding: .3rem; border-radius: var(--r-sm); background: var(--scrim); box-shadow: inset 0 0 0 1px var(--line-2); transition: opacity var(--t-mid); }
.sp[hidden] { display: none; }
.sp--weg { opacity: 0; pointer-events: none; }
.sp-ruhe, .sp-ruhe video { cursor: none; }
.sp .ctl { flex: none; width: 2.5rem; height: 2.5rem; background: transparent; box-shadow: none; }
.sp .ctl:hover { background: var(--surface-4); }
.sp__track { position: relative; flex: 1; align-self: stretch; display: flex; align-items: center; margin: 0 .5rem; cursor: pointer; touch-action: none; }
.sp__track::before { content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
.sp__track i { position: relative; display: block; width: 100%; height: 3px; border-radius: 2px; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--pr, 0)); }
.sp__track:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 2px; }
.sp__t { flex: none; min-width: 6.25em; text-align: center; font-size: .8125rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
:fullscreen .sp { left: 1.5rem; right: 1.5rem; bottom: 1.5rem; }
:fullscreen video { width: 100%; height: 100%; object-fit: contain; background: #000; }
@media (max-width: 600px) { .sp { left: .5rem; right: .5rem; bottom: .5rem; } .sp__t { display: none; } }