/* ---------------------------------------------------------------------
Schriften lokal. Kein Aufruf an fonts.googleapis.com oder fonts.gstatic.com
mehr — damit geht beim Seitenaufruf keine Besucher-IP mehr an Google.
DM Sans und DM Serif Display stehen unter der SIL Open Font License;
Selbsthosting ist ausdrücklich erlaubt.
DM Sans ist ein Variable Font: eine Datei je Zeichensatz deckt 500 und 800 ab.
Die Unicode-Bereiche stammen unverändert von Google, damit der Browser
latin-ext nur lädt, wenn die Seite Zeichen daraus braucht.
--------------------------------------------------------------------- */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
src:url('/assets/fonts/dmsans-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
src:url('/assets/fonts/dmsans-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;
src:url('/assets/fonts/dmserif-italic-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;
src:url('/assets/fonts/dmserif-italic-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;
src:url('/assets/fonts/dmserif-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;
src:url('/assets/fonts/dmserif-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* =========================================================================
vitalba — Startseite
Struktur und Masse: gemessen an vitalba.webflow.io bei 1440 px.
Farben, Schriften, Typenskala: brand.md (The Zone Media, 6.8.2026).
ZWEI OFFENE GRUNDSATZENTSCHEIDE — beide auf eine Variable isoliert,
damit der Wechsel ein Einzeiler bleibt:
--ink Dunkelton. Website #0A1628 (aktuell) vs. Marke #00272B (brand.md 1.1)
--serif Überschriftenschrift. DM Serif Display (aktuell) vs. DM Sans (brand.md 2.1)
========================================================================= */
:root{
/* Markenpalette laut brand.md */
--blue:#1D57F6;
--blue-dk:#1442C8;
--white:#FDFDFF; /* Richtlinie, nicht #FFFFFF */
--grey:#BDC2BF; /* Sekundärfarbe, auf der alten Seite 0× im Einsatz */
--yellow:#FFE107; /* Sekundärfarbe */
--petrol:#00272B; /* Markendunkelton */
/* OFFENER ENTSCHEID Dunkelton — für Markenkonformität auf #00272B setzen */
--ink:#0A1628;
--ink-80:rgba(10,22,40,.8);
--ink-50:rgba(10,22,40,.5);
--blue-07:rgba(29,87,246,.07);
--card-line:rgba(29,87,246,.06);
--hair:#E3E6E4; /* aus --grey aufgehellt; ersetzt die Tailwind-Grautöne */
--tint:#F8F9FF;
--ink-59:rgba(10,22,40,.59); /* 4,59:1 auf Weiss — WCAG AA */
--ink-60:rgba(10,22,40,.6); /* Hero-Vorspann; ersetzt #626A82 der Nein-Liste */
--navy:#0A1628; /* Footer, gemessen am Master */
--navy-dk:#070E22;
/* Helle Blautöne. Aufhellungen von --blue, dienen als Eyebrow-Farbe auf
dunklen Flächen und als Flächen für die hellblauen Boxen. Vorher acht
unbenannte Werte — die CI-Prüfung vom 6.8. hat sie als undefiniert gerügt. */
--blau-hell-1:#8FB0FF; /* Eyebrow auf Navy */
--blau-hell-2:#9FB6E8; /* Eyebrow auf dem Freiraum-Dunkel */
--blau-hell-3:#B4C9FF; /* Eyebrow auf dem Blauverlauf */
--blau-flaeche-1:#EEF1FF;
--blau-flaeche-2:#E4E9FF;
--blau-flaeche-3:#DCE3FF;
--blau-box:#EDF2FF; /* «Das erarbeiten wir mit Ihnen», blaue Fassung */
--blau-hover:#E8EEFF; /* heller Button im Hover */
--gelb-flaeche:#FFFCEB; /* Chipfläche gelb, gleicher Ton wie .erarbeiten.gelb */
--gelb-schrift:#7A6100; /* 5,9:1 auf #FFFCEB — WCAG AA */
/* Die drei Marinetöne des Blauverlaufs und der Partnerleiste. Vorher unbenannt
und zusammen über 2 Mio px² gross — jetzt dokumentiert, damit sie beim
Dunkelton-Entscheid (brand.md 1.1) mitgezogen werden. */
--marine-1:#0F2D5E;
--marine-2:#1A3A6B;
--marine-3:#132247;
--schatten:rgba(6,12,32,.32); /* fasst rgba(5,12,38,.32) und rgba(4,10,32,.3) zusammen */
--schleier:rgba(4,8,22,.85); /* Verlaufsschleier über Bildkacheln */
/* Weiss-Stufen auf dunklem Grund. brand.md 2.2 gibt der Schrift eine Skala —
den Transparenzen fehlte sie: 22 Stufen waren im Einsatz. Jetzt sechs.
Basiston ist die Richtlinienfarbe #FDFDFF, nicht #FFFFFF. */
--w-flaeche:rgba(253,253,255,.09);
--w-rand:rgba(253,253,255,.16);
--w-meta:rgba(253,253,255,.5);
--w-text:rgba(253,253,255,.7);
--w-lauf:rgba(253,253,255,.8);
--w-betont:rgba(253,253,255,.9);
/* OFFENER ENTSCHEID Serifenschrift — für Markenkonformität --serif auf var(--sans) setzen */
--serif:"DM Serif Display",Georgia,"Times New Roman",serif;
--sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif;
/* Typenskala, acht Stufen (brand.md 2.2) */
--t-display:clamp(50px,6.111vw,88px); /* 6.111vw trifft bei 1440 px exakt 88 px */
--t-xl:clamp(32px,3.9vw,50px);
--t-l:clamp(30px,3.3vw,42px);
--t-m:20px;
--t-body:17px;
--t-base:15px;
--t-s:13.5px;
--t-xs:11px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);
font-size:var(--t-base);font-weight:500;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
/* Auf blauen und dunklen Flächen ist ein blauer Fokusring praktisch unsichtbar
(gemessen 1,3:1 gegen #1D57F6). Dort weiss. */
.blue :focus-visible,.cta :focus-visible,.navyb :focus-visible,.frei :focus-visible,
footer :focus-visible,.erstgespraech .btn:focus-visible{outline-color:var(--white)}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:var(--white);
padding:12px 20px;z-index:200;border-radius:0 0 8px 0;text-decoration:none;font-size:var(--t-base)}
.skip:focus{left:0}
.shell{max-width:1280px;margin:0 auto;padding:0 48px}
section{padding:100px 0}
/* Grid-Kinder haben von sich aus min-width:auto — die Spur wird also so breit
wie das längste unteilbare Wort darin. Bei 360 px liefen dadurch
«Organisationsentwicklung» (335 px) und «Vernetzungsorientierung» (351 px)
aus dem 301 px breiten Raster; die Seite bekam 12 bzw. 27 px Querlauf.
Deutsche Komposita machen das zum Dauerthema, deshalb beides:
min-width:0 lässt die Spur schrumpfen, hyphens:auto trennt das Wort.
Die Trennung braucht lang="de-CH" im — das steht dort. */
.split>*,.ugrid>*,.eggrid>*,.g2>*,.g3>*,.g5>*,.listenpaar>*,.fmain>*{min-width:0}
h1,h2,h3,h4,.chip,.eyebrow{overflow-wrap:break-word;hyphens:auto}
/* ---------- Navigation ---------- */
nav{position:sticky;top:0;z-index:60;background:rgba(253,253,255,.95);backdrop-filter:blur(14px)}
/* 12 px Innenabstand ergibt mit dem 46 px hohen Kontakt-Button exakt die 70 px
Navigationshöhe des Masters — davon hängen alle Y-Werte der Hero-Collage ab. */
.navin{max-width:1280px;margin:0 auto;padding:12px 48px;display:flex;align-items:center;gap:34px}
.brand{display:flex;align-items:center;margin-right:auto;text-decoration:none}
.brand img{width:171px;height:34px}
.navlinks{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.navlinks a{color:var(--ink-80);text-decoration:none;font-size:var(--t-base);font-weight:500}
.navlinks a:hover{color:var(--blue)}
.navcta{background:var(--blue);color:var(--white);text-decoration:none;padding:11px 22px;
border-radius:100px;font-size:var(--t-base);font-weight:500;white-space:nowrap}
.navcta:hover{background:var(--blue-dk)}
/* Menüknopf nur auf schmalen Schirmen; ohne ihn wäre die Seite dort
ausser dem Kontakt-Button nicht navigierbar. */
.navtoggle{display:none;background:none;border:1px solid var(--hair);border-radius:10px;
width:42px;height:42px;padding:0;cursor:pointer;color:var(--ink);align-items:center;justify-content:center}
.navtoggle svg{width:20px;height:20px}
.navtoggle .schliessen,.navtoggle[aria-expanded="true"] .oeffnen{display:none}
.navtoggle[aria-expanded="true"] .schliessen{display:block}
/* ---------- Typografie ---------- */
.eyebrow{font-size:var(--t-xs);font-weight:800;letter-spacing:1.32px;text-transform:uppercase;
color:var(--blue);margin:0 0 16px;display:block}
h1{font-family:var(--serif);font-weight:400;font-size:var(--t-display);
line-height:1.05;letter-spacing:-.024em;margin:0;text-wrap:balance}
/* KEINE Kursive. vitalba hat das im Pruefdokument vom 24.7.2026 auf VIER Seiten
unabhaengig voneinander verlangt — «Organisation nicht kursiv schreiben»
(Home), «Machbarkeit nicht kursiv» (Unternehmensberatung), «Der Mensch nicht
kursiv» (Gesundheitsnetze), «Fuehrungsexpert*innen nicht kursiv»
(Interimsmanagement). Vier gleichlautende Anmerkungen sind eine Regel, keine
Einzelwuensche: die Hervorhebung traegt der blaue Verlauf, nicht die Neigung.
Gilt deshalb fuer ALLE Seiten, auch die nicht kommentierten.
Das frueher noetige Polster gegen background-clip:text faellt mit weg — es
kompensierte allein den Ueberhang der Kursiven. */
h1 em{font-style:normal;
background-image:linear-gradient(96deg,#1D57F6,#1D57F6 0%,rgba(29,87,246,.75));
-webkit-background-clip:text;background-clip:text;color:transparent}
/* Gewicht 400: DM Serif Display hat nur einen Schnitt. Ein angefordertes 700
erzeugt synthetischen Fettdruck — Figma spezifiziert Regular (brand.md 2.1). */
h2{font-family:var(--serif);font-weight:400;font-size:var(--t-xl);
line-height:1.15;letter-spacing:-.02em;margin:0;text-wrap:balance}
h3{font-family:var(--sans);font-weight:800;font-size:var(--t-body);line-height:1.3;margin:0}
.intro{font-size:var(--t-body);font-weight:500;line-height:1.7;color:var(--ink-80);
margin:20px 0 0;max-width:60ch}
.small{font-size:var(--t-s);font-weight:500;line-height:1.65;color:var(--ink-80);margin:0}
.link{color:var(--blue);text-decoration:none;font-size:var(--t-s);font-weight:800;
display:inline-flex;align-items:center;gap:6px}
/* U+2192 fehlt im DM-Sans-Subset und wurde aus der Systemschrift geholt.
Als Inline-SVG bleibt die Seite in einer einzigen Schrift. */
.pfeil{width:13px;height:13px;flex:none}
.link:hover{text-decoration:underline}
.mid{text-align:center;max-width:66ch;margin:0 auto}
.mid .intro{margin:20px auto 0}
.btn{display:inline-block;background:var(--blue);color:var(--white);text-decoration:none;
padding:14px 28px;border-radius:100px;font-size:var(--t-base);font-weight:500;
border:0;font-family:inherit;cursor:pointer;transition:background .18s,transform .18s}
.btn:hover{background:var(--blue-dk);transform:translateY(-1px)}
.btn.w{background:var(--white);color:var(--blue);font-weight:800}
.btn.w:hover{background:var(--blau-hover)}
/* ---------- Hero ----------
Geometrie 1:1 vom Master abgenommen. Dort überlagert die Navigation den Hero;
hier steht sie im Fluss (70 px hoch), deshalb sind alle Y-Werte um 70 reduziert. */
.hero{position:relative;padding:160px 0 0}
/* hyphens:manual im Hero: die globale Regel h1,h2,h3,h4{hyphens:auto} trennte
«Langjährig aner-kannte» mitten im Wort. In einer 88-px-Anzeige ist ein
Trennstrich immer ein Fehler — dort wird umgebrochen, nicht getrennt. */
.hero h1{max-width:814px;letter-spacing:-.0236em;line-height:1;hyphens:manual}
/* Die Trennsperre gilt der 88-px-Anzeige, wo ein Trennstrich immer ein Fehler
ist. Auf den kleineren Heroes (.ref-hero, .recht-hero) und auf schmalen
Telefonen muss getrennt werden dürfen: «Datenschutzerklärung» misst bei
320 px mehr als die ganze Spalte und schob die .shell 21 px hinaus. */
.ref-hero h1,.recht-hero h1{hyphens:auto}
@media (max-width:420px){.hero h1{hyphens:auto}}
.hero p.sub{font-size:var(--t-m);font-weight:500;line-height:1.6;color:var(--ink-60);
margin:35px 0 0;max-width:656px}
.hero p.sub strong{font-weight:800;color:var(--ink)}
.hero .btn{margin-top:34px}
/* Die Collage teilt sich die Spur mit dem Text (wie .shell innen: 1184 px), damit
das Verhältnis Text zu Bild dem Master entspricht. Die Rechtswerte sind so
umgerechnet, dass jede Grafik denselben Abstand zur H1-Kante hält wie im Master;
negative Werte lassen die Bilder bewusst über den Textsatz hinausragen. */
.collage{position:absolute;top:0;left:50%;transform:translateX(-50%);
width:min(1184px,100% - 96px);height:600px;pointer-events:none}
.collage figure{position:absolute;margin:0;border-radius:18px;overflow:hidden;
box-shadow:0 30px 60px -28px rgba(10,22,40,.5)}
.collage img{width:100%;height:100%;object-fit:cover}
.cg-b{width:189px;height:216px;right:-91px;top:93px;transform:translateY(-65px) rotate(-20deg);z-index:1}
.cg-foto{width:405px;height:315px;right:-91px;top:156px;transform:translateY(-61px) rotate(1deg);z-index:2}
/* Der Master lässt diese Grafik 38 px über „will." liegen. Hier 62 px nach rechts
gerückt, damit die H1-Zeile frei bleibt — bewusste Abweichung vom Master. */
.cg-a{width:176px;height:203px;right:117px;top:327px;transform:translate(-88px,-29px) rotate(26deg);z-index:3}
/* Die Trennlinie läuft im Entwurf über die volle 1280er Inhaltsspur, nicht nur
über die 1184 des Textsatzes. Als border-top von .stats sass sie innerhalb der
48 px Innenabstand und endete 96 px zu früh. Als ::before mit right:-96px
bricht sie beidseitig aus; .hero trägt overflow-x:clip, es entsteht also kein
Querlauf. Unter 1300 px, wo die Collage entfällt, wieder bündig. */
.stats{display:flex;gap:24px;align-items:baseline;padding-top:30px;margin-top:35px;
flex-wrap:wrap;position:relative;z-index:2}
.hero .stats::before{content:"";position:absolute;top:0;left:-48px;right:-48px;
height:1px;background:var(--grey)}
@media (max-width:1340px){.hero .stats::before{left:0;right:0}}
/* 26px statt --t-m (20px): die Kennzahlen sind der Beleg unter dem Versprechen
und sollen tragen. Bei 20px verschwanden sie fast in der Beschriftung —
das Verhaeltnis lag bei 1.5:1, jetzt bei knapp 2:1. */
.stats b{font-size:26px;font-weight:800;letter-spacing:-.028em;line-height:1}
.stats span span{font-size:var(--t-s);font-weight:500;color:var(--ink-59);margin-left:8px}
@media (max-width:560px){.stats b{font-size:21px}}
.sep{color:var(--grey);font-weight:500}
/* ---------- Raster ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.split.ctr{align-items:center}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.band{background:var(--tint);position:relative;overflow:hidden}
.card{background:var(--tint);border:1px solid var(--card-line);border-radius:20px;
padding:32px 28px;transition:transform .18s,border-color .18s;display:flex;flex-direction:column}
/* Karte auf dem Band: beide trugen --tint, der 1-px-Rahmen mit 6 % Blau war
darauf unsichtbar — die Karten verschwanden im Hintergrund. Genau das meinte
Jeremy mit «Formatierung ist komisch». Im Entwurf steht die Karte weiss auf
dem Band, ohne sichtbaren Rahmen. */
.band .card{background:var(--white);border-color:transparent}
/* Symbolkachel im Band: 52/14 ohne Rahmen (Figma 4259:1917/1929/1943). Eng
gefasst, damit die Startseite ihre 48er Kachel behaelt. */
.band .g3 .ico{width:52px;height:52px;border-radius:14px;
background:rgba(10,22,40,.02);border:0}
/* Funktionskarten auf /interimsmanagement: 52er Kachel ohne Rahmen wie im
Entwurf (4259:2490/2503/2515). Eigene Klasse, damit weder die 48er Kachel der
Startseite noch die 44er im Fuenferraster mitgezogen wird. */
.g3.funktionen .ico{width:52px;height:52px;border-radius:14px;
background:var(--blau-flaeche-1);border:0;margin-bottom:20px}
.g3.funktionen .ico svg{width:24px;height:24px}
/* Zentrierter Kopfblock mit breiterer H2 als .mid (dort bricht sie zweizeilig). */
.kopf-weit{text-align:center;max-width:840px;margin-inline:auto}
.kopf-weit .intro{max-width:700px;margin:20px auto 0}
.band .g3 .ico svg{width:24px;height:24px}
/* H2 des Bandes darf voll ausbrechen, sonst trennt der Browser
«Bedarfsidenti-fikation» mitten im Wort. */
.band .mid{max-width:none}
.band .mid .intro{max-width:600px;margin-inline:auto}
/* Phasennummer als blaue Kachel (Figma: 40x40, Radius 12, weisse Serifenziffer).
flex:none ist noetig, weil .card eine Spalten-Flexbox ist. */
.pnr{flex:none;width:40px;height:40px;border-radius:12px;background:var(--blue);
color:var(--white);display:grid;place-items:center;font-family:var(--serif);
font-weight:400;font-size:18px;line-height:1;margin-bottom:20px}
.card:hover{transform:translateY(-2px);border-color:rgba(29,87,246,.16)}
/* Kachelmass am Entwurf abgenommen: 48x48, Symbol 22 px. Vorher 36/20 — die
Kachel war ein Drittel zu klein. Der Eckenradius liegt im Entwurf bei rund
10 px, die vorhandenen 11 px bleiben. */
.ico{width:48px;height:48px;border-radius:11px;background:var(--white);border:1px solid var(--card-line);
display:grid;place-items:center;margin-bottom:22px;color:var(--blue)}
/* Die zweite Leistungskarte («Gesundheitsnetze») trug hier ein gelb hinterlegtes
Symbol — als Signalakzent nach brand.md 1.3. Auf Wunsch von Jeremy am 6.8.2026
wieder entfernt: die drei Leistungen sind gleichrangig, ein hervorgehobenes
Symbol setzt eine Rangfolge, die es nicht gibt. Alle .ico sind jetzt neutral. */
.ico svg{width:22px;height:22px}
.card h3{margin-bottom:10px}
/* flex:1 blaehte den Absatz auf die volle Resthoehe und riss dadurch ein Loch
zwischen Vorspann und Fliesstext (gemessen 44 -> 178 px). Der Leerraum gehoert
unter den Text, nicht hinein: der Link schiebt sich per margin-top:auto nach
unten, der Absatz behaelt seine natuerliche Hoehe. */
.card .small{margin-bottom:20px;flex:none}
.card .link{align-self:flex-start;margin-top:auto}
/* ---------- Interimsmanagement ---------- */
.band .split{grid-template-columns:.92fr 1.08fr;gap:56px}
.ph-wide{height:340px;border-radius:20px;overflow:hidden}
.ph-wide img{width:100%;height:100%;object-fit:cover}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin:26px 0 28px;list-style:none;padding:0}
/* Umriss-Pillen mit heller Tonfüllung und Versalien — wie im Entwurf. Auf den
Beratungsblöcken wechselt die Farbe im Gleichtakt mit dem Kasten «Das
erarbeiten wir mit Ihnen»: gelb in Block 1, 3, 5 (.ublock), blau in Block 2
und 4 (.ublock.gedreht). Vorher waren alle fünf gleich blau gefüllt. */
.chip{background:var(--blue-07);color:var(--blue);font-size:var(--t-xs);font-weight:800;
padding:6px 14px;border-radius:100px;border:1px solid rgba(29,87,246,.28);
text-transform:uppercase;letter-spacing:.06em}
.ublock .chip{background:var(--gelb-flaeche);color:var(--gelb-schrift);
border-color:rgba(255,225,7,.75)}
.ublock.gedreht .chip{background:var(--blue-07);color:var(--blue);
border-color:rgba(29,87,246,.28)}
.checks{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-direction:column;gap:14px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-base);
font-weight:500;color:var(--ink-80)}
.tick{width:20px;height:20px;flex:none;border-radius:50%;background:var(--blue);color:var(--white);
display:grid;place-items:center;margin-top:2px}
.tick svg{width:13px;height:13px}
/* ---------- Referenzkarten ---------- */
.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.ref{border:1px solid var(--card-line);border-radius:20px;overflow:hidden;
background:var(--white);display:flex;flex-direction:column;
transition:transform .18s,border-color .18s}
.ref:hover{transform:translateY(-2px);border-color:rgba(29,87,246,.16)}
.ref .img{height:160px;overflow:hidden;background:var(--hair)}
.ref .img img{width:100%;height:100%;object-fit:cover}
.refs-mehr{text-align:center;margin:44px 0 0}
.btn.rand{background:transparent;color:var(--blue);font-weight:800;
box-shadow:inset 0 0 0 1px rgba(29,87,246,.25)}
.btn.rand:hover{background:var(--blue-07);box-shadow:inset 0 0 0 1px rgba(29,87,246,.45)}
.ref .body{padding:24px;display:flex;flex-direction:column;flex:1}
.ref .cat{font-size:var(--t-xs);font-weight:800;letter-spacing:.9px;text-transform:uppercase;
color:var(--blue);margin:0 0 10px}
.ref h3{margin-bottom:6px}
.ref .loc{font-size:var(--t-xs);font-weight:800;color:var(--ink-59);margin:0 0 12px}
.ref .txt{font-size:var(--t-s);font-weight:500;line-height:1.6;color:var(--ink-80);
margin:0 0 20px;flex:1}
.ref .more{font-size:var(--t-s);font-weight:800;letter-spacing:.8px;text-transform:uppercase;
color:var(--blue);text-decoration:none;align-self:flex-end;
display:inline-flex;align-items:center;gap:6px}
.ref .more:hover{text-decoration:underline}
/* ---------- Vertrauen ----------
Wortlaut und alle vier Zahlen stammen aus dem Hero-Absatz von
vitalba.webflow.io/referenzen. Siehe Warnhinweis im Markup. */
.navyb{background:var(--navy);color:var(--white);position:relative;overflow:hidden}
.navyb .eyebrow{color:var(--blau-hell-1)}
.navyb h2{color:var(--white)}
.navyb .intro{color:rgba(253,253,255,.8)}
.nums{display:grid;grid-template-columns:repeat(4,1fr);margin:46px 0 0;list-style:none;padding:0;
border-top:1px solid rgba(253,253,255,.16);border-bottom:1px solid rgba(253,253,255,.16)}
.num{padding:28px 22px;border-right:1px solid rgba(253,253,255,.09)}
.num:last-child{border-right:0}
.num b{display:block;font-family:var(--serif);font-weight:400;font-size:var(--t-l);
line-height:1;letter-spacing:-.03em;margin-bottom:10px}
.num span{font-size:var(--t-s);font-weight:500;color:rgba(253,253,255,.7);
line-height:1.5;display:block}
/* Kundenlogo-Wand. Einheitlich helle Kacheln für alle — 15 der 20 Marken tragen
schwarze oder dunkelblaue Wortmarken und wären auf dem dunklen Grund unsichtbar.
Eine Wand mit teils freistehenden, teils eingerahmten Logos wirkt kaputt. */
.logos{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;list-style:none;
margin:52px 0 0;padding:0}
/* 104 px statt 86: ein quadratisches Logo kann in 193x62 px hoechstens
3844 px2 belegen — die Zielflaeche der Wortmarken war dort geometrisch
unerreichbar, Moesli und Weiermatte blieben deshalb halb so gross wie
Buelach. Mit 80 px nutzbarer Hoehe erreicht jedes Format dieselbe Flaeche. */
.lg{background:var(--white);border-radius:12px;height:104px;padding:12px 18px;
display:grid;place-items:center}
/* Keine Höhenkappe: die Höhe rechnet build.py je Logo aus den Dateimassen aus
(logos_normalisieren), damit alle Marken die gleiche optische FLÄCHE belegen —
nicht die gleiche Höhe. Ein max-height hier würde den Inline-Wert überstimmen,
denn max-height schlägt height immer; genau daran scheiterte der erste Versuch. */
.lg img{max-width:100%;width:auto;object-fit:contain}
/* ---------- Über uns ---------- */
.blue{background:linear-gradient(135deg,var(--marine-1) 0%,var(--marine-2) 50%,var(--blue) 100%);color:var(--white);
position:relative;overflow:hidden}
.blue .eyebrow{color:var(--blau-hell-3)}
.blue h2{color:var(--white)}
.blue .intro{color:rgba(253,253,255,.9)}
/* Führungspool: der Abschnitt läuft im Entwurf (4259:2531) auf dem vollen
Blauverlauf, einspaltig, ohne den hellen Kasten. Die folgenden Regeln setzen
die vorhandenen Bausteine auf diesen Grund um. */
.blue .ulead{color:var(--w-betont);margin-top:22px;max-width:820px}
.blue .checks{gap:16px}
.blue .checks li{color:var(--w-text)}
.blue .tick{width:22px;height:22px;background:rgba(253,253,255,.12);color:var(--white)}
.blue .chips{gap:10px}
.blue .chip{background:rgba(253,253,255,.06);border:1px solid rgba(253,253,255,.12);
color:var(--w-lauf);text-transform:none;letter-spacing:0;font-weight:500;
font-size:14px;padding:11px 19px}
.blue.pool{padding:100px 0}
.blue .split{grid-template-columns:1.05fr .95fr;gap:52px}
.vals{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:34px 0}
.val{background:rgba(253,253,255,.09);border:1px solid rgba(253,253,255,.16);
border-radius:16px;padding:20px 18px}
/* Wertesymbole. Der Entwurf setzt sie OHNE Kachel: 30x30-Feld, 22-px-Strich-
symbol, reines Weiss, direkt über dem Titel. Der Selektor muss .val .ico-val
heissen — .val span (weiter unten) ist spezifischer und würde die Farbe sonst
auf rgba(253,253,255,.8) herunterziehen. Genau das ist hier passiert. */
.val .ico-val{width:30px;height:30px;display:grid;place-items:center;
margin-bottom:8px;color:var(--white)}
.val .ico-val svg{width:22px;height:22px;display:block}
.val b{display:block;font-size:var(--t-base);font-weight:800;margin-bottom:8px}
.val span{display:block;font-size:var(--t-s);font-weight:500;line-height:1.55;color:rgba(253,253,255,.8)}
.photobox{position:relative}
/* 440 statt 340 px: beim flacheren Bild landete die Zitatkarte auf mittlerer
Höhe und verdeckte die linke Person vom Kinn abwärts. Der Master zeigt das
Foto 543x568; hier reicht mehr Höhe, damit die Karte in die untere Ecke rutscht. */
.ph-team{height:440px;border-radius:20px;overflow:hidden}
.ph-team img{width:100%;height:100%;object-fit:cover}
.qcard{position:absolute;left:-30px;bottom:-28px;max-width:236px;background:var(--white);
color:var(--ink);border-radius:16px;padding:22px;box-shadow:0 18px 44px var(--schatten);margin:0}
.qcard p{font-family:var(--serif);font-size:var(--t-body);font-weight:400;line-height:1.42;margin:0 0 10px}
.qcard figcaption{font-size:var(--t-xs);font-weight:500;color:var(--ink-50)}
/* ---------- Freiraum ---------- */
.frei{background:var(--navy-dk);color:var(--white);position:relative;overflow:hidden}
.frei .eyebrow{color:var(--blau-hell-2)}
.frei h2{color:var(--white)}
.frei .intro{color:rgba(253,253,255,.7)}
.frei .split{align-items:end;gap:48px}
.btn.linie{background:transparent;color:var(--white);font-weight:800;
box-shadow:inset 0 0 0 1px rgba(253,253,255,.5)}
.btn.linie:hover{background:rgba(253,253,255,.16)}
.sgrow{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;list-style:none;
margin:46px 0 0;padding:0}
.work{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;
display:flex;align-items:flex-end;box-shadow:0 10px 28px var(--schatten)}
.work img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.work::after{content:"";position:absolute;inset:0;
background:linear-gradient(to top,var(--schleier),rgba(4,8,22,0) 54%)}
.work .jahr{position:absolute;top:9px;left:9px;z-index:2;font-size:var(--t-xs);font-weight:800;
color:var(--white);background:rgba(6,10,26,.78);padding:3px 7px;border-radius:5px;
letter-spacing:.04em}
.work .cap{position:relative;z-index:2;padding:11px}
.work .cap b{display:block;font-family:var(--serif);font-weight:400;font-size:var(--t-s);
color:var(--white);line-height:1.25;margin-bottom:3px}
.work .cap i{display:block;font-style:normal;font-size:var(--t-xs);font-weight:500;
color:rgba(253,253,255,.8)}
/* ---------- Lichtkegel ---------- */
.glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.glow-blue{background:radial-gradient(rgba(29,87,246,.55) 0%,rgba(0,0,0,0) 70%)}
.glow-blue-strong{background:radial-gradient(rgba(29,87,246,.65) 0%,rgba(0,0,0,0) 70%)}
/* Der Geschwisterselektor fasst jeden Abschnitt, in dem ein .glow VOR der
.shell steht — auch die Referenzabschnitte auf Startseite und
Unternehmensberatung, die keine eigene Klasse tragen. Dort lag der Lichtkegel
bisher VOR den Karten und färbte die mittlere Karte mit ein. */
.blue .shell,.cta .shell,.band .shell,footer .shell,.glow~.shell{position:relative;z-index:1}
/* ---------- Abschluss-CTA ---------- */
.cta{background:var(--blue);color:var(--white);text-align:center;position:relative;overflow:hidden}
.cta .eyebrow{color:rgba(253,253,255,.9)}
.cta h2{color:var(--white)}
.cta p{color:rgba(253,253,255,.9);font-size:var(--t-body);font-weight:500;
max-width:52ch;margin:20px auto 34px}
/* ---------- Footer ---------- */
footer{background:var(--navy);color:var(--white);position:relative;overflow:hidden}
/* Partnerband: eigener, etwas hellerer Streifen über dem Footer */
.partners{padding:30px 0 34px;background:var(--marine-3);position:relative;z-index:1}
.pwrap{display:flex;gap:30px 64px;justify-content:center;flex-wrap:wrap;align-items:flex-start}
.plabel{font-size:var(--t-xs);font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
color:rgba(253,253,255,.5);margin:0 0 16px;text-align:center}
/* Behebt Blocker 4: auf vitalba.webflow.io rendern alle sieben Logos 0×0
(height:0 plus loading="lazy"). Feste Kachelhöhe, feste Bildobergrenzen. */
.prow{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;justify-content:center;
list-style:none;margin:0;padding:0}
.plogo{display:flex;align-items:center;justify-content:center;height:58px;padding:7px 16px;
background:rgba(253,253,255,.09);border-radius:10px;min-width:82px}
.plogo img{max-height:30px;max-width:132px;width:auto;height:auto;object-fit:contain}
/* Quadratische Marken brauchen mehr Höhe, sonst wirken sie neben den
Breitformaten winzig. Betrifft Artiset. */
.plogo.quadrat img{max-height:44px;max-width:44px}
/* Die Partnerlogos liegen als echte weisse Freisteller vor (*-w.webp).
CSS-Filter reichten nicht: nur zwei der sieben Quelldateien hatten Transparenz,
vier trugen einen eingebrannten weissen Grund, SVF einen blauen (0,75,136).
Die Freisteller entstanden durch Ausstanzen der jeweiligen Hintergrundfarbe.
ZURÜCK AUF ORIGINALFARBEN: in den sieben ![]()
das "-w" aus dem Dateinamen
streichen und hier .plogo{background:var(--white)} setzen. */
.fmain{display:grid;grid-template-columns:1.7fr 1.1fr .9fr .9fr;gap:40px;padding:56px 0 46px}
.fmain .brand{margin-bottom:20px}
.fmain p{font-size:var(--t-s);font-weight:500;color:rgba(253,253,255,.7);
line-height:1.75;margin:0 0 8px;max-width:38ch}
.fcol h2{font-size:var(--t-xs);font-weight:800;letter-spacing:.13em;text-transform:uppercase;
color:rgba(253,253,255,.5);margin:0 0 18px;font-family:var(--sans);line-height:1.4}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.fcol a{color:rgba(253,253,255,.8);text-decoration:none;font-size:var(--t-s);font-weight:500}
.fcol a:hover{color:var(--white)}
/* Kontaktspalte mit vorangestelltem Sinnbild */
.fkontakt li{display:flex;gap:11px;align-items:flex-start;
color:rgba(253,253,255,.8);font-size:var(--t-s);font-weight:500;line-height:1.55}
.fkontakt svg{width:14px;height:14px;flex:none;margin-top:3px;color:rgba(253,253,255,.5)}
.fkontakt a{font-size:inherit}
/* Kein font-style:italic — von DM Sans ist nur die Aufrechte geladen, der Browser
hätte die Schrägstellung errechnet. Genau der Defekt, den brand.md 2.1 rügt.
Die Guillemets kennzeichnen das Zitat bereits. */
.fzitat{color:var(--w-meta);margin:18px 0 0}
.socials{display:flex;gap:9px;margin-top:22px}
.soc{width:32px;height:32px;border-radius:9px;background:rgba(253,253,255,.09);
display:grid;place-items:center;color:rgba(253,253,255,.7);text-decoration:none;
transition:background .18s,color .18s}
.soc svg{width:14px;height:14px}
.soc:hover{background:rgba(253,253,255,.16);color:var(--white)}
.fbot{border-top:1px solid rgba(253,253,255,.09);padding:22px 0;display:flex;gap:20px;
flex-wrap:wrap;justify-content:space-between;font-size:var(--t-s);font-weight:500;
color:rgba(253,253,255,.7)}
.fbot a{color:rgba(253,253,255,.7);text-decoration:none;font-size:var(--t-s);font-weight:500}
.fbot a:hover{color:var(--white)}
.fbot .rechts{display:flex;gap:22px}
@media (max-width:1000px){
.g3,.refs{grid-template-columns:1fr}
.nums{grid-template-columns:repeat(2,1fr)}
.logos{grid-template-columns:repeat(4,1fr)}
.num:nth-child(2n){border-right:0}
.num:nth-child(-n+2){border-bottom:1px solid rgba(253,253,255,.09)}
.sgrow{grid-template-columns:repeat(3,1fr)}
.frei .split{grid-template-columns:1fr;gap:26px;align-items:start}
.fmain{grid-template-columns:1fr 1fr}
}
/* Navigation: der Umschaltpunkt lag bei 760 px, die Leiste braucht aber
mindestens 880 px — zwischen 760 und 880 ragte «Beratungsgespräch anfragen»
aus dem Viewport und erzeugte auf JEDER Seite einen Querbalken.
Gemessen am 6.8.2026: Summe der Leistenkinder 764 px, rechte Kante 880 px. */
@media (max-width:900px){
.navin{gap:12px;flex-wrap:wrap}
.brand img{width:140px;height:28px}
.navtoggle{display:flex;order:3;width:40px;height:40px}
.navcta{order:2;padding:10px 16px;font-size:var(--t-s)}
.navlinks{display:none;order:4;flex-basis:100%;flex-direction:column;gap:0;
border-top:1px solid var(--hair);margin-top:12px;padding-top:6px}
.navlinks[data-offen="ja"]{display:flex}
.navlinks a{display:block;padding:13px 0;font-size:var(--t-body)}
.navlinks li+li{border-top:1px solid var(--hair)}
}
/* Hero-Collage: die Grafiken ragen mit negativen right-Werten bewusst über den
Textsatz hinaus. Ab etwa 1376 px reicht der Platz neben dem 1184er Track dafür
nicht mehr — die Bilder standen dann im Viewport und erzeugten Querlauf
(bis 157 px auf /gesundheitsnetze). overflow-x:clip schneidet den Überstand an
der Sektionskante ab, ohne einen Scrollkontext zu erzeugen; overflow-y bleibt
sichtbar, sonst würde der Schein unter dem Hero abgeschnitten. */
.hero{overflow-x:clip}
/* Unter 1300 px überdeckten die Grafiken die H1 und liefen aus dem Viewport.
Erster Anlauf war, die Collage dort ganz auszublenden — das nahm Tablets den
Seitenkopf komplett weg und war zu grob. Stattdessen wird sie jetzt
verkleinert: --cs ist der Massstab, transform-origin liegt oben rechts, damit
die Gruppe an der rechten Kante hängen bleibt und nach innen schrumpft.
Die Werte sind gemessen, nicht geschätzt — bei jedem Schritt bleibt die H1
frei und es entsteht kein Querlauf.
Unter 760 px entfällt sie weiterhin ganz: dort steht der Text einspaltig über
die volle Breite, daneben ist kein Platz mehr. So hält es auch der Master. */
.collage{--cs:1;transform:translateX(-50%) scale(var(--cs));transform-origin:100% 0}
@media (max-width:1340px){
.collage{--cs:.78}
.hero,.ub-hero,.gn-hero,.im-hero,.haupt-hero{padding-top:132px}
/* Die Collage haengt rechts. Damit sie den Text nicht ueberdeckt, muss die
Textspalte mitschrumpfen — sonst laeuft sie unter die Bilder. Der Wert ist
gemessen: bei 54 % bleibt in allen acht Heroseiten bis hinunter zu 760 px
ein Abstand, bei 60 % nicht mehr. */
.hero h1,.hero .sub,.haupt-hero h1{max-width:54%}
.hero .stats{max-width:60%}
}
/* Unter 1100 px reicht der Platz neben dem Text nicht mehr — jeder Massstab,
der die Bilder noch erkennbar liess, überdeckte irgendwo die H1 oder den
Vorspann. Ab hier verlässt die Collage deshalb die Überlagerung und stellt
sich als flache Bildreihe unter den Text. Dadurch bleiben die Bilder auf
Tablets und Telefonen sichtbar — vorher waren sie dort ganz weg, was Jeremy
zu Recht gemeldet hat — und können den Text nicht mehr berühren.
Die Drehungen entfallen: nebeneinander in einer Reihe wirken sie unruhig. */
/* 1200 statt 1100: bei genau 1101 px reichte die 54-%-Textspalte nicht mehr,
der Vorspann lief unter das linke Bild. Gemessen, nicht gerundet. */
@media (max-width:1200px){
/* Im Fluss steht die Reihe ausserhalb der .shell und braucht deren Seitenrand
selbst, sonst klebt sie an den Viewportkanten. */
.collage{position:static;transform:none;width:100%;height:auto;
display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
margin:0 auto 52px;max-width:1280px;padding:0 48px}
.collage figure{position:static!important;width:auto!important;height:auto!important;
aspect-ratio:4/3;transform:none!important;border-radius:14px}
.collage img{width:100%;height:100%;object-fit:cover}
.hero h1,.hero .sub,.haupt-hero h1{max-width:none}
.hero .stats{max-width:none}
.hero,.ub-hero,.gn-hero,.im-hero,.haupt-hero{padding-top:104px}
/* Die Bildreihe gehoert unter den Text, nicht darueber: im Quelltext steht
die Collage vor der .shell, weil sie auf grossen Schirmen dahinterliegt. */
.hero{display:flex;flex-direction:column}
.hero .shell{order:1}
.collage{order:2}
}
@media (max-width:760px){.collage{padding:0 22px}}
@media (max-width:560px){
/* Auf schmalen Telefonen bleibt nur das Hauptbild: drei Kacheln nebeneinander
wären dort je rund 100 px breit und zeigten nichts mehr. */
.collage{grid-template-columns:1fr}
.collage figure:not(.cg-foto):not(.ug-team):not(.gn-b):not(.im-team){display:none}
.collage figure{aspect-ratio:16/10}
}
@media (max-width:760px){
.shell,.navin{padding-left:22px;padding-right:22px}
.stats{gap:8px 20px}
.stats .sep{display:none} /* beim Umbruch bliebe sonst ein Trenner am Zeilenende hängen */
.split,.band .split,.blue .split{grid-template-columns:1fr;gap:32px}
.vals{grid-template-columns:1fr}
.hero{padding:56px 0 0}
.nums{grid-template-columns:1fr}
.logos{grid-template-columns:repeat(2,1fr);gap:8px}
.num{border-right:0;border-bottom:1px solid rgba(253,253,255,.09);padding:22px 0}
.num:last-child{border-bottom:0}
.qcard{position:static;max-width:none;margin-top:16px}
.sgrow{grid-template-columns:repeat(2,1fr)}
.fmain{grid-template-columns:1fr}
.pwrap{gap:28px}
section{padding:64px 0}
}
/* =====================================================================
Nur für /unternehmensberatung
Masse am gerenderten Master abgenommen (vitalba.webflow.io/unternehmensberatung).
===================================================================== */
/* Hero-Kopfabstand: 174 statt 204.
Der Webflow-Master setzt die H1 auf 274 ab Seitenkopf, der Figma-Entwurf auf
244 — eine Differenz von genau 30 px. Entschieden am 6.8.2026 (Jeremy: «nutze
best practice, den Abstand entscheidest du») zugunsten des Entwurfs, aus drei
gemessenen Gründen:
1. 204 war der mit Abstand grösste Kopfabstand der Seite (.hero 160,
.gn-hero 128, .ref-hero 120) — der Ausreisser verschwindet.
2. Der Abstand zwischen dem tiefsten Collagenbild und der Trennlinie bleibt
mit 37 px klar sichtbar; die Kollision, die Jeremy gemeldet hatte, kommt
nicht zurück.
3. Der Hero wird 30 px flacher, der erste Inhalt rückt entsprechend nach oben. */
.ub-hero{padding:174px 0 0}
/* =====================================================================
Nur für /interimsmanagement — eigener Hero.
Vorher benutzte die Seite .ub-hero und .ug-* mit. Der Entwurf
(Figma 4259:2967) führt dort aber einen bewusst KLEINEREN Collagenkasten:
381,42 gegen 450 auf Unternehmensberatung, Faktor 0,848. Deshalb eigene
Klassen, damit eine Massänderung hier nicht die Nachbarseite zerlegt.
Werte 1:1 aus dem Entwurf, Bezug ist der 1184er .collage-Kasten.
===================================================================== */
.im-hero{padding:174px 0 0}
.im-c{width:160px;height:183px;right:-44.1px;top:167.3px;transform:rotate(12deg);z-index:1}
.im-team{width:305px;height:229px;right:-6px;top:251.6px;transform:rotate(-4deg);z-index:2}
.im-a{width:149px;height:172px;right:272.5px;top:401.5px;transform:rotate(-34deg);z-index:3}
.collage figure.im-c,.collage figure.im-team,.collage figure.im-a{position:absolute;margin:0;
border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -28px var(--schatten)}
.ug-c{width:189px;height:216px;right:-91px;top:93px;transform:translateY(-65px) rotate(12deg);z-index:1}
.ug-team{width:360px;height:360px;right:-46px;top:156px;transform:translateY(-61px) rotate(-4deg);z-index:2}
.ug-a{width:176px;height:203px;right:179px;top:327px;transform:translate(-88px,-29px) rotate(-34deg);z-index:3}
.collage figure.ug-c,.collage figure.ug-team,.collage figure.ug-a{position:absolute;margin:0;
border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(10,22,40,.5)}
/* Fünf Beratungsbereiche */
/* (1184 - 4x16)/5 = 224 px Kartenbreite und 224 - 2x29 = 166 px Textbreite —
beides deckungsgleich mit dem Entwurf. Vorher gap 20 und Innenabstand 26/22. */
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:48px}
.g5 .card{padding:33px 29px}
/* Eigene Kachel im Fuenferraster: 44x44, Radius 12, Flaeche ohne Rand.
Die 48er Kachel der Leistungskarten passt hier nicht in den Innenabstand. */
.g5 .ico{width:44px;height:44px;border-radius:12px;background:var(--blau-flaeche-1);
border:0;margin-bottom:18px}
.g5 .ico svg{width:20px;height:20px}
/* «Strategieentwicklung» misst bei 17 px/800 rund 180 px und passte nicht in das
166 px breite Textfeld — der Titel wurde mitten im Wort getrennt. Bei 15 px
sind es 159 px, der Titel steht einzeilig wie im Entwurf (dort 155 px).
hyphens:manual dazu, damit nur die gesetzten weichen Trennstriche in
«Organisationsentwicklung» und «Fach- und Teamberatung» umbrechen. */
.g5 .card h3{font-size:var(--t-base);hyphens:manual}
.karte-link{text-decoration:none}
.karte-link:hover{color:var(--blue)}
/* Wechselnde Text-/Bildblöcke. Der Master spiegelt jeden zweiten Block und
legt die «Das erarbeiten wir mit Ihnen»-Box jeweils auf die Bildseite,
zur Textspalte hin versetzt. */
/* Im Entwurf stossen die Blöcke bündig aneinander; vom Kastenende bis zur
Chipoberkante des nächsten Blocks liegen 88 px. Gebaut waren es 258–294. */
.ublock{padding:88px 0 0}
/* Der Entwurf führt die fünf Beratungsblöcke in einem eigenen, schmaleren
Container: 1100 px auf derselben Achse wie das 1184er Raster, zwei 510er
Spalten, 80 px Rinne. (1100-80)/2 = 510 trifft alle drei Werte.
align-items:start statt center — der Kasten macht die Medienspalte höher als
die Textspalte, wodurch der Text 72 bis 108 px nach unten rutschte. Im
Entwurf beginnen Chips und Bildoberkante bündig. */
.ugrid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;
max-width:1100px;margin-inline:auto}
.ublock.gedreht .utext{order:2}
.ublock.gedreht .umedia{order:1}
.utext h2{font-size:var(--t-l);margin-bottom:18px}
.ulead{font-size:var(--t-body);font-weight:800;line-height:1.45;color:var(--ink);margin:0 0 18px}
.utext .small{margin-bottom:14px;max-width:52ch}
.umedia{position:relative}
/* Bildhöhe je Beratungsblock. Der Entwurf führt für jeden Block eine eigene
Höhe — 393,6 / 363,6 / 372,6 / 400 / 400 px bei 510 px Spaltenbreite —, der
Bau hatte überall 394. Weil der Kasten «Das erarbeiten wir mit Ihnen» an der
Bildunterkante hängt, verschob ihn das je Block um −5 bis +30 px. Genau das
ist die Platzierung, die auf Organisationsentwicklung und Fach- und
Teamberatung auffiel. Die Spiegelung war nie das Problem: Bild links steht im
Entwurf wie im Bau bei Block 2 und 4, nicht bei 2 und 5. */
.ubild{border-radius:25px;overflow:hidden;aspect-ratio:510/394}
#strategieentwicklung .ubild{aspect-ratio:510/393.64}
#organisationsentwicklung .ubild{aspect-ratio:510/363.64}
#bau-und-konzeptberatung .ubild{aspect-ratio:510/372.64}
#betriebsanalysen .ubild{aspect-ratio:510/400}
#fach-und-teamberatung .ubild{aspect-ratio:510/400}
/* Betriebsanalysen ist der einzige Block, dem der Entwurf eine andere
Überlappung gibt: 100,7 statt 119,2 px. Der Kasten sitzt dort also flacher
auf dem Bild. */
#betriebsanalysen .erarbeiten{margin-top:-101px}
/* Unter 1200 px schrumpft die Bildspalte schneller als der Kasten; ohne
Rücknahme deckt er das Foto irgendwann ganz zu. Für diese Breiten gibt es
keine Figma-Fassung — der Wert ist Ermessen, kein Abgleich. */
@media (max-width:1200px){
.erarbeiten,#betriebsanalysen .erarbeiten{margin-top:-72px}
}
.ubild img{width:100%;height:100%;object-fit:cover}
/* Gelb und Blau im Wechsel. brand.md 1.3: Gelb sparsam als Signal auf genau
diesen Boxen. Der Master nutzt #FFD93D — ein Wert der Nein-Liste; hier
durchgehend die Markenfarbe #FFE107 und ein daraus abgeleiteter Tint. */
/* -125 statt -64: im Entwurf liegt der Kasten 119 px auf dem Bild und hängt
96 px darunter; gebaut waren es 64 bzw. 159 px.
width nach Inhalt statt volle Spalte: der Entwurf lässt aussen 55 bis 188 px
Foto frei, gebaut deckte der Kasten das Bild vollständig ab. */
/* -119: gegen die Figma-Sollwerte nachgemessen. Ein negativerer Wert zieht den
Kasten nach OBEN — der erste Korrekturversuch mit -131 lief deshalb in die
falsche Richtung und wurde zurückgenommen. */
.erarbeiten{position:relative;z-index:2;margin-top:-119px;margin-left:-40px;
width:max-content;max-width:calc(100% + 40px);border-radius:25px;padding:26px 30px}
.ublock.gedreht .erarbeiten{margin-left:auto;margin-right:-40px}
.erarbeiten.gelb{background:#FFFCEB;border:1px solid rgba(255,225,7,.6)}
.erarbeiten.blau{background:var(--blau-box);border:1px solid rgba(29,87,246,.16)}
.etitel{font-size:var(--t-xs);font-weight:800;letter-spacing:1.32px;text-transform:uppercase;
color:var(--ink-80);margin:0 0 14px}
.eliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.eliste li{position:relative;padding-left:19px;font-size:var(--t-s);font-weight:500;
line-height:1.5;color:var(--ink-80)}
.eliste li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
border-radius:50%;background:var(--blue)}
.erarbeiten.gelb .eliste li::before{background:#C9A800}
/* Erstgesprächs-Box */
.erstgespraech{background:linear-gradient(135deg,var(--blau-flaeche-1) 0%,var(--blau-flaeche-2) 50%,var(--blau-flaeche-3) 100%);
padding:76px 0}
.eggrid{display:grid;grid-template-columns:1.35fr .65fr;gap:52px;align-items:center}
.erstgespraech h2{font-size:var(--t-l);margin-bottom:24px}
.erstgespraech .checks{margin-bottom:30px}
.person{margin:0;text-align:center;justify-self:center}
.person img{width:150px;height:150px;border-radius:50%;object-fit:cover;margin:0 auto 14px;
box-shadow:0 14px 34px rgba(10,22,40,.18)}
.person figcaption b{display:block;font-size:var(--t-base);font-weight:800}
.person figcaption span{display:block;font-size:var(--t-s);font-weight:500;color:var(--ink-50)}
.cta-tel{margin:20px 0 0}
.cta-tel a{color:rgba(253,253,255,.9);text-decoration:none;font-size:var(--t-base);font-weight:500}
.cta-tel a:hover{color:var(--white);text-decoration:underline}
@media (max-width:1100px){
.g5{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1000px){
.ugrid{grid-template-columns:1fr;gap:32px}
.ublock.gedreht .utext,.ublock.gedreht .umedia{order:0}
.erarbeiten,.ublock.gedreht .erarbeiten{margin-left:0;margin-right:0;width:100%;margin-top:-48px}
.eggrid{grid-template-columns:1fr;gap:34px}
.person{justify-self:start;text-align:left}
.person img{margin-left:0}
}
@media (max-width:760px){
.ub-hero{padding:56px 0 0}
.g5{grid-template-columns:1fr}
.ublock{padding:56px 0}
.erstgespraech{padding:56px 0}
.erarbeiten,.ublock.gedreht .erarbeiten{margin-top:-32px;padding:22px 22px}
}
/* =====================================================================
Bausteine für die verbleibenden Seiten.
Ausschliesslich aus den oben definierten Tokens gebaut — keine neuen
Farben, keine neuen Schriftgrössen. Wer hier etwas ergänzt, prüft
vorher, ob es eine bestehende Stufe schon gibt.
===================================================================== */
/* ---------- Fliesstext: Rechtstexte, Fallstudien ---------- */
.prosa{max-width:68ch}
.prosa h2{font-size:var(--t-l);margin:52px 0 16px}
.prosa h2:first-child{margin-top:0}
.prosa h3{font-size:var(--t-body);margin:34px 0 10px}
.prosa p{font-size:var(--t-base);font-weight:500;line-height:1.75;color:var(--ink-80);margin:0 0 16px}
.prosa a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.prosa ul,.prosa ol{margin:0 0 18px;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.prosa li{font-size:var(--t-base);font-weight:500;line-height:1.7;color:var(--ink-80)}
.prosa ul{list-style:none;padding-left:0}
.prosa ul li{position:relative;padding-left:19px}
.prosa ul li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;
border-radius:50%;background:var(--blue)}
.prosa dl{margin:0 0 18px}
.prosa dt{font-weight:800;font-size:var(--t-base);margin-top:14px}
.prosa dd{margin:0;font-size:var(--t-base);font-weight:500;color:var(--ink-80)}
/* ---------- Metaband: Schlüssel und Wert nebeneinander ---------- */
.metaband{display:flex;flex-wrap:wrap;border:1px solid var(--card-line);border-radius:20px;
overflow:hidden;margin:36px 0 0;list-style:none;padding:0;background:var(--tint)}
.metaband li{flex:1 1 170px;padding:20px 22px;border-right:1px solid var(--card-line)}
.metaband li:last-child{border-right:0}
.metaband b{display:block;font-size:var(--t-xs);font-weight:800;letter-spacing:.11em;
text-transform:uppercase;color:var(--ink-50);margin-bottom:6px}
.metaband span{display:block;font-size:var(--t-base);font-weight:500}
/* ---------- Zitat mit Zuschreibung ---------- */
.zitat{border-left:2px solid var(--blue);padding:6px 0 6px 24px;margin:36px 0}
.zitat p{font-family:var(--serif);font-weight:400;font-size:var(--t-m);line-height:1.45;
margin:0 0 12px;color:var(--ink)}
.zitat cite{font-style:normal;font-size:var(--t-s);font-weight:500;color:var(--ink-50)}
.zitat cite b{display:block;font-weight:800;color:var(--ink)}
/* ---------- Team: Personenkarten ---------- */
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:48px;
list-style:none;padding:0;align-items:start}
/* ---------- Klickbare Personenprofile (/ueber-uns) ----------
/ statt Modal: keine Skripte, mit der Tastatur bedienbar,
funktioniert auch ohne JavaScript. Der Marker wird entfernt, weil die Karte
selbst als Schaltfläche wirkt. */
details.person-karte{background:var(--white);border:1px solid var(--card-line);
border-radius:20px;overflow:hidden;transition:border-color .18s,box-shadow .18s}
details.person-karte[open]{border-color:rgba(29,87,246,.22);
box-shadow:0 18px 40px -26px var(--schatten)}
details.person-karte>summary{list-style:none;cursor:pointer;display:block}
details.person-karte>summary::-webkit-details-marker{display:none}
details.person-karte>summary:hover .p-mehr{color:var(--blue-dk);text-decoration:underline}
details.person-karte .bild{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--hair)}
details.person-karte .bild img{width:100%;height:100%;object-fit:cover}
details.person-karte .text{display:block;padding:16px 16px 18px}
details.person-karte b{display:block;font-size:var(--t-base);font-weight:800;line-height:1.3}
.p-pos{display:block;font-size:var(--t-s);font-weight:500;color:var(--ink-50);margin-top:3px}
.p-slogan{display:block;font-family:var(--serif);font-weight:400;font-size:var(--t-s);
line-height:1.4;color:var(--ink-80);margin-top:10px}
.p-mehr{display:block;font-size:var(--t-xs);font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--blue);margin-top:12px}
details.person-karte[open] .p-mehr{visibility:hidden;height:0;margin:0}
.p-inhalt{padding:0 16px 20px;border-top:1px solid var(--hair);margin:0 16px;
padding-top:16px}
.p-titel{font-size:var(--t-xs);font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-50);margin:0 0 8px}
.p-inhalt .small{margin:0 0 16px}
.p-inhalt .chips{margin:0 0 16px}
.p-inhalt .small:last-child{margin-bottom:0}
/* «Was unsere Arbeit prägt und trägt»: helle Karten mit zentriertem Symbol. */
.g3.mittig .card{text-align:center;align-items:center}
.g3.mittig .ico-val{width:40px;height:40px;color:var(--ink);margin:0 auto 16px}
.g3.mittig .ico-val svg{width:40px;height:40px}
.g3.mittig h3{font-family:var(--serif);font-weight:400;font-size:var(--t-m)}
/* Credo: Bild links mit Überschrift darunter, Leitsätze rechts gestapelt. */
.credo .split{grid-template-columns:1.02fr .98fr;gap:56px;align-items:start}
.credo-bild{aspect-ratio:4/3;margin:18px 0 26px}
.leitsaetze{display:flex;flex-direction:column;gap:18px;padding-top:34px}
.leitsatz{background:var(--blau-flaeche-1);border-radius:20px;padding:26px 28px}
.leitsatz h3{margin:0 0 10px;font-size:var(--t-body)}
.leitsatz .small{margin:0}
@media (max-width:1000px){.credo .split{grid-template-columns:1fr}.leitsaetze{padding-top:0}}
.person-karte{background:var(--white);border:1px solid var(--card-line);border-radius:20px;
overflow:hidden;transition:transform .18s,border-color .18s}
.person-karte:hover{transform:translateY(-2px);border-color:rgba(29,87,246,.16)}
.person-karte .bild{aspect-ratio:1/1;overflow:hidden;background:var(--hair)}
.person-karte .bild img{width:100%;height:100%;object-fit:cover}
.person-karte .text{padding:16px 16px 20px}
.person-karte b{display:block;font-size:var(--t-base);font-weight:800;line-height:1.3;margin-bottom:5px}
.person-karte span{display:block;font-size:var(--t-s);font-weight:500;color:var(--ink-50);line-height:1.45}
/* ---------- Zeitleiste ---------- */
.zeitleiste{list-style:none;margin:44px 0 0;padding:0 0 0 26px;position:relative}
.zeitleiste::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:2px;
background:var(--hair)}
.zeitleiste li{position:relative;padding-bottom:26px}
.zeitleiste li:last-child{padding-bottom:0}
.zeitleiste li::before{content:"";position:absolute;left:-26px;top:6px;width:10px;height:10px;
border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px var(--white)}
.zeitleiste b{display:block;font-size:var(--t-s);font-weight:800;color:var(--blue);
letter-spacing:.06em;margin-bottom:4px}
.zeitleiste span{display:block;font-size:var(--t-base);font-weight:500;line-height:1.65;color:var(--ink-80)}
/* ---------- Formular ---------- */
.formular{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.feld-voll{grid-column:span 2}
.formular label{display:block;font-size:var(--t-xs);font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-50);margin-bottom:7px}
.formular input,.formular textarea,.formular select{width:100%;font:inherit;
font-size:var(--t-base);font-weight:500;padding:12px 14px;border:1px solid var(--hair);
border-radius:10px;background:var(--white);color:var(--ink)}
.formular input:focus,.formular textarea:focus,.formular select:focus{border-color:var(--blue);
outline:0;box-shadow:0 0 0 3px var(--blue-07)}
.formular textarea{min-height:132px;resize:vertical}
.formular .pflicht{color:var(--blue)}
.kontrollkaestchen{display:flex;gap:11px;align-items:flex-start;font-size:var(--t-s);
font-weight:500;color:var(--ink-80);line-height:1.55}
.kontrollkaestchen input{width:17px;height:17px;flex:none;margin-top:2px}
.formhinweis{font-size:var(--t-s);font-weight:500;color:var(--ink-50);margin:14px 0 0}
@media (max-width:1000px){
.team{grid-template-columns:repeat(3,1fr)}
.metaband li{flex:1 1 50%;border-bottom:1px solid var(--card-line)}
}
@media (max-width:760px){
.team{grid-template-columns:repeat(2,1fr)}
.formular{grid-template-columns:1fr}
.feld-voll{grid-column:span 1}
.metaband li{flex:1 1 100%;border-right:0}
.prosa h2{margin-top:40px}
}
/* ---------- Fallstudien-Kopf ---------- */
.ref-hero{padding:120px 0 0}
.ref-hero .chips{margin:0 0 22px}
/* .ref-hero traegt die kleinere H1 (--t-xl, max 50 px) — richtig fuer die sechs
Fallstudien mit ihren langen Projektnamen. Ueber uns, Referenzen, Kontakt und
Karriere sind aber Hauptseiten und liefen versehentlich mit derselben Regel:
ihre H1 war 50 statt 88 px und damit sichtbar kleiner als auf Startseite,
Unternehmensberatung, Gesundheitsnetze und Interimsmanagement.
.haupt-hero stellt sie auf die Anzeigengroesse zurueck. */
.ref-hero h1{font-size:var(--t-xl);max-width:20ch}
/* 690 statt 814: das linkeste Collagenbild beginnt bei x=827, der Textsatz
erlaubt aber bis 942. Auf Über uns und Karriere lief die H1 dadurch bis zu
95 px unter das Bild. 690 px sind genau die Strecke bis zur Bildkante. */
.haupt-hero h1{font-size:var(--t-display);max-width:690px;letter-spacing:-.0236em;line-height:1}
.haupt-hero{padding:174px 0 0}
@media (max-width:1340px){.haupt-hero{padding-top:120px}}
.ref-bild{padding:44px 0 0}
.ref-bild .ubild{aspect-ratio:16/7}
.referenzperson{margin:26px 0 0;padding-left:15px;border-left:2px solid var(--blue)}
.referenzperson b{display:block;font-size:var(--t-base);font-weight:800}
.referenzperson span{display:block;font-size:var(--t-s);font-weight:500;color:var(--ink-50)}
@media (max-width:760px){.ref-hero{padding:48px 0 0}.ref-bild .ubild{aspect-ratio:4/3}}
/* ---------- Gesundheitsnetze ---------- */
/* 91 statt 128: die 128 waren vom gerenderten Webflow-Master abgenommen, wo der
Hero-CTA 0x0 rendert und die zentrierte Flexbox den Block um 41 px nach unten
schiebt — ein kaputter Zustand. Der Entwurf setzt die H1-Oberkante auf 160,87,
abzueglich der 70 px Navigation also 91. */
.gn-hero{padding:91px 0 0}
/* Lage aus dem Entwurf (Figma 4259:1714), nicht mehr aus den Slot-Werten der
Startseite plus Korrektur-translate(). Die Gruppe sass dadurch 49,5 px zu weit
rechts und 5 px zu hoch — das war der Grund fuer «die Bilder sind ueberall».
Groesse und Drehwinkel stimmten schon; jetzt steht auch die Lage.
Bezug ist der 1184 px breite .collage-Kasten, dessen rechte Kante 48 px
innerhalb der 1280er Spur liegt — daher die um 96 px verschobenen right-Werte. */
.gn-a{width:189px;height:216px;right:-165.5px;top:24px;transform:rotate(26deg);z-index:1}
.gn-b{width:405px;height:315px;right:-91.5px;top:100px;transform:rotate(7deg);z-index:2}
.gn-c{width:176px;height:203px;right:212.25px;top:324.75px;transform:rotate(-37deg);z-index:3}
.collage figure.gn-a,.collage figure.gn-b,.collage figure.gn-c{position:absolute;margin:0;
border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(10,22,40,.5)}
/* Zitat als gefuellter Kasten wie im Entwurf (4259:1757) statt als blosser
Strich links. Der Abschnitt «Unser Ansatz» trug bisher kein einziges
gestalterisches Mittel — das war Jeremys «wirkt flach». */
/* Der Entwurf nennt hier #FFFCF1 / #FFD93D. #FFD93D steht in brand.md auf der
Nein-Liste — der Prüfer hat es beim ersten Versuch gemeldet. Genommen sind
deshalb die freigegebenen Projekttoene, die denselben Zweck erfuellen und
schon in .erarbeiten.gelb stehen. */
.zitat.kasten{background:var(--gelb-flaeche);border:1px solid rgba(255,225,7,.75);
border-radius:14px;padding:25px 29px;margin:64px 0;max-width:none}
.zitat.kasten p{font-style:italic;margin:0}
/* Eyebrow als Pille — inline-block ist zwingend, sonst laeuft die Pille ueber
die ganze Spaltenbreite. */
.eyebrow.pille{display:inline-block;padding:8px 13px;border-radius:100px;
background:var(--gelb-flaeche);color:var(--gelb-schrift);
border:1px solid rgba(255,225,7,.75)}
/* Haarlinie unter dem Kopfblock. Als Modifikator, weil .split 14-mal auf
8 Seiten steht. */
.split.mit-linie{border-bottom:1px solid var(--hair);padding-bottom:48px;
margin-bottom:64px}
.zitat.breit{max-width:none;margin:52px 0}
.zitat.breit p{font-size:var(--t-m)}
/* .erarbeiten trägt margin-top:-64px, weil der Kasten auf den Beratungsseiten
bewusst in das Bild darüber hineinragt. Steht er allein — im .listenpaar oder
als einziges Kind einer .umedia —, gibt es kein Bild, in das er ragen könnte:
auf /karriere schob sich «Was wir bieten» dadurch 30 px über die letzte Zeile
von «Ihr Profil». Hier also zurücksetzen. */
.listenpaar>.erarbeiten,.umedia>.erarbeiten:first-child{margin-top:0;margin-left:0;
margin-right:0;width:100%}
/* Im .split (Gesundheitsnetze) stehen die beiden Listen im Entwurf UNTEREINANDER
in der rechten Spalte, getrennt durch eine Haarlinie mit symmetrisch 36 px.
Nebeneinander zerhackte der Zeilenfall die Aufzaehlungen. Auf /karriere bleibt
das Paar zweispaltig — dort steht es ueber die volle Breite. */
.split .listenpaar{grid-template-columns:1fr;row-gap:0;margin-top:0}
.split .listenpaar>div+div{border-top:1px solid var(--hair);margin-top:36px;padding-top:36px}
.listenpaar{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px;align-items:start}
@media (max-width:900px){.listenpaar{grid-template-columns:1fr}}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px}
/* «Weitere Leistungen»: die beiden Karten sind Wegweiser auf ganze Seiten. Der
Entwurf (4259:2728/2744) setzt ihre Überschrift in der Serifenschrift auf
24 px — das ist der einzige entwurfsgedeckte Hebel, um den Abschnitt zu
stärken. --serif bleibt die Variable, damit der offene Serifen-Entscheid an
einer Stelle umlegbar bleibt. */
.weitere{padding:80px 0}
.weitere .card h3{font-family:var(--serif);font-weight:400;font-size:24px;
line-height:1.35;letter-spacing:-.01em}
.card .cat{font-size:var(--t-xs);font-weight:800;letter-spacing:.9px;text-transform:uppercase;
color:var(--blue);margin:0 0 10px}
.card .loc{font-size:var(--t-s);font-weight:500;color:var(--ink-50);margin:0 0 12px}
/* Mandatskarten: der Entwurf setzt die Zeitraum-/Ortszeile blau in Versalien
(4259:2597 ff.) und darunter eine eigene Funktionszeile. */
.mandate .card .loc{font-size:var(--t-xs);font-weight:800;letter-spacing:.9px;
text-transform:uppercase;color:var(--blue);margin:0 0 10px}
.mandate .card .funktion{font-size:var(--t-s);font-weight:500;color:var(--ink-59);
margin:0 0 14px}
.card .small b{font-weight:800;color:var(--ink)}
.stimme{text-align:center;padding:80px 0}
.stimme .sterne{font-size:var(--t-body);letter-spacing:3px;color:var(--yellow);margin:0 0 22px}
.stimme blockquote{margin:0;border:0;padding:0;max-width:60ch;margin-inline:auto}
.stimme blockquote p{font-family:var(--serif);font-style:italic;font-size:var(--t-l);
line-height:1.35;margin:0 0 18px}
@media (max-width:1000px){.g2{grid-template-columns:1fr}}
@media (max-width:760px){.gn-hero{padding:56px 0 0}}
/* ---------- Rechtstexte ---------- */
.recht-hero{padding:120px 0 0}
.recht-hero h1{font-size:var(--t-xl)}
.rechtskasten{background:var(--tint);border:1px solid var(--card-line);border-radius:20px;
padding:28px 30px;margin:0 0 24px}
.rechtskasten h2{margin-top:0;font-size:var(--t-body)}
.rechtskasten p:last-child{margin-bottom:0}
.dse-inhalt{background:var(--tint);border:1px solid var(--card-line);border-radius:20px;
padding:24px 28px;margin:0 0 40px}
.dse-inhalt ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.dse-inhalt a{color:var(--blue);text-decoration:none;font-size:var(--t-s);font-weight:500}
.dse-inhalt a:hover{text-decoration:underline}
.rechtsspiegel{margin-top:48px;padding-top:24px;border-top:1px solid var(--hair)}
/* Platzhalter absichtlich auffällig. Vor dem Livegang restlos entfernen,
inklusive dieser Regel — sonst bleibt das Muster für die nächste Seite verfügbar. */
.platzhalter{background:var(--yellow);border-left:4px solid #C9A800;border-radius:0 8px 8px 0;
padding:14px 18px;margin:0 0 28px;font-size:var(--t-s);font-weight:500;color:var(--ink)}
@media (max-width:760px){.recht-hero{padding:48px 0 0}}
/* ---------- Team, grosse Personenkarten (/ueber-uns) ---------- */
.person-gross .bild{aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--hair);
margin:-4px 0 18px}
.person-gross .bild img{width:100%;height:100%;object-fit:cover}
.person-gross .motto{font-family:var(--serif);font-size:var(--t-m);line-height:1.35;
color:var(--blue);margin:10px 0 14px}
.person-gross .chips{margin:14px 0 0}
.team-titel{margin:56px 0 0;font-size:var(--t-m)}
.person-karte .beschrieb{margin-top:10px;color:var(--ink-59);font-size:var(--t-s);line-height:1.55}
@media (max-width:1000px){.team{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.team{grid-template-columns:repeat(2,1fr);gap:12px}}
/* Unter 380 px reicht die Breite fuer zwei Profilkarten nicht mehr: bei 320 px
entstanden 20 px Querlauf. Ab dort einspaltig. */
@media (max-width:380px){.team{grid-template-columns:1fr}}
/* Mailadressen wie ritamaria.thoma@vitalba.ch haben keine Trennstelle und ragten
auf Telefonen aus der Karte. */
.p-inhalt a{overflow-wrap:anywhere}
.team>li{min-width:0}
/* ---------- Werkraster (/freiraum) ---------- */
.werke{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 22px;list-style:none;
margin:48px 0 0;padding:0}
.werk{min-width:0}
.wbild{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--hair);
box-shadow:0 12px 30px -18px var(--schatten);margin-bottom:14px}
.wbild img{width:100%;height:100%;object-fit:cover}
.wjahr{font-size:var(--t-xs);font-weight:800;letter-spacing:.08em;color:var(--blue);margin:0 0 5px}
.werk h3{margin:0 0 6px;font-size:var(--t-m);line-height:1.25}
.wperson{margin:0;font-size:var(--t-s);font-weight:500;color:var(--ink-80)}
.wtechnik{margin:4px 0 0;font-size:var(--t-s);font-weight:500;color:var(--ink-59)}
/* Webadressen enthalten keine Trennstellen, an denen der Browser von sich aus
umbricht. «lorrainefletcherartstudio.com» ist 199 px breit und lief bei 360 px
33 px aus dem Raster — anywhere erlaubt den Bruch mitten im Wort. */
.wweb{margin:8px 0 0;font-size:var(--t-s);overflow-wrap:anywhere}
/* Der Freiraum-Hero steht auf dunklem Grund: der Verlauf im wird dort
deutlich heller angesetzt, sonst verschwindet das Wort im Navy.
background-IMAGE, nicht die Kurzform background. Die Kurzform setzt alle
Hintergrundeigenschaften zurück, also auch background-clip:text aus der
Grundregel — das Wort «Sommergruss» wurde dadurch als voller blauer Kasten
gerendert und war unlesbar. Im gemessenen DOM war nichts auffällig; sichtbar
wurde es erst im Bildschirmfoto. */
.frei h1{color:var(--white)}
.frei h1 em{background-image:linear-gradient(96deg,var(--blau-hell-3),var(--blau-hell-3) 0%,var(--blau-hell-1))}
/* p.sub, nicht .sub: die Grundregel heisst .hero p.sub und ist damit spezifischer
als .frei .sub — der Vorspann blieb sonst dunkelblau auf Navy. */
.frei p.sub{color:var(--w-text)}
.frei p.sub strong{color:var(--w-betont)}
@media (max-width:1000px){.werke{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.werke{grid-template-columns:repeat(2,1fr);gap:26px 14px}}
/* ---------- Aufklappende Profile und Werke (