/* ---------------------------------------------------------------------
   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 <html> — das steht dort. */
.split>*,.ugrid>*,.eggrid>*,.g2>*,.g3>*,.g5>*,.listenpaar>*,.fmain>*{min-width:0}
/* hyphens:auto galt bis zum 11.8.2026 auch für H1–H3. Die Trennung rettete zwar
   das Raster, zerlegte aber Eigennamen: «Sar-ganserland» im Kartentitel auf
   /ref-sonnbuehl (To-do T-03). Ein getrennter Ortsname ist in einer Überschrift
   immer falsch.
   overflow-wrap:break-word BLEIBT — es ist der Schutz gegen Querlauf und greift
   nur, wenn ein Wort allein breiter als die Spalte ist. Zusammen mit min-width:0
   darüber ist das Raster damit weiterhin abgesichert; die Geräteprüfung über
   fünfzehn Breiten belegt es.
   .chip und .eyebrow behalten die Trennung: dort stehen Gattungsbegriffe wie
   «Bau- und Konzeptberatung», keine Namen. */
h1,h2,h3,h4,.chip,.eyebrow{overflow-wrap:break-word}
.chip,.eyebrow{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.
   44 statt 42 px: der Knopf ist auf dem Telefon die einzige Navigation und
   damit eine eigenständige Aktion — Apple HIG gibt dafür 44 pt an, das Audit
   vom 11.8.2026 hat ihn mit gemessenen 40 px gerügt (I-01). */
.navtoggle{display:none;background:none;border:1px solid var(--hair);border-radius:10px;
  width:44px;height:44px;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}

/* Aktiver Bereich. aria-current="page" setzt navigation() im Generator seit
   dem Umbau — sichtbar war es nie, und damit fehlte auf jeder Unterseite die
   Ortsangabe (Audit N-01). Der Marker ist ein ::after und kein border-bottom,
   damit die Leiste nicht um zwei Pixel höher wird. */
.navlinks a[aria-current="page"]{color:var(--blue);font-weight:800;position:relative}
.navlinks a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;
  bottom:-7px;height:2px;background:var(--blue);border-radius:2px}
/* Im aufgeklappten Menü sitzt jeder Link auf eigener Zeile über die volle
   Breite — ein Unterstrich läge dort auf der Trennlinie der Liste. Dort
   tragen Farbe und Gewicht den Zustand allein. */
@media (max-width:1149px){.navlinks a[aria-current="page"]::after{display:none}}

/* Schleier hinter dem offenen Menü. Ohne ihn lief die Seite optisch weiter,
   das Menü wirkte wie ein Textblock im Fluss statt wie eine Ebene (M-02).
   z-index 50 liegt unter der Leiste (60), damit das Menü selbst frei bleibt. */
.navscrim{position:fixed;inset:0;background:rgba(4,8,22,.45);z-index:50;
  opacity:0;pointer-events:none;transition:opacity .18s}
.navscrim[data-an]{opacity:1;pointer-events:auto}
@media (min-width:1150px){.navscrim{display:none}}
/* Sperrt den Hintergrund, solange das Menü offen ist. Setzt das Skript. */
html[data-menue-offen],html[data-menue-offen] body{overflow:hidden}

/* ---------- 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. */
/* Die einzige verbliebene Ausnahme, und sie ist begründet: «Datenschutz-
   erklärung» misst bei 320 px mehr als die ganze Spalte. Ohne hyphens bräche
   overflow-wrap das Wort OHNE Trennstrich — das ist schlechter als eine
   korrekte Trennung. T-03 zielt auf Eigennamen und Kartentitel, nicht auf
   Gattungsbegriffe. .ref-hero trägt Ortsnamen und wurde deshalb entfernt. */
.recht-hero h1{hyphens:auto}
/* Bis zum 11.8.2026 stand hier @media (max-width:420px){.hero h1{hyphens:auto}}.
   Das Audit (T-03) rügt genau diese Trennungen: in einer Anzeigengrösse ist ein
   Trennstrich immer ein Fehler, auch auf dem Telefon. Entfernt — und es entsteht
   dadurch KEIN Querlauf, weil die globale Regel weiter oben allen Überschriften
   overflow-wrap:break-word gibt. Nachgemessen bei 320 px: das längste Wort in
   einer .hero-H1 ist «transformieren» (235 px in der 33.5-px-Anzeige) und passt
   in die 276 px zwischen den Rändern.
   Die beiden Ausnahmen darüber bleiben: «Datenschutzerklärung» misst bei 320 px
   mehr als die ganze Spalte, dort MUSS getrennt werden dürfen. */
.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}
/* Versalien entfernt (To-do CTA-02): «MEHR INFORMATIONEN» in der Referenzkarte
   und «Mehr Informationen» in der Leistungskarte waren derselbe Ankertext in
   zwei Schreibweisen. Jetzt tragen beide Satzschreibung und dasselbe Verb —
   und beide sagen, wohin sie führen, statt «mehr». */
.ref .more{font-size:var(--t-s);font-weight:800;letter-spacing:.2px;
  color:var(--blue);text-decoration:none;align-self:flex-end;
  display:inline-flex;align-items:center;gap:6px}
.ref .more:hover{text-decoration:underline}

