/*
 * Gestaltung der beiden Landingpages (/ und /fuer-haendler).
 *
 * Eine eigene Datei und kein Tailwind: Die Entwürfe sind reines CSS mit
 * eigenen Farben und eigenen Umbruchbreiten. Der Tailwind-JIT wiegt 441 KB
 * JavaScript - zu viel für genau die Seite, die ein Fremder als erstes sieht
 * und nach der er entscheidet, ob er bleibt. Das übrige öffentliche Layout
 * (Impressum, AGB, Datenschutz) bleibt bei Tailwind.
 *
 * Entwurf: docs/superpowers/specs/2026-08-04-landingpages-design.md
 *
 * Aufbau dieser Datei:
 *   1. Grundlage      Farben, Schrift, Zurücksetzen
 *   2. Bausteine      Bahnen, Überschriften, Knöpfe
 *   3. Kopf und Fuß
 *   4. Abschnitte     Hero, Karten, Zweispalter, Fragen, Preise, Abschluss
 *   5. Nachbauten     Punkteübersicht und Kassen-Terminal in HTML
 *   6. Umbrüche       1040 / 940 / 700 Pixel
 *
 * Die Umbrüche stehen gesammelt am Ende und nicht bei jedem Baustein: So
 * lässt sich in einem Blick sehen, was bei einer Breite alles passiert.
 */

/* ------------------------------------------------------------------ */
/* 1. Grundlage                                                        */
/* ------------------------------------------------------------------ */

:root {
  /* Namen statt Hexwerte: dieselben Töne wie im übrigen Projekt (Tailwind
     slate/emerald/amber), hier nur ohne Tailwind zur Hand. */
  --tinte: #0f172a;          /* slate-900, Text und dunkle Flächen */
  --tinte-hell: #334155;     /* slate-700, dunkler Knopf im Überfahren */
  --text: #475569;           /* slate-600, Fließtext */
  --text-leise: #64748b;     /* slate-500, Beiwerk */
  --linie: #e2e8f0;          /* slate-200 */
  --linie-kraeftig: #cbd5e1; /* slate-300 */
  --linie-stark: #94a3b8;    /* slate-400, im Überfahren */
  --flaeche: #f8fafc;        /* slate-50 */
  --weiss: #ffffff;

  --gruen: #10b981;          /* emerald-500 */
  --gruen-hell: #34d399;     /* emerald-400 */
  --gruen-flaeche: #ecfdf5;  /* emerald-50 */
  --gruen-linie: #d1fae5;    /* emerald-100 */
  --gruen-text: #065f46;     /* emerald-800 */
  --gruen-zeile: #047857;    /* emerald-700, „Rabatt verfügbar" im Hero-Nachbau */
  --gruen-tief: #064e3b;     /* emerald-900 */
  --gruen-tinte: #04231a;    /* Schrift auf grünem Grund */

  /* Die beiden Bänder der Kunden-App, nachgebaut im Hero von /. Dieselben
     Töne wie _aktionsband.php (emerald-600) und _neukundenband.php
     (indigo-600): Zwei Aussagen, zwei Farben - gleich aussehende Bänder
     wären eine Einladung, sie zu verwechseln. */
  --band-aktion: #059669;       /* emerald-600 */
  --band-aktion-leise: #d1fae5; /* emerald-100 */
  --band-neu: #4f46e5;          /* indigo-600 */
  --band-neu-leise: #e0e7ff;    /* indigo-100 */

  --bernstein-flaeche: #fffbeb;
  --bernstein-linie: #fde68a;
  --bernstein-text: #92400e;
  --bernstein-tief: #78350f;

  /* Das Kassen-Terminal ist im Nachbau dunkler als der Rest der Seite -
     dieselben Werte wie in layout/kasse.php. */
  --kasse-grund: #08090b;
  --kasse-spalte: #0b0c10;
  --kasse-linie: #17181c;
  --kasse-taste: #101217;
  --kasse-taste-neben: #15171d;
  --kasse-leise: #3f4652;

  --schrift: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ziffern: ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--schrift);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* Die Fußzeile ans untere Ende, wenn der Inhalt die Seite nicht füllt.
     Auf den Landingpages fällt das nie auf - sie sind lang. Seit dem
     30.08.2026 tragen die Fehlerseiten dasselbe Layout, und dort steht über
     eine Zeile Text und einem Verweis: Ohne diese Regel hing die Fußzeile
     mitten auf dem Bildschirm, darunter eine leere weiße Fläche. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > main {
  flex: 1;
}

/*
 * Ein Flex-Element schrumpft von sich aus nicht unter seine Mindestbreite -
 * und die ergibt sich aus dem längsten unteilbaren Wort darin. Bei 320 px
 * zog ein solches Wort in den AGB die Seite auf 332 px, also 12 px
 * seitwärts.
 *
 * Vor dem `display: flex` am body fiel das nicht auf: Im Blockfluss war die
 * Breite vorgegeben und `overflow-x: hidden` schnitt still ab. Der Überlauf
 * bestand also schon vorher, er war nur unsichtbar - und ein
 * abgeschnittenes Wort in einem Rechtstext ist der schlechtere Zustand als
 * ein umgebrochenes.
 */
body > * {
  min-width: 0;
}

a {
  color: var(--tinte);
  text-decoration: none;
}

img {
  max-width: 100%;
}

/* Aufklappen ohne das Dreieck des Browsers - es sitzt je nach Browser an
   einer anderen Stelle und lässt sich nicht mit ausrichten. */
details > summary {
  list-style: none;
  cursor: pointer;
}

details > summary::-webkit-details-marker {
  display: none;
}

/* Tastaturbedienung muss sichtbar bleiben. Ohne diese Regel wäre der
   Fokusrahmen auf den dunklen Flächen praktisch unsichtbar. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gruen);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ */
/* 2. Bausteine                                                        */
/* ------------------------------------------------------------------ */

.innen {
  margin: 0 auto;
  max-width: 1180px;
  padding: 88px 24px;
}

.bahn {
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}

/* Sprungmarken müssen unter der klebenden Kopfzeile hervorkommen.
 *
 * .kopf ist position: sticky und 69 px hoch. Ohne diese Regel legt der
 * Browser das Sprungziel exakt an den oberen Rand des Sichtfelds - also
 * UNTER die Kopfzeile. Auf /#video verschwand so der Vorspann "Im Bild"
 * ganz und die Überschrift zu 12 px, auf /fuer-haendler#video zu 10.
 *
 * Es fällt nur an manchen Zielen auf, und das macht es tückisch: Wo über der
 * Überschrift genug Abstand liegt, reicht der Platz zufällig - /#ablauf hatte
 * 36 px Luft und sah deshalb immer richtig aus. Wer eine neue Sprungmarke
 * ergänzt, gewinnt oder verliert diese Lotterie, ohne es zu merken.
 *
 * 88 px: Kopfzeile plus etwas Luft, damit das Ziel nicht am Rand klebt.
 * scroll-margin-top und nicht padding-top - der Wert wirkt nur beim
 * Springen und lässt das Layout unberührt. */
.bahn,
.hero {
  scroll-margin-top: 88px;
}

.bahn--flaeche {
  background: var(--flaeche);
}

.bahn--dunkel {
  background: var(--tinte);
  color: #e2e8f0;
  border-bottom: 0;
}

.bahn--dunkel .h2 {
  color: var(--weiss);
}

.bahn--dunkel .lead {
  color: #94a3b8;
  font-size: 17px;
}

/* Die Kennzahlenreihe steht dicht unter dem Hero und braucht nicht die
   volle Bahnhöhe. */
.innen--schmal {
  padding-top: 40px;
  padding-bottom: 40px;
}

.bahn--schluss {
  border-bottom: 0;
}

