/* ==========================================================================
   FORMHAUS -- Gestaltungssystem
   ==========================================================================
   Abgeleitet aus den Blaettern, nicht aus einem Theme. Vier Regeln, die
   auf jedem Bogen gelten und deshalb auch hier:

     1. FLACH.     Keine Verlaeufe, kein Blur, keine weichen Schatten,
                   kein `border-radius`. Ein Schatten ist ein versetzter
                   Block, kein Nebel.
     2. DREI FARBEN je Zone. Grund, Tinte, ein Akzent. Der Akzent kommt
                   vom Blatt (`--acc`, gemessen von make_images.py) und
                   wird nicht behauptet.
     3. AUSGEFRANST. Ein sauberes Rechteck gibt es auf keinem Bogen.
                   `clip-path` kommt aus build.py, je Element eigen.
     4. KANTIG.    Bewegung springt in Stufen (`steps()`), sie blendet
                   nicht. Ein Fade waere die einzige weiche Kante der
                   ganzen Seite.

   Aufbau: Marken -> Grundlage -> Bausteine -> Seiten -> Schmalbild.
   ========================================================================== */

/* ------------------------------------------------------------- Marken --- */
:root {
  /* Der Grund. Fast schwarz, nicht schwarz: reines #000 nimmt dem Korn
     die untere Haelfte und laesst die Blaetter flach wirken. */
  --ink:      #0B0A09;
  --ink-2:    #15120F;
  --ink-3:    #211C17;
  --chalk:    #F4F1E8;
  --dust:     #9A9187;

  /* Die Palette der Serie. Mehr als drei davon stehen nie in derselben
     Zone -- dieselbe Regel wie im Bild. */
  --mustard:  #E0A526;
  --cobalt:   #2B5BD7;
  --red:      #D43B2A;
  --purple:   #7A3FBF;
  --brick:    #B8452B;
  --olive:    #5C6B3A;
  --pink:     #E85CA6;
  --neon:     #7CFF3A;
  --magenta:  #FF3FB0;

  /* Wird je Seite von build.py gesetzt, gemessen am Blatt. */
  --acc:      #E0A526;
  --acc2:     #2B5BD7;

  --display:  "Anton", "Haettenschweiler", "Arial Narrow", "Impact",
              sans-serif;
  --body:     "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gut:      clamp(18px, 4vw, 46px);   /* Aussenrand der Bahn */
  --rule:     3px;                      /* die Standardkante */
}

/* --------------------------------------------------------- Grundlage --- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font: 400 clamp(15px, 1.05vw, 17px)/1.62 var(--body);
  letter-spacing: .005em;
  overflow-x: hidden;
  /* Frueher lag hier `fibre.png` als grobe Faser. Raus am 04.09.2026:
     die Blaetter tragen ihre eigene Textur, und eine zweite darunter
     macht den Grund unruhig statt tief. Der Grund ist jetzt einfach
     schwarz -- das laesst die Farbflaechen der Blaetter am staerksten
     stehen. Das feine Korn (`.grain`) bleibt. */
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* Das Papierkorn. Als eigenes Element, damit es beim Scrollen STEHT --
   ein mitlaufendes Korn liest sich als Schmutz auf dem Bild, ein
   stehendes als Papier unter der Seite. */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("grain.png");
  background-size: 256px 256px;
  mix-blend-mode: overlay;
  opacity: .55;
}

/* ABER NICHT AUF DEN BLAETTERN.
   Die Bilder tragen ihr eigenes, in Photoshop eingearbeitetes Korn. Ein
   zweites daruebergelegtes Raster, das beim Scrollen stehen bleibt,
   kaempft mit dem ersten und macht aus Textur Schmutz. Die Kunst liegt
   deshalb UEBER dem Korn, alles andere darunter.

   Angehoben wird jeweils das Element, das den Stapelkontext bildet --
   `filter`, `transform` und `clip-path` erzeugen einen eigenen, und
   ein z-index am Bild darin wuerde nichts nuetzen. Der Kopf steht bei
   80 und bleibt damit ueber allem. */
.tile__frame,
.view,
.proof__img img,
.mini img,
.row img,
.ribbon img {
  position: relative;
  z-index: 2;
}

.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: 760px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--neon); color: #000; padding: 12px 18px; font-weight: 700;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--neon);
  outline-offset: 3px;
}

/* --------------------------------------------------------- Typografie --- */
/* Die dritte Kontur. Im Bild bekommt jede Figur eine dunkle Kontur, eine
   weisse Lichtkante und eine dritte in Neon. Ein Titel bekommt dasselbe:
   harte Versatzschatten, kein Blur. */
.claim, .sec__h, .head__mark, .tile__tag, .prod__tag, .mq__i, .mini__tag {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .012em;
  line-height: .86;
  font-synthesis: none;
}

.sec__h {
  font-size: clamp(2.1rem, 5.6vw, 4.4rem);
  margin: 0 0 .28em;
  text-shadow: 3px 3px 0 var(--ink), 6px 6px 0 var(--acc);
}
.sec__h--sm {
  font-size: clamp(1.5rem, 3vw, 2.3rem); margin-top: 2.2em;
  /* Der Versatz muss mit der Schrift schrumpfen. Sechs Pixel unter einer
     22-Pixel-Zeile lesen sich nicht als Kontur, sondern als Unschaerfe --
     und Unschaerfe ist das Einzige, was diese Seite nicht darf. */
  text-shadow: 2px 2px 0 var(--ink), 4px 4px 0 var(--acc);
}

.sec__sub {
  margin: 0 0 2.2rem;
  max-width: 54ch;
  color: var(--dust);
  font-size: 1.06rem;
}
.sec { padding: clamp(56px, 9vw, 130px) 0; position: relative; }
.sec--tight { padding: clamp(30px, 5vw, 60px) 0; }
.sec__more { margin-top: 2rem; }
.sec__more a { color: var(--acc); text-underline-offset: 4px; }

