/* ============================================================
   SLAPP · style.css
   Einzelstücke. Eine Story. Ein Button pro Stück.
   Aufbau: 1 Schriften · 2 Grundlagen · 3 Typo · 4 Header
           5 Bilder · 6 Kauf und Stücke · 7 Sektionen
           8 Modal · 9 Sticky Buy · 10 Footer · 11 Bewegung
   ============================================================ */

/* ---------- 1 Schriften (selbst gehostet, kein Google-Abruf) ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2 Grundlagen ---------- */
:root {
  --tinte:  #0b0b0b;
  --papier: #ffffff;
  --grau:   #5f5f5f;
  --linie:  #dcdcdc;
  --feld:   #f2f2f0;
  --rot:    #b40000;
  --hand:   #b40000;   /* Handabdrücke, einziger Farbakzent */
  --rand:   clamp(20px, 5vw, 72px);
  --luft:   clamp(56px, 8vw, 128px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

.huelle { width: 100%; max-width: 1560px; margin: 0 auto; padding-inline: var(--rand); }

.abschnitt { padding-block: var(--luft); }

/* Sprungmarken unter den fixen Header legen */
[id] { scroll-margin-top: 116px; }

.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.sprung {
  position: absolute; left: var(--rand); top: -100px; z-index: 200;
  background: var(--tinte); color: #fff; padding: 12px 20px; font-weight: 700;
}
.sprung:focus { top: 12px; }

/* ---------- 3 Typografie ---------- */
h1, h2, h3, .gross, .wortmarke {
  margin: 0;
  font-weight: 800;
  font-stretch: 108%;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Die Untergrenze lag bei 3,1rem. Bei 320 bis 390 px greift sie statt der
   12,5vw, und dann passt „with a slap." nicht mehr in eine Zeile: die
   Überschrift wurde dreizeilig. Gemessen: bei 320 px Fenster stehen 280 px
   zur Verfügung, die Zeile braucht bei 40 px Schrift 276 px. */
h1 { font-size: clamp(2.45rem, 12.5vw, 11rem); letter-spacing: -0.045em; }
h2 { font-size: clamp(2.3rem, 7.2vw, 6rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.05; }

/* Riesen-Statements (NOT DIRTY. SLAPPED. / DIRTY ON PURPOSE.) */
.gross { font-size: clamp(3rem, 13vw, 12rem); letter-spacing: -0.05em; }

/* Zweizeiler: jede Zeile steht für sich und bricht nicht um.
   Die Größe richtet sich nach der längsten Zeile, nicht nach dem Platz. */
.zwei > span { display: block; white-space: nowrap; }
h2.zwei { font-size: clamp(1.9rem, 5.1vw, 4.6rem); }
.gross.zwei { font-size: clamp(2.6rem, 10.5vw, 9.5rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.vorzeile {
  margin: 0 0 clamp(14px, 2vw, 26px);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--grau);
}

.anriss {
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.6rem);
  font-weight: 500; line-height: 1.35; letter-spacing: -0.015em;
  max-width: 34ch;
}

.text { color: var(--grau); max-width: 62ch; }
.text strong { color: var(--tinte); font-weight: 700; }

.platzhalter-wert { font-weight: 800; color: var(--rot); }

a { color: inherit; }
.verweis {
  text-decoration: none; border-bottom: 1px solid currentColor;
  padding-bottom: 2px; transition: opacity .2s;
}
.verweis:hover { opacity: .55; }

/* ---------- 4 Header ---------- */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 90;
  background: var(--papier);
  transition: box-shadow .3s ease;
}
.kopf.ist-gescrollt { box-shadow: 0 10px 30px rgba(11, 11, 11, .07); }

.kopf__innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 96px;
}

.wortmarke {
  font-size: 1.6rem; letter-spacing: -0.05em; text-decoration: none;
  font-stretch: 112%;
}

.marke { display: inline-flex; align-items: center; text-decoration: none; }
.marke img { height: 76px; width: auto; }

.kopf__nav { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }

.kopf__nav a {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none; transition: opacity .2s;
}
.kopf__nav a:hover { opacity: .5; }

.knopf-klein {
  background: var(--tinte); color: #fff; border: 0;
  padding: 13px 26px; font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;
  text-decoration: none; transition: transform .2s ease, box-shadow .2s ease;
}
.knopf-klein:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(11,11,11,.22); }
.knopf-klein:active { transform: translateY(0); }

/* Symbolknopf: quadratisch statt breiter Schaltfläche, die Zahl sitzt als
   Marke in der oberen Ecke. */
.korb-knopf {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; width: 48px; height: 48px;
}
.korb-symbol {
  width: 24px; height: 24px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.korb-zahl {
  position: absolute; top: -6px; right: -6px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--rot); color: #fff; border-radius: 10px;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0;
  /* Ein Ring in Seitenfarbe trennt die Marke vom schwarzen Knopf */
  box-shadow: 0 0 0 2px var(--papier);
}
.korb-zahl[hidden] { display: none; }

@media (max-width: 860px) {
  .kopf__nav a { display: none; }
  .marke img { height: 56px; }
}

/* ---------- 5 Bilder / Platzhalter ---------- */
.aufnahme {
  position: relative; overflow: hidden; margin: 0;
  background: var(--feld); aspect-ratio: 4 / 5;
}
.aufnahme img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.aufnahme:hover img { transform: scale(1.035); }
.aufnahme--hoch  { aspect-ratio: 3 / 4; }
.aufnahme--quer  { aspect-ratio: 4 / 3; }
.aufnahme--quadr { aspect-ratio: 1 / 1; }

/* Freigestelltes Produktfoto: nicht beschneiden sondern einpassen, sonst sägt
   cover die Ärmel ab. Im Hero steht es frei auf Weiß, ein grauer Kasten drum
   herum nimmt dem Freisteller genau das, wofür man ihn freistellt. Das
   Seitenverhältnis folgt dem Bild, sonst bleibt oben und unten tote Fläche. */
.aufnahme--produkt {
  background: none; aspect-ratio: 900 / 1079; overflow: visible;
}
.aufnahme--produkt img { object-fit: contain; }
/* Im Drop sind es Kacheln: dort bleibt das ruhige Feld, damit die drei Karten
   gleich schwer wirken, solange die anderen beiden noch Fotos sind. */
.stueck .aufnahme--produkt {
  background: var(--feld); aspect-ratio: 3 / 4; overflow: hidden;
}
.stueck .aufnahme--produkt img { padding: clamp(12px, 2vw, 26px); }

/* Solange das echte Foto fehlt: ruhige Fläche mit dem Dateinamen */
.aufnahme.ist-leer img { display: none; }
.aufnahme__marke {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 20px; color: #9a9a95;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}
.aufnahme__marke span { color: var(--rot); }

/* ---------- 6 Kauf und Stücke ---------- */
.bestellen:focus-visible, .stueck__knopf:focus-visible,
.knopf-klein:focus-visible, .knopf-rand:focus-visible, .verweis-knopf:focus-visible,
a:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--tinte); outline-offset: 3px;
}

/* Bestandszeile: "Noch 3 von 4 Stücken frei" */
.bestand {
  margin: clamp(22px, 3vw, 32px) 0 0;
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
}
.bestand[hidden] { display: none; }

/* Textknopf, liest sich wie ein Link */
.verweis-knopf {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--tinte);
  border-bottom: 1px solid currentColor; transition: opacity .2s;
}
.verweis-knopf:hover { opacity: .55; }

