/* Valuesque, Konzept B, Runde 2 (Pauls Reaktion 22.09.2026):
   eine Schrift, vier Größen, kräftige Gewichte, keine Kursive, ruhiger Einstieg.
   Tokens zuerst, keine losen Hex-Werte in Komponenten. Nur Lichtmodus, bewusst. */

:root {
  --paper: #F9F8F5;
  --ink: #141618;
  --ink-2: #363C40;
  --ink-3: #5F686C;
  --nav: #6B7074;          /* Grau der Wortmarke, so hell wie die Lesbarkeit (4,5 zu 1) erlaubt */
  --slate: #455A64;
  --slate-3: #78909C;
  --mist: #ECEFF1;
  --rule: #D5DCE0;
  --rule-strong: #B0BEC5;
  --deep: #455A64;
  --deep-2: #384A53;
  --on-deep: #F9F8F5;
  --on-deep-2: #C9D3D8;
  --on-deep-rule: rgba(249, 248, 245, 0.22);
  --g1: 69, 90, 100;
  --g2: 120, 144, 156;
  --g3: 176, 190, 197;

  --font-sans: 'Schibsted Grotesk', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-brand: 'Montserrat', 'Schibsted Grotesk', 'Segoe UI', sans-serif;   /* nur für den Claim, im Stil der Wortmarke */

  /* Vier Größen, sonst keine. Einzige Ausnahme: der Claim im Einstieg, ein Element */
  --fs-claim: clamp(1.85rem, 4.4vw, 4.1rem);
  --fs-display: clamp(2.5rem, 5.5vw, 4.75rem);
  --fs-heading: clamp(1.625rem, 2.6vw, 2.5rem);
  --fs-body: 1.125rem;
  --fs-small: 0.8125rem;

  /* Drei Gewichte */
  --w-regular: 400;
  --w-medium: 500;
  --w-bold: 650;

  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4.5rem;
  --s-7: 6rem;
  --s-8: 9rem;

  --measure: 64ch;
  --gutter: clamp(1rem, 4vw, 4rem);
  --max: 88rem;
  --head-h: 6.25rem;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 0.7s;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--w-regular);
  line-height: 1.55;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* kein overflow-x auf body: zusammen mit overflow-x clip auf html würde body zum Scrollcontainer
     und die klebende Leiste sowie die klebenden Spalten verlören ihren Bezug zum Viewport */
}

/* Kurze Seiten füllen das Fenster; der Fuß schließt am unteren Rand ab. */
body > main { flex: 1 0 auto; min-width: 0; }
body > .site-head, body > .footer { flex-shrink: 0; }

img { max-width: 100%; height: auto; display: block; }

/* Lange deutsche Wörter in Rasterspalten: Kinder dürfen schrumpfen, Titel dürfen umbrechen */
.split > *, .blocks > *, .subblocks > *, .partners > *, .posts li > *,
.bio > *, .memberships > *, .service-grid > *, .footer-grid > * { min-width: 0; }
h1, h2, h3 { overflow-wrap: break-word; hyphens: manual; }
.caselist li, .activities li, .archive li { overflow-wrap: anywhere; }

a {
  color: inherit;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--slate-3);
}
a:hover { text-decoration-color: var(--slate); }

:focus-visible { outline: 3px solid var(--slate); outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus {
  left: var(--s-2);
  top: var(--s-2);
  z-index: 100;
  background: var(--paper);
  padding: var(--s-1) var(--s-2);
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

/* Typografie: Display, Heading, Body, Small */

.display, .h1 {
  font-size: var(--fs-display);
  font-weight: var(--w-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}

.h2 {
  font-size: var(--fs-heading);
  font-weight: var(--w-bold);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-4);
}

h3, .h3 {
  font-size: var(--fs-body);
  font-weight: var(--w-bold);
  line-height: 1.3;
  margin: 0 0 var(--s-2);
}

.lead {
  font-size: var(--fs-body);
  font-weight: var(--w-medium);
  line-height: 1.5;
  color: var(--ink);
  max-width: 38em;
  margin: 0;
}

p { margin: 0 0 var(--s-3); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
.muted { color: var(--ink-3); }

.label {
  font-size: var(--fs-small);
  font-weight: var(--w-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 var(--s-3);
}


/* Kopf */

/* Kopf: am Seitenanfang eine hohe, durchsichtige Zeile mit großem Logo. Beim Scrollen zieht sie
   sich zu einer flacheren weißen Leiste über die volle Breite zusammen (Höhe, Logo, Grund animiert). */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.45s, border-color 0.45s;
}
.site-head.scrolled {
  background-color: var(--paper);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--rule);
}
.head-grid {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--head-h);
  transition: min-height 0.45s var(--ease);
}
.site-head.scrolled .head-grid { min-height: 4.25rem; }

.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 0.5rem 0;
}
.wordmark img { height: 2.75rem; width: auto; display: block; transition: height 0.45s var(--ease); }
.site-head.scrolled .wordmark img { height: 2rem; }
.footer .wordmark img { height: 1.6rem; }

.nav-lists {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-3);
}
.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0 var(--s-2);
}
.nav-main { justify-self: center; }
.nav-side { justify-self: end; }
.nav a {
  display: inline-flex;
  align-items: center;
  font-size: 0.9375rem;
  font-weight: var(--w-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nav);
  padding: 0.85rem 0.6rem;
  min-height: 44px;
  line-height: 1;
  transition: color 0.2s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.45em; text-decoration-color: var(--slate); }
.nav .lang { color: var(--nav); }
.nav-btn {
  display: none;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: var(--w-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: none;
  border: 0;
  color: var(--nav);
  padding: 0.7rem 0;
  min-height: 44px;
  cursor: pointer;
  justify-self: end;
}
/* Handymenü bis 999 px (23.09.: mit dem Reiter Mitgliedschaften passt die volle Leiste erst ab 1000 px) */
@media (max-width: 999px) {
  .head-grid { gap: var(--s-3); }
  .nav { display: grid; justify-items: end; }
  .nav-btn { display: inline-flex; align-items: center; }
  .js .nav-lists { display: none; }
  .js .nav.open .nav-lists {
    display: grid;
    grid-template-columns: 1fr;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: var(--s-2) var(--gutter) var(--s-3);
  }
  .js .nav.open ul { flex-direction: column; align-items: stretch; justify-self: stretch; width: 100%; }
  .js .nav.open li { width: 100%; }
  .js .nav.open a { display: flex; padding: 0.85rem 0; }
  .wordmark img { height: 2.25rem; }
  .site-head.scrolled .wordmark img { height: 1.75rem; }
}

/* Abschnitte und Farbzonen */

.section { padding: var(--s-7) 0; }
.zone-mist { background: var(--mist); }
.zone-deep { background: var(--deep); color: var(--on-deep); }
.zone-deep .label { color: var(--on-deep-2); }
.zone-deep .muted { color: var(--on-deep-2); }
.zone-deep a { text-decoration-color: var(--on-deep-2); }

/* Einstieg: Logo oben, ein Satz, sonst nichts. Der bewegte Grund liegt hinter Einstieg UND Einleitung
   und läuft unten weich aus, die Leiste oben ist am Seitenanfang durchsichtig. */

.top {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(-1 * var(--head-h));
  padding-top: var(--head-h);
}
.hero {
  min-height: calc(100vh - var(--head-h));
  min-height: calc(100svh - var(--head-h));
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: var(--s-6) 0;
}
.claim {
  font-family: var(--font-brand);
  font-size: var(--fs-claim);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  max-width: 20ch;
  margin: 0 auto;
  text-wrap: balance;
}
.claim .w { display: inline-block; }
.js .claim .w {
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.js .claim.in .w { opacity: 1; transform: none; }

/* Bewegter Grund: drei weiche Farbflächen in der Markenfarbe, die langsam wandern */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}
/* Feines Korn über dem Grund: bricht die 8-Bit-Stufen der weichen Verläufe, sonst zeichnen sich Ringe ab */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  will-change: transform;
}
.blob-1 {
  width: 64vmax; height: 64vmax; right: -22vmax; top: -28vmax;
  background: radial-gradient(closest-side, rgba(var(--g1), 0.42) 0%, rgba(var(--g1), 0.28) 30%, rgba(var(--g1), 0.1) 62%, rgba(var(--g1), 0) 100%);
  animation: drift-1 28s ease-in-out infinite alternate;
}
.blob-2 {
  width: 48vmax; height: 48vmax; left: -18vmax; bottom: -22vmax;
  background: radial-gradient(closest-side, rgba(var(--g2), 0.38) 0%, rgba(var(--g2), 0.25) 30%, rgba(var(--g2), 0.09) 62%, rgba(var(--g2), 0) 100%);
  animation: drift-2 34s ease-in-out infinite alternate;
}
.blob-3 {
  width: 34vmax; height: 34vmax; left: 38%; top: 52%;
  background: radial-gradient(closest-side, rgba(var(--g3), 0.55) 0%, rgba(var(--g3), 0.36) 30%, rgba(var(--g3), 0.13) 62%, rgba(var(--g3), 0) 100%);
  animation: drift-3 23s ease-in-out infinite alternate;
}
@keyframes drift-1 {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-20vw, 16vh) scale(1.18); }
}
@keyframes drift-2 {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(18vw, -14vh) scale(1.12); }
}
@keyframes drift-3 {
  from { transform: translate(0, 0) scale(0.9); }
  to { transform: translate(-14vw, -22vh) scale(1.25); }
}
@media (prefers-reduced-motion: reduce) { .blob { animation: none; } }

