/* ===========================================================================
   FAIRFLIP by Kaufmann — Stylesheet
   Farben stammen aus dem Logo: Creme, Hellblau, Navy, Gold.
   Schrift: Fraunces (Display, weich & leicht eigenwillig) + Instrument Sans.
   =========================================================================== */

/* ── Marken-Token ────────────────────────────────────────────────────────── */
:root {
  /* Flächen */
  --papier:       #FAF4E4;   /* aufgehelltes Marken-Creme, Grundfläche */
  --creme:        #F7ECC9;   /* Marken-Creme, Bänder und Karten */
  --himmel:       #AED4EA;   /* Marken-Hellblau */
  --himmel-tief:  #8CBEDA;
  --tinte:        #2E3A82;   /* Marken-Navy, Textfarbe */
  --tinte-tief:   #1B2150;   /* dunkle Abschnitte */
  --gold:         #E09A30;   /* Marken-Gold, Akzent */
  --gold-hell:    #FAC93A;

  --linie:        rgba(46, 58, 130, .16);
  --linie-stark:  rgba(46, 58, 130, .34);
  --linie-hell:   rgba(250, 244, 228, .22);

  /* Schrift */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --text:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Abstände — grosszügig gesetzt */
  --s1: .5rem;
  --s2: .75rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2.5rem;
  --s6: 4rem;
  --s7: 6rem;
  --s8: 8rem;

  /* Die Grösse der grossen Überschrift steht als Variable da, weil die Bühne
     rechts sich danach richtet: über den Grossbuchstaben von «Ich gebe deinen»
     liegt Leerraum, den die Schrift selbst mitbringt, und die erste Münze muss
     genau um diesen Betrag tiefer ansetzen, um mit dem Text auf einer Linie zu
     stehen. Steht die Grösse nur bei h1, kann die Bühne nicht mitrechnen. */
  --titel-groesse: clamp(2.4rem, 5vw, 4.4rem);
  /* Der Anteil der Schriftgrösse, um den die erste Münze unter der Oberkante
     des Titelblocks ansetzt, damit sie mit «Ich gebe deinen» auf einer Linie
     steht. Darin stecken drei Dinge: die Luft, die die Schrift über ihren
     Grossbuchstaben mitbringt; die 5 px Goldring, die als box-shadow ausserhalb
     der Bildfläche liegen; und zwei Pixel Überstand, weil eine runde Form an
     einer geraden Kante sonst zu tief wirkt.
     Nicht aus den Schriftmetriken gerechnet, sondern in den Bildschirmpixeln
     gemessen — die Metriken der Bricolage Grotesque geben die tatsächliche
     Oberkante nicht her, weil sie eine Variable Font ist. */
  --titel-luft-oben: .156;

  /* Dasselbe für die Abschnitts-Überschriften: der Kontaktbereich richtet das
     Formular rechts an «Bring deine Schätze vorbei» aus und braucht dafür die
     Grösse. Der Anteil .16 ist die Luft über den Grossbuchstaben, ebenfalls in
     Bildschirmpixeln gemessen. */
  --h2-groesse: clamp(2rem, 4.2vw, 3.4rem);
  --h2-luft-oben: .16;

  --rand: clamp(1.25rem, 5vw, 4.5rem);   /* seitlicher Seitenrand */
  --breite: 78rem;                        /* maximale Inhaltsbreite */
  --rundung: 3px;                         /* fast kantig, editorial */
  --tempo: 340ms;
  --kurve: cubic-bezier(.22, .61, .36, 1);
}

/* ── Bewegungsvariablen anmelden ─────────────────────────────────────────── */
/* Diese Werte setzt seite.js laufend, und sie stecken in transform-Regeln, auf
   denen eine Übergangszeit liegt. Ohne Anmeldung behandelt der Browser sie als
   blosse Textbausteine: er rechnet transform dann nicht neu, solange dort eine
   transition steht — die Fotos blieben einfach stehen. Angemeldet bekommen sie
   einen Typ, werden sauber zwischenberechnet und wirken zuverlässig.
   Browser, die @property nicht kennen, ignorieren den Block; dort greifen die
   Rückfallwerte in den var()-Aufrufen, und die Seite steht einfach still. */
@property --par-x   { syntax: "<length>"; inherits: true;  initial-value: 0px; }
@property --par-y   { syntax: "<length>"; inherits: true;  initial-value: 0px; }
@property --tiefe   { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --dreh    { syntax: "<angle>";  inherits: false; initial-value: 0deg; }
@property --heb     { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* Der Einflug der Artikel der Woche */
@property --flug-x       { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --flug-dreh    { syntax: "<angle>";  inherits: false; initial-value: 0deg; }
@property --flug-skala   { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --flug-deckung { syntax: "<number>"; inherits: false; initial-value: 1; }

@property --karte-x   { syntax: "<angle>";  inherits: false; initial-value: 0deg; }
@property --karte-y   { syntax: "<angle>";  inherits: false; initial-value: 0deg; }
@property --karte-heb { syntax: "<length>"; inherits: false; initial-value: 0px; }

@property --zug-x     { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --zug-y     { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --knopf-heb { syntax: "<length>"; inherits: false; initial-value: 0px; }

@property --licht-x { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --licht-y { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --gelesen { syntax: "<number>";     inherits: false; initial-value: 0; }

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Das hidden-Attribut muss auch gegen display:flex gewinnen. */
[hidden] { display: none !important; }

a { color: inherit; }

button { font: inherit; cursor: pointer; }

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

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

/* Sprungmarke für Tastaturnutzung */
.sprung {
  position: absolute;
  left: var(--rand); top: -100%;
  z-index: 200;
  padding: var(--s2) var(--s4);
  background: var(--tinte);
  color: var(--papier);
  text-decoration: none;
  transition: top 180ms var(--kurve);
}
.sprung:focus { top: var(--s3); }

/* ── Typografie ──────────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--titel-groesse); }
h2 { font-size: var(--h2-groesse); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.01em; }

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  max-width: 34em;
}

/* Kleine Grossbuchstaben-Marke über jedem Abschnitt */
.marke {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s4);
  font-size: .875rem;            /* mit der Bühnenmarke gleichgezogen */
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.marke::before {
  content: "";
  width: 1.75rem; height: 2px;
  background: var(--gold);
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

section { padding-block: clamp(4rem, 9vw, var(--s8)); }

/* Farbwelten der Abschnitte */
.flaeche-creme  { background: var(--creme); }
.flaeche-himmel { background: var(--himmel); }
.flaeche-tief   { background: var(--tinte-tief); color: var(--papier); }
.flaeche-tief h2,
.flaeche-tief h3 { color: var(--papier); }
.flaeche-tief .marke { color: var(--gold-hell); }

/* ── Preisschild — das wiederkehrende Zeichen der Seite ──────────────────── */
.etikett {
  --etikett-farbe: var(--gold);
  position: relative;
  display: inline-block;
  padding: .3rem .75rem .3rem 1.4rem;
  background: var(--etikett-farbe);
  color: var(--tinte-tief);
  font-size: .875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
  clip-path: polygon(0 50%, .7rem 0, 100% 0, 100% 100%, .7rem 100%);
}
.etikett::before {
  content: "";
  position: absolute;
  left: .82rem; top: 50%;
  width: .3rem; height: .3rem;
  margin-top: -.15rem;
  background: var(--papier);
  border-radius: 50%;
}

/* ── Knöpfe ──────────────────────────────────────────────────────────────── */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3rem;
  padding: .8rem 1.6rem;
  border: 2px solid var(--tinte);
  border-radius: var(--rundung);
  background: var(--tinte);
  color: var(--papier);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  /* --zug-* setzt seite.js: der Knopf neigt sich dem Zeiger entgegen, sobald
     dieser in die Nähe kommt. Ein paar Pixel genügen — der Effekt soll
     auffallen, wenn man ihn sucht, und sonst nur die Hand führen. */
  transform: translate(var(--zug-x, 0px), calc(var(--zug-y, 0px) + var(--knopf-heb, 0px)));
  transition: transform var(--tempo) var(--kurve),
              background-color var(--tempo) var(--kurve),
              color var(--tempo) var(--kurve),
              box-shadow var(--tempo) var(--kurve);
}
.knopf:hover {
  --knopf-heb: -2px;
  box-shadow: 0 .6rem 1.4rem rgba(27, 33, 80, .22);
}
.knopf:active { --knopf-heb: 0px; }
/* Solange der Knopf gezogen wird, darf die Bewegung nicht nachhängen. */
.knopf.wird-gezogen { transition: background-color var(--tempo) var(--kurve),
                                  color var(--tempo) var(--kurve),
                                  box-shadow var(--tempo) var(--kurve); }

.knopf--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--tinte-tief);
}
.knopf--gold:hover { background: var(--gold-hell); border-color: var(--gold-hell); }

.knopf--offen {
  background: transparent;
  color: var(--tinte);
}
.knopf--offen:hover { background: var(--tinte); color: var(--papier); }

.flaeche-tief .knopf--offen { border-color: var(--papier); color: var(--papier); }
.flaeche-tief .knopf--offen:hover { background: var(--papier); color: var(--tinte-tief); }

/* Textlink mit Pfeil */
.pfeil-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  text-decoration: none;
  /* Die Linie sass als border-bottom weit unter dem Text. Der Grund war die
     Zeilenhöhe von 1.65 aus dem body: sie macht das Element rund zehn Pixel
     höher als die Schrift, und die Linie klebte am unteren Rand dieses leeren
     Raums. Mit line-height 1 ist das Element so hoch wie der Text, und die
     Linie sitzt dort, wo man sie erwartet. Sie wächst beim Überfahren von
     links ein wie in der Kopfzeile; die ruhende Linie bleibt gedimmt sichtbar,
     damit man den Link auch ohne Maus als solchen erkennt. */
  position: relative;
  line-height: 1;
  padding-bottom: 3px;
  transition: gap var(--tempo) var(--kurve);
}
/* Nur EINE Linie, und die wächst erst beim Überfahren ein. Vorher lag darunter
   noch eine ruhende, gedimmte: an «Anfrage senden» und «Alle Fundstücke
   ansehen» sah man dadurch immer zwei Striche übereinander, und die Bewegung
   wirkte doppelt gemoppelt. Als Link erkennt man sie am Pfeil, dafür braucht
   es keinen zweiten Unterstrich. */
.pfeil-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tempo) var(--kurve);
}
.pfeil-link:hover::after { transform: scaleX(1); }
.pfeil-link:hover { gap: .85rem; }
.pfeil-link svg { width: 1em; height: 1em; flex: none; }

/* ── Kopfzeile ───────────────────────────────────────────────────────────── */
.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--tempo) var(--kurve),
              background-color var(--tempo) var(--kurve);
}
.kopf.ist-gescrollt { border-bottom-color: var(--linie); }

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

.kopf__logo {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  font-family: var(--display);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -.02em;
}
/* Das Logo ist eine Münze — und die Marke heisst Fairflip. Also dreht sie sich
   auch wie eine: einmal beim Laden, danach bei jeder Berührung. Die Perspektive
   sitzt am Elternelement, sonst bliebe die Drehung flach und wirkte wie ein
   Zusammenschieben statt wie ein Wurf. */
.kopf__logo { perspective: 700px; }
.kopf__logo img {
  width: 2.9rem;               /* vorher 2.15rem — da war die Schrift unlesbar */
  height: auto;
  transform-origin: 50% 50%;
}
.kopf__logo img.dreht { animation: muenze 1100ms var(--kurve); }

@keyframes muenze {
  /* Leicht aus der Achse gekippt und in der Mitte etwas grösser: so sieht es
     nach einem geworfenen Geldstück aus, nicht nach einer Drehtür. */
  0%   { transform: rotateY(0)      rotateX(0)   scale(1); }
  45%  { transform: rotateY(540deg) rotateX(8deg) scale(1.09); }
  100% { transform: rotateY(1080deg) rotateX(0)  scale(1); }
}

.kopf__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
}
/* Die Navigationspunkte standen mit 15 px und Strichstärke 500 neben dem
   goldenen Knopf und dem Logo zu leise da. Einen Tick grösser und deutlich
   fetter halten sie dagegen, ohne laut zu werden — und der leichte
   Sperrsatz gibt ihnen die Ruhe, die zur Serifenschrift daneben passt. */