.prose p { max-width: 62ch; margin: 0 0 1.1em; }
.prose a { color: var(--acc); text-underline-offset: 4px; }

/* Die Kritzel. Sparsam -- im Bild sind es auch nur ein paar. */
.scrib {
  width: 1.05em; height: 1.05em; flex: 0 0 auto;
  fill: none; stroke: var(--acc); stroke-width: 2.2;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}

/* ------------------------------------------------------------- Knopf --- */
/* Ein Block mit harter Kante und hartem Versatz. Beim Druecken faehrt er
   auf seinen Schatten -- eine Bewegung, die man sieht, ohne sie zu
   animieren. */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .92em 1.5em;
  font-family: var(--display); font-size: clamp(1rem, 1.5vw, 1.22rem);
  text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none; cursor: pointer;
  border: var(--rule) solid var(--ink);
  transition: transform .09s steps(2), box-shadow .09s steps(2);
}
.btn--go {
  background: var(--acc); color: var(--ink);
  box-shadow: 7px 7px 0 var(--chalk);
}
.btn--go:hover { transform: translate(3px, 3px); box-shadow: 4px 4px 0 var(--chalk); }
.btn--go:active { transform: translate(7px, 7px); box-shadow: 0 0 0 var(--chalk); }

.btn--buy {
  width: 100%; justify-content: center;
  background: var(--neon); color: #000;
  box-shadow: 7px 7px 0 var(--acc);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}
.btn--buy:hover { transform: translate(3px, 3px); box-shadow: 4px 4px 0 var(--acc); }
.btn--buy:active { transform: translate(7px, 7px); box-shadow: 0 0 0 var(--acc); }
.btn--buy[disabled] {
  background: var(--ink-3); color: var(--dust);
  box-shadow: 7px 7px 0 var(--ink-2); cursor: not-allowed;
}

.btn--ghost {
  background: transparent; color: var(--chalk);
  border-color: var(--chalk);
  box-shadow: 5px 5px 0 var(--acc);
}
.btn--ghost:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--acc); }

/* ------------------------------------------------------------- Kopf --- */
.head {
  position: sticky; top: 0; z-index: 80;
  background: var(--ink);
  border-bottom: var(--rule) solid var(--chalk);
}
.head__in {
  display: flex; align-items: center; gap: clamp(14px, 3vw, 40px);
  height: 62px;
}
.head__mark {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  text-decoration: none;
  text-shadow: 2px 2px 0 var(--acc);
  margin-right: auto;
}
.head__nav { display: flex; gap: clamp(12px, 2vw, 28px); }
.head__link {
  text-decoration: none; font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--dust);
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.head__link:hover, .head__link.is-on { color: var(--chalk); border-color: var(--acc); }
/* Der Waehrungsumschalter. Klein, ohne Rundung, ohne Pfeilchen-Chrom
   des Systems -- er soll wie ein gedruckter Vermerk aussehen, nicht wie
   ein Formularfeld. */
.cursel { display: inline-flex; align-items: center; gap: 7px; }
.cursel__lbl {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dust);
}
.cursel__in {
  -webkit-appearance: none; appearance: none;
  background: transparent; color: var(--chalk);
  border: 2px solid var(--ink-3);
  font: inherit; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 10px; cursor: pointer;
}
.cursel__in:hover { border-color: var(--acc); }
.cursel__in option { background: var(--ink); color: var(--chalk); }

.head__cart {
  text-decoration: none; font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  border: 2px solid var(--chalk); padding: 7px 12px;
  display: inline-flex; gap: 8px; align-items: center;
}
.head__cart:hover { background: var(--chalk); color: var(--ink); }
.head__n {
  background: var(--neon); color: #000; font-family: var(--display);
  min-width: 20px; text-align: center; padding: 1px 5px;
}

/* Das Menue fuer schmale Schirme. `<details>`, kein Skript -- es klappt
   ohne JavaScript auf, und der Zustand liegt im Element statt in einer
   Variablen, die zwei Stellen kennen muessten. */
.menu { display: none; position: relative; }
.menu__btn {
  list-style: none; cursor: pointer;
  width: 46px; height: 42px;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  border: 2px solid var(--chalk); padding: 0 9px;
}
.menu__btn::-webkit-details-marker { display: none; }
.menu__btn i { display: block; height: 2px; background: var(--chalk); }
.menu[open] .menu__btn { background: var(--chalk); }
.menu[open] .menu__btn i { background: var(--ink); }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 12px);
  width: 68vw; min-width: 220px;
  background: var(--ink);
  border: var(--rule) solid var(--chalk);
  box-shadow: 8px 8px 0 var(--acc);
  display: grid;
  padding: 6px 0;
}
.menu__panel .head__link {
  border: 0; padding: 0 18px;
  min-height: 48px; display: flex; align-items: center;
  font-size: .88rem; color: var(--chalk);
  border-bottom: 2px solid var(--ink-3);
}
.menu__panel .head__link:last-child { border-bottom: 0; }
.menu__panel .head__link:hover,
.menu__panel .head__link.is-on { color: var(--acc); }

/* Die Leiste am linken Rand. Bleibt stehen, auch beim Scrollen. */
.rail { display: flex; gap: 14px; margin-top: 14px; }
.rail__link {
  font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; text-decoration: none; color: var(--dust);
  border-bottom: 2px solid var(--acc); padding-bottom: 2px;
}
.rail__link:hover { color: var(--chalk); }

/* -------------------------------------------------------------- Kopf --- */
.hero { padding-top: clamp(30px, 6vw, 74px); position: relative; overflow: hidden; }
.hero__type { min-width: 0; }    /* siehe .claim */