.bestellen {
  display: block; width: 100%; margin-top: clamp(24px, 3.4vw, 36px);
  padding: clamp(22px, 2.6vw, 30px) 24px; cursor: pointer;
  background: var(--tinte); color: #fff; border: 0;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bestellen:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(11,11,11,.26); }
.bestellen:active { transform: translateY(0); box-shadow: none; }

.hinweis { margin-top: 14px; font-size: 0.85rem; color: var(--grau); min-height: 1.4em; }
.hinweis--fehler { color: var(--rot); font-weight: 700; }

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

/* Hero */
/* Der Header liegt fest oben und ist 96 px hoch. Ohne diesen Abstand rutscht
   die Überschrift darunter und wird oben abgeschnitten. */
.hero { padding-top: calc(96px + clamp(30px, 5vw, 76px)); padding-bottom: var(--luft); }
.hero h1 { margin-bottom: clamp(30px, 5vw, 60px); }

.hero__gitter {
  display: grid; gap: clamp(28px, 4.5vw, 72px);
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  align-items: start;
}
/* Ohne Deckel wird das Produktfoto auf großen Schirmen absurd groß und
   erschlägt die ganze Seite. Aber: greift der Deckel, schrumpft `aspect-ratio`
   auch die BREITE des Kastens mit, und der schmalere Kasten stand dann links
   in seiner Spalte. Auf niedrigen Fenstern sah das Bild dadurch aus, als wäre
   es nach links gerutscht. `justify-self` stellt ihn mittig. */
.hero__gitter > .aufnahme { max-height: min(68vh, 660px); justify-self: center; }
/* Ohne Begrenzung zieht sich der Text über die ganze Spalte und der Knopf
   wird absurd breit, seit das Bild schmaler ist. */
.hero__info { padding-top: 6px; max-width: 620px; }
.hero__info h2 { margin: clamp(30px, 4vw, 48px) 0 16px; font-size: clamp(1.6rem, 2.6vw, 2.4rem); }

/* ---- Das drehende Shirt in der Überschrift ----
   Eine volle Umdrehung mit 24 Bildern pro Sekunde. Als Sprite ging das nicht:
   192 Einzelbilder in einer Bilddatei sind nicht zu bezahlen, und mit weniger
   Bildern ruckelt es sichtbar. Also ein Video, aber eines, das auf der Seite
   liegt und nicht davorgeschaltet ist: ohne Ton, ohne Bedienleiste, in der
   Überschrift.

   Kein Alphakanal nötig: das Video läuft auf reinem Weiß und `multiply` lässt
   Weiß verschwinden, weil Weiß mal Untergrund den Untergrund ergibt. Deshalb
   sind die Einzelbilder vorher auf exakt 255 gesetzt worden, sonst bliebe ein
   hellgrauer Kasten stehen. */
.titel { position: relative; }
.titel h1 { position: relative; z-index: 1; }

.dreh {
  display: none;
  position: absolute; z-index: 0; pointer-events: none;
  right: 0; top: 50%;
  height: clamp(140px, 24vw, 344px); width: auto;
  transform: translateY(-50%);
}
/* Kein mix-blend-mode. Es war erst drin, um das Weiß wegzublenden, ist aber
   überflüssig: nachgemessen liefert der Decoder im Videokasten exakt 255,
   also dasselbe Weiß wie die Seite. Blenden kostet den Compositor dagegen
   jedes Bild Arbeit und kann die Wiedergabe stocken lassen. */

/* Ein Stück in den Seitenrand hinein. Die Lücke neben „It started" ist nur
   gut 200 px breit, jeder Pixel weiter rechts ist ein Buchstabe weniger, der
   verdeckt wird. Erst ab 900 px, darunter wird es sonst eng. */
@media (min-width: 900px) { .dreh { right: calc(var(--rand) * -0.4); } }

/* Die Klasse setzt app.js, und zwar nur bei genug Breite und ohne reduzierte
   Bewegung. Erst dann bekommt das Video überhaupt eine Quelle, vorher lädt
   nichts. Und ohne JavaScript bleibt einfach der Handabdruck stehen. */
html.dreht .dreh { display: block; }
html.dreht .hand--hero { display: none; }

/* Story */
.story__gitter {
  display: grid; gap: clamp(22px, 3.4vw, 52px);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  align-items: stretch;
  margin-top: clamp(26px, 3.6vw, 48px);
}
/* Das Bild soll die Höhe des Textes annehmen und nicht seine eigene mitbringen.
   Deshalb liegt das img absolut, sonst schiebt es die Zeile auf und es klafft
   unter dem Text eine Lücke. */
.story__bild { aspect-ratio: auto; height: 100%; position: relative; }
/* Das Bild ist hochkant, der Ausschnitt quer. Ohne Verschiebung schneidet
   cover oben und unten gleich viel ab und der Kopf ist weg. */
.story__bild img { position: absolute; inset: 0; object-position: 50% 12%; }
.story__text { font-size: clamp(1rem, 0.97rem + 0.25vw, 1.2rem); }

/* Look */
.look__kopf {
  display: grid; gap: clamp(28px, 4vw, 80px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end;
}
.look__gitter {
  display: grid; gap: clamp(12px, 1.6vw, 22px);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  grid-auto-rows: clamp(300px, 32vw, 560px);
  margin-top: clamp(26px, 3.6vw, 48px);
}
.look__gitter .aufnahme { aspect-ratio: auto; height: 100%; }

/* Clips: der Video-Schieber ------------------------------------------------
   Das Scrollen macht der Browser (overflow + scroll-snap). Wischen auf dem
   Handy und Trackpad funktioniert damit ohne JavaScript, die Pfeile und die
   Punkte sind Zugabe. Die Karten rasten links ein, die nächste schaut
   angeschnitten heraus, damit man sieht, dass es weitergeht. */
.clips__kopf {
  display: grid; gap: clamp(28px, 4vw, 80px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end;
}
.clips__kopf .text { max-width: none; }

.clips__bahn {
  display: flex; gap: clamp(12px, 1.6vw, 22px);
  margin-top: clamp(26px, 3.6vw, 48px);
  overflow-x: auto; overflow-y: hidden;
  /* proximity statt mandatory: mandatory kämpft mit programmgesteuertem
     Scrollen und zieht die Bahn wieder an den alten Punkt zurück. */
  scroll-snap-type: x proximity;
  /* Das Gleiten der Pfeile macht der Browser hierüber. Über JavaScript
     (scrollTo mit behavior smooth oder eine eigene Animation) bleibt es
     zusammen mit scroll-snap wirkungslos. */
  scroll-behavior: smooth;
  scroll-padding-left: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Die Karten sollen bis an den Seitenrand laufen und dort erst enden,
     sonst wirkt der Schieber wie abgeschnitten. */
  padding-bottom: 4px;
}
.clips__bahn::-webkit-scrollbar { display: none; }
.clips__bahn:focus-visible { outline: 2px solid var(--tinte); outline-offset: 6px; }

.clip {
  flex: 0 0 auto; scroll-snap-align: start;
}
/* Die letzte Karte rastet am Ende ein. Ohne das liegt ihr Einrastpunkt
   hinter dem Scrollende, sie ist also nie erreichbar, und die Bahn springt
   an den Anfang zurück. Klassische Falle bei Karten-Schiebern. */
.clip:last-child { scroll-snap-align: end; }
.clip {
  /* Vier nebeneinander ab 1200 px, darunter weniger. Der Abzug ist der
     Zwischenraum, sonst passt die letzte Karte nicht mehr. */
  width: calc((100% - 3 * clamp(12px, 1.6vw, 22px)) / 3.4);
  min-width: 190px;
}
.clip__rahmen {
  position: relative; aspect-ratio: 9 / 16;
  background: var(--feld); overflow: hidden;
}
.clip__video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: var(--feld);
}

/* Tonschalter: sitzt in der Ecke des Videos, nicht darüber */
.clip__ton {
  position: absolute; right: 10px; bottom: 10px;
  width: 38px; height: 38px; padding: 0; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(11, 11, 11, .62); color: #fff;
  border-radius: 50%;
  transition: background .2s;
}
.clip__ton:hover { background: rgba(11, 11, 11, .85); }
.clip__ton svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.clip__ton .clip__ton-korpus { fill: currentColor; stroke-linejoin: round; }
/* Aus: Kreuz sichtbar, Wellen weg. An: umgekehrt. */
.clip__ton .clip__ton-an { display: none; }
.clip__ton[aria-pressed="true"] .clip__ton-aus { display: none; }
.clip__ton[aria-pressed="true"] .clip__ton-an { display: inline; }

/* Fehlt die Datei noch, steht der Dateiname da statt einer leeren Fläche */
.clip.ist-leer .clip__ton { display: none; }
.clip__leer {
  /* flex statt grid: bei grid werden Text und <span> zu zwei Rasterreihen
     und rutschen auseinander. */
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 18px; text-align: center; color: #9a9a95;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}
.clip__leer span { display: block; margin-top: 8px; color: var(--rot); letter-spacing: 0.12em; }

.clips__steuer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-top: clamp(18px, 2.4vw, 28px);
}
.clips__punkte { display: flex; gap: 8px; }
.clips__punkt {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--linie); transition: background .25s, transform .25s;
}
.clips__punkt.ist-aktiv { background: var(--tinte); transform: scale(1.25); }
.clips__pfeile { display: flex; gap: 10px; }
.clips__pfeil {
  width: 46px; height: 46px; padding: 0; cursor: pointer;
  background: var(--papier); color: var(--tinte);
  border: 1px solid var(--linie);
  display: grid; place-items: center;
  transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.clips__pfeil svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.clips__pfeil:hover { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.clips__pfeil[disabled] { opacity: .3; cursor: default; }
.clips__pfeil[disabled]:hover { background: var(--papier); color: var(--tinte); border-color: var(--linie); }

.hand--clips {
  --dreh: -19deg; --deckung: .45; --farbe: #fa682a;
  -webkit-mask-image: url('haende/hand-1.webp'); mask-image: url('haende/hand-1.webp');
  width: clamp(64px, 7vw, 130px); aspect-ratio: 670 / 776;
  top: clamp(-14px, 1vw, 26px); right: clamp(0px, 5vw, 110px);
}

/* Schwarzes Band */
.band {
  background: var(--tinte); color: #fff;
  padding-block: clamp(70px, 10vw, 150px);
  margin-block: var(--luft);
  position: relative; overflow: hidden;
}
.band .gross { position: relative; z-index: 2; }
/* Der Drop: die Einzelstücke */
.drop__kopf {
  display: grid; gap: clamp(28px, 4vw, 80px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end;
}
.drop__kopf .anriss { margin-top: clamp(16px, 2vw, 24px); }
/* In den Kopfzeilen soll der Text die Spalte nutzen und nicht bei 62ch aufhören */
.look__kopf > .text, .drop__kopf > .text { max-width: none; }

.drop__gitter {
  display: grid; gap: clamp(22px, 2.6vw, 40px) clamp(18px, 2.2vw, 34px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(34px, 5vw, 64px);
}

.stueck { display: flex; flex-direction: column; }
.stueck .aufnahme { position: relative; }
.stueck__inhalt { display: flex; flex-direction: column; flex: 1; }

.stueck__nr {
  margin: 18px 0 6px;
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--grau);
}
.stueck h3 { margin-bottom: 10px; }
.stueck__text { margin: 0 0 18px; font-size: 0.95rem; color: var(--grau); }

.stueck__preis {
  margin: auto 0 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em;
}

.stueck__wahl { margin: clamp(14px, 1.8vw, 20px) 0 0; }
.stueck__wahl label {
  display: block; margin-bottom: 8px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--grau);
}
/* Eigener Pfeil, das Standardgestell sieht auf jedem System anders aus */
.stueck__wahl select, .korb select {
  width: 100%; padding: 14px 44px 14px 16px; cursor: pointer;
  font: inherit; font-weight: 700; color: inherit;
  background-color: var(--papier);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230b0b0b' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
  border: 1px solid var(--linie); border-radius: 0;
  -webkit-appearance: none; appearance: none;
  transition: border-color .18s ease;
}
.stueck__wahl select:hover { border-color: var(--tinte); }
.stueck__wahl select:disabled { opacity: .4; cursor: not-allowed; }
.stueck__knopf + .hinweis { margin-top: 10px; }

.stueck__knopf {
  margin-top: clamp(16px, 2vw, 22px); padding: 18px 20px; width: 100%; cursor: pointer;
  background: var(--tinte); color: #fff; border: 0;
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease;
}
.stueck__knopf:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(11,11,11,.24); }
.stueck__knopf:active { transform: translateY(0); box-shadow: none; }

/* Vergeben: Stück bleibt sichtbar, ist aber erkennbar aus dem Rennen */
.stueck.ist-weg .aufnahme img { filter: grayscale(1); opacity: .5; }
.stueck.ist-weg .aufnahme:hover img { transform: none; }
.stueck.ist-weg .stueck__nr, .stueck.ist-weg h3,
.stueck.ist-weg .stueck__text, .stueck.ist-weg .stueck__preis,
.stueck.ist-weg .stueck__wahl { opacity: .5; }
.stueck__weg {
  position: absolute; left: 0; top: clamp(14px, 2vw, 22px);
  background: var(--tinte); color: #fff; padding: 9px 16px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
}
.stueck__knopf:disabled {
  background: none; color: var(--grau);
  box-shadow: inset 0 0 0 1px var(--linie); cursor: not-allowed;
}
.stueck__knopf:disabled:hover { transform: none; box-shadow: inset 0 0 0 1px var(--linie); }

.drop__fuss { margin-top: clamp(34px, 4.5vw, 56px); }
/* Zwei Motive: kompakte Karten, linksbündig unter der Überschrift */
.drop__gitter--zwei { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: start; }

/* Gründer */
.koepfe {
  display: grid; gap: clamp(18px, 2.6vw, 34px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(34px, 5vw, 64px);
}
.kopf-karte .aufnahme img { filter: grayscale(1) contrast(1.06); }
/* Solange kein Porträt da ist, bleibt der Name allein stehen statt einer leeren Fläche */
.kopf-karte .aufnahme.ist-leer { display: none; }
.kopf-karte .aufnahme.ist-leer + h3 { margin-top: 0; }
.kopf-karte h3 { margin: 18px 0 8px; }
.kopf-karte p { font-size: 0.95rem; color: var(--grau); }
.kopf-karte__link {
  display: inline-block; margin-top: 10px; text-decoration: none; border-bottom: 1px solid currentColor;
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
}
.kopf-karte__link:hover { opacity: .55; }
.produkt__fan { margin: 18px 0 0; font-size: 0.9rem; color: var(--grau); }
.produkt__fan a { color: var(--tinte); font-weight: 700; }

.koepfe__schluss {
  margin-top: clamp(48px, 7vw, 96px);
  font-size: clamp(1.45rem, 3.3vw, 2.9rem); font-weight: 800; font-stretch: 108%;
  line-height: 0.98; letter-spacing: -0.035em; text-transform: uppercase;
}

/* Custom (bewusst leise) */
.custom { padding-block: clamp(56px, 7vw, 104px); }
.custom__gitter {
  display: grid; gap: clamp(20px, 3vw, 56px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start;
}
.custom h2 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); }
.knopf-rand {
  display: inline-block; margin-top: 22px; padding: 17px 30px; cursor: pointer;
  background: none; border: 1px solid var(--tinte); text-decoration: none;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.knopf-rand:hover { background: var(--tinte); color: #fff; }

/* Finaler CTA: eine Aussage, ein Knopf, Schluss */
.final { text-align: center; padding-block: clamp(80px, 11vw, 170px); }
.final .gross { margin-bottom: clamp(24px, 3vw, 40px); }
.final__text { margin-inline: auto; max-width: 54ch; }
.final .bestand { margin-top: clamp(26px, 3vw, 36px); }
.bestellen--mitte {
  width: auto; display: inline-block;
  padding-inline: clamp(40px, 6vw, 90px);
  margin-top: clamp(26px, 3.4vw, 40px);
}

/* Markenabschluss im Footer: links das Logo, rechts daneben der Claim */
.schluss {
  display: grid; align-items: center;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(22px, 4vw, 64px);
}
.schluss__logo { height: clamp(104px, 15vw, 240px); width: auto; }
.schluss__claim {
  margin: 0; font-weight: 800; font-stretch: 108%;
  line-height: 0.86; letter-spacing: -0.045em; text-transform: uppercase;
  font-size: clamp(2.1rem, 6.4vw, 6rem);
}

/* Echte Handabdruecke vom Shirt, ueber die Seite verteilt */
.hero, #story, #look, #clips, #stuecke, #people, .custom, #bestellen { position: relative; }
.hero > *:not(.hand), #story > *:not(.hand), #look > *:not(.hand),
#clips > *:not(.hand), #stuecke > *:not(.hand), #people > *:not(.hand),
.custom > *:not(.hand), #bestellen > *:not(.hand) { position: relative; z-index: 1; }

/* Die Handabdrücke sind Masken, keine Bilder: eine Datei je Form,
   die Farbe kommt aus dem Stylesheet. Dadurch in jeder Größe scharf. */
.hand, .band__hand {
  position: absolute; z-index: 0; pointer-events: none;
  /* Farbe je Abdruck: --farbe setzen, sonst Markenrot */
  background: var(--farbe, var(--hand));
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-position: center;  mask-position: center;
  opacity: 0; transform: scale(.88) rotate(var(--dreh, 0deg));
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.sichtbar .hand, .band.sichtbar .band__hand {
  opacity: var(--deckung, 1); transform: scale(1) rotate(var(--dreh, 0deg));
}

.hand--hero {
  --dreh: -12deg; --deckung: .9;
  -webkit-mask-image: url('haende/hand-1.webp'); mask-image: url('haende/hand-1.webp');
  width: clamp(96px, 11vw, 200px); aspect-ratio: 670 / 776;
  top: clamp(70px, 8vw, 120px); right: clamp(0px, 2vw, 40px);
}
.hand--drop {
  --dreh: 13deg; --deckung: .9;
  -webkit-mask-image: url('haende/hand-3.webp'); mask-image: url('haende/hand-3.webp');
  width: clamp(84px, 9vw, 160px); aspect-ratio: 623 / 664;
  top: clamp(-6px, 0vw, 10px); right: clamp(0px, 3vw, 70px);
}
.hand--final {
  --dreh: -8deg; --deckung: .9;
  -webkit-mask-image: url('haende/hand-2.webp'); mask-image: url('haende/hand-2.webp');
  width: clamp(120px, 14vw, 250px); aspect-ratio: 695 / 721;
  top: clamp(-14px, 0vw, 20px); right: clamp(0px, 3vw, 60px);
}
/* Weitere Abdrücke, verteilt in den Lücken. Farben vom Shirt, jeder in einer
   anderen Größe, Drehung und Ecke, damit es nach Hand aussieht und nicht nach
   Raster. Sie liegen hinter dem Text und sind schwächer gedeckt: sie sollen
   Untergrund sein, nicht mitlesen wollen. */
.hand--story {
  --dreh: 22deg; --deckung: .55; --farbe: #fa682a;
  -webkit-mask-image: url('haende/hand-2.webp'); mask-image: url('haende/hand-2.webp');
  width: clamp(70px, 8vw, 150px); aspect-ratio: 695 / 721;
  top: clamp(40px, 5vw, 90px); right: clamp(0px, 4vw, 90px);
}
.hand--look {
  --dreh: -27deg; --deckung: .42; --farbe: #bcf022;
  -webkit-mask-image: url('haende/hand-1.webp'); mask-image: url('haende/hand-1.webp');
  width: clamp(60px, 6.5vw, 120px); aspect-ratio: 670 / 776;
  top: auto; bottom: clamp(-10px, 0vw, 24px); left: clamp(0px, 6vw, 130px);
}
.hand--drop2 {
  --dreh: -14deg; --deckung: .38; --farbe: #115bc5;
  -webkit-mask-image: url('haende/hand-2.webp'); mask-image: url('haende/hand-2.webp');
  width: clamp(56px, 6vw, 110px); aspect-ratio: 695 / 721;
  top: auto; bottom: clamp(10px, 3vw, 60px); left: clamp(0px, 2vw, 40px);
}
.hand--people {
  --dreh: 31deg; --deckung: .5; --farbe: #115bc5;
  -webkit-mask-image: url('haende/hand-3.webp'); mask-image: url('haende/hand-3.webp');
  width: clamp(90px, 10.5vw, 190px); aspect-ratio: 623 / 664;
  top: clamp(-20px, 1vw, 30px); right: clamp(0px, 3vw, 60px);
}
.hand--custom {
  --dreh: 9deg; --deckung: .45; --farbe: #bcf022;
  -webkit-mask-image: url('haende/hand-3.webp'); mask-image: url('haende/hand-3.webp');
  width: clamp(64px, 7.5vw, 140px); aspect-ratio: 623 / 664;
  top: auto; bottom: clamp(-16px, 1vw, 30px); left: clamp(0px, 8vw, 180px);
}

/* Auf Schwarz bleibt es bei Weiß, Rot würde absaufen */
.band__hand {
  --dreh: 16deg; --deckung: .16; z-index: 1;
  background: #fff;
  -webkit-mask-image: url('haende/hand-1.webp'); mask-image: url('haende/hand-1.webp');
  width: clamp(150px, 19vw, 320px); aspect-ratio: 670 / 776;
  top: 50%; right: clamp(24px, 6vw, 110px); margin-top: -26%;
}

/* ---------- 8 Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: 20px;
  background: rgba(11, 11, 11, .78);
}
.modal[hidden] { display: none; }
.modal__karte {
  position: relative; width: min(600px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--papier); padding: clamp(26px, 4.4vw, 52px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.modal__karte h2 { font-size: clamp(1.6rem, 4.6vw, 2.5rem); margin-bottom: 14px; }
.modal__zu {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer; font-size: 1.5rem; line-height: 1;
}
.modal__zu:hover { opacity: .5; }

.feld { margin-top: 18px; }
.feld label {
  display: block; margin-bottom: 7px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.feld input, .feld textarea {
  width: 100%; padding: 14px 16px; font: inherit; color: inherit;
  background: var(--papier); border: 1px solid var(--linie);
}
.feld input:focus, .feld textarea:focus { border-color: var(--tinte); }
.feld textarea { min-height: 128px; resize: vertical; }
.feld input[type="file"] { padding: 11px; font-size: 0.9rem; }
/* ---- Dateiauswahl ----
   Das echte <input type="file"> liegt deckend über der Fläche, aber
   unsichtbar. Dadurch bleibt die Tastaturbedienung und der Fokusring
   erhalten, und der Systemknopf ist weg. */
.feld__titel {
  display: block; margin-bottom: 7px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
/* Höhere Spezifität als `.feld label`, sonst gewinnt dessen text-transform
   und der Hinweistext steht in Versalien. */
.feld .ablage {
  position: relative; display: block; cursor: pointer;
  padding: 16px; background: var(--papier); border: 1px solid var(--linie);
  transition: border-color .2s, background .2s;
  /* Die Fläche ist selbst ein <label> und erbt sonst die Versalien und die
     Sperrung der Feldbeschriftungen. Der Hinweistext soll normal lesen. */
  margin-bottom: 0;
  font-size: 1rem; font-weight: 400; letter-spacing: normal; text-transform: none;
}
.ablage:hover { border-color: var(--tinte); }
.ablage input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
/* Fokusring auf die Fläche holen, das unsichtbare Feld hätte keinen */
.ablage:focus-within { outline: 2px solid var(--tinte); outline-offset: 3px; }
.ablage__zeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ablage__knopf {
  flex: none; padding: 9px 16px; background: var(--tinte); color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.ablage__name {
  font-size: 0.9rem; color: var(--grau);
  text-transform: none; letter-spacing: normal; font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.ablage.hat-datei .ablage__name { color: var(--tinte); font-weight: 700; }
.ablage.wird-gezogen { border-color: var(--tinte); background: var(--feld); }
.ablage__zusatz {
  display: block; margin-top: 10px; font-size: 0.8rem; color: var(--grau);
  text-transform: none; letter-spacing: normal; font-weight: 400;
}

.feld__fehler { margin-top: 6px; font-size: 0.82rem; font-weight: 700; color: var(--rot); }
.feld.ist-falsch input, .feld.ist-falsch textarea { border-color: var(--rot); }
.feld__zusatz { font-size: 0.8rem; color: var(--grau); margin-top: 7px; }

.pflicht-hinweis { margin-top: 16px; font-size: 0.8rem; color: var(--grau); }

/* ---------- Warenkorb ---------- */
.korb { list-style: none; margin: clamp(20px, 3vw, 28px) 0 0; padding: 0; }
.korb__zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--linie);
}
.korb__zeile:last-child { border-bottom: 1px solid var(--linie); }
.korb__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.korb__titel { font-weight: 800; letter-spacing: -0.01em; }
.korb__unter { font-size: 0.85rem; color: var(--grau); }

.korb__menge { display: inline-flex; align-items: center; flex: none; border: 1px solid var(--linie); }
.korb__knopf {
  width: 42px; height: 42px; background: none; border: 0; cursor: pointer;
  font-size: 1.15rem; font-weight: 700; line-height: 1;
  transition: background .18s ease, color .18s ease;
}
.korb__knopf:hover:not(:disabled) { background: var(--tinte); color: #fff; }
.korb__knopf:disabled { opacity: .3; cursor: not-allowed; }
.korb__wert { min-width: 42px; text-align: center; font-weight: 700; }

.korb__summe {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}
.korb__summe strong { font-size: 1.5rem; letter-spacing: -0.03em; }
.korb__hinweis { margin-top: clamp(14px, 2vw, 20px); font-size: 0.9rem; }
.korb__fuss { margin-top: 16px; text-align: center; }

/* Zusammenfassung im Anfrageformular */
.korb-zusammenfassung {
  margin: clamp(20px, 3vw, 28px) 0 0; padding: clamp(18px, 2.4vw, 24px);
  background: var(--feld);
}
.korb-zusammenfassung[hidden] { display: none; }
.korb--klein { margin-top: 12px; }
.korb--klein .korb__zeile { padding: 10px 0; }
.korb--klein .korb__zeile:first-child { border-top: 0; }
.korb--klein .korb__zeile:last-child { border-bottom: 0; }

.danke { text-align: left; }
.danke p { color: var(--grau); }

/* ---------- 9 Sticky Buy (mobil) ---------- */
.buy-leiste {
  position: fixed; inset: auto 0 0; z-index: 80; display: none;
  align-items: center; gap: 12px;
  padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom));
  background: var(--papier); box-shadow: 0 -8px 26px rgba(11, 11, 11, .12);
  transform: translateY(105%); transition: transform .3s ease;
}
.buy-leiste.ist-da { transform: none; }
.buy-leiste__wahl { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grau); }
.buy-leiste .bestellen { margin: 0; padding: 18px 20px; flex: 1; font-size: 0.95rem; }

@media (max-width: 860px) { .buy-leiste { display: flex; } }

/* ---------- Kasse im Warenkorb ---------- */
.kasse { margin-top: clamp(20px, 3vw, 28px); }
.kasse__zeilen { margin: 0 0 14px; display: grid; gap: 7px; }
.kasse__zeilen > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.kasse__zeilen dt { font-size: 0.86rem; color: var(--grau); }
.kasse__zeilen dd { margin: 0; font-size: 0.92rem; font-weight: 700; }
.kasse__gesamt { margin-top: 7px; padding-top: 11px; border-top: 1px solid var(--linie); }
.kasse__gesamt dt { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tinte); }
.kasse__gesamt dd { font-size: 1.2rem; }
.kasse__klein { margin: 12px 0 0; font-size: 0.78rem; line-height: 1.55; color: var(--grau); }
.kasse__klein + .bestellen { margin-top: 14px; }
.kasse .bestellen[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
/* Trennt den Anfrageweg sichtbar von der Kasse, ohne eine Linie zu ziehen */
[data-korb-anfrageweg] { margin-top: clamp(22px, 3.4vw, 32px); }
.kasse:not([hidden]) + [data-korb-anfrageweg] .korb__hinweis { font-size: 0.86rem; }

/* ---------- 10 Footer ---------- */
.fuss { padding-block: clamp(52px, 7vw, 96px) clamp(90px, 8vw, 90px); }

/* Markenabschluss links, Links rechts als Spalte. Als Reihe quer über die
   ganze Breite sahen sie aus wie eine verirrte zweite Navigation. */
.fuss__gitter {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 5vw, 90px); align-items: start;
}
.fuss__links {
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right; gap: clamp(10px, 1.1vw, 15px);
  padding-top: 6px;
}
.fuss a {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; transition: opacity .2s;
}
.fuss a:hover { opacity: .5; }

/* ---------- 10b Intro: die Hände klatschen rein ----------
   Läuft rein über CSS. Grund: wenn app.js nicht lädt, muss der Vorhang
   trotzdem verschwinden. app.js kürzt nur ab, wenn jemand klickt oder wischt.
   Der Vorhang existiert nur, wenn html.intro-laeuft gesetzt ist, und das macht
   das Inline-Script im head nur beim ersten Aufruf ohne Anker und ohne
   prefers-reduced-motion.
   Zeitplan: letzte Hand 820 ms, Logo 1000 ms, Vorhang ab 1500 ms,
   alles vorbei nach 1850 ms.
   ------------------------------------------------------------------ */
.intro { display: none; }

html.intro-laeuft .intro {
  display: block;
  position: fixed; inset: 0; z-index: 300;
  background: var(--papier);
  /* Im Vorhang gibt es nichts zu klicken. Ohne das schluckt er während der
     Blende noch Klicks auf die Seite, die längst durchscheint. */
  pointer-events: none;
  animation: intro-vorhang 350ms cubic-bezier(.5, 0, .75, 0) 1500ms both;
  /* Alle Größen hängen an dieser einen Zahl. Auf schmalen Geräten ist vmin
     die Breite, dann wären die Abdrücke winzig, deshalb der größere Faktor. */
  --einheit: 1vmin;
}
@media (max-width: 760px) { html.intro-laeuft .intro { --einheit: 1.75vmin; } }

/* Solange der Vorhang deckt, soll nichts dahinter scrollen. Die Sperre hängt
   an einer eigenen Klasse und nicht am Aufräumen: sie fällt, sobald die Blende
   anfängt oder jemand abbricht. Sonst bleibt sie bei einem verzögerten Timer
   noch hängen, wenn die Seite längst sichtbar ist. Fällt die Klasse weg,
   greifen einfach wieder die normalen Regeln. */
html.intro-laeuft:not(.intro-frei),
html.intro-laeuft:not(.intro-frei) body { overflow: hidden; }
html.intro-fertig .intro { display: none; }

.intro__buehne {
  position: absolute; inset: 0;
  animation: intro-rums 1500ms linear both;
}

.intro__hand {
  position: absolute;
  left: var(--x); top: var(--y);
  width: calc(var(--g) * var(--einheit));
  aspect-ratio: 670 / 776;
  background: var(--c);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-position: center;  mask-position: center;
  animation: intro-klatsch 190ms cubic-bezier(.16, .84, .3, 1) var(--t) both;
}
/* Drei Formen im Wechsel, sonst sieht man denselben Abdruck siebenmal. */
.intro__hand[style*="--m:1"] { -webkit-mask-image: url('haende/hand-1.webp'); mask-image: url('haende/hand-1.webp'); }
.intro__hand[style*="--m:2"] { -webkit-mask-image: url('haende/hand-2.webp'); mask-image: url('haende/hand-2.webp'); aspect-ratio: 695 / 721; }
.intro__hand[style*="--m:3"] { -webkit-mask-image: url('haende/hand-3.webp'); mask-image: url('haende/hand-3.webp'); aspect-ratio: 623 / 664; }

/* Der Schlusspunkt. Das Logo ist selbst ein Abdruck, deshalb ist es der
   letzte und größte Schlag und nicht ein Schriftzug, der sich einblendet. */
.intro__logo {
  position: absolute; left: 50%; top: 50%;
  width: calc(46 * var(--einheit)); height: auto;
  animation: intro-stempel 240ms cubic-bezier(.14, .86, .28, 1) 1000ms both;
}

/* Ein Klatscher kommt von vorn und federt einmal kurz durch.
   Kein Einblenden: er ist sofort da, sonst ist es kein Schlag. */
@keyframes intro-klatsch {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(1.85) rotate(var(--d)); }
  1%   { opacity: 1; }
  62%  { opacity: 1; transform: translate(-50%, -50%) scale(.93) rotate(var(--d)); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(var(--d)); }
}
@keyframes intro-stempel {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(2.1) rotate(7deg); }
  1%   { opacity: 1; }
  66%  { opacity: 1; transform: translate(-50%, -50%) scale(.92) rotate(-1.5deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}
/* Der Ruck bei jedem Einschlag. Die Prozente sind die Einschlagzeiten
   geteilt durch 1500 ms. Wer das Timing im HTML ändert, muss hier mitziehen. */
@keyframes intro-rums {
  0%, 1.6%      { transform: translate(0, 0); }
  0.4%          { transform: translate(-3px, 4px); }
  10%, 11.6%    { transform: translate(0, 0); }
  10.4%         { transform: translate(3px, -3px); }
  18%, 19.6%    { transform: translate(0, 0); }
  18.4%         { transform: translate(-2px, -3px); }
  28.7%, 30.3%  { transform: translate(0, 0); }
  29.1%         { transform: translate(3px, 2px); }
  38%, 39.6%    { transform: translate(0, 0); }
  38.4%         { transform: translate(-2px, 2px); }
  46%, 47.6%    { transform: translate(0, 0); }
  46.4%         { transform: translate(1px, -2px); }
  54.7%, 56.3%  { transform: translate(0, 0); }
  55.1%         { transform: translate(-2px, 1px); }
  66.7%, 69%    { transform: translate(0, 0); }
  67.3%         { transform: translate(0, 5px); }
  100%          { transform: translate(0, 0); }
}
@keyframes intro-vorhang {
  to { opacity: 0; transform: scale(1.06); visibility: hidden; }
}

/* Abbruch durch Klick, Taste oder Wischen: alles sofort weg. */
html.intro-weg .intro { animation: intro-vorhang 220ms ease 0ms both; }

@media (prefers-reduced-motion: reduce) {
  html.intro-laeuft .intro { display: none; }
  html.intro-laeuft, html.intro-laeuft body { overflow: visible; overflow-x: hidden; }
  .intro__hand, .intro__logo, .intro__buehne { animation: none; }
}

/* ---------- 11 Bewegung ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); }
[data-reveal].sichtbar {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .clips__bahn { scroll-behavior: auto; }
  [data-reveal], [data-reveal].sichtbar { opacity: 1; transform: none; transition: none; }
  .aufnahme img, .bestellen, .stueck__knopf, .knopf-klein, .buy-leiste { transition: none; }
}

/* ---------- Mobil: Überschrift → Bild → Text ---------- */
@media (max-width: 900px) {
  .hero__gitter, .story__gitter, .custom__gitter,
  .look__kopf, .drop__kopf {
    grid-template-columns: minmax(0, 1fr);
  }
  .drop__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Die beiden Look-Aufnahmen stehen mobil nebeneinander, untereinander
     nahmen sie zwei volle Bildschirme ein. */
  .look__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 42vw, 300px); }
  .koepfe { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Überschrift, dann Bilder, dann der lange Text */
  #stuecke { display: flex; flex-direction: column; }
  .drop__kopf { display: contents; }
  .drop__kopf > div { order: 1; }
  .drop__gitter { order: 2; }
  .drop__kopf > .text { order: 3; margin-top: clamp(22px, 4vw, 34px); }
  .drop__fuss { order: 4; }

  /* Kopf einspaltig und in der Reihenfolge Überschrift, Videos, Text */
  .clips__kopf { grid-template-columns: minmax(0, 1fr); }
  #clips { display: flex; flex-direction: column; }
  .clips__kopf { display: contents; }
  .clips__kopf > div { order: 1; }
  .clips__bahn { order: 2; }
  .clips__kopf > .text { order: 3; margin-top: clamp(22px, 4vw, 34px); }
  .clips__steuer { order: 4; }
  /* Auf dem Handy knapp zwei Karten, die zweite schaut heraus */
  .clip { width: calc((100% - 1 * clamp(12px, 1.6vw, 22px)) / 1.75); min-width: 0; }

  #look { display: flex; flex-direction: column; }
  .look__kopf { display: contents; }
  .look__kopf > div { order: 1; }
  .look__gitter { order: 2; }
  .look__kopf > .text { order: 3; margin-top: clamp(22px, 4vw, 34px); }
  /* Die Drehung macht den Kasten breiter als das Bild, deshalb etwas Abstand
     vom rechten Rand, sonst ragt die Hand auf schmalen Geräten heraus. */
  .hand { width: clamp(62px, 16vw, 104px) !important; }
  /* Nur die rechts verankerten nach innen holen, sonst zerschießt die Regel
     die links verankerten Abdrücke. */
  .hand:not(.hand--links) { right: clamp(14px, 4vw, 28px) !important; }
  .hand--links { left: clamp(10px, 3vw, 24px) !important; }
  /* Auf schmalen Geräten gibt es kaum Lücken, drei Abdrücke reichen dort. */
  .hand--look, .hand--drop2, .hand--custom { display: none; }
  .band__hand { width: clamp(110px, 30vw, 180px); right: 6%; }

  /* Die drei harten Umbrüche im Anriss verschenken mobil eine halbe
     Bildschirmhöhe. Ohne die <br> läuft der Satz normal durch und bricht
     nur dort um, wo er muss. Die Leerzeichen kommen aus dem Quelltext. */
  .hero__info .anriss br { display: none; }

  /* Markup steht schon in der Reihenfolge Überschrift, Bild, Text */
  .story__bild { min-height: clamp(280px, 62vw, 420px); }

}

/* Schmale Geräte: Logo und Claim untereinander, nebeneinander wird es zu eng */
@media (max-width: 640px) {
  .schluss { grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 4vw, 26px); justify-items: start; }
  .schluss__logo { height: clamp(96px, 26vw, 150px); }
  /* Die Links bleiben auch mobil rechts neben Logo und Claim, nur enger
     und etwas kleiner, damit sie bis 320 px danebenpassen. */
  .fuss__gitter { gap: clamp(16px, 4vw, 30px); }
  .fuss__links { gap: 11px; }
  .fuss a { font-size: 0.68rem; letter-spacing: 0.1em; }
}

@media (max-width: 560px) {
  .koepfe { grid-template-columns: minmax(0, 1fr); }
  .drop__gitter { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 8vw, 44px); }
}