.kopf__nav a {
  position: relative;
  padding: .35rem 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .005em;
  text-decoration: none;
  transition: color var(--tempo) var(--kurve);
}
.kopf__nav a:hover { color: var(--gold); }
.kopf__nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tempo) var(--kurve);
}
.kopf__nav a:hover::after,
.kopf__nav a.ist-aktiv::after { transform: scaleX(1); }

.kopf__knopf { min-height: 2.75rem; padding: .55rem 1.15rem; font-size: .875rem; }

/* Derselbe Knopf noch einmal im Klappmenü — auf breiten Bildschirmen weg. */
.nav__knopf { display: none; }

.kopf__schalter {
  display: none;
  width: 2.75rem; height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linie-stark);
  border-radius: var(--rundung);
  background: transparent;
  color: inherit;
}
.kopf__schalter svg { width: 1.25rem; height: 1.25rem; }
.kopf__schalter .balken-zu { display: none; }
.kopf__schalter[aria-expanded="true"] .balken-auf { display: none; }
.kopf__schalter[aria-expanded="true"] .balken-zu { display: block; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  /* Oben knapper als unten: die Kopfzeile bringt schon eigene Höhe mit, und
     mit dem alten Polster standen über der ersten Zeile gut hundert Pixel
     Leere. Der Hero rückt dadurch näher an die Kopfzeile und sitzt insgesamt
     ruhiger im Bild. */
  padding-block: clamp(1.5rem, 3.5vw, 3rem) clamp(3.5rem, 7vw, 6.5rem);
  overflow: hidden;
}

.hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  /* Oben bündig statt mittig: so beginnt «Artikel der Woche» auf derselben
     Linie wie «Kommission & Ankauf», und die beiden Spalten lesen sich als
     ein Satz statt als zwei gegeneinander verschobene Blöcke. */
  align-items: start;
}

.hero__titel { margin-bottom: var(--s4); }
/* Das overflow:hidden verdeckt die Zeilen beim Einblenden — es schnitt aber
   auch die Unterlängen ab, das «g» in «gebe» hatte keinen Bauch mehr. Der
   Puffer schafft Platz, der negative Aussenabstand nimmt ihn optisch zurück,
   damit der Zeilenabstand unverändert bleibt. */
.hero__titel .zeile {
  display: block;
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.hero__titel .zeile > span { display: block; }
.hero__titel em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--gold);
}

.hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s5);
}
/* Beide Knöpfe gleich breit: «Sachen verkaufen lassen» ist deutlich länger als
   «Fundstücke ansehen», nebeneinander sahen sie ungleich gewichtet aus. Mit
   flex-basis 0 teilen sie sich den Platz zu gleichen Teilen, statt sich nach
   ihrer Textlänge zu richten. */
.hero__aktionen .knopf {
  flex: 1 1 0;
  min-width: 13rem;
  justify-content: center;
}

.hero__belege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--linie);
  font-size: .875rem;
}
.hero__beleg b {
  display: block;
  font-family: var(--display);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* ── Bühne: die Artikel der Woche ───────────────────────────────────────── */
/* Die Bühne nimmt die volle Höhe der Rasterzeile, also die Höhe der Textspalte
   daneben. Nur so kann der Münzstapel darin unten bündig mit den Kennzahlen
   abschliessen — mit der eigenen Inhaltshöhe ragte er je nach Fensterbreite
   unterschiedlich weit darüber hinaus. */
.buehne {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
/* Gleicher Bau und dieselbe Höhe wie die Abschnittsmarke links, aber mittig
   über den Münzen statt am Spaltenrand: sie beschriftet die Auslage, nicht die
   Spalte. Die Breite entspricht der des Münzstapels, dadurch sitzt sie über
   dessen Mitte. */
.buehne__marke {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  max-width: 26rem;
  /* Oben: «Kommission & Ankauf» links ist ein inline-flex in einem Absatz und
     sitzt darum auf der Grundlinie seiner Zeile — darüber bleiben 7,5 px leer.
     Die Bühnenmarke ist ein Block und hätte diese Lücke nicht; ohne den
     Ausgleich stünde sie sichtbar höher als die Marke links.
     Unten: derselbe Abstand wie links zwischen Marke und Titel (--s4), plus
     die Luft, die der Titel über seinen Grossbuchstaben mitbringt. Dadurch
     beginnt die erste Münze genau auf der Höhe von «Ich gebe deinen». */
  margin: .47rem auto calc(var(--s4) + var(--titel-groesse) * var(--titel-luft-oben));
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.buehne__marke::before,
.buehne__marke::after {
  content: "";
  width: 1.75rem; height: 2px;
  background: currentColor;
  flex: none;
}

/* Das Namensschild hängt an einer feinen Linie am Foto. Es erscheint erst beim
   Überfahren: im Ruhezustand soll die Ware wirken, nicht die Beschriftung. */
/* Das Namensschild steht neben dem Stück und ist immer da, wie die
   Beschriftung an einer Vitrine. Die feine Linie zeigt auf das Foto. */
.stapel__name {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  gap: .45rem;
  /* Feste Breite, nicht max-width: das Schild sitzt absolut und ragt aus der
     Münze heraus, an der es hängt. Als verfügbare Breite bekäme es dadurch nur
     den Rest der Münze zugerechnet — praktisch null, und der Name brach auf
     sechs Wortfetzen um. Neben den Münzen stehen gut 230 px zur Verfügung,
     davon nimmt das Schild diese knapp 200. */
  width: 12.5rem;
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .03em;
  color: var(--tinte);
  opacity: .82;
  pointer-events: none;
  transition: opacity var(--tempo) var(--kurve), transform var(--tempo) var(--kurve);
  z-index: 4;
}
/* Die Fotos stehen abwechselnd links und rechts, das Schild jeweils aussen. */
.stapel__bild:nth-child(odd) .stapel__name {
  left: calc(100% + .75rem);
  transform: translateY(-50%);
}
.stapel__bild:nth-child(even) .stapel__name {
  right: calc(100% + .75rem);
  flex-direction: row-reverse;
  text-align: right;
  transform: translateY(-50%);
}
.stapel__strich {
  width: 1.2rem;
  height: 1px;
  background: var(--gold);
  flex: none;
}
.stapel__bild:hover .stapel__name { opacity: 1; }
.stapel__bild:nth-child(odd):hover .stapel__name  { transform: translate(.2rem, -50%); }
.stapel__bild:nth-child(even):hover .stapel__name { transform: translate(-.2rem, -50%); }

/* Die drei Stücke liegen untereinander wie in einer Vitrine, leicht versetzt
   und angedreht. Beim ersten Erscheinen fliegen sie nacheinander aus der Tiefe
   herein. */
.stapel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;                        /* die Überlappung macht der Aussenabstand unten */
  /* Der Stapel füllt die Bühne und verteilt die drei Münzen darin: die erste
     oben, die letzte unten bündig, die mittlere dazwischen. Wie stark sie sich
     überlappen, ergibt sich daraus von selbst und passt sich der Texthöhe
     nebenan an — vorher war die Überlappung fest und der Stapel darum je nach
     Fensterbreite zu lang oder zu kurz. */
  flex: 1 1 auto;
  justify-content: space-between;
  /* Unten dasselbe Spiel wie oben: der Goldring liegt ausserhalb der Bildfläche
     und die letzte Textzeile endet über ihrer Zeilenunterkante. Ohne diesen
     Abzug hing die untere Münze sichtbar unter den Kennzahlen. */
  margin-bottom: .75rem;
  max-width: 29rem;
  margin-inline: auto;
  width: 100%;
  perspective: 1100px;           /* damit der Einflug Tiefe hat */
}
.stapel__bild {
  position: relative;
  width: 48%;
  /* Die Stücke der Woche liegen als Münzen auf der Bühne: das Logo ist eine
     Münze, die Marke heisst Fairflip, also ist das die Form des Hauses. Der
     Kreis nimmt die Fotos so, wie sie aus der Aufbereitung kommen (quadratisch)
     und schneidet nur die Ecken weg, in denen ohnehin Tischplatte liegt.
     Der Goldrand ist der Münzrand, der helle Innenring die Prägekante. */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--creme);
  box-shadow:
    0 0 0 3px var(--gold),
    0 0 0 5px rgba(224, 154, 48, .28),
    0 1.4rem 3rem rgba(27, 33, 80, .24);
  text-decoration: none;
  /* Die Kette von hinten nach vorn gelesen: erst der Einflug beim Erscheinen,
     dann Schweben und Heben, dann die Drehung, zuoberst die Zeigerparallaxe.
     --tiefe staffelt die drei: das oberste Stueck wandert am weitesten, das
     unterste kaum. So entsteht Tiefe statt einer verschobenen Flaeche. */
  transform:
    translate(calc(var(--par-x, 0px) * var(--tiefe, 1)),
              calc(var(--par-y, 0px) * var(--tiefe, 1)))
    translateY(var(--heb, 0px))
    translateX(var(--flug-x, 0px))
    rotateY(var(--flug-dreh, 0deg))
    scale(var(--flug-skala, 1));
  opacity: var(--flug-deckung, 1);
  transition: transform 600ms var(--kurve), opacity 600ms var(--kurve),
              box-shadow var(--tempo) var(--kurve);
  /* Kein Dauerschweben mehr: es lief ueber eine animierte Variable, und die
     laesst den Browser bei jedem Bild den Stil neu rechnen statt nur zu
     verschieben. Auf der Bühne mit drei Münzen gleichzeitig ruckelte das
     sichtbar. Einflug, Parallaxe und das Anheben beim Ueberfahren bleiben. */
}

/* Absolut gesetzt, damit das Bild keine eigene Höhe mitbringt: sonst gewinnt
   sein Seitenverhältnis gegen das aspect-ratio des Rahmens und die Fotos werden
   hochkant. Kein overflow:hidden am Rahmen, das Schild ragt daneben hinaus. */
.stapel__bild img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Prägekante innen und ein Lichtstreifen von oben links, wie ihn das Logo hat.
   Beides liegt über dem Foto und macht aus der Bildfläche ein geprägtes Stück. */
.stapel__bild::before,
.stapel__bild::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.stapel__bild::before {
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, .42);
  z-index: 2;
}
.stapel__bild::after {
  inset: 0;
  background: linear-gradient(148deg, rgba(255, 255, 255, .3) 0%,
                                      rgba(255, 255, 255, 0) 42%);
  z-index: 3;
}
/* Beim Überfahren hebt sich das Stück und der Rand leuchtet auf. Bewusst ohne
   Drehung: bei einer runden Fläche liest sich die Drehung nicht als Wurf,
   sondern nur als Zappeln des Fotos darin. Das Schweben und der Einflug
   genügen. */