.h1 {
  margin: 0;
  font-size: 62px;
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.h2 {
  margin: 0;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.h2--klein {
  font-size: 40px;
}

.h3 {
  margin: 22px 0 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lead {
  margin: 24px 0 0;
  max-width: 520px;
  font-size: 21px;
  line-height: 1.5;
  color: var(--text);
  text-wrap: pretty;
}

.vorspann {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gruen);
}

.merkmal {
  margin: 0 0 20px;
  display: inline-block;
  border-radius: 999px;
  border: 1px solid var(--linie-kraeftig);
  background: var(--weiss);
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.merkmal--dunkel {
  border-color: var(--tinte-hell);
  background: transparent;
  color: #94a3b8;
}

.fliess {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  text-wrap: pretty;
}

.hinweis {
  margin: 20px 0 0;
  font-size: 15px;
  color: var(--text-leise);
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.knopf {
  display: inline-block;
  border-radius: 12px;
  padding: 16px 26px;
  font-size: 17px;
  font-weight: 500;
  transition: background-color 0.15s, border-color 0.15s;
}

.knopf--dunkel {
  background: var(--tinte);
  color: var(--weiss);
}

.knopf--dunkel:hover {
  background: var(--tinte-hell);
  color: var(--weiss);
}

.knopf--gruen {
  background: var(--gruen);
  color: var(--tinte);
  font-weight: 600;
}

.knopf--gruen:hover {
  background: var(--gruen-hell);
  color: var(--tinte);
}

.knopf--rand {
  border: 1px solid var(--linie-kraeftig);
  background: var(--weiss);
}

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

/* Auf dunklem Grund: heller Rand, heller Text. */
.knopf--rand-dunkel {
  border: 1px solid #475569;
  color: #e2e8f0;
}

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

/* ------------------------------------------------------------------ */
/* 3. Kopf und Fuß                                                     */
/* ------------------------------------------------------------------ */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--linie);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
}

.kopf__innen {
  margin: 0 auto;
  display: flex;
  max-width: 1180px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
}

.marke {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Die eingebettete Bildmarke füllt sich mit currentColor und erbt damit die
   Textfarbe der Kopfzeile. Die Größe kommt von hier und nicht von Tailwind -
   auf diesen beiden Seiten gibt es kein Tailwind. */
.marke__zeichen {
  height: 30px;
  width: auto;
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 15px;
}

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

.nav a:hover {
  color: var(--tinte);
}

/* Der Knopf in der Navigation bleibt ein Knopf, auch beim Überfahren. */
.nav .knopf-klein {
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 500;
}

.nav .knopf-klein--rand {
  border: 1px solid var(--linie-kraeftig);
  color: var(--tinte);
}

.nav .knopf-klein--rand:hover {
  border-color: var(--linie-stark);
  color: var(--tinte);
}

.nav .knopf-klein--dunkel {
  background: var(--tinte);
  color: var(--weiss);
}

.nav .knopf-klein--dunkel:hover {
  background: var(--tinte-hell);
  color: var(--weiss);
}

/* Das Burger-Menü ist ein <details>: aufklappen ohne JavaScript. */
.burger {
  display: none;
}

.burger > summary {
  display: grid;
  gap: 5px;
  padding: 10px;
  margin: -10px;
  border-radius: 10px;
}

.burger__strich {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--tinte);
}

.burger__liste {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: grid;
  gap: 4px;
  border-bottom: 1px solid var(--linie);
  background: var(--weiss);
  padding: 12px 24px 20px;
  font-size: 17px;
}

.burger__liste a {
  padding: 12px 0;
  color: var(--text);
  border-bottom: 1px solid #f1f5f9;
}

.burger__liste .knopf-breit {
  margin-top: 12px;
  border-radius: 12px;
  border-bottom: 0;
  padding: 14px;
  text-align: center;
  font-weight: 500;
  background: var(--tinte);
  color: var(--weiss);
}

.fuss {
  background: var(--weiss);
  border-top: 1px solid var(--linie);
}

.fuss__innen {
  margin: 0 auto;
  display: flex;
  max-width: 1180px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 32px 24px;
}

.fuss__marke {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Als <img> und nicht eingebettet: die eingebettete Bildmarke trägt eine
   feste Masken-ID, und zwei gleiche IDs in einem Dokument sind ungültiges
   HTML. In der Kopfzeile steht sie schon. */
.fuss__zeichen {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: block;
}

.fuss__links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 15px;
}

.fuss__links a {
  color: var(--text-leise);
}

.fuss__links a:hover {
  color: var(--tinte);
}

/* ------------------------------------------------------------------ */
/* 4. Abschnitte                                                       */
/* ------------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
}

.hero--dunkel {
  background: var(--tinte);
  color: #e2e8f0;
}

.hero--hell {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}

/* Der weiche Farbfleck im Hintergrund. Rein schmückend, deshalb ohne
   eigenes Element im HTML. */
.hero::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  filter: blur(20px);
  pointer-events: none;
}

.hero--dunkel::before {
  bottom: -220px;
  left: -160px;
  background: var(--gruen);
  opacity: 0.22;
}

.hero--hell::before {
  top: -180px;
  right: -140px;
  background: var(--gruen-linie);
  opacity: 0.55;
  filter: blur(10px);
}

.hero__innen {
  position: relative;
  margin: 0 auto;
  display: grid;
  max-width: 1180px;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  padding: 84px 24px 96px;
}

.hero--dunkel .h1 {
  color: var(--weiss);
}

.hero--dunkel .lead {
  color: #94a3b8;
}

/* Auf dem dunklen Hero NICHT --text-leise (#64748b): das kommt auf #0f172a
   nur auf 3,5:1 und fällt damit unter die 4,5:1, die 15-Pixel-Text braucht.
   Auf Weiß reicht derselbe Ton, auf Tinte nicht. */
.hero--dunkel .hinweis,
.hero--dunkel .bildunterschrift {
  color: #94a3b8;
}

.hero__bild {
  display: grid;
  gap: 14px;
  justify-items: center;
}

.bildunterschrift {
  margin: 0;
  font-size: 14px;
  color: var(--text-leise);
}

/* Das Erklärvideo auf /fuer-haendler.
   ------------------------------------------------------------------
   Die Bedienelemente sind die des Browsers. Ein eigener Abspieler brächte
   Pause, Lautstärke, Vollbild und Tastaturbedienung nicht mit, ohne dass
   jemand sie nachbaut und barrierefrei hält - und er bräuchte JavaScript,
   das diese Seite sonst nur an zwei Stellen benutzt.

   width und height stehen am <video> selbst: Damit kennt der Browser das
   Seitenverhältnis, bevor irgendetwas geladen ist, und reserviert die Fläche.
   Ohne sie springt der Text darunter, sobald das Standbild eintrifft. */
.videobahn {
  margin-top: 40px;
}

.videobahn__spieler {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  border: 1px solid var(--linie);
  background: var(--tinte);
  box-shadow: 0 30px 60px -30px rgba(15, 23, 42, 0.45);
}

/* Drei Karten nebeneinander: die Schritte an der Kasse. */
.karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.karte {
  border-radius: 20px;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  padding: 28px;
}

/* Auf grauem Grund kehrt sich die Karte um, sonst verschwindet sie. */
.bahn--flaeche .karte {
  background: var(--weiss);
}

.karte__nummer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--tinte);
  color: var(--weiss);
  font-size: 18px;
  font-weight: 600;
}

.probe {
  margin-top: 22px;
  border-radius: 14px;
  padding: 18px;
}

.probe--gruen {
  border: 1px solid var(--gruen-linie);
  background: var(--gruen-flaeche);
}

.probe--bernstein {
  border: 1px solid var(--bernstein-linie);
  background: var(--bernstein-flaeche);
}

.probe__zeile {
  margin: 0;
  font-size: 13px;
}

.probe__zahl {
  margin: 6px 0 0;
  font-size: 26px;
  font-weight: 600;
}

.probe--gruen .probe__zeile {
  color: var(--gruen-text);
}

.probe--gruen .probe__zahl {
  color: var(--gruen-tief);
}

.probe--bernstein .probe__zeile {
  color: var(--bernstein-text);
}

.probe--bernstein .probe__zahl {
  color: var(--bernstein-tief);
}

.probe__nach {
  margin: 8px 0 0;
  font-size: 13px;
}

.probe--gruen .probe__nach {
  color: var(--gruen-text);
}

.probe--bernstein .probe__nach {
  color: var(--bernstein-text);
}

/* Der angedeutete QR-Code in Karte 1. Kein Bild und kein echter Code: er
   soll nur zeigen, worum es geht, und nirgendwohin führen. */