.intro { padding: var(--s-4) 0 var(--s-8); }
.intro-center { text-align: center; }
.intro-fields {
  font-family: var(--font-brand);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
  max-width: none;
  margin: 0 auto var(--s-4);
  text-wrap: balance;
}
.intro-fields span { color: var(--rule-strong); }
.intro-statement {
  font-size: var(--fs-heading);
  font-weight: var(--w-medium);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--slate);
  max-width: 30ch;
  margin: 0 auto;
  text-wrap: balance;
}
@media (max-width: 899px) {
  .intro-fields { font-size: 0.875rem; letter-spacing: 0.16em; }
}

/* Buttons und Textlinks */

.btn {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-small);
  font-weight: var(--w-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.95rem 1.5rem;
  min-height: 44px;
  border: 1px solid var(--slate);
  color: var(--slate);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.btn:hover { background: var(--slate); color: var(--on-deep); }
.btn-solid { background: var(--slate); color: var(--on-deep); }
.btn-solid:hover { background: var(--deep-2); }
.zone-deep .btn { border-color: var(--on-deep); color: var(--on-deep); }
.zone-deep .btn:hover { background: var(--on-deep); color: var(--deep); }
.textlink {
  font-size: var(--fs-small);
  font-weight: var(--w-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--slate);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.textlink::after { content: "\2192"; margin-left: 0.6em; transition: transform 0.2s; }
.textlink:hover::after { transform: translateX(4px); }
.zone-deep .textlink { color: var(--on-deep); }

/* Leistungen als aufklappbare Zeilen (Makery-Muster): Titel links, Zeichen rechts, eine offen */

.acc { margin-top: var(--s-5); border-top: 1px solid var(--rule-strong); }
.acc-item { border-bottom: 1px solid var(--rule); }
.acc-head { margin: 0; font-size: inherit; line-height: inherit; }
.acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  min-height: 44px;
  background: none;
  border: 0;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-heading);
  font-weight: var(--w-bold);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s;
}
.acc-btn:hover, .acc-item.is-open .acc-btn { color: var(--ink); }
.acc-icon {
  flex: 0 0 auto;
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
}
.acc-icon::before, .acc-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.1rem;
  height: 2px;
  background: var(--slate);
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease), opacity 0.35s;
}
.acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc-item.is-open .acc-icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.acc-panel[hidden] { display: none; }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-inner { overflow: hidden; }
.acc-item.is-open .acc-inner { padding-bottom: var(--s-4); }
.acc-panel .acc-text { max-width: 44em; margin: 0 0 var(--s-3); color: var(--ink-2); }
.acc-points { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: 0.5rem var(--s-5); }
@media (min-width: 900px) { .acc-points { grid-template-columns: 1fr 1fr; } }
.acc-points li { position: relative; padding-left: 1.2rem; color: var(--ink-2); }
.acc-points li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.5rem; height: 2px; background: var(--slate); }
.acc-more { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .acc-panel { transition: none; }
  .acc-icon::before, .acc-icon::after { transition: none; }
}

/* Das Bewertungswerk: Uhrwerk aus sechs Rädern, sieben Stellschrauben, eine Anzeige */

.werk { margin: var(--s-5) 0 0; }
.werk-svg { width: 100%; height: auto; display: block; overflow: visible; }
.werk-svg text { font-family: var(--font-sans); }
.knob-rail { stroke: var(--rule-strong); stroke-width: 1; }
.gear-body { fill: var(--paper); stroke: var(--slate-3); stroke-width: 1.5; stroke-linejoin: round; }
.gear-big .gear-body { fill: var(--paper); }
.gear-rim { fill: none; stroke: var(--rule-strong); stroke-width: 0.9; }
.gear-hub { fill: var(--mist); stroke: var(--slate); stroke-width: 1.5; }
.gear-pin { fill: var(--slate); }
.gear-label { font-size: 15px; font-weight: var(--w-medium); fill: var(--ink-2); letter-spacing: 0.02em; }
.knob-lead { stroke: var(--slate-3); stroke-width: 1; stroke-dasharray: 2 4; }
.knob-body { fill: var(--paper); stroke: var(--slate); stroke-width: 1.4; }
.knob-notch { stroke: var(--slate); stroke-width: 1.2; stroke-linecap: round; }
.knob-slot { stroke: var(--slate); stroke-width: 2; stroke-linecap: round; }
.knob-label { font-size: 12.5px; font-weight: var(--w-medium); fill: var(--slate); letter-spacing: 0.04em; }
.werk-shaft { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 2 6; }
.gauge-arc { fill: none; stroke: var(--slate-3); stroke-width: 1.5; }
.gauge-corridor { fill: var(--slate); opacity: 0.3; stroke: none; }
.gauge-tick { stroke: var(--slate-3); stroke-width: 1.2; }
.gauge-needle { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.gauge-hub { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.gauge-min { font-size: 12px; fill: var(--ink-3); letter-spacing: 0.04em; }
.gauge-label { font-size: 16px; font-weight: var(--w-bold); fill: var(--ink); }
.gauge-sub { font-size: 13px; fill: var(--ink-3); }

/* Muster 2: Split mit klebender linker Spalte (Haltung) */

.split { display: grid; gap: var(--s-5); }
@media (min-width: 900px) {
  .split { grid-template-columns: 2fr 3fr; gap: var(--s-7); }
  .split .sticky { position: sticky; top: 6rem; align-self: start; }
}
.blocks { display: grid; gap: var(--s-5); }
@media (min-width: 640px) {
  .blocks { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); }
}
.blocks p { margin: 0; color: var(--ink-2); }

/* Muster 3: Überschrift mit zweispaltiger Liste (Fälle) */

.cases-head { max-width: 30ch; margin-bottom: var(--s-6); }
.caselist {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 1;
  column-gap: var(--s-6);
}
@media (min-width: 760px) { .caselist { columns: 2; } }
.caselist li {
  break-inside: avoid;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--on-deep-rule);
}
.caselist h3 { margin: 0 0 0.4rem; color: var(--on-deep); }
.caselist p { margin: 0; color: var(--on-deep-2); }

/* Muster 4: zwei Porträts nebeneinander */

