/* ============================================================
   ENVI Group — Darstellung
   ------------------------------------------------------------
   Eine Datei, keine Abhängigkeiten, keine externen Schriften.
   Das ist keine Sparsamkeit: die Datenschutzerklärung sagt, dass
   diese Seite nichts von fremden Servern nachlädt. Ein einziges
   @import auf eine Schriftbibliothek würde diesen Satz zur Lüge
   machen.

   Farben stammen aus dem Logo, nicht aus dem Gefühl: der Grund
   ist der Bildpunkt aus der Ecke der Logodatei (#010207), die
   hellste Stelle des Signets ist #dff0fa. Deshalb sitzt das Logo
   ohne sichtbaren Rahmen auf der Seite.

   ------------------------------------------------------------
   Zur Haltung dieser Gestaltung

   Die Seite soll nach Werkzeugbau aussehen, nicht nach Werbung.
   Deshalb: ein sichtbares Raster statt schwebender Kacheln,
   Haarlinien statt Schatten, laufende Nummern statt Symbolbilder,
   eine einzige Akzentfarbe, sparsam eingesetzt.

   Bewegung gibt es, aber sie erklärt etwas: der Fortschrittsstrich
   zeigt, wie weit man ist; die Schiene unter dem Vorgehen füllt
   sich, während man die vier Schritte liest; Inhalte treten beim
   Eintreten kurz an. Nichts hüpft, nichts dreht sich, nichts
   wartet auf eine Animation, bevor es lesbar wird.

   Alle Bewegung läuft über CSS-Zeitachsen — kein JavaScript.
   Das ist keine Angeberei, sondern Notwendigkeit: die
   Sicherheitsregel dieser Seite erlaubt genau einen Script-Block
   (die Firmenangaben für Suchmaschinen) und sonst keinen. Wo der
   Browser die Zeitachsen nicht kennt, steht schlicht alles still
   und vollständig da — geprüft über @supports.
   ============================================================ */

/* ---------- Grundwerte ------------------------------------ */

