/* ==========================================================================
   BobberMafia – Dark & Chrome
   1  Grundlagen (Fonts, Tokens, Reset)
   2  Bausteine (Buttons, Überschriften, Layout)
   3  Header & Navigation
   4  Startseite
   5  Produkte
   6  Footer
   7  Shop-Seite / Spreadshop-Widget
   8  Motion & Responsive
   ========================================================================== */

/* ============================ 1  GRUNDLAGEN ============================== */

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/oswald-var-latin.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'InterVar';
  src: url('../fonts/inter-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Rye – Oldschool-Schrift (Western/Americana) fuer die grossen Ueberschriften.
   Selbst gehostet, kein Aufruf bei Google. Lizenz: SIL Open Font License.
   Bewusst NICHT fuer Fliesstext oder kleine Beschriftungen: Sie hat Sporen und
   starke Strichkontraste und wird darunter unruhig.
   Zwei Schnitte: latin fuer Deutsch/Englisch/Franzoesisch usw., latin-ext fuer
   Polnisch (Ł, Ś, Ż, Ą) – der Browser laedt nur, was die Seite braucht. */
@font-face {
  font-family: 'Rye';
  src: url('../fonts/rye-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Rye';
  src: url('../fonts/rye-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
}

:root {
  /* Grundtöne */
  --ink:          #08080a;
  --ink-2:        #0d0d10;
  --panel:        #141418;
  --panel-2:      #1b1b21;
  --line:         rgba(255,255,255,.10);
  --line-strong:  rgba(255,255,255,.20);

  /* Schrift */
  --text:         #e8e8ec;
  --text-dim:     #9b9ba5;
  --text-faint:   #8b8b96;   /* vorher #6b6b76 – lag auf dunklem Grund bei nur 3,7:1 */

  /* Akzent: Benzin-Orange.
     --on-acc ist die Schrift, die AUF dieser Fläche liegt: Weiß erreicht auf
     dem hellen Orange nur 2,9:1 und ist damit zu schwach für Fließtext.
     Sehr dunkle Schrift kommt auf 6,7:1 und wirkt zugleich kräftiger. */
  --acc:          #ff6a1a;
  --on-acc:       #14100c;
  --acc-hot:      #ff8b47;
  --acc-deep:     #c94a06;
  --acc-glow:     rgba(255,106,26,.35);

  /* Chrome */
  --chrome: linear-gradient(180deg,
              #ffffff 0%, #dedee4 22%, #9a9aa4 48%,
              #6e6e79 54%, #c9c9d2 74%, #f4f4f8 100%);
  --chrome-edge: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.04));

  /* Maße */
  --wrap:      1240px;
  --wrap-tight: 960px;
  --r:         4px;
  --r-lg:      8px;
  --head:      94px;   /* Platz für das Logo; beim Scrollen wird es kompakter */
  --aktion-h:  0px;    /* Höhe des Aktionsbanners, 0 ohne Aktion (siehe .hat-aktion) */

  /* Bewegung */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t:         .45s var(--ease);

  --shadow:      0 18px 50px rgba(0,0,0,.55);
  --shadow-soft: 0 8px 26px rgba(0,0,0,.40);
}

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

/* Das hidden-Attribut muss stärker sein als jede display-Regel im Stylesheet.
   Sonst bleiben z.B. die Sprachblöcke sichtbar, weil .eyebrow display:flex setzt. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Ohne das verschwindet der Anfang eines angesprungenen Abschnitts unter der
     festen Kopfzeile (66 px) und dem Aktionsbanner. */
  scroll-padding-top: calc(66px + var(--aktion-h, 0px) + 14px);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Feine Körnung über allem – nimmt dem Schwarz das Digitale */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--acc); color: #fff; }

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

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

.skip-link {
  position: absolute; top: -60px; left: 16px; z-index: 200;
  background: var(--acc); color: var(--on-acc); padding: 12px 20px;
  font-weight: 600; transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ============================ 2  BAUSTEINE =============================== */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap--tight { max-width: var(--wrap-tight); }

.section { padding: clamp(72px, 10vw, 130px) 0; position: relative; }
.section--line { border-top: 1px solid var(--line); }

.eyebrow {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--acc);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: '';
  width: 34px; height: 1px;
  background: linear-gradient(90deg, var(--acc), transparent);
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: '';
  width: 34px; height: 1px;
  background: linear-gradient(270deg, var(--acc), transparent);
}

h1, h2, h3, h4 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  /* 1.08 statt knapper: sonst werden die Punkte von Ä/Ö/Ü abgeschnitten */
  line-height: 1.08;
  margin: 0;
}

/* Ober- UND Untergrenze sind an den längsten Sprachfassungen ausgerichtet.

   Oben: Bei 104px liefen "Acciaio. Benzina.", "Acero. Gasolina." und
   "Terästä. Bensaa." mit bis zu 788px über die 760px des Textblocks.

   Unten: Auf dem Handy greift nicht 9vw, sondern die Untergrenze – bei 3rem
   also 48px. Damit brach dieselbe Zeile in drei statt zwei Zeilen um, die
   Überschrift wuchs von 104 auf 156px und schob die Knöpfe in den
   Scroll-Hinweis. 2.6rem hält alle elf Sprachen bei zwei Zeilen. */
/* Die grossen Ueberschriften in der Oldschool-Schrift. Eyebrows, Knoepfe und
   Beschriftungen bleiben in Oswald – dort zaehlt Lesbarkeit, nicht Charakter.
   Rye hat nur einen Schnitt (400); font-weight 600 wuerde der Browser sonst
   kuenstlich fetten und die Form zerstoeren. Etwas mehr Laufweite, weil die
   Sporen sonst ineinanderlaufen. */
.h-xl, .h-lg, .shop-head__title {
  font-family: 'Rye', 'Oswald', serif;
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.14;
}

.h-xl { font-size: clamp(2.6rem, 9vw, 6rem); }

/* --- Wortmarke als Hero-Überschrift ---
   Sie steht an Stelle von "Stahl. Benzin. Freiheit." und wandert beim Scrollen
   in die Kopfzeile (initHeroLogo in main.js). Verschoben und verkleinert wird
   ausschliesslich das Bild, die Überschrift selbst bleibt unangetastet – auf ihr
   liegt die Eingangsanimation, und zwei Animationen auf demselben Element
   wuerden sich gegenseitig ueberschreiben. */
.hero__logo { margin: 0 0 30px; line-height: 0; }
.hero__logo img {
  width: clamp(240px, 44vw, 600px);
  height: auto;
  display: block;
  transform-origin: left top;
  filter: drop-shadow(0 8px 26px rgba(0,0,0,.65));
}
.h-lg { font-size: clamp(2.1rem, 5vw, 3.6rem); }
.h-md { font-size: clamp(1.5rem, 3vw, 2.1rem); }

/* Chrome-Effekt für große Überschriften */
.chrome {
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.6));
}

.lead {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--text-dim);
  max-width: 56ch;
  margin: 0;
}
.lead--center { margin-inline: auto; text-align: center; }

.section-head { margin-bottom: clamp(40px, 6vw, 64px); }
.section-head--center { text-align: center; }
.section-head h2 { margin-bottom: 18px; }

/* --- Buttons --- */
.btn {
  --btn-bg: var(--acc);
  --btn-fg: var(--on-acc);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 34px;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: var(--r);
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s;
  box-shadow: 0 6px 22px rgba(255,106,26,.28);
}
/* Lichtreflex, der beim Hover durchwandert */
.btn::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.4) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease-out);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(255,106,26,.42);
  background: var(--acc-hot);
}
.btn:hover::before { transform: translateX(120%); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  --btn-fg: var(--text);
  color: var(--text);
  border-color: var(--line-strong);
  box-shadow: none;
}
.btn--ghost:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.4);
  box-shadow: none;
}

.btn--wide { padding-inline: 46px; }

/* ============================ 3  HEADER ================================== */

.header {
  position: fixed;
  top: var(--aktion-h); left: 0; right: 0;
  z-index: 100;
  height: var(--head);
  display: flex;
  align-items: center;
  transition: background .4s var(--ease), border-color .4s,
              backdrop-filter .4s, height .4s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Beim Scrollen rückt die Kopfzeile zusammen und gibt Inhalt frei */
.header.is-stuck { height: 66px; }
.header.is-stuck {
  background: rgba(8,8,10,.82);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom-color: var(--line);
}

.header__inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* --- Wortmarke ---
   Das Logo ist ein freigestelltes Bild: gebürstete Chrom-Blockschrift mit
   orangefarbenem Balken darunter, Seitenverhältnis rund 5,1 : 1. Gesteuert
   wird nur die Höhe, die Breite ergibt sich – so bleibt das Verhältnis in
   jedem Umfeld erhalten. Weil die Marke deutlich breiter läuft als die
   frühere Fassung, sind die Höhen entsprechend flacher gewählt. */
.logo {
  display: inline-flex;
  align-items: center;
  position: relative;
  line-height: 0;
}
.logo__img {
  height: 50px;
  width: auto;
  display: block;
  /* Höhen auf die neue Wortmarke abgestimmt: Sie ist mit 3,28:1 deutlich
     kompakter als die alte (5,13:1), bei gleicher Höhe also 36 % schmaler.
     Deshalb darf sie höher stehen – sie braucht trotzdem weniger Platz.
     Das Logo trägt eigene Lichtkanten; ein leichter Schatten hebt es vom
     dunklen Hintergrund ab, ohne die Chromwirkung zu stören. */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
  transition: filter .4s var(--ease), height .4s var(--ease);
}
.header.is-stuck .logo__img { height: 38px; }

/* --- Übergabe Hero → Kopfzeile (nur Startseite) ---
   Solange die grosse Wortmarke im Hero steht, waere dieselbe Marke in der
   Kopfzeile doppelt. Sie blendet erst ein, wenn die grosse beim Scrollen
   verschwindet. Die Klasse setzt main.js (initHeroLogo) – ohne JavaScript
   bleibt die Kopfzeile unveraendert sichtbar. */
.hat-hero-logo .header .logo {
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease);
}
.hat-hero-logo .header.zeigt-logo .logo { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .hat-hero-logo .header .logo { transition: none; }
}

.logo:hover .logo__img {
  filter: drop-shadow(0 2px 10px rgba(255,106,26,.35))
          drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}

.nav-link {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
  position: relative;
  padding: 6px 0;
  transition: color .3s;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.nav-link:hover, .nav-link.is-active { color: var(--text); }
.nav-link:hover::after, .nav-link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header__tools {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* --- Länderauswahl ---
   Steht bewusst in der Kopfzeile: Jeder soll auf den ersten Blick sehen, dass
   es seinen Shop mit seiner Währung gibt. */
.country { position: relative; }

.country__toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text-dim);
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s, border-color .25s, background .25s;
}
.country__toggle:hover,
.country.is-open .country__toggle {
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(255,255,255,.05);
}
.country__toggle svg { width: 15px; height: 15px; flex: none; }
.country__caret {
  width: 12px; height: 12px;
  transition: transform .3s var(--ease-out);
}
.country.is-open .country__caret { transform: rotate(180deg); }

.country__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  width: 250px;
  max-height: min(64vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease-out), visibility .25s;
}
.country.is-open .country__list {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.country__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--r);
  color: var(--text-dim);
  font-size: 14px;
  text-align: left;
  transition: background .2s, color .2s;
}
.country__item:hover { background: rgba(255,255,255,.06); color: var(--text); }
.country__item.is-active {
  background: rgba(255,106,26,.14);
  color: var(--acc-hot);
}
/* Flaggen: kleine Rechtecke mit feiner Kante, damit helle Flaggen
   (Schweiz, Polen) auf dem dunklen Grund nicht ausfransen. */
.country__flag {
  width: 20px;
  height: 15px;
  flex: none;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}
.country__toggle .country__flag { width: 18px; height: 13px; }

.country__name { font-weight: 500; flex: 1; }
.country__lang {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--text-faint);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2px 5px;
  flex: none;
}
.country__item.is-active .country__lang {
  color: var(--acc-hot);
  border-color: rgba(255,106,26,.45);
}