.partners { display: grid; gap: var(--s-6); }
@media (min-width: 760px) { .partners { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }
.partner img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 18%;
  background: var(--mist);   /* Fotos in Farbe (Paul, 23.09.), vorher Graustufen als Bildsystem */
}
.partner .name { margin: var(--s-3) 0 0; }
.partner .role {
  font-size: var(--fs-small);
  font-weight: var(--w-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0.35rem 0 var(--s-2);
}
.partner p { color: var(--ink-2); }

/* Muster 5: Beitragsliste */

.posts {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
}
.posts li {
  display: grid;
  gap: 0.4rem var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .posts li { grid-template-columns: 9rem 1fr auto; align-items: baseline; }
}
.posts time, .posts .cat {
  font-size: var(--fs-small);
  font-weight: var(--w-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.posts time { color: var(--slate); }
.posts .cat { color: var(--ink-3); }
.posts a { font-weight: var(--w-medium); line-height: 1.35; text-decoration: none; }
.posts a:hover { color: var(--slate); text-decoration: underline; }

/* Kontakt und Fuß */

.cta { text-align: center; padding: var(--s-8) 0; }
.cta > .wrap > p { margin-inline: auto; }
.cta .h2 { max-width: 20ch; margin: 0 auto var(--s-4); }
.cta .lead { margin: 0 auto var(--s-5); }
.contact-lines {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-5);
  color: var(--ink-2);
}

.footer {
  border-top: 1px solid var(--rule-strong);
  padding: var(--s-5) 0;
  color: var(--ink-2);
}
.footer-grid { display: grid; gap: var(--s-3); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.footer .wordmark { display: inline-block; padding: 0 0 var(--s-1); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { padding: 0.15rem 0; }
.footer .fine {
  margin-top: var(--s-4);
  padding-top: var(--s-2);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--ink-3);
}

/* Unterseiten */

.page-head { padding: var(--s-7) 0 var(--s-5); border-bottom: 1px solid var(--rule); }
.page-head .h1 { max-width: 18ch; margin-bottom: var(--s-4); }

.service { padding: var(--s-7) 0; border-bottom: 1px solid var(--rule); }
.service:last-of-type { border-bottom: 0; }
.service-grid { display: grid; gap: var(--s-4); }
@media (min-width: 900px) {
  .service-grid { grid-template-columns: 1fr; }
}
.service .h2 { max-width: 28ch; }
.service .lead { margin-bottom: var(--s-5); }
.subblocks { display: grid; gap: var(--s-5) var(--s-5); }
@media (min-width: 760px) { .subblocks { grid-template-columns: 1fr 1fr; } }
.subblocks p { margin: 0; color: var(--ink-2); }

.bio { display: grid; gap: var(--s-4); }
@media (min-width: 900px) {
  .bio { grid-template-columns: 2fr 3fr; gap: var(--s-7); align-items: start; }
  .bio .bio-media { position: sticky; top: 6rem; }
}
.bio img {
  width: 100%;
  max-width: 28rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 18%;
  background: var(--mist);   /* Fotos in Farbe (Paul, 23.09.), vorher Graustufen als Bildsystem */
}
.bio .name {
  font-size: var(--fs-heading);
  font-weight: var(--w-bold);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: var(--s-3) 0 0;
}
.bio .role {
  font-size: var(--fs-small);
  font-weight: var(--w-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0.4rem 0 var(--s-3);
}
.bio-flip { direction: rtl; }
.bio-flip > * { direction: ltr; }
.activities {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
}
.activities li { padding: 0.7rem 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }

.memberships { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .memberships { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }
.memberships h3 { margin: 0 0 var(--s-1); }
.memberships p { margin: 0; color: var(--ink-2); }

.archive details { border-top: 1px solid var(--rule-strong); }
.archive details:last-child { border-bottom: 1px solid var(--rule-strong); }
.archive summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  font-weight: var(--w-bold);
  min-height: 44px;
}
.archive summary::-webkit-details-marker { display: none; }
.archive summary .count {
  text-align: center;
  white-space: nowrap;
  font-size: var(--fs-small);
  font-weight: var(--w-medium);
  letter-spacing: 0.08em;
  color: var(--slate);
}
.archive summary::after { content: "+"; color: var(--slate); justify-self: end; font-weight: var(--w-medium); }
.archive details[open] summary::after { content: "\2212"; }
@media (max-width: 599px) {
  .archive summary { grid-template-columns: minmax(0, 1fr) 6rem 1rem; gap: var(--s-1); }
}
.archive ol, .archive ul { margin: 0 0 var(--s-4); padding: 0 0 0 1.4rem; color: var(--ink-2); }
.archive li { padding: 0.25rem 0; max-width: var(--measure); }
.archive h4 {
  font-size: var(--fs-small);
  font-weight: var(--w-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin: var(--s-3) 0 var(--s-2);
}

/* Bewegung: ein Auftritt für alles, weich und gleich, im Hero als Ladechoreografie */

.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal-ready [data-reveal].in { opacity: 1; transform: none; }

.reveal-ready [data-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal-ready [data-stagger].in > * { opacity: 1; transform: none; }
.reveal-ready [data-stagger] > *:nth-child(2) { transition-delay: 80ms; }
.reveal-ready [data-stagger] > *:nth-child(3) { transition-delay: 160ms; }
.reveal-ready [data-stagger] > *:nth-child(4) { transition-delay: 240ms; }
.reveal-ready [data-stagger] > *:nth-child(5) { transition-delay: 320ms; }
.reveal-ready [data-stagger] > *:nth-child(6) { transition-delay: 400ms; }
.reveal-ready [data-stagger] > *:nth-child(7) { transition-delay: 480ms; }
.reveal-ready [data-stagger] > *:nth-child(8) { transition-delay: 560ms; }
.reveal-ready [data-stagger] > *:nth-child(9) { transition-delay: 640ms; }
.reveal-ready [data-stagger] > *:nth-child(10) { transition-delay: 720ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-ready [data-reveal], .reveal-ready [data-stagger] > *, .js .claim .w { opacity: 1; transform: none; transition: none; }
  .textlink::after { transition: none; }
}

@media print {
  .site-head, .nav, .btn { display: none; }
  body { background: #fff; color: #000; }
}


/* Accepted Edel design */
/* Valuesque, Konzept B, Stufe Edel (Vorschlag 22.09.2026).
   Lädt nach styles.css und überschreibt nur, was die Stufe ausmacht:
   Serif als Stimme (Claim, Aussagesatz, Überschriften), Sans als Information,
   mehr Raum, Rothschild-Trennzeichen, Nacht als Schluss, langsamere Bewegung.
   Messbasis: 19 Premium-Referenzen vom 22.09.2026 (Rothschild, Lazard, Egon Zehnder, Harvey ...). */

:root {
  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;

  /* Nacht: die Markenfarbe 455A64 im selben Farbton, auf 15 Prozent Helligkeit */
  --night: #1E2A30;
  --night-2: #162025;
  --on-night: #F4F3EF;
  --on-night-2: #B9C4CA;
  --on-night-rule: rgba(244, 243, 239, 0.16);

  --rule: #E1E6E9;
  --rule-strong: #C3CDD3;

  --fs-claim: clamp(1.5rem, 6vw, 4.625rem);   /* einzeiliger Zusatz in Breite des Schriftzugs */
  --fs-heading: clamp(1.9rem, 3.1vw, 2.9rem);

  --s-7: 6rem;
  --s-8: 8rem;
  --head-h: 6.5rem;

  --dur: 1.1s;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Seite: ein ruhiger Einstieg, alles kommt aus dem Papier */

@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

/* Kopf: Menü in Gemischtschreibung, größer und ruhiger (Kanon der Spitzengruppe: 14 bis 20 px, 400 bis 600) */
.nav a, .nav-btn {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.0625rem;
  font-weight: var(--w-medium);
}
.nav a[aria-current="page"] { text-underline-offset: 0.35em; }

/* Stimme: Serif für Claim, Aussagesatz und Überschriften */
.claim {
  font-family: var(--font-serif);
  font-size: var(--fs-claim);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--slate);
  max-width: none;
  white-space: nowrap;
}
.js .claim .w {
  transform: translateY(0.25em);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 170ms + 250ms);
}

.intro { padding: var(--s-5) 0 var(--s-8); }

.intro-fields {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--w-medium);
  letter-spacing: 0.2em;
  color: var(--ink-3);
  margin-bottom: var(--s-4);
}
.intro-fields span { color: var(--rule-strong); }
.intro-statement {
  font-family: var(--font-serif);
  font-size: var(--fs-heading);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.005em;
  max-width: 26ch;
}

.h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-heading);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-4);
}
.label { letter-spacing: 0.16em; font-size: 0.75rem; margin-bottom: var(--s-3); }
.lead { max-width: 40em; }

/* Grund des Einstiegs: drei wandernde Farbflächen in den Tönen der Marke (Runde 2b, von Paul gesetzt),
   hier mit mehr Weg und kürzeren Zyklen, damit die Bewegung sichtbar bleibt. Dazu Parallaxe beim Scrollen. */
.hero-bg {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}
.hero-bg::after { opacity: 0.08; }
/* Die Parallaxe bewegt nur diese innere Ebene, die Maske auf .hero-bg bleibt stehen (sonst harte Kante am Ende des Einstiegs) */
.hero-glows { position: absolute; inset: 0; will-change: transform; }
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  will-change: transform;
}
/* Kräftiger und lebendiger (Paul, 23.09.): mehr Deckung, eine vierte Fläche im dunklen Ton, kürzere Zyklen und
   geschwungene Wege über vier Stützpunkte statt hin und her auf einer Linie. Die dunklen Flächen bleiben
   verhaltener als die hellen, damit Logo und Claim in der Mitte lesbar bleiben. */
.glow-1 {
  width: 72vmax; height: 72vmax; right: -24vmax; top: -30vmax;
  background: radial-gradient(closest-side, rgba(var(--g1), 0.50) 0%, rgba(var(--g1), 0.34) 32%, rgba(var(--g1), 0.12) 64%, rgba(var(--g1), 0) 100%);
  animation: drift-a 15s ease-in-out infinite alternate;
}
.glow-2 {
  width: 54vmax; height: 54vmax; left: -20vmax; bottom: -22vmax;
  background: radial-gradient(closest-side, rgba(var(--g2), 0.50) 0%, rgba(var(--g2), 0.34) 32%, rgba(var(--g2), 0.12) 64%, rgba(var(--g2), 0) 100%);
  animation: drift-b 19s ease-in-out infinite alternate;
}
.glow-3 {
  width: 38vmax; height: 38vmax; left: 40%; top: 48%;
  background: radial-gradient(closest-side, rgba(var(--g3), 0.70) 0%, rgba(var(--g3), 0.46) 32%, rgba(var(--g3), 0.16) 64%, rgba(var(--g3), 0) 100%);
  animation: drift-c 12s ease-in-out infinite alternate;
}
.glow-4 {
  width: 46vmax; height: 46vmax; left: 6%; top: -10vmax;
  background: radial-gradient(closest-side, rgba(var(--g1), 0.38) 0%, rgba(var(--g1), 0.25) 32%, rgba(var(--g1), 0.09) 64%, rgba(var(--g1), 0) 100%);
  animation: drift-d 17s ease-in-out infinite alternate;
}
@keyframes drift-a {
  0% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(-12vw, 26vh) scale(1.12); }
  70% { transform: translate(-24vw, 10vh) scale(1.26); }
  100% { transform: translate(-16vw, 32vh) scale(1.18); }
}
@keyframes drift-b {
  0% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(20vw, -6vh) scale(1.1); }
  70% { transform: translate(30vw, -26vh) scale(1.2); }
  100% { transform: translate(12vw, -32vh) scale(1.08); }
}
@keyframes drift-c {
  0% { transform: translate(0, 0) scale(0.9); }
  35% { transform: translate(-24vw, -10vh) scale(1.15); }
  70% { transform: translate(-8vw, -32vh) scale(1.35); }
  100% { transform: translate(-28vw, -22vh) scale(1.2); }
}
@keyframes drift-d {
  0% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(-6vw, 22vh) scale(1.14); }
  70% { transform: translate(10vw, 40vh) scale(0.96); }
  100% { transform: translate(-4vw, 30vh) scale(1.22); }
}
@media (prefers-reduced-motion: reduce) {
  .glow { animation: none; }
  .js body { animation: none; }
}

