/* digitally-done.com – Stylesheet
 *
 * Eigener Entwurf. Vorgabe waren nur die Farben: dunkles Marineblau,
 * Cyan als Akzent.
 *
 * Motto: modern, auf Zukunft angelegt, professionell. Die Seite soll
 * Kunden gewinnen, und zwar über Qualität und Verlässlichkeit – nicht
 * über Effekte. Daraus folgt die Haltung:
 *
 *   Beeindrucken durch Präzision, nicht durch Zirkus. Ein Dienstleister,
 *   der Lohnabrechnungen und Mandantendaten verwaltet, gewinnt Vertrauen
 *   durch Genauigkeit. Wer mit Animationen protzt, wirkt wie jemand, der
 *   von der Sache ablenken will.
 *
 * Konkret, und anders als die zwei Fassungen zuvor:
 *
 *   Keine Kästen.      Blöcke stehen offen auf der Fläche, getrennt durch
 *                      feine Linien. Ein Rahmen sperrt Inhalt ein; eine
 *                      Linie ordnet ihn.
 *   Nummern führen.    Jeder Abschnitt trägt eine laufende Nummer in
 *                      Monospace – ein Takt durch die ganze Seite, und
 *                      ein technischer Zug, der zu "automatisiert" passt.
 *   Harter Kontrast.   Winzige gesperrte Labels gegen sehr große
 *                      Überschriften. Dazwischen nichts Mittelmäßiges.
 *   Raster sichtbar.   Feine senkrechte Linien zeigen die Ordnung, nach
 *                      der gesetzt wurde.
 *   Akzent sparsam.    Cyan nur, wo es etwas bedeutet. Wer alles betont,
 *                      betont nichts.
 *
 * Bewegung ist zurückhaltend und hält sich an prefers-reduced-motion.
 * Alles Eingeblendete ist ohne JavaScript sofort sichtbar.
 */

@import url("fonts.css");

/* ---------------------------------------------------------------- Token */

:root {
  --grund: #0a0f1f;
  --grund-tief: #05080f;
  --grund-hoch: #0e1526;
  --text: #f5f8fc;
  --text-ruhig: #9aabc7;
  --text-leise: #5f7294;
  --akzent: #00b2ff;
  --akzent-hell: #7fdcff;
  --linie: rgb(255 255 255 / 0.09);
  --linie-stark: rgb(255 255 255 / 0.2);
  --erfolg: #2bd4a0;
  --warnung: #ef6b6b;
  --stern: #ffc83d;

  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;
  --s4: 1rem;     --s5: 1.5rem;   --s6: 2.25rem;
  --s7: 3.5rem;   --s8: 6rem;     --s9: 9rem;

  --breite: 78rem;
  --lesebreite: 36rem;

  --schrift: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, sans-serif;
  --schrift-titel: "Space Grotesk", var(--schrift);
  --schrift-fest: ui-monospace, "SF Mono", "Cascadia Mono", Consolas,
                  "Liberation Mono", monospace;

  --kurve: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------- Basis */

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

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Senkrechte Rasterlinien über der ganzen Seite – wie die Hilfslinien
   einer Zeitungsseite, nur dass sie hier stehen bleiben dürfen. Sie sind
   der Grund, warum die Seite geordnet wirkt, auch wo nichts steht. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  max-width: var(--breite);
  margin-inline: auto;
  background-image: repeating-linear-gradient(
    90deg, var(--linie) 0 1px, transparent 1px calc(100% / 6));
  opacity: 0.45;
}
@media (max-width: 56rem) { body::before { display: none; } }

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.8rem, 1rem + 6.4vw, 6rem); font-weight: 700; }
h2 { font-size: clamp(2.1rem, 1.1rem + 3.4vw, 4rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); font-weight: 600;
     letter-spacing: -0.02em; }
h4 { font-size: 0.95rem; font-weight: 600; }

p { margin: 0 0 var(--s4); max-width: var(--lesebreite);
    color: var(--text-ruhig); }
p:last-child { margin-bottom: 0; }

a { color: var(--akzent); text-decoration: none;
    transition: color 0.15s var(--kurve); }
a:hover { color: var(--akzent-hell); }
main p a { border-bottom: 1px solid rgb(0 178 255 / 0.4); }
main p a:hover { border-color: currentColor; }

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

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

ul, ol { margin: 0 0 var(--s4); padding-left: 1.2em;
         max-width: var(--lesebreite); color: var(--text-ruhig); }
li { margin-bottom: var(--s2); }
li::marker { color: var(--akzent); }

strong { font-weight: 600; color: var(--text); }

code { font-family: var(--schrift-fest); font-size: 0.88em;
       color: var(--akzent-hell); }

hr { border: 0; border-top: 1px solid var(--linie); margin: var(--s7) 0; }

/* -------------------------------------------------------------- Layout */

.huelle {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--s5);
}

.abschnitt { position: relative; padding-block: var(--s9); }
.abschnitt--eng { padding-block: var(--s8); }