:root {
  --ink: #010207;
  --ink-raised: #06090f;
  --ink-panel: #0a0e16;

  --line: #161c26;
  --line-strong: #232c3a;

  --text: #e7ecf2;
  --text-dim: #98a3b2;
  --text-faint: #6a7583;

  --accent: #9fc9e6;
  --accent-bright: #dff0fa;
  --accent-deep: #2c4a63;

  --measure: 68ch;
  --frame: 1160px;
  --gap: clamp(1.25rem, 3vw, 2.25rem);

  --step-eyebrow: 0.75rem;
  --step-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --step-h3: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --step-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  --step-h1: clamp(2.375rem, 1.55rem + 3.5vw, 4.5rem);
  /* Für die Kennzahlen im Auftakt. Bewusst gross: sie sind das
     einzige auf der Seite, das ein Kunde mit einem Blick mitnimmt. */
  --step-figure: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, 'Noto Sans', sans-serif;

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  /* Für Antritte: schnell los, weich aus. Ein Verlauf, der in der
     Mitte am schnellsten ist, wirkt wie eine Vorlage. */
  --ease-out: cubic-bezier(0.16, 0.84, 0.32, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Wer angibt, keine Bewegung zu wollen, bekommt keine. Das ist
   keine Höflichkeit: bei manchen Menschen löst Bewegung auf dem
   Bildschirm Übelkeit aus. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Ziffern in gleicher Breite. Wirkt unscheinbar, ist aber der
     Unterschied zwischen einer Tabelle und einer Zettelwirtschaft. */
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 500;
  line-height: 1.14;
  text-wrap: balance;
}

/* Je grösser der Grad, desto enger die Laufweite — sonst fällt
   eine grosse Zeile auseinander. Kleine Grade brauchen umgekehrt
   Luft. */
h1 {
  letter-spacing: -0.03em;
}

h2 {
  letter-spacing: -0.022em;
}

h3 {
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

/* `text-wrap: pretty` verteilt die letzten Zeilen eines Absatzes
   neu, damit am Schluss kein einzelnes Wort allein steht. In
   breiten Spalten ist das ein Gewinn.

   In schmalen nicht: bei vier Karten nebeneinander bleiben rund
   dreissig Zeichen pro Zeile, und dann zieht die Regel die
   letzten vier Zeilen zu einer Treppe zusammen. Deshalb steht sie
   nur dort, wo die Zeile lang genug ist, um etwas zu verteilen. */
.lead,
.prose__intro,
.prose__block p,
.panel p,
.notice p {
  text-wrap: pretty;
}

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

a {
  color: inherit;
}

::selection {
  background: var(--accent);
  color: #04070d;
}

/* ---------- Bewegung, an einer Stelle --------------------- */

/* Ein einziger Antritt, überall derselbe: sechs Bildpunkte von
   unten, kurz. Mehr Weg wirkt wie eine Präsentation, weniger
   sieht man nicht.

   `both` sorgt dafür, dass der Anfangszustand auch vor dem Start
   gilt — sonst blitzt der Inhalt einmal auf, bevor er antritt. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wipe {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 7rem, 0);
  }
}

/* Die Antritte beim Laden betreffen nur den Auftakt. Alles
   Weitere hängt am Scrollen — sonst tritt eine Seite an, die
   niemand ansieht. */
@media (prefers-reduced-motion: no-preference) {
  .hero__body > * {
    animation: rise 0.62s var(--ease-out) both;
  }
  .hero__body > *:nth-child(2) {
    animation-delay: 0.05s;
  }
  .hero__body > *:nth-child(3) {
    animation-delay: 0.1s;
  }
  .hero__body > *:nth-child(4) {
    animation-delay: 0.15s;
  }
  .hero__mark,
  .proof {
    animation: rise 0.7s var(--ease-out) 0.2s both;
  }
}

/* Ab hier alles, was am Scrollen hängt. Kennt der Browser die
   Zeitachsen nicht, greift kein einziger Block darin — und die
   Seite steht vollständig und still da. Genau so soll ein
   Rückfall aussehen. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section__head,
    .card,
    .step,
    .value,
    .panel,
    .form,
    .contact__split > div:first-child,
    .company__split > .lead,
    .prose__block {
      animation: rise 1ms linear both;
      animation-timeline: view();
      /* Fertig, bevor das Element in der Mitte steht: wer liest,
         soll nicht auf das Ende einer Animation warten. */
      animation-range: entry 4% cover 20%;
    }

    /* Innerhalb einer Reihe treten die Karten leicht versetzt an.
       Kein Karussell — der Versatz ist so klein, dass man ihn
       eher spürt als sieht. */
    .card:nth-child(2),
    .step:nth-child(2),
    .value:nth-child(2) {
      animation-range: entry 4% cover 24%;
    }
    .card:nth-child(3),
    .step:nth-child(3),
    .value:nth-child(3) {
      animation-range: entry 4% cover 28%;
    }
    .card:nth-child(4),
    .step:nth-child(4) {
      animation-range: entry 4% cover 32%;
    }

    /* Der Fortschrittsstrich unter der Kopfzeile. Er beantwortet
       die einzige Frage, die man auf einer langen Seite hat:
       wie viel kommt noch. */
    .masthead__progress {
      animation: wipe 1ms linear both;
      animation-timeline: scroll(root block);
    }

    /* Die Schiene über den vier Schritten füllt sich, während man
       sie liest. Das ist der einzige Ort, an dem Bewegung etwas
       über den Inhalt sagt: vier Schritte, ein Weg. */
    .steps__rail::after {
      animation: wipe 1ms linear both;
      animation-timeline: view();
      animation-range: cover 8% cover 62%;
    }

    /* Der Lichtschein hinter dem Auftakt zieht beim Scrollen
       langsam nach. Sehr wenig — er soll Tiefe andeuten, nicht
       auffallen. */
    .hero::before {
      animation: drift 1ms linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 70vh;
    }
  }
}

