/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5
 * Hallmark · macrostructure: Bento Grid · genre: modern-minimal · studied: yes
 * theme: markengebunden (Koralle + Indigo, siehe tokens.css) · enrichment: Tier A CSS-Vignetten
 * nav: N5 Floating pill · footer: Ft1 Mast-headed · tone: modern-minimal / vertrauenswuerdig
 * DNA-Quelle: Referenz-Screenshots von Manuel (2026-07-26) — uebernommen: dunkle
 * Hero-Buehne, Versalien-Mikroetikett, Nummern-Kapitel mit Haarlinien.
 * Abgelehnt: Partikel-Deko, Serifen-Display, Volldunkel fuer die ganze Seite.
 *
 * Gilt fuer die oeffentlichen Seiten: Landingpage + Rechtstexte.
 * Die App-Seiten (/app, /admin, …) nutzen weiterhin styles.css.
 */

html, body { overflow-x: clip; }

body.site {
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* padding-inline statt der padding-Kurzform: .wrap sitzt auf denselben Elementen
   wie .hero-z / .sec / .legal — eine Kurzform wuerde deren vertikalen Abstand
   ueberschreiben (und den Hero unter die Navigation schieben). */
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding-inline: var(--space-lg); }
.hidden { display: none !important; }
.skip-link {
  position: absolute; left: -9999px; top: var(--space-sm);
  background: var(--c-ink); color: var(--c-on-deep); padding: 10px 16px;
  border-radius: var(--r-sm); z-index: calc(var(--z-nav) + 1); font-weight: 600;
}
.skip-link:focus { left: var(--space-lg); }

/* ══ Wortmarke ══════════════════════════════════════════════════════════ */
.mark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.08rem;
  letter-spacing: -.015em; color: var(--c-ink); white-space: nowrap; min-width: 0;
}
.mark .dot {
  width: 11px; height: 11px; border-radius: 3.5px; flex: none;
  background: var(--c-brandline);
}
.mark .brand-logo { max-height: 24px; width: auto; border-radius: 5px; }

/* ══ N5 · Floating pill ═════════════════════════════════════════════════ */

/* Sprungmarken müssen UNTER der Pille landen, nicht dahinter.
   ────────────────────────────────────────────────────────────────────────
   Gefunden am 2026-08-11: Ein Klick auf „Preise" in der Navigation setzte die
   Überschrift „Ein Preis pro Firma. Nicht pro Kopf." auf 0 px — die Pille
   steht aber von 16 px bis 64 px (Handy) bzw. 69 px (Rechner) davor und ist
   milchig hinterlegt. Die halbe Überschrift war damit weg, und zwar genau bei
   dem Abschnitt, wegen dem die meisten Besucher klicken.

   Der Browser springt normalerweise so, dass das Ziel oben am Fenster klebt.
   `scroll-padding-top` sagt ihm, dass oben etwas im Weg steht. 88 px = Pille
   (69) + Abstand nach oben (16) + etwas Luft, damit die Überschrift nicht am
   Rand der Pille klebt.

   Bewusst hier in site.css und nicht in styles.css: die Pille gibt es nur auf
   den vier öffentlichen Seiten (Landingpage, Impressum, Datenschutz, AGB), und
   nur die laden diese Datei. Die App-Seiten haben eine andere Kopfzeile. */
html { scroll-padding-top: 88px; }

