/* ==========================================================================
ki-kompass.dev — style.css
Markenwelt "R-D Tiefgrün & Salbei", eingefroren 2026-08-20 (docs/SPEC.md §3)
Kein Framework, kein Build. Tokens exakt nach SPEC §3.1 — nicht ändern.
========================================================================== */
/* --------------------------------------------------------------------------
0. Schriften — lokal, woff2, OFL (SPEC §3.4 / T03). Kein externer Request.
Quellen: floriankarsten/space-grotesk Release 2.0.0,
marcologous/hanken-grotesk (offizielles Repo). Lizenzen: assets/fonts/OFL-*.txt
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Space Grotesk';
src: url('../fonts/SpaceGrotesk-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Hanken Grotesk';
src: url('../fonts/HankenGrotesk-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Hanken Grotesk';
src: url('../fonts/HankenGrotesk-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Hanken Grotesk';
src: url('../fonts/HankenGrotesk-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Hanken Grotesk';
src: url('../fonts/HankenGrotesk-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* --------------------------------------------------------------------------
1. Design-Tokens
-------------------------------------------------------------------------- */
:root {
/* Farbwelt R-D · 13 Tokens (SPEC §3.1) */
--tanne-950: #0A261E; /* Hero-/CTA-/Footer-Grund; CTA-Fläche auf Hell */
--tanne-900: #163129; /* Projekte-Block, Karten auf Dunkel */
--tanne-700: #2D463E; /* Linien, Hover-Flächen auf Dunkel */
--tinte: #1A362D; /* Text auf Hell */
--offwhite: #F4F6F4; /* Helle Grundfläche; Button-Text auf Grün */
--nebel: #E9ECE8; /* Karten auf Hell */
--beige: #D3CBC0; /* Ruhige Wechselfläche */
--salbei-hell: #ABC2B7; /* Fließtext auf Dunkel */
--salbei: #83A695; /* Glyphe, Eyebrows, Akzente auf Dunkel */
--salbei-tief: #476F62; /* Links/Auszeichnung auf Hell */
--salbei-deko: #67897A; /* Deko-Punkte (keine Textrolle) */
--graugruen: #5C6D65; /* Nebentexte auf Hell */
--graugruen-d: #8B9B93; /* Nebentexte auf Dunkel */
/* Typografie (SPEC §3.4) — @font-face folgt in T03 */
--font-display: 'Space Grotesk', 'Futura', 'Trebuchet MS', sans-serif;
--font-text: 'Hanken Grotesk', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
/* Typo-Skala (fluid) */
--fs-xs: 0.8125rem; /* 13px — Kleinstes, nur UI */
--fs-s: 0.9375rem; /* 15px — Meta, Eyebrows */
--fs-base: 1.0625rem; /* 17px — Fließtext */
--fs-m: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); /* Lead/Intro */
--fs-l: clamp(1.3125rem, 1.15rem + 0.8vw, 1.625rem); /* H3 */
--fs-xl: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem); /* H2 */
--fs-xxl: clamp(2.125rem, 1.6rem + 2.8vw, 3.5rem); /* H1 */
--lh-text: 1.6;
--lh-head: 1.15;
/* Spacing-Skala */
--raum-1: 0.25rem;
--raum-2: 0.5rem;
--raum-3: 0.75rem;
--raum-4: 1rem;
--raum-5: 1.5rem;
--raum-6: 2rem;
--raum-7: 3rem;
--raum-8: 4.5rem;
--raum-9: 7rem;
--sektion-y: clamp(4rem, 3rem + 5vw, 7.5rem); /* vertikaler Sektionsabstand */
/* Container */
--breite-inhalt: 80rem; /* 1280px — Standardsektion (Maxim-Feedback 20.08.: breiter) */
--breite-text: 42rem; /* 672px — Lesetext, ~75 Zeichen */
--seitenrand: clamp(1.25rem, 4vw, 2.5rem);
/* Radius (SPEC/T02: 6 und 10 px) */
--radius-s: 6px;
--radius-m: 10px;
/* Semantische Flächen-Tokens — Default: helle Fläche.
Flächenklassen unten überschreiben sie. */
--flaeche: var(--offwhite);
--text: var(--tinte);
--text-neben: var(--graugruen);
--akzent: var(--salbei-tief);
--linie: var(--nebel);
--fokus: var(--salbei-tief);
}
/* --------------------------------------------------------------------------
2. Basis-Reset
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: auto; /* smooth nur als Einschalter, siehe Motion-Block */
}
body {
font-family: var(--font-text);
font-size: var(--fs-base);
font-weight: 400;
line-height: var(--lh-text);
color: var(--text);
background-color: var(--flaeche);
text-rendering: optimizeLegibility;
}
img,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 500;
line-height: var(--lh-head);
letter-spacing: -0.015em;
color: var(--text);
text-wrap: balance;
}
h1 { font-size: var(--fs-xxl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-l); letter-spacing: -0.01em; }
h4 { font-size: var(--fs-m); letter-spacing: -0.01em; }
p, ul, ol {
max-width: var(--breite-text);
}
a {
color: var(--akzent);
text-decoration: underline;
text-underline-offset: 0.15em;
}
a:hover {
text-decoration-thickness: 2px;
}
::selection {
background-color: var(--salbei);
color: var(--tanne-950);
}
/* --------------------------------------------------------------------------
3. Fokus-Stile (sichtbarer 2-px-Ring, T02)
-------------------------------------------------------------------------- */
:focus-visible {
outline: 2px solid var(--fokus);
outline-offset: 3px;
border-radius: 2px;
}
/* --------------------------------------------------------------------------
4. Sektions-Wechselflächen
Jede Klasse setzt Fläche + passende Text-/Fokus-Tokens (Kontraste SPEC §3.1)
-------------------------------------------------------------------------- */
.flaeche-tanne {
--flaeche: var(--tanne-950);
--text: var(--offwhite); /* 14,8:1 */
--text-lauf: var(--salbei-hell); /* Fließtext auf Dunkel, 8,5:1 */
--text-neben: var(--graugruen-d); /* 5,5:1 */
--akzent: var(--salbei); /* 6,0:1 */
--linie: var(--tanne-700);
--fokus: var(--salbei);
background-color: var(--flaeche);
color: var(--text-lauf);
}
.flaeche-tanne-900 {
--flaeche: var(--tanne-900);
--text: var(--offwhite);
--text-lauf: var(--salbei-hell);
--text-neben: var(--graugruen-d);
--akzent: var(--salbei);
--linie: var(--tanne-700);
--fokus: var(--salbei);
background-color: var(--flaeche);
color: var(--text-lauf);
}
.flaeche-offwhite {
--flaeche: var(--offwhite);
--text: var(--tinte); /* 12:1 */
--text-lauf: var(--tinte);
--text-neben: var(--graugruen); /* 5,0:1 */
--akzent: var(--salbei-tief); /* 5,2:1 */
--linie: var(--nebel);
--fokus: var(--salbei-tief);
background-color: var(--flaeche);
color: var(--text-lauf);
}
.flaeche-nebel {
--flaeche: var(--nebel);
--text: var(--tinte);
--text-lauf: var(--tinte);
--text-neben: var(--graugruen);
--akzent: var(--salbei-tief);
--linie: var(--beige);
--fokus: var(--salbei-tief);
background-color: var(--flaeche);
color: var(--text-lauf);
}
.flaeche-beige {
--flaeche: var(--beige);
--text: var(--tinte); /* 8,1:1 */
--text-lauf: var(--tinte);
--text-neben: var(--graugruen);
--akzent: var(--tanne-700); /* 6,3:1 (CLV; --salbei-tief kam auf Beige nur auf 3,5:1) */
--linie: var(--offwhite);
--fokus: var(--salbei-tief);
background-color: var(--flaeche);
color: var(--text-lauf);
}
/* Auf dunklen Flächen bleiben Überschriften Off-White */
.flaeche-tanne h1, .flaeche-tanne h2, .flaeche-tanne h3, .flaeche-tanne h4,
.flaeche-tanne-900 h1, .flaeche-tanne-900 h2, .flaeche-tanne-900 h3, .flaeche-tanne-900 h4 {
color: var(--text);
}
/* --------------------------------------------------------------------------
5. Layout-Helfer
-------------------------------------------------------------------------- */
.container {
max-width: var(--breite-inhalt);
margin-inline: auto;
padding-inline: var(--seitenrand);
}
.sektion {
padding-block: var(--sektion-y);
}
/* Eyebrow — Vorzeile über Headlines (auf Dunkel: --salbei, auf Hell: --salbei-tief) */
.eyebrow {
font-family: var(--font-display);
font-size: var(--fs-s);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--akzent);
}
/* Akzentstrich unter jedem Sektions-Label (Exposé-Muster, Maxim 20.08.) */
.eyebrow::after {
content: "";
display: block;
width: 2.5rem;
height: 2px;
margin-top: var(--raum-2);
background-color: var(--akzent);
}
/* Nebentext: auf Hell unter 18 px immer --graugruen (SPEC §3.1 Regel) */
.nebentext {
font-size: var(--fs-s);
color: var(--text-neben);
}
/* --------------------------------------------------------------------------
6. Buttons / CTAs (SPEC §3.1: kein Buntakzent)
Auf Hell: --tanne-950-Fläche · auf Dunkel: --offwhite-Fläche
-------------------------------------------------------------------------- */
.btn {
position: relative;
overflow: hidden;
display: inline-block;
text-align: center; /* gestreckte Buttons (Hero-Raster, Formular) zentrieren
den Text (Pass CXXXVIII); frei bemessene sind symmetrisch */
font-family: var(--font-display);
font-size: var(--fs-base);
font-weight: 500;
line-height: 1;
padding: 0.9em 1.6em;
border: 1px solid transparent;
border-radius: var(--radius-s);
text-decoration: none;
cursor: pointer;
background-color: var(--tanne-950);
color: var(--offwhite);
}
.flaeche-tanne .btn,
.flaeche-tanne-900 .btn {
background-color: var(--offwhite);
color: var(--tanne-950);
}
.btn-outline {
background-color: transparent;
color: var(--tinte);
border-color: var(--tinte);
}
.flaeche-tanne .btn-outline,
.flaeche-tanne-900 .btn-outline {
background-color: transparent;
color: var(--offwhite);
border-color: var(--salbei);
}
/* Glanz-Streifen auf dem primären CTA: Träger ist im Grundzustand unsichtbar,
bewegt wird ausschließlich im Motion-Block (reine Dekoration). */
.btn::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
background: linear-gradient(105deg,
transparent 38%,
rgba(244, 246, 244, 0.55) 50%,
transparent 62%);
}
/* Ein Glanz für alle Buttons (Pass LXXII, Maxim): der Off-White-Streifen oben
gilt überall, auch auf hellen Buttons über dunklen Flächen. Die frühere
Sonderregel (salbeigrün bzw. silbergrau auf Dunkel) ist entfernt. */
.btn-outline::after {
display: none;
}
/* Kein Glanz-Sweep auf dem Header-CTA (Maxim 21.08.): Die Leiste ist auf
jeder Seite dauerhaft sichtbar, ein Dauerblitzen dort lenkt vom Inhalt ab.
Der Sweep bleibt auf dem Hero- und dem Final-CTA. */
.site-header .nav-cta::after {
display: none;
}
/* --------------------------------------------------------------------------
7. Karten
-------------------------------------------------------------------------- */
.karte {
background-color: var(--nebel);
border-radius: var(--radius-m);
padding: var(--raum-6);
}
.flaeche-tanne .karte,
.flaeche-tanne-900 .karte {
background-color: var(--tanne-900);
}
.flaeche-tanne-900 .karte {
border: 1px solid var(--tanne-700);
}
/* --------------------------------------------------------------------------
8. Skip-Link & Screenreader-Helfer
-------------------------------------------------------------------------- */
.skip-link {
position: absolute;
left: -9999px;
top: var(--raum-2);
z-index: 100;
background-color: var(--offwhite);
color: var(--tinte);
padding: var(--raum-2) var(--raum-4);
border-radius: var(--radius-s);
text-decoration: none;
font-weight: 600;
}
.skip-link:focus {
left: var(--raum-2);
}
/* Anker-Ziele nicht unter dem sticky Header verschwinden lassen */
[id] {
scroll-margin-top: 6.5rem;
}
/* Sektionen bringen ihren eigenen Innenabstand mit (--sektion-y). Der Anker
rechnet ihn heraus, damit nach dem Sprung unter der Leiste immer derselbe
Abstand steht statt 140px auf Desktop, 118px auf Laptop und 88px auf Mobil
(Maxim 21.08.: oben blieb unnoetig Platz stehen, der Abschnitt passte
dadurch nicht mehr komplett ins Bild).
7,75rem = Leistenhoehe 5,25rem (CLIV) + gewuenschter Abstand 2,5rem.
Der Wert wird auf schmalen Sektionen positiv, auf breiten negativ - das ist
gewollt: negative scroll-margin schiebt den unsichtbaren Innenabstand unter
die Leiste, ohne Inhalt zu verdecken. */
.sektion[id] {
scroll-margin-top: calc(7.75rem - var(--sektion-y));
}
/* --------------------------------------------------------------------------
9. Header & Navigation
Mobil ohne JS: details/summary; Desktop: inline Liste.
-------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
/* Fläche kommt seit CLV aus der flaeche-Klasse (beige, SPEC ㉚);
vorher fest --tanne-950 */
background-color: var(--flaeche);
}
/* Am Seitenanfang (nur mit Hero, per JS): Leiste schwebt transparent
ueber dem Hero-Verlauf */
.site-header.durchsichtig {
background-color: transparent;
}
/* Beim Scrollen (per JS): abgedunkelte, verwischte Leiste */
.site-header.gescrollt {
background-color: rgba(211, 203, 192, 0.88); /* --beige mit Alpha (CLV) */
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
/* Hero beginnt UNTER der Leiste, damit der Verlauf durchscheint */
.hero {
margin-top: -5.25rem;
padding-top: calc(var(--sektion-y) + 5.25rem);
}
.site-header .container {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--raum-4);
min-height: 5.25rem; /* 4,25rem → 5,25rem (CLIV, Feedback Angelique: Kopfleiste dominanter) */
}
.site-header .lockup {
justify-self: start;
}
.site-header .hauptnav {
justify-self: center;
}
.site-header .nav-cta {
justify-self: end;
/* Einzeilig bleiben (Pass LXVI): mit "Kostenlose Potenzial-Analyse" brach der
Knopf bei 1024 px um, weil die rechte 1fr-Spalte schmaler als der Text war.
nowrap hebt die Spalte auf Textbreite, die Nav rückt dort minimal nach links. */
white-space: nowrap;
}
/* Lockup: F1-Glyphe (12 Keile) + Wortmarke W1 */
.lockup {
display: inline-flex;
align-items: center;
gap: 0.4rem; /* enger Lockup-Abstand (Maxim-Entscheidung 20.08.) */
text-decoration: none;
color: var(--text); /* folgt der Fläche (CLV): Kopf beige → Tinte, Fuß dunkel → Off-White */
}
.lockup svg {
width: 48px; /* 40px → 48px (CLIV) */
height: 48px;
color: var(--text); /* Lockup einfarbig in der Flächen-Textfarbe (CLV; vorher fest Off-White) */
flex: none;
}
.lockup .wortmarke {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.4375rem; /* 19px → 23px (CLIV) */
letter-spacing: -0.01em; /* W1 klein (SPEC §3.3) */
white-space: nowrap;
}
.hauptnav {
display: flex;
align-items: center;
gap: var(--raum-5);
}
.nav-liste {
display: flex;
align-items: center;
gap: var(--raum-4);
list-style: none;
padding: 0;
margin: 0;
}
.nav-liste a {
font-size: var(--fs-base); /* --fs-s → --fs-base (CLIV) */
font-weight: 500;
color: var(--tanne-700); /* auf Beige 6,3:1 (CLV; vorher --salbei-hell auf Dunkel) */
text-decoration: none;
}
/* Hover in der Desktop-Navigation (Pass LXIX): Linie als ::after statt
text-decoration, damit sie animierbar ist. Ohne Bewegung erscheint sie sofort. */
.nav-desktop a {
position: relative;
display: inline-block;
/* symmetrisch, sonst rückt das Wort um 1 px nach oben (gemessen) */
padding-block: 0.2em;
}
.nav-desktop a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background-color: var(--text); /* Flächen-Textfarbe (CLV) */
transform: scaleX(0);
transform-origin: left center;
}
.nav-liste a:hover,
.nav-liste a:focus-visible,
.nav-desktop a.ist-aktuell {
color: var(--text); /* dunkelt auf Beige ab statt aufzuhellen (CLV) */
}
.nav-desktop a:hover::after,
.nav-desktop a:focus-visible::after,
.nav-desktop a.ist-aktuell::after {
transform: scaleX(1);
}
.btn-nav {
padding: 0.6em 1.1em;
font-size: var(--fs-s); /* bleibt auf der Button-Stufe (CLIV: nur Nav-Texte auf --fs-base — mit CTA auf --fs-base blieben am 76rem-Umbruch 6 px Luft zum CTA, gemessen) */
}
/* Mobil-Menue (details/summary, kein JS noetig) */
.nav-mobil {
display: none;
position: relative;
}
.nav-mobil > summary {
list-style: none;
cursor: pointer;
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-s);
color: var(--text); /* CLV: Tinte auf Beige */
border: 1px solid var(--tanne-700);
border-radius: var(--radius-s);
padding: 0.55em 1em;
}
.nav-mobil > summary::-webkit-details-marker {
display: none;
}
.nav-mobil[open] > summary {
background-color: var(--offwhite); /* CLV: heller Druckzustand statt Tanne-700 */
}
.nav-mobil .nav-liste {
position: absolute;
right: 0;
top: calc(100% + 0.5rem);
flex-direction: column;
align-items: stretch;
gap: 0;
min-width: 14rem;
background-color: var(--offwhite); /* CLV: helles Panel statt Tanne-900 */
border: 1px solid var(--salbei-tief); /* sichtbare Linie auf Hell (Regel 2) */
border-radius: var(--radius-m);
padding: var(--raum-2);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); /* CLV: weicher auf hellem Grund */
}
.nav-mobil .nav-liste a {
display: block;
padding: var(--raum-3) var(--raum-4);
border-radius: var(--radius-s);
}
.nav-mobil .nav-liste a:hover {
background-color: var(--nebel); /* CLV: heller Hover statt Tanne-700 */
text-decoration: none;
}
.nav-mobil .btn-nav {
margin-top: var(--raum-2);
text-align: center;
}
/* Kopfleisten-Umbruch: 63,9rem → 65,9rem (Pass LXVI, längerer CTA) → 68,9rem
(Pass LXXIX, siebter Nav-Punkt „Blog": bei 1056 px Luft -7 px zum CTA)
→ 72,9rem (Pass CLIV, Nav-Schrift auf --fs-base: Luft zum CTA erst ab
1168 px wieder ≥ 15 px, gemessen per iframe-Reihe). */
@media (max-width: 72.9rem) {
.site-header .container {
grid-template-columns: 1fr auto;
}
.site-header .nav-cta {
display: none; /* Kontakt-Weg steckt im Mobil-Menü */
}
.hauptnav .nav-desktop {
display: none;
}
.nav-mobil {
display: block;
}
}
/* --------------------------------------------------------------------------
10. Footer & Final-CTA
-------------------------------------------------------------------------- */
.final-cta {
text-align: center;
}
/* Letzter Bildschirm durchgehend dunkel (Pass CVII): Final-CTA und Fuß waren
zusammen 703 px; auf höheren Fenstern blieb am Seitenende ein Streifen der
Blog-Fläche stehen. Auf Desktop füllt der CTA deshalb mindestens
Fensterhöhe minus Fuß (Fuß dort 297 px ≈ 18.5rem), Inhalt mittig; Deckel
bei 52rem, damit sehr hohe Monitore keine leere Fläche bekommen. */
@media (min-width: 76rem) {
.final-cta {
min-height: min(calc(100svh - 18.5rem), 52rem);
display: grid;
align-content: center;
}
}
.final-cta .container > * {
margin-inline: auto;
}
.final-ctas {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--raum-4);
margin-top: var(--raum-6);
}
.site-footer {
/* Trennlinie zum Final-CTA entfernt (Pass LXX): beide Flächen sind tanne-950,
die Linie wirkte wie ein Fremdkörper. Die innere Linie über dem Copyright bleibt. */
padding-block: var(--raum-6);
font-size: var(--fs-s);
}
.site-footer .container {
display: flex;
flex-wrap: wrap;
align-items: flex-start; /* Pass CII: Rechtliches-Spalte beginnt oben am Lockup */
justify-content: space-between;
gap: var(--raum-4);
}
.site-footer a {
color: var(--salbei-hell);
}
.site-footer a:hover {
color: var(--offwhite);
}
/* Wortmarke im Fuß in Off-White wie im Kopf (Pass LXX); die Link-Farbe des
Fußes darf das Lockup nicht einfärben. */
.site-footer .lockup {
color: var(--offwhite);
}
.footer-tagline {
margin-top: var(--raum-3);
max-width: 40ch; /* vierzeilig bei 15 px, wie das Vorbild (LXXXVII) */
font-size: var(--fs-s);
line-height: 1.6;
color: var(--graugruen-d);
}
/* Kontaktzeile im Fuß (Pass LXXXVII): Mail und LinkedIn mit Kontur-Icons in
derselben Sprache wie die Kontakt-Sektion. */
/* Seit Pass CIV eine Spalte „Kontakt" neben „Rechtliches": Telefon, Mail,
LinkedIn gestapelt (Adresse in CV wieder raus), Icons wie in der Kontakt-Sektion. */
.footer-kontakt {
display: grid;
gap: var(--raum-2);
list-style: none;
padding: 0;
margin: 0;
font-size: var(--fs-s);
}
.footer-kontakt a {
display: inline-flex;
align-items: center;
gap: 0.5em;
text-decoration: none;
}
.footer-spalten {
display: flex;
gap: var(--raum-7);
}
.footer-kontakt a:hover span,
.footer-kontakt a:focus-visible span {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.footer-kontakt svg {
width: 18px;
height: 18px;
flex: none;
color: var(--salbei);
}
/* Rechtliches als Spalte (Pass CII): Eyebrow in der Sprache der Sektions-
Eyebrows (Display-Schrift, Versalien), auf dunklem Grund in --salbei wie im
Hero; Links gestapelt statt in einer Reihe. */
.footer-eyebrow {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--salbei);
margin: 0 0 var(--raum-3);
}
/* Akzentstrich wie unter den Sektions-Eyebrows (Pass CIII), auf dunklem Grund
in --salbei wie die Eyebrow-Farbe selbst. */
.footer-eyebrow::after {
content: "";
display: block;
width: 2.5rem;
height: 2px;
margin-top: var(--raum-2);
background-color: var(--salbei);
}
.footer-links {
display: grid;
gap: var(--raum-2);
list-style: none;
padding: 0;
margin: 0;
}
/* Gleiche Zeilenhöhe in beiden Fuß-Spalten (Pass CIX): Kontakt-Einträge waren
durch das 18-px-Icon 28 px hoch, Rechtliches-Einträge 24 px; die Zeilen
liefen je Zeile 4 px auseinander. Jetzt beide 1.75rem, Inhalt mittig. */
.footer-kontakt li,
.footer-links li {
display: flex;
align-items: center;
min-height: 1.75rem;
}
.footer-unten {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--raum-2) var(--raum-5);
margin-top: var(--raum-6);
padding-top: var(--raum-5);
border-top: 1px solid var(--tanne-700);
font-size: var(--fs-xs);
color: var(--graugruen-d);
}
.footer-unten p {
margin: 0;
max-width: none;
}
/* --------------------------------------------------------------------------
11. Hero mit Video (SPEC §4.1.1, seit CXXX Vermerk ㉘; Rose-CSS entfernt in CXLVI)
Grundzustand = Endzustand: Rose steht, Knoten sichtbar. Die Einschwing-
Animation ist ein reiner Einschalter (Block 12).
-------------------------------------------------------------------------- */
/* Der dunkle Radial-Verlauf des Tanne-Heros entfiel mit dem Wechsel auf
Beige (CLV, SPEC ㉚) — die Fläche steht jetzt ruhig. */
.hero .container {
display: grid;
gap: var(--raum-7);
align-items: center;
}
/* Split-Hero (Pass CXXXI): ab 76rem linke Hälfte Text, rechte Hälfte Video,
das absolut bis an den Fensterrand läuft (siehe .hero-video unten). Die
zweite Spalte bleibt als Platzhalter im Fluss. Unter 76rem einspaltig
(Video in voller Breite unter dem Text): Eine zweite Spalte würde neben der
Buttonzeile (Mindestbreite ~585 px) auf 171 px schrumpfen (gemessen 900 px). */
@media (min-width: 76rem) {
/* Hero füllt exakt die Fensterhöhe (CLIV, Feedback Angelique: der Anschnitt
des Tool-Bands am Falz — 28 px bei 812 px Fensterhöhe — soll weg). Inhalt
mittig wie beim Final-CTA (CVII); das absolute Video folgt über bottom: 0. */
.hero {
min-height: 100svh;
display: grid;
align-content: center;
}
.hero .container {
grid-template-columns: 1fr 1fr;
gap: var(--raum-8);
}
}
.hero h1 {
margin-top: var(--raum-4);
max-width: 22ch;
}
.hero .beleg {
margin-top: var(--raum-5);
font-size: var(--fs-m);
max-width: 46ch;
}
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: var(--raum-4);
margin-top: var(--raum-6);
}
/* Hero-Signale (Maxim 21.08.): loest die einzeilige Fussnote ab, die wie
Kleingedrucktes wirkte. Sechs Kurzaussagen mit Haken, zweispaltig, damit
jede Zeile einzeilig bleibt und als Merkmal statt als Rechtshinweis liest. */
.hero-signale {
list-style: none;
padding: 0;
margin: var(--raum-7) 0 0;
display: flex;
flex-wrap: wrap;
gap: var(--raum-4) var(--raum-6);
max-width: 36rem;
}
/* Gemeinsames Raster für Buttons und Signale (Pass LXXVII): ab 54rem werden
beide Listen per display: contents zu Kindern EINES Rasters mit zwei
max-content-Spalten. Spalte 1 ist so breit wie der breitere von Button 1 und
Signal 1, Spalte 2 beginnt deshalb für Button 2 und Signal 2 an derselben
Kante. Darunter bleibt das bisherige Flex-Verhalten (eine Spalte auf Mobil).
Schwelle 40rem: ab dort stehen die Buttons nebeneinander (584 px Rasterbreite
passen ab ~600 px Inhaltsbreite); bei 744 px blieb sonst 11 px Versatz. */
@media (min-width: 40rem) {
.hero-aktion {
display: grid;
grid-template-columns: max-content max-content;
justify-content: start;
column-gap: var(--raum-4);
row-gap: var(--raum-4);
margin-top: var(--raum-6);
}
.hero-aktion .hero-ctas,
.hero-aktion .hero-signale {
display: contents;
}
.hero-aktion .hero-signale li {
flex: none;
}
/* Abstand Buttons → erste Signalzeile wie bisher --raum-7 */
.hero-aktion .hero-signale li:nth-child(-n + 2) {
margin-top: calc(var(--raum-7) - var(--raum-4));
}
}
/* Flex statt Grid: Ein Grid mit fester Spalten-Mindestbreite haette die
Hero-Spalte auf Mobil aufgeblaeht (gemessen: 500px Dokumentbreite bei
390px Viewport). Flex-Items schrumpfen stattdessen auf eine Spalte. */
.hero-signale li {
flex: 1 1 14rem;
position: relative;
padding-left: 1.9rem;
font-size: var(--fs-s);
color: var(--text-lauf); /* folgt der Fläche (CLV): Tinte auf Beige, 8,1:1; vorher fest --salbei-hell */
}
/* Hero-Typo kleiner als die H1-Stufe (Pass CXXXIV; H1-Wert in CXLV auf Maxims
Wunsch von der H2-Stufe auf 2.75rem angehoben — Obergrenze ist seine
Markierung knapp vor der Videokante: die lange Zeile darf sie nicht
erreichen, --fs-xxl täte es). Beleg auf Fließtext, Buttons auf der
Kopfleisten-Stufe (--fs-s wie .btn-nav). Nur im breiten Layout. */
@media (min-width: 76rem) {
.hero h1 {
font-size: 2.5rem; /* zwischen --fs-xl (36px) und --fs-xxl (56px); 40px ist das Maximum, das Maxims Markierung (~43 % Viewport) auch bei 2000px-Fenstern hält (CXLV) */
}
.hero .beleg {
font-size: var(--fs-base);
/* CLIX: zwei gesetzte Zeilen (Satz 1 / Satz 2,
);
46ch bräche Satz 1 (62 Zeichen) vorzeitig um. Schrift bleibt --fs-base. */
max-width: none;
}
.hero .btn {
font-size: var(--fs-s);
}
}
.hero-signale li::before {
content: "\2713";
position: absolute;
left: 0;
/* CLXXV (Maxims Markierung): Kreis-Mitte exakt auf die Zeilenmitte — das
alte top: 0.05em rechnete in der kleineren Haken-Schrift, der Kreis saß
3 px zu hoch gegenüber dem Text (gemessen). Die Signale sind einzeilig
(auch bei 390 px gemessen), darum ist die li-Mitte die Zeilenmitte.
(Ein 1lh-Ansatz scheiterte: lh griffe die eigene line-height 1 ab.) */
top: 50%;
translate: 0 -50%;
width: 1.35em;
height: 1.35em;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(131, 166, 149, 0.18); /* --salbei mit Alpha */
color: var(--akzent); /* folgt der Fläche (CLV): auf Beige --salbei-tief, 3,5:1 */
font-size: 0.85em;
font-weight: 700;
line-height: 1;
}
/* Hero-Video (Pass CXXX/CXXXI, SPEC ㉘). Schmal: 16:9-Kasten unter dem Text.
Ab 76rem: füllt die rechte Fensterhälfte vom Kopfleisten-Ende bis zur
Hero-Unterkante (Maxims Entscheidung CXXXI), Ausschnitt per object-fit,
linke Kante als 1-px-Linie in Tanne-700 (CXXXII). */
.hero {
position: relative;
}
.hero-video {
position: relative;
margin: 0;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--radius-m);
border: 1px solid var(--tanne-700);
background-color: var(--tanne-900);
}
@media (min-width: 76rem) {
.hero-video {
position: absolute;
top: 5.25rem; /* unter der Kopfleiste (Hero-Versatz, CLIV) */
right: 0;
bottom: 0;
left: max(50%, 42rem); /* CLVII revidiert CXXXIV (47 %): die Container-Mitte wächst mit w/2,
die 47-%-Kante nur mit 0,47 w — ab ~1420 px lief der Inhalt unter das
Video (gemessen: −7 px bei 1456, −18 bei 1800). 50 % = Container-Mitte
garantiert konstanten Abstand (halbe Rasterlücke) bei jeder Breite. */
width: auto;
aspect-ratio: auto;
border: 0;
/* Harter Schnitt mit 1-px-Linie in --tanne-700, derselben Linie wie der
Trennstrich des Tool-Bands darunter (Maxim, CXXXII; vorher 8rem-Verlauf). */
border-left: 1px solid var(--tanne-700);
border-radius: 0;
}
}
/* Mobil-Hero (Pass CXLVII, Maxims Auftrag): unter 76rem rückt das Video
zwischen Buttons und Signale und läuft randlos über die volle Breite —
die Schleife bekommt Bühne, die CTAs bleiben über dem Falz. Dafür wird
die display:contents-Kette bis zum Container gezogen und das
LXXVII-Raster unterhalb des Splits zurückgebaut (Buttons und Signale
wieder als Flex-Reihen; der Vertikal-Rhythmus kommt aus den
Element-Margins, deshalb gap 0). */
@media (max-width: 75.9rem) {
.hero .container {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
}
.hero .container > div,
.hero-aktion {
display: contents;
}
.hero-aktion .hero-ctas,
.hero-aktion .hero-signale {
display: flex;
}
.hero-aktion .hero-signale li:nth-child(-n + 2) {
margin-top: 0; /* Raster-Ausgleich aus LXXVII gilt hier nicht mehr */
}
.hero-video {
order: 1;
width: calc(100% + 2 * var(--seitenrand));
margin-inline: calc(-1 * var(--seitenrand));
margin-top: var(--raum-7);
border: 0;
border-radius: 0;
}
.hero-signale {
order: 2;
}
}
.hero-video-film {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Signet-Wasserzeichen (CXLII): die Rose als Sender-Logo oben rechts im
Video, ohne Wortmarke (das Lockup steht in der Kopfleiste). Off-White bei
38 % Deckung, klickt nicht, liegt über dem Film und unter keinem
Bedienelement. Exakt die Lockup-Geometrie (SPEC §3.2, 12 Keile). */
.hero-video-marke {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 1;
width: 2rem;
height: 2rem;
color: var(--offwhite);
opacity: 0.38;
pointer-events: none;
}
/* Scroll-Pfeil (Pass CLX, McKinsey-Muster übersetzt): nur im Split-Hero —
dort schafft min-height: 100svh unten die Bühne; auf Schmal fehlt der
Platz und gescrollt wird ohnehin. Statisch vollständig sichtbar; das
Gleiten und die weiche Ausblendung leben im Motion-Block. */
.hero-pfeil {
display: none;
}
@media (min-width: 76rem) {
.hero-pfeil {
display: block;
position: absolute;
/* Gleiche äußere Flucht wie die Band-Trennlinie (CLIX) — dort sitzt der
Pfeil auch in der McKinsey-Referenz: im äußeren Rand, vor der Textkante. */
left: max(calc((100% - (var(--breite-inhalt) - 2 * var(--seitenrand))) / 2), var(--seitenrand));
bottom: 2.5rem;
color: var(--text);
opacity: 0.85;
}
.hero-pfeil:hover,
.hero-pfeil:focus-visible {
opacity: 1;
}
/* Beim Scrollen verschwindet der Pfeil (Header trägt dann .gescrollt) */
.site-header.gescrollt ~ main .hero-pfeil {
opacity: 0;
pointer-events: none;
}
}
.hero-video-marke svg {
display: block;
width: 100%;
height: 100%;
}
/* Pause-Knopf (WCAG 2.2.2): nur mit JS sichtbar (hidden-Attribut wird
entfernt, sobald das Video läuft). Kontur-Icon in der Sprache der
Kontaktwege, Fläche Tanne-950 halbdurchsichtig, damit er auf jedem Clip
lesbar bleibt. Kein display-Override, [hidden] gewinnt (Regel 8). */
.hero-video-pause {
position: absolute;
right: 1rem;
bottom: 1rem;
z-index: 1;
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--salbei);
border-radius: 50%;
background-color: rgba(10, 38, 30, 0.72);
color: var(--offwhite);
cursor: pointer;
}
.hero-video-pause svg {
width: 1.25rem;
height: 1.25rem;
}
.hero-video-pause .ico-play { display: none; }
.hero-video-pause[aria-pressed="true"] .ico-pause { display: none; }
.hero-video-pause[aria-pressed="true"] .ico-play { display: block; }
.hero-video-pause:hover,
.hero-video-pause:focus-visible {
background-color: var(--tanne-700);
}
/* --------------------------------------------------------------------------
12. Sektions-Bausteine: Kopfzeile, Projekt-Karten, Kennzahlen
-------------------------------------------------------------------------- */
.sektion-kopf {
max-width: var(--breite-text);
margin-bottom: var(--raum-7);
}
/* CLXII: Der neue Leistungen-Titel („Maßgeschneiderte KI-Automatisierungen …")
braucht für seine gesetzte erste Zeile 698 px — die Standard-Textbreite
(42rem) bricht ihn dreizeilig. Nur diese Sektion bekommt 46rem. */
#leistungen .sektion-kopf {
max-width: 46rem;
}
.sektion-kopf h2 {
margin-top: var(--raum-3);
}
.sektion-kopf .intro {
margin-top: var(--raum-4);
font-size: var(--fs-m);
}
/* Kompaktes 3×2-Projektraster (Pass CLXXX, SPEC ㉜): sechs klickbare Karten
mit Tag, Titel, einer Kennzahl und anonymisierter Zuordnung; die Tiefe
liegt auf den Detailseiten unter projekte/. Ziel: Kopf + alle sechs Karten
stehen nach dem Ankersprung gemeinsam im Bild. Das sektionseigene
--sektion-y hält dabei die 40-px-Ankerregel, weil scroll-margin-top
dieselbe Variable liest (Regel 1). */
#projekte {
--sektion-y: clamp(3rem, 2.25rem + 2.5vw, 4.5rem);
}
#projekte .sektion-kopf {
margin-bottom: var(--raum-4);
}
#projekte .sektion-kopf .intro {
margin-top: var(--raum-3);
}
.projekt-karten {
display: grid;
gap: var(--raum-4);
}
@media (min-width: 54rem) {
.projekt-karten {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 76rem) {
.projekt-karten {
grid-template-columns: repeat(3, 1fr);
}
}
/* Projekt-Karten hell auf dunkler Sektion (Pass CXXXVI, Maxims Befund: die
tanne-900-Karten hoben sich nicht von der tanne-900-Fläche ab). Muster der
Seite gespiegelt (dunkle CTA-Fläche auf Hell ↔ helle Karten auf Dunkel):
die Karte wird zur Off-White-Fläche, alle Kind-Elemente hängen an den
Flächen-Tokens. Kennzahlen-Linie in Salbei-Tief (Regel 2: --nebel wäre auf
Off-White mit 1,1:1 unsichtbar). */
.flaeche-tanne-900 .projekt-karte {
--flaeche: var(--offwhite);
--text: var(--tinte);
--text-lauf: var(--tinte);
--text-neben: var(--graugruen);
--akzent: var(--salbei-tief);
--linie: var(--salbei-tief);
--fokus: var(--salbei-tief);
background-color: var(--flaeche);
color: var(--text-lauf); /* Vererbung liefert sonst den auf der Sektion
aufgelösten Salbei-Hell-Wert (gemessen 1,74:1) */
}
.projekt-karte {
display: flex;
flex-direction: column;
gap: var(--raum-3);
padding: var(--raum-5);
text-decoration: none; /* die Karte ist seit CLXXX selbst der Link */
}
.projekt-karte .projekt-label {
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-neben);
}
.projekt-karte h3 {
color: var(--text);
font-size: var(--fs-base); /* kompakt seit CLXXX: sechs Karten statt zwei */
}
/* Kennzahl der Kompakt-Karte: sitzt über margin-top:auto immer auf gleicher
Höhe, Trennlinie wie die frühere Kennzahlen-Reihe. */
.projekt-metrik {
margin-top: auto;
padding-top: var(--raum-2);
border-top: 1px solid var(--linie);
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-l);
letter-spacing: -0.01em;
color: var(--text);
}
.projekt-metrik .metrik-pfeil {
color: var(--akzent);
}
.projekt-neben,
.projekt-firma {
font-size: var(--fs-xs);
line-height: 1.45;
color: var(--text-neben);
}
.projekt-firma {
margin-top: var(--raum-2);
}
.kennzahlen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: var(--raum-4) var(--raum-5);
margin: var(--raum-2) 0 0;
padding-top: var(--raum-4);
border-top: 1px solid var(--linie);
}
/* KPI-Reihe der Projekt-Detailseiten: steht auf Off-White — dort wäre
--linie unsichtbar (Regel 2), deshalb Salbei-Tief. */
.artikel .kennzahlen {
border-top-color: var(--salbei-tief);
margin-bottom: var(--raum-6);
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); /* 3 Spuren in
der Artikelbreite; die 9rem-Basis erzeugte eine leere vierte Spur */
}
.kennzahl dt {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-l);
letter-spacing: -0.01em;
color: var(--text);
}
.kennzahl dd {
margin: var(--raum-1) 0 0;
font-size: var(--fs-xs);
line-height: 1.45;
color: var(--text-neben);
}
/* --------------------------------------------------------------------------
12b. Leistungs-Karten (Aufklapper)
-------------------------------------------------------------------------- */
/* Lösungs-Karten mit aufklappbaren Leistungen */
.loesungs-grid {
display: grid;
gap: var(--raum-5);
}
@media (min-width: 54rem) {
.loesungs-grid {
grid-template-columns: 1fr 1fr;
}
}
.loesung-karte {
background-color: #FFFFFF;
border: 1px solid var(--nebel);
border-radius: var(--radius-m);
padding: var(--raum-6);
}
.karten-kopf {
display: flex;
align-items: center;
gap: var(--raum-3);
margin-bottom: var(--raum-3);
}
.karten-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: var(--radius-s);
/* CLXIII (Feedback Angelique): warme Beige-Kachel mit Tanne-Glyphe statt
Nebel/Salbei-Tief — verzahnt den Beige-Einstieg (SPEC ㉚) mit dem
Seiteninneren; gilt auch für die Prinzipien-Icons in „Über mich"
(gleiche Klasse, ein System). Glyphe auf Beige 6,3:1. */
background-color: var(--beige);
color: var(--tanne-700);
flex: none;
}
.karten-icon svg {
width: 22px;
height: 22px;
}
.loesung-karte > p {
color: var(--text-neben);
margin-bottom: var(--raum-4);
}
.loesung-karte details {
border-top: 1px solid var(--nebel);
}
.loesung-karte summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--raum-3);
padding: var(--raum-3) 0;
font-weight: 600;
font-size: var(--fs-s);
}
.loesung-karte summary::-webkit-details-marker {
display: none;
}
.loesung-karte summary::after {
content: "+";
flex: none;
color: var(--salbei-tief);
}
.loesung-karte details[open] summary::after {
content: "\2212";
}
.loesung-karte details > p {
padding-bottom: var(--raum-4);
font-size: var(--fs-s);
}
.haken-liste {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--raum-3);
}
.haken-liste li {
position: relative;
padding-left: 1.6rem;
font-size: var(--fs-s);
color: var(--salbei-hell);
}
.haken-liste li::before {
content: "\2713";
position: absolute;
left: 0;
color: var(--salbei);
font-weight: 700;
}
/* Zeitstrahl "Über mich" (Zusammenarbeit in Schritten) */
.zeitstrahl {
display: grid;
gap: var(--raum-6);
list-style: none;
padding: 0;
margin: 0;
max-width: none;
counter-reset: ts;
}
@media (min-width: 54rem) {
.zeitstrahl {
grid-template-columns: repeat(4, 1fr);
gap: var(--raum-5);
}
}
.zeitstrahl li {
position: relative;
}
.ts-nr {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border: 2px solid var(--salbei-tief);
border-radius: 50%;
font-family: var(--font-display);
font-weight: 500;
color: var(--salbei-tief);
background-color: var(--offwhite);
position: relative;
z-index: 1;
}
/* Verbindungslinie zwischen den Kreisen (nur nebeneinander) */
@media (min-width: 54rem) {
.zeitstrahl li:not(:last-child)::before {
content: "";
position: absolute;
top: 1.5rem;
left: 3rem;
right: calc(-1 * var(--raum-5));
height: 1px;
background-color: var(--salbei-deko);
}
}
.zeitstrahl h3 {
font-size: var(--fs-m);
margin-top: var(--raum-4);
}
/* Sektionskopf "Über mich" (Pass LXIV/LXV): Text links, drei Prinzipien rechts
als schlichte Zeilen (Icon-Kachel + Begriff, wie die Hero-Signale, ohne
Kästen). Oberkante der Liste = Oberkante des Eyebrows. */
.ueber-kopf {
display: grid;
gap: var(--raum-6) var(--raum-8);
align-items: start;
margin-bottom: var(--raum-7);
}
.ueber-kopf .sektion-kopf {
margin-bottom: 0;
}
@media (min-width: 76rem) {
.ueber-kopf {
grid-template-columns: minmax(0, var(--breite-text)) minmax(0, 1fr);
}
}
.prinzipien {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--raum-4);
justify-content: start;
}
.prinzipien li {
display: flex;
align-items: center;
gap: var(--raum-3);
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-m);
color: var(--text);
}
/* Gesetzte Zeilenumbrüche (Pass LXVII): nur auf breiten Layouts wirksam, damit
auf Mobil kein Kurzzeilen-Flattern entsteht. */
@media (max-width: 75.9rem) {
.nur-breit {
display: none;
}
}
/* Hover auf einem Schritt (Pass LXIII): der Kreis füllt sich, die Überschrift
nimmt den Akzent an. Nur auf Zeigergeräten, damit auf Touch nichts klebt.
Zustandswechsel sofort; die Bewegung dazu steht im no-preference-Block. */
.zeitstrahl li.ist-aktiv .ts-nr {
background-color: var(--salbei-tief);
border-color: var(--salbei-tief);
color: var(--offwhite);
}
.zeitstrahl li.ist-aktiv h3 {
color: var(--salbei-tief);
}
@media (hover: hover) {
.zeitstrahl li:hover .ts-nr {
background-color: var(--salbei-tief);
border-color: var(--salbei-tief);
color: var(--offwhite);
}
.zeitstrahl li:hover h3 {
color: var(--salbei-tief);
}
}
.ts-dauer {
font-size: var(--fs-s);
font-weight: 600;
color: var(--salbei-tief);
margin-top: var(--raum-1);
}
.zeitstrahl li > p:last-child {
margin-top: var(--raum-3);
}
/* Ausstiegs-Banner unter dem Zeitstrahl */
.ausstieg-banner {
margin-top: var(--raum-8);
background-color: var(--tanne-950);
border-radius: var(--radius-m);
padding: var(--raum-6) var(--raum-7);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--raum-5);
}
.ausstieg-banner h3 {
color: var(--offwhite);
}
.ausstieg-banner p {
color: var(--salbei-hell);
margin-top: var(--raum-2);
/* Kein max-width auf Desktop: der Satz steht in einer Zeile (Pass LXIII). */
}
/* Unterhalb der Container-Breite darf der Satz umbrechen, damit der Button
neben dem Text bleibt statt darunter zu rutschen (gemessen bei 1024/744 px). */
@media (max-width: 72rem) {
.ausstieg-banner p {
max-width: 52ch;
}
}
.ausstieg-banner .btn {
background-color: var(--offwhite);
color: var(--tanne-950);
flex: none;
}
/* --------------------------------------------------------------------------
12b2. Tool-Band unter dem Hero
Grundzustand: ruhige, umbrechende Reihe, ALLE Chips sichtbar.
Laufband (Julians Muster) NUR im Motion-Block unten — Revision von E29
durch Maxim am 20.08.2026, dokumentiert in SPEC-Vermerk 6.
-------------------------------------------------------------------------- */
.tool-band {
padding-block: 0 var(--raum-6);
}
/* Trennlinie: links mit dem gewohnten Container-Einzug, rechts seit CLIX bis
an den Fensterrand durchgezogen (Maxims Markierung — nimmt die Flucht des
randlosen Hero-Videos auf). Vorher beidseitig eingezogen und zentriert. */
.tool-band::before {
content: "";
display: block;
height: 1px;
width: auto;
margin: 0 0 var(--raum-6)
max(calc((100% - (var(--breite-inhalt) - 2 * var(--seitenrand))) / 2), var(--seitenrand));
background-color: var(--tanne-700);
}
.band-zeile {
text-align: center;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--akzent); /* CLVI: auf Beige Tanne-700 (6,3:1); --graugruen-d war die Dunkel-Fassung */
margin: 0 auto var(--raum-5);
padding-inline: var(--seitenrand);
}
.band-fenster {
max-width: var(--breite-inhalt);
margin-inline: auto;
padding-inline: var(--seitenrand);
}
.band-satz {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--raum-3);
list-style: none;
padding: 0;
margin: 0;
max-width: none;
}
.band-satz li {
display: flex;
align-items: center;
gap: var(--raum-3);
/* CLVIII: dieselbe Kachel-Sprache wie .integrationen-grid li — weiße Kachel,
Nebel-Rand, Tinte. Die dunkle Tanne-Kachel stammte aus der Tanne-Band-Zeit
und stand nach CLVI fremd auf dem Beige. */
background-color: #FFFFFF;
border: 1px solid var(--nebel);
border-radius: var(--radius-m);
padding: var(--raum-3) var(--raum-5);
font-size: var(--fs-s);
font-weight: 500;
color: var(--tinte);
white-space: nowrap;
}
.band-satz img {
width: 24px;
height: 22px;
object-fit: contain;
flex: none;
}
/* Ohne erlaubte Bewegung bleibt die Kopie unsichtbar */
.band-kopie {
display: none;
}
/* --------------------------------------------------------------------------
12c. Integrationen
-------------------------------------------------------------------------- */
.integrationen-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
gap: var(--raum-4);
list-style: none;
padding: 0;
margin: 0;
max-width: none;
}
.integrationen-grid li {
display: flex;
align-items: center;
gap: var(--raum-3);
background-color: #FFFFFF;
border: 1px solid var(--nebel);
border-radius: var(--radius-m);
padding: var(--raum-4) var(--raum-5);
font-size: var(--fs-s);
font-weight: 500;
color: var(--tinte);
}
.integrationen-grid img {
width: 26px;
height: 24px;
object-fit: contain;
flex: none;
}
/* Hover: greift nur bei Zeigergeräten; Bewegung selbst nur im Motion-Block */
@media (hover: hover) {
.integrationen-grid li:hover {
border-color: var(--salbei);
box-shadow: 0 6px 18px rgba(10, 38, 30, 0.10);
}
.band-satz li:hover {
/* CLVIII: wie der Grid-Hover — die alte Tanne-700-Füllung machte die
helle Kachel dunkel und den Tinte-Text unlesbar. */
border-color: var(--salbei);
box-shadow: 0 6px 18px rgba(10, 38, 30, 0.10);
}
}
.grid-nachsatz {
margin-top: var(--raum-5);
text-align: center;
max-width: none;
font-size: var(--fs-s);
color: var(--text-neben);
}
/* --------------------------------------------------------------------------
12d. Blog (ehem. Praxis): Teaser-Karten & Artikelseiten
-------------------------------------------------------------------------- */
.blog-karten {
display: grid;
gap: var(--raum-5);
}
@media (min-width: 54rem) {
.blog-karten {
grid-template-columns: 1fr 1fr 1fr;
}
}
/* Ankersprung Blog: Ausnahme aus LXXX in LXXXIV zurückgenommen, es gilt die
allgemeine 40-px-Regel (.sektion[id]) wie für alle anderen Sektionen. */
/* hidden schlägt jede display-Regel (Pass LXXXI): vorher überstimmten
display: flex/inline-flex das Attribut, die Pfeile und das Etikett blieben
trotz hidden sichtbar (auch in Safari). */
[hidden] {
display: none !important;
}
/* Filterleiste + Slider-Pfeile (Pass LXXX) */
.blog-leiste {
/* eigener Stapelkontext, damit die Themenliste über den Karten liegt */
position: relative;
z-index: 10;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--raum-3) var(--raum-5);
margin: calc(-1 * var(--raum-3)) 0 var(--raum-6);
}
/* Suchfeld mit Themenliste (Pass LXXXI, Form in LXXXII): kein Gefäß, nur eine
Grundlinie. Lupe und Platzhalter stehen frei auf der Linie; die Themen
darunter als Wortliste, nicht als Pillen. */
.blog-suche {
position: relative;
flex: 1 1 18rem;
max-width: 24rem;
}
.suche-feld {
display: flex;
align-items: center;
gap: var(--raum-2);
min-height: 2.75rem;
padding: 0.25rem 0 0.35rem;
border-bottom: 1px solid var(--salbei-tief);
color: var(--salbei-tief);
}
.suche-feld:focus-within {
border-bottom-color: var(--tanne-950);
box-shadow: 0 1px 0 0 var(--tanne-950);
}
.suche-lupe {
width: 20px;
height: 20px;
flex: none;
}
.suche-eingabe {
flex: 1 1 6rem;
min-width: 0;
font: inherit;
font-size: var(--fs-s);
color: var(--text);
background: transparent;
border: 0;
outline: 0;
padding: 0.35em 0;
}
.suche-eingabe::placeholder {
color: var(--graugruen);
}
.suche-eingabe::-webkit-search-decoration,
.suche-eingabe::-webkit-search-cancel-button {
-webkit-appearance: none;
}
/* Gewähltes Thema: Wort in Tiefgrün mit ×, keine Pille */
.suche-etikett {
display: inline-flex;
align-items: center;
gap: 0.3em;
flex: none;
font-size: var(--fs-s);
font-weight: 500;
color: var(--tanne-950);
}
.suche-etikett::after {
content: "";
width: 1px;
height: 1.1em;
margin-left: 0.4em;
background-color: var(--salbei-tief);
}
.etikett-x {
font: inherit;
font-size: 1.15em;
line-height: 1;
width: 1.3em;
height: 1.3em;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--salbei-tief);
cursor: pointer;
}
.etikett-x:hover,
.etikett-x:focus-visible {
color: var(--tanne-950);
}
/* Themenliste: Wörter untereinander */
/* Themenliste ohne Fläche (Pass LXXXIII): keine Kontur, kein Schatten, kein
Hintergrund; sie steht im Fluss unter der Linie und schiebt die Karten beim
Öffnen nach unten, statt über ihnen zu schweben. */
.suche-liste {
margin-top: var(--raum-3);
padding: 0 0 var(--raum-2);
/* steht im Markup hinter der Hinweiszeile (LXXXIII) */
}
.suche-titel {
margin: 0 0 var(--raum-2) calc(20px + var(--raum-2));
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--salbei-tief);
}
.suche-optionen {
list-style: none;
margin: 0;
padding: 0;
}
.suche-option {
display: flex;
align-items: center;
gap: 0.6em;
width: 100%;
font: inherit;
font-size: var(--fs-s);
font-weight: 500;
text-align: left;
padding: 0.5em 0.6em 0.5em calc(20px + var(--raum-2) - 0.6em - 0.4em);
border: 0;
border-radius: var(--radius-s);
background: transparent;
color: var(--salbei-tief);
cursor: pointer;
}
.suche-option::before {
content: "";
width: 0.4em;
height: 0.4em;
border-radius: 50%;
background-color: transparent;
flex: none;
}
.suche-option:hover,
.suche-option:focus-visible {
color: var(--tanne-950);
outline: 0;
}
.suche-option:hover::before,
.suche-option:focus-visible::before {
background-color: var(--salbei-tief);
}
.suche-option.ist-aktiv {
color: var(--tanne-950);
}
.suche-option.ist-aktiv::before {
background-color: var(--tanne-950);
}
.suche-hinweis {
margin: var(--raum-1) 0 0 calc(20px + var(--raum-2));
font-size: var(--fs-xs);
color: var(--graugruen);
}
.blog-leer {
margin-top: var(--raum-5);
}
.leer-reset {
font: inherit;
color: var(--salbei-tief);
background: transparent;
border: 0;
padding: 0;
text-decoration: underline;
text-underline-offset: 0.2em;
cursor: pointer;
}
.blog-pfeile {
display: flex;
gap: var(--raum-2);
}
.pfeil {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border: 1px solid var(--salbei-tief);
border-radius: 50%;
background-color: transparent;
color: var(--salbei-tief);
cursor: pointer;
}
.pfeil svg {
width: 22px;
height: 22px;
}
.pfeil:hover:not(:disabled),
.pfeil:focus-visible {
color: var(--offwhite);
background-color: var(--tanne-950);
border-color: var(--tanne-950);
}
.pfeil:disabled {
opacity: 0.35;
cursor: default;
}
/* Slider-Spur (Pass LXXX): ab 54rem eine wischbare Spur mit Scroll-Snap, immer
drei Karten im Bild; mit drei oder weniger Karten sieht man kein Scrollen.
Darunter bleibt das Stapel-Raster. */
@media (min-width: 54rem) {
.blog-spur {
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
/* Luft für den Hover-Lift der Karten */
padding-block: 0.25rem;
margin-block: -0.25rem;
}
.blog-spur::-webkit-scrollbar {
display: none;
}
.blog-spur .blog-karten {
display: flex;
gap: var(--raum-5);
}
.blog-spur .blog-karte {
flex: 0 0 calc((100% - 2 * var(--raum-5)) / 3);
scroll-snap-align: start;
}
}
.blog-karte {
display: flex;
flex-direction: column;
gap: var(--raum-3);
background-color: var(--offwhite);
}
.flaeche-offwhite .blog-karte {
background-color: var(--nebel);
}
.blog-karte h3 {
font-size: var(--fs-m);
}
.blog-karte h3 a {
color: var(--text);
text-decoration: none;
}
.blog-karte h3 a:hover {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.blog-karte .weiter {
margin-top: auto;
padding-top: var(--raum-2);
font-weight: 500;
}
/* Artikel */
.artikel-kopf {
padding-block: var(--raum-8) var(--raum-6);
}
.artikel-kopf h1 {
font-size: var(--fs-xl);
max-width: 24ch;
margin-top: var(--raum-3);
}
.artikel-meta {
margin-top: var(--raum-4);
font-size: var(--fs-s);
color: var(--text-neben);
}
.artikel {
padding-block: var(--raum-7) var(--raum-9);
}
.artikel > * {
max-width: var(--breite-text);
}
.artikel p,
.artikel ul,
.artikel ol {
margin-top: var(--raum-4);
}
.artikel h2 {
font-size: var(--fs-l);
margin-top: var(--raum-7);
}
/* Dritte Stufe im Artikel (Pass CXX, Fragen der Selbstprüfung): eine Stufe
unter h2, sonst sähen Fragen und Bereichs-Überschriften gleich aus. */
.artikel h3 {
font-size: var(--fs-m);
margin-top: var(--raum-5);
}
.artikel li {
margin-top: var(--raum-2);
}
.artikel li::marker {
color: var(--salbei-deko);
}
.artikel .merksatz {
border-left: 3px solid var(--salbei-tief);
padding-left: var(--raum-5);
font-size: var(--fs-m);
margin-top: var(--raum-6);
}
.zurueck {
display: inline-block;
margin-top: var(--raum-7);
font-weight: 500;
}
/* --------------------------------------------------------------------------
12e. Kontakt & Formular
-------------------------------------------------------------------------- */
.kontakt-grid {
display: grid;
gap: var(--raum-7);
align-items: start;
}
@media (min-width: 54rem) {
.kontakt-grid {
grid-template-columns: 2fr 3fr;
}
}
/* Absender-Karte über der Kontakt-Überschrift (Maxim 21.08.): zeigt vor der
Aufforderung, wer antwortet. Porträt links, drei Zeilen rechts. Nutzt dasselbe
Bild wie die Prozess-Check-Karte, damit nur eine Bildquelle gepflegt wird. */
.absender {
display: flex;
align-items: center;
gap: var(--raum-4);
margin-top: var(--raum-5);
}
.absender picture img {
width: 4.5rem;
height: 4.5rem;
border-radius: 50%;
object-fit: cover;
margin: 0;
}
.absender-name {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-m);
line-height: 1.25;
margin: 0;
}
.absender-rolle {
font-size: var(--fs-s);
line-height: 1.45;
color: var(--graugruen);
margin: 0;
}
.kontakt-wege {
display: grid;
gap: var(--raum-4);
margin-top: var(--raum-5);
}
.kontakt-wege p {
display: flex;
align-items: center;
gap: var(--raum-3);
margin: 0;
}
.kontakt-wege a {
font-weight: 500;
}
/* Icons in derselben Sprache wie die Leistungs-Karten: 24er-Raster, Kontur
1,8, runde Enden. Ohne Kachel-Hintergrund, damit sie neben Fliesstext
nicht als Schaltflaechen gelesen werden. Einheitlich Salbei-Tief, auch
neben der graugruenen Adresse, damit die Icon-Spalte ruhig bleibt. */
.weg-icon {
display: inline-flex;
flex: none;
color: var(--salbei-tief);
}
.weg-icon svg {
width: 20px;
height: 20px;
}
/* Zusage unter den Kontaktwegen (Maxim 21.08.): raeumt den letzten Einwand
vor dem Absenden aus. Trennlinie statt Kasten, damit der Block zum
Kontaktbereich gehoert und nicht als Werbebanner gelesen wird.
Linie in --salbei-tief statt --linie (Maxim 21.08., zweite Runde): das
Standard-Linientoken hat auf Off-White nur 1,1:1 Kontrast und war damit
praktisch unsichtbar. --salbei-tief bringt 5,2:1 und ist zugleich die
Farbe der Ueberschrift und der Icons in diesem Block. Bewusst 1px
gelassen: 2px in hellerem Salbei wirkte im Vergleich stumpf. */
.kontakt-zusage {
margin-top: var(--raum-6);
padding-top: var(--raum-5);
border-top: 1px solid var(--salbei-tief);
}
.zusage-titel {
font-family: var(--font-display);
font-weight: 600;
color: var(--salbei-tief);
margin: 0 0 var(--raum-2);
}
.zusage-text {
color: var(--graugruen);
margin: 0;
}
/* Kontaktwege-Hover (Pass CXXIX): Zeile rückt 4 px vor, Text und Icon
vertiefen sich von Salbei-Tief auf Tanne-900. Endzustand hier ohne Bewegung
(Farbe springt); der Übergang steht unten im no-preference-Block. Hover auf
der Zeile (p), damit das Icon außerhalb des Links mitreagiert. Nur bei
echtem Hover-Gerät; Tastatur erhält denselben Zustand über :focus-within.
Die frühere Regel .kontakt-adresse { color } ist seit CXXVIII wirkungslos
(Adresse ist Link) und hier entfernt. */
@media (hover: hover) {
.kontakt-wege p:hover a,
.kontakt-wege p:hover .weg-icon {
color: var(--tanne-900);
}
.kontakt-wege p:hover {
transform: translateX(4px);
}
}
.kontakt-wege p:focus-within a,
.kontakt-wege p:focus-within .weg-icon {
color: var(--tanne-900);
}
.formular {
display: grid;
gap: var(--raum-4);
}
.feld {
display: grid;
gap: var(--raum-2);
}
.feld label {
font-weight: 600;
font-size: var(--fs-s);
}
.pflicht {
color: var(--salbei-tief);
font-weight: 700;
}
/* Datenschutz-Bestätigung */
.feld-check {
display: flex;
align-items: flex-start;
gap: var(--raum-3);
margin-top: var(--raum-2);
}
.feld-check input[type="checkbox"] {
width: 1.15rem;
height: 1.15rem;
margin: 0.15rem 0 0;
flex: none;
accent-color: var(--tanne-950);
cursor: pointer;
}
.feld-check label {
font-size: var(--fs-s);
line-height: 1.5;
cursor: pointer;
}
.feld input,
.feld textarea {
font: inherit;
color: var(--text);
background-color: #FFFFFF;
border: 1px solid var(--graugruen);
border-radius: var(--radius-s);
padding: 0.7em 0.9em;
width: 100%;
}
.feld input:focus-visible,
.feld textarea:focus-visible {
outline: 2px solid var(--fokus);
outline-offset: 1px;
}
.feld textarea {
min-height: 9rem;
resize: vertical;
}
/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein normales Feld */
.hp-feld {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.formular-hinweis {
font-size: var(--fs-s);
color: var(--text-neben);
}
.formular .btn {
justify-self: start;
}
/* Bestätigungs-/Fehlerseite von kontakt.php */
.status-seite {
min-height: 60vh;
display: grid;
align-content: center;
}
/* --------------------------------------------------------------------------
12f. FAQ (natives details/summary, kein JS)
-------------------------------------------------------------------------- */
.faq-liste {
max-width: var(--breite-text);
border-top: 1px solid var(--linie);
}
.faq-liste details {
border-bottom: 1px solid var(--linie);
}
.faq-liste summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--raum-4);
padding: var(--raum-4) 0;
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-m);
letter-spacing: -0.01em;
}
.faq-liste summary::-webkit-details-marker {
display: none;
}
.faq-liste summary::after {
content: "+";
flex: none;
font-size: 1.3em;
line-height: 1;
color: var(--salbei-tief);
}
.faq-liste details[open] summary::after {
content: "\2212"; /* Minuszeichen */
}
.faq-liste details > p {
padding-bottom: var(--raum-5);
max-width: 60ch;
}
/* --------------------------------------------------------------------------
12g. Prozess-Check-Karte (natives