/* --- Warenkorb --- */
.cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  transition: border-color .3s, background .3s, transform .3s var(--ease-out);
}
.cart-btn:hover {
  border-color: var(--acc);
  background: rgba(255,106,26,.10);
  transform: translateY(-1px);
}
.cart-btn svg { width: 19px; height: 19px; }

.cart-btn__count {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--acc);
  color: var(--on-acc);
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  border: 2px solid var(--ink);
  line-height: 1;
}
.cart-btn__count.is-visible { display: flex; animation: pop .45s var(--ease-out); }
@keyframes pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* --- Burger (mobil) --- */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.burger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--text);
  transition: transform .35s var(--ease-out), opacity .25s;
}
.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Mobiles Menü --- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(8,8,10,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }
.mobile-nav a {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  padding: 12px 0;
  opacity: 0;
  transform: translateY(22px);
  transition: color .3s, opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.mobile-nav.is-open a { opacity: 1; transform: none; }
.mobile-nav.is-open a:nth-child(1) { transition-delay: .06s; }
.mobile-nav.is-open a:nth-child(2) { transition-delay: .12s; }
.mobile-nav.is-open a:nth-child(3) { transition-delay: .18s; }
.mobile-nav.is-open a:nth-child(4) { transition-delay: .24s; }
.mobile-nav a:hover { color: var(--acc); }

/* ============================ 4  STARTSEITE ============================== */

.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  align-items: center;
  padding: calc(var(--head) + var(--aktion-h) + 60px) 0 80px;
  overflow: hidden;
}

/* Tiefe: Foto, Lichtkegel, Rasterlinien, Vignette */
.hero__bg { position: absolute; inset: 0; z-index: 0; }

/* Das Foto zeigt das Motorrad rechts – deshalb wird der rechte Bildrand
   gehalten, während der Text links auf der dunklen Fläche steht. */
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center;
  opacity: .92;
}
.hero__glow {
  position: absolute;
  top: -25%; left: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle,
    rgba(255,106,26,.10) 0%, rgba(255,106,26,.04) 34%, transparent 66%);
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .75; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.09); }
}
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 74px 74px;
  opacity: .5;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 42%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 42%, #000 20%, transparent 78%);
}
.hero__vignette {
  position: absolute; inset: 0;
  background:
    /* linke Hälfte tief abdunkeln – dort steht die Schrift */
    linear-gradient(90deg, rgba(8,8,10,.96) 0%, rgba(8,8,10,.86) 34%, rgba(8,8,10,.30) 62%, transparent 82%),
    linear-gradient(180deg, rgba(8,8,10,.80) 0%, transparent 24%, transparent 58%, var(--ink) 100%);
}

.hero__inner { position: relative; z-index: 2; }

/* Etwas breiter als früher: Die Überschrift nennt jetzt zuerst das Produkt
   ("Klamotten") und trägt die Ortsangabe in der zweiten Zeile. Bei 620px wäre
   "für die Straße" in mehreren Sprachen umgebrochen und die Aussage in drei
   Zeilen zerfallen. */
.hero__text { max-width: 760px; }

.hero h1 { margin-bottom: 26px; }
.hero h1 span { display: block; }
.hero h1 .accent {
  color: var(--acc);
  -webkit-text-fill-color: var(--acc);
  background: none;
  filter: drop-shadow(0 0 26px var(--acc-glow));
}

.hero .lead { margin: 0 0 40px; max-width: 48ch; }

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero__scroll {
  position: absolute;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.hero__scroll::after {
  content: '';
  width: 1px; height: 46px;
  background: linear-gradient(180deg, var(--acc), transparent);
  animation: drop 2.1s ease-in-out infinite;
}
@keyframes drop {
  0%, 100% { transform: scaleY(.35); transform-origin: top; opacity: .4; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* --- Laufband --- */
.ticker {
  border-block: 1px solid var(--line);
  background: var(--ink-2);
  padding: 15px 0;
  overflow: hidden;
  display: flex;
  white-space: nowrap;
  user-select: none;
}
.ticker__row {
  display: flex;
  align-items: center;
  gap: 46px;
  padding-right: 46px;
  animation: slide 34s linear infinite;
  flex-shrink: 0;
}
@keyframes slide { to { transform: translateX(-100%); } }
.ticker span {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 46px;
}
.ticker span::after {
  content: '';
  width: 5px; height: 5px;
  background: var(--acc);
  transform: rotate(45deg);
}

/* --- Vorteile --- */
.usps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.usp {
  background: var(--ink);
  padding: 38px 30px;
  transition: background .4s var(--ease);
  position: relative;
}
.usp::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.usp:hover { background: var(--panel); }
.usp:hover::before { transform: scaleX(1); }
.usp__icon {
  width: 30px; height: 30px;
  color: var(--acc);
  margin-bottom: 20px;
}
.usp__icon svg { width: 100%; height: 100%; }
.usp h3 { font-size: 15px; letter-spacing: .1em; margin-bottom: 10px; }
.usp p { margin: 0; font-size: 14px; color: var(--text-dim); line-height: 1.6; }

/* --- Story --- */
.story {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px, 6vw, 84px);
  align-items: center;
}
.story__text p { color: var(--text-dim); margin: 0 0 18px; }
.story__text h2 { margin-bottom: 26px; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 36px;
}
.stat { background: var(--ink); padding: 24px 18px; text-align: center; }
.stat__num {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  margin-bottom: 8px;
}
.stat__label {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 1.4;
}

/* Werkstattfoto mit einer echten Produktkachel davor */
.story__visual { position: relative; }
.story__visual::before {
  content: '';
  position: absolute;
  inset: -10% -6%;
  background: radial-gradient(circle at 60% 40%, var(--acc-glow), transparent 62%);
  filter: blur(46px);
  z-index: 0;
}

.story__photo {
  position: relative;
  z-index: 1;
  margin: 0;
  aspect-ratio: 3/4;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}
.story__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.story__visual:hover .story__photo img { transform: scale(1.05); }

/* Kleine Produktkachel, die aus dem Foto herausragt */
.story__product {
  position: absolute;
  z-index: 2;
  right: -18px;
  bottom: -26px;
  width: 42%;
  max-width: 190px;
  aspect-ratio: 1;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.story__product a { display: block; width: 100%; height: 100%; }
.story__product img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 10%;
  transition: transform .6s var(--ease-out);
}
.story__product:hover img { transform: scale(1.06); }
.story__product::after {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid rgba(255,106,26,.25);
  pointer-events: none;
}

/* --- Schluss-CTA --- */
.cta {
  position: relative;
  text-align: center;
  padding: clamp(110px, 15vw, 190px) 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  isolation: isolate;
}

/* Nächtliche Straße als Hintergrund – der Fluchtpunkt liegt mittig,
   deshalb steht der Text darüber besonders ruhig. */
.cta__bg { position: absolute; inset: 0; z-index: -1; }
.cta__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 65%;
}
.cta__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 50% 55%, rgba(8,8,10,.55) 0%, rgba(8,8,10,.85) 70%, var(--ink) 100%),
    linear-gradient(180deg, var(--ink) 0%, transparent 22%, transparent 72%, var(--ink) 100%);
}
.cta__inner { position: relative; z-index: 1; }
.cta h2 { margin-bottom: 18px; }
.cta .lead { margin: 0 auto 36px; }

/* ============================ 5  PRODUKTE ================================ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .5s var(--ease-out), border-color .4s, box-shadow .5s var(--ease-out);
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

.card__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
}
.card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 8%;
  transition: opacity .5s var(--ease), transform .8s var(--ease-out);
}
.card__img--hover { opacity: 0; }
.card:hover .card__img--main  { opacity: 0; transform: scale(1.03); }
.card:hover .card__img--hover { opacity: 1; transform: scale(1.03); }

/* Lichtstreifen über dem Bild beim Hover */
.card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.10) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .9s var(--ease-out);
  pointer-events: none;
}
.card:hover .card__media::after { transform: translateX(100%); }

.card__body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  border-top: 1px solid var(--line);
}
.card__type {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.card__name {
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.2;
  color: var(--text);
  transition: color .3s;
  /* genau zwei Zeilen – hält alle Felder exakt gleich hoch */
  line-height: 1.25;
  height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card:hover .card__name { color: var(--acc); }
.card__foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.card__price {
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}
.card__price--none {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.card:hover .card__price--none { color: var(--acc-hot); }

.card__cta {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acc);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease-out);
}
.card:hover .card__cta { opacity: 1; transform: none; }

/* Ganze Karte klickbar, ohne Links zu verschachteln */
.card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }

/* Ladezustand */
.skeleton {
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.skeleton::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton--card { aspect-ratio: .78; }

.state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
}
.state .btn { margin-top: 20px; }

.products__more { margin-top: 52px; text-align: center; }

/* --- Motiv-Kacheln ---
   auto-FILL, nicht auto-fit: auto-fit lässt leere Spalten zusammenfallen und
   verteilt deren Platz auf die vorhandenen Kacheln. Bei zwei Motiven wurden
   daraus zwei riesige (455 px statt 287 px) – je weniger Motive, desto
   größer. Mit auto-fill bleibt die Spaltenbreite gleich, unabhängig davon,
   wie viele Motive der Shop gerade hat. */
.designs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.design {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  align-items: flex-end;
  transition: border-color .4s, transform .5s var(--ease-out);
}
.design:hover { transform: translateY(-5px); border-color: var(--acc); }
.design img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 10% 10% 18%;
  /* Unsichtbar, bis das Bild wirklich da ist (bilderEinblenden in main.js).
     Vorher blendete sich die leere Kachel ein und das Motiv sprang danach
     hinein – genau das wirkte unruhig. */
  opacity: 0;
  transition: opacity .45s var(--ease-out), transform .9s var(--ease-out);
}
.design.bild-da img { opacity: 1; }
.design:hover img { transform: scale(1.07); }
.design::after {
  content: '';
  position: absolute; inset: 0;
  /* Nur noch eine kleine Zeile zu unterlegen – der Verlauf darf später und
     zurückhaltender einsetzen als früher unter dem großen Namen. */
  background: linear-gradient(180deg, transparent 58%, rgba(8,8,10,.88) 100%);
}
/* Unter dem Motiv steht allein die Anzahl der Produkte. Der Motivname ist
   bewusst weg: Er stand groß über dem Motiv und lenkte davon ab. */
.design__label {
  position: relative;
  z-index: 1;
  padding: 18px;
  width: 100%;
  text-align: center;
}
.design__count {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ============================ 6  FOOTER ================================== */

.footer {
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  padding: clamp(56px, 7vw, 84px) 0 32px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 44px;
  margin-bottom: 52px;
}
.footer__brand .logo { margin-bottom: 18px; }
.footer__brand .logo__img { height: 54px; }
.footer__tag { color: var(--text-faint); font-size: 14px; line-height: 1.7; margin: 0; }
.footer h4 {
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--text);
  margin-bottom: 18px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer li a {
  font-size: 14px;
  color: var(--text-faint);
  transition: color .25s, padding-left .25s var(--ease-out);
}
.footer li a:hover { color: var(--acc); padding-left: 5px; }

.footer__bottom {
  border-top: 1px solid var(--line);
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--text-faint);
}
.footer__bottom p { margin: 0; }

/* ============================ 7  SHOP-SEITE ============================== */

.shop-head {
  /* kompakter Kopf: die Produkte sollen früh sichtbar sein */
  padding: calc(var(--head) + var(--aktion-h) + 44px) 0 34px;
  position: relative;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}

/* Produktfoto als ruhiger Hintergrund für den Shop-Kopf */
.shop-head__bg { position: absolute; inset: 0; z-index: -1; }
.shop-head__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: .85;
}
.shop-head__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 90% at 50% 50%, rgba(8,8,10,.72) 0%, rgba(8,8,10,.90) 65%, var(--ink) 100%),
    linear-gradient(180deg, var(--ink) 0%, transparent 30%, transparent 62%, var(--ink) 100%);
}
.shop-head__inner { position: relative; z-index: 1; }

.shop-head__title {
  /* Oldschool-Schrift wie die grossen Ueberschriften der Startseite. Diese
     Regel steht spaeter im Stylesheet als die gemeinsame und hat sie vorher
     wieder auf Oswald zurueckgesetzt. */
  font-family: 'Rye', 'Oswald', serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.08;
  margin: 0;
}

