@font-face {
  font-family: 'Anybody';
  src: url('/fonts/anybody-normal-0.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Anybody';
  src: url('/fonts/anybody-normal-1.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anybody';
  src: url('/fonts/anybody-normal-2.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('/fonts/chakra-normal-1.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('/fonts/chakra-normal-2.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('/fonts/chakra-normal-3.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/fonts/schibsted-normal-0.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/fonts/schibsted-normal-1.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens.css ---------- */
/* ==================================================================
   Gestaltungsmarken

   Zwei Farben, ein Raster, eine Schrift. Der Wechsel zwischen hellen
   und dunklen Abschnitten ist das einzige Ornament — hart geschnitten,
   ohne Verlauf und ohne Übergangsform.
   ================================================================== */

:root {
  /* --- Farbe ---------------------------------------------------- */
  /* Deep Black und Pure White aus dem Gestaltungshandbuch. */
  --black: #000000;
  --white: #ffffff;
  --off: #f5f5f5; /* ruhiges Weiß für Flächen auf Weiß */

  /* --- Digital Blue ----------------------------------------------
     Die Leitfarbe der Marke und ihre drei Aufhellungen. #067CA6 trägt
     Flächen mit weißer Schrift; die drei helleren Stufen tragen Flächen
     mit schwarzer Schrift. Diese Zuordnung ist keine Geschmacksfrage —
     sie ergibt sich aus dem Kontrast und steht darum weiter unten als
     Regel, nicht nur als Wert. */
  --blue: #067ca6;
  --blue-2: #449dbd;
  --blue-3: #83bed3;
  --blue-4: #c1dee9;

  /* Zwei Sonderfälle, die aus dem Kontrast folgen und nicht aus dem
     Geschmack:

     `--blue-ink` ist das Blau für KLEINE Schrift auf hellem Grund. Das
     reine #067CA6 kommt dort auf 4,34:1 gegen das ruhige Weiß — knapp
     unter den geforderten 4,5. Um acht Prozent abgedunkelt sind es
     5,26:1, und der Farbeindruck bleibt derselbe.

     `--blue-on-dark` ist der Gegenpart für schwarze Abschnitte: Dort
     läuft das volle Blau mit 4,44:1 auf Schwarz ebenfalls zu knapp. */
  --blue-ink: color-mix(in oklab, #067ca6 92%, #000);
  --blue-on-dark: var(--blue-3);

  /* --- Graustufen ------------------------------------------------
     Deep Black und Pure White mit ihren Abstufungen aus dem
     Gestaltungshandbuch. */
  --grey-1: #333333;
  --grey-2: #666666;
  --grey-3: #999999;
  --grey-4: #b3b3b3;
  --grey-5: #cccccc;
  --grey-6: #e6e6e6;

  /* Rollen. Werden je Abschnitt umgeschaltet — siehe .band. */
  --bg: var(--white);
  --fg: var(--black);
  --fg-mute: color-mix(in oklab, var(--fg) 70%, var(--bg));
  --fg-faint: color-mix(in oklab, var(--fg) 55%, var(--bg));
  --line: color-mix(in oklab, var(--fg) 14%, var(--bg));
  --line-strong: color-mix(in oklab, var(--fg) 26%, var(--bg));
  --surface: color-mix(in oklab, var(--fg) 4%, var(--bg));
  --surface-hi: color-mix(in oklab, var(--fg) 7%, var(--bg));

  /* --- Schrift -------------------------------------------------- */
  /* Anzeige: kantig, leicht technisch. Nur für große Grade — im Fließtext
     würde die Breitenachse unruhig wirken. */
  --font-display: 'Anybody', 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font: 'Schibsted Grotesk', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
  /* Bedienelemente: technisch, leicht kantig, mit offenen Punzen. Sie gibt
     Knöpfen und Marken den Ton, bleibt aber auch bei 14 Pixeln lesbar. */
  --font-ui: 'Chakra Petch', 'Anybody', 'Segoe UI', system-ui, sans-serif;

  --step--2: clamp(0.78rem, 0.76rem + 0.09vw, 0.85rem);
  --step--1: clamp(0.88rem, 0.85rem + 0.14vw, 0.95rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1: clamp(1.15rem, 1.07rem + 0.36vw, 1.38rem);
  --step-2: clamp(1.4rem, 1.24rem + 0.78vw, 1.9rem);
  --step-3: clamp(1.8rem, 1.44rem + 1.7vw, 2.9rem);
  --step-4: clamp(1.9rem, 1.35rem + 3.1vw, 4.2rem);
  --step-5: clamp(2.2rem, 1.15rem + 5.4vw, 6.2rem);
  --step-6: clamp(2.5rem, 0.9rem + 8.2vw, 8.4rem);

  /* Große Grade laufen eng, kleine normal. */
  --track-display: -0.035em;
  --track-tight: -0.02em;
  --track-micro: 0.08em;

  /* --- Raum ----------------------------------------------------- */
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --measure: 36rem;
  --wrap: 82rem;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1.1rem;
  --space-m: 1.75rem;
  --space-l: clamp(2.2rem, 1.5rem + 2.6vw, 3.5rem);
  --space-xl: clamp(3.2rem, 2rem + 4.6vw, 5.5rem);
  --space-2xl: clamp(4.5rem, 2.6rem + 7vw, 8rem);
  --space-3xl: clamp(6rem, 3rem + 11vw, 12rem);

  /* --- Form ----------------------------------------------------- */
  --radius-s: 8px;
  --radius: 16px;
  --radius-l: 24px;
  --radius-pill: 999px;

  /* --- Bewegung ------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-mid: 320ms;
  --t-slow: 640ms;

  /* --- Ebenen --------------------------------------------------- */
  --z-head: 70;
  --z-menu: 80;
}

/* Die abgeleiteten Rollen müssen in JEDEM Abschnitt neu gerechnet werden.

   Der Grund ist eine Feinheit der Eigenschaftsauflösung: `--fg-mute` steht
   oben am `:root`, und genau dort wird das `color-mix` einmal ausgerechnet —
   mit dem damaligen Schwarz auf Weiß. Was danach vererbt wird, ist das
   fertige Grau, kein Rezept mehr. Ein schwarzer Abschnitt schaltet zwar
   `--fg` und `--bg` um, das Grau bleibt aber, wie es war: dunkelgrau auf
   Schwarz. Nur eine erneute Deklarierung im Abschnitt selbst rechnet neu.

   Diese Regel steht bewusst VOR den Abschnittsklassen — der schwarze
   Abschnitt hebt danach seine eigenen Flächenwerte wieder heraus. */
.band--white,
.is-white,
.band--off,
.is-off,
.band--black,
.is-black,
.menu {
  --fg-mute: color-mix(in oklab, var(--fg) 70%, var(--bg));
  --fg-faint: color-mix(in oklab, var(--fg) 55%, var(--bg));
  --line: color-mix(in oklab, var(--fg) 14%, var(--bg));
  --line-strong: color-mix(in oklab, var(--fg) 26%, var(--bg));
  --surface: color-mix(in oklab, var(--fg) 4%, var(--bg));
  --surface-hi: color-mix(in oklab, var(--fg) 7%, var(--bg));
}

/* Ein Abschnitt trägt entweder Papier oder Schwarz. Dazwischen liegt
   nichts — kein Verlauf, keine Form, nur die Kante. */
.band--white,
.is-white {
  --bg: var(--white);
  --fg: var(--black);
}

.band--off,
.is-off {
  --bg: var(--off);
  --fg: var(--black);
}

.band--black,
.is-black {
  --bg: var(--black);
  --fg: var(--white);
  --surface: color-mix(in oklab, var(--white) 7%, var(--black));
  --surface-hi: color-mix(in oklab, var(--white) 11%, var(--black));
}


/* ---------- base.css ---------- */
/* ==================================================================
   Grundlage
   ================================================================== */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  background: var(--black);
}

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

body {
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.is-locked {
  overflow: hidden;
}

/**
 * Ein Element mit `hidden` verschwindet — auch wenn seine Klasse ihm ein
 * eigenes `display` gibt. Ohne diese Regel gewinnt jede Klasse mit
 * `display: grid` gegen das Attribut, und ausgeblendete Blöcke stehen
 * plötzlich sichtbar auf der Seite. Genau so stand die Erfolgsmeldung
 * „Angekommen." unter dem noch offenen Formular.
 */
[hidden] {
  display: none !important;
}

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

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

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

ul,
ol {
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
}

::selection {
  background: var(--black);
  color: var(--white);
}

.band--black ::selection {
  background: var(--white);
  color: var(--black);
}

/* Fokus ist sichtbar. Immer. */
:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 3px;
}

@supports (scrollbar-color: black white) {
  html {
    scrollbar-color: color-mix(in oklab, var(--black) 40%, var(--white)) var(--white);
    scrollbar-width: thin;
  }
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  top: var(--space-s);
  left: var(--space-s);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--black);
  color: var(--white);
  font-size: var(--step--1);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--t-fast) var(--ease);
}

.skip:focus-visible {
  transform: translateY(0);
  outline-color: var(--white);
}


/* ---------- type.css ---------- */
/* ==================================================================
   Schrift

   Eine Familie, das ganze Gewichtsband. Große Grade laufen schwer und
   eng, Fließtext leicht und offen. Der Kontrast entsteht aus Größe und
   Gewicht, nicht aus einer zweiten Schrift.
   ================================================================== */

/**
 * Große Grade laufen in der kantigen Anzeigeschrift, leicht schmal gestellt.
 * Die Breitenachse steht auf 96 — knapp unter normal, dadurch wirken die
 * Buchstaben aufrechter und die Zeile geschlossener.
 */
.display,
.h1,
.h2,
.h3,
.hero__title,
.marquee__item,
.plan__price,
.plan__name,
.stats__value,
.metrics__v,
.menu__t,
.site-foot__claim,
.site-foot__mark span,
.mark,
.disciplines__t,
.post-row__title,
.manifesto,
.card__title,
.work__title {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 96;
  font-weight: 700;
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

.display {
  line-height: 1.02;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}

.h1 {
  font-size: var(--step-5);
  line-height: 1;
  letter-spacing: var(--track-display);
}

.h2 {
  font-size: var(--step-4);
  line-height: 1.04;
  letter-spacing: var(--track-display);
}

.h3 {
  font-size: var(--step-3);
  line-height: 1.1;
}

.h4 {
  font-size: var(--step-2);
  line-height: 1.2;
}

.h5 {
  font-size: var(--step-1);
  line-height: 1.3;
  font-weight: 600;
}

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 38ch;
  color: var(--fg-mute);
  text-wrap: pretty;
}

p {
  text-wrap: pretty;
}

/* Kleine Auszeichnung über Überschriften. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: var(--space-s);
}

.eyebrow::before {
  content: '';
  width: 1.6em;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.micro {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* Fließtext in Journalbeiträgen und Rechtsseiten. */
.prose {
  max-width: var(--measure);
  margin-inline: auto;
  font-size: var(--step-1);
  color: var(--fg-mute);
}

.prose > * + * {
  margin-top: var(--space-s);
}

.prose h2 {
  margin-top: var(--space-l);
  color: var(--fg);
  font-size: var(--step-2);
}

.prose strong {
  color: var(--fg);
}

.bullets {
  display: grid;
  gap: var(--space-2xs);
  padding-left: 0;
}

.bullets li {
  position: relative;
  padding-left: 1.6em;
}

.bullets li::before {
  content: '';
  position: absolute;
  left: 0.15em;
  top: 0.62em;
  width: 0.5em;
  height: 0.5em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0.45;
}

/* Herausgestelltes Zitat. */
.pull {
  margin-block: var(--space-l);
  padding: var(--space-m);
  border-radius: var(--radius);
  background: var(--surface);
}

.pull p {
  font-size: var(--step-2);
  line-height: 1.25;
  letter-spacing: var(--track-tight);
  font-weight: 600;
  color: var(--fg);
  text-wrap: balance;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

/* ==================================================================
   Lange Wörter

   Deutsch baut Wörter wie „Geschäftsbedingungen". In großen Graden ist so
   ein Wort breiter als ein Telefon — und schiebt dann die ganze Seite zur
   Seite. Trennen ist erlaubt; die Sprache steht am <html>, die Trennregeln
   kommen daher aus dem Browser.
   ================================================================== */

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4,
.display,
.hero__title {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Fließtext darf ebenfalls trennen, aber erst wenn es sonst nicht passt. */
p,
li,
dd,
dt {
  overflow-wrap: break-word;
}

/* Die Bedienschrift trägt alles, was man anfassen kann: Knöpfe, Marke,
   Navigation, Kennzeichnungen. Fließtext bleibt bei der ruhigen Grotesk. */
.mark,
.eyebrow,
.badge,
.tag,
.nav a,
.menu__link,
.deck__dot,
.chip,
.blog-bar__count,
.plan__name,
.cube__face,
label,
.field legend {
  font-family: var(--font-ui);
}

.eyebrow,
.badge,
.tag {
  letter-spacing: 0.1em;
}

/* Beiträge dürfen breiter laufen.

   36rem sind für einen Roman richtig, für einen Fachbeitrag mit
   Zwischentiteln und Aufzählungen zu schmal: Der Text steht dann als
   schmale Säule in einem leeren Feld. 46rem sind rund 85 Zeichen, immer
   noch gut lesbar und deutlich ruhiger im Satzspiegel. */
.article .prose,
.prose--wide {
  max-width: 46rem;
  font-size: var(--step-1);
}

.article .prose h2 {
  font-size: var(--step-3);
}


/* ---------- layout.css ---------- */
/* ==================================================================
   Raster und Abschnitte
   ================================================================== */

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

.wrap--narrow {
  width: min(100% - var(--gutter) * 2, 58rem);
}

/**
 * Ein Abschnitt. Die Kante zum nächsten ist hart — kein Verlauf, keine
 * Form dazwischen. Der Wechsel selbst ist das Gestaltungsmittel.
 */
.band {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--space-2xl);
}

.band--tight {
  padding-block: var(--space-xl);
}

.band--flush {
  padding-bottom: 0;
}

/* Gleichfarbige Nachbarn rücken zusammen, damit keine doppelte Luft entsteht. */
.band--white + .band--white,
.band--off + .band--off,
.band--black + .band--black {
  padding-top: 0;
}

/* Abschnittskopf */
.sect-head {
  max-width: 44rem;
  margin-bottom: var(--space-xl);
}

.sect-head--center {
  margin-inline: auto;
  text-align: center;
}

.sect-head--center .eyebrow {
  justify-content: center;
}

.sect-head--center .lead {
  margin-inline: auto;
}

.sect-head .lead {
  margin-top: var(--space-s);
}

/* Kopf links, Knopf rechts — auf schmalen Geräten untereinander. */
.sect-head--split {
  display: grid;
  gap: var(--space-m);
  max-width: none;
  align-items: end;
}

@media (min-width: 52rem) {
  .sect-head--split {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.sect-foot {
  margin-top: var(--space-xl);
}

/* Zwei Spalten: schmale Marke links, Inhalt rechts. */
.split {
  display: grid;
  gap: var(--space-m) var(--space-l);
  padding-block: var(--space-xl);
  border-top: 1px solid var(--line);
}

.split:last-child {
  border-bottom: 1px solid var(--line);
}

.split__body {
  display: grid;
  gap: var(--space-s);
  max-width: 44rem;
  color: var(--fg-mute);
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: minmax(11rem, 1fr) minmax(0, 2.6fr);
  }
}

/* Allgemeines Kachelraster.
   Die Null als Untergrenze ist Pflicht, nicht Geschmack: Rasterstücke
   haben von Haus aus `min-width: auto` und ziehen die Spalte damit auf
   das längste unteilbare Wort auf. Im Deutschen genügt dafür ein Wort
   wie „Geschäftsausstattung" auf einem schmalen Telefon, und die ganze
   Seite bekommt einen Querlauf. */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
}

@media (min-width: 44rem) {
  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 64rem) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (min-width: 44rem) and (max-width: 63.99rem) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ---------- components.css ---------- */
/* ==================================================================
   Bauteile
   ================================================================== */

/* --- Verweise ---------------------------------------------------- */

.link {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size var(--t-mid) var(--ease);
  padding-bottom: 0.06em;
}

.link:hover,
.link:focus-visible {
  background-size: 0 1px;
  background-position: 100% 100%;
}

/* Verweis mit Pfeil, der beim Überfahren anzieht. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
}

.arrow-link svg {
  width: 1em;
  height: 1em;
  transition: transform var(--t-mid) var(--ease);
}

.arrow-link:hover svg,
.arrow-link:focus-visible svg {
  transform: translateX(0.3em);
}

/* --- Knöpfe ------------------------------------------------------ */

/**
 * Ein Körper, keine Zeichnung.
 *
 * Die Tiefe kommt aus drei sehr kurzen Schatten übereinander: eine harte
 * Kante direkt unter dem Knopf, die ihn wie eine Materialstärke aussehen
 * lässt, darunter ein weicher Wurf auf den Untergrund, und innen oben ein
 * heller Streifen als Lichtkante. Beim Drücken sinkt der Knopf um genau die
 * Materialstärke ein, und alle drei Schatten schrumpfen mit. Das ist die
 * Mechanik einer echten Taste, nicht die eines Aufklebers.
 */
.btn {
  --depth: 3px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3rem;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 0 var(--btn-light, transparent),
    0 var(--depth) 0 0 var(--btn-edge, transparent),
    0 calc(var(--depth) + 6px) 14px calc(var(--depth) * -1) rgb(0 0 0 / 0.3);
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.btn:hover {
  --depth: 5px;
  transform: translateY(-2px);
}

.btn:active {
  --depth: 0px;
  transform: translateY(3px);
  transition-duration: 70ms;
}

.btn--solid {
  background: var(--fg);
  color: var(--bg);
  /* Die Materialstärke ist eine abgedunkelte Version der eigenen Farbe. */
  --btn-edge: color-mix(in oklab, var(--fg) 62%, #000);
  --btn-light: color-mix(in oklab, var(--bg) 22%, transparent);
}

.btn--solid:hover,
.btn--solid:focus-visible {
  background: color-mix(in oklab, var(--fg) 82%, var(--bg));
}

.btn--line {
  border-color: var(--line-strong);
  color: var(--fg);
  background: var(--bg);
  --btn-edge: var(--line-strong);
}

.btn--line:hover {
  border-color: var(--fg);
}

.btn--line:hover,
.btn--line:focus-visible {
  border-color: var(--fg);
  background: var(--surface);
}

.btn--ghost {
  color: var(--fg);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--surface-hi);
}

.btn--lg {
  min-height: 3.5rem;
  padding-inline: 2rem;
  font-size: var(--step-0);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* --- Marken ------------------------------------------------------ */

.tag {
  display: inline-block;
  padding: 0.3em 0.75em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--step--2);
  font-weight: 500;
  color: var(--fg-mute);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.35em 0.8em;
  /* Eine Pille bricht nicht um. Wird der Text länger, wird die Pille
     breiter, und die Zeile darüber weicht aus. Zwei Zeilen in einem Oval
     sehen nach Fehler aus, nicht nach Auszeichnung. */
  white-space: nowrap;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--surface-hi);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.badge--invert {
  background: var(--fg);
  color: var(--bg);
}

.chip {
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--fg-mute);
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.chip:hover {
  border-color: var(--fg);
  color: var(--fg);
}

.chip.is-active {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xl);
}

/* --- Karte ------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-m);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--bg);
  transition:
    border-color var(--t-mid) var(--ease),
    transform var(--t-mid) var(--ease);
}

.card--plain {
  border: 0;
  padding: 0;
  background: none;
}



.card__num {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  /* Nicht `--fg-faint`: Auf schwarzem Grund ergibt das stille Grau nur
     4,30:1 und liegt damit unter der Marke für kleine Schrift. Die
     kräftigere Stufe sieht auf hellem Grund praktisch gleich aus und
     hält den Kontrast auch auf Schwarz. */
  color: var(--fg-mute);
}

.card__title {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--track-tight);
}

.card__text {
  color: var(--fg-mute);
}

/* --- Projektkacheln ---------------------------------------------- */

.work {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 48rem) {
  .work {
    grid-template-columns: repeat(2, 1fr);
  }
}

.work__item[hidden] {
  display: none;
}

.work__link {
  display: grid;
  gap: var(--space-s);
}

.work__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-l);
  background: var(--surface);
  --art-ink: var(--black);
  --art-paper: var(--off);
}

.work__media .art {
  width: 100%;
  height: 100%;
  transition: transform var(--t-slow) var(--ease);
}

.work__link:hover .art,
.work__link:focus-visible .art {
  transform: scale(1.03);
}

.work__badge {
  position: absolute;
  top: var(--space-s);
  left: var(--space-s);
  z-index: 1;
  background: var(--white);
  color: var(--black);
}

.work__meta {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--fg-mute);
}

