/* ==========================================================================
   Fontis Software — Stylesheet
   Umsetzung des Entwurfs „Fontissoft modernes Design" (Design-System
   „Nocturne"). Dunkler Grund, ein blaulila Akzent, Inter als Textschrift,
   grosse ruhige Typografie statt Kaesten und Rahmen.

   ZWEI DINGE, DIE DER ENTWURF NICHT WISSEN KONNTE — beides erzwingt `_headers`:

   1. KEINE style="…"-ATTRIBUTE. Die CSP setzt `style-src 'self'` ohne
      'unsafe-inline'; die Vorlage besteht fast nur aus Inline-Styles, die der
      Browser hier stillschweigend verwerfen wuerde. Deshalb steht alles
      Sichtbare in dieser Datei, und das HTML traegt nur Klassen.

   2. GOOGLE FONTS BLEIBT DRAUSSEN. Die Vorlage laedt Inter per @import von
      fonts.googleapis.com; `default-src 'self'` blockt das — und das soll so
      bleiben: ein fremder Font-Host sieht die IP-Adresse jedes Besuchers, und
      diesen Drittanbieter-Zugriff deckt die kurze Datenschutzerklaerung
      nicht. Inter liegt deshalb selbst unter /assets/fonts/ und wird unten
      per @font-face eingebunden — dieselbe Bauart wie auf fribas.com.

   Die Tokens sind zeichengleich aus dem Design-System uebernommen. Wer die
   Farbigkeit aendert, aendert sie hier und nirgends sonst.

   Bei jeder Aenderung an dieser Datei `ASSET_V` in tools/build.py hochzaehlen:
   `_headers` cacht /assets/* 24 Stunden.
   ========================================================================== */

/* ---------------------------------- Schrift --------------------------------
   Inter, selbst gehostet. Die Dateien stammen von fonts.gstatic.com (Inter
   v20, variabel im Bereich 400–500) und liegen unter /assets/fonts/; die
   Lizenz (SIL OFL 1.1) liegt als OFL.txt daneben und muss dort bleiben — die
   OFL verlangt, dass sie die Schrift begleitet.

   Der Entwurf braucht Inter wirklich und nicht nur ungefaehr: die enge
   Laufweite der 84-px-Zeile (-0.02em) und die Tabellenziffern der
   Ablauf-Spalte (font-feature-settings: 'tnum') sind auf diese Schrift
   gerechnet. Mit Segoe UI als Ersatz stimmt beides nicht mehr.

   `unicode-range` teilt in latin und latin-ext. Der Browser laedt nur das,
   was auf der Seite vorkommt — deutscher und englischer Text liegt komplett
   in latin, latin-ext (85 KB) wird also nur geholt, wenn spaeter einmal ein
   Zeichen daraus auftaucht. Ein Besucher laedt heute 48 KB.

   ACHTUNG BEIM AUSTAUSCHEN: `_headers` cacht /assets/* 24 Stunden, und diese
   URLs tragen keinen Cache-Buster (`{{v}}` gilt nur fuer style.css und
   main.js). Eine neue Schriftfassung bekommt deshalb einen neuen Dateinamen,
   sonst laufen wiederkehrende Besucher einen Tag lang gegen die alte Datei.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  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: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  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;
}

:root {
  /* --- Grundfarben (Nocturne) --------------------------------------------
     Kontraste gegen den Grund #161826 nachgerechnet; WCAG 2.1 AA verlangt
     4,5:1 fuer Fliesstext:
       --text                 #e9e9ed  14,2:1
       --accent               #9184d9   5,5:1  (Links, Eyebrow, Ziffern)
       --text auf 55 % Deckung          4,6:1  (Fussnoten, Footer — Minimum)
     Unter 55 % faellt die Schrift durch die Pruefung. Wer eine Stelle noch
     leiser haben will, nimmt eine kleinere Rolle, nicht weniger Deckung. */
  --bg: #161826;
  --surface: #232532;
  --text: #e9e9ed;
  --accent: #9184d9;
  --accent-300: #d2cefd;
  --accent-900: #2b2741;
  --divider: color-mix(in srgb, #e9e9ed 16%, transparent);
  --neutral-700: #595d6c;

  /* Das Band der Grundsaetze: gesaettigtes Indigo als Flaeche, ein hellerer
     Schein darueber. Reine Flaechenfarben — nie fuer Text oder Bedienteile. */
  --section: #262a60;
  --section-glow: #353b80;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-weight-heading: 500;

  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;

  --radius-md: 8px;

  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, 0.55);

  /* Ein Mass fuer beide: der Inhalt und der Seitenrand des Kopfes muessen
     auf derselben Linie stehen, sonst haengt die Wortmarke schief. */
  --measure: 1160px;
  --gutter: clamp(20px, 5vw, 72px);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Der Kopf steht im Fluss und verdeckt nichts; die paar Pixel sind nur
     Luft ueber dem Ziel eines Ankersprungs. */
  scroll-padding-top: 24px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  /* Zwei Lichter auf dem Grund: ein akzentfarbener Schein oben rechts hinter
     der Ueberschrift, eine Verdunkelung unten links. Fest positioniert am
     Dokument, nicht am Bild — sie wandern also mit dem Scrollen davon. */
  background:
    radial-gradient(1200px 720px at 82% -160px,
      color-mix(in srgb, var(--accent-900) 75%, transparent), transparent 60%),
    radial-gradient(1100px 800px at -10% 100%,
      color-mix(in srgb, black 30%, transparent), transparent 55%),
    var(--bg);
  background-repeat: no-repeat;
}