/* Abschnitte: mehr Luft, feinere Linien */
.section { padding: var(--s-7) 0; }

/* Bereiche trennen nach dem Rothschild-Muster (Paul, 22.09.): eine Haarlinie mit der Marke in der Mitte
   als Trennzeichen, darunter der zentrierte Abschnittskopf aus kurzem Strich, Zeile und Serif-Überschrift.
   Der Körper der Seite bleibt Papier, die Trennung übernimmt das Zeichen, nicht die Farbe. */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  width: min(100%, 44rem);
  margin: 0 auto var(--s-5);
}
.divider-line { flex: 1 1 auto; }
.divider-mark { flex: 0 0 auto; width: auto; height: 1.5rem; }

.sec-head {
  text-align: center;
  margin: 0 0 var(--s-6);
}
.sec-rule {
  display: block;
  width: 3rem;
  margin: 0 auto var(--s-3);
}
.sec-head .label {
  font-size: 1rem;
  font-weight: var(--w-regular);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  max-width: none;
  margin: 0 0 var(--s-3);
}
.sec-head .h2 { max-width: none; margin: 0 auto var(--s-4); }
.sec-head .lead { margin: 0; max-width: 40em; text-align: left; }
#partner .sec-head .lead,
#haltung .sec-head .lead { margin-inline: auto; text-align: center; }
body:has(#gutachten) :is(.page-head, .sec-head) .lead { margin-inline: auto; text-align: center; }
.sec-more { text-align: center; max-width: none; margin-top: var(--s-5); }
.sec-more .btn { justify-content: center; }

.blocks-4 { margin-top: var(--s-3); }
/* Fünf Blöcke wie bei „Wie wir arbeiten", drei je Zeile, die letzte Zeile mittig */
.blocks-flex { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-6) var(--s-5); margin-top: var(--s-3); }
.blocks-flex > * { flex: 0 1 calc((100% - 2 * var(--s-5)) / 3); min-width: 0; }
.blocks-flex p { margin: 0; color: var(--ink-2); }
@media (max-width: 899px) { .blocks-flex > * { flex-basis: calc((100% - var(--s-5)) / 2); } }
@media (max-width: 639px) { .blocks-flex > * { flex-basis: 100%; } }

@media (min-width: 1100px) { .blocks-4 { grid-template-columns: repeat(4, 1fr); gap: var(--s-6) var(--s-5); } }

/* Striche zoomfest. Bei Browser-Zoom ist 1 CSS-Pixel kein ganzer Gerätepixel mehr (90 Prozent = 0,9), Flächen
   und Rahmen von 1 bis 2 px werden dann weichgezeichnet oder fallen ganz weg. Das Skript in edel.html schreibt
   das Gerätepixelverhältnis als --px, jede Linie wird auf ganze Gerätepixel gerundet und ist nie dünner als einer. */
:root { --px: 1px; --hair: 1px; --dash: 2px; }
@supports (width: round(nearest, 1px, 1px)) {
  :root {
    --hair: max(var(--px), round(nearest, 1px, var(--px)));
    --dash: max(var(--px), round(nearest, 2px, var(--px)));
  }
}
.divider-line { height: var(--hair); border: 0; background: var(--rule-strong); }
.sec-rule { height: var(--hair); border: 0; background: var(--rule-strong); }
.acc { border-top-width: var(--hair); }
.acc-item { border-bottom-width: var(--hair); }
.posts { border-top-width: var(--hair); }
.posts li { border-bottom-width: var(--hair); }
.caselist li { border-top-width: var(--hair); }
.site-head { border-bottom-width: var(--hair); }
.footer { border-top-width: var(--hair); }
.acc-points li::before { height: var(--dash); background: var(--slate); }
.acc-icon::before, .acc-icon::after { height: var(--dash); background: var(--slate); }

/* Leistungen: Zeilen in der Größe der Blocküberschriften von „Wie wir arbeiten" (Paul, 22.09.: nicht so prägnant),
   der Titel antwortet auf die Maus */
.acc { margin-top: var(--s-5); }
.acc-btn {
  font-size: var(--fs-body);
  font-weight: var(--w-bold);
  line-height: 1.3;
  padding: var(--s-3) 0;
}
.acc-icon { width: 1.25rem; height: 1.25rem; }
.acc-icon::before, .acc-icon::after { width: 0.9rem; }
.acc-btn > span:first-child { transition: transform 0.5s var(--ease); }
.acc-btn:hover > span:first-child { transform: translateX(6px); }
.acc-item.is-open .acc-inner { padding-bottom: var(--s-4); }
.acc-item.is-open .acc-btn { color: var(--slate); }

/* Zonenregel (Messung 22.09., 18 Referenzen): der Körper der Seite wechselt zwischen Papier und Nebel,
   die Nacht ist der Schluss. Jede Seite endet gleich: Kontakt und Fuß auf Nacht. 14 von 18 Referenzen
   schließen dunkel, dunkle Bänder mitten in der Seite sind die Ausnahme. */
.cases-head { max-width: 26ch; margin-bottom: var(--s-7); }

/* Anlässe: sieben Zeilen untereinander (Paul, 22.09.: die zwei Spalten mit ungleichen Strichen links und rechts
   sind raus). Jede Zeile trägt den Titel links und den Satz rechts, eine Haarlinie über jeder Zeile und eine
   unter der letzten, dieselbe Zeilenform wie die Beiträge unter „Aktuelles". */
.caselist { columns: 1; column-gap: 0; border-bottom: var(--hair) solid var(--rule-strong); }
.caselist li {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-1) var(--s-6);
  align-items: baseline;
  padding: var(--s-4) 0;
  border-top-color: var(--rule-strong);
}
.caselist h3 { margin: 0; color: var(--ink); }
.caselist p { margin: 0; max-width: none; color: var(--ink-2); }
@media (max-width: 999px) { .caselist li { grid-template-columns: 1fr 1fr; gap: var(--s-1) var(--s-4); } }
@media (max-width: 639px) { .caselist li { grid-template-columns: 1fr; } }

.cta {
  background: var(--night);
  color: var(--on-night);
  padding: var(--s-7) 0 var(--s-6);
}
.cta .label { color: var(--on-night); }
.cta .h2 {
  color: var(--on-night);
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  max-width: 16ch;
  margin-bottom: var(--s-5);
}
.cta .btn-solid { background: var(--on-night); color: var(--night); }
.cta .btn-solid:hover { background: #fff; color: var(--night); }
.contact-lines { color: var(--on-night); }
.contact-lines a { text-decoration-color: var(--on-night-2); }

/* Fuß im selben Blau wie der Kontakt, alles in Weiß, nur eine feine Linie dazwischen */
.footer {
  background: var(--night);
  color: var(--on-night);
  border-top: 1px solid var(--on-night-rule);
  padding: var(--s-5) 0;
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
}
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-4); }
.footer a { color: var(--on-night); text-decoration-color: var(--on-night-2); }
.footer .wordmark { padding: 0; }
.footer .wordmark img { height: 1.4rem; }
.footer .fine { width: auto; max-width: none; margin: 0 0 0 auto; padding: 0; border: 0; text-align: right; color: var(--on-night); }
.cta .label { max-width: none; }