.stapel__bild:hover {
  --heb: -6px;
  z-index: 5;
  box-shadow:
    0 0 0 3px var(--gold-hell),
    0 0 0 6px rgba(250, 201, 58, .34),
    0 2rem 3.8rem rgba(27, 33, 80, .3);
}

/* Versetzt statt exakt untereinander: eine gerade Saeule wirkt wie ein
   Bilderrahmen, der Versatz wie eine Auslage. Die leichte Ueberlappung macht
   daraus einen Stapel, so wie die Dosen im Vorbild aufeinanderstehen.
   (gap darf nicht negativ sein, darum der Aussenabstand.) */
/* Der Wert ist bewusst grosszügig: er ist keine Vorgabe, sondern nur die
   Reserve, damit der Stapel rechnerisch immer kürzer ist als die Bühne. Erst
   dann hat das space-between darüber Raum zu verteilen und kann die letzte
   Münze unten bündig setzen. Die sichtbare Überlappung ist am Ende deutlich
   kleiner (gemessen 43 px bei 1920, 53 px bei 1150). */
.stapel__bild + .stapel__bild { margin-top: -8rem; }
.stapel__bild:nth-child(1) { align-self: flex-start; --tiefe: 1.6;  z-index: 1; }
.stapel__bild:nth-child(2) { align-self: flex-end;   --tiefe: 1.05; z-index: 2; }
.stapel__bild:nth-child(3) { align-self: flex-start; --tiefe: .55;  z-index: 3; }

/* Der Einflug: vor dem Erscheinen stehen die Stuecke seitlich, gedreht und
   verkleinert im Raum. Wird der Abschnitt sichtbar, fallen sie nacheinander an
   ihren Platz. Deshalb liegen sie in der transform-Kette und nicht in einer
   eigenen Animation: die wuerde die Parallaxe ueberschreiben. */
.js .buehne .stapel__bild {
  --flug-skala: .88;
  --flug-deckung: 0;
  /* Grundverzögerung plus Versatz je Stück: ohne die 350 ms startet der Flug
     im selben Moment, in dem die Seite erscheint, und ist vorbei, bevor das
     Auge beim Bild ist. So kommen sie sichtbar nacheinander an. */
  transition-delay: calc(350ms + var(--platz, 0) * 280ms);
}
/* Jedes Stück kommt von der Seite, auf der es landet: das erste und dritte von
   links, das mittlere von rechts. Die Drehrichtung folgt der Flugrichtung, so
   dass sie sich beim Ankommen aufrichten statt einfach hereinzurutschen. */
.js .buehne .stapel__bild:nth-child(odd) {
  --flug-x: -4.5rem;
  --flug-dreh: 30deg;
}
.js .buehne .stapel__bild:nth-child(even) {
  --flug-x: 4.5rem;
  --flug-dreh: -30deg;
}
.js .buehne.ist-da .stapel__bild {
  --flug-x: 0px;
  --flug-dreh: 0deg;
  --flug-skala: 1;
  --flug-deckung: 1;
}

/* Waehrend die Maus ueber dem Hero liegt, folgen die Fotos kurz nach statt
   ueber die volle Uebergangszeit hinterherzuschleifen. Ein Rest Nachlauf
   bleibt: er laesst die Bewegung teuer aussehen statt nach Mauszeigerklebe. */
.stapel.wird-gefuehrt .stapel__bild {
  transition: transform 260ms var(--kurve);
  transition-delay: 0s;
}

/* ── Laufband ────────────────────────────────────────────────────────────── */
/* Oben und unten derselbe Wert liess das Band unten abgeschnitten wirken: über
   den Bildern sitzt noch die Titelzeile mit ihrem eigenen Abstand, unter den
   Preisen kommt sofort die Kante. --s6 unten gleicht das aus. */
.band {
  padding-block: var(--s5) var(--s6);
  border-block: 1px solid var(--linie);
  background: var(--creme);
  overflow: hidden;
}
.band__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  /* Gleicher Abstand nach dem Titel wie in den übrigen Abschnitten. Vorher
     stand hier --s4: das Laufband klebte sichtbar enger am Kopf als jeder
     andere Abschnitt an seiner Überschrift. */
  margin-bottom: var(--s5);
}
.band__kopf .marke { margin: 0; }
.band__hinweis { font-size: .8125rem; opacity: .72; }

.band__spur {
  display: flex;
  gap: var(--s3);
  width: max-content;
  animation: laufen 64s linear infinite;
}
.band:hover .band__spur,
.band:focus-within .band__spur { animation-play-state: paused; }

@keyframes laufen {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.band__stueck {
  position: relative;
  flex: none;
  width: 8.5rem;
  text-decoration: none;
}
.band__stueck img {
  width: 100%;
  height: auto;              /* sonst gewinnt das height-Attribut aus dem HTML */
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--rundung);
  border: 1px solid var(--linie);
  transition: transform var(--tempo) var(--kurve);
}
.band__stueck:hover img { transform: scale(1.04); }
.band__preis {
  display: block;
  margin-top: .4rem;
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Zwei Wege ───────────────────────────────────────────────────────────── */
/* Beide Karten teilen sich dieselben Zeilen: Kennzeile, Titel, Einleitung,
   Häkchenliste, Fusslink. Ohne das beginnen die Listen auf verschiedener Höhe,
   weil die Einleitungstexte unterschiedlich lang sind — nebeneinander sieht das
   verrutscht aus. Mit subgrid richten sich die Zeilen an der jeweils höchsten
   aus. Browser ohne subgrid zeigen wie bisher untereinander verschobene
   Listen: unschön, aber nicht kaputt. */
.wege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  grid-template-rows: auto auto auto 1fr auto;
  gap: var(--s4);
  margin-top: var(--s6);
}
.weg {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  align-content: start;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  transition: transform var(--tempo) var(--kurve),
              box-shadow var(--tempo) var(--kurve);
}
.weg:hover {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2.4rem rgba(27, 33, 80, .14);
}
.weg__nummer {
  font-family: var(--display);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--gold);
  margin-bottom: var(--s3);
}
.weg h3 { margin-bottom: var(--s3); }
.weg p { max-width: 30em; }
/* Knapp am Text: die Zeile darüber wird ohnehin auf die Höhe der längeren
   Karte gestreckt, damit beide Listen gleich hoch beginnen. Ein zusätzlicher
   Aussenabstand käme oben drauf und riss die Lücke unnötig weiter auf. */