/* Abgesetzte Abschnitte bekommen eine Linie oben statt einer anderen
   Hintergrundfarbe. Farbwechsel zerschneiden eine Seite; Linien gliedern. */
.abschnitt--gedaempft { border-top: 1px solid var(--linie); }
.abschnitt--gedaempft::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 24rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.022), transparent);
  pointer-events: none;
}

/* ------------------------------------------------- Abschnittsüberschrift */

/* Eine Linie markiert den Anfang des Abschnitts, darunter die
   Überschrift in voller Größe.
 *
 * Hier stand zuerst eine laufende Nummer. Die ist wieder raus: Sie zählte
 * nur durch, ohne dass die Reihenfolge etwas bedeutet hätte - und was wie
 * Information aussieht, aber keine ist, verwirrt mehr als es ordnet. Auf
 * Seiten mit eigenem Aufbau sprang die Zählung zudem, weil nicht jeder
 * Abschnitt einen Kopf hat.
 *
 * Wo eine echte Abfolge besteht, sind die Nummern geblieben: in der
 * Ablauf-Kette und bei den nummerierten Schritten.
 */
.abschnitt-kopf { margin-bottom: var(--s8); }

.abschnitt-kopf::before {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-bottom: var(--s6);
  background: linear-gradient(90deg, var(--akzent), transparent);
}

/* Steht ein eigenes Label über der Überschrift, braucht es den Strich
   nicht zusätzlich - sonst stehen zwei Marker übereinander. */
.abschnitt-kopf:has(.marker)::before { display: none; }

.abschnitt-kopf h2 { max-width: 20ch; margin-bottom: var(--s5); }
.abschnitt-kopf p {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
  max-width: 40rem;
}

.marker {
  display: block;
  font-family: var(--schrift-fest);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: var(--s4);
}

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

.kopf {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgb(10 15 31 / 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--linie);
}

.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 4.5rem;
}

.marke img { height: 1.85rem; width: auto; }

.nav { display: flex; align-items: center; gap: var(--s6); }

.nav a {
  position: relative;
  color: var(--text-ruhig);
  font-size: 0.9rem;
  font-weight: 500;
  padding-block: var(--s2);
}
.nav a:not(.knopf)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--akzent);
  transition: right 0.3s var(--kurve);
}
.nav a:not(.knopf):hover { color: var(--text); }
.nav a:not(.knopf):hover::after,
.nav a[aria-current="page"]::after { right: 0; }
.nav a[aria-current="page"] { color: var(--text); }

/* Der Knopf in der Kopfzeile ist kleiner und ruhiger als die im
   Seiteninhalt. Oben steht er dauerhaft im Blick - dort wirkt die volle
   Groesse aufdringlich und nimmt den Knoepfen im Text ihre Wirkung. Statt
   gefuellter Flaeche ein Rahmen, der sich erst beim Ueberfahren fuellt. */
.kopf .knopf {
  padding: 0.6rem 1.15rem;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  background: transparent;
  border-color: var(--akzent);
  color: var(--akzent);
}
.kopf .knopf:hover {
  background: var(--akzent);
  color: #04131f;
  border-color: var(--akzent);
}
.kopf .knopf::after { font-size: 0.9em; }

.nav-schalter {
  display: none;
  background: none;
  border: 1px solid var(--linie-stark);
  color: var(--text);
  padding: var(--s2) var(--s3);
  cursor: pointer;
  font-family: var(--schrift-fest);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

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

/* Rechteckig, nicht rund. Runde Knöpfe sind die Voreinstellung jedes
   Baukastens; eine Kante wirkt entschiedener. */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: 0.95rem 1.75rem;
  border: 1px solid transparent;
  font-family: var(--schrift-fest);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s var(--kurve), color 0.2s var(--kurve),
              border-color 0.2s var(--kurve);
}

.knopf--haupt { background: var(--akzent); color: #04131f; }
.knopf--haupt:hover { background: var(--akzent-hell); color: #04131f; }

.knopf--rand { border-color: var(--linie-stark); color: var(--text); }
.knopf--rand:hover { border-color: var(--akzent); color: var(--akzent); }

.knopf::after { content: "→"; transition: transform 0.25s var(--kurve); }
.knopf:hover::after { transform: translateX(0.25rem); }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--s4);
               margin-top: var(--s7); }

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

.hero {
  position: relative;
  padding-block: clamp(var(--s8), 14vw, 12rem) var(--s8);
  border-bottom: 1px solid var(--linie);
  overflow: hidden;
}

/* Eine Lichtquelle von links oben. Kein Farbgewitter – eine genügt, um
   einer dunklen Fläche Tiefe zu geben. */
.hero::before {
  content: "";
  position: absolute;
  width: 62rem; height: 42rem;
  top: -20rem; left: -14rem;
  background: radial-gradient(circle, rgb(0 178 255 / 0.18), transparent 62%);
  filter: blur(40px);
  pointer-events: none;
}

.hero-inhalt { position: relative; z-index: 3; }

.hero h1 { max-width: 14ch; margin-bottom: var(--s6); }
.hero h1 .akzent { color: var(--akzent); }