/* ---------- Bausteine ------------------------------------- */

.frame {
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.eyebrow {
  margin: 0 0 1.25rem;
  font-size: var(--step-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.lead {
  max-width: var(--measure);
  font-size: var(--step-lead);
  line-height: 1.6;
  color: var(--text-dim);
}

.section {
  padding-block: clamp(4rem, 9vw, 7.5rem);
  border-top: 1px solid var(--line);
  counter-increment: section;
}

main {
  counter-reset: section;
}

.section__head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

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

/* Das Schlagwort über der Überschrift, mit laufender Nummer und
   einer Haarlinie, die den Rest der Zeile ausfüllt. Das Raster
   soll man sehen: es ist der Unterschied zwischen einer Seite,
   die gebaut wurde, und einer, die zusammengeklickt wurde. */
.section__kicker {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0;
  font-size: var(--step-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.section__kicker::before {
  content: counter(section, decimal-leading-zero);
  color: var(--accent);
  letter-spacing: 0.1em;
}

.section__kicker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent 65%);
}

/* Verlinkte Sprungmarken dürfen nicht unter der Kopfzeile
   verschwinden. */
:target {
  scroll-margin-top: 6rem;
}

/* ---------- Schaltflächen --------------------------------- */

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease),
    color 0.22s var(--ease), transform 0.22s var(--ease);
}

.button:active {
  transform: translateY(1px);
}

.button--primary {
  background: var(--accent-bright);
  color: #04070d;
}

.button--primary:hover {
  background: #ffffff;
}

.button--quiet {
  border-color: var(--line-strong);
  color: var(--text);
}

.button--quiet:hover {
  border-color: var(--accent);
  color: var(--accent-bright);
}

.button__arrow {
  transition: transform 0.22s var(--ease);
}

.button:hover .button__arrow {
  transform: translateX(3px);
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Kopfzeile ------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--accent-bright);
  color: #04070d;
  text-decoration: none;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

/* Der Fortschrittsstrich sitzt auf der unteren Kante der
   Kopfzeile, nicht darüber: so bekommt er keine eigene Zeile und
   die Kopfzeile keine zweite Linie. */
.masthead__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

.masthead__row {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex: 0 0 auto;
}

.brand img {
  width: 46px;
  height: auto;
  transition: opacity 0.22s var(--ease);
}

.brand:hover img {
  opacity: 0.82;
}

.brand__name {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}

.brand__name span {
  color: var(--text-faint);
  letter-spacing: 0.28em;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.875rem);
  margin-left: auto;
}

/* Der Unterstrich wächst aus der Mitte, statt zu erscheinen.
   Ein Zustandswechsel, den man bemerkt, ohne ihn anzusehen. */
.nav__link {
  position: relative;
  font-size: 0.9375rem;
  color: var(--text-dim);
  text-decoration: none;
  padding-block: 0.375rem;
  transition: color 0.22s var(--ease);
  white-space: nowrap;
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.28s var(--ease);
}

.nav__link:hover,
.nav__link[aria-current='page'] {
  color: var(--text);
}

.nav__link:hover::after,
.nav__link[aria-current='page']::after {
  transform: scaleX(1);
}

/* Auf schmalen Geräten bleibt nur der Weg zum Kontakt stehen.
   Ein aufklappbares Menü bräuchte JavaScript; der Rest der
   Seite ist ohnehin eine einzige Spalte, durch die man scrollt. */
@media (max-width: 47rem) {
  .nav__link--optional {
    display: none;
  }
}

.language {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: clamp(0.75rem, 2vw, 1.25rem);
  border-left: 1px solid var(--line);
}