.work__title {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  line-height: 1.15;
  max-width: 22ch;
}

.work__text {
  color: var(--fg-mute);
  max-width: 42ch;
}

.work__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  margin-top: var(--space-3xs);
}

.work__empty {
  color: var(--fg-mute);
  padding-block: var(--space-l);
}

/* --- Logoband ---------------------------------------------------- */

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-m) var(--space-l);
}

.logos span {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  color: var(--fg-faint);
  transition: color var(--t-fast) var(--ease);
}

.logos:hover span {
  color: var(--fg-faint);
}

.logos span:hover {
  color: var(--fg);
}

/* --- Kennzahlen -------------------------------------------------- */

.stats {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 40rem) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stats__item {
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
}

.stats__value {
  display: block;
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--track-display);
  font-variant-numeric: tabular-nums;
}

.stats__label {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--fg-mute);
  max-width: 16ch;
}

/* --- Schrittfolge ------------------------------------------------ */

.steps {
  display: grid;
  gap: var(--space-m);
  counter-reset: step;
}

@media (min-width: 56rem) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.steps__item {
  display: grid;
  gap: var(--space-2xs);
  padding-top: var(--space-s);
  border-top: 2px solid var(--fg);
}

.steps__n {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  color: var(--fg-mute);
}

.steps__item h3 {
  font-size: var(--step-2);
}

.steps__item p {
  color: var(--fg-mute);
  font-size: var(--step--1);
}