.weg__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linie);
}
.weg__liste li {
  display: flex;
  gap: var(--s2);
  padding: .7rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: .9375rem;
}
.weg__liste svg {
  width: 1.1rem; height: 1.1rem;
  flex: none;
  margin-top: .28rem;
  color: var(--gold);
}
.weg__fuss { margin-top: 0; padding-top: var(--s4); }

/* ── Ablauf ──────────────────────────────────────────────────────────────── */
.ablauf {
  margin-top: var(--s6);
  border-top: 1px solid var(--linie-stark);
}
.schritt {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--s4);
  align-items: baseline;
  padding: var(--s4) var(--s3);
  margin-inline: calc(var(--s3) * -1);
  border-bottom: 1px solid var(--linie);
}
/* Die ganze Zeile reagiert, nicht nur die Ziffer: ein goldener Hauch läuft von
   links ein und eine Linie zieht darunter durch, wie in der Kopfzeile. */
.schritt::before,
.schritt::after {
  content: "";
  position: absolute;
  left: 0;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
  transition: transform 560ms var(--kurve);
}
.schritt::before {
  inset: 0;
  background: linear-gradient(90deg, rgba(224, 154, 48, .13), rgba(224, 154, 48, 0));
}
.schritt::after {
  bottom: -1px;
  width: 100%; height: 2px;
  background: var(--gold);
}
.schritt:hover::before,
.schritt:hover::after { transform: scaleX(1); }

/* Der Text rückt mit — spürbar, aber ohne dass man die Zeile neu suchen muss. */
.schritt h3,
.schritt p { transition: transform 560ms var(--kurve); }
.schritt:hover h3 { transform: translateX(.3rem); }
.schritt:hover p  { transform: translateX(.15rem); }
.schritt__nr {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.schritt h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }
.schritt p { font-size: .9375rem; opacity: .88; }

/* ── Aufteilung 60/40 ────────────────────────────────────────────────────── */
.teilung { margin-top: var(--s6); }

.teilung__balken {
  display: flex;
  height: clamp(5rem, 9vw, 7rem);
  border-radius: var(--rundung);
  overflow: hidden;
  border: 1px solid var(--linie-hell);
}
.teilung__anteil {
  display: flex;
  align-items: center;
  padding-inline: clamp(1rem, 2.5vw, 2rem);
  width: 0;
  transition: width 1.4s var(--kurve);
  overflow: hidden;
  white-space: nowrap;
}
.teilung.ist-sichtbar .teilung__anteil--du   { width: 60%; }
.teilung.ist-sichtbar .teilung__anteil--ich  { width: 40%; }

.teilung__anteil--du  { background: var(--gold); color: var(--tinte-tief); }
.teilung__anteil--ich { background: rgba(174, 212, 234, .2); color: var(--papier); }

.teilung__zahl {
  font-family: var(--display);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-size: clamp(1.75rem, 4vw, 2.9rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.teilung__wort {
  display: block;
  font-family: var(--text);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: .3rem;
}

.teilung__erklaerung {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--s4);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--linie-hell);
  font-size: .9375rem;
}
.teilung__posten b {
  display: block;
  font-weight: 600;
  color: var(--gold-hell);
  margin-bottom: .2rem;
}
.teilung__posten p { opacity: .82; }

/* ── Fundstücke ──────────────────────────────────────────────────────────── */
.funde__kopf {
  display: flex;
  flex-wrap: wrap;
  /* An der letzten Schriftlinie ausgerichtet, nicht an der Kastenunterkante:
     «Stand …» ist kleiner gesetzt als der Text daneben und hat darum weniger
     Luft unter seiner Schriftlinie. Mit flex-end standen die Kästen bündig,
     die Schrift aber 3,7 px zu tief — sichtbar als leichtes Absacken. */
  align-items: last baseline;
  justify-content: space-between;
  gap: var(--s4);
}
.funde__kopf .lead { margin-top: var(--s3); }

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  /* Oben derselbe Abstand wie in allen anderen Abschnitten zwischen Einleitung
     und Inhalt (--s6), unten etwas knapper: darunter folgt direkt das Raster,
     und die Trennlinie schliesst den Block ohnehin ab. */
  margin: var(--s6) 0 var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--linie);
}
.filter__knopf {
  min-height: 2.75rem;
  padding: .5rem 1.1rem;
  border: 1px solid var(--linie-stark);
  border-radius: 2rem;
  background: transparent;
  color: var(--tinte);
  font-size: .875rem;
  font-weight: 500;
  transition: background-color var(--tempo) var(--kurve),
              color var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve);
}
.filter__knopf:hover { border-color: var(--tinte); }
.filter__knopf[aria-pressed="true"] {
  background: var(--tinte);
  border-color: var(--tinte);
  color: var(--papier);
}
.filter__knopf span { opacity: .6; font-variant-numeric: tabular-nums; }
.filter__knopf[aria-pressed="true"] span { opacity: .75; }

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}

.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--creme);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  /* bewusst nicht overflow:hidden — das Preisschild ragt über die Ecke */
  /* Die Neigung kommt als Variable vom Zeiger (seite.js). Sie steht hier und
     nicht in der :hover-Regel, damit sich Heben und Neigen nicht gegenseitig
     überschreiben — zwei transform-Regeln kennen keinen Kompromiss. */
  transform:
    perspective(1000px)
    translateY(var(--karte-heb, 0px))
    rotateX(var(--karte-x, 0deg))
    rotateY(var(--karte-y, 0deg));
  transition: transform var(--tempo) var(--kurve),
              box-shadow var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve);
}
.karte:hover {
  --karte-heb: -4px;
  border-color: var(--linie-stark);
  box-shadow: 0 1rem 2.2rem rgba(27, 33, 80, .16);
  z-index: 2;                  /* Schild der Nachbarkarte nicht überdecken */
}
/* Während der Zeiger über der Karte liegt, folgt die Neigung ihm unmittelbar.
   Die träge Übergangszeit von oben würde sie hinterherschleifen lassen. */
.karte.wird-beruehrt { transition: box-shadow var(--tempo) var(--kurve),
                                   border-color var(--tempo) var(--kurve); }
.karte__bild {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--creme);
}
.karte__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--kurve);
}
.karte:hover .karte__bild img { transform: scale(1.045); }

/* Auf den Produktfotos liegt bewusst KEIN Lichtschleier: er legte sich über die
   Ware und liess sie milchig aussehen. Die Fotos sollen die Ware zeigen, sonst
   nichts — die Zeigerspur wird stattdessen ausserhalb der Bilder geführt. */
/* Das Schild hängt über der oberen rechten Ecke — grösstenteils ausserhalb des
   Bildes, damit es weder die Ware noch das Wasserzeichen unten rechts verdeckt.
   Der Drehpunkt liegt oben links, so kippt es beim Überfahren wie an einer
   Schnur. */
.karte__etikett {
  position: absolute;
  top: -.7rem; right: -.55rem;
  z-index: 3;
  transform: rotate(7deg);
  transform-origin: top left;
  box-shadow: 0 .35rem .9rem rgba(27, 33, 80, .25);
  transition: transform 420ms var(--kurve);
}
.karte:hover .karte__etikett { transform: rotate(2deg); }

.karte__text {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: var(--s3) var(--s3) var(--s4);
  flex: 1;
}
.karte__titel {
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.4;
}
.karte__meta {
  margin-top: auto;
  font-size: .8125rem;
  opacity: .68;
}

.funde__mehr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s6);
  text-align: center;
}
.funde__zaehler { font-size: .875rem; opacity: .7; font-variant-numeric: tabular-nums; }
.funde__leer {
  padding: var(--s6) 0;
  text-align: center;
  opacity: .7;
}

/* ── Annahme-Band ────────────────────────────────────────────────────────── */
/* Wieder die schlichten Spalten mit Trennlinien wie ursprünglich: als Karten
   mit Rand und Fläche wurden die fünf Punkte zu schwer und nahmen den grossen
   Wege-Karten darüber die Wirkung. Die Hervorhebung passiert jetzt nur beim
   Überfahren (siehe Bewegungsteil weiter unten). */
.annahme {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0;
  margin-top: var(--s6);
  border-top: 1px solid var(--linie-stark);
}
.annahme__punkt {
  padding: var(--s4) var(--s4) var(--s4) 0;
  border-bottom: 1px solid var(--linie);
}
.annahme__punkt svg {
  width: 1.5rem; height: 1.5rem;
  color: var(--gold);
  margin-bottom: var(--s2);
}
.annahme__punkt b { display: block; font-size: .9375rem; margin-bottom: .2rem; }
.annahme__punkt p { font-size: .875rem; opacity: .78; }

/* ── Über mich ───────────────────────────────────────────────────────────── */
.ueber__raster {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem);
  /* Kein eigener Abstand nach oben: hier fehlt die grosse Überschrift, das
     Zitat folgt direkt auf die Marke. Mit --s5 kam deren eigener Abstand noch
     dazu und die Lücke war sichtbar grösser als in allen anderen Abschnitten. */
  margin-top: 0;
  align-items: start;
}
.ueber__zitat {
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.015em;
  margin: 0;
}
.ueber__zitat span { color: var(--gold); }
.ueber__signatur {
  margin-top: var(--s4);
  font-size: .875rem;
  letter-spacing: .06em;
  opacity: .8;
}
.ueber__text p + p { margin-top: var(--s3); }

