/* ============================================================
   STARTSEITE DES SHOPS

   Dieses Blatt wird nur auf der Startseite geladen; jede andere Seite
   des Shops bleibt davon unberührt.

   Die Namen unten sind die des Entwurfs, die Werte die des Shops. Diese
   Brücke ist der ganze Trick: Der Entwurf führte eigene Farbwerte, der
   Shop hat längst welche – und seine schalten bereits zwischen heller
   und dunkler Ansicht um. Wer die Werte des Shops ändert, ändert die
   Startseite mit; doppelt gepflegt wird nichts.
   ============================================================ */
.shop-start {
  --papier:     var(--c-bg);
  --papier-2:   var(--c-surface);
  --papier-3:   var(--c-panel-2);
  --linie:      var(--c-line);
  --ink:        var(--c-ink);
  --ink-2:      var(--c-ink-soft);
  --ink-3:      var(--c-muted);
  --rot:        var(--c-accent);
  --rot-hell:   var(--c-accent-dk);
  --rot-dunkel: var(--c-accent-dk);
  --rot-zart:   var(--c-accent-sft);
  --gold:       #d8ae52;
  --gruen:      var(--c-success);
  --glut:       var(--grad-gold);
  --glut-schein: var(--glow-gold);
  --tief:       var(--grad-ink);

  --schrift-anzeige: var(--font-display);
  --schrift-text:    var(--font-body);

  --rund-klein: var(--radius-sm);
  --rund:       var(--radius);
  --rund-gross: var(--radius-lg);
  --schatten:   var(--shadow-sm);
  --schatten-2: var(--shadow);
  --weich:      var(--transition);
  --rand-zart:  rgba(245,245,246,.28);

  --breit:      min(var(--container), 100% - 2.5rem);
}
/* In der hellen Ansicht ist der zarte Rand dunkel, nicht hell. */
:root[data-thema="hell"] .shop-start { --rand-zart: rgba(22,22,26,.2); }

/* Der Entwurf setzte seine Spalte selbst; im Shop heißt sie .container.
   Beide Namen bleiben gültig, damit das Markup unverändert übernommen
   werden kann. */
.shop-start .breite { width: var(--breit); margin-inline: auto; }

/* Der Maßstab der Überschriften gilt nur hier: Auf den übrigen Seiten
   des Shops steht der gewohnte. */
.shop-start h1, .shop-start h2 {
  font-family: var(--schrift-anzeige); font-weight: 600; line-height: 1.04;
  margin: 0; letter-spacing: -.005em; text-wrap: balance; color: var(--c-ink);
}
.shop-start h1 { font-size: clamp(2.9rem, 1.6rem + 4.6vw, 4.4rem); letter-spacing: -.012em; }
.shop-start h2 { font-size: clamp(2.5rem, 1.3rem + 4.4vw, 4.6rem); letter-spacing: -.014em; }
/* Hero-Titel sehen auf allen Folien gleich aus – egal ob h1 oder h2. */
.shop-start .hero__titel { font-size: clamp(2.9rem, 1.6rem + 4.6vw, 4.4rem); letter-spacing: -.012em; }
.shop-start h3 {
  font-size: 1.06rem; font-family: var(--schrift-text); font-weight: 700;
  line-height: 1.3; margin: 0; letter-spacing: -.01em; color: var(--c-ink);
}
.shop-start p { margin: 0; }
.shop-start ul { list-style: none; margin: 0; padding: 0; }
.shop-start img { max-width: 100%; display: block; }
.shop-start a { color: inherit; text-decoration: none; }
/* Die Zeile darüber ist stärker als .knopf: ein Element plus eine
   Klasse schlägt eine Klasse allein. Auf den roten Knöpfen stand
   dadurch die Textfarbe der Seite statt Weiß – im Dunkeln kaum zu
   merken, im Hellen dunkle Schrift auf Rot. */
.shop-start a.knopf { color: var(--fg); }

*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* Überschriften in der Anzeigeschrift, Fließtext in Inter – wie auf
   der Website. Barlow Condensed ist schmal: Bei gleicher Zeilenbreite
   trägt sie ein paar Punkt mehr, deshalb der größere Maßstab. */
h1, h2 { font-family: var(--schrift-anzeige); font-weight: 600; line-height: 1.04; margin: 0; letter-spacing: -.005em; text-wrap: balance; }
h1 { font-size: clamp(2.9rem, 1.6rem + 4.6vw, 4.4rem); letter-spacing: -.012em; }
/* Der Sprung zwischen Überschrift und Text macht die Haltung, nicht
   die Schriftart. Vorher lagen h2 und Fließtext zweieinhalb Stufen
   auseinander, jetzt sind es vier. */
h2 { font-size: clamp(2.5rem, 1.3rem + 4.4vw, 4.6rem); letter-spacing: -.014em; }
/* h3 steht über Karten und Kacheln – dort dieselbe Rolle wie h4 auf
   der Website: Inter, fett, nicht die Anzeigeschrift. */
h3 { font-size: 1.06rem; font-family: var(--schrift-text); font-weight: 700; line-height: 1.3; margin: 0; letter-spacing: -.01em; }

.breite { width: var(--breit); margin-inline: auto; }

/* Nur für Vorleseprogramme. Der Shop nennt die Klasse sonst
   .sr-only; das übernommene Markup benutzt .sr, und ohne diese
   Regel stünden die Hinweise sichtbar auf der Seite. */
.shop-start .sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Knöpfe ---------- */
/* Maße, Kurve und Verlauf der Website. Der Hauptknopf trägt keinen
   flachen Ton, sondern denselben Verlauf wie dort – ein flacher
   daneben fällt sofort auf, wenn beide Seiten offen sind. */