/* --- Zitate ------------------------------------------------------ */

.quote {
  display: grid;
  gap: var(--space-m);
  padding: var(--space-m);
  border-radius: var(--radius-l);
  background: var(--surface);
}

.quote blockquote p {
  font-size: var(--step-2);
  line-height: 1.3;
  letter-spacing: var(--track-tight);
  font-weight: 600;
}

.quote figcaption {
  display: grid;
  gap: 0.1rem;
  font-size: var(--step--1);
  font-weight: 600;
}

.quote figcaption span {
  font-weight: 400;
  color: var(--fg-mute);
}

/* --- Pakete ------------------------------------------------------ */

.switch {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-hi);
  margin-bottom: var(--space-l);
}

.switch button {
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--fg-mute);
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.switch button[aria-selected='true'] {
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.plans {
  display: grid;
  gap: var(--space-m);
  align-items: start;
}

@media (min-width: 56rem) {
  .plans {
    grid-template-columns: repeat(3, 1fr);
  }
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  height: 100%;
  padding: var(--space-m);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--bg);
}

/* Die empfohlene Karte trägt die Umkehrung — das ist die einzige
   Hervorhebung, die es hier braucht. */
.plan--featured {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
  --fg-mute: color-mix(in oklab, var(--bg) 72%, var(--fg));
  --line: color-mix(in oklab, var(--bg) 22%, var(--fg));
}

.plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.plan__name {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--track-tight);
}

.plan--featured .badge {
  background: var(--bg);
  color: var(--fg);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: var(--track-display);
}

.plan__price small {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fg-mute);
}

.plan__text {
  color: var(--fg-mute);
  font-size: var(--step--1);
}

.plan__list {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
}

.plan__list li {
  display: grid;
  grid-template-columns: 1.1em 1fr;
  gap: 0.6em;
  align-items: start;
}

.plan__list svg {
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.28em;
}

.plan .btn {
  margin-top: auto;
}

.plan--featured .btn--solid {
  background: var(--bg);
  color: var(--fg);
}

.plan--featured .btn--solid:hover {
  background: color-mix(in oklab, var(--bg) 85%, var(--fg));
}

/* --- Fragen ------------------------------------------------------ */

.faq {
  display: grid;
  gap: var(--space-2xs);
  max-width: 52rem;
}

.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  transition: border-color var(--t-fast) var(--ease);
}

.faq__item[open] {
  border-color: var(--line-strong);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-s) var(--space-m);
  font-size: var(--step-1);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  min-height: 3.5rem;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

/* Plus, das beim Öffnen zum Minus wird. */
.faq__sign {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
}

.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t-mid) var(--ease);
}

.faq__sign::after {
  transform: rotate(90deg);
}

.faq__item[open] .faq__sign::after {
  transform: rotate(0deg);
}

.faq__a {
  padding: 0 var(--space-m) var(--space-m);
  max-width: 58ch;
  color: var(--fg-mute);
}

/* --- Disziplinenliste -------------------------------------------- */

.disciplines {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.disciplines__item {
  border-bottom: 1px solid var(--line);
}

.disciplines__item a {
  display: grid;
  gap: var(--space-2xs) var(--space-m);
  align-items: center;
  padding-block: var(--space-m);
  transition: padding-left var(--t-mid) var(--ease);
}

.disciplines__item a:hover,
.disciplines__item a:focus-visible {
  padding-left: var(--space-s);
}

.disciplines__n {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  color: var(--fg-faint);
}

.disciplines__t {
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 1.05;
}

.disciplines__s {
  color: var(--fg-mute);
  max-width: 42ch;
}

.disciplines__arrow {
  justify-self: end;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-mid) var(--ease);
}

.disciplines__arrow svg {
  width: 0.9rem;
  height: 0.9rem;
}

.disciplines__item a:hover .disciplines__arrow,
.disciplines__item a:focus-visible .disciplines__arrow {
  background: var(--fg);
  color: var(--bg);
  transform: rotate(-45deg);
}

@media (min-width: 60rem) {
  .disciplines__item a {
    grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr) 3rem;
  }
}

/* --- Leistungen (Detailseite) ------------------------------------ */

.service {
  display: grid;
  gap: var(--space-s) var(--space-l);
  padding-block: var(--space-xl);
  border-top: 1px solid var(--line);
  scroll-margin-top: 7rem;
}

.service:last-child {
  border-bottom: 1px solid var(--line);
}

.service__n {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  color: var(--fg-faint);
}

.service__body {
  display: grid;
  gap: var(--space-s);
  max-width: 46rem;
}

.service__body .bullets {
  color: var(--fg-mute);
}

@media (min-width: 52rem) {
  .service {
    grid-template-columns: 6rem minmax(0, 1fr);
  }
}

/* --- Menschen ---------------------------------------------------- */

.people {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 44rem) {
  .people {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 68rem) {
  .people {
    grid-template-columns: repeat(3, 1fr);
  }
}

.person {
  display: grid;
  gap: var(--space-2xs);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
}

.person__name {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: var(--track-tight);
}

.person__role {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--fg-mute);
}

.person__note {
  font-size: var(--step--1);
  color: var(--fg-faint);
}

/* --- Kennwerte im Projekt ---------------------------------------- */

.metrics {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 44rem) {
  .metrics {
    grid-template-columns: repeat(3, 1fr);
  }
}

.metrics li {
  padding: var(--space-m);
  border-radius: var(--radius-l);
  background: var(--surface);
}

.metrics__v {
  display: block;
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--track-display);
}

.metrics__l {
  display: block;
  margin-top: var(--space-2xs);
  color: var(--fg-mute);
  font-size: var(--step--1);
  max-width: 24ch;
}

/* --- Journalzeilen ----------------------------------------------- */

.posts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.post-row {
  border-bottom: 1px solid var(--line);
}

.post-row a {
  display: grid;
  gap: var(--space-2xs) var(--space-m);
  align-items: center;
  padding-block: var(--space-m);
  transition: padding-left var(--t-mid) var(--ease);
}

.post-row a:hover,
.post-row a:focus-visible {
  padding-left: var(--space-s);
}

.post-row__date,
.post-row__meta {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.post-row__title {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  line-height: 1.15;
  max-width: 26ch;
}

.post-row__lead {
  color: var(--fg-mute);
  max-width: 44ch;
  font-size: var(--step--1);
}

@media (min-width: 62rem) {
  .post-row a {
    grid-template-columns: 8rem minmax(0, 1.4fr) minmax(0, 1fr) 7rem;
  }

  .post-row__meta {
    text-align: right;
  }
}

/* --- Pakete: Rahmen ---------------------------------------------- */

.plans-switch {
  display: flex;
  justify-content: center;
}

/* Ohne JavaScript stehen beide Gruppen untereinander, jede mit eigener
   Überschrift. Das Skript blendet die Überschriften aus und schaltet um. */
.plans-legend {
  margin-bottom: var(--space-s);
}

.plans-legend + .plans {
  margin-bottom: var(--space-l);
}

.plans-note {
  margin-top: var(--space-l);
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.faq-wrap {
  display: grid;
  justify-content: center;
}

.service-list {
  border-bottom: 0;
}

/* --- Dialog mit dem Anfrageformular ------------------------------ */

.modal {
  /* Ein <dialog> zentriert sich über margin:auto. Die Nullstellung aller
     Außenabstände in base.css nimmt ihm das — deshalb hier zurückholen. */
  margin: auto;
  width: min(100% - 2rem, 58rem);
  max-height: min(94vh, 66rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-l);
  background: var(--white);
  color: var(--black);
  overflow: auto;
  opacity: 0;
  transform: translateY(2rem) scale(0.97);
  transition:
    opacity var(--t-mid) var(--ease),
    transform var(--t-mid) var(--ease),
    overlay var(--t-mid) allow-discrete,
    display var(--t-mid) allow-discrete;
}

.modal.is-open {
  opacity: 1;
  transform: none;
}

.modal::backdrop {
  background: rgb(10 10 11 / 0.55);
  backdrop-filter: blur(3px);
}

.modal__panel {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--fg-mute);
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.modal__close:hover,
.modal__close:focus-visible {
  background: var(--surface-hi);
  color: var(--fg);
}

.modal__close svg {
  width: 1.1rem;
  height: 1.1rem;
}

.modal .form {
  margin-top: var(--space-m);
}

/* --- Preise: Zusatz ---------------------------------------------- */

.plan__from {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--fg-mute);
  letter-spacing: 0;
}

.plan__price {
  flex-wrap: wrap;
}

/* Vier Karten nebeneinander, sobald der Platz reicht. */
@media (min-width: 56rem) {
  .plans {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 78rem) {
  .plans {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Symbol auf einer Karte — dieselbe Größe wie ein Absatz, damit die
   Karte nicht auseinanderfällt. */
.card__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--surface-hi);
}

.card__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* --- Blog: Leiste, Suche, Karten --------------------------------- */

.blog-bar {
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-xl);
}

@media (min-width: 56rem) {
  .blog-bar {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr) auto;
    align-items: center;
  }
}

.search {
  position: relative;
}

.search__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  color: var(--fg-mute);
  pointer-events: none;
}

.search input {
  padding-left: 2.75rem;
  border-radius: var(--radius-pill);
}

/* Das eigene Kreuz des Suchfelds passt nicht zum Rest — Escape leert. */
.search input::-webkit-search-cancel-button {
  appearance: none;
}

.filters--flush {
  margin-bottom: 0;
}

.blog-bar__count {
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.blog-grid {
  align-items: start;
}

.post-card[hidden] {
  display: none;
}

.post-card__link {
  display: grid;
  gap: var(--space-xs);
  height: 100%;
  padding: var(--space-s);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--bg);
  transition:
    border-color var(--t-mid) var(--ease),
    transform var(--t-mid) var(--ease);
}



/* Der Kopf der Karte trägt Thema und Pfeil — und die leichte Neigung. */
.post-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-m) var(--space-s) var(--space-s);
  border-radius: var(--radius);
  background: var(--surface);
  min-height: 7rem;
}

.post-card__mark {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-mid) var(--ease);
}

.post-card__mark svg {
  width: 0.9rem;
  height: 0.9rem;
}

.post-card__link:hover .post-card__mark,
.post-card__link:focus-visible .post-card__mark {
  background: var(--fg);
  color: var(--bg);
  transform: rotate(-45deg);
}

.post-card__date,
.post-card__author {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--fg-faint);
}

.post-card__title {
  font-size: var(--step-2);
  line-height: 1.15;
}

.post-card__lead {
  color: var(--fg-mute);
  font-size: var(--step--1);
}

.post-card__author {
  margin-top: auto;
  padding-top: var(--space-2xs);
}

.blog-empty {
  padding-block: var(--space-xl);
  text-align: center;
  color: var(--fg-mute);
}

/* --- Würfel ------------------------------------------------------
   Flache Quadrate, die sich anfassen lassen. Die Tiefe entsteht aus
   einer versetzten zweiten Fläche und einem Schatten — kein echtes
   3D, aber genug, damit die Hand sie für Gegenstände hält.
   ---------------------------------------------------------------- */