.container {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

h1, h2, h3 {
  font-weight: var(--font-weight-heading);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
}

a { color: var(--accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--accent-300); text-decoration: underline; }

::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

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

/* Die durchscheinende Linie: sie endet nicht, sie verliert sich — je 48 px
   Verlauf an beiden Enden. Eine Nocturne-Signatur, kein Zierrat. */
.hr {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(to right,
    transparent, var(--divider) 48px,
    var(--divider) calc(100% - 48px), transparent);
}

/* Kleine Versalzeile ueber jeder Ueberschrift. Sie benennt den Abschnitt,
   die Ueberschrift darunter sagt etwas — deshalb steht sie in Akzentfarbe
   und nicht in Textfarbe. */
.eyebrow {
  display: block;
  font-size: 13px;
  line-height: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

/* ------------------------------- Buttons -------------------------------- */
/* Umrissen statt gefuellt: Auf dunklem Grund traegt eine gefuellte Flaeche
   zu viel Gewicht, und die Seite hat nur eine Handlung anzubieten. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font);
  font-weight: var(--font-weight-heading);
  font-size: 14px;
  line-height: 1.2;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; }

.btn-primary { color: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.btn-primary:active { background: color-mix(in srgb, var(--accent) 22%, transparent); }

.btn-ghost { color: var(--accent); padding-inline: var(--space-2); }
.btn-ghost:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.btn-ghost:active { background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* -------------------------------- Header -------------------------------- */
/* Nicht klebend und ohne Trennlinie: Der Entwurf laesst den Kopf in der
   Flaeche stehen und den Grund durchlaufen. `position: relative` bleibt,
   weil das ausgeklappte Menue sich daran haengt. */

.site-header { position: relative; z-index: 50; }

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 64px;
}

.brand { color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); text-decoration: none; }

/* Wortmarke statt Bildmarke: ein Logo gibt es noch nicht, und ein
   Platzhalter-Quadrat sieht schlechter aus als der gesetzte Name. */
.brand-name {
  font-weight: var(--font-weight-heading);
  font-size: 18px;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  /* Wortmarke links, alles Uebrige rechts. */
  margin-left: auto;
}

.site-nav a {
  font-size: 14px;
  white-space: nowrap;
  color: color-mix(in srgb, var(--text) 72%, transparent);
}
.site-nav a:hover { color: var(--accent); text-decoration: none; }
/* Der Handlungsknopf in der Leiste behaelt seine eigene Farbe. */
.site-nav a.btn-primary { color: var(--accent); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 8px;
  background: none;
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  cursor: pointer;
}
/* Bewusst .bar und nicht `.nav-toggle span`: im Knopf steht auch die
   sr-only-Beschriftung, und die duerfen die Balkenregeln nicht treffen. */