.hero-lead {
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.5;
  max-width: 38rem;
}

/* Kennzahlen als Zeile unter dem Hero, durch Linien getrennt */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--s8);
  border-top: 1px solid var(--linie);
}
.kennzahlen > div {
  padding: var(--s5) var(--s5) 0 0;
  border-right: 1px solid var(--linie);
}
.kennzahlen > div:last-child { border-right: 0; }
.kennzahlen > div + div { padding-left: var(--s5); }

.kennzahl-wert {
  display: block;
  font-family: var(--schrift-titel);
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}
.kennzahl-text {
  display: block;
  margin-top: var(--s3);
  font-family: var(--schrift-fest);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-leise);
  line-height: 1.4;
}
@media (max-width: 48rem) {
  .kennzahlen { grid-template-columns: repeat(2, 1fr); }
  .kennzahlen > div:nth-child(2) { border-right: 0; }
  .kennzahlen > div:nth-child(-n+2) { border-bottom: 1px solid var(--linie);
                                      padding-bottom: var(--s5); }
  .kennzahlen > div:nth-child(3) { padding-left: 0; }
}

/* --------------------------------------------------- Blöcke statt Kästen */

/* Die Grundform dieser Seite. Kein Rahmen, kein Hintergrund – eine Linie
   darüber, die beim Überfahren in der Akzentfarbe durchläuft. */