.cubes {
  position: relative;
  height: clamp(17rem, 34vw, 25rem);
  margin-top: var(--space-l);
  border: 1px dashed color-mix(in oklab, var(--fg) 22%, var(--bg));
  border-radius: var(--radius-l);
  overflow: hidden;
  /* Die Fläche gibt senkrechtes Rollen frei, damit man auf dem Telefon
     nicht hängen bleibt, wenn man beim Hochwischen die Klötze trifft.
     Nur der Klotz selbst nimmt die Geste ganz an sich - siehe .cube. */
  touch-action: pan-y;
}

/* Ohne JavaScript liegen die Würfel als ruhige Reihe da. */
.cubes:not(.is-live) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  height: auto;
  padding: var(--space-m);
  border-style: solid;
}

.cube {
  display: grid;
  place-items: center;
  width: clamp(5rem, 10vw, 7.5rem);
  aspect-ratio: 1;
  border-radius: var(--radius);
  border: 1.5px solid var(--black);
  background: var(--accent, var(--white));
  /* Die versetzte Fläche ist eine abgedunkelte Version der eigenen Farbe.
     Ein schwarzer Schatten verschwände auf dem schwarzen Abschnitt, und
     genau diese Fläche IST die Tiefe. */
  --side: color-mix(in oklab, var(--accent, var(--white)) 48%, #000);
  color: var(--black);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  user-select: none;
  /* Ziehen braucht die volle Hoheit über die Geste. */
  touch-action: none;
  cursor: grab;
  /* Die Tiefe ist eine harte zweite Fläche, kein Weichzeichner. Darunter
     liegt ein sehr weicher Schein, der den Klotz vom Grund abhebt. */
  box-shadow:
    6px 6px 0 0 var(--side),
    0 16px 34px rgb(0 0 0 / 0.4);
  transition: box-shadow var(--t-fast) var(--ease);
}

/* Acht Klötze, acht Farben. Die Reihenfolge folgt der Akzentleiter. */
/* Die Klötze tragen die Blaustufen der Marke. Nur die drei helleren und
   Weiß kommen hier vor: Auf ihnen steht die schwarze Beschriftung sicher
   über der Kontrastmarke. Das volle #067CA6 fehlt bewusst — dort wäre
   schwarze Schrift auf dieser Größe zu knapp. */
.cube:nth-child(1) { --accent: var(--blue-4); }
.cube:nth-child(2) { --accent: var(--blue-3); }
.cube:nth-child(3) { --accent: var(--grey-6); }
.cube:nth-child(4) { --accent: var(--blue-2); }
.cube:nth-child(5) { --accent: var(--blue-4); }
.cube:nth-child(6) { --accent: var(--grey-5); }
.cube:nth-child(7) { --accent: var(--blue-3); }
.cube:nth-child(8) { --accent: var(--white); }

.cubes.is-live .cube {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.cube.is-held {
  cursor: grabbing;
  z-index: 2;
  box-shadow:
    10px 10px 0 0 var(--side),
    0 30px 56px rgb(0 0 0 / 0.5);
}

.cube:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
}

.cubes__hint {
  margin-top: var(--space-s);
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

/* Der Hinweis verschwindet, sobald jemand verstanden hat, wie es geht. */
.cubes.is-touched + .cubes__hint {
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .cubes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    height: auto;
    padding: var(--space-m);
    border-style: solid;
  }

  .cubes.is-live .cube {
    position: static;
    transform: none !important;
  }

  .cubes__hint {
    display: none;
  }
}

/* ==================================================================
   Farbige Flächen

   Eine Karte mit `tint` bekommt eine Akzentfarbe als Grund. Wichtig ist die
   zweite Zeile: Sie schaltet die Rollen um, damit alles darin — gedämpfter
   Text, Linien, Flächen — gegen die neue Farbe gerechnet wird und nicht gegen
   das Weiß des Abschnitts. Sonst stünde blasses Grau auf Gelb.
   ================================================================== */

/**
 * Karten mit Körper.
 *
 * Kein Rahmenstrich als einziges Mittel und kein versetzter Klotz. Die Tiefe
 * kommt aus zwei weichen Schatten: einem sehr kurzen, der die Kante absetzt,
 * und einem langen, flachen darunter, der die Karte über das Papier hebt.
 * Beim Überfahren steigt sie und der lange Schatten wird länger und weicher,
 * so wie es ein Gegenstand täte, den man anhebt.
 */
.tint {
  position: relative;
}

/* ==================================================================
   Leistungen auf der Startseite als farbige Karten

   Vorher war das eine Liste mit Trennlinien. Vier Farbflächen sagen
   dasselbe schneller und geben der ansonsten schwarzweißen Seite den
   Punkt, an dem man sie wiedererkennt.
   ================================================================== */

.disciplines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-m);
  border-top: 0;
}

.disciplines__item {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  background: var(--bg);
  transition:
    border-color var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease),
    transform var(--t-mid) var(--ease);
}



.disciplines__item a {
  grid-template-columns: 1fr;
  align-items: start;
  align-content: start;
  height: 100%;
  padding: var(--space-m);
  gap: var(--space-2xs);
}

/* Das Anrücken beim Überfahren gehörte zur Listenform und stört in der Karte. */
.disciplines__item a:hover,
.disciplines__item a:focus-visible {
  padding-left: var(--space-m);
}

.disciplines__t {
  font-size: var(--step-2);
}

.disciplines__s {
  max-width: none;
}

.disciplines__arrow {
  justify-self: start;
  margin-top: auto;
}

@media (min-width: 60rem) {
  .disciplines__item a {
    grid-template-columns: 1fr;
  }
}

/* ==================================================================
   Blogkarten auf gleiche Größe

   Vorher richtete sich jede Karte nach ihrem eigenen Text, und drei
   verschieden hohe Kacheln standen nebeneinander. Jetzt bestimmt die
   Reihe die Höhe: gleicher Kopf, gleich viele Zeilen Anriss, Verfasser
   immer unten. Die Karte trägt zusätzlich die Farbe ihres Themas.
   ================================================================== */

.blog-grid {
  align-items: stretch;
}

.post-card {
  display: flex;
}

.post-card__link {
  width: 100%;
  grid-template-rows: auto auto auto 1fr auto;
}



/* Der Kopf ist bei jeder Karte gleich hoch und trägt die Themenfarbe. */
.post-card__top {
  min-height: 6.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
}





/* Drei Zeilen Anriss, egal wie lang der Text ist. Was fehlt, steht im
   Beitrag: die Karte ist eine Einladung, keine Zusammenfassung. */
.post-card__lead {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* Drei Zeilen: So passt jede Überschrift ganz hinein, und die Karten
   bleiben trotzdem gleich hoch. Ein abgeschnittener Titel wäre der
   schlechteste Kompromiss von beiden. */
.post-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  min-height: 3.45em;
}


/* ==================================================================
   Tiefe ohne Zeichnung

   Zwei Schatten, beide weich: ein sehr kurzer setzt die Kante vom Papier
   ab, ein langer flacher darunter hebt die Fläche an. Beim Überfahren
   steigt die Karte, der lange Schatten wird länger und weicher. Das ist
   das Verhalten eines Gegenstands, nicht eines gezeichneten Kastens. Die
   Werte stehen einmal hier und gelten für jede Fläche, die abheben soll.
   ================================================================== */

:root {
  --raise: 0 1px 2px rgb(0 0 0 / 0.05), 0 10px 24px -14px rgb(0 0 0 / 0.28);
  --raise-hi: 0 2px 6px rgb(0 0 0 / 0.07), 0 26px 44px -22px rgb(0 0 0 / 0.4);
}

.disciplines__item,
.post-card__link,
.card,
.plan,
.quote {
  box-shadow: var(--raise);
  transition:
    border-color var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease),
    transform var(--t-mid) var(--ease);
}

.disciplines__item:hover,
.disciplines__item:focus-within,
.post-card__link:hover,
.post-card__link:focus-visible,
a.card:hover,
.card:has(a:hover) {
  box-shadow: var(--raise-hi);
  transform: translateY(-5px);
  border-color: var(--line-strong);
}

/* Die Pfeile stehen bei allen Karten auf derselben Linie. Dafür muss die
   Zeile über ihnen den Rest der Höhe schlucken, sonst rutscht der Pfeil
   dorthin, wo der Text zufällig endet. */
.disciplines__item a {
  grid-template-rows: auto auto 1fr auto;
}

.disciplines__arrow {
  margin-top: var(--space-s);
  align-self: end;
}


/* ---------- sections.css ---------- */
/* ==================================================================
   Seitenteile
   ================================================================== */

/* --- Kopfzeile ---------------------------------------------------
   Ganz oben schwebt sie unsichtbar über dem Seitenkopf. Sobald man
   scrollt, wird sie zu einer weißen Leiste mit eigener Fläche — damit
   bleibt sie über hellen wie über schwarzen Abschnitten lesbar, ohne
   dass irgendetwas umgeschaltet werden müsste.
   ---------------------------------------------------------------- */

.site-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-head);
  padding: clamp(0.6rem, 1.4vw, 1rem) 0;
  transition: transform var(--t-slow) var(--ease);
}

.site-head.is-hidden {
  transform: translateY(-130%);
}

.site-head__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--black);
  transition:
    background-color var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease);
}

.site-head.is-stuck .site-head__bar {
  background: var(--white);
  border-color: color-mix(in oklab, var(--black) 10%, var(--white));
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.06);
}

/* Wortmarke */
.mark {
  font-size: var(--step-1);
  font-weight: 800;
  letter-spacing: -0.03em;
  padding-block: 0.35rem;
}

.site-nav {
  display: none;
}

.site-nav ul {
  display: flex;
  gap: var(--space-2xs);
}

.site-nav a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 500;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  background: color-mix(in oklab, var(--black) 7%, transparent);
}

.site-nav a[aria-current='page'] {
  font-weight: 700;
}

.site-head__end {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}



.site-head .btn {
  min-height: 2.75rem;
  padding-inline: 1.2rem;
  background: var(--black);
  color: var(--white);
}

.site-head .btn:hover {
  background: color-mix(in oklab, var(--black) 82%, var(--white));
}

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  color: inherit;
}

.burger__lines {
  display: block;
  width: 1.15rem;
}

.burger__lines i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-mid) var(--ease);
}

.burger__lines i + i {
  margin-top: 5px;
}

[aria-expanded='true'] .burger__lines i:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

[aria-expanded='true'] .burger__lines i:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

@media (min-width: 64rem) {
  .site-nav {
    display: block;
  }

  .burger {
    display: none;
  }
}

@media (max-width: 63.99rem) {
  .site-head__cta {
    display: none;
  }
}

/* --- Ausklappmenü ------------------------------------------------ */

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--black);
  color: var(--white);
  --bg: var(--black);
  --fg: var(--white);
  display: grid;
  align-content: center;
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}

.menu[hidden] {
  display: none;
}

.menu.is-open {
  opacity: 1;
}

.menu__inner {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
  padding-block: 6rem var(--space-l);
}

.menu__list li {
  border-bottom: 1px solid color-mix(in oklab, var(--white) 16%, var(--black));
  opacity: 0;
  transform: translateY(0.8rem);
}

.menu.is-open .menu__list li {
  animation: menu-in 460ms var(--ease) forwards;
  animation-delay: calc(80ms + var(--i) * 45ms);
}