.language__link {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.language__link:hover {
  color: var(--text);
}

.language__link[aria-current='true'] {
  color: var(--accent);
}

/* ---------- Auftakt --------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 11vw, 8.5rem) 0;
}

/* Ein einzelner, sehr weicher Lichtschein hinter dem Text. Er
   nimmt die Farbe des Signets auf, damit Bild und Fläche
   zusammengehören. Beim Scrollen zieht er langsam nach. */
.hero::before {
  content: '';
  position: absolute;
  inset: -30% 25% auto -10%;
  height: 90%;
  background: radial-gradient(
    55% 50% at 30% 40%,
    rgba(88, 140, 184, 0.16),
    transparent 70%
  );
  pointer-events: none;
  will-change: transform;
}

.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

.hero h1 {
  font-size: var(--step-h1);
  max-width: 15ch;
}

.hero .lead {
  margin-top: 1.75rem;
  max-width: 54ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2.5rem;
}

.hero__mark {
  justify-self: center;
}

.hero__mark img {
  width: min(100%, 24rem);
  opacity: 0.95;
}

@media (max-width: 61.99rem) {
  .hero__mark {
    display: none;
  }
}

/* Die drei Kennzahlen. Sie schliessen den Auftakt nach unten ab
   und stellen zugleich die Verbindung zum ersten Abschnitt her —
   deshalb sitzen sie auf einer Linie, nicht in Kästen.

   `<dl>` mit vertauschter Reihenfolge: im Quelltext steht erst
   der Wert, dann die Beschriftung, weil ein Vorleseprogramm die
   Zahl ohne Beschriftung nicht einordnen kann. */
.proof {
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  margin: clamp(3.5rem, 8vw, 6rem) 0 0;
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line);
}

@media (min-width: 40rem) {
  .proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
  }
}

.proof__item {
  display: grid;
  gap: 0.375rem;
}

.proof__value {
  margin: 0;
  font-size: var(--step-figure);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--text);
  /* Ein sehr flacher Verlauf statt einer flachen Fläche. Er ist
     kaum zu sehen und genau deshalb richtig: er gibt der Zahl
     Körper, ohne sie zum Bild zu machen. */
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.proof__label {
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

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

/* Das Raster selbst ist die Linie: die Lücke von einem Bildpunkt
   zeigt die Hintergrundfarbe des Behälters. Damit gibt es keine
   doppelten Rahmen zwischen zwei Karten. */
.cards {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

/* Zwei Spalten, nicht vier. Vier waren einmal drin und sind
   wieder raus: bei 1160 Bildpunkten Satzspiegel bleiben pro
   Spalte knapp 200 übrig, das sind rund 26 Zeichen je Zeile.
   Deutsch hat dafür zu lange Wörter — „Nachvollziehbare" allein
   füllt zwei Drittel einer solchen Zeile, und der Absatz zerfällt
   zu einer Treppe. Zu zweit sind es rund 60 Zeichen: eine Zeile,
   die man liest, statt sie zu überfliegen.

   Nebenbei ist die Reihe aus vier schmalen Kacheln das Muster,
   das jede zweite Anbieterseite benutzt. */
@media (min-width: 40rem) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3.2vw, 2.75rem);
  background: var(--ink-raised);
  transition: background-color 0.3s var(--ease);
}

.card:hover {
  background: var(--ink-panel);
}

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

.card p {
  max-width: 46ch;
  color: var(--text-dim);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* Der kurze Strich über der Überschrift wächst beim Überfahren
   auf die volle Breite der Karte. Das ist die ganze Bewegung —
   sie zeigt an, was gerade gemeint ist. */
.card__rule {
  width: 1.75rem;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transition: width 0.42s var(--ease);
}

.card:hover .card__rule {
  width: 100%;
}

/* ---------- Schritte -------------------------------------- */

/* Eine nummerierte Liste — die Nummern setzt aber der Zähler
   unten, damit sie mit führender Null erscheinen. Der eigene
   Einzug der Liste muss weg, sonst zeigt sich links ein heller
   Streifen: die Trennfarbe des Rasters. */
.steps {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 54rem) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    padding-top: 1px;
  }
}