.raster, .liste {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  border-top: 1px solid var(--linie);
}
.raster--zwei { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
.raster--vier { grid-template-columns: repeat(2, 1fr); }

/* Volle Reihen, keine Reste.

   auto-fit füllt die Breite und lässt übrig, was nicht mehr passt: bei
   fünf Karten 4 + 1, bei sechs 4 + 2. Das sah nach Fehler aus, nicht nach
   Absicht. Die Spaltenzahl richtet sich deshalb nach der Anzahl der
   Karten, sodass die Reihen aufgehen.

   Grundlage ist ein Raster aus sechs Spalten – 2, 3 und 6 teilen es glatt.
   Eine Karte belegt je nach Anzahl zwei oder drei davon. Die Auswahl über
   :has(:nth-child(n):last-child) trifft genau die Raster mit n Karten.

   Jede Regel wird in den Mediaqueries mit derselben Spezifität
   zurückgenommen – ein pauschales .raster > .karte { grid-column: auto }
   verliert sonst gegen die :has()-Regeln, und die Karten standen bei
   mittlerer Breite einzeln untereinander. */

/* --- Zwei Karten: zwei gleiche Spalten ------------------------------- */
.raster:has(> .karte:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}

/* --- Drei und sechs Karten: drei Spalten (3 bzw. 3 + 3) -------------- */
.raster:has(> .karte:nth-child(3):last-child),
.raster:has(> .karte:nth-child(6):last-child) {
  grid-template-columns: repeat(3, 1fr);
}

/* --- Fünf Karten: drei oben, zwei darunter über die ganze Breite ----- */
.raster:has(> .karte:nth-child(5):last-child) {
  grid-template-columns: repeat(6, 1fr);
}
.raster:has(> .karte:nth-child(5):last-child) > .karte { grid-column: span 2; }
.raster:has(> .karte:nth-child(5):last-child) > .karte:nth-child(n+4) {
  grid-column: span 3;
}

/* --- Sieben Karten: vier oben, drei darunter ------------------------- */
.raster:has(> .karte:nth-child(7):last-child) {
  grid-template-columns: repeat(12, 1fr);
}
.raster:has(> .karte:nth-child(7):last-child) > .karte { grid-column: span 3; }
.raster:has(> .karte:nth-child(7):last-child) > .karte:nth-child(n+5) {
  grid-column: span 4;
}

/* --- Vier und acht Karten: vier Spalten ------------------------------ */
.raster:has(> .karte:nth-child(8):last-child) {
  grid-template-columns: repeat(4, 1fr);
}

/* Mittlere Breiten: alles läuft auf zwei Spalten.

   Bei einer ungeraden Kartenzahl bliebe die letzte allein in ihrer Reihe
   und daneben eine Lücke – genau der Eindruck, der bei 4 + 2 und 4 + 1
   als Fehler gelesen wurde. Deshalb spannt die letzte Karte dort über
   beide Spalten: die Reihe ist gefüllt, und dass sie breiter ist, liest
   sich als Abschluss. */
@media (max-width: 68rem) {
  .raster:has(> .karte:nth-child(3):last-child),
  .raster:has(> .karte:nth-child(5):last-child),
  .raster:has(> .karte:nth-child(6):last-child),
  .raster:has(> .karte:nth-child(7):last-child),
  .raster:has(> .karte:nth-child(8):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
  .raster:has(> .karte:nth-child(5):last-child) > .karte,
  .raster:has(> .karte:nth-child(5):last-child) > .karte:nth-child(n+4),
  .raster:has(> .karte:nth-child(7):last-child) > .karte,
  .raster:has(> .karte:nth-child(7):last-child) > .karte:nth-child(n+5) {
    grid-column: auto;
  }
  /* Die letzte Karte einer ungeraden Zahl über beide Spalten */
  .raster:has(> .karte:nth-child(3):last-child) > .karte:nth-child(3),
  .raster:has(> .karte:nth-child(5):last-child) > .karte:nth-child(5),
  .raster:has(> .karte:nth-child(7):last-child) > .karte:nth-child(7) {
    grid-column: 1 / -1;
  }

  /* Einzug und Trennlinien für zwei Spalten */
  .raster:has(> .karte:nth-child(3):last-child) > .karte,
  .raster:has(> .karte:nth-child(5):last-child) > .karte,
  .raster:has(> .karte:nth-child(6):last-child) > .karte,
  .raster:has(> .karte:nth-child(7):last-child) > .karte,
  .raster:has(> .karte:nth-child(8):last-child) > .karte {
    padding-left: var(--s6);
    border-right: 1px solid var(--linie);
  }
  .raster:has(> .karte:nth-child(3):last-child) > .karte:nth-child(2n+1),
  .raster:has(> .karte:nth-child(5):last-child) > .karte:nth-child(2n+1),
  .raster:has(> .karte:nth-child(6):last-child) > .karte:nth-child(2n+1),
  .raster:has(> .karte:nth-child(7):last-child) > .karte:nth-child(2n+1),
  .raster:has(> .karte:nth-child(8):last-child) > .karte:nth-child(2n+1) {
    padding-left: 0;
  }
  .raster:has(> .karte:nth-child(3):last-child) > .karte:nth-child(2n),
  .raster:has(> .karte:nth-child(5):last-child) > .karte:nth-child(2n),
  .raster:has(> .karte:nth-child(6):last-child) > .karte:nth-child(2n),
  .raster:has(> .karte:nth-child(7):last-child) > .karte:nth-child(2n),
  .raster:has(> .karte:nth-child(8):last-child) > .karte:nth-child(2n),
  .raster:has(> .karte:nth-child(3):last-child) > .karte:nth-child(3),
  .raster:has(> .karte:nth-child(5):last-child) > .karte:nth-child(5),
  .raster:has(> .karte:nth-child(7):last-child) > .karte:nth-child(7) {
    border-right: 0;
  }
}

/* Schmale Fenster: eine Spalte, keine senkrechten Linien. */
@media (max-width: 52rem) {
  .karte, .raster > .karte + .karte, .liste > .karte + .karte,
  .raster:has(> .karte) > .karte {
    border-right: 0; padding-left: 0; padding-right: 0;
  }
}

.karte {
  position: relative;
  padding: var(--s6) var(--s6) var(--s6) 0;
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  transition: background 0.3s var(--kurve);
}

/* Die Akzentlinie, die beim Überfahren oben durchläuft. */
.karte::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 100%;
  height: 1px;
  background: var(--akzent);
  transition: right 0.5s var(--kurve);
  z-index: 1;
}
.karte:hover::before { right: 0; }
.karte:hover { background: rgb(255 255 255 / 0.018); }

/* Der Lichtkegel folgt dem Zeiger.

   Das Skript schreibt die Zeigerposition als --mx und --my in die Kachel;
   hier wird daraus ein weicher Schein. Ohne diese Regel lief das Skript
   ins Leere – es setzte die Werte, aber niemand las sie.

   Der Kegel liegt unter dem Text (z-index: 0 gegen die Inhalte) und
   nimmt keine Klicks an. Auf Geräten ohne Zeiger setzt das Skript die
   Werte gar nicht erst; der Vorgabewert 50% hält den Schein dann mittig
   und unsichtbar, weil die Deckkraft bei 0 bleibt. */
.karte::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--kurve);
  background: radial-gradient(
    16rem circle at var(--mx, 50%) var(--my, 50%),
    rgb(0 178 255 / 0.11), rgb(0 178 255 / 0.03) 38%, transparent 68%);
}
.karte:hover::after { opacity: 1; }
.karte > * { position: relative; z-index: 1; }

.karte h3 { margin-bottom: var(--s3); }
.karte p { color: var(--text-ruhig); max-width: none; }
.karte > :last-child { margin-bottom: 0; }

.karte-kennung {
  display: block;
  font-family: var(--schrift-fest);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: var(--s4);
}

/* Hervorgehobene Kachel: kein Kasten, sondern eine stehende Akzentlinie.

   Als Innenschatten statt als ::after – dieses Pseudoelement trägt jetzt
   den Lichtkegel, und die spezifischere Regel hätte ihn hier verdrängt. */
.karte--hervor {
  box-shadow: inset 0 2px 0 var(--akzent);
}

/* ------------------------------------------------------- Bewertungen */