.nav-pill {
  position: fixed; top: var(--space-md); left: 50%; transform: translateX(-50%);
  z-index: var(--z-nav);
  display: inline-flex; align-items: center; gap: var(--space-md);
  padding: 7px 8px 7px 18px;
  max-width: calc(100% - 2 * var(--space-md));
  background: color-mix(in oklch, var(--c-paper) 80%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border: var(--rule-hair) solid var(--c-line);
  border-radius: var(--r-pill);
  box-shadow: 0 8px 26px -14px oklch(23% 0.018 285 / .35);
}
.nav-pill__actions { display: inline-flex; align-items: center; gap: var(--space-xs); flex: none; }

/* ══ Buttons ════════════════════════════════════════════════════════════ */
.btn-z {
  --pad: 10px 17px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: var(--pad); border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none;
  border: var(--rule-hair) solid transparent;
  transition: background-color var(--dur-sm) var(--ease-out),
              border-color var(--dur-sm) var(--ease-out),
              transform var(--dur-xs) var(--ease-out);
}
.btn-z--accent { background: var(--c-accent); color: #fff; box-shadow: var(--shadow-s); }
.btn-z--accent:hover { background: var(--c-accent-d); transform: translateY(-1px); }
.btn-z--ghost { background: var(--c-card); color: var(--c-ink); border-color: var(--c-line-2); }
.btn-z--ghost:hover { background: var(--c-paper-2); transform: translateY(-1px); }
.btn-z--onDeep { background: transparent; color: var(--c-on-deep); border-color: var(--c-line-deep); }
.btn-z--onDeep:hover { background: var(--c-deep-2); transform: translateY(-1px); }
.btn-z--lg { --pad: 15px 28px; font-size: 1rem; }
.btn-z:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.btn-z:active { transform: translateY(0); }
.btn-z[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ══ Icons (ein Strich-Vokabular, inline-SVG-Sprite) ════════════════════ */
.ico { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none;
       stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico--sm { width: 17px; height: 17px; }

/* ══ Hero — dunkle Werkbank-Bühne ═══════════════════════════════════════
   Studien-Übernahme aus Manuels Referenz-Screenshots (2026-07-26), als DNA,
   nicht als Kopie: dunkle Bühne für den ersten Eindruck, große ruhige
   Typografie, Mikro-Etikett in Versalien, EIN warmer Akzent. Bewusst NICHT
   übernommen: Partikel-Deko (das bekannteste KI-Seiten-Merkmal), Serifen
   (Marke ist Space Grotesk + Inter), Volldunkel für die ganze Seite (die
   Produktinfos bleiben auf hellem Papier lesbar). Die dunkle Fläche mit
   Blueprint-Raster ist zudem die ursprüngliche MTO Zeiterfassung-„Werk"-Signatur. */
/* ── Hero-Bühne: Werkstatt hinter dem Nachtblau (2026-09-03) ──────────────
   Ein echtes Bild statt einer weiteren Deko-Fläche — der Design-Standard sagt
   für Marketing ausdrücklich „echtes Bild schlägt Deko-SVG". Es zeigt den Ort,
   an dem die App benutzt wird, und tut sonst nichts.

   Die drei Regeln, an denen so ein Hintergrund sonst kippt:
   1. **Der Text bleibt der Text.** Über dem Bild liegt ein Nachtblau-Schleier,
      links dichter als rechts — dort steht die Überschrift. Gemessen, nicht
      geschätzt: der Kontrast der H1 gegen die hellste Stelle darunter.
   2. **`background-color` bleibt gesetzt.** Lädt das Bild nicht, ist die Bühne
      trotzdem nachtblau und nicht weiß.
   3. Das Bild ist **Hintergrund, kein Inhalt** — deshalb keine `<img>`, kein
      alt-Text, und es verschwindet nie hinter dem Text hervor. */
.hero-stage {
  background-color: var(--c-deep);
  background-image:
    linear-gradient(100deg,
      oklch(20.5% 0.022 285 / .96) 0%,
      oklch(20.5% 0.022 285 / .93) 42%,
      oklch(20.5% 0.022 285 / .82) 100%),
    url('/bilder/werkstatt-weit.webp');
  background-size: cover;
  background-position: 50% 62%;
  background-repeat: no-repeat;
  position: relative; isolation: isolate;
}
.hero-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(oklch(100% 0 0 / .05) 1px, transparent 1px),
    linear-gradient(90deg, oklch(100% 0 0 / .05) 1px, transparent 1px);
  background-size: 36px 36px;
  /* Das Raster fasert nach unten und zu den Seiten aus statt hart abzubrechen */
  -webkit-mask-image: radial-gradient(1100px 620px at 50% 8%, #000 0%, transparent 75%);
  mask-image: radial-gradient(1100px 620px at 50% 8%, #000 0%, transparent 75%);
}
.hero-stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Eine einzige weiche Markentönung — ein Verlauf, keine Blasen */
  background: radial-gradient(900px 480px at 68% -18%,
              color-mix(in oklch, var(--c-accent) 16%, transparent), transparent 68%);
}
/* ── Geister-UI in der Buehne ──────────────────────────────────────────
   Die echte Oberflaeche scheint schwach aus dem Dunkel. Alles laeuft ueber
   eine Handvoll Weiss-Deckkraefte im Bereich 2–7 % — das ist die Grenze, an
   der man die Form erkennt, ohne dass sie um Aufmerksamkeit konkurriert.
   Wird es heller, kaempft es mit der Ueberschrift; wird es dunkler, ist es
   im Rauschen. Die Kacheln stehen weit aussen und ragen ueber den Rand
   hinaus, damit klar ist: das ist Hintergrund, kein Produktbild. */
.hero-ghost {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden;
  /* Nach unten ausblenden, damit nichts hart an der Buehnenkante abreisst */
  -webkit-mask-image: linear-gradient(#000 52%, transparent 94%);
  mask-image: linear-gradient(#000 52%, transparent 94%);
}
.ghost {
  position: absolute; top: 108px; width: 296px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px; border-radius: var(--r-lg);
  border: 1px solid oklch(100% 0 0 / .07);
  background: oklch(100% 0 0 / .022);
}
/* 🔴 Nur noch RECHTS eine Kachel — und sie beginnt garantiert hinter der
   Textspalte.

   Vorher hingen zwei Kacheln symmetrisch an der Mitte. Das passte zum
   zentrierten Hero. Seit der Text LINKS ausgerichtet ist, beginnt die
   Überschrift an der linken Kante der Spalte — genau dort, wo die linke Kachel
   saß. Gemessen am 2026-08-19: von 1201 bis 1600 px lief die linke Kachel
   durch Überschrift UND Subtext. Erst ab 1920 px war sie weit genug draußen.

   Die Lösung ist kompositorisch, nicht kosmetisch: Text links, Andeutung der
   Oberfläche rechts. Das ist auch die ruhigere Lesart — man liest den Satz und
   sieht daneben, worum es geht, statt beides übereinander.

   `calc(50% - 580px)` ist die halbe Spaltenbreite (.wrap = 1160 px), also die
   rechte Spaltenkante. Minus 24 px Abstand, gedeckelt auf -60 px, damit die
   Kachel auch auf sehr breiten Schirmen noch über den Rand hinausragt und als
   Hintergrund gelesen wird, nicht als freischwebende Karte. */
.ghost--l { display: none; }
.ghost--r { right: min(calc(50% - 580px - 24px), -60px); }
.ghost__cap {
  font-family: var(--font-display); font-weight: 600; font-size: .78rem;
  letter-spacing: .04em; color: oklch(100% 0 0 / .062);
}
.ghost__clock {
  font-family: var(--font-display); font-weight: 700; font-size: 2.1rem;
  letter-spacing: -.02em; text-align: center; padding: 16px 0;
  border-radius: var(--r-md); background: oklch(100% 0 0 / .022);
  color: oklch(100% 0 0 / .072); font-variant-numeric: tabular-nums;
}
.ghost__btn { height: 34px; border-radius: var(--r-pill); background: oklch(100% 0 0 / .05); }
.ghost__btn--w { background: oklch(100% 0 0 / .035); }
/* Der Aktionsknopf traegt einen Hauch Koralle — dieselbe Farbe, die im Hero
   der echte Knopf hat. Mehr als 9 % faellt sofort als Deko auf. */
.ghost__btn--a { background: color-mix(in oklch, var(--c-accent) 9%, transparent); }
.ghost__field { height: 30px; border-radius: var(--r-sm); background: oklch(100% 0 0 / .03); }
.ghost__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ghost__tiles span {
  padding: 12px 0; border-radius: var(--r-md); text-align: center;
  background: oklch(100% 0 0 / .022);
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  color: color-mix(in oklch, var(--c-accent) 16%, transparent);
}

/* ── Hero: LINKS ausgerichtet, nicht zentriert ────────────────────────────────
   Vorher stand hier `text-align: center`, und damit hingen SIEBEN Elemente in
   der Mitte: Eyebrow, Überschrift, Subtext, zwei Knöpfe und drei
   Vertrauens-Zeilen. Der Design-Standard erlaubt höchstens zwei zentrierte
   Elemente und einen zentrierten Hero nur bei Manifesto/Launch — das hier ist
   eine Verkaufsseite.

   Der eigentliche Gewinn ist nicht die Regel, sondern das Lesen: Links
   ausgerichtet beginnt jede Zeile an derselben Kante, das Auge muss den
   Zeilenanfang nicht suchen. Bei drei zentrierten Blöcken hintereinander
   wandert er bei jeder Zeile.

   Der Eyebrow ist ganz weg (siehe index.html); seine Regeln stehen deshalb
   nicht mehr hier. */
.hero-z {
  padding: clamp(116px, 16vh, 168px) 0 clamp(48px, 7vw, 80px);
  color: var(--c-on-deep);
}
.hero-z h1 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em;
  font-size: var(--text-display); line-height: 1.02;
  /* `margin-top: 0` — ohne den Eyebrow braucht die Zeile keinen Vorabstand
     mehr; das Polster der Sektion trägt sie. Kein `auto` mehr: die Zeile
     beginnt links.

     16ch ist bewusst eng: So bricht die Zeile zwischen „erfassen," und „ohne
     Aufwand." — die betonte Hälfte steht damit vollständig in Zeile zwei, mit
     ihrer Unterstreichung. Bei 20ch hing „ohne" noch am Ende der ersten Zeile
     und „Aufwand." stand allein darunter; die Betonung zerfiel in zwei Teile.
     Dass es auf dem Handy trotzdem zwei Zeilen bleiben, regelt die kleinere
     Schriftgröße weiter unten, nicht die Spaltenbreite. */
  margin: 0; max-width: 16ch;
  overflow-wrap: anywhere; min-width: 0;
  color: var(--c-on-deep);
}
/* Auf schmalen Schirmen eine Stufe kleiner, damit die Zeile ZWEI Zeilen bleibt.
   Der Standard erlaubt im Hero maximal zwei; bei der Grundgröße (2,5 rem)
   brach „Arbeitszeit erfassen, ohne Aufwand." bei 390 px auf drei um.
   Gemessen, nicht geschätzt. */
@media (max-width: 430px) {
  .hero-z h1 { font-size: 2.05rem; letter-spacing: -.025em; }
}
/* 320 px ist die kleinste Breite, die der Standard verlangt — dort trug auch
   2,05 rem noch drei Zeilen, und die Betonung brach mitten durch. Gemessen
   von 320 bis 1920 px. */
@media (max-width: 340px) {
  .hero-z h1 { font-size: 1.78rem; }
}
/* Betonung ohne Farbverlauf-Schrift: Volltonfarbe + gezeichnete Unterstreichung.
   Als Hintergrund gezeichnet (nicht ::after), damit sie auch bei Zeilenumbruch
   mitlaeuft — wichtig auf schmalen Displays. */
.hero-z h1 .em {
  color: var(--c-accent);
  background: linear-gradient(color-mix(in oklch, var(--c-accent) 30%, transparent),
                              color-mix(in oklch, var(--c-accent) 30%, transparent))
              no-repeat left calc(100% - .05em) / 100% .085em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero-z__lead {
  color: var(--c-on-deep-2); font-size: var(--text-lead); line-height: 1.6;
  /* 46ch statt 52: Der Standard will 45–75 Zeichen je Zeile; links
     ausgerichtet liest sich der kürzere Satz ruhiger. Kein `auto`. */
  max-width: 46ch; margin: var(--space-lg) 0 0;
}
.hero-z__cta {
  display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: flex-start;
  margin-top: var(--space-xl);
}
.hero-z__trust {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg);
  justify-content: flex-start; margin-top: var(--space-lg);
  color: var(--c-on-deep-2); font-size: var(--text-sm);
}
.hero-z__trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-z__trust .ico { color: var(--c-ok); }

/* ══ Bento ══════════════════════════════════════════════════════════════ */
.bento {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(172px, auto); gap: var(--space-md);
  margin-top: clamp(28px, 4.5vw, 48px);
}
.cell {
  background: var(--c-card); border: var(--rule-hair) solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--space-lg);
  display: flex; flex-direction: column; min-width: 0;
}
.cell--2x2 { grid-column: span 2; grid-row: span 2; }
.cell--2x1 { grid-column: span 2; }
.cell--1x2 { grid-row: span 2; }
.cell--deep {
  background: var(--c-deep); border-color: transparent; color: var(--c-on-deep);
}
.cell--deep .cell__t { color: var(--c-on-deep); }
.cell--deep .cell__p { color: var(--c-on-deep-2); }
.cell--quiet { background: var(--c-paper-2); }

.cell__t {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-h3);
  letter-spacing: -.012em; display: flex; align-items: center; gap: 10px;
}
.cell__t .ico { color: var(--c-accent); }
.cell--deep .cell__t .ico { color: var(--c-on-deep); }
.cell__p { color: var(--c-ink-2); font-size: var(--text-sm); line-height: 1.55; margin-top: 8px; }
.cell__art { margin-top: auto; padding-top: var(--space-md); }

/* — Vignette: Stempeluhr — */
.vig-clock__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  font-size: var(--text-sm); color: var(--c-ink-2);
}
.badge-live {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-size: var(--text-xs); font-weight: 600; color: var(--c-ok-ink);
  background: var(--c-ok-t); padding: 5px 11px; border-radius: var(--r-pill);
}
.badge-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-ok); }
.vig-clock__time {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em;
  font-size: clamp(2.6rem, 6vw, 3.5rem); text-align: center;
  padding: var(--space-md) 0 var(--space-xs); font-variant-numeric: tabular-nums;
}
.vig-clock__punch { display: flex; gap: var(--space-xs); }
.vig-clock__punch > div {
  flex: 1; min-width: 0; text-align: center; background: var(--c-paper-2);
  border: var(--rule-hair) solid var(--c-line); border-radius: var(--r-sm); padding: 10px 6px;
}
.vig-clock__punch .k { font-size: var(--text-xs); color: var(--c-ink-2); font-weight: 600; }
.vig-clock__punch .v {
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.vig-bar { height: 7px; border-radius: var(--r-pill); background: var(--c-paper-3); overflow: hidden; margin: var(--space-md) 0 var(--space-sm); }
.vig-bar > i { display: block; height: 100%; width: 71%; border-radius: var(--r-pill); background: var(--c-brandline); }
.vig-rows { display: grid; gap: 8px; }
.vig-rows .r { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-sm); }
.vig-rows .nm { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.vig-rows .nm i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.vig-rows .hh { color: var(--c-ink-2); font-variant-numeric: tabular-nums; flex: none; }

/* — Vignette: Sticker — */
.vig-sticker { display: flex; align-items: center; gap: var(--space-md); }
.sticker-disc {
  width: 76px; height: 76px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: var(--c-accent);
  background: var(--c-accent-t);
  border: 2px dashed color-mix(in oklch, var(--c-accent) 45%, transparent);
}
.sticker-disc .ico { width: 30px; height: 30px; }
.vig-sticker__steps { display: grid; gap: 6px; font-size: var(--text-sm); color: var(--c-ink-2); min-width: 0; }
.vig-sticker__steps b { color: var(--c-ink); font-weight: 600; }

/* — Vignette: Team — */
.vig-team { display: grid; gap: 9px; }
.vig-team .p { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); min-width: 0; }
.avatar {
  width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; font-family: var(--font-display);
  background: var(--c-paper-3); color: var(--c-ink-2);
}
.vig-team .role { margin-left: auto; flex: none; font-size: var(--text-xs); color: var(--c-ink-3); }
.vig-team .role--admin { color: var(--c-accent-2); font-weight: 600; }

/* — Vignette: Monatsblatt — */
.vig-sheet { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.vig-sheet th {
  text-align: left; font-size: var(--text-xs); font-weight: 600; color: var(--c-ink-3);
  padding-bottom: 7px; border-bottom: var(--rule-hair) solid var(--c-line);
}
.vig-sheet th:not(:first-child), .vig-sheet td:not(:first-child) { text-align: right; }
.vig-sheet td { padding: 7px 0; border-bottom: var(--rule-hair) solid var(--c-line); }
.vig-sheet tr:last-child td { border-bottom: 0; font-weight: 600; }
.vig-sheet .plus { color: var(--c-ok-ink); }

/* — Vignette: Antrag — */
.vig-flow { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.flow-node {
  flex: 1 1 0; min-width: 128px; background: var(--c-paper-2);
  border: var(--rule-hair) solid var(--c-line); border-radius: var(--r-sm);
  padding: 11px 13px; font-size: var(--text-sm);
}
.flow-node .k { font-size: var(--text-xs); color: var(--c-ink-3); font-weight: 600; }
.flow-node .v { font-weight: 600; margin-top: 2px; }
.flow-node--ok { background: var(--c-ok-t); border-color: color-mix(in oklch, var(--c-ok) 30%, transparent); }
.flow-node--ok .v { color: var(--c-ok-ink); }
/* Auch die kleine Zeile darüber bekommt das dunkle Grün.
   Sie erbte `--c-ink-3` (ein neutrales Grau) und kam damit auf der grünen
   Fläche auf 4,48:1 — die Anforderung ist 4,50. Gemessen, nicht geschätzt.
   Zwei Gründe für die Änderung, und der zweite wiegt mehr als die 0,02:
   Der Design-Standard verbietet Grautext auf farbigem Grund. Mit
   `--c-ok-ink` sind es 5,94:1, und die Kachel bleibt in einer Farbfamilie. */
.flow-node--ok .k { color: var(--c-ok-ink); }
.flow-arrow { color: var(--c-ink-3); flex: none; }

/* — Vignette: Feiertage — */
.vig-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.vig-days i {
  aspect-ratio: 1; border-radius: 5px; background: var(--c-paper-3); display: block;
}
/* Nur der Feiertag traegt Farbe — Arbeits- und Wochenendtage bleiben neutral,
   sonst geht die Aussage der Kachel im Muster unter. */
.vig-days i.work { background: var(--c-line-2); }
.vig-days i.free { background: var(--c-accent); }

/* ══ Abschnitte ═════════════════════════════════════════════════════════ */
.sec { padding: clamp(56px, 8vw, 96px) 0; }
.sec--tight { padding-top: 0; }
.sec__head { max-width: 46ch; }
.sec__head h2 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em;
  font-size: var(--text-h2); line-height: 1.08; overflow-wrap: anywhere; min-width: 0;
}
.sec__head p { color: var(--c-ink-2); font-size: var(--text-lead); margin-top: var(--space-sm); }

/* ══ Schritte — editoriale Nummern-Kapitel (Studien-Übernahme) ══════════
   Drei Spalten, jede beginnt mit einer Haarlinie und einer kleinen Nummer.
   Die Nummerierung ist hier ECHT ordinal (Schritt 1→2→3), kein Deko-Etikett. */
.rail {
  margin-top: var(--space-2xl);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
}
.rail__step {
  border-top: 2px solid var(--c-ink);
  padding-top: var(--space-md);
  position: relative;
}
.rail__step::before {
  content: ""; position: absolute; top: -2px; left: 0;
  width: 44px; height: 2px; background: var(--c-accent);
}
.rail__no {
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  color: var(--c-accent-ink); letter-spacing: .12em; font-variant-numeric: tabular-nums;
}
.rail__step h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
  letter-spacing: -.015em; margin-top: 10px;
}
.rail__step p { color: var(--c-ink-2); font-size: var(--text-sm); line-height: 1.65; margin-top: 8px; }

/* ══ Preise ═════════════════════════════════════════════════════════════
   Drei gleichwertige Karten — KEINE hervorgehobene Mitte. Der uebliche
   „am beliebtesten"-Trick setzt Zahlen voraus, die es noch nicht gibt.
   Die Karten tragen nur, was sie unterscheidet (Groesse + Preis); alles
   Gemeinsame steht einmal darunter. */
.tarife {
  margin-top: var(--space-2xl);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg);
}
.tarif {
  background: var(--c-card); border: var(--rule-hair) solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--space-lg);
  box-shadow: var(--shadow-s);
}
.tarif h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: -.015em;
}
.tarif__who { color: var(--c-ink-2); font-size: var(--text-sm); margin-top: 2px; }
.tarif__p {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: var(--space-md); padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--c-line);
}
.tarif__p strong {
  font-family: var(--font-display); font-weight: 700; font-size: 2.6rem;
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.tarif__p span { color: var(--c-ink-2); font-size: var(--text-sm); font-weight: 600; }
.tarif__pk { color: var(--c-ink-3); font-size: var(--text-xs); margin-top: 6px; }

/* Der Ueber-30-Fall ist bewusst KEINE vierte Karte: er ist kein vierter
   Tarif, sondern die Fortsetzung des dritten. Deshalb eine breite Zeile
   unter den Karten statt einer Spalte daneben. */
.tarif-plus {
  margin-top: var(--space-lg); padding: var(--space-lg);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-md) var(--space-xl);
  background: var(--c-card); border: var(--rule-hair) solid var(--c-line);
  border-radius: var(--r-lg);
}
.tarif-plus h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: -.015em;
}
.tarif-plus > div:first-child p {
  color: var(--c-ink-2); font-size: var(--text-sm); line-height: 1.55;
  margin-top: 4px; max-width: 46ch;
}
.tarif-plus__p { text-align: right; flex: none; }
.tarif-plus__p p { font-size: var(--text-sm); color: var(--c-ink-2); }
.tarif-plus__p strong {
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem;
  color: var(--c-ink); letter-spacing: -.02em;
}
.tarif-plus__p .tarif-plus__bsp {
  color: var(--c-ink-3); font-size: var(--text-xs); margin-top: 4px;
}

.inkl {
  margin-top: var(--space-lg); padding: var(--space-lg);
  background: var(--c-paper-2); border-radius: var(--r-lg);
}
.inkl__t { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); }
.inkl__l {
  list-style: none; margin-top: var(--space-md);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px var(--space-lg);
}
.inkl__l li {
  display: flex; align-items: flex-start; gap: 9px;
  color: var(--c-ink-2); font-size: var(--text-sm); line-height: 1.5;
}
.inkl__l .ico { color: var(--c-ok-ink); margin-top: 2px; }

.preis-cta { margin-top: var(--space-xl); text-align: center; }
.preis-cta__t {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-h3);
  letter-spacing: -.015em;
}
.preis-cta__p {
  color: var(--c-ink-2); font-size: var(--text-sm); line-height: 1.6;
  max-width: 52ch; margin: 8px auto var(--space-lg);
}
.preis-note {
  color: var(--c-ink-3); font-size: var(--text-xs); line-height: 1.7;
  max-width: 56ch; margin: var(--space-md) auto 0;
}

/* ══ FAQ ════════════════════════════════════════════════════════════════ */
.faq { margin-top: var(--space-2xl); border-top: var(--rule-hair) solid var(--c-line); }
.faq details { border-bottom: var(--rule-hair) solid var(--c-line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-lg) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  transition: color var(--dur-sm) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--c-accent); }
.faq summary:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; border-radius: var(--r-xs); }
.faq summary .ico { color: var(--c-ink-3); transition: transform var(--dur-md) var(--ease-out); }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq__a { color: var(--c-ink-2); font-size: var(--text-body); line-height: 1.65; max-width: 68ch; padding-bottom: var(--space-lg); }

/* ══ Kontakt ════════════════════════════════════════════════════════════
   Dieselbe Signatur wie die FAQ-Liste darueber (Haarlinien, kein Kasten):
   Der Abschnitt beantwortet dieselbe Art Frage und soll nicht wie ein
   Fremdkoerper wirken.

   Die Adresse steht RECHTS und in der Bedienfarbe — sie ist das, wonach
   jemand sucht, der bis hierher gescrollt hat. Auf schmalen Schirmen kippt
   die Zeile untereinander, sonst bricht eine lange Adresse mitten im Wort. */
.kontakt-liste {
  margin-top: var(--space-2xl); list-style: none; padding: 0;
  border-top: var(--rule-hair) solid var(--c-line);
}
.kontakt-liste li {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--space-xs) var(--space-lg);
  padding: var(--space-lg) 0;
  border-bottom: var(--rule-hair) solid var(--c-line);
}
.kontakt-liste__was {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  color: var(--c-ink);
}
.kontakt-liste a {
  color: var(--c-accent); text-decoration: none; font-size: var(--text-body);
  /* `anywhere` statt `break-word`: Eine Adresse ohne Leerzeichen sprengt
     sonst auf dem Handy die Zeile nach rechts hinaus. */
  overflow-wrap: anywhere;
  border-bottom: var(--rule-hair) solid transparent;
  transition: border-color var(--dur-sm) var(--ease-out);
}
.kontakt-liste a:hover { border-bottom-color: var(--c-accent); }
.kontakt-liste a:focus-visible {
  outline: 3px solid var(--c-focus); outline-offset: 3px; border-radius: 3px;
}

/* ══ Herkunft ═══════════════════════════════════════════════════════════
   Gleiche Signatur wie die Nummern-Kapitel (2px-Linie mit korallenem
   Anfangsstueck), aber zweispaltig: links Etikett + Ueberschrift, rechts
   Fliesstext. Damit ist der Abschnitt sofort als „anderer Ton" erkennbar,
   ohne ein neues Deko-Vokabular einzufuehren. */
.origin {
  display: grid; grid-template-columns: minmax(0, 31ch) minmax(0, 1fr);
  gap: var(--space-lg) clamp(32px, 6vw, 72px);
  border-top: 2px solid var(--c-ink); padding-top: var(--space-lg);
  position: relative;
}
.origin::before {
  content: ""; position: absolute; top: -2px; left: 0;
  width: 44px; height: 2px; background: var(--c-accent);
}
.origin__label {
  font-family: var(--font-display); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent-ink);
}
.origin__side h2 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em;
  font-size: var(--text-h2); line-height: 1.08; margin-top: var(--space-sm);
  overflow-wrap: anywhere; min-width: 0;
}
/* Das Bild steht in der linken Spalte unter der Überschrift und füllt den
   Platz, der dort vorher leer blieb. Am Handy fällt die Spalte weg und es
   rutscht zwischen Überschrift und Text — dort bewusst flacher zugeschnitten,
   damit es die Geschichte nicht auseinanderschiebt. */
.origin__bild {
  display: block; width: 100%; height: auto;
  margin-top: var(--space-lg);
  border-radius: var(--r-md);
  aspect-ratio: 3 / 2; object-fit: cover;
  /* Der eine Ton, der das Bild an die Marke bindet, ohne es einzufärben. */
  box-shadow: 0 1px 0 oklch(100% 0 0 / .6), 0 12px 32px oklch(20.5% 0.022 285 / .14);
}
@media (max-width: 860px) {
  .origin__bild { aspect-ratio: 21 / 9; margin-top: var(--space-md); }
}
.origin__body p { color: var(--c-ink-2); font-size: var(--text-body); line-height: 1.7; max-width: 62ch; }
.origin__body p + p { margin-top: var(--space-md); }
/* Die Signatur ist der Moment, in dem eine Person unterschreibt — deshalb
   dunkler als der Fliesstext und in der Display-Schrift. */
.origin__body .origin__sign {
  margin-top: var(--space-lg); font-family: var(--font-display); font-weight: 600;
  color: var(--c-ink); font-size: var(--text-sm);
}
.origin__facts {
  list-style: none; margin-top: var(--space-2xl);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl);
}
.origin__facts li { border-top: var(--rule-hair) solid var(--c-line-2); padding-top: var(--space-sm); }
.origin__facts strong {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: .98rem;
  letter-spacing: -.01em;
}
.origin__facts span {
  display: block; margin-top: 6px; color: var(--c-ink-2);
  font-size: var(--text-sm); line-height: 1.6;
}

/* ══ Abschluss-Band ═════════════════════════════════════════════════════ */
.closer {
  background: var(--c-deep); color: var(--c-on-deep);
  border-radius: var(--r-lg); padding: clamp(40px, 7vw, 72px) var(--space-lg);
  text-align: center; position: relative; overflow: hidden;
}
.closer::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--c-brandline);
}
.closer h2 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em;
  font-size: var(--text-h2); line-height: 1.08; max-width: 18ch; margin: 0 auto;
  overflow-wrap: anywhere;
}
.closer p { color: var(--c-on-deep-2); font-size: var(--text-lead); margin: var(--space-md) auto 0; max-width: 48ch; }
.closer .hero-z__cta { margin-top: var(--space-xl); }

/* ══ Ft1 · Mast-headed ══════════════════════════════════════════════════ */
.foot {
  border-top: var(--rule-hair) solid var(--c-line);
  margin-top: clamp(56px, 8vw, 96px); padding: var(--space-2xl) 0 var(--space-xl);
}
.foot__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-md) var(--space-2xl); }
.foot__tag { color: var(--c-ink-2); font-size: var(--text-sm); max-width: 44ch; }
.foot__links {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg);
  margin-top: var(--space-xl); font-size: var(--text-sm);
}
.foot__links a {
  color: var(--c-ink-2); text-decoration: none; white-space: nowrap;
  border-bottom: var(--rule-hair) solid transparent;
  transition: color var(--dur-sm) var(--ease-out), border-color var(--dur-sm) var(--ease-out);
}
.foot__links a:hover { color: var(--c-ink); border-bottom-color: var(--c-accent); }
.foot__links a:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; border-radius: 3px; }
.foot__legal { margin-top: var(--space-lg); color: var(--c-ink-3); font-size: var(--text-xs); }

/* ══ Rechtstext-Seiten ══════════════════════════════════════════════════ */
.legal { padding: clamp(112px, 16vh, 156px) 0 0; }
.legal__inner { max-width: 72ch; }
.legal h1 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.028em;
  font-size: clamp(2rem, 4.4vw, 2.9rem); line-height: 1.06; overflow-wrap: anywhere;
}
.legal__sub { color: var(--c-ink-2); font-size: var(--text-lead); margin-top: var(--space-sm); }
.legal h2 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.018em;
  font-size: 1.32rem; line-height: 1.2; margin: var(--space-2xl) 0 var(--space-sm);
  padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--c-line);
}
.legal h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin: var(--space-lg) 0 6px; }
.legal p, .legal li { color: var(--c-ink-2); line-height: 1.7; }
.legal p { margin-top: var(--space-sm); }
.legal ul { margin: var(--space-sm) 0 0 1.15rem; display: grid; gap: 6px; }
.legal strong, .legal b { color: var(--c-ink); font-weight: 600; }
.legal a { color: var(--c-accent-2); text-decoration: underline; text-underline-offset: 2px; }
.legal address { font-style: normal; color: var(--c-ink); line-height: 1.75; margin-top: var(--space-sm); }
.legal table {
  width: 100%; border-collapse: collapse; margin-top: var(--space-md); font-size: var(--text-sm);
}
.legal th, .legal td {
  text-align: left; padding: 10px 12px; border-bottom: var(--rule-hair) solid var(--c-line);
  vertical-align: top;
}
.legal th { font-weight: 600; color: var(--c-ink); background: var(--c-paper-2); }
.legal .table-scroll { overflow-x: auto; margin-top: var(--space-md); }
.legal .table-scroll table { margin-top: 0; }
.legal code { font-size: .92em; background: var(--c-paper-3); padding: 1px 6px; border-radius: 5px; }

/* Platzhalter sichtbar machen — sie MUESSEN vor dem Livegang ersetzt werden */
/* Textfarbe ist --c-accent-ink, nicht --c-accent-d: auf der hellen Toenung
   kommt das dunklere Rot auf 4.5:1, das hellere reisst mit 3.64 unter AA.
   Beim Kontrast-Messlauf der Preis-Sektion gefunden — betraf auch alle
   Platzhalter in Impressum, Datenschutz und AGB. */
/* Platzhalter-Chip. KEIN white-space: nowrap — der Umsatzsteuer-Hinweis unter
   den Preisen ist laenger als ein Handy breit ist und wurde dadurch am Rand
   abgeschnitten. Er darf umbrechen; box-decoration-break sorgt dafuer, dass
   Rahmen und Hintergrund an jeder Zeile sauber gezeichnet werden. */
.ph {
  background: var(--c-accent-t); color: var(--c-accent-ink); font-weight: 600;
  padding: 1px 7px; border-radius: 5px;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  border: var(--rule-hair) dashed color-mix(in oklch, var(--c-accent) 40%, transparent);
}

/* Hinweis-/Entwurfskasten */
.note {
  border: var(--rule-hair) solid var(--c-line-2); border-left: 3px solid var(--c-accent);
  background: var(--c-card); border-radius: var(--r-sm);
  padding: var(--space-md) var(--space-lg); margin-top: var(--space-lg);
}
.note p { margin-top: 6px; font-size: var(--text-sm); }
.note p:first-child { margin-top: 0; }
.note__t { font-family: var(--font-display); font-weight: 600; color: var(--c-ink); font-size: var(--text-sm); }

/* ══ Auth-Modal (setzt auf styles.css auf) ══════════════════════════════ */
.link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--c-accent-2); font-family: var(--font-body); font-size: var(--text-sm);
  margin-top: var(--space-sm); text-decoration: underline; text-underline-offset: 2px;
}
.link-btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: 4px; }
.auth-sub { color: var(--c-ink-2); font-size: var(--text-sm); margin: -2px 0 var(--space-md); }
.auth-note {
  color: var(--c-ink-2); font-size: var(--text-sm); margin-top: var(--space-md);
  padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--c-line);
}
.setup-hint { color: var(--c-ink-3); font-size: var(--text-xs); margin-top: 10px; text-align: center; }
.hero-stage .setup-hint { color: var(--c-on-deep-2); font-size: var(--text-sm); }
#auth-modal .field {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-sm);
  font-size: var(--text-xs); font-weight: 600;
}

/* ══ Responsive ═════════════════════════════════════════════════════════ */
/* Unter 1200 px ist neben der Ueberschrift kein Platz mehr fuer zwei Kacheln.
   Frueher verschwand das Geister-UI hier ganz — am Handy sah man von der
   Stempeluhr also nichts, obwohl gerade dort die meisten Besucher landen.
   Jetzt bleibt EINE Kachel, mittig hinter dem Text, deutlich schwaecher:
   Der Text liegt darueber und muss lesbar bleiben, die Andeutung genuegt. */
/* 🔴 Unter 1200 px ist die Geister-UI GANZ weg.
   Vorher blieb hier eine Kachel „mittig hinter dem Text" bei 55 % Deckkraft.
   Gemessen am 2026-08-19 bei 390 px: Sie lag über der Überschrift — „00:00:00"
   und die grauen Balken schienen durch H1 und Subtext. Das liest sich nicht
   als Andeutung, sondern als Darstellungsfehler.

   Der Kommentar am Block oben behauptete das Ausblenden schon („unter 1200 px
   komplett ausgeblendet") — die Umsetzung war davon abgedriftet. Jetzt stimmen
   beide überein.

   Deko hinter Text ist außerdem genau die Grenze, die der Design-Standard
   zieht: Bewegung und Deko dürfen teuer sein, aber nie mit dem Text
   konkurrieren. Auf schmalen Schirmen gibt es neben der Überschrift keinen
   Platz — dort trägt der dunkle Grund allein. */
@media (max-width: 1200px) {
  .hero-ghost { display: none; }
}
/* Der frühere 380-px-Block ist entfallen: Er verkleinerte die Geister-Kachel
   für sehr schmale Geräte — die es dort gar nicht mehr gibt. */
@media (max-width: 940px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell--2x2, .cell--2x1 { grid-column: span 2; }
  .cell--2x2, .cell--1x2 { grid-row: span 1; }
  .rail { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .origin { grid-template-columns: minmax(0, 1fr); }
  /* Untereinander gestapelt sah die erste Fakten-Linie wie eine weitere
     Listenlinie aus — die Signatur ging in die Fakten ueber. Die Liste
     bekommt deshalb ihre EIGENE Trennlinie mit Luft; die des ersten
     Eintrags entfaellt dafuer, sonst stuenden zwei Linien uebereinander. */
  .origin__facts {
    grid-template-columns: minmax(0, 1fr); gap: var(--space-lg);
    margin-top: var(--space-xl); padding-top: var(--space-xl);
    border-top: var(--rule-hair) solid var(--c-line);
  }
  .origin__facts li:first-child { border-top: none; padding-top: 0; }
  .tarife { grid-template-columns: minmax(0, 1fr); }
  .inkl__l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Gestapelt wandert der Preis nach links unter den Text — rechtsbuendig
     haengt er sonst allein in der Luft. */
  .tarif-plus__p { text-align: left; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .cell--2x2, .cell--2x1 { grid-column: span 1; }
  .wrap { padding-inline: var(--space-md); }
  .nav-pill { gap: var(--space-xs); padding: 6px 6px 6px 14px; }
  .nav-pill .mark { font-size: .98rem; }
  .btn-z { --pad: 9px 14px; font-size: .88rem; }
  .btn-z--lg { --pad: 13px 20px; font-size: .95rem; }
  .hero-z__cta .btn-z { flex: 1 1 auto; }
  .foot__top { flex-direction: column; gap: var(--space-xs); }
  .inkl__l { grid-template-columns: minmax(0, 1fr); }
  .preis-cta .btn-z { width: 100%; }
  /* Der Ablauf stapelt sich — dann zeigen die Pfeile nach unten, nicht nach rechts */
  .vig-flow { flex-direction: column; align-items: stretch; }
  .vig-flow .flow-arrow { align-self: center; transform: rotate(90deg); }
}
@media (max-width: 400px) {
  /* „Firma einrichten" steht im Hero — in der schmalen Pille reicht „Anmelden" */
  #nav-setup { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-z, .faq summary, .faq summary .ico, .foot__links a { transition: none; }
}

/* ══ Einblenden beim Scrollen (2026-09-03) ══════════════════════════════════
   Regler MOTION 4: 14 px aufsteigen und sichtbar werden, 420 ms, benannte
   Kurve. Kein `transition: all` (das würde auch Farbe und Layout mitziehen),
   nur die beiden Eigenschaften, die der Browser ohne Umbruch zeichnen kann.

   Der Riegel steht am <html>: `data-motion="an"` setzt js/landing.js selbst,
   direkt bevor es das Beobachten einrichtet. Ohne JavaScript — oder wenn die
   Datei stürzt — greift die Regel nie und alles steht sofort da.

   `prefers-reduced-motion` ist doppelt abgesichert: das Skript richtet dann
   gar nichts erst ein, und die Regel unten hebt es zusätzlich auf. Wer
   Bewegung abstellt, hat dafür meist einen guten Grund. */
[data-motion="an"] .enthuellen {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-lg) var(--ease-out),
              transform var(--dur-lg) var(--ease-out);
}
[data-motion="an"] .enthuellen.sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-motion="an"] .enthuellen {
    opacity: 1; transform: none; transition: none;
  }
}

/* ══ Bildschirmfotos der App (2026-09-04) ═══════════════════════════════════
   Ein Screenshot muss LESBAR sein, sonst ist er Dekoration — und genau daran
   ist der erste Entwurf gescheitert: Zwei Aufnahmen nebeneinander wurden bei
   1440 px Fensterbreite **568 px** breit dargestellt. Die Quelle ist 1440 px
   Inhaltsbreite; aus 14-px-Schrift werden dabei 5,5 px. Gemessen, nicht
   geschätzt.

   Deshalb steht jede Aufnahme über die volle Spaltenbreite (1160 px bei einem
   1440er Fenster, also gut 80 % der Originalgröße). Der Abschnitt wird dadurch
   länger — das ist der Preis dafür, dass man die Zahlen wirklich lesen kann.

   Die Bilder tragen einen hellen Untergrund wie die Seite selbst. Ohne Rahmen
   würden sie ins Papier ausfransen; die Haarlinie plus ein flacher Schatten
   sagt „das ist ein Bildschirm", ohne einen Fake-Browserrahmen zu bauen (den
   verbietet der Standard ausdrücklich). */
.ansicht__hinweis {
  display: block; margin-top: 6px;
  font-size: var(--text-sm); color: var(--c-ink-3);
}
.ansichten {
  display: grid; gap: var(--space-2xl);
  grid-template-columns: minmax(0, 1fr);
}
.ansicht { margin: 0; min-width: 0; }
.ansicht img {
  display: block; width: 100%; height: auto;
  border: var(--rule-hair) solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-card);
  box-shadow: 0 18px 44px -28px oklch(23% 0.018 285 / .5);
}
.ansicht figcaption {
  margin-top: var(--space-sm);
  color: var(--c-ink-2); font-size: var(--text-sm); line-height: 1.6;
  max-width: 54ch;
}
.ansicht figcaption b { color: var(--c-ink); font-weight: 600; }