/* AutoProfessor - Design System v1.0 (verbindlich, siehe DESIGN.md)
   Palette: Midnight Blue / Warm White / Graphite / Cool Grey / Stone / Ice Blue
   Typografie: Newsreader (Headlines, 400) + Inter (Interface/Text)
   Radius: 2px / 6px. Trennung durch 1px-Linien, Raum und Typografie. */

@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/newsreader-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/newsreader-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/newsreader-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --midnight-blue: #081D33;
  --midnight-blue-light: #102A44;
  --warm-white: #F6F4F1;
  --pure-white: #FFFFFF;
  --graphite: #2A2E33;
  --cool-grey: #D6D9DD;
  --stone: #C7C3BA;
  /* Auf Warm White gemessen: das fruehere #6F7780 kam nur auf 4,13:1 und
     verfehlte damit WCAG AA (4,5:1) fuer Fliesstext. #656D76 liegt bei 4,78:1
     und auf Pure White bei 5,25:1, bei praktisch gleicher Anmutung. Wer den
     Wert wieder aufhellt, prueft ihn gegen #F6F4F1, nicht gegen Weiss —
     Warm White ist der strengere Fall. */
  --muted-text: #656D76;
  --ice-blue: #B8CFDA;

  --line-light: rgba(8, 29, 51, 0.14);
  --line-dark: rgba(246, 244, 241, 0.16);
  --dark-muted: #9FADBC;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-2xl: 128px;
  --space-3xl: 180px;

  --radius-small: 2px;
  --radius-medium: 6px;

  --motion-fast: 180ms;
  --motion-standard: 350ms;
  --motion-slow: 700ms;
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);

  --serif: "Newsreader", Georgia, serif;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
  --maxw: 1400px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--graphite);
  background: var(--warm-white);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 64px;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--midnight-blue);
  margin: 0 0 0.45em;
}
h1 { font-size: clamp(2.5rem, 7vw, 7.5rem); line-height: 1.06; letter-spacing: -0.035em; }
h2 { font-size: clamp(2.25rem, 4.5vw, 4.75rem); line-height: 1.06; letter-spacing: -0.025em; }
h3 { font-size: clamp(1.4rem, 1.8vw, 1.75rem); line-height: 1.15; letter-spacing: -0.01em; }
p  { margin: 0 0 1em; max-width: 62ch; }

.body-large { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.55; }
.label {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted-text);
}
.muted { color: var(--muted-text); }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--midnight-blue);
  outline-offset: 2px;
}
.dark a:focus-visible, .dark button:focus-visible { outline-color: var(--warm-white); }

/* ---------- Logo ---------- */
.logo { display: block; height: 34px; width: auto; }
.logo-mono { display: none; height: 34px; width: auto; }
.brand { display: flex; align-items: center; text-decoration: none; }

/* Ausloeser fuer den Farbwechsel der Navigation. Sobald dieser Streifen den
   Viewport verlaesst, wird .scrolled gesetzt.

   Die Hoehe ist kein Geschmackswert. Der Hero zentriert seinen Inhalt, der
   Abstand zwischen Navigations-Unterkante und dem obersten Hero-Element
   betraegt gemessen 44px bei 320-768px Breite und 64px darueber — das ist der
   Punkt, ab dem Hero-Text unter die Navigation laeuft. Stand hier vorher
   55vh, also 550px bei 1000px Viewport: der Text schob sich dann rund 500px
   lang unter eine noch transparente Leiste, und die Wortmarke lag auf dem
   Fliesstext. 24px loest deutlich vor dem engsten Fall aus.
   Wer den Hero umbaut, misst diesen Abstand neu. */
#nav-sentinel {
  position: absolute;
  top: 0;
  height: 24px;
  width: 1px;
  pointer-events: none;
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: transparent;
  transition: background var(--motion-standard) var(--ease-premium);
}

/* Die Trennlinie waechst von links ein, statt als fertige Kante zu erscheinen.
   Gleiche Geste wie .hero-rule, nur kuerzer. Sie laeuft langsamer als die
   Flaeche und schliesst die Bewegung ab, statt mit ihr zu enden.
   .project-nav bleibt aussen vor, die hat ihre eigene feste Kante. */
.nav:not(.project-nav)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line-light);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-slow) var(--ease-premium);
}
.nav.scrolled::after { transform: scaleX(1); }
/* Dauerhaft helle Seiten: Linie steht sofort, ohne Einlauf beim Seitenaufbau. */
.nav.nav-solid::after { transform: scaleX(1); transition: none; }
.nav-inner {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.nav-links { display: flex; align-items: center; gap: 34px; font-size: 0.94rem; }
/* Kurzform des Kundenbereich-Eintrags, sichtbar erst unter 560px. "Login" ist
   die Konvention fuer einen geschuetzten Bereich und mit 33px die einzige
   Beschriftung, die neben den drei uebrigen Eintraegen in 360px passt
   (gemessen: "Kunden" 46px und "Zugang" 46px laufen dort ueber). */
.nav-kurz { display: none; }
.nav-links a {
  text-decoration: none;
  color: var(--warm-white);
  transition: opacity var(--motion-fast) ease,
              color var(--motion-standard) var(--ease-premium);
  opacity: 0.85;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; }

/* Logo-Varianten: über dunklem Hero die weiße, nach Scroll die dunkle.
   Beide liegen deckungsgleich uebereinander und blenden ineinander, statt
   per display umzuschalten. Vorher sprang die Wortmarke hart um, waehrend die
   Flaeche noch blendete — die dunkle Marke stand dann kurz auf
   halbdurchsichtigem Weiss ueber dunklem Grund. Als Kreuzblende in derselben
   Zeit wie die Flaeche gibt es diesen Zwischenzustand nicht mehr.
   Die -on-dark-Variante bleibt im Fluss und gibt die Breite vor, die
   -on-light-Variante liegt absolut darueber. Welches PAAR im Fluss steht,
   entscheidet weiterhin display: das Monogramm ist schmaler als die
   Wortmarke, und diese Breite muss das Layout kennen.

   ACHTUNG beim Aendern: die Kreuzblende ist auf .nav:not(.nav-solid) begrenzt,
   also faktisch auf die Startseite. Nur sie liefert beide Farbvarianten aus.
   Die uebrigen Seiten haben ausschliesslich die -on-light-Variante im Markup;
   wuerde die absolut gesetzt, waere sie dort das einzige Logo und die
   Wortmarke bliebe ohne Breite zurueck. */
.nav:not(.nav-solid) .brand { position: relative; }
.nav:not(.nav-solid) .logo-on-dark,
.nav:not(.nav-solid) .logo-on-light {
  transition: opacity var(--motion-standard) var(--ease-premium);
}
.nav:not(.nav-solid) .logo.logo-on-light,
.nav:not(.nav-solid) .logo-mono.logo-on-light {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.nav:not(.nav-solid) .logo.logo-on-dark { display: block; opacity: 1; }
.nav:not(.nav-solid) .logo.logo-on-light { display: block; opacity: 0; }

.nav.scrolled { background: var(--warm-white); }
.nav.scrolled .nav-links a { color: var(--midnight-blue); }
.nav.scrolled .logo.logo-on-light { opacity: 1; }
.nav.scrolled .logo.logo-on-dark { opacity: 0; }

/* Helle Seiten ohne dunklen Hero: Navigation von Anfang an hell, statisch. */
.nav.nav-solid {
  position: sticky;
  background: var(--warm-white);
}
.nav.nav-solid .nav-links a { color: var(--midnight-blue); }
.nav.nav-solid .logo.logo-on-light { display: block; }
.nav.nav-solid .logo.logo-on-dark { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: var(--radius-small);
  border: 1px solid transparent;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease,
              border-color var(--motion-fast) ease;
  white-space: nowrap;
}
.btn-primary { background: var(--midnight-blue); color: var(--warm-white); }
.btn-primary:hover { background: var(--midnight-blue-light); }
.btn-primary-inverse { background: var(--warm-white); color: var(--midnight-blue); }
.btn-primary-inverse:hover { background: var(--pure-white); }
.btn-outline { border-color: var(--line-light); color: var(--midnight-blue); background: transparent; }
.btn-outline:hover { border-color: var(--midnight-blue); }
.btn-small { padding: 10px 20px; font-size: 0.88rem; }
.btn-nav-dark { border: 1px solid var(--line-dark); color: var(--warm-white); background: transparent; }
.nav.scrolled .btn-nav-dark, .nav.nav-solid .btn-nav-dark { border-color: var(--line-light); color: var(--midnight-blue); }
.btn-nav-dark:hover { border-color: currentColor; }

.text-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  /* Zweite, kraeftigere Linie, die beim Hover von links einlaeuft.
     Die Grundlinie bleibt sichtbar — der Link ist also jederzeit als
     solcher erkennbar, die Bewegung ist reine Zugabe. */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--motion-standard) var(--ease-premium),
              opacity var(--motion-fast) ease;
}
.text-link:hover { background-size: 100% 1px; opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
  .text-link { transition: opacity var(--motion-fast) ease; }
  .text-link:hover { background-size: 0 1px; opacity: 0.7; }
}

/* ---------- Dunkle Sektionen ---------- */
.dark { background: var(--midnight-blue); color: var(--warm-white); }
.dark h1, .dark h2, .dark h3 { color: var(--warm-white); }
.dark p { color: var(--dark-muted); }
.dark .label { color: var(--ice-blue); }

/* ---------- Hero ---------- */
.hero {
  min-height: 88dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 140px 0 var(--space-lg);
}
.hero .wrap { width: 100%; }
.hero-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-content { position: relative; max-width: 1080px; }
.hero .label { margin-bottom: var(--space-md); display: block; }
.hero h1 { margin-bottom: 0.35em; }
.hero-sub {
  color: var(--dark-muted);
  max-width: 44ch;
  margin-bottom: var(--space-lg);
}
.hero-ctas { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.hero-ctas .text-link { color: var(--warm-white); }
.hero-rule {
  position: relative;
  height: 1px;
  background: var(--line-dark);
  margin-top: var(--space-2xl);
  transform-origin: left;
}

/* Hero-Reveal: langsam, gestaffelt */
@media (prefers-reduced-motion: no-preference) {
  .hero .stagger {
    opacity: 0;
    transform: translateY(26px);
    animation: hero-in var(--motion-slow) var(--ease-premium) forwards;
  }
  .hero .stagger.s1 { animation-delay: 0.1s; }
  .hero .stagger.s2 { animation-delay: 0.22s; }
  .hero .stagger.s3 { animation-delay: 0.36s; }
  .hero .stagger.s4 { animation-delay: 0.5s; }
  @keyframes hero-in { to { opacity: 1; transform: none; } }
  .hero-rule {
    transform: scaleX(0);
    animation: rule-in 1.4s var(--ease-premium) 0.7s forwards;
  }
  @keyframes rule-in { to { transform: scaleX(1); } }
}

/* ---------- Sektionen ---------- */
.section { padding: var(--space-2xl) 0; }
.section-tight { padding: var(--space-xl) 0; }
.section-head { margin-bottom: var(--space-lg); }
.section-head .label { display: block; margin-bottom: var(--space-sm); }

/* Positionierung: großer Editorial-Block */
.statement {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--midnight-blue);
  max-width: 30ch;
  margin: 0 0 var(--space-md);
}
.statement em { font-style: italic; }

/* Leistungsfelder: drei Spalten, getrennt durch Linien */
.capabilities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-light);
}
.capability {
  padding: var(--space-lg) var(--space-lg) var(--space-lg) 0;
  border-right: 1px solid var(--line-light);
}
.capability:last-child { border-right: none; padding-right: 0; }
.capability + .capability { padding-left: var(--space-lg); }
.capability h3 { margin: var(--space-md) 0 0.6em; }
.capability p { color: var(--muted-text); margin-bottom: 0; font-size: 0.98rem; }
/* --stone kommt auf Warm White nur auf 1,6:1 und ist dort als Text unlesbar.
   Es gehoert ausschliesslich auf Midnight (9,7:1). */
.capability .label { color: var(--muted-text); }