/* ---------- Ganze Karte klickbar ----------
   Die Aktion in Leistungs- und Referenzkarten war 21.6 px hoch (Audit C-01) —
   auf dem Telefon ein Zielchen von der Höhe einer Textzeile, während daneben
   300 px Karte ungenutzt liegen.

   Bewusst als ::after des VORHANDENEN Links und nicht als zweiter <a> um die
   Karte: es bleibt bei genau einem Link je Karte. Ein zweiter, umschliessender
   Link würde denselben Zielort doppelt verlinken — für Suchmaschinen ein
   zweiter Anker mit anderem Ankertext, für Screenreader ein doppelter Eintrag
   in der Linkliste. Das ::after erbt Ziel und Beschriftung des Originals.

   Voraussetzung: KEIN Kind zwischen Karte und Link darf position tragen, sonst
   spannt sich das ::after nur über dieses Kind. .card ist flach, .ref .body
   trägt kein position — geprüft am 11.8.2026. */
.card,.ref{position:relative}
.card>.link::after,.ref .more::after{content:"";position:absolute;inset:0;z-index:1}
/* Text in der Karte bleibt markierbar, wo es zählt: der Titel liegt über der
   Klickfläche. Das übrige ::after schluckt die Auswahl — der bekannte Preis
   dieses Musters, hier akzeptiert, weil die Karte ein Wegweiser ist. */
.card h3,.ref h3{position:relative;z-index:2}
.card:hover .link,.ref:hover .more{text-decoration:underline}
.card:hover{transform:translateY(-2px);border-color:rgba(29,87,246,.16)}

/* ---------- 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 <img> 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}
}
/* Zwischenzustand für Tablets (Audit G-01). Die Karten sprangen bei 1000 px
   von drei Spalten direkt auf eine — zwischen 640 und 999 px blieb damit die
   halbe Breite leer und die Seite unnötig lang. Zwei Spalten schliessen die
   Lücke und verkürzen genau den Bereich, den S-01 als zu lang misst.
   MUSS nach dem 1000er Block stehen, sonst gewinnt dessen 1fr. */
@media (min-width:640px) and (max-width:999px){
  .g3,.refs{grid-template-columns:repeat(2,minmax(0,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.

   900 war immer noch zu tief. Nachgemessen am 11.8.2026 (Designaudit R-01),
   Startseite, Logo- und Linkbreiten im Kopf:
       950 px → Logo 22.3 px, «Über uns» zweizeilig, Kopf 72 px
      1000 px → Logo 72.3 px, «Über uns» zweizeilig
      1024 px → Logo 96.3 px, «Über uns» zweizeilig
      1100 px → Logo 165.5 px, «Über uns» zweizeilig
      1150 px → Logo 171 px, einzeilig, Kopf 70 px
   Der Querlauf-Prüfer sah davon nichts: es lief nichts hinaus, die Leiste
   quetschte sich zusammen. Deshalb Vollnavigation erst ab 1150 px — und
   flex:none auf Logo und Kontaktknopf, damit sie nie wieder schrumpfen. */
.brand,.brand img,.navcta,.navtoggle{flex:none}
@media (max-width:1149px){
  .navin{gap:12px;flex-wrap:wrap}
  .navtoggle{display:flex;order:3}
  .navcta{order:2}
  .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)}
}
/* Das kleine Logo und der kompakte Knopf gehören auf Telefone und Tablets,
   nicht in den neuen Hamburger-Bereich bis 1149 px — dort ist Platz für die
   volle Marke. */
@media (max-width:900px){
  .brand img{width:140px;height:28px}
  .navcta{padding:10px 16px;font-size:var(--t-s)}
}

/* 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}
  /* Das Seitenverhaeltnis wird weiter unten aufgehoben — siehe den Block
     «Hochformat auf Telefonen» am Ende der Datei. Er MUSS dort stehen, weil der
     760er Block hier drueber liegt und sonst gewinnt. */
}

@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
   «Organisations­entwicklung» und «Fach- und Team­beratung» 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) ----------
   <details>/<summary> 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 <em> 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 (<dialog>) ----------
   Natives <dialog> statt selbstgebautem Overlay: der Browser übernimmt
   Fokusfalle, Escape und die Hintergrundsperre. Ohne JavaScript bleiben die
   Karten trotzdem bedienbar — das Skript wandelt sie erst dann in Schalter um,
   siehe bausteine/dialog.js. */
dialog.pop{border:0;padding:0;max-width:min(760px,92vw);width:100%;
  border-radius:24px;background:var(--white);color:var(--ink);
  box-shadow:0 40px 90px -40px rgba(10,22,40,.55)}
dialog.pop::backdrop{background:rgba(10,22,40,.55);backdrop-filter:blur(3px)}
.pop-kopf{display:grid;grid-template-columns:132px 1fr;gap:22px;align-items:center;
  padding:28px 30px 0}
.pop-bild{aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:var(--hair)}
.pop-bild img{width:100%;height:100%;object-fit:cover}
.pop-kopf h3{margin:0 0 4px;font-size:var(--t-l)}
.pop-rolle{margin:0;font-size:var(--t-s);font-weight:500;color:var(--ink-50)}
.pop-slogan{margin:12px 0 0;font-family:var(--serif);font-weight:400;
  font-size:var(--t-m);line-height:1.35;color:var(--blue)}