.knopf {
  --bg: var(--rot); --fg: #fff; --rand: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  /* Schlanker als vorher: 1 rem Polster oben und unten machten aus
     jedem Knopf eine Fläche. Die Schrift trägt, nicht der Rand darum. */
  padding: .72rem 1.4rem; border: 1.5px solid var(--rand); border-radius: 999px;
  background: var(--glut); color: var(--fg); cursor: pointer;
  font-family: var(--schrift-text); font-weight: 600; font-size: .85rem; letter-spacing: .01em;
  text-decoration: none; will-change: transform;
  transition: transform var(--weich), background var(--weich), border-color var(--weich), color var(--weich), box-shadow var(--weich);
}
.knopf:hover { transform: translateY(-3px); box-shadow: var(--glut-schein); }
.knopf:active { transform: translateY(-1px); }
.knopf--linie { --fg: var(--ink); --rand: var(--rand-zart); background: transparent; }
.knopf--linie:hover { background: var(--ink); --fg: var(--papier); border-color: var(--ink); box-shadow: var(--schatten); }
.knopf--klein { padding: .5rem 1rem; font-size: .78rem; }
.knopf--voll { width: 100%; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--papier-2); overflow: hidden; }
.hero__innen {
  display: grid; grid-template-columns: 1fr; gap: 2.5rem;
  padding-block: clamp(2.5rem, 1rem + 6vw, 5.5rem);
  align-items: center;
}
.hero__marke {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--schrift-text);
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--rot-hell); font-weight: 700; margin-bottom: 1.1rem;
}
.hero__marke::before { content: ""; width: 30px; height: 2px; background: var(--glut); border-radius: 2px; }
/* Das Herz trägt die Markenfarbe und steht eine Spur größer als die
   Versalien daneben – als Zeichen wirkt es sonst zu klein. */
/* Zwei Schläge, dann Ruhe – so schlägt ein Herz. Ein gleichmäßiges
   Pulsieren sähe aus wie ein Ladezeichen. */
@keyframes herzschlag {
  0%, 100% { transform: scale(1); }
  12%      { transform: scale(1.19); }
  24%      { transform: scale(1); }
  36%      { transform: scale(1.13); }
  48%      { transform: scale(1); }
}
.hero__herz, .herkunft__herz {
  display: inline-block;
  animation: herzschlag 2.6s ease-in-out infinite;
}
.hero__herz { color: var(--rot-hell); font-size: 1.25em; line-height: 0; vertical-align: -.06em; }
/* In der Überschrift ist die Schrift ohnehin groß – dort muss das
   Zeichen kleiner werden, sonst kippt die Zeile nach vorn. */
.held__folie .hero__titel .hero__herz { font-size: .74em; vertical-align: .02em; }
/* Die Zahl darf größer sein als die Zeile darunter: Sie ist der Grund,
   warum das Schild dort hängt. */
/* Mit dem Element davor: .held__schild b ist spezifischer als eine
   einzelne Klasse und hätte die Größe sonst zurückgesetzt. */
.held__schild b.held__preis { font-size: 1.22rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
/* Diese vier Klassen leben im Slider weiter – der alte Hero ist weg,
   die Namen sind geblieben, weil sie dasselbe bezeichnen. */
.shop-start .hero__text { font-size: 1.08rem; color: var(--ink-2); max-width: 46ch; margin: 1.15rem 0 2.6rem; }
/* Ein Fingerbreit zwischen den Knöpfen: Bei 0,7 rem standen sie auf
   48 Punkten Höhe so dicht, dass sie wie ein geteilter Knopf aussahen.
   1,1 rem trennt sie, ohne sie auseinanderzureißen – und die Zeile
   darüber bekommt etwas mehr Abstand, damit die Knöpfe nicht am Text
   kleben. */
.hero__ctas { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.hero__zahlen { display: flex; gap: 2.2rem; margin-top: 2.4rem; flex-wrap: wrap; }
.hero__zahl b { display: block; font-family: var(--schrift-anzeige); font-weight: 600; font-size: 1.95rem; line-height: 1.1; }
.hero__zahl span { font-size: .82rem; color: var(--ink-3); }
.hero__bild { position: relative; }
.hero__bild img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--rund); box-shadow: var(--schatten-2);
}
.hero__schild {
  position: absolute; left: -1rem; bottom: 1.6rem;
  background: var(--papier-3); border: 1px solid var(--linie); border-radius: var(--rund); box-shadow: var(--schatten-2);
  padding: .85rem 1.2rem; display: flex; align-items: center; gap: .8rem; max-width: 19rem;
}
.hero__schild svg { width: 26px; height: 26px; color: var(--rot); flex-shrink: 0; }
.hero__schild b { display: block; font-size: .88rem; margin-bottom: .1rem; }
.hero__schild span { font-size: .78rem; color: var(--ink-3); line-height: 1.4; }

/* ---------- Kopfslider ----------

   Drei Folien, übereinander gestapelt und übergeblendet. Nicht
   seitlich geschoben: Ein Bild, das hereinfährt, zieht den Blick auf
   die Bewegung; ein übergeblendetes lässt ihn auf dem Bild.

   Zweispaltig und nicht vollflächig: Die Fotos sind hochkant, die
   Bühne ist breit. Formatfüllend bliebe von einer Mappe nur ein
   Ausschnitt Gewebe übrig – ein Kopfbereich ohne das Produkt darin.

   Die Höhe steht fest, damit beim Überblenden nichts springt. */
.held { position: relative; overflow: hidden; background: var(--papier-2); }
/* Die Folien liegen absolut übereinander – sie können den Kasten
   nicht aufschieben. Er muss die höchste Folie von sich aus fassen,
   sonst steht der Knopf darunter im Zahlenband. */
.held__folien { position: relative; min-height: clamp(630px, 74vh, 720px); }
.held__folie {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .8s ease, visibility .8s;
  display: grid; align-items: center;
}
.held__folie.ist-da { opacity: 1; visibility: visible; }
.held__innen {
  display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center;
  padding-block: 2.5rem 4.5rem;
}
.held__wort { position: relative; z-index: 2; }
.held__karte { position: relative; }
.held__rahmen {
  position: relative; overflow: hidden; border-radius: var(--rund);
  aspect-ratio: 4/3; box-shadow: var(--schatten-2); border: 1px solid var(--linie);
}
.held__rahmen img {
  width: 100%; height: 100%; object-fit: cover;
  transform: translate3d(0, var(--par, 0px), 0) scale(1.12);
  will-change: transform;
}
.held__folie.ist-da .held__rahmen img { animation: langsamNah 12s ease-out forwards; }

/* Freigestellt: kein Rand, keine Fläche, kein Kastenschatten – der
   Schatten hängt am Umriss der Mappen selbst. Das Bild wird nicht
   beschnitten, sondern eingepasst; angeschnittene Ecken sähe man
   hier sofort, weil die Mappen gefächert liegen.

   Auch kein langsames Heranfahren: Ein Foto im Rahmen darf sich
   hinter seiner Kante bewegen, ein freistehendes wüchse sichtbar
   über seinen Platz hinaus. */
.held__rahmen--frei {
  border: 0; box-shadow: none; background: none; overflow: visible;
  aspect-ratio: 800 / 733;
}
.held__rahmen--frei img {
  object-fit: contain;
  transform: translate3d(0, var(--par, 0px), 0);
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.28));
}
.held__folie.ist-da .held__rahmen--frei img { animation: none; }