.qr-andeutung {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  padding: 22px;
}

.bahn--flaeche .qr-andeutung {
  background: var(--flaeche);
}

.qr-andeutung__raster {
  display: grid;
  grid-template-columns: repeat(7, 12px);
  grid-template-rows: repeat(7, 12px);
  gap: 3px;
}

.qr-andeutung__raster span {
  background: var(--tinte);
  border-radius: 3px;
}

.qr-andeutung__raster .leer {
  background: var(--linie-kraeftig);
  border-radius: 0;
}

/* Die neun Felder sitzen über nth-child und nicht über style="…" am
   Element: Die CSP erlaubt Inline-Stile zwar, aber neun Rasterangaben im
   HTML zu verteilen macht die Anordnung an keiner Stelle lesbar.
   grid-area: Zeile-von / Spalte-von / Zeile-bis / Spalte-bis. */
.qr-andeutung__raster span:nth-child(1) { grid-area: 1 / 1 / 4 / 4; }
.qr-andeutung__raster span:nth-child(2) { grid-area: 1 / 5 / 4 / 8; }
.qr-andeutung__raster span:nth-child(3) { grid-area: 5 / 1 / 8 / 4; }
.qr-andeutung__raster span:nth-child(4) { grid-area: 5 / 5 / 6 / 6; }
.qr-andeutung__raster span:nth-child(5) { grid-area: 5 / 6 / 6 / 7; }
.qr-andeutung__raster span:nth-child(6) { grid-area: 6 / 5 / 7 / 6; }
.qr-andeutung__raster span:nth-child(7) { grid-area: 6 / 7 / 7 / 8; }
.qr-andeutung__raster span:nth-child(8) { grid-area: 7 / 7 / 8 / 8; }
.qr-andeutung__raster span:nth-child(9) { grid-area: 7 / 5 / 8 / 6; }

/* Zwei Spalten: Text links, Bildflächen rechts. */
.zweispalt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

.zweispalt--schmal {
  grid-template-columns: 0.8fr 1.2fr;
}

.zweispalt--mitte {
  align-items: center;
}

/* Steht in der rechten Spalte einer .zweispalt--schmal, neben der
   Überschrift und nicht darunter - deshalb KEIN margin-top: die erste
   Trennlinie soll auf Höhe der Überschrift beginnen. Unter 1040 px stapelt
   .zweispalt, und den Abstand macht dort ihr gap. */
.punkte {
  display: grid;
  gap: 20px;
}

.punkt {
  border-top: 1px solid var(--linie);
  padding-top: 20px;
}