.nav-toggle .bar {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

/* --------------------------------- Hero ---------------------------------- */

.hero { padding: 112px 0 84px; }

.hero h1 {
  font-size: clamp(42px, 6vw, 84px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 20ch;
  /* Optischer Randausgleich: die Rundung des ersten Buchstabens haengt sonst
     sichtbar hinter der Kante des Fliesstextes zurueck. */
  margin: 0 0 0 -0.06em;
}
/* Der Umbruch der Schlagzeile ist gesetzt, nicht dem Zufall der Spaltenbreite
   ueberlassen — deshalb je Zeile ein Element. */
.hero h1 .line { display: block; }

.hero-sub {
  font-size: 17px;
  line-height: 28px;
  max-width: 58ch;
  margin: 32px 0 0;
  color: color-mix(in srgb, var(--text) 82%, transparent);
}

.hero-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ---------------------------- Band: Grundsaetze --------------------------- */
/* Vier Worte, die die Seite zusammenfassen, auf eigener Flaeche. Kein Kasten
   je Eintrag: die Flaeche traegt die Gruppe, die Typografie die Ordnung. */

.principles {
  padding: 56px 0;
  background:
    radial-gradient(900px 420px at 85% -40%,
      color-mix(in srgb, var(--section-glow) 70%, transparent), transparent 64%),
    var(--section);
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 36px 40px;
  align-items: start;
}

.principle-term {
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: var(--font-weight-heading);
  margin: 0;
  /* „Ansprechpartner" ist laenger als die schmalste Spalte. */
  hyphens: auto;
}

.principle-note {
  font-size: 13px;
  line-height: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 14px 0 0;
  color: color-mix(in srgb, var(--text) 64%, transparent);
}

/* ------------------------------- Sections -------------------------------- */

.section { padding: 98px 0 70px; }
.section-tight { padding: 84px 0 70px; }

.section h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.015em;
  max-width: 30ch;
}

.section-lead {
  font-size: 17px;
  line-height: 28px;
  max-width: 58ch;
  margin: 28px 0 0;
  color: color-mix(in srgb, var(--text) 82%, transparent);
}
.section-lead + .section-lead { margin-top: 20px; }

/* Der eine Satz, auf den die Seite hinauswill. Kein Zitat, keine
   Anfuehrungszeichen — nur Groesse und Farbe heben ihn heraus. */
.pull {
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--font-weight-heading);
  margin: 28px 0 0;
  max-width: 46ch;
  color: var(--accent-300);
}

/* ------------------------------ Leistungskarten --------------------------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 56px;
}

/* EINZIGE ABWEICHUNG VOM ENTWURF, und zwar bewusst: Die Vorlage nimmt die
   Karte des Design-Systems unveraendert, deren Innenabstand `--space-3`
   (8,4 px) betraegt. Das Mass stammt aus dichten Bedienoberflaechen; hier ist
   die Karte 330 px breit, und der Text stuende dann 8 px vor einer 8-px-Rundung
   — die Ecke schneidet optisch in die erste Zeile. 20 px halten den Abstand
   zur Rundung und lassen Titel und Text als Block stehen. Wer die Vorlage
   zeichengleich will, setzt hier `var(--space-3)` ein. */
.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--surface);
}

.feature-num {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.feature-card h3 { font-size: 17px; line-height: 1.2; margin: 0; }

.feature-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.8;
  flex: 1;
}

/* --------------------------------- Ablauf ---------------------------------- */
/* Eine echte <ol>: Die vier Schritte haben eine Reihenfolge, und die gehoert
   ins Markup, nicht nur in die Optik. Die Ziffern kommen aus einem Zaehler,
   damit sie auch dann stimmen, wenn ein Schritt dazwischengeschoben wird.
   `list-style: none` nimmt Safari/VoiceOver die Listensemantik, deshalb
   traegt das <ol> im HTML ein role="list" zurueck.

   Statt Kaesten jetzt eine Tabelle ohne Tabelle: Ziffer, Titel und Text
   stehen in drei Spalten auf gemeinsamer Grundlinie, getrennt nur durch eine
   Haarlinie. */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: minmax(56px, 120px) minmax(0, 320px) minmax(0, 1fr);
  gap: 14px clamp(24px, 4vw, 64px);
  align-items: baseline;
  padding: 28px 0;
}
.steps li + li { border-top: 1px solid var(--neutral-700); }

.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-size: 15px;
  line-height: 28px;
  color: var(--accent);
  /* Tabellenziffern: sonst tanzt die 1 gegen die 0 in der Spalte. */
  font-feature-settings: 'tnum' 1;
  /* Die Ziffer ist Dekoration: Der Text daneben sagt dasselbe, und ein
     Screenreader zaehlt die Listenpunkte ohnehin. */
  speak: never;
}

.steps h3 {
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.01em;
  margin: 0;
}

.steps p {
  margin: 0;
  font-size: 15.5px;
  line-height: 28px;
  max-width: 52ch;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

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

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px clamp(32px, 6vw, 96px);
  align-items: start;
}