/* Hochkant: Die Höhe gibt den Ton an, die Breite folgt aus dem
   Seitenverhältnis. Der Rahmen steht links in seiner Spalte, damit
   das Schild an seiner unteren Ecke hängen bleibt – zentriert wäre
   es davon abgerückt und stünde für sich allein. */
.held__rahmen--hoch {
  aspect-ratio: 3 / 4;
  height: min(58vh, 500px); width: auto;
  margin-right: auto;
}
/* Auf hellem Grund trägt ein weicher Schatten unter dem Papier mehr
   als ein schwarzer. */
:root[data-thema="hell"] .held__rahmen--frei img {
  filter: drop-shadow(0 18px 34px rgba(20,20,26,.18));
}
/* Folie 2 zeigt keine Aufnahme, sondern die Zeichnung des
   Konfigurators. Sie steht frei wie das freigestellte Foto auf der
   ersten Folie: kein Rahmen, keine Flaeche, kein Kastenschatten -
   den bringt die Zeichnung selbst mit. Auch kein festes
   Seitenverhaeltnis: Die Hoehe kommt aus dem gewaehlten Format. */
.held__rahmen--zeichnung {
  border: 0; box-shadow: none; background: none; overflow: visible;
  aspect-ratio: auto; margin: 0; display: grid; place-items: center;
}
.held__rahmen--zeichnung .vorschau__bild { width: 100%; max-width: 460px; }

@keyframes langsamNah { from { scale: 1.12; } to { scale: 1.2; } }