.punkt__titel {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.punkt__text {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

/* Die aufklappbaren Fragen. */
.fragen {
  display: grid;
  gap: 0;
}

.frage {
  border-top: 1px solid var(--linie);
  padding: 22px 0;
}

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

.frage > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 19px;
  font-weight: 500;
}

.frage__zeichen {
  color: var(--linie-stark);
  font-weight: 400;
}

/* Das Pluszeichen wird beim Aufklappen zum Minus. Über CSS und nicht über
   zwei Zeichen im HTML: sonst müsste JavaScript sie tauschen. */
.frage[open] .frage__zeichen {
  transform: rotate(45deg);
}

.frage__antwort {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
}

/* Gegenüberstellung Stempelkarte / Babing. */
.gegenueber {
  display: grid;
  gap: 14px;
}

.gegenueber__kopf,
.gegenueber__zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.gegenueber__kopf {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.gegenueber__kopf p {
  margin: 0;
}

.gegenueber__kopf p:last-child {
  color: var(--gruen-hell);
}

.gegenueber__zeile {
  border-top: 1px solid var(--tinte-hell);
  padding-top: 14px;
}

.gegenueber__zeile p {
  margin: 0;
  font-size: 16px;
}

.gegenueber__zeile p:first-child {
  color: #94a3b8;
}

.gegenueber__zeile p:last-child {
  color: var(--weiss);
}

/* Vier Kennzahlen unter dem Hero der Händlerseite. */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.kennzahl {
  text-align: center;
}

.kennzahl__wert {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.kennzahl__text {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--text-leise);
}

/* Preise. */
.preiskopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.preisschalter {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--linie-kraeftig);
  background: var(--weiss);
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.preisschalter button {
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: -0.01em;
  background: transparent;
  color: var(--text);
}

.preisschalter button[aria-pressed="true"] {
  background: var(--tinte);
  color: var(--weiss);
}

.preise {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
  align-items: start;
}

.preis {
  border-radius: 20px;
  border: 1px solid var(--linie);
  background: var(--weiss);
  padding: 32px;
}

.preis--hervor {
  border-color: var(--tinte);
  box-shadow: 0 24px 44px -28px rgba(15, 23, 42, 0.4);
}

.preis__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.preis__name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.preis--hervor .preis__name {
  color: var(--tinte);
}

.preis__fahne {
  border-radius: 999px;
  background: var(--gruen-flaeche);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gruen-text);
}

/* flex-wrap ist hier kein Zierrat, sondern das Ventil. Ohne es hat die
   Zeile nur EINE Reihe, und wenn Betrag plus „pro Monat" nicht hineinpassen,
   staucht der Browser den Betrag und bricht ihn INNERLICH um: „190,00" in
   der einen Zeile, „€" in der nächsten. Das sah wie ein Layout aus und war
   ein Fehler. Mit flex-wrap weicht stattdessen „pro Monat" in die zweite
   Zeile aus, und der Betrag bleibt am Stück. */
.preis__betrag {
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

/* Der Betrag darf NIE umbrechen - eine Zahl ohne ihr Währungszeichen ist
   keine Preisangabe mehr. Das geht nur zusammen mit dem flex-wrap darüber:
   nowrap allein in einer nicht umbrechenden Zeile ergäbe einen Überlauf,
   und der schöbe das ganze Dokument seitwärts, ohne dass etwas fehlschlägt. */
.preis__zahl {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.preis__intervall {
  font-size: 16px;
  color: var(--text-leise);
}

.preis__grenze {
  margin: 8px 0 0;
  font-size: 16px;
  color: var(--text);
}

/* Die eine Zeile unter den drei Karten. Sie sagt, was die gestrichene
   Leistungsliste behauptet hat - nur richtig -, und trägt deshalb die
   normale Textfarbe statt der leisen des Kleingedruckten darunter. */
.preisgleich {
  margin: 28px 0 0;
  font-size: 17px;
  color: var(--text);
}

.preis__knopf {
  display: block;
  margin-top: 26px;
  border-radius: 12px;
  padding: 13px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
}

.preis__leistungen {
  display: grid;
  gap: 10px;
  margin-top: 26px;
  font-size: 15px;
  color: var(--text);
}

.preis__leistungen p {
  margin: 0;
}

/* Der Abschluss-Aufruf, dunkler Kasten mit Bildzeichen. */
.abschluss {
  border-radius: 28px;
  background: var(--tinte);
  padding: 64px 56px;
  color: #e2e8f0;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: center;
}

.abschluss .h2 {
  color: var(--weiss);
}

.abschluss__text {
  margin: 18px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: #94a3b8;
}

.abschluss__zeichen {
  display: flex;
  justify-content: center;
}

.abschluss__zeichen img {
  width: 150px;
  height: 150px;
  border-radius: 32px;
  display: block;
}

/* Der Kasten „Dein Lieblingsladen fehlt?" */
.aufruf {
  margin-top: 32px;
  border-radius: 20px;
  border: 1px dashed var(--linie-kraeftig);
  background: var(--flaeche);
  padding: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.bahn--flaeche .aufruf {
  background: var(--weiss);
}

.aufruf__titel {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
}

.aufruf__text {
  margin: 6px 0 0;
  font-size: 16px;
  color: var(--text);
}

.aufruf .knopf {
  padding: 14px 24px;
  font-size: 16px;
}

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

.kontakt__form {
  display: grid;
  gap: 18px;
  border-radius: 24px;
  border: 1px solid var(--linie);
  background: var(--weiss);
  padding: 32px;
}

.feld--paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.feld {
  display: grid;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--tinte);
}

.feld--breit {
  grid-column: 1 / -1;
}

.feld input,
.feld textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid var(--linie-kraeftig);
  background: var(--weiss);
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 400;
  font-family: inherit;
  color: var(--tinte);
}

.feld textarea {
  resize: vertical;
  line-height: 1.5;
}

.feld input:focus,
.feld textarea:focus {
  border-color: var(--gruen);
  outline: 2px solid var(--gruen);
  outline-offset: -2px;
}

/* Linksbündig wie im Entwurf. Ohne das streckt das Grid den Knopf über die
   ganze Kartenbreite - am Telefon richtig, auf dem Schreibtisch plump.
   Unter 700 px wird er deshalb wieder breit. */
.kontakt__form .knopf {
  justify-self: start;
}

.kontakt__hinweis {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-leise);
}

.kontakt__hinweis a {
  color: var(--text);
  text-decoration: underline;
}

.meldung {
  margin: 0;
  border-radius: 14px;
  border: 1px solid;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.5;
}

.meldung--erfolg {
  border-color: var(--gruen-linie);
  background: var(--gruen-flaeche);
  color: var(--gruen-text);
}

.meldung--fehler {
  border-color: var(--bernstein-linie);
  background: var(--bernstein-flaeche);
  color: var(--bernstein-text);
}

.meldung--fehler p {
  margin: 0;
}

.meldung--fehler p + p {
  margin-top: 6px;
}

/* Der Honigtopf. Kein display:none und kein hidden - beides erkennen
   Skripte zuverlässig. Aus dem Sichtfeld geschoben, aus der Tab-Reihenfolge
   genommen (tabindex="-1" am Feld) und für Vorleseprogramme unsichtbar
   (aria-hidden am Behälter). */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* 5. Nachbauten                                                       */
/* ------------------------------------------------------------------ */

/* Die Punkteübersicht im Handy-Rahmen. Nachgebaut statt fotografiert:
   ein Bildschirmfoto wäre beim nächsten Umbau der Übersicht veraltet, ohne
   dass es jemandem auffällt. */
.telefon {
  width: 100%;
  max-width: 340px;
  border-radius: 34px;
  border: 8px solid #1e293b;
  background: var(--flaeche);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

/* Der Nachbau im Hero von / ist ein HANDY und muss auch so aussehen.

   Ohne feste Form ist .telefon so hoch wie sein Inhalt: mit Kopfzeile, Gruß
   und drei Ladenkarten kamen 340 x 445 Pixel heraus, also 1 : 1,31. Das ist
   die Form eines Tablets und nicht die eines Telefons. Auffallen kann das
   nur im Vergleich - für sich allein sieht der Kasten richtig aus, und
   deshalb stand er so seit dem 04.08.2026 auf der Startseite.

   Die Form kommt aus den Werbefilmen: .grosses-handy (260 x 470) im
   Kundenfilm und .anzeige-handy (300 x 542) in den beiden Anzeigen stehen
   beide auf 1 : 1,807. aspect-ratio statt fester Höhe, damit die Form auch
   dann stimmt, wenn die Spalte schmaler wird als 300 px - bei 320 px
   Bildschirm sind es 284 x 568.

   Hier steht 1 : 2 und nicht 1 : 1,807, weil in den Filmen EINE Zeile im
   Handy steht und hier VIER Ladenkarten. Mit der Filmform waren es bei
   320 px Bildschirm 284 x 513 Pixel für 531 Pixel Inhalt - die vierte Karte
   wurde unten abgeschnitten, und zwar genau in der Breite, die niemand
   ansieht. 1 : 2 ist ohnehin näher an einem echten Telefon (das iPhone
   steht auf 1 : 2,16); zwischen der letzten Karte und dem unteren Rand
   bleiben damit 51 Pixel statt minus vier.

   NICHT an .telefon selbst ändern: Alle vier Filme lesen diese Datei und
   bauen auf dem Nachbau auf - .gross-telefon skaliert den 340er Kasten um
   2,4, die beiden Anzeigen setzen ihre eigene Höhe. Eine feste Höhe oder
   ein aspect-ratio dort verstellte die zwei ausgelieferten Filme, und die
   müssten danach neu gerendert UND neu vertont werden.

   Der freie Platz unter der letzten Karte ist Absicht - so sieht ein Handy
   aus, auf dem vier Karten liegen. Wer eine fünfte einsetzt, misst Inhalts-
   gegen Hüllenhöhe nach: .telefon ist overflow: hidden, und weil das die
   automatische Mindesthöhe auf 0 setzt, wird ein überstehender Rest still
   abgeschnitten statt den Kasten zu verlängern. Gemessen wird bei 320 px
   Bildschirm - dort ist der Kasten am schmalsten und damit am flachsten,
   während der Inhalt gleich hoch bleibt. */
.hero__bild .telefon {
  max-width: 300px;
  /* iPhone 16: 393 x 852 logische Pixel, also 1 : 2,168. */
  aspect-ratio: 393 / 852;

  /* Spalte, damit die Tab-Leiste unten klebt und der Inhalt den Rest
     bekommt - so sitzt sie auch dann am unteren Rand, wenn die Karten den
     Kasten nicht ganz füllen. Genau so verhält sie sich in der echten App
     (position: fixed am unteren Seitenrand). */
  display: flex;
  flex-direction: column;

  /* Der Maßstab des Modells: Kastenbreite geteilt durch die Breite eines
     iPhone 16. Er steht in DERSELBEN Regel wie max-width und aspect-ratio,
     weil die drei Zahlen zusammengehören - wer eine ändert, sieht die
     anderen. Eine Zusage in test_53_landing.php rechnet sie gegeneinander. */
  --massstab: 0.763; /* 300 / 393 */
}

/* min-height: 0, weil ein Flex-Element sonst nicht unter seine
   Inhaltshöhe schrumpft. Ohne die Zeile schöbe ein zu hoher Inhalt die
   Tab-Leiste aus dem Kasten heraus, statt selbst beschnitten zu werden -
   und weil .telefon overflow: hidden trägt, wäre die Leiste dann einfach
   weg, ohne Fehler und ohne Überlauf. */
.hero__bild .telefon__inhalt {
  flex: 1 1 auto;
  min-height: 0;
  /* Das Polster steht bewusst nicht hier, sondern im Maßblock am Ende von
     Abschnitt 5 - dort stehen ALLE Maße des Nachbaus beieinander, weil sie
     gemeinsam über die Höhe entscheiden. Diese Regel ist Aufbau, nicht
     Maß. */
}

.telefon__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--linie);
  background: var(--weiss);
  padding: 12px 14px;
}

.telefon__marke {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tinte);
}

.telefon__marke img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: block;
}

/* ACHTUNG: .telefon__reiter und .telefon__gruss benutzt seit dem 03.09.2026
   KEIN View mehr - der Nachbau im Hero von / zeigt seitdem /geschaefte, und
   dort gibt es weder einen Reiter oben rechts noch eine Begrüßung. Beide
   Regeln stehen ausschließlich noch für die vier Werbefilme
   (tools/erklaervideo*/szenen.html), die diese Datei mitlesen. Wer sie beim
   Aufräumen streicht, verstellt zwei ausgelieferte Filme - und die müssten
   danach neu gerendert UND neu vertont werden. */
.telefon__reiter {
  font-size: 13px;
  color: var(--text-leise);
}

.telefon__inhalt {
  padding: 16px 14px 22px;
}

.telefon__gruss {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tinte);
}

.telefon__unter {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text);
}

.telefon__karten {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.ladenkarte {
  border-radius: 16px;
  border: 1px solid var(--linie);
  background: var(--weiss);
  padding: 14px;
}

.ladenkarte--blass {
  opacity: 0.6;
}

.ladenkarte__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ladenkarte__name {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--tinte);
}

.ladenkarte__ort {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-leise);
}

.ladenkarte__stand {
  text-align: right;
}

.ladenkarte__punkte {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--tinte);
}

.ladenkarte__einheit {
  margin: 0;
  font-size: 10px;
  color: var(--text-leise);
}

.ladenkarte__rabatt {
  margin: 12px 0 0;
  border-radius: 10px;
  background: var(--gruen-flaeche);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gruen-text);
}