.pop-koerper{padding:26px 30px 30px}
.pop-koerper .p-titel{margin-top:22px}
.pop-koerper .p-titel:first-child{margin-top:0}
.pop-zu{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--hair);background:var(--white);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;font-size:20px;line-height:1}
.pop-zu:hover{background:var(--tint)}
/* Werk-Lightbox auf /freiraum */
dialog.pop.werk{max-width:min(1040px,94vw)}
dialog.pop.werk img{width:100%;height:auto;display:block;border-radius:24px 24px 0 0}
dialog.pop.werk .pop-koerper{padding:22px 30px 28px}
@media (max-width:620px){
  .pop-kopf{grid-template-columns:1fr;gap:16px;padding:24px 22px 0}
  .pop-bild{max-width:132px}
  .pop-koerper{padding:22px 22px 26px}
}
.team-titel{margin:56px 0 0;font-size:var(--t-m)}
.team-titel:first-of-type{margin-top:48px}
.team.drei{grid-template-columns:repeat(3,1fr);max-width:760px}
@media (max-width:1000px){.team.drei{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.team.drei{grid-template-columns:repeat(2,1fr)}}
@media (max-width:380px){.team.drei{grid-template-columns:1fr}}
.karten-links{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:22px}
.formular button[disabled]{opacity:.45;cursor:not-allowed}
.formhinweis{margin:12px 0 0;font-size:var(--t-s);color:var(--ink-59)}
.formular input,.formular textarea{width:100%;border:1px solid var(--hair);border-radius:12px;
  padding:13px 15px;font:inherit;font-size:var(--t-base);color:var(--ink);background:var(--white)}
.formular input:focus,.formular textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}
.formular textarea{resize:vertical;min-height:120px}
.kontrollkaestchen{display:flex;gap:12px;align-items:flex-start}
.kontrollkaestchen input{width:20px;height:20px;flex:none;margin-top:2px}
.kontrollkaestchen label{font-size:var(--t-s);font-weight:500;color:var(--ink-80);
  letter-spacing:0;text-transform:none}
@media (max-width:760px){.formular{grid-template-columns:1fr}.feld-voll{grid-column:span 1}}