/* Die drei Knöpfe stehen mittig unter dem Text und bekommen Luft: hier soll
   geklickt werden, also dürfen sie auffallen. Vorher klebten sie linksbündig
   und klein am Absatz. */
.plattformen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s4);
  /* Nur so viel wie das Polster über den Belegen: die Kacheln sollen zwischen
     ihren beiden Trennlinien gleich weit von oben und unten stehen. Mit den
     früheren 64 px waren es 29 px oben gegen 92 unten. */
  margin-top: .75rem;
  padding-top: var(--s5);
  border-top: 1px solid var(--linie);
}
.plattform {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.25rem;
  /* Gleiche Breite für alle drei: «Ricardo» und «Instagram» sind verschieden
     lang, nebeneinander sähen sie sonst wie drei verschiedene Elemente aus. */
  min-width: 11.5rem;
  padding: .7rem 1.5rem;
  border: 2px solid var(--linie-stark);
  border-radius: 2rem;
  overflow: hidden;              /* die Füllung darf nicht über die Rundung */
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve),
              transform var(--tempo) var(--kurve);
}
/* Die Farbe läuft von unten ein, statt schlagartig umzuspringen — dasselbe
   Prinzip wie die Linie in der Kopfzeile, nur über die ganze Fläche. */
.plattform::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tinte);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 420ms var(--kurve);
  z-index: -1;
}
.plattform:hover {
  color: var(--papier);
  border-color: var(--tinte);
  transform: translateY(-2px);
}
.plattform:hover::before { transform: scaleY(1); }
/* Das Pfeilchen springt in seine Richtung davon. */
.plattform svg { transition: transform var(--tempo) var(--kurve); }
.plattform:hover svg { transform: translate(2px, -2px); }
.plattform svg { width: .95rem; height: .95rem; }

/* ── Kontakt ─────────────────────────────────────────────────────────────── */
.kontakt__raster {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  /* Kein eigener Abstand nach oben: die Überschrift steckt hier im Raster und
     nicht darüber wie in den anderen Abschnitten. Zusammen mit den 24 px der
     Marke wären es sonst 64 statt der überall üblichen 24. */
  margin-top: 0;
  /* Beide Spalten gleich hoch, damit der Knopf «Anfrage senden» unten auf
     derselben Linie abschliesst wie der letzte Trennstrich der Kontaktliste
     links. Vorher endete er 38 px darüber — die beiden Spalten sind
     unterschiedlich lang, und wie stark, hängt vom Textumbruch ab. */
  align-items: stretch;
}
/* Beide Spalten docken ihr letztes Element unten an — welche der beiden die
   längere ist, wechselt mit der Fensterbreite (bei 1050 px ist es das
   Formular, bei 1920 px die Kontaktliste). Nur wenn beide unten andocken,
   liegen Trennstrich und Knopf in jedem Fall auf einer Linie.
   Links nimmt der Einleitungstext den Rest auf, statt die Liste zu schieben:
   so bleibt ihr Mindestabstand von --s5 in jedem Fall erhalten. */
.kontakt__raster > div:first-child { display: flex; flex-direction: column; }
.kontakt__raster .lead { margin-bottom: auto; }

/* Das Formular füllt seine Spalte, der Knopf wird ans untere Ende geschoben.
   Der übrige Platz geht ans Nachrichtenfeld, nicht in eine Lücke davor. */
/* Oben: «NAME» ist ein kleines Grossbuchstaben-Label und bringt kaum Luft über
   seinen Buchstaben mit, die grosse Überschrift links dagegen schon. Ohne den
   Ausgleich stand das Label 4 px höher als das «B» von «Bring». Abgezogen wird
   die eigene Luft des Labels (.2875rem, gemessen). */
.kontakt__raster > div:nth-child(2) {
  display: flex;
  flex-direction: column;
  margin-top: calc(var(--h2-groesse) * var(--h2-luft-oben) - .2875rem);
}
.kontakt__raster .formular { flex: 1 1 auto; }
.kontakt__raster .formular button { margin-top: auto; }

.direkt { margin-top: var(--s5); display: grid; gap: var(--s3); }
.direkt__zeile {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--linie-hell);
  text-decoration: none;
  transition: padding-left var(--tempo) var(--kurve);
}
.direkt__zeile:hover { padding-left: .5rem; }
.direkt__zeile svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--gold-hell); }
.direkt__zeile b { display: block; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; opacity: .7; font-weight: 600; }
.direkt__zeile span { font-size: 1.0625rem; }

.formular { display: grid; gap: var(--s4); }
.feld { display: grid; gap: .45rem; }
.feld label { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.feld input,
.feld textarea {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--linie-hell);
  border-radius: var(--rundung);
  background: rgba(250, 244, 228, .07);
  color: var(--papier);
  font: inherit;
  transition: border-color var(--tempo) var(--kurve),
              background-color var(--tempo) var(--kurve);
}
.feld input::placeholder,
.feld textarea::placeholder { color: rgba(250, 244, 228, .45); }
.feld input:focus,
.feld textarea:focus {
  border-color: var(--gold);
  background: rgba(250, 244, 228, .12);
  outline: none;
}
.feld textarea { min-height: 8.5rem; resize: vertical; }
.feld__fehler { font-size: .8125rem; color: var(--gold-hell); min-height: 1.2em; }

.honigtopf { position: absolute; left: -9999px; opacity: 0; }

.formular__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}

.meldung {
  display: none;
  padding: var(--s4);
  border: 1px solid var(--gold);
  border-radius: var(--rundung);
  background: rgba(224, 154, 48, .12);
  font-size: .9375rem;
}
.meldung.ist-sichtbar { display: block; }

/* ── Fusszeile ───────────────────────────────────────────────────────────── */
.fuss {
  padding-block: var(--s5) var(--s4);
  background: var(--tinte-tief);
  color: var(--papier);
  border-top: 1px solid var(--linie-hell);
}
/* Seit die Anschrift raus ist (sie steht im Impressum), steht links nur noch
   das Logo und rechts die Linkreihe. Dasselbe Spaltenmass wie .kontakt__raster
   ist hier kein Zufall: die Linkreihe beginnt dadurch exakt an der Kante des
   Knopfes «Anfrage senden» darüber. Ändert sich das eine Raster, muss das
   andere mit. align-items: center legt Logo und Reihe auf eine Mittellinie. */
.fuss__raster {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
/* Seit die Fusszeile das Logo verlinkt, ist es ein <a>: keine Unterstreichung,
   und beim Überfahren färbt es sich golden wie die Navigation oben. */
.fuss__logo {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0;
  perspective: 700px;
  text-decoration: none;
  transition: color var(--tempo) var(--kurve);
}
.fuss__logo:hover { color: var(--gold-hell); }
.fuss__logo img { width: 2.6rem; height: auto; transform-origin: 50% 50%; }
.fuss__logo img.dreht { animation: muenze 1100ms var(--kurve); }
/* align-items: flex-start ist hier entscheidend: ohne die Angabe streckt der
   Flex-Container die Links auf die volle Höhe der Zeile (gemessen 131 px statt
   18 px). Der Unterstrich klebte dann am unteren Rand dieses unsichtbaren
   Kastens und schwebte über hundert Pixel unter der Schrift.
   Rechtsbündig ist die Grundstellung: auf den Rechtsseiten (Impressum, AGB,
   Datenschutz) gibt es oben kein Formular, an dem sich links etwas ausrichten
   liesse. */
.fuss__links {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--s3) var(--s5);
  font-size: .9375rem;
}
/* Auf der Startseite dagegen füllt die Reihe ihre Rasterspalte ganz aus: links
   an der Knopfkante, rechts am Seitenrand. Beide Kanten stehen damit auf einer
   Linie mit dem Formular darüber. */
.fuss__links--gefuellt { justify-content: space-between; }
.fuss__links a { text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color var(--tempo) var(--kurve); }
.fuss__links a:hover { border-bottom-color: var(--gold); }
.fuss__unten {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--linie-hell);
  font-size: .8125rem;
  opacity: .62;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: space-between;
}

/* ── Rechtstexte ─────────────────────────────────────────────────────────── */
.rechtstext { max-width: 46rem; }
/* Die Abschnitte im Impressum sind oft nur drei Zeilen lang. Mit den vier
   Zentimetern Abstand von vorher stand jede Überschrift für sich allein und
   der Bezug zum Text darunter ging verloren. Enger gesetzt liest sich die
   Seite als Liste zusammengehöriger Angaben. */
.rechtstext h2 { margin-top: var(--s5); font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.rechtstext h2:first-of-type { margin-top: var(--s4); }

/* Die Rechtstexte brauchen oben auch nicht das grosse Polster der Startseite:
   dort trägt es den Auftritt, hier steht nur eine Adresse. */
section:has(.rechtstext) { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.rechtstext ul { padding-left: 1.2rem; margin: 0 0 var(--s3); }
.rechtstext li { margin-bottom: .35rem; }
.rechtstext .stand { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--linie); font-size: .875rem; opacity: .7; }

/* ── Einblenden beim Scrollen ────────────────────────────────────────────── */
/* Nur verstecken, wenn JavaScript läuft — sonst bliebe ohne JS die halbe
   Seite unsichtbar. Die Klasse .js setzt ein Inline-Script im <head>. */
.js .zeigt {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--kurve), transform 620ms var(--kurve);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js .zeigt.ist-da { opacity: 1; transform: none; }

/* ===========================================================================
   BEWEGUNG
   Jeder Abschnitt bekommt eine kleine Reaktion — aber nur eine. Die Seite soll
   wach wirken, nicht zappelig. Alles läuft über transform und opacity, damit
   der Browser keine Layouts neu rechnen muss; alles Zeigerabhängige steckt
   unten im Block für Geräte mit echtem Mauszeiger.
   =========================================================================== */

/* Lesefortschritt: ein Haarstrich Gold am unteren Rand der Kopfzeile. Er
   beantwortet beiläufig die Frage «wie viel kommt noch». */
.kopf__fortschritt {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--gelesen, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--gold), var(--gold-hell));
  opacity: .9;
  pointer-events: none;
}

