/* ============================================================================
MYO-MC | EXECUTIVE ADVISORY — site.css
Design-System der One-Page-Website (weiterentwickelt aus der Holding-Page).
Helle Farbwelt seit 12.10.2026 (Schritt 4 des Umbauplans): Cream-Grund,
Dark-Ink-Schrift, Gold als Akzent, dunkle Flächen sparsam (Logo, Porträt-
Hintergründe). Gold als Textfarbe liegt auf --gold (Bronze-Ton, lesbar auf
Cream), das CI-Gold #C9A24B lebt auf --gold-bright für Flächen und Grafik.
Inter + Playfair Display (self-hosted, siehe fonts/fonts.css).
============================================================================
AUFBAU (Stand 22.09.2026, Vereinfachungs-Umbau):
1. Variablen & Basis 6. Leistungsbausteine der Unterseiten
2. Sprachumschaltung DE/EN 7. AI-Factory-Diagramm
3. Header & Navigation 8. Radar (geparkt)
4. Sektions-Gerüst 9. Zahlenband, Angebote, Fälle, Profil, Kontakt
5. Hero 10. Footer, Reveal, Responsive, Reduced Motion
11. Unterseiten (Breadcrumb, Produktseite)
========================================================================== */
/* ------------------------------------------------------------------ 1. Basis */
:root{
--ink: #1A1610;
--bg-1: #FDFBF7;
--bg-2: #F4EEE1;
--gold: #7A5E1E;
--gold-bright: #C9A24B;
--gold-deep: #6E5417;
--teal: #1F8A72;
--red: #C14B38;
--text: #1A1610;
--text-muted: #534B3B;
--line: rgba(138, 107, 35, 0.34);
--line-soft: rgba(138, 107, 35, 0.16);
--card: rgba(255, 255, 255, 0.70);
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--header-h: 72px;
/* Seitenrand der .shell als Token. */
--shell-pad: clamp(20px, 4vw, 44px);
/* Vertikaler Rhythmus, eingeführt 07.09.2026. Bis dahin stand jeder Abstand
als nackte Zahl in der Regel, insgesamt 25 verschiedene Werte ohne
gemeinsamen Teiler. Die Skala ist so geschnitten, dass die vorhandenen
Basiswerte .lead{ margin-top: 22px } und .hero__cta{ margin-top: 34px }
exakt darauf liegen, deshalb musste auf der Startseite nichts verschoben
werden. Neue Regeln benutzen die Namen, bestehende ziehen nach, wenn sie
ohnehin bearbeitet werden. Waagerechte Abstände gehören nicht dazu, dort
gelten weiter die gap-clamps der Grids. */
--sp-xs: 8px; /* Zeile zu Zeile innerhalb eines Bausteins */
--sp-s: 14px; /* Baustein zu Baustein */
--sp-m: 22px; /* Absatz zu Absatz, entspricht .lead */
--sp-l: 34px; /* Textblock zur Handlung, entspricht .hero__cta */
/* Ränder der Unterseiten. Der vh-Anteil ersetzt die früheren max-height-
Stufen, stufenlos statt in Sprüngen: 59 px bei 1080er Fenster, 39 px bei
707 px, darunter die Untergrenze. */
--sp-block: clamp(36px, 5.5vh, 64px);
--sp-edge: clamp(40px, 7vh, 72px);
/* Label-Stufen, eingefuehrt 07.09.2026. Vorher trugen zehn Regeln fuer
dieselbe Rolle vier Groessen und acht Laufweiten zwischen .14 und .28em.
Zwei Stufen bilden die Hierarchie ab. Die grosse steht ueber einem
Abschnitt, die kleine in einer Karte oder Zeile. Das Gewicht gehoert
nicht dazu, es bleibt Sache der einzelnen Regel. */
--label-lg: 11.5px; /* Abschnitts-Label, .eyebrow und Verwandte */
--label-lg-tr: .26em;
--label-sm: 10.5px; /* Karten-Label, in Karten und Metazeilen */
--label-sm-tr: .2em;
}
*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
/* Sicherheitsnetz gegen waagerechten Ueberlauf (10.09.2026). Bis dahin hatte
das Stylesheet keinen einzigen Element-Selektor fuer img, jedes Bild hing
allein an seiner Komponentenregel. Als am 09.09. ein Bild mit falschen
width- und height-Attributen dazukam und auf einem Telefon ein veraltetes
Stylesheet aus dem Cache lag, stellte der Browser es 1200 Pixel breit dar
und die ganze Seite wurde herausgezoomt. Diese Regel faengt jedes kuenftige
Medium ab, auch ohne eigene Klasse. */
img, svg, video, canvas{ max-width: 100%; }
/* noscript-Hinweis (12.10.2026, vorher Inline-Farben je Seite) */
.noscript-title{ font-size: 1.6rem; font-weight: 700; color: var(--text); }
.noscript-body{ margin-top: 12px; color: var(--text-muted); }
body{
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--text); background: var(--bg-1);
min-height: 100vh;
/* ⚠ Deckel, keine Behebung. overflow-x: hidden unterdrueckt auf dem Desktop
die waagerechte Bildlaufleiste und damit das einzige Warnsignal, dass
etwas ueberlaeuft. Mobile Browser zoomen trotzdem heraus. Wer hier
aufraeumt, entfernt die Zeile testweise und prueft die Seite bei 320 bis
430 Pixeln, statt sich auf sie zu verlassen. */
overflow-x: hidden;
/* Letzte Sicherung gegen zu lange Woerter auf sehr schmalen Geraeten
(10.09.2026). Greift nur, wenn ein Wort in seiner Zeile sonst gar nicht
Platz faende, und aendert an normalem Fliesstext nichts. */
overflow-wrap: break-word;
-webkit-font-smoothing: antialiased; line-height: 1.65;
}
::selection{ background: rgba(201,162,75,0.40); color: var(--ink); }
/* Atmosphärischer Hintergrund (fixiert, wie Holding-Page) */
.bg{ position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg__base{
position: absolute; inset: 0;
background: radial-gradient(130% 90% at 50% -5%, #FFFFFF 0%, var(--bg-1) 46%, var(--bg-2) 82%);
}
.bg__glow{
position: absolute; width: 80vmax; height: 80vmax;
left: 64%; top: 40%; transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(201,162,75,0.13) 0%, rgba(201,162,75,0.04) 36%, transparent 64%);
filter: blur(10px);
animation: drift 28s var(--ease) infinite alternate; will-change: transform, opacity;
}
@keyframes drift{
0% { transform: translate(-53%, -52%) scale(1); opacity: .75; }
100% { transform: translate(-47%, -45%) scale(1.15); opacity: 1; }
}
.bg__vignette{
position: absolute; inset: 0;
background: radial-gradient(125% 100% at 55% 40%, transparent 52%, rgba(26,22,16,0.07) 100%);
}
a{ color: var(--gold); }
a:hover{ color: var(--gold-deep); }
:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
/* -------------------------------------------- 2. Sprachumschaltung DE / EN
Jedes Rubrik-Fragment enthält beide Sprachen nebeneinander:
……
Das Root-Element trägt die aktive Sprache; die inaktive wird ausgeblendet. */
html[lang="de"] main [lang="en"],
html[lang="de"] .i18n [lang="en"]{ display: none !important; }
html[lang="en"] main [lang="de"],
html[lang="en"] .i18n [lang="de"]{ display: none !important; }
/* ------------------------------------------------- 3. Header & Navigation */
.site-header{
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
height: var(--header-h);
display: flex; align-items: center; gap: 20px;
padding: 0 clamp(16px, 3vw, 36px);
background: rgba(253, 251, 247, 0.78);
border-bottom: 1px solid transparent;
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.scrolled{ border-bottom-color: var(--line-soft); background: rgba(253, 251, 247, 0.92); }
.brand{ display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.brand__mark{ width: 42px; height: 42px; flex-shrink: 0; }
.brand__mark svg{ display: block; width: 100%; height: 100%; }
/* Markenblock mit eigener, enger Zeilenhöhe (19.10.2026). Er erbte die
Fließtext-Zeilenhöhe, dadurch klaffte zwischen MYO-MC und Executive
Advisory eine zu große Lücke (Erik). */
.brand__text{ display: block; line-height: 1.2; }
.brand__name{ font-size: 14px; font-weight: 700; letter-spacing: .14em; line-height: 1.15; color: var(--text); }
.brand__sub{ font-size: 9.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.site-nav{
display: flex; align-items: center; gap: 2px;
margin-left: auto; overflow-x: auto; scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.site-nav::-webkit-scrollbar{ display: none; }
.site-nav a{
font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
color: var(--text-muted); text-decoration: none; white-space: nowrap;
padding: 8px 11px; border-radius: 8px;
transition: color .2s var(--ease), background-color .2s var(--ease);
}
.site-nav a:hover{ color: var(--text); background: rgba(201,162,75,0.08); }
.site-nav a.active{ color: var(--gold); }
.lang{
display: inline-flex; align-items: center; flex-shrink: 0;
border: 1px solid var(--line); border-radius: 999px; padding: 3px;
background: rgba(255,255,255,0.60);
}
.lang button{
appearance: none; border: none; cursor: pointer; background: transparent;
color: var(--text-muted); font-family: inherit; font-size: 11.5px; font-weight: 600;
letter-spacing: .08em; padding: 5px 12px; border-radius: 999px; min-height: 30px;
transition: color .25s var(--ease), background-color .25s var(--ease);
}
.lang button:hover{ color: var(--text); }
.lang button[aria-pressed="true"]{ background: var(--gold); color: var(--bg-1); }
/* Menü-Gruppe (22.09.2026). Fasst Navigation und Sprachwahl, damit beide
auf schmalen Fenstern gemeinsam hinter die Menü-Schaltfläche wandern.
Auf breiten Fenstern ist die Gruppe unsichtbar als Wrapper. */
.site-menu{ display: flex; align-items: center; gap: 20px; margin-left: auto; min-width: 0; }
.site-nav{ overflow: visible; }
/* Kontakt-Button im Header (22.09.2026). Auf jeder Seite sichtbar, auch
schmal. Kleiner als der Hero-Button, gleiche Farbe. Text steht im Code,
wortgleich mit S1.cta_mail. */
.header__cta{
flex-shrink: 0; min-height: 38px; padding: 8px 16px;
font-size: 12.5px; letter-spacing: .04em; border-radius: 10px; gap: 8px;
}
/* Menü-Schaltfläche, nur auf schmalen Fenstern sichtbar. Drei Balken, die
im offenen Zustand zum Kreuz werden. Zustand hält js/site.js → initMenu
über aria-expanded und .menu-open am Header. */
.nav-toggle{
display: none; flex-shrink: 0; width: 42px; height: 42px;
align-items: center; justify-content: center; flex-direction: column; gap: 5px;
appearance: none; border: 1px solid var(--line); border-radius: 10px;
background: rgba(255,255,255,0.60); cursor: pointer;
}
.nav-toggle__bar{
display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text);
transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.site-header.menu-open .nav-toggle__bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.site-header.menu-open .nav-toggle__bar:nth-child(2){ opacity: 0; }
.site-header.menu-open .nav-toggle__bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
/* --------------------------------------------------- 4. Sektions-Gerüst */
main{ position: relative; z-index: 1; }
.shell{ max-width: 1180px; margin: 0 auto; padding: 0 var(--shell-pad); }
.section{ padding: clamp(72px, 11vh, 128px) 0; position: relative; }
/* Angebotsseiten (12.10.2026, Ebene 3). Auf der Startseite trägt jede Rubrik
das volle Rubriken-Padding, auf den Angebotsseiten stapeln sich sechs
Abschnitte, und zweimal 72 bis 128 px ergaben Löcher zwischen den Blöcken
(Rückmeldung Erik). Hier gilt deshalb der engere Unterseiten-Rhythmus. */
.offer-page .section{ padding-block: var(--sp-edge); }
.offer-page .section--first{ padding-top: calc(var(--header-h) + var(--sp-block)); }
/* Trennlinie zwischen Rubriken (Rubriken liegen in [data-include]-Wrappern). */
main [data-include] + [data-include] .section{ border-top: 1px solid var(--line-soft); }
/* Nummerierte Eyebrow-Zeile: „01 — Positionierung“ */
.eyebrow{
display: flex; align-items: center; gap: 14px;
font-size: var(--label-lg); font-weight: 600; letter-spacing: var(--label-lg-tr); text-transform: uppercase;
color: var(--gold); margin-bottom: 22px;
}
.eyebrow::before{
content: attr(data-num);
font-weight: 800; color: var(--text-muted); letter-spacing: .1em;
}
.eyebrow::after{
content: ""; height: 1px; width: 56px;
background: linear-gradient(90deg, var(--gold), transparent);
}
/* These = zugespitzte Kernaussage (Playfair aufrecht — besser lesbar als kursiv) */
.these{
font-family: 'Playfair Display', Georgia, serif; font-style: normal; font-weight: 500;
font-size: clamp(1.55rem, 3.3vw, 2.45rem); line-height: 1.4; color: var(--text);
letter-spacing: .002em; max-width: 27ch; text-wrap: balance;
}
.these .hl{ color: var(--gold); }
.lead{
margin-top: 22px; font-size: clamp(1rem, 1.35vw, 1.12rem); font-weight: 300;
color: var(--text-muted); max-width: 62ch; line-height: 1.75;
}
.lead strong, .body strong{ font-weight: 600; color: var(--text); }
.body{ margin-top: 16px; font-size: 1rem; font-weight: 300; color: var(--text-muted); max-width: 62ch; line-height: 1.75; }
/* Zweispaltiges Sektions-Layout */
.split{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split--wide-text{ grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
/* Stationen im Profil: ruhige, nummerierte Blöcke, drei Spalten. */
.principles{
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(22px, 3.5vw, 44px); margin-top: clamp(32px, 5vh, 52px);
}
.principle{ border-top: 1px solid var(--line); padding-top: 20px; }
.principle__num{
font-size: 12px; font-weight: 700; letter-spacing: .22em;
color: var(--gold); font-variant-numeric: tabular-nums;
}
.principle h3{ margin-top: 12px; font-size: 1.02rem; font-weight: 600; color: var(--text); letter-spacing: .01em; }
.principle p{ margin-top: 7px; font-size: .92rem; font-weight: 300; color: var(--text-muted); line-height: 1.65; }
/* Nummerierter Ablauf (Vorgehen) */
.steps{
display: grid; grid-template-columns: 1fr 1fr;
column-gap: clamp(24px, 4vw, 52px); margin-top: 24px;
}
.step{
display: flex; align-items: flex-start; gap: 16px;
padding: 14px 0; border-top: 1px solid var(--line-soft);
}
.step__num{
flex-shrink: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em;
color: var(--gold); font-variant-numeric: tabular-nums; padding-top: 4px;
}
.step p{ font-size: .94rem; font-weight: 300; color: var(--text-muted); line-height: 1.6; }
.step p strong{ font-weight: 600; color: var(--text); }
/* Angebots-Karten */
.offers{ display: grid; gap: 12px; margin-top: 24px; }
.offer{
border: 1px solid var(--line-soft); border-left: 2px solid var(--gold);
border-radius: 0 12px 12px 0; background: var(--card); padding: 16px 20px;
transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.offer:hover{ border-color: var(--gold); background: rgba(201,162,75,0.07); }
.offer h2, .offer h3, .offer h4{ font-size: .98rem; font-weight: 600; color: var(--text); }
.offer p{ margin-top: 5px; font-size: .88rem; font-weight: 300; color: var(--text-muted); line-height: 1.6; }
/* Karten */
.card{
border: 1px solid var(--line-soft); border-radius: 16px;
background: var(--card); padding: clamp(20px, 3vw, 30px);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
transition: border-color .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease);
}
.card:hover{ border-color: var(--line); transform: translateY(-3px); }
/* CTA-Buttons (identisch zur Holding-Page) */
.btn{
display: inline-flex; align-items: center; gap: 10px;
font-size: 14.5px; font-weight: 500; color: var(--text); text-decoration: none;
padding: 13px 22px; min-height: 48px; border: 1px solid var(--line); border-radius: 12px;
background: rgba(255, 255, 255, 0.55); cursor: pointer;
transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.btn svg{ width: 18px; height: 18px; flex-shrink: 0; stroke: var(--gold); }
.btn:hover{ border-color: var(--gold); background: rgba(201,162,75,0.12); color: var(--text); }
/* Heller Grund (12.10.2026): Bronze-Fläche mit Cream-Schrift, im Hover das
CI-Gold mit Ink-Schrift. Beide Paare liegen über 4.5:1. */
.btn--primary{ background: var(--gold); color: var(--bg-1); border-color: var(--gold); font-weight: 600; }
.btn--primary svg{ stroke: var(--bg-1); }
.btn--primary:hover{ background: var(--gold-bright); border-color: var(--gold-bright); color: var(--ink); }
.btn--primary:hover svg{ stroke: var(--ink); }
/* ------------------------------------------------------------- 5. Hero */
.hero{
min-height: 100vh; min-height: 100svh;
display: grid; align-items: center;
padding: calc(var(--header-h) + 32px) 0 56px;
}
.hero .split{ align-items: center; }
.hero__kicker{
display: inline-flex; align-items: center; gap: 10px;
font-size: var(--label-lg); font-weight: 600; letter-spacing: var(--label-lg-tr); text-transform: uppercase;
color: var(--text-muted); border: 1px solid var(--line); border-radius: 999px;
padding: 8px 16px; background: rgba(255,255,255,0.55);
}
.hero__kicker .dot{
width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse{
0%{ box-shadow: 0 0 0 0 rgba(201,162,75,0.55); }
70%{ box-shadow: 0 0 0 9px rgba(201,162,75,0); }
100%{ box-shadow: 0 0 0 0 rgba(201,162,75,0); }
}
/* Hauptzeile seit 22.09.2026 als Satz in Groß-/Kleinschreibung. Bis dahin
zwei Versalienzeilen („Klarer Kurs. Nachhaltiger Erfolg.“), die abstrakte
Claim-Form der großen Häuser. Ein Satz aus Situation und Ergebnis
braucht ruhigere Type: Gewicht 700, keine Versalien, etwas enger. Gilt
als Ebene 1 auch für die Produktseiten, deren Überschriften damit
ebenfalls in Groß-/Kleinschreibung stehen. */
.hero h1{
font-weight: 700; text-transform: none;
font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.12; letter-spacing: -.012em;
margin: 26px 0 0; color: var(--text); max-width: 18ch; text-wrap: balance;
}
.hero h1 .gold{
display: block;
background: linear-gradient(92deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero__subtitle{
margin-top: 18px; font-size: clamp(.82rem, 1.5vw, .98rem);
font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}
.hero__role{
margin: 16px 0 0; font-size: clamp(1.05rem, 2vw, 1.4rem); font-weight: 500;
letter-spacing: .01em; line-height: 1.3; color: var(--text);
}
.hero__divider{
height: 2px; width: 0; margin: 24px 0;
background: linear-gradient(90deg, var(--gold), transparent);
animation: grow 1.1s var(--ease) forwards; animation-delay: .8s;
}
@keyframes grow{ to{ width: 160px; } }
.hero__quote{
font-family: 'Playfair Display', Georgia, serif; font-style: normal; font-weight: 500;
font-size: clamp(1.12rem, 2.2vw, 1.5rem); line-height: 1.5; color: var(--text); max-width: 34ch;
}
.hero__cta{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
/* Konstellation (Chaos → Kurslinie) */
.constellation{ position: relative; }
.constellation svg{ display: block; width: 100%; height: auto; }
/* Der Halo ragte bis zum 10.09.2026 ueber alle vier Kanten hinaus (inset:
-10%). Waagerecht erzeugte das auf der Startseite 3 bis 11 Pixel Ueberlauf,
gemessen bei 320 bis 430 Pixeln Fensterbreite. Unsichtbar, weil der Verlauf
an den Raendern laengst transparent ist, aber die Seite wurde dadurch
breiter als das Fenster und mobile Browser zoomten heraus. Der senkrechte
Ueberstand bleibt, er schadet nicht. */
.constellation__halo{
position: absolute; inset: -10% 0; z-index: -1;
background: radial-gradient(55% 45% at 55% 40%, rgba(201,162,75,0.14), transparent 70%);
filter: blur(28px);
}
.const-node{ fill: var(--gold); transition: cx 2.2s var(--ease), cy 2.2s var(--ease), opacity 2.2s var(--ease); }
.const-node--dim{ fill: var(--gold-deep); opacity: .55; }
.const-link{
stroke: var(--gold); stroke-width: 1; opacity: 0;
transition: opacity 1.4s var(--ease) 1.6s;
}
.const-course{
fill: none; stroke: var(--gold-bright); stroke-width: 2.5; stroke-linecap: round;
stroke-dasharray: 1000; stroke-dashoffset: 1000;
filter: drop-shadow(0 0 6px rgba(201,162,75,0.35));
}
.constellation.ordered .const-link{ opacity: .28; }
.constellation.ordered .const-course{ transition: stroke-dashoffset 2s var(--ease) 1.2s; stroke-dashoffset: 0; }
/* --------------------------------------- 6. Leistungen (3a / 3b / 3c)
Hierarchie je Leistungsfeld: Kicker (klein, gold) → These (groß, Playfair)
→ Hook (provozierende Frage) → Zielgruppe → Ablauf/Angebote → Ergebnis. */
.service{ scroll-margin-top: calc(var(--header-h) + 12px); }
/* Blockkopf der Leistungen (06.09.2026). Aufbau wie .eyebrow bei den
Rubriken, also Nummer, Bezeichnung, Linie. Frueher stand der Kicker als
Text im Leerraum, der Wechsel von einem Block zum naechsten war nur an der
Luft dazwischen zu erkennen. Die Linie traegt jetzt den Wechsel und ist
zugleich das, worauf ein Sprung aus der Leiste landet.
Gebunden an [data-num], damit Kompaktkoepfe ohne Nummer unveraendert
bleiben und die Regel auf den Produktseiten nicht greift. */
/* Groesse und Laufweite liegen seit 07.09.2026 auf der grossen Label-Stufe.
Ausnahme beim Gewicht, 700 statt der 600 von .eyebrow. Der Kicker traegt
die Nummer des Blocks und muss neben ihr bestehen. Entscheidung Erik. */
.service__kicker{
font-size: var(--label-lg); font-weight: 700; letter-spacing: var(--label-lg-tr); text-transform: uppercase;
color: var(--gold); margin-bottom: 18px;
}
.service__kicker[data-num]{
display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.service__kicker[data-num]::before{
content: attr(data-num);
font-weight: 800; color: var(--text-muted); letter-spacing: .1em;
font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.service__kicker[data-num]::after{
content: ""; flex: 1 1 40px; min-width: 24px; height: 1px;
background: linear-gradient(90deg, var(--gold), transparent 88%);
}
/* Leistungsname unter dem Feld-Kicker (Feld = eines der vier Beratungsfelder) */
.service__name{
font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 600;
color: var(--text); letter-spacing: .01em; margin-bottom: 16px;
}
/* Als Zwischenüberschrift eines Abschnitts (h2 auf den Angebotsseiten) eine
Stufe größer als die Grundform, die als h1-Überzeile dient
(Rückmeldung Erik 12.10.2026). */
h2.service__name{ font-size: clamp(1.25rem, 2vw, 1.55rem); }
.service .these{ font-size: clamp(1.5rem, 2.9vw, 2.15rem); }
.hook{
margin-top: 18px;
font-family: 'Playfair Display', Georgia, serif; font-style: normal; font-weight: 500;
font-size: clamp(1.02rem, 1.7vw, 1.22rem); line-height: 1.55;
color: var(--text-muted); max-width: 46ch;
}
.service__for{
margin-top: 24px; font-size: .95rem; font-weight: 300;
color: var(--text-muted); max-width: 54ch; line-height: 1.7;
}
.service__result{ margin-top: 30px; font-size: .96rem; color: var(--text); max-width: 60ch; line-height: 1.7; }
/* Ausnahme beim Gewicht: 700. Die Ergebniszeile ist die Pointe des Blocks. */
.service__result-label{
display: block; font-size: var(--label-sm); font-weight: 700; letter-spacing: var(--label-sm-tr);
text-transform: uppercase; color: var(--gold); margin-bottom: 7px;
}
/* Verweis aus einem Leistungsblock auf eine Detail- oder Produktseite
(22.08.2026, neu). Gleiche Optik wie .offer-card__more auf der Startseite. */
.service__more{
display: inline-flex; align-items: center; gap: 6px; margin-top: 22px;
font-size: .82rem; font-weight: 600; color: var(--gold); text-decoration: none;
transition: gap .3s var(--ease), color .3s var(--ease);
}
.service__more::after{ content: "→"; font-weight: 400; }
.service__more:hover{ gap: 10px; color: var(--gold-deep); }
/* Angebotskarten nebeneinander. Wird ueberall dort gesetzt, wo der Block die
volle Breite hat (KI-Angebote in 3b, Digitalisierung in 3d). Ohne diese
Klasse stapeln sich die Karten — richtig z. B. im Governance-Teil, wo sie
in der linken Spalte neben dem Fahrplan stehen. */
.offers--cols{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Recovery-Linie (rot/ausgefranst → glatte Trajektorie), mit Achsen + Legende */
.recovery-viz svg{ display: block; width: 100%; height: auto; }
.recovery-path{ fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; transition: stroke 1.8s var(--ease); }
.recovery-path--live{ stroke: var(--red); filter: drop-shadow(0 0 5px rgba(215,90,74,0.35)); }
.recovery-viz.healed .recovery-path--live{ stroke: var(--gold-bright); filter: drop-shadow(0 0 6px rgba(201,162,75,0.4)); }
.recovery-target{ fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 5 7; }
.recovery-axis{ stroke: var(--line-soft); stroke-width: 1; }
.recovery-label{ font-size: 10px; letter-spacing: .14em; text-transform: uppercase; fill: var(--text-muted); font-family: 'Inter', sans-serif; }
.recovery-legend text{ font-size: 10.5px; letter-spacing: .04em; text-transform: none; fill: var(--text-muted); font-family: 'Inter', sans-serif; }
.recovery-legend .sw{ stroke-width: 2.5; stroke-linecap: round; }
.recovery-legend .sw--red{ stroke: var(--red); }
.recovery-legend .sw--gold{ stroke: var(--gold-bright); }
.recovery-legend .sw--target{ stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 5; }
/* Statistik-Zahlen (88 % / 81 % und Referenz-KPIs) */
.stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 28px; }
.stat{
border: 1px solid var(--line-soft); border-radius: 14px; background: var(--card);
padding: 20px 18px; text-align: left;
}
.stat__num{
font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
background: linear-gradient(92deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
font-variant-numeric: tabular-nums;
}
.stat__label{ margin-top: 8px; font-size: .82rem; color: var(--text-muted); line-height: 1.5; }
/* Countdown EU AI Act */
.countdown{ margin-top: 26px; }
.countdown__title{ font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.countdown__grid{ display: flex; gap: 12px; flex-wrap: wrap; }
.countdown__cell{
min-width: 84px; text-align: center; padding: 14px 10px;
border: 1px solid var(--line); border-radius: 14px; background: var(--card);
}
.countdown__val{
display: block; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--text);
font-variant-numeric: tabular-nums; line-height: 1.1;
}
.countdown__unit{ display: block; margin-top: 4px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }
.countdown__done{
display: none; padding: 16px 20px; border: 1px solid var(--gold); border-radius: 14px;
background: rgba(201,162,75,0.1); color: var(--text); font-size: .98rem;
}
.countdown.expired .countdown__grid{ display: none; }
.countdown.expired .countdown__done{ display: block; }
/* Roadmap EU AI Act: vertikaler Zeitstrahl mit „Heute“-Marker */
.roadmap{ margin-top: 30px; }
.roadmap__title{
font-size: var(--label-sm); font-weight: 600; letter-spacing: var(--label-sm-tr); text-transform: uppercase;
color: var(--gold); margin-bottom: 16px;
}
.roadmap__list{ list-style: none; margin: 0; padding: 0; }
.roadmap__list li{ position: relative; padding: 0 0 18px 32px; }
/* Zeitstrahl-Linie (alle außer letztem Eintrag) */
.roadmap__list li:not(:last-child)::before{
content: ""; position: absolute; left: 8px; top: 14px; bottom: -2px;
width: 1px; background: var(--line-soft);
}
.roadmap__list li.done:not(:last-child)::before{ background: var(--line); }
/* Punkt */
.roadmap__list li::after{
content: ""; position: absolute; left: 4px; top: 5px;
width: 9px; height: 9px; border-radius: 50%;
border: 1.5px solid var(--gold-deep); background: var(--bg-1);
}
.roadmap__list li.done::after{ background: var(--gold-deep); }
.roadmap__list li.roadmap__major::after{
background: var(--gold-bright); border-color: var(--gold);
box-shadow: 0 0 9px rgba(201,162,75,0.55);
}
.roadmap__date{
display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
color: var(--gold); font-variant-numeric: tabular-nums;
}
.roadmap__list li.done .roadmap__date{ color: var(--text-muted); }
.roadmap__list li.roadmap__major .roadmap__date{ color: var(--gold-deep); }
.roadmap__label{ display: block; margin-top: 3px; font-size: .86rem; font-weight: 300; color: var(--text-muted); line-height: 1.55; }
.roadmap__label strong{ font-weight: 600; color: var(--text); }
.roadmap__list li.done .roadmap__label strong{ color: var(--text-muted); }
.roadmap__list li.roadmap__major .roadmap__label strong{ color: var(--gold-deep); }
/* „Heute“-Marker (wird von js/site.js eingefügt) */
.roadmap__list li.roadmap__today{
padding-bottom: 18px;
font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
color: var(--gold);
}
.roadmap__list li.roadmap__today::after{
background: var(--gold-bright); border-color: var(--gold);
animation: pulse 2.4s ease-out infinite;
}
.roadmap__note{ margin-top: 4px; font-size: .76rem; color: var(--text-muted); }
/* ------------------------------------------------ 7. AI Factory Diagramm */
.factory{ margin-top: 8px; }
.factory svg{ display: block; width: 100%; height: auto; }
.factory text{ font-family: 'Inter', sans-serif; }
.factory .lyr{ transition: opacity .35s var(--ease); }
.factory[data-focus="a"] .lyr:not(.lyr--a),
.factory[data-focus="b"] .lyr:not(.lyr--b),
.factory[data-focus="gov"] .lyr:not(.lyr--gov){ opacity: .22; }
.factory__legend{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.factory__legend button{
appearance: none; cursor: pointer; font-family: inherit;
font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
color: var(--text-muted); background: var(--card);
border: 1px solid var(--line-soft); border-radius: 999px; padding: 9px 16px;
transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.factory__legend button:hover, .factory__legend button.on{
color: var(--gold-deep); border-color: var(--gold); background: rgba(201,162,75,0.12);
}
/* -------------------------------------------- 8. Institute & Radar */
.radar{ position: relative; }
.radar svg{ display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
.radar__grid{ fill: none; stroke: var(--line-soft); stroke-width: 1; }
.radar__axis{ stroke: var(--line-soft); stroke-width: 1; }
.radar__area{
fill: rgba(201,162,75,0.16); stroke: var(--gold); stroke-width: 2; stroke-linejoin: round;
transform-origin: center; transform: scale(0.08); opacity: 0;
transition: transform 1.6s var(--ease), opacity 1.2s var(--ease);
}
.radar.live .radar__area{ transform: scale(1); opacity: 1; }
.radar__dot{ fill: var(--gold-bright); opacity: 0; transition: opacity .6s var(--ease) 1.2s; }
.radar.live .radar__dot{ opacity: 1; }
.radar text{ font-family: 'Inter', sans-serif; font-size: 10.5px; letter-spacing: .08em; fill: var(--text-muted); text-transform: uppercase; }
/* --------------------------------- 9. Readiness / Referenzen / Über / Kontakt */
/* ---- Zahlenband (22.09.2026) --------------------------------------------
Vier Belege direkt unter dem Hero. Bewusst leise: Hairlines statt Karten,
die Zahl in Gold-Verlauf wie die früheren Referenz-KPIs. Die Rubrik ist
flacher als eine Sektion, weil sie zum Hero gehört und nicht für sich
steht. Ausnahme zum Sektionsabstand, deshalb der Modifier. */
.section--band{ padding: clamp(28px, 4vh, 44px) 0; }
.band{
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(18px, 3vw, 40px);
}
.band__item{ border-top: 1px solid var(--line); padding-top: var(--sp-s); }
.band__num{
display: block; font-size: clamp(1.6rem, 2.8vw, 2.3rem); font-weight: 800; line-height: 1.15;
letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap;
background: linear-gradient(92deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Wortmarke (SAP Award) etwas kleiner als die Zahlen, sonst wirkt das Wort
lauter als die Ziffern daneben. */
.band__num--word{ font-size: clamp(1.25rem, 2.1vw, 1.7rem); padding-top: .18em; }
.band__label{ display: block; margin-top: 6px; font-size: .8rem; color: var(--text-muted); line-height: 1.45; }
/* Überschrift über dem Band (16.10.2026). Das Band gehört zum Hero und trägt
keine Rubriknummer, deshalb entfällt die Ziffer vor dem Label. Ausnahme
zur Basis .eyebrow, weil die Nummer dort fest über ::before kommt. */
.eyebrow--band::before{ content: none; }
.eyebrow--band{ margin-bottom: var(--sp-s); }
/* ---- Angebotskarten (22.09.2026) ----------------------------------------
Vier Karten, zwei Spalten. Jede Karte ist ein Link auf die Unterseite und
trägt drei Zeilen: Situation (Playfair, gedämpft) · Name (Inter, fest) ·
Ergebnis (Fließtext). Der Linktext unten folgt .service__more. */
.offer-grid{
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(14px, 2vw, 22px); margin-top: clamp(32px, 5vh, 52px);
}
.offer-card{
display: flex; flex-direction: column;
padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 30px);
border: 1px solid var(--line-soft); border-top: 2px solid var(--gold);
border-radius: 0 0 14px 14px; background: var(--card);
text-decoration: none; color: inherit;
transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.offer-card:hover{ border-color: var(--gold); background: rgba(201,162,75,0.06); transform: translateY(-3px); }
.offer-card__situation{
font-family: 'Playfair Display', Georgia, serif; font-weight: 500;
font-size: clamp(1.02rem, 1.6vw, 1.18rem); line-height: 1.5; color: var(--text-muted);
}
.offer-card__name{
margin-top: var(--sp-s); font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 600;
letter-spacing: .005em; line-height: 1.3; color: var(--text);
transition: color .3s var(--ease);
}
.offer-card:hover .offer-card__name{ color: var(--gold); }
.offer-card__result{ margin-top: var(--sp-xs); font-size: .95rem; font-weight: 300; line-height: 1.65; color: var(--text); }
.offer-card__more{
display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--sp-m);
font-size: .82rem; font-weight: 600; color: var(--gold);
transition: gap .3s var(--ease), color .3s var(--ease);
}
.offer-card__more::after{ content: "\2192"; font-weight: 400; }
.offer-card:hover .offer-card__more{ gap: 10px; color: var(--gold-deep); }
/* ---- Fälle (22.09.2026) --------------------------------------------------
Vier Fälle als Editorial-Zeilen, Nachfolger der Referenz-Zeilen. Links die
Branche und der Zeitraum, rechts Titel, Rollensatz und die drei Schritte
Ausgangslage, Eingriff, Ergebnis als Definitionsliste in drei Spalten. */
.refs-note{ font-size: .82rem; color: var(--text-muted); margin-top: 14px; }
.cases{ margin-top: clamp(30px, 5vh, 48px); }
.case{
display: grid; grid-template-columns: 200px minmax(0, 1fr);
gap: clamp(18px, 3vw, 44px); align-items: start;
padding: clamp(22px, 3.5vh, 34px) 0; border-top: 1px solid var(--line-soft);
}
.case:last-of-type{ border-bottom: 1px solid var(--line-soft); }
/* Ausnahme beim Gewicht: 700. Die Branche ist in der Zeile die Orientierung. */
.case__ind{
display: block; font-size: var(--label-sm); font-weight: 700; letter-spacing: var(--label-sm-tr);
text-transform: uppercase; color: var(--gold); line-height: 1.5;
}
.case__year{
display: block; margin-top: 6px; font-size: .82rem; color: var(--text-muted);
font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.case__body h3{ font-size: 1.08rem; font-weight: 600; color: var(--text); line-height: 1.4; }
.case__role{ margin-top: 4px; font-size: .84rem; font-weight: 500; color: var(--gold); }
.case__steps{
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 2vw, 28px); margin-top: var(--sp-s);
}
.case__lbl{
font-size: var(--label-sm); font-weight: 600; letter-spacing: var(--label-sm-tr);
text-transform: uppercase; color: var(--text-muted);
}
.case__step dd{ margin: 6px 0 0; font-size: .9rem; font-weight: 300; line-height: 1.6; color: var(--text-muted); }
.case__step:last-child dd{ color: var(--text); }
/* Über Erik Kunz */
.portrait{
max-width: 390px; margin: 0 auto;
aspect-ratio: 4 / 5; border-radius: 18px; border: 1px solid var(--line-soft);
background:
radial-gradient(80% 60% at 50% 30%, rgba(201,162,75,0.12), transparent 70%),
linear-gradient(160deg, #221c12, #12100b);
position: relative; overflow: hidden;
}
/* object-position oben: der Kopf wird nie abgeschnitten. Der Farbverlauf oben
liegt hinter dem Foto und deckt die Ladezeit ab. */
.portrait img{
width: 100%; height: 100%; object-fit: cover; object-position: center top;
display: block; filter: saturate(0.92) contrast(1.02);
}
.certs{ margin-top: 24px; font-size: .85rem; color: var(--text-muted); line-height: 1.8; }
/* Beschriftung als kleine Kopfzeile über der Liste, ohne Doppelpunkt (22.09.2026). */
.certs strong{
display: block; font-size: var(--label-sm); font-weight: 600; letter-spacing: var(--label-sm-tr);
text-transform: uppercase; color: var(--gold); margin-bottom: 2px;
}
/* Kontakt */
.contact-final{ text-align: center; padding-bottom: clamp(88px, 12vh, 140px); }
.contact-final .these{ margin: 0 auto; }
.contact-final .lead{ margin-left: auto; margin-right: auto; }
.contact-final .hero__cta{ justify-content: center; }
.contact-final .meta{ margin-top: 26px; font-size: .88rem; color: var(--text-muted); }
/* --------------------------------------------- 10. Footer, Reveal, Responsive */
.site-footer{
position: relative; z-index: 1;
border-top: 1px solid var(--line-soft);
padding: 26px clamp(20px, 4vw, 44px);
max-width: 1180px; margin: 0 auto;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
font-size: 12.5px; color: var(--text-muted); letter-spacing: .03em;
}
.site-footer .sep{ color: var(--gold); }
.site-footer a{ color: var(--text-muted); text-decoration: none; transition: color .2s var(--ease); }
.site-footer a:hover{ color: var(--gold); }
/* Kontaktzeile im Footer (22.09.2026). B2B-Käufer vermissen am häufigsten
vollständige Kontaktdaten, deshalb Mail und LinkedIn auf jeder Seite unten. */
.site-footer__contact a{ color: var(--text); }
/* Erste Sektion auf Unterseiten ohne Breadcrumb (22.09.2026, Ebene 4
Kontext). Der Header ist fixiert, ohne diesen Rand läge der Kopf der
Seite darunter. Setzt nur den oberen Rand. */
.section--first{ padding-top: calc(var(--header-h) + var(--sp-block)); }
/* Scroll-Reveal */
[data-reveal]{ opacity: 0; transform: translateY(26px); }
[data-reveal].in{
opacity: 1; transform: none;
transition: opacity .9s var(--ease), transform .9s var(--ease);
transition-delay: var(--delay, 0s);
}
/* Responsive */
/* Header schmal (22.09.2026). Marke und Kontakt-Button bleiben sichtbar,
Navigation und Sprachwahl liegen als Klappe unter dem Header hinter der
Menü-Schaltfläche. --header-h bleibt 72 px, die frühere zweite Zeile mit
106 px entfällt. Unter 500 px verschwindet der Markentext, die Bildmarke
allein reicht dort, sonst wird der Button beschnitten. */
@media (max-width: 880px){
.nav-toggle{ display: flex; }
/* Rechter Anschlag (21.10.2026). Breit schiebt .site-menu mit
margin-left:auto den Button nach rechts. Schmal ist .site-menu
ausgeblendet, der Abstand entfällt, Button und Menü-Schaltfläche
rutschten neben die Marke (Sichtprüfung iOS/Android). Der Button
übernimmt deshalb hier den Auto-Rand, die Marke bleibt links. */
.header__cta{ margin-left: auto; white-space: nowrap; }
.site-header{ gap: 12px; }
.site-menu{
display: none; position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 0;
padding: 6px clamp(16px, 3vw, 36px) 18px;
/* Deckend, kein Glas. Hinter der Klappe steht der Hero, dessen Zeilen
sonst durch die Einträge scheinen (Sichtprüfung 22.09.2026). */
background: var(--bg-1);
border-bottom: 1px solid var(--line-soft);
box-shadow: 0 18px 40px rgba(26, 22, 16, 0.18);
}
.site-header.menu-open .site-menu{ display: flex; }
.site-nav{ flex-direction: column; align-items: stretch; gap: 0; margin-left: 0; }
.site-nav a{ font-size: 15px; padding: 14px 6px; border-radius: 0; border-top: 1px solid var(--line-soft); }
.site-nav a:first-child{ border-top: 0; }
.lang{ align-self: flex-start; margin: 14px 6px 0; }
}
/* Grenze 21.10.2026 von 420 auf 500 px angehoben. Englisch ist der Button
(„Schedule a conversation“) rund 230 px breit, mit Markentext wurde die
Menü-Schaltfläche bei 430 px (iPhone Pro Max) rechts beschnitten. */
@media (max-width: 500px){
.brand__text{ display: none; }
.header__cta{ padding: 8px 12px; font-size: 12px; }
}
@media (max-width: 980px){
.split, .split--wide-text{ grid-template-columns: 1fr; gap: 40px; }
.hero{ min-height: auto; padding-top: calc(var(--header-h) + 48px); }
.principles{ grid-template-columns: 1fr; gap: 0; }
.principle{ padding: 18px 0; }
.steps{ grid-template-columns: 1fr; }
.offers--cols{ grid-template-columns: 1fr; }
.offer-grid{ grid-template-columns: 1fr; }
.band{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Fälle: Meta oben, Text darunter */
.case{ grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 720px){
.brand__name{ font-size: 12.5px; }
.brand__sub{ display: none; }
.brand__mark{ width: 36px; height: 36px; }
.hero__cta .btn{ width: 100%; justify-content: flex-start; }
.band{ grid-template-columns: 1fr; }
.case__steps{ grid-template-columns: 1fr; }
}
/* ---- Hero ohne Scrollen bei 100 % Zoom (06.09.2026) -----------------------
Ziel: Vom Kicker bis zu den beiden Buttons ist der Hero auf einen Blick
sichtbar. Der Engpass ist die Fensterhöhe und nicht die Breite. Diese
Stufen gelten nur noch für den Hero der Startseite. Die Produktseiten
hatten dieselbe Mechanik, dort ist sie am 07.09.2026 aufgegeben worden,
siehe Abschnitt 11. Die Stufen wirken erst ab
981 px Breite, darunter stehen die Spalten ohnehin untereinander und
Scrollen ist normal.
Ohne Stufen braucht der Hero etwa 800 px Fensterhöhe (Stand 22.09.2026,
ohne Angebots-Pills). Faustwerte für die Fensterhöhe abzüglich
Browser-Rahmen:
1080 px Bildschirm → etwa 950 px → keine Stufe nötig
900 px Bildschirm → etwa 770 px → Stufe 1
768 px Bildschirm → etwa 640 px → Stufe 2
600 px Fensterhöhe → Stufe 3
Die Schwellen liegen jeweils über dem gemessenen Bedarf der nächsttieferen
Stufe, damit an keiner Grenze eine Lücke entsteht.
Wenn es trotzdem knapp wird, ist die wirksamste Stellschraube nicht das CSS,
sondern der Text. [S1.stance] und der Untertitel sind die größten Einzelposten. */
/* Stufe 1 */
@media (min-width: 981px) and (max-height: 900px){
.hero:not(.product-hero){ padding: calc(var(--header-h) + 20px) 0 36px; }
.hero:not(.product-hero) h1{ font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin-top: 16px; }
.hero:not(.product-hero) .hero__role{ margin-top: 12px; }
.hero:not(.product-hero) .hero__divider{ margin: 14px 0; }
.hero:not(.product-hero) .hero__quote{ font-size: clamp(1.05rem, 1.9vw, 1.32rem); }
.hero:not(.product-hero) .lead{ margin-top: 14px; }
.hero:not(.product-hero) .hero__cta{ margin-top: 22px; }
}
/* Stufe 2 */
@media (min-width: 981px) and (max-height: 790px){
.hero:not(.product-hero){ padding: calc(var(--header-h) + 14px) 0 28px; }
.hero:not(.product-hero) h1{ font-size: clamp(2rem, 3.9vw, 2.9rem); margin-top: 12px; }
.hero:not(.product-hero) .hero__role{ margin-top: 10px; }
.hero:not(.product-hero) .hero__divider{ margin: 10px 0; }
.hero:not(.product-hero) .hero__quote{ font-size: clamp(1rem, 1.7vw, 1.2rem); }
.hero:not(.product-hero) .lead{ margin-top: 10px; font-size: .95rem; line-height: 1.6; }
.hero:not(.product-hero) .hero__cta{ margin-top: 16px; }
}
/* Stufe 3: sehr flache Fenster. Der Trenner entfällt, die Konstellation wird
schmaler, damit die Textspalte die Höhe bestimmt und nicht die Grafik. */
@media (min-width: 981px) and (max-height: 660px){
.hero:not(.product-hero){ padding: calc(var(--header-h) + 10px) 0 22px; }
.hero:not(.product-hero) .hero__kicker{ padding: 6px 13px; }
.hero:not(.product-hero) h1{ font-size: clamp(1.8rem, 3.2vw, 2.3rem); margin-top: 10px; }
.hero:not(.product-hero) .hero__role{ margin-top: 8px; font-size: 1rem; }
.hero:not(.product-hero) .hero__divider{ display: none; }
.hero:not(.product-hero) .hero__quote{ margin-top: 12px; font-size: clamp(.95rem, 1.5vw, 1.08rem); line-height: 1.45; }
.hero:not(.product-hero) .lead{ margin-top: 8px; font-size: .9rem; line-height: 1.55; }
.hero:not(.product-hero) .hero__cta{ margin-top: 14px; }
.hero:not(.product-hero) .hero__cta .btn{ padding: 10px 18px; min-height: 42px; }
.hero:not(.product-hero) .constellation{ max-width: 420px; margin-left: auto; }
}
/* ==========================================================================
PRODUKTSEITEN
Eigenständige Unterseiten unter produkte/. Alles hier ist additiv, die
Klassen des One-Pagers bleiben unberührt. Wo möglich werden bestehende
Bausteine weiterverwendet (.section, .eyebrow, .these, .offers, .offer,
.card, .steps, .btn), hier stehen nur die Ergänzungen.
========================================================================== */
/* Ebene 2 Variante. Produkt-Hero, gleicher Atem wie der Hero der Startseite.
Bis 06.09.2026 zog dieser Block alle Abstände um rund 35 Prozent enger,
damit These, Problem, Lösung und Handlung ohne Scrollen zusammen sichtbar
blieben. Diese Doktrin ist am 07.09.2026 aufgegeben, siehe Abschnitt 11.
Hier steht seitdem nur noch, was für alle drei Produktseiten gilt und von
der Startseite abweicht.
Die Kicker-Pille ist ersatzlos entfallen, im CSS wie im Markup. Sie
wiederholte wörtlich den Breadcrumb zwei Zeilen darüber. Der Trenner ist
zurück und steht wie auf der Startseite zwischen Produktzeile und These.
Einzige bewusste Abweichung bei der Schrift ist die Obergrenze der
Headline. Die Textspalte der Produktseiten ist schmaler als die Hero-Spalte
der Startseite, mit 4rem stünde „AI-Steuerungsfähigkeit“ dort dreizeilig. */
.product-hero h1{ margin-top: 0; font-size: clamp(2.2rem, 4.4vw, 3.2rem); }
/* Telefone. Die Untergrenze von 2.2rem war zusammen mit text-transform:
uppercase aus .hero h1 zu gross fuer ein Wort wie „AI-Steuerungsfaehigkeit“.
Gemessen am 10.09.2026: Die Ueberschrift erzwang 433 Pixel Breite und schob
damit die ganze Seite ueber den Rand, bei 320 Pixeln Fensterbreite um 153
Pixel. Die Trennung nach dem Bindestrich allein reichte nicht, der zweite
Teil blieb zu lang. Deshalb hier eine kleinere Untergrenze, dazu deutsche
Silbentrennung und ein harter Umbruch als letzte Sicherung, damit kein
kuenftiges langes Wort die Seite erneut aufreisst. */
@media (max-width: 560px){
.product-hero h1{
font-size: clamp(1.45rem, 6vw, 2.2rem);
-webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
}
}
.product-hero .hero__quote .hl{ color: var(--gold); }
/* Zielgruppen- und Methodenzeile. Steht auf assessment.html in der Textspalte
und braucht dort die Trennlinie, auf ai-factory.html unter der Grafik, wo
die Grafik schon trennt. Für den zweiten Fall gibt es den Modifier
.meta--under-viz, damit keine Positionsregel gegen diese Regel konkurriert. */
.product-hero .meta{
margin-top: var(--sp-l); padding-top: var(--sp-s); border-top: 1px solid var(--line-soft);
font-size: .88rem; font-weight: 300; line-height: 1.7; color: var(--text-muted);
max-width: 58ch;
}
.meta--under-viz{ margin-top: var(--sp-m); padding-top: 0; border-top: 0; }
.cta-note{
margin-top: var(--sp-m); font-size: .86rem; font-weight: 300; line-height: 1.7;
color: var(--text-muted); max-width: 56ch;
}
/* ---- Produktseiten 2 + 3 (29.08.2026) ------------------------------------
Dimensionszeile auf der Assessment-Seite und die Tiefen-Liste unter der
Stufen-Grafik. Additiv, nichts davon berührt den One-Pager. */
.product-hero .dims-line{
margin-top: var(--sp-s); max-width: 58ch;
font-size: .84rem; font-weight: 300; line-height: 1.8; letter-spacing: .03em;
color: var(--text-muted);
}
/* Die Assessment-Seite ist die dichteste der drei. Ihre rechte Spalte trägt
die Stufen-Grafik plus drei Tiefen, darunter die Notiz. Die Grafik bleibt
bei 360 px, damit die Textspalte die Höhe bestimmt und nicht das Bild. */
.depth-viz{ max-width: 360px; margin-left: auto; }
.depths{ margin-top: var(--sp-m); display: grid; gap: var(--sp-s); }
.depth{ border-left: 2px solid rgba(138,107,35,.45); padding-left: 14px; }
.depth h3{ font-size: .95rem; font-weight: 600; color: var(--text); }
.depth p{
margin-top: 4px; font-size: .84rem; font-weight: 300; line-height: 1.6;
color: var(--text-muted);
}
/* Überschrift „Zwei Partner, ein Format“ auf der Produktseite Crew unter
Druck. Der übrige Partnerblock ist am 07.09.2026 entfallen, der Umbau vom
06.09. hat ihn durch zwei gleich grosse Kacheln (.partners) ersetzt. */
.partner__label{
font-size: var(--label-sm); font-weight: 600; letter-spacing: var(--label-sm-tr); text-transform: uppercase;
color: var(--text-muted);
}
@media (max-width: 980px){
.product-hero .hero__quote{ max-width: none; }
}
/* Reduced Motion: alles sofort im Endzustand */
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior: auto; }
*, *::before, *::after{
animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
.bg__glow{ animation: none; }
.hero__divider{ width: 160px; }
[data-reveal]{ opacity: 1; transform: none; }
.const-course{ stroke-dashoffset: 0 !important; }
.radar__area{ transform: scale(1) !important; opacity: 1 !important; }
.radar__dot{ opacity: 1 !important; }
}
/* ============================================================================
11. Rückweg auf Unterseiten + Layout der Produktseiten
----------------------------------------------------------------------------
.crumb Breadcrumb „Startseite › Produkte & Services › Seite“ direkt
unter dem Header. Steht auf allen Unterseiten, also auch auf
leistungen/*.html und produkte/index.html. Vorher gab es nur
das Logo und den Footer-Link als Rückweg, beides fand Erik
nicht (Grilling 06.09.2026).
.p1 Produktseite Crew unter Druck. Links Problem, Idee und die eine
Handlung, rechts die beiden Partner und die Saison. Trägt keine
eigenen Schriftgrößen mehr, alles kommt aus .hero und
.product-hero.
07.09.2026, zweite Fassung. Die Ein-Screen-Doktrin ist aufgegeben. Vorher
dehnte main.onescreen die Seite auf Fensterhöhe und vier max-height-Stufen
bei 930, 900, 810 und 760 px schrumpften Schrift und Abstände, bis alles
hineinpasste. Bei 707 px Fensterhöhe griffen alle Stufen gleichzeitig, das
Ergebnis wirkte gequetscht und ließ unter dem Inhalt trotzdem ein Drittel
der Höhe leer. Jetzt gilt: Abstände und Schriftgrößen bleiben auf dem
Niveau der Startseite, der Hero füllt den ersten Screen als Untergrenze,
und wenn der Inhalt größer ist, scrollt die Seite. Wird es eng, ist die
Stellschraube der Text und nicht das CSS. Wer hier wieder Stufen einzieht,
dreht diese Entscheidung zurück.
Zuständigkeitsmodell, geprüft von pruefe-css.py im Wurzelverzeichnis:
Ebene 1 Basis .hero, .hero__*, .lead, .body Typografie und Abstände
Ebene 2 Variante .product-hero nur was für alle drei
Produktseiten gilt
Ebene 3 Seite .p1__*, .depths, .factory nur Layout
Ebene 4 Kontext .crumb + … nur Ränder
Eine Eigenschaft eines Elements wird von genau einer dieser Ebenen
überschrieben. Ausnahmen tragen einen Kommentar mit dem Wort „Ausnahme“.
========================================================================== */
.crumb{
position: relative; z-index: 2;
padding-top: calc(var(--header-h) + 10px);
font-size: 11.5px; letter-spacing: .06em; color: var(--text-muted);
}
.crumb a{ color: var(--text-muted); text-decoration: none; transition: color .2s var(--ease); }
.crumb a:hover{ color: var(--gold); }
.crumb .sep{ color: var(--gold); margin: 0 8px; }
.crumb .here{ color: var(--text); font-weight: 500; }
/* Ebene 4 Kontext. Der Breadcrumb trägt den Abstand zum Header, hier steht
der Abstand vom Breadcrumb zum Inhalt. Er liegt beim Vergleichswert von
.section auf der Startseite. Gilt für produkte/*.html und leistungen/*.html
gleichermaßen. Schriftgrößen gehören auf diese Ebene nicht. */
.crumb + .hero, .crumb + .section{ padding-top: var(--sp-block); }
/* Der Produkt-Hero füllt den ersten Screen, ohne ihn zu erzwingen. Abgezogen
werden die Breadcrumb-Zeile (Header plus 10 px Abstand plus eine Zeile,
zusammen rund 28 px über --header-h) und der Footer. Reicht der Platz nicht,
wächst der Hero darüber hinaus und die Seite scrollt.
Das ist der Unterschied zum früheren main.onescreen. Jenes dehnte die Seite
auf Fensterhöhe, während der Inhalt oben klebte, und ließ darunter bei
707 px Fensterhöhe rund ein Drittel der Höhe leer. Hier steht eine
Untergrenze, keine Dehnung. --header-h ist seit dem 22.09.2026 auf allen
Breiten gleich, die Navigation liegt schmal hinter der Menü-Schaltfläche. */
.crumb + .hero{
--crumb-h: calc(var(--header-h) + 28px);
--footer-h: 74px;
min-height: calc(100vh - var(--crumb-h) - var(--footer-h));
min-height: calc(100svh - var(--crumb-h) - var(--footer-h));
padding-bottom: var(--sp-edge);
}
/* Ebene 3 Seite. Ab hier nur noch Layout und Bausteine, die es allein auf
produkte/executive-readiness.html gibt. Die Typografie kommt vollständig
aus .hero und .product-hero, damit nicht zwei Blöcke gleicher Spezifität
um dieselben Eigenschaften konkurrieren. */
.p1__grid{
display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: clamp(32px, 5vw, 72px); align-items: start;
}
/* Ausnahme zur Ebene-4-Regel .crumb + .hero und zu .hero aus Ebene 1.
Grund: Die Untergrenze von einem Screen zusammen mit align-items: center
verteilte den Rest als Leerraum über UND unter dem Hero-Inhalt. Der Hero
las dadurch als abgeschlossener Screen und die Seite beim Rauszoomen als
zwei Seiten (Sichtprüfung 09.09.2026). Diese Seite füllt den ersten
Screen seit dem Umbau aus dem Inhalt heraus, links der Text, rechts das
Bild. Die Regel gilt bewusst nur hier. Die beiden anderen Produktseiten
haben das Problem nicht, dort füllt eine Grafik die rechte Spalte.
Gleiche Spezifität wie .crumb + .hero, steht später und gewinnt deshalb. */
.hero.p1{ min-height: 0; align-items: start; }
/* Das Stimmungsbild in der rechten Hero-Spalte (09.09.2026). Aufbau wie
.portrait auf der Startseite, das dieselbe Aufgabe löst. Der Verlauf liegt
hinter dem Bild, deckt die Ladezeit ab und trägt die Fläche, solange noch
keine Datei vorliegt. Die Einbettung in die dunkle Farbwelt entsteht aus
diesem Verlauf und der leichten Entsättigung, nicht aus einer Tonung. */
.p1__photo{
margin: 0; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden;
border: 1px solid var(--line-soft);
background:
radial-gradient(80% 60% at 50% 30%, rgba(201,162,75,0.10), transparent 70%),
linear-gradient(160deg, #221c12, #12100b);
}
.p1__photo img{
display: block; width: 100%; height: 100%; object-fit: cover;
filter: saturate(0.9) contrast(1.02);
}
/* Die Kernfrage schließt seit dem 08.09.2026 an den Anlass an und braucht
deshalb einen eigenen Abstand nach oben. .hero__quote stand vorher direkt
unter dem Trenner und hatte keinen. Ebene 3 setzt hier nur Abstand, keine
Schrift, die Größe kommt weiter aus .hero__quote. */
.p1 .hero__quote{ margin-top: var(--sp-m); max-width: 40ch; }
/* Was das Format ist, in drei Saetzen (08.09.2026). Eigener Baustein und
nicht .lead mit Zusatzregel, weil er anders aussehen soll als der Anlass
darueber: etwas kleiner, mit goldener Kante links, damit er sich als
Faktenblock vom Fliesstext abhebt. Als eigener Baustein setzt er seine
Typografie selbst und tritt keiner Basis-Klasse ins Gehege. */
.p1__format{
margin-top: var(--sp-m); max-width: 44ch;
padding-left: clamp(12px, 1.4vw, 18px);
border-left: 2px solid var(--gold);
font-size: .92rem; font-weight: 300; line-height: 1.65; color: var(--text-muted);
}
.p1__format strong{ font-weight: 600; color: var(--text); }
/* Wer an Bord ist (09.09.2026). Der Block stand bis dahin als aside im Hero
und sitzt jetzt zwischen den Einwänden und dem Abschluss. Der Abschluss
darunter steht auf der Mittelachse (.contact-final), also steht dieser
Block ebenfalls dort. Sonst zerfiele die untere Seitenhälfte in zwei
Ausrichtungen, und genau solche Brüche waren der Anlass des Umbaus. Der
Fließtext in den Kacheln bleibt linksbündig, zentriert liest er sich
schlecht. */
.p1__crew{ padding-top: var(--sp-block); padding-bottom: 0; text-align: center; }
.p1__crew .p1__partners{ max-width: 880px; margin-inline: auto; text-align: left; }
.p1__crew .p1__dates{ max-width: 560px; margin-inline: auto; }
.p1__partners{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-s); margin-top: var(--sp-m); }
.p1__tile{
border: 1px solid var(--line-soft); background: var(--card); border-radius: 14px;
padding: var(--sp-m);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.p1__logo{
display: block; width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
border: 1px solid var(--line-soft); background: rgba(26,22,16,0.05);
}
.p1__logo img{ display: block; width: 100%; height: 100%; object-fit: contain; }
.p1__name{ margin-top: 12px; font-size: .86rem; font-weight: 700; letter-spacing: .04em; color: var(--text); line-height: 1.25; }
.p1__name a{ color: var(--text); text-decoration: none; border-bottom: 1px solid var(--gold); transition: color .2s var(--ease); }
.p1__name a:hover{ color: var(--gold); }
.p1__person{ margin-top: 2px; font-size: .78rem; font-weight: 500; color: var(--gold); }
/* Seit dem 08.09.2026 trägt .p1__role nur noch den kurzen Rollentitel und
.p1__body den Satz darunter. Damit die beiden nicht ineinanderlaufen, steht
der Titel in der helleren Textfarbe und etwas fester, der Satz bleibt
gedämpfter Fließtext. */
.p1__role{ margin-top: 8px; font-size: .78rem; font-weight: 500; line-height: 1.4; color: var(--text); }
.p1__body{ margin-top: 8px; font-size: .8rem; font-weight: 300; line-height: 1.55; color: var(--text-muted); }
.p1__dates{
margin-top: var(--sp-m); padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px;
background: rgba(201,162,75,0.06); display: flex; align-items: center; gap: 18px;
}
.p1__dates-head{ white-space: nowrap; }
.p1__dates-kicker{ display: block; font-size: var(--label-sm); font-weight: 600; letter-spacing: var(--label-sm-tr); text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.p1__dates-big{ display: block; font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1.45rem; line-height: 1; color: var(--gold); }
.p1__dates-text{ font-size: .86rem; line-height: 1.5; color: var(--text); }
/* ---- Die drei Karten und der Abschluss (08.09.2026) ----------------------
Der Hero bringt seinen unteren Rand über --sp-edge selbst mit, deshalb
beginnt der Kartenblock ohne eigenen oberen Abstand. .offers trägt sonst
einen Abstand zum Blockkopf, den es hier nicht gibt. */
/* Nach unten ebenfalls kein eigener Abstand. Der Block „Was es nicht ist“
gehoert inhaltlich zu den Karten und bringt seinen Abstand ueber
.p1__nots selbst mit. Stuenden beide Abstaende nebeneinander, klafften bei
1500 px Fensterhoehe rund 190 px Leere dazwischen (Sichtpruefung
08.09.2026). */
.p1__detail{ padding-top: 0; padding-bottom: 0; }
/* Die Abgrenzung ueber den Karten (08.09.2026). Die Schrift kommt vollstaendig
aus .these, hier steht nur der Abstand nach unten zu den Karten und eine
Breitengrenze, damit die zwei Saetze auf zwei Zeilen umbrechen und nicht
ueber die ganze Schale laufen. */
.p1__cards-these{ margin-bottom: var(--sp-l); max-width: 30ch; }
.p1__cards{ margin-top: 0; }
/* Die Karten tragen mehr Text als die Angebotskarten des One-Pagers und
bekommen deshalb etwas mehr Luft. Die Absätze innerhalb einer Karte sind
als doppelter Umbruch gesetzt, weil der Sync je Marker ein Element füllt
und kein zweites anlegen kann. */
.p1__cards .offer{ padding: var(--sp-m) clamp(18px, 2.2vw, 26px); }
.p1__cards .offer p{ margin-top: 10px; }
/* ---- Was es nicht ist (08.09.2026, entrahmt am 09.09.2026) ---------------
Zwei Textspalten unter einer Linie, keine Karten mehr. Bis zum 09.09.2026
war das der zweite von zwei .offers-Bloecken. Fuenf gleich gebaute Karten
uebereinander lasen beim Rauszoomen als Wand und liessen die Seitenmitte
monoton wirken. Jetzt wechselt der Rhythmus einmal: oben drei Karten, hier
zwei offene Spalten. Eigener Baustein und keine Zusatzregel auf .offer,
damit er seine Typografie selbst setzen darf, wie .p1__format es vormacht.
Der Block sitzt zwischen den drei Karten und dem Abschluss und braucht nach
oben weniger Luft als eine volle Sektion, weil er inhaltlich zu den Karten
gehoert. */
.p1__nots{ padding-top: var(--sp-block); padding-bottom: 0; }
.p1__counter{
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(24px, 3vw, 44px);
}
.p1__counter-item{ border-top: 1px solid var(--line); padding-top: var(--sp-m); }
.p1__counter-item h2{ font-size: .95rem; font-weight: 600; line-height: 1.35; color: var(--text); }
.p1__counter-item p{ margin-top: 10px; font-size: .88rem; font-weight: 300; line-height: 1.6; color: var(--text-muted); }
/* Der Abschluss steht auf derselben Linie wie die Kontaktsektion der
Startseite, braucht aber Abstand zu den Karten darüber. Seit dem
09.09.2026 traegt er die einzige Handlung der Seite und darunter die
Antwortzusage. Deshalb steht der Knopf hier in einer Spalte und nicht in
einer Reihe. Der Abstand zwischen beiden kommt aus dem margin-top von
.cta-note, das Gap bleibt deshalb bei null. */
.p1__end{ padding-top: var(--sp-block); }
.p1__end .hero__cta{ flex-direction: column; align-items: center; gap: 0; }
@media (max-width: 980px){
/* Einspaltig. Der Hero wächst mit dem Inhalt und braucht keine Untergrenze. */
.crumb + .hero{ min-height: 0; }
.p1__grid{ grid-template-columns: 1fr; gap: 34px; }
/* Einspaltig rutscht das Bild unter den Text. Ueber die volle Schalenbreite
wuerde ein hochkantes Bild die Seite auseinanderziehen, deshalb hier eine
Breitengrenze auf der Mittelachse. */
.p1__photo{ max-width: 420px; margin-inline: auto; }
.p1__dates{ flex-wrap: wrap; gap: 10px 18px; }
}
@media (max-width: 845px){
/* Dieselbe Grenze wie .offers--cols, damit die beiden Bloecke der Seite
gleichzeitig umbrechen und nicht nacheinander. */
.p1__counter{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
.p1__partners{ grid-template-columns: 1fr; }
.crumb{ font-size: 11px; }
}