/* Atone, Landing Page — Design „Hanko".
   Japanische Stille: Papier, Sumi-Schwarz, ein roter Stempel pro gehaltenem Tag.
   Rot ist Stempelfarbe und trägt zusätzlich die eine Pointe im Claim.
   Keine Serifen, keine zweite Schrift:
   die System-Sans in leichten Schnitten, viel Leerraum, Haarlinien. */

:root {
  --paper: #F9F7F1;
  --stone: #ECE9E1;
  --sumi: #26241F;
  --vermilion: #D8402C;
  --ash: #A8A49A;

  --bg: var(--paper);
  --surface: var(--stone);
  --text: var(--sumi);
  --text-soft: #4C4941;
  --text-faint: var(--ash);
  /* Label-Ton für Überzeilen, Klauselnummern, Legende, Sprachwahl und Fußzeile.
     Asche liegt auf Papier bei 2,32:1 und fällt für kleinen Text durch WCAG AA.
     Dieser Wert erreicht 5,34:1 auf Papier und 4,71:1 auf der Steinfläche,
     bleibt aber deutlich leiser als Fließtext (8,39:1).
     Asche bleibt für rein Dekoratives: Rahmen, Trennstriche, leere Felder. */
  --label: #6B665A;
  --hairline: #E8E5DC;
  --cell: #D5D0C4;       /* leere Lebensfelder, gestrichelte Ränder */
  --cell-past: #E4E0D5;  /* vergangene Lebensfelder */
  --card-shadow: 0 1px 2px rgba(38, 36, 31, 0.04), 0 10px 30px rgba(38, 36, 31, 0.05);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 13px;
  /* Höhe beider Abzeichen im Hero. Sie müssen auf einer Linie stehen,
     also folgt der Product-Hunt-Badge derselben Zahl wie unser eigenes. */
  --badge-h: 50px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-gap: clamp(4rem, 9vw, 7rem);
}

/* Dark Mode: Sumi-Grund, Papier-Text. Der Stempel bleibt zinnoberrot mit
   papierweißem Innenrahmen — seine Farben sind deshalb literal gesetzt,
   nicht über Variablen. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #26241F;
    --surface: #2D2A24;
    --text: #F9F7F1;
    --text-soft: #C9C4B8;
    --text-faint: #8F8B80;
    /* 5,33:1 auf dem Sumi-Grund, 4,91:1 auf der dunklen Fläche. */
    --label: #9C978B;
    --hairline: #3A372E;
    --cell: #4A463C;
    --cell-past: #35322A;
    --card-shadow: none;
  }
}

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* height: auto ist Pflicht, sobald width/height als Attribute gesetzt sind:
   Ohne die Regel schrumpft nur die Breite und die Höhe bleibt beim Attributwert
   stehen, das Bild wird also vertikal gestreckt. */
img { max-width: 100%; height: auto; display: block; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--text-faint);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--vermilion); text-decoration-color: var(--vermilion); }

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

.wrap {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--gutter);
  top: 1rem;
  z-index: 10;
  background: var(--text);
  color: var(--bg);
  padding: 0.6rem 1rem;
  border-radius: 8px;
}

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

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.6rem;
}

.wordmark {
  font-size: 1.15rem;
  font-weight: 550;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
}
/* Der Mini-Stempel neben der Wortmarke: das Signatur-Element im Kleinsten. */
.wordmark::after {
  content: "";
  display: inline-block;
  width: 0.44em;
  height: 0.44em;
  margin-left: 0.42em;
  background: var(--vermilion);
  border-radius: 26%;
  transform: rotate(-3deg);
}

.lang {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lang a, .lang span {
  padding: 0.3rem 0.5rem;
  text-decoration: none;
  color: var(--label);
}
.lang a:hover { color: var(--text); }
.lang [aria-current="true"] { color: var(--text); }
.lang .sep { color: var(--hairline); padding-inline: 0; }

/* ---------- Eyebrow, überall als Strukturmarke ---------- */

.eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--label);
  margin: 0 0 1.1rem;
}

/* ---------- Der Hanko-Stempel ---------- */