@keyframes menu-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.menu__list a {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  padding-block: clamp(0.6rem, 1.8vw, 1rem);
}

.menu__n {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  color: color-mix(in oklab, var(--white) 45%, var(--black));
}

.menu__t {
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: var(--track-display);
}

.menu__foot {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-l);
  font-size: var(--step--1);
}

.menu__foot .micro {
  margin-bottom: var(--space-2xs);
}

@media (min-width: 40rem) {
  .menu__foot {
    grid-template-columns: repeat(2, minmax(0, 20rem));
  }
}

.plain {
  display: grid;
  gap: 0.1rem;
}

.plain a,
.site-foot__legal a {
  display: inline-block;
  padding-block: 0.35rem;
}

/* --- Seitenkopf -------------------------------------------------- */

.hero {
  padding-top: clamp(7.5rem, 15vh, 11rem);
  padding-bottom: var(--space-2xl);
}

.hero--lg {
  padding-bottom: var(--space-3xl);
}

.hero__inner {
  display: grid;
  /* Ohne die Null als Untergrenze zieht sich die Spalte auf das längste
     unteilbare Wort auf — `min-width: auto` ist bei Rasterstücken die
     Voreinstellung. Bei einer Zeile wie "Geschäftsbedingungen" in
     Anzeigegröße ist dieses Wort auf dem Telefon breiter als der
     Bildschirm, und die ganze Seite bekam einen Querlauf. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
  max-width: 58rem;
}

.hero__title {
  font-size: var(--step-5);
}

.hero--md .hero__title,
.hero--sm .hero__title {
  font-size: var(--step-4);
}

.hero__lead {
  font-size: var(--step-1);
  max-width: 44ch;
}

.hero__actions {
  margin-top: var(--space-s);
}

/* Kennzeichnende Zeile unter dem Seitenkopf. */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--fg-mute);
}

.hero__facts strong {
  color: var(--fg);
  font-weight: 700;
}

/* --- Manifest ---------------------------------------------------- */

.manifesto {
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: var(--track-display);
  max-width: 22ch;
}

.manifesto__body {
  display: grid;
  gap: var(--space-s);
  max-width: var(--measure);
  margin-top: var(--space-l);
  color: var(--fg-mute);
}

@media (min-width: 62rem) {
  .manifesto-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-l);
    align-items: end;
  }

  .manifesto__body {
    margin-top: 0;
  }
}

/* --- Projektseite ------------------------------------------------ */

.case__head {
  padding-top: clamp(8rem, 16vh, 12rem);
  padding-bottom: var(--space-xl);
}

.case__title {
  font-size: var(--step-5);
  max-width: 20ch;
}

.case__facts {
  display: grid;
  gap: var(--space-s) var(--space-l);
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
}

.case__facts dt {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 0.3rem;
}

@media (min-width: 44rem) {
  .case__facts {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }
}

.case__cover {
  --art-ink: var(--black);
  --art-paper: var(--off);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.case__cover .art {
  width: 100%;
  height: 100%;
}

.chapter__grid {
  display: grid;
  gap: var(--space-m) var(--space-l);
}

.chapter__main {
  display: grid;
  gap: var(--space-s);
  max-width: var(--measure);
  font-size: var(--step-1);
  color: var(--fg-mute);
}

.chapter__main h2 {
  font-size: var(--step-3);
  color: var(--fg);
  margin-bottom: var(--space-2xs);
}

@media (min-width: 56rem) {
  .chapter__grid {
    grid-template-columns: minmax(9rem, 1fr) minmax(0, 2.4fr);
  }

  .chapter__aside .eyebrow {
    position: sticky;
    top: 7rem;
  }
}

.case__nav {
  display: grid;
  gap: var(--space-m);
  align-items: center;
  padding-block: var(--space-l);
  border-top: 1px solid var(--line);
}

.case__nav-link {
  display: grid;
  gap: 0.3rem;
}

.case__nav-link strong {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--track-tight);
}

.case__nav-link--next {
  text-align: right;
}

.case__nav-mid {
  justify-self: center;
}

@media (min-width: 44rem) {
  .case__nav {
    grid-template-columns: 1fr auto 1fr;
  }
}

/* --- Journalbeitrag ---------------------------------------------- */

.article__head {
  padding-top: clamp(8rem, 16vh, 12rem);
  padding-bottom: var(--space-l);
}

.article__head .wrap > * {
  max-width: var(--measure);
  margin-inline: auto;
}

.article__title {
  font-size: var(--step-4);
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--fg-mute);
}

.article__back {
  max-width: var(--measure);
  margin: var(--space-xl) auto 0;
}

/* --- Rechtstexte ------------------------------------------------- */

.legal {
  max-width: 46rem;
}

.legal__updated {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: var(--space-m);
}

.legal__section {
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
  color: var(--fg-mute);
}

.legal__section h2 {
  margin-bottom: var(--space-s);
  color: var(--fg);
  font-size: var(--step-2);
}

.legal__section > * + * {
  margin-top: var(--space-s);
}

.legal a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.legal-address {
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius);
  background: var(--surface);
  line-height: 1.7;
}

.legal-dl {
  display: grid;
  gap: var(--space-xs);
}

.legal-dl dt {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

/* Noch nicht ersetzte Platzhalter fallen auf. Absicht. */
mark.placeholder {
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in oklab, var(--fg) 10%, var(--bg)),
    color-mix(in oklab, var(--fg) 10%, var(--bg)) 6px,
    transparent 6px,
    transparent 12px
  );
  color: inherit;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  outline: 1px dashed var(--line-strong);
}

/* --- Kontakt ----------------------------------------------------- */

.contact {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 60rem) {
  .contact {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }
}

.contact__panel {
  padding: var(--space-m);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--bg);
}

.contact__hint {
  color: var(--fg-mute);
  font-size: var(--step--1);
  margin-top: var(--space-2xs);
  margin-bottom: var(--space-l);
}

.contact__aside {
  display: grid;
  gap: var(--space-m);
  align-content: start;
}

.contact__block {
  padding: var(--space-m);
  border-radius: var(--radius-l);
  background: var(--surface);
}

.contact__block .micro {
  margin-bottom: var(--space-2xs);
}

.contact__block p + p {
  margin-top: var(--space-2xs);
}

.contact__block p {
  color: var(--fg-mute);
  font-size: var(--step--1);
}

.contact__big {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: var(--track-tight);
}

.contact__big a {
  color: var(--fg);
}

/* --- Fußzeile ---------------------------------------------------- */

.site-foot {
  padding-bottom: 0;
  overflow: hidden;
}

.site-foot__cta {
  display: grid;
  gap: var(--space-s);
  justify-items: start;
  padding: var(--space-m);
  border-radius: var(--radius-l);
  background: var(--surface-hi);
}

.site-foot__top {
  display: grid;
  gap: var(--space-l);
  padding-bottom: var(--space-xl);
}