.ladenkarte__rest {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--text-leise);
}

/* Alles ab hier gehört zum Nachbau von /geschaefte im Hero von / und ist
   seit dem 03.09.2026 neu. Es sind ausschließlich NEUE Klassen: .telefon,
   .ladenkarte und ihre Kinder bleiben unangetastet, weil alle vier
   Werbefilme diese Datei mitlesen und auf dem Nachbau aufbauen. Was nur die
   Startseite betrifft, steht unter .hero__bild - diese Hülle kennt kein
   Film, und eine Zusage in test_53_landing.php hält das fest. */

/* Die Kopfzeile einer Ladenkarte, wenn dort ein abweichender Satz gilt.

   Alle Maße sind die echten Werte aus _aktionsband.php und
   _neukundenband.php mal --massstab; der Block am Ende dieses Abschnitts
   erklärt den Faktor. Der Rückfall auf 1 gilt ausserhalb des Heros - ein
   calc() mit unbekannter Variable ist ungültig, und die Regel fiele
   ersatzlos aus statt nur ungeskaliert zu sein.

   Die negativen Ränder MÜSSEN dem Polster der Karte entsprechen (-mx-5 -mt-5
   gegen p-5). Wer eines von beiden ändert, ändert das andere mit - sonst
   steht das Band mit einem weißen Saum in der Karte oder ragt darüber
   hinaus. Der Radius ist der der Karte minus ihrem Rahmen, also 19 zu 20. */
.ladenkarte__band {
  /* -mx-5 -mt-5 mb-[18px], rounded-t-[19px], px-5 py-3 */
  margin: calc(-20px * var(--massstab, 1))
          calc(-20px * var(--massstab, 1))
          calc(18px * var(--massstab, 1));
  border-radius: calc(19px * var(--massstab, 1)) calc(19px * var(--massstab, 1)) 0 0;
  padding: calc(12px * var(--massstab, 1)) calc(20px * var(--massstab, 1));
  text-align: left;
}

.ladenkarte__band--aktion {
  background: var(--band-aktion);
}

.ladenkarte__band--neu {
  background: var(--band-neu);
}

.band__zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* gap-x-4 im echten Band */
  gap: calc(16px * var(--massstab, 1));
}

/* min-width: 0 gehört dazu: Ein Flex-Element schrumpft sonst nicht unter
   seinen Inhalt, und ein langer Aktionsname schöbe die Frist aus dem Band
   heraus statt selbst gekürzt zu werden. Dieselbe Falle wie am Namen im
   echten Aktionsband. */
.band__name {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* text-[15px] */
  font-size: calc(15px * var(--massstab, 1));
  font-weight: 600;
  color: var(--weiss);
}

.band__frist {
  flex-shrink: 0;
  /* text-[13px] */
  font-size: calc(13px * var(--massstab, 1));
}

.band__satz {
  /* mt-1 text-[14px] */
  margin: calc(4px * var(--massstab, 1)) 0 0;
  font-size: calc(14px * var(--massstab, 1));
}

.ladenkarte__band--aktion .band__frist,
.ladenkarte__band--aktion .band__satz {
  color: var(--band-aktion-leise);
}

.ladenkarte__band--neu .band__frist,
.ladenkarte__band--neu .band__satz {
  color: var(--band-neu-leise);
}

/* Die Entfernung steht dunkler als der Rest der Zeile - sie ist die
   Auskunft, um derentwillen es die Seite gibt. Genau wie in der App, wo sie
   text-slate-700 in einer text-slate-500-Zeile trägt. */
.ladenkarte__weg {
  font-weight: 500;
  color: var(--text);
}

.telefon__titel {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--tinte);
}

/* Die Suchzeile ist eine Attrappe aus <span> und kein <input>: Ein
   fokussierbares Feld im Hero, das nichts tut, wäre schlimmer als ein Bild
   davon. */
.telefon__suche {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.telefon__suchfeld {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 11px;
  border: 1px solid var(--linie-kraeftig);
  background: var(--weiss);
  padding: 7px 9px;
  font-size: 11px;
  color: var(--text-leise);
}

/* Weiss mit Rahmen und nicht gefuellt: Die Karten zeigen Entfernungen, der
   Kunde hat also einen Standort - dann steht der Knopf in der App als Umriss
   da und heisst „Standort aktualisieren". Gefuellt konkurrierte er staendig
   mit den Karten um Aufmerksamkeit; als Umriss liest er sich als das, was er
   dann ist: ein Nachschlag. */
.telefon__suchknopf {
  flex-shrink: 0;
  border-radius: 11px;
  border: 1px solid var(--linie-kraeftig);
  background: var(--weiss);
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
}

/* Die untere Tab-Leiste, wie sie die Kunden-App unter 760 px trägt. Sie
   klebt am unteren Rand des Kastens, weil .hero__bild .telefon eine
   Flex-Spalte ist und der Inhalt darüber flex: 1 bekommt. */
.telefon__tableiste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--linie);
  background: var(--weiss);
}

/* Eine eigene Ebene, seit der Punktering in den Karten steht (13.09.2026).
   Der Ring ist position: relative, und positionierte Elemente zeichnet der
   Browser ÜBER jedes nicht positionierte - auch über eine Leiste, die im
   Quelltext später kommt. Die angeschnittene unterste Karte legte ihren Ring
   damit auf das Symbol „Punkte". Keine Messung hat das gemeldet: Die Karte
   verschwindet nicht hinter der Leiste, sie liegt davor. In der App ist die
   Leiste ohnehin position: fixed und damit oben.

   Wirksam ist hier das z-index, nicht das position: Die Leiste ist ein
   Flex-Element, und dort gilt z-index auch ohne Positionierung. Wer das
   gegenprüft, schaltet also z-index auf auto - ein position: static allein
   ändert nichts, und die Gegenprobe bliebe grün, ohne etwas zu beweisen.
   Gemessen wird es von tools/nachweis_hero.js (elementFromPoint über der
   Leiste). */
.hero__bild .telefon__tableiste {
  position: relative;
  z-index: 1;
}

.tableiste__reiter {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* min-h-[58px] gap-1 pt-[9px] pb-[11px] px-1 text-[11.5px] */
  min-height: calc(58px * var(--massstab, 1));
  justify-content: center;
  gap: calc(4px * var(--massstab, 1));
  padding: calc(9px * var(--massstab, 1)) calc(4px * var(--massstab, 1)) calc(11px * var(--massstab, 1));
  font-size: calc(11.5px * var(--massstab, 1));
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--linie-stark);
  text-align: center;
  white-space: nowrap;
}

/* Genau EINER ist hervorgehoben. Keiner sähe aus, als sei nichts
   ausgewählt; zwei behaupteten zwei Orte zugleich. */
.tableiste__reiter--aktiv {
  font-weight: 600;
  color: var(--tinte);
}

.tableiste__reiter svg {
  display: block;
  /* width/height 25 im Layout */
  width: calc(25px * var(--massstab, 1));
  height: calc(25px * var(--massstab, 1));
}

