/* ============================================================
LumaMed — Hi-Fi stylesheet (LumaMed Design System)
Creme field · Dark Blue type · Clay accents · hairlines
============================================================ */
:root {
--lm-creme: #FFFAF4;
--lm-dark-blue: #062B51;
--lm-clay: #D37D62;
--lm-warm-1: #FFE8B1;
--lm-warm-2: #FFC08E;
--lm-warm-3: #FA996F;
--fg1: var(--lm-dark-blue);
--fg2: rgba(6, 43, 81, 0.72);
--fg3: rgba(6, 43, 81, 0.66);
--fg-on-dark: var(--lm-creme);
--fg-on-dark-2: rgba(255, 250, 244, 0.72);
--hair: rgba(6, 43, 81, 0.16);
--hair-strong: var(--lm-dark-blue);
/* --- V2 DEPTH: surfaces (warm, never pure #fff) --- */
--surface-0: #FFFAF4;
--surface-1: #FFFDFA;
--surface-2: #FFFEFC;
--surface-card: #FBF4EC;
--surface-sunken: #FBF3E9;
--surface-dark: #062B51;
--surface-dark-raised: #0A335E;
/* --- V2 DEPTH: borders (functional edges >=3:1) --- */
--hairline-soft: 1px solid rgba(6, 43, 81, 0.10);
--hairline: 1px solid rgba(6, 43, 81, 0.14);
--hairline-strong: 1px solid rgba(6, 43, 81, 0.20);
--hairline-on-dark: 1px solid rgba(255, 250, 244, 0.12);
/* --- V3 Tandem: elevation (flat default; subtle resting / hover lift) --- */
--elev-1: 0 1px 4px rgba(6,43,81,0.05);
--elev-2: 0 4px 12px rgba(6,43,81,0.15);
--elev-3: 0 4px 8px rgba(6,43,81,0.06), 0 16px 40px rgba(6,43,81,0.10);
--elev-4: 0 8px 16px rgba(6,43,81,0.08), 0 32px 64px rgba(6,43,81,0.12);
/* --- V3 Tandem: radius (cards/media/pills = 20) --- */
--r-sm: 8px; --r-md: 16px; --r-lg: 20px; --r-xl: 32px;
/* --- V2 MOTION --- */
--dur-fast: 160ms; --dur-base: 320ms; --dur-slow: 560ms;
/* Headerhöhe als Token: der Overlay-Hero zieht sich exakt um diesen Wert nach
oben, und das Mobilmenü setzt darunter an. Nirgends 74px hart eintippen —
sonst driften Leiste, Hero-Versatz und Menü auseinander. */
--hd-h: 74px;
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
--ease-exit: cubic-bezier(0.4, 0, 1, 1);
--font-sans: "Arimo", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
/* Zeilenabstaende nach Textsorte (Agentur-Feedback 07/2026). Vorher lagen
19 verschiedene Werte im Stylesheet, 15px allein kam mit fuenf davon vor. */
--lh-read: 1.6; /* lange Lesestrecken: Artikel, Impressum, Datenschutz, FAQ */
--lh-body: 1.4; /* Marketing-Fliesstext und UI */
--lh-snug: 1.3; /* kleine Titel, mehrzeilige Labels */
/* Display-Stufen (Agentur-Feedback 07/2026). Vorher hatten die Ueberschriften
14 verschiedene clamp()-Definitionen und 8 verschiedene Zeilenabstaende —
jede Komponente brachte ihre eigene mit. Neue Titel nehmen eine dieser
Stufen; keine neuen Einzelwerte. */
--t-d1: clamp(40px, 5.4vw, 74px); /* Hero-Titel */
--t-d2: clamp(32px, 4vw, 56px); /* Sektionstitel */
--t-d3: clamp(28px, 3.2vw, 44px); /* grosse Komponententitel */
--t-d4: clamp(22px, 2.2vw, 30px); /* Karten- und Schritt-Titel */
--t-d5: clamp(19px, 1.8vw, 24px); /* kleine Titel */
--lh-d1: 1.06; /* sehr grosse Zeilen */
--lh-d2: 1.12; /* Standard-Ueberschrift */
--lh-d3: 1.2; /* kleine Titel */
--sp-xs: 8px; --sp-sm: 16px; --sp-md: 24px; --sp-lg: 32px;
--sp-xl: 48px; --sp-xxl: 60px; --sp-section: 80px;
--gut: 64px;
--maxw: 1200px;
--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
/* Review-Guard: nichts darf die Seite horizontal aufblähen (Marquees, Off-Canvas,
Transforms). `clip` statt `hidden`, weil es keinen Scroll-Container erzeugt —
`overflow-y` bleibt `visible` und der sticky Header damit unangetastet.
Achtung: das hier kaschiert Überläufe, es behebt sie nicht. Es gibt deshalb
nie einen horizontalen Scrollbalken; zu breite Inhalte werden am Rand
stillschweigend abgeschnitten. Wer hier etwas ändert, prüft vorher 390/834/
1280/1512px. (Bis 07/2026 stand am Ende des Blocks ein zweites
`overflow-x: hidden`, das diese Zeile überschrieben hat.) */
overflow-x: clip;
background: var(--lm-creme);
color: var(--fg1);
font-family: var(--font-sans);
font-size: 18px;
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
::selection { background: var(--lm-dark-blue); color: var(--lm-creme); }
/* V2 focus: 2px Dark Blue, offset 2px (WCAG 2.4.13, >=3:1) */
:focus-visible { outline: 2px solid var(--lm-dark-blue); outline-offset: 2px; }
html { scroll-padding-top: 92px; }
/* V2 §7: thin tinted scrollbar */
* { scrollbar-width: thin; scrollbar-color: rgba(6,43,81,.25) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(6,43,81,.25); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
/* V2 §12: skip-link to main content */
.skip { position: fixed; top: 10px; left: 10px; z-index: 2000; background: var(--lm-dark-blue); color: var(--lm-creme); padding: 12px 20px; border-radius: 999px; font-family: var(--font-mono); font-size: 13px; text-decoration: none; transform: translateY(-160%); transition: transform .2s var(--ease-standard); }
.skip:focus-visible { transform: translateY(0); }
/* V2 §7: mobile sticky booking CTA — deaktiviert (kein Floating-CTA, überall) */
.mcta { display: none !important; }
/* V2 §6: gate moving gradient on phones */
@media (max-width: 680px) {
[data-grad="drift"] body { animation: none !important; }
.hero { margin: 0; border-radius: 0; }
}
/* sticky-header offset for in-page anchors */
[id] { scroll-margin-top: 92px; }
/* ---------- type helpers ---------- */
.h-xl { font-family: var(--font-sans); font-weight: 500; font-size: var(--t-d1); line-height: var(--lh-d1); letter-spacing: 0; margin: 0; text-wrap: balance; }
.h-lg { font-family: var(--font-sans); font-weight: 500; font-size: var(--t-d2); line-height: var(--lh-d2); letter-spacing: 0; margin: 0; text-wrap: balance; }
/* Zeilenabstand 1.4 statt 1.55 (Agentur-Feedback 07/2026) — setzt den Satz
strammer. Gilt fuer alle Stellen, die vorher 1.55 hatten. Der lange
Lesetext in Artikeln und Rechtstexten behaelt bewusst seine 1.6: dort
stehen seitenlange Absaetze, die eng gesetzt anstrengend werden. */
.body { font-family: var(--font-sans); font-weight: 400; font-size: 18px; line-height: var(--lh-body); color: var(--fg2); margin: 0; }
.body-lg { font-size: clamp(19px, 1.5vw, 22px); line-height: var(--lh-body); color: var(--fg2); margin: 0; }
.kicker { font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .04em; text-transform: lowercase; color: var(--lm-dark-blue); display: inline-flex; align-items: center; gap: 8px; margin: 0; background: rgba(211,125,98,.14); border-radius: 6px; padding: 6px 12px; width: max-content; }
.kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lm-clay); }
.mono-meta { font-family: var(--font-mono); font-weight: 200; font-size: 13px; color: var(--fg3); }
/* ---------- Pillen · ein Primitiv statt sechs Einzelfällen (Agentur-Feedback 07/2026) ----------
Vorher waren es sechs Bauteile mit vier Höhen (15/25/32/35px), drei
Strichstärken (200/300/400), drei Radien und fünf Innenabständen. Das war
zugleich das Barrierefreiheits- und das Gestaltungsproblem.
**Der Kern der Lösung („Ton"):** jeder Status hat eine getönte Füllung und
dazu eine eigens nachgerechnete Schriftfarbe im selben Farbton, plus einen
6px-Punkt. Gemessen auf allen drei hellen Flächen (Creme, Karte,
`--surface-1`) liegt der schlechteste Textwert bei **5,36:1**, der
schlechteste Punkt bei 3,00:1.
**Achtung beim Erweitern:** jeder neue Ton braucht ein eigenes geprüftes
Paar aus Füllung und Schriftfarbe — die Füllungen sind halbtransparent,
es zählt also der zusammengerechnete Grund, nicht der Farbwert. Wer einen
Ton ergänzt, ohne zu messen, baut die Beanstandung wieder ein.
**Pillen auf Fotos tragen ihre eigene Unterlage.** Vorher lag `.hero__badge`
auf einem 12%-Creme-Schleier und `.lead__playtag` auf gar nichts: ihre
Lesbarkeit hing am Motiv, und Motive werden getauscht. `rgba(6,43,81,.72)`
misst selbst über *reinem Weiss* noch 5,7:1 und über Schwarz 16:1, ist also
motivunabhängig. **Wer den Wert senkt, nimmt genau diese Garantie weg.**
Gewicht 300, nicht 200: bei 11px Mono trägt der Kontrastwert allein nicht
(`.pcard__tag`-Lehre). `.kform__chip` ist bewusst NICHT auf 11px verkleinert,
es ist ein Bedienelement und behält seine Antippfläche. */
.loctile__status, .hero__badge, .lead__playtag, .drawer__chip {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono); font-weight: 300; font-size: 11px;
letter-spacing: .06em; text-transform: uppercase;
padding: 6px 12px; border-radius: 999px; border: 1px solid transparent;
width: max-content; white-space: nowrap;
}
/* auf hellem Grund: getönte Füllung + Schriftfarbe im selben Ton.
Neutral ist der Standard, den `.drawer__chip` und jede Pille ohne Status trägt. */
.loctile__status, .drawer__chip {
background: rgba(6,43,81,.07); color: #2C4763; --dot: #5B7A99;
}
.loctile__status.open { background: rgba(46,110,74,.13); color: #2C5B41; --dot: #3E7C5A; }
.loctile__status.soon { background: rgba(150,110,20,.15); color: #6E560F; --dot: #9E7C1E; }
.loctile__status.booked { background: rgba(150,50,38,.13); color: #8E3428; --dot: #B04434; }
/* auf Fotos */
.hero__badge, .lead__playtag {
background: rgba(6,43,81,.72); color: var(--lm-creme); border-color: rgba(255,250,244,.22);
}
/* Statuspunkt — trägt die Farbe, das Wort steht daneben, also nie allein
bedeutungstragend (WCAG 1.4.1). */
.loctile__status::before, .hero__badge::before {
content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); flex: none;
}
/* Auf dem Foto dieselbe Semantik, nur aufgehellt. „ausgebucht" war hier vorher
gelb wie „demnächst" — auf dem Hub ist es rot. Gleicher Status, gleiche Farbe. */
.hero__badge { --dot: #7FD3A0; }
.hero__badge--soon { --dot: #F1C24E; }
/* #F09184 lag über einem weissen Motiv nur bei 2,57:1 — die Punkte halten
mindestens 3:1 zum Pillengrund (WCAG 1.4.11), gemessen im ungünstigsten Fall
„Foto ist weiss". Pflicht wäre es nicht, weil das Wort danebensteht und die
Bedeutung trägt, aber ein Punkt, den man nicht sieht, kann auch weg. */
.hero__badge--booked { --dot: #FFA093; }
/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.section { padding: var(--sp-section) 0; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-xl); padding-bottom: var(--sp-lg); margin-bottom: var(--sp-xxl); }
/* Abstand Überschrift → Fließtext: 32px (--sp-lg), vorher 22px (Agentur-Feedback
07/2026). Eine Überschrift OHNE Fließtext hat 92px Luft nach unten (32 padding
+ 60 margin), mit Fließtext waren es nur 22px — bei 47–56px Schriftgröße also
0,4× der Schriftgröße, der Text klebte an der Überschrift. 22px lag ausserdem
neben der Abstandsskala (8/16/24/32/48/60). Mobil gilt weiter --m-title-gap. */
.sec-head__intro { flex: 1; min-width: 0; max-width: none; display: grid; gap: var(--sp-lg); }
/* Sektionsueberschriften laufen wieder ueber die volle Textspalte (Entscheidung
Till, 07/2026). Damit ist der Deckel aus dem Agentur-Feedback („Ueberschriften
sollten nicht ueber den gesamten Raum laufen, bei der Schriftgroesse maximal
660px") zurueckgenommen — er stand zwischenzeitlich auf 660px, dann 820px,
zuletzt 940px, und wurde in jeder Runde weiter aufgemacht, weil die Bloecke
als zu eng empfunden wurden. Statt einer vierten Zwischenzahl faellt er ganz.
Es gilt wieder „Headlines full-width": die Textspalte misst 1072px (--maxw
1200 minus 2x --gut), dort endet die Ueberschrift.
WER IHN WIEDER SETZT, braucht auch `text-wrap` (siehe unten) — die beiden
haengen zusammen und nur eines von beiden zu aendern erklaert das Ergebnis
nicht. */
/* `text-wrap: pretty` statt des geerbten `balance` aus .h-lg (07/2026).
DIESE REGEL TRAEGT JETZT DAS FULL-WIDTH-VERHALTEN, nicht mehr nur eine
Feinheit neben dem Deckel: `balance` setzt moeglichst gleich lange Zeilen,
statt die verfuegbare Breite zu fuellen, und hoerte deshalb weit vor der
Spaltenkante auf. Gemessen bei 1512px, Box jeweils 820px breit:
„Das 360° Fruehwarnsystem …" balance 566px → pretty 712px, beide 2 Zeilen
„Wir beginnen mit der …" balance 517px → pretty 639px, beide 3 Zeilen
Also 120–150px zurueck, ohne eine einzige zusaetzliche Zeile. Wuerde man hier
auf `balance` zurueckfallen, saehen die Ueberschriften trotz entferntem
Deckel wieder eng aus, und die naechste Runde suchte den Fehler bei der
Breite. Bewusst auf .sec-head__intro begrenzt und nicht in .h-lg geaendert —
Hero- und Blog-Titel behalten `balance`, dort ist die ruhige Silhouette
gewollt und es steht kein Grid daneben, an dem sich die Zeile messen muesste. */
.sec-head__intro h1, .sec-head__intro h2 { text-wrap: pretty; }
/* Der Einleitungsabsatz laeuft ebenfalls voll, der 62ch-Deckel ist mit dem der
Ueberschriften gefallen (Entscheidung Till, 07/2026). Bewusst in Kauf
genommen: bei 1072px Spaltenbreite sind das rund 130 Zeichen pro Zeile
gegenueber der lesbaren Spanne 45–75.
Die 20px bleiben, obwohl sie urspruenglich nur dazu dienten, den 62ch-Deckel
breiter zu machen. Sie sind jetzt der einzige Hebel, der die Zeile ueberhaupt
noch kuerzt: bei 18px waeren es rund 145 Zeichen. Wer hier auf 18px
zurueckgeht, macht die Zeile also laenger, nicht kuerzer.
ACHTUNG falls doch wieder ein `ch`-Wert gesetzt wird: `ch` ist in Arimo NICHT
die mittlere Zeichenbreite. 1ch (die Breite der Ziffer 0) misst bei 18px
10,02px, ein durchschnittliches Zeichen deutscher Prosa aber nur 8,26px.
62ch sind gemessene 75 Zeichen pro Zeile, nicht 62.
Der Deckel stand vor 07/2026 als inline `max-width` auf jedem einzelnen
Absatz (62ch/64ch/60ch, je nach Seite). Diese inline-Styles sind entfernt und
sollten nicht zurueckkommen — Inline schlaegt Stylesheet, ein einzelner
Absatz mit eigener Breite faellt aus der Reihe und ist schwer zu finden. */
.sec-head__intro .body { font-size: 20px; }
.sec-head .kicker { margin-bottom: 4px; }
.team-hero-photo { display: none; }
/* ---------- buttons (squared, solid dark-blue) ---------- */
.btn { font-family: var(--font-sans); font-size: 16px; font-weight: 500; padding: 14px 28px; border: 1px solid var(--lm-dark-blue); background: var(--lm-dark-blue); color: var(--lm-creme); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; border-radius: var(--r-sm); transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); white-space: nowrap; }
/* Hover = anheben + eine Spur heller (Agentur-Feedback 07/2026).
Vorher lief der Hover über `opacity: .88` plus --elev-1 — einen Schatten mit
5 % Alpha, also praktisch unsichtbar. Deckkraft ist zudem der falsche Kanal:
darüber läuft auch `.btn[disabled]`, der Hover schob den Button optisch also
Richtung „deaktiviert" statt Richtung „aktiv". Auf dem Hero-Foto sah er
dadurch blass aus statt angefasst.
`@media (hover: hover)`: ohne das bleibt der Effekt auf Telefonen nach dem
Antippen kleben, weil Touch-Browser :hover bis zum nächsten Tap halten. */
@media (hover: hover) {
.btn:hover { transform: translateY(-2px); box-shadow: var(--elev-2); background: var(--surface-dark-raised); border-color: var(--surface-dark-raised); }
/* Deaktivierte Buttons heben nicht ab. */
.btn[disabled]:hover { transform: none; box-shadow: none; background: var(--lm-dark-blue); border-color: var(--lm-dark-blue); }
}
.btn:active { transform: translateY(0); box-shadow: var(--elev-1); }
.btn--ghost { background: var(--lm-dark-blue); color: var(--lm-creme); border-color: var(--lm-dark-blue); }
.btn--sm { padding: 9px 18px; font-size: 14px; }
/* ---------- header (V2 glass overlay-light, level-3) ---------- */
/* Randlos: keine Unterkante, kein Schatten (Agentur-Feedback 07/2026).
Der Header trennt sich allein über Blur + Creme-Schleier vom Inhalt. Die
Hairline plus --elev-3 (zwei gestapelte Schatten bis 40 px Radius) legten
eine sichtbare Kante quer über das Hero-Bild — der Header sass wie eine
aufgeklebte Leiste davor, statt darauf zu schweben.
Beim Hinzufügen neuer Header-Zustände (scrolled o. Ä.) nicht wieder
Rahmen/Schatten einführen. */
.hd { position: sticky; top: 0; z-index: 100; background: rgba(255,250,244,.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: background var(--dur-base) var(--ease-standard), backdrop-filter var(--dur-base) var(--ease-standard); }
.hd__in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-lg); height: var(--hd-h); }
/* Es war nur die Höhe gesetzt. Wird der Platz im Header knapp, staucht Flexbox
ein dann in der Breite — der Schriftzug wurde bei 390px um 33 %, bei
360px um 50 % zusammengedrückt. object-fit hält das Seitenverhältnis: reicht
der Platz nicht, skaliert das Logo proportional herunter statt sich zu
verzerren, und bleibt dabei linksbündig. */
.hd__logo { height: 19px; object-fit: contain; object-position: left center; transition: opacity var(--dur-fast) var(--ease-standard); }
@media (hover: hover) {
/* Das Logo ist der Home-Link — bekam als einziges Element im Header nie eine
Rueckmeldung. Hier ist Deckkraft in Ordnung: ein Link hat keinen
Deaktiviert-Zustand, mit dem sie kollidieren koennte. */
.hd__in a:hover .hd__logo { opacity: .7; }
}
.hd__nav { display: flex; gap: var(--sp-lg); }
/* Active/hover-Unterstrich: 1.5px + mehr Luft unter der Baseline, sonst klebt
die Linie an den Glyphen und der aktuelle Tab geht unter. */
.hd__nav a { font-size: 15px; color: var(--fg1); text-decoration: none; padding: 6px 0 8px; border-bottom: 1.5px solid transparent; transition: border-color .18s var(--ease), color var(--dur-base) var(--ease-standard); }
.hd__nav a:hover, .hd__nav a.on { border-bottom-color: var(--lm-dark-blue); }
.hd__right { display: flex; align-items: center; gap: var(--sp-md); }
/* Burger ohne Rahmen — die umrandete 40×40-Box war der einzige harte Chrome
in der sonst randlosen Leiste. Hit-Area bleibt 40×40, Hover nur weiche Fläche. */
.hd__burger { display: none; width: 40px; height: 40px; border: 0; border-radius: var(--r-sm); background: transparent; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; padding: 0; }
.hd__burger span { height: 1.5px; background: var(--lm-dark-blue); margin: 0 10px; border-radius: 1px; }
/* ---------- Overlay-Header über Vollbild-Heroes (Agentur-Feedback 07/2026) ----------
Nur die Kante zu entfernen hat das Problem nicht gelöst: die Leiste belegte
weiter ihr eigenes Creme-Band ÜBER dem Video, also blieb eine harte
Horizontale, wo Creme auf Bild trifft. Jetzt beginnt das Video ganz oben und
läuft unter der Leiste durch — erst dadurch macht das Blur überhaupt Sinn.
**Opt-in über `data-hdoverlay` am ``-Tag**, nicht über `:has(.hero)`:
es hängt nicht am Vorhandensein eines Elements, sondern daran, ob der Hero
dieser Seite dunkel genug für creme Navigation ist. Getragen von `.hero`
(Home, Standorte-Hub, fünf Standort-Seiten), `.khero` (beide Karriere-Seiten)
und `.checkhero` (Prozess). Seiten ohne das Attribut behalten die Glasleiste —
dort steht Creme auf Creme, da gibt es keine Kante zu vermeiden.
Das Attribut steht **statisch im Markup** (wie die Tweak-`data-*`), damit schon
der erste Paint stimmt, ganz ohne JS — kein Aufblitzen. Auf Prozess hält
`hifi-common.js` es zusätzlich mit der aktiven Hero-Variante synchron: nur die
Bild-Varianten `a`/`c` sind dunkel, `b`/`d`/`e` sind helle Split-Layouts, auf
denen creme Navigation unlesbar wäre.
**Neue Seite mit dunklem Vollbild-Hero? `data-hdoverlay` ans ``** — und
vorher den Kontrast der Navigation über dem Bild messen (siehe Schleier unten).
Steht bewusst NACH den Grundregeln von .hd/.hd__nav/.hd__burger: es sind
Überschreibungen, und sie sollen auch unter ihnen stehen. (Sie gewännen zwar
ohnehin über die Spezifität — aber Regeln, die oberhalb dessen stehen, was sie
überschreiben, liest beim nächsten Mal niemand richtig.)
Der Default ist bewusst der transparente Zustand; `hifi-reveal.js` setzt beim
Verlassen des Heroes nur `.hd--solid` — eine Klasse mehr in der Spezifität, die
Regel gewinnt also verlässlich gegen den Default. */
html[data-hdoverlay] .hero, html[data-hdoverlay] .khero, html[data-hdoverlay] .checkhero, html[data-hdoverlay] .kihero { margin-top: calc(-1 * var(--hd-h)); }
html[data-hdoverlay] .hd { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Das Logo liegt als SVG vor, dessen Farbe von aussen nicht ansprechbar ist —
der Filter macht die dunkle Wortmarke weiss. Auf dem abgedunkelten Video ist
Weiss von Creme nicht unterscheidbar, ein zweites lohnt dafür nicht. */
html[data-hdoverlay] .hd__logo { filter: brightness(0) invert(1); }
html[data-hdoverlay] .hd__nav > a,
html[data-hdoverlay] .hd__nav .has-drop > a { color: var(--lm-creme); text-shadow: 0 1px 18px rgba(6,43,81,.55); }
/* `.has-drop > a.on` muss mit in die Liste. Auf den Karriere-Seiten ist der
aktive Punkt kein direktes Kind von `.hd__nav`, sondern liegt im Dropdown-
Wrapper (`
Karriere`). `> a.on` traf ihn
deshalb nicht, er fiel auf die Grundregel `.hd__nav a.on` zurück und bekam
dunkelblau — auf dem dunklen Hero-Foto praktisch unsichtbar. Standorte war nie
betroffen, dort ist der aktive Punkt ein direktes Kind.
Beim Hinzufügen neuer Zustände beide Formen bedenken: direktes Kind UND
`.has-drop > a`. Die Hover-Zeile hatte das schon, die Aktiv-Zeile nicht. */
html[data-hdoverlay] .hd__nav > a:hover,
html[data-hdoverlay] .hd__nav > a.on,
html[data-hdoverlay] .hd__nav .has-drop > a:hover,
html[data-hdoverlay] .hd__nav .has-drop > a.on { border-bottom-color: var(--lm-creme); }
/* Tastaturfokus ebenfalls creme. Der globale Ring (`:focus-visible`, dunkelblau)
steht auf dem transparenten Header über dem dunklen Foto fast unsichtbar.
Ring bleibt zusätzlich zur Unterkante: 1,5px Linie allein ist als Fokus-
Anzeige zu schwach (WCAG 2.4.11). */
html[data-hdoverlay] .hd__nav > a:focus-visible,
html[data-hdoverlay] .hd__nav .has-drop > a:focus-visible {
outline-color: var(--lm-creme); border-bottom-color: var(--lm-creme);
}
html[data-hdoverlay] .hd__burger span { background: var(--lm-creme); }
/* Termin-Button im transparenten Zustand: Creme-Füllung mit dunkelblauer Schrift.
Die dunkelblaue Standard-Pille verschwand auf dem abgedunkelten Hero-Video fast
vollständig — die einzige Kante war der 1px-Rand in derselben Farbe. Umgedreht
trägt der Knopf seinen eigenen Grund und ist die hellste Fläche der Leiste, also
auch das erste, was man dort sieht. Gescrollt braucht es keine Regel: dann greift
wieder `.btn` (creme auf dunkelblau) auf der cremen Glasleiste.
Ausgenommen bleibt das offene Mobilmenü — das legt eine creme Fläche unter die
Leiste, ohne `.hd--solid` zu setzen; Creme auf Creme wäre dort unsichtbar.
Luma KI (`data-mode="dunkel"`) ist ausgenommen: dort steht dieselbe Füllung
schon in beiden Zuständen (Regel im Dunkelmodus-Block), und `--surface-card`
ist dunkles Navy statt hellem Creme — der Hover unten würde den Knopf dort
also verdunkeln statt aufhellen. */
html[data-hdoverlay]:not([data-mode="dunkel"]) body:not(:has(.mobile-menu.open)) .hd:not(.hd--solid) .hd__right .btn {
background: var(--lm-creme); border-color: var(--lm-creme); color: var(--lm-dark-blue);
}
@media (hover: hover) {
/* Muss mitgeschrieben werden: `.btn:hover` würde sonst auf die dunkle Füllung
zurückspringen. Anheben und Schatten kommen weiter von dort. */
html[data-hdoverlay]:not([data-mode="dunkel"]) body:not(:has(.mobile-menu.open)) .hd:not(.hd--solid) .hd__right .btn:hover {
background: var(--surface-card); border-color: var(--surface-card); color: var(--lm-dark-blue);
}
}
/* Zurück zur Glasleiste, sobald gescrollt wird (`hifi-reveal.js` setzt die
Klasse ab ~48px). Transparent ist damit nur der Ruhezustand ganz oben; in
Bewegung braucht die Navigation ihren eigenen Grund, weil unter dem Hero
creme und dunkle Sektionen folgen, auf denen creme Schrift unlesbar wäre.
Ebenso bei offenem Mobilmenü: das legt eine creme Fläche unter die Leiste. */
html[data-hdoverlay] .hd.hd--solid,
body:has(.mobile-menu.open) .hd { background: rgba(255,250,244,.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
html[data-hdoverlay] .hd.hd--solid .hd__logo,
body:has(.mobile-menu.open) .hd__logo { filter: none; }
html[data-hdoverlay] .hd.hd--solid .hd__nav > a,
html[data-hdoverlay] .hd.hd--solid .hd__nav .has-drop > a,
body:has(.mobile-menu.open) .hd__nav > a { color: var(--fg1); text-shadow: none; }
/* Gescrollt zurück auf Dunkelblau — auch für `.has-drop > a`, sonst gewinnt die
Creme-Regel von oben und der aktive Karriere-Punkt stünde creme auf der cremen
Glasleiste. Der Fokusring wird hier ebenfalls wieder dunkelblau (der globale
Wert), er braucht keine eigene Zeile. */
html[data-hdoverlay] .hd.hd--solid .hd__nav > a:hover,
html[data-hdoverlay] .hd.hd--solid .hd__nav > a.on,
html[data-hdoverlay] .hd.hd--solid .hd__nav .has-drop > a:hover,
html[data-hdoverlay] .hd.hd--solid .hd__nav .has-drop > a.on { border-bottom-color: var(--lm-dark-blue); }
html[data-hdoverlay] .hd.hd--solid .hd__nav > a:focus-visible,
html[data-hdoverlay] .hd.hd--solid .hd__nav .has-drop > a:focus-visible {
outline-color: var(--lm-dark-blue); border-bottom-color: var(--lm-dark-blue);
}
html[data-hdoverlay] .hd.hd--solid .hd__burger span,
body:has(.mobile-menu.open) .hd__burger span { background: var(--lm-dark-blue); }
/* Offen wird aus dem Burger ein X (Agentur-Feedback 07/2026). Es ist derselbe
Knopf, mit dem man wieder schliesst — das muss man ihm ansehen, sonst sucht
man auf dem Telefon nach einem Ausweg aus dem Menue.
Die Balken liegen 6,5px ausserhalb der Mitte (1,5px hoch, 5px gap), genau um
diesen Betrag holt sie das translateY zurueck; die mittlere blendet weg. */
.hd__burger span { transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); }
body:has(.mobile-menu.open) .hd__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body:has(.mobile-menu.open) .hd__burger span:nth-child(2) { opacity: 0; }
body:has(.mobile-menu.open) .hd__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .hd__burger span { transition: none; } }
/* Burger, Schliessen-Kreuze und Karussell-Pfeile hatten bis 07/2026 gar keinen
Hover — sie sahen aus wie Dekoration. Weiche Flaeche, kein Rahmen. */
@media (hover: hover) {
.hd__burger { transition: background var(--dur-fast) var(--ease-standard); }
.hd__burger:hover { background: rgba(6,43,81,.06); }
html[data-hdoverlay] .hd:not(.hd--solid) .hd__burger:hover { background: rgba(255,250,244,.12); }
}
/* Burger ab 1000px statt erst ab 820px: dazwischen (Tablet quer, kleine Laptops)
passten Logo + ausgeschriebenes Menü + Termin-Button nicht nebeneinander —
die Menüpunkte brachen zweizeilig um und das Logo wurde gestaucht. */
@media (max-width: 1000px) {
.hd__nav { display: none; }
.hd__burger { display: flex; }
}
/* ---------- hero (full-bleed video/image, header overlays) ---------- */
/* Höhe = 95vh ohne max-height-Deckel: auf großen Bildschirmen endete der Hero
sonst bei 920px mitten im Viewport, und man landete auf dem Folgeabschnitt,
der wegen der Reveal-Schwelle (50 % Viewport) noch leer war. Die Mobil-Höhe
setzt der 820px-Block weiter unten.
95vh statt 90vh (Agentur-Feedback 07/2026), seit der Header auf dem Hero liegt:
vorher begann der Hero unter der 74-px-Leiste und belegte damit `74px + 90vh`
— auf 950 px Viewport 98 % der Höhe. Seit er bei 0 beginnt, sind es exakt 90 %,
der Rest-Streifen wuchs von ~20 px auf ~95 px und der Hero verlor sichtbar
Präsenz. 95vh stellt das her (5 % Rest — 42 px bei 832 px Viewport, 54 px bei
1080 px) und behält die Absicht: es soll
etwas hervorschauen, damit klar ist, dass es weitergeht. **Nicht auf 100vh** —
dann fällt genau dieser Hinweis weg.
Gilt NUR für `.hero`. Die anderen Bühnen (`.khero__in`, `.kihero`, `.chk`)
liegen weiter UNTER der Leiste, belegen also schon `74px + 90vh`; mit 95vh
liefen sie über den Viewport hinaus und hätten gar keinen Rest-Streifen mehr. */
.hero { position: relative; height: 95vh; min-height: 680px; overflow: hidden; border-radius: 0; margin: 0; }
.hero > .wrap, .hero__overlay > .wrap { width: 100%; padding-left: var(--gut); padding-right: var(--gut); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; z-index: 1; }
/* Das Video liegt über dem Standbild (img.hero__img) und wird erst eingeblendet,
wenn es wirklich läuft (hifi-home.js setzt .is-playing beim 'playing'-Event).
Blockiert der Browser das Autoplay (iOS-Stromsparmodus, Daten-Sparmodus),
bleibt nur das Standbild sichtbar — der System-Play-Button sitzt dann auf dem
unsichtbaren Video. Direkt ausblenden ließe er sich nicht: modernes iOS kapselt
die Media-Controls in einem geschlossenen Shadow-DOM. */
video.hero__img { opacity: 0; transition: opacity var(--dur-slow) var(--ease-standard); }
video.hero__img.is-playing { opacity: 1; }
/* Gestaltetes 9:16-Poster (hifi-home.js setzt die Klasse beim Fallback-Wechsel):
auf Telefonen unten ausrichten, damit Gesicht und Kinn vollständig sichtbar
sind — der Himmel oben gibt nach, nicht das Gesicht. */
@media (max-width: 600px) {
img.hero__img--poster { object-position: center bottom; }
}
/* Bodenabstand der Hero-Inhalte = 96px, einheitlich über alle vier Bühnen
(`.hero` Home + Standorte, `.chk--a .chk__in` Prozess, `.khero__in` Karriere).
Vorher standen dort 48 / 56 / 64px — drei gewachsene Zahlen ohne gemeinsamen
Grund; der Text klebte sichtbar am unteren Rand. Beim Ändern alle vier
mitziehen, sonst driften die Bühnen wieder auseinander.
ACHTUNG Kontrast: der Text wandert damit in einen helleren Teil des
Boden-Verlaufs. Für die Home-Video-Bühne ist die Deckkraft dort nachgemessen
(siehe Kommentar am Verlauf) — wer weiter hochzieht, misst neu. */
.hero__overlay { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 96px; }
/* ---------- EIN Schleier-System für alle Foto-Heroes ----------
Agentur-Feedback 07/2026: „Nicht ganz klar nach welchem System Heroelemente
zusätzliche Farbverläufe bekommen und wann nicht. Im Zweifel mit Gradient
für Lesbarkeit." Es gab zwei Rezepturen nebeneinander: Home und Standorte
liefen unten auf .45 aus, Karriere und Prozess auf .84. Ergebnis: die einen
zu schwach (creme Titel auf dem hellsten Prozent der Textzone nur 2,8:1,
unter der 3:1-Schwelle), die anderen sichtbar zugeschleiert.
Jetzt eine Rezeptur, zwei Lagen mit klarer Aufgabe:
--hero-scrim-nav trägt die Navigation, läuft knapp unter der Leiste aus,
damit keine harte Kante entsteht.
--hero-scrim-text trägt Titel und Unterzeile, hält unten ein Plateau und
gibt die Bildmitte wieder frei.
Gemessen auf dem hellsten Prozent der jeweiligen Textzone (p99-Pixel):
Titel 3,2–4,0:1 im oberen Teil des Textblocks (Schwelle 3:1 für grosse
Schrift), Unterzeile 4,5–5,0:1 weiter unten (Schwelle 4,5:1). Wer die
Stops ändert, misst bitte nach — die Fotos sind an der Textkante hell
(p99-Pixel: Home 251/235/236, Standorte 243/244/241, Prozess 231/219/208). */
:root {
--hero-scrim-nav: linear-gradient(to bottom, rgba(6,43,81,.68) 0, rgba(6,43,81,.52) calc(var(--hd-h) * .95), rgba(6,43,81,.22) calc(var(--hd-h) * 1.9), transparent calc(var(--hd-h) * 3.1));
--hero-scrim-text: linear-gradient(to top, rgba(6,43,81,.68) 0%, rgba(6,43,81,.62) 22%, rgba(6,43,81,.50) 42%, rgba(6,43,81,.24) 64%, rgba(6,43,81,.06) 84%, transparent 100%);
}
.hero__overlay::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-scrim-nav), var(--hero-scrim-text); }
/* Home-Video-Hero: leichter Nav-Streifen + Boden-Verlauf für die Headline.
Ohne Boden-Verlauf bestand über 34 Frames kein einziger die 3:1-Schwelle
(schlechtester 1,0:1) — Motiv: helle Praxis, grosse Fenster, weisse Wände.
Ein gestaffelter Textschatten war als Alternative verworfen (dunkler Fleck
hinter den Wörtern). Der Boden-Verlauf startet bei .55 (Messminimum für alle
34 Frames; bei .50 fielen noch 16 durch) und bleibt damit leichter als das
gemeinsame `--hero-scrim-text` (.68), damit das Video so offen wie möglich
bleibt. Nav-Streifen bewusst unter der früheren .82-Rezeptur (.68/.52/.18,
kürzerer Auslauf), damit oben mehr Video durchkommt — Textschatten der
Nav-Links trägt den Rest. Beim Video-Tausch neu über Frames messen —
nicht am Standbild (`hero-home-frame.webp` ist ein heller Ausreisser). */
.hero:has(video.hero__img) .hero__overlay::before {
background:
linear-gradient(to bottom, rgba(6,43,81,.68) 0, rgba(6,43,81,.52) calc(var(--hd-h) * .85), rgba(6,43,81,.18) calc(var(--hd-h) * 1.55), transparent calc(var(--hd-h) * 2.3)),
linear-gradient(to top, rgba(6,43,81,.55) 0%, rgba(6,43,81,.48) 22%, rgba(6,43,81,.32) 42%, rgba(6,43,81,.14) 64%, rgba(6,43,81,.04) 84%, transparent 100%);
}
.hero:has(video.hero__img) .hero__foot .greview__txt {
text-shadow: 0 1px 2px rgba(6,43,81,.90), 0 2px 10px rgba(6,43,81,.80);
}
.hero__head { max-width: 660px; }
.hero__title { color: var(--lm-creme); margin: 0; text-shadow: 0 1px 28px rgba(6,43,81,.4); }
.hero__foot { margin-top: 28px; display: flex; align-items: flex-start; }
/* ---------- google review badge (V2: raised surface + level-1) ---------- */
.greview { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; background: var(--surface-2); border: var(--hairline); border-radius: var(--r-sm); padding: 12px 18px; box-shadow: var(--elev-1); transition: box-shadow var(--dur-fast) var(--ease-standard); }
.greview:hover { box-shadow: var(--elev-2); }
/* Home-Hero Google-Bewertung: transparente Variante (nur Sterne + Text) via Tweak */
html[data-greview="transparent"] .hero__foot .greview { background: transparent; border-color: transparent; box-shadow: none; padding: 0; }
html[data-greview="transparent"] .hero__foot .greview:hover { box-shadow: none; }
html[data-greview="transparent"] .hero__foot .greview__txt { color: var(--lm-creme); font-weight: 700; font-size: 13px; text-shadow: 0 1px 14px rgba(6,43,81,.55); }
html[data-greview="transparent"] .hero__foot .greview__stars { font-size: 21px; letter-spacing: 4px; text-shadow: 0 1px 14px rgba(6,43,81,.45); }
.hero__cta { margin-top: 24px; }
/* Home-Hero CTA-Farbe via Tweak. Standard = `blau` (Agentur-Feedback 07/2026):
Creme auf Clay erreicht nur 2,9:1 und fällt damit selbst durch die 3:1-Schwelle
für grosse Schrift; Creme auf Dunkelblau liegt bei 13,7:1. `orange` bleibt im
Tweak-Panel wählbar, ist aber nicht barrierefrei und darf nicht Default werden. */
html[data-herocta="orange"] .hero .hero__cta .btn { background: var(--lm-clay); border-color: var(--lm-clay); color: var(--lm-creme); }
html[data-herocta="blau"] .hero .hero__cta .btn { background: var(--lm-dark-blue); border-color: var(--lm-dark-blue); color: var(--lm-creme); }
/* Der Hero-CTA setzt seine Füllung mit höherer Spezifität als `.btn:hover` —
der Hover muss das ebenfalls tun, sonst bliebe nur das Anheben.
Bewusst NUR für die blaue (Standard-)Variante: bei `orange` würde ein
hellerer Ton den ohnehin zu schwachen Kontrast (Creme auf Clay = 2,9:1)
weiter drücken. Dort bleibt es beim Anheben — die Füllung rührt der Hover
nicht an. */
@media (hover: hover) {
html[data-herocta="blau"] .hero .hero__cta .btn:hover { background: var(--surface-dark-raised); border-color: var(--surface-dark-raised); }
}
/* ===== Forschung-Frame (03 Forschung) · 5 dunkle Varianten (data-forschung^="d") =====
Tiefblauer Grund + wandernder warmer Verlauf, der die Farben überlagert → Sonnenaufgang.
Dark-Blue-Vibe angelehnt an das Luma-KI Dark-Theme. */
/* — gemeinsame dunkle Basis (Text, Bullets, Radar, CTA) — */
html[data-forschung^="d"] section.bg[data-screen-label="03 Forschung"] { position: relative; overflow: hidden; background-color: #051327 !important; }
html[data-forschung^="d"] section[data-screen-label="03 Forschung"] > .wrap { position: relative; z-index: 1; }
html[data-forschung^="d"] section[data-screen-label="03 Forschung"] .h-lg,
html[data-forschung^="d"] section[data-screen-label="03 Forschung"] .body { color: var(--lm-creme); }
html[data-forschung^="d"] section[data-screen-label="03 Forschung"] .clist--feat li { background: rgba(8,24,44,.5) !important; border-color: rgba(244,238,230,.16) !important; color: var(--lm-creme); }
html[data-forschung^="d"] section[data-screen-label="03 Forschung"] .radar {
background: rgba(5,17,33,.66); border-color: rgba(244,238,230,.2);
--rd-grid: rgba(255,250,244,.10);
--rd-spoke: rgba(255,250,244,.07);
/* .54 ergab auf dem dunklen Panel nur 5,81:1 — formal AA, praktisch aber zu blass
für 10-12px Mono in Versalien (Agentur-Feedback 07/2026: „schwer zu lesen").
.66 bringt ~8,2:1, ohne dass die Beschriftung dem Diagramm die Schau stiehlt.
Gitter und Speichen bleiben bewusst zurückhaltend — die sollen leise bleiben. */
--rd-label: rgba(255,250,244,.66);
--rd-risk: rgba(226,110,99,.60);
--rd-gap: rgba(219,74,61,.20);
--rd-safe: #6FB874;
--rd-track: rgba(255,250,244,.16);
--rd-halo: rgba(211,125,98,.22);
}
html[data-forschung^="d"] section[data-screen-label="03 Forschung"] .radar__year b { color: var(--lm-creme); }
html[data-forschung^="d"] section[data-screen-label="03 Forschung"] .btn { background: var(--lm-creme); border-color: var(--lm-creme); color: var(--lm-dark-blue); }
@media (hover: hover) {
html[data-forschung^="d"] section[data-screen-label="03 Forschung"] .btn:hover { background: var(--surface-card); border-color: var(--surface-card); }
}
html[data-forschung^="d"] section[data-screen-label="03 Forschung"]::before { content: ""; position: absolute; z-index: 0; pointer-events: none; }
/* 1 · Grid — Sci-Fi-Raster + driftender Sonnenglanz */
html[data-forschung="dgrid"] section.bg[data-screen-label="03 Forschung"] {
background-image:
linear-gradient(rgba(165,211,223,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(165,211,223,.06) 1px, transparent 1px) !important;
background-size: 46px 46px, 46px 46px; background-position: center;
}
html[data-forschung="dgrid"] section[data-screen-label="03 Forschung"]::before {
inset: 0;
background: radial-gradient(52% 64% at 72% 22%, rgba(255,192,142,.26), rgba(250,153,111,.10) 44%, transparent 72%);
animation: forschDrift 20s ease-in-out infinite;
}
/* 2 · Sonnenaufgang — warme Sonne steigt von unten über Tiefblau */
html[data-forschung="dsonne"] section.bg[data-screen-label="03 Forschung"] { background-image: linear-gradient(180deg, #04101f 0%, #082745 56%, #0e3a5e 100%) !important; }
html[data-forschung="dsonne"] section[data-screen-label="03 Forschung"]::before {
left: -10%; right: -10%; bottom: -34%; height: 92%;
background: radial-gradient(closest-side at 58% 100%, rgba(255,216,128,.5), rgba(250,153,111,.3) 40%, rgba(255,192,142,.12) 60%, transparent 76%);
animation: forschRise 17s ease-in-out infinite;
}
/* 3 · Aurora — warme + kühle Schleier driften gegenläufig und überlagern sich */
html[data-forschung="daurora"] section[data-screen-label="03 Forschung"]::before {
inset: -25% -15%;
background: radial-gradient(42% 52% at 32% 30%, rgba(255,192,142,.24), transparent 62%);
animation: forschDriftA 22s ease-in-out infinite;
}
html[data-forschung="daurora"] section[data-screen-label="03 Forschung"]::after {
content: ""; position: absolute; z-index: 0; pointer-events: none; inset: -25% -15%;
background: radial-gradient(46% 56% at 74% 66%, rgba(165,211,223,.2), transparent 62%);
animation: forschDriftB 26s ease-in-out infinite;
}
/* 4 · Halo — großer warmer Lichthof hinter dem Radar, atmend */
html[data-forschung="dhalo"] section[data-screen-label="03 Forschung"]::before {
right: -8%; top: 50%; width: 72%; height: 130%;
background: radial-gradient(closest-side, rgba(255,201,140,.3), rgba(250,153,111,.12) 46%, transparent 72%);
animation: forschBreathe 15s ease-in-out infinite;
}
/* 5 · Lichtsweep — diagonales warmes Band wandert über das Tiefblau */
html[data-forschung="dsweep"] section.bg[data-screen-label="03 Forschung"] { background-image: linear-gradient(165deg, #04101f 0%, #072441 60%, #0b3357 100%) !important; }
html[data-forschung="dsweep"] section[data-screen-label="03 Forschung"]::before {
top: -25%; bottom: -25%; left: -20%; width: 55%;
background: linear-gradient(100deg, transparent, rgba(255,201,140,.1) 28%, rgba(250,153,111,.28) 50%, rgba(255,201,140,.1) 72%, transparent);
filter: blur(8px);
animation: forschSweep 16s ease-in-out infinite;
}
@keyframes forschDrift { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-4%,3%) scale(1.07)} }
@keyframes forschRise { 0%,100%{transform:translateY(14%);opacity:.72} 50%{transform:translateY(-6%);opacity:1} }
@keyframes forschDriftA { 0%,100%{transform:translate(0,0)} 50%{transform:translate(12%,9%)} }
@keyframes forschDriftB { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-13%,-7%)} }
@keyframes forschBreathe { 0%,100%{transform:translateY(-50%) scale(1);opacity:.82} 50%{transform:translateY(-50%) scale(1.12);opacity:1} }
@keyframes forschSweep { 0%,100%{transform:translateX(-15%)} 50%{transform:translateX(135%)} }
@media (prefers-reduced-motion: reduce) {
html[data-forschung^="d"] section[data-screen-label="03 Forschung"]::before,
html[data-forschung^="d"] section[data-screen-label="03 Forschung"]::after { animation: none; }
}
/* === Grid + scroll-gekoppeltes, intensives Warm-Overlay (Bild-Referenz: Navy → Pfirsich) ===
Grid bleibt statisch; der warme Halo (::before) wandert per --fgx/--fgy mit dem Scroll und
wird per --fgi (JS) im Frame satt/intensiv, klingt an den Rändern ab. Liegt unter Text (z-index). */
html[data-forschung="dgscroll1"] section.bg[data-screen-label="03 Forschung"],
html[data-forschung="dgscroll2"] section.bg[data-screen-label="03 Forschung"],
html[data-forschung="dgscroll3"] section.bg[data-screen-label="03 Forschung"] {
background-image:
linear-gradient(rgba(165,211,223,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(165,211,223,.06) 1px, transparent 1px) !important;
background-size: 46px 46px, 46px 46px; background-position: center;
}
html[data-forschung="dgscroll1"] section[data-screen-label="03 Forschung"]::before {
inset: 0;
background: radial-gradient(72% 82% at var(--fgx,72%) var(--fgy,22%),
rgba(255,221,150, calc(.95 * var(--fgi,0))),
rgba(255,166,108, calc(.64 * var(--fgi,0))) 34%,
rgba(126,92,132, calc(.38 * var(--fgi,0))) 58%,
rgba(9,28,52, 0) 82%);
}
html[data-forschung="dgscroll2"] section[data-screen-label="03 Forschung"]::before {
inset: 0;
background: radial-gradient(98% 94% at var(--fgx,84%) var(--fgy,10%),
rgba(255,227,174, calc(1 * var(--fgi,0))),
rgba(250,158,106, calc(.62 * var(--fgi,0))) 40%,
rgba(110,80,120, calc(.3 * var(--fgi,0))) 64%,
transparent 82%);
}
html[data-forschung="dgscroll3"] section[data-screen-label="03 Forschung"]::before {
inset: 0;
background:
radial-gradient(60% 68% at var(--fgx,72%) var(--fgy,24%), rgba(255,214,150, calc(.92 * var(--fgi,0))), rgba(250,150,106, calc(.54 * var(--fgi,0))) 40%, transparent 72%),
radial-gradient(56% 62% at calc(128% - var(--fgx,72%)) calc(128% - var(--fgy,24%)), rgba(120,150,196, calc(.44 * var(--fgi,0))), transparent 66%);
}
/* 6 · Tiefe — das Dunkelblau bleibt dunkel. Das warme Licht ist ein Schein, kein Anstrich:
Spitze bei 32 % Deckkraft statt 100 %, damit unter dem Glühen immer noch Navy liegt.
Der Halo wird auf die untere linke Hälfte gemappt (hinter die Headline), sodass die
Radar-Karte auf tiefem Navy sitzt und die Clay-Linien tragen. Vignette schließt die Ränder. */
html[data-forschung="dtiefe"] section.bg[data-screen-label="03 Forschung"] {
background-image:
linear-gradient(rgba(165,211,223,.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(165,211,223,.055) 1px, transparent 1px),
linear-gradient(180deg, #040f1e 0%, #051327 48%, #071f37 100%) !important;
background-size: 46px 46px, 46px 46px, 100% 100%;
background-position: center, center, center;
}
/* Warmer Kern unten links + kühler Gegenschein oben rechts. Beide Positionen leiten sich
gedämpft aus --fgx/--fgy ab, damit das Licht driftet, ohne über die Karte zu wandern. */
html[data-forschung="dtiefe"] section[data-screen-label="03 Forschung"]::before {
inset: 0;
background:
radial-gradient(58% 66% at calc(14% + var(--fgx,50%) * .34) calc(58% + var(--fgy,42%) * .30),
rgba(255,192,142, calc(.36 * var(--fgi,0))),
rgba(211,125,98, calc(.19 * var(--fgi,0))) 42%,
transparent 74%),
radial-gradient(56% 62% at calc(96% - var(--fgx,50%) * .22) calc(10% + var(--fgy,42%) * .16),
rgba(165,211,223, calc(.13 * var(--fgi,0))),
transparent 68%);
}
html[data-forschung="dtiefe"] section[data-screen-label="03 Forschung"]::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(80% 78% at 50% 46%, transparent 36%, rgba(2,9,20,.52) 100%);
}
/* Trustindex „Mehr laden“ → breiter, dunkelblauer CTA (überschreibt Widget-Styles inkl. Kind-Elemente) */
.trustindex-wrap .ti-load-more-reviews-button,
.ti-load-more-reviews-button {
background: var(--lm-dark-blue) !important; color: var(--lm-creme) !important;
border: 1px solid var(--lm-dark-blue) !important; border-radius: var(--r-sm) !important; box-shadow: none !important; opacity: 1 !important;
min-width: 0 !important; max-width: 100% !important; padding: 14px 48px !important;
font-family: var(--font-sans) !important; font-weight: 500 !important; font-size: 16px !important; letter-spacing: 0 !important; text-transform: none !important;
}
.trustindex-wrap .ti-load-more-reviews-button *,
.ti-load-more-reviews-button * { color: var(--lm-creme) !important; background: transparent !important; font-family: var(--font-sans) !important; text-transform: none !important; }
@media (hover: hover) {
.ti-load-more-reviews-button:hover { background: var(--surface-dark-raised) !important; border-color: var(--surface-dark-raised) !important; box-shadow: var(--elev-2) !important; transform: translateY(-2px); }
}
/* ===== Prozess · Frame 1 „Check"-Hero — 5 Layouts (data-checkhero=a..e), Frau + hochzählende 90+ ===== */
.checkhero { position: relative; }
.chk { display: none; }
html[data-checkhero="a"] .chk--a, html[data-checkhero="b"] .chk--b, html[data-checkhero="c"] .chk--c,
html[data-checkhero="d"] .chk--d, html[data-checkhero="e"] .chk--e { display: block; }
.chkcount { position: absolute; right: 6vw; top: 50%; transform: translateY(-50%); display: flex; align-items: flex-start; color: var(--lm-creme); font-family: var(--font-mono); font-weight: 500; line-height: .85; z-index: 2; pointer-events: none; }
.chkcount__n { font-size: clamp(72px, 14vw, 190px); font-variant-numeric: tabular-nums; }
.chkcount__p { font-size: clamp(34px, 6vw, 80px); margin-top: .12em; }
@media (max-width: 900px) { .chkcount { right: 18px; top: 74px; transform: none; } .chkcount__n { font-size: clamp(84px, 27vw, 150px); } .chkcount__p { font-size: 63px; } }
/* a · Portrait-Bühne (Vollbild, wie Referenz) */
.chk--a { position: relative; overflow: hidden; }
.chk--a .chk__bg { position: absolute; inset: 0; background: #efe7db url('assets/check-hero.webp') center 22% / cover no-repeat; }
/* Oberer Anfang .74 statt .30 — gemessen am Foto (check-hero) lag creme
Navigation bei .30 auf 2,18:1, bei .65 auf 5,25:1. Gilt nur für die
Standard-Bühne (`data-stage="orig"`); die anderen Bühnen-Stile ersetzen diesen
Verlauf komplett und bekommen deshalb keinen Overlay-Header (siehe
hifi-common.js). */
/* Gilt nur bis 900px. Ab 901px übernimmt der waagerechte Schleier weiter
unten (`data-stage="orig"`), der zur geteilten Bühne gehört und eigene,
bereits vermessene Werte hat — siehe dort. */
.chk--a .chk__scrim { position: absolute; inset: 0; background: var(--hero-scrim-nav), var(--hero-scrim-text); }
/* 96px Bodenabstand wie die übrigen Hero-Bühnen (siehe `.hero__overlay`). */
.chk--a .chk__in { position: relative; z-index: 1; min-height: 64vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 108px 0 96px; color: var(--lm-creme); }
.chk--a .chk__title { color: var(--lm-creme); }
/* Volles Creme statt 90 %: bei 20 px regular gilt die 4,5:1-Schwelle, und die
gedimmte Fassung lag auf dem hellsten Prozent der Textzone knapp darunter.
Die Hierarchie zum Titel trägt die Grösse (20 gegen 62 px), nicht die
Deckkraft — billiger erkauft als ein dunklerer Schleier über dem ganzen Bild. */
.chk__sub { color: var(--lm-creme); font-size: 20px; line-height: var(--lh-body); max-width: 46ch; margin: 20px 0 6px; }
/* Split-Basis (b, d) */
.chk__split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.chk__split--d { grid-template-columns: .95fr 1.05fr; }
.chk--b, .chk--d { padding: 80px 0; }
.chk__portrait { margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--lm-dark-blue); aspect-ratio: 4/5; background: #e9dccb; }
.chk__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; }
.chkstat { display: flex; align-items: baseline; gap: 12px; margin: 26px 0; }
.chkstat .chkcount__n { position: static; font-size: clamp(44px, 6vw, 72px); color: var(--lm-clay); }
.chkstat__plus { font-family: var(--font-mono); font-weight: 500; font-size: clamp(28px, 4vw, 44px); color: var(--lm-clay); }
.chkstat__lbl { font-family: var(--font-mono); font-size: 12px; color: var(--fg2); align-self: center; }
@media (max-width: 900px) { .chk__split, .chk__split--d { grid-template-columns: 1fr; } }
/* c · Zentriert-Overlay (Vollbild, mittig) */
.chk--c { position: relative; overflow: hidden; }
.chk--c .chk__bg { position: absolute; inset: 0; background: #efe7db url('assets/check-hero.webp') center 22% / cover no-repeat; }
.chk--c .chk__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,43,81,.44), rgba(6,43,81,.66)); }
.chk--c .chk__inC { position: relative; z-index: 1; min-height: 62vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 108px 0 64px; color: var(--lm-creme); }
.chk--c .chk__title { color: var(--lm-creme); }
.chk--c .chk__sub { color: rgba(255,250,244,.92); margin: 20px auto 26px; }
.chkcount--tr { top: 12%; transform: none; }
/* e · Manifest (mittig, Frau als Avatar) */
.chk--e { padding: 84px 0; }
.chk__avatar { margin: 0 auto 26px; width: 128px; height: 128px; border-radius: 50%; overflow: hidden; border: 1px solid var(--lm-dark-blue); }
.chk__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; }
.chkcount--e { position: static; transform: none; justify-content: center; color: var(--lm-clay); margin: 0 0 10px; }
.chkbeliefs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 40px 0 32px; border-top: 1px solid var(--hair); text-align: left; }
.chkbeliefs p { font-size: 18px; line-height: var(--lh-body); color: var(--fg2); padding: 26px 24px 6px; border-left: 1px solid var(--hair); margin: 0; }
.chkbeliefs p:first-child { border-left: 0; }
@media (max-width: 834px) { .chkbeliefs { grid-template-columns: 1fr; } .chkbeliefs p { border-left: 0; border-top: 1px solid var(--hair); } .chkbeliefs p:first-child { border-top: 0; } }
.greview__stars { color: #E8A11C; font-size: 16px; letter-spacing: 3px; }
.greview__txt { font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg1); }
/* ---------- bullets / clinical list ---------- */
.clist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.clist li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--hair); font-size: 18px; color: var(--fg1); }
.clist li:last-child { border-bottom: 1px solid var(--hair); }
.clist .anchor { width: 13px; height: 13px; border: 1px solid var(--hair-strong); background: transparent; flex: none; margin-top: 4px; }
/* ---------- doctor rows (V2: recessed outlined panel, E9) ---------- */
.docrows { border: 0; border-radius: var(--r-md); background: var(--surface-sunken); max-width: 100%; overflow: hidden; padding: 26px 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; min-height: 480px; }
/* Home „02 Betreuung": Kacheln liegen direkt auf dem Seitenhintergrund (keine zweite Fläche) */
#docrows { background: transparent; padding: 0; }
/* Die Randblende bleibt weich abgestuft statt linear: eine kurze, lineare Blende
schneidet die Kachel hart durch (Namen wurden mitten im Wort abgeschnitten).
Sie setzt aber NICHT bei transparent an und ist auf ~11% verkürzt — die frühere
Fassung (transparent bis 15%) hat die Randkacheln fast vollständig geschluckt. */
.docrow { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.38) 0, rgba(0,0,0,.70) 3.5%, rgba(0,0,0,.90) 8%, #000 13%, #000 87%, rgba(0,0,0,.90) 92%, rgba(0,0,0,.70) 96.5%, rgba(0,0,0,.38) 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,.38) 0, rgba(0,0,0,.70) 3.5%, rgba(0,0,0,.90) 8%, #000 13%, #000 87%, rgba(0,0,0,.90) 92%, rgba(0,0,0,.70) 96.5%, rgba(0,0,0,.38) 100%); }
.docrow::-webkit-scrollbar { display: none; }
.docrow.is-dragging { cursor: grabbing; }
.docrow__track { display: flex; gap: 18px; width: max-content; user-select: none; }
/* Home „02 Betreuung": die beiden Ärzte-Zeilen füllen die Höhe der Textspalte, statt
mittig in einer 480px-Box zu schweben. Die Kachelgröße kommt deshalb aus der
Containerhöhe (Zeile flex:1 → Kachel height:100%, Breite folgt über das 4:5-Foto),
nicht mehr aus einer festen Breite. Dafür muss die Spalte mitwachsen dürfen —
`.split` zentriert sonst beide Spalten.
Nur ab 821px: darunter ist `.split` einspaltig (1fr !important) und ≤680px läuft
nur EINE Zeile — dort bleibt die Kachelbreite die richtige Steuergröße. */
@media (min-width: 821px) {
.split:has(#docrows) { align-items: stretch; }
#docrows .docrow { flex: 1 1 0; min-height: 0; }
#docrows .docrow__track { height: 100%; }
#docrows .dface { width: auto; height: 100%; }
#docrows .dface__photo { width: auto; height: 100%; }
}
/* Textspalte schmaler, damit die Slideshow den Platz bekommt — aber erst, wenn
überhaupt genug Breite da ist. Zwei Fallstricke:
· `minmax(0, …)` ist Pflicht. Mit blossem `1.15fr .85fr` zieht die Mindestbreite
der Textspalte (lange deutsche Wörter, Button) sie über ihren Anteil hinaus —
bei 834px kam 300px Slideshow / 393px Text heraus, also genau verkehrt herum.
· Erst ab 1000px. Darunter presst der .85fr-Anteil die Textspalte so schmal,
dass sie stark umbricht, dadurch hoch wird — und weil die Kachelhöhe an der
Spaltenhöhe hängt, würden die Kacheln absurd gross. */
@media (min-width: 1000px) {
.split:has(#docrows) { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
/* Kachel = EIN Objekt: 4:5-Portrait, Name/Rolle als Bildunterschrift auf dunkelblauem
Verlauf — dieselbe Rezeptur wie die Optionen-Karten („Titel auf Bild"). Weil die
Unterschrift im Bild sitzt, bleibt jede Kachel exakt gleich hoch, egal ob der Name
ein- oder zweizeilig umbricht. Kein Hover-Lift: nicht interaktiv (DS V4). */
.dface { position: relative; flex: none; width: 196px; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-sunken); }
.dface__photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--lm-warm-1); -webkit-user-drag: none; user-drag: none; }
/* Der Verlauf ist bewusst weich abgestuft statt linear: eine lineare Alpha-Rampe wirkt in
der Bildmitte schwer. So bleibt nur der Fuß der Kachel getönt, das Portrait bleibt frei. */
.dface::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: linear-gradient(to top, rgba(6,43,81,.78) 0%, rgba(6,43,81,.68) 9%, rgba(6,43,81,.50) 19%, rgba(6,43,81,.30) 30%, rgba(6,43,81,.14) 42%, rgba(6,43,81,.04) 51%, rgba(6,43,81,0) 58%); box-shadow: inset 0 0 0 1px rgba(6,43,81,.10); }
.dface__cap { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 15px; }
.dface__name { font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: var(--lh-snug); color: var(--lm-creme); text-wrap: balance; }
/* Etwas heller als --fg-on-dark-2 (.72): das liegt hier nicht auf einer satten dunklen
Fläche, sondern auf einem halbtransparenten Verlauf über hellen Kitteln. */
.dface__role { font-family: var(--font-mono); font-weight: 200; font-size: 11px; letter-spacing: .04em; color: rgba(255,250,244,.82); margin-top: 4px; }
/* ---------- radar ---------- */
/* ---------- radar (V2: raised tonal panel) ---------- */
/* Alle Radar-Farben laufen über --rd-*; die dunkle Frame-Variante überschreibt
nur diesen Block (siehe html[data-forschung^="d"] weiter oben). */
.radar {
--rd-grid: rgba(6,43,81,.09);
--rd-spoke: rgba(6,43,81,.06);
--rd-label: rgba(6,43,81,.46);
--rd-risk: rgba(219,74,61,.45);
--rd-gap: rgba(219,74,61,.13);
--rd-safe: #5FA463;
--rd-accent: var(--lm-clay);
--rd-track: rgba(6,43,81,.14);
--rd-halo: rgba(211,125,98,.16);
border: var(--hairline); border-radius: var(--r-lg); padding: 32px; display: grid; gap: 22px; background: var(--surface-card); box-shadow: none;
}
.radar__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.radar__kicker { font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .10em; text-transform: uppercase; color: var(--rd-label); }
.radar__year { font-family: var(--font-mono); font-weight: 400; font-size: 12px; color: var(--rd-label); margin-left: auto; }
.radar__year b { font-family: var(--font-mono); font-weight: 400; font-size: 24px; color: var(--fg1); margin-left: 6px; font-variant-numeric: tabular-nums; }
.radarsvg { width: 100%; height: auto; }
.radarsvg .rgrid { fill: none; stroke: var(--rd-grid); }
.radarsvg .raxis { stroke: var(--rd-spoke); }
/* 12px statt 10px: die Achsenbeschriftung ist SVG-Text, die Größe zählt also in
viewBox-Einheiten und skaliert mit. Gemessen bleiben bei 12px noch 14 Einheiten
Luft links (ENTZÜNDUNG) und 19 rechts (STOFFWECHSEL) bis zum viewBox-Rand — die
viewBox darf deshalb bleiben wie sie ist. Sie mitzuvergrößern wäre sogar
kontraproduktiv: das SVG ist width:100%, eine breitere viewBox skaliert alles
wieder herunter und frisst den Gewinn auf. */
.radarsvg .rlabel { font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .08em; fill: var(--rd-label); text-transform: uppercase; }
.radarsvg .rgap { fill: var(--rd-gap); stroke: none; }
.radarsvg .rrisk { fill: none; stroke: var(--rd-risk); stroke-width: 1.15; stroke-linejoin: round; }
.radarsvg .rsafe { fill: url(#rsafeFill); stroke: var(--rd-safe); stroke-width: 1.6; stroke-linejoin: round; }
.radarsvg .rgstop { stop-color: var(--rd-safe); }
.radarsvg .rdot { fill: var(--rd-safe); stroke: none; }
.radar__legend { display: flex; gap: 20px; font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .04em; color: var(--rd-label); flex-wrap: wrap; }
.radar__legend span { display: inline-flex; align-items: center; gap: 8px; }
.radar__legend .ln { width: 15px; border-top: 1.6px solid var(--rd-safe); }
.radar__legend .ln--risk { border-top-width: 1.15px; border-top-color: var(--rd-risk); }
.radar__legend .sw { width: 15px; height: 8px; border-radius: 2px; background: var(--rd-gap); }
.radar__scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-weight: 400; font-size: 12px; color: var(--rd-label); }
.radar__time { display: grid; gap: 12px; }
/* Scrubber: Hairline-Track, gespielter Teil in Clay über --rp (0..1, von JS gesetzt) */
.radarrange { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; outline: none; cursor: grab; touch-action: pan-y; }
.radarrange:active { cursor: grabbing; }
.radarrange::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--rd-accent) 0 calc(var(--rp, 0) * 100%), var(--rd-track) calc(var(--rp, 0) * 100%) 100%); }
.radarrange::-moz-range-track { height: 2px; border-radius: 2px; background: var(--rd-track); }
.radarrange::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--rd-accent); }
.radarrange::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; margin-top: -5.5px; border-radius: 50%; background: var(--rd-accent); border: 0; box-shadow: 0 0 0 4px var(--rd-halo); transition: box-shadow var(--dur-fast) var(--ease-standard); }
.radarrange::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--rd-accent); border: 0; box-shadow: 0 0 0 4px var(--rd-halo); }
.radarrange:hover::-webkit-slider-thumb, .radarrange:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 7px var(--rd-halo); }
.radarrange:hover::-moz-range-thumb, .radarrange:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 7px var(--rd-halo); }
@media (prefers-reduced-motion: reduce) { .radarrange::-webkit-slider-thumb { transition: none; } }
/* ---------- 16-category grid (offenes Grid, Detail im Drawer) ---------- */
/* Grid endet ohne Fuß-Element, darum wirkt das normale Section-Bottom-Padding hier großzügiger als anderswo. */
.section:has(#pcatGrid) { padding-bottom: calc(var(--sp-section) - 24px); }
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 40px; }
.pgcell { display: flex; align-items: center; gap: 14px; padding: 20px 2px; border: 0; border-top: 1px solid rgba(6,43,81,.18); background: none; cursor: pointer; text-align: left; font-family: var(--font-sans); font-size: 16px; color: var(--fg1); min-width: 0; transition: border-color .15s var(--ease-standard); }
/* Klick-Hinweis (Agentur-Feedback 07/2026: „nicht klar ersichtlich, dass man klicken
kann"). Die Zelle war schon immer ein