.held__folie .hero__titel, .held__folie .hero__text, .held__folie .hero__ctas, .held__folie .hero__marke {
  opacity: 0; transform: translateY(16px);
}
.held__folie.ist-da .hero__marke { animation: herein .65s .05s cubic-bezier(.2,.7,.3,1) forwards; }
.held__folie.ist-da .hero__titel { animation: herein .65s .16s cubic-bezier(.2,.7,.3,1) forwards; }
.held__folie.ist-da .hero__text  { animation: herein .65s .28s cubic-bezier(.2,.7,.3,1) forwards; }
.held__folie.ist-da .hero__ctas  { animation: herein .65s .4s  cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes herein { to { transform: none; opacity: 1; } }

/* Schreibmaschine (nur mit Skript, siehe startseite.js): Die Überschrift
   steht sofort, ihre Zeichen werden nacheinander sichtbar. Absatz und
   Knöpfe warten mit ihrer Einblendung, bis die Zeile fertig ist –
   „paused" hält auch die Verzögerung der Animation an. */
.held[data-tippt] .held__folie .hero__titel { animation: none; opacity: 1; transform: none; }
.held[data-tippt] .held__folie.ist-da:not(.ist-getippt) .hero__text,
.held[data-tippt] .held__folie.ist-da:not(.ist-getippt) .hero__ctas { animation-play-state: paused; }
.tipp { visibility: hidden; }
.tipp.ist-da { visibility: visible; }
.tipp.ist-cursor::after {
  content: ""; display: inline-block; width: .07em; height: .82em;
  margin-left: .06em; vertical-align: -.04em; background: currentColor;
  animation: blinken .9s steps(2, start) infinite;
}
@keyframes blinken { to { visibility: hidden; } }

.held__steuer {
  position: absolute; left: 0; right: 0; bottom: 1.4rem; z-index: 3;
  display: flex; align-items: center; gap: .7rem; pointer-events: none;
}
.held__steuer > * { pointer-events: auto; }
.held__punkte { display: flex; gap: .5rem; margin-right: auto; }
.held__punkt {
  width: 34px; height: 4px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: var(--linie); position: relative; overflow: hidden;
}
.held__punkt.ist-da::after {
  content: ""; position: absolute; inset: 0; background: var(--rot);
  transform-origin: left; animation: fuellen 7s linear forwards;
}
.held__punkt.ist-halt.ist-da::after { animation-play-state: paused; }
@keyframes fuellen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.held__pfeil {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--linie); background: var(--papier-3); color: var(--ink);
  display: grid; place-items: center;
  transition: background var(--weich), border-color var(--weich), transform var(--weich);
}
.held__pfeil:hover { background: var(--rot); border-color: var(--rot); color: #fff; transform: scale(1.06); }
.held__pfeil svg { width: 18px; height: 18px; }

/* Das Schild bleibt am Bild, nicht an der Folie. */
.held__schild {
  position: absolute; left: -1rem; bottom: -1rem; z-index: 3;
  background: var(--papier-3); border: 1px solid var(--linie);
  border-radius: var(--rund); box-shadow: var(--schatten-2);
  padding: .85rem 1.2rem; display: flex; align-items: center; gap: .8rem; max-width: 19rem;
}
/* Beim freigestellten Bild wandert das Schild nach oben: Unten
   läuft die Farbpalette quer durch das Foto, und die soll man
   sehen – sie beantwortet die Frage nach den elf Farben besser
   als der Satz daneben. */
.held__karte--frei .held__schild { top: 0; bottom: auto; left: -1.5rem; }
.held__schild svg { width: 26px; height: 26px; color: var(--rot); flex-shrink: 0; }
.held__schild b { display: block; font-size: .88rem; margin-bottom: .1rem; }
.held__schild span { font-size: .78rem; color: var(--ink-3); line-height: 1.4; }

@media (min-width: 960px) {
  .held__innen { grid-template-columns: 1.02fr 1fr; gap: 4rem; }
}
@media (max-width: 959px) {
  /* Auf dem Handy sind die Folien höher als ein Bildschirm. Statt sie
     absolut in einen festen Kasten zu sperren (Foto und Preisschild
     wurden unten abgeschnitten), liegen sie in derselben Rasterzelle:
     Der Kasten wächst mit der höchsten Folie, die unsichtbare bleibt
     ausgeblendet. */
  .held__folien { min-height: 0; display: grid; }
  .held__folie { position: relative; inset: auto; grid-area: 1 / 1; }
  .held__schild { left: auto; right: 0; bottom: -.8rem; max-width: 16rem; }
}
/* ---------- Zahlenband unter dem Slider ---------- */
.zahlenband { background: var(--papier); border-bottom: 1px solid var(--linie); }
.zahlenband ul { list-style: none; margin: 0; padding: 1.4rem 0; display: flex; gap: 2.6rem; flex-wrap: wrap; }
.zahlenband b { font-family: var(--schrift-anzeige); font-weight: 600; font-size: 1.9rem; display: block; line-height: 1.05; }
.zahlenband span { font-size: .8rem; color: var(--ink-3); }

/* ---------- Laufband ----------
   Die Namen der Betriebe, die schon damit arbeiten. Es läuft, weil es
   mehr sind, als in eine Zeile passen – nicht als Effekt. */
/* Dunkel in beiden Ansichten, wie das Vertrauensband der Website: Die
   Namen stehen zwischen zwei hellen Abschnitten und sollen sich davon
   absetzen, nicht mitschwimmen. Deshalb eigene Farbwerte statt der
   umschaltenden. */
.laufband {
  color-scheme: dark;
  --rot-hell: #ff5a66;
  background: #0c0c0f; border-block: 1px solid #292930;
  padding: 1.5rem 0 1.7rem;
  position: relative;
}
/* Konturringe wie im Fußbereich. Ursprung in der Mitte: Das Band ist
   breit und flach, ein Ursprung am Rand ergäbe darin nur zwei, drei
   fast gerade Linien statt Ringen. */
.laufband::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-radial-gradient(circle at 50% -40%, rgba(245,245,246,.07) 0 1px, transparent 1px 54px);
  -webkit-mask-image: radial-gradient(140% 150% at 50% 0%, #000 18%, transparent 82%);
          mask-image: radial-gradient(140% 150% at 50% 0%, #000 18%, transparent 82%);
}
.laufband__wort, .laufband__fenster { position: relative; z-index: 1; }
.shop-start .laufband__wort {
  text-align: center; margin-bottom: 2rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--rot-hell);
}
/* Am Rand ausblenden statt hart abschneiden – sonst erscheint jeder
   Name, als würde er gegen eine Kante fahren. */
.laufband__fenster {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* 78 statt 44 Sekunden: Die Dauer gilt einer ganzen Kopie der Spur,
   und die ist mit achtzehn Namen 3700 statt 2078 Punkte breit. Bei
   44 Sekunden liefe das Band mit 84 Punkten je Sekunde statt der
   bisherigen 47 - lesbar bleibt es nur beim alten Tempo. Kommen
   Namen dazu, muss die Zahl mitwachsen. */
.laufband__spur { display: flex; gap: 3rem; width: max-content; animation: wandern 78s linear infinite; }
.laufband:hover .laufband__spur { animation-play-state: paused; }
.laufband__spur > span {
  font-family: var(--schrift-anzeige); font-size: 1.35rem; letter-spacing: .01em; color: #b6b6c0;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 3rem;
}
.laufband__spur > span::after { content: "·"; color: #ff5a66; }
@keyframes wandern { to { transform: translateX(-50%); } }

/* ---------- Parallaxe für Flächenbilder ---------- */
.par-halter { position: relative; overflow: hidden; }
.par-halter > img {
  transform: translate3d(0, var(--par, 0px), 0) scale(1.14);
  will-change: transform;
}

/* ---------- Einblenden beim Scrollen ----------
   Kurz und flach: 16 Pixel und 0,6 Sekunden. Was weiter fliegt,
   liest sich beim zweiten Besuch wie eine Verzögerung. */
[data-auf] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
[data-auf].ist-da { opacity: 1; transform: none; }
[data-auf][data-auf="2"] { transition-delay: .09s; }
[data-auf][data-auf="3"] { transition-delay: .18s; }
[data-auf][data-auf="4"] { transition-delay: .27s; }

/* ---------- Produktreihe zum Wischen ---------- */
.reihe { position: relative; }
/* Feste Spaltenzahl statt 1fr: Mit 1fr wurden zwei Bestseller zu
   zwei halbseitigen Kacheln – die Breite hing davon ab, wie viele
   Artikel gerade markiert sind. Jetzt sind es immer vier nebeneinander
   (drei auf dem Tablet, anderthalb auf dem Handy), egal ob zwei oder
   zehn in der Reihe stehen; der Rest rollt seitlich. */
.reihe__spur {
  --reihe-spalten: 4; --reihe-luft: 1.4rem;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--reihe-spalten) - 1) * var(--reihe-luft)) / var(--reihe-spalten));
  gap: var(--reihe-luft); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: .4rem;
}
@media (max-width: 1099px) { .reihe__spur { --reihe-spalten: 3; } }
@media (max-width: 767px)  { .reihe__spur { --reihe-spalten: 2; --reihe-luft: 1rem; } }
@media (max-width: 520px)  { .reihe__spur { --reihe-spalten: 1.5; } }
.reihe__spur::-webkit-scrollbar { display: none; }
.reihe__spur > * { scroll-snap-align: start; }
.reihe__pfeile { display: flex; gap: .5rem; align-self: end; justify-content: flex-start; }
/* Die Pfeile stehen an den Seiten der Reihe, wie man es aus
   Onlineshops kennt - dort sucht die Hand sie, nicht oben in der
   Kopfzeile.

   Die Hoehe: nicht die Mitte der Reihe, sondern die Mitte des
   Bildes. Unter dem Bild stehen Name, Merkmal und Preis, rund 120
   Punkte - mittig zur ganzen Karte saessen die Pfeile deutlich zu
   tief. 34 Prozent trifft die Bildmitte bei den Kartenbreiten, die
   hier vorkommen. Nachgemessen: 37,7 Prozent bei 1280, 36,0 bei 709 -
   37 trifft beide auf wenige Punkte genau.

   Sie liegen ueber der Reihe, nicht daneben: In der Randspalte ist
   auf schmalen Schirmen kein Platz, und ein Pfeil, der mal drinnen
   und mal draussen steht, wandert beim Verkleinern. */
.reihe__pfeil--seite {
  position: absolute; top: 37%; transform: translateY(-50%); z-index: 2;
  background: var(--papier); border-color: transparent;
  box-shadow: 0 6px 20px -6px rgba(20,20,26,.35);
}
.reihe__pfeil--links  { left: -18px; }
.reihe__pfeil--rechts { right: -18px; }
/* Gibt es nichts zu schieben, ist der Pfeil kein blasser Knopf,
   sondern gar keiner - sonst liegt er ohne Aufgabe auf dem Bild.

   Mit .reihe davor, weil .reihe__pfeil:disabled weiter unten dieselbe
   Staerke haette und als spaeteres Regelwerk gewaenne - der Pfeil
   waere dann blass statt weg. */