/* Die Maße des Nachbaus - ein MASSSTÄBLICHES MODELL eines iPhone 16.
   ==================================================================

   Jede Zahl hier unten ist der ECHTE Wert aus src/views/kunde/geschaefte.php
   und src/views/layout/kunde.php, mal einem Faktor, der genau einmal
   dasteht. Wer einen Wert prüfen will, schlägt die Tailwind-Klasse in der
   App nach: `p-5` sind 20px, `text-lg` 18px, `mt-3` 12px. Steht hier etwas
   anderes, ist es falsch.

   Warum so und nicht mit von Hand gewählten Werten: Am 03.09.2026 stand hier
   zuerst ein Satz zusammengeschobener Maße, damit vier Karten in den Kasten
   passen. Das Ergebnis sah gequetscht aus und war es auch - der Nachbau war
   dichter als die App, die er zeigt. Ein Nachbau, der enger sitzt als das
   Original, wirbt mit einer Oberfläche, die niemand bekommt.

   Der Faktor ist die Breite des Kastens geteilt durch die eines iPhone 16
   (393 px). Der Kasten ist bis 300 px breit; unter 320 px Bildschirm sind es
   284, also 0,72 statt 0,76 - fünf Prozent Unterschied, die im Bild niemand
   sieht und die kein zweiter Satz Werte wert sind.

   DASS UNTEN EINE KARTE ANGESCHNITTEN IST, IST KEIN FEHLER, SONDERN DER
   ZWECK. Genau so sieht die Seite auf einem echten iPhone 16 aus: Kopfzeile
   57, pt-11 44, Überschrift 45, Zählzeile 32, Suchzeile 109 (auf dem Telefon
   zweizeilig), Kartenliste ab 24 - macht 331 Pixel, bevor die erste Karte
   beginnt. Bis zur Tab-Leiste bleiben 463, und die ersten beiden Karten
   brauchen 412. Wer hier eine Karte ergänzt oder streicht, ändert nur, wo
   der Schnitt fällt.

   Was dagegen ein Fehler WÄRE: eine Karte, die vollständig hinter der
   Tab-Leiste verschwindet, oder ein Schnitt so hoch, dass keine zwei Karten
   mehr ganz zu sehen sind. Gemessen wird das an der Zahl der vollständig
   sichtbaren Karten, nicht an Inhalts- gegen Hüllenhöhe.

   NACHGEMESSEN WIRD MIT `node tools/nachweis_hero.js` - über fünf Breiten,
   Rückgabewert 1 bei Befunden. Und danach angesehen, mit
   `BILDER=/tmp/hero`: Der erste Anlauf war durch jede Messung grün und sah
   trotzdem gequetscht aus. */
/* Unter rund 340 px Bildschirm ist der Kasten nicht mehr 300 px breit,
   sondern nur noch so breit wie die Spalte - bei 320 px sind es 284. Der
   Maßstab muss mitgehen, sonst steht ein zu großes Modell in einem zu
   kleinen Gehäuse: Am 04.09.2026 war bei 320 px genau EINE Karte ganz zu
   sehen und die dritte gar nicht, während es ab 390 px zwei plus Anschnitt
   waren.

   Eine Medienabfrage und keine Container-Einheiten: Der Kasten ist
   min(300px, 100%) breit, die Spanne also 284 bis 300 - fünf Prozent. Dafür
   lohnt kein zweites Rechenmodell, und ein `calc(100cqw / 393)` müsste über
   font-size laufen und würde sich in jeder Verschachtelung selbst
   multiplizieren. */
@media (max-width: 340px) {
  .hero__bild .telefon {
    --massstab: 0.723; /* 284 / 393 */
  }
}

/* Der Betrag auf schmalen Telefonen. Gemessen und nicht geschätzt: Im
   JAHRESTARIF - dem längeren Fall, den der Preisschalter herstellt - braucht
   „390,00 €" bei 48 px 190 Pixel, dazu 8 Lücke und 60 für „pro Jahr". Das
   sind 258 bei 258 Pixeln Platz in der Karte eines 360-px-Telefons, also
   Punktlandung; bei 320 px sind nur 218 da. Ab 390 px passt es (259 von 288).
   Der kleinere Grad hält den Betrag auch dort in einer Zeile, wo das Ventil
   darüber sonst „pro Jahr" nach unten schieben würde - und er ist die
   Reserve, falls der Betreiber im Admin je einen vierstelligen Preis setzt.
   Dasselbe Mittel wie bei .kennzahl__wert unter 700 px. */
@media (max-width: 380px) {
  /* Erst Platz schaffen, dann die Schrift verkleinern - in dieser
     Reihenfolge, weil das schmalere Polster nichts kostet und der kleinere
     Grad die Karte flauer macht. Zusammen sind es 234 Pixel Platz gegen 228
     gebrauchte, und „pro Jahr" bleibt in der Zeile des Betrags statt
     darunter zu rutschen, wo es mit „bis 100 Kunden" zu einer zweizeiligen
     Angabe verschmilzt. */
  .preis {
    padding: 24px;
  }

  .preis__zahl {
    font-size: 40px;
  }
}

/* var(--massstab, 1) mit Rückfall: Ausserhalb des Heros gibt es die
   Eigenschaft nicht, und ein calc() mit unbekannter Variable ist ungültig -
   die Regel fiele ersatzlos aus. */
.hero__bild .telefon__kopf {
  /* py-3.5 px-[18px] */
  padding: calc(14px * var(--massstab)) calc(18px * var(--massstab));
}

.hero__bild .telefon__marke {
  font-size: calc(17px * var(--massstab));
  gap: calc(10px * var(--massstab));
}

.hero__bild .telefon__marke img {
  width: calc(26px * var(--massstab));
  height: calc(26px * var(--massstab));
  border-radius: calc(7px * var(--massstab));
}

.hero__bild .telefon__inhalt {
  /* pt-11 px-[18px]; unten nichts, dort schneidet die Tab-Leiste ab. */
  padding: calc(44px * var(--massstab)) calc(18px * var(--massstab)) 0;
}

.hero__bild .telefon__titel {
  /* text-[30px], gemessene Zeilenhöhe 45px */
  font-size: calc(30px * var(--massstab));
  line-height: calc(45px * var(--massstab));
}

.hero__bild .telefon__unter {
  /* mt-2, Grundschrift */
  margin-top: calc(8px * var(--massstab));
  font-size: calc(16px * var(--massstab));
}

/* mt-5 gap-3, und UNTER 520 px stehen Feld und Knopf untereinander
   (flex-col). Der Kasten ist 300 px breit, also gilt hier immer die
   Telefonfassung - eine einzeilige Suche waere die Ansicht eines Tablets. */
.hero__bild .telefon__suche {
  flex-direction: column;
  align-items: stretch;
  margin-top: calc(20px * var(--massstab));
  gap: calc(12px * var(--massstab));
}

.hero__bild .telefon__suchfeld {
  /* px-4 py-3 text-base rounded-[14px] */
  padding: calc(12px * var(--massstab)) calc(16px * var(--massstab));
  font-size: calc(16px * var(--massstab));
  border-radius: calc(14px * var(--massstab));
}

.hero__bild .telefon__suchknopf {
  /* px-5 py-3 text-[15px] rounded-[14px] */
  padding: calc(12px * var(--massstab)) calc(20px * var(--massstab));
  font-size: calc(15px * var(--massstab));
  border-radius: calc(14px * var(--massstab));
  text-align: center;
}

.hero__bild .telefon__karten {
  /* mt-6 gap-3 */
  margin-top: calc(24px * var(--massstab));
  gap: calc(12px * var(--massstab));
}

.hero__bild .ladenkarte {
  /* p-5 rounded-[20px] */
  padding: calc(20px * var(--massstab));
  border-radius: calc(20px * var(--massstab));
}

/* Die Karte seit dem 13.09.2026: links der Punktering, daneben eine Spalte
   mit Name, Entfernung und einer Zeile - wie _punktering.php und
   kunde/geschaefte.php in der App. Der Punktestand rechts und die grüne Box
   sind entfallen; ihre GRUNDREGELN (.ladenkarte__stand, .ladenkarte__rabatt)
   stehen weiter oben und bleiben, weil die Filme sie benutzen. Die
   .hero__bild-Fassungen davon sind gestrichen - der Nachbau benutzt die
   Klassen nicht mehr. */
.hero__bild .ladenkarte__zeile {
  /* flex items-center gap-[18px], und NICHT space-between: Der Text steht
     direkt neben dem Ring, nicht am anderen Rand. */
  justify-content: flex-start;
  gap: calc(18px * var(--massstab));
}

.hero__bild .ladenkarte__ring {
  /* relative h-[72px] w-[72px] shrink-0 */
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  width: calc(72px * var(--massstab));
  height: calc(72px * var(--massstab));
}

/* Die Strichstärke steht als Attribut im viewBox (8 von 72) und wächst
   deshalb mit dem Kasten - hier braucht es keine eigene Länge. */
.hero__bild .ladenkarte__ring svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero__bild .ring__spur {
  /* stroke-slate-200 */
  stroke: var(--linie);
}

.hero__bild .ring__bogen {
  /* stroke-slate-900: kein Band, noch nicht einlösbar */
  stroke: var(--tinte);
}