/* ---------- Rechtstexte ---------- */
.recht { padding-top: calc(96px + clamp(30px, 5vw, 70px)); }
/* Einzelne lange Wörter wie "Datenschutz" müssen auf 320 px trennen dürfen */
.recht h1 {
  font-size: clamp(2.1rem, 7vw, 5rem); margin-bottom: clamp(26px, 4vw, 44px);
  hyphens: auto; overflow-wrap: anywhere;
}
.recht h2 {
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.45rem); letter-spacing: 0.02em;
  margin: clamp(34px, 4vw, 52px) 0 12px; text-transform: none; line-height: 1.2;
}
/* Wortungetüme wie "Verbraucherschlichtungsstelle" sprengen sonst schmale Displays */
.recht p, .recht li { color: var(--grau); max-width: none; overflow-wrap: anywhere; }
.recht ul { padding-left: 1.2em; margin: 0 0 1.1em; }
.recht strong { color: var(--tinte); }
.recht code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  color: var(--tinte);
  background: #f2f2f2;
  padding: .1em .35em;
  border-radius: 3px;
}

/* ============================================================
   12 Produktkarten (Startseite) und Produktseite shirt.php
   Vorbild war der Aufbau großer Modeshops: Karte = Bild, Name, Preis,
   ein Klick führt auf die Seite des Shirts. Gewählt wird erst dort.
   Grundsatz bleibt: keine Zierlinien, keine Kästen, Ruhe durch Abstand.
   ============================================================ */