/* Startseite: vier gleichwertige Leistungskacheln auf ausdruecklichen Wunsch. */
.home .hero h1 > span { display: block; }
.home main > .section-tight + .section-tight { padding-top: 48px; }
.home h2 { font-size: clamp(2rem, 4vw, 4rem); }
.home-approach-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.home-approach .label, .home #leistungen .label { display: block; margin-bottom: 24px; }
.home-approach h2 { font-size: clamp(2rem, 3.2vw, 3rem); }
.home-approach-copy p { max-width: 50ch; margin-bottom: 24px; }
.service-matrix { display: grid; grid-auto-rows: 1fr; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.service-tile { display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--line-light); border-radius: var(--radius-medium); background: var(--pure-white); }
.service-tile h3 { font-size: clamp(1.625rem, 2.4vw, 2.125rem); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 16px; }
.service-tile p { max-width: 43ch; margin: 0; color: var(--muted-text); }
/* Editoriale Miniaturen: Anbieterwahl, Datenverarbeitung, Zusammenarbeit, Abwaegung. */
.tile-visual { position: relative; width: 100%; max-width: 440px; height: 152px; margin-bottom: 16px; overflow: hidden; color: var(--midnight-blue); font: 12px/1.4 var(--sans); }
.scene-caption { color: var(--graphite); font-size: 13px; font-weight: 500; }
.scene-eyebrow { color: var(--muted-text); font-size: 12px; letter-spacing: .06em; }
.scene-scout { container-type: inline-size; }
.scout-deck { position: absolute; inset: 12px auto 12px 0; width: 44%; }
.scout-sheet { position: absolute; width: 76%; height: 106px; border: 1px solid var(--cool-grey); border-radius: 2px; background: var(--pure-white); }
.scout-sheet-back { top: 0; left: 20%; background: var(--warm-white); }
.scout-sheet-middle { top: 8px; left: 10%; }
.scout-sheet-front { top: 16px; left: 0; padding: 14px; border-color: var(--muted-text); }
.sheet-rule { display: block; margin-top: 13px; width: 85%; height: 3px; background: var(--cool-grey); }
.sheet-rule-short { margin-top: 7px; width: 60%; }
.sheet-detail { display: block; margin-top: 15px; width: 20px; height: 2px; background: var(--midnight-blue); }
.scout-criteria { position: absolute; z-index: 1; inset: 10px 0 10px 52%; display: grid; grid-template-rows: 30px repeat(3, 1fr); }
.scout-criteria > span:not(:first-child) { display: flex; align-items: center; padding-left: 16px; border-bottom: 1px solid var(--cool-grey); color: var(--muted-text); }
.scout-criteria > span:not(:first-child)::before { content: ''; position: absolute; left: 0; width: 4px; height: 4px; border: 1px solid var(--midnight-blue); }
.scout-selection { position: absolute; left: calc(52% - 10px); top: 44px; width: 2px; height: 26px; border-radius: 1px; background: var(--midnight-blue); opacity: 0; }
.scout-selection::after { content: ""; position: absolute; left: 4px; top: 0; width: calc(48cqw + 2px); height: 100%; border-radius: 2px; background: rgba(8,29,51,.035); }
.scene-workflow { display: grid; grid-template-columns: repeat(3,1fr); }
.workflow-rails, .decision-connector { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--cool-grey); stroke-width: 1; }
.workflow-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding-top: 10px; gap: 16px; }
.workflow-document, .workflow-engine, .workflow-system { position: relative; display: flex; flex-direction: column; justify-content: center; width: 64px; height: 90px; background: var(--pure-white); border: 1px solid var(--muted-text); border-radius: 2px; }
.workflow-document { padding: 11px; transform: translateY(-1px); }
.workflow-document span { display: block; height: 2px; margin: 4px 0; background: var(--cool-grey); }
.workflow-document span:nth-child(2) { width: 65%; }
.workflow-engine { width: 72px; height: 90px; padding: 12px; background: var(--midnight-blue); border-color: var(--midnight-blue); }
.workflow-engine span { height: 4px; margin: 3px 0; border: 1px solid var(--ice-blue); border-radius: 1px; }
.workflow-engine span:nth-child(2) { width: 70%; }
.workflow-engine svg { width: 22px; height: 16px; margin-top: 10px; fill: none; stroke: var(--ice-blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.workflow-system { width: calc(100% - 16px); max-width: 104px; padding: 27px 8px 8px; }
.workflow-system::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 17px; border-bottom: 1px solid var(--cool-grey); background: var(--warm-white); }
.workflow-system span { height: 12px; margin-bottom: 5px; border: 1px solid var(--cool-grey); border-radius: 1px; }
.workflow-system span:last-child { width: 45%; height: 8px; margin-bottom: 0; background: var(--midnight-blue); border-color: var(--midnight-blue); }
.workflow-record { position: absolute; top: 86px; left: 0; width: 100%; height: 6px; opacity: 0; }
.workflow-record::after { content: ""; position: absolute; left: 25%; width: 10px; height: 6px; border-radius: 1px; background: var(--midnight-blue); }
.scene-change { padding-top: 10px; }
.change-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.change-heading span:last-child { color: var(--muted-text); font-weight: 400; }
.change-team { position: absolute; top: 39px; left: 0; width: 76px; height: 62px; fill: var(--pure-white); stroke: var(--midnight-blue); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.change-team .team-secondary { stroke: var(--muted-text); }
.change-path { position: absolute; top: 41px; left: 88px; width: calc(100% - 108px); height: 60px; fill: none; stroke: var(--cool-grey); stroke-width: 1; }
.change-path path { vector-effect: non-scaling-stroke; }
.change-progress { stroke: var(--midnight-blue); stroke-width: 2; stroke-dasharray: .18 .82; opacity: 0; }
.change-destination { position: absolute; right: 16px; top: 49px; width: 8px; height: 8px; border: 1px solid var(--midnight-blue); border-radius: 50%; background: var(--pure-white); }
.change-steps { position: absolute; inset: 114px 0 auto; display: grid; grid-template-columns: repeat(3,1fr); padding-top: 10px; border-top: 1px solid var(--cool-grey); color: var(--muted-text); }
.change-steps span:nth-child(2) { text-align: center; }
.change-steps span:last-child { text-align: right; }
.scene-decision { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; padding-top: 10px; }
.decision-option { height: 69px; padding: 10px 14px; border: 1px solid var(--cool-grey); border-top: 2px solid var(--midnight-blue); border-radius: 2px; background: var(--pure-white); }
.decision-rule { display: block; width: 70%; height: 2px; margin-top: 9px; background: var(--cool-grey); }
.decision-rule:last-child { width: 45%; margin-top: 5px; }
.decision-criteria { position: absolute; inset: 108px 0 auto; display: grid; grid-template-columns: repeat(3,1fr); padding-top: 9px; border-top: 1px solid var(--cool-grey); color: var(--muted-text); text-align: center; }
.decision-criteria span + span { border-left: 1px solid var(--cool-grey); }
.decision-review { position: absolute; left: 0; top: 107px; width: 33.333%; height: 2px; background: var(--midnight-blue); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .tile-motion-active [data-tile-motion] { animation-duration: 14s; animation-timing-function: cubic-bezier(.4,0,.2,1); animation-iteration-count: infinite; }
  .tile-motion-active .scout-selection { animation-name: scout-review; }
  .tile-motion-active .workflow-record { animation-name: workflow-transfer; }
  .tile-motion-active .change-progress { animation-name: change-journey; }
  .tile-motion-active .decision-review { animation-name: decision-compare; }
  @keyframes scout-review {
    0% { opacity: 0; transform: translateY(0); }
    3%, 7% { opacity: 1; transform: translateY(0); }
    12%, 16% { opacity: 1; transform: translateY(34px); }
    21%, 25% { opacity: 1; transform: translateY(68px); }
    29%, 100% { opacity: 0; transform: translateY(68px); }
  }
  @keyframes workflow-transfer {
    0% { opacity: 0; transform: translateX(0); }
    4% { opacity: 1; transform: translateX(0); }
    12% { opacity: 1; transform: translateX(12%); }
    15% { opacity: 0; transform: translateX(15%); }
    16% { opacity: 0; transform: translateX(35%); }
    19% { opacity: 1; transform: translateX(38%); }
    27% { opacity: 1; transform: translateX(50%); }
    30%, 100% { opacity: 0; transform: translateX(50%); }
  }
  @keyframes change-journey {
    0% { opacity: 0; stroke-dashoffset: .18; }
    4%, 25% { opacity: 1; }
    30%, 100% { opacity: 0; stroke-dashoffset: -1; }
  }
  @keyframes decision-compare {
    0% { opacity: 0; transform: translateX(0); }
    4%, 8% { opacity: 1; transform: translateX(0); }
    13%, 17% { opacity: 1; transform: translateX(100%); }
    22%, 26% { opacity: 1; transform: translateX(200%); }
    30%, 100% { opacity: 0; transform: translateX(200%); }
  }
}
@media (max-width: 374px) {
  .scene-caption { font-size: 12px; }
  .scout-sheet-front { padding: 10px; }

  .workflow-engine { width: 48px; }
  .workflow-document { width: 46px; }
}
.home #leistungen > .wrap > .section-fuss { margin-top: 24px; padding-top: 24px; }
@media (max-width: 1024px) {
  .home main > .section-tight + .section-tight { padding-top: 32px; }
}
@media (max-width: 860px) {
  .home-approach-grid { grid-template-columns: 1fr; gap: 24px; }
  .service-tile { padding: 24px; }
}
@media (max-width: 700px) {
  .service-matrix { grid-template-columns: 1fr; grid-auto-rows: auto; }
}

/* Ueberschrift, die zweizeilig bleiben soll statt die Sektion zu sprengen */
.head-tight { max-width: 22ch; }

/* Weiterfuehrender Link am Fuss einer Sektion. Vorher stand hier ein
   Inline-margin-top von 48px; zusammen mit der 1em-Bodenmarge des Absatzes und
   den 80px Sektionspadding trieb das den Link ~145px unter den Block und liess
   ihn verwaist wirken. Die Haarlinie bindet ihn stattdessen an den Block
   darueber, der Abstand sinkt auf 24px. */
.section-fuss {
  margin: var(--space-md) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--line-light);
  max-width: none;
}

/* Handlungsaufforderung am Ende einer Prosa-Seite. Ersetzt das off-scale
   margin-top:64px, das auf leistungen.html und ueber.html inline stand.
   Die Haarlinie bindet den Knopf an die Seite, statt ihn im Leeren stehen zu
   lassen — dasselbe Mittel wie .section-fuss auf der Startseite, nur mit
   Abschnittsabstand (80/48) statt Blockabstand (24/24). */
.tat {
  margin: var(--space-xl) 0 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line-light);
  max-width: none;
}
/* Spezifitaet: .prose p (0-1-1) schlaegt .tat und .lede (0-1-0). Ohne diese
   beiden Regeln waren max-width:none und das 48px-Margin tote Deklarationen —
   die .tat-Linie endete bei 50ch, der Vorspann stand mit 16px ueber dem
   ersten Abschnittslabel. Gefunden im Pruefflauf am 04.09.2026. */
.prose .tat { max-width: none; }
.prose .lede { margin-bottom: var(--space-lg); }

/* Vorspann einer Prosa-Seite: Serif im Register des Landing-Statements,
   dunkler und groesser als der Fliesstext, klar unter h2.
   Gerechnet bei 390/768/1440 px: 20,0 / 20,9 / 21,6 px — monoton, gegen
   Fliesstext 16,5 px mindestens 21 %, gegen .prose h2 (25,6/25,6/33,6 px)
   mindestens 22 % Abstand (UX.md, Pruefung 1). */
.lede {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.02rem + 0.6vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--midnight-blue);
  max-width: 46ch;
  margin-bottom: var(--space-lg);
}

/* Textlink im gedaempften Absatz. Ohne diese Regel erbt er das Grau von
   .muted und verschwindet fast. */
.muted .text-link { color: var(--midnight-blue); }

/* Zwei-Welten-Konvergenz: grosse Anwendung und kleines Team laufen auf
   einen Punkt zu. Linien, Raum, Typografie — keine Icons, kein SVG.
   Aufbau als Grid: linke Spalte die zwei Welten uebereinander, Mitte die
   zulaufenden Linien, rechts das Ziel. Faellt ohne .in sichtbar aus:
   die Linien starten skaliert, aber Text ist nie verborgen. */
.welten {
  background: var(--midnight-blue);
  color: var(--warm-white);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-medium);
  display: grid;
  grid-template-columns: 5fr 180px 5fr;
  grid-template-areas:
    "kopf  kopf   kopf"
    "oben  linien ziel"
    "unten linien ziel";
  column-gap: var(--space-lg);
  row-gap: var(--space-lg);
  align-items: center;
  margin-top: var(--space-xl);
}
.welten > .label { grid-area: kopf; color: var(--ice-blue); }
.welten .welt:nth-of-type(1) { grid-area: oben; }
.welten .welt:nth-of-type(2) { grid-area: unten; }
.welten .welt-ziel { grid-area: ziel; border-left: 1px solid var(--line-dark); padding-left: var(--space-lg); }
/* Keine eigene Groesse mehr: clamp(1.3rem, 1.7vw, 1.6rem) lag nur 6 Prozent
   unter der h3-Basisregel — zwei Stufen, die niemand als zwei Stufen liest
   (UX.md verlangt mindestens 18 Prozent zwischen Rangstufen). */
.welten h3 { color: var(--warm-white); margin: 0 0 6px; }
.welten p { color: var(--dark-muted); margin: 0; font-size: 0.96rem; max-width: 34ch; }