.hero__bild .ring__bogen--frei {
  /* stroke-emerald-600: einlösbar */
  stroke: var(--band-aktion);
}

.hero__bild .ladenkarte__ring--neu {
  /* rounded-full border-2 border-dashed border-slate-300 */
  border: calc(2px * var(--massstab)) dashed var(--linie-kraeftig);
  border-radius: 50%;
}

.hero__bild .ring__innen {
  /* absolute inset-0 flex flex-col items-center justify-center */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero__bild .ladenkarte__punkte {
  /* text-[20px] font-semibold leading-none tracking-[-0.02em] */
  font-size: calc(20px * var(--massstab));
  line-height: 1;
  letter-spacing: -0.02em;
}

.hero__bild .ladenkarte__einheit {
  /* text-[11px] */
  font-size: calc(11px * var(--massstab));
}

.hero__bild .ring__neu {
  /* text-[15px] font-semibold text-slate-600 */
  font-size: calc(15px * var(--massstab));
  font-weight: 600;
  color: var(--text);
}

/* min-width: 0, sonst schrumpft die Spalte nicht unter einen langen Namen
   und schiebt den Ring aus der Karte - dieselbe Falle wie am Aktionsband. */
.hero__bild .ladenkarte__text {
  min-width: 0;
}

.hero__bild .ladenkarte__name {
  /* truncate text-lg */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(18px * var(--massstab));
}

.hero__bild .ladenkarte__ort {
  /* mt-[3px] text-sm */
  margin-top: calc(3px * var(--massstab));
  font-size: calc(14px * var(--massstab));
}

.hero__bild .ladenkarte__rest {
  /* mt-2 text-sm text-slate-500 */
  margin-top: calc(8px * var(--massstab));
  font-size: calc(14px * var(--massstab));
}

.hero__bild .ladenkarte__frei {
  /* mt-2 text-sm font-semibold text-emerald-700 */
  margin: calc(8px * var(--massstab)) 0 0;
  font-size: calc(14px * var(--massstab));
  font-weight: 600;
  color: var(--gruen-zeile);
}

/* Das Kassen-Terminal, verkleinert. Dieselbe Anordnung wie unter /kasse:
   schmale Spalte mit den Wartenden, rechts Betrag und Ziffernblock. */
.terminal {
  width: 100%;
  max-width: 480px;
  display: grid;
  grid-template-columns: 74px 1fr;
  border-radius: 22px;
  border: 1px solid var(--kasse-linie);
  background: var(--kasse-grund);
  overflow: hidden;
  box-shadow: 0 28px 56px -22px rgba(2, 6, 23, 0.55);
}

.terminal__spalte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-right: 1px solid var(--kasse-linie);
  background: var(--kasse-spalte);
  padding: 16px 8px;
}

.terminal__spalte img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: block;
  opacity: 0.9;
}

.terminal__beschriftung {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kasse-leise);
}

.terminal__trenner {
  width: 100%;
  height: 1px;
  background: var(--kasse-linie);
}

.wartend {
  width: 100%;
  border-radius: 14px;
  padding: 8px 2px;
  text-align: center;
}

.wartend--dran {
  outline: 2px solid var(--gruen);
  outline-offset: -2px;
}

.wartend__kreis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border-radius: 50%;
  background: #111827;
  font-size: 15px;
  font-weight: 600;
  color: #e2e8f0;
}

.wartend__kreis--rabatt {
  background: #451a03;
  color: #fbbf24;
}

.wartend__name {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 500;
  color: #e2e8f0;
}

.wartend__zeit {
  display: block;
  font-size: 9px;
  color: #6b7280;
}

.wartend__zeit--rabatt {
  color: var(--bernstein-text);
}

.terminal__live {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gruen-hell);
}

.terminal__live span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gruen);
  display: block;
}

.terminal__haupt {
  padding: 16px 16px 18px;
}

.terminal__kunde {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--weiss);
}

.terminal__nummer {
  font-size: 12px;
  font-weight: 400;
  color: #4b5563;
}

.terminal__fahne {
  border-radius: 999px;
  background: var(--gruen);
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gruen-tinte);
}

.terminal__stand {
  margin: 4px 0 0;
  font-size: 12px;
  color: #6b7280;
}

.terminal__betragfeld {
  margin-top: 14px;
  text-align: right;
}

.terminal__betraglabel {
  margin: 0;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kasse-leise);
}

.terminal__betrag {
  margin: 2px 0 0;
  font-family: var(--ziffern);
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--weiss);
}

.terminal__punkte {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--gruen-hell);
}

.terminal__block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 14px;
  font-family: var(--ziffern);
  font-size: 16px;
  color: var(--weiss);
  text-align: center;
}

.terminal__block span {
  border-radius: 10px;
  background: var(--kasse-taste);
  padding: 11px 0;
}

.terminal__block .neben {
  background: var(--kasse-taste-neben);
  color: #9ca3af;
}

.terminal__balken {
  position: relative;
  overflow: hidden;
  margin-top: 10px;
  border-radius: 12px;
  background: var(--gruen);
  padding: 15px;
  text-align: center;
}

.terminal__balken::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  background: var(--gruen-hell);
}

.terminal__balken span {
  position: relative;
  font-size: 15px;
  font-weight: 700;
  color: var(--gruen-tinte);
}

/* Dieselbe Anmutung, kleiner, in der Karte „Kasse bucht". */
.minikasse {
  margin-top: 22px;
  border-radius: 14px;
  background: var(--kasse-grund);
  padding: 16px;
}

.minikasse__wer {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kasse-leise);
}

.minikasse__betrag {
  margin: 8px 0 0;
  text-align: right;
  font-family: var(--ziffern);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--weiss);
}

.minikasse__punkte {
  margin: 6px 0 0;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  color: var(--gruen-hell);
}

.minikasse__balken {
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  border-radius: 10px;
  background: var(--gruen);
  padding: 12px;
  text-align: center;
}

.minikasse__balken::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 46%;
  background: var(--gruen-hell);
}

.minikasse__balken span {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  color: var(--gruen-tinte);
}

/* ------------------------------------------------------------------ */
/* 6. Fließtext: Rechtstexte und Fehlerseiten                          */
/* ------------------------------------------------------------------ */

/*
 * Impressum, AGB, Datenschutzerklärung und die beiden Fehlerseiten.
 *
 * Sie lagen bis zum 30.08.2026 unter einem eigenen Layout (oeffentlich.php)
 * und damit unter Tailwind - 441 KB JIT für 1200 Zeilen Fließtext, dazu eine
 * zweite Kopf- und Fußzeile, die neben der Landingpage anders aussah.
 *
 * Gestaltet wird hier nach ELEMENT und nicht über Klassen an jedem Absatz.
 * In den Views standen 46-mal dieselbe h3-Klassenkette und 17-mal dieselbe
 * h2-Kette; jede davon war eine Gelegenheit, sich zu vertippen, und keine
 * trug eine Aussage. Ein Rechtstext ist reiner Fließtext - genau der Fall,
 * für den es Elementselektoren gibt. Neuer Absatz heißt jetzt <p>, nicht
 * <p class="mt-3">.
 *
 * Die Lesespalte ist mit 760 px deutlich schmaler als die 1180 px der
 * Landingpages: Ein Absatz Fließtext über die volle Breite verliert beim
 * Zeilenwechsel den Anschluss. Kopf- und Fußzeile behalten ihre 1180 px,
 * damit sie über allen Seiten gleich stehen.
 */

.rechtstext {
  margin: 0 auto;
  max-width: 760px;
  padding: 56px 24px 96px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  text-wrap: pretty;

  /* Rechtstexte tragen Adressen, Paragraphenketten und Mailadressen, und die
     haben keine Trennstelle. Am schmalen Telefon schöbe ein solches Wort die
     Seite seitwärts - lieber ein Umbruch mitten im Wort als eine Seite, die
     scrollt. Dieselbe Überlegung wie bei den Werten in mail_daten(). */
  overflow-wrap: break-word;
}

.rechtstext h1 {
  margin: 0 0 20px;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--tinte);
}