/* Ablauf: die Nummer rückt vor, wenn die Zeile drankommt — als hakte man sie
   ab. Die Zeile selbst bleibt ruhig, sie ist Text zum Lesen. */
.schritt__nr {
  display: inline-block;
  transition: transform var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}
.schritt:hover .schritt__nr { transform: translateX(.35rem); color: var(--gold-hell); }

/* «Das nehme ich an»: über dem Feld wächst eine Goldlinie ein, sonst bleibt
   alles wie es ist. Kein eingefärbter Grund und kein Schatten — der helle
   Kasten nahm dem Abschnitt sein Blau und wirkte wie ein Fehler. */
.annahme__punkt {
  position: relative;
  padding-top: var(--s3);
}
.annahme__punkt::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 460ms var(--kurve);
}
.annahme__punkt:hover::before { transform: scaleX(1); }
.annahme__punkt svg {
  transition: transform 520ms var(--kurve), color var(--tempo) var(--kurve);
}
.annahme__punkt:hover svg { transform: rotate(-8deg) scale(1.12); color: var(--gold); }

/* Die beiden grossen Wege-Karten heben sich beim Überfahren mit einem Schatten
   an (siehe .weg:hover weiter oben). Eine Goldleiste hatten sie zusätzlich —
   die ist wieder raus: bei einer Karte, die sich ohnehin hebt, ist der Strich
   ein Zeichen zu viel. */

/* Kennzahlen im Hero: die Zahl hebt sich, darunter zieht eine Linie durch. */
.hero__beleg {
  position: relative;
  padding-bottom: .4rem;
  transition: transform var(--tempo) var(--kurve);
}
.hero__beleg::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--kurve);
}
.hero__beleg:hover::after { transform: scaleX(1); }
.hero__beleg:hover { transform: translateY(-3px); }

/* Die Kontaktzeilen: Linie statt blosser Verschiebung. */
.direkt__zeile { position: relative; }
.direkt__zeile::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: var(--gold-hell);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tempo) var(--kurve);
}
.direkt__zeile:hover::after { transform: scaleX(1); }
.direkt__zeile svg { transition: transform var(--tempo) var(--kurve); }
.direkt__zeile:hover svg { transform: scale(1.15) rotate(-6deg); }

/* Die Posten der 60/40-Erklärung heben sich einzeln heraus. */
.teilung__posten {
  position: relative;
  padding-left: var(--s3);
  transition: transform var(--tempo) var(--kurve);
}
.teilung__posten::before {
  content: "";
  position: absolute;
  left: 0; top: .15em; bottom: .15em;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 460ms var(--kurve);
}
.teilung__posten:hover::before { transform: scaleY(1); }
.teilung__posten:hover { transform: translateX(.25rem); }

/* Häkchenlisten laufen beim Einblenden von oben nach unten durch, statt alle
   vier auf einmal zu erscheinen. */
.js .zeigt .weg__liste li {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 460ms var(--kurve), transform 460ms var(--kurve);
}
.js .zeigt.ist-da .weg__liste li { opacity: 1; transform: none; }
.js .zeigt.ist-da .weg__liste li:nth-child(1) { transition-delay: 160ms; }
.js .zeigt.ist-da .weg__liste li:nth-child(2) { transition-delay: 250ms; }
.js .zeigt.ist-da .weg__liste li:nth-child(3) { transition-delay: 340ms; }
.js .zeigt.ist-da .weg__liste li:nth-child(4) { transition-delay: 430ms; }

/* Das Zitat: unter «zweite Chance» wächst ein goldener Strich ein, sobald der
   Abschnitt sichtbar wird. Ein einziger betonter Moment im Textblock. */
.ueber__zitat span {
  color: var(--gold);
  position: relative;
  white-space: nowrap;
}
.ueber__zitat span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.06em;
  height: .07em;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  /* Erst steht das Zitat, dann kommt der Strich. Ausgelöst wird er von einem
     eigenen Beobachter in seite.js, der wartet, bis das Zitat ganz im Blick
     steht. An der Einblendung des Abschnitts zu hängen war zu früh: die
     beginnt schon, wenn oben eine Handbreit davon auftaucht, und der Strich
     war fertig, bevor man das Zitat lesen konnte. */
  transition: transform 950ms var(--kurve) 260ms;
}
.ueber__zitat span.ist-unterstrichen::after { transform: scaleX(1); }
/* Ohne JavaScript steht der Strich einfach da. */
.kein-js .ueber__zitat span::after { transform: scaleX(1); }

/* Laufband: das einzelne Stück hebt sich aus der Reihe. */
.band__stueck { transition: transform var(--tempo) var(--kurve); }
.band__stueck:hover { transform: translateY(-5px); }

/* Filter: der gewählte Knopf sitzt fest, die anderen geben nach und füllen
   sich von unten — wie die Plattform-Knöpfe. */
.filter__knopf {
  position: relative;
  overflow: hidden;
  transition: transform var(--tempo) var(--kurve),
              background-color var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve),
              color var(--tempo) var(--kurve);
}
.filter__knopf::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(224, 154, 48, .16);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 380ms var(--kurve);
  z-index: -1;
}
.filter__knopf:hover::before { transform: scaleY(1); }
.filter__knopf:hover { transform: translateY(-2px); border-color: var(--gold); }
.filter__knopf[aria-pressed="true"] { transform: none; }
.filter__knopf[aria-pressed="true"]::before { transform: none; }

/* Fusszeile: die Linie wächst ein, statt einfach da zu sein. line-height 1 aus
   demselben Grund wie beim Pfeil-Link: die 1.65 aus dem body machen das
   Element höher als die Schrift, und die Linie hinge sonst weit darunter. */
.fuss__links a {
  position: relative;
  line-height: 1;
  padding-bottom: 3px;
  border-bottom-color: transparent !important;
}
.fuss__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tempo) var(--kurve);
}
.fuss__links a:hover::after { transform: scaleX(1); }

/* Formular: das aktive Feld hebt seine Beschriftung an und färbt sie golden —
   man sieht auf einen Blick, wo man gerade schreibt. */
.feld label { transition: color var(--tempo) var(--kurve), transform var(--tempo) var(--kurve); }
.feld:focus-within label { color: var(--gold); transform: translateX(.2rem); }

/* Die Zahlen im Hero und in der Aufteilung zählen beim ersten Erscheinen hoch
   (seite.js). Feste Ziffernbreite, sonst wackelt die Zeile beim Zählen. */
.zaehlt { font-variant-numeric: tabular-nums; }

/* ── Alles, was einen echten Mauszeiger braucht ──────────────────────────── */
/* Auf Touchgeräten gibt es kein Schweben: dort würden diese Effekte erst nach
   dem Antippen auslösen und wie ein Fehler wirken. */