.contact-grid h2 { max-width: 22ch; }
.contact-grid .section-lead { max-width: 54ch; }

.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.contact-kicker {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.contact-mail {
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--font-weight-heading);
  margin: 0;
  /* Nicht umbrechen: eine halbierte Adresse laedt zum Vertippen ein. */
  overflow-wrap: anywhere;
}

.contact-card p {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.8;
}
.contact-card .contact-kicker,
.contact-card .contact-mail { margin-top: 0; opacity: 1; }

.contact-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  opacity: 1;
  color: color-mix(in srgb, var(--text) 55%, transparent);
}

/* --------------------------------- Footer --------------------------------- */
/* Eine Zeile, keine Spaltenlandschaft: Der Fuss traegt vier Angaben, und vier
   Angaben brauchen kein Raster. */

.site-footer {
  padding: 56px 0;
  font-size: 13px;
  line-height: 28px;
  color: color-mix(in srgb, var(--text) 55%, transparent);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--divider);
  padding-top: 40px;
}
.site-footer a { color: var(--accent); }

.footer-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* Impressum und Datenschutz tragen nur die Rechtszeile — dieselbe Optik,
   ohne die Linksammlung der Startseite. */
.footer-legal p { margin: 0; }

/* --------------------------- Rechtstexte (legal) --------------------------- */
/* Viele kurze Abschnitte: die h2-Groesse der Startseite wuerde den Text
   dominieren, den sie einleitet. */

.legal { max-width: 78ch; }
.legal h1 { font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.02em; }
.legal h2 {
  font-size: 20px;
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.01em;
  margin: 2.4em 0 0.6em;
}
.legal p, .legal li {
  font-size: 15.5px;
  line-height: 28px;
  color: color-mix(in srgb, var(--text) 82%, transparent);
}
.legal p { margin: 0 0 1em; }
.legal ul, .legal ol { padding-left: 1.4em; }
.legal .hero-actions { margin-top: 32px; }

/* ---------------------------- Sprache (DE/EN) ------------------------------ */
/* Jede Sprache hat eine eigene URL (/ und /en/), erzeugt von tools/build.py —
   es gibt nichts umzuschalten. Die beiden Regeln bleiben als Fangnetz: sollte
   der Generator einen fremdsprachigen Block uebersehen, faellt er nicht in den
   Text, sondern verschwindet. Sichtbar wird der Fehler trotzdem, weil
   build.py in diesem Fall abbricht. */

html[lang="de"] [lang="en"] { display: none !important; }
html[lang="en"] [lang="de"] { display: none !important; }

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.lang-btn {
  border: 0;
  background: transparent;
  padding: 6px 11px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: var(--font-weight-heading);
  line-height: normal;
  color: color-mix(in srgb, var(--text) 72%, transparent);
  text-decoration: none;
  cursor: pointer;
}
.lang-btn:hover { color: var(--accent); text-decoration: none; }

/* Die aktive Sprache ist ein Link auf die eigene Seite; aria-current sagt
   das den Screenreadern, die Einfaerbung dem Auge. */
.lang-btn[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-300);
  cursor: default;
}

/* ------------------------- Tastaturbedienung ------------------------------- */

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--surface);
  color: var(--text);
  padding: 10px 18px;
  border: 1px solid var(--accent);
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  font-weight: var(--font-weight-heading);
  transition: top 0.15s ease-in;
}
.skip-link:focus { top: 0; color: var(--text); text-decoration: none; }

/* ------------------------------- Responsive -------------------------------- */

@media (max-width: 900px) {
  .hero { padding: 72px 0 56px; }
  .section { padding: 64px 0 48px; }
  .section-tight { padding: 56px 0 48px; }
  .principles { padding: 44px 0; }
  .contact-grid { gap: 40px; }

  /* Bewusst auf #site-nav gemuenzt: Impressum und Datenschutz haben nur den
     Zurueck-Link und keinen Toggle-Button, ihre Navigation darf nie
     einklappen. */
  .nav-toggle { display: flex; }

  #site-nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 16px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
  }

  #site-nav.open { display: flex; }
  #site-nav a { padding: 12px 4px; font-size: 16px; }
  #site-nav a.btn-primary { justify-content: flex-start; margin-top: 8px; }
}

/* Die drei Spalten des Ablaufs brechen zusammen, bevor die Textspalte
   unlesbar schmal wird. Die Ziffer bleibt oben stehen und wird zur
   Beschriftung der Zeile. */