/* Geschäftsleitung getrennt vom Interimspool — drei breitere Karten oben. */
.team-fuehrung{grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:1000px){.team-fuehrung{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.team-fuehrung{grid-template-columns:repeat(2,1fr)}}
@media (max-width:380px){.team-fuehrung{grid-template-columns:1fr}}

.kartenlinks{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:18px}

/* ---------- Karte mit zwei Klicks ---------- */
.karte{position:relative;aspect-ratio:16/11;border-radius:25px;overflow:hidden;
  background:var(--tint);border:1px solid var(--card-line)}
.karte iframe{width:100%;height:100%;border:0;display:block}
.karte-vorschau{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:30px;gap:14px;
  background:
    linear-gradient(0deg,rgba(29,87,246,.05),rgba(29,87,246,.05)),
    repeating-linear-gradient(0deg,var(--tint),var(--tint) 38px,var(--hair) 38px,var(--hair) 39px),
    repeating-linear-gradient(90deg,transparent,transparent 54px,var(--hair) 54px,var(--hair) 55px)}
.karte-pin{width:52px;height:52px;border-radius:16px;background:var(--blue);color:var(--white);
  display:grid;place-items:center;box-shadow:0 14px 30px -12px rgba(29,87,246,.7)}
.karte-pin svg{width:26px;height:26px}
.karte-adresse{margin:0;font-size:var(--t-s);font-weight:500;color:var(--ink-80);line-height:1.5}
/* --t-xs (11px) ist die Versal-Labelgroesse. Dieser Satz ist aber Fliesstext:
   er erklaert, warum die Karte erst auf Klick laedt — eine Datenschutz-
   information, die lesbar sein muss. 13px ist die kleinste Groesse, die
   die Geraetepruefung fuer Fliesstext durchlaesst. */
.karte-hinweis{margin:0;max-width:38ch;font-size:13px;line-height:1.5;font-weight:500;
  color:var(--ink-59);line-height:1.5}

/* ---------- Über uns: Feinschliff ----------
   Die Zeitleiste lief über die volle 1184er Spur — bei 1440 px sind das rund
   150 Zeichen pro Zeile, weit über den 60–75, die sich noch flüssig lesen
   lassen. Sie bekommt eine eigene Lesebreite und steht dafür mittig. */
/* 640 px statt der vollen Spur: gemessen 104 Zeichen pro Zeile, lesbar sind
   60–75. ch half hier nicht — die Einheit rechnet mit der Schrift des Elements,
   nicht mit der des Absatzes darin. */
.zeitleiste{max-width:640px;margin-inline:auto}

/* Der Hero auf Über uns trägt Eyebrow, H1, Vorspann UND Zahlenzeile. Auf
   Telefonen stapelt sich das zu einem sehr hohen Kopf; die Zahlenzeile rückt
   deshalb enger und der Vorspann bekommt eine ruhigere Zeilenlänge. */
/* Der Hero war auf Telefonen bis zu 1196 px hoch — anderthalb Bildschirme,
   bevor der erste Inhalt kommt. Gemessen bei 320/360/390/430 px. Die H1 lief
   dort mit 50 px (dem unteren Ende der Anzeigenskala) über fünf Zeilen.
   Auf schmalen Schirmen darf sie kleiner werden; zusammen mit den engeren
   Abständen und dem flacheren Bild passt der Kopf wieder auf einen Schirm. */
@media (max-width:760px){
  .hero h1,.haupt-hero h1{font-size:clamp(32px,8.6vw,50px);max-width:none}
  .hero .sub{font-size:var(--t-body);margin-top:20px}
  .hero .stats{margin-top:24px;padding-top:18px;gap:6px 18px}
  .hero .eyebrow{margin-bottom:12px}
  .hero,.ub-hero,.gn-hero,.im-hero,.haupt-hero,.ref-hero{padding-top:64px}
  .collage{margin-top:28px;margin-bottom:28px}
  .collage figure{aspect-ratio:2/1}
  .hero .sub{line-height:1.5}
  .hero .btn{margin-top:24px}
}

/* ---------- Hochformat auf Telefonen ----------
   MUSS nach dem 760er Block stehen. Dort setzt .collage figure aspect-ratio:2/1,
   damit der Hero auf einen Schirm passt — bei 561-760 px stehen drei Kacheln
   nebeneinander und das flache Format ist dort richtig.

   Unter 560 px bleibt aber nur EIN Bild uebrig, und ein 2:1-Kasten mit
   overflow:hidden schneidet einem hochformatigen Foto die Koepfe ab. Gemessen
   am 7.8.2026: Figur 456x228, Bild darin 456x553 — die unteren 325 px lagen
   ausserhalb. Jeremy hat es zweimal gemeldet, das erste Mal habe ich nur die
   16/10-Regel weiter oben korrigiert und diese hier uebersehen.

   Lehre fuer die Pruefung: das Verhaeltnis des <img> allein sagt nichts. Es war
   mit 0.824 unveraendert korrekt — beschnitten hat der Elternkasten. */
@media (max-width:560px){
  .collage figure{aspect-ratio:auto;overflow:visible}
  .collage img{height:auto;object-fit:fill}
}

/* ---------- Mandatsbeispiele (Interimsmanagement) ----------
   Vier Mandate aus dem Pruefdokument. Drei davon haben weder Fallstudie noch
   Projektbild — ihr Beleg ist das Kundenzitat. Deshalb Textkarten statt der
   Bildkarten von .refs: eine leere Bildflaeche waere hier eine Behauptung. */
.mandate{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:44px}
/* Flaeche und Linie wie .card — weisse Karten auf weissem Grund sind keine Karten. */
.mandat{background:var(--tint);border:1px solid var(--card-line);border-radius:20px;
  padding:32px 30px;display:flex;flex-direction:column}
/* NICHT --t-l: das ist clamp(30px,3.3vw,42px) und damit Seitentitelgroesse. In der
   Karte laesst es «Chasa Puntota, Center da Sanda Engiadina bassa» ueber drei
   Zeilen laufen und erschlaegt den Text darunter. */
.mandat h3{font-size:22px;line-height:1.3;margin:0 0 12px;letter-spacing:-.01em}
.mandat .txt{margin:0;color:var(--ink-70);font-size:var(--t-s);line-height:1.62}
/* margin-top:auto schiebt das Zitat an den Kartenfuss — sonst haengt es direkt
   unter unterschiedlich langen Texten und die Zitate stehen nicht auf einer Linie. */
.mandat .zitat{margin:22px 0 0;padding:6px 0 6px 20px}
.mandat .zitat:last-child{margin-top:auto;padding-top:22px}
.mandat .zitat p{font-size:var(--t-s);line-height:1.5}
.mandat .more{margin-top:22px}
@media (max-width:860px){.mandate{grid-template-columns:1fr}}

/* =========================================================================
   Designaudit vom 11. August 2026 — Mobil- und Tippzielkorrekturen
   =========================================================================
   Quelle: «Vitalba UI/UX-Audit», Backlog-IDs in Klammern. Alle Zahlen darin
   sind am 11.8.2026 gegen den gebauten Stand nachgemessen und haben gestimmt;
   was NICHT umgesetzt wurde, steht mit Begründung in der Antwort an Jeremy.

   Grundsatz für diesen Block: kein Inhalt wird entfernt, um Seiten zu kürzen.
   Alle zwanzig Kundenlogos bleiben im HTML, alle Footerlinks bleiben im HTML —
   verkürzt wird über Raster, Rhythmus und Aufklappen, nicht über Löschen.
   Gelöschter Text kostet Sichtbarkeit in der Suche und lässt sich nicht
   zurückholen; ein zugeklapptes Element kostet nichts.
   ========================================================================= */

/* ---- R-02 · Sehr schmale Telefone (320 px) ----
   Gemessen am 11.8.2026 auf der Startseite bei 320 px: Logo 140 + Lücke 12 +
   Kontakt 81.3 + Lücke 12 + Menü 40 = 285.3 px bei 276 px verfügbarer Breite.
   Der Menüknopf sprang in eine zweite Zeile, der Kopf wurde 117.6 statt
   65.6 px hoch. Statt weiter zu schrumpfen ein eigener Modus:
   118 + 8 + 73 + 8 + 44 = 251 px, also 25 px Reserve. */
@media (max-width:340px){
  .navin{gap:8px}
  .brand img{width:118px;height:24px}
  .navcta{padding:10px 12px;font-size:12px}
  /* Das Kennzahlenband verlor bei 320 px ebenfalls die Ordnung: «CH-weit»
     rutschte in eine dritte Zeile (gemessen y=527/527/557). Drei gleich breite
     Zellen, Wert über Label, Trennpunkte weg.

     minmax(0,1fr) und NICHT 1fr: das ist der Fallstrick, der beim Umbau schon
     einmal zugeschnappt ist. 1fr heisst minmax(auto,1fr), und auto ist die
     min-content-Breite — auf /ueber-uns steht im Band «im Gesundheitswesen»,
     damit wuchs die .shell auf 328 px bei 320 px Viewport. Gesehen hat man es
     nicht, weil .hero{overflow-x:clip} den Überstand abschneidet; gemeldet hat
     es nur die Geräteprüfung. Dazu hyphens auf den Beschriftungen, sonst passt
     das Wort auch in einer 84-px-Spalte nicht. */
  .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
  .stats>span{min-width:0}
  .stats .sep{display:none}
  .stats b{font-size:18px}
  .stats span span{display:block;margin-left:0;margin-top:3px;line-height:1.35;
    overflow-wrap:break-word;hyphens:auto}
}

@media (max-width:760px){
  /* ---- M-01 · Kompakter Sticky-Header ----
     65.6 px blockierten 7.8 % eines 844-px-Viewports über bis zu sechzehn
     Bildschirmhöhen. Hide-on-scroll wäre der grössere Gewinn, bringt aber ein
     Skript in den Scrollpfad und damit ein Ruckelrisiko; der kompakte Modus
     erreicht das Ziel des Audits (56–60 px) ohne beides.
     44 px Knopfhöhe + 2×8 px = 60 px. */
  .navin{padding-top:8px;padding-bottom:8px}
  .navcta{min-height:44px;display:inline-flex;align-items:center}

  /* ---- T-03 · Zeilenhöhe der mobilen H1 ----
     33.54 px Schrift auf 33.54 px Zeile ist in einer Serifenanzeige zu eng;
     das Audit verlangt 1.06–1.10. */
  .hero h1{line-height:1.08}

  /* ---- T-04 · Zweite Überschriftenstufe absetzen ----
     Das Audit schreibt «H3 mobil 30 px, zu nahe an H2 mit 32 px». Gemessen ist
     es nicht H3 (die liegt bei 15–24 px), sondern eine ZWEITE H2-Grösse:
     --t-l fällt bei 390 px auf seine Untergrenze von 30 px und steht damit
     2 px neben --t-xl mit 32 px. Der Befund stimmt, die Zuordnung nicht.
     Korrigiert wird deshalb genau dort — und nicht am Token --t-l, weil daran
     auch die grossen Kennzahlen (.num b) und das Pull-Quote hängen. */
  .utext h2,.erstgespraech h2,.prosa h2{font-size:26px}

  /* ---- T-01 · Fliesstext in Karten ----
     13.5/22.3 px gemessen. Zielgruppe sind Geschäfts- und Pflegedienst-
     leitungen, überwiegend 45+. 15/24 px. */
  .small,.ref .txt,.mandat .txt{font-size:15px;line-height:1.6}

  /* ---- T-02 · Kicker und Labels ----
     11 px in Versalien mit 1.32 px Sperrung. Auf dem Telefon zu fein.
     Bewusst NUR mobil: --t-xs:11px ist eine Stufe der Typenskala aus
     brand.md 2.2, ein globaler Wechsel wäre eine Markenänderung und gehört
     Matheus vorgelegt, nicht nebenbei gemacht. */
  :root{--t-xs:12px}

  /* ---- M-03 · Lange zentrierte Absätze ----
     Gemessen ein Absatz über sieben Zeilen mittig gesetzt: bei jeder Zeile
     springt der Zeilenanfang. Überschriften bleiben zentriert. */
  .mid .intro,.mid>p,.kopf-weit .intro{text-align:left}

  /* ---- I-01 · Tippziele ----
     Gemessen: Kartenlink 21.6 px, Social-Icons 32 px, Footerlinks 17.5 px.
     Die Social-Icons behalten ihre 32-px-Fläche und bekommen die Hitarea über
     ein ::after — die Fussleiste soll nicht plötzlich klobig werden. */
  .link,.more{min-height:44px}
  .soc{position:relative}
  .soc::after{content:"";position:absolute;inset:-6px}
  .fcol ul{gap:2px}
  .fcol a{display:block;padding:10px 0}
  .fkontakt a{display:inline-block;padding:9px 0}
  .fbot a{display:inline-block;padding:9px 0}

  /* ---- F-01 · Logowand ----
     Zwanzig Logos sind auf dem Telefon rund zwei Bildschirmhöhen ohne jede
     Hierarchie. Acht bleiben stehen, der Rest kommt auf Knopfdruck.
     Die Klasse setzt das Skript — ohne JavaScript stehen alle zwanzig da. */
  .logos.gekuerzt li:nth-child(n+9){display:none}
  .logos-mehr{display:inline-flex}
}

/* Der Knopf zur Logowand. Steht auf der Navy-Fläche, deshalb weiss auf Linie. */
.logos-mehr{display:none;align-items:center;justify-content:center;gap:8px;
  margin:24px auto 0;min-height:44px;padding:11px 22px;background:transparent;
  color:var(--white);border:1px solid var(--w-rand);border-radius:100px;
  font-family:inherit;font-size:var(--t-s);font-weight:800;cursor:pointer;
  transition:background .18s}
.logos-mehr:hover{background:var(--w-flaeche)}

/* ---- C-04 · Direkte Aktionen im Kontakt-Hero ----
   Der Kontakt-Hero hatte keine Anruf- und keine Mailaktion; wer auf dem
   Telefon dort landet, musste erst weiterscrollen. 48 px hoch. */
.hero-aktionen{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 0}
.hero-aktionen a{display:inline-flex;align-items:center;gap:9px;min-height:48px;
  padding:12px 24px;border-radius:100px;text-decoration:none;
  font-size:var(--t-base);font-weight:800}
.hero-aktionen svg{width:17px;height:17px;flex:none}
.hero-aktionen .anruf{background:var(--blue);color:var(--white)}
.hero-aktionen .anruf:hover{background:var(--blue-dk)}
.hero-aktionen .mail{background:transparent;color:var(--blue);
  box-shadow:inset 0 0 0 1px rgba(29,87,246,.25)}
.hero-aktionen .mail:hover{background:var(--blue-07)}

/* ---- Brotkrume auf den Fallstudien ----
   Das Audit verlangt sie für die Referenzdetails; sie zahlt doppelt: sichtbarer
   Rücksprung für Menschen, BreadcrumbList für Suchmaschinen (der Generator legt
   das Markup dazu). Sitzt über der H1 im Hero. */
.krume{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px;
  padding:0;list-style:none;font-size:var(--t-s);font-weight:500;color:var(--ink-59)}
.krume a{color:var(--blue);text-decoration:none;font-weight:800;
  display:inline-flex;align-items:center;min-height:32px}
.krume a:hover{text-decoration:underline}
.krume .trenner{color:var(--grey)}
.krume li[aria-current="page"]{color:var(--ink-59)}
@media (max-width:760px){.krume a{min-height:44px}}

/* ---- Footer-Linkspalten als Aufklapper ----
   Auf breiten Schirmen sehen sie exakt aus wie vorher: <details open>, der
   Marker ist weg und der Kopf nicht anklickbar. Erst unter 761 px werden sie
   zu echten Aufklappern (das Skript schliesst sie dort).
   Reihenfolge beachtet: .fcol h2 steht weiter oben und gilt weiter. */
.fgruppe>summary{list-style:none;display:block}
.fgruppe>summary::-webkit-details-marker{display:none}
.fgruppe>summary::marker{content:""}
@media (min-width:761px){
  /* Auf dem Desktop soll niemand versehentlich zuklappen, was immer offen ist. */
  .fgruppe>summary{pointer-events:none}
}
@media (max-width:760px){
  .fgruppe{border-bottom:1px solid rgba(253,253,255,.09)}
  .fgruppe>summary{cursor:pointer;display:flex;align-items:center;
    justify-content:space-between;gap:12px;min-height:44px;padding:4px 0}
  .fgruppe>summary h2{margin:0}
  /* Der Winkel dreht sich beim Aufklappen. Als Pseudoelement, damit im Markup
     kein Zeichen steht, das ein Screenreader vorlesen müsste. */
  .fgruppe>summary::after{content:"";width:9px;height:9px;flex:none;
    border-right:1.6px solid var(--w-meta);border-bottom:1.6px solid var(--w-meta);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
  .fgruppe[open]>summary::after{transform:rotate(225deg) translate(-2px,-2px)}
  .fgruppe>ul{padding-bottom:8px}
  /* Tippziele im Fuss auf komfortable Höhe (I-01). */
  .fcol a{padding:13px 0}
  .fkontakt a{padding:11px 0}
  .fbot a{padding:11px 0}
}

/* =========================================================================
   Webdesign-To-do-Liste vom 11. August 2026 — zweite Runde
   ========================================================================= */

/* ---- L-01 · Sprungziele liegen nicht mehr unter dem Kopf ----
   Die Leiste ist position:sticky;top:0 und 70 px hoch (mobil 60). Ein Klick auf
   «#s4» scrollte die Überschrift auf y=0 — also GENAU hinter die Leiste. Das ist
   der «Sticky überdeckt Inhalt»-Fall aus L-01; ein sticky Inhaltsverzeichnis
   gibt es auf dieser Fassung gar nicht, überdeckt hat der Seitenkopf.
   scroll-margin-top wirkt auf jedes Sprungziel, auch auf den Sprung aus dem
   Skiplink und aus einer geteilten URL mit Anker. */
:root{--kopfhoehe:70px}
@media (max-width:760px){:root{--kopfhoehe:60px}}
[id]{scroll-margin-top:calc(var(--kopfhoehe) + 24px)}

/* ---- L-02/L-03 · Inhaltsverzeichnis und Lesespalte ----
   Kein sticky Seitenpanel auf dem Desktop, obwohl L-03 es vorschlägt: die
   Inhaltsspur ist innen 1184 px breit, .prosa nimmt davon bei 68ch rund
   1088 px. Für eine 280-px-Spalte bliebe die Lesespalte bei etwa 53ch — unter
   den 62–68ch, die dieselbe Liste als Abnahme fordert. Von zwei Anforderungen,
   die sich widersprechen, gewinnt die Lesbarkeit. Das Verzeichnis bleibt also
   ein ruhiger Kasten am Anfang, aber ein richtig gebauter. */
.rechtslayout{display:grid;grid-template-columns:minmax(0,1fr)}
.dse-inhalt ol{counter-reset:dse}
.dse-inhalt li{counter-increment:dse}
.dse-inhalt a{display:flex;align-items:center;min-height:40px;gap:10px}
/* Aktives Kapitel. Das Skript setzt data-hier, sobald die Sektion im Blick ist. */
.dse-inhalt a[data-hier]{font-weight:800;color:var(--blue-dk)}
.dse-inhalt a[data-hier]::before{content:"";width:3px;align-self:stretch;margin:6px 0;
  background:var(--blue);border-radius:2px}
.dse-inhalt a:not([data-hier])::before{content:"";width:3px;align-self:stretch;margin:6px 0;
  background:transparent}
@media (max-width:760px){
  .dse-inhalt a{min-height:44px}
  .dse-inhalt{padding:20px 20px}
}
/* Rücksprung nach langen Kapiteln. Setzt der Generator, gemessen an der
   Kapitellänge — nicht nach jedem H2, das wäre Lärm. */
.nach-oben{margin:26px 0 0;text-align:right}
.nach-oben a{display:inline-flex;align-items:center;gap:7px;min-height:44px;
  color:var(--ink-59);text-decoration:none;font-size:var(--t-s);font-weight:800}
.nach-oben a:hover{color:var(--blue)}
.nach-oben svg{width:13px;height:13px}

/* ---- T-01 · Lange Rechts- und Referenztexte ----
   15 px über fünfzehn Bildschirmhöhen Rechtstext ist zu klein. 16/1.75 —
   .prosa trägt max-width:68ch, das Mass wächst also mit und bleibt im Fenster
   der Abnahme (62–68ch). */
.prosa p,.prosa li,.prosa dd,.prosa dt{font-size:16px}
.prosa p{line-height:1.75}
.prosa li{line-height:1.7}

/* ---- Nur für Screenreader ----
   Trägt den beschreibenden Teil eines Ankertextes, den das Layout nicht zeigen
   soll. «Für diese Rolle bewerben» allein sagt in der Linkliste eines
   Screenreaders nichts — viermal derselbe Text auf einer Seite. Mit dem Zusatz
   heisst der Link «Für diese Rolle bewerben – Pflegedienstleitung».
   Bewusst KEIN display:none und kein hidden: beides nähme den Text auch aus dem
   Zugänglichkeitsbaum und aus dem Ankertext. */
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- CTA-01 · Kontaktknopf auf der Kontaktseite ----
   Er bleibt stehen (die Leiste ist auf allen Seiten identisch), verliert dort
   aber seine Signalwirkung: gefüllt blau heisst «hier geht es weiter», und
   weiter geht es auf der Seite, auf der man schon steht. */
.navcta[aria-current="page"]{background:transparent;color:var(--blue);
  box-shadow:inset 0 0 0 1px rgba(29,87,246,.3)}
.navcta[aria-current="page"]:hover{background:var(--blue-07)}

/* ---- Rollenhinweis auf /kontakt ---- */
.rollenhinweis{margin:26px 0 0;padding:14px 18px;border-radius:12px;
  background:var(--blau-flaeche-1);color:var(--ink);font-size:var(--t-base);
  font-weight:800;max-width:60ch}

/* ---- Verweis auf den Interimspool (/interimsmanagement) ---- */
.pool-hinweis{margin:40px 0 0;text-align:center;font-size:var(--t-base);
  font-weight:500;color:var(--ink-80)}
.pool-hinweis .link{margin-left:8px}
@media (max-width:760px){.pool-hinweis{text-align:left;margin-top:32px}}

/* ---- REF-02 · Kontaktaktion im Kopf der Fallstudien ----
   Gemessen am 11.8.2026 bei 390 px lag der erste CTA je nach Seite bei
   3415–4292 px, also auf Bildschirm 4 bis 5. Die Abnahme verlangt Bildschirm 3
   (≤2532 px). Die Fallstudie wird deshalb NICHT umgestellt — die Dramaturgie
   Ausgangslage → Vorgehen → Ergebnis ist richtig. Stattdessen steht die Aktion
   zusätzlich im Kopf, wo ohnehin schon Ort und Leistung stehen. */
.ref-aktion{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin:28px 0 0}
.ref-aktion .link{font-weight:800}
@media (max-width:560px){
  .ref-aktion{gap:14px}
  .ref-aktion .btn{width:100%;text-align:center}
}

/* ---- V-03 · Chips sind Etiketten, keine Schalter ----
   Der 1-px-Rahmen in Buttonblau war das Signal, das sie bedienbar aussehen
   liess; Hover oder cursor:pointer hatten sie nie. Ohne Rahmen bleibt eine
   ruhige getönte Fläche — als Etikett lesbar, nicht als Filter.
   Wenn Chips später einmal echte Filter werden, kommt der Rahmen zusammen mit
   Hover-, Fokus- und Aktivzustand zurück; dann stimmt das Signal wieder. */
.chips .chip{border-color:transparent;cursor:default}
.ublock .chip,.blue .chip{border-color:transparent}

/* ---- V-05 · Kennzahlenband gegen die Galerie abgrenzen ----
   Auf dem Telefon steht das Band unmittelbar über der Bildreihe des Heros und
   konnte als deren Bildunterschrift gelesen werden. Die Linie oben gab es schon,
   unten fehlte sie — jetzt ist es beidseitig geschlossen und damit als eigene
   Fläche erkennbar. */
@media (max-width:1200px){
  .hero .stats{padding-bottom:22px;border-bottom:1px solid var(--grey)}
}

/* ---- FTR-01 · Partnerleiste auf dem Telefon verdichten ----
   Der Footer mass mobil 1464 px. Die Linkspalten als Aufklapper brachten ihn
   auf 1200, davon entfallen 346 auf die Partner- und Mitgliedschaftslogos.

   Die Abnahme verlangt «ungefähr eine Bildschirmhöhe». Erreichbar wäre das nur,
   indem diese Logos ebenfalls zugeklappt werden — bso, SVF, SVEB und ARTISET
   sind aber Vertrauensbelege und keine Linkgruppe; wer sie wegklappt, spart
   Höhe und verliert Wirkung. Stattdessen verdichtet: kleinere Kacheln, engerer
   Satz, dieselben sieben Marken sichtbar. Rund 1.2 statt 1.42 Bildschirmhöhen —
   und der Rest der Abnahme (Adresse, Telefon, E-Mail offen sichtbar, alles
   übrige einen Tap entfernt) ist erfüllt. */
@media (max-width:760px){
  .partners{padding:22px 0 24px}
  .pwrap{gap:20px}
  .plabel{margin-bottom:10px}
  .prow{gap:8px}
  .plogo{height:46px;padding:6px 12px;min-width:70px}
  .plogo img{max-height:24px;max-width:104px}
  .plogo.quadrat img{max-height:34px;max-width:34px}
  .fbot{padding:18px 0;gap:6px 20px}
}

/* =========================================================================
   Offene To-dos Web/SEO vom 12. August 2026
   ========================================================================= */

/* ---- WEB-03 · Ein Token für den Abschnittstrenner ----
   Vorher gab es keinen benannten Wert dafür, nur die Innenabstände der
   einzelnen Sektionen. Der Trenner ist etwas anderes als Innenabstand: er ist
   die NEUTRALE Fläche, bevor eine farbige Fläche beginnt. */
:root{--abschnittstrenner:clamp(48px,4vw,64px)}

/* ---- WEB-02 · Neutrale Fläche vor Farbbändern nach einem .ublock ----
   .ublock trägt auf dem Desktop padding:88px 0 0 — unten also nichts. Folgt
   darauf ein farbiges Band, beginnt dessen Kante exakt am letzten Inhalt des
   Blocks: die Karten auf /karriere enden an der Sectionkante, und auf
   /unternehmensberatung stossen zwei helle Flächen ohne Zäsur aneinander.

   Bewusst als margin-top am BAND und nicht als padding: padding läge innerhalb
   der Farbe und würde das Band nur höher machen, nicht die Zäsur erzeugen.

   Bewusst nur ab 761 px: unter 760 px trägt .ublock padding:56px 0 — dort ist
   die neutrale Fläche schon da, ein Trenner ergäbe die doppelte Lücke, die
   dieselbe Abnahme ausdrücklich verbietet.

   Bewusst über den Nachbarschaftskombinator und nicht pauschal: gemessen am
   12.8.2026 trifft die Regel genau drei Übergänge — zwei auf
   /unternehmensberatung, einen auf /karriere. /gesundheitsnetze,
   /interimsmanagement, die Referenzdetails und die Rechtstexte sind sauber
   und bleiben unangetastet. */
@media (min-width:761px){
  .ublock + .erstgespraech,
  .ublock + .cta,
  .ublock + .blue,
  .ublock + .navyb,
  .ublock + .frei,
  .ublock + .band{margin-top:var(--abschnittstrenner)}
}

/* ---- WEB-01 · Freiraum unter aufgeklappten Teamprofilen ----
   Die im To-do beschriebene Überlappung liess sich nicht reproduzieren: 70
   Kombinationen (10 Karten × 7 Breiten), null Kollisionen. Was nicht stimmte,
   war die geforderte Reserve — 79 px statt der verlangten 80 unter 768 px.
   :has() greift nur, wenn wirklich ein Profil offen steht; im geschlossenen
   Zustand bleibt der Rhythmus unverändert. Ohne :has()-Unterstützung bleibt es
   bei 79 px, und die waren schon kollisionsfrei. */
.team:has(details.person-karte[open]),
.team-fuehrung:has(details.person-karte[open]){margin-bottom:16px}

/* ---- Lange Komposita im Hero-Vorspann ----
   Gefunden am 12.8.2026, vorhanden seit dem Umbau: bei 320 px zwang
   «Organisationsübergreifende» (/gesundheitsnetze) beziehungsweise
   «Managementveränderungen» (/ueber-uns) die .shell auf 307 bzw. 314 px in
   einem 305 px breiten Inhaltsbereich. Sichtbar war es nicht — .hero trägt
   overflow-x:clip und schneidet den Überstand ab; abgeschnitten wurden damit
   aber die letzten Pixel des Textes.

   Dritter Fall derselben Ursache: ein Element mit min-content-Breite über der
   Spaltenbreite. h1–h4 tragen dagegen seit dem Umbau overflow-wrap:break-word,
   die Rasterkinder min-width:0 — der Vorspann hatte beides nie.

   hyphens:auto statt nur break-word: im Fliesstext ist eine korrekte Trennung
   richtig. Die Sperre gilt nur für Überschriften (T-03). */
.hero p.sub,.hero .intro{overflow-wrap:break-word;hyphens:auto}