.bewertung-kopf {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s4);
  padding-bottom: var(--s5);
  margin-bottom: var(--s6);
  border-bottom: 1px solid var(--linie);
}
.sterne { color: var(--stern); font-size: 1rem; letter-spacing: 0.1em; }
.bewertung-zahl {
  font-family: var(--schrift-titel);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.bewertung-quelle {
  font-family: var(--schrift-fest);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.stimme {
  padding: 0 var(--s6) var(--s6) 0;
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.stimme:last-child { border-right: 0; }
.stimme + .stimme { padding-left: var(--s6); }
@media (max-width: 52rem) {
  .stimme, .stimme + .stimme {
    border-right: 0; padding-left: 0; padding-right: 0;
  }
}

.stimme blockquote {
  margin: 0 0 var(--s5);
  font-family: var(--schrift-titel);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--text);
}
.stimme-fuss { display: flex; align-items: baseline; gap: var(--s3); }
.stimme-name { font-size: 0.92rem; font-weight: 600; }
.stimme-datum {
  font-family: var(--schrift-fest);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--text-leise);
}
.stimme-kreis { display: none; }

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

.schritte { list-style: none; padding: 0; margin: 0; counter-reset: schritt; }
.schritte li {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--s5);
  padding-block: var(--s6);
  margin: 0;
  border-top: 1px solid var(--linie);
  counter-increment: schritt;
}
.schritte li::before {
  content: "0" counter(schritt);
  font-family: var(--schrift-fest);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--akzent);
  padding-top: 0.3rem;
}
/* strong und span sind beide direkte Kinder des Grid-Elements und
   landeten dadurch in getrennten Spalten - der Text brach nach jedem Wort
   um. Beide gehoeren in die zweite Spalte, untereinander. */
.schritte strong {
  grid-column: 2;
  display: block;
  margin-bottom: var(--s2);
  font-family: var(--schrift-titel);
  font-size: 1.15rem;
  color: var(--text);
}
.schritte li > span {
  grid-column: 2;
  color: var(--text-ruhig);
  max-width: 46rem;
}
@media (max-width: 40rem) {
  .schritte strong, .schritte li > span { grid-column: 1; }
}
@media (max-width: 40rem) {
  .schritte li { grid-template-columns: 1fr; gap: var(--s2); }
}

/* ---------------------------------------------------- Text neben Inhalt */

.zweispalt {
  display: grid;
  gap: var(--s8);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 56rem) {
  .zweispalt { grid-template-columns: 1fr; gap: var(--s6); }
}

.bild { position: relative; overflow: hidden; }
.bild img { width: 100%; filter: saturate(0.9) contrast(1.05); }
.bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(10 15 31 / 0.1), rgb(10 15 31 / 0.5));
  pointer-events: none;
}

/* --------------------------------------------------------------- Preise */

.preis {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  font-family: var(--schrift-titel);
  margin-block: var(--s4) var(--s5);
}
.preis-zahl {
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
}
.preis-einheit {
  font-family: var(--schrift-fest);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.merkmale { list-style: none; padding: 0; margin: 0; }
.merkmale li {
  padding-block: var(--s3);
  border-top: 1px solid var(--linie);
  color: var(--text-ruhig);
  font-size: 0.95rem;
  margin: 0;
}
.merkmale li:first-child { border-top: 0; }

/* ------------------------------------------------------------ Tabellen */

.tabelle-huelle { overflow-x: auto; margin-bottom: var(--s5); }
table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
th, td { text-align: left; padding: var(--s3) var(--s5) var(--s3) 0; }
td { border-top: 1px solid var(--linie); color: var(--text-ruhig); }
td:first-child { font-family: var(--schrift-fest); font-size: 0.85rem;
                 color: var(--text); white-space: nowrap; }
th {
  font-family: var(--schrift-fest);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
  border-bottom: 1px solid var(--linie-stark);
  padding-bottom: var(--s3);
}
tbody tr { transition: background 0.15s var(--kurve); }
tbody tr:hover { background: rgb(255 255 255 / 0.02); }

/* ------------------------------------------------------------------ FAQ */

.faq { max-width: 54rem; }
.faq details { border-top: 1px solid var(--linie); padding-block: var(--s5); }
.faq details:last-child { border-bottom: 1px solid var(--linie); }
.faq summary {
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--s5);
  align-items: center;
  transition: color 0.2s var(--kurve);
}
.faq summary:hover { color: var(--akzent); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--schrift-fest);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--akzent);
  flex-shrink: 0;
  transition: transform 0.3s var(--kurve);
}
.faq details[open] summary { color: var(--akzent); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > *:not(summary) { margin-top: var(--s4); color: var(--text-ruhig); }

/* ---------------------------------------------------------- Prozesskette */

/* Vier Stationen nebeneinander, auf schmalen Geraeten untereinander.
   Die Verbindungslinie laeuft als Pseudo-Element durch - waagerecht auf
   dem Bildschirm, senkrecht auf dem Telefon. Dadurch braucht es kein
   Bild, das auf kleinen Geraeten unlesbar waere. */
.kette {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, 1fr);
  counter-reset: station;
}

.station {
  position: relative;
  margin: 0;
  padding: var(--s6) var(--s5) var(--s6) 0;
  border-top: 1px solid var(--linie);
  border-right: 1px solid var(--linie);
}
.station:last-child { border-right: 0; }
.station + .station { padding-left: var(--s5); }