.reihe .reihe__pfeil--seite:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 640px) {
  .reihe__pfeil--links  { left: 2px; }
  .reihe__pfeil--rechts { right: 2px; }
}
.reihe__pfeil {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--linie); background: var(--papier-3); color: var(--ink);
  display: grid; place-items: center; transition: background var(--weich), border-color var(--weich);
}
.reihe__pfeil:hover:not(:disabled) { background: var(--rot); border-color: var(--rot); color: #fff; }
.reihe__pfeil:disabled { opacity: .35; cursor: default; }
.reihe__pfeil svg { width: 17px; height: 17px; }

@media (prefers-reduced-motion: reduce) {
  .laufband__spur { animation: none; }
  .held__folie .held__rahmen img { animation: none !important; }
  .held__punkt.ist-da::after { animation: none; transform: none; }
  /* Klasse für Klasse dieselben Auswähler wie oben, nicht „p": Die
     Regel oben trifft .hero__text über zwei Klassen, ein blankes p
     kommt dagegen nicht an – der Absatz wäre unsichtbar geblieben,
     und zwar nur bei abgeschalteter Bewegung. */
  .held__folie .hero__titel, .held__folie .hero__text, .held__folie .hero__ctas, .held__folie .hero__marke { transform: none; opacity: 1; animation: none !important; }
  [data-auf] { opacity: 1; transform: none; }
  .par-halter > img, .held__rahmen img { transform: none !important; }
}

/* ---------- Vorteile ---------- */
.usp { border-block: 1px solid var(--linie); background: var(--papier-2); }
.usp ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.usp li {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: 1.2rem .4rem;
}
.usp li + li { border-left: 1px solid var(--linie); padding-left: 1.2rem; }
.usp svg { width: 21px; height: 21px; color: var(--rot); flex-shrink: 0; margin-top: .15rem; transition: transform .28s cubic-bezier(.2,.7,.3,1); }
/* Beim Darüberfahren: das Zeichen dreht sich leicht und wächst, die
   Zeile hebt sich einen Hauch – Rückmeldung, dass hier etwas steht. */
.usp li { transition: transform .28s cubic-bezier(.2,.7,.3,1); }
.usp li:hover { transform: translateY(-3px); }
.usp li:hover svg { transform: scale(1.22) rotate(-8deg); }
.usp li:hover b { color: var(--rot); }
.usp b { transition: color .2s ease; }
@media (prefers-reduced-motion: reduce) { .usp li, .usp svg { transition: none; } .usp li:hover, .usp li:hover svg { transform: none; } }
.usp b { display: block; font-size: .92rem; }
.usp span { font-size: .82rem; color: var(--ink-3); line-height: 1.45; min-width: 0; hyphens: auto; overflow-wrap: break-word; }
/* Sehr schmale Telefone: eine Spalte – zwei nebeneinander schoben den
   Text über den rechten Rand. */
@media (max-width: 400px) {
  .usp ul { grid-template-columns: minmax(0, 1fr); }
  .usp li { padding: .9rem .2rem; }
  .usp li + li { border-left: 0; padding-left: .2rem; border-top: 1px solid var(--linie); }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: clamp(3.4rem, 1.5rem + 6vw, 7.5rem); overflow-x: clip; }
.abschnitt--grund { background: var(--papier-2); }
/* Die Kopfzeile eines Abschnitts liegt auf einer Haarlinie, die
   Überschrift links, der Erklärsatz rechts daneben – nicht darunter.
   Zwei Spalten geben dem Auge einen Anfang; untereinander gestellt
   liest sich jeder Abschnitt wie der vorige. */
.kopfzeile {
  display: grid; gap: 1.4rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.6rem);
  padding-top: 1.1rem; border-top: 1px solid var(--linie);
}
.kopfzeile p { color: var(--ink-2); max-width: 46ch; }
.kopfzeile__wort { display: grid; gap: .9rem; align-content: start; }
.kopfzeile__zu { display: grid; gap: 1.2rem; align-content: end; }
@media (min-width: 880px) {
  .kopfzeile { grid-template-columns: 1.35fr 1fr; gap: 3rem; align-items: end; }
}
/* Rot stand vorher über jedem Abschnitt. Sechsmal dieselbe Farbe ist
   keine Auszeichnung mehr, sondern Tapete – die Augenbraue ist jetzt
   eine Werkangabe in Grau, und das Rot bleibt den Stellen, an denen
   gehandelt wird. */
.augenbraue {
  display: block;
  font-size: .73rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.mehr { text-decoration: none; font-weight: 600; font-size: .92rem; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.mehr svg { width: 16px; height: 16px; transition: transform var(--weich); }
.mehr:hover svg { transform: translateX(4px); }

/* ---------- Produktkarten ----------
   Die Reihen tragen die Artikelkachel des Shops (partials/artikel-kachel.php,
   Regeln in shop.css). Die frühere Karte dieser Datei ist entfernt. */
.gitter { display: grid; gap: clamp(1.6rem, 1rem + 2vw, 2.8rem) 1.4rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Das Führungsstück – ein Satz und die Werkangaben, wie sie auf der
   Rückseite eines Musterblatts stehen: Artikelnummer, Maße, Material,
   Lieferzeit. Alles aus der Datenbank, nichts dazuerfunden. */
.karte__satz { color: var(--ink-2); font-size: 1.02rem; line-height: 1.62; max-width: 42ch; }
.karte__daten { display: grid; gap: 0; margin: .3rem 0 .2rem; }
.karte__daten > div {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem;
  padding-block: .48rem; border-top: 1px solid var(--linie);
  font-size: .84rem; line-height: 1.5;
}
.karte__daten dt {
  color: var(--ink-3); font-size: .72rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; align-self: center;
}
/* Gleich breite Ziffern, damit die Maße in der Spalte stehen. Das war
   der einzige Grund für die Schreibmaschinenschrift – Inter bringt es
   von Haus aus mit. */
.karte__daten dd { margin: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Unter 900 Punkten bleibt das Führungsstück eine gewöhnliche Karte:
   Zwei Spalten nebeneinander ergäben zwei zu schmale. */
@media (min-width: 900px) {
  .gitter--fuehrung { grid-template-columns: repeat(3, 1fr); }
  .gitter--fuehrung .karte--fuehrung {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 3.5vw, 4.5rem); align-items: center;
    padding-bottom: clamp(1.8rem, 1rem + 2.5vw, 3.4rem);
    border-bottom: 1px solid var(--linie);
  }
  .karte--fuehrung .karte__text { padding-top: 0; gap: .85rem; }
  .karte--fuehrung .karte__name {
    font-family: var(--schrift-anzeige); font-weight: 600;
    font-size: clamp(2rem, 1.1rem + 2.6vw, 3.3rem); line-height: 1.02; letter-spacing: -.014em;
  }
  .karte--fuehrung .karte__preis { margin-top: .3rem; border-top: 0; padding-top: 0; }
  .karte--fuehrung .karte__preis b { font-size: 1.5rem; }
}
@media (max-width: 899px) {
  .karte__daten { display: none; }
  .karte__satz { font-size: .95rem; }
}

/* ---------- Kategorien ---------- */
.kat-gitter { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, 1fr); }
.shop-start .kat {
  position: relative; display: flex; align-items: flex-end;
  min-height: 220px; padding: 1.3rem; border-radius: 2px; overflow: hidden;
  text-decoration: none; color: #fff; isolation: isolate;
}
.kat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.kat::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,8,10,.12) 25%, rgba(8,8,10,.9));
}
.kat:hover img { transform: scale(1.06); }
.kat b { display: block; font-family: var(--schrift-anzeige); font-size: 1.55rem; font-weight: 600; line-height: 1.1; }
.kat span span { font-size: .84rem; opacity: .85; }
.kat__pfeil {
  position: absolute; top: 1rem; right: 1rem; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.16); backdrop-filter: blur(6px);
  display: grid; place-items: center; transition: background var(--weich), transform var(--weich);
}
.kat:hover .kat__pfeil { background: var(--rot); transform: rotate(-45deg); }
.kat__pfeil svg { width: 16px; height: 16px; }
/* Die breite Kachel misst 807 zu 220, das Bild darin 1920 zu 1280 -
   sichtbar bleiben also 518 der 1280 Zeilen. Mittig beschnitten
   faellt die Praegung oben heraus; bei 27 Prozent liegt sie ganz im
   Ausschnitt, und unten links bleibt die dunkle Tischplatte fuer die
   weisse Schrift. */