/* Auf einer Produktseite tritt der Kopf zurück – dort steht der Produktname
   ohnehin direkt darunter. */
.shop-head.is-detail { padding-top: calc(var(--head) + var(--aktion-h) + 20px); padding-bottom: 14px; }
.shop-head.is-detail .shop-head__title { display: none; }

.shop-area { padding: 46px 0 90px; min-height: 60vh; }
/* Bei eingebettetem Fremd-Shop entfällt der untere Abstand – der Rahmen
   schließt direkt an die Fußzeile an. */
.shop-area:has(.shop-frame:not([hidden])) { padding-bottom: 0; }

.shop-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 90px 0;
  color: var(--text-faint);
  font-family: 'Oswald', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
}
.spinner {
  width: 34px; height: 34px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation: spin .85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Spreadshop-Widget an unser Design angleichen.
   Das Widget rendert direkt ins DOM (kein iframe), deshalb greift unser CSS.
   Regeln bewusst defensiv: Farben und Abstände ja, Layout-Umbau nein.
   -------------------------------------------------------------------------- */

/* Doppelungen ausblenden – wir haben eigenen Header/Footer.
   Auch die Listenüberschrift des Widgets ("Alle Produkte") entfällt: Der
   Seitenkopf sagt bereits, wo man ist. */
#myShop .sprd-listpage__title,
#myShop .sprd-header-container,
#myShop .sprd-filterpane,          /* eigene Filterspalte des Widgets auf Kategorieseiten – ersetzt durch .shop-filter */
#myShop .sprd-social-bar,
#myShop .sprd-footer,
#myShop .sprd-shop-footer,
#myShop .sprd-skip-nav,
#myShop .sprd-breadcrumb-nav { display: none !important; }

#myShop { color: var(--text); }

/* --- Produktfilter: linke Spalte ---
   Inhalt baut main.js (initShopFilter) aus der Kategorie-Leiste des
   Spreadshops. Das Raster greift nur, solange die Spalte sichtbar ist
   (.mit-filter) – Produktseite und Warenkorb behalten die volle Breite. */
.shop-layout.mit-filter {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.shop-filter {
  position: sticky;
  top: calc(66px + var(--aktion-h) + 28px);   /* unter dem schmalen Seitenkopf (und ggf. Aktionsbanner) */
  animation: shop-hoch .6s var(--ease-out) both;
}
/* --- "Aktive Filter" des Widgets ---
   Der Kasten (.sprd-activefilters-lp) steht als erstes Kind IN der
   Produktliste. Die ist ein Raster mit drei Spalten, also bekam er eine ganze
   Produktkachel-Zelle: 287 x 434 px, mit dem Motivnamen irgendwo in der Mitte.
   Hier wird daraus eine schlichte Zeile über den Produkten – über die ganze
   Breite, linksbündig, klein. Die Überschrift "Aktive Filter" entfällt: Die
   Zeile sagt selbst, was sie ist. */
#myShop .sprd-activefilters-lp {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-height: 0;
  margin: 0 0 4px;
  padding: 0 !important;
  font-size: .85rem;
}
#myShop .sprd-activefilters-lp__title { display: none !important; }

#myShop .sprd-activefilters-lp__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto !important;
  height: auto !important;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  color: var(--text) !important;
  text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
#myShop .sprd-activefilters-lp__item:hover {
  border-color: var(--acc);
  color: var(--acc) !important;
}
#myShop .sprd-activefilters-lp__itemtext {
  display: flex;
  align-items: center;
  width: auto !important;
  color: inherit !important;
  text-decoration: none !important;
  line-height: 1;
}
/* Das Kreuz mittig: als eigenes Element ausrichten, nicht wie Text auf der
   Grundlinie mitlaufen lassen – sonst sitzt es einen Hauch zu hoch. */
#myShop .sprd-activefilters-lp__item svg {
  display: block;
  align-self: center;
  width: 11px;
  height: 11px;
  flex: none;
  margin: 0 !important;
  vertical-align: middle;
}

/* "Filter zurücksetzen" entfällt: Das Kreuz am Eintrag macht dasselbe. */
#myShop .sprd-activefilters-lp__reset { display: none !important; }

/* --- Motivansicht im Shop --- */
.motive__intro { margin: 0 auto 40px; }
.designs--alle { margin-top: 0; }
/* Im Shop-Layout steht das Motivraster an Stelle der Produktliste – und
   übernimmt deren Maße: dieselben Spalten wie das Produktraster (.grid),
   dieselbe Kachelgröße wie die Kacheln des Widgets (gemessen 287 × 434 px,
   Verhältnis 2/3). Vorher waren die Motivkacheln 455 × 569 px. */
.designs--shop {
  margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.designs--shop .design,
.designs--shop .skeleton--card { aspect-ratio: 2/3; }

/* --- Motivansicht: Aufbau schon vor dem ersten Zeichnen ---
   Die Klasse setzt der Kopf von shop.html. Ohne sie baute die Seite erst den
   Shop auf und schaltete danach um. */
.ist-motive #myShop,
.ist-motive .shop-loading { display: none !important; }
/* Übergang von den Motiven in den Shop: Der Ladehinweis säße über dem Layout
   und schöbe beim Kommen und Gehen alles zweimal. Den Platz hält stattdessen
   der Inhaltsbereich selbst (initMotivUebergang setzt seine Mindesthöhe). */
.ist-uebergang .shop-loading { display: none !important; }
/* Solange das Widget startet, steht in #myShop nur der Ersatzlink für Besucher
   ohne JavaScript („BobberMafia“) – nackt oben links. Im Übergang unsichtbar. */
.ist-uebergang #myShop > a { visibility: hidden; }
/* Der Preishinweis gehört unter die Produkte. Im Übergang gibt es noch keine –
   er stünde mitten im leeren Bereich und würde dann nach unten geschoben. */
.ist-uebergang [data-shop-pricenote] { display: none !important; }

/* Das Cookie-Banner von Spreadshirt bleibt verborgen, solange unser Skript es
   ablehnt (Kopf von shop.html). Scheitert das, wird die Klasse entfernt und
   das Banner erscheint – eine unbeantwortbare Frage soll niemand sehen. */
.ot-wartet #onetrust-consent-sdk,
.ot-wartet #onetrust-banner-sdk { display: none !important; }
.ist-motive [data-designs-all] { display: grid; }

/* Die Filterspalte erscheint erst, wenn ihre Kategorien da sind. Ihr Platz
   wird deshalb von Anfang an freigehalten – sonst stünden die Motive kurz
   über die volle Breite und rückten dann zur Seite. */
.ist-motive .shop-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
/* Unter 768 px übernimmt der Filter des Widgets; dann braucht die Motivansicht
   die Spalte nicht mehr. Dieselbe Grenze wie in main.js (initShopFilter). */
@media (max-width: 767px) {
  .ist-motive .shop-layout { display: block; }

  /* Das Widget schneidet den Produktnamen am Handy nach einer Zeile ab
     ("Motorcycle Brothers – Totenko…"). Zwei Zeilen fassen ihn fast immer
     ganz; mehr würde das Bild darunter zu weit nach unten schieben. */
  #myShop .sprd-detail-mobile-caption__heading {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

}

.shop-filter__titel {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--text-faint);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.shop-filter__liste,
.shop-filter__unter { list-style: none; margin: 0; padding: 0; }

/* Deutlicher Abstand zwischen den Hauptkategorien: Er zeigt schon vor dem
   Lesen, wo eine Gruppe endet und die nächste beginnt. */
.shop-filter__gruppe + .shop-filter__gruppe { margin-top: 20px; }

.shop-filter__link {
  display: block;
  padding: 8px 0 8px 14px;
  border-left: 2px solid transparent;
  color: var(--text-dim);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8rem;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

/* Hauptkategorien (alles außer den Unterpunkten): heller, fetter, etwas
   größer – sie sind die Gliederung. Vorher waren die Unterkategorien mit
   .9rem sogar größer als sie, dadurch stand die Spalte auf dem Kopf. */
.shop-filter__link:not(.shop-filter__link--unter) {
  color: var(--text);
  font-weight: 600;
  font-size: .95rem;
}

/* Kopfblock der Spalte: "Alle Produkte" und der Weg zu den Motiven. Beides
   sind keine Oberkategorien der folgenden Einträge, sondern stehen daneben –
   deshalb eine Linie darunter. */
.shop-filter__kopf { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }

.shop-filter__link:hover,
.shop-filter__link:focus-visible { color: var(--acc); }
.shop-filter__link.is-active {
  color: var(--acc);
  border-left-color: var(--acc);
}

/* Unterkategorien: kleiner, ruhiger und dichter an ihrer Hauptkategorie */
.shop-filter__unter { margin-top: 2px; }
.shop-filter__link--unter {
  padding: 4px 0 4px 26px;
  color: var(--text-dim);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: .8rem;
}
@media (prefers-reduced-motion: reduce) {
  .shop-filter { animation: none; }
}

/* Fenster des Widgets (Filter auf dem Handy, Maßtabelle …) über unserem
   festen Seitenkopf (z-index 100). Das Widget setzt .SprdMain auf
   z-index 1 und sperrt seine Fenster damit in eine Ebene darunter – ein
   höherer z-index am Fenster selbst hilft deshalb nicht. Angehoben wird nur,
   solange ein Fenster offen ist (.sprd-overlay-visible am <body>), damit
   sonst nichts beim Scrollen über den Seitenkopf rutscht. */
body.sprd-overlay-visible #myShop .SprdMain { z-index: 200 !important; }

/* Aktionsbanner des Shops bleibt sichtbar – Rabatte sollen ankommen –
   bekommt aber unsere Farben statt der Standardgestaltung. */
#myShop .sprd-promo-header {
  background: linear-gradient(90deg, var(--acc-deep), var(--acc)) !important;
  color: #fff !important;
  border-radius: var(--r);
  margin-bottom: 26px;
}
#myShop .sprd-promo-header * { color: #fff !important; }
#myShop .sprd-promo__button,
#myShop .sprd-promo__toggle {
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  color: #fff !important;
  border-radius: var(--r);
}
#myShop .SprdMain,
#myShop .customPageBackground { background: transparent !important; }

/* Das Widget bringt schwarze Schrift mit – auf unserem dunklen Grund wäre
   sie unlesbar. Deshalb erben alle Shop-Elemente unsere helle Textfarbe. */
#myShop [class^="sprd-"],
#myShop [class*=" sprd-"] { color: var(--text); }

/* Schrift des Widgets an unsere angleichen */
#myShop, #myShop button, #myShop input, #myShop select, #myShop textarea {
  font-family: 'InterVar', -apple-system, BlinkMacSystemFont, sans-serif;
}
#myShop h1, #myShop h2, #myShop h3, #myShop h4,
#myShop .sprd__headline {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--text) !important;
}

/* --- Produktraster ---
   Das Widget setzt die Kacheln als umbrechende Flex-Reihe. Dadurch ist jede
   Kachel so hoch wie ihr Inhalt: ein zweizeiliger Produktname oder eine
   fehlende Farbreihe verschiebt schon die ganze Zeile (gemessen: 240 bis
   286 px). Hier wird daraus ein festes Raster mit gleich großen Feldern. */
#myShop .sprd-product-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  /* Die Felder werden nicht gestreckt: Bildfeld, Farbreihe und Titel haben
     feste Maße, dadurch ergibt sich die gleiche Höhe von selbst – ohne
     Leerraum zwischen Name und Preis. */
  gap: clamp(16px, 2vw, 26px);
  align-items: stretch;
}
#myShop .sprd-product-list > * {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}

/* --- Produktkacheln wie unsere eigenen Karten --- */
#myShop .sprd-product-list-item {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  /* rundum gleicher Innenabstand – oben fehlte er ganz, dadurch saß das Bild
     direkt auf der Kante */
  padding: 14px;
  transition: transform .5s var(--ease-out), border-color .4s, box-shadow .5s var(--ease-out);
}

/* Bildfeld: immer quadratisch, damit alle Reihen auf einer Linie liegen */
#myShop .sprd-product-list-item__hoverarea {
  aspect-ratio: 1;
  height: auto !important;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