@media (hover: hover) and (pointer: fine) {
  /* Ein feiner Ring läuft dem Zeiger nach. Er ersetzt den Mauszeiger nicht —
     der bleibt sichtbar, sonst wird die Bedienung zum Ratespiel. Der Ring ist
     der eigentliche «teure» Effekt: er kostet nichts und ist überall spürbar. */
  .spur {
    position: fixed;
    top: 0; left: 0;
    width: 2.4rem; height: 2.4rem;
    margin: -1.2rem 0 0 -1.2rem;
    border: 1.5px solid var(--gold);
    border-radius: 50%;
    pointer-events: none;
    /* Über der Kopfzeile (z-index 100): sonst verschwindet die Spur, sobald man
       nach oben fährt, und die Bewegung wirkt zerschnitten. */
    z-index: 210;
    opacity: 0;
    transition: opacity 400ms var(--kurve),
                width 320ms var(--kurve), height 320ms var(--kurve),
                margin 320ms var(--kurve),
                background-color 320ms var(--kurve),
                border-color 320ms var(--kurve);
    will-change: transform;
  }
  .spur.ist-da { opacity: .85; }

  /* Über Anfassbarem wird der Ring grösser und füllt sich — das Gefühl, dass
     die Seite auf einen zugeht, bevor man geklickt hat. */
  .spur.ist-warm {
    width: 3.6rem; height: 3.6rem;
    margin: -1.8rem 0 0 -1.8rem;
    background: rgba(224, 154, 48, .16);
    border-color: var(--gold-hell);
  }

  /* Über den Produktfotos verschwinden beide ganz: dort stört jede Zutat. */
  /* Zügig weg, nicht über die volle Einblendzeit: sonst schleift die Spur noch
     über das halbe Foto, bevor sie verschwindet. */
  .spur.ist-still { opacity: 0; transition-duration: 200ms; }

  /* Die weiche Aufhellung als zweite, ruhigere Ebene. Ihr Ton richtet sich nach
     dem Abschnitt, über dem der Zeiger gerade steht: auf hellem Creme wäre ein
     helles Leuchten unsichtbar, auf dem dunklen Abschnitt ein dunkles. seite.js
     setzt dafür die Klasse, die Farbe steht hier. */
  .schleier {
    position: fixed;
    top: 0; left: 0;
    /* Eng um den Ring herum statt als halbe Bildschirmfläche: mit 32rem war es
       kein Lichtschein mehr, sondern ein Farbfeld, das über ganze Abschnitte
       lief. */
    width: 9rem; height: 9rem;
    margin: -4.5rem 0 0 -4.5rem;
    border-radius: 50%;
    background: radial-gradient(circle,
                rgba(var(--schleier-ton, 224, 154, 48), var(--schleier-kraft, .3)),
                rgba(var(--schleier-ton, 224, 154, 48), 0) 68%);
    pointer-events: none;
    /* Über den Abschnitten statt darunter. Vorher lag der Schleier mit
       z-index 0 hinter allem: auf dem Hero sah man ihn, weil der keine eigene
       Hintergrundfarbe hat, aber sobald ein Abschnitt eine bekam (Creme,
       Hellblau, Dunkelblau), war er restlos verdeckt. Und über der Kopfzeile,
       damit die Spur durchgehend wirkt statt am oberen Rand abzureissen. */
    z-index: 205;
    /* Damit er von oben nichts zudeckt, wird er eingerechnet statt aufgelegt:
       auf hellem Grund dunkelt er warm ab, auf dem dunklen Abschnitt hellt er
       auf (siehe .schleier--tief). Der Text bleibt dadurch lesbar. */
    mix-blend-mode: multiply;
    opacity: 0;
    /* KEINE Übergangszeit auf background: die Tonwerte sind Variablen, und auf
       einer Eigenschaft mit transition rechnet der Browser sie nicht neu (siehe
       den @property-Block oben). Der harte Farbwechsel fällt nicht auf, weil er
       beim Wandern über eine Abschnittsgrenze passiert. */
    transition: opacity 700ms var(--kurve);
    will-change: transform;
  }
  .schleier.ist-da { opacity: 1; }
  /* Muss NACH .ist-da stehen: beide Regeln wiegen gleich schwer, und bei
     Gleichstand gewinnt die spaetere. Stand sie davor, blieb der Schein ueber
     den Produktfotos einfach liegen. */
  .schleier.ist-still { opacity: 0; transition-duration: 200ms; }

  /* Gold auf hellem Grund, Navy auf dem Hellblau, warmes Gelb auf dem dunklen
     Abschnitt. Immer der Ton, der sich vom Untergrund abhebt, und kräftig
     genug, dass man ihn auch auf dem satten Creme noch sieht. */
  .schleier--papier { --schleier-ton: 224, 154, 48; --schleier-kraft: .26; }
  .schleier--creme  { --schleier-ton: 199, 124, 20; --schleier-kraft: .30; }
  .schleier--himmel { --schleier-ton: 236, 168, 60; --schleier-kraft: .42; }
  /* Auf dem dunklen Abschnitt würde Abdunkeln nichts bringen — dort wird
     aufgehellt statt eingedunkelt. */
  .schleier--tief {
    --schleier-ton: 250, 201, 58;
    --schleier-kraft: .23;
    mix-blend-mode: screen;
  }

  /* Der Ring passt sich mit an, sonst verschwindet er auf dunklem Grund. */
  .spur--tief { border-color: var(--gold-hell); }
  .spur--tief.ist-warm { background: rgba(250, 201, 58, .2); }
  .spur--himmel { border-color: var(--tinte); }
  .spur--himmel.ist-warm { background: rgba(46, 58, 130, .14); border-color: var(--tinte); }

  /* Der Schleier darf nichts überdecken: die Inhaltsflächen liegen darüber.
     Die Kopfzeile bleibt aussen vor — sie ist sticky mit z-index 100 und läge
     mit position:relative nicht mehr oben fest. */
  main, .fuss { position: relative; z-index: 1; }
}

/* ── Kleinere Bildschirme ────────────────────────────────────────────────── */
@media (max-width: 62rem) {
  .hero__raster,
  .ueber__raster,
  .kontakt__raster { grid-template-columns: minmax(0, 1fr); }
  .hero__raster { gap: var(--s6); }
  .stapel { max-width: 24rem; }

  /* Das Formular steht jetzt unter dem Text statt daneben — es gibt keine
     Überschrift mehr auf gleicher Höhe, an die es sich anlehnen müsste, und
     keine Nachbarspalte, mit der etwas unten abschliessen müsste. */
  .kontakt__raster > div:nth-child(2) { margin-top: 0; }
  .kontakt__raster > div:first-child { display: block; }
  .kontakt__raster .lead { margin-bottom: var(--s3); }

  /* Ab hier steht die Bühne unter dem Text statt daneben. Es gibt keine
     Nachbarspalte mehr, an der sie sich oben und unten ausrichten müsste —
     alles, was dafür gebaut ist, kommt zurück auf das einfache Verhalten:
     feste Überlappung, Marke ohne Ausgleich, Stapel in seiner eigenen Höhe. */
  .buehne { display: block; }
  .buehne__marke { margin-top: 0; margin-bottom: var(--s4); }
  .stapel { flex: none; justify-content: flex-start; margin-bottom: 0; }
  .stapel__bild + .stapel__bild { margin-top: -2.6rem; }
  .schritt { grid-template-columns: 3rem minmax(0, 1fr); }
  .schritt p { grid-column: 2; }
}

/* Die sechs Links brauchen gemessen 563 px. Wird die Rasterspalte schmaler,
   bricht «Instagram» um und space-between zerrt die erste Zeile auseinander —
   das sieht schlimmer aus, als die Bündigkeit wert ist. Ab hier deshalb zurück
   auf die alte Aufteilung: Logo links, Reihe rechts. Der Wert 70rem ist
   gemessen, nicht geraten: bei 1000 px brach es, bei 1180 px nicht. */
@media (max-width: 70rem) {
  .fuss__raster {
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: var(--s5);
  }
  .fuss__links--gefuellt { justify-content: flex-end; }
}