.kat--gross { grid-column: span 2; min-height: 260px; }
.kat--gross img { object-position: 50% 27%; }

/* ---------- Formatblatt ----------

   Alle fünf auf einer Standlinie, in echter Proportion zueinander.
   Die Einheit ist Millimeter mal einem Faktor – dadurch stimmen die
   Verhältnisse bei jeder Bildschirmbreite, ohne Umrechnung im Kopf.

   Die dickere Kante links ist die Bindung. Das ist der Unterschied
   zwischen einer Zeichnung und einem Rechteck. */
.formatblatt { --einheit: clamp(.38px, .1px + .52vw, .74px); margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.formatblatt__reihe {
  display: flex; align-items: flex-end; gap: clamp(1.1rem, .4rem + 2vw, 3rem);
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--linie);
  overflow-x: auto; scrollbar-width: thin;
}
.formatblatt__stueck { flex: 0 0 auto; display: grid; gap: .75rem; justify-items: start; }
.formatblatt__blatt {
  width: calc(var(--b) * var(--einheit));
  height: calc(var(--h) * var(--einheit));
  /* Umriss und Rücken in der Textfarbe statt in Grau: Eine
     technische Zeichnung wird in Tinte gezogen, nicht in Grau.
     Hell ist das Schwarz, dunkel dreht es sich mit um. */
  border: 1px solid var(--ink); border-left-width: 22px;
  border-radius: 0 3px 3px 0; background: var(--papier-2);
}
.formatblatt__stueck--haupt .formatblatt__blatt { border-color: var(--rot-hell); background: var(--rot-zart, transparent); }
.formatblatt__name { font-size: .92rem; font-weight: 600; line-height: 1.2; }
.formatblatt__mass {
  font-size: .8rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums; margin-top: .15rem; display: block;
}
.shop-start .formatblatt__fuss {
  margin-top: 1rem; font-size: .82rem;
  color: var(--ink-3); max-width: 52ch; line-height: 1.55;
}

/* ---------- Herkunft ----------

   Eine dunkle Bank quer durch die helle Seite. Sie führt ihre eigenen
   Farbwerte, wie der Fuß auch – sonst stünde in der hellen Ansicht
   dunkle Schrift auf dunklem Grund. */
.herkunft {
  color-scheme: dark;
  --ink: #f4f4f7; --ink-2: #b6b6c0; --ink-3: #85858f; --linie: #292930;
  --rot-hell: #ff5a66;
  background: #0c0c0f; color: var(--ink-2);
  padding-block: clamp(3.4rem, 1.5rem + 6vw, 7rem);
  overflow-x: clip;
  position: relative;
}

/* Konturringe wie im Fußbereich der Agenturseite.

   Dieselben Werte – 54 Punkte Abstand, ein Punkt Strichstärke,
   rgba(245,245,246,.07) –, nur der Ursprung ist ein anderer: oben
   rechts statt unten links. Der Fuß schließt die Seite ab, dieser
   Abschnitt steht mittendrin; stünden beide Ringe an derselben
   Stelle, sähe es aus wie zweimal dasselbe Bild.

   Die Maske lässt das Muster nach außen auslaufen. Ohne sie liefe es
   bis an alle vier Kanten und würde dort hart abgeschnitten – ein
   Raster mit Rand statt eines Scheins. */