.welt-linien { grid-area: linien; position: relative; height: 100%; min-height: 170px; }
.welt-linien .wl {
  position: absolute;
  left: 0; right: 10px;
  height: 1px;
  background: rgba(184, 207, 218, 0.4); /* Ice Blue, gedaempft — auf Midnight sichtbar */
  transform-origin: left center;
}
.welt-linien .wl-oben  { top: 25%; transform: rotate(18deg); }
.welt-linien .wl-unten { top: 75%; transform: rotate(-18deg); }
.welt-linien .wl-punkt {
  position: absolute;
  right: 4px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--ice-blue);
}
@media (prefers-reduced-motion: no-preference) {
  .welten.reveal[data-stagger] .wl { transform-origin: left center; }
  .welten.reveal[data-stagger]:not(.in) .wl-oben  { transform: rotate(18deg) scaleX(0); }
  .welten.reveal[data-stagger]:not(.in) .wl-unten { transform: rotate(-18deg) scaleX(0); }
  .welten .wl { transition: transform 900ms var(--ease-premium) 250ms; }
  .welten.reveal[data-stagger]:not(.in) .wl-punkt { opacity: 0; }
  .welten .wl-punkt { transition: opacity 400ms var(--ease-premium) 1000ms; }
}
@media (max-width: 860px) {
  .welten {
    grid-template-columns: 1fr;
    grid-template-areas: "kopf" "oben" "unten" "ziel";
  }
  .welt-linien { display: none; }
  .welten .welt-ziel { border-left: none; border-top: 1px solid var(--line-dark); padding-left: 0; padding-top: var(--space-md); }
}

/* Befund: vier Anteile derselben Grundgesamtheit, von der berichteten Wirkung
   bis zum belegten Ergebnisbeitrag. Reines CSS — keine Icons, kein SVG, keine
   Karte, wie im Zwei-Welten-Block.

   Bewusst OHNE eigene Flaeche, auf Warm White. Direkt darunter folgt die
   Zwei-Welten-Flaeche; zwei dunkle Bloecke hintereinander kippen die
   55/30-Verteilung aus DESIGN.md und lassen die beiden Grafiken gegeneinander
   arbeiten. Haarlinien auf Warm White sind ausserdem das Register, in das ein
   Beleg gehoert. .befund traegt deshalb keine eigenen Box-Eigenschaften mehr
   und ist nur noch Anker fuer die Nachfahren-Selektoren.

   ZUR QUELLE, WICHTIG: Nur Stufe 3 (26%) und Stufe 4 (14%) nennt die
   BCG-Presseinformation vom 22.07.2026 als Prozentwert. Stufe 1 und 2 stehen
   dort als Wortlaut ("nearly nine in ten", "nearly two-thirds"). Deshalb
   tragen diese beiden Zeilen im Text KEINE Prozentzahl und ihr Balken ist
   schraffiert. Die Breiten 87 und 64 sind eine Annaeherung an den Wortlaut,
   keine Messwerte; sie stehen deshalb im Markup als --naeherung, waehrend ein
   erhobener Prozentwert als --wert steht. Die zwei Namen halten die
   Unterscheidung im Quelltext sichtbar. Bei Stufe 3 und 4 ist die
   Balkenbreite mit dem Wert identisch.
   Geprueft am 24.08.2026 gegen drei unabhaengige Wiedergaben der
   Presseinformation (prnewswire, aijourn, Suchindex): 88% und 64% werden dort
   nirgends genannt. Wer den Volltext des Reports vorliegen hat und dort exakte
   Werte findet, ersetzt Wortlaut und Schraffur durch die Ziffern. */
/* --stone waere hier zu hell: gegen Warm White liegt es bei rund 1,6:1 und
   ist als Text nicht lesbar. */
.befund > .label { display: block; color: var(--muted-text); margin-bottom: var(--space-md); }
.befund .stufen { border-top: 1px solid var(--line-light); }

/* Zwei Gruppen: "Wahrnehmung und Pilotbetrieb" (Wortlaut-Werte) und
   "Umsetzung und Steuerung" (erhobene Prozentwerte). Der Abstand zwischen
   den Bloecken sagt, dass hier verschiedene Dinge gemessen wurden (UX.md A);
   die Titel benennen sie. Ohne die Gruppierung lasen sich die vier Zeilen
   als eine Skala — und die Einschaetzung der Befragten stand im selben
   Register wie die Umsetzung.
   Abstaende gemessen: Zeileninhalt zu Zeileninhalt binnen 48px; Inhalt der
   letzten Zeile bis Gruppentitel 24 + 48 + 24 = 96px, Verhaeltnis 1:2
   (UX.md A). Titel zu erster Zeile: die 24px Zeilen-Padding, Binnenspanne.
   Die Titel stehen im Register der leise gesetzten Sans-Ueberschriften
   (wie .strip h3) und NICHT als zweites Label: ein zweiter Label-Rang
   laege 7 % neben dem Kopflabel und unterliefe die 18-%-Regel. */
.stufen-block + .stufen-block { margin-top: var(--space-lg); }
.stufen-titel {
  display: block;
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--midnight-blue);
  padding: var(--space-md) 0 0;
}
/* Wahrnehmungszeilen ordnen sich auch im Text unter; die Umsetzungszeilen
   behalten Graphite und tragen die Aussage. */
.stufe-wort .stufe-text { color: var(--muted-text); }

.stufe {
  display: grid;
  grid-template-columns: minmax(0, 30ch) minmax(0, 1fr) 9rem;
  align-items: center;
  column-gap: var(--space-lg);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--line-light);
}
.stufe-text { color: var(--graphite); font-size: 0.95rem; line-height: 1.45; }

/* Spur und Balken. Die Spur bleibt als leise Grundlinie sichtbar, damit der
   Absturz auf 14% als Rest einer vollen Breite lesbar ist und nicht als
   kurzer Strich im Nichts. */
.stufe-spur { position: relative; height: 8px; background: rgba(8, 29, 51, 0.07); }
.stufe-balken {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--midnight-blue);
  transform-origin: left center;
}
/* Eine Breitenregel fuer die ganze Seite. Der Wert steht im Markup, weil er
   zum Inhalt gehoert und nicht zur Gestaltung: --wert traegt einen erhobenen
   Prozentwert, --naeherung eine Annaeherung an eine Wortangabe. Die zwei
   Namen halten die Unterscheidung im Quelltext sichtbar; bis zum 05.09.2026
   lagen alle vier Breiten als .s1 bis .s4 im Stylesheet, und eine neue
   Befund-Seite haette dort eine fuenfte Klasse gebraucht.
   Fehlt beides, bleibt der Balken auf 0 — eine gezeichnete Laenge ohne Wert
   im Markup gibt es damit nicht. */
.stufe-balken { width: calc(var(--wert, var(--naeherung, 0)) * 1%); }

/* Schraffur = Wortangabe, volle Flaeche = erhobener Prozentwert. Die oberen
   beiden Balken duerfen nicht aussehen wie gemessene Laengen, denn die Quelle
   nennt dort keine Zahl. Dieselbe Unterscheidung wie in der Ferrari-Studie
   beim geplanten Vorlauf. */
.stufe-wort .stufe-balken {
  background: repeating-linear-gradient(
    115deg,
    var(--midnight-blue) 0 3px,
    rgba(8, 29, 51, 0.22) 3px 7px
  );
}

/* Die beiden belegten Zahlen dominieren, die Prosa-Stufen ordnen sich unter. */
.stufe-wert {
  justify-self: end;
  text-align: right;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted-text);
}
.stufe-wert.exakt {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 2.7vw, 2.6rem);
  font-weight: 400;
  line-height: 1;
  color: var(--midnight-blue);
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.stufe-wert.exakt em { font-style: normal; font-size: 0.5em; margin-left: 2px; }

/* Unter der Tabelle steht nur noch die Quellenzeile. Vorher lag dazwischen ein
   Serifen-Fazit in 1,55rem: zusammen mit den 2,6rem der Prozentwerte darueber
   und den 0,78rem der Quelle darunter ergab das drei Schriftgrade auf engem
   Raum, und das Fazit las sich wie eine zweite Ueberschrift. Die Aussage steht
   jetzt im Vorspann ueber der Grafik, wo sie hingehoert. */
.befund-quelle {
  margin: var(--space-lg) 0 0;
  max-width: 74ch;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted-text);
}

@media (prefers-reduced-motion: no-preference) {
  .befund .stufe-balken { transition: transform var(--motion-slow) var(--ease-premium); }
  .befund.reveal:not(.in) .stufe-balken { transform: scaleX(0); }
  /* s1 bis s4 tragen allein die Staffelung, fortlaufend ueber beide Gruppen
     hinweg — nth-child zaehlt in jeder Gruppe neu. Die Vorlage vergibt sie
     mit; eine Grafik ohne diese Klassen laeuft gleichzeitig ein. */
  .befund.reveal.in .stufe.s2 .stufe-balken { transition-delay: 90ms; }
  .befund.reveal.in .stufe.s3 .stufe-balken { transition-delay: 180ms; }
  .befund.reveal.in .stufe.s4 .stufe-balken { transition-delay: 270ms; }
}

/* Mobil bleiben die Balken stehen — anders als die Zwei-Welten-Linien sind sie
   hier der Inhalt und nicht die Dekoration. Beschriftung und Wert ruecken in
   eine Zeile, die Spur darunter auf volle Breite. */
@media (max-width: 860px) {
  .stufe {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "text wert" "spur spur";
    column-gap: var(--space-md);
    row-gap: var(--space-sm);
  }
  .stufe-text { grid-area: text; }
  .stufe-wert { grid-area: wert; align-self: center; }
  .stufe-spur { grid-area: spur; }
}

/* Rubrik Befunde --------------------------------------------------------

   Die Uebersicht ist eine Reihe zwischen Haarlinien, keine Karten und keine
   Bilder (DESIGN.md, Layout). Sie traegt dasselbe Register wie die
   Befund-Grafik auf der Startseite: 1px-Linien auf Warm White.

   Abstaende (UX.md A): innerhalb eines Eintrags Label -> Aussage 8px,
   Aussage -> Einordnung 16px, Einordnung -> Weg 16px; zwischen zwei
   Eintraegen 48px Padding oben und unten. Verhaeltnis Binnen- zu
   Trennabstand damit 1:3.

   Bis sieben Eintraege bleibt es eine Reihe; ab dem achten wird nach
   Themenfeld gruppiert (UX.md C, Gedaechtnisgrenze). */
/* Der Vorspann steht in derselben Sektion wie die Reihe. Als eigene
   .prose-Sektion davor lagen zwischen ihm und der ersten Haarlinie 128 + 80 =
   208px — die Summe zweier Skalenstufen, nach UX.md A ein Fehler. Jetzt
   trennen 48px, und der Vorspann gehoert sichtbar zur Reihe. */
.befund-reihe-vorspann { max-width: 46ch; margin: 0 0 var(--space-lg); }
.befund-reihe {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-light);
}
.befund-eintrag {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--line-light);
}
.befund-eintrag > .label { display: block; color: var(--muted-text); margin-bottom: var(--space-xs); }
/* Die Aussage traegt den Eintrag und steht deshalb in der Serife. Ein eigener
   Rang zwischen .page-head h1 und .prose h2 waere ein vierter Grad auf einer
   Seite, die schon drei fuehrt; die Steigung 2,4vw ist deshalb die von
   .prose h2. Die Zeilenhoehe liegt bei 1,15 statt 1,06, weil diese
   Ueberschrift regelmaessig zwei- und dreizeilig laeuft. */
.befund-eintrag h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-sm);
  max-width: 38ch;
}
.befund-eintrag p { color: var(--graphite); max-width: 50ch; margin: 0 0 var(--space-sm); }
/* 44px Klickflaeche fuer den Textlink (UX.md F): die Zeile traegt sie ueber
   ihre eigene Hoehe, der Link ueber sein Padding. */
/* Spezifitaet: .befund-eintrag p (0-1-1) schlaegt eine Klasse allein, der
   letzte Absatz behielte sonst 16px und der Eintrag saesse unsymmetrisch in
   seinen 48px Padding. */
.befund-eintrag p.befund-eintrag-weg { margin-bottom: 0; }
.befund-eintrag-weg a { display: inline-block; padding: 11px 0; }

/* Blog-Uebersicht: dieselbe Reihe wie die fruehere Befund-Liste.
   Klassen extra, damit der Generator die Befund-Namen nicht mitschleift. */