@media (max-width: 720px) {
  .steps li {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 6px 16px;
  }
  .steps li::before { grid-row: 1; }
  .steps h3 { font-size: 21px; }
  .steps p { grid-column: 2; }
}

/* ---------------------------------- Druck ---------------------------------- */
/* DIESER BLOCK IST KEIN LUXUS, SONDERN DIE ZWEITE HAELFTE DES GESCHAEFTS.
   Wer hier liest, druckt anschliessend: Das Angebot geht in die Vergabeakte,
   die Seite des Anbieters gleich mit — als Papier oder als „Als PDF
   speichern".

   Ohne diesen Block kommt ein leeres Blatt heraus, und zwar zwangslaeufig:
   Browser drucken Hintergruende standardmaessig NICHT (`print-color-adjust`
   steht auf `economy`), die Schriftfarbe dagegen schon. Der helle Text
   (#e9e9ed) faende sich also auf weissem Papier wieder. Deshalb wird hier
   nicht „das Dunkle etwas aufgehellt", sondern die Farbgebung fuer Papier
   umgekehrt: schwarz auf weiss.

   Zwei Dinge, die am Bildschirm selbstverstaendlich sind und auf Papier
   verloren gehen, werden ausgeschrieben:
     - Links haben kein Ziel mehr. Externe URLs kommen deshalb in Klammern
       hinter den Linktext.
     - Die Knoepfe („E-Mail schreiben") zeigen ins Nichts. Der Kasten am Ende
       traegt die Adresse deshalb noch einmal als Text.
   Nicht ausgeschrieben werden interne Sprungmarken (#anfrage) und mailto: —
   das eine ist auf Papier sinnlos, das andere stuende doppelt. */

@media print {
  /* Die Verlaeufe des Bildschirmgrundes ersatzlos weg: ein Farbverlauf, den
     der Drucker weglaesst, hinterlaesst nichts — eine falsche Schriftfarbe
     davor aber schon. */
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.45;
  }

  /* Bedienteile haben auf Papier keine Funktion. */
  .skip-link,
  .nav-toggle,
  .site-nav,
  .lang-switch,
  .hero-actions,
  .footer-nav { display: none !important; }

  /* Flaechen und Karten werden zu Umrissen. Der Grauwert der Linie traegt die
     Gliederung, die am Bildschirm die Flaeche trug. */
  .principles,
  .feature-card,
  .contact-card {
    background: none !important;
    box-shadow: none !important;
    border: 1pt solid #999;
    border-radius: 0;
  }
  .principles { border-inline: 0; padding: 12pt 0; }

  /* Alles, was am Bildschirm ueber Deckkraft leiser gestellt war, wird auf
     Papier schwarz: 55 % Deckung sind auf einem Tintenstrahl kein leises
     Grau mehr, sondern eine Zeile, die man raet. */
  .hero-sub,
  .section-lead,
  .steps p,
  .principle-note,
  .contact-card p,
  .contact-note,
  .site-footer,
  .legal p,
  .legal li,
  .feature-card p {
    color: #000 !important;
    opacity: 1 !important;
  }
  .eyebrow,
  .feature-num,
  .contact-kicker,
  .steps li::before { color: #444 !important; }
  .pull { color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }

  /* Papier hat weniger Platz als ein 27-Zoll-Schirm — die Bildschirmsprunge
     zwischen den Abschnitten wuerden Seiten kosten. */
  .hero { padding: 0 0 18pt; }
  .hero h1 { font-size: 24pt; margin-left: 0; }
  .hero h1 .line { display: inline; }
  .section, .section-tight { padding: 18pt 0 12pt; }
  .section h2 { font-size: 16pt; }
  .steps { margin-top: 18pt; }
  .steps li { padding: 10pt 0; }
  .steps h3 { font-size: 12pt; }
  .site-footer { padding: 18pt 0 0; }
  .site-footer .container { padding-top: 10pt; }

  /* Keine Ueberschrift allein am Seitenfuss, keine zerrissenen Karten. */
  h1, h2, h3 { break-after: avoid; }
  .feature-card, .contact-card, .steps li { break-inside: avoid; }

  /* Externe Ziele ausschreiben. `[href^="http"]` trifft genau die fremden
     Adressen: interne Links dieser Seite stehen alle relativ. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  .container { max-width: none; padding: 0; }

  @page { margin: 18mm 16mm; }
}