/* ---------- Karten ---------- */
.stueck__link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.stueck__link:focus-visible { outline: 2px solid var(--tinte); outline-offset: 4px; }
.stueck .aufnahme { background: var(--feld); }
/* Zweites Bild liegt darüber und blendet beim Drüberfahren ein */
.stueck__zweit {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .45s ease;
}
.stueck .aufnahme--produkt .stueck__zweit { padding: 0; }
@media (hover: hover) {
  .stueck__link:hover .hat-zweit .stueck__zweit { opacity: 1; }
  .stueck__link:hover .hat-zweit img:first-child { transform: none; }
}
.stueck__link .stueck__nr { margin-top: 16px; }
.stueck__link h3 { margin-bottom: 6px; transition: opacity .2s; }
.stueck__link:hover h3 { opacity: .6; }
.stueck__link .stueck__preis { margin: 4px 0 2px; font-size: 1.15rem; }
.stueck__steuer { margin: 0; font-size: 0.8rem; color: var(--grau); }
.unterstrich { text-decoration: underline; text-underline-offset: 2px; color: inherit; }
.stueck__sterne { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 0.8rem; color: var(--grau); }

/* Sterne: grau, darüber die gefüllten als Ausschnitt */
.sterne {
  --anteil: 0%;
  position: relative; display: inline-block; line-height: 1;
  font-size: 0.95rem; letter-spacing: 2px; color: var(--linie);
}
.sterne::before {
  content: '★★★★★'; position: absolute; inset: 0; width: var(--anteil);
  overflow: hidden; white-space: nowrap; color: var(--tinte);
}
.sterne--gross { font-size: 1.4rem; }

/* ---------- Produktseite ---------- */
.seite-produkt .kopf { box-shadow: 0 10px 30px rgba(11, 11, 11, .05); }
.produkt { padding-top: calc(96px + clamp(18px, 3vw, 36px)); }
.brotkrumen {
  display: flex; gap: 10px; margin-bottom: clamp(16px, 2.4vw, 28px);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grau);
}
.brotkrumen a { color: inherit; text-decoration: none; }
.brotkrumen a:hover { color: var(--tinte); }

.produkt__gitter {
  display: grid; gap: clamp(28px, 4.5vw, 80px);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start;
}

/* Galerie: am Rechner Bilder untereinander, das erste groß */
.galerie__band { display: grid; gap: clamp(10px, 1.2vw, 16px); grid-template-columns: 1fr 1fr; }
.galerie__bild { margin: 0; background: var(--feld); aspect-ratio: 4 / 5; overflow: hidden; }
.galerie__bild:first-child { grid-column: 1 / -1; aspect-ratio: 1 / 1.05; }
/* Nur ein zweites Bild: dann ebenfalls volle Breite statt halbe Reihe mit Loch */
.galerie__bild:nth-child(2):last-child { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
.galerie__bild img { width: 100%; height: 100%; object-fit: cover; }
.galerie__bild--frei img { object-fit: contain; padding: clamp(18px, 4vw, 56px); }
.galerie__punkte { display: none; }

/* Kaufbereich klebt beim Scrollen mit, solange die Galerie läuft */
.produkt__info { position: sticky; top: calc(96px + 20px); }
.produkt__kauf .stueck__nr { margin: 0 0 10px; }
.produkt__titel { font-size: clamp(2.3rem, 4.6vw, 4.2rem); line-height: .9; margin-bottom: 14px; }
.produkt__sterne {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-size: 0.86rem; color: var(--grau); text-decoration: none;
}
.produkt__sterne:hover span:last-child { text-decoration: underline; }
.produkt__preis { margin: 0 0 4px; font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em; }
.produkt__lieferung {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 0; font-size: 0.9rem; color: var(--grau);
}
.punkt-gruen { width: 9px; height: 9px; border-radius: 50%; background: #2e9e4f; flex: none; }

/* Größenknöpfe */
.groessen { border: 0; margin: clamp(26px, 3vw, 34px) 0 0; padding: 0; }
.groessen legend {
  padding: 0; margin-bottom: 12px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grau);
}
.groessen__wahl { color: var(--tinte); margin-left: 6px; }
.groessen__reihe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.groesse { position: relative; cursor: pointer; }
.groesse input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.groesse span {
  display: grid; place-items: center; height: 52px;
  background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie);
  font-weight: 800; font-size: 0.92rem;
  transition: box-shadow .15s, background .15s, color .15s;
}
.groesse:hover span { box-shadow: inset 0 0 0 1px var(--tinte); }
.groesse input:checked + span { background: var(--tinte); color: #fff; box-shadow: none; }
.groesse input:focus-visible + span { outline: 2px solid var(--tinte); outline-offset: 2px; }
.groesse input:disabled + span { opacity: .35; cursor: not-allowed; }
.groessen.ist-falsch .groesse span { box-shadow: inset 0 0 0 1px var(--rot); }
.groessen__tabelle {
  display: inline-block; margin-top: 12px; font-size: 0.82rem; color: var(--grau);
  text-decoration: underline; text-underline-offset: 3px;
}

/* Menge + Knopf in einer Reihe */
.produkt__aktion { display: flex; gap: 10px; margin-top: clamp(22px, 2.6vw, 28px); }
.menge { display: flex; align-items: stretch; box-shadow: inset 0 0 0 1px var(--linie); flex: none; }
.menge__knopf {
  width: 46px; border: 0; background: none; cursor: pointer; font-size: 1.2rem; font-weight: 700;
}
.menge__knopf:hover { background: var(--feld); }
.menge__wert {
  width: 44px; border: 0; text-align: center; font: inherit; font-weight: 800;
  -moz-appearance: textfield; appearance: textfield; background: none;
}
.menge__wert::-webkit-outer-spin-button, .menge__wert::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.produkt__aktion { flex-wrap: wrap; }
.produkt__knopf { margin-top: 0; flex: 1; padding-block: 20px; }
/* Summe über dem Bestellknopf, volle Breite, der Knopf rückt neben die Menge */
.direkt__summe { order: -1; flex: 0 0 100%; margin: 0 0 4px; font-size: 0.9rem; color: var(--grau); }
.direkt__summe strong { color: var(--tinte); font-size: 1.05rem; }
.produkt__korb { display: block; width: 100%; margin-top: 10px; text-align: center; }
.produkt__recht { margin: 12px 0 0; font-size: 0.78rem; color: var(--grau); line-height: 1.5; }
.hinweis .verweis-knopf { margin-left: 6px; }
.produkt__zahlung { margin: 14px 0 0; font-size: 0.8rem; color: var(--grau); }
.produkt__kauf .hinweis { margin-top: 10px; min-height: 0; }
.produkt__kauf .hinweis:empty { margin-top: 0; }

/* Drei Merkmale */
.merkmale { list-style: none; margin: clamp(28px, 3.4vw, 40px) 0 0; padding: 0; display: grid; gap: 18px; }
.merkmale li { display: flex; gap: 16px; align-items: flex-start; }
.merkmale svg {
  width: 30px; height: 30px; flex: none; fill: none; stroke: var(--hand);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.merkmale span { font-size: 0.9rem; color: var(--grau); line-height: 1.45; }
.merkmale strong { display: block; color: var(--tinte); font-size: 0.95rem; }

/* Aufklapper ohne Linien: Abstand und ein Plus reichen */
.klapper { margin-top: clamp(30px, 3.6vw, 44px); display: grid; gap: 4px; }
.klapper details { background: var(--feld); }
.klapper summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 20px; cursor: pointer; list-style: none;
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
}
.klapper summary::-webkit-details-marker { display: none; }
.klapper summary::after { content: '+'; font-size: 1.3rem; font-weight: 500; line-height: 1; transition: transform .2s; }
.klapper details[open] summary::after { transform: rotate(45deg); }
.klapper__inhalt { padding: 0 20px 20px; font-size: 0.95rem; }
.klapper__inhalt p { margin-bottom: .8em; }
.tabelle-huelle { overflow-x: auto; margin: 6px 0 12px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 420px; }
.tabelle th, .tabelle td { padding: 9px 8px; text-align: center; }
.tabelle thead th { font-weight: 800; }
.tabelle tbody th { text-align: left; font-weight: 600; color: var(--grau); white-space: nowrap; }
.tabelle tbody tr:nth-child(odd) { background: var(--papier); }

/* Story-Block */
.produkt-story {
  display: grid; gap: clamp(28px, 5vw, 90px); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.produkt-story__bild { aspect-ratio: 4 / 5; }
.produkt-story__bild img { width: 100%; height: 100%; object-fit: cover; }
.produkt-story h2.zwei { font-size: clamp(2.2rem, 5vw, 4.4rem); margin-bottom: clamp(18px, 2.4vw, 28px); }

/* Bewertungen */
.bewertungen__kopf {
  display: grid; gap: clamp(18px, 4vw, 70px); align-items: end;
  grid-template-columns: auto minmax(0, 1fr);
}
.bewertungen__kopf h2 { font-size: clamp(2.1rem, 5vw, 4.4rem); }
.bewertungen__pruefung {
  display: flex; gap: 12px; margin: 0; max-width: 70ch; justify-self: end;
  font-size: 0.84rem; color: var(--grau); line-height: 1.5;
}
.bewertungen__pruefung svg, .bewertung__geprueft svg {
  width: 22px; height: 22px; flex: none; fill: none; stroke: #2e9e4f; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.bewertungen__uebersicht {
  display: grid; gap: clamp(24px, 4vw, 70px); align-items: center;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  margin-top: clamp(30px, 4vw, 50px); padding: clamp(22px, 3vw, 36px);
  background: var(--feld);
}
.bewertungen__schnitt { display: grid; justify-items: start; gap: 6px; }
.bewertungen__schnitt strong { font-size: clamp(3rem, 6vw, 4.6rem); line-height: .9; font-weight: 800; letter-spacing: -0.04em; }
.bewertungen__schnitt > span:last-child { font-size: 0.84rem; color: var(--grau); }
.bewertungen__balken { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 0.82rem; }
.bewertungen__balken li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; gap: 10px; align-items: center; }
.balken { height: 6px; background: var(--papier); overflow: hidden; }
.balken > span { display: block; height: 100%; background: var(--tinte); }
.bewertungen__passform .vorzeile { margin-bottom: 14px; }
.skala { position: relative; height: 6px; background: var(--papier); }
.skala__punkt {
  position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  background: var(--tinte); transform: translate(-50%, -50%);
}
.skala__beschriftung { display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.78rem; color: var(--grau); }

.bewertungen__liste { list-style: none; margin: clamp(30px, 4vw, 50px) 0 0; padding: 0; display: grid; gap: clamp(30px, 4vw, 48px); }
.bewertung { display: grid; gap: clamp(16px, 3vw, 50px); grid-template-columns: 200px minmax(0, 1fr); }
.bewertung__person { display: grid; justify-items: start; gap: 4px; align-content: start; }
.bewertung__initial {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--feld); font-weight: 800; margin-bottom: 8px;
}
.bewertung__name { font-weight: 700; }
.bewertung__ort { font-size: 0.82rem; color: var(--grau); }
.bewertung__geprueft { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 0.78rem; color: var(--grau); }
.bewertung__geprueft svg { width: 16px; height: 16px; }
.bewertung__zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bewertung__zeile time { font-size: 0.8rem; color: var(--grau); }
.bewertung h3 { margin: 12px 0 6px; font-size: 1.1rem; text-transform: none; letter-spacing: -0.01em; line-height: 1.25; }
.bewertung__text { margin: 10px 0 0; }
.bewertung__meta { margin: 12px 0 0; font-size: 0.82rem; color: var(--grau); }

.bewertungen__leer { margin-top: clamp(28px, 4vw, 46px); }
.bewertungen__leer .anriss { margin-bottom: 8px; }

/* Formular: aufklappbar, damit es nicht die halbe Seite belegt */
.bewerten { margin-top: clamp(28px, 4vw, 44px); }
.bewerten > summary { list-style: none; display: inline-block; margin-top: 0; }
.bewerten > summary::-webkit-details-marker { display: none; }
.bewerten[open] > summary { background: var(--tinte); color: #fff; }
.bewerten__form { max-width: 760px; margin-top: clamp(20px, 3vw, 30px); }
.bewerten__form .feld { border: 0; padding: 0; min-width: 0; }
.bewerten__form legend { padding: 0; }
.bewerten__zwei { display: grid; gap: 0 20px; grid-template-columns: 1fr 1fr; }
.bewerten__meldung { margin-top: 20px; padding: 16px 20px; background: var(--feld); font-weight: 600; }
.bewerten__meldung--fehler { color: var(--rot); }
.wahl-sterne legend, .wahl-knoepfe legend {
  display: block; margin-bottom: 10px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}
/* Sterne von rechts nach links im HTML, damit ~ die „davor" liegenden mitfärbt */
.wahl-sterne__reihe { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.wahl-sterne__reihe input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl-sterne__reihe label { font-size: 2rem; line-height: 1; color: var(--linie); cursor: pointer; transition: color .12s; letter-spacing: 0; text-transform: none; margin: 0; }
.wahl-sterne__reihe input:checked ~ label,
.wahl-sterne__reihe label:hover, .wahl-sterne__reihe label:hover ~ label { color: var(--tinte); }
.wahl-sterne__reihe input:focus-visible + label { outline: 2px solid var(--tinte); outline-offset: 2px; }
.wahl-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl-knoepfe legend { width: 100%; }
.wahl-knoepfe label { position: relative; cursor: pointer; margin: 0; letter-spacing: 0; text-transform: none; }
.wahl-knoepfe input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.wahl-knoepfe span {
  display: inline-block; padding: 11px 16px; min-width: 46px; text-align: center;
  box-shadow: inset 0 0 0 1px var(--linie); font-size: 0.88rem; font-weight: 700;
}
.wahl-knoepfe input:checked + span { background: var(--tinte); color: #fff; box-shadow: none; }
.wahl-knoepfe input:focus-visible + span { outline: 2px solid var(--tinte); outline-offset: 2px; }

/* Mehr vom Drop */
.mehr__titel { font-size: clamp(1.8rem, 4vw, 3.4rem); }
.mehr__gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 960px) {
  .produkt__gitter { grid-template-columns: minmax(0, 1fr); }
  .produkt__info { position: static; }
  /* Galerie: zum Wischen, volle Breite, Punkte darunter */
  .galerie { margin-inline: calc(var(--rand) * -1); }
  .galerie__band {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0;
    scrollbar-width: none;
  }
  .galerie__band::-webkit-scrollbar { display: none; }
  .galerie__bild, .galerie__bild:first-child, .galerie__bild:nth-child(2):last-child {
    flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 4 / 5;
  }
  .galerie__punkte { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .galerie__punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--linie); transition: background .2s, transform .2s; }
  .galerie__punkt.ist-aktiv { background: var(--tinte); transform: scale(1.2); }
  .produkt-story { grid-template-columns: minmax(0, 1fr); }
  .bewertungen__kopf { grid-template-columns: minmax(0, 1fr); }
  .bewertungen__pruefung { justify-self: start; }
  .bewertungen__uebersicht { grid-template-columns: minmax(0, 1fr); }
  .mehr__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .produkt { padding-top: calc(96px + 10px); }
  .produkt__info { top: auto; }
  .groessen__reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .menge__knopf { width: 38px; }
  .menge__wert { width: 34px; }
  .produkt__knopf { padding-inline: 12px; letter-spacing: 0.1em; font-size: 0.78rem; white-space: nowrap; }
  .bewertung { grid-template-columns: minmax(0, 1fr); }
  .bewertung__person { grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
  .bewertung__initial { grid-row: span 3; margin: 0; }
  .bewerten__zwei { grid-template-columns: minmax(0, 1fr); }
  .mehr__gitter { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .stueck__zweit, .groesse span, .klapper summary::after { transition: none; }
}

/* ---------- Druck (und die PDFs von AGB und Widerruf für die Bestellmail) ---------- */
@media print {
  @page { margin: 18mm 16mm; }
  .kopf, .fuss, .sprung, .hand, .buy-leiste, .modal, .recht .bestellen { display: none !important; }
  body { font-size: 10.5pt; }
  .recht { padding: 0 !important; }
  .recht h1 { font-size: 26pt; margin-bottom: 10pt; }
  .recht h2 { font-size: 13pt; margin-top: 16pt; break-after: avoid; }
  .recht p, .recht li { orphans: 3; widows: 3; }
  a.verweis { border: 0; }
}