.blog-reihe-vorspann { max-width: 46ch; margin: 0 0 var(--space-lg); }
.blog-reihe {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-light);
}
.blog-eintrag {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--line-light);
}
.blog-eintrag > .label { display: block; color: var(--muted-text); margin-bottom: var(--space-xs); }
.blog-eintrag h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-sm);
  max-width: 38ch;
}
.blog-eintrag h2 a {
  color: inherit;
  text-decoration: none;
}
.blog-eintrag h2 a:hover { text-decoration: underline; }
.blog-eintrag h2 a:focus-visible {
  outline: 2px solid var(--midnight-blue);
  outline-offset: 4px;
}
.blog-eintrag p { color: var(--graphite); max-width: 50ch; margin: 0 0 var(--space-sm); }
.blog-eintrag p.blog-eintrag-weg { margin-bottom: 0; }
.blog-eintrag-weg a { display: inline-block; padding: 11px 0; }
.page-head .label { display: block; margin-bottom: var(--space-xs); color: var(--graphite); }
.blog-faq {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line-light);
  max-width: 50ch;
}
.blog-faq h2 { margin-top: 0; }
.blog-faq dl { margin: 0; }
.blog-faq .faq-item { margin: 0 0 var(--space-md); }
.blog-faq .faq-item:last-child { margin-bottom: 0; }
.blog-faq dt {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--midnight-blue);
  margin: 0 0 var(--space-xs);
}
.blog-faq dd {
  margin: 0;
  color: var(--graphite);
  max-width: 50ch;
}

/* Rueckweg im Seitenkopf einer Befund-Seite. Er steht ueber der h1, weil der
   Blick dort einsetzt. Klickflaeche gerechnet: 0,86rem = 13,76px mal
   Zeilenhoehe 1,55 = 21,3px, dazu 2 mal 12px Padding = 45,3px, damit ueber den
   44px aus UX.md F. Mit 11px Padding waren es 43,3px. */
.befund-rueckweg { margin: 0 0 var(--space-sm); }
.befund-rueckweg a { display: inline-block; padding: 12px 0; font-size: 0.86rem; }

/* Quellenzeile am Fuss einer Befund-Seite: dasselbe Register wie
   .befund-quelle unter der Grafik, nur im Textfluss. */
.prose .befund-stand {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line-light);
  max-width: 56ch;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted-text);
}

@media (max-width: 860px) {
  .befund-eintrag,
  .blog-eintrag { padding: var(--space-md) 0 var(--space-lg); }
}

.blog-hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
}
.blog-hashtags-inline { margin-top: 0; margin-bottom: var(--space-sm); }
.blog-hashtag {
  color: var(--muted-text);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.page-head .blog-hashtag { color: var(--graphite); }
.blog-quellen {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line-light);
  max-width: 50ch;
}
.blog-quellen h2 { margin-top: 0; }
.blog-quellen ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: quelle;
}
.blog-quellen li {
  counter-increment: quelle;
  padding: var(--space-sm) 0 var(--space-sm) 36px;
  border-bottom: 1px solid var(--line-light);
  position: relative;
}
.blog-quellen li::before {
  content: counter(quelle, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--space-sm);
  color: var(--muted-text);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}
.blog-quellen li:first-child::before { top: 0; }
.blog-quellen li:first-child { padding-top: 0; }
.blog-quellen li:last-child { border-bottom: 0; padding-bottom: 0; }
.blog-quelle,
.blog-quellen cite {
  display: block;
  font-style: normal;
  color: var(--midnight-blue);
  max-width: 50ch;
}
.blog-quelle {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.blog-quelle-meta {
  display: block;
  margin-top: 4px;
  color: var(--muted-text);
  font-size: 0.78rem;
}
.blog-post .prose h2,
.blog-post .prose h3,
.blog-faq h2,
.blog-quellen h2 {
  scroll-margin-top: 96px;
}

.blog-shell { display: grid; gap: var(--space-lg); }
.blog-main { min-width: 0; }

/* Line Sidebar. Interaction inspired by React Bits Line Sidebar;
   colours, type and motion follow DESIGN.md, not the purple demo. */
.line-sidebar {
  --ls-accent: var(--midnight-blue);
  --ls-text: var(--graphite);
  --ls-marker: var(--muted-text);
  --ls-max-shift: 30px;
  --ls-marker-length: 60px;
  --ls-tick-scale: 0.5;
  --ls-item-gap: 20px;
  color: var(--ls-text);
}
.line-sidebar-box { margin: 0; }
.line-sidebar-toggle {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--midnight-blue);
}
.line-sidebar-toggle::-webkit-details-marker { display: none; }
.line-sidebar-nav { margin-top: var(--space-sm); }
.line-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 8px 0 8px calc(var(--ls-marker-length) + 8px);
  display: flex;
  flex-direction: column;
  gap: var(--ls-item-gap);
}
.line-sidebar-list li { position: relative; margin: 0; }
.line-sidebar-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--ls-marker-length) - 8px);
  top: calc(100% + var(--ls-item-gap) / 2);
  width: calc(var(--ls-marker-length) * var(--ls-tick-scale));
  height: 1px;
  background: var(--ls-marker);
  opacity: 0.5;
  transform: translateY(-50%) scaleX(calc(0.7 + var(--effect, 0) * 0.6));
  transform-origin: left center;
  pointer-events: none;
}
.line-sidebar-list a {
  --effect: 0;
  position: relative;
  display: inline-flex;
  align-items: baseline;
  min-height: 44px;
  padding: 8px 0;
  text-decoration: none;
  color: color-mix(in srgb, var(--ls-accent) calc(var(--effect) * 100%), var(--ls-text));
  transform: translateX(calc(var(--effect) * var(--ls-max-shift)));
  font-size: 0.8125rem;
  line-height: 1.35;
}
.line-sidebar-list a::before {
  content: "";
  position: absolute;
  inset: -6px -32px;
}
.line-sidebar-marker {
  position: absolute;
  left: calc(-1 * var(--ls-marker-length) - 8px);
  top: 50%;
  width: var(--ls-marker-length);
  height: 1px;
  background: color-mix(in srgb, var(--ls-accent) calc(var(--effect) * 100%), var(--ls-marker));
  transform: translateY(-50%) scaleX(calc(0.7 + var(--effect) * 0.5));
  transform-origin: left center;
}
.line-sidebar-index {
  margin-right: 0.5rem;
  font-size: 0.7em;
  letter-spacing: 0.06em;
  opacity: calc(0.55 + var(--effect) * 0.45);
}
.line-sidebar.is-index-hidden .line-sidebar-index { display: none; }
.line-sidebar.is-marker-hidden .line-sidebar-marker,
.line-sidebar.is-marker-hidden .line-sidebar-list li:not(:last-child)::after { display: none; }
.line-sidebar-list a[aria-current="location"] { color: var(--ls-accent); }
.line-sidebar-list a:focus-visible {
  outline: 2px solid var(--midnight-blue);
  outline-offset: 4px;
}

.home-blog-title {
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  max-width: 16ch;
  margin: 0 0 var(--space-lg);
}
.home-blog-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-light);
}
.home-blog-item {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--line-light);
}
.home-blog-item h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 38ch;
}
.home-blog-item h3 a {
  display: inline-block;
  padding: 12px 0;
  color: inherit;
  text-decoration: none;
}
.home-blog-item h3 a:hover { text-decoration: underline; }
.home-blog-item h3 a:focus-visible {
  outline: 2px solid var(--midnight-blue);
  outline-offset: 4px;
}
.home-blog-item time {
  display: block;
  color: var(--muted-text);
  font-size: 0.78rem;
}
.home-blog-item p {
  color: var(--graphite);
  max-width: 50ch;
  margin: var(--space-xs) 0 0;
}
.home-blog .section-fuss { margin-top: 24px; padding-top: 24px; }
.home-evidence-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.home-evidence-links .source-link { margin-top: 0; }

@media (min-width: 1100px) {
  .blog-shell {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
  }
  .line-sidebar {
    position: sticky;
    top: 96px;
  }
  .line-sidebar-toggle { display: none; }
  .line-sidebar-box > .line-sidebar-nav { display: block !important; }
  .line-sidebar-nav { margin-top: 0; }
}

@media (max-width: 1099px) {
  .line-sidebar { border-bottom: 1px solid var(--line-light); padding-bottom: var(--space-sm); }
  .line-sidebar-box:not([open]) .line-sidebar-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .line-sidebar-list a,
  .line-sidebar-marker,
  .line-sidebar-list li:not(:last-child)::after { transition: none; }
}

/* Streifen: dieselbe Dreispalter-Mechanik, nur leiser gesetzt */
.strip .capability h3 {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-top: 0;
}

/* Erfahrung */
.experience {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-xl);
  align-items: start;
}
.experience .exp-facts { border-top: 1px solid var(--line-light); }
.exp-fact {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--line-light);
}
.exp-fact .label { display: block; margin-bottom: 6px; color: var(--muted-text); }
.exp-fact p { margin: 0; color: var(--graphite); }

/* ---------- Abschluss (dunkel) ---------- */
.closing { padding: var(--space-2xl) 0 0; }
.closing-inner { padding-bottom: var(--space-xl); border-bottom: 1px solid var(--line-dark); }
.closing-inner h2 { max-width: 18ch; }
.closing-inner p { max-width: 46ch; margin-bottom: var(--space-lg); }

.footer { padding: var(--space-xl) 0 var(--space-lg); font-size: 0.92rem; }
.footer-claim {
  margin: var(--space-sm) 0 0;
  max-width: 30ch;
  color: var(--dark-muted);
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: var(--space-lg);
}
.footer .label { color: var(--ice-blue); margin-bottom: var(--space-sm); display: block; }
.footer a { color: var(--dark-muted); text-decoration: none; transition: color var(--motion-fast) ease; }
.footer a:hover { color: var(--warm-white); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 8px; }
.footer .logo { height: 30px; }
.footer address { font-style: normal; color: var(--dark-muted); line-height: 1.7; }
.dtc-logo { height: 64px; width: auto; margin-top: var(--space-sm); display: block; }
.member-logos { display: flex; align-items: center; gap: 18px; margin-top: var(--space-sm); flex-wrap: wrap; }
.member-logos img { display: block; width: auto; opacity: 0.75; transition: opacity var(--motion-fast) ease; }
.member-logos a:hover img { opacity: 1; }
.member-logos .ml-dtc { height: 48px; }
.member-logos .ml-wide { height: 20px; }
.member-logos--light { margin: 24px 0 8px; }
.member-logos--light img { opacity: 0.85; }
.footer-bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line-dark);
  color: var(--dark-muted);
  font-size: 0.84rem;
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ---------- Unterseiten ---------- */
/* Der Seitenkopf traegt eine leichte Toenung aus Midnight (6 %), damit die
   Unterseiten denselben Auftakt-Gedanken haben wie der Hero der Startseite —
   im hellen Register. Ein dunkler Kopf schiede aus: ueber.html traegt bereits
   zwei dunkle Flaechen (Karte, Fuss), und UX.md B erlaubt hoechstens zwei.
   4 % waren als Flaeche kaum erkennbar und drueckten den Muted-Untertitel
   auf 4,42:1, unter WCAG AA. Deshalb: 6 % (als Flaeche lesbar) und der
   Untertitel in Graphite — gemessen weit ueber 4,5:1 auch auf der Toenung. */
.page-head {
  padding: var(--space-2xl) 0 var(--space-xl);
  background: rgba(8, 29, 51, 0.06);
  border-bottom: 1px solid var(--line-light);
}
/* Eine einzige, monotone Regel. Zuvor standen hier zwei: die Basisregel und
   eine ab 560px abwaerts, die zusammen einen Sprung erzeugten — bei 561px
   ergab die Basisregel 41,6px, bei 560px die Media-Query 48px. Ein Pixel
   schmaler machte die Ueberschrift 15 Prozent groesser.
   Die Obergrenze liegt jetzt bei 3,5rem statt 4,5rem; 72px waren fuer eine
   Unterseite zu laut und sprengten das Verhaeltnis zu .prose h2. */
.page-head h1 {
  font-size: clamp(2rem, 1.1rem + 3.2vw, 3.5rem);
  hyphens: auto;              /* lange Einzelwoerter wie Datenschutzerklaerung */
  overflow-wrap: break-word;
}
.page-head p { color: var(--graphite); font-size: 1.1rem; margin: 0; }

.prose { padding: var(--space-xl) 0 var(--space-2xl); }
/* Beim Blog bilden 24px auf beiden Seiten der Trennlinie gemeinsam den
   48px-Gruppenabstand. So beginnt der Beitrag auch mit Consent-Balken im
   ersten mobilen Sichtfeld. */
.blog-post .page-head { padding: var(--space-xl) 0 var(--space-md); }
.blog-post .prose { padding-top: var(--space-md); }
/* Abstaende der Prosa-Seiten kommen aus der Skala, nicht aus em-Werten der
   jeweiligen Schriftgroesse: em-basierte Margen ergaben je nach Viewport
   51 bis 67 px vor einer h2 und uneinheitliche Luecken um den Vorspann.
   Jetzt: 16 px zwischen Absaetzen einer Gruppe, 80 px vor einem neuen
   Abschnitt — Verhaeltnis 1:5, verlangt ist mindestens 1:2 (UX.md A). */