/* Partner: mehr Raum um die Porträts, Namen in der Stimme */
.partners { gap: var(--s-7); }
@media (min-width: 760px) { .partners { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.partner .name { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 500; margin-top: var(--s-4); }

/* Beiträge: Titel in der Stimme */
.posts a { font-family: var(--font-serif); font-weight: 500; font-size: 1.3rem; }

/* Bewegung: langsamer, weiter, aus derselben Kurve */
.reveal-ready [data-reveal] { transform: translateY(24px); }
.reveal-ready [data-stagger] > * { transform: translateY(20px); transition-duration: 0.9s; }

/* Das Werk nutzt die volle Spaltenbreite, das Vektordiagramm steht darunter. */
.werk3d { position: relative; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(0.75rem, 1.5vw, 1.5rem); align-content: start; }
.werk-mechanics { min-width: 0; aspect-ratio: 2.3 / 1; overflow: hidden; }
.werk-chart-frame { position: relative; width: min(100%, 15rem); aspect-ratio: 7 / 5; justify-self: center; min-width: 0; min-height: 0; }
.werk-chart { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; opacity: 0; }
.werk-ready .werk-chart { opacity: 1; }
.werk-chart .chart-axis { fill: none; stroke: var(--slate-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.werk-chart .chart-value { stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.werk-chart .chart-range { fill: var(--ink); opacity: 0.1; }

/* Leistungen: Text und Werk beginnen auf einer Höhe, die Grafik endet am Inhaltsrand. */
.leist-grid { display: grid; gap: var(--s-5); align-items: start; margin-bottom: var(--s-6); }
@media (min-width: 1000px) {
  .leist-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: var(--s-6); }
  /* Eine eindeutige Höhe verhindert, dass das SVG die Grid-Zeile über seine intrinsische Größe aufzieht. */
  .leist-grid .werk3d { height: clamp(22rem, 34vw, 26.5rem); grid-template-rows: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0.75rem; transform: translateX(-2rem); }
  .leist-grid .werk-mechanics { min-height: 0; height: 100%; aspect-ratio: auto; transform: translateY(-1rem); }
  .leist-grid .werk-chart-frame { width: 100%; aspect-ratio: auto; align-self: stretch; }
}
.leist-grid .lead { max-width: 36em; }
.leist-copy { display: grid; gap: var(--s-3); }

/* Einstieg: Platz für das große Logo, das beim Scrollen in die Kopfzeile fliegt */
.hero .wrap { container-type: inline-size; --hero-logo-height: 8.5rem; }
.hero-actions { margin: var(--s-4) auto 0; }
.hero-logo-slot { height: min(var(--hero-logo-height), calc(100cqw * 77 / 501)); width: 100%; margin: 0 auto; }
/* Wortkontur in logo.svg: x=101.45 bis 500.9 bei einer Gesamtbreite von 501.
   Der Satz misst in Spectral 500 mit der Claim-Laufweite rund 9.526 em. */
.hero .claim {
  --hero-logo-width: min(100cqw, calc(var(--hero-logo-height) * 501 / 77));
  --hero-word-width: calc(var(--hero-logo-width) * 399.45 / 501);
  --hero-claim-width: calc(var(--hero-word-width) * 0.85);
  width: var(--hero-claim-width);
  font-size: calc(var(--hero-claim-width) / 9.526);
  line-height: 1.1;
  margin: 0 auto;
  text-align: center;
}
.hero .intro-fields { margin: 0 auto; text-wrap: balance; }
.hero .claim + .intro-fields { margin-top: clamp(2rem, 4vw, 3rem); }
.expert-reference { margin-top: var(--s-5); max-width: 52rem; }
.site-head .wordmark { width: var(--logo-w, auto); overflow: visible; transition: width 0.7s var(--ease); }
.site-head.at-top .wordmark { width: 0; }
.site-head .wordmark img { max-width: none; transform-origin: top left; transition: transform 0.7s var(--ease), height 0.45s var(--ease); }
.site-head.at-top .wordmark img { transform: translate(var(--fly-x, 0px), var(--fly-y, 0px)) scale(var(--fly-s, 1)); }
.site-head .nav-side, .site-head .nav-main { transition: transform 0.7s var(--ease); }
@media (min-width: 1000px) {
  .site-head.at-top .nav-side { transform: translateX(var(--side-x, 0px)); }
  .site-head.at-top .nav-main { transform: translateX(var(--main-x, 0px)); }
}
.site-head.measuring, .site-head.measuring * { transition: none !important; }
@media (max-width: 899px) {
  .hero .wrap { --hero-logo-height: 4.25rem; }
}
@media (prefers-reduced-motion: reduce) { .site-head .wordmark, .site-head .wordmark img, .site-head .nav-side, .site-head .nav-main { transition: none; } }
/* Keep the wordmark and menu inside narrow mobile viewports. */
@media (max-width: 359px) {
  .site-head .wordmark img { height: 1.75rem; }
}
.werk3d canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 599px) {
  .werk3d { gap: var(--s-3); }
  .werk-mechanics { aspect-ratio: 2 / 1; }
  .werk-chart { width: min(100%, 18rem); justify-self: center; }
}

/* Anlässe (Paul, 23.09.): die Tabelle bleibt auf Papier, die Zeilen liegen in Hellgrau und werden beim Scrollen zu
   Tinte, der Titel zuerst, der Satz Wort für Wort, links im Rand füllt sich eine Leseleiste in Blaugrau mit dem
   Lesefortschritt (Makery-Muster Why, How, Who). Die Nacht-Fassungen (ganze Sektion, dann nur der Block) hat Paul
   verworfen, die Nacht bleibt der Schluss der Seite. Das Skript in edel.html schreibt --lit je Titel und Wort
   und --spine je Liste. */
#faelle .caselist { position: relative; }
#faelle .caselist h3, #faelle .caselist .lw { opacity: calc(0.78 + 0.22 * var(--lit, 1)); transition: opacity 0.3s linear; }
#faelle .caselist.lit-all h3, #faelle .caselist.lit-all .lw { opacity: 1; }
#faelle .caselist::before, #faelle .caselist::after { content: ""; position: absolute; left: calc(-1 * var(--s-4)); top: 0; width: var(--dash); height: 100%; background: var(--rule-strong); }
#faelle .caselist::after { height: var(--spine, 0px); background: var(--slate); transition: height 0.2s linear; }
#faelle .caselist.lit-all::after { height: 100%; }
@media (max-width: 899px) { #faelle .caselist::before, #faelle .caselist::after { display: none; } }
@media (prefers-reduced-motion: reduce) { #faelle .caselist h3, #faelle .caselist .lw, #faelle .caselist::after { transition: none; } }

/* Unterseiten (23.09.): Seitenkopf mittig in der Stimme, darunter die Abschnitte mit Trennzeichen wie auf der
   Startseite, die Nacht als Schluss. Gebaut von tools/seiten.py. */
.page-head { padding: var(--s-6) 0 var(--s-4); border-bottom: 0; text-align: center; }
.page-head .label { font-size: 1rem; font-weight: var(--w-regular); letter-spacing: 0; text-transform: none; color: var(--ink-2); max-width: none; margin: 0 0 var(--s-3); }
.page-head .h1 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.08; letter-spacing: -0.012em; max-width: 22ch; margin: 0 auto var(--s-4); text-wrap: balance; }
.page-head .lead { margin: 0 auto; max-width: 40em; text-align: left; }
.page-head + .section { padding-top: var(--s-6); }
.blocks-4 > * { min-width: 0; }

/* Fälle: je Anlass die Fälle als Zeilen, Titel links, Verlauf rechts, eine Haarlinie je Zeile */
.fall-list { border-bottom: var(--hair) solid var(--rule-strong); margin-top: var(--s-2); }
.fall {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-2) var(--s-6);
  padding: var(--s-4) 0;
  border-top: var(--hair) solid var(--rule-strong);
}
.fall h3 { margin: 0; }
.fall p { margin: 0 0 var(--s-2); max-width: none; color: var(--ink-2); }
.fall p:last-child { margin-bottom: 0; }
@media (max-width: 999px) { .fall { grid-template-columns: 1fr 1fr; gap: var(--s-1) var(--s-4); } }
@media (max-width: 639px) { .fall { grid-template-columns: 1fr; } }

/* Partner-Biografien: Name in der Stimme, zwei Biografien untereinander */
.bio .name { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 500; line-height: 1.15; margin: 0 0 var(--s-1); }
.bio + .bio { margin-top: var(--s-7); }
.bio .activities { margin-top: var(--s-4); }

/* Mitgliedschaften (Paul, 23.09., nach dem Muster der alten Seite): graue Logo-Leiste unter dem Seitenkopf, darunter
   je Mitgliedschaft eine Zeile mit Text und farbigem Logo, abwechselnd Logo rechts und Logo links */
.logo-strip { padding: var(--s-2) 0 var(--s-5); }
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-4) var(--s-6); }
.logo-row img { height: 3.4rem; width: auto; max-width: 11rem; object-fit: contain; filter: grayscale(1); opacity: 0.55; }
.member-list { border-bottom: var(--hair) solid var(--rule-strong); }
.member {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-4) var(--s-6);
  align-items: center;
  padding: var(--s-5) 0;
  border-top: var(--hair) solid var(--rule-strong);
}
.member-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.member-flip .member-text { order: 2; }
.member-flip .member-logo { order: 1; }
.member-text .h3 { margin: 0 0 var(--s-2); }
.member-text p { color: var(--ink-2); max-width: 44em; }
.member-logo { display: flex; justify-content: center; align-items: center; }
.member-logo img { max-width: 15rem; max-height: 8rem; width: auto; height: auto; object-fit: contain; }
@media (max-width: 767px) {
  .member, .member-flip { grid-template-columns: 1fr; gap: var(--s-3); }
  .member-flip .member-text { order: 1; }
  .member-flip .member-logo { order: 2; }
  .member-logo { justify-content: flex-start; }
  .member-logo img { max-height: 5.5rem; }
  .logo-row img { height: 2.4rem; max-width: 8rem; }
}