#myShop .sprd-product-list-item__hoverarea img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

/* Farbreihe belegt ihren Platz auch dann, wenn ein Produkt nur eine Farbe hat */
#myShop .sprd-appearance-list--listpage {
  height: 30px;
  margin: 4px 0 6px;
  overflow: hidden;
}

/* Produktname: belegt immer genau zwei Zeilen – ein einzeiliger Name ließ das
   Feld sonst 5 px flacher werden und damit die ganze Reihe verrutschen.
   Zeilenhöhe und Feldhöhe hängen zusammen: 2 × 1.35em = 2.7em. */
#myShop .sprd-product-list-item__title {
  line-height: 1.35;
  height: 2.7em;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* Preis direkt unter dem Namen */
#myShop .sprd-product-list-item__price {
  padding-top: 6px;
}

/* Der Hinweis auf ausverkaufte Ware schwebt über dem unteren Bildrand.
   Im normalen Textfluss würde er die Kachel um rund 65 px wachsen lassen und
   das Raster wieder zerreißen; beschnitten wäre er nur halb lesbar. */
#myShop .sprd-product-list-item__link { position: relative; }
#myShop .sprd-product-list-item__stockout {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  margin: 0 !important;
  padding: 7px 10px;
  text-align: center;
  backdrop-filter: blur(3px);
}
#myShop .sprd-product-list-item:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
#myShop .sprd-product-list-item__title {
  font-family: 'Oswald', sans-serif;
  font-size: 15px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text) !important;
}
#myShop .sprd-product-list-item__price {
  font-family: 'Oswald', sans-serif;
  font-size: 17px !important;
  font-weight: 600;
  color: var(--text) !important;
}
#myShop .sprd-product-list-item__size,
#myShop .sprd-product-list-item__sizes {
  color: var(--text-faint) !important;
  background: transparent !important;
}

/* Die Größenzeile fehlt bei Artikeln ohne Größen (Tasse, Kissen) und bricht
   bei mittleren Fensterbreiten um – beides verschob die Feldhöhe um 20 px.
   Sie belegt jetzt immer dieselbe Zeile. */
#myShop .sprd-product-list-item__sizes {
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
}

/* Der Bildbereich soll nicht als weißer Kasten wirken.
   Die Bilder werden zusätzlich per JS auf transparentes PNG umgestellt. */
#myShop .sprd-image-container,
#myShop .sprd-img-spinner,
#myShop .sprd-product-list-item__image,
#myShop .sprd-product-list-item__hoverarea {
  background: transparent !important;
}

/* "Bald wieder verfügbar" – statt Rosa in unserer Akzentfarbe */
#myShop .sprd-product-list-item__stockout {
  background: rgba(255,106,26,.16) !important;
  color: var(--acc-hot) !important;
  border: 1px solid rgba(255,106,26,.4);
  border-radius: var(--r);
  font-weight: 600;
}

/* --- Größenauswahl auf der Produktseite ---
   Das Widget markiert die gewählte Größe über die Klassen sprd-c-m2 /
   sprd-bc-m2, die im Standardtheme auf Schwarz zeigen – auf unserem dunklen
   Grund also unsichtbar. Wir setzen dort unsere Akzentfarbe.
   Die Klassen kommen auch in Navigation und Bildansicht vor, deshalb ist die
   Regel bewusst eng auf die Größenfelder begrenzt. */
#myShop .sprd-detail-sizes__size {
  transition: border-color .25s, background .25s, color .25s;
}
#myShop .sprd-detail-sizes__size:hover {
  border-color: var(--text-dim) !important;
  background: rgba(255,255,255,.04) !important;
}
#myShop .sprd-detail-sizes__size.sprd-c-m2,
#myShop .sprd-detail-sizes__size.sprd-bc-m2 {
  border-color: var(--acc) !important;
  color: var(--acc-hot) !important;
  background: rgba(255,106,26,.14) !important;
  font-weight: 600;
  /* zweite Linie nach innen statt dickerem Rahmen – so springt nichts */
  box-shadow: inset 0 0 0 1px var(--acc);
}

/* --- Farbsystem des Widgets --------------------------------------------
   Spreadshop färbt jede Fläche, Schrift und Linie über ein Raster von
   Kürzel-Klassen. Deren Werte stammen aus dem Shop-Theme und sind für einen
   HELLEN Shop gedacht:

       sprd-*-m1 / m2 / s2  = Schwarz   (Schrift, Linien, dunkle Flächen)
       sprd-*-m3 / s3       = Weiß      (Karten, Dialoge, Formularflächen)

   Auf unserem dunklen Grund ergibt das weiße Kästen mit weißer Schrift.
   Die Werte hängen an CSS-Variablen auf :root – die lassen sich aber nicht
   einfach umdrehen, weil dieselbe Variable mal eine Fläche und mal die
   Schrift darauf einfärbt. Deshalb wird hier nach VERWENDUNG unterschieden:
   Flächen werden dunkel, Schrift und Linien hell.

   Bewusst ohne #myShop davor: Dialoge (z. B. "Artikel löschen") hängt das
   Widget direkt in den <body>, außerhalb unseres Shop-Containers.
   ---------------------------------------------------------------------- */

/* Flächen – alles, was im hellen Theme Papier war, wird zur dunklen Karte */
.sprd-bg-m3,
.sprd-bg-s3 { background-color: var(--panel) !important; }

/* Flächen, die schon im hellen Theme dunkel waren, bleiben dunkel –
   aber abgesetzt, damit sie sich vom Seitenhintergrund abheben */
.sprd-bg-m1,
.sprd-bg-m2,
.sprd-bg-s2 { background-color: var(--panel-2) !important; }

/* Schrift – im hellen Theme schwarz, hier hell */
.sprd-c-m1,
.sprd-c-m2,
.sprd-c-s2 { color: var(--text) !important; }

/* Schrift, die im hellen Theme weiß war (auf dunklen Flächen), bleibt hell */
.sprd-c-m3,
.sprd-c-s3 { color: var(--text) !important; }

/* Linien und Rahmen */
.sprd-bc-m1,
.sprd-bc-m2,
.sprd-bc-m3,
.sprd-bc-s2,
.sprd-bc-s3 { border-color: var(--line-strong) !important; }

.sprd-lbc-m1,
.sprd-lbc-m2,
.sprd-lbc-m3,
.sprd-lbc-s2,
.sprd-lbc-s3 { border-color: var(--line) !important; }

/* Halbdurchsichtige Overlays mischt das Widget aus diesem Zahlentripel –
   mit 255,255,255 legt es einen weißen Schleier über die Seite. */
:root {
  --sprd-main3-dec: 20, 20, 24 !important;
}

/* Zweitrangige Schaltflächen des Widgets (z. B. "Abbrechen" im Löschdialog)
   kommen mit weißer Fläche – hier als Umriss auf dunklem Grund. */
[class*="sprd-btn-second"],
[class*="sprd-button-secondary"]:not(.sprd-detail-sizes__size) {
  background: transparent !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--text) !important;
}
[class*="sprd-btn-second"]:hover,
[class*="sprd-button-secondary"]:not(.sprd-detail-sizes__size):hover {
  background: rgba(255,255,255,.06) !important;
  border-color: var(--text-dim) !important;
}

/* Dialoge und Overlays.
   Der eigentliche Dialogkasten heißt .sprd-Wrapper – mit großem W, deshalb
   greifen die üblichen Kleinschreibungs-Muster dort nicht. */
.sprd-Wrapper,
.sprd-modal,
.sprd-overlay,
[class*="sprd-"][class*="modal"],
[class*="sprd-"][class*="dialog"] {
  background-color: var(--panel) !important;
  color: var(--text) !important;
}
.sprd-Wrapper {
  border: 1px solid var(--line) !important;
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.sprd-Wrapper *,
.sprd-modal *,
[class*="sprd-"][class*="modal"] * { color: var(--text); }

/* Abdunklung hinter dem Dialog */
.sprd-overlay { background-color: rgba(8,8,10,.82) !important; }

/* Die Hauptschaltfläche im Dialog ist schwarz und hebt sich auf der dunklen
   Dialogfläche kaum ab – sie bekommt eine Kontur. */
.sprd-Wrapper .sprd-button:not([class*="second"]) {
  border: 1px solid var(--line-strong) !important;
}

/* Summen- und Kassenblock als abgesetzte Karte */
/* Preise und Summe bilden zusammen den rechten Block. Der obere Teil stand
   frei auf dem Seitenhintergrund, der untere in einem Kasten – das wirkte
   unfertig. Jetzt sind beide gleich aufgebaut. */
#myShop .sprd-basket-prices {
  background: var(--panel) !important;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px !important;
  margin: 0 !important;
}
#myShop .sprd-basket-checkout {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r);
  padding: 22px;
  margin: 12px 0 0 !important;   /* das Widget setzt hier -10px seitlich */
}

/* Die Zahlungsarten klebten oben im Rest der rechten Spalte. Sie bekommen
   deshalb etwas Höhe und stehen darin mittig.

   Wichtig: Nur dieses Element anfassen. Der umgebende .sprd-basket__content
   trägt das zweispaltige Layout (Artikel links, Summen rechts) – wird er auf
   eine Flex-Säule umgestellt, klappt der ganze Warenkorb untereinander. */
#myShop .sprd-basket__payment {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  min-height: 96px;
  padding: 20px 12px !important;
}

/* Zeilenabstand innerhalb des Preisblocks */
#myShop .sprd-basket-prices__row,
#myShop .sprd-basket-prices > div { margin-bottom: 8px; }
#myShop .sprd-basket-checkout__total { color: var(--text) !important; }
#myShop .sprd-basket-checkout__total strong,
#myShop .sprd-basket-checkout__price {
  font-family: 'Oswald', sans-serif;
  font-size: 1.35rem;
  color: var(--text) !important;
}
/* Kleingedrucktes bewusst nicht zu blass: mit --text-faint läge der Kontrast
   bei 3,5:1 und damit unter dem Lesbarkeitsstandard für kleine Schrift. */
#myShop .sprd-basket-checkout__info,
#myShop .sprd-basket-checkout__vat,
#myShop .sprd-basket-checkout__shipping { color: var(--text-dim) !important; }

/* Mengenwähler: dunkel mit klaren Feldern */
#myShop .sprd-quantity-control {
  background: var(--ink-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r);
  overflow: hidden;
}
#myShop .sprd-quantity-control__button {
  color: var(--text-dim) !important;
  background: transparent !important;
  transition: color .25s, background .25s;
}
#myShop .sprd-quantity-control__button:hover {
  color: var(--acc) !important;
  background: rgba(255,106,26,.12) !important;
}
#myShop .sprd-quantity-control__input {
  background: var(--ink) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  font-weight: 600;
  text-align: center;

  /* Der Browser setzt bei einem Zahlenfeld von sich aus zwei kleine Pfeile
     hinein. Daneben stehen aber schon Minus und Plus des Shops – die Menge
     ließe sich also auf zwei Wegen ändern, und die Pfeile drängen die Zahl
     zusätzlich aus der Mitte. Sie werden deshalb ausgeblendet; das Feld
     bleibt tippbar, nur die Pfeile verschwinden. */
  appearance: textfield;
  -moz-appearance: textfield;
}
#myShop .sprd-quantity-control__input::-webkit-outer-spin-button,
#myShop .sprd-quantity-control__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* Versandhinweis: als Hinweisfeld statt als schwarzer Block */
#myShop .sprd-basket-prices__free-shipping-hint {
  background: var(--panel-2) !important;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text-dim) !important;
  padding: 12px 14px !important;
  margin: 10px 0 !important;
  line-height: 1.5;
}

/* Artikelzeilen im Warenkorb */
#myShop .sprd-basket-item {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r);
  /* Das Widget setzt hier "8px 0 24px" – links und rechts also nichts,
     wodurch Bild und Preis an den Kanten klebten. */
  padding: 18px !important;
  margin-bottom: 12px;
}
#myShop .sprd-basket-item:last-child { margin-bottom: 0; }

/* Bild und Textspalte brauchen Luft dazwischen */
#myShop .sprd-basket-item__image { margin: 0 !important; }
#myShop .sprd-basket-item__info { margin-left: 18px !important; }