.prose h2 {
  margin: var(--space-xl) 0 var(--space-sm);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
}
.prose h2:first-child { margin-top: 0; }
/* Nummernlabel ueber den Abschnitten: gibt der Abschnittsfolge ein System.
   Der Basisselektor .label setzt weder display noch Abstand. */
.prose .label { display: block; margin-top: var(--space-xl); margin-bottom: var(--space-xs); color: var(--muted-text); }
.prose .label + h2 { margin-top: 0; }
.prose h3 { margin-top: var(--space-lg); font-size: 1.25rem; }
/* 1ch ist die Ziffernbreite; in Inter entspricht das rund 1,28 Zeichen.
   62ch ergaben gemessen 80 Zeichen je Zeile, das Ziel liegt bei 60 bis 75. */
.prose p, .prose li { color: var(--graphite); max-width: 50ch; margin-bottom: var(--space-sm); }
.prose ul { padding-left: 20px; }
.prose strong { color: var(--midnight-blue); font-weight: 600; }
/* Kaesten innerhalb einer Prosa-Seite (Anfrageformular, Kontaktkarten):
   deren erstes Element ist an den Kasten gebunden, nicht an den
   Abschnittsrhythmus. Ohne den Reset rissen die 80px von .prose .label
   ein Loch ueber der ersten Formularbeschriftung auf kontakt.html. */
.prose h3:first-child, .prose .label:first-child { margin-top: 0; }

/* Mobil ruecken die Abschnitte eine Stufe zusammen; die Rangfolge der
   Abstaende (Absatz 16 px, Abschnitt 48 px) bleibt bei 1:3. */
@media (max-width: 860px) {
  .page-head { padding: var(--space-xl) 0 var(--space-lg); }
  .blog-post .page-head { padding: var(--space-md) 0; }
  .prose h2, .prose .label { margin-top: var(--space-lg); }
  .prose h2:first-child, .prose .label + h2 { margin-top: 0; }
}

/* Kontakt */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line-light);
  border-left: 1px solid var(--line-light);
}
.contact-card {
  border-right: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
  padding: var(--space-lg);
  background: transparent;
}
.contact-card h3 { margin-bottom: 8px; font-size: 1.3rem; }

/* Kontaktseite: Formular links, Karten rechts. Eingabestile bewusst
   deckungsgleich mit der Kundenbereich-Maske (.gate). */
.kontakt-raster {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-xl);
  align-items: start;
}
.anfrage {
  background: var(--pure-white);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-medium);
  padding: var(--space-lg);
}
.anfrage > .label { display: block; margin-bottom: var(--space-md); }
.anfrage .feld { margin-bottom: var(--space-sm); }
.anfrage label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 7px;
  color: var(--midnight-blue);
}
.anfrage input, .anfrage select, .anfrage textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--cool-grey);
  border-radius: var(--radius-small);
  font: inherit;
  font-size: 0.96rem;
  color: var(--graphite);
  background: var(--pure-white);
}
.anfrage textarea { resize: vertical; }
.anfrage input:focus-visible, .anfrage select:focus-visible, .anfrage textarea:focus-visible {
  outline: 2px solid var(--midnight-blue);
  outline-offset: 1px;
}
.anfrage button { margin-top: var(--space-xs); }
.anfrage .hint { margin: var(--space-sm) 0 0; font-size: 0.85rem; color: var(--muted-text); }
.kontakt-seite { display: grid; gap: var(--space-md); }
@media (max-width: 860px) {
  .kontakt-raster { grid-template-columns: 1fr; gap: var(--space-lg); }
}
.contact-card p { color: var(--muted-text); margin-bottom: var(--space-sm); font-size: 0.96rem; }
.contact-card .value {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--midnight-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-fast) ease;
}
.contact-card a.value:hover { border-bottom-color: var(--midnight-blue); }

/* ---------- Kundenbereich / Login ---------- */
.gate-wrap {
  min-height: calc(100dvh - 77px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) 24px;
}
.gate {
  width: 100%;
  max-width: 460px;
  background: var(--pure-white);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-medium);
  padding: var(--space-lg);
}
.gate .logo { height: 30px; margin-bottom: var(--space-md); }
.gate h1 { font-size: 2rem; margin-bottom: 8px; }
.gate > p { color: var(--muted-text); font-size: 0.96rem; margin-bottom: var(--space-md); }
.gate label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 7px;
  color: var(--midnight-blue);
}
.gate input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--cool-grey);
  border-radius: var(--radius-small);
  font: inherit;
  font-size: 1rem;
  color: var(--graphite);
  background: var(--pure-white);
}
.gate input:focus {
  outline: 2px solid var(--midnight-blue);
  outline-offset: 1px;
  border-color: var(--midnight-blue);
}
.gate .error {
  display: none;
  color: #A4372A;
  font-size: 0.9rem;
  margin: 10px 0 0;
}
.gate .error.show { display: block; }
.gate button { width: 100%; margin-top: var(--space-sm); }
.gate .hint { margin-top: var(--space-md); font-size: 0.86rem; color: var(--muted-text); }
.gate .hint a { color: var(--midnight-blue); }

/* ---------- Projektseiten ---------- */
.project-body { background: var(--midnight-blue); min-height: 100dvh; color: var(--warm-white); }
/* Ueberschriften sind global auf --midnight-blue gesetzt. Ohne diese Zeile
   stehen sie hier Midnight auf Midnight und sind unsichtbar. Gleiches Muster
   wie .dark h1, .dark h2, .dark h3 weiter oben. */
.project-body h1, .project-body h2, .project-body h3 { color: var(--warm-white); }
.project-nav {
  position: static;
  background: transparent;
  border-bottom: 1px solid var(--line-dark);
}
.project-nav .nav-inner { height: 72px; }
.project-head { padding: var(--space-xl) 0 var(--space-lg); }
.project-head h1 { font-size: clamp(2.4rem, 4.5vw, 4rem); }
.project-head .label { display: block; margin-bottom: var(--space-sm); color: var(--ice-blue); }
.project-head p { color: var(--dark-muted); font-size: 1.05rem; }
.protos { padding: 0 0 var(--space-2xl); }
.proto {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-medium);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-sm);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: center;
}
.proto h3 { margin-bottom: 4px; font-size: 1.3rem; }
.proto p { color: var(--dark-muted); margin: 0; font-size: 0.95rem; }
.proto .status {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark-muted);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-small);
  padding: 8px 14px;
  white-space: nowrap;
  text-decoration: none;
}
.proto .status.live { color: var(--ice-blue); border-color: var(--ice-blue); }

/* Eingebetteter Prototyp (Weg B in projekte/ferrari.html) */
.proto-embed {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-medium);
  overflow: hidden;
  margin-top: var(--space-lg);
}
.proto-embed-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--line-dark);
  flex-wrap: wrap;
}
.proto-embed-kopf h3 { margin: 0; font-size: 1.2rem; color: var(--warm-white); }
.proto-embed iframe {
  display: block;
  width: 100%;
  height: min(72dvh, 760px);
  border: 0;
  background: var(--warm-white);
}
.project-foot {
  border-top: 1px solid var(--line-dark);
  padding: var(--space-md) 0 var(--space-lg);
  color: var(--dark-muted);
  font-size: 0.88rem;
}
.project-foot a { color: var(--dark-muted); }

/* ---------- Bewegung ----------
   Grundsatz aus DESIGN.md: langsam, subtil, zweckgebunden. Timing 180/350/700ms,
   Kurve cubic-bezier(0.22, 1, 0.36, 1). Alles haengt am IntersectionObserver in
   js/site.js, der .in auf .reveal setzt — kein zusaetzliches JavaScript.
   Der gesamte Block steht unter prefers-reduced-motion: no-preference. */
@media (prefers-reduced-motion: no-preference) {

  /* 1. Block-Reveal (Grundfall) */
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--motion-slow) var(--ease-premium),
                transform var(--motion-slow) var(--ease-premium);
  }
  .reveal.in { opacity: 1; transform: none; }

  /* 2. Gestaffelte Kinder statt Blockeinblendung.
     Der Container selbst bleibt ruhig — sonst laeuft die Bewegung doppelt. */
  .reveal[data-stagger] { opacity: 1; transform: none; transition: none; }
  .reveal[data-stagger] > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--motion-slow) var(--ease-premium),
                transform var(--motion-slow) var(--ease-premium);
  }
  .reveal[data-stagger].in > * { opacity: 1; transform: none; }
  .reveal[data-stagger].in > *:nth-child(2) { transition-delay: 90ms; }
  .reveal[data-stagger].in > *:nth-child(3) { transition-delay: 180ms; }
  .reveal[data-stagger].in > *:nth-child(4) { transition-delay: 270ms; }
  .reveal[data-stagger].in > *:nth-child(5) { transition-delay: 360ms; }

  /* 3. Leitsaetze: Blende zieht auf, Text steigt leicht nach.
     ACHTUNG, teuer gelernt: clip-path veraendert die Schnittflaeche, die der
     IntersectionObserver auswertet. Ein auf null geclipptes Element meldet
     nie eine Ueberschneidung, bekommt nie .in — und bleibt fuer immer
     unsichtbar. Deshalb traegt der CONTAINER das .reveal und wird beobachtet,
     geclippt wird nur das Kind darin.
     Die negativen Insets geben Ober- und Unterlaengen Luft, sonst schneidet
     der clip-path Buchstaben an. */
  .reveal[data-text] { opacity: 1; transform: none; transition: none; }
  .reveal[data-text] .reveal-text {
    clip-path: inset(-0.15em 0 100% 0);
    transform: translateY(14px);
    transition: clip-path 900ms var(--ease-premium),
                transform 900ms var(--ease-premium);
  }
  .reveal[data-text].in .reveal-text {
    clip-path: inset(-0.15em 0 -0.25em 0);
    transform: none;
  }
  .reveal[data-text] .reveal-fade {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--motion-slow) var(--ease-premium),
                transform var(--motion-slow) var(--ease-premium);
  }
  .reveal[data-text].in .reveal-fade {
    opacity: 1;
    transform: none;
    transition-delay: 160ms;
  }

  /* 4. Navigation schrumpft nach dem Scrollen */
  .nav-inner { transition: height var(--motion-standard) var(--ease-premium); }
  .nav.scrolled .nav-inner { height: 64px; }
}

/* Bewusst NICHT umgesetzt: die Trennlinien scroll-getrieben zeichnen.
   Der Ansatz waere gewesen, border-top transparent zu schalten und die Linie
   als Pseudo-Element per animation-timeline: view() einlaufen zu lassen.
   Der Fehlerfall dabei ist fatal fuer ein dekoratives Element: laeuft die
   Animation nicht an, steht das Pseudo-Element auf scaleX(0) — und es gibt
   ueberhaupt keine Linie mehr. Eine Haarlinie ist dieses Risiko nicht wert.
   Die Linien stehen deshalb statisch, wie bisher. */

/* ---------- Cookie-Einwilligung ---------- */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--midnight-blue);
  border-top: 1px solid var(--line-dark);
  color: var(--dark-muted);
  box-shadow: 0 -12px 40px rgba(8, 29, 51, 0.25);
}
.consent-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.consent p { margin: 0; max-width: 64ch; font-size: 0.92rem; }
.consent a { color: var(--warm-white); }
.consent-actions { display: flex; align-items: center; gap: var(--space-sm); }
.consent-decline {
  background: none;
  border: 1px solid var(--line-dark);
  color: var(--dark-muted);
  font: inherit;
  font-size: 0.92rem;
  padding: 12px 20px;
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.consent-decline:hover { color: var(--warm-white); border-color: var(--warm-white); }
@media (max-width: 860px) {
  .consent-inner { padding: 16px 22px; }
}

/* ---------- Responsiv ---------- */
@media (max-width: 1024px) {
  .wrap { padding: 0 40px; }
  .section { padding: var(--space-xl) 0; }
  .section-tight { padding: var(--space-lg) 0; }
}
@media (max-width: 860px) {
  .wrap { padding: 0 22px; }
  .capabilities { grid-template-columns: 1fr; border-top: none; }
  .capability {
    border-right: none;
    border-top: 1px solid var(--line-light);
    padding: var(--space-md) 0;
  }
  .capability + .capability { padding-left: 0; }
  .experience { grid-template-columns: 1fr; gap: var(--space-lg); }
  .experience { gap: var(--space-lg); }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero { padding-top: 120px; }
  .welten { padding: var(--space-md) var(--space-md); }
  /* Navigation bleibt vollstaendig sichtbar — kompakt statt versteckt.
     Das Monogramm-Logo schafft den Platz dafuer. */
  .nav-links { gap: 14px; font-size: 0.85rem; }
  /* Klickflaechen nach UX.md F: mindestens 44px hoch. Die Nav-Links standen
     bei 20px (kein Padding), der Kontakt-Knopf bei 38px. Vertikales Padding
     hebt die Trefferflaeche, ohne das Schriftbild zu aendern; die Leiste ist
     64-76px hoch und traegt das. Gemessen: Links 46px, Knopf 46px. */
  .nav-links a { padding: 13px 0; }
  .nav-links .btn-small { padding: 12px 12px; font-size: 0.8rem; }
  /* Fusslinks: 18px hohe Ziele bei 8px Listenabstand. inline-block plus
     11px Padding ergibt 45px Trefferhoehe; der 8px-Listenabstand bleibt als
     Abstand zwischen den Zielen erhalten (UX.md F: >= 8px). */
  .footer ul a { display: inline-block; padding: 11px 0; }
  /* Textlinks im Fliesstext und die beiden Hauptaktionen (Mailadresse auf
     /kontakt, Kontakt aufnehmen auf /kunden): unsichtbare Trefferflaechen-
     Erweiterung per Pseudo-Element, damit weder Zeilenrhythmus noch
     Schriftbild wachsen. 16px + 2x14px = 44px, 23px + 2x11px = 45px. */
  .contact-card .value, .hint a { position: relative; }
  .contact-card .value::after, .hint a::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -14px; bottom: -14px;
  }
  .text-link { position: relative; }
  .text-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -11px; bottom: -11px;
  }
  /* Kompakte Navigation: nur Monogramm. display waehlt das Paar — das
     Monogramm ist schmaler und diese Breite muss das Layout kennen —,
     die Kreuzblende innerhalb des Paares laeuft wie am Desktop ueber opacity. */
  .nav:not(.project-nav) .logo.logo-on-dark,
  .nav:not(.project-nav) .logo.logo-on-light,
  .nav.nav-solid .logo.logo-on-light { display: none; }
  .nav:not(.nav-solid) .logo-mono.logo-on-dark { display: block; opacity: 1; }
  .nav:not(.nav-solid) .logo-mono.logo-on-light { display: block; opacity: 0; }
  .nav.scrolled .logo-mono.logo-on-dark { opacity: 0; }
  .nav.scrolled .logo-mono.logo-on-light { opacity: 1; }
  .nav.nav-solid .logo-mono.logo-on-light { display: block; }
  .nav.nav-solid .logo-mono.logo-on-dark { display: none; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .proto { grid-template-columns: 1fr; }
  .hero-ctas { gap: var(--space-md); }
  /* Nav muss in 360px passen. Der Kundenbereich-Eintrag wechselt auf die
     Kurzform "Login", "Über AP" auf "Über", der Rest rueckt zusammen. Gap 8px
     ist das Minimum aus UX.md F. Der Eintrag stand einmal auf display:none —
     das Ziel, auf das die Startseite hinfuehrt, war auf dem Telefon nicht in
     der Navigation; deshalb weicht er erst unter 360px. Die Messung mit fuenf
     Eintraegen steht im Block darunter. */
  .nav-links a[href="/kunden"] .nav-voll,
  .nav-links a[href="/ueber"] .nav-voll { display: none; }
  .nav-links a[href="/kunden"] .nav-kurz,
  .nav-links a[href="/ueber"] .nav-kurz { display: inline; }
  .nav-links { gap: 8px; font-size: 0.75rem; }
  .hero-rule { margin-top: var(--space-xl); }
}
/* Der fuenfte Eintrag "Befunde" kostet rund 51px und sprengte die Rechnung
   oben. Gemessen am 05.09.2026 im Browser, Nav-Hoehe als Umbruchanzeige
   (46px = eine Zeile, 63px und mehr = umgebrochen):

   | Breite | 4 Eintraege, 0,8rem | 5 Eintraege, 0,8rem | 5, 0,75rem + "Über" |
   |--------|---------------------|---------------------|---------------------|
   | 390 px | 46, rechts 368      | 66, umgebrochen     | 46, rechts 368      |
   | 375 px | 46                  | 66                  | 46, rechts 362      |
   | 360 px | 46, rechts 338      | 66                  | 46, rechts 362 ✗    |

   Zwei Schritte halten die Leiste damit einzeilig: "Über AP" bekommt wie der
   Kundenbereich eine Kurzform, und der Grad faellt von 0,8 auf 0,75rem, den
   Grad der Labels aus DESIGN.md. Bei 390px steht die Leiste damit ohne
   Umbruch, gemessen mit 368px Inhalt.

   Unter 375px reicht der Platz auch dafuer nicht. Dort faellt der Grad auf
   0,73rem — gemessen bei 360px: 338px Inhalt bei 338px verfuegbarer Breite,
   alle fuenf Eintraege stehen. 0,73rem liegt unter der kleinsten Stufe aus
   DESIGN.md (0,75rem beim Label); der Wert gilt allein fuer die Leiste
   unterhalb 375px und ist gemessen, nicht geschaetzt.

   Historischer Stand mit fuenf Eintraegen: unter 360px wich der Kundenbereich.
   Seit 07.09.2026 waren es vier Eintraege. Der Blog ist der fuenfte; "Blog"
   ist kuerzer als das fruehere "Befunde" (51px). Die gemessenen Stufen
   0,75rem / 0,73rem bleiben die Absicherung. */
@media (max-width: 374px) {
  .nav-links { font-size: 0.73rem; }
}
/* Fuenf Navigationseintraege: gemessen am 05.09.2026 mit "Befunde";
   "Blog" ist kuerzer. Kundenbereich bleibt sichtbar. */

/* ---------------------------------------------------------------------------
   Reifepunkt-Sektion mit Weltkarte (ueber.html)

   Die Karte ist Hintergrund, kein Inhalt: Landmasse in Ice Blue bei 30 %
   Deckkraft, damit sie als Textur wirkt und nie mit dem Fliesstext konkurriert.
   Sichtbar bleibt genau ein Element — die Verbindung zwischen Bay Area und
   Hamburg, als Buendel aus fuenf Haarlinien nach dem Vorbild der Hero-Baender
   (Feinheit aus Vielzahl, nicht aus Strichstaerke).

   Der Schleier ist bewusst auf die Textspalte begrenzt. Eine Vignette ueber der
   ganzen Flaeche hatte in der Vorstufe mit dem Text auch die Landmasse
   ausgeloescht.

   Bewegung: .k-haar zeichnet sich versetzt bei .in, die Ortsmarken blenden nach,
   der Lichtpunkt wandert hin und zurueck. Ausloeser ist derselbe
   IntersectionObserver in js/site.js, der .in auf .reveal setzt.
   --------------------------------------------------------------------------- */
/* Schaubild auf Midnight, ueber die volle Fensterbreite aus der Textspalte
   ausgebrochen. Ice Blue erreicht auf Midnight 10,5:1 und auf Warm White nur
   1,47:1 — die Karte braucht den dunklen Grund, um ueberhaupt sichtbar zu sein.
   Damit die Flaeche nicht als abgetrennte Sektion liest, traegt sie
   ausschliesslich die Abbildung und ihre Bildunterschrift, keinen Fliesstext.
   Ein ganzseitiges Schaubild unterbricht den Lesefluss nicht, es belegt ihn. */
/* Die Figur steht als direktes Kind von main ausserhalb der Textspalte und
   ist damit von selbst vollbreit. Die fruehere Konstruktion
   margin: calc(50% - 50vw) mit width: 100vw schloss die Scrollbalkenbreite
   ein und erzeugte unter Windows und Linux horizontalen Ueberlauf auf der
   ganzen Seite; 100vw misst inklusive Scrollbalken, 100% ohne.
   Die flankierenden Prosa-Sektionen geben ihr Padding an der Naht ab, die
   Figur-Margin von 128px traegt den Abstand allein — der Rhythmus zur
   vorigen Fassung bleibt identisch. */
.karte-figur {
  margin: var(--space-2xl) 0;
  background: var(--midnight-blue);
  padding: var(--space-xl) var(--space-md);
}
.prose-vor-figur { padding-bottom: 0; }
.prose-nach-figur { padding-top: 0; }
.karte-figur > svg { width: 100%; max-width: 78rem; margin: 0 auto; height: auto; display: block; }
.karte-figur figcaption {
  max-width: 78rem;
  margin: var(--space-md) auto 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line-dark);
  color: var(--dark-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

@media (prefers-reduced-motion: no-preference) {
  .karte-figur.reveal .k-haar {
    stroke-dasharray: 100; stroke-dashoffset: 100;
    transition: stroke-dashoffset 1400ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--v) * 110ms);
  }
  .karte-figur.reveal.in .k-haar { stroke-dashoffset: 0; }
  .karte-figur.reveal .k-marken,
  .karte-figur.reveal .k-orte { opacity: 0; transition: opacity 700ms ease 1000ms; }
  .karte-figur.reveal.in .k-marken,
  .karte-figur.reveal.in .k-orte { opacity: 1; }

  /* Wanderndes Licht aus drei Lagen. Halo und Hof sind gegen den Kern versetzt,
     damit ihre Mitten zusammenfallen: Versatz = (eigene Laenge - Kernlaenge)/2.
     Dadurch bleibt das Licht in beide Laufrichtungen symmetrisch. */
  .karte-figur.reveal .k-licht-kern,
  .karte-figur.reveal .k-licht-halo,
  .karte-figur.reveal .k-licht-hof { opacity: 0; }
  .karte-figur.reveal.in .k-licht-kern { opacity: 1; animation: karte-licht-kern 11s cubic-bezier(0.45, 0, 0.55, 1) 1.9s infinite; }
  .karte-figur.reveal.in .k-licht-halo { opacity: 1; animation: karte-licht-halo 11s cubic-bezier(0.45, 0, 0.55, 1) 1.9s infinite; }
  .karte-figur.reveal.in .k-licht-hof  { opacity: 1; animation: karte-licht-hof  11s cubic-bezier(0.45, 0, 0.55, 1) 1.9s infinite; }
  @keyframes karte-licht-kern { 0% { stroke-dashoffset: 100; }    38%, 50% { stroke-dashoffset: 0; }    88%, 100% { stroke-dashoffset: 100; } }
  @keyframes karte-licht-halo { 0% { stroke-dashoffset: 101.35; } 38%, 50% { stroke-dashoffset: 1.35; } 88%, 100% { stroke-dashoffset: 101.35; } }
  @keyframes karte-licht-hof  { 0% { stroke-dashoffset: 103.6; }  38%, 50% { stroke-dashoffset: 3.6; }  88%, 100% { stroke-dashoffset: 103.6; } }
}
/* Ohne .reveal-Zustand und bei reduzierter Bewegung steht die Karte
   vollstaendig gezeichnet — der Fehlerfall ist sichtbar, nicht leer. */

/* ---------- Über AP: freigegebener Frontier-Entwurf ---------- */
.about{line-height:1.65}
.about h3{font-family:var(--sans)}
.about img{display:block;max-width:100%}
.about a{color:inherit;text-underline-offset:5px}
.about a:focus-visible{outline:2px solid var(--midnight-blue);outline-offset:5px}
.about h1,.about h2,.about h3,.about p,.about figure{margin:0}
.about h1,.about h2{font-family:Newsreader,Georgia,serif;font-weight:400;color:var(--midnight-blue)}
.about h1{font-size:clamp(2rem,1.1rem + 3.2vw,3.5rem);line-height:1.12;letter-spacing:-.035em}
.about h2{font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.16;letter-spacing:-.025em}
.about h3{font-size:20px;line-height:1.35;font-weight:500;color:var(--midnight-blue);letter-spacing:-.025em}
.about p{max-width:50ch}
.about p+p{margin-top:24px}
.about .wrap{width:100%;max-width:1400px;padding-inline:80px;margin-inline:auto}
.about .intro{padding-top:80px;padding-bottom:80px}
.about .eyebrow{font-size:12px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-text);margin-bottom:24px}
.about .intro-lead{font-size:clamp(1.125rem,1.5vw,1.375rem);line-height:1.55;color:var(--muted-text);margin-top:24px;max-width:50ch}
.about .map-panel{background:var(--midnight-blue);padding:48px 0 24px;color:var(--warm-white)}
.about .map-stage{position:relative;max-width:1120px;margin-inline:auto}
.about .map{width:100%;height:auto;aspect-ratio:230/64}
.about .map-place{position:absolute;color:var(--warm-white);font-size:13px;font-weight:500;letter-spacing:.04em;line-height:1.5;white-space:nowrap}
.about .map-sf{left:7.64%;top:70%}
.about .map-ny{left:28.69%;top:65%}
.about .map-de{left:78%;transform:translateY(-50%);font-size:12px;color:var(--dark-muted)}
.about .map-hh{top:18.75%}
.about .map-berlin{top:39.06%}
.about .map-munich{top:59.38%}
.about figcaption{max-width:1120px;margin:24px auto 0;border-top:1px solid var(--line-dark);padding-top:16px;font-size:13px;line-height:1.5;color:var(--dark-muted)}
.about .places{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-top:80px;padding-bottom:128px}
.about .place h2{margin-bottom:16px}
.about .place h3{margin-bottom:24px}
.about .section{padding-top:128px;padding-bottom:128px;position:relative}
.about .section::before{content:'';position:absolute;top:0;left:80px;right:80px;height:1px;background:var(--line-light)}
.about .section-heading{margin-bottom:48px}
.about .section-lead{color:var(--muted-text);margin-top:24px}
.about .scouting-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.about .text-link{display:inline-flex;align-items:center;gap:24px;min-height:44px;margin-top:24px;font-size:14px;font-weight:500;color:var(--midnight-blue);text-decoration:underline}
.about .text-link span{font-size:19px}
.about .expertise-column h3{margin-bottom:24px}
.about .applications-detail{margin-top:80px}
.about .applications-detail>h3{margin-bottom:24px}
.about .application-examples{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.about .application-examples p+p{margin-top:0}
.about .role{font-size:14px;color:var(--muted-text);margin-top:8px}
.about .team-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.about .founder-note{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-top:80px}
.about .founder-note p:not(.role){font-size:14px;color:var(--muted-text)}
.about .closing{background:var(--midnight-blue);color:var(--warm-white);padding-top:128px}
.about .closing h2{color:var(--warm-white)}
.about .closing-content{padding-bottom:80px}
.about .closing-content p{margin-top:24px;color:var(--dark-muted)}
.about .button{display:inline-flex;align-items:center;justify-content:space-between;gap:48px;min-height:52px;margin-top:48px;padding:16px 24px;border-radius:2px;background:var(--warm-white);color:var(--midnight-blue);text-decoration:none;font-size:14px;font-weight:500;line-height:1.4;transition:background 180ms var(--ease-premium),transform 180ms var(--ease-premium)}
.about .button:hover{background:#fff}
.about .button:active{transform:translateY(1px)}
.about .closing a:focus-visible{outline-color:var(--warm-white)}
/* Content is visible by default. Only a working observer opts elements into ap-reveals. */
@media(prefers-reduced-motion:no-preference){
.about .ap-enter{animation:ap-enter 700ms var(--ease-premium) both}
.about h1.ap-enter{animation-delay:90ms}
.about .intro-lead.ap-enter{animation-delay:180ms}
.about .ap-reveal.is-waiting{opacity:0;transform:translateY(16px)}
.about .ap-reveal{transition:opacity 700ms var(--ease-premium),transform 700ms var(--ease-premium)}
  @keyframes ap-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}
@media(min-width:769px) and (max-width:1100px){
.about .wrap{padding-inline:48px}
.about .section::before{left:48px;right:48px}
.about .places,.about .scouting-grid,.about .founder-note,.about .team-grid,.about .application-examples{gap:48px}
}
@media(max-width:768px){
.about .wrap{padding-inline:24px}
.about .intro{padding-top:80px;padding-bottom:48px}
.about .intro h1{line-height:1.14}
.about .intro-lead{max-width:42ch}
.about .map-panel{padding-top:24px}
.about .map-place{font-size:11px;letter-spacing:0}
.about .map-sf{left:7.64%;top:72%}
.about .map-ny{left:28.69%;top:28%}
.about .map-de{font-size:11px;line-height:1.2}
.about figcaption{font-size:12px;max-width:50ch}
.about .places,.about .scouting-grid,.about .founder-note,.about .team-grid,.about .application-examples{grid-template-columns:1fr;gap:48px}
.about .applications-detail{margin-top:48px}
.about .application-examples{gap:24px}
.about .places{padding-top:48px;padding-bottom:80px}
.about .section{padding-top:80px;padding-bottom:80px}
.about .section::before{left:24px;right:24px}
.about .founder-note{padding-top:48px;gap:24px}
.about .closing{padding-top:80px}
.about .closing-content{padding-bottom:80px}
}
@media(prefers-reduced-motion:reduce){.about *,.about *::before,.about *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.about .ap-reveal.is-waiting{opacity:1;transform:none}}

/* .nav-solid steht im Dokumentfluss; der Einstieg benötigt keinen Ausgleich. */
.about .text-link{background:none}
.about-skip{position:fixed;top:8px;left:16px;z-index:30;padding:8px 16px;background:var(--warm-white);clip-path:inset(50%);white-space:nowrap}
.about-skip:focus{clip-path:none}
.about-page .footer>.wrap{border-top:1px solid var(--line-dark);padding-top:48px}
.about-page .footer{padding-top:0}

/* ---------- Leistungsfelder: Redaktion + eigene Studiendiagramme ---------- */
/* Scoped to services; approved About page typography and illumination unchanged. */
.services { --study-line: var(--line-light); --study-muted: var(--muted-text); }
.services .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.services .wrap { padding-inline: 64px; }
.services h1 { font-size: clamp(2rem, 1.1rem + 3.2vw, 3.5rem); line-height: 1.08; max-width: 38ch; margin-bottom: 24px; }
.services h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.12; }
.services h3 { font-size: 20px; line-height: 1.3; }
.services p { max-width: 50ch; }
.services .service-kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--study-muted); margin: 0 0 24px; max-width: none; }
.services-intro { padding: 80px 0 0; }
.services-hero-copy { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 80px; align-items: end; margin: 24px 0 80px; }
.services .services-hero-copy h1 { font-size: clamp(2.5rem, 4.8vw, 4.5rem); line-height: 1.06; letter-spacing: -.035em; max-width: 22ch; margin: 0; text-wrap: balance; }
.services-hero-copy h1 em { font-weight: 400; }
.services .services-hero-summary p { margin: 0; max-width: 38ch; font-size: 17px; line-height: 1.55; }
.services .services-hero-summary .services-hero-proof { margin-top: 24px; font-size: 13px; line-height: 1.6; color: var(--muted-text); }
.service-section { padding: 128px 0; scroll-margin-top: 100px; }
.service-scouting { border-bottom: 1px solid var(--line-light); }
.service-heading { margin-bottom: 48px; }
.service-heading h2 { margin-bottom: 24px; }
.service-heading > p:last-child { margin: 0; }
.service-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.service-grid:not(.scouting-layout) > .service-copy { border-top: 1px solid var(--study-line); padding-top: 24px; }
.service-copy > p { margin-bottom: 24px; }
.service-copy > h3 { margin-top: 48px; margin-bottom: 16px; }
.service-delivery { margin: 48px 0 0; }
.service-sparring-delivery .service-delivery { margin-top: 0; }
.service-sparring-delivery .service-delivery > div:first-child { border-top: 0; padding-top: 0; }
.service-delivery > div { padding: 24px 0; border-top: 1px solid var(--study-line); }
.service-delivery > div:last-child { padding-bottom: 0; }
.service-delivery dt { font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.service-delivery dd { margin: 0; color: var(--study-muted); max-width: 50ch; }
.service-inline-link, .study-source { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; padding-block: 8px; text-decoration: underline; text-underline-offset: 5px; }
.service-inline-link { margin-top: 16px; }
.services .study { margin: 0; padding-top: 24px; border-top: 1px solid var(--study-line); }
.study-heading .service-kicker { margin-bottom: 16px; }
.study-heading h3 { margin-bottom: 16px; }
.study-heading > p:last-child { color: var(--study-muted); font-size: 14px; margin-bottom: 0; }
.services .chart { margin-top: 24px; }
.chart-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 16px; margin-bottom: 24px; }
.chart-label { font-size: 14px; align-self: center; }
.chart-number { font-variant-numeric: tabular-nums; font-size: 20px; line-height: 1.3; white-space: nowrap; }
.chart-track, .chart-diverging-track { grid-column: 1 / -1; height: 12px; }
.chart-track { background: var(--study-line); }
.chart-bar { display: block; width: var(--wert); height: 100%; background: var(--midnight-blue); transform-origin: left; }
.chart-baseline { background: var(--muted-text); }
.chart-axis { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--study-muted); border-top: 1px solid var(--study-line); padding-top: 8px; }
.chart-axis > span:nth-child(2) { text-align: center; }
.chart-diverging-track { display: grid; grid-template-columns: 1fr 1fr; background: var(--study-line); }
.chart-half { height: 12px; min-width: 0; position: relative; }
.chart-half:first-child::after { content: ""; position: absolute; right: 0; top: -4px; height: 20px; border-right: 1px solid var(--dark-muted); }
.chart-negative .chart-bar { margin-left: auto; transform-origin: right; }
.services .study-result { margin: 24px 0; padding-bottom: 24px; border-bottom: 1px solid var(--study-line); font-size: 16.5px; }
.study-result strong { font-weight: 500; }
.services figcaption p { font-size: 13px; line-height: 1.65; color: var(--study-muted); margin-bottom: 16px; max-width: 50ch; }
.study-source { font-size: 13px; }
.service-dark { background: var(--midnight-blue); color: var(--warm-white); --study-line: var(--line-dark); --study-muted: var(--dark-muted); }
.services .service-dark h2, .services .service-dark h3, .services .service-dark a { color: var(--warm-white); }
.services .service-dark .btn-primary-inverse { color: var(--midnight-blue); }
.service-dark .chart-bar { background: var(--ice-blue); }
.services-closing { padding: 80px 0; }
.services-closing h2 { margin-bottom: 24px; }
.services-closing p:not(.service-kicker) { margin-bottom: 48px; }
.services a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
@media (max-width: 1100px) {
  .services .wrap { padding-inline: 48px; }
  .service-grid, .services-hero-copy { gap: 48px; }
}
@media (max-width: 860px) {
  .services .wrap { padding-inline: 24px; max-width: 648px; }
  .services-hero-copy, .service-grid { grid-template-columns: 1fr; }
  .services-hero-copy { gap: 24px; margin: 24px 0 48px; }
  .services-intro { padding-top: 48px; }
  .services .services-hero-summary p { font-size: 15px; }
  .service-section { padding-block: 80px; }
  .service-grid { gap: 24px; }
  .service-grid:not(.scouting-layout) > .service-copy { border-top: 0; padding-top: 0; }
  .services .study { max-width: 600px; }
  .services .service-copy { max-width: 600px; }
}
@media (prefers-reduced-motion: reduce) {
  .services .chart-bar { transform: none !important; }
}

/* Standortatlas und technische Abläufe: kuratierte Beispiele, keine Dichtekarte. */
.services .scouting-layout { grid-template-columns: minmax(0, 1fr); gap: 80px; }
.services .scouting-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; max-width: none; }
.scouting-copy h3 { margin: 48px 0 16px; }
.scouting-copy .service-delivery { margin-top: 0; }
.services .ecosystem-atlas { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; }
.ecosystem-atlas > .study-heading, .ecosystem-atlas > .atlas-regions { grid-column: 1 / -1; }
.ecosystem-atlas > figcaption { grid-column: 1 / -1; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--study-line); border-bottom: 0; max-width: none; }
.ecosystem-atlas > figcaption p:last-child { margin-bottom: 0; }
.ecosystem-atlas .study-heading h3 { font-size: 20px; line-height: 1.3; }
.atlas-regions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; margin-top: 48px; }
.services h4 { font-family: Inter, sans-serif; font-size: 16.5px; font-weight: 500; line-height: 1.4; letter-spacing: 0; margin: 0; color: inherit; }
.atlas-region-note { font-size: 14px; color: var(--study-muted); margin: 8px 0 0; }
.ecosystem-map { display: block; width: 100%; height: auto; max-width: 360px; margin: 24px 0; overflow: visible; }
.map-water { fill: var(--cool-grey); opacity: .55; }
.map-water-label, .map-region-label, .map-orientation { font: 12px Inter, sans-serif; fill: var(--muted-text); letter-spacing: .04em; }
.map-water-label { fill: var(--graphite); }
.map-leader { fill: none; stroke: var(--muted-text); stroke-width: 1; }
.map-site circle { fill: var(--midnight-blue); }
.map-site text { font: 12px Inter, sans-serif; fill: var(--warm-white); text-anchor: middle; }
.map-site .map-city { font-size: 17px; fill: var(--midnight-blue); text-anchor: start; }
.map-site .map-detail { font-size: 14px; fill: var(--muted-text); text-anchor: start; }
.atlas-sources { display: flex; flex-wrap: wrap; align-items: start; gap: 8px 24px; border-top: 1px solid var(--study-line); padding: 24px 0; }
.evidence-sources { display: flex; flex-wrap: wrap; align-items: start; gap: 8px 24px; }
.evidence-flow { list-style: none; padding: 0; margin: 24px 0; }
.evidence-flow li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 24px; }
.evidence-flow li + li { margin-top: 24px; }
.evidence-flow li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 32px; bottom: -16px; border-left: 1px solid var(--study-line); }
.flow-index { color: var(--study-muted); font-size: 12px; padding-top: 4px; font-variant-numeric: tabular-nums; }
.evidence-flow h4 { margin-bottom: 8px; }
.evidence-flow p { font-size: 14px; color: var(--study-muted); margin: 0; }
.evidence-boundary { padding: 24px 0; border-block: 1px solid var(--study-line); }
.evidence-boundary h4 { margin-bottom: 16px; }
.evidence-boundary p { font-size: 14px; margin: 0; }
@media (max-width: 1100px) {
  .services .scouting-copy, .atlas-regions { gap: 48px; }
  .services .ecosystem-atlas { column-gap: 48px; }
}
@media (max-width: 860px) {
  .services .scouting-layout { gap: 24px; }
  .services .scouting-copy, .atlas-regions { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .ecosystem-map { max-width: 320px; }
  .services .ecosystem-atlas { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .services .evidence-mark { transform: none !important; opacity: 1 !important; }
}

/* Leistungsrevision: feste Beschriftungsspalten und kompaktere Lesetypografie. */
.services { font-size: 15px; line-height: 1.6; }
.services h3, .ecosystem-atlas .study-heading h3 { font-size: 18px; }
.services h4 { font-size: 15px; }
.services .study-result { font-size: 15px; }
.services .service-kicker { font-size: 11px; }
.scouting-copy > div { border-top: 1px solid var(--study-line); padding-top: 24px; }
.services .evidence-flow { margin: 24px 0; padding: 0; }
.services .evidence-flow li { padding: 0; }
.services .evidence-flow li + li { margin-top: 24px; }
.services .evidence-flow li > div { padding: 0; border: 0; }
.services .evidence-flow p { margin: 0; }
.services .evidence-flow h4 { line-height: 1.4; }
.flow-index { line-height: 21px; padding-top: 0; text-align: center; }
.services .study-heading .service-kicker { margin-bottom: 16px; }
.atlas-region { display: grid; grid-template-rows: auto auto 280px auto; align-content: start; }
.services .atlas-region-note { margin: 8px 0 24px; font-size: 13px; }
.services .ecosystem-map { width: 280px; max-width: 100%; height: 280px; margin: 0; }
.services .atlas-locations { list-style: none; padding: 0; margin: 24px 0; }
.services .atlas-locations li { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--study-line); font-size: 13px; line-height: 1.5; }
.atlas-index { color: var(--study-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.atlas-city { font-weight: 500; }
.atlas-function { color: var(--study-muted); }
@media (max-width: 860px) {
  .scouting-copy > div { border-top: 0; padding-top: 0; }
  .services .service-copy > :last-child { margin-bottom: 0; }
  .services .service-grid:not(.scouting-layout) { gap: 24px; }
}


/* Startseite: ruhige Leseposition; Bewegung bleibt in den Datengrafiken. */
.home .befund.reveal,
.home .welten.reveal,
.home .befund.reveal[data-stagger] > *,
.home .welten.reveal[data-stagger] > * {
  opacity: 1;
  transform: none;
  transition: none;
}
@media (prefers-reduced-motion: no-preference) {
  .home [data-home-reveal] { transition: opacity 350ms var(--ease-premium); }
  .home [data-home-reveal].is-pending { opacity: 0; }
}
@media (max-width: 560px) {
}

/* Softwarefokus: ein Hero-Einstieg, beschriftete Atlaskunst und Prozessbilder. */
.services-hero-copy { margin-bottom: 48px; }
.service-hero-link { display: inline-flex; align-items: center; gap: 48px; min-height: 48px; padding-block: 8px; text-decoration: none; border-bottom: 1px solid var(--midnight-blue); }
.service-hero-link:hover { opacity: .7; }
.services .atlas-regions { gap: 48px; margin-top: 24px; }
.services .atlas-region { display: block; }
.services .atlas-region > h4 { margin-bottom: 16px; }
.region-art { position: relative; isolation: isolate; container-type: inline-size; }
.region-art > img {
  display: block; width: 100%; height: auto;
  /* Only the artwork fades into the page; labels keep their full contrast. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect;
}
.region-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: var(--midnight-blue); stroke: var(--midnight-blue); stroke-width: 1; }
.region-leaders path { fill: none; vector-effect: non-scaling-stroke; }
.region-leaders circle { stroke: none; }
.region-label { position: absolute; width: clamp(132px, 30%, 184px); height: 80px; padding: 8px; background: var(--warm-white); border: 1px solid var(--line-light); border-radius: 2px; }
.region-label strong { display: block; font-family: var(--serif); font-size: 18px; font-weight: 400; line-height: 20px; }
.region-label > span { display: block; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--graphite); }
.region-sf { left: 3%; top: 37%; }
.region-oakland { right: 3%; top: 25%; }
.region-peninsula { left: 3%; top: 69%; }
.region-water, .region-landmark { position: absolute; font-size: 12px; line-height: 1.35; color: var(--midnight-blue); }
.region-bay-water { left: 50%; top: 54%; width: 23%; text-align: center; }
.region-golden-gate { left: 23%; top: 28%; background: var(--warm-white); padding: 4px; }
.region-pacific { left: 6%; top: 63%; }
.region-manhattan { left: 3%; top: 60%; }
.region-brooklyn { right: 3%; top: 60%; }
.region-queens { right: 3%; top: 5%; }
.region-jersey { left: 3%; top: 8%; }
@container (max-width: 440px) {
  .region-sf { top: 8%; }
  .region-oakland { top: 5%; }
  .region-golden-gate { left: 3%; top: 37%; }
  .region-jersey { top: 5%; }
  .region-manhattan { left: auto; right: 3%; top: 50%; }
  .region-brooklyn { left: 3%; right: auto; top: 73%; }
}
.services .ecosystem-atlas > figcaption { margin-top: 24px; }

.software-process { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 24px 0; }
.software-process > div { padding-top: 16px; border-top: 1px solid var(--study-line); }
.process-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--study-muted); margin-bottom: 8px; }
.services .software-process h4 { margin-bottom: 8px; }
.services .software-process p, .services .operating-model p { font-size: 13px; line-height: 1.5; color: var(--study-muted); margin: 0; }
.operating-model { margin: 24px 0; }
.operating-model h4 { margin-bottom: 8px; }
.operating-foundation { padding: 16px 0 24px; border-block: 1px solid var(--study-line); }
.operating-teams { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding: 24px 0; }
.operating-teams > div { padding-top: 16px; position: relative; }
.operating-teams > div::before { content: ''; position: absolute; top: -24px; left: 0; height: 32px; border-left: 1px solid var(--study-line); }
.operating-feedback { border-top: 1px solid var(--study-line); padding-top: 24px; }
.services .evidence-flow .flow-index { width: 7px; height: 7px; border-radius: 50%; background: var(--study-muted); margin: 7px auto 0; padding: 0; }
@media (max-width: 1100px) and (min-width: 861px) {
  .services .atlas-regions { gap: 24px; }
}
@media (max-width: 560px) {
  .services .atlas-regions { margin-inline: -24px; }
  .services .atlas-region > h4 { margin-inline: 24px; }
  .region-label strong { font-size: 18px; }
  .region-label > span { font-size: 12px; }
  .operating-teams { grid-template-columns: 1fr; gap: 24px; padding-left: 16px; margin-left: 0; border-left: 1px solid var(--study-line); }
  .operating-teams > div { padding-top: 0; }
  .operating-teams > div::before { top: 10px; left: -16px; width: 8px; height: 0; border-left: 0; border-top: 1px solid var(--study-line); }
}

/* Abschnittsnavigation: Linien reagieren auf Naehe und Leseposition.
   Interaktionsreferenz: reactbits.dev/components/line-sidebar. */
@media (min-width: 861px) and (max-width: 1100px) {
  .services-hero-copy { grid-template-columns: 1fr; gap: 24px; }
  .services-hero-summary { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: 48px; }
  .services .services-hero-summary .services-hero-proof { margin-top: 0; }
}
.service-sidebar { color: var(--midnight-blue); background: var(--warm-white); border-bottom: 1px solid var(--line-light); }
.service-sidebar.is-enhanced { position: sticky; top: 76px; z-index: 19; }
.sidebar-inner { max-width: 1400px; margin-inline: auto; padding-inline: 64px; }
.sidebar-heading { font-size: 10px; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-text); margin: 0 0 24px; }
.sidebar-toggle { display: none; }
.sidebar-list { --track-y: 0px; --track-opacity: 0; position: relative; display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; list-style: none; }
.sidebar-list::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line-light); }
.sidebar-list::after { content: ''; position: absolute; left: -1px; top: 0; width: 3px; height: 16px; background: var(--midnight-blue); opacity: var(--track-opacity); transform: translateY(var(--track-y)); pointer-events: none; }
.sidebar-list li { position: relative; margin: 0; }
.sidebar-list li:not(:last-child)::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 8px; height: 1px; background: var(--line-light); }
.sidebar-list a { --proximity: 0; --reading: 0; position: relative; display: flex; align-items: center; min-height: 44px; padding: 8px 8px 8px 32px; text-decoration: none; color: var(--muted-text); font-size: 12px; line-height: 1.35; }
.sidebar-label { display: inline-block; transform: translateX(calc(var(--proximity) * 10px)); }
.sidebar-marker { position: absolute; left: 0; top: 50%; height: 1px; width: 20px; background: currentColor; transform-origin: left; transform: scaleX(calc(.65 + var(--proximity) * .55 + var(--reading) * .4)); }
.sidebar-list a[aria-current="location"], .sidebar-list a:hover, .sidebar-list a:focus-visible { color: var(--midnight-blue); }
.sidebar-list a[aria-current="location"] .sidebar-marker { height: 2px; }
.sidebar-list a:focus-visible, .sidebar-toggle:focus-visible { outline: 2px solid var(--midnight-blue); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .sidebar-label, .sidebar-marker { transition: transform 180ms var(--ease-premium), color 180ms; }
  .sidebar-list::after { transition: transform 350ms var(--ease-premium), opacity 180ms; }
}
@media (min-width: 861px) {
  .sidebar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; }
  .sidebar-heading { margin: 0; }
  .sidebar-list { flex-direction: row; gap: 24px; }
  .sidebar-list a { min-height: 48px; }
  .sidebar-list::before { top: auto; bottom: 0; width: 100%; height: 1px; }
  .sidebar-list::after { top: auto; bottom: 0; left: 0; width: 24px; height: 2px; transform: translateX(var(--track-x, 0px)); }
  .sidebar-list li:not(:last-child)::after { left: auto; right: -13px; top: 20px; bottom: auto; width: 1px; height: 8px; }
  .services-page .service-section { scroll-margin-top: 164px; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .sidebar-inner { padding-inline: 48px; }
}
@media (max-width: 860px) {
  .sidebar-inner { padding-inline: 24px; }
  .service-sidebar:not(.is-enhanced) { padding-block: 24px; }
  .service-sidebar.is-enhanced .sidebar-heading { display: none; }
  .service-sidebar.is-enhanced .sidebar-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 8px 0; gap: 16px; background: none; border: 0; color: var(--midnight-blue); font: 12px/1.5 Inter, sans-serif; cursor: pointer; text-align: left; }
  .sidebar-current { color: var(--muted-text); padding-left: 8px; }
  .sidebar-toggle-lines { flex: 0 0 20px; height: 8px; border-block: 1px solid currentColor; }
  .sidebar-toggle[aria-expanded="true"] .sidebar-toggle-lines { height: 0; border-bottom: 0; }
  .service-sidebar.is-enhanced .sidebar-list { display: none; padding-block: 16px 24px; max-height: calc(100dvh - 124px); overflow-y: auto; overscroll-behavior: contain; }
  .service-sidebar.is-enhanced.is-open .sidebar-list { display: flex; }
  .sidebar-list a { font-size: 14px; }
  .services-page .service-section { scroll-margin-top: 148px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-label { transform: none; }
  .sidebar-marker { transform: none; }
}

/* Startseite: der Befund erlaeutert die Umsetzung als kompakte Vertiefung. */
.home-evidence-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.home-evidence-copy .label { display: block; margin-bottom: 24px; }
.home-evidence-copy h2 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); max-width: 20ch; margin-bottom: 24px; }
.home-evidence-copy p { max-width: 39ch; color: var(--muted-text); margin: 0; }
.home-evidence .stufe { grid-template-areas: none; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 56px; column-gap: 24px; }
.home-evidence .stufe > * { grid-area: auto; }
.home-evidence .befund-quelle { margin-top: 24px; font-size: .8125rem; }
.home-evidence .source-link { display: inline-block; min-height: 44px; margin-top: 8px; padding-block: 8px; }
.home-evidence .stufe-balken { transition: none; transform: none; }
@media (max-width: 860px) {
  .home-evidence-grid { grid-template-columns: 1fr; }
  .home-evidence-copy h2, .home-evidence-copy p { max-width: 32ch; }
}
@media (max-width: 560px) {
  .home-evidence .stufe { grid-template-columns: minmax(0, 1fr) 56px; gap: 16px; }
  .home-evidence .stufe-text { grid-column: 1; }
  .home-evidence .stufe-spur { grid-column: 1; grid-row: 2; }
  .home-evidence .stufe-wert { grid-column: 2; grid-row: 1 / span 2; }
}