/* Die Linie, die die Stationen verbindet: ein Punkt auf der oberen Kante,
   der die Station markiert. */
.station::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--akzent);
}
.station + .station::before { left: var(--s5); }

.station-nummer {
  display: block;
  font-family: var(--schrift-fest);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--akzent);
  margin-bottom: var(--s5);
}

.station-symbol {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--text-ruhig);
  margin-bottom: var(--s5);
  transition: color 0.3s var(--kurve);
}
.station-symbol svg { width: 100%; height: 100%; }
.station:hover .station-symbol { color: var(--akzent); }

.station h3 { margin-bottom: var(--s3); }
.station > p { color: var(--text-ruhig); max-width: none;
               margin-bottom: var(--s4); font-size: 0.97rem; }

.station-punkte { list-style: none; padding: 0; margin: 0; max-width: none; }
.station-punkte li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: var(--s2);
  font-size: 0.9rem;
  color: var(--text-leise);
  line-height: 1.5;
}
.station-punkte li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--akzent);
}

@media (max-width: 62rem) {
  .kette { grid-template-columns: repeat(2, 1fr); }
  .station:nth-child(2) { border-right: 0; }
  .station:nth-child(odd) { padding-left: 0; }
  .station:nth-child(even) { padding-left: var(--s5); }
}
@media (max-width: 40rem) {
  .kette { grid-template-columns: 1fr; }
  .station, .station + .station {
    border-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .station::before, .station + .station::before { left: 0; }
}

/* ------------------------------------------------------------ Formulare */

/* Wie der Rest der Seite: keine Kaesten, sondern Linien. Ein Eingabefeld
   ist hier eine Zeile mit Unterstrich - die Form, die jeder von einem
   ausgefuellten Papier kennt. */
.formular { max-width: 54rem; }

.feld-reihe {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-bottom: var(--s5);
}

.feld { display: block; margin-bottom: var(--s5); }

/* Felder, die über die ganze Breite gehen: die Auswahl des Anliegens und
   das Nachrichtenfeld. Ohne diese Regel stünde das Textfeld in einer
   schmalen Rasterspalte. */
.feld--breit { grid-column: 1 / -1; }
.feld > span {
  display: block;
  font-family: var(--schrift-fest);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: var(--s3);
}
.feld > span em { color: var(--akzent); font-style: normal; }

.feld input,
.feld textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linie-stark);
  padding: var(--s3) 0;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  transition: border-color 0.2s var(--kurve);
}
.feld textarea { resize: vertical; line-height: 1.55; }

.feld input::placeholder,
.feld textarea::placeholder { color: var(--text-leise); opacity: 0.7; }

.feld input:focus,
.feld textarea:focus {
  outline: none;
  border-bottom-color: var(--akzent);
}
.feld input:focus-visible,
.feld textarea:focus-visible { outline: none; }

/* Fehlerhafte Felder erst markieren, wenn abgeschickt wurde - sonst
   leuchtet das Formular rot, bevor jemand etwas falsch gemacht hat. */
.formular.geprueft input:invalid,
.formular.geprueft textarea:invalid { border-bottom-color: var(--warnung); }

/* Der Honigtopf muss fuer Menschen unsichtbar sein, fuer Automaten aber
   wie ein normales Feld aussehen - deshalb nicht display:none. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Abschnitte im Onboarding: wie der Rest der Seite durch Linien
   getrennt, nicht durch Kaesten. legend sitzt auf der Linie. */
.formular-block {
  border: 0;
  border-top: 1px solid var(--linie);
  padding: var(--s6) 0 var(--s4);
  margin: 0;
}
.formular-block:first-of-type { border-top: 0; padding-top: 0; }
.formular-block[hidden] { display: none; }

.formular-block legend {
  font-family: var(--schrift-titel);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  padding: 0;
  margin-bottom: var(--s4);
}

.feld select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linie-stark);
  padding: var(--s3) 0;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s var(--kurve);
}
.feld select:focus { outline: none; border-bottom-color: var(--akzent); }
/* Die Liste selbst stellt der Browser - dort gilt das Seitendesign nicht,
   deshalb muessen die Eintraege eigene Farben bekommen. */
.feld select option { background: var(--grund-hoch); color: var(--text); }

.formular-hinweis {
  font-size: 0.86rem;
  color: var(--text-leise);
  max-width: 44rem;
  margin-top: var(--s5);
}

.formular-meldung {
  margin-top: var(--s5);
  font-family: var(--schrift-fest);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  min-height: 1.4em;
}
.formular-meldung[data-art="gut"] { color: var(--erfolg); }
.formular-meldung[data-art="fehler"] { color: var(--warnung); }

/* -------------------------------------------------------------- Hinweis */