/* Kopfzeile zwischen 1000 und 1199 px: fünf Menüpunkte, Kontakt, EN und Logo brauchen dort weniger Raum (Paul, 23.09.:
   Reiter Mitgliedschaften). Darunter greift das Handymenü aus styles.css. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .nav a, .nav-btn { font-size: 0.9375rem; }
  .nav a { padding: 0.85rem 0.45rem; }
  .head-grid { gap: var(--s-4); }
  .site-head .wordmark img { height: 2.25rem; }
  .site-head.scrolled .wordmark img { height: 1.75rem; }
}

/* Fälle (Paul, 23.09., zweite Fassung): die Karte als Ring. In der Mitte der Kern in Nacht, darum ein Zeigerring,
   acht gleich große Kästen auf einem Kreis (im Uhrzeigersinn ab oben), Speichen vom Kern zu jedem Kasten, ein leiser
   blaugrauer Hauch im Innenraum. Die Geometrie ist fest (tools/faelle.py rechnet sie in Prozent und SVG-Einheiten),
   nichts wird gemessen. Beim Erscheinen zeichnen sich Orbit, Ring und Speichen, die Kästen treten reihum auf, dann
   die Regie: alle 2,8 s dreht der Zeiger zum nächsten Kasten, die Speiche füllt sich blau, der Kasten wird blau.
   Überfahren oder Fokus holen die Regie sofort dorthin. Unter 1000 px steht der Kern über einem Raster aus zwei
   Spalten, die Kästen bleiben gleich groß, die Regie läuft weiter. */
.map { position: relative; container-type: inline-size; aspect-ratio: 1060 / 908; max-width: 62rem; margin: var(--s-5) auto 0; }
.map-bg, .map-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.map-line { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 100ms + 250ms); }
.map-orbit { stroke: var(--rule); transition-duration: 1.4s; transition-delay: 0s; }
.map-ring { transition-duration: 1.1s; transition-delay: 150ms; }
.map.in .map-line { stroke-dashoffset: 0; }
.map-spoke-on { fill: none; stroke: var(--slate); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: opacity 0.3s, stroke-dashoffset 0s 0.3s; }
.map-spoke-on.on { stroke-dashoffset: 0; opacity: 1; transition: opacity 0.15s, stroke-dashoffset 0.6s var(--ease); }
.map-needle { fill: none; stroke: var(--slate); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; transform-box: view-box; transform-origin: 530px 454px; transform: rotate(var(--a, 0deg)); opacity: 0; transition: transform 0.9s var(--ease), opacity 0.6s 1.2s; }
.map.in .map-needle { opacity: 1; }
.map-box {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%;
  width: calc(256 / 1060 * 100cqw); height: calc(104 / 1060 * 100cqw);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 1.3cqw; box-sizing: border-box;
  font-size: max(0.875rem, 1.5cqw); font-weight: var(--w-bold); line-height: 1.25; text-wrap: balance; hyphens: manual;
  color: var(--ink); text-decoration: none;
  border: var(--hair) solid var(--rule-strong); background: var(--paper);
  transition: background-color 0.35s, color 0.35s, border-color 0.35s, box-shadow 0.35s, transform 0.7s var(--ease);
}
.map-box:hover, .map-box:focus-visible, .map-box.is-on { background: var(--slate); border-color: var(--slate); color: var(--on-deep); box-shadow: 0 14px 34px rgba(69, 90, 100, 0.24); }
.map.in .map-box:hover, .map.in .map-box.is-on { transform: translateY(-3px); }
.map-core {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: var(--d, 21.887%); aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--night); color: var(--on-night);
  font-family: var(--font-serif); font-size: max(1.4rem, 2.2cqw); font-weight: 500;
}
/* Auftritt: Kern und Kästen über Animationen mit Nachlauf, damit die Übergänge der Regie ohne Verzögerung laufen */
.js .map:not(.in) .map-box, .js .map:not(.in) .map-core { opacity: 0; }
.js .map.in .map-box { animation: map-box-in 0.7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 100ms + 400ms); }
.js .map.in .map-core { animation: map-core-in 0.9s var(--ease) backwards; }
@keyframes map-box-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes map-core-in { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
@media (max-width: 999px) {
  .map { container-type: normal; aspect-ratio: auto; max-width: none; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-auto-rows: 1fr; gap: var(--s-2); margin-top: var(--s-4); }
  .map-bg, .map-lines { display: none; }
  .map-core { position: static; translate: none; grid-row: 1; grid-column: 1 / -1; justify-self: center; width: 9rem; font-size: 1.5rem; margin-bottom: var(--s-2); }
  .map-box { position: static; translate: none; width: auto; height: auto; min-height: 5.5rem; padding: var(--s-2); font-size: 0.9375rem; }
}
@media (max-width: 479px) {
  .map-box { font-size: 0.875rem; padding: var(--s-2) var(--s-1); }
}
@media (prefers-reduced-motion: reduce) {
  .js .map:not(.in) .map-box, .js .map:not(.in) .map-core { opacity: 1; }
  .js .map.in .map-box, .js .map.in .map-core { animation: none; }
  .map-line, .map-spoke-on, .map-needle, .map-box { transition: none; }
  .map-line { stroke-dashoffset: 0; }
  .map-needle { opacity: 1; }
}

/* Fallseiten (Paul, 23.09., zweite Fassung): jeder Fall als mittige Lesespalte unter dem zentrierten Sektionskopf.
   Titel mittig, Geschichte linksbündig in der Spalte, darunter Kritische Punkte und Erfahrung nebeneinander,
   Literatur und Vorträge nebeneinander, Mehr zum Thema mit Videos als Verweise (kein Einbetten ohne Einwilligung)
   und die Videokarte. Eine Schriftgröße und eine Farbe für alle Listen, die Zwischentitel kräftig in Blaugrau. */
.case { max-width: 46em; margin-inline: auto; padding: var(--s-5) 0; border-top: var(--hair) solid var(--rule-strong); }
.case:first-of-type { border-top: 0; padding-top: var(--s-2); }
.case-title { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 500; line-height: 1.2; margin: 0 auto var(--s-4); max-width: 26em; text-align: center; text-wrap: balance; }
.case-story p { max-width: none; color: var(--ink-2); overflow-wrap: anywhere; hyphens: auto; }
.case-facts, .case-refs { display: grid; gap: var(--s-4) var(--s-5); margin-top: var(--s-5); }
@media (min-width: 760px) { .case-facts, .case-refs { grid-template-columns: 1fr 1fr; } }
.case .label { font-size: 1.0625rem; font-weight: var(--w-bold); letter-spacing: 0; text-transform: none; color: var(--slate); max-width: none; margin: 0 0 var(--s-2); }
.case-facts ul, .case-refs ul, .case-links, .video-list { margin: 0; padding: 0; list-style: none; }
.case-facts li, .case-refs li, .case-links li, .video-list li { position: relative; padding: 0.3rem 0 0.3rem 1.1rem; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); max-width: none; }
.case-facts li::before, .case-refs li::before, .case-links li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 0.5rem; height: var(--dash); background: var(--slate); }
.case-links a, .video-link { color: var(--ink-2); text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.2em; text-decoration-color: var(--rule-strong); }
.case-links a:hover, .video-link:hover { color: var(--slate); text-decoration-color: var(--slate); }
.case-more { margin-top: var(--s-5); }
.case .case-videos-title { margin-top: var(--s-3); }
.video-list li { padding-left: 1.6rem; }
.video-link .play { position: absolute; left: 0; top: 0.5em; width: 0; height: 0; border-style: solid; border-width: 0.32rem 0 0.32rem 0.55rem; border-color: transparent transparent transparent var(--slate); }
.video-card { display: inline-block; margin-top: var(--s-3); max-width: 22rem; text-decoration: none; color: var(--ink-2); }
.video-card img { width: 100%; height: auto; display: block; }
.video-card-label { display: block; font-size: 1.0625rem; margin-top: 0.5rem; }
.video-card-text { display: block; background: var(--night); color: var(--on-night); padding: var(--s-4); font-weight: var(--w-bold); }
.video-card:hover { color: var(--slate); }
.case-video { margin-top: var(--s-5); }
.case-video .video-card { margin-top: 0; }
.case-nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: var(--s-5) 0 0; max-width: none; }
.sec-more .textlink + .textlink { margin-left: var(--s-4); }