.herkunft::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-radial-gradient(circle at 88% -8%, rgba(245,245,246,.07) 0 1px, transparent 1px 54px);
  -webkit-mask-image: radial-gradient(130% 118% at 88% 0%, #000 22%, transparent 80%);
          mask-image: radial-gradient(130% 118% at 88% 0%, #000 22%, transparent 80%);
}
/* Der Inhalt liegt über dem Muster – sonst verschwände er darunter. */
.herkunft__innen { position: relative; z-index: 1; }
.herkunft__innen { display: grid; gap: 2.2rem; align-items: center; }
/* Rund und nur der Ausschnitt mit der Prägung.

   Der Kreis nimmt dem Foto den Rahmen und macht daraus ein Zeichen –
   wie ein Siegel neben dem Satz „Made with Herz in Berlin". Ein
   rechteckiges Foto daneben las sich wie ein Beleg unter vielen.

   Die Breite ist begrenzt: Über etwa 400 Punkten wird aus dem Siegel
   wieder ein Bild, und die Schrift darin größer als die Überschrift
   daneben. */
.herkunft__bild {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: 50%; width: 100%; max-width: 400px; margin-inline: auto;
}
.herkunft__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.herkunft__wort { display: grid; gap: 1.1rem; align-content: start; }
.herkunft h2 {
  color: var(--ink); font-size: clamp(2.4rem, 1.2rem + 4.2vw, 4.4rem);
  line-height: 1; letter-spacing: -.015em;
}
/* Das Herz in der Markenfarbe und eine Spur kleiner: Als Zeichen sitzt
   es sonst zu schwer zwischen den Wörtern. */
.herkunft__herz { color: var(--rot-hell); font-size: .78em; vertical-align: .06em; }
.herkunft__satz { color: var(--ink-2); font-size: 1.05rem; line-height: 1.68; max-width: 48ch; }
.herkunft__satz b { color: var(--ink); font-weight: 600; }
.herkunft__liste { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: 0; }
.herkunft__liste li {
  display: grid; grid-template-columns: 18px 1fr; gap: .8rem; align-items: start;
  padding-block: .7rem; border-top: 1px solid var(--linie);
  font-size: .93rem; color: var(--ink-2); line-height: 1.5;
}
.herkunft__liste svg { width: 15px; height: 15px; margin-top: .35rem; color: var(--rot-hell); }
@media (min-width: 960px) {
  .herkunft__innen { grid-template-columns: 1fr 1.05fr; gap: clamp(2.5rem, 1.5rem + 3.5vw, 5.5rem); }
  /* Der Anschnitt bis zum Bildschirmrand fällt mit dem Kreis weg: Ein
     Siegel, das links aus dem Bild läuft, ist kein Siegel mehr,
     sondern ein abgeschnittener Kreis. */
}

/* ---------- Editorial ---------- */
/* Kein Kasten mehr um den Abschnitt: Das Bild läuft links bis an den
   Bildschirmrand, der Text steht in der Spalte. Ein gerahmter Kasten
   im gerahmten Abschnitt war eine Schachtel zu viel. */
.editorial { display: grid; grid-template-columns: 1fr; gap: 1.8rem; color: var(--ink); }
.editorial__bild { position: relative; min-height: 300px; border-radius: 2px; overflow: hidden; }
.editorial__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.editorial__text { display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
@media (min-width: 960px) {
  .editorial { grid-template-columns: 1.02fr 1fr; gap: clamp(2.5rem, 1.5rem + 3.5vw, 5.5rem); align-items: center; }
  /* Der Anschnitt: von der Spalte bis zur Bildschirmkante. Der
     Abschnitt bekommt overflow-x: clip, damit die Balkenbreite des
     Rollbalkens keine Seitwärtsbewegung auslöst. */
  .editorial__bild {
    min-height: min(560px, 62vh);
    /* 50% bezöge sich auf die eigene Breite der Spalte, nicht auf
       die des Satzspiegels – das zog das Bild weit über den Rand
       hinaus. Gerechnet wird deshalb aus der Spaltenbreite selbst:
       Der Rand links ist entweder das Polster oder die Hälfte
       dessen, was über 1280 Punkte hinausgeht. */
    margin-left: calc(-1 * max(1.25rem, (100vw - 1280px) / 2));
    border-radius: 0 2px 2px 0;
  }
}
.editorial__text h2 { color: var(--ink); }
.editorial__text p { color: var(--ink-2); max-width: 44ch; }
.editorial__liste { list-style: none; margin: .4rem 0 .6rem; padding: 0; display: grid; gap: .55rem; }
.editorial__liste li { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; color: var(--ink-2); }
.editorial__liste svg { width: 17px; height: 17px; color: var(--gold); flex-shrink: 0; margin-top: .3rem; }
.editorial .knopf--linie { --fg: var(--ink); --rand: var(--rand-zart); }
.editorial .knopf--linie:hover { background: var(--ink); --fg: var(--papier); }
.editorial__preis { font-size: .88rem; color: var(--ink-3); }
.editorial__preis b { color: var(--ink); font-size: 1.6rem; font-family: var(--schrift-anzeige); font-weight: 600; }

/* ---------- Referenzband ----------

   .band und .gallery__item stehen in style.css und werden hier nicht
   wiederholt. Angepasst wird nur, was der dunkle Shop anders braucht:
   die Bildunterschrift und der Abstand zur Spalte darüber. */
.shop-start .band { margin-top: clamp(2rem, 1rem + 2.5vw, 3.4rem); }
.shop-start .band .gallery__item { height: clamp(240px, 30vw, 340px); }
.shop-start .band .gallery__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem .9rem .8rem;
  background: linear-gradient(to top, rgba(8,8,10,.92), transparent);
  color: #f4f4f7; font-size: .82rem; line-height: 1.4;
  opacity: 0; transition: opacity var(--weich);
}
/* Die Zeile erscheint beim Hinsehen. Immer sichtbar läge über zwölf
   Fotos gleichzeitig ein Textstreifen – das Band zeigt dann Text,
   nicht Karten. */
.shop-start .band .gallery__item:hover .gallery__cap,
.shop-start .band .gallery__item:focus-within .gallery__cap { opacity: 1; }
@media (hover: none) {
  .shop-start .band .gallery__cap { opacity: 1; }
}

/* ---------- Referenzen ---------- */
.ref-gitter { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, 1fr); }
.ref { background: var(--papier-2); border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden; transition: border-color var(--weich), transform var(--weich); }
.ref:hover { border-color: var(--rot); transform: translateY(-3px); }
.ref img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.ref__text { padding: .95rem 1.1rem 1.2rem; }
.ref__text b { display: block; font-size: .96rem; }
.ref__ort { font-size: .8rem; color: var(--ink-3); }
.ref__was { font-size: .85rem; color: var(--ink-2); margin-top: .45rem; }

/* ---------- Kundenstimmen ----------

   Die Karten selbst – .testimonial mit Sternen, Zitat und Kreis –
   stehen in style.css und werden hier nur benutzt. Zu tun bleibt
   das Raster und der Entwurfshinweis. */
.stimmen { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .stimmen { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.6rem; }
}
/* Die Karte ist für helle Abschnitte gebaut; auf dunklem Grund
   trägt sie die Flächen des Shops. */
.stimmen .testimonial { background: var(--papier); border-color: var(--linie); }
.stimmen .testimonial p { color: var(--ink); }
.stimmen .testimonial__name { color: var(--ink); }
.stimmen .testimonial__role { color: var(--ink-3); }

/* ---------- Konfiguratorband ----------

   Eine Zeile über die volle Breite statt eines Abschnitts: Satz
   links, Preis in der Mitte, Knopf rechts. Der Konfigurator hat
   auf dieser Seite schon zwei Auftritte – ein dritter großer
   Block wäre dieselbe Sache zum dritten Mal. */