/* Kein Kasten, sondern ein Einzug mit Akzentlinie links. */
.hinweis {
  border-left: 2px solid var(--akzent);
  padding: var(--s2) 0 var(--s2) var(--s5);
  margin-block: var(--s6);
  color: var(--text-ruhig);
  max-width: 46rem;
}
.hinweis strong { color: var(--text); }
.hinweis > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- Person */

/* Bild und Text nebeneinander, mit derselben Trennlinie wie die Kacheln.

   Vorher lag das Foto des Gründers als einzelnes <img> zwischen zwei
   Abschnitten, gefolgt von zwei Absätzen mit Name und Rolle – ohne
   Zusammenhang und ohne Format. */
.person {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--s7);
  align-items: start;
  border-top: 1px solid var(--linie);
  padding-top: var(--s7);
}
.person-bild {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.4s var(--kurve);
}
.person:hover .person-bild { filter: grayscale(0) contrast(1); }
.person-text > p { max-width: 42rem; }
.person-name {
  font-family: var(--schrift-titel);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: var(--s1);
}
.person-rolle {
  font-family: var(--schrift-fest);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: var(--s5);
}
.person-wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  margin-top: var(--s6);
  margin-bottom: 0;
}
@media (max-width: 52rem) {
  .person { grid-template-columns: 1fr; gap: var(--s6); }
  .person-bild { max-width: 12rem; }
}

/* ------------------------------------------------- Weiterführender Link */

/* Ein Textlink mit Pfeil, der beim Überfahren vorrückt – dieselbe Geste
   wie bei den Knöpfen, aber ohne deren Gewicht. */
.weiter {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--schrift-fest);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--akzent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--kurve);
}
.weiter::after {
  content: "→";
  transition: transform 0.3s var(--kurve);
}
.weiter:hover { border-bottom-color: var(--akzent); }
.weiter:hover::after { transform: translateX(0.25em); }

/* Kachelüberschriften, die auf eine Unterseite führen: Der Verweis soll
   wie die Überschrift aussehen, nicht wie ein Link mitten im Satz. */
/* ------------------------------------------------------------ Vorspann */

/* Der Einleitungsabsatz nach dem Hero. Etwas größer als der Lauftext und
   ruhiger gesetzt – er trägt den Übergang vom Titel zum ersten Thema. */
.vorspann {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--text-ruhig);
  max-width: 44rem;
  margin-bottom: 0;
  padding-left: var(--s5);
  border-left: 2px solid var(--linie-stark);
}

/* Eine H3, die einen Abschnitt fortsetzt statt einen neuen zu beginnen -
   im Rang unter der H2 darueber, aber im selben Gewicht gesetzt. */
.zwischentitel {
  font-family: var(--schrift-titel);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: var(--s4);
}

/* ------------------------------------------------ Einwilligungsbanner */

/* Unten angeheftet, über dem Inhalt, aber ohne ihn zu verdecken: Die
   Seite bleibt lesbar und bedienbar, während die Frage offen ist.

   Genau eine Schaltfläche je Sorte – auf der alten Seite war die
   Komponente zweimal eingebunden, beide Fassungen lagen deckungsgleich
   übereinander, und niemand sah es. */
.einwilligung {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: var(--grund-hoch);
  border-top: 1px solid var(--akzent);
  padding: var(--s5) var(--s4);
  box-shadow: 0 -12px 40px rgb(0 0 0 / 0.5);
}
.einwilligung[hidden] { display: none; }
.einwilligung-inhalt {
  max-width: var(--breite);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}
.einwilligung p {
  margin: 0;
  max-width: 52rem;
  font-size: 0.94rem;
  color: var(--text-ruhig);
}
.einwilligung strong { color: var(--text); }
.einwilligung-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  flex-shrink: 0;
}

/* Die beiden Schaltflächen sind eine Entscheidung, kein Weiterweg.
   Deshalb ohne den Pfeil, den sonst jeder Knopf trägt – er verspräche,
   dass es irgendwohin geht.

   Beide bleiben gleich groß und gleich gut lesbar. Eine Einwilligung,
   bei der das Ablehnen schwerer zu finden ist als das Zustimmen, ist
   nach Art. 7 Abs. 3 DSGVO keine freiwillige: Der Widerruf muss so
   einfach sein wie die Erteilung. */
.einwilligung .knopf {
  white-space: nowrap;
  justify-content: center;
  min-width: 11rem;
  padding-inline: var(--s5);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.88rem;
}
.einwilligung .knopf::after { content: none; }

/* Ablehnen: ruhiger Rahmen statt blasser Linie, damit er als
   gleichwertige Schaltfläche lesbar ist und nicht als Nebensache. */
.einwilligung .knopf--rand {
  border-color: var(--linie-stark);
  background: rgb(255 255 255 / 0.04);
}
.einwilligung .knopf--rand:hover {
  border-color: var(--text-ruhig);
  background: rgb(255 255 255 / 0.08);
  color: var(--text);
}

@media (max-width: 52rem) {
  .einwilligung { padding: var(--s5) var(--s4) var(--s6); }
  .einwilligung-inhalt { flex-direction: column; align-items: stretch; }
  .einwilligung-knoepfe { gap: var(--s3); }
  .einwilligung-knoepfe > * { flex: 1 1 0; min-width: 0; }
}
@media print { .einwilligung { display: none; } }