@media (max-width: 48rem) {
  /* Die Namensschilder hängen auf grossen Schirmen neben der Münze. Auf dem
     Handy ist dafür kein Platz: gemessen ragten alle drei zehn Pixel über den
     Rand hinaus. Hier sitzen sie stattdessen mittig unter ihrer Münze, und der
     Abstand zwischen den Münzen wächst, damit sie nicht überlappen. */
  .stapel { max-width: 100%; }
  /* Mittig statt versetzt: der seitliche Versatz ist eine Geste für breite
     Schirme. Auf dem Handy drückt er die Münzen an den Rand, und die darunter
     zentrierten Schilder ragen hinaus. */
  .stapel__bild,
  .stapel__bild:nth-child(1),
  .stapel__bild:nth-child(2),
  .stapel__bild:nth-child(3) { align-self: center; }
  .stapel__bild { width: 58%; }
  /* Das Namensschild hängt absolut unter der Münze und bringt keine eigene Höhe
     mit. Zweizeilige Namen («Einhell TC-AG 18/115 Li Akku-Winkelschleifer»)
     brauchen darum von Hand Platz, sonst reichen sie in die nächste Münze.
     Die Lücke ist zugleich der Raum, in dem das Schild mittig sitzt. */
  .stapel__bild + .stapel__bild { margin-top: 4rem; }
  .stapel__bild:nth-child(odd) .stapel__name,
  .stapel__bild:nth-child(even) .stapel__name {
    left: 50%;
    right: auto;
    /* Der Ansatz sitzt in der Mitte der 4rem-Lücke, das Schild zieht sich um
       seine halbe eigene Höhe zurück. Dadurch ist der Abstand nach oben zur
       eigenen Münze und nach unten zur nächsten gleich gross — und zwar bei
       einzeiligen wie bei zweizeiligen Namen, ohne dass die Höhe bekannt sein
       muss. Mit festem Abstand von oben sass ein zweizeiliger Name tiefer und
       klebte an der nächsten Münze. */
    top: calc(100% + 2rem);
    /* Feste Breite statt max-content: bei zweizeiligen Namen richtete sich die
       Breite nach der längeren Zeile, und die kürzere stand dann versetzt —
       der dritte Titel sah dadurch schief aus. */
    width: 15rem;
    max-width: 86vw;
    transform: translate(-50%, -50%);
    flex-direction: row;
    justify-content: center;
    text-align: center;
    opacity: 1;
  }
  /* Am Rechner rückt das Schild beim Überfahren einen Hauch zur Seite, weg von
     der Münze — dort hängt es seitlich und die Bewegung liest sich als Zeigen.
     Auf dem Handy steht es mittig unter der Münze und hält seine Mitte allein
     über translateX(-50%). Die Hover-Regel ersetzt genau diese Verschiebung,
     das Schild verlor also seine Zentrierung und sprang um die halbe eigene
     Breite nach rechts aus dem Bild. Hier bleibt es, wo es ist. */
  .stapel__bild:nth-child(odd):hover .stapel__name,
  .stapel__bild:nth-child(even):hover .stapel__name {
    transform: translate(-50%, -50%);
  }

  /* Der Goldstrich vor dem Text verschiebt die optische Mitte. Auf dem Handy,
     wo der Name mittig unter der Münze steht, kommt er deshalb weg. */
  .stapel__strich { display: none; }
  .stapel__name { gap: 0; }

  /* Der weite Buchstabenabstand sprengt auf 360-px-Geräten die Zeile:
     «Kommission & Ankauf · Luzern» brach dort zweizeilig um. */
  .marke, .buehne__marke { letter-spacing: .12em; font-size: .8125rem; }

  /* Auf dem Handy sitzt der Titel zwischen den Kennzahlen und der ersten Münze
     und wurde von beiden eingeklemmt. Er bekommt oben und unten dieselbe Luft
     (40 px) — der Abstand kommt allein aus dem Raster, sonst standen die
     Kennzahlen und der Titel mit 88 px weit auseinander. Unten hat die Bühne
     zusätzlich Platz, weil unter der letzten Münze noch ihr Namensschild hängt
     und sonst am Laufband klebt. */
  .hero__raster { gap: var(--s5); }
  .buehne { padding-block: 0 4rem; }
  .buehne__marke { margin-bottom: var(--s5); }

  /* Beide Kennzahlreihen dreispaltig: nebeneinander lesen sie sich als
     zusammengehöriger Block. Untereinander wirkten sie wie drei einzelne
     Aussagen, und 2 + 1 umgebrochen wie ein Unfall. Damit die drei Spalten auf
     375 px nebeneinander Platz haben, rücken Zahl und Text enger zusammen. */
  .hero__belege {
    display: grid;
    /* Die mittlere Spalte bekommt ihre Inhaltsbreite, links und rechts teilen
       sich den Rest zu gleichen Teilen — dadurch steht «60 %» wirklich in der
       Mitte der Reihe. Mit drei gleichen Dritteln oder einer breiten dritten
       Spalte sass es sichtbar zu weit links. */
    grid-template-columns: 1fr max-content 1fr;
    gap: var(--s2) var(--s1);
    align-items: start;
  }
  /* Alles eine Spur kleiner als bisher: erst dadurch stehen «3 Plattformen»
     und «Artikel gerade online» nebeneinander je auf einer Zeile. Gemessen auf
     375 px — dort ist die Reihe 343 px breit, gebraucht werden 328. */
  .hero__beleg { text-align: center; font-size: .72rem; line-height: 1.35; }
  .hero__beleg b { font-size: 1.1rem; white-space: nowrap; }

  /* Der Einflug kommt von weiter aussen, als die Bühne breit ist (±72 px auf
     350 px). Auf dem Handy schiebt das die Münzen über den Rand und lässt die
     Seite beim Laden zucken. Kürzerer Weg, gleiche Geste. */
  .js .buehne .stapel__bild:nth-child(odd)  { --flug-x: -1.6rem; --flug-dreh: 18deg; }
  .js .buehne .stapel__bild:nth-child(even) { --flug-x:  1.6rem; --flug-dreh: -18deg; }
  /* Der Landezustand muss hier wiederholt werden. Er steht oben im Stylesheet
     (.js .buehne.ist-da .stapel__bild) und hat genau dasselbe Gewicht wie die
     beiden Regeln darüber — bei Gleichstand gewinnt die spätere, und das waren
     bisher die Startwerte des Fluges. Auf dem Handy blieben die Münzen deshalb
     nach dem Einflug 26 px versetzt und 18 Grad gedreht stehen. */
  .js .buehne.ist-da .stapel__bild {
    --flug-x: 0px;
    --flug-dreh: 0deg;
  }

  /* Kein Zeiger, keine Zeigerbewegung: die Parallaxe verschiebt am Handy nur
     die fertig gelandeten Münzen samt ihrer Namensschilder. */
  .stapel__bild { --par-x: 0px; --par-y: 0px; }

  /* Tippziele: Apple und Google empfehlen mindestens 44 px Höhe. Gemessen
     waren die Pfeil-Links 20 px und die Fusszeilen-Links 16 px hoch — mit dem
     Finger trifft man das nur mit Glück. Verbreitert wird über den Innenabstand,
     die Schrift bleibt gleich gross. */
  .pfeil-link {
    min-height: 44px;
    align-items: center;
    padding-block: .7rem;
  }
  .fuss__links { gap: var(--s2) var(--s4); }
  .fuss__links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .direkt__zeile { min-height: 52px; }

  .fuss__logo img { width: 3rem; }

  /* 11 px liest sich am Handy zäh, gerade bei den Namensschildern unter den
     Münzen. */
  .stapel__name { font-size: .75rem; }

  .kopf__schalter { display: inline-flex; }
  .kopf__nav {
    position: fixed;
    inset: 4.5rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s3) var(--rand) var(--s5);
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
    transform: translateY(-120%);
    transition: transform var(--tempo) var(--kurve);
  }
  .kopf__nav.ist-offen { transform: translateY(0); }
  .kopf__nav a {
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--linie);
    font-size: 1.0625rem;
  }
  .kopf__nav a::after { display: none; }
  .kopf__knopf { display: none; }
  .nav__knopf {
    display: inline-flex;
    margin-top: var(--s4);
    border-bottom: 2px solid var(--gold);   /* schlägt die Trennlinie der Nav-Links */
  }

  /* Die frühere Regel «flex: 1 1 8rem» stammt aus der Zeit, als die drei
     Kennzahlen nebeneinander standen — dort war es eine Mindestbreite. Seit
     sie untereinander stehen, wäre es eine Mindest*höhe* von 128 px, und
     zwischen den Zahlen klafften Löcher. */
  .band__stueck { width: 7rem; }
  .annahme__punkt { padding-right: 0; }

  /* Auf dem Handy zwei Karten nebeneinander — eine einzelne wirkt erschlagend
     und man scrollt ewig. */
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .karte__titel { font-size: .875rem; }
  .karte__meta { font-size: .75rem; }
  .karte__etikett { top: -.55rem; right: -.4rem; font-size: .8125rem; }
  /* Untereinander gestapelt wäre eine rechtsbündige Linkreihe unter einem
     linksbündigen Logo schief — am Handy beginnen beide links. */
  .fuss__raster {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    align-items: start;
    gap: var(--s4);
  }
  .fuss__links,
  .fuss__links--gefuellt { justify-content: flex-start; }
}

/* ── Weniger Bewegung ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .zeigt { opacity: 1; transform: none; }
  .band__spur { animation: none; }
  .teilung__anteil--du  { width: 60%; }
  .teilung__anteil--ich { width: 40%; }

  /* Die Bewegungsebene wird vollständig stillgelegt: kein Zeigerschleier,
     keine Neigung, kein Zug, keine Parallaxe, keine Münzdrehung. Die
     Endzustände bleiben stehen, damit nichts unsichtbar oder halb gedreht
     hängen bleibt. */
  .schleier { display: none; }
  .kopf__logo img.dreht,
  .fuss__logo img.dreht { animation: none; }
  .karte { --karte-x: 0deg; --karte-y: 0deg; }
  .knopf { --zug-x: 0px; --zug-y: 0px; }
  .stapel__bild { --par-x: 0px; --par-y: 0px; }
  .karte__bild::after { display: none; }
  .js .zeigt .weg__liste li { opacity: 1; transform: none; }
  .ueber__zitat span::after { transform: scaleX(1); }
}

/* ── Druck ───────────────────────────────────────────────────────────────── */
@media print {
  .kopf, .band, .funde__mehr, .formular { display: none; }
  body { background: #fff; color: #000; }
}

/* ── Vertrauensbelege ────────────────────────────────────────────────────── */
/* Die Zahlen von Ricardo: 973 positive Bewertungen und über 2000 verkaufte
   Artikel sind das stärkste Argument der Seite. Sie stehen bewusst im Abschnitt
   «Über mich» und nicht im Hero — dort wirken sie wie eine Behauptung, hier wie
   ein Beleg, den man nachprüfen kann (die erste Kachel verlinkt aufs Profil). */
.belege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s3);
  margin-top: var(--s6);
  /* Zusammen mit dem Polster der Kachel ergibt das oben denselben Abstand zur
     Trennlinie wie unten zur Goldlinie. Vorher waren es 57 px gegen 16. */
  padding-top: .75rem;
  border-top: 1px solid var(--linie);
}
.beleg {
  position: relative;
  padding: 1rem 0;
  text-decoration: none;
  color: inherit;
  /* Mittig statt linksbündig: bei einstelligen Zahlen wie der «7» hing die
     Ziffer sonst am linken Rand und wirkte neben ihrer Beschriftung verloren. */
  text-align: center;
  transition: transform var(--tempo) var(--kurve);
}
.beleg b {
  display: block;
  font-family: var(--display);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.beleg span {
  display: block;
  margin-top: .45rem;
  font-size: .8125rem;
  line-height: 1.4;
  opacity: .82;
}
/* Die Linie wächst unter jeder Kachel ein, auch unter den beiden nicht
   verlinkten: als Gestaltungselement gehören die drei zusammen, und eine
   Kachel ohne Reaktion wirkt daneben wie vergessen. Angehoben wird weiterhin
   nur die verlinkte — dort führt der Klick auch irgendwohin. */
.beleg::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tempo) var(--kurve);
}
.beleg:hover::after { transform: scaleX(1); }
a.beleg:hover { transform: translateY(-3px); }


/* ── Vertrauensbelege auf dem Handy ──────────────────────────────────────── */
/* Diese Media-Query steht bewusst hier unten und nicht oben bei den übrigen
   Handy-Regeln: die Grundregel für .belege folgt im Stylesheet erst danach,
   und bei gleichem Gewicht gewinnt die spätere. Weiter oben blieb der Block
   deshalb zweispaltig. */
@media (max-width: 48rem) {
  .belege {
    grid-template-columns: repeat(3, 1fr);
    /* Seitlich enger, damit den drei Spalten mehr Text-Breite bleibt. */
    gap: var(--s2) var(--s1);
    /* Kein align-items: start. Gestreckt sind alle drei Kacheln so hoch wie
       die höchste, und die Goldlinie am unteren Rand steht überall auf
       derselben Höhe — auch unter «Verkaufte Artikel», wo nur eine Zeile
       steht. Vorher endete jede Kachel dort, wo ihr Text aufhörte, und die
       drei Linien sassen auf drei verschiedenen Höhen. */
  }
  .beleg b { font-size: 1.5rem; }
  /* Eine Spur kleiner als bisher: "Positive Bewertungen" braucht bei .6875rem
     110 px und passte nicht in die 104 px breite Spalte — die Beschriftung
     brach auf drei Zeilen um, während die Nachbarn eine und zwei hatten. */
  .beleg span { font-size: .65rem; line-height: 1.4; }
}