/* Der Rahmen um Schiene und Liste. Er existiert nur, damit die
   Schiene einen Bezugspunkt hat: sie darf nicht im <ol> stehen
   (dort sind nur <li> erlaubt), muss sich aber daran ausrichten. */
.steps__wrap {
  position: relative;
}

/* Die Schiene über den Schritten. Der Behälter ist die ruhende
   Linie, das Kind darin der Teil, der sich füllt. */
.steps__rail {
  display: none;
}

@media (min-width: 54rem) {
  .steps__rail {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--line-strong);
    overflow: hidden;
  }

  .steps__rail::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--accent-deep), var(--accent));
    transform: scaleX(0);
    transform-origin: left;
  }
}

.step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  background: var(--ink);
  counter-increment: step;
  border-top: 1px solid var(--line);
}

@media (min-width: 54rem) {
  .step {
    padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.25rem, 2vw, 1.75rem);
    border-top: none;
  }
}

.step::before {
  content: counter(step, decimal-leading-zero);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent);
}

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

.step p {
  color: var(--text-dim);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ---------- Unternehmen ----------------------------------- */

.company__split {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

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

.panel {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ink-panel);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  border-radius: 2px;
}

.panel h3 {
  font-size: var(--step-h3);
  margin-bottom: 0.75rem;
}

.panel p {
  color: var(--text-dim);
  font-size: 0.9375rem;
}

.values {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 54rem) {
  .values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}

/* Die Linie über jedem Wert läuft beim Überfahren in der
   Akzentfarbe an — von links, in Leserichtung. */
.value {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-strong);
}

.value::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.42s var(--ease);
}

.value:hover::before {
  transform: scaleX(1);
}

.value h3 {
  font-size: 1rem;
}

.value p {
  color: var(--text-dim);
  font-size: 0.9375rem;
  line-height: 1.6;
}

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

.contact__split {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 60rem) {
  .contact__split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.form {
  display: grid;
  gap: 1.25rem;
}

/* Ohne das zieht sich die Schaltfläche über die ganze Spalte —
   ein Raster streckt seine Kinder. Sie soll so breit sein wie
   ihre Beschriftung. */
.form .button {
  justify-self: start;
}

.field {
  display: grid;
  gap: 0.5rem;
}

.field label {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 0.22s var(--ease);
}

/* Das Feld, in dem man gerade schreibt, färbt auch seine
   Beschriftung. Damit bleibt klar, worauf man antwortet, wenn
   das Formular länger als der Bildschirm ist. */
.field:focus-within label {
  color: var(--accent);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.875rem 0.9375rem;
  background: var(--ink-raised);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.22s var(--ease), background-color 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-faint);
}

.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
  background: var(--ink-panel);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}

.field textarea {
  min-height: 8.5rem;
  resize: vertical;
}

/* Zwei Felder nebeneinander, sobald Platz ist. Darunter
   untereinander — mit dem gleichen Abstand wie zwischen allen
   anderen Feldern, sonst rutschen Name und Firma optisch
   zusammen. */
.pair {
  display: grid;
  gap: 1.25rem;
}

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

.form__note {
  font-size: 0.8125rem;
  color: var(--text-faint);
}

.form__note a {
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
}

.form__note a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Honigtopf gegen ausgefüllte Formulare von Maschinen. Nicht
   `display:none` — manche Absender füllen genau die Felder aus,
   die versteckt sind, aber nicht die, die es scheinbar nicht
   gibt. Für Vorleseprogramme ist es ausgeblendet. */
.trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.direct {
  display: grid;
  gap: 0.625rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.direct__label {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Der Ort ist eine Angabe, kein Kontaktweg — deshalb gedämpft und
   ohne Verweis. Sonst sähe er aus, als könnte man ihn anklicken. */
.direct p {
  color: var(--text-dim);
}

.direct a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.22s var(--ease);
  justify-self: start;
}

.direct a:hover {
  border-bottom-color: var(--accent);
}

/* ---------- Fusszeile ------------------------------------- */

.footer {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 0.875rem;
}

.footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}

.footer__brand {
  display: grid;
  gap: 0.25rem;
  margin-right: auto;
}

.footer__brand strong {
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-size: 0.8125rem;
}

.footer a {
  color: var(--text-faint);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.footer a:hover {
  color: var(--text);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

/* ---------- Textseiten ------------------------------------ */

/* Impressum und Datenschutz sind zwei Spalten, sobald Platz da
   ist: links der Titel, rechts der Text. Über eine ganze Breite
   gesetzt wäre der Titel eine einsame Zeile über viel Leere —
   und ein Rechtstext, der über 1200 Bildpunkte läuft, liest sich
   nicht. Der Titel bleibt beim Scrollen stehen: auf einer langen
   Datenschutzerklärung weiss man sonst nach zwei Bildschirmen
   nicht mehr, worin man liest. */
.prose {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

@media (min-width: 62rem) {
  .prose {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }

  .prose__head {
    position: sticky;
    /* Höhe der Kopfzeile plus Luft — sonst klebt der Titel darunter. */
    top: 7rem;
  }
}

/* „Datenschutzerklärung" ist ein Wort und breiter als die Spalte.
   Deutsch trennt an dieser Stelle sauber (Datenschutz-erklärung),
   dafür muss die Sprache am <html> stehen — sie steht dort. Ohne
   Trennung würde das Wort aus der Spalte laufen und über den Text
   der zweiten schreiben. */
.prose h1 {
  font-size: var(--step-h2);
  -webkit-hyphens: auto;
  hyphens: auto;
}

.prose__body {
  max-width: var(--measure);
}

.prose__intro {
  color: var(--text-dim);
  font-size: var(--step-lead);
  line-height: 1.6;
}

.prose__block {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}

/* Der erste Block schliesst direkt an den Titel an — dort braucht
   es keine zweite Trennlinie, die Spalte selbst trennt schon. */
.prose__body > .prose__block:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.prose__block h2 {
  font-size: var(--step-h3);
  margin-bottom: 0.75rem;
}

.prose__block p,
.prose__block li {
  color: var(--text-dim);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.prose__block dl {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  color: var(--text-dim);
  font-size: 0.9375rem;
}

.prose__block a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.22s var(--ease);
}

.prose__block a:hover {
  border-bottom-color: var(--accent);
}

.prose__stamp {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.8125rem;
  color: var(--text-faint);
}

/* ---------- Ein-Satz-Seiten ------------------------------- */

.notice {
  display: grid;
  align-content: center;
  gap: 1.25rem;
  min-height: min(70vh, 34rem);
  padding-block: clamp(3rem, 8vw, 6rem);
  text-align: left;
}

.notice h1 {
  font-size: var(--step-h2);
}

.notice p {
  max-width: var(--measure);
  color: var(--text-dim);
  font-size: var(--step-lead);
}

.notice .button {
  justify-self: start;
  margin-top: 1rem;
}

/* ---------- Druck ----------------------------------------- */

/* Ein Impressum wird ausgedruckt. Dann ist ein schwarzer Grund
   eine Zumutung für die Patrone und die Kennzahlen sind ohne
   Verlauf unlesbar — beides hier abgestellt. */
@media print {
  .masthead,
  .hero__mark,
  .form,
  .skip,
  .proof {
    display: none;
  }
  body {
    background: #ffffff;
    color: #000000;
  }
  .section {
    border-color: #cccccc;
  }
  .proof__value {
    background: none;
    -webkit-text-fill-color: #000000;
    color: #000000;
  }
}