.hanko {
  --hanko-size: 52px;
  width: var(--hanko-size);
  height: var(--hanko-size);
  border-radius: 22%;
  background: var(--vermilion);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transform: rotate(-3deg);
}
.hanko::before {
  content: "";
  position: absolute;
  inset: 7%;
  border: 2px solid rgba(249, 247, 241, 0.92);
  border-radius: 15%;
}
.hanko > span {
  color: #F9F7F1;
  font-size: calc(var(--hanko-size) * 0.44);
  font-weight: 600;
  line-height: 1;
}

/* Der leere Platz von heute: noch kein Abdruck, nur die Kontur. */
.hanko--today {
  background: transparent;
  border: 1.5px solid var(--text);
  transform: none;
}
.hanko--today::before { display: none; }
.hanko--today > span {
  color: var(--text);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.hanko--hero { --hanko-size: 56px; margin-bottom: 1.8rem; }

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

.hero {
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.hero h1 {
  font-weight: 250;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 1.1rem;
  max-width: 18ch;
  text-wrap: balance;
}

.hero__claim {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 350;
  margin: 0 0 1.3rem;
  max-width: 40ch;
  text-wrap: balance;
}
/* Die Pointe trägt Zinnober wie in der App. Asche lag hier unter 3:1 und
   fiel damit auch für große Schrift durch die Kontrastprüfung. */
.hero__claim .weak { color: var(--vermilion); }

.hero__body {
  max-width: 46ch;
  color: var(--text-soft);
  font-size: clamp(1.03rem, 1.5vw, 1.15rem);
  margin: 0 0 2.4rem;
}

/* Unklassifizierte Hero-Absätze (Impact-Seite) erben denselben Ton. */
.hero p:not([class]) {
  max-width: 46ch;
  color: var(--text-soft);
  font-size: clamp(1.03rem, 1.5vw, 1.15rem);
  margin: 0;
}

/* Unser eigenes Abzeichen, nicht Apples Grafik.
   Apples „Download on the App Store" darf erst gezeigt werden, wenn die App im
   Store steht, und niemals nachgebaut, gedreht, gefärbt oder animiert werden.
   Deshalb hier ein rein typografisches Abzeichen im Hanko-Ton: Fläche Sumi,
   Schrift Papier, im Dark Mode invertiert. Kein Apple-Logo, kein Glyph, keine
   Anlehnung an die Form der Originalgrafik.
   Mindesthöhe 48px auf Mobil, 56 bis 64px auf dem Desktop; der Freiraum
   ringsum (Abstand nach oben, Sektionsluft nach unten) hält mindestens ein
   Viertel der Abzeichenhöhe. „App Store" bleibt in jeder Sprache unübersetzt. */
/* Abzeichen-Zeile: App Store und Product Hunt nebeneinander, auf schmalen
   Schirmen untereinander.

   Der Abstand ist nicht frei gewählt. Apples Marketing-Richtlinie verlangt
   ringsum einen Freiraum von mindestens einem Viertel der Abzeichenhöhe; bei
   `--badge-h: 62px` auf großen Schirmen sind das 15,5px, und 0.9rem (14,4px)
   lagen knapp darunter. 1rem trägt alle drei Stufen. */
.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* Product Hunt liefert das Abzeichen selbst aus, weil es die aktuelle Zahl
   der Empfehlungen trägt. Damit ist es das einzige Bild der Seite von einem
   fremden Server — die Datenschutzerklärung nennt es deshalb ausdrücklich.
   Hell und dunkel kommen aus derselben URL (`theme=`); ein <picture> mit
   prefers-color-scheme wählt aus, das braucht hier kein CSS. */
.badge-ph {
  display: inline-flex;
  text-decoration: none;
  transition: transform 0.18s ease;
}
.badge-ph:hover { transform: translateY(-1px); }
.badge-ph:active { transform: translateY(0); }
.badge-ph img { display: block; height: var(--badge-h); width: auto; }

/* Apples Abzeichen. Bewusst ohne eigene Formgebung: kein Radius, kein Schatten,
   keine Farbe. Die Grafik bringt ihre Form selbst mit, und sie zu ergänzen wäre
   bereits eine Veränderung im Sinne der Richtlinie. */
.badge-as {
  display: inline-flex;
  text-decoration: none;
  transition: transform 0.18s ease;
}
.badge-as:hover { transform: translateY(-1px); }
.badge-as:active { transform: translateY(0); }
.badge-as img { display: block; height: var(--badge-h); width: auto; }

/* Im Dunkelmodus bekommt es einen Papier-Träger. Apple liefert das Abzeichen
   hier in Schwarz, und Schwarz auf Sumi ist praktisch unsichtbar; die weiße
   Variante läge als eigene Datei bei Apple, umfärben dürfen wir nicht.

   Das Polster ist bewusst klein und ersetzt NICHT den geforderten Freiraum —
   den leistet der `gap` der Abzeichen-Zeile. Ein Viertel der Höhe als Padding
   machte den Träger anderthalbmal so hoch wie das Abzeichen daneben. */
@media (prefers-color-scheme: dark) {
  .badge-as {
    background: var(--paper);
    border-radius: 10px;
    padding: 5px 9px;
  }
}

.badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: var(--badge-h);
  background: var(--text);
  color: var(--bg);
  border-radius: 13px;
  box-shadow: var(--card-shadow);
  padding: 0.62rem 1.4rem 0.7rem;
  line-height: 1.15;
  text-decoration: none;
  transition: transform 0.18s ease;
}
.badge:hover { color: var(--bg); transform: translateY(-1px); }
.badge:active { transform: translateY(0); }
.badge__pre {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
}
.badge__store {
  font-size: 1.15rem;
  font-weight: 550;
  letter-spacing: 0.005em;
}

/* ---------- Sektionen ---------- */

.section { padding-block: var(--section-gap); }
.section--tight { padding-block: calc(var(--section-gap) * 0.62); }

.section h2 {
  font-weight: 300;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 1.3rem;
  max-width: 24ch;
  text-wrap: balance;
}

.lede {
  max-width: 52ch;
  color: var(--text-soft);
  margin: 0 0 1rem;
}
.lede:last-child { margin-bottom: 0; }

/* ---------- Die Rechnung: das Leben in achtzig Feldern ---------- */

.life {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: clamp(5px, 1.2vw, 7px);
  max-width: 30rem;
  margin-top: 2.2rem;
}
.life i {
  display: block;
  aspect-ratio: 1;
  border-radius: 3px;
  border: 1px solid var(--cell);
}
.life i.p { background: var(--cell-past); border-color: var(--cell-past); }
.life i.t { border: 1.5px solid var(--text); }
.life i.f { background: var(--vermilion); border-color: var(--vermilion); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin-top: 1rem;
}
.legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--label);
}
.legend .lg i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid var(--cell);
}
.legend .lg i.p { background: var(--cell-past); border-color: var(--cell-past); }
.legend .lg i.t { border: 1.5px solid var(--text); }
.legend .lg i.f { background: var(--vermilion); border-color: var(--vermilion); }