/* Dunkel wie das Laufband darunter, aber nicht dasselbe Dunkel.

   #14141a gegen die #0c0c0f des Laufbands: ein knapper Schritt, der
   reicht, damit die beiden nicht zu einem Block verschmelzen. Genau
   das war vorher das Problem – da trug das Band dieselbe Farbe wie die
   Vorteile-Leiste darüber.

   Mit dem dunklen Grund kommen eigene Schriftfarben: Die hellen Töne
   der Seite wären hier unlesbar. Dieselbe Aufstellung wie im
   Herkunftsabschnitt, der schon lange dunkel ist. */
.konfigband {
  color-scheme: dark;
  --ink: #f4f4f7; --ink-2: #b6b6c0; --band-leise: #9a9aa4;
  background: #14141a;
  border-block: 1px solid #292930;
  padding-block: 1.9rem;
  position: relative;
}
/* Konturringe, Ursprung links – der Herkunftsabschnitt hat seinen
   rechts, das Laufband in der Mitte. Dreimal dieselbe Stelle wäre
   dreimal dasselbe Bild. */
.konfigband::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-radial-gradient(circle at 12% -40%, rgba(245,245,246,.07) 0 1px, transparent 1px 54px);
  -webkit-mask-image: radial-gradient(140% 150% at 12% 0%, #000 18%, transparent 82%);
          mask-image: radial-gradient(140% 150% at 12% 0%, #000 18%, transparent 82%);
}
.konfigband__reihe { position: relative; z-index: 1; }
.konfigband__reihe { display: grid; gap: 1.1rem; align-items: center; }
.konfigband__auge {
  display: block; font-size: .73rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--band-leise); font-weight: 600; margin-bottom: .35rem;
}
.konfigband__satz { color: var(--ink-2); font-size: .95rem; line-height: 1.55; max-width: 62ch; }
.konfigband__preis { display: flex; align-items: baseline; gap: .5rem; white-space: nowrap; }
.konfigband__preis b { font-size: 1.5rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.konfigband__preis span { font-size: .8rem; color: var(--band-leise); }

.konfigband__knopf { white-space: nowrap; }

/* Die Zeichnung im Band. Klein gehalten: Sie ist ein Hinweis auf den
   Konfigurator, nicht sein Ersatz – wird sie groß, ist das Band kein
   Band mehr, sondern der dritte große Auftritt derselben Sache.

   Der Schatten der Zeichnung bringt seinen eigenen Rand mit, deshalb
   sitzt sie ohne zusätzliche Polsterung im Raster. */
.konfigband__bild { margin: 0; width: 100%; max-width: 190px; justify-self: center; }
.konfigband__bild .vorschau__bild { width: 100%; max-width: none; height: auto; }

@media (min-width: 900px) {
  .konfigband__reihe { grid-template-columns: 1fr auto auto; gap: 2.4rem; }
  .konfigband__reihe--bild { grid-template-columns: auto 1fr auto auto; gap: 2rem; }
  .konfigband__bild { max-width: 132px; }
}

/* ---------- Newsletter ---------- */
.brief { background: var(--papier-3); border-radius: var(--rund); padding: clamp(1.8rem, 1rem + 3vw, 3.2rem); text-align: center; }
.brief p { color: var(--ink-2); max-width: 48ch; margin: .8rem auto 1.6rem; }
.brief form { display: flex; gap: .6rem; max-width: 26rem; margin-inline: auto; flex-wrap: wrap; }
.brief input {
  flex: 1 1 12rem; padding: .9rem 1.1rem; border: 1px solid var(--linie); border-radius: 999px;
  font: inherit; font-size: .95rem; background: var(--papier); color: var(--ink);
}
.brief input:focus { outline: none; border-color: var(--ink-3); }
.brief small { display: block; margin-top: .9rem; font-size: .78rem; color: var(--ink-3); }
.brief__danke { margin-top: 1rem; font-weight: 600; color: var(--gruen); }
.brief__danke[hidden] { display: none; }

/* ---------- Größere Schirme ---------- */
@media (min-width: 720px) {
  .usp ul { grid-template-columns: repeat(4, 1fr); }
  /* Fünf Kacheln in drei Spalten lassen sonst ein Loch. Die erste
     nimmt zwei Spalten – dann steht die erste Reihe voll und die
     zweite auch. */
  .kat-gitter { grid-template-columns: repeat(3, 1fr); }
  .kat--gross { grid-column: span 2; }
  .ref-gitter { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 960px) {
  .hero__innen { grid-template-columns: 1.05fr 1fr; gap: 4rem; }
  .editorial { grid-template-columns: 1.1fr 1fr; }
  .editorial__bild { min-height: 420px; }
}
@media (max-width: 959px) {
  .hero__schild { left: auto; right: 1rem; }
}


/* Ohne rechte Spalte (kein Text neben der Überschrift) bekommt die
   Überschrift die ganze Breite – so bleibt sie auf einer Zeile. */
.kopfzeile__wort:only-child { grid-column: 1 / -1; }
.kopfzeile:not(:has(.kopfzeile__zu)) { grid-template-columns: 1fr; }

/* Referenzband: Klick öffnet das Bild groß. Der Knopf füllt die Kachel,
   beim Überfahren hält das Band an, damit man treffen kann. */
.band__knopf { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.band__knopf img { display: block; width: 100%; height: 100%; object-fit: cover; }
.band__knopf:focus-visible { outline: 3px solid var(--rot); outline-offset: -3px; }
.band:hover .band__spur, .band:focus-within .band__spur { animation-play-state: paused; }

/* Die Reihen tragen jetzt die Artikelkachel des Shops (shop.css). */
.reihe__spur > .kachel { min-width: 0; }

/* ---------- Scrollgebundene Bewegung ----------
   Beim Herunterscrollen bleibt das Mappenfoto ein Stück zurück und der
   Text zieht davon – eine Tiefe, die nur mit dem Scrollen entsteht.
   Rein in CSS über die Scroll-Zeitleiste; Browser ohne sie und Geräte
   mit „wenig Bewegung“ zeigen den Slider wie bisher. */
@supports (animation-timeline: scroll()) {
  @media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
    .held__karte { animation: held-treiben linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
    .held__wort  { animation: held-wort linear both;    animation-timeline: scroll(root); animation-range: 0 700px; }
  }
}
@keyframes held-treiben { to { transform: translateY(90px); } }
@keyframes held-wort    { to { transform: translateY(-30px); opacity: .35; } }