/* Die Zeilen "Größe" und "Farbe" standen zu dicht beieinander */
#myShop .sprd-basket-item__info__col > * { margin-bottom: 4px; }

/* Mengenwähler etwas von der Zeile darüber absetzen */
#myShop .sprd-basket-item .sprd-quantity-control { margin-top: 14px; }
#myShop .sprd-basket-item__price,
#myShop .sprd-basket__headline { color: var(--text) !important; }

/* Flächen dunkel halten */
#myShop [class*="sprd-"][class*="__panel"],
#myShop .sprd-teaser,
#myShop .sprd-box,
#myShop .sprd-basket-item,
#myShop .sprd-checkout-panel {
  background: var(--panel) !important;
  border: 1px solid var(--line);
}

/* Eingabefelder */
#myShop input, #myShop select, #myShop textarea {
  background: var(--ink-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  border-radius: var(--r);
}
#myShop input::placeholder, #myShop textarea::placeholder { color: var(--text-faint); }

/* Primärbuttons in Akzentfarbe */
#myShop .sprd-button--primary,
#myShop .btn-primary,
#myShop [class*="sprd-btn-primary"],
#myShop [class*="sprd-primary"],
#myShop button[class*="primary"],
#myShop .sprd-basket-checkout__button,
#myShop .sprd-basket-prices__promo__button {
  background: var(--acc) !important;
  border-color: var(--acc) !important;
  color: var(--on-acc) !important;
  border-radius: var(--r) !important;
  font-family: 'Oswald', sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}
#myShop .sprd-button--primary:hover,
#myShop [class*="sprd-btn-primary"]:hover,
#myShop .sprd-basket-checkout__button:hover,
#myShop button[class*="primary"]:hover {
  background: var(--acc-hot) !important;
  border-color: var(--acc-hot) !important;
}

/* Links im Widget */
#myShop a:hover { color: var(--acc); }

/* Trennlinien */
#myShop hr, #myShop [class*="divider"] { border-color: var(--line) !important; }

/* Der Cookie-Hinweis von Spreadshirt liegt außerhalb von #myShop und bringt
   eigene Farben mit (Schrift #333 – auf dunklem Grund nur 1,5:1). Angesprochen
   wird der äußerste Container, weil Banner und Einstellungsfenster darin
   liegen; die inneren Regeln von OneTrust sind sehr spezifisch. */
#onetrust-consent-sdk #onetrust-banner-sdk,
#onetrust-consent-sdk #onetrust-pc-sdk,
#onetrust-consent-sdk .ot-sdk-container {
  background: var(--panel) !important;
  border-color: var(--line) !important;
}
#onetrust-consent-sdk #onetrust-banner-sdk { border-top: 1px solid var(--line) !important; }

#onetrust-consent-sdk p,
#onetrust-consent-sdk div,
#onetrust-consent-sdk span,
#onetrust-consent-sdk h1,
#onetrust-consent-sdk h2,
#onetrust-consent-sdk h3,
#onetrust-consent-sdk li { color: var(--text) !important; }

/* OneTrust setzt seine Farben über sehr spezifische Regeln. Der Container-
   Selektor wird deshalb wiederholt – das erhöht die Spezifität, ohne dass wir
   die interne Struktur von OneTrust nachbauen müssen. */
#onetrust-consent-sdk#onetrust-consent-sdk#onetrust-consent-sdk a,
#onetrust-consent-sdk#onetrust-consent-sdk#onetrust-consent-sdk a span,
#onetrust-consent-sdk#onetrust-consent-sdk#onetrust-consent-sdk .ot-link-btn,
#onetrust-banner-sdk #onetrust-policy-text a,
#onetrust-pc-sdk .ot-link-btn { color: var(--acc-hot) !important; }

#onetrust-consent-sdk#onetrust-consent-sdk#onetrust-consent-sdk p,
#onetrust-consent-sdk#onetrust-consent-sdk#onetrust-consent-sdk span,
#onetrust-consent-sdk#onetrust-consent-sdk#onetrust-consent-sdk h1,
#onetrust-consent-sdk#onetrust-consent-sdk#onetrust-consent-sdk h2,
#onetrust-banner-sdk #onetrust-policy-text,
#onetrust-banner-sdk #onetrust-policy-title { color: var(--text) !important; }

/* Zustimmen-Schaltfläche in unserer Akzentfarbe, mit dunkler Schrift */
#onetrust-consent-sdk #onetrust-accept-btn-handler,
#onetrust-consent-sdk .save-preference-btn-handler,
#onetrust-consent-sdk .onetrust-close-btn-handler {
  background: var(--acc) !important;
  border-color: var(--acc) !important;
  color: var(--on-acc) !important;
}

/* Zweitrangige Schaltflächen ("Einstellungen") als Umriss */
#onetrust-consent-sdk#onetrust-consent-sdk #onetrust-pc-btn-handler,
#onetrust-consent-sdk#onetrust-consent-sdk #onetrust-reject-all-handler,
#onetrust-banner-sdk #onetrust-pc-btn-handler {
  background: transparent !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--text) !important;
}

/* ============================ INFO-SEITEN ================================ */

.page-head {
  padding: calc(var(--head) + var(--aktion-h) + 60px) 0 40px;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: '';
  position: absolute;
  top: -70%; left: 50%;
  width: min(800px, 120vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,106,26,.10), transparent 65%);
}
.page-head__inner { position: relative; z-index: 1; }

.prose { padding: clamp(44px, 6vw, 72px) 0 clamp(64px, 8vw, 100px); }
.prose .wrap { max-width: 780px; }
.prose h2 {
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  margin: 44px 0 14px;
  color: var(--text);
}
.prose h2:first-of-type { margin-top: 0; }
.prose h3 {
  font-size: 1rem;
  letter-spacing: .08em;
  margin: 28px 0 10px;
  color: var(--text);
}
.prose p, .prose li { color: var(--text-dim); }
.prose p { margin: 0 0 16px; }
.prose ul { padding-left: 20px; margin: 0 0 16px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--acc-hot); }
.prose strong { color: var(--text); }

/* Deutlich sichtbarer Hinweis auf Stellen, die noch auszufüllen sind */
.todo {
  display: block;
  background: rgba(255,106,26,.10);
  border: 1px dashed rgba(255,106,26,.55);
  border-radius: var(--r);
  padding: 14px 16px;
  margin: 0 0 18px;
  color: var(--acc-hot);
  font-size: 14px;
}
.todo strong { color: var(--acc-hot); }

.fill {
  background: rgba(255,106,26,.14);
  border-bottom: 1px dashed var(--acc);
  padding: 1px 5px;
  border-radius: 2px;
  color: var(--acc-hot);
  font-weight: 500;
}

/* ========================= EINGANGSANIMATION ==============================
   Erzählung in drei Schlägen:
   1. Der Raum ist dunkel.
   2. Die Werkstattlampe zündet stotternd wie eine alte Leuchtstoffröhre und
      wirft ihr Licht auf das Motorrad.
   3. Aus diesem Licht heraus schält sich die Schrift.
   Dazu eine langsame Kamerafahrt nach vorn.

   Alles hängt an der Klasse .bm-intro auf <html>, die nur beim ersten Aufruf
   je Sitzung gesetzt wird. Ohne sie ist die Seite ganz normal sichtbar –
   kein Inhalt hängt von einer Animation ab.
   ========================================================================= */

/* --- Lichtkegel der Lampe ---
   Nach dem Einschalten bleibt die Lampe an, zuckt aber gelegentlich – wie eine
   alte Werkstattleuchte mit Wackelkontakt. Der Takt ist bewusst krumm (23 s)
   und die Zucker sitzen an ungleichen Stellen, damit sich kein erkennbares
   Muster einstellt. */
.hero__lamp {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .85;
  animation: bm-lamp-unruhe 23s linear 3.2s infinite;
  background:
    radial-gradient(circle 34vw at 85% 61%,
      rgba(255,166,72,.26) 0%,
      rgba(255,120,34,.13) 30%,
      rgba(255,96,20,.04) 55%,
      transparent 74%);
  mix-blend-mode: plus-lighter;
}

/* --- Weißer Blitz beim Durchzünden --- */
.hero__flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 26vw at 85% 61%, rgba(255,204,150,.34), transparent 58%);
  mix-blend-mode: plus-lighter;
}

/* ------------------------------------------------------------------------ */
/*  Ablauf                                                                   */
/* ------------------------------------------------------------------------ */

/* Das Foto: erst fast schwarz, dann zuckt es im Takt der Lampe hoch. */
@keyframes bm-ignite {
  0%   { filter: brightness(.05) saturate(.35) contrast(1.1); }
  9%   { filter: brightness(.05) saturate(.35) contrast(1.1); }
  11%  { filter: brightness(.55) saturate(.75) contrast(1.05); }
  13%  { filter: brightness(.07) saturate(.4)  contrast(1.1); }
  19%  { filter: brightness(.80) saturate(.9)  contrast(1); }
  21%  { filter: brightness(.06) saturate(.4)  contrast(1.1); }
  27%  { filter: brightness(.40) saturate(.8)  contrast(1); }
  30%  { filter: brightness(.09) saturate(.45) contrast(1.05); }
  38%  { filter: brightness(1.18) saturate(1.08) contrast(.98); }  /* zündet durch */
  46%  { filter: brightness(.88) saturate(1) contrast(1); }
  60%  { filter: brightness(1.06) saturate(1) contrast(1); }
  78%  { filter: brightness(.97) saturate(1) contrast(1); }
  100% { filter: brightness(1) saturate(1) contrast(1); }
}

/* Kamerafahrt: kaum merklich, gibt der Szene Tiefe. */
@keyframes bm-push {
  from { transform: scale(1.09); }
  to   { transform: scale(1); }
}

/* Der Lichtkegel flackert im selben Takt. */
@keyframes bm-lamp {
  0%, 9% { opacity: 0; }
  11%    { opacity: .5; }
  13%    { opacity: .04; }
  19%    { opacity: .85; }
  21%    { opacity: .03; }
  27%    { opacity: .42; }
  30%    { opacity: .07; }
  38%    { opacity: 1; }
  46%    { opacity: .78; }
  60%    { opacity: .95; }
  78%    { opacity: .82; }
  100%   { opacity: .85; }
}