/*
 * Silbentrennung in den Überschriften.
 *
 * "Geschäftsbedingungen" ist bei 28 px 296 px breit; bei 320 px Bildschirm
 * bleiben nach den Innenabständen 284 px. Das Wort schob die ganze Seite auf
 * 332 px, also 12 px seitwärts - und zwar unabhängig von overflow-wrap:
 * `break-word` bricht zwar die Zeile, verkleinert aber die Mindestbreite des
 * Elements NICHT. Eine Trennstelle tut beides.
 *
 * Es hängt an lang="de" im <html>: ohne die Sprachangabe weiß der Browser
 * nicht, wo ein deutsches Wort getrennt wird, und die Regel wirkt still
 * nicht. Wer die Sprachangabe entfernt, bekommt den Überlauf zurück.
 */
.rechtstext h1,
.rechtstext h2,
.rechtstext h3 {
  hyphens: auto;
  -webkit-hyphens: auto;
}

.rechtstext h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--tinte);
}

.rechtstext h3 {
  margin: 0;
  padding-top: 8px;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 650;
  color: var(--tinte);
}

.rechtstext p {
  margin: 12px 0 0;
}

/* Der erste Absatz eines Abschnitts steht direkt unter seiner Überschrift;
   den Abstand macht dort schon die Überschrift. */
.rechtstext h2 + p,
.rechtstext h3 + p {
  margin-top: 8px;
}

.rechtstext ul,
.rechtstext ol {
  margin: 12px 0 0;
  padding-left: 24px;
}

.rechtstext ul { list-style: disc; }
.rechtstext ol { list-style: decimal; }

.rechtstext li + li {
  margin-top: 4px;
}

.rechtstext address {
  margin: 8px 0 0;
  font-style: normal;
}

.rechtstext a {
  color: var(--tinte);
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

.rechtstext strong,
.rechtstext b {
  font-weight: 650;
  color: var(--tinte);
}

/* Ein Abschnitt. Der Abstand steht am Nachbarn und nicht als margin an
   beiden Seiten - so entsteht am Ende der Seite keine Lücke, die niemand
   bestellt hat. */
.rechtstext section + section {
  margin-top: 40px;
}

/* Der erste Abschnitt braucht ihn trotzdem: Über ihm steht der Vorspann -
   die Fassungszeile und bei den AGB der Kasten mit den vier Teilen. Ohne
   diese Regel klebte "Teil A - Allgemeines" am Kasten darüber, weil die
   Abschnitte in einer Hülle stecken und `section + section` dort nicht
   greift. */
.rechtstext section:first-child {
  margin-top: 32px;
}

/* Die Untergliederung innerhalb eines Abschnitts: die vielen <h3> der AGB
   und der Datenschutzerklärung. Enger als zwischen zwei Abschnitten. */
.rechtstext section h3 {
  margin-top: 20px;
}

.rechtstext section > :first-child {
  margin-top: 0;
}

/* Dateinamen und Befehle - im Impressum-Hinweis und in der
   Datenschutzerklärung. */
.rechtstext .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

/* Beiwerk: Fassungsnummer, Stand, Quellenangaben. */
.rechtstext .leise {
  font-size: 14px;
  color: var(--text-leise);
}

/*
 * Hervorgehobene Kästen. Vier Färbungen, und jede hat einen Grund:
 * neutral für Hinweise, grün für den Widerrufs-Wortlaut, bernstein für die
 * Entwurfswarnung im Impressum, gestrichelt für das Muster-Widerrufsformular
 * (es ist zum Ausfüllen gedacht und sieht deshalb aus wie ein Formular).
 */
.rechtstext .kasten {
  margin: 20px 0 0;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--weiss);
  padding: 16px;
  font-size: 15px;
}

.rechtstext .kasten--gross {
  border-color: var(--linie-kraeftig);
  border-radius: 18px;
  padding: 20px;
  font-size: 16px;
}

.rechtstext .kasten--gestrichelt {
  border: 1px dashed var(--linie-stark);
  border-radius: 18px;
  background: var(--flaeche);
  padding: 20px;
}

.rechtstext .kasten--gruen {
  border-color: var(--gruen-linie);
  background: var(--gruen-flaeche);
  color: var(--gruen-tief);
}

.rechtstext .kasten--gruen strong {
  color: var(--gruen-tief);
}

.rechtstext .kasten--bernstein {
  border-color: var(--bernstein-linie);
  background: var(--bernstein-flaeche);
  color: var(--bernstein-tief);
}

.rechtstext .kasten--bernstein strong {
  color: var(--bernstein-tief);
}

/* Ein Absatz, der eine Überschrift vertritt - etwa die Anrede über einer
   Aufzählung. */
.rechtstext .betont {
  margin-top: 16px;
  font-weight: 650;
  color: var(--tinte);
}

/* Die auszufüllende Stelle im Muster-Widerrufsformular. */
.rechtstext .marker {
  border-radius: 4px;
  background: #fef3c7; /* amber-100 */
  padding: 1px 4px;
  font-weight: 500;
  color: var(--bernstein-tief);
}

/* Fassung und Stand am Fuß eines Rechtstextes, über einer Trennlinie. */
.rechtstext .abschluss {
  margin-top: 40px;
  border-top: 1px solid var(--linie);
  padding-top: 16px;
}

/*
 * Ein Knopf, der wie ein Verweis aussieht - in der Datenschutzerklärung
 * öffnet er die Cookie-Einstellungen. Er MUSS ein <button> sein und kein
 * <a href="#">: er führt nirgendwohin, er schaltet etwas. Die Gestalt eines
 * Verweises, weil er mitten im Satz steht.
 */
.rechtstext .textknopf {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 650;
  color: var(--gruen-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Die Fehlerseiten: eine Zeile Text, ein Weg zurück. Sie tragen dasselbe
   Layout, brauchen aber die Höhe nicht. */
.rechtstext .zurueck {
  margin-top: 28px;
}

/* ------------------------------------------------------------------ */
/* 7. Umbrüche                                                         */
/* ------------------------------------------------------------------ */

@media (max-width: 1040px) {
  .hero__innen {
    grid-template-columns: 1fr;
    padding-top: 56px;
    padding-bottom: 64px;
  }

  .zweispalt,
  .zweispalt--schmal {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .karten,
  .preise {
    grid-template-columns: 1fr 1fr;
  }

  .kennzahlen {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .abschluss {
    grid-template-columns: 1fr;
    padding: 44px 32px;
  }

  .h1 {
    font-size: 48px;
  }

  .h2,
  .h2--klein {
    font-size: 34px;
  }

  /* Die schmale Kennzahlenbahn bleibt schmal - sonst wüchse sie beim
     Verkleinern des Fensters, statt zu schrumpfen. */
  .innen:not(.innen--schmal) {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* Ab hier weicht die Navigation dem Burger-Menü. 940 und nicht 880 Pixel:
   die Händlerseite hat sechs Einträge in der Leiste und wird eher eng als
   die Kundenseite mit fünf. Eine Breite für beide Seiten, damit es eine
   Datei bleibt. */
@media (max-width: 940px) {
  .nav {
    display: none;
  }

  .burger {
    display: block;
  }
}

@media (max-width: 700px) {
  .rechtstext {
    padding: 40px 18px 72px;
  }

  .rechtstext h1 {
    font-size: 28px;
  }

  .rechtstext h2 {
    font-size: 19px;
  }

  .karten,
  .preise,
  .kennzahlen {
    grid-template-columns: 1fr;
  }

  .h1 {
    font-size: 36px;
  }

  .h2,
  .h2--klein {
    font-size: 28px;
  }

  .lead {
    font-size: 18px;
  }

  .telefon {
    max-width: 320px;
  }

  .preisschalter {
    width: 100%;
  }

  .feld--paar {
    grid-template-columns: 1fr;
  }

  .kontakt__form .knopf {
    justify-self: stretch;
  }

  .kennzahl__wert {
    font-size: 27px;
  }

  .innen,
  .hero__innen,
  .kopf__innen,
  .fuss__innen,
  .burger__liste {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Wer Bewegung abbestellt hat, bekommt keine. Betrifft hier nur die
   Farbübergänge an den Knöpfen. */
@media (prefers-reduced-motion: reduce) {
  .knopf {
    transition: none;
  }
}