@media (min-width: 56rem) {
  .site-foot__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.site-foot__claim {
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 1.06;
  max-width: 18ch;
}

.site-foot__cols {
  display: grid;
  gap: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
}

.site-foot__cols .micro {
  margin-bottom: var(--space-xs);
}

.site-foot__cols a {
  color: var(--fg-mute);
  transition: color var(--t-fast) var(--ease);
}

.site-foot__cols a:hover,
.site-foot__cols a:focus-visible {
  color: var(--fg);
}

@media (min-width: 44rem) {
  .site-foot__cols {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Die Wortmarke steht angeschnitten am unteren Rand. */
.site-foot__mark {
  margin-top: var(--space-2xl);
  overflow: hidden;
}

.site-foot__mark span {
  display: block;
  /* Die Marke soll den Satzspiegel füllen, nicht überlaufen. Ein Versal der
     Anzeigeschrift ist rund 0,62 em breit; bei `len` Buchstaben passt der
     Schriftzug also bis etwa 155vw / len. `min()` deckelt zusätzlich, damit
     er auf sehr breiten Bildschirmen nicht ins Absurde wächst. */
  font-size: min(calc(155vw / var(--mark-len, 6)), 15rem);
  font-variation-settings: 'wdth' 92;
  font-weight: 800;
  line-height: 1;
  margin-bottom: -0.22em;
  letter-spacing: -0.04em;
  text-align: center;
  white-space: nowrap;
  color: color-mix(in oklab, var(--fg) 88%, var(--bg));
}

.site-foot__legal {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-m);
  border-top: 1px solid var(--line);
  font-size: var(--step--2);
  color: var(--fg-mute);
}

@media (min-width: 52rem) {
  .site-foot__legal {
    grid-template-columns: 1fr 1.6fr auto;
    align-items: baseline;
  }

  .site-foot__legal p:last-child {
    text-align: right;
  }
}

/* --- Abbinder ---------------------------------------------------- */

.cta {
  text-align: center;
}

.cta__title {
  font-size: var(--step-4);
  margin-inline: auto;
  max-width: 18ch;
}

.cta .lead {
  margin: var(--space-m) auto 0;
  text-align: center;
}

.cta .btn-row {
  justify-content: center;
  margin-top: var(--space-l);
}

/* E-Mail und Telefon sind hier die eigentlichen Bedienelemente, nicht bloß
   Verweise im Satz. Sie brauchen deshalb die volle Trefferfläche. */
.contact__big a {
  display: inline-block;
  padding-block: 0.3rem;
}


/* ==================================================================
   Leistungen als Deck

   Ohne Skript: die Karten stehen untereinander, alles ist lesbar. Mit
   Skript legen sie sich übereinander, die vordere gerade, die Nachbarn
   weggedreht. Gedreht wird um die Hochachse — eine Bewegung im Raum an
   Flächen, die keine Tiefe haben.
   ================================================================== */

.deck {
  --deck-dur: 620ms;
}

.deck__stage {
  display: grid;
  gap: var(--space-m);
}

.deck {
  /* Die weggedrehten Nachbarn ragen seitlich heraus — hier abschneiden,
     damit die Seite nicht waagerecht scrollt. */
  overflow-x: clip;
  margin-inline: calc(var(--space-s) * -1);
  padding-inline: var(--space-s);
}

.deck.is-live .deck__stage {
  display: block;
  position: relative;
  /* Fluchtpunkt: großzügig, sonst kippen die Karten karikaturhaft. */
  perspective: 1600px;
  perspective-origin: 50% 45%;
  height: var(--deck-h, 30rem);
}

.deck-card {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.deck.is-live .deck-card {
  position: absolute;
  inset: 0;
  width: min(100%, 46rem);
  margin-inline: auto;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition:
    transform var(--deck-dur) var(--ease),
    opacity var(--deck-dur) var(--ease),
    filter var(--deck-dur) var(--ease);
  will-change: transform;
}

/* Die Karte, die vorne steht. */
.deck.is-live .deck-card[data-pos='0'] {
  transform: translateX(0) scale(1);
  opacity: 1;
  z-index: 3;
  border-color: var(--fg);
  border-width: 1.5px;
}

.deck.is-live .deck-card[data-pos='-1'],
.deck.is-live .deck-card[data-pos='1'] {
  opacity: 0.4;
  z-index: 2;
  cursor: pointer;
  filter: grayscale(1);
}

.deck.is-live .deck-card[data-pos='-1'] {
  transform: translateX(-52%) scale(0.72) rotateY(26deg);
}

.deck.is-live .deck-card[data-pos='1'] {
  transform: translateX(52%) scale(0.72) rotateY(-26deg);
}

/* Alles weiter hinten liegt außer Sicht, bleibt aber im Fluss. */
.deck.is-live .deck-card[data-pos='far'] {
  transform: scale(0.7);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

.deck.is-live .deck-card[data-pos='-1']:hover,
.deck.is-live .deck-card[data-pos='1']:hover {
  opacity: 0.7;
  filter: grayscale(0.3);
}

.deck-card__face {
  display: grid;
  gap: var(--space-xs);
  height: 100%;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  align-content: start;
}

.deck-card__n {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.deck-card__title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-variation-settings: 'wdth' 96;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.deck-card__lead {
  font-size: var(--step-1);
  color: var(--fg-mute);
  max-width: 34ch;
}

.deck-card .bullets {
  margin-top: var(--space-2xs);
}

/* --- Steuerung ---------------------------------------------------- */

.deck__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-l);
  flex-wrap: wrap;
}

.deck__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: none;
  color: var(--fg);
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.deck__arrow svg {
  width: 1.15rem;
}

.deck__arrow[data-deck-prev] svg {
  transform: rotate(180deg);
}

.deck__arrow:hover {
  background: var(--fg);
  color: var(--bg);
}

.deck__arrow:active {
  transform: scale(0.92);
}

.deck__dots {
  display: flex;
  gap: var(--space-3xs);
  flex-wrap: wrap;
  justify-content: center;
}

.deck__dot {
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--fg-mute);
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
  transition:
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.deck__dot:hover {
  color: var(--fg);
}

.deck__dot[aria-current='true'] {
  color: var(--fg);
  border-color: var(--line-strong);
  font-weight: 600;
}

.deck__hint {
  margin-top: var(--space-2xs);
  text-align: center;
  font-size: var(--step--1);
  color: var(--fg-faint);
}

@media (prefers-reduced-motion: reduce) {
  .deck.is-live .deck-card {
    transition-duration: 1ms;
  }
}

/* Die Nachbarkarten zeigen nur Nummer und Titel. Angeschnittene Fließtexte
   am Bildrand sähen nach Versehen aus, nicht nach Stapel. */
.deck.is-live .deck-card:not([data-pos='0']) .deck-card__lead,
.deck.is-live .deck-card:not([data-pos='0']) .bullets {
  opacity: 0;
  transition: opacity 220ms var(--ease);
}

/* Von der rechten Nachbarin ist nur die rechte Hälfte zu sehen — also steht
   ihre Beschriftung auch dort. Sonst läge sie hinter der vorderen Karte. */
.deck.is-live .deck-card[data-pos='1'] .deck-card__face {
  justify-items: end;
  text-align: right;
}

/* Auf schmalen Schirmen füllt die vordere Karte die Breite fast aus — von den
   Nachbarn bliebe nur ein Buchstabenrest am Rand stehen, der wie ein Fehler
   aussieht. Dort zeigen wir nur die vordere Karte; dass es vier sind, sagen
   die Punkte darunter. */
@media (max-width: 62rem) {
  .deck.is-live .deck-card[data-pos='-1'],
  .deck.is-live .deck-card[data-pos='1'] {
    opacity: 0;
    pointer-events: none;
  }
}

/* Auch die Deckkarten tragen jetzt Farbe. Rahmen und Schatten kommen aus
   derselben Sprache wie die Knöpfe: harte Kante, versetzte zweite Fläche. */
/* Die vordere Karte bekommt Tiefe aus Licht, nicht aus einem schwarzen
   Klotz dahinter. Die Farbe steht als Kante oben. */
.deck.is-live .deck-card[data-pos='0'] {
  border-color: var(--line-strong);
  box-shadow: 0 30px 60px -34px rgb(0 0 0 / 0.55);
}

/* ==================================================================
   Wortmarke oben links

   Derselbe Aufbau wie der große Schriftzug im Fuß, nur klein: schmal
   gestellte Anzeigeschrift, darunter der Zusatz in Versalien. Zusammen
   sind sie die Marke, nicht bloß ein Name.
   ================================================================== */

.mark {
  display: inline-grid;
  gap: 0.1em;
  padding-block: 0.3rem;
  line-height: 1;
}

.mark__word {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-variation-settings: 'wdth' 92;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.mark__sub {
  font-family: var(--font-ui);
  /* Nicht kleiner als 12,5 Pixel. Darunter wird die Zusatzzeile für viele
     unlesbar, und sie ist Teil des Namens, kein Zierrat. */
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* ==================================================================
   Netzwerke: ein eigener Streifen im Fuß
   ================================================================== */

.site-foot__social {
  margin-top: var(--space-xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--line);
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-s);
}

.social {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 2.75rem;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.social svg {
  width: 0.85em;
  height: 0.85em;
  transition: transform var(--t-fast) var(--ease);
}

.social:hover,
.social:focus-visible {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
  transform: translateY(-2px);
}

.social:hover svg {
  transform: translate(2px, -2px);
}

/* ==================================================================
   Der Schriftzug am Ende dreht sich herein

   Jeder Buchstabe steht auf einem eigenen Körper. Beim Erscheinen kippt er
   aus der Tiefe nach vorn, einer nach dem anderen von links. Ohne das
   Skript und bei reduzierter Bewegung steht er einfach da.
   ================================================================== */

.site-foot__mark span {
  display: flex;
  justify-content: center;
}

.site-foot__mark i {
  display: inline-block;
  font-style: normal;
  transform-origin: 50% 80%;
}

.site-foot__mark[data-mark-drop].is-armed i {
  opacity: 0;
  transform: perspective(700px) translateY(0.35em) rotateX(-88deg) scale(0.86);
}

.site-foot__mark[data-mark-drop].is-in i {
  opacity: 1;
  transform: perspective(700px) translateY(0) rotateX(0deg) scale(1);
  transition:
    transform 720ms cubic-bezier(0.2, 1.4, 0.4, 1),
    opacity 320ms linear;
  transition-delay: calc(var(--i) * 65ms);
}

@media (prefers-reduced-motion: reduce) {
  .site-foot__mark[data-mark-drop].is-armed i {
    opacity: 1;
    transform: none;
  }
}

/* ==================================================================
   Sprachauswahl

   Ein Knopf mit der aktuellen Sprache, darunter eine Liste. Ohne Skript
   steht die Liste offen unter dem Knopf und ist als Verweisliste
   benutzbar, deshalb bekommt sie ihre Position erst mit `is-ready`.
   ================================================================== */

.lang {
  position: relative;
}

.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 2.75rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: none;
  color: inherit;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.lang__btn:hover {
  background: var(--surface-hi);
  border-color: var(--line-strong);
}

.lang__chev {
  display: grid;
  place-items: center;
  width: 0.7rem;
  transform: rotate(90deg);
  transition: transform var(--t-fast) var(--ease);
}

.lang__btn[aria-expanded='true'] .lang__chev {
  transform: rotate(-90deg);
}

.lang__btn[aria-expanded='true'] {
  background: var(--surface-hi);
  border-color: var(--line-strong);
}

.lang__list {
  display: grid;
  gap: 2px;
  margin-top: var(--space-3xs);
}

.lang.is-ready .lang__list {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: var(--z-head);
  min-width: 11rem;
  padding: 0.35rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--raise-hi);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: 100% 0;
  pointer-events: none;
  transition:
    opacity var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.lang.is-ready.is-open .lang__list {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.lang__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 2.5rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-s);
  font-size: var(--step--1);
  transition: background var(--t-fast) var(--ease);
}

.lang__list a:hover,
.lang__list a:focus-visible {
  background: var(--surface-hi);
}

.lang__list a[aria-current='true'] {
  font-weight: 700;
}

.lang__code {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  color: var(--fg-faint);
}

/* Ein Verweis, der allein in einer Zeile steht, ist ein Bedienelement und
   braucht die 24 Pixel Zielgröße aus der Richtlinie. Im Fließtext gilt das
   nicht, dort trägt der Satz ringsum. */
.site-foot p > .link:only-child,
.contact__block p > .link:only-child {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding-block: 0.25rem;
}

/* ==================================================================
   Startseite in der neuen Ausrichtung

   Die Reihenfolge der Abschnitte trägt die Aussage: erst der Nutzen,
   dann das Problem, dann die Hauptleistung. Die Gestaltung stützt das,
   indem sie den Schwerpunkt groß setzt und die Ergänzungen ruhig.
   ================================================================== */

/* --- Hauptleistung ------------------------------------------------
   Zwei Spalten: links die Aussage, rechts die Liste dessen, was
   enthalten ist. Auf schmalen Geräten untereinander, Aussage zuerst.
   ---------------------------------------------------------------- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
  align-items: start;
}

@media (min-width: 56rem) {
  .feature {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-xl);
  }
}

.feature__title {
  margin-top: var(--space-2xs);
}

.feature__head .lead {
  margin-top: var(--space-s);
}

.feature__note {
  margin-top: var(--space-m);
  padding-left: var(--space-s);
  border-left: 2px solid var(--blue);
  color: var(--fg-mute);
}

.feature__head .btn {
  margin-top: var(--space-m);
}

.feature__body {
  padding: var(--space-m);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
}

/* --- Hakenliste ---------------------------------------------------
   Der Haken ist ein Pseudo-Element, kein Zeichen im Text: So liest ein
   Screenreader die Leistung, nicht „Häkchen Leistung".
   ---------------------------------------------------------------- */

.ticks {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-s);
}

.ticks li {
  position: relative;
  padding-left: 1.75rem;
  line-height: 1.5;
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}

/* Auf schwarzem Grund läuft das volle Blau zu dunkel — dort die
   hellste Stufe der Marke. */
.band--black .ticks li::before,
.is-black .ticks li::before {
  border-color: var(--blue-3);
}

/* --- Die drei Bereiche -------------------------------------------- */

.areas {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 62rem) {
  .areas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-m);
  }
}

.area {
  display: grid;
  align-content: start;
  gap: var(--space-s);
  padding-top: var(--space-s);
  border-top: 2px solid var(--fg);
}

.area__n {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  color: var(--blue-ink);
}

.area__lead {
  margin-top: var(--space-3xs);
  color: var(--fg-mute);
}

.area__list {
  display: grid;
  gap: var(--space-s);
}

.area__list li {
  padding-top: var(--space-xs);
  border-top: 1px solid var(--line);
}

.area__item-title {
  font-size: var(--step-0);
  font-weight: 700;
}

.area__list p {
  margin-top: var(--space-3xs);
  color: var(--fg-mute);
  font-size: var(--step--1);
}

.note {
  max-width: 44rem;
  color: var(--fg-mute);
}

/* --- Referenzen ---------------------------------------------------- */

.cases {
  display: grid;
  gap: var(--space-l);
}

.case__title {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--track-tight);
}

.case__grid {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-m);
}