/* Der Blitz sitzt genau auf dem Durchzünden. */
@keyframes bm-flash {
  0%, 35% { opacity: 0; }
  38%     { opacity: 1; }
  44%     { opacity: .25; }
  56%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* Die Zeilen lösen sich aus der Unschärfe – als träte man aus dem Dunkeln. */
@keyframes bm-rise {
  from { opacity: 0; transform: translateY(20px); filter: blur(9px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}

/* Die orange Zeile glüht kurz auf, als hätte sie das Lampenlicht gefangen. */
@keyframes bm-rise-glow {
  0%   { opacity: 0; transform: translateY(20px);
         filter: blur(10px) drop-shadow(0 0 0 transparent); }
  55%  { opacity: 1; transform: translateY(-2px);
         filter: blur(0) drop-shadow(0 0 42px var(--acc)); }
  100% { opacity: 1; transform: none;
         filter: blur(0) drop-shadow(0 0 26px var(--acc-glow)); }
}

/* Kopfzeile und Laufband kommen zuletzt und leise dazu. */
@keyframes bm-drop {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bm-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ------------------------------------------------------------------------ */

.bm-intro .hero__img {
  animation:
    bm-ignite 2.6s steps(60, end) both,    /* harte Sprünge = elektrisches Zucken */
    bm-push   4.2s var(--ease-out) both;
}
.bm-intro .hero__lamp  { animation: bm-lamp  2.6s steps(60, end) both; }
.bm-intro .hero__flash { animation: bm-flash 2.6s ease-out both; }

/* Grid und Grundglühen erst nach dem Zünden dazunehmen */
.bm-intro .hero__grid,
.bm-intro .hero__glow { animation: bm-fade 1.6s ease-out 1.1s both; }

/* Schrift: gestaffelt, beginnend kurz nach dem Durchzünden (≈1,0 s) */
.bm-intro .hero .eyebrow      { animation: bm-rise      .9s var(--ease-out) 1.05s both; }
.bm-intro .hero__logo         { animation: bm-rise-glow 1.3s var(--ease-out) 1.20s both; }
.bm-intro .hero .lead         { animation: bm-rise      .9s var(--ease-out) 1.62s both; }
.bm-intro .hero__actions      { animation: bm-rise      .9s var(--ease-out) 1.78s both; }
.bm-intro .hero__scroll       { animation: bm-fade      1.2s ease-out 2.30s both; }

.bm-intro .header             { animation: bm-drop .9s var(--ease-out) 1.9s both; }
.bm-intro .ticker             { animation: bm-fade 1.2s ease-out 2.1s both; }

/* Jeder weitere Aufruf in derselben Sitzung (.bm-kurz): statt der großen
   Werkstatt-Szene nur eine kurze, schlichte Einblendung der Schrift. Ohne
   Unschärfe-Filter, nur Deckkraft und `translate` (die Schräglage der
   Eyebrow sitzt auf `rotate` und bleibt erhalten). Foto und Lampe laufen
   unverändert weiter. */
@keyframes bm-kurz-hoch {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}
.bm-kurz .hero .eyebrow   { animation: bm-kurz-hoch .6s var(--ease-out) .05s both; }
.bm-kurz .hero__logo      { animation: bm-kurz-hoch .7s var(--ease-out) .15s both; }
.bm-kurz .hero .lead      { animation: bm-kurz-hoch .6s var(--ease-out) .3s  both; }
.bm-kurz .hero__actions   { animation: bm-kurz-hoch .6s var(--ease-out) .38s both; }
.bm-kurz .hero__scroll    { animation: bm-fade      .8s ease-out .6s both; }

/* Wer die Animation abbricht (Scrollen, Klick, Taste), sieht sofort alles.
   Foto und Lampe sind hier ausgenommen: sie wechseln stattdessen direkt in
   das ruhige Zucken, damit die Werkstattleuchte weiterlebt. */
.bm-intro.bm-intro--fertig .hero__img {
  animation: bm-bild-unruhe 23s linear 1.2s infinite !important;
}
.bm-intro.bm-intro--fertig .hero__lamp {
  animation: bm-lamp-unruhe 23s linear 1.2s infinite !important;
}

.bm-intro.bm-intro--fertig .hero__flash,
.bm-intro.bm-intro--fertig .hero__grid,
.bm-intro.bm-intro--fertig .hero__glow,
.bm-intro.bm-intro--fertig .hero .eyebrow,
.bm-intro.bm-intro--fertig .hero h1 .chrome,
.bm-intro.bm-intro--fertig .hero h1 .accent,
.bm-intro.bm-intro--fertig .hero .lead,
.bm-intro.bm-intro--fertig .hero__actions,
.bm-intro.bm-intro--fertig .hero__scroll,
.bm-intro.bm-intro--fertig .header,
.bm-intro.bm-intro--fertig .ticker {
  animation: none !important;
}
.bm-intro.bm-intro--fertig .hero__flash { opacity: 0; }

/* Sicherheitsnetz: Wer keine Bewegung möchte, bekommt die fertige Seite. */
@media (prefers-reduced-motion: reduce) {
  .bm-intro .hero__img,
  .bm-intro .hero__lamp,
  .bm-intro .hero__flash,
  .bm-intro .hero .eyebrow,
  .bm-intro .hero h1 .chrome,
  .bm-intro .hero h1 .accent,
  .bm-intro .hero .lead,
  .bm-intro .hero__actions,
  .bm-intro .header,
  .bm-intro .ticker { animation: none !important; }
  .bm-intro .hero__flash { opacity: 0; }
}

/* Unregelmäßiges Zucken im Ruhezustand.
   Die Werte liegen dicht beieinander – es soll auffallen, ohne zu blinken. */
@keyframes bm-lamp-unruhe {
  0%, 11%   { opacity: .85; }
  11.6%     { opacity: .55; }
  12.1%     { opacity: .88; }
  12.5%     { opacity: .62; }
  13.2%     { opacity: .85; }

  38%       { opacity: .85; }
  38.4%     { opacity: .48; }
  38.9%     { opacity: .86; }

  61%       { opacity: .85; }
  61.5%     { opacity: .66; }
  61.9%     { opacity: .84; }
  62.4%     { opacity: .50; }
  63.1%     { opacity: .87; }
  63.6%     { opacity: .85; }

  86%       { opacity: .85; }
  86.5%     { opacity: .58; }
  87.1%     { opacity: .85; }
  100%      { opacity: .85; }
}

/* Das Foto zuckt ganz leicht mit, sonst wirkt das Licht losgelöst vom Raum. */
@keyframes bm-bild-unruhe {
  0%, 11%   { filter: brightness(1); }
  11.6%     { filter: brightness(.93); }
  12.1%     { filter: brightness(1.01); }
  12.5%     { filter: brightness(.95); }
  13.2%     { filter: brightness(1); }

  38%       { filter: brightness(1); }
  38.4%     { filter: brightness(.91); }
  38.9%     { filter: brightness(1); }

  61%       { filter: brightness(1); }
  61.5%     { filter: brightness(.96); }
  62.4%     { filter: brightness(.92); }
  63.1%     { filter: brightness(1.01); }
  63.6%     { filter: brightness(1); }

  86%       { filter: brightness(1); }
  86.5%     { filter: brightness(.94); }
  87.1%     { filter: brightness(1); }
  100%      { filter: brightness(1); }
}

/* Erst nachdem die Eingangsanimation durch ist, übernimmt das ruhige Zucken. */
.hero__img { animation: bm-bild-unruhe 23s linear 3.2s infinite; }
.bm-intro .hero__img {
  animation:
    bm-ignite 2.6s steps(60, end) both,
    bm-push   4.2s var(--ease-out) both,
    bm-bild-unruhe 23s linear 4.4s infinite;
}
.bm-intro .hero__lamp {
  animation:
    bm-lamp 2.6s steps(60, end) both,
    bm-lamp-unruhe 23s linear 4.4s infinite;
}

/* --- Eingebetteter Shop anderer Plattformen ---
   Der Shop kommt im Standarddesign des Anbieters. Umstylen lässt er sich in
   einem fremden Rahmen nicht – deshalb läuft er über die volle Seitenbreite
   und wird oben und unten durch eine Linie abgesetzt. Das wirkt wie ein
   eigener Abschnitt statt wie ein Fremdkörper im Inhaltsbereich. */
.shop-frame { margin-top: 4px; }

.shop-frame__iframe {
  display: block;
  width: 100%;
  /* Fast bildschirmfüllend. Der schmale Rest unten ist Absicht: Ein Rahmen
     über die volle Höhe fängt das Scrollen ab, und man käme nicht mehr an die
     Fußzeile. So bleibt immer ein Streifen der Seite greifbar. */
  height: 92vh;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: #fff;              /* der fremde Shop ist hell */
}

/* --- Auf Seiten mit eingebettetem Fremd-Shop ---------------------------
   Der Rahmen bringt eigenen Warenkorb und eigene Navigation mit. Was dadurch
   doppelt wäre, tritt hier zurück. Gilt nur auf dieser Seite. */

/* Warenkorb: unserer wüsste nichts von dem, was im Rahmen gekauft wird */
.hat-fremdshop .cart-btn { display: none; }

/* Die Kopfzeile bleibt hier nicht oben kleben, sondern scrollt weg. Dadurch
   steht dem Shop nach kurzem Scrollen der ganze Bildschirm zur Verfügung. */
.hat-fremdshop .header {
  position: absolute;
  height: 78px;
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hat-fremdshop .header .logo__img { height: 42px; }

/* Seitenkopf und Hinweistext entfallen hier ganz: Der eingebettete Shop
   bringt eigene Überschriften mit, und je weniger darüber steht, desto mehr
   Platz bleibt ihm. Übrig bleibt nur das Menü. */
.hat-fremdshop .shop-head { display: none; }

/* Der eigene Preishinweis entfällt hier ebenfalls: Der eingebettete Shop
   nennt seine Preisangaben selbst, und "inkl. MwSt." träfe auf der
   amerikanischen Plattform ohnehin nicht zu. */
.hat-fremdshop .price-note { display: none; }

/* Ohne Startseite ergeben Menüpunkte wie "Start", "Motive" oder "Story" keinen
   Sinn – sie führen auf Inhalte, die es für diese Länder nicht gibt. Oben
   bleiben deshalb nur Logo und Länderauswahl. */
.hat-fremdshop .header__nav,
.hat-fremdshop .burger,
.hat-fremdshop .mobile-nav { display: none; }

/* Ohne Menü fehlt der Abstandshalter, der die Länderauswahl sonst nach rechts
   schiebt – sie klebte sonst am Logo. */
.hat-fremdshop .header__tools { margin-left: auto; }

/* In der Fußzeile entfällt die Spalte mit den internen Verweisen */
.hat-fremdshop .footer__shop-links { display: none; }

/* Der Shop beginnt direkt unter dem Menü */
.hat-fremdshop .shop-area { padding-top: 78px; padding-bottom: 0; }
.hat-fremdshop .shop-frame { margin-top: 0; }
.hat-fremdshop .shop-frame__iframe { border-top: 0; }

/* ========================= EINWILLIGUNG =================================
   Erscheint unten und lässt die Seite sichtbar – niemand wird ausgesperrt.
   Beide Antworten sind gleich gut erreichbar; die Ablehnung ist kein
   versteckter Kleinsttext. */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: rgba(13,13,16,.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -12px 40px rgba(0,0,0,.5);
  transform: translateY(100%);
  transition: transform .5s var(--ease-out);
}
.consent.is-open { transform: none; }

.consent__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: clamp(18px, 4vw, 48px);
}

.consent__title {
  font-size: 15px;
  letter-spacing: .12em;
  margin: 0 0 6px;
  color: var(--text);
}
.consent__text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 74ch;
}

.consent__actions {
  display: flex;
  gap: 12px;
  flex: none;
}
.consent__actions .btn { padding: 14px 24px; font-size: 13px; }

@media (max-width: 820px) {
  .consent__inner { flex-direction: column; align-items: stretch; gap: 18px; padding: 20px; }
  .consent__actions { flex-direction: column-reverse; }
  .consent__actions .btn { width: 100%; }
}

/* Platzhalter dort, wo sonst die Produkte stehen */
.consent-block p { max-width: 46ch; margin: 0 auto 20px; }

/* Pflichtangabe zu den Preisen – muss in der Nähe der Preise stehen */
.price-note {
  margin: 22px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-faint);
}
/* Im Shop sitzt der Hinweis direkt unter dem Produktraster */
.shop-area .price-note { margin: 26px 0 0; }

/* ============================ 8  MOTION ================================== */

/* Elemente fahren beim Scrollen ein */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .09s; }
[data-reveal-delay="2"] { transition-delay: .18s; }
[data-reveal-delay="3"] { transition-delay: .27s; }
[data-reveal-delay="4"] { transition-delay: .36s; }

body.is-locked { overflow: hidden; }

/* ============================ RESPONSIVE ================================= */

@media (max-width: 1000px) {
  .story { grid-template-columns: 1fr; }
  .story__visual { max-width: 460px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 820px) {
  :root { --head: 62px; }
  .header__nav { display: none; }
  .burger { display: flex; }
  .country { order: 2; }
  .country__current { display: none; }        /* auf dem Handy nur das Symbol */
  .country__toggle { padding: 9px 10px; }
  .country__list { width: min(78vw, 260px); }
  .header__inner { gap: 12px; }
  .header__tools { margin-left: auto; gap: 10px; }
  .logo__img { height: 36px; }
  /* sonst gewinnt die spätere Regel für den angehefteten Kopf */
  .header.is-stuck .logo__img { height: 30px; }
  /* Der Scroll-Hinweis ("Mehr entdecken") hängt absolut am unteren Rand,
     der Inhalt steht mittig und wächst ihm auf kurzen Displays entgegen.
     Gemessen: bei 375x667 lag er 38 px IM Knopf "Unsere Story", bei 360x640
     22 px. Deshalb hier seinen Platz freihalten und die Linie kürzen. */
  .hero { min-height: 88svh; padding-bottom: 116px; }
  .hero__scroll { bottom: 22px; gap: 6px; }
  .hero__scroll::after { height: 34px; }

  /* Auf schmalen Geräten wird das Foto stark beschnitten – der Bildausschnitt
     wandert Richtung Motorrad und die dunkle Fläche wird kräftiger, damit die
     Schrift auch über dem Foto trägt. */
  /* Das Motorrad steht im Foto zwischen 59 % und 91 % der Bildbreite. Am
     Handy ist der sichtbare Ausschnitt nur rund 30 % breit – bei 72 % lag er
     auf 51–80 % und schnitt die ganze vordere Hälfte (Tank, Lenker, Lampe)
     weg. Bei 85 % liegt er auf 60–89 %, das Motorrad ist also fast vollständig
     im Bild. */
  .hero__img { object-position: 85% center; opacity: .88; }
  .hero__vignette {
    background:
      /* Links kräftig, damit die Schrift trägt – nach rechts deutlich offener,
         sonst verschwindet das Motorrad wieder im Dunkeln. */
      linear-gradient(90deg, rgba(8,8,10,.93) 0%, rgba(8,8,10,.72) 55%, rgba(8,8,10,.34) 100%),
      linear-gradient(180deg, rgba(8,8,10,.85) 0%, transparent 26%, transparent 55%, var(--ink) 100%);
  }
  .hero__text { max-width: none; }
  /* Am Handy darf die Wortmarke die Breite nutzen – sie steht hier an Stelle
     der grossen Überschrift und wirkte mit 44vw verloren. */
  .hero__logo img { width: min(86vw, 460px); }
  .hero__logo { margin-bottom: 24px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
  /* Im Shop dieselben Maße wie die Produktkacheln – auch am Handy */
  .designs--shop { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
  .designs--shop .design__label { padding: 12px; }
  .designs--shop .design__count { font-size: 11px; letter-spacing: .1em; }
  .designs--shop .design img { padding: 8% 8% 22%; }
  .card__body { padding: 14px; }
  .card__name { font-size: 14px; }
  .card__price { font-size: 16px; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .story__product { right: 0; bottom: -16px; width: 38%; }

  /* Auf schmalen Telefonen passen Wortmarke, Sprachwahl, Warenkorb und
     Menüknopf sonst nicht nebeneinander – alles eine Spur kleiner. */
  .header__inner { padding: 0 16px; gap: 8px; }
  .header__tools { gap: 8px; }
  .logo__img { height: 30px; }
  .header.is-stuck .logo__img { height: 26px; }
  .country__toggle { padding: 8px 9px; }
  .cart-btn, .burger { width: 38px; height: 38px; }
  .cart-btn svg { width: 17px; height: 17px; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .stats { grid-template-columns: 1fr; }
}

/* Bewegungsempfindlichkeit respektieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   9  WERKSTATT-LOOK
   --------------------------------------------------------------------------
   Rauerer Auftritt für Biker-Klamotten: Absperrband, Blechschilder mit Nieten
   und Schablonennummern, Klebestreifen, Stempel, eingerissene Kanten.

   Bewusst OHNE Staub- und Abnutzungs-Texturen. Eine erste Fassung legte
   SVG-Rauschfilter als Masken über Schrift, Schilder, Band und Karten, dazu
   eine gröbere Körnung über die ganze Seite. Das machte die Seite spürbar
   weniger flüssig – Hover-Animationen hakten und das Laden wirkte zäh – und
   ist deshalb vollständig wieder entfernt. Wer so etwas neu versucht: keine
   Masken auf Elemente legen, die sich bewegen oder beim Überfahren ändern.
   ========================================================================== */

:root {
  --blech: linear-gradient(160deg, #1d1d22 0%, #141417 55%, #1a1917 100%);
  /* eingerissene Kante, unten ausgefranst – einfacher Pfad, kein Filter */
  --riss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v22l-18 6-22-9-31 12-17-8-26 10-40-7-19 9-33-11-21 8-29-6-24 10-37-9-18 7-31-5-26 11-22-8-35 9-19-6-28 10-33-12-20 7-26-5-38 11-17-9-29 8-24-6-31 10-22-7-36 9-18-11-27 8-32-5-21 10-34-9-19 6-26-8-37 11-23-7-28 9-16-6-33 8-25-10-30 7-21-6-39 11-18-8-27 9-34-7-20 10-29-9-23 6-35 8-17-10-31 9-26-7-22 8-38-6-19 10-24-9-12 6V0z'/%3E%3C/svg%3E");
}

/* Schräglagen stehen durchgehend in `rotate`, nie in `transform`: Die
   Eingangsanimation bewegt Hero-Elemente mit `transform` und würde eine
   Schräglage dort überschreiben – das Etikett stand sonst während der
   Animation gerade und sprang danach schlagartig schräg. */

/* --- Etikett im Hero --- */
.eyebrow { font-weight: 600; letter-spacing: .28em; }
.hero .eyebrow {
  display: inline-flex;
  padding: 6px 12px 5px;
  border: 1.5px solid var(--acc);
  color: var(--acc);
  rotate: -1.5deg;
}
.hero .eyebrow::before { display: none; }

/* --- Knöpfe: kantig, Zweitknopf gestrichelt --- */
.btn {
  border-radius: 0;
  clip-path: polygon(0 4px, 6px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 6px) 100%, 0 100%);
  letter-spacing: .2em;
}
.btn--ghost {
  border: 1.5px dashed rgba(255,255,255,.35);
  clip-path: none;
}
.btn--ghost:hover { border-color: var(--acc); color: var(--acc); }

/* --- Absperrband statt ruhiger Leiste --- */
.tape-stage {
  position: relative;
  height: 150px;
  overflow: hidden;
  margin: -40px 0 -30px;
  z-index: 3;
  pointer-events: none;
}
.ticker--tape {
  position: absolute;
  left: -5%; width: 110%;
  top: 44px;
  background:
    repeating-linear-gradient(-45deg, transparent 0 22px, rgba(0,0,0,.09) 22px 44px),
    var(--acc);
  border: 0;
  border-block: 3px solid #1a1108;
  padding: 11px 0;
  rotate: -2.4deg;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
.ticker--tape .ticker__row { animation-duration: 42s; }
.ticker--tape span {
  color: #120c06;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .3em;
}
.ticker--tape span::after { background: #120c06; width: 7px; height: 7px; }
.ticker--back {
  top: 60px;
  rotate: 3deg;
  background:
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(255,255,255,.04) 22px 44px),
    #17140f;
  border-block-color: #2a2217;
  z-index: -1;
}
.ticker--back span { color: rgba(255,255,255,.28); }
.ticker--back span::after { background: var(--acc); }
.ticker--back .ticker__row { animation-direction: reverse; animation-duration: 55s; }

/* --- Eingerissene Kante am oberen Rand eines Abschnitts --- */
.riss {
  position: absolute;
  left: 0; right: 0;
  height: 28px;
  z-index: 2;
  pointer-events: none;
}
.riss--oben {
  top: -1px;
  background: var(--ink);
  -webkit-mask: var(--riss) center top / 100% 100% no-repeat;
  mask: var(--riss) center top / 100% 100% no-repeat;
}

/* --- Vertrauensbereich --- */
.section--trust {
  border-top: 0;
  background:
    radial-gradient(ellipse 30% 40% at 90% 10%, rgba(255,106,26,.07), transparent 70%),
    #101012;
}

/* --- Blechschilder mit Nieten --- */
.usps {
  gap: 18px;
  background: none;
  border: 0;
}
.usp {
  background: var(--blech);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.45);
  padding: 44px 28px 32px;
  overflow: hidden;
}
.usp::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12px 12px, #6d6d74 0 2.6px, #2a2a2f 3.2px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) 12px, #6d6d74 0 2.6px, #2a2a2f 3.2px, transparent 4px),
    radial-gradient(circle at 12px calc(100% - 12px), #6d6d74 0 2.6px, #2a2a2f 3.2px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #6d6d74 0 2.6px, #2a2a2f 3.2px, transparent 4px);
}
/* Beim Überfahren nur Farbe der Kante ändern – kein Hintergrundwechsel */
.usp:hover { background: var(--blech); border-color: rgba(255,106,26,.45); }
.usp__nr {
  position: absolute;
  top: 14px; right: 34px;
  font-family: 'Oswald', sans-serif;
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.12);
  letter-spacing: .02em;
}
.usp h3 { font-size: 17px; letter-spacing: .08em; }

/* --- Live-Angaben aus dem Shop --- */
.trust {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.07);
  border: 1px dashed rgba(255,255,255,.14);
}
.trust__group {
  background: #0e0e10;
  padding: 26px 24px;
}
.trust__title {
  font-size: 11px;
  letter-spacing: .26em;
  color: var(--acc);
  margin-bottom: 14px;
}
.trust__badges {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.badge {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  letter-spacing: .06em;
  padding: 6px 11px 5px;
  color: var(--text);
  background: #1b1b20;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.35);
}
.trust__lines { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.trust__zeile { font-size: 15px; color: var(--text); }
.trust__tel,
.trust__insta {
  font-family: 'Oswald', sans-serif;
  font-size: 19px;
  letter-spacing: .04em;
  color: var(--text);
  transition: color .25s;
}
.trust__tel:hover,
.trust__insta:hover { color: var(--acc); }

/* --- Produktkacheln: Blech --- */
.card {
  background: var(--blech);
  border-color: rgba(255,255,255,.09);
}
.card__media {
  background:
    radial-gradient(ellipse 70% 55% at 50% 60%, rgba(255,106,26,.08), transparent 70%),
    linear-gradient(160deg, #1c1c21, #121215);
}
.card__body { border-top: 1px dashed rgba(255,255,255,.12); }
.card__name { letter-spacing: .05em; }

/* --- Motivkacheln --- */
.design {
  background: var(--blech);
  border-color: rgba(255,255,255,.09);
}

/* --- Story: Foto mit Klebeband und Stempel --- */
.story__photo { rotate: 1.2deg; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.story__photo img { filter: contrast(1.08) saturate(.9); }
.tape {
  position: absolute;
  z-index: 3;
  width: 120px; height: 30px;
  background: rgba(214,196,160,.72);
  box-shadow: 0 3px 6px rgba(0,0,0,.4);
}
.tape--links  { top: -12px; left: -22px;  rotate: -32deg; }
.tape--rechts { top: -8px;  right: -26px; rotate: 28deg; }
.stamp {
  position: absolute;
  z-index: 3;
  left: -26px; bottom: 34px;
  padding: 10px 16px 8px;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acc);
  border: 3px double var(--acc);
  rotate: -9deg;
  background: rgba(8,8,10,.35);
}

.stats { gap: 12px; background: none; border: 0; }
.stat { background: var(--blech); border: 1px solid rgba(255,255,255,.08); }

/* --- Schluss: rauer Übergang --- */
.cta { border-top: 0; }
.cta .riss--oben { z-index: 4; }

@media (max-width: 820px) {
  .tape-stage { height: 120px; margin: -30px 0 -24px; }
  .ticker--tape { top: 36px; }
  .ticker--back { top: 50px; }
  .ticker--tape span { font-size: 13px; }
  .stamp { left: 8px; font-size: 16px; }
  .tape--links { left: -8px; }
  .tape--rechts { right: -8px; }
  .usp__nr { font-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker--tape .ticker__row { animation: none; }
}

/* ==========================================================================
   10  EINGANGSANIMATION DER SHOP-SEITE
   --------------------------------------------------------------------------
   Vorher erschien die Shop-Seite schlagartig: Kreisel, dann springt das
   Widget in voller Pracht herein. Jetzt:
     1. Das Kopffoto blendet mit einer leichten Kamerafahrt ein.
     2. Die Überschrift steigt auf, darunter zieht ein oranger Strich auf.
     3. Statt des Kreisels läuft ein schmaler Balken.
     4. Sobald das Widget steht, blendet es ein, und die Produktkacheln
        kommen nacheinander von unten.

   Bewegt werden ausschliesslich Deckkraft, `translate` und `scale` – keine
   Filter, keine Masken, keine Mischebenen (siehe Abschnitt 9: das hat die
   Seite schon einmal ausgebremst). Die Kacheln bewegen sich über `translate`,
   weil das Widget sie beim Überfahren mit `transform` anhebt; die beiden
   Eigenschaften setzen sich zusammen, statt sich zu überschreiben.

   Gesteuert über zwei Klassen auf <html>:
     .shop-intro        gesetzt im Kopf von shop.html, vor dem ersten Zeichnen
     .shop-intro--los   gesetzt, sobald das Widget Inhalt hat
   Beide werden nach der Animation entfernt. Ein Sicherheitsnetz im Kopf
   nimmt sie spätestens nach 8 s weg, damit nie etwas unsichtbar bleibt.
   ========================================================================== */

@keyframes shop-bild {
  from { opacity: 0;   scale: 1.08; }
  to   { opacity: .85; scale: 1; }
}
@keyframes shop-hoch {
  from { opacity: 0; translate: 0 18px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes shop-strich {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}
@keyframes shop-auf {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shop-kachel {
  from { opacity: 0; translate: 0 28px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes shop-balken {
  from { translate: -100% 0; }
  to   { translate: 260% 0; }
}

/* --- Kopf --- */
.shop-head__title::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin: 14px auto 0;
  background: var(--acc);
  transform-origin: center;
}
.shop-intro .shop-head__bg img { animation: shop-bild 1.6s var(--ease-out) both; }
.shop-intro .shop-head__title  { animation: shop-hoch .9s var(--ease-out) .2s both; }
.shop-intro .shop-head__title::after { animation: shop-strich .7s var(--ease-out) .65s both; }

/* --- Ladeanzeige: Balken statt Kreisel --- */
.shop-loading .spinner {
  width: 160px;
  height: 2px;
  border: 0;
  border-radius: 0;
  background: var(--line);
  overflow: hidden;
  position: relative;
  animation: none;
}
.shop-loading .spinner::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--acc);
  animation: shop-balken 1.1s var(--ease) infinite;
}
.shop-intro .shop-loading { animation: shop-auf .5s ease-out .35s both; }

/* --- Widget: erst verborgen, dann gestaffelt --- */
.shop-intro:not(.shop-intro--los) #myShop .SprdMain,
.shop-intro:not(.shop-intro--los) #myShop .sprd-product-list-item { opacity: 0; }

.shop-intro--los #myShop .SprdMain { animation: shop-auf .5s ease-out both; }
.shop-intro--los #myShop .sprd-product-list-item {
  animation: shop-kachel .75s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 75ms + 120ms);
}

@media (prefers-reduced-motion: reduce) {
  .shop-intro .shop-head__bg img,
  .shop-intro .shop-head__title,
  .shop-intro .shop-head__title::after,
  .shop-intro .shop-loading,
  .shop-intro--los #myShop .SprdMain,
  .shop-intro--los #myShop .sprd-product-list-item { animation: none !important; }
  .shop-intro #myShop .SprdMain,
  .shop-intro #myShop .sprd-product-list-item { opacity: 1 !important; }
}

/* ==========================================================================
   11. PRODUKTSEITE – EINGANGSANIMATION
   --------------------------------------------------------------------------
   Klickt man ein Produkt an, setzt main.js (detailIntro) für 1,9 s die Klasse
   .detail-intro auf #myShop:
     1. Das Produktbild zieht leicht von links heran und wird scharf gezoomt.
     2. Name, Preis, Warenkorb-Knopf, Farben, Größen und Text kommen nacheinander
        von unten (Reihenfolge über --i, von main.js gesetzt).
     3. Produktbeschreibung und Motiv-Details darunter blenden zuletzt ein.
   Wie in Abschnitt 10: nur Deckkraft, `translate` und `scale`.
   ========================================================================== */

@keyframes detail-bild {
  from { opacity: 0; translate: -28px 0; scale: 1.04; }
  to   { opacity: 1; translate: 0 0;     scale: 1; }
}

#myShop.detail-intro .sprd-detail-images {
  animation: detail-bild .9s var(--ease-out) both;
}
#myShop.detail-intro .sprd-detail-mobile-caption,
#myShop.detail-intro .sprd-detail-info > :not(meta) {
  animation: shop-kachel .7s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms + 150ms);
}
#myShop.detail-intro .sprd-detail-product-type,
#myShop.detail-intro .sprd-detail-columns {
  animation: shop-kachel .8s var(--ease-out) .7s both;
}

/* --- Warenkorb ---
   Artikel, Preisblock, Kasse und Zahlarten kommen nacheinander von unten.
   Bewegt werden nur diese Blätter, nie .sprd-basket__content oder <main>:
   eine Verschiebung am Elternteil würde die klebende Kassen-Box
   (.sprd-basket-checkout--stuck) aus ihrer Position lösen. */
#myShop.korb-intro .sprd-basket-item,
#myShop.korb-intro .sprd-basket-empty__text,
#myShop.korb-intro .sprd-basket-empty__button,
#myShop.korb-intro .sprd-basket-prices,
#myShop.korb-intro .sprd-basket-checkout,
#myShop.korb-intro .sprd-basket__payment {
  animation: shop-kachel .7s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 90ms + 100ms);
}

/* --- Rückkehr in die Produktliste --- */
#myShop.liste-intro .sprd-product-list-item {
  animation: shop-kachel .6s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 55ms + 60ms);
}