/* ---------------------------------------------------- Hakenaufzaehlung */

/* Die Merkmalslisten in den Kacheln. In der Quelle stehen sie als
   Aufzaehlung, deren Punkte mit einem Haken beginnen - das Zeichen
   steckte im Text. Jetzt setzt es das Stylesheet, und der Text bleibt
   lesbar, auch wenn ihn ein Vorleseprogramm ausgibt. */
.haken {
  list-style: none;
  padding-left: 0;
  margin-block: var(--s4);
}
.haken li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--s2);
  color: var(--text-ruhig);
}
.haken li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--akzent);
  font-weight: 600;
}

/* Die Kurzzeile unter dem Kacheltitel. Sie stand nach dem Export im
   selben Rang wie der Beschreibungstext darunter und war dadurch nicht
   als Zwischenzeile zu erkennen. */
.karte-unterzeile {
  font-family: var(--schrift-fest);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--akzent);
  margin-top: calc(var(--s3) * -1);
  margin-bottom: var(--s4);
}

.karte h3 > a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--kurve), color 0.3s var(--kurve);
}
.karte h3 > a:hover {
  color: var(--akzent);
  border-bottom-color: var(--akzent);
}

/* --------------------------------------------------- Standort-Uebersicht */

.standort-block {
  padding-block: var(--s5);
  border-top: 1px solid var(--linie);
}
.standort-block h3 {
  font-family: var(--schrift-fest);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: var(--s3);
}
.standort-staedte {
  max-width: none;
  color: var(--text-leise);
  line-height: 2;
}
.standort-staedte a { color: var(--text-ruhig); }
.standort-staedte a:hover { color: var(--akzent); }

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

.fuss {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--linie);
  padding-block: var(--s8) var(--s6);
  margin-top: var(--s9);
  font-size: 0.92rem;
}
/* Vier feste Spalten: Marke, Leistungen, Werkzeuge, Unternehmen.
   Vorher stand hier repeat(auto-fit, ...) hinter einer festen ersten
   Spalte - diese Mischung wertet der Browser anders aus als erwartet,
   und die Spalten fielen untereinander. */
.fuss-raster {
  display: grid;
  gap: var(--s7) var(--s6);
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  margin-bottom: var(--s8);
}
@media (max-width: 62rem) {
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .fuss-marke { grid-column: 1 / -1; }
}
@media (max-width: 34rem) {
  .fuss-raster { grid-template-columns: 1fr; }
  .fuss-marke { grid-column: auto; }
}
.fuss-marke img { height: 1.75rem; width: auto; margin-bottom: var(--s5); }
.fuss-marke p { color: var(--text-leise); max-width: 20rem;
                margin-bottom: var(--s5); font-size: 0.9rem; }

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--schrift-fest);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.status::before {
  content: "";
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: var(--erfolg);
  animation: pulsieren 2.8s ease-in-out infinite;
}
@keyframes pulsieren {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.fuss h4 {
  font-family: var(--schrift-fest);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: var(--s5);
}
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: var(--s3); }
.fuss a { color: var(--text-ruhig); font-size: 0.92rem; }
.fuss a:hover { color: var(--akzent); }

.fuss-schluss {
  border-top: 1px solid var(--linie);
  padding-top: var(--s5);
  color: var(--text-leise);
  font-family: var(--schrift-fest);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  justify-content: space-between;
}
.fuss-schluss a { font-family: var(--schrift-fest); font-size: 0.72rem; }

/* ------------------------------------------------------- Beim Scrollen */

/* Greift erst, wenn das Skript die Klasse gesetzt hat. Ohne JavaScript ist
   alles sofort sichtbar – das Einblenden ist Zugabe, keine Bedingung. */
html.animiert .zeigen {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.8s var(--kurve), transform 0.8s var(--kurve);
}
html.animiert .zeigen.da { opacity: 1; transform: none; }

/* ------------------------------------------------------------ Kleingerät */

@media (max-width: 52rem) {
  .nav {
    display: none;
    position: absolute;
    inset: 4.5rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--grund);
    border-bottom: 1px solid var(--linie);
    padding: var(--s4) var(--s5) var(--s6);
  }
  .nav[data-offen="ja"] { display: flex; }
  .nav a { padding-block: var(--s4); border-bottom: 1px solid var(--linie); }
  .nav a::after { display: none; }
  .nav .knopf { margin-top: var(--s5); border-bottom: 0;
                justify-content: center; }
  .nav-schalter { display: block; }
  .abschnitt { padding-block: var(--s8); }
  .abschnitt-kopf { margin-bottom: var(--s7); }
}

/* ------------------------------------------------------ Bewegung sparen */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.animiert .zeigen { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- Drucken */

@media print {
  .kopf, .fuss, .knopf-reihe { display: none; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  a { color: #000; }
  html.animiert .zeigen { opacity: 1; transform: none; }
}