@media (min-width: 56rem) {
  .case__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.case__cell dt {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.case__cell dd {
  margin-top: var(--space-2xs);
}

.case__cell--result dt {
  color: var(--blue-ink);
}

.case__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
}

.case__metrics b {
  display: block;
  font-size: var(--step-2);
  font-weight: 800;
  letter-spacing: var(--track-tight);
  color: var(--blue-ink);
}

.case__metrics span {
  font-size: var(--step--1);
  color: var(--fg-mute);
}

/* --- Betreuung -----------------------------------------------------
   Der Preis steht in einer eigenen Fläche neben dem Text, nicht darin.
   Er ist das, wonach hier gesucht wird.
   ---------------------------------------------------------------- */

.care {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
  align-items: start;
}

@media (min-width: 60rem) {
  .care {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: var(--space-xl);
  }
}

.care__head .lead {
  margin-top: var(--space-s);
}

.care__plan {
  padding: var(--space-m);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  background: var(--bg);
}

.care__plan-title {
  font-family: var(--font-ui);
  font-size: var(--step-1);
  font-weight: 700;
}

.care__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
}

.care__price b {
  font-size: var(--step-3);
  font-weight: 800;
  letter-spacing: var(--track-display);
  color: var(--blue);
}

.care__from,
.care__unit {
  font-size: var(--step--1);
  color: var(--fg-mute);
}

.care__plan .btn {
  width: 100%;
  margin-top: var(--space-s);
}

.care__note {
  margin-top: var(--space-2xs);
  font-size: var(--step--2);
  color: var(--fg-faint);
  text-align: center;
}

/* --- Über mich ------------------------------------------------------ */

.about__body {
  max-width: 44rem;
}

.about__body .lead {
  margin-top: var(--space-s);
}

.about__body p + p {
  margin-top: var(--space-s);
}

.about__body .arrow-link {
  margin-top: var(--space-m);
}

/* --- Abschluss ------------------------------------------------------ */

.closing {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.closing .lead {
  margin-top: var(--space-s);
}

.closing .btn {
  margin-top: var(--space-m);
}

.closing__note {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--fg-mute);
}

/* --- Karten-Spielarten ---------------------------------------------- */

/* Die Problemkarten tragen keine Fläche, nur eine Zahl und eine Linie —
   sie sollen nüchtern wirken, nicht beworben. */
.card--problem {
  background: none;
  border: 0;
  border-top: 2px solid var(--blue-2);
  border-radius: 0;
  padding-inline: 0;
}

.card--quiet {
  background: var(--surface);
}

/* Auf schwarzem Grund tragen Blau-Akzente die helle Stufe — das volle
   #067CA6 kommt dort nur auf 4,44:1. */
.band--black .area__n,
.is-black .area__n,
.band--black .case__cell--result dt,
.is-black .case__cell--result dt {
  color: var(--blue-on-dark);
}

/* Die Zahl auf den Problemkarten stand als stilles Grau auf Schwarz und
   kam damit auf 4,30:1. Sie trägt jetzt die helle Blaustufe: klar über
   der Marke und zugleich das Kennzeichen der Marke. */
.card--problem .card__num {
  color: var(--blue-on-dark);
}


/* ---------- forms.css ---------- */
/* ==================================================================
   Formular

   Beschriftungen stehen dauerhaft über dem Feld — kein Text, der beim
   Tippen verschwindet. Fehler stehen als Satz darunter.
   ================================================================== */

.form {
  display: grid;
  gap: var(--space-m);
}

/* Honigtopf: für Menschen unsichtbar, für einfache Skripte verlockend. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field {
  display: grid;
  gap: var(--space-3xs);
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}

.field > label,
.field legend {
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0;
}

.req {
  color: var(--fg-mute);
}

.field__hint {
  font-size: var(--step--1);
  color: var(--fg-faint);
  margin-bottom: var(--space-3xs);
}

.field-row {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 34rem) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

input[type='text'],
input[type='email'],
input[type='search'],
textarea,
select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--step-0);
  transition:
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
  appearance: none;
}

textarea {
  resize: vertical;
  min-height: 9rem;
  line-height: 1.55;
}

input::placeholder,
textarea::placeholder {
  color: var(--fg-faint);
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--fg-mute);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--fg);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--fg) 14%, transparent);
}

.select {
  position: relative;
}

.select select {
  padding-right: 2.5rem;
  cursor: pointer;
}

.select__arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  /* Derselbe Pfeil wie überall, nur nach unten gedreht. Beides in einer
     Transformation — die Einzeleigenschaft `rotate` würde vorher greifen und
     das anschließende Verschieben entlang der gedrehten Achse laufen lassen. */
  transform: translateY(-50%) rotate(90deg);
  pointer-events: none;
  color: var(--fg-mute);
  width: 0.75rem;
}

/* --- Kästchen ---------------------------------------------------- */

.checks {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}

@media (min-width: 34rem) {
  .checks {
    grid-template-columns: 1fr 1fr;
  }
}

/* Auswahl als Pillen — ein Klick auf die ganze Fläche. */
.check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--step--1);
  line-height: 1.35;
  transition:
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}

.check:hover {
  border-color: var(--fg-mute);
}

.check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.check__box {
  position: relative;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 5px;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

/* Häkchen aus zwei Strichen. */
.check__box::after {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 0.12rem;
  width: 0.3rem;
  height: 0.55rem;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--t-fast) var(--ease);
}

.check input:checked + .check__box {
  background: var(--fg);
  border-color: var(--fg);
}

.check input:checked + .check__box::after {
  transform: rotate(45deg) scale(1);
}

.check:has(input:checked) {
  border-color: var(--fg);
  background: var(--surface);
}

.check input:focus-visible + .check__box {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

.check--consent {
  align-items: flex-start;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--fg-mute);
}

.check--consent:has(input:checked) {
  background: none;
}

.check--consent .check__box {
  margin-top: 0.15rem;
}

/* --- Rückmeldungen ----------------------------------------------- */

.field__error {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--fg);
}

.field__error:not(:empty) {
  margin-top: var(--space-3xs);
  padding-left: 0.75rem;
  border-left: 2px solid var(--fg);
}

.field.is-invalid input,
.field.is-invalid textarea {
  border-color: var(--fg);
}

.form__privacy {
  font-size: var(--step--1);
  color: var(--fg-mute);
}

.form__privacy a,
.check--consent a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.form__submit {
  justify-self: start;
}

.form__submit[aria-busy='true'] {
  opacity: 0.6;
  pointer-events: none;
}

.form__status:not(:empty) {
  padding: var(--space-s);
  border: 1px solid var(--fg);
  border-radius: var(--radius);
  font-size: var(--step--1);
}

.form__status a {
  text-decoration: underline;
}

/* Der Erfolgsfall. */
.form-done {
  display: grid;
  gap: var(--space-s);
  justify-items: start;
  padding-block: var(--space-l);
}

.form-done__check {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--fg);
  color: var(--bg);
  animation: pop 420ms var(--ease) backwards;
}

.form-done__check svg {
  width: 1.5rem;
  height: 1.5rem;
}

@keyframes pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}

.cf-turnstile {
  min-height: 65px;
}

.cf-turnstile:empty {
  min-height: 0;
}

/* ==================================================================
   Bewegung im Formular

   Zurückhaltend und funktional: Die Felder bauen sich einmal auf, ein
   Fehler meldet sich hörbar sichtbar, der Haken am Ende wird gezeichnet.
   Nichts davon verzögert eine Eingabe — alles läuft neben der Bedienung.
   ================================================================== */

/* Beim Öffnen des Dialogs laufen die Felder von unten ein, eines nach dem
   anderen. Nur dort — auf der Kontaktseite steht das Formular ohnehin schon. */
@media (prefers-reduced-motion: no-preference) {
  .modal[open] .form > * {
    animation: field-in 520ms var(--ease) backwards;
  }

  .modal[open] .form > *:nth-child(1) { animation-delay: 60ms; }
  .modal[open] .form > *:nth-child(2) { animation-delay: 110ms; }
  .modal[open] .form > *:nth-child(3) { animation-delay: 160ms; }
  .modal[open] .form > *:nth-child(4) { animation-delay: 210ms; }
  .modal[open] .form > *:nth-child(5) { animation-delay: 260ms; }
  .modal[open] .form > *:nth-child(6) { animation-delay: 310ms; }
  .modal[open] .form > *:nth-child(7) { animation-delay: 360ms; }
  .modal[open] .form > *:nth-child(8) { animation-delay: 410ms; }
  .modal[open] .form > *:nth-child(n + 9) { animation-delay: 460ms; }
}

@keyframes field-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* Ein Feld, in dem geschrieben wird, hebt sich leicht vom Rest ab. */
.field:focus-within > label,
.field:focus-within legend {
  color: var(--fg);
}

/* Der Fehlersatz schiebt sich unter dem Feld hervor. */
.field__error:not(:empty) {
  animation: error-in 260ms var(--ease);
}

@keyframes error-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
    border-left-color: transparent;
  }
}

/* Während gesendet wird, läuft ein Streifen durch den Knopf. */
.form__submit[aria-busy='true'] {
  position: relative;
  overflow: hidden;
}

.form__submit[aria-busy='true']::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--bg) 45%, transparent), transparent);
  animation: sweep 1100ms linear infinite;
}

@keyframes sweep {
  to {
    inset-inline-start: 100%;
  }
}

/* Der Haken wird gezeichnet, nicht eingeblendet. */
.form-done__check svg path {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  animation: draw 520ms var(--ease) 260ms forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Der Text der Bestätigung folgt dem Haken. */
.form-done > *:not(.form-done__check) {
  animation: field-in 480ms var(--ease) 340ms backwards;
}

@media (prefers-reduced-motion: reduce) {
  .form-done__check,
  .form-done__check svg path,
  .form-done > * {
    animation: none;
    stroke-dashoffset: 0;
  }

  .form__submit[aria-busy='true']::after {
    animation: none;
  }
}


/* ---------- motion.css ---------- */
/* ==================================================================
   Bewegung

   Drei Arten, mehr nicht:
   1. Inhalte treten beim Scrollen einmal auf.
   2. Das Laufband zeigt fortlaufend, was wir anbieten.
   3. Flächen antworten auf den Zeiger — mit ein paar Grad Neigung.

   Alles davon hält an, sobald das Betriebssystem darum bittet.
   ================================================================== */

/* --- Auftritt beim Scrollen -------------------------------------- */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.6rem) scale(0.985);
}

html.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity 640ms linear var(--d, 0ms),
    transform 900ms var(--ease) var(--d, 0ms);
}

html.js [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(1.4rem) scale(0.99);
}

html.js [data-reveal-stagger].is-revealed > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 560ms linear calc(var(--i, 0) * 70ms),
    transform 780ms var(--ease) calc(var(--i, 0) * 70ms);
}

/* --- Laufband -----------------------------------------------------
   Zwei identische Reihen hintereinander. Nach genau der halben Breite
   steht die zweite dort, wo die erste begann — der Rücksprung fällt
   deshalb nicht auf.
   ---------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  user-select: none;
  /* Zu den Rändern hin ausblenden, damit nichts abgeschnitten wirkt. */
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  animation: marquee 38s linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: var(--track-display);
  white-space: nowrap;
}

.marquee__dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