/* Aktuelles (Paul, 23.09., der Blog der alten Seite eins zu eins): die Übersicht als Liste nach Jahren mit Datum, Titel,
   Auszug und Kategorie, jeder Beitrag als mittige Lesespalte mit Titelbild, Text und den Verweisen zum älteren und
   neueren Beitrag. Bilder aus den Beiträgen laufen nie über die Spalte hinaus, Tabellen bleiben Tabellen. */
.posts-year { margin: var(--s-5) 0 var(--s-2); }
.posts-year:first-of-type { margin-top: 0; }
.posts-full .post-entry { min-width: 0; }
.posts-full .excerpt { margin: 0.35rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-3); max-width: 62ch; }
.post-head .label { color: var(--slate); }
.post { max-width: 46em; margin-inline: auto; }
.post-figure { margin: 0 0 var(--s-5); }
.post-figure img { width: 100%; height: auto; display: block; }
.post-body p { max-width: none; color: var(--ink-2); }
.post-body img { max-width: 100%; height: auto; display: block; margin: var(--s-4) auto; }
.post-body figure { margin: var(--s-4) 0; }
.post-body figure img { margin: 0 auto; }
.post-body figcaption { font-size: var(--fs-small); color: var(--ink-3); margin-top: var(--s-1); text-align: center; }
.post-body ul, .post-body ol { margin: 0 0 var(--s-3); padding-left: 1.4rem; color: var(--ink-2); }
.post-body li { margin-bottom: 0.3rem; }
.post-body table { border-collapse: collapse; width: 100%; margin: var(--s-4) 0; font-size: 0.9375rem; color: var(--ink-2); }
.post-body td, .post-body th { border-bottom: var(--hair) solid var(--rule); padding: 0.45rem 0.6rem; vertical-align: top; text-align: left; }
.post-body a { color: var(--ink); text-decoration-thickness: var(--hair); text-underline-offset: 0.2em; text-decoration-color: var(--rule-strong); overflow-wrap: anywhere; }
.post-body a:hover { color: var(--slate); text-decoration-color: var(--slate); }
.post-body blockquote { margin: var(--s-4) 0; padding-left: var(--s-3); border-left: var(--dash) solid var(--slate); color: var(--ink-2); }
.post-body math[display="block"] { max-width: 100%; overflow-x: auto; padding-block: 0.4rem; }
.post-body .article-caption { font-size: var(--fs-small); color: var(--ink-3); }
.draft-notice { margin: 0 auto var(--s-5); max-width: 46rem; padding-block: var(--s-3); border-block: var(--hair) solid var(--rule-strong); color: var(--ink-2); font-size: var(--fs-small); }
.draft-notice ul { padding-left: 1.2rem; margin-bottom: 0; }
.post-nav { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; max-width: 46em; margin: var(--s-6) auto 0; }
.textlink-back::before { content: "\2190"; margin-right: 0.6em; display: inline-block; transition: transform 0.2s; }
.textlink-back::after { content: none; }
.textlink-back:hover::before { transform: translateX(-4px); }

/* Kontakt, Impressum, Datenschutz (Paul, 23.09.): Rechtstexte als mittige Lesespalte mit nüchternen Zwischentiteln,
   die Kontaktseite mit dem Büro als Zeilen (Person, Rolle, Wege) und den E-Mail-Wegen. Das Formular ist vorbereitet
   und erscheint erst, wenn tools/kontakt_recht.py einen Formulardienst kennt. */
.legal { max-width: 46em; margin-inline: auto; }
.legal h2 { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 500; line-height: 1.25; margin: var(--s-5) 0 var(--s-2); }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.0625rem; font-weight: var(--w-bold); color: var(--slate); margin: var(--s-4) 0 var(--s-1); }
.legal p { max-width: none; color: var(--ink-2); }
.legal ul { margin: 0 0 var(--s-3); padding-left: 1.2rem; color: var(--ink-2); }
.legal li { margin-bottom: 0.3rem; }
.legal a { color: var(--ink); text-decoration-thickness: var(--hair); text-underline-offset: 0.2em; text-decoration-color: var(--rule-strong); overflow-wrap: anywhere; }
.legal a:hover { color: var(--slate); text-decoration-color: var(--slate); }
.legal address { font-style: normal; color: var(--ink-2); margin: 0 0 var(--s-3); line-height: 1.6; }
.legal .stand { font-size: var(--fs-small); color: var(--ink-3); margin-top: var(--s-5); }
.office { max-width: 46em; margin-inline: auto; }
.office-rows { list-style: none; margin: 0; padding: 0; border-top: var(--hair) solid var(--rule-strong); }
.office-rows li { display: grid; gap: 0.3rem var(--s-4); padding: var(--s-3) 0; border-bottom: var(--hair) solid var(--rule); }
@media (min-width: 760px) { .office-rows li { grid-template-columns: 1fr 1fr; align-items: start; } }
.office-rows .who { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; line-height: 1.25; }
.office-rows .role { display: block; font-family: var(--font-sans); font-size: var(--fs-small); font-weight: var(--w-medium); color: var(--ink-3); margin-top: 0.25rem; }
.office-rows .ways { color: var(--ink-2); line-height: 1.7; }
.office-rows .ways a { color: var(--ink); text-decoration-thickness: var(--hair); text-underline-offset: 0.2em; text-decoration-color: var(--rule-strong); }
.office-rows .ways a:hover { color: var(--slate); text-decoration-color: var(--slate); }
.office address { font-style: normal; color: var(--ink-2); line-height: 1.7; margin: 0; }
.office .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-4); }
.form { max-width: 46em; margin-inline: auto; display: grid; gap: var(--s-3); }
.form label { display: grid; gap: 0.4rem; font-size: 0.9375rem; font-weight: var(--w-medium); color: var(--ink-2); }
.form input, .form textarea { font: inherit; font-size: 1.0625rem; padding: 0.7rem 0.9rem; border: var(--hair) solid var(--rule-strong); background: var(--paper); color: var(--ink); border-radius: 0; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--slate); outline-offset: 2px; border-color: var(--slate); }
.form textarea { min-height: 10rem; resize: vertical; }
.form .consent { grid-template-columns: auto 1fr; align-items: start; font-weight: var(--w-regular); }
.form .consent input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; }
.form .btn-row { margin-top: var(--s-1); }

/* Contact inquiry: the existing paper, slate and typography carry the form. */
.contact-layout { max-width: 76rem; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(17rem, 1fr); gap: clamp(3rem, 7vw, 7rem); align-items: start; }
.contact-heading { font-family: var(--font-serif); font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 500; line-height: 1.25; margin: 0 0 1rem; }
.contact-intro { color: var(--ink-2); font-size: 1rem; line-height: 1.7; margin: 0 0 2rem; max-width: 46ch; }
.contact-form fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
.contact-field { min-width: 0; }
.contact-field-wide { grid-column: 1 / -1; }
.contact-field label { display: block; margin-bottom: 0.55rem; color: var(--ink-2); font-size: 0.9375rem; font-weight: 500; }
.contact-field input, .contact-field textarea { display: block; width: 100%; min-width: 0; min-height: 3.125rem; padding: 0.8rem 0.95rem; border: 1px solid var(--slate-3); border-radius: 0; background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.6; }
.contact-field textarea { min-height: 13rem; resize: vertical; }
.contact-field :is(input, textarea):focus { outline: 2px solid var(--slate); outline-offset: 3px; border-color: var(--slate); }
.contact-field [aria-invalid=true] { border: 2px solid var(--ink); }
.contact-error { font-size: 0.875rem; font-weight: 500; color: var(--ink); margin: 0.5rem 0 0; }
.contact-required { font-size: 0.8125rem; color: var(--ink-3); margin: 0.8rem 0 1rem; }
.contact-privacy { color: var(--ink-3); font-size: 0.875rem; line-height: 1.7; max-width: 62ch; margin: 0 0 1.5rem; }
.contact-privacy a, .contact-details a { text-decoration: underline; text-underline-offset: 0.18em; overflow-wrap: anywhere; }
.contact-form .btn { min-height: 3.125rem; }
.contact-form button:disabled { cursor: wait; }
.contact-preview { border-left: 2px solid var(--slate); padding: 0.75rem 1rem; margin: 0 0 1.5rem; background: var(--mist); color: var(--ink-2); font-size: 0.875rem; line-height: 1.6; }
.contact-status { padding: 1.25rem; border: 1px solid var(--slate); background: var(--mist); margin: 1.5rem 0; font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere; }
.contact-status[data-state=success] { margin-top: 0; }
.contact-status:focus { outline: 2px solid var(--slate); outline-offset: 3px; }
.contact-details { padding-left: clamp(1.5rem, 3vw, 3rem); border-left: var(--hair) solid var(--rule-strong); }
.contact-details .office-rows { border-top: 0; }
.contact-details .office-rows li { display: block; padding: 1.3rem 0; }
.contact-details .office-rows li:first-child { padding-top: 0.5rem; }
.contact-details .ways, .contact-details address { font-size: 0.9375rem; margin-top: 0.75rem; font-style: normal; line-height: 1.7; color: var(--ink-2); }
.contact-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.js .contact-js-note, html:not(.js) .contact-form { display: none; }
.contact-form [hidden] { display: none !important; }
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; max-width: 44rem; gap: 3rem; }
  .contact-details { padding: 2rem 0 0; border-left: 0; border-top: var(--hair) solid var(--rule-strong); }
}
@media (max-width: 480px) {
  .contact-fields { grid-template-columns: 1fr; }
  .contact-form .btn { width: 100%; }
}