.hero__grid {
  display: grid; gap: clamp(20px, 3vw, 40px);
  grid-template-columns: 1fr;
  align-items: start;
}

/* Der Anspruch laeuft ueber die VOLLE Breite. Die Groesse setzt nicht
   das CSS, sondern `shop.js`: es misst jede Zeile und rechnet die
   Schriftgroesse so, dass sie die Bahn exakt ausfuellt. Nur so fuellen
   drei verschieden lange Zeilen dieselbe Breite -- und nur so bleibt
   das auch wahr, wenn die Schrift mitten in der Schlaufe wechselt.
   Ohne JavaScript greifen die `clamp()`-Werte unten: dann steht es
   kleiner da, aber es steht. */
.claim {
  margin: 0 0 1.4rem; display: grid; gap: .02em;
  width: 100%;
  /* OHNE `min-width: 0` dehnt sich die Rasterspalte am ueberlaufenden
     Text (eine `1fr`-Spur hat `min-width: auto`). Die naechste Messung
     liest dann die groessere Breite, setzt die Schrift groesser, die
     Spur dehnt sich weiter -- am 04.09.2026 wuchs der Titel so bei
     jedem Schriftwechsel von 351 auf 927 Pixel. */
  min-width: 0;
}
.claim__l {
  display: block; width: 100%;
  white-space: nowrap; line-height: .82;
  /* Haelt die Zeilenhoehe, AUCH wenn die Zeile leer ist. Ohne das
     faellt sie waehrend der Schreibmaschine auf null zusammen und die
     ganze Seite darunter springt -- gemessen am 04.09.2026: der
     Blattstapel wanderte um 376 Pixel. `em` bezieht sich auf die
     eigene Schriftgroesse, die Reservierung stimmt also auch dann noch,
     wenn der Titel neu eingepasst wird. */
  min-height: .82em;
}
.claim__l--a {
  font-size: clamp(2.2rem, 26vw, 22rem);
  color: var(--chalk);
  text-shadow: 3px 3px 0 var(--red);
  transform: rotate(-1.6deg);
}
.claim__l--b {
  font-size: clamp(4.6rem, 34vw, 30rem);
  color: var(--mustard);
  /* dunkle Kontur, Lichtkante, dritte Kontur in Neon -- die Regel des
     Bildes, nur mit Schatten statt mit Pinsel */
  text-shadow:
     4px  4px 0 var(--ink),
    -2px -2px 0 var(--chalk),
     10px 10px 0 var(--neon);
  transform: rotate(1.1deg);
  margin: .04em 0;
}
.claim__l--c {
  font-size: clamp(1.5rem, 13vw, 11rem);
  color: var(--pink);
  text-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-.8deg);
}

.hero__sub {
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  max-width: 42ch; color: var(--dust); margin: 1.4rem 0 2rem;
}
.hero__cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero__price {
  font-family: var(--display); font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--dust);
}

/* ---------------------------------------------------- Der Titel lebt --- */
/* Zwei Dinge auf einmal, beide aus dem Blatt begruendet:
 *
 * 1. KOCHEN. Die Konturen springen alle paar Zehntel um ein, zwei Pixel.
 *    Das ist der aelteste Trick der gezeichneten Animation ("boiling
 *    line"): dieselbe Linie, dreimal von Hand gezogen, in der Schlaufe
 *    abgespielt. `steps(1)` sorgt dafuer, dass sie SPRINGT statt zu
 *    gleiten -- eine gleitende Kontur waere die einzige weiche Bewegung
 *    der Seite.
 *
 * 2. GLIMMEN. Dazu ein schwacher Neonschein, der mitatmet. Das ist die
 *    einzige Unschaerfe im ganzen System und sie ist eine Lichtquelle,
 *    kein Schlagschatten -- so wie die Neonkontur im Bild eine Lichtkante
 *    ist und kein Schatten.
 *
 * Die drei Zeilen laufen mit ungleichen Dauern (2.7 / 3.1 / 3.9 s),
 * damit sie nie gemeinsam springen. Gleichtakt saehe nach Software aus.
 */
@keyframes boil-mark {
  0%, 100% { text-shadow: 2px 2px 0 var(--acc); }
  40%      { text-shadow: 3px 1px 0 var(--acc); }
  70%      { text-shadow: 1px 3px 0 var(--acc); }
}

.head__mark  { animation: boil-mark 4.3s steps(1) infinite; }
.head__mark:hover {
  color: var(--neon);
  text-shadow: 2px 2px 0 var(--acc), 0 0 22px rgba(124, 255, 58, .5);
}

/* Der Boil liegt auf dem Titel und laeuft dauerhaft. Der Filter
   steht in `base.html`; hier wird er nur angehaengt.

   Frueher wechselte hier die Schrift alle 2.6 Sekunden. Das sah nicht
   nach Zeichnung aus, sondern nach Fehler -- und weil jede Schrift
   anders laeuft, musste die Groesse neu gerechnet werden, was die
   ganze Seite unter dem Titel verschob. Ein Filter aendert keine
   Groesse. */
.claim__l { filter: url(#boil); }

/* Die Laufschrift kocht mit, aber in der kleinen Fassung.
   WICHTIG: der Filter sitzt auf den einzelnen Woertern, NICHT auf dem
   laufenden Band. Das Band wird per `transform` bewegt; liegt der
   Filter darauf, muss der Browser ihn in jedem einzelnen Bild neu
   rechnen. Auf den Woertern darunter kann er das Ergebnis behalten und
   nur verschieben -- neu gerechnet wird dann nur sechsmal pro Sekunde,
   wenn der Rauschwert springt, statt sechzigmal. */
.mq__i { filter: url(#boil-s); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.hero__proof {
  margin: 1.4rem 0 0;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(.95rem, 1.5vw, 1.15rem); color: var(--neon);
  letter-spacing: .03em;
}

/* Zwei Blaetter, gestapelt: eines liegt hinter dem anderen, wie an einer
   Wand. Ein einzelnes Blatt sieht aus wie ein Bild, zwei sehen aus wie
   eine Serie -- und genau das wird hier verkauft. */
.hero__stack {
  position: relative; justify-self: center;
  width: 100%; max-width: 480px;
  aspect-ratio: 1061 / 1500;
}
.hero__sheet {
  display: block; margin: 0; position: absolute;
  /* Der Versatz hinter dem Blatt: harte Kante, keine Weichzeichnung. Er
     ersetzt den Schlagschatten, den diese Seite nicht haben darf. */
  filter: drop-shadow(14px 14px 0 var(--acc));
}
.hero__sheet--front {
  left: 0; bottom: 0; width: 84%;
  transform: rotate(-2.4deg); z-index: 3;   /* ueber dem Korn */
}
.hero__sheet--back {
  right: 0; top: 0; width: 66%;
  transform: rotate(5.5deg); z-index: 2;    /* ueber dem Korn */
  filter: drop-shadow(10px 10px 0 var(--cobalt));
}
.hero__sheet--front:hover { transform: rotate(-1.2deg) scale(1.015); }
.hero__sheet { transition: transform .12s steps(3); }

/* Die Vertrauensleiste. Direkt unter dem ersten Knopf, weil genau dort
   die Frage entsteht: kommt das an, und was, wenn nicht. */
.strip {
  grid-column: 1 / -1;              /* eigene Zeile, ueber die volle Breite */
  list-style: none; margin: clamp(18px, 3vw, 34px) 0 0; padding: 18px 0 0;
  display: grid; gap: 10px 26px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--ink-3);
}
.strip__i {
  display: flex; align-items: center; gap: 9px;
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .085em; color: var(--dust);
}

/* Das Laufband. Die Namen wie im Bild: gross, gedruckt, in Bewegung. */
.mq {
  margin-top: clamp(34px, 6vw, 70px);
  background: var(--acc); color: var(--ink);
  border-top: var(--rule) solid var(--chalk);
  border-bottom: var(--rule) solid var(--chalk);
  overflow: hidden; white-space: nowrap;
}
.mq__run {
  display: inline-flex; align-items: center; gap: 1.1rem;
  padding: .38em 0;
  animation: mq 44s linear infinite;
}
.mq__i { font-size: clamp(1.5rem, 3.4vw, 2.5rem); }
/* Die Trennpunkte in Signalrot statt in gedaempfter Tinte. Damit
   traegt das Band drei Farben -- Senfgrund, Tinte, Roter Punkt -- und
   das ist genau die Regel der Blaetter.

   Bewusst KEIN Farbwechsel in der Schlaufe: der Boil lebt davon, dass
   sonst nichts blinkt. Zwei Bewegungen auf demselben Band heben sich
   gegenseitig auf, und Farbe, die springt, war genau das "Poppen", das
   beim Titel raus sollte. */
.mq__d { font-size: 1.1rem; color: var(--red); opacity: 1; }
@keyframes mq { to { transform: translateX(-50%); } }

/* -------------------------------------------------------------- Wand --- */
.wall {
  display: grid; gap: clamp(30px, 4vw, 58px) clamp(20px, 3vw, 40px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tile {
  text-decoration: none; display: block; position: relative;
  --tilt: -1.2deg;
}
.tile:nth-child(even) { --tilt: 1.4deg; }
.tile:nth-child(3n)   { --tilt: -.6deg; }

.tile__frame {
  display: block; position: relative; overflow: hidden;
  background: var(--ink-2);
  transform: rotate(var(--tilt));
  transition: transform .12s steps(3);
}
.tile__img { width: 100%; transition: transform .16s steps(3); }
.tile:hover .tile__frame { transform: rotate(0deg); }
.tile:hover .tile__img   { transform: scale(1.035); }

/* Die Kreidestriche beim Hover. Keine Blende: harte Streifen, die in
   drei Stufen durchs Bild fahren -- die Speed-Lines aus dem Bild. */
.tile__rule {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
      -68deg,
      color-mix(in srgb, var(--acc) 85%, transparent) 0 2px,
      transparent 2px 13px);
  opacity: 0;
  transform: translateX(-16%);
  transition: opacity .1s steps(2), transform .18s steps(4);
}
.tile:hover .tile__rule { opacity: .5; transform: translateX(0); }

.tile__meta {
  display: grid; gap: 2px; margin-top: 14px;
  border-top: 2px solid var(--ink-3); padding-top: 12px;
}
.tile__tag {
  font-size: clamp(1.35rem, 2.6vw, 2rem); color: var(--acc);
  text-shadow: 2px 2px 0 var(--ink);
}
.tile:hover .tile__tag { color: var(--chalk); text-shadow: 2px 2px 0 var(--acc); }
.tile__who {
  font-size: .82rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--chalk);
}
.tile__moment { font-size: .88rem; color: var(--dust); }
.tile__price {
  font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--dust); margin-top: 5px;
}

/* ------------------------------------------------- Spielfeldmarkierung --- */
/* Eine Spielfeldlinie IST eine Kreidelinie -- deshalb steht hier
   dieselbe Geste wie auf den Blaettern, statt eines Ball-Symbols. Sehr
   schwach: sie gliedert den Raum, sie redet nicht mit. */
.pitch {
  width: 100%; line-height: 0;
  padding: clamp(10px, 3vw, 34px) 0;
  overflow: hidden;
}
.pitch svg {
  width: 100%; height: clamp(74px, 11vw, 150px); display: block;
}
.pitch path {
  fill: none;
  stroke: var(--chalk);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .14;
  /* Haelt die Strichstaerke unabhaengig von der Skalierung: sonst waere
     die Linie auf einem breiten Schirm dicker als auf einem schmalen. */
  vector-effect: non-scaling-stroke;
}

/* --------------------------------------------------- Die Programmzeile --- */
/* Verein, Jahr, Nummer. Macht aus einem Bild ein datiertes Stueck -- und
   das ist es, was gesammelt wird. */
.kit, .prod__kit {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5em;
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: .05em; font-size: .84rem; line-height: 1;
  color: var(--acc);
}
.kit i { font-style: normal; opacity: .45; }
.tile__meta .kit { margin-top: 6px; }
.prod__kit {
  margin: .1rem 0 1.4rem; font-size: 1rem;
  border-left: var(--rule) solid var(--acc); padding-left: 10px;
}

/* ------------------------------------------------------------ Gruende --- */
/* Die einzige helle Zone der Seite. Drei Farben: Senf, Tinte, Papier. */
.reasons {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2px;
  grid-template-columns: 1fr;
  background: var(--chalk);
  border: var(--rule) solid var(--chalk);
}
.reason {
  /* Schrift je Block, nicht global: Schwarz auf Kobalt oder Signalrot
     ist zu dunkel gegen zu dunkel. build.py setzt --fg dazu. */
  background: var(--acc); color: var(--fg, var(--ink));
  padding: clamp(22px, 3vw, 34px);
}
.reason__n {
  display: block; font-family: var(--display); font-size: 2.6rem;
  line-height: 1; opacity: .42; margin-bottom: .18em;
}
.reason h3 {
  font-family: var(--display); font-size: clamp(1.3rem, 2vw, 1.65rem);
  text-transform: uppercase; line-height: .95; margin: 0 0 .5em;
  letter-spacing: .01em;
}
.reason p { margin: 0; font-size: .95rem; max-width: 34ch; }

/* ------------------------------------------------------------ Formate --- */
/* Massstaeblich gegen eine 2-m-Wand. Ein Kaeufer kann sich unter "A2"
   nichts vorstellen, unter einem Blatt an einer Wand schon. */
.sizes {
  list-style: none; margin: 0; padding: 0;
  /* Spaltenzahl kommt aus build.py (`--cols`), nicht aus einer festen
     Vier -- sonst reisst ein Format weniger das Raster auseinander. */
  display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: clamp(10px, 2vw, 26px);
  align-items: end;
  border-bottom: var(--rule) solid var(--chalk);
  padding-bottom: 18px;
}
.size {
  display: flex; flex-direction: column; justify-content: flex-end;
  /* WICHTIG: ohne `align-items` zieht der Flexcontainer das Kaestchen
     auf die volle Spaltenbreite und `aspect-ratio` kommt nie zum Zug --
     aus jedem Hochformat wird ein Querformat. */
  align-items: flex-start;
  height: 460px;
}
.size__box {
  height: var(--h);
  aspect-ratio: 210 / 297;      /* alle A-Formate teilen dieses Verhaeltnis */
  width: auto; max-width: 100%;
  background: var(--ink-2);
  border: 2px solid var(--chalk);
  box-shadow: 6px 6px 0 var(--acc);
  margin-bottom: 16px;
}
.size:nth-child(1) { --acc: var(--olive); }
.size:nth-child(2) { --acc: var(--mustard); }
.size:nth-child(3) { --acc: var(--cobalt); }
.size:nth-child(4) { --acc: var(--red); }
.size__id {
  font-family: var(--display); font-size: 1.7rem; color: var(--acc);
  line-height: 1;
}
.size__mm { font-size: .82rem; color: var(--chalk); }
.size__in, .size__note { font-size: .78rem; color: var(--dust); }
.size__note { margin-top: 4px; }
.size__price {
  margin-top: 8px; font-size: .84rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--chalk);
}

/* -------------------------------------------------------- Der Beweis --- */
.proof { background: var(--ink-2); border-top: var(--rule) solid var(--ink-3); }
.proof__in { display: grid; gap: clamp(26px, 4vw, 56px); grid-template-columns: 1fr; align-items: center; }
.proof__note { color: var(--dust); max-width: 46ch; margin: 0 0 1.8rem; }
.proof__img { margin: 0; position: relative; }
.proof__img img { width: 100%; }
.proof__img figcaption {
  margin-top: 10px; font-size: .76rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dust);
}

/* --------------------------------------------------------- Wer zeichnet */
.about__in { display: grid; gap: clamp(20px, 3vw, 48px); grid-template-columns: 1fr; }
.about__txt p { max-width: 58ch; }
.about__proof {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--acc);
  margin: 1.4rem 0 1.8rem;
}
.ribbon {
  display: flex; gap: 12px; margin-top: clamp(30px, 5vw, 60px);
  overflow-x: auto; padding-bottom: 8px;
}
.ribbon img { width: 150px; flex: 0 0 auto; }
.ribbon img:nth-child(even) { transform: rotate(2deg); }
.ribbon img:nth-child(odd)  { transform: rotate(-1.6deg); }

/* ----------------------------------------------------------- Fragen --- */
.qas { border-top: 2px solid var(--ink-3); }
.qa { border-bottom: 2px solid var(--ink-3); }
.qa summary {
  cursor: pointer; list-style: none; padding: 1.05em 2.4em 1.05em 0;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1.02rem, 1.8vw, 1.3rem); letter-spacing: .015em;
  position: relative;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; position: absolute; right: 0; top: .72em;
  font-size: 1.5em; line-height: 1; color: var(--acc);
}
.qa[open] summary::after { content: "\2013"; }
.qa summary:hover { color: var(--acc); }
.qa p { margin: 0 0 1.4em; max-width: 62ch; color: var(--dust); }

/* ------------------------------------------------------- Produktseite --- */
.prod__in {
  display: grid; gap: clamp(28px, 4vw, 64px);
  grid-template-columns: 1fr;
  padding-top: clamp(26px, 4vw, 56px);
  padding-bottom: clamp(40px, 6vw, 90px);
}
.view { margin: 0; filter: drop-shadow(14px 14px 0 var(--acc)); }
.view img { width: 100%; }
.view__zoom { margin-top: 26px; }

.crumb {
  font-size: .76rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dust); margin: 0 0 1.2rem;
}
.crumb a { color: var(--acc); text-decoration: none; }
.crumb span { opacity: .5; margin: 0 .4em; }

.prod__tag {
  font-size: clamp(2.4rem, 6vw, 4.3rem); margin: 0 0 .12em;
  color: var(--chalk);
  text-shadow: 3px 3px 0 var(--ink), 7px 7px 0 var(--acc);
}
.prod__who {
  margin: .5rem 0 .1rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; font-size: .84rem;
}
.prod__moment { margin: 0 0 1.5rem; color: var(--dust); }

.prod__price {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin: 0 0 1.8rem; padding-bottom: 1.2rem;
  border-bottom: 2px solid var(--ink-3);
}
.prod__price [data-price] {
  font-family: var(--display); font-size: clamp(1.9rem, 4vw, 2.7rem);
  color: var(--chalk); line-height: 1;
}
.prod__pick {
  font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--dust);
}

.buy__lbl {
  font-size: .76rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--dust);
  margin: 1.8rem 0 .7rem;
}
.opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.opts--frame { grid-template-columns: 1fr 1fr; }
.opt {
  background: transparent; cursor: pointer; text-align: left;
  border: 2px solid var(--ink-3); padding: 12px 14px;
  display: grid; gap: 2px;
  transition: border-color .08s steps(2), background .08s steps(2);
}
.opt:hover { border-color: var(--dust); }
.opt.is-on {
  border-color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent);
}
.opt__id { font-family: var(--display); font-size: 1.28rem; line-height: 1; }
.opt__mm, .opt__p { font-size: .76rem; color: var(--dust); }
.opt.is-on .opt__p { color: var(--chalk); }

.buy__sec {
  margin: .9rem 0 0; font-size: .76rem; color: var(--dust);
  display: flex; align-items: center; gap: 8px;
}
.buy__sec::before {
  content: ""; width: 9px; height: 9px; background: var(--neon);
  flex: 0 0 auto;
}
.btn--buy { margin-top: 1.6rem; }

.assure {
  list-style: none; margin: 1.9rem 0 0; padding: 1.3rem 0 0;
  border-top: 2px solid var(--ink-3);
  display: grid; gap: 12px;
}
.assure li { display: flex; gap: 11px; align-items: flex-start; font-size: .89rem; color: var(--dust); }
.assure .scrib { margin-top: .18em; }

.story {
  margin: 2.2rem 0 0; padding: 1.4rem 0 0;
  border-top: 2px solid var(--ink-3);
}
.story p {
  margin: 0; font-size: 1.06rem; max-width: 48ch;
  border-left: var(--rule) solid var(--acc); padding-left: 16px;
}

.spec { width: 100%; border-collapse: collapse; font-size: .88rem; }
.spec th, .spec td {
  text-align: left; padding: .62em 0; border-bottom: 2px solid var(--ink-3);
  vertical-align: top;
}
.spec th {
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  font-size: .74rem; color: var(--dust); width: 38%;
}
.pending {
  font-style: normal; color: var(--acc); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .07em;
}

/* Mehr aus der Serie */
.more { border-top: var(--rule) solid var(--ink-3); }
.minis { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; }
.mini { flex: 0 0 auto; width: 150px; text-decoration: none; }
.mini img { width: 100%; transition: transform .12s steps(3); }
.mini:hover img { transform: rotate(-2deg) scale(1.04); }
.mini__tag {
  display: block; margin-top: 8px; font-size: 1rem; color: var(--acc);
}

/* Das 1:1-Fenster. Das Bild wird NICHT skaliert -- es ist der einzige
   Ort, an dem die Druckaufloesung ueberhaupt sichtbar ist. */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: var(--ink); display: flex; flex-direction: column;
}
.modal[hidden] { display: none; }
.modal__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gut); border-bottom: var(--rule) solid var(--chalk);
  font-size: .76rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dust);
}
.modal__x {
  background: var(--neon); color: #000; border: 0; cursor: pointer;
  padding: 8px 14px; font-family: var(--display); text-transform: uppercase;
  letter-spacing: .06em;
}
.modal__body { flex: 1; overflow: auto; display: grid; place-items: center; padding: 20px; }
.modal__body img { max-width: none; width: 1400px; height: 1400px; }

/* --------------------------------------------------------- Warenkorb --- */
.cart { border-top: 2px solid var(--ink-3); margin-bottom: 2rem; }
.cart__empty { color: var(--dust); padding: 2rem 0; }
.row {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 16px;
  align-items: center; padding: 1.1rem 0;
  border-bottom: 2px solid var(--ink-3);
}
.row img { width: 64px; }
.row__tag { font-family: var(--display); font-size: 1.2rem; color: var(--acc); }
.row__meta { font-size: .78rem; color: var(--dust); text-transform: uppercase; letter-spacing: .08em; }
.row__right { text-align: right; display: grid; gap: 6px; }
.row__p { font-weight: 700; }
.row__x {
  background: none; border: 0; cursor: pointer; color: var(--dust);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  text-decoration: underline; padding: 0;
}
.row__x:hover { color: var(--red); }
.qty { display: inline-flex; border: 2px solid var(--ink-3); }
.qty button { background: none; border: 0; cursor: pointer; padding: 2px 9px; color: var(--chalk); }
.qty button:hover { background: var(--ink-3); }
.qty span { padding: 2px 8px; min-width: 30px; text-align: center; font-weight: 700; }

.cart__foot { border-top: var(--rule) solid var(--chalk); padding-top: 1.4rem; }
.cart__line {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 .35rem; font-size: .92rem; color: var(--dust);
}
.cart__line span:last-child { color: var(--chalk); font-weight: 700; }
.cart__hint {
  margin: 0 0 .9rem; font-size: .78rem; color: var(--acc);
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.cart__hint:empty { display: none; }
.cart__err {
  margin: .9rem 0 0; padding: 10px 14px;
  border: 2px solid var(--red); color: var(--chalk); font-size: .86rem;
}
.cart__sum {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: .6rem 0 .3rem; padding-top: .6rem;
  border-top: 2px solid var(--ink-3);
}
.cart__sum strong { font-family: var(--display); font-size: 2rem; }
.cart__ship { color: var(--dust); font-size: .84rem; margin: 0 0 1.4rem; }
.cart__back { margin-top: 1.4rem; font-size: .84rem; }
.cart__back a { color: var(--acc); }
#checkout[aria-disabled="true"] {
  background: var(--ink-3); color: var(--dust); box-shadow: 7px 7px 0 var(--ink-2);
  pointer-events: none;
}

/* Die Kaufleiste am unteren Rand, nur auf schmalen Schirmen. Wer die
   Geschichte und die Materialtabelle liest, hat den Knopf laengst aus
   dem Bild gescrollt -- dann muss er unten stehen. */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  display: none; align-items: center; gap: 14px;
  background: var(--ink); border-top: var(--rule) solid var(--chalk);
  padding: 10px var(--gut);
}
.buybar__p {
  font-family: var(--display); font-size: 1.5rem; line-height: 1;
  flex: 0 0 auto;
}
.buybar .btn--buy { margin-top: 0; box-shadow: 4px 4px 0 var(--acc); }
@media (max-width: 899px) {
  .buybar { display: flex; }
  body.p-sheet { padding-bottom: 78px; }
  body.p-sheet .toast { bottom: 92px; }   /* nicht unter die Leiste */
}

/* Die Meldung nach dem Klick. Sie muss dort erscheinen, wo geklickt
   wurde -- ein Hinweis oben rechts wird auf dem Handy nicht gesehen. */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 120; background: var(--neon); color: #000;
  border: var(--rule) solid var(--ink);
  padding: 12px 20px; font-family: var(--display);
  text-transform: uppercase; letter-spacing: .05em;
  box-shadow: 6px 6px 0 var(--ink);
  display: flex; gap: 14px; align-items: center;
}
.toast a { color: #000; }

/* ---------------------------------------------------------------- Fuss --- */
.foot {
  border-top: var(--rule) solid var(--chalk);
  background: var(--ink-2); margin-top: clamp(40px, 6vw, 90px);
}
.foot__in {
  display: grid; gap: clamp(24px, 4vw, 50px);
  grid-template-columns: 1fr;
  padding-top: clamp(34px, 5vw, 64px); padding-bottom: clamp(28px, 4vw, 48px);
}
.foot__brand .mark {
  font-family: var(--display); font-size: 1.9rem; text-transform: uppercase;
  display: block; margin-bottom: .3em; text-shadow: 2px 2px 0 var(--acc);
}
.foot__brand p { margin: 0 0 .4em; color: var(--dust); font-size: .88rem; }
.foot__mail a { color: var(--acc); }
.foot__col h4 {
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--dust); margin: 0 0 .9em;
}
.foot__col a {
  display: block; text-decoration: none; font-size: .9rem;
  padding: .28em 0; color: var(--chalk);
}
.foot__col a:hover { color: var(--acc); }
.foot__base {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  border-top: 2px solid var(--ink-3);
  padding-top: 16px; padding-bottom: 26px;
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dust);
}

/* ------------------------------------------------------------ Breiter --- */
@media (min-width: 720px) {
  .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reasons { grid-template-columns: repeat(3, 1fr); }
  .about__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .mini { width: 172px; }
  .foot__in { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

@media (min-width: 900px) {
  /* Der Anspruch bleibt EINSPALTIG ueber die volle Breite, die
     Blaetter stehen darunter rechts. Zwei Spalten wuerden ihn wieder
     auf die halbe Bahn zwingen. */
  .hero__stack { justify-self: end; margin-right: 4%; }
  .hero__stack { max-width: 100%; }
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proof__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .prod__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
  .prod__view { position: sticky; top: 84px; }
}

@media (min-width: 1180px) {
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 44px; }
  .opts { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------- Schmalbild --- */
@media (max-width: 719px) {
  .head__nav { display: none; }        /* der Kopf traegt Marke und Korb */
  /* Auf dem Handy nur das Kuerzel -- "Currency" davor braeuchte Platz,
     den der Kopf nicht hat. Das Feld allein ist selbsterklaerend. */
  .cursel__lbl { display: none; }
  .cursel__in { padding: 10px 8px; font-size: .74rem; }
  .head__cart { padding: 12px 10px; }

  /* Der Stapel im Kopf wird klein gehalten. In voller Breite schiebt er
     die Wand um 500 px nach unten -- auf einem Handy ist das der halbe
     Weg zum Absprung, und gesehen hat man dann ein Blatt statt elf. */
  .hero__stack { max-width: 290px; }
  .hero { padding-top: 18px; }
  .claim { margin-bottom: .6rem; }
  .hero__sub { margin: .9rem 0 1.3rem; font-size: 1rem; }
  .hero__cta { gap: 14px; }
  .hero__grid { gap: 20px; }
  .strip__i { font-size: .74rem; letter-spacing: .07em; }

  /* Die Wand auf dem Handy: durchgehend zwei nebeneinander. Zehn
     Blaetter einspaltig waeren ueber 6000 px Scrollweg, den niemand
     geht -- so passen vier auf einen Bildschirm und man sieht, dass es
     eine Serie ist. Der Abstand zwischen den Kacheln ist dafuer enger
     gestellt, damit vom Blatt selbst mehr uebrig bleibt. */
  .wall { gap: 24px 12px; }
  .tile__meta { margin-top: 10px; padding-top: 9px; }
  .tile__tag { font-size: 1.15rem; }
  .tile__who { font-size: .74rem; letter-spacing: .06em; }
  .tile__moment { font-size: .78rem; }
  .tile__price { font-size: .7rem; }
  .kit { font-size: .72rem; gap: .35em; }

  /* Die Grossenleiter.
     260 px, nicht 300: bei 375 px Fensterbreite ist eine Spalte 79 px
     breit, und ein A1-Kaestchen von 126 px Hoehe waere 89 px breit --
     `max-width` haette es eingeklemmt und aus dem Hochformat ein
     schmaleres Rechteck gemacht. Damit waere ausgerechnet der Balken
     falsch, der den Groessenunterschied zeigen soll. Bei 260 px passt
     A1 mit 109 x 77 px hinein. */
  .sizes { gap: 8px; }
  .size { height: 260px; }
  .size__in, .size__note { display: none; }
  .size__id { font-size: 1.15rem; }
  .size__mm { font-size: .66rem; }
  .size__price { font-size: .72rem; }

  .claim__l--b { text-shadow: 3px 3px 0 var(--ink), -1px -1px 0 var(--chalk), 6px 6px 0 var(--neon); }
  @keyframes boil-b {   /* auf dem Handy ohne den grossen Neonversatz */
    0%, 100% { text-shadow: 3px 3px 0 var(--ink), -1px -1px 0 var(--chalk),
                            6px 6px 0 var(--neon), 0 0 12px rgba(124,255,58,.16); }
    30%      { text-shadow: 4px 2px 0 var(--ink), -1px -2px 0 var(--chalk),
                            7px 5px 0 var(--neon), 0 0 20px rgba(124,255,58,.3); }
    60%      { text-shadow: 2px 4px 0 var(--ink), -2px -1px 0 var(--chalk),
                            5px 7px 0 var(--neon), 0 0 10px rgba(124,255,58,.1); }
  }

  .modal__body img { width: 1400px; }  /* bewusst breiter als der Schirm:
                                          es wird gescrollt, nicht skaliert */

  /* ---- Tippziele ------------------------------------------------ */
  /* Ein Finger trifft nicht, was ein Mauszeiger trifft. Alles, was
     angetippt wird, bekommt hier mindestens 44 px Hoehe -- gemessen
     wurde vorher: Fusszeilen-Links 31 px, Wortmarke 17 px, die beiden
     Social-Knoepfe 23 px. */
  .menu { display: block; }
  .head__mark { padding: 12px 0; }
  /* Der Waehrungsumschalter. Klein, ohne Rundung, ohne Pfeilchen-Chrom
   des Systems -- er soll wie ein gedruckter Vermerk aussehen, nicht wie
   ein Formularfeld. */
.cursel { display: inline-flex; align-items: center; gap: 7px; }
.cursel__lbl {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dust);
}
.cursel__in {
  -webkit-appearance: none; appearance: none;
  background: transparent; color: var(--chalk);
  border: 2px solid var(--ink-3);
  font: inherit; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 10px; cursor: pointer;
}
.cursel__in:hover { border-color: var(--acc); }
.cursel__in option { background: var(--ink); color: var(--chalk); }

.head__cart { padding: 12px 14px; font-size: .8rem; }
  .foot__col a { min-height: 44px; display: flex; align-items: center; }
  .foot__mail a, .cart__back a, .sec__more a {
    display: inline-block; padding: 10px 0;
  }
  .rail { gap: 10px; }
  .rail__link {
    border: 2px solid var(--acc); border-bottom-width: 2px;
    padding: 11px 14px; min-height: 44px; display: inline-flex;
    align-items: center;
  }
  .row__x { padding: 13px 0; }
  /* Plus und Minus im Warenkorb waren 27 x 28 px. Das trifft ein Finger
     nicht -- und wer danebentippt, aendert die Menge nicht, sondern
     verlaesst die Seite. */
  .qty button { min-width: 46px; min-height: 46px; font-size: 1.2rem; }
  .qty span { min-width: 40px; }
  .row { grid-template-columns: 74px 1fr auto; }
  .row img { width: 74px; }
  .crumb a { display: inline-block; padding: 12px 0; }
  /* Die Kaufleiste misst 90 px, nicht 78 -- sonst deckt sie die letzte
     Zeile der Materialtabelle zu. */
  body.p-sheet { padding-bottom: 96px; }
  .qa summary { padding-top: 1.15em; padding-bottom: 1.15em; }
}

/* --------------------------------------------------- Weniger Bewegung --- */
/* Wer das im System abstellt, bekommt eine stehende Seite. Inhalt haengt
   an keiner Animation -- der Grundzustand ist der sichtbare. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mq__run, .claim__l, .head__mark { animation: none !important; }
  .claim__l, .mq__i { filter: none !important; }   /* kein Boil */
  *, *::before, *::after { transition-duration: .001s !important; }
  .tile__frame, .ribbon img, .claim__l { transform: none !important; }
}

/* ------------------------------------------------------------ Drucken --- */
@media print {
  .head, .foot, .grain, .mq, .btn, .modal { display: none !important; }
  body { background: #fff; color: #000; }
}