@media (prefers-reduced-motion: reduce) {
  #myShop.detail-intro *,
  #myShop.korb-intro *,
  #myShop.liste-intro * { animation: none !important; }
}

/* ==========================================================================
   12. AKTIONSBANNER
   --------------------------------------------------------------------------
   Schmaler Streifen über dem Seitenkopf. Inhalt live aus dem Spreadshop
   (initAktion in main.js). Nur mit laufender Aktion sichtbar: dann setzt
   main.js .hat-aktion auf <html>, --aktion-h wird zur Streifenhöhe, und
   Kopf sowie alle Abstände, die sich an --head orientieren, rücken nach unten.
   ========================================================================== */
.hat-aktion { --aktion-h: 38px; }

.aktion {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 101;
  height: var(--aktion-h);
  background: linear-gradient(90deg, var(--acc-deep), var(--acc));
  color: #fff;
  font-size: .82rem;
}
.aktion__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-inline: 16px;
  white-space: nowrap;
}
.aktion__dringend { opacity: .9; }
.aktion__text {
  font-weight: 700;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aktion__btn,
.aktion__info {
  flex: none;
  padding: 5px 12px;
  font-family: inherit;
  font-weight: 600;
  font-size: .72rem;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.4);
  cursor: pointer;
  transition: background .2s var(--ease);
}
.aktion__btn:hover:not(:disabled),
.aktion__info:hover { background: rgba(0,0,0,.45); }
.aktion__btn:disabled { cursor: default; opacity: .85; }
.aktion__btn:disabled::before { content: '✓ '; }
.aktion__info { background: transparent; }
.aktion__btn:focus-visible,
.aktion__info:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.aktion__details {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  width: min(420px, calc(100vw - 32px));
  padding: 14px 18px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-soft);
  font-size: .85rem;
  text-align: center;
}
.aktion__details p { margin: 0 0 6px; }
.aktion__details p:last-child { margin-bottom: 0; }
.aktion__details code {
  padding: 1px 6px;
  background: rgba(255,255,255,.08);
  color: var(--acc-hot);
  font-size: .9em;
}
@media (max-width: 600px) {
  .aktion { font-size: .76rem; }
  .aktion__inner { gap: 8px; }
  .aktion__dringend,
  .aktion__info { display: none; }
}