/* Kennzahlen (Paul, 23.09.: die Meilensteine der alten Leistungsseiten): drei Zahlen in einer Zeile mit Haarlinien
   dazwischen, die Zahl in der Stimme und in Blaugrau, Wort und Einheit in der Information, darunter eine Messlinie,
   die sich beim Hochzählen füllt (site.js setzt --p von 0 auf 1), dann der Text. Als Band unter dem Seitenkopf der
   Leistungsseite und als kompakte Zeile in einer Sektion. Unter 760 px stehen die Zahlen untereinander. */
.kpis-section { padding: 0 0 var(--s-6); }
.kpis { display: grid; gap: var(--s-4); max-width: 62rem; margin-inline: auto; padding: var(--s-4) 0; border-top: var(--hair) solid var(--rule-strong); border-bottom: var(--hair) solid var(--rule-strong); }
.kpi { min-width: 0; }
.kpi-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.4rem; margin: 0 0 var(--s-2); max-width: none; font-family: var(--font-serif); font-weight: 500; line-height: 1; color: var(--slate); }
.kpi-num { font-size: clamp(2.6rem, 4vw, 3.8rem); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi-post { font-size: clamp(1.8rem, 2.6vw, 2.5rem); }
.kpi-pre, .kpi-unit { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: var(--w-medium); color: var(--ink-2); }
.kpi-bar { display: block; width: 100%; height: var(--dash); margin: 0 0 var(--s-2); background: var(--slate); transform-origin: left center; transform: scaleX(var(--p, 1)); }
.kpi-text { margin: 0; max-width: none; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.kpis-inline { margin: 0 0 var(--s-5); padding: var(--s-3) 0; }
.kpis-inline .kpi-num { font-size: clamp(2.2rem, 3vw, 2.9rem); }
.kpis-inline .kpi-post { font-size: clamp(1.5rem, 2vw, 1.9rem); }
@media (min-width: 760px) {
  .kpis { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0; }
  .kpi { padding: 0 var(--s-4); }
  .kpi:first-child { padding-left: 0; }
  .kpi:last-child { padding-right: 0; }
  .kpi + .kpi { border-left: var(--hair) solid var(--rule); }
}
@media (prefers-reduced-motion: reduce) { .kpi-bar { transform: none; } }

/* Reading and navigation refinements, September 2026. */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:root { --section-space: clamp(3rem, 6vw, 6rem); --reading-width: 70ch; }
.section { padding-block: var(--section-space); }
.section-compact, .page-head + .section-compact { padding-top: var(--s-4); }
.section-compact > .wrap > .divider { display: none; }
.page-head { padding-top: var(--s-5); }
.page-head .lead { max-width: 65ch; }
.page-head .h1 { margin-bottom: var(--s-3); }
.sec-head { margin-bottom: var(--s-5); }
.page-toc { margin-block: var(--s-3) var(--s-4); max-width: 76rem; }
.page-toc ul { list-style: none; padding: var(--s-2) 0; margin: 0; border-block: var(--hair) solid var(--rule-strong); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1) var(--s-4); }
.page-toc a { display: inline-flex; min-height: 44px; align-items: center; max-width: 55ch; font-size: 1rem; }
.case, .post, .legal, .post-nav { max-width: var(--reading-width); }
.case-story > ul { padding-left: 1.4rem; margin-block: var(--s-3); color: var(--ink-2); }
.case-story > ul li { margin-bottom: var(--s-2); }
.case-title { text-align: left; margin-inline: 0; max-width: 35ch; }
.case { scroll-margin-top: 6rem; }
.case p { line-height: 1.65; }
.case-facts, .case-refs, .case-more, .case-video, .case-nav { margin-top: var(--s-4); }
.case-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.case-title + .case-summary { color: var(--slate); padding-left: var(--s-3); border-left: 3px solid var(--slate); margin-bottom: var(--s-4); }
#faelle .caselist h3 a { display: block; padding-block: var(--s-1); text-decoration: none; }
#faelle .caselist h3 a:hover, #faelle .caselist h3 a:focus-visible { text-decoration: underline; }
.occasion-arrow { color: var(--slate); white-space: nowrap; }
#faelle .caselist li { padding-block: var(--s-3); }
#faelle .caselist h3 { color: var(--ink); }
#faelle .caselist p { color: var(--ink-2); }
.table-scroll { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; margin-block: var(--s-4); border: var(--hair) solid var(--rule-strong); }
.table-scroll table { min-width: var(--table-min, 36rem); margin: 0; }
.table-scroll:focus-visible { outline-offset: 4px; }
.archive-filters { display: grid; grid-template-columns: minmax(16rem, 2fr) repeat(3, minmax(8rem, 1fr)); gap: var(--s-2); align-items: end; padding-block: var(--s-3); border-block: var(--hair) solid var(--rule-strong); }
.archive-filters label { display: grid; gap: 0.45rem; color: var(--ink-2); font-size: 1rem; }
.archive-filters input, .archive-filters select { width: 100%; min-width: 0; min-height: 48px; padding: 0.65rem; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--slate-3); border-radius: 0; }
.filter-reset { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; text-decoration: underline; font: inherit; color: var(--slate); cursor: pointer; }
.filter-status { color: var(--ink-2); font-size: 1rem; margin-block: var(--s-2); }
.year-nav { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); padding-block: var(--s-2); }
.year-nav a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
.posts-year { scroll-margin-top: 6rem; }
.post-body img { cursor: zoom-in; }
.post-body .image-link { display: block; }
.post-figure .image-link { display: block; }
.translated-figure { margin: var(--s-4) 0; }
.figure-notes { margin-top: var(--s-2); padding-left: var(--s-3); border-left: 2px solid var(--rule-strong); color: var(--ink-2); font-size: .9375rem; }
.figure-notes p { max-width: none; margin-block: 0 var(--s-2); }
.figure-notes .label { font-size: .8125rem; }
.post-body picture img { width: auto; max-width: 100%; }
.bio + .bio { margin-top: var(--s-6); }
.werk-fallback { position: absolute; inset: 0; display: flex; align-items: center; padding: var(--s-3); background: var(--paper); color: var(--slate); }
.werk-ready .werk-fallback { display: none; }
.reveal-ready [data-reveal], .reveal-ready [data-stagger] > * { transition-duration: 0.65s; transform: translateY(12px); }
.reveal-ready [data-reveal].in, .reveal-ready [data-stagger].in > * { transform: none; }
.footer .fine { max-width: none; }
.language-switch a { font-size: .875rem; letter-spacing: .05em; min-width: 44px; justify-content: center; }
html[lang="en"] .archive-filters { grid-template-columns: minmax(16rem,2fr) repeat(2,minmax(8rem,1fr)); }
@media (max-width: 999px) {
  .archive-filters { grid-template-columns: 1fr 1fr; }
  html[lang="en"] .archive-filters { grid-template-columns: 1fr 1fr; }
  .archive-filters label:first-child { grid-column: 1 / -1; }
  .page-toc ul { justify-content: flex-start; gap: 0 var(--s-3); }
  .page-toc a { padding-block: var(--s-1); }
  html:not(.js) .nav-lists { display: flex; flex-direction: column; align-items: stretch; position: static; padding: var(--s-2) 0; box-shadow: none; }
  html:not(.js) .nav-btn { display: none; }
  html:not(.js) .head-grid { display: block; }
  html:not(.js) .nav { justify-items: stretch; }
  html:not(.js) .nav ul { flex-wrap: wrap; justify-self: start; }
  html:not(.js) .site-head { position: static; }
}
@media (max-width: 479px) {
  .archive-filters { grid-template-columns: 1fr; }
  html[lang="en"] .archive-filters { grid-template-columns: 1fr; }
  .page-head .h1 { font-size: clamp(2rem, 8vw, 2.5rem); }
  .case-title { font-size: 1.55rem; }
  .page-toc ul { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-ready [data-reveal], .reveal-ready [data-stagger] > * { opacity: 1; transform: none; transition: none; }
}