.marquee-band {
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.marquee-kicker {
  display: block;
  margin-bottom: var(--space-s);
}

/* --- Tiefe --------------------------------------------------------
   Die Flächen bleiben zweidimensional. Sie stehen nur in einem Raum
   mit Fluchtpunkt und neigen sich ein paar Grad, wenn der Zeiger
   darüber wandert. Der Schatten wächst dabei mit.
   ---------------------------------------------------------------- */

[data-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition:
    transform 420ms var(--ease),
    box-shadow 420ms var(--ease);
  will-change: transform;
}

[data-tilt].is-tilting {
  /* Während der Zeiger darüber steht, folgt die Neigung sofort. */
  transition:
    transform 90ms linear,
    box-shadow 420ms var(--ease);
  box-shadow:
    0 2px 4px rgb(0 0 0 / 0.04),
    0 12px 24px rgb(0 0 0 / 0.07),
    0 32px 64px rgb(0 0 0 / 0.06);
}

.band--black [data-tilt].is-tilting {
  box-shadow:
    0 2px 4px rgb(0 0 0 / 0.3),
    0 16px 40px rgb(0 0 0 / 0.45);
}

/* --- Wackeln bei abgelehnter Eingabe ------------------------------ */

.is-shaking {
  animation: shake 420ms var(--ease-in-out);
}

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html.js [data-reveal],
  html.js [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .marquee__track {
    animation: none;
    transform: none;
  }

  /* Das Laufband würde sonst über den Rand hinauslaufen und der Rest wäre
     unerreichbar. Ohne Bewegung darf man es stattdessen schieben. */
  .marquee {
    overflow-x: auto;
    mask-image: none;
  }

  [data-tilt] {
    transform: none !important;
  }
}

/* --- Das Wort, das sich weiterdreht ------------------------------
   Alle Wörter liegen in derselben Rasterzelle übereinander. Gedreht
   wird um die waagerechte Achse: Das aktuelle kippt nach oben weg,
   das nächste kommt von unten herein.
   ---------------------------------------------------------------- */

.flip {
  display: inline-block;
  vertical-align: bottom;
}

/* Ohne JavaScript steht nur das erste Wort da — der Satz bleibt richtig. */
.flip:not(.is-live) .flip__item + .flip__item {
  display: none;
}

.flip.is-live {
  display: inline-grid;
  grid-template-areas: 'w';
  perspective: 700px;
  width: var(--w, auto);
  /* Die Höhe kommt aus der Zeile; ohne clip ragen die kippenden Karten
     in die Zeile darüber. */
  overflow: clip;
  overflow-clip-margin: 0.12em;
  transition: width 420ms var(--ease);
}

.flip.is-live .flip__item {
  grid-area: w;
  white-space: nowrap;
  transform-origin: 50% 100%;
  transform: rotateX(-92deg);
  opacity: 0;
  transition:
    transform 620ms var(--ease),
    opacity 300ms linear;
}

.flip.is-live .flip__item.is-current {
  transform: rotateX(0deg);
  opacity: 1;
}

.flip.is-live .flip__item.is-leaving {
  transform-origin: 50% 0;
  transform: rotateX(92deg);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .flip.is-live .flip__item {
    transition: none;
  }

  /* Ohne Bewegung bleibt es beim ersten Wort. */
  .flip.is-live .flip__item:not(.is-current) {
    display: none;
  }
}

/* Auf schmalen Geräten darf das wechselnde Wort umbrechen.

   Sonst diktiert das längste Wort („Handwerksbetrieb", „a doctor's practice")
   die Breite der ganzen Kopfzeile — und schiebt die Seite seitlich weg. Die
   feste Breite aus dem Skript wird hier bewusst überstimmt. */
@media (max-width: 44rem) {
  /* Das wechselnde Wort bekommt eine eigene Zeile über die volle Breite.
     `minmax(0, 1fr)` ist der entscheidende Teil: eine automatisch breite
     Rasterspalte wäre so breit wie das längste Wort und ließe es nie
     umbrechen — erst die Null als Untergrenze erlaubt den Umbruch. */
  .flip.is-live {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    /* Die Höhe folgt dem gezeigten Wort. Ohne sie wäre der Kasten immer so
       hoch wie „Handwerksbetrieb" auf zwei Zeilen — hinter jedem kurzen Wort
       stünde dann eine leere Zeile. */
    height: var(--h, auto);
    transition: height 420ms var(--ease);
    /* Nicht auf `visible` stellen: die weggekippten Wörter werden durch den
       Fluchtpunkt breiter projiziert als ihr Kasten und schöben die Seite
       sonst um ein paar Pixel zur Seite. */
    overflow: clip;
  }

  .flip.is-live .flip__item {
    white-space: normal;
  }
}


/* ---------- mobile.css ---------- */
/* ==================================================================
   Handy und Tablet

   Das Grundgerüst ist bereits von unten nach oben gebaut: Alle anderen
   Dateien beschreiben zuerst die schmale Ansicht und schalten erst ab
   einer `min-width` auf die breite um. Diese Datei ergänzt, was sich
   nicht über die Breite allein entscheiden lässt — die Art der Eingabe
   (Finger statt Maus), die Form des Geräts (Aussparungen, abgerundete
   Ecken) und die kurze Höhe im Querformat.

   Sie steht bewusst spät in der Reihenfolge, damit sie überschreibt,
   und vor `print.css`, das immer das letzte Wort behält.
   ================================================================== */

/* --- Aussparungen ------------------------------------------------
   Der Seitenkopf trägt `viewport-fit=cover`. Damit reicht die Seite
   unter die Kamera-Insel und die abgerundeten Ecken — schön für den
   Hintergrund, gefährlich für den Inhalt. Der Rinnstein bekommt darum
   den größeren der beiden Werte: den gestalteten Abstand oder den, den
   das Gerät verlangt.
   ---------------------------------------------------------------- */

:root {
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Im Querformat liegt die Aussparung seitlich. Nur dort muss der
   Rinnstein wachsen — im Hochformat bleibt er, wie gestaltet. */
@media (orientation: landscape) {
  :root {
    --gutter: max(clamp(1.25rem, 0.6rem + 2.6vw, 3rem), var(--safe-l), var(--safe-r));
  }
}

.site-head {
  padding-top: calc(clamp(0.6rem, 1.4vw, 1rem) + var(--safe-t));
}

.site-foot {
  padding-bottom: var(--safe-b);
}

/* --- Ausklappmenü bei kurzer Höhe --------------------------------
   Das Menü zentriert seinen Inhalt. Das ist richtig, solange er passt.
   Im Querformat eines Telefons ist der Bildschirm rund 360 Pixel hoch,
   die Liste aber gut das Doppelte: Sie ragte oben wie unten heraus und
   war nicht erreichbar, weil nichts rollte.

   `align-content: safe center` zentriert nur, wenn Platz da ist, und
   rückt sonst an den Anfang — der Überhang bleibt so erreichbar. Dazu
   darf das Menü selbst rollen. `overscroll-behavior` verhindert, dass
   die Seite darunter mitwandert, wenn man am Ende weiterzieht.
   ---------------------------------------------------------------- */

.menu {
  align-content: safe center;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.menu__inner {
  padding-block: calc(6rem + var(--safe-t)) calc(var(--space-l) + var(--safe-b));
}

/* Bei sehr kurzer Höhe steht die Liste enger und kleiner, damit sie
   möglichst ohne Rollen auskommt. */
@media (max-height: 34rem) {
  .menu__inner {
    padding-block: calc(4.5rem + var(--safe-t)) calc(var(--space-m) + var(--safe-b));
  }

  .menu__t {
    font-size: var(--step-2);
  }

  .menu__list a {
    padding-block: 0.45rem;
  }

  .menu__foot {
    margin-top: var(--space-m);
  }
}

/* --- Finger statt Maus -------------------------------------------
   `pointer: coarse` trifft die Eingabeart, nicht die Fenstergröße —
   das schmale Fenster auf dem Schreibtisch bleibt also unberührt.
   ---------------------------------------------------------------- */

@media (pointer: coarse) {
  /* Kleine Verweise sind auf dem Bildschirm groß genug zu lesen, aber
     zu klein zum Treffen. Ein Fingerkuppenmaß von rund 44 Pixeln ist
     das übliche Mindestmaß; erreicht wird es über eine Mindesthöhe,
     nicht über Abstand — sonst verschöbe sich das Satzbild. */
  .site-foot__cols a,
  .site-foot__legal a,
  .menu__foot a,
  .site-foot__social a,
  .arrow-link,
  .chip,
  .tag {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* Der Zurück-nach-oben-Verweis steht allein in seiner Zeile und darf
     die volle Breite als Trefferfläche nehmen. */
  .site-foot p > .link:only-child {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* Knöpfe und Formularfelder bleiben unter dem Daumen bedienbar. */
  .btn,
  .site-head .btn {
    min-height: 2.75rem;
  }

  /* Was nur beim Überfahren erscheint, erscheint mit dem Finger nie
     oder bleibt nach dem Antippen klebrig stehen. Auf Tastgeräten
     bleibt der Verweis darum durchgehend unterstrichen, statt die
     Linie erst weglaufen zu lassen. */
  .link:hover {
    background-size: 100% 1px;
    background-position: 0 100%;
  }

  /* Neigung nach dem Zeiger ergibt ohne Zeiger keinen Sinn. Das Skript
     prüft das bereits (`hover: hover and pointer: fine`); die Regel
     hier räumt eine etwaig gesetzte Verformung sicher ab. */
  [data-tilt] {
    transform: none !important;
  }
}

/* --- Klötze auf schmalen Geräten ----------------------------------
   Die Spielfläche ist am Schreibtisch bis 25rem hoch. Auf dem Telefon
   nähme sie damit fast den halben Bildschirm ein, ohne mehr zu zeigen —
   die Klötze liegen ohnehin unten. Sie wird darum flacher.
   ---------------------------------------------------------------- */

@media (max-width: 44rem) {
  .cubes {
    height: clamp(14rem, 46vw, 17rem);
  }
}


/* ---------- print.css ---------- */
/* ==================================================================
   Druck

   Vor allem für die Rechtsseiten gedacht: Wer ein Impressum oder eine
   Datenschutzerklärung ausdruckt, will Text auf Papier — keine
   Tintenflächen und keine Navigation.
   ================================================================== */

@media print {
  :root {
    --bg: #fff;
    --fg: #000;
    --fg-mute: #333;
    --fg-faint: #555;
    --rule: #bbb;
    --rule-strong: #888;
  }

  .band,
  .band--black,
  .band--white,
  .band--off {
    --bg: #fff;
    --fg: #000;
    background: #fff !important;
    color: #000 !important;
    padding-block: 0 !important;
  }

  .site-head,
  .menu,
  .site-foot__mark,
  .btn,
  .filters,
  .switch,
  form {
    display: none !important;
  }

  body {
    font-size: 11pt;
    line-height: 1.45;
  }

  .hero {
    min-height: 0;
    padding: 0 0 1rem;
  }

  .hero__title {
    font-size: 24pt;
  }

  .wrap {
    width: auto;
  }

  .legal {
    max-width: none;
  }

  .legal__section {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* Beim Ausdruck soll erkennbar sein, wohin ein Verweis führt. */
  .legal a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    word-break: break-all;
  }

  .site-foot__legal {
    border-top: 1px solid #bbb;
  }

  mark.placeholder {
    background: none;
    outline: 1px solid #000;
  }
}