/* ==========================================================================
   13. HÄUFIGE FRAGEN
   Antworten live aus dem Hilfe-Center (initFaq in main.js). Aufklappen über
   <details> – ohne JavaScript bedienbar, ohne Animation am Inhalt.
   ========================================================================== */
.faq {
  max-width: 820px;
  margin-inline: auto;
}
.faq__status { color: var(--text-dim); text-align: center; }
.faq__status a { color: var(--acc); }
.faq__gruppe + .faq__gruppe { margin-top: 44px; }
.faq__gruppe-titel {
  margin: 0 0 12px;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acc);
}
.faq__eintrag { border-bottom: 1px solid var(--line); }
.faq__eintrag:first-of-type { border-top: 1px solid var(--line); }
.faq__frage {
  position: relative;
  padding: 18px 44px 18px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--text);
  transition: color .2s var(--ease);
}
.faq__frage::-webkit-details-marker { display: none; }
.faq__frage::after {
  content: '+';
  position: absolute;
  right: 6px; top: 50%;
  translate: 0 -50%;
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--text-dim);
  transition: rotate .25s var(--ease), color .2s var(--ease);
}
.faq__frage:hover,
.faq__eintrag[open] .faq__frage { color: var(--acc); }
.faq__eintrag[open] .faq__frage::after { rotate: 45deg; color: var(--acc); }
.faq__frage:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; }
.faq__antwort {
  padding: 0 0 22px;
  color: var(--text-dim);
  font-size: .95rem;
  line-height: 1.7;
}
.faq__antwort h2, .faq__antwort h3, .faq__antwort h4 {
  margin: 18px 0 6px;
  font-size: 1rem;
  color: var(--text);
}
.faq__antwort p, .faq__antwort ul, .faq__antwort ol { margin: 0 0 10px; }
.faq__antwort ul, .faq__antwort ol { padding-left: 1.2em; }
.faq__antwort a { color: var(--acc); }
.faq__antwort table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: .85rem;
}
.faq__antwort td, .faq__antwort th {
  padding: 6px 10px;
  border: 1px solid var(--line);
  text-align: left;
}
.faq__mehr { margin-top: 14px !important; font-size: .85rem; }

/* ==========================================================================
   14. PRODUKTBEWERTUNGEN (Widget)
   Das Widget blendet seinen Bewertungsblock selbst ein, sobald es für ein
   Produkt Bewertungen gibt. Hier nur die Anpassung ans dunkle Design –
   Klassen aus dem Widget-Bundle (sprd-customer-reviews, sprd-star-*).
   ========================================================================== */
#myShop .sprd-customer-reviews {
  color: var(--text);
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 32px;
}
#myShop .sprd-customer-reviews__sub-title,
#myShop .sprd-customer-reviews__disclaimer,
#myShop .sprd-customer-reviews__sort-title,
#myShop .sprd-customer-reviews__histogram-count,
#myShop .sprd-customer-reviews__pagination-text { color: var(--text-dim) !important; }
#myShop .sprd-customer-reviews__review-entry {
  border-bottom: 1px solid var(--line);
  padding-block: 16px;
}
#myShop .sprd-customer-reviews__review-text { color: var(--text) !important; }
#myShop .sprd-star-full,
#myShop .sprd-star-half { color: var(--acc) !important; fill: var(--acc) !important; }
#myShop .sprd-star-empty { color: var(--line-strong) !important; fill: var(--line-strong) !important; }
#myShop .sprd-customer-reviews__histogram-bar { background: var(--line) !important; }
#myShop .sprd-customer-reviews__histogram-bar__inner { background: var(--acc) !important; }
#myShop .sprd-customer-reviews__sort-btn,
#myShop .sprd-customer-reviews__pagination-btn,
#myShop .sprd-customer-reviews__histogram__btn {
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--line-strong) !important;
}
#myShop .sprd-customer-reviews__sort-btn:hover,
#myShop .sprd-customer-reviews__pagination-btn:hover,
#myShop .sprd-customer-reviews__histogram__btn:hover { color: var(--acc) !important; }
#myShop .sprd-customer-reviews__icon { color: var(--acc); fill: var(--acc); }

/* ===================== Handy: Produktliste des Widgets ====================
   MUSS am Dateiende stehen. Im frueheren Abschnitt war die Regel wirkungslos,
   weil die Grundregel (#myShop .sprd-product-list mit minmax(230px)) spaeter
   folgt und bei gleicher Spezifitaet die spaetere gewinnt.
   Zwei Spalten wie auf der Startseite und bei den Motiven: vorher passte nur
   EINE Kachel pro Reihe (329 x 450 px), also kaum zwei Produkte pro
   Bildschirm. Unter etwa 330 px Inhaltsbreite bleibt es bei einer Spalte -
   genau wie beim Produktraster der Startseite. */
@media (max-width: 767px) {
  #myShop .sprd-product-list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
  }
  #myShop .sprd-product-list-item__title { font-size: 13px; }
  #myShop .sprd-product-list-item__price { font-size: 15px; }
}