.life__line {
  max-width: 44ch;
  color: var(--text-soft);
  margin: 1.6rem 0 0;
}

/* ---------- Klauseln ---------- */

.clauses {
  list-style: none;
  margin: clamp(1.8rem, 4vw, 2.6rem) 0 0;
  padding: 0;
  max-width: 46rem;
  border-top: 1px solid var(--hairline);
}
.clauses li {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 0.5rem 1rem;
  align-items: baseline;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--hairline);
}
.clauses .no {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--label);
  font-variant-numeric: tabular-nums;
}
.clauses strong {
  display: block;
  font-weight: 550;
  font-size: clamp(1.08rem, 2vw, 1.25rem);
  letter-spacing: -0.005em;
  margin-bottom: 0.35rem;
}
.clauses p { margin: 0; color: var(--text-soft); font-size: 1rem; }

/* ---------- Die App selbst ----------
   Echte Screenshots, ohne nachgebautes iPhone drumherum: Apple erlaubt für
   Gerätedarstellungen nur seine eigenen Produktbilder, und ein gezeichneter
   Rahmen wäre ein Nachbau. Ein Bildschirm mit gerundeten Ecken sagt ohnehin
   genug — und passt besser zur Stille der Seite. */

.screens {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2.4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.screen { margin: 0; }

.screen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(14px, 3vw, 26px);
  border: 1px solid var(--hairline);
  box-shadow: var(--card-shadow);
  /* Bis das Bild geladen ist steht hier die Fläche statt eines Lochs. */
  background: var(--surface);
}

.screen figcaption {
  margin-top: 0.85rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--label);
  text-wrap: balance;
}

/* Schmal: nebeneinander wären die Screens unlesbar klein. Stattdessen eine
   Reihe zum Wischen, die einrastet. Der Zuschlag rechts/links hebt die
   Randabstände des Wrappers auf, damit die Reihe bis an den Rand läuft und
   nicht abgeschnitten wirkt. */
@media (max-width: 45rem) {
  .screens {
    grid-template-columns: none;
    grid-auto-flow: column;
    /* Feste Breite, kein minmax(0, …): Mit 0 als Minimum dürfen die Spalten
       schrumpfen, und dann passen doch wieder alle drei nebeneinander —
       genau das, was die Wisch-Reihe verhindern soll. */
    grid-auto-columns: 72%;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .screens::-webkit-scrollbar { display: none; }
  .screen { scroll-snap-align: start; }
}

/* ---------- Die Stempelreihe ---------- */

.band {
  background: var(--surface);
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
  text-align: center;
}

.stamp-row {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 1.6vw, 12px);
}
.stamp-row .hanko { --hanko-size: clamp(32px, 9.5vw, 48px); }
.stamp-row .hanko:nth-child(even) { transform: rotate(2deg); }
.stamp-row .hanko:nth-child(3) { transform: rotate(-1.5deg); }
.stamp-row .hanko--today { transform: none; }

/* Die eine Bewegung der Seite: der jüngste Stempel setzt sich beim Laden.
   Die End-Rotation entspricht der statischen nth-child(even)-Regel. */
.hanko--settle {
  animation: settle 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) 0.45s both;
}
@keyframes settle {
  0%   { transform: scale(1.7) rotate(7deg); opacity: 0; }
  62%  { transform: scale(0.95) rotate(0deg); opacity: 1; }
  100% { transform: scale(1) rotate(2deg); opacity: 1; }
}

.band__line {
  max-width: 40ch;
  margin: 2rem auto 0;
  color: var(--text-soft);
  text-wrap: balance;
}

/* ---------- Klartext ---------- */

.plain {
  display: grid;
  gap: 1.1rem;
  max-width: 52ch;
  margin-top: 1.6rem;
}
.plain p { margin: 0; color: var(--text-soft); }

/* ---------- Die Zahlen (Impact-Seite) ---------- */

.arithmetic {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-block: clamp(2.2rem, 5vw, 3.4rem);
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}

.figure__value {
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  display: block;
}
.figure__label {
  display: block;
  margin-top: 0.7rem;
  /* Fließtext, deshalb Sumi-weich statt Asche: Asche auf Papier liegt bei
     2,3:1 und ist für Text nicht lesbar genug. */
  color: var(--text-soft);
  font-size: 0.95rem;
  max-width: 24ch;
}

/* ---------- Noch nicht im Store (Folgen) ---------- */

.promise { padding-block: var(--section-gap); }

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: clamp(2.2rem, 5.5vw, 3.4rem);
  max-width: 38rem;
  margin-inline: auto;
  text-align: center;
}
.card .hanko { margin-bottom: 1.5rem; }

.card__title {
  font-weight: 300;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  letter-spacing: -0.005em;
  margin: 0 0 0.6rem;
}
.card__body {
  margin: 0 auto 1.8rem;
  max-width: 36ch;
  color: var(--text-soft);
}

.btn {
  display: inline-block;
  font-size: 1rem;
  font-weight: 500;
  color: var(--bg);
  background: var(--text);
  border: 0;
  border-radius: var(--radius);
  padding: 0.9rem 1.7rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease;
}
.btn:hover { color: var(--bg); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.fineprint {
  margin: 1.5rem 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  /* Klein, aber echter Text: auf der Steinfläche wäre Asche noch schwächer
     als auf Papier. */
  color: var(--text-soft);
}

/* ---------- Rechtstexte ---------- */

.prose {
  max-width: 44rem;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section-gap);
}
.prose h1 {
  font-weight: 250;
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  letter-spacing: -0.01em;
  margin: 0 0 2rem;
}
.prose h2 {
  font-weight: 550;
  font-size: 1.2rem;
  margin: 2.5rem 0 0.7rem;
}
.prose p, .prose li { color: var(--text-soft); }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.5rem; }
.prose strong { color: var(--text); font-weight: 550; }
.prose address { font-style: normal; color: var(--text-soft); }

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

.foot {
  border-top: 1px solid var(--hairline);
  padding-block: 2.5rem 3.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: var(--label);
}
.foot nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.foot a { color: var(--label); text-decoration: none; }
.foot a:hover { color: var(--text); text-decoration: underline; text-decoration-color: currentColor; }

/* ==========================================================================
   Breite Schirme.
   Alles oberhalb dieser Linie ist die abgenommene mobile Ansicht und bleibt
   unberührt. Der Desktop entsteht in drei Stufen: 45rem (720px, Tablet und
   kleiner Laptop), 64rem (1024px, Desktop), 87.5rem (1400px, große Schirme).
   Stufen in rem, damit sie mit der Schriftgröße des Nutzers wandern.
   ========================================================================== */

/* ---------- Stufe 1, ab 720px: mehr Luft, größere Grade ---------- */

@media (min-width: 45rem) {
  :root {
    --gutter: clamp(2rem, 4.5vw, 3.25rem);
    --section-gap: clamp(5rem, 8vw, 8rem);
  }

  body { font-size: 1.09rem; }

  .masthead { padding-block: 2.1rem; }
  .wordmark { font-size: 1.22rem; }
  .lang { font-size: 0.75rem; }

  .hero { padding-block: clamp(3.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
  .hanko--hero { --hanko-size: 66px; margin-bottom: 2.1rem; }

  .hero h1 {
    font-size: clamp(3.4rem, 6.6vw, 4.3rem);
    max-width: 17ch;
    margin-bottom: 1.3rem;
  }
  .hero__claim {
    font-size: clamp(1.35rem, 2.4vw, 1.6rem);
    max-width: 32ch;
    margin-bottom: 1.5rem;
  }
  .hero__body, .hero p:not([class]) { font-size: 1.14rem; max-width: 48ch; }
  .hero__body { margin-bottom: 2.7rem; }

  :root { --badge-h: 58px; }
  .badge { padding: 0.8rem 1.6rem 0.85rem; }
  .badge__pre { font-size: 0.64rem; }
  .badge__store { font-size: 1.24rem; }

  .section h2 { font-size: clamp(2.2rem, 3.8vw, 2.9rem); margin-bottom: 1.5rem; }
  .lede { max-width: 62ch; margin-bottom: 1.15rem; }

  .life { max-width: 32rem; gap: clamp(6px, 0.9vw, 8px); }
  .life i { border-radius: 4px; }
  .life__line { max-width: 52ch; }
  .legend { gap: 0.5rem 1.4rem; margin-top: 1.2rem; }
  .legend .lg { font-size: 0.76rem; }

  .clauses li { grid-template-columns: 4rem 1fr; padding-block: 1.9rem; }
  .clauses strong { font-size: clamp(1.15rem, 1.8vw, 1.3rem); }
  .clauses p { font-size: 1.06rem; }

  .band { padding-block: clamp(5rem, 8vw, 7rem); }
  .stamp-row { gap: clamp(12px, 1.5vw, 16px); }
  .stamp-row .hanko { --hanko-size: clamp(46px, 5.2vw, 60px); }
  .band__line { font-size: 1.14rem; max-width: 44ch; margin-top: 2.6rem; }

  .plain { max-width: 62ch; gap: 1.25rem; margin-top: 2rem; }

  .arithmetic { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .figure__label { font-size: 1rem; max-width: 26ch; }

  .card { max-width: 40rem; padding: clamp(2.8rem, 5vw, 3.8rem); }
  .card .hanko { --hanko-size: 60px; margin-bottom: 1.7rem; }
  .card__title { font-size: clamp(1.75rem, 3vw, 2.2rem); }
  .card__body { font-size: 1.12rem; max-width: 32ch; margin-bottom: 2rem; }
  .btn { font-size: 1.05rem; padding: 1rem 1.9rem; }
  .fineprint { font-size: 0.88rem; }

  /* Rechtstexte: die ganze Seitenspalte wird schmal, Kopf und Fuß mit ihr.
     So bleibt die Zeile lesbar (etwa 68 Zeichen) und die Seite wirkt als
     gesetztes Dokument statt als linksbündiger Rest auf leerer Fläche. */
  body:has(.prose) .wrap { max-width: 46.5rem; }
  .prose {
    max-width: none;
    padding-block: clamp(3rem, 6vw, 4.5rem) var(--section-gap);
  }
  .prose h1 { font-size: clamp(2.4rem, 4.5vw, 3rem); margin-bottom: 2.4rem; }
  .prose h2 { font-size: 1.28rem; margin-top: 3rem; }

  .foot { font-size: 0.92rem; padding-block: 3rem 4rem; }
  .foot nav { gap: 2rem; }
}

/* ---------- Stufe 2, ab 1024px: zweispaltige Komposition ---------- */

@media (min-width: 64rem) {
  :root {
    --gutter: clamp(3rem, 4vw, 4rem);
    --section-gap: clamp(7rem, 8vw, 9rem);
  }

  body { font-size: 1.125rem; }

  /* Der Hero wird zweispaltig: der Text links, der Stempel als großer
     Abdruck rechts. Nur die Startseiten haben diesen Stempel, die
     Unterseiten bleiben deshalb einspaltig. */
  .hero:has(.hanko--hero) {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 5vw, 5.5rem);
    padding-block: clamp(4rem, 6.5vw, 6.5rem) clamp(3rem, 5vw, 4.5rem);
  }
  .hero:has(.hanko--hero) > * { grid-column: 1; }
  /* Ein Grid-Item würde sich sonst über die ganze Spalte ziehen. */
  :root { --badge-h: 62px; }
  .hero .badges { justify-self: start; }
  .hero .badge { padding: 0.85rem 1.75rem 0.9rem; }
  .hero .badge__store { font-size: 1.32rem; }
  .hero .hanko--hero {
    grid-area: 1 / 2 / span 10 / auto;
    align-self: center;
    justify-self: center;
    --hanko-size: clamp(9rem, 11vw, 12rem);
    margin: 0;
  }
  /* Die Haarlinie im Stempel wächst mit, sonst verschwindet sie im Großen. */
  .hero .hanko--hero::before { border-width: 3px; }

  .hero h1 { font-size: clamp(3.5rem, 4.8vw, 4.7rem); }
  .hero__claim { font-size: clamp(1.5rem, 1.9vw, 1.75rem); max-width: 30ch; }
  .hero__body, .hero p:not([class]) { font-size: 1.19rem; max-width: 44ch; }
  /* Unterseiten: der Titel bleibt eine Stufe leiser als die Startseite. */
  .hero:not(:has(.hanko--hero)) h1 { font-size: clamp(2.9rem, 3.8vw, 3.6rem); }

  .section h2 { font-size: clamp(2.5rem, 3.4vw, 3.15rem); }

  /* Die Rechnung wird zweispaltig: die Aussage links, der Beleg rechts.
     Die Überzeile läuft als Sektionsmarke über beide Spalten, darunter
     beginnen Überschrift und Raster auf derselben Oberkante. Die Hülle
     .bill__grid im HTML ist dafür nötig: ohne sie müsste ein Element über
     mehrere Zeilen greifen und würde die linke Spalte auseinander ziehen. */
  .section:has(> .bill__grid) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(22rem, 30vw, 29rem));
    column-gap: 0;
    align-items: start;
  }
  .section:has(> .bill__grid) > .eyebrow { grid-area: 1 / 1 / auto / span 2; }
  /* Die Aussage darf hier größer stehen als die übrigen Zwischentitel,
     sie trägt die linke Spalte allein. */
  .section:has(> .bill__grid) > h2 {
    grid-area: 2 / 1;
    font-size: clamp(2.6rem, 3.9vw, 3.6rem);
    margin-bottom: 0;
    padding-right: clamp(2rem, 3.5vw, 3.5rem);
  }
  /* Die Haarlinie bindet die beiden Spalten zusammen, damit die Leerfläche
     unter der Überschrift als Rand gelesen wird und nicht als Loch. */
  .section:has(> .bill__grid) > .bill__grid {
    grid-area: 2 / 2;
    border-left: 1px solid var(--hairline);
    padding-left: clamp(2rem, 3.5vw, 3.5rem);
  }
  /* Die Oberkante der ersten Zellenreihe auf die Versalhöhe der Überschrift
     ziehen, sonst sitzt das Raster optisch zu hoch. */
  .bill__grid { margin-top: 0.55rem; }
  .bill__grid .life { margin-top: 0; max-width: none; }
  .bill__grid .life__line { max-width: none; margin-top: 1.8rem; }

  /* Drei Klauseln, drei Spalten. Die Nummer setzt sich über den Titel,
     senkrechte Haarlinien trennen sie wie Spalten eines Dokuments.
     auto-fit hält die Impact-Seite mit ihren zwei Partnern zweispaltig. */
  .clauses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    column-gap: 0;
    max-width: none;
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
  }
  .clauses li {
    display: block;
    padding-block: 2.1rem 2.3rem;
  }
  .clauses li:not(:last-child) { padding-inline-end: clamp(1.6rem, 2.6vw, 2.6rem); }
  .clauses li + li {
    border-left: 1px solid var(--hairline);
    padding-inline-start: clamp(1.6rem, 2.6vw, 2.6rem);
  }
  .clauses .no { display: block; margin-bottom: 1.15rem; }
  .clauses strong { margin-bottom: 0.5rem; }
  .clauses p { font-size: 1.08rem; }

  .band { padding-block: clamp(6.5rem, 9vw, 9rem); }
  .stamp-row { gap: clamp(14px, 1.3vw, 18px); }
  .stamp-row .hanko { --hanko-size: clamp(56px, 4.6vw, 66px); }
  .band__line { font-size: 1.22rem; max-width: 40ch; margin-top: 3rem; }

  /* Klartext in zwei Spalten, so bleibt die Zeile kurz und die Fläche
     trotzdem besetzt. */
  .plain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    max-width: none;
    margin-top: 2.4rem;
  }
  .plain p { max-width: 46ch; }

  .arithmetic { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
  .figure__value { font-size: clamp(3rem, 4.4vw, 4rem); }

  .card { max-width: 41rem; }
  .card__body { font-size: 1.15rem; }
}

/* ---------- Stufe 3, ab 1400px: der Satzspiegel darf atmen ---------- */

@media (min-width: 87.5rem) {
  :root {
    --gutter: 4.5rem;
    --section-gap: 9.5rem;
  }

  .wrap { max-width: 78rem; }

  .hero:has(.hanko--hero) {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    padding-block: 7.5rem 5rem;
  }
  /* Obergrenze empirisch gemessen: die längere deutsche Zeile („Ein Stempel
     am Tag.") muss in der Textspalte bleiben, sonst bricht sie in drei
     Zeilen. Bei 4,8rem bleiben in der DE-Fassung rund 40px Luft. */
  .hero h1 { font-size: 4.8rem; }
  .hero .hanko--hero { --hanko-size: 13rem; }

  /* Der Abstand wächst über die Innenabstände, nicht über column-gap: sonst
     rutscht die Haarlinie aus der Mitte zwischen den Spalten. */
  .section:has(> .bill__grid) > h2 { padding-right: 5rem; }
  .section:has(> .bill__grid) > .bill__grid { padding-left: 5rem; }

  .band { padding-block: 10rem; }
  .stamp-row .hanko { --hanko-size: 72px; }

  .card { max-width: 42rem; }
}

/* ---------- Bewegung zurücknehmen ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}