@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/source-sans-pro-v21-latin-200.woff2") format("woff2");
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/source-sans-pro-v21-latin-300.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/source-sans-pro-v21-latin-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/source-sans-pro-v21-latin-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/source-sans-pro-v21-latin-900.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

/* Typisierte Custom Properties: Der Browser prüft die Werte, die aus app.js
   kommen, und verwirft Unsinniges statt die Regel zu zerlegen. Registriert
   sind die Eigenschaften, die in calc(), Masken oder transform landen und bei
   denen JavaScript zwischen Länge und Prozent wechselt. Die übrigen sind
   schlichte Zahlen für opacity und stroke-dashoffset und bleiben ungetypt. */
@property --spot-x {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --spot-y {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --photo-focus-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --photo-focus-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 27%;
}

@property --photo-shift-x {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --photo-shift-y {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --photo-reveal-radius {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --photo-ring-size {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --photo-ring-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --photo-connection-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  --red: #d52b27;
  --red-dark: #a81512;
  --red-on-dark: #ee514c;
  --black: #090909;
  --black-soft: #111;
  --white: #f8f6f2;
  --grey: #a7a7a7;
  --line: rgba(255,255,255,.18);
  --content: min(1240px, calc(100vw - 96px));
  --pad: clamp(80px, 9vw, 140px);
  --ease: cubic-bezier(.2,.8,.2,1);
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  /* Einziger Versatz für Ankersprünge und Fokus-Scrolling; deckt den fixierten
     Header (4px Abstand + 76px Höhe) mit etwas Luft ab. Kein zusätzliches
     scroll-margin auf den Zielen, sonst addieren sich beide Werte. */
  scroll-padding-top: 96px;
  background: var(--black);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--white);
  color: var(--black);
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.legal-content,
.service-card__title,
.partner-card h3 {
  overflow-wrap: anywhere;
}

/* Überschriften: Zeilen gleichmäßig verteilen statt bis zum Rand füllen.
   Browser ohne Unterstützung brechen wie bisher um. */
.hero-title,
.display-heading,
.contact-title,
.legal-title,
.service-card__title,
.partner-card h3,
.process-step h3,
.legal-content h2,
.legal-content h3 {
  text-wrap: balance;
}

/* Fließtext: keine einzelnen Wörter am Absatzende. */
.hero-lead,
.lead-copy,
.legal-intro,
.service-card p,
.partner-card p,
.process-step > span,
.profile-text,
.contact-copy,
.legal-content p,
.legal-content li {
  text-wrap: pretty;
}

body.menu-open {
  overflow: hidden;
}

[hidden] {
  display: none !important;
}

button,
a {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--red);
  color: #fff;
}

:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #000;
}

.header-cta,
.motion-toggle,
.menu-toggle,
.brand,
.button,
.text-link,
.service-card > a,
.partner-card a,
.contact-link,
.site-footer a {
  min-block-size: 44px;
}

.sr-only,
.motion-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  background: #fff;
  color: #000;
  font-weight: 700;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

.page-progress {
  position: fixed;
  z-index: 5000;
  inset: 0 0 auto;
  height: 4px;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}

.page-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--red);
}

/* Fortschritt ohne Scroll-Listener, läuft damit außerhalb des Main Threads.
   app.js erkennt die Unterstützung und setzt die Breite dann nicht mehr. */
@supports (animation-timeline: scroll()) {
  .page-progress span {
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: page-progress linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes page-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.site-header {
  --header-height: 76px;
  position: fixed;
  z-index: 4000;
  inset: 4px 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--header-height);
  padding: 0 32px;
  border-bottom: 1px solid rgba(255,255,255,.13);
  background: rgba(8,8,8,.96);
  color: #fff;
  transition: min-height .3s ease, background .3s ease;
}

.site-header.is-scrolled {
  --header-height: 68px;
  min-height: var(--header-height);
  background: rgba(8,8,8,.985);
}

.brand,
.header-actions {
  position: relative;
  z-index: 2;
}

.brand {
  display: flex;
  width: 214px;
  align-items: center;
}

.brand img {
  width: 100%;
  height: auto;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 38px);
}

.desktop-nav a {
  position: relative;
  padding: 24px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: 18px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.55);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .2s ease, background .2s ease;
}

.header-cta:hover {
  background: #fff;
  color: #000;
}

.motion-toggle {
  display: flex;
  width: 44px;
  min-width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.motion-toggle__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6df08c;
  box-shadow: 0 0 0 4px rgba(109,240,140,.12);
}

/* Pausiert: zusätzlich zur Farbe ein hohler Ring, damit der Zustand nicht
   allein über Grün gegen Grau unterschieden werden muss. */
.motion-toggle[aria-pressed="true"] .motion-toggle__dot {
  background: transparent;
  border: 2px solid #aaa;
  box-shadow: none;
}

.menu-toggle,
.mobile-nav {
  display: none;
}

/* Ohne JavaScript funktionieren weder Menü noch Animationsschalter. Statt
   zweier toter Bedienelemente bleibt der Kontakt-Button auf allen Breiten
   sichtbar; die Einseiter-Inhalte sind ohnehin durch Scrollen erreichbar. */
.no-js .menu-toggle,
.no-js .motion-toggle {
  display: none;
}

.section-pad {
  padding: var(--pad) max(48px, calc((100vw - 1240px) / 2));
}

.section-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(48px, 6vw, 78px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.section-kicker span:first-child {
  color: var(--red-dark);
}

.section-kicker::after {
  width: 72px;
  height: 1px;
  content: "";
  background: currentColor;
  opacity: .3;
}

.section-kicker--light {
  color: #fff;
}

.display-heading {
  min-width: 0;
  margin: 0;
  font-size: clamp(54px, 7.2vw, 112px);
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .82;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.display-heading span,
.hero-title__line,
.contact-title span {
  overflow-wrap: anywhere;
}

.display-heading span {
  color: var(--red);
}

.lead-copy {
  min-width: 0;
  margin: 0;
  font-size: clamp(23px, 2.1vw, 34px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .23em;
}

.section-head,
.process-head {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: end;
}

.section-head > *,
.process-head > * {
  min-width: 0;
}

.section-head .lead-copy,
.process-head .lead-copy {
  max-width: 520px;
}

.hero {
  position: relative;
  display: grid;
  min-height: max(720px, 100svh);
  overflow: hidden;
  background: var(--red);
  color: #fff;
  isolation: isolate;
}

#signal-field,
#contact-field {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-grid {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size: 9vw 9vw;
  -webkit-mask-image: linear-gradient(90deg,#000,transparent 85%);
  mask-image: linear-gradient(90deg,#000,transparent 85%);
}

.hero::after {
  position: absolute;
  z-index: -3;
  right: -14vw;
  bottom: -40vw;
  width: 80vw;
  aspect-ratio: 1;
  border: 23vw solid rgba(0,0,0,.075);
  border-radius: 50%;
  content: "";
}

.hero-orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  pointer-events: none;
}

.hero-orbit::after {
  position: absolute;
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  content: "";
  background: #fff;
}

.hero-orbit--one {
  top: 13%;
  right: -10vw;
  width: 45vw;
  aspect-ratio: 1;
  animation: spin 25s linear infinite;
}

.hero-orbit--two {
  right: 19vw;
  bottom: -24vw;
  width: 38vw;
  aspect-ratio: 1;
  animation: spin 19s linear infinite reverse;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.hero-content {
  align-self: center;
  width: var(--content);
  margin: 0 auto;
  padding: 130px 0 185px;
}

.hero-title {
  max-width: 1120px;
  margin: 24px 0 32px;
  font-size: clamp(60px, 9vw, 150px);
  font-weight: 900;
  letter-spacing: -.068em;
  line-height: .76;
  text-transform: uppercase;
}

.hero-title__line {
  display: block;
}

/* Bewusst ohne Konturschrift: gefülltes Weiß hält den Kontrast auf Rot. */
.hero-title__line--outline {
  color: #fff;
}

.hero-lead {
  max-width: 700px;
  margin: 0;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.34;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 40px;
}

.button {
  display: inline-flex;
  min-width: 270px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 21px;
  border: 1px solid currentColor;
  font-weight: 700;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.button--light {
  background: #fff;
  color: #000;
}

.button--light:hover {
  background: #000;
  color: #fff;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.55);
  font-weight: 700;
}

.hero-trust {
  position: absolute;
  right: max(48px, calc((100vw - 1240px) / 2));
  bottom: 28px;
  left: max(48px, calc((100vw - 1240px) / 2));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,.45);
}

/* Feste erste Spalte: Nur die erste Kachel hat den Statuspunkt, mit "auto"
   würde ihr Text um sieben Pixel weiter rechts starten als bei den anderen. */
.hero-trust > div {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 0;
  align-items: center;
  padding: 16px 22px 0 0;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-trust > div:not(:first-child) {
  padding-left: 22px;
  border-left: 1px solid rgba(255,255,255,.25);
}

.hero-trust strong {
  grid-column: 2;
  font-weight: 900;
}

.hero-trust div > span:last-child {
  grid-column: 2;
  color: #fff;
}

.status-pulse {
  grid-row: 1 / 3;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #79f29a;
  box-shadow: 0 0 0 4px rgba(121,242,154,.13);
}

.services {
  background: var(--white);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(65px, 8vw, 110px);
  border-top: 1px solid #aaa;
  border-left: 1px solid #aaa;
}

.service-card {
  --spot-x: 50%;
  --spot-y: 50%;
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 530px;
  flex-direction: column;
  padding: clamp(28px, 3.2vw, 44px);
  overflow: hidden;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  background: radial-gradient(circle 240px at var(--spot-x) var(--spot-y),rgba(213,43,39,.11),transparent 70%),var(--white);
}

.service-card--dark {
  border-color: #333;
  background: radial-gradient(circle 260px at var(--spot-x) var(--spot-y),rgba(213,43,39,.24),transparent 70%),#101010;
  color: #fff;
}

.service-card--red {
  border-color: rgba(255,255,255,.28);
  background: radial-gradient(circle 260px at var(--spot-x) var(--spot-y),rgba(0,0,0,.1),transparent 70%),var(--red);
  color: #fff;
}

.service-card__meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}

.service-card svg {
  width: 52px;
  margin: 42px 0 52px auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.service-card__title {
  margin: 0 0 18px;
  font-size: clamp(32px, 3vw, 46px);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: .94;
}

.service-card p {
  max-width: 420px;
  margin: 0;
}

.service-card ul {
  display: grid;
  gap: 4px;
  margin: 26px 0 28px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
}

.service-card li::before {
  margin-right: 9px;
  content: "+";
  color: var(--red-dark);
}

/* Alternativtext-Syntax hält das rein grafische Zeichen aus der Sprachausgabe
   heraus. In @supports gekapselt, damit ältere Engines das Zeichen behalten. */
@supports (content: "+" / "") {
  .service-card li::before {
    content: "+" / "";
  }
}

.service-card--dark li::before {
  color: var(--red-on-dark);
}

.service-card--red li::before {
  color: #fff;
}

.service-card > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid currentColor;
  font-weight: 700;
}

.quality-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  border-left: 1px solid #aaa;
}

.quality-strip > div {
  display: grid;
  gap: 4px;
  padding: 25px 30px;
}

.quality-strip > div:not(:last-child) {
  border-right: 1px solid #aaa;
}

.quality-strip strong {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.quality-strip span {
  color: #555;
  font-size: 14px;
}

/* Steht bewusst unter der Leiste: Sie schließt oben direkt an das Leistungs-
   raster an, dazwischen darf nichts stehen. */
.quality-note {
  margin: 22px 0 0;
  color: #555;
  font-size: 14px;
  font-weight: 700;
}

.process {
  background: var(--black);
  color: #fff;
}

.process .display-heading span {
  color: var(--red-on-dark);
}

.process .section-kicker span:first-child {
  color: var(--red-on-dark);
}

.process .lead-copy {
  color: #bbb;
}

.process-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(46px, 7vw, 100px);
  align-items: start;
  margin-top: clamp(70px, 8vw, 115px);
}

.process-visual {
  position: sticky;
  top: 100px;
  display: grid;
  min-width: 0;
  height: min(520px, calc(100vh - 130px));
  min-height: 390px;
  place-items: center;
  border: 1px solid var(--line);
  background: radial-gradient(circle at center,rgba(213,43,39,.13),transparent 42%);
  overflow: hidden;
}

.system-map {
  width: min(92%, 610px);
  overflow: visible;
}

.system-map__grid path {
  fill: none;
  stroke: rgba(255,255,255,.055);
}

.system-map__links path {
  fill: none;
  stroke: rgba(255,255,255,.17);
  stroke-width: 2;
  transition: stroke .4s ease, stroke-width .4s ease;
}

.system-map__links path.is-active {
  stroke: var(--red);
  stroke-width: 4;
}

.system-map__nodes circle {
  fill: #0c0c0c;
  stroke: rgba(255,255,255,.34);
  stroke-width: 2;
  transition: fill .4s ease, stroke .4s ease;
}

.system-map__nodes g.is-active circle {
  fill: var(--red);
  stroke: var(--red);
}

/* Angabe in viewBox-Einheiten, skaliert also mit der Grafik. 17 ist das
   Maximum, bei dem "MENSCH" noch mit Luft in den Knotenkreis passt. */
.system-map__nodes text {
  fill: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* Ring um den aktiven Knoten. Als gefüllter Punkt saß er mitten im Knoten und
   verdeckte dessen Beschriftung. */
.system-map__cursor {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  transition: cx .6s var(--ease), cy .6s var(--ease), r .6s var(--ease);
}

/* Heller als die übrigen grauen Beschriftungen: Diese steht als einzige auf dem
   roten Verlauf des Systemkarten-Rahmens. Dort waren es 5,34:1 statt 5,77:1 auf
   reinem Schwarz -- bestanden, aber ohne Reserve. Mit --grey sind es 7,67:1. */
.process-visual__status {
  position: absolute;
  right: 22px;
  bottom: 18px;
  color: var(--grey);
  font-size: 12px;
  letter-spacing: .12em;
}

.process-visual__status span {
  color: #fff;
}

.process-list {
  border-top: 1px solid var(--line);
}

.process-step {
  position: relative;
  min-height: 235px;
  padding: 42px 0;
  border-bottom: 1px solid var(--line);
  transition: padding .3s var(--ease);
}

/* Der aktive Schritt bekommt einen roten Marker und einen Einzug. Die übrigen
   werden bewusst nicht abgedunkelt, damit ihr Textkontrast erhalten bleibt;
   zuvor unterschied nur der Einzug, was wie ein Satzfehler wirkte. */
.process-step::before {
  position: absolute;
  top: 42px;
  bottom: 42px;
  left: 0;
  width: 3px;
  content: "";
  background: var(--red-on-dark);
  opacity: 0;
  transition: opacity .3s ease;
}

.process-step.is-active::before {
  opacity: 1;
}

.process-step.is-active {
  padding-left: 24px;
}

.process-step > p {
  margin: 0 0 15px;
  color: #8a8a8a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  transition: color .3s ease;
}

.process-step.is-active > p {
  color: var(--red-on-dark);
}

.process-step h3 {
  max-width: 680px;
  margin: 0 0 15px;
  font-size: clamp(35px, 4vw, 58px);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: .95;
}

.process-step > span {
  display: block;
  max-width: 600px;
  color: #aaa;
  font-size: 18px;
}

.profile {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  min-height: 760px;
  background: var(--white);
}

.profile-portrait {
  --photo-focus-x: 50%;
  --photo-focus-y: 27%;
  --photo-shift-x: 0px;
  --photo-shift-y: 0px;
  --photo-reveal-radius: 0px;
  --photo-ring-size: 0px;
  --photo-ring-opacity: 0;
  --photo-connection-offset: 1;
  --photo-connection-opacity: 0;
  --connection-waypoint-one: 0;
  --connection-waypoint-two: 0;
  --connection-waypoint-three: 0;
  --solution-route-one: 1;
  --solution-route-two: 1;
  --solution-route-three: 1;
  --solution-route-four: 1;
  --solution-route-five: 1;
  --solution-core: 1;
  --solution-node-one: 0;
  --solution-node-two: 0;
  --solution-node-three: 0;
  --solution-node-four: 0;
  --solution-node-five: 0;
  position: relative;
  min-width: 0;
  min-height: 720px;
  margin: 0;
  overflow: hidden;
  background: #0b0909;
  color: #fff;
  isolation: isolate;
}

.profile-portrait::before {
  position: absolute;
  z-index: -2;
  top: 12%;
  left: -18%;
  width: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--red);
  content: "";
}

.profile-portrait::after {
  position: absolute;
  z-index: -3;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 90px 90px;
  content: "";
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

.profile-portrait__frame {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
}

.profile-portrait__frame::after {
  position: absolute;
  inset: auto 0 0;
  height: 36%;
  background: linear-gradient(to top, rgba(0,0,0,.82), transparent);
  content: "";
}

/* picture ist nur der Formatumschalter und darf das Bild nicht einschnüren. */
.profile-portrait picture {
  display: block;
  width: 100%;
  height: 100%;
}

.profile-portrait img,
.profile-portrait__connection {
  width: 100%;
  height: 100%;
  transform: scale(1.025) translate3d(var(--photo-shift-x), var(--photo-shift-y), 0);
  transition: transform .4s var(--ease);
  will-change: transform;
}

.profile-portrait img {
  object-fit: cover;
  object-position: center center;
}

.profile-portrait__connection {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.profile-portrait__connection path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.profile-connection__track {
  stroke: rgba(255,255,255,.2);
  stroke-width: 1;
}

.profile-connection__glow,
.profile-connection__line {
  stroke-dasharray: 1;
  stroke-dashoffset: var(--photo-connection-offset);
}

.profile-connection__glow {
  stroke: rgba(238,81,76,.24);
  stroke-width: 10;
}

.profile-connection__line {
  stroke: var(--red-on-dark);
  stroke-width: 2.5;
}

.profile-connection__origin {
  fill: #fff;
  opacity: calc(.35 + var(--photo-connection-opacity) * .65);
}

.profile-connection__waypoint {
  fill: var(--red-on-dark);
  stroke: #fff;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.profile-connection__waypoint--one {
  opacity: var(--connection-waypoint-one);
}

.profile-connection__waypoint--two {
  opacity: var(--connection-waypoint-two);
}

.profile-connection__waypoint--three {
  opacity: var(--connection-waypoint-three);
}

.profile-connection__signal {
  fill: var(--red-on-dark);
  opacity: var(--photo-connection-opacity);
  stroke: #fff;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.profile-solution {
  filter: drop-shadow(0 0 4px rgba(238,81,76,.45));
}

.profile-solution__route,
.profile-solution__core {
  fill: none;
  stroke: var(--red-on-dark);
  stroke-dasharray: 1;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.profile-solution__route--one {
  stroke-dashoffset: var(--solution-route-one);
}

.profile-solution__route--two {
  stroke-dashoffset: var(--solution-route-two);
}

.profile-solution__route--three {
  stroke-dashoffset: var(--solution-route-three);
}

.profile-solution__route--four {
  stroke-dashoffset: var(--solution-route-four);
}

.profile-solution__route--five {
  stroke-dashoffset: var(--solution-route-five);
}

.profile-solution__core {
  stroke-dashoffset: var(--solution-core);
}

.profile-solution__node {
  fill: var(--red-on-dark);
  stroke: #fff;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.profile-solution__node--one {
  opacity: var(--solution-node-one);
}

.profile-solution__node--two {
  opacity: var(--solution-node-two);
}

.profile-solution__node--three {
  opacity: var(--solution-node-three);
}

.profile-solution__node--four {
  opacity: var(--solution-node-four);
}

.profile-solution__node--five {
  opacity: var(--solution-node-five);
}

.profile-portrait__overlay,
.profile-portrait__focus-ring {
  position: absolute;
  pointer-events: none;
}

.profile-portrait__overlay {
  z-index: 2;
  inset: 0;
  display: none;
  background: rgba(5,5,5,.96);
}

.profile-portrait__focus-ring {
  z-index: 3;
  top: var(--photo-focus-y);
  left: var(--photo-focus-x);
  width: var(--photo-ring-size);
  aspect-ratio: 1;
  border: 2px solid var(--red);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
}

@supports ((-webkit-mask-image: radial-gradient(circle, transparent, #000)) or (mask-image: radial-gradient(circle, transparent, #000))) {
  .js[data-motion="on"] .profile-portrait__overlay {
    display: block;
    -webkit-mask-image: radial-gradient(
      circle at var(--photo-focus-x) var(--photo-focus-y),
      transparent 0,
      transparent calc(var(--photo-reveal-radius) - 1px),
      #000 calc(var(--photo-reveal-radius) + 1px)
    );
    mask-image: radial-gradient(
      circle at var(--photo-focus-x) var(--photo-focus-y),
      transparent 0,
      transparent calc(var(--photo-reveal-radius) - 1px),
      #000 calc(var(--photo-reveal-radius) + 1px)
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .js[data-motion="on"] .profile-portrait__focus-ring {
    opacity: var(--photo-ring-opacity);
  }
}

.profile-portrait figcaption {
  position: absolute;
  z-index: 4;
  right: 34px;
  bottom: 30px;
  left: 34px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid rgba(255,255,255,.55);
  padding-top: 12px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.profile-portrait figcaption strong {
  font-weight: 900;
}

.profile-portrait figcaption span {
  color: rgba(255,255,255,.72);
}

.profile-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding-right: max(48px, calc((100vw - 1240px) / 2));
  padding-left: clamp(54px, 7vw, 110px);
}

.profile-copy .section-kicker {
  margin-bottom: 46px;
}

.profile-copy .display-heading {
  font-size: clamp(54px, 5.6vw, 88px);
}

.profile-copy .lead-copy {
  max-width: 720px;
  margin-top: 42px;
}

.profile-text {
  max-width: 700px;
  margin: 22px 0 0;
  color: #555;
}

.profile-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 42px 0 0;
}

.profile-facts div {
  padding-top: 13px;
  border-top: 1px solid #999;
}

.profile-facts dt {
  margin-bottom: 5px;
  color: var(--red-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.profile-facts dd {
  margin: 0;
  font-size: 13px;
}

/* Referenzen: bewusst rein typografisch. Die Bildschirmfotos des alten
   Auftritts zeigen jahrealte Stände der Kundenseiten und würden den Auftritt
   datieren; ein zweites Bildraster stünde zudem in Konkurrenz zu den Partnern. */
.references {
  background: var(--black);
  color: #fff;
}

.references .display-heading span,
.references .section-kicker span:first-child {
  color: var(--red-on-dark);
}

.references .lead-copy {
  color: #bbb;
}

.reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(58px, 7vw, 95px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.reference-card {
  min-width: 0;
  padding: clamp(26px, 2.8vw, 38px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.reference-card h3 {
  margin: 0 0 12px;
  font-size: clamp(21px, 1.9vw, 27px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.08;
  /* Nicht "anywhere": Das senkt die Mindestbreite der Spalte auf ein Zeichen
     und zerlegte "Jugendmanagement" mitten im Wort. */
  overflow-wrap: break-word;
}

/* Kein inline-flex: Bei umbrechenden Titeln blieb der Pfeil in der ersten
   Zeile ganz rechts hängen, statt dem letzten Wort zu folgen. */
.reference-card h3 a {
  display: inline;
}

.reference-card h3 a:hover {
  color: var(--red-on-dark);
}

.reference-card p {
  margin: 0;
  color: #aaa;
  font-size: 15px;
}

/* Der beteiligte Partner belegt die Rolle als Technikpartner und ist deshalb
   ausgewiesen, nicht bloß geduldet. Zwei Klassen, damit die Regel die
   allgemeine Absatzfarbe darüber schlägt. */
.reference-card .reference-card__partner {
  margin-top: 14px;
  color: var(--red-on-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Ungerade Anzahl: Bleibt der letzte Eintrag allein in einer Reihe, füllt er
   sie ganz aus. Sonst wirkt das Raster angebrochen, weil die leeren Zellen
   keine Rahmen haben. Gilt sinngemäß für den Zweispalter weiter unten. */
.reference-card:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
}

/* Fehlt nur eine Zelle auf die volle Reihe, verbreitert sich der letzte
   Eintrag auf zwei Spalten. */
.reference-card:last-child:nth-child(3n + 2) {
  grid-column: span 2;
}

/* Gerade Anzahl geht ohne Rest auf. Am Desktop deshalb die Spaltenzahl so
   wählen, dass keine Reihe angebrochen bleibt; sechs und zwölf passen bereits
   in die drei Standardspalten. Ohne :has-Unterstützung bleibt es bei drei
   Spalten samt aufgespanntem Schlusseintrag, also weiterhin lückenlos. */
@media (min-width: 961px) {
  .reference-grid:has(> :nth-child(2):last-child),
  .reference-grid:has(> :nth-child(4):last-child),
  .reference-grid:has(> :nth-child(10):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Acht Einträge blieben bei drei Spalten: Vier Spalten sind für Titel und
     Beschreibung zu schmal, zwei zu breit. Die Restreihe füllt der letzte
     Eintrag über zwei Spalten. */
}

/* Geht die Anzahl auf, darf nichts aufgespannt werden. */
.reference-grid:has(> :nth-child(2n):last-child) .reference-card {
  grid-column: auto;
}

/* Konformitätszeichen: als Bildmarke zulässige Ausnahme von der Regel, Text
   nicht als Grafik einzusetzen. Darf nur bei aufrechter Zertifizierung stehen. */
.profile-seal {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid #999;
}

.profile-seal img {
  width: 84px;
  height: auto;
  flex: 0 0 auto;
}

.profile-seal p {
  margin: 0;
  max-width: 380px;
  color: #555;
  font-size: 14px;
}

.partners {
  background: var(--red);
  color: #fff;
}

.partners .display-heading span {
  color: #fff;
}

.partners .section-kicker span:first-child {
  color: #fff;
}

.partners-head .lead-copy {
  max-width: 590px;
  color: #fff;
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(58px, 7vw, 95px);
  border-top: 1px solid rgba(255,255,255,.45);
  border-left: 1px solid rgba(255,255,255,.45);
}

.partner-card {
  display: grid;
  min-width: 0;
  min-height: 390px;
  grid-template-rows: 150px 1fr;
  border-right: 1px solid rgba(255,255,255,.45);
  border-bottom: 1px solid rgba(255,255,255,.45);
}

.partner-card__logo {
  display: grid;
  min-width: 0;
  padding: 24px;
  place-items: center;
  background: #fff;
}

.partner-card__logo img {
  width: min(100%, 245px);
  max-height: 100px;
  object-fit: contain;
  filter: grayscale(1);
  transition: filter .25s ease, transform .3s var(--ease);
}

.partner-card:hover .partner-card__logo img {
  filter: none;
  transform: scale(1.03);
}

.partner-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 28px;
}

.partner-card h3 {
  margin: 0 0 10px;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: .95;
}

.partner-card p {
  margin: 0;
  color: #fff;
}

.partner-card a {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 18px;
  border-bottom: 1px solid rgba(255,255,255,.65);
  font-weight: 700;
}

.contact {
  position: relative;
  display: grid;
  min-height: 680px;
  place-items: center;
  overflow: hidden;
  background: var(--black);
  color: #fff;
  text-align: center;
  isolation: isolate;
}

.contact::after {
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;
  width: min(72vw, 850px);
  aspect-ratio: 1;
  border: 1px solid rgba(213,43,39,.34);
  border-radius: 50%;
  content: "";
  transform: translate(-50%,-50%);
  box-shadow: 0 0 0 80px rgba(213,43,39,.03), 0 0 0 160px rgba(213,43,39,.02);
}

.contact-inner {
  width: min(980px, 100%);
}

.contact-title {
  margin: 20px 0 26px;
  font-size: clamp(56px, 7.8vw, 118px);
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .82;
}

.contact-title span {
  color: var(--red-on-dark);
}

.contact-copy {
  max-width: 650px;
  margin: 0 auto;
  color: #c5c5c5;
  font-size: 20px;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 980px;
  margin: 46px auto 0;
}

.contact-link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 18px 22px;
  border: 1px solid #fff;
  font-weight: 700;
  background: #fff;
  color: #000;
  font-size: clamp(17px, 1.5vw, 21px);
}

.contact-link:hover {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.contact-meta {
  margin: 24px 0 0;
  color: #8a8a8a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Die Ortsangaben bleiben eine Aufzählung, der Arbeitsradius steht als eigene
   Aussage darunter. */
.contact-meta__scope {
  display: block;
  margin-top: 10px;
}

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 26px 36px;
  border-top: 1px solid #292929;
  background: var(--black);
  color: #8a8a8a;
  font-size: 12px;
  text-transform: uppercase;
}

.site-footer img {
  width: 160px;
  height: auto;
}

.site-footer p {
  margin: 0;
}

.site-footer > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 18px;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
}

.site-footer a:hover {
  color: #fff;
}

.site-footer a[aria-current="page"] {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .25em;
}

.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal {
  opacity: 1;
  transform: translateY(28px);
  transition: transform .7s var(--ease);
}

.js .reveal.is-visible,
.js .hero .reveal {
  opacity: 1;
  transform: none;
}

html[data-motion="off"] .reveal {
  opacity: 1;
  transform: none;
}

html[data-motion="off"] .profile-connection__glow,
html[data-motion="off"] .profile-connection__line,
html[data-motion="off"] .profile-solution__route,
html[data-motion="off"] .profile-solution__core,
.no-js .profile-connection__glow,
.no-js .profile-connection__line,
.no-js .profile-solution__route,
.no-js .profile-solution__core {
  stroke-dashoffset: 0;
}

html[data-motion="off"] .profile-connection__signal {
  opacity: 0;
}

html[data-motion="off"] .profile-connection__waypoint,
html[data-motion="off"] .profile-solution__node,
.no-js .profile-connection__waypoint,
.no-js .profile-solution__node {
  opacity: 1;
}

html[data-motion="off"] {
  scroll-behavior: auto;
}

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation-play-state: paused !important;
  transition-duration: .001ms !important;
}

/* Ausnahme: Die Fortschrittsleiste bildet die Scrollposition ab, sie läuft
   nicht von selbst. Pausiert man ihre Scroll-Animation, friert die Anzeige
   auf dem letzten Wert ein. */
html[data-motion="off"] .page-progress span {
  animation-play-state: running !important;
}

/* Weicher Seitenwechsel, drei Zeilen ohne JavaScript. Browser ohne
   Unterstützung navigieren unverändert. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .22s;
  animation-timing-function: var(--ease);
}

/* Bewegung aus: Der Wechsel bleibt, nur die Überblendung entfällt. Greift für
   das ausgehende Dokument; das eingehende startet ohnehin wieder mit
   eingeschalteter Bewegung, weil die Einstellung bewusst nicht gespeichert
   wird. Verlässlich abgedeckt ist der Fall über prefers-reduced-motion. */
html[data-motion="off"]::view-transition-old(root),
html[data-motion="off"]::view-transition-new(root) {
  animation: none;
}

@media (max-width: 1200px) {
  :root {
    --content: calc(100vw - 64px);
  }

  .site-header {
    grid-template-columns: 1fr auto;
    padding: 0 26px;
  }

  .desktop-nav {
    display: none;
  }

  /* 44px passend zum globalen min-block-size: 44px, sonst wird der Button
     42 breit und 44 hoch und das Icon sitzt zwei Pixel zu hoch. */
  .menu-toggle {
    position: relative;
    display: block;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.5);
    background: transparent;
    cursor: pointer;
  }

  .menu-toggle > span:not(.sr-only) {
    position: absolute;
    left: 13px;
    width: 18px;
    height: 1px;
    background: #fff;
    transition: transform .25s ease, top .25s ease;
  }

  .menu-toggle > span:nth-child(2) { top: 18px; }
  .menu-toggle > span:nth-child(3) { top: 26px; }
  .menu-toggle[aria-expanded="true"] > span:nth-child(2) { top: 22px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] > span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

  .mobile-nav {
    position: absolute;
    z-index: 1;
    top: 100%;
    right: 0;
    left: 0;
    display: flex;
    height: calc(100vh - 4px - var(--header-height));
    height: calc(100dvh - 4px - var(--header-height));
    flex-direction: column;
    justify-content: flex-start;
    padding: clamp(20px,5vh,46px) max(24px,10vw) 36px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #080808;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(-16px);
    transition: opacity .25s ease, transform .35s var(--ease), visibility 0s linear .35s;
  }

  .mobile-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .mobile-nav a {
    flex: 0 0 auto;
    padding: clamp(9px,1.5vh,14px) 0;
    border-bottom: 1px solid #333;
    font-size: clamp(30px,min(7vw,8vh),62px);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: .96;
  }

  body.menu-open .header-cta {
    visibility: hidden;
    pointer-events: none;
  }

  .profile {
    grid-template-columns: 1fr;
  }

  .profile-portrait {
    min-height: 0;
    aspect-ratio: 3 / 2;
    --photo-focus-y: 17%;
  }

  .profile-copy {
    padding: var(--pad) 48px;
  }
}

@media (max-width: 960px) {
  .section-head,
  .process-head {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .reference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reference-card:last-child:nth-child(3n + 1) {
    grid-column: auto;
  }

  .reference-card:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
  }

  .service-card {
    min-height: 480px;
  }

  .service-card svg {
    margin-bottom: 32px;
  }

  .process-layout {
    grid-template-columns: 1fr;
  }

  .process-visual {
    position: relative;
    top: auto;
    height: 390px;
  }
}

@media (max-width: 800px) {
  :root {
    --content: calc(100vw - 40px);
    --pad: 76px;
  }

  body {
    font-size: 16px;
  }

  .site-header {
    --header-height: 66px;
    min-height: var(--header-height);
    padding: 0 18px;
  }

  .site-header.is-scrolled {
    --header-height: 62px;
  }

  .brand {
    width: 166px;
  }

  .header-actions {
    gap: 8px;
  }

  .header-cta {
    display: none;
  }

  .no-js .header-cta {
    display: inline-flex;
  }

  .motion-toggle {
    position: relative;
  }

  .section-pad {
    padding-right: 20px;
    padding-left: 20px;
  }

  .display-heading {
    font-size: clamp(46px, 13vw, 74px);
    line-height: .84;
  }

  .hero {
    display: block;
    min-height: auto;
  }

  .hero-content {
    padding: 112px 0 70px;
  }

  .hero-title {
    font-size: clamp(42px, 12.5vw, 76px);
    line-height: .82;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }

  .button {
    width: 100%;
  }

  .hero-trust {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: var(--content);
    grid-template-columns: 1fr;
    margin: 0 auto;
    padding-bottom: 24px;
  }

  .hero-trust > div,
  .hero-trust > div:not(:first-child) {
    padding: 11px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.2);
    border-left: 0;
  }

  .quality-strip,
  .reference-grid {
    grid-template-columns: 1fr;
  }

  .quality-strip > div:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid #aaa;
  }

  .process-layout {
    margin-top: 58px;
  }

  .process-visual {
    height: 320px;
    min-height: 0;
  }

  .process-step {
    min-height: 0;
    padding: 36px 0;
  }

  .process-step::before {
    top: 36px;
    bottom: 36px;
  }

  .process-step.is-active {
    padding-left: 12px;
  }

  .process-step h3 {
    font-size: clamp(34px, 10vw, 48px);
  }

  .profile-portrait {
    min-height: 0;
    aspect-ratio: 1 / 1.06;
    --photo-focus-y: 26%;
  }

  .profile-copy {
    padding: 76px 20px;
  }

  .profile-copy .display-heading {
    font-size: clamp(46px, 12.5vw, 72px);
  }

  .profile-facts {
    grid-template-columns: 1fr;
  }

  .partner-grid {
    grid-template-columns: 1fr;
  }

  .partner-card {
    min-height: 340px;
    grid-template-rows: 145px 1fr;
  }

  .contact {
    min-height: 650px;
  }

  .contact-title {
    font-size: clamp(48px, 13vw, 72px);
  }

  .contact-copy {
    font-size: 18px;
  }

  .contact-actions {
    flex-direction: column;
  }

  .contact-link {
    overflow-wrap: anywhere;
  }

  .site-footer {
    grid-template-columns: 1fr;
    justify-items: start;
    padding: 32px 20px;
  }

  .site-footer > div {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

@media (max-width: 440px) {
  .display-heading,
  .profile-copy .display-heading {
    font-size: clamp(38px, 12vw, 50px);
  }

  .hero-title {
    font-size: clamp(38px, 12vw, 50px);
    letter-spacing: -.075em;
  }

  .hero-lead {
    font-size: 18px;
  }

  .section-kicker {
    margin-bottom: 42px;
  }

  .service-card {
    min-height: 0;
    padding: 28px;
  }

  .service-card__title {
    font-size: clamp(30px, 9vw, 38px);
  }

  .service-card svg {
    margin: 34px 0 34px auto;
  }

  .process-visual {
    height: 270px;
  }

  .process-step h3 {
    font-size: 34px;
  }

  .profile-portrait {
    height: clamp(360px, 112vw, 440px);
    min-height: 0;
    aspect-ratio: auto;
  }

  .profile-portrait figcaption {
    right: 20px;
    bottom: 20px;
    left: 20px;
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .profile-copy .lead-copy {
    font-size: 21px;
  }

  .partner-card h3 {
    font-size: 30px;
  }

  .contact-title {
    font-size: clamp(42px, 13vw, 54px);
  }

  .contact-link {
    padding: 16px;
    font-size: 16px;
  }
}

@media (max-width: 340px) {
  .brand {
    width: 158px;
  }

  .site-header {
    padding: 0 12px;
  }

  .header-actions {
    gap: 6px;
  }

  .menu-toggle,
  .motion-toggle {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
}

@media (prefers-contrast: more) {
  .hero-title__line--outline {
    color: #fff;
  }

  .hero-grid,
  .hero-orbit,
  .contact::after {
    opacity: .35;
  }

  .contact-meta,
  .quality-strip span {
    color: currentColor;
  }
}

@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight;
    box-shadow: none;
  }

  .hero-title__line--outline {
    color: CanvasText;
  }

  #signal-field,
  #contact-field,
  .hero-grid,
  .hero-orbit,
  .contact::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  /* Scrollgebundene Anzeige, keine selbstlaufende Animation: Eine Dauer von
     null würde sie sofort auf Endwert setzen. */
  .page-progress span {
    animation-duration: auto !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Rechtliche und informative Unterseiten */
.legal-page {
  background: var(--white);
}

/* 4px Headerabstand + 76px Headerhöhe, damit der Hero nicht darunter läuft. */
.legal-main {
  padding-top: 80px;
}

.legal-hero {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 76px 0 64px;
  background: var(--red);
  color: #fff;
  isolation: isolate;
}

.legal-hero::before,
.legal-hero::after {
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
}

.legal-hero::before {
  right: -12vw;
  bottom: -28vw;
  width: min(72vw, 980px);
  border: clamp(90px, 16vw, 240px) solid rgba(0,0,0,.08);
}

.legal-hero::after {
  top: 52px;
  right: 8vw;
  width: min(34vw, 470px);
  border: 1px solid rgba(255,255,255,.3);
}

.legal-hero__inner,
.legal-body {
  width: var(--content);
  margin: 0 auto;
}

.legal-eyebrow {
  margin: 0 0 22px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.legal-title {
  max-width: 1040px;
  margin: 0;
  font-size: clamp(64px, 10vw, 148px);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .82;
  overflow-wrap: anywhere;
}

.legal-title--long {
  font-size: clamp(56px, 8.6vw, 126px);
}

.legal-intro {
  max-width: 760px;
  margin: 34px 0 0;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.35;
}

.legal-body {
  display: grid;
  grid-template-columns: 250px minmax(0, 820px);
  justify-content: space-between;
  gap: clamp(54px, 8vw, 120px);
  padding-top: 88px;
  padding-bottom: 110px;
}

/* Seiten ohne Inhaltsverzeichnis, etwa die Fehlerseite: Ohne diesen Zusatz
   landet der Text in der 250-Pixel-Spalte des Inhaltsverzeichnisses. */
.legal-body--plain {
  grid-template-columns: minmax(0, 820px);
}

.legal-toc {
  position: sticky;
  top: 110px;
  align-self: start;
  border-top: 1px solid #aaa;
}

.legal-toc__label {
  margin: 16px 0 8px;
  color: var(--red-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.legal-toc a {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #ccc;
  font-size: 15px;
  font-weight: 700;
}

.legal-toc a::after {
  color: var(--red-dark);
  content: "↓";
}

@supports (content: "↓" / "") {
  .legal-toc a::after {
    content: "↓" / "";
  }
}

.legal-content {
  min-width: 0;
}

.legal-section {
  padding: 0 0 54px;
}

.legal-section + .legal-section {
  padding-top: 54px;
  border-top: 1px solid #bbb;
}

.legal-content h2 {
  margin: 0 0 26px;
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .95;
}

.legal-content h3 {
  margin: 34px 0 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
}

.legal-content p,
.legal-content li,
.legal-content dd {
  max-width: 76ch;
}

.legal-content p {
  margin: 0 0 18px;
}

.legal-content ul {
  margin: 0 0 22px;
  padding-left: 1.25em;
}

.legal-content li + li {
  margin-top: 8px;
}

.legal-content a {
  color: var(--red-dark);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}

.legal-content address {
  margin: 0;
  font-style: normal;
}

.legal-facts {
  display: grid;
  gap: 0;
  margin: 0;
}

.legal-facts div {
  display: grid;
  grid-template-columns: minmax(150px, .38fr) 1fr;
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid #ccc;
}

.legal-facts dt {
  color: var(--red-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.legal-facts dd {
  margin: 0;
}

.legal-note {
  margin: 28px 0;
  padding: 22px 24px;
  border-left: 5px solid var(--red);
  background: #ece8e1;
}

.legal-note > :last-child {
  margin-bottom: 0;
}

.legal-updated {
  margin: 0 0 42px;
  color: #555;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 960px) {
  .legal-hero {
    min-height: 360px;
    padding: 62px 0 52px;
  }

  .legal-body {
    grid-template-columns: 1fr;
    gap: 58px;
    padding-top: 64px;
    padding-bottom: 80px;
  }

  .legal-toc {
    position: static;
  }

  .legal-toc nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .legal-toc a:nth-child(odd) {
    padding-right: 18px;
    border-right: 1px solid #ccc;
  }

  .legal-toc a:nth-child(even) {
    padding-left: 18px;
  }

  /* Bei ungerader Anzahl steht der letzte Eintrag allein in der linken Spalte
     und braucht keinen Trennstrich ins Leere. */
  .legal-toc a:nth-child(odd):last-child {
    border-right: 0;
  }
}

@media (max-width: 800px) {
  .legal-main {
    padding-top: 70px;
  }
}

@media (max-width: 440px) {
  .legal-hero {
    min-height: 310px;
    padding: 52px 0 42px;
  }

  /* Bei 320px bleiben rund 280px nutzbare Breite. Die Werte sind so gewählt,
     dass "IMPRESSUM." und "DATENSCHUTZ." in einer Zeile stehen und nicht über
     overflow-wrap mitten im Wort umbrechen. */
  .legal-title {
    font-size: clamp(42px, 14.6vw, 68px);
  }

  .legal-title--long {
    font-size: clamp(38px, 12.4vw, 58px);
  }

  .legal-intro {
    font-size: 19px;
  }

  .legal-body {
    padding-top: 48px;
    padding-bottom: 64px;
  }

  .legal-toc nav {
    grid-template-columns: 1fr;
  }

  .legal-toc a:nth-child(odd),
  .legal-toc a:nth-child(even) {
    padding-right: 0;
    padding-left: 0;
    border-right: 0;
  }

  .legal-facts div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .legal-section {
    padding-bottom: 42px;
  }

  .legal-section + .legal-section {
    padding-top: 42px;
  }
}