/* =========================================================
   Kanzlei Bastian — Design System v2
   Serifen-Editorial nach dem System von twobirds.com: Ueberschriften im
   Gewicht 400 ohne Tracking, kleine Schriftgrade, Versal-Zwischenlabel,
   Foto statt Farbflaeche. Masse am gerenderten Vorbild nachgemessen.
   ========================================================= */

/* Schriften lokal statt von Google (DSGVO, LG München I, 3 O 17493/20).
 * Dateien von fonts.gstatic.com, SIL Open Font License 1.1.
 * Variable Schriften: eine Datei je Zeichensatz deckt alle Stärken ab. */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/open-sans-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: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/open-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-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: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


:root {
  /* Palette — Grundflaechen neutral wie beim Vorbild (dort #fff und #f5f5f6).
     Der warme Beige-Ton lag vorher auf allen Hintergruenden, Linien und im
     Fliesstext; er ist raus. Navy bleibt als Marke fuer Ueberschriften. */
  --bg:         #FFFFFF;       /* reinweiss */
  --bg-alt:     #F5F5F6;       /* neutrales Hellgrau */
  --bg-2:       #E3E3E3;
  --bg-deep:    #001836;
  --ink:        #001E44;       /* Navy — Ueberschriften, Marke */
  --ink-soft:   #193456;
  --ink-2:      #4A4F55;       /* Fliesstext, neutral statt warm */
  --muted:      #6E747A;       /* neutrales Grau */
  --muted-2:    #4A4F55;
  --line:       #E3E3E3;       /* neutrale Haarlinie */
  --line-strong:#001E44;
  --accent:     #001E44;
  --warm:       #9C8F77;       /* Taupe — nur noch Ziffern und Zierlinien */
  --warm-soft:  #B3A991;
  --warm-ink:   #7A6B50;
  --link-accent:#007C92;
  --hover:      #193456;

  /* Flaechenfarben. Die Toene sind aus der eigenen Palette abgeleitet
     (Taupe, Navy, Teal, Hero-Rose), nicht aus der des Vorbilds uebernommen.
     Navy bleibt auf allen Toenen bei mindestens 7,6:1.

     Wichtige Korrektur gegenueber dem vorherigen Stand: Farbflaechen sind
     beim Vorbild kein Ersatz fuer Fotos. Wo dort Bilder stehen (Trending
     topics, die Einstiegsreihe), standen hier leere Farbkacheln — und leere
     Farbe liest sich als unfertig. Flaeche traegt jetzt nur noch, was sie
     auch beim Vorbild traegt: die Beitragsboxen (zwei Toene im Wechsel) und
     die Heros der Uebersichtsseiten.

     --f-flieder ist entfallen: das war der Grundton des Fliederbandes unter
     der frueheren Schwerpunkte-Sektion, die es nicht mehr gibt. */
  --f-sand:     #EAD4AE;
  --f-salbei:   #A1D9CD;
  --f-rose:     #EFC5B3;
  --f-dunst:    #98BDE1;   /* Reserve fuer weitere Flaechen-Heros */

  /* Typografie — das Vorbild setzt Ueberschriften in Publico Roman (Serif,
     Gewicht 400) und Fliesstext in Open Sans. Publico ist lizenzpflichtig;
     Newsreader ist die naechstliegende freie Zeitungsserif. */
  --sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --display: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* ---- Schriftgrade: eine Leiter, neun Stufen ----
     Der Bestand hatte 32 verschiedene Groessenangaben, darunter Paare, die
     sich um Bruchteile unterschieden (clamp(38px,4.6vw,60px) neben
     clamp(38px,4.8vw,60px); 22/2.1/28 neben 22/2.2/28 neben 22/2.2/30 neben
     22/2.4/30) und krumme Einzelwerte wie 15.5px, 12.5px, 11px, 10px. Nichts
     davon war eine Entscheidung, alles Drift. Genau das erzeugt den Eindruck
     wechselnder Schriften.

     Die Leiter folgt den gemessenen Werten des Vorbilds: 60 / 38 / 24 / 20 /
     19 / 16 / 15 / 12. Neue Regeln nehmen eine Stufe, keine neue Zahl. */
  --fs-h1:     clamp(38px, 4.6vw, 60px);
  --fs-h2:     clamp(27px, 2.9vw, 38px);
  --fs-h3-lg:  clamp(22px, 2.2vw, 30px);   /* grosse Kartentitel, Listentitel */
  --fs-h3:     clamp(20px, 1.8vw, 24px);   /* Kartentitel, Beitragstitel */
  --fs-h4:     20px;
  --fs-lead:   clamp(17px, 1.5vw, 19px);
  /* Fliesstext von 16 auf 17px. Der Absprung vom Lead (19px) auf den Absatz
     darunter betrug drei Stufen und war als Bruch sichtbar; jetzt zwei.
     17px ist zugleich das, was sich in einer Spalte von rund 570px ueber
     mehrere Absaetze bequem liest. */
  --fs-body:   17px;
  --fs-small:  15px;
  --fs-meta:   12px;                        /* Versal-Label, gesperrt */
  --fs-brand:  clamp(26px, 2.5vw, 32px);    /* Wortmarke, kein Textgrad */

  /* Layout — nachgemessen am Vorbild: .container liegt dort bei max-width 1244px
     mit 32px Innenabstand, .component bei 60px Blockabstand. Die vorherigen
     Werte (1320px / bis 64px / bis 120px) waren durchweg groesser; dadurch
     stand jede Sektion fuer sich allein statt im Satzspiegel. */
  --maxw: 1244px;
  --gutter: clamp(20px, 3vw, 32px);
  --section-y: clamp(48px, 5.4vw, 76px);
  --header-h: 88px;              /* Vorbild: padding 34px oben/unten um die Wortmarke */

  /* Motion */
  --ease: cubic-bezier(.22,.7,.2,1);
  --ease-spring: cubic-bezier(.34,1.16,.4,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Sprungmarken (z. B. "Auf dieser Seite") landeten unter der fest stehenden
   Kopfzeile; die Ueberschrift war dann verdeckt. Abstand = Kopfzeile + Luft. */
html { scroll-padding-top: calc(var(--header-h) + 32px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-weight: 400;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { padding-left: 1.25em; }
hr { border: 0; height: 1px; background: var(--line); margin: 0; }

/* ---------- Typography ---------- */
/* Ueberschriften: Serif im Gewicht 400 und ohne negatives Tracking — beim
   Vorbild steht dort `font-family:Publico Roman,serif; font-weight:400`.
   Die fette, eng laufende Sans war der groesste optische Unterschied. */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 .4em;
  line-height: 1.1;
}
/* Groessen nachgemessen am Vorbild statt geschaetzt: dort steht h1 auf der
   Startseite bei 60px/1.0, h2 bei 35px/1.33, h3 bei 24px/32px — und zwar
   ausnahmslos in Gewicht 400 mit Tracking 0. Hier lag h1 bei bis zu 96px und
   h2 bei 56px, beides mit negativem Tracking. Genau diese Lautstaerke war der
   Unterschied: die Ruhe des Vorbilds kommt daher, dass es nicht schreit. */
h1 {
  font-size: var(--fs-h1);
  letter-spacing: 0;
  line-height: 1.06;
  font-weight: 400;
}
h2 {
  font-size: var(--fs-h2);
  letter-spacing: 0;
  line-height: 1.28;
  font-weight: 400;
}
h3 {
  font-size: var(--fs-h3);
  letter-spacing: 0;
  line-height: 1.33;
  font-weight: 400;
}
h4 {
  font-size: var(--fs-h4);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}

/* Fliesstext stand in der Markenfarbe #001E44 — einem satten Navy mit 16,5:1
   gegen Weiss. Das ist nicht zu wenig Kontrast, sondern zu viel: gesaettigtes
   Dunkelblau in dieser Staerke wirkt ueber mehrere Zeilen schwer und flimmert
   leicht. Ueberschriften vertragen das, Absaetze nicht.

   Auffaellig war zudem, dass es zwei Fliesstextfarben gab: Absaetze in
   .prose und .lead standen laengst im neutralen #4A4F55 (8,3:1, ueber der
   AAA-Schwelle von 7:1), alle uebrigen im Navy. Jetzt einheitlich neutral;
   Navy bleibt den Ueberschriften und der Wortmarke.

   Zeilenhoehe von 1,55 auf 1,65 wie in .prose. Das Mass lag bei rund 76
   Zeichen je Zeile — deutsche Komposita brauchen eher 60 bis 70. */
p {
  margin: 0 0 1em;
  max-width: 62ch;
  color: var(--ink-2);
  line-height: 1.65;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-2);
  font-weight: 400;
  letter-spacing: 0;
  max-width: 58ch;
}

/* Zwischenlabel — das eine wiederkehrende Mittel des Vorbilds: 12px Open Sans
   Semibold, Versalien, 1,5px Sperrung, direkt ueber der Serifenzeile (dort
   CAREERS / ABOUT / DEAL / NEWS). Der vorherige Strich davor stammte aus einer
   anderen Formensprache; das Vorbild setzt das Label blank. */
.eyebrow,
.divider-label {
  font-family: var(--sans);
  font-size: var(--fs-meta);
  line-height: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 600;
  display: block;
  margin-bottom: 16px;
}
.eyebrow::before,
.divider-label::before { content: none; }

/* Alle uebrigen Kleinlabels teilen dieselbe Auszeichnung. Sie liefen zuvor
   jedes fuer sich: „Auf dieser Seite" in Satzschreibung, die Rubrik der
   Workshops ebenso, die Kontaktlabels wieder anders. Drei Varianten desselben
   Gedankens lesen sich wie drei Schriften.

   Gewicht 500 statt 600 haelt sie unter dem Zwischenlabel, das einen Block
   eroeffnet; diese hier beschriften nur ein Feld. Eingabefelder sind bewusst
   ausgenommen — dort ist Satzschreibung besser lesbar. */
.practice-toc h4,
.workshop-cat,
.kontakt-label,
.hero-meta dt,
.person-creds dt,
.standort-meta dt,
.contact-block dt {
  font-family: var(--sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 1.5px;
  line-height: 16px;
  text-transform: uppercase;
}

/* Kleingedrucktes (Hinweise unter Artikeln, Fussnoten). Stand vorher
   sechzehnmal als style-Attribut im Markup. */
.note {
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.6;
}

/* legacy class — kept for compat, now neutral */
.serif { font-family: var(--display); }
/* Ueberschriften sind einfarbig. Der markierte Teil trug zwischenzeitlich das
   Taupe — auf den Farbflaechen biss sich die Gold-Blau-Kombination, und beim
   Vorbild sind Ueberschriften durchgaengig einfarbig gesetzt. Das Taupe bleibt
   als feiner Akzent (Haarlinien, Ziffern, Zwischenlabels) erhalten. */
.accent { color: inherit; font-style: normal; }
.italic { font-style: italic; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.container-narrow {
  max-width: 880px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}
section { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(44px, 4.8vw, 68px); }

.grid { display: grid; gap: clamp(24px, 3vw, 48px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ---------- Header / Nav (K&E-style hamburger) ---------- */
/* Kopfzeile liegt durchsichtig ueber dem Hero und wird erst beim Scrollen
   deckend — beim Vorbild `.component--header { background-color:transparent;
   position:fixed }` und `.component--header.scrolled { background-color:#fff }`.
   Vorher stand hier ein deckend weisser Balken von 100px, der den Hero nach
   unten geschoben hat; deshalb sass ueber jedem Motiv ein weisser Streifen. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), background .25s var(--ease);
}
.site-header.scrolled {
  background: var(--bg);
  border-bottom-color: var(--line);
}
/* Kein Body-Versatz mehr: der Hero beginnt ganz oben und bringt den Abstand
   zur Kopfzeile selbst mit (siehe .hero). */
body { padding-top: 0; }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
  background: transparent;
}
.brand {
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  display: flex; align-items: center;
  line-height: 1;
}
.brand-mark { display: none; }    /* dropped — wordmark only, like Gleiss Lutz / K&E */

/* Wortmarke links, Menuetaste rechts. Das Vorbild stellt die Taste nach
   links; hier ausdruecklich anders gewuenscht. */
.nav-inline {
  display: flex; align-items: center;
  gap: clamp(16px, 2vw, 34px);
  list-style: none; margin: 0; padding: 0;
}
.nav-inline a {
  font-family: var(--display);
  font-size: var(--fs-body);
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.nav-inline a:hover { border-bottom-color: var(--ink); }
.nav-inline a.active { color: var(--muted); }
@media (max-width: 1100px) {
  .nav-inline { display: none; }          /* darunter traegt das Overlay die Navigation */
}

/* MENU button (always visible, replaces inline nav links) */
.menu-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 0;
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.menu-btn .icon {
  position: relative;
  width: 34px; height: 18px;
  display: inline-block;
}
.menu-btn .icon::before,
.menu-btn .icon::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 2px;
  background: var(--ink);
  transition: transform .35s var(--ease), top .35s var(--ease), bottom .35s var(--ease);
}
.menu-btn .icon::before { top: 4px; }
.menu-btn .icon::after  { bottom: 4px; }
.site-header.menu-open .menu-btn .icon::before {
  top: 50%; transform: translateY(-50%) rotate(45deg);
}
.site-header.menu-open .menu-btn .icon::after  {
  bottom: 50%; transform: translateY(50%) rotate(-45deg);
}
.menu-btn .label-open { display: inline; }
.menu-btn .label-close { display: none; }
.site-header.menu-open .menu-btn .label-open  { display: none; }
.site-header.menu-open .menu-btn .label-close { display: inline; }

/* Full-screen overlay — dark navy K&E-style */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-deep);                  /* dark navy */
  color: var(--bg);
  z-index: 49;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s var(--ease);
  overflow: hidden;
}
body.menu-open .menu-overlay {
  opacity: 1;
  pointer-events: auto;
  /* Beim Oeffnen fast sofort deckend: sonst schimmert waehrend des Einblendens
     die weisse Taste der dunklen Kontaktleiste durch. Schliessen bleibt weich
     (.55s aus der Grundregel); die Menuepunkte gleiten weiter einzeln herein. */
  transition: opacity .1s ease-out;
}
/* Header inverts to dark when menu is open so the close button stays readable */
body.menu-open .site-header { background: transparent; border-bottom-color: transparent; }
body.menu-open .brand,
body.menu-open .menu-btn { color: var(--bg); }
body.menu-open .menu-btn .icon::before,
body.menu-open .menu-btn .icon::after { background: var(--bg); }

.menu-overlay .menu-content {
  height: 100vh;
  height: 100dvh;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(110px, 14vh, 160px) var(--gutter) 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;                       /* push nav to the right */
}

.menu-overlay ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: right;                           /* right-aligned items */
}
.menu-overlay li a {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  display: inline-block;
  font-size: clamp(40px, 8vh, 88px);   /* Schaubild, nicht Teil der Leiter */
  padding: clamp(6px, 0.8vh, 14px) 0;

  /* slow, deliberate fade-in (K&E style) */
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1.1s cubic-bezier(.22, .7, .2, 1),
    transform 1.1s cubic-bezier(.22, .7, .2, 1),
    color .4s var(--ease);
  will-change: opacity, transform;
}
body.menu-open .menu-overlay li a {
  opacity: 1;
  transform: translateY(0);
}
/* longer stagger — items reveal one after another, deliberate pace */
body.menu-open .menu-overlay li:nth-child(1) a { transition-delay: 0.20s; }
body.menu-open .menu-overlay li:nth-child(2) a { transition-delay: 0.30s; }
body.menu-open .menu-overlay li:nth-child(3) a { transition-delay: 0.40s; }
body.menu-open .menu-overlay li:nth-child(4) a { transition-delay: 0.50s; }
body.menu-open .menu-overlay li:nth-child(5) a { transition-delay: 0.60s; }
body.menu-open .menu-overlay li:nth-child(6) a { transition-delay: 0.70s; }
body.menu-open .menu-overlay li:nth-child(7) a { transition-delay: 0.80s; }

/* Hover: color shifts to soft white, subtle underline draws in from the right */
.menu-overlay li a {
  position: relative;
}
.menu-overlay li a::after {
  content: '';
  position: absolute;
  left: auto; right: 0; bottom: 0.05em;
  width: 0; height: 2px;
  background: var(--muted);
  transition: width .55s cubic-bezier(.22, .7, .2, 1);
}
.menu-overlay li a:hover {
  color: var(--bg);                            /* pure white on hover */
}
.menu-overlay li a:hover::after {
  width: 100%;
  left: 0; right: auto;                        /* draws left-to-right after starting from right */
}
.menu-overlay li a.active { color: var(--warm-soft); }

/* Bottom strip — right-aligned, in step with the nav above */
.menu-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 0;
  pointer-events: none;
}
.menu-bottom .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; justify-content: flex-end; align-items: center;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: var(--fs-meta);
  color: rgba(255,255,255,.5);
}
.menu-bottom .inner > * { pointer-events: auto; }
.menu-bottom a { color: rgba(255,255,255,.7); }
.menu-bottom a:hover { color: var(--bg); }
.menu-bottom .sep {
  width: 1px; height: 11px;
  background: rgba(255,255,255,.2);
  display: inline-block;
}

/* Phones: the clamp() floors above are sized for desktop and overflow a short
   viewport. With 40px type and 110px top padding, the seven items need ~648px
   on a 667px-tall phone — and .menu-overlay clips (overflow: hidden) instead of
   scrolling, so the first and last item get cut off. Lower the floors here. */
@media (max-width: 640px) {
  .menu-overlay .menu-content {
    padding-top: clamp(88px, 12vh, 120px);
    padding-bottom: 72px;                      /* room for .menu-bottom (~68px) */
  }
  .menu-overlay li a {
    font-size: clamp(28px, 5.4vh, 44px);
    padding: clamp(4px, 0.6vh, 10px) 0;
  }
}

/* Very short viewports (phone in landscape): even the reduced sizes can overflow.
   Top-align and allow scrolling — centred flex content that overflows becomes
   unreachable at the top, so flex-start is required together with the scroll. */
@media (max-height: 520px) {
  .menu-overlay .menu-content {
    justify-content: flex-start;
    overflow-y: auto;
  }
}

/* Lock body scroll when menu is open */
body.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .menu-overlay li a { transform: none; transition: color .25s var(--ease); }
}

@media (prefers-reduced-motion: reduce) {
  .menu-overlay { transition: visibility 0s linear, opacity 0.001s; }
}

.nav-toggle { display: none; }
.nav-cta { display: none; }       /* legacy class */

/* ---------- Hero ---------- */
/* Der obere Abstand traegt jetzt zusaetzlich die Hoehe der durchsichtigen
   Kopfzeile — sonst laege die Zeile auf dem Zwischenlabel. */
.hero {
  padding-block: calc(var(--header-h) + clamp(32px, 4vw, 56px)) clamp(40px, 5vw, 72px);
  position: relative;
  overflow: hidden;
}
/* Sehr weicher warmer Lichtverlauf — nimmt der leeren Fläche über der Falz
   die Härte, ohne als Farbfläche wahrgenommen zu werden. Der Schwerpunkt liegt
   bewusst unterhalb der Kopfzeile, sonst entsteht an deren Unterkante eine
   sichtbare Kante zwischen deckendem Header und Verlauf. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(72% 62% at 90% 46%, rgba(0, 30, 68, .05), transparent 70%);
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }

/* ---- Home hero — helles, offenes Landschaftsmotiv, dunkler Text darueber ---- */
.hero-home {
  background: var(--bg);
  padding-bottom: 0;
  min-height: min(88vh, 860px);
  display: flex;
  align-items: flex-start;    /* Text steht oben im Himmel — wie beim Vorbild */
}
/* Der warme Radialverlauf des Standard-Hero wuerde ueber dem Foto als
   Schleier liegen — hier uebernimmt der Aufhellungsverlauf der Bildebene. */
.hero-home::before { display: none; }

.hero-media { position: absolute; inset: 0; overflow: hidden; }
/* <picture> ist ein zusaetzlicher Kasten zwischen Huelle und Bild und muss
   die Hoehe durchreichen, sonst kann object-fit nicht greifen. */
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Das Motiv ist hoeher als der Hero, `cover` schneidet also oben und unten ab.
   Mittig zentriert faellt der warme Vordergrund weg — gerade der traegt das
   Bild. Beim jetzigen Motiv ist der Ausschnitt allerdings gleichgueltig: Sein
   Seitenverhaeltnis (1,884) liegt so nah am Hero, dass kaum etwas
   weggeschnitten wird — 20, 32 und 44 % ergaben denselben Kontrast auf die
   Nachkommastelle. Deshalb mittig, der ehrliche Vorgabewert. */
.hero-home .hero-media img { object-position: 50% 50%; }
/* Die zweite Taste stand als einzige mit Navy auf voellig durchsichtigem Grund
   und war damit der Engpass fuer die Waesche: Sie war das erste, was beim
   Abschwaechen unlesbar wurde. Mit eigener heller Fuellung haengt sie nicht
   mehr am Verlauf, und der darf deutlich zurueckgenommen werden. */
.hero-home .btn-ghost {
  background: rgba(255,255,255,.78);
  border-color: var(--ink);
  color: var(--ink);
}
.hero-home .btn-ghost:hover { background: var(--ink); color: var(--bg); }

/* Kein Auslauf nach unten mehr. Der weiche weisse Verlauf sollte die Kante zur
   naechsten Sektion abmildern, legte sich aber als Schleier ueber das untere
   Bilddrittel — auf dem dunklen Gestein las er sich wie Nebel oder ein
   Darstellungsfehler, nicht wie ein Uebergang. Eine saubere Kante ist besser:
   das Bild hoert auf, der weisse Abschnitt beginnt. */
/* Aufhellung von links — beim Vorbild steht im Hero nur die Ueberschrift, und
   die liegt im leeren Himmel. Hier stehen zusaetzlich Label, Fliesstext und
   zwei Tasten; die liefen auf das Gestein und waren dort nicht mehr lesbar.
   Der Verlauf haelt nur die linke Texthaelfte frei, die rechte Bildhaelfte
   bleibt unangetastet in voller Farbe. */
.hero-home .hero-media::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
    rgba(255,255,255,.80) 0%,
    rgba(255,255,255,.70) 30%,
    rgba(255,255,255,.52) 48%,
    rgba(255,255,255,.20) 62%,
    rgba(255,255,255,0)   76%);
}
/* Seit der Text tiefer sitzt, liegt der Fliesstext teils auf den hellen
   Graten; der Verlauf links ist deshalb wieder kraeftiger (vorher .70/.53/.25). */
.hero-home .hero-text .eyebrow { color: var(--ink); }
/* Der Verlauf ist bewusst schwaecher als frueher (.68 statt .88 am linken
   Rand), damit mehr vom Motiv durchkommt. Damit der Fliesstext trotzdem
   ueberall die 4,5:1 erreicht, laeuft er nicht mehr bis 50ch nach rechts,
   sondern bis 42ch — dort endet er noch im gedeckten Bereich statt auf dem
   Bergkamm. Nachgemessen an der schlechtesten Stelle, nicht im Mittel: das
   Mittel lag auch vorher gut, die letzten Zeilen lagen trotzdem auf dem Grat.

   Auf schmalen Fenstern steht der Text nicht neben dem Motiv, sondern darauf.
   Der schraege Verlauf laeuft dort schon bei zwei Dritteln der Breite aus und
   liesse Fliesstext und die zweite Taste auf dem Gestein stehen. Senkrecht
   deckt er die Textzone; unten bleibt das Motiv frei. */
@media (max-width: 700px) {
  .hero-home .hero-media::before {
    background: linear-gradient(to bottom,
      rgba(255,255,255,.84) 0%,
      rgba(255,255,255,.78) 52%,
      rgba(255,255,255,.56) 78%,
      rgba(255,255,255,.14) 100%);
  }
}

/* Die Zeile steht beim Vorbild bei 60px/1.0 — vorher bis 92px. Den Umbruch
   setzt das <br> im Markup; eine ch-Begrenzung wuerde zusaetzlich brechen. */
.hero-home h1 { font-size: var(--fs-h1); max-width: none; }
/* Auf dem Foto braucht der Fliesstext den vollen Navy-Kontrast. Das neutrale
   #4A4F55 aus der Fliesstextfarbe ist auf Weiss richtig, verschwindet hier
   aber auf dem Gestein: gemessen 2,0:1 an der schlechtesten Stelle, noetig
   sind 4,5:1. Navy bringt denselben Hintergrund auf ein Vielfaches, ohne dass
   der Verlauf staerker werden muss. */
.hero-home .hero-text .lead { max-width: 42ch; color: var(--ink); }
/* Oberer Abstand auf Wunsch etwas groesser (vorher 28–52px): der Text sitzt
   damit rund 50px tiefer im Himmel, statt direkt unter der Kopfzeile. */
.hero-grid {
  padding-bottom: clamp(40px, 6vw, 80px);
  padding-top: clamp(64px, 7vw, 104px);
}
@media (max-width: 900px) {
  .hero-grid { padding-bottom: 56px; padding-top: 40px; }
  .hero-home { min-height: 0; }
}
/* Der Startseiten-Hero traegt seinen Kopfzeilen-Abstand ueber .hero-grid, weil
   das Foto selbst bis unter die Kopfzeile laufen soll. */
.hero-home { padding-top: var(--header-h); }

/* ---- Einstiegskacheln — Motiv, Kategorie, Aussage (Muster: twobirds.com) ---- */
.tiles { padding-block: clamp(56px, 8vw, 104px); }
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
}
@media (max-width: 940px) { .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .tile-grid { grid-template-columns: 1fr; } }

/* Farbige Beitragsboxen — Muster: News & Deals bei twobirds.com.
   Die Farbe steht fuer das Rechtsgebiet, nicht fuer Dekoration; Aufbau
   ist dort Kategorie oben, Titel gross, Datum unten. Ein frueherer Stand
   hatte hier die Navigationspunkte stehen — das doppelte nur das Menue. */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}
@media (max-width: 940px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .news-grid { grid-template-columns: 1fr; } }

/* Die Box selbst ist beim Vorbild kompakt und dicht gefuellt: Titel 24px mit
   Zeilenhoehe 32px ueber drei Zeilen, darunter das Datum — kein Leerraum, den
   die Farbe fuellen muesste. Vorher standen hier 250px hohe Kaesten mit einer
   kurzen Zeile darin; leere Farbflaechen lesen sich als unfertig. `min-height`
   ist deshalb raus: die Boxen wachsen mit dem Titel und der Grid-Zeile. */
.news-box {
  display: flex; flex-direction: column;
  color: var(--ink);
  background: var(--f-sand);
  padding: 24px 26px 22px;
  transition: filter .25s var(--ease);
}
/* Zwei Toene im Wechsel statt fuenf nebeneinander. Beim Vorbild tragen die
   Beitragsboxen ausschliesslich Rosa und Teal, abwechselnd — das liest sich
   als System. Vier bis fuenf Toene auf sechs Boxen lesen sich als Zufall.
   Die Zuordnung uebernimmt nth-child, damit sie beim Nachtragen weiterer
   Beitraege nicht von Hand gepflegt werden muss. */
.news-box:nth-child(odd)  { background: var(--f-sand); }
.news-box:nth-child(even) { background: var(--f-salbei); }
.news-box:hover { filter: brightness(.96); }
.news-box .news-cat {
  font-family: var(--sans);
  font-size: var(--fs-meta); font-weight: 600;
  line-height: 16px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}
.news-box .news-title {
  font-size: var(--fs-h3);
  line-height: 1.33;
  letter-spacing: 0;
  font-weight: 400;
  margin: 0 0 18px;
}
.news-box .news-date {
  margin-top: auto;
  font-family: var(--sans);
  font-size: var(--fs-meta); font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- Beitraege — Muster „Latest insights" bei twobirds.com ----------
   Dort steht ein grosser Beitrag links und zwei kleinere rechts uebereinander:
   `.result-item:first-child { width:62%; margin-right:54px }`,
   `.result-item:nth-child(n+2) { width:calc(36% - 54px) }`. Bild oben, Titel
   in der Serif bei 24px/1.4, darunter eine Zeile mit Lesedauer und Datum.

   Ein gleichfoermiges 3x2-Raster gleich grosser Farbkaesten hat keine
   Hierarchie — alle sechs Beitraege wiegen gleich viel. Die Asymmetrie ist
   der Grund, warum die Sektion beim Vorbild ruhig wirkt. */
.insights-grid {
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 36fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: start;
}
@media (max-width: 900px) { .insights-grid { grid-template-columns: 1fr; gap: 40px; } }

.insight-col { display: flex; flex-direction: column; gap: clamp(28px, 3.2vw, 42px); }

.insight { display: block; color: var(--ink); }
.insight-media { overflow: hidden; margin-bottom: 15px; background: var(--bg-alt); }
.insight-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}
.insight:hover .insight-media img { transform: scale(1.04); }
/* Beim Vorbild liegen Leit- und Nebenbild bei rund 1,83:1 (Leitbild zusaetzlich
   mit `min-height:300px`). 8:5 machte das Leitbild deutlich zu hoch. */
.insight--lead .insight-media { aspect-ratio: 16 / 9; }
.insight-col .insight-media { aspect-ratio: 16 / 9; }
.insight h3 {
  font-size: var(--fs-h3);
  line-height: 1.4;
  margin: 0 0 13px;
}
.insight--lead h3 { font-size: var(--fs-h3-lg); }
/* Das Vorbild unterstreicht den Titel beim Ueberfahren der Karte. */
.insight:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

/* Meta-Zeile mit Symbolen — beim Vorbild `.icon { font-size:12px;
   font-weight:600; letter-spacing:1.5px; line-height:15px; margin-right:15px;
   text-transform:uppercase }`, das SVG davor bei 15x15 und 5px Abstand. */
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
.card-meta .meta {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sans);
  font-size: var(--fs-meta); font-weight: 600;
  letter-spacing: 1.5px; line-height: 15px;
  text-transform: uppercase;
  color: var(--ink);
}
.card-meta svg { width: 15px; height: 15px; flex: none; display: block; }

/* ---- Unterseiten-Hero als Foto mit Textkasten ----
   Beim Vorbild traegt etwa die People-Seite ein Foto, ueber dem ein
   dunkler Kasten mit Kategorie und Ueberschrift liegt. Nicht jede Seite
   hat ein Foto — Capabilities und Careers stehen dort auf reiner
   Farbflaeche; diese Mischung ist hier genauso gehalten. */
.hero--foto {
  position: relative;
  background: var(--ink);
  padding-block: 0;
  min-height: clamp(300px, 34vw, 430px);
  display: flex; align-items: center;
  overflow: hidden;
}
.hero--foto::before { display: none; }
.hero--foto .hero-media { position: absolute; inset: 0; }
.hero--foto .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero--foto > .container {
  position: relative; z-index: 1;
  max-width: none; padding-inline: 0;
  padding-block: clamp(28px, 4vw, 56px);
}
.hero-kasten {
  background: var(--ink);
  color: var(--bg);
  padding: clamp(26px, 3.2vw, 46px) clamp(26px, 3.4vw, 56px);
  padding-left: var(--gutter);
  max-width: min(720px, 64%);
}
.hero-kasten h1 {
  color: var(--bg);
  font-size: var(--fs-h1);
  margin-bottom: 0;
}
.hero-kasten .lead { color: rgba(255,255,255,.82); margin-top: 18px; max-width: 46ch; font-size: var(--fs-body); }
.hero-kasten .eyebrow { color: rgba(255,255,255,.7); margin-bottom: 18px; }
.hero-kasten .eyebrow::before { background: rgba(255,255,255,.5); }
@media (max-width: 800px) {
  .hero-kasten { max-width: 100%; }
}

/* ---- Unterseiten-Hero als Farbflaeche (Muster: twobirds.com, wo
   Capabilities/Careers/Insights je eine eigene Flaechenfarbe tragen) ---- */
.hero--flaeche { background: var(--f-sand); }
.hero--flaeche::before { display: none; }   /* Radialverlauf stoert auf der Flaeche */
.hero--sand   { background: var(--f-sand); }
/* Pflichtseiten bleiben zurueckhaltend — eine kraeftige Flaeche wirkt dort deplatziert. */
.hero--neutral{ background: var(--bg-alt); }
.hero--dunst  { background: var(--f-dunst); }
.hero--salbei { background: var(--f-salbei); }
.hero--rose   { background: var(--f-rose); }
/* Fliesstext und Zierlinie brauchen auf der Flaeche mehr Halt als auf Off-White. */
.hero--flaeche .lead { color: var(--ink-soft); }
.hero--flaeche .eyebrow { color: var(--ink-soft); }
.hero--flaeche .eyebrow::before { background: var(--ink-soft); }

.hero-text > .eyebrow:first-child { margin-bottom: 28px; }
.hero-text .actions {
  display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap;
}

/* 16ch war auf die alte Groesse (bis 96px) gerechnet. Bei 60px zwingt dasselbe
   Mass die Zeile in drei bis vier Umbrueche — auf den Flaechen-Heros stand
   „Aktuelle Rechts-/entwicklungen." dadurch dreizeilig. */
.hero h1 {
  max-width: 22ch;
}
.hero-meta {
  display: flex; flex-wrap: wrap;
  border-top: 1px solid var(--line);
  margin-top: clamp(56px, 9vw, 112px);
  padding-top: 28px;
  gap: 0;
  margin-block-end: 0;
}
.hero-meta > div {
  flex: 1 1 200px;
  padding: 4px 32px 4px 0;
  margin: 0;
}
.hero-meta dt {
  color: var(--muted);
  margin-bottom: 4px;
}
.hero-meta dd {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0;
}

/* ---------- Buttons & links ---------- */
/* Schaltflaeche — das Vorbild setzt die Haupt-Aktion als gefuellte Pille
   (.btn--rounded: Radius 20px, 10px/24px, 14px, 1,5px gesperrt, Versalien,
   deckende Flaeche, Hover invertiert). Der vorherige Rahmen ohne Fuellung war
   der Grund, warum die beiden Tasten im Hero wie unfertige Kaesten auf dem
   Gestein lagen: eine transparente Flaeche hat auf einem Foto keinen Halt. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 11px 26px;
  font-size: var(--fs-small);
  line-height: 1.15;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--ink);
  border-radius: 20px;
  color: var(--bg);
  background: var(--ink);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn::after { content: none; }              /* Pfeil traegt der Textlink, nicht die Taste */
.btn:hover { background: var(--bg); color: var(--ink); }

/* Zweitrangige Aktion — gleiche Pille, nur ungefuellt. */
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }

.btn-light { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.btn-light:hover { background: transparent; color: var(--bg); }

.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--bg); color: var(--ink); }
.btn-accent { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-accent:hover { background: var(--bg); color: var(--ink); }

/* Textlink mit Pfeil — beim Vorbild 12px, Gewicht 700, 1,8px gesperrt,
   Versalien, Pfeil rechts (MORE TRENDING TOPICS, LATEST INSIGHTS). Ohne
   Unterstrich: die Sperrung traegt die Auszeichnung. */
.link-arrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans);
  font-size: var(--fs-meta);
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 0;
  padding-bottom: 0;
  transition: color .2s var(--ease);
}
.link-arrow::after {
  content: '→';
  font-size: var(--fs-body);
  letter-spacing: 0;
  transition: transform .25s var(--ease);
}
/* Der Pfeil rueckt per transform vor (vorher zusaetzlich ueber gap) — so
   aendert sich die Breite des Links nicht und nichts rueckt nach. */
.link-arrow:hover::after { transform: translateX(7px); }

/* ---------- Practice cards ---------- */
.practices { background: var(--bg-alt); }
.practice-stack { /* container */ }
/* Vier Spalten: Ziffer, Titel, Text, Pfeil. Vorher waren es drei
   (56px / 1fr / auto) bei gleichzeitig auf 56ch begrenztem Fliesstext — der
   Text fuellte seine Spalte damit nur zur Haelfte, und der Pfeil stand rund
   600px daneben allein im Leeren. Titel und Text nebeneinander schliessen die
   Zeile und nehmen zugleich den Rhythmus der .split-Sektionen auf. */
.practice-card {
  border-top: 1px solid var(--line);
  padding: clamp(28px, 3.4vw, 44px) 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 4fr) minmax(0, 6fr) auto;
  gap: clamp(18px, 2.6vw, 48px);
  align-items: start;
  color: var(--ink);
  position: relative;
}
/* transform statt padding, damit der Text nicht neu umbricht (wie .workshop);
   der Pfeil hat seine eigene Bewegung. */
.practice-card > :not(.arrow) { transition: transform .35s var(--ease); }
.practice-card:hover > :not(.arrow) { transform: translateX(16px); }
.practice-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 1px;
  background: var(--ink);
  transition: width .55s var(--ease);
}
.practice-card:hover::before { width: 100%; }
.practice-card:last-child { border-bottom: 1px solid var(--line); }

.practice-num {
  font-family: var(--sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 1.5px;
  align-self: flex-start;
  padding-top: 8px;
  display: block;
  width: auto;
}
.practice-card h3 {
  margin: 0;
  font-size: var(--fs-h3-lg);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--ink);
}
.practice-card p {
  color: var(--ink-2);
  margin: 0;
  max-width: none;        /* die Spalte begrenzt jetzt das Mass, nicht ein ch-Wert */
  font-size: var(--fs-small);
  line-height: 1.65;
}
.practice-card .arrow {
  font-size: var(--fs-h3);
  color: var(--ink);
  align-self: center;
  transition: transform .35s var(--ease);
  font-weight: 300;
}
.practice-card:hover .arrow { transform: translateX(10px); }

@media (max-width: 800px) {
  .practice-card { grid-template-columns: 1fr; gap: 16px; }
  .practice-card .arrow { display: none; }
}

/* ---------- Editorial layout (split) ---------- */
.split {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);    /* roughly equal but right slightly wider */
  align-items: start;
}
.split > * { min-width: 0; }
.split > *:first-child { padding-right: clamp(0px, 2vw, 32px); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split > *:first-child { padding-right: 0; }
}
.split-sticky { position: sticky; top: 110px; }

/* ---------- Values cards ---------- */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 800px) { .values { grid-template-columns: 1fr; } }
.value {
  background: var(--bg-alt);
  padding: clamp(28px, 3vw, 44px);
  position: relative;
  border-top: 2px solid var(--warm);
  transition: transform .4s var(--ease), background .3s var(--ease);
}
.value:hover {
  transform: translateY(-3px);
  background: var(--bg-2);
}
.value-num {
  font-family: var(--display);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 28px;
  display: block;
}
.value h4 {
  font-family: var(--display);
  font-size: var(--fs-h3-lg);
  letter-spacing: 0;
  font-weight: 400;
  margin-bottom: 14px;
  color: var(--ink);
}
.value p {
  color: var(--ink-2);
  font-size: var(--fs-small);
  margin: 0;
  max-width: none;
  line-height: 1.55;
}

/* ---------- News filter ---------- */
.news-filter {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.news-filter button {
  font-family: inherit;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0;
  padding: 8px 16px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.news-filter button:hover { border-color: var(--ink); color: var(--ink); }
.news-filter button.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- News list ----------
   Aufbau wie die Karten des Vorbilds: kleine Versalzeile oben (dort `card h3`
   in 12px/600/1,5px), darunter der Titel in der Serif (`card h2`, 24px/1.33).

   Vorher lagen Datum, Rubrik und Titel als vier Rasterspalten nebeneinander
   (130px / 170px / 1fr / auto) ueber die volle Breite von 1180px. Dadurch
   entstanden zwei tote Zonen: eine zwischen Rubrik und Titel und eine
   zwischen Titelende und Pfeil. Auf der Karriereseite mit kurzen Titeln
   („Buerokraft (m/w/d)") fiel das am staerksten auf. */
.news-list { border-top: 1px solid var(--line); }
.news-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 18px;
  padding: 22px 64px 24px 0;
  border-bottom: 1px solid var(--line);
}
/* transform statt padding, damit Titel nicht neu umbrechen (wie .workshop). */
.news-item > :not(.news-arrow) { transition: transform .25s var(--ease); }
.news-item:hover > :not(.news-arrow) { transform: translateX(12px); }
.news-item .news-date,
.news-item .news-cat {
  font-family: var(--sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 1.5px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--muted-2);
}
.news-item .news-title {
  flex-basis: 100%;
  margin-top: 9px;
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  line-height: 1.33;
}
.news-item:hover .news-title { text-decoration: underline; text-underline-offset: 3px; }
.news-item .news-arrow {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--ink);
  font-weight: 300;
  transition: transform .3s var(--ease);
}
.news-item:hover .news-arrow { transform: translateY(-50%) translateX(8px); }

@media (max-width: 640px) {
  .news-item { padding-right: 0; padding-block: 20px; }
  .news-item .news-arrow { display: none; }
}

/* Ausserhalb der Liste behaelt .news-title die Serif ohne Listen-Massgaben. */
.news-title {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
}

/* ---------- Person card ---------- */
.person {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 800px) { .person { grid-template-columns: 1fr; } }
.person-photo {
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, #EEE9DE 0%, #DDD4C3 100%);
  position: relative;
  overflow: hidden;
}
.person-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.55), transparent 62%);
  pointer-events: none;
}
.person-photo .initials {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: clamp(80px, 10vw, 140px);   /* Schaubild, nicht Teil der Leiter */
  color: rgba(122, 107, 80, .55);
  font-weight: 500;
  letter-spacing: 0;
  z-index: 1;
}
/* Sobald ein echtes Portraet vorliegt: <img> in .person-photo legen — es
   ueberdeckt Verlauf und Initialen ohne weitere Aenderung. */
/* <picture> ist ein zusaetzlicher Kasten zwischen Rahmen und Bild. */
.person-photo picture { position: absolute; inset: 0; display: block; }
.person-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 2;
}
.person-photo .photo-label {
  position: absolute;
  bottom: 16px; left: 16px;
  font-size: var(--fs-meta);
  letter-spacing: 0.15em;
  color: var(--ink-soft);
  background: rgba(255,255,255,.7);
  padding: 4px 10px;
  z-index: 2;
}
.person-name {
  font-family: var(--display);
  font-size: var(--fs-h1);
  font-weight: 400;
  letter-spacing: 0;
  margin-bottom: 8px;
  line-height: 1;
}
.person-role {
  font-size: var(--fs-small);
  color: var(--muted);
  margin-bottom: 32px;
  font-weight: 500;
}
.person-creds {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0 32px;
  margin: 40px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.person-creds dt {
  color: var(--muted);
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-self: baseline;
}
.person-creds dd {
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0;
}
@media (max-width: 600px) {
  .person-creds { grid-template-columns: 1fr; gap: 0; }
  .person-creds dt { padding: 16px 0 4px; border-bottom: 0; }
  .person-creds dd { padding: 0 0 16px; }
}

/* ---------- Practice detail ---------- */
.practice-toc {
  position: sticky; top: 110px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  font-size: var(--fs-small);
}
.practice-toc h4 {
  color: var(--muted);
  margin-bottom: 18px;
}
.practice-toc ul { list-style: none; padding: 0; margin: 0; }
.practice-toc li { margin-bottom: 8px; }
.practice-toc a { color: var(--ink-2); }
.practice-toc a:hover, .practice-toc a.active { color: var(--ink); }

.prose {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-2);
}
.prose h2 {
  margin-top: 1.6em;
  margin-bottom: .5em;
  font-size: var(--fs-h2);
  letter-spacing: 0;
  color: var(--ink);
  font-weight: 400;
}
/* Zwischenueberschrift im Artikel. Sie lag urspruenglich einen Punkt ueber
   dem Fliesstext (17 zu 16); beim Zusammenfuehren auf die Leiter sind beide
   auf dieselbe Stufe gerutscht, sodass nur noch das Gewicht sie unterschied.
   Mit dem groesseren Fliesstext braucht sie eine eigene Stufe. */
.prose h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  letter-spacing: 0;
  line-height: 1.35;
  margin-top: 2em;
  margin-bottom: .5em;
  color: var(--ink);
}
.prose p, .prose li { color: var(--ink-2); }
/* Das Zeilenmass lag nur auf p. Listen liefen dadurch ueber die volle Spalte
   und damit deutlich breiter als die Absaetze darueber — im Wechsel von
   Absatz zu Aufzaehlung sprang die Zeilenlaenge sichtbar. */
.prose ul, .prose ol { max-width: 62ch; }
.prose ul li { margin-bottom: 6px; }
.prose hr { margin: 56px 0; }
.prose a { border-bottom: 1px solid var(--ink); }
.prose a:hover { color: var(--muted); border-color: var(--muted); }

/* ---------- Formularverweise ----------
   Muster: die Capabilities-Liste des Vorbilds. Dort ist jeder Eintrag ein
   eigener Kasten (`.btn--squared { border:1px solid; border-radius:4px;
   font-family:Publico Roman; font-size:14px; justify-content:space-between;
   padding:10px 15px }`) mit echtem Abstand zum Nachbarn, und beim Ueberfahren
   fuellt sich der Kasten.

   Vorher lag hier `gap:1px` auf einer Linienfarbe als Hintergrund — die
   Kaesten teilten sich also ihre Raender und ergaben eine Tabelle. In einem
   zweispaltigen Raster mit 16 Eintraegen las sich das wie ein Formular-
   verzeichnis im Amtsblatt, nicht wie eine Auswahl. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
  background: none;
  border: 0;
}
.form-tile {
  background: var(--bg);
  padding: 15px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  transition: background-color .25s var(--ease), color .25s var(--ease);
  color: var(--ink);
}
.form-tile:hover { background: var(--ink); color: var(--bg); }
.form-tile h4 {
  font-family: var(--display);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
  line-height: 1.3;
  color: inherit;
}
.form-tile p,
.form-tile .link-arrow { display: none; }
.form-tile::after {
  content: '→';
  font-size: var(--fs-body);
  color: inherit; font-weight: 300;
  transition: transform .2s var(--ease);
}
.form-tile:hover::after { transform: translateX(4px); }

.form-embed {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: clamp(24px, 4vw, 40px);
  margin-top: 32px;
}
.form-embed iframe {
  width: 100%;
  border: 0;
  display: block;
  min-height: 600px;
}
/* Platz freihalten, bis forms.js von der Plattform da ist: sonst ist die leere
   Box 0 px hoch, die dunkle Fusszeile blitzt direkt unter dem Titel auf und
   wird dann weggeschoben. Werte = Hoehe im Ladezustand (iframe 600 bzw. 560). */
.form-embed:empty { min-height: calc(600px + 2 * clamp(24px, 4vw, 40px) + 2px); }
.katalog-embed:empty { min-height: 560px; }

/* ---------- Native HTML contact form ---------- */
.cform {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 28px 24px;
}
.cform .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .cform { grid-template-columns: 1fr; } }

.field {
  display: flex; flex-direction: column;
  position: relative;
}
.field label {
  font-size: var(--fs-meta);
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 8px;
  letter-spacing: 0;
}
.field label .req { color: var(--ink); margin-left: 2px; }

.field input,
.field textarea,
.field select {
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 0 12px;
  border-radius: 0;
  transition: border-color .2s var(--ease);
  width: 100%;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.55; }

.field-checkbox {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: var(--fs-small); color: var(--ink-2);
  cursor: pointer;
}
.field-checkbox input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  transition: all .15s var(--ease);
  display: grid; place-items: center;
}
.field-checkbox input:checked { background: var(--ink); border-color: var(--ink); }
.field-checkbox input:checked::after {
  content: ''; width: 5px; height: 9px;
  border: solid var(--bg); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.field-checkbox a { border-bottom: 1px solid currentColor; }

.cform-status {
  font-size: var(--fs-small); padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  display: none;
}
.cform-status.is-success { display: block; border-color: #1a6e2c; color: #1a6e2c; background: #f0f7f1; }
.cform-status.is-error { display: block; border-color: #a3201d; color: #a3201d; background: #fbf1f0; }

/* ---------- Standort block on dark background ---------- */
.standort {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
@media (max-width: 800px) { .standort { grid-template-columns: 1fr; gap: 40px; } }
/* Standort metadata table — uses row wrappers so the divider line never breaks */
.standort-meta {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.18);
}
.standort-meta .row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.18);
  align-items: center;                           /* dt sits vertically centered next to multi-line dd */
}
.standort-meta dt {
  margin: 0;
  color: rgba(255,255,255,.55);
}
.standort-meta dd {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--bg);
  line-height: 1.5;
}
.standort-meta dd a:hover { color: rgba(255,255,255,.7); }

/* Light variant — used on Über uns / Kontakt where the page is light */
.standort-light .standort-meta { border-top-color: var(--line); }
.standort-light .standort-meta .row { border-bottom-color: var(--line); }
.standort-light .standort-meta dt { color: var(--muted); }
.standort-light .standort-meta dd { color: var(--ink); }
.standort-light .standort-meta dd a:hover { color: var(--muted); }

/* ---------- Contact tiles (simplified Kontakt page) ---------- */
.kontakt-primary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 800px) {
  .kontakt-primary { grid-template-columns: 1fr; }
}
.kontakt-tile {
  background: var(--bg);
  padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 12px;
  color: var(--ink);
  transition: background .25s var(--ease);
}
.kontakt-tile:hover { background: var(--bg-alt); }
.kontakt-label {
  color: var(--muted);
}
.kontakt-value {
  font-family: var(--display);
  font-size: var(--fs-h3-lg);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.15;
  color: var(--ink);
}
.kontakt-meta {
  font-size: var(--fs-meta);
  color: var(--ink-2);
  margin-top: 8px;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-block {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-bottom: 28px;
}
.contact-block dt {
  font-size: var(--fs-meta);
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 500;
}
.contact-block dd {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
}
.contact-block dd a:hover { color: var(--muted); }

/* ---------- Footer ----------
   Nachgemessen am Vorbild: `.footer { background-color:#f5f5f6 }`,
   `.component--footer { padding:75px 0 }`, `.footer__top` als Flex-Zeile mit
   Wortmarke links und der Pille „back to top" rechts (Abstand darunter 83px),
   `.footer__list-main li { font-family:Publico Roman; font-size:20px;
   letter-spacing:.5px; width:50% }` und `.footer__list-link li` in 12px Sans.

   Hier stand stattdessen ein tiefes Navy-Feld mit vier Sans-Spalten unter
   12px-Ueberschriften. Das war der letzte grosse Strukturunterschied: beim
   Vorbild endet die Seite hell und luftig, die Hauptverweise stehen in der
   Serif und tragen so viel Gewicht wie eine Ueberschrift. */
.site-footer {
  background: var(--bg-alt);
  color: var(--ink);
  padding: clamp(52px, 6vw, 75px) 0 28px;
  margin-top: 0;
}
.site-footer .container { max-width: var(--maxw); }

.footer-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: clamp(44px, 6.4vw, 83px);
}
.footer-brand {
  font-family: var(--display);
  font-size: var(--fs-brand);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  color: var(--ink);
}
/* „Nach oben" — beim Vorbild eine gefuellte Pille in der Textfarbe. */
.btn-top {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 24px;
  border: 1px solid var(--ink);
  border-radius: 20px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: var(--fs-meta); font-weight: 600;
  letter-spacing: 1.5px; line-height: 1.15;
  text-transform: uppercase;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.btn-top:hover { background: transparent; color: var(--ink); }
.btn-top .chev { display: block; width: 11px; height: 11px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(-45deg) translate(-2px, 2px); }

.footer-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
@media (max-width: 860px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr; gap: 32px; } }

.site-footer ul { list-style: none; padding: 0; margin: 0; }

/* Hauptverweise: Serif 20px, zweispaltig umbrechend. */
.footer-main { display: flex; flex-wrap: wrap; }
.footer-main li {
  font-family: var(--display);
  font-size: var(--fs-h4);
  letter-spacing: .5px;
  line-height: 1.2;
  width: 50%;
  margin-bottom: 17px;
  padding-right: 13px;
}
@media (max-width: 560px) { .footer-main li { width: 100%; } }

/* Nebenverweise und Anschrift: Sans 15px. */
.footer-links li {
  font-family: var(--sans);
  font-size: var(--fs-small);
  line-height: 1.4;
  margin-bottom: 15px;
  color: var(--ink-2);
}
.site-footer a { color: inherit; transition: opacity .25s var(--ease); }
.site-footer a:hover { opacity: .65; }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-meta); color: var(--muted);
  flex-wrap: wrap; gap: 16px;
}
.footer-bottom a { margin-left: 24px; }
.footer-bottom a:first-of-type { margin-left: 0; }

/* Newsletter-Streifen und Footer tragen jetzt denselben Grund und bilden
   einen zusammenhaengenden hellen Abschluss — die Trennlinie dazwischen
   wuerde ihn wieder zerschneiden. */
.newsletter + .site-footer { padding-top: clamp(36px, 4vw, 52px); }

/* ---------- Pagination ---------- */
.pagination {
  display: flex; gap: 4px;
  justify-content: center;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.pagination button {
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.pagination button:hover { color: var(--ink); }
.pagination button.active {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.pagination button:disabled { color: var(--muted); cursor: not-allowed; opacity: .4; }

/* ---------- Scroll progress bar (top of viewport) ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  z-index: 100;
  pointer-events: none;
}
.scroll-progress::before {
  content: '';
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  background: var(--ink);
  transition: width .1s linear;
}

/* ---------- Image / media reveal on scroll ---------- */
.media-reveal {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.media-reveal::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--bg-alt);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 1.1s cubic-bezier(.7,.0,.2,1);
  z-index: 1;
  pointer-events: none;
}
.media-reveal.in::after { transform: scaleX(0); }
.media-reveal > * { position: relative; z-index: 0; }

@media (prefers-reduced-motion: reduce) {
  .media-reveal::after { display: none; }
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger > *:nth-child(6) { transition-delay: 400ms; }

/* hero word stagger */
.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40%);
  animation: heroWord .9s var(--ease) forwards;
}
@keyframes heroWord {
  to { opacity: 1; transform: none; }
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero h1 .word { opacity: 1; transform: none; animation: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Misc ---------- */
/* .divider-label teilt sich die Auszeichnung mit .eyebrow — siehe Typografie. */

.cta-band {
  background: var(--bg-deep);
  color: var(--bg);
  padding: clamp(72px, 9vw, 140px) 0;
  margin-top: 0;                               /* preceding section already has bottom padding */
}
.cta-band h2 { color: var(--bg); max-width: 22ch; letter-spacing: 0; }
.cta-band .lead { color: rgba(255,255,255,.7); max-width: 50ch; }
/* Auf dunklem Grund dreht das Vorbild die Pille um (.btn--rounded.inverted):
   weisse Flaeche, dunkle Schrift. Ein blosser weisser Rahmen auf Navy wirkt
   wie eine nicht fertig gestaltete Taste. */
.cta-band .btn {
  background: var(--bg); color: var(--ink); border-color: var(--bg);
  margin-top: 28px;
}
.cta-band .btn:hover { background: transparent; color: var(--bg); }
.cta-band .eyebrow,
.cta-band .divider-label { color: rgba(255,255,255,.5); }
.cta-band .eyebrow::before,
.cta-band .divider-label::before { background: rgba(255,255,255,.4); }
/* CTA band split — top-aligned columns, baseline-anchored heading + body */
.cta-band .split {
  align-items: start !important;
  gap: clamp(32px, 5vw, 80px);
}
.cta-band .split > div:first-child h2 { margin: 0; }
.cta-band .split > div:nth-child(2) p { margin: 0 0 8px; }

::selection { background: var(--ink); color: var(--bg); }

/* ---------- Newsletter strip ---------- */
.newsletter {
  background: var(--bg-alt);
  padding: clamp(48px, 6vw, 80px) 0;
  border-top: 1px solid var(--line);
}
.newsletter .inner {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 800px) {
  .newsletter .inner { grid-template-columns: 1fr; gap: 24px; }
}
.newsletter h3 {
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 8px;
}
.newsletter p { color: var(--ink-2); margin: 0; max-width: 50ch; font-size: var(--fs-small); }
.newsletter form {
  display: flex; gap: 8px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}
.newsletter input[type="email"] {
  flex: 1; min-width: 0;
  font-family: inherit;
  font-size: var(--fs-body);
  border: 0; background: transparent;
  padding: 10px 0;
  color: var(--ink);
}
.newsletter input[type="email"]:focus { outline: 0; }
.newsletter button {
  font-family: inherit;
  font-size: var(--fs-small);
  letter-spacing: 0;
  font-weight: 500;
  color: var(--ink);
  padding: 10px 4px 10px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .2s var(--ease);
}
.newsletter button:hover { color: var(--muted); }
.newsletter button::after { content: '→'; transition: transform .2s var(--ease); }
.newsletter button:hover::after { transform: translateX(4px); }
.newsletter .nl-status { font-size: var(--fs-meta); margin-top: 12px; color: var(--muted); min-height: 1em; }
.newsletter .nl-status.is-success { color: #1a6e2c; }
.newsletter .nl-status.is-error { color: #a3201d; }

/* author byline */
.byline {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-meta);
  color: var(--muted);
}
.byline .author { color: var(--ink); font-weight: 500; }

/* breadcrumb */
/* Auf den Uebersichtsseiten steht die Zeile unter dem Flaechen-Hero auf
   weissem Grund — wie beim Vorbild. Sie schafft zugleich den Abstand, der
   dort fehlte: die Filterleiste klebte direkt an der Farbflaeche. */
/* Die Zeile sass in einem eigenen Streifen zwischen Hero und Inhalt. Weil der
   Streifen immer weiss war, der Hero eine Farbflaeche und der Inhalt teils
   grau, entstand darunter eine sichtbare Naht — genau das leere weisse Band.
   Beim Vorbild ist die Zeile die erste Zeile des Inhaltsbereichs und steht
   auf dessen Grund. Sie liegt jetzt im Container der folgenden Sektion. */
.crumb-bar { padding: 18px 0 0; }          /* Restklasse, falls noch irgendwo genutzt */
.container > .crumb:first-child {
  display: block;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.crumb-bar .crumb { margin-bottom: 0; display: inline-block; }
.crumb-bar .crumb span[aria-hidden] { padding: 0 6px; color: var(--line); }
/* Brotkrumenzeile — eine Auszeichnung fuer alle Seiten. Die drei
   Berufsfeld-Seiten trugen sie zuvor als handgeschriebenes style-Attribut
   (13px, .12em, Versalien), die uebrigen neun als Klasse in Satzschreibung.
   Das war der auffaelligste der Schriftbrueche. Uebernommen ist die Fassung
   aus dem style-Attribut, weil sie zur Versal-Auszeichnung der Seite passt;
   Gewicht 500 statt 600 haelt sie unter dem Zwischenlabel. */
.crumb {
  font-family: var(--sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 1.5px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--ink); }
.crumb span[aria-hidden] { padding: 0 8px; color: var(--muted); }

/* ---------- Workshop list ---------- */
.workshop {
  display: grid;
  grid-template-columns: 220px minmax(0,1fr) auto;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(28px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
  position: relative;
}
.workshop:first-of-type { border-top: 1px solid var(--line); }
/* Beim Ueberfahren ruecken Datum und Text nach rechts. Per transform statt
   padding: das verschiebt nur die Darstellung, die Spalte bleibt gleich breit
   und der Text bricht nicht neu um. Die Taste rechts bleibt stehen. */
.workshop > :not(.workshop-cta) { transition: transform .35s var(--ease); }
.workshop:hover > :not(.workshop-cta) { transform: translateX(12px); }
/* Beim Scrollen keine Hover-Bewegung (Klasse setzt main.js). */
.is-scrolling .workshop,
.is-scrolling .news-item,
.is-scrolling .practice-card,
.is-scrolling .insight,
.is-scrolling .thema { pointer-events: none; }
.workshop-date {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
  padding-right: clamp(24px, 4vw, 64px);
}
.workshop-date .day {
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 64px);   /* Schaubild, nicht Teil der Leiter */
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  color: var(--ink);
}
.workshop-date .month {
  margin-top: 6px;
  font-size: var(--fs-meta);
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.workshop-date .time {
  margin-top: 12px;
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  font-weight: 500;
}
.workshop-cat {
  color: var(--muted);
  margin-bottom: 10px;
  display: inline-block;
}
.workshop h3 {
  font-family: var(--display);
  font-size: var(--fs-h3-lg);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--ink);
}
.workshop p {
  color: var(--ink-2);
  font-size: var(--fs-small);
  margin: 0 0 14px;
  max-width: 60ch;
}
.workshop-meta {
  display: flex; flex-wrap: wrap;
  gap: 8px 24px;
  font-size: var(--fs-meta);
  color: var(--muted);
  margin-top: 14px;
}
.workshop-meta span { display: inline-flex; align-items: center; gap: 6px; }
.workshop-meta span::before {
  content: ''; width: 4px; height: 4px;
  background: var(--muted); border-radius: 50%;
  display: inline-block;
}
.workshop-cta {
  align-self: center;
  white-space: nowrap;
}
@media (max-width: 800px) {
  .workshop { grid-template-columns: 1fr; gap: 16px; }
  .workshop-date { flex-direction: row; gap: 12px; align-items: baseline; border-right: 0; padding-right: 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .workshop-date .day { font-size: 36px; }   /* Schaubild, nicht Teil der Leiter */
  .workshop-cta { align-self: flex-start; }
}

.tag {
  display: inline-block;
  font-size: var(--fs-meta);
  letter-spacing: 0.04em;
  font-weight: 500;
  padding: 4px 10px;
  background: var(--bg-alt);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.tag-full { background: #f5e9e6; color: #8b3a3a; border-color: #e6cdc6; }
.tag-open { background: #eaf0e8; color: #355c2e; border-color: #c8d6c4; }

/* Form detail pages: tighten the gap between the hero and the embedded form
   (the hero already provides breathing room via its bottom padding). */
.hero:has(+ .form-page-section) { padding-bottom: 8px !important; }
.form-page-section { padding-top: 0 !important; margin-top: -72px !important; }

/* ---------- Einstiegsreihe — Muster: die Reihe Careers / About / LegalTech /
   TwoBirds TV bei twobirds.com. Aufbau dort: Foto oben, darunter das Versal-
   Label, ein Satz in der Serif und ein langer Pfeil. Kein farbiger Kasten,
   keine Farbflaeche unter der Sektion.

   Der vorherige Stand hatte hier drei leere Farbkacheln im Format 380x470 auf
   einer Fliederflaeche. Zwei Dinge waren daran falsch: beim Vorbild sind diese
   Kacheln Fotos (die Farbe kommt aus dem Motiv, nicht aus CSS), und die drei
   Ziele waren dieselben drei Berufsfelder, die zwei Sektionen darueber schon
   verlinkt sind. Die Reihe zeigt jetzt — wie beim Vorbild — die uebrigen
   Bereiche der Seite statt der Berufsfelder ein zweites Mal. */
.themen { padding-block: var(--section-y); }
.themen-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: clamp(24px, 2.8vw, 38px);
}
.themen-kopf h2 { margin: 0; }
.themen-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px);
}
@media (max-width: 980px) { .themen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .themen-grid { grid-template-columns: 1fr; } }

.thema {
  display: flex; flex-direction: column;
  color: var(--ink);
}
.thema-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--bg-alt);
}
.thema-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.thema:hover .thema-media img { transform: scale(1.03); }
.thema .thema-cat {
  font-family: var(--sans);
  font-size: var(--fs-meta); font-weight: 600;
  line-height: 16px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.thema h3 {
  margin: 0 0 18px;
  font-size: var(--fs-h4);
  line-height: 1.4;
}
.thema::after {
  content: '\2192';
  margin-top: auto;
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--ink);
  transition: transform .3s var(--ease);
}
.thema:hover::after { transform: translateX(8px); }