/* ═══════════════════════════════════════════════════════════════
   padelcore Shop — Register „Tageslicht" für den B2C-Zweig (E5)
   ───────────────────────────────────────────────────────────────
   Angelegt am 02.10.2026 im Designsystem, noch nicht im Repo.
   Gilt AUSSCHLIESSLICH innerhalb von .sh-seite. padelcore.eu
   bleibt B2B: Dort gilt weiter „keine Preise, kein Artikelraster,
   kein Warenkorb" (PRODUCT.md, content/de/ausstattung) — dieses
   Register darf in den Ausstattungsbereich nicht einsickern.

   WAS ES VOM SPORT-REGISTER ERBT
   Schrift und Achsen (wdth 78 / 82 / 88, Gewichte 750 / 760), den
   Schnitt statt der Kante (12px Handlung, 9px klein), die gelbe
   Schräge mit 1,2°, kein Schatten, keine Rundung, Archivo allein.

   WAS ES ANDERS MACHT
   Der Grund ist hell und bleibt es; Dunkel steht nur als Fläche
   darin (.sh-dunkel, .sh-markenraum). Daraus folgt die eine Regel,
   die alles andere trägt: GELB NUR AUF DUNKEL, AUF HELL TUSCHE.
   Die Handlung ist auf Weiß Tusche, in einer dunklen Fläche Gelb —
   dieselbe Klasse, zwei Belegungen der Tokens.

   Der Shop ist dicht: eigene, breitere Spalte (1480px), engerer
   Takt, kleinere Stufen. Laut wird er über Fläche und Breite, nicht
   über Farbe — Aktionsflächen in Kohle, Schlagzeilen bei 78 %.

   ZWEI ZUSTANDSFARBEN, die das Grundsystem nicht hat: Bestand
   (Grün) und Fehler (Rot). Je eine Aufgabe, nie Fläche, nie Knopf,
   immer zusammen mit Text — Farbe allein trägt keine Aussage
   (BFSG / WCAG 1.4.1). Rot ist ausdrücklich NICHT die Farbe der
   Aktion; den Preisnachlass trägt die dunkle Flagge mit Gelb.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Gründe (hell) ─────────────────────────────────────────── */
  --sh-grund:   #ffffff;
  --sh-flaeche: var(--pc-paper);   /* Summenkasten, Filterleiste, Chips   */
  --sh-platte:  #f3f4f6;           /* unter freigestellten Produktbildern */

  /* ── Schrift und Linie ─────────────────────────────────────── */
  --sh-text:   var(--pc-ink);      /* 15,9:1 */
  --sh-text-2: var(--pc-mut);      /*  6,0:1 */
  --sh-linie:  var(--pc-line);     /* Haarlinie, nie Bedienelement */
  --sh-rand:   #868c93;            /* Rand von Feld und Taste, 3,4:1 (WCAG 1.4.11) */

  /* ── Handlung, Akzent, Auswahl ─────────────────────────────── */
  --sh-tat:       var(--pc-ink);
  --sh-tat-ink:   #ffffff;
  --sh-tat-hover: var(--pc-tat-hover);
  --sh-akzent:    var(--pc-brand); /* Beschriftung, Fokus, Verweis beim Überfahren */
  --sh-wahl:      var(--pc-brand); /* gewählte Größe, Farbe, Filter, Versandart    */
  --sh-wahl-ink:  #ffffff;         /* Haken auf der gewählten Box                  */

  /* ── Aktion ────────────────────────────────────────────────────
     Die dunkle Flagge mit gelber Schrift. Auf Hell ist sie die
     einzige Stelle, an der Gelb erscheint — als Schrift auf Kohle,
     also wieder auf Dunkel. In einer dunklen Fläche kippt sie auf
     Gelb mit dunkler Schrift. */
  --sh-aktion:     var(--pc-kohle);
  --sh-aktion-ink: var(--pc-signal);

  /* ── Bewertung ─────────────────────────────────────────────── */
  --sh-stern:      var(--pc-ink);
  --sh-stern-leer: rgba(20,23,26,.18);

  /* ── Zustände: je eine Aufgabe, immer mit Text ─────────────── */
  --sh-lager:  #1d6b3c;   /* 6,5:1 — „Lieferbar"                 */
  --sh-fehler: #b3261e;   /* 6,6:1 — Feldfehler, Zahlung fehlgeschlagen */

  /* ── Maß ───────────────────────────────────────────────────── */
  --sh-spalte:       1480px;
  --sh-ecke:         var(--pc-sport-ecke);   /* 12px, Handlung      */
  --sh-ecke-klein:   9px;                    /* kleine Handlung     */
  --sh-ecke-platte:  16px;                   /* Produktplatte       */
  --sh-luecke:       16px;                   /* Raster waagerecht   */
  --sh-luecke-zeile: 36px;                   /* Raster senkrecht    */
  --sh-takt: clamp(2rem, 4vw, 3.25rem); /* @kind spacing */ /* Abschnitt im Shop */

  /* ── Schleier ──────────────────────────────────────────────────
     Ebenen heben sich durch Abdunkeln des Darunter, nicht durch
     Schatten: Suche, Schublade und Filter auf dem Telefon legen
     diesen Ton über die Seite. */
  --sh-schleier: rgba(11,13,15,.48); /* @kind color */
}

/* ── Dunkle Flächen im hellen Shop ──────────────────────────────
   Zweite Belegung derselben Tokens. Alles, was über --sh-* läuft,
   kippt von selbst: Handlung wird Gelb, Akzent wird Gelb, die
   Produktplatte wird festes Weiß (die Bilder stehen auf Weiß). */
.sh-dunkel, .sh-markenraum {
  --sh-grund:   var(--pc-kohle);
  --sh-flaeche: rgba(255,255,255,.06);
  --sh-platte:  #ffffff;
  --sh-text:    #ffffff;
  --sh-text-2:  rgba(255,255,255,.72);
  --sh-linie:   rgba(255,255,255,.18);
  --sh-rand:    rgba(255,255,255,.42);
  --sh-tat:       var(--pc-signal);
  --sh-tat-ink:   #101215;
  --sh-tat-hover: #ffffff;
  --sh-akzent:    var(--pc-signal);
  --sh-wahl:      var(--pc-signal);
  --sh-wahl-ink:  #101215;
  --sh-aktion:     var(--pc-signal);
  --sh-aktion-ink: #101215;
  --sh-stern:      var(--pc-signal);
  --sh-stern-leer: rgba(255,255,255,.22);
  --sh-lager:  #7fd49c;
  --sh-fehler: #ff8a80;
  background: var(--sh-grund);
  color: var(--sh-text);
  color-scheme: dark;
}
/* Der Markenraum: Tiefblau statt Kohle. Fußzeile, Kontokopf,
   Newsletter — dieselbe Fläche, mit der jede Seite von padelcore.eu
   endet. */
.sh-markenraum { --sh-grund: var(--pc-core-950); }


/* ═══ Rahmen ═════════════════════════════════════════════════════ */

.sh-seite {
  background: var(--sh-grund);
  color: var(--sh-text);
  font-family: var(--pc-font);
  font-size: 1rem; line-height: 1.5;
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
}
.sh-seite *, .sh-seite *::before, .sh-seite *::after { box-sizing: border-box; }
.sh-seite :focus-visible { outline: 2px solid var(--sh-akzent); outline-offset: 2px; }
.sh-seite [id] { scroll-margin-top: 9rem; }

.sh-spalte { max-width: var(--sh-spalte); margin: 0 auto; padding-left: 16px; padding-right: 16px; }
@media (min-width: 768px) { .sh-spalte { padding-left: 32px; padding-right: 32px; } }
.sh-takt { padding-top: var(--sh-takt); padding-bottom: var(--sh-takt); }
.sh-flaeche { background: var(--sh-flaeche); }

/* Sichtbar nur für Hilfstechnik — für Eingaben unter eigenen Figuren. */
.sh-versteckt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sh-symbol { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; }
.sh-symbol-klein { width: 16px; height: 16px; }


/* ═══ Schrift ════════════════════════════════════════════════════
   Eine Stufe kleiner als das Sport-Register: Der Shop ist dicht,
   die Schlagzeile ist eine Aktion und keine Seitenaussage. */

.sh-bez {
  margin: 0;
  font-size: .75rem; line-height: 1.3;
  font-weight: var(--pc-gewicht-bez); font-stretch: var(--pc-breite-bez);
  letter-spacing: var(--pc-sperrung-bez); text-transform: uppercase;
  color: var(--sh-akzent);
}
.sh-schlag {
  margin: 0;
  font-size: clamp(2.6rem, 6.2vw, 5.6rem); line-height: .92;
  font-weight: var(--pc-gewicht-sport); font-stretch: var(--pc-breite-sport);
  text-transform: uppercase; letter-spacing: -.005em;
}
.sh-h1 {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3rem); line-height: .98;
  font-weight: var(--pc-gewicht-sport); font-stretch: var(--pc-breite-sport);
  text-transform: uppercase;
}
.sh-h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.04;
  font-weight: var(--pc-gewicht-sport); font-stretch: var(--pc-breite-sport-h2);
  text-transform: uppercase;
}
.sh-h3 {
  margin: 0;
  font-size: 1rem; line-height: 1.2;
  font-weight: var(--pc-gewicht-sport-titel); font-stretch: var(--pc-breite-sport-sub);
  text-transform: uppercase; letter-spacing: .01em;
}
.sh-text  { margin: 0; max-width: 68ch; font-size: 1rem; line-height: 1.62; color: var(--sh-text-2); }
.sh-klein { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--sh-text-2); }
.sh-zahl  { font-variant-numeric: tabular-nums; }

/* Der Marker um das Aktionswort. Folgt der Handlung: auf Hell
   Tusche mit weißer Schrift, in der dunklen Fläche Gelb. */
.sh-marker { display: inline-block; padding: 0 .14em; background: var(--sh-tat); color: var(--sh-tat-ink); transform: skewX(-8deg); }
.sh-marker > span { display: inline-block; transform: skewX(8deg); }

/* Haarlinien-Liste mit Strich — die Signaturfigur, im Shop kürzer. */
.sh-merkmale { margin: 0; padding: 0; list-style: none; }
.sh-merkmale li { display: flex; gap: 12px; align-items: baseline; padding: .55rem 0; border-top: 1px solid var(--sh-linie); font-size: .9375rem; line-height: 1.5; }
.sh-merkmale li:last-child { border-bottom: 1px solid var(--sh-linie); }
.sh-merkmale li::before { content: ''; flex: none; width: 14px; height: 2px; background: var(--sh-akzent); transform: translateY(-4px); }


/* ═══ Handlungen ═════════════════════════════════════════════════
   Der Schnitt aus dem Sport-Register. Der Fokusring liegt INNEN:
   clip-path schneidet alles ab, was außerhalb der Fläche liegt,
   ein äußerer Ring wäre an der Schnittecke weg. Innen, in der
   Schriftfarbe der Fläche, bleibt er vollständig. */

.sh-tat, .sh-tat-neben {
  --sh-e: var(--sh-ecke);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: 0 28px;
  font: inherit; font-size: .875rem; line-height: 1.1;
  font-weight: var(--pc-gewicht-bez); font-stretch: var(--pc-breite-sport-sub);
  letter-spacing: var(--pc-sperrung-tat); text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sh-e)), calc(100% - var(--sh-e)) 100%, 0 100%);
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.sh-tat { border: 0; background: var(--sh-tat); color: var(--sh-tat-ink); }
.sh-tat:hover { background: var(--sh-tat-hover); }
.sh-tat:focus-visible { outline: 2px solid var(--sh-tat-ink); outline-offset: -6px; }
.sh-tat[disabled], .sh-tat[aria-disabled='true'] { background: var(--sh-linie); color: var(--sh-text-2); cursor: not-allowed; }

/* Umrissen. Der Rand folgt dem Schnitt: ::after zieht die Diagonale
   nach, die clip-path sonst randlos stehen ließe. Ihre Farbe ist die
   Schriftfarbe des ::after — jeder Zustand setzt Rand und Diagonale
   gemeinsam. */
.sh-tat-neben { background: transparent; color: var(--sh-text); }
.sh-tat-neben:hover { border-color: var(--sh-text); }
.sh-tat-neben:hover::after { color: var(--sh-text); }
.sh-tat-neben:focus-visible { outline: 2px solid var(--sh-akzent); outline-offset: -6px; }

.sh-tat-neben, .sh-flagge-neu, .sh-groesse, .sh-chip-wahl { border: 1px solid var(--sh-rand); }
.sh-tat-neben::after, .sh-flagge-neu::after, .sh-groesse::after, .sh-chip-wahl::after {
  content: ''; position: absolute; right: -1px; bottom: -1px;
  width: var(--sh-e); height: var(--sh-e); pointer-events: none; color: var(--sh-rand);
  background: linear-gradient(to top left, transparent calc(50% - .75px), currentColor calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px));
}

.sh-tat-klein { --sh-e: var(--sh-ecke-klein); min-height: 44px; padding: 0 18px; font-size: .8rem; }
.sh-tat-gross { min-height: 56px; padding: 0 36px; font-size: .9375rem; }
.sh-tat-breit { width: 100%; }

/* Symboltaste: 44 × 44, ohne Fläche. Kopfleiste, Merken, Schließen. */
.sh-taste-symbol {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex: none;
  border: 0; background: transparent; color: var(--sh-text); cursor: pointer;
  transition: color .16s ease;
}
.sh-taste-symbol:hover { color: var(--sh-akzent); }
.sh-taste-symbol[aria-pressed='true'] .sh-symbol { fill: currentColor; }

.sh-verweis {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: var(--pc-gewicht-halb); color: var(--sh-text);
  text-decoration: underline; text-decoration-color: var(--sh-rand);
  text-decoration-thickness: 1px; text-underline-offset: .3em;
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  transition: color .16s ease, text-decoration-color .16s ease, gap .16s ease;
}
.sh-verweis:hover { color: var(--sh-akzent); text-decoration-color: var(--sh-akzent); gap: .6rem; }
.sh-verweis-still { font-weight: 400; color: var(--sh-text-2); font-size: .875rem; }

/* Zähler an Merkliste und Warenkorb: Gelb auf Kohle, auf Dunkel
   umgekehrt. Kein Kreis — ein Kästchen. */
.sh-zaehler {
  position: absolute; top: 3px; right: 0;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--sh-aktion); color: var(--sh-aktion-ink);
  font-size: .6875rem; font-weight: 750; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}


/* ═══ Flaggen ════════════════════════════════════════════════════
   Höchstens zwei je Kachel. Aktion gefüllt und laut, Neu umrissen,
   Hinweis still. Mehr Flaggen sagen weniger. */

.sh-flagge {
  --sh-e: 7px;
  position: relative;
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 9px 0 8px;
  font-size: .6875rem; line-height: 1;
  font-weight: var(--pc-gewicht-sport-titel); font-stretch: var(--pc-breite-sport-sub);
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sh-e)), calc(100% - var(--sh-e)) 100%, 0 100%);
}
.sh-flagge-aktion { background: var(--sh-aktion); color: var(--sh-aktion-ink); font-size: .875rem; font-stretch: var(--pc-breite-sport); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.sh-flagge-neu    { background: var(--sh-grund); color: var(--sh-text); border-color: var(--sh-text); }
.sh-flagge-neu::after { color: var(--sh-text); }
.sh-flagge-still  { background: var(--sh-grund); color: var(--sh-text-2); }
.sh-flagge-gross  { --sh-e: 10px; height: 34px; padding: 0 12px; font-size: 1.125rem; }


/* ═══ Preis ══════════════════════════════════════════════════════
   Der Preis steht in der Schlagzeilenbreite. Ein Nachlass zeigt
   IMMER den Bezugspreis UND den niedrigsten Preis der letzten 30
   Tage (§ 11 PAngV) — die Zeile ist Pflicht, kein Kleingedrucktes
   zum Weglassen. Die UVP heißt UVP. Wo eine Menge verkauft wird
   (Dose, Blister, Liter), steht der Grundpreis daneben. */

.sh-preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.sh-preis-jetzt {
  font-size: 1.375rem; line-height: 1;
  font-weight: var(--pc-gewicht-sport); font-stretch: var(--pc-breite-sport);
  font-variant-numeric: tabular-nums; color: var(--sh-text); white-space: nowrap;
}
.sh-preis-vorher { font-size: .875rem; color: var(--sh-text-2); text-decoration: line-through; text-decoration-thickness: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Die Fußnote am Streichpreis. inline-block, weil eine Durchstreichung
   sich in Inline-Kinder vererbt und dort nicht aufzuheben ist. */
.sh-preis-vorher sup { display: inline-block; margin-left: 2px; font-size: .7em; text-decoration: none; }
.sh-preis-zeile  { flex-basis: 100%; font-size: .75rem; line-height: 1.45; color: var(--sh-text-2); font-variant-numeric: tabular-nums; }
.sh-preis-zeile a { color: inherit; }
.sh-preis-gross .sh-preis-jetzt { font-size: clamp(2.25rem, 3.4vw, 3rem); }
.sh-preis-gross .sh-preis-vorher { font-size: 1.0625rem; }
.sh-preis-gross .sh-preis-zeile { font-size: .8125rem; }

/* Bestand. Ein Kästchen statt eines Punkts, und immer mit Text. */
.sh-bestand { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; line-height: 1.4; color: var(--sh-text); }
.sh-bestand::before { content: ''; flex: none; width: 8px; height: 8px; background: var(--sh-lager); }
.sh-bestand b { font-weight: var(--pc-gewicht-halb); color: var(--sh-lager); }
.sh-bestand-knapp::before { background: linear-gradient(90deg, var(--sh-lager) 50%, transparent 50%); box-sizing: border-box; border: 1px solid var(--sh-lager); }
.sh-bestand-aus { color: var(--sh-text-2); }
.sh-bestand-aus::before { background: transparent; border: 1px solid var(--sh-text-2); box-sizing: border-box; }

/* Sterne. Eine Maske über einem Verlauf — der Wert steht als Zahl
   in --wert (0–5), die Aussage für Hilfstechnik im aria-label. */
.sh-sterne {
  --wert: 0; /* @kind other */
  display: inline-block; flex: none;
  width: 5.5em; height: 1.1em; font-size: 14px; vertical-align: -.15em;
  background: linear-gradient(90deg, var(--sh-stern) calc(var(--wert) * 20%), var(--sh-stern-leer) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M10 1l2.7 5.8 6.3.7-4.7 4.3 1.3 6.2L10 14.9 4.4 18l1.3-6.2L1 7.5l6.3-.7z'/%3E%3C/svg%3E") 0 0 / 1.1em 1em repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M10 1l2.7 5.8 6.3.7-4.7 4.3 1.3 6.2L10 14.9 4.4 18l1.3-6.2L1 7.5l6.3-.7z'/%3E%3C/svg%3E") 0 0 / 1.1em 1em repeat-x;
}
.sh-sterne-gross { font-size: 22px; }

/* Die Skala. Zehn geneigte Glieder — dieselbe Neigung wie die
   Zierstreifen. Für Spielcharakter und Vergleich. */
.sh-skala { display: inline-flex; gap: 3px; padding-left: 3px; }
.sh-skala i { display: block; width: 10px; height: 12px; background: var(--sh-linie); transform: skewX(-18deg); }
.sh-skala i.an { background: var(--sh-text); }


/* ═══ Produktplatte und Kachel ═══════════════════════════════════
   Die Artikelbilder kommen freigestellt auf Weiß. Auf der Platte
   multipliziert, damit das Weiß des Bildes im Plattenton aufgeht —
   so steht im dichten Raster jede Ware auf einer Fläche, ohne dass
   ein Rahmen gezogen werden muss. In der dunklen Fläche ist die
   Platte Weiß, Multiplizieren ändert dort nichts. */

.sh-platte {
  --sh-e: var(--sh-ecke-platte);
  position: relative; display: block; overflow: hidden;
  background: var(--sh-platte);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sh-e)), calc(100% - var(--sh-e)) 100%, 0 100%);
}
.sh-platte img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sh-platte-klein { --sh-e: 8px; }
.sh-platte-luft img { padding: 8%; }

.sh-raster {
  display: grid; gap: var(--sh-luecke-zeile) var(--sh-luecke);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row dense;
}
@media (min-width: 760px)  { .sh-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sh-raster { grid-template-columns: repeat(var(--sh-spalten, 4), minmax(0, 1fr)); } }

.sh-kachel { position: relative; display: flex; flex-direction: column; min-width: 0; }
/* Platte, Flaggen, Merken und Schnellkauf liegen in einem eigenen
   Rahmen NEBEN der Platte, nicht in ihr: clip-path macht die Platte
   zum Stapelkontext, und der Verweis über der ganzen Kachel läge
   sonst über den Tasten. */
.sh-kachel-oben { position: relative; }
.sh-kachel-bild { aspect-ratio: 4 / 5; }
.sh-kachel-bild img { padding: 7% 9%; transition: transform .35s ease; }
.sh-kachel:hover .sh-kachel-bild img { transform: scale(1.04); }
.sh-kachel-flaggen { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
.sh-kachel-merken { position: absolute; top: 2px; right: 2px; z-index: 2; }

/* Schnellkauf: erscheint beim Überfahren und beim Tastaturfokus,
   auf Touch-Geräten gar nicht — dort führt die Kachel zur Seite. */
.sh-kachel-schnell { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; width: auto; opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }
.sh-kachel:hover .sh-kachel-schnell, .sh-kachel:focus-within .sh-kachel-schnell { opacity: 1; transform: none; }
@media (hover: none) { .sh-kachel-schnell { display: none; } }

.sh-kachel-info { display: flex; flex-direction: column; gap: 5px; padding-top: 12px; }
.sh-kachel-marke { font-size: .6875rem; font-weight: var(--pc-gewicht-bez); font-stretch: var(--pc-breite-bez); letter-spacing: var(--pc-sperrung-bez); text-transform: uppercase; color: var(--sh-text-2); }
.sh-kachel-name {
  font-size: .9375rem; line-height: 1.35; font-weight: var(--pc-gewicht-halb);
  color: var(--sh-text); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Die ganze Kachel ist das Ziel; Merken und Schnellkauf liegen darüber. */
.sh-kachel-name::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.sh-kachel-name:hover { text-decoration: underline; text-underline-offset: .2em; }
.sh-kachel-name:focus-visible { outline: 0; }
.sh-kachel:has(.sh-kachel-name:focus-visible) .sh-kachel-bild { outline: 2px solid var(--sh-akzent); outline-offset: -2px; }
.sh-kachel-wertung { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--sh-text-2); font-variant-numeric: tabular-nums; }
.sh-kachel .sh-preis { margin-top: 3px; }
.sh-kachel-farben { display: flex; align-items: center; gap: 4px; font-size: .75rem; color: var(--sh-text-2); }
.sh-kachel-farben i { display: block; width: 12px; height: 12px; background: var(--farbe); border: 1px solid var(--sh-linie); }
.sh-kachel-aus .sh-kachel-bild img { opacity: .42; }

/* Eine Aktionsfläche, die im Raster zwei Spalten einnimmt. Passt sie
   nicht mehr in die Zeile, rückt sie in die nächste — `dense` am
   Raster füllt die Lücke mit der folgenden Kachel, damit bei drei
   Spalten kein leeres Feld stehen bleibt. */
.sh-kachel-weit { grid-column: span 2; }


/* ═══ Varianten ══════════════════════════════════════════════════
   Die Auswahl trägt ihre Farbe als Marke, nicht als Fläche — wie
   der gewählte Reiter im Sport-Register: Rand, Schrift und ein Hauch
   Grund in --sh-wahl. Gefüllt ist nur die Handlung. Eine nicht
   lieferbare Größe ist durchgestrichen — mit der Diagonale. */

.sh-wahlgruppe { margin: 0; padding: 0; border: 0; min-width: 0; }
.sh-wahlgruppe legend, .sh-wahltitel { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 0; margin: 0 0 10px; font-size: .875rem; font-weight: var(--pc-gewicht-halb); }
.sh-wahltitel span, .sh-wahlgruppe legend span { font-weight: 400; color: var(--sh-text-2); }
.sh-wahlreihe { display: flex; flex-wrap: wrap; gap: 8px; }

.sh-groesse {
  --sh-e: var(--sh-ecke-klein);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 56px; height: 44px; padding: 0 12px;
  font-size: .875rem; font-weight: var(--pc-gewicht-halb); font-variant-numeric: tabular-nums;
  color: var(--sh-text); background: var(--sh-grund); cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sh-e)), calc(100% - var(--sh-e)) 100%, 0 100%);
  transition: border-color .16s ease, color .16s ease;
}
.sh-groesse:hover { border-color: var(--sh-text); }
.sh-groesse:hover::after { color: var(--sh-text); }
.sh-groesse:has(input:checked)::after { color: var(--sh-wahl); }
.sh-groesse:has(input:checked) { border-color: var(--sh-wahl); color: var(--sh-wahl); background: color-mix(in srgb, var(--sh-wahl) 8%, var(--sh-grund)); outline: 1px solid var(--sh-wahl); outline-offset: -2px; }
.sh-groesse:has(input:focus-visible) { outline: 2px solid var(--sh-akzent); outline-offset: -5px; }
.sh-groesse:has(input:disabled) {
  color: var(--sh-text-2); cursor: not-allowed; border-color: var(--sh-linie);
  background: linear-gradient(to top right, transparent calc(50% - .5px), var(--sh-rand) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
}

.sh-farbe {
  position: relative; display: inline-grid; place-items: center;
  width: 48px; height: 48px; cursor: pointer;
  border: 1px solid var(--sh-linie); background: var(--sh-grund);
}
.sh-farbe > span:not(.sh-versteckt) { display: block; width: 34px; height: 34px; background: var(--farbe); border: 1px solid rgba(20,23,26,.12); }
.sh-farbe img { display: block; width: 40px; height: 40px; object-fit: contain; mix-blend-mode: multiply; }
.sh-farbe:hover { border-color: var(--sh-text); }
.sh-farbe:has(input:checked) { border-color: var(--sh-wahl); outline: 1px solid var(--sh-wahl); outline-offset: -2px; }
.sh-farbe:has(input:focus-visible) { outline: 2px solid var(--sh-akzent); outline-offset: 2px; }
.sh-farbe:has(input:disabled)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - .75px), var(--sh-text-2) calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px)); }

/* Menge. Ein Feld zwischen zwei Tasten, alles 44px hoch. */
.sh-menge { display: inline-flex; align-items: stretch; height: 48px; border: 1px solid var(--sh-rand); background: var(--sh-grund); }
.sh-menge button { width: 44px; border: 0; background: transparent; color: var(--sh-text); cursor: pointer; display: grid; place-items: center; }
.sh-menge button:hover { color: var(--sh-akzent); }
.sh-menge input { width: 44px; border: 0; background: transparent; text-align: center; font: inherit; font-weight: var(--pc-gewicht-halb); font-variant-numeric: tabular-nums; color: var(--sh-text); -moz-appearance: textfield; }
.sh-menge input::-webkit-inner-spin-button { -webkit-appearance: none; }
.sh-menge-klein { height: 40px; }
.sh-menge-klein button { width: 36px; }
.sh-menge-klein input { width: 36px; }


/* ═══ Formular ═══════════════════════════════════════════════════ */

.sh-beschriftung { display: block; margin: 0 0 6px; font-size: .8125rem; font-weight: var(--pc-gewicht-halb); color: var(--sh-text); }
.sh-beschriftung span { font-weight: 400; color: var(--sh-text-2); }
.sh-eingabe {
  display: block; width: 100%; min-height: 48px; padding: 12px 14px;
  font: inherit; font-size: 1rem; line-height: 1.4;
  color: var(--sh-text); background: var(--sh-grund);
  border: 1px solid var(--sh-rand); border-radius: 0;
  transition: border-color .16s ease;
}
.sh-eingabe::placeholder { color: var(--sh-text-2); }
.sh-eingabe:hover { border-color: var(--sh-text); }
.sh-eingabe:focus-visible { border-color: var(--sh-akzent); outline: 1px solid var(--sh-akzent); outline-offset: -2px; }
.sh-eingabe[aria-invalid='true'] { border-color: var(--sh-fehler); outline: 1px solid var(--sh-fehler); outline-offset: -2px; }
select.sh-eingabe {
  appearance: none; padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 54%, calc(100% - 14px) 54%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.sh-fehlertext { display: flex; gap: 6px; align-items: baseline; margin: 6px 0 0; font-size: .8125rem; line-height: 1.4; color: var(--sh-fehler); }
.sh-fehlertext::before { content: '!'; flex: none; display: inline-grid; place-items: center; width: 15px; height: 15px; background: var(--sh-fehler); color: var(--sh-grund); font-size: .6875rem; font-weight: 750; transform: translateY(2px); }
.sh-feldraster { display: grid; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sh-feldraster > * { grid-column: span 6; }
@media (min-width: 600px) {
  .sh-feldraster .sh-halb { grid-column: span 3; }
  .sh-feldraster .sh-drittel { grid-column: span 2; }
  .sh-feldraster .sh-zweidrittel { grid-column: span 4; }
}

/* Box und Knopf. Beide eckig; die Box trägt den Haken, der Knopf
   ein gefülltes Quadrat — die Form sagt, ob eins oder mehrere. */
.sh-pruef {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 20px; height: 20px; display: inline-grid; place-content: center;
  border: 1px solid var(--sh-rand); background: var(--sh-grund); cursor: pointer;
}
.sh-pruef:hover { border-color: var(--sh-text); }
.sh-pruef[type='checkbox']:checked { background: var(--sh-wahl); border-color: var(--sh-wahl); }
.sh-pruef[type='checkbox']:checked::before { content: ''; width: 10px; height: 5px; border-left: 2px solid var(--sh-wahl-ink); border-bottom: 2px solid var(--sh-wahl-ink); transform: translateY(-1px) rotate(-45deg); }
.sh-pruef[type='radio']:checked { border-color: var(--sh-wahl); }
.sh-pruef[type='radio']:checked::before { content: ''; width: 10px; height: 10px; background: var(--sh-wahl); }
.sh-wahlzeile { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: .9375rem; cursor: pointer; }
.sh-wahlzeile .sh-anzahl { margin-left: auto; font-size: .8125rem; color: var(--sh-text-2); font-variant-numeric: tabular-nums; }

/* Wahlkarte: Versandart, Zahlungsart, Rücksendegrund. Gewählt ist
   sie über einen inneren Ring — der Rand wird nicht dicker, damit
   nichts springt. */
.sh-wahlkarte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; padding: 16px; border: 1px solid var(--sh-linie); cursor: pointer; background: var(--sh-grund); }
.sh-wahlkarte .sh-pruef { margin-top: 1px; }
.sh-wahlkarte:hover { border-color: var(--sh-rand); }
.sh-wahlkarte:has(input:checked) { border-color: var(--sh-wahl); outline: 1px solid var(--sh-wahl); outline-offset: -2px; }
.sh-wahlkarte-titel { font-weight: var(--pc-gewicht-halb); }
.sh-wahlkarte-text { grid-column: 2 / -1; font-size: .8125rem; color: var(--sh-text-2); }
.sh-wahlkarte-preis { font-weight: var(--pc-gewicht-halb); font-variant-numeric: tabular-nums; white-space: nowrap; }


/* ═══ Kopf ═══════════════════════════════════════════════════════
   Drei Zeilen: das dunkle Band mit den Zusagen, die weiße Kopfzeile
   mit Suche und Zielen, die dunkle Sortimentsleiste. Klebend ist
   nur die mittlere — beim Scrollen bleiben Suche und Korb. */

.sh-band { background: var(--pc-kohle); color: #fff; }
.sh-band-zeile { display: flex; align-items: center; justify-content: center; gap: 8px 40px; min-height: 36px; flex-wrap: wrap; font-size: .75rem; font-weight: var(--pc-gewicht-halb); }
.sh-band-zeile span { display: inline-flex; align-items: center; gap: 8px; }
.sh-band-zeile b { color: var(--pc-signal); font-weight: var(--pc-gewicht-bez); }
@media (max-width: 759px) { .sh-band-zeile span + span { display: none; } }

.sh-kopf { position: sticky; top: 0; z-index: 40; background: var(--sh-grund); border-bottom: 1px solid var(--sh-linie); }
.sh-kopf-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 32px; min-height: 76px; }
.sh-kopf-marke { display: inline-flex; padding: 10px 0; }
.sh-kopf-marke img { display: block; height: 24px; width: auto; }
.sh-kopf-ziele { display: flex; align-items: center; gap: 4px; }
.sh-kopf-ziel { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 56px; min-height: 52px; padding: 4px 6px; color: var(--sh-text); text-decoration: none; font-size: .6875rem; font-weight: var(--pc-gewicht-halb); }
.sh-kopf-ziel:hover { color: var(--sh-akzent); }
.sh-kopf-ziel .sh-zaehler { top: 0; right: 6px; }
@media (max-width: 759px) {
  .sh-kopf-zeile { grid-template-columns: auto 1fr auto; }
  .sh-kopf-zeile .sh-suche { grid-column: 1 / -1; grid-row: 2; margin-bottom: 12px; }
  .sh-kopf-ziel > span:last-child { display: none; }
}

/* Die Sortimentsleiste. Dunkel, kondensiert, Versalien. Der aktive
   Bereich trägt den gelben Strich unten; „Sale" steht in Gelb. */
.sh-sortiment { background: var(--pc-kohle); color: #fff; }
.sh-sortiment-liste { display: flex; gap: 0 26px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.sh-sortiment-liste::-webkit-scrollbar { display: none; }
.sh-sortiment-liste > li { display: flex; align-items: center; }

/* Abschnittskopf: Beschriftung und Ueberschrift links, Verweis rechts
   (padelshop_abschnitt_kopf, Startseite und Produktseite). */
.sh-abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; margin-bottom: 20px; }
.sh-abschnitt-kopf .sh-verweis { white-space: nowrap; }
.sh-abschnitt-kopf .sh-h2 { margin-top: 8px; }

/* "Warum padelcore?" (C31): drei Kaesten, Start- und Produktseite. */
.sh-warum-liste { display: grid; gap: var(--sh-luecke); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .sh-warum-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sh-warum-liste li {
  --sh-e: var(--sh-ecke-platte);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px;
  background: var(--sh-platte); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sh-e)), calc(100% - var(--sh-e)) 100%, 0 100%);
}
.sh-warum-liste .sh-verweis { margin-top: auto; }
.sh-sortiment-liste a {
  position: relative; display: inline-flex; align-items: center; min-height: 48px; white-space: nowrap;
  font-size: .875rem; font-weight: var(--pc-gewicht-sport-titel); font-stretch: var(--pc-breite-sport-sub);
  text-transform: uppercase; letter-spacing: .02em; color: rgba(255,255,255,.86); text-decoration: none;
}
.sh-sortiment-liste a:hover, .sh-sortiment-liste a[aria-current] { color: #fff; }
.sh-sortiment-liste a[aria-current]::after, .sh-sortiment-liste a:hover::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pc-signal); }
.sh-sortiment-liste a.sh-sortiment-sale { color: var(--pc-signal); }
/* "Kollektion 2027" (C31): Pille in Signalgelb, der einzige farbige Eintrag. */
.sh-sortiment-liste a.sh-sortiment-neu { min-height: 30px; padding: 0 12px; color: var(--pc-kohle); background: var(--pc-signal); }
.sh-sortiment-liste a.sh-sortiment-neu:hover, .sh-sortiment-liste a.sh-sortiment-neu[aria-current] { color: var(--pc-kohle); }
.sh-sortiment-liste a.sh-sortiment-neu::after { display: none; }
.sh-sortiment-liste a.sh-sortiment-neu[aria-current] { box-shadow: inset 0 0 0 2px var(--pc-kohle), 0 0 0 2px var(--pc-signal); }
.sh-sortiment-liste a:focus-visible { outline: 2px solid var(--pc-signal); outline-offset: -2px; }

/* Grosses Menue (C28): Tafel unter der Leiste, Spalten nach Achse. Die
   Tafel haengt an der Leiste (position: relative), nicht am Eintrag -
   sonst schnitte das waagerechte Scrollen der Liste sie ab. */
.sh-sortiment { position: relative; z-index: 30; }
.sh-menue-tafel { display: none; }
@media (min-width: 1024px) {
  .sh-menue-tafel {
    position: absolute; left: 0; right: 0; top: 100%;
    padding: 28px 0 32px; background: var(--sh-grund); color: var(--sh-text);
    border-bottom: 1px solid var(--sh-linie); box-shadow: 0 24px 32px -24px rgba(11,13,15,.28);
  }
  .sh-mit-menue:hover > .sh-menue-tafel, .sh-mit-menue:focus-within > .sh-menue-tafel { display: block; }
  /* Ein kurzer Weg von der Leiste in die Tafel ohne Zuklappen. */
  .sh-mit-menue:hover > a::before { content: ''; position: absolute; left: -12px; right: -12px; top: 100%; height: 12px; }
}
.sh-menue-spalten { display: grid; gap: 24px 32px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sh-menue-spalte .sh-bez { margin-bottom: 10px; }
.sh-menue-spalte ul { margin: 0; padding: 0; list-style: none; }
.sh-menue-spalte a {
  display: block; padding: 5px 0; min-height: 0;
  font-size: .9375rem; font-weight: 400; font-stretch: 100%; text-transform: none; letter-spacing: 0;
  color: var(--sh-text); text-decoration: none; white-space: normal;
}
.sh-sortiment-liste .sh-menue-tafel a::after { display: none; }
.sh-menue-spalte a:hover { color: var(--sh-akzent); text-decoration: underline; }
.sh-sortiment .sh-menue-spalte a:hover { color: var(--sh-akzent); }
.sh-menue-spalte a.sh-menue-alle { margin-top: 4px; font-weight: var(--pc-gewicht-halb); }
.sh-menue-ganz { margin-top: 24px; }
.sh-sortiment .sh-menue-tafel a.sh-menue-ganz {
  display: inline-flex; min-height: 0; font-size: .9375rem; text-transform: none; letter-spacing: 0;
  font-stretch: 100%; color: var(--sh-text);
}

/* Knopf "Menü" und Schublade: nur auf dem Telefon und Tablet. */
.sh-menue-knopf-platz { display: flex; }
@media (min-width: 1024px) { .sh-menue-knopf-platz { display: none; } }
.sh-menue-knopf {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .875rem; font-weight: var(--pc-gewicht-sport-titel); font-stretch: var(--pc-breite-sport-sub);
  text-transform: uppercase; letter-spacing: .02em; color: var(--pc-signal);
}
.sh-menue-knopf:focus-visible { outline: 2px solid var(--pc-signal); outline-offset: 2px; }
.sh-menue-schublade {
  position: fixed; inset: 0 auto 0 0; width: min(420px, 100vw); max-width: 100vw; height: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0; border-right: 1px solid var(--sh-linie);
  background: var(--sh-grund); color: var(--sh-text);
}
.sh-menue-schublade[open] { display: flex; flex-direction: column; }
.sh-menue-schublade::backdrop { background: var(--sh-schleier); }
.sh-menue-klappe { display: block; border-bottom: 1px solid var(--sh-linie); }
.sh-menue-klappe > summary, .sh-menue-einfach {
  display: flex; align-items: center; justify-content: space-between; min-height: 52px; cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: var(--pc-gewicht-sport-titel); font-stretch: var(--pc-breite-sport-sub);
  text-transform: uppercase; color: var(--sh-text); text-decoration: none;
}
.sh-menue-klappe > summary::-webkit-details-marker { display: none; }
.sh-menue-klappe[open] > summary .sh-symbol { transform: rotate(180deg); }
.sh-menue-klappe .sh-menue-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 8px; }
.sh-menue-klappe .sh-menue-ganz { margin: 8px 0 20px; }
/* Tippziel 44 px in der Klappe (D22 der Gegenpruefung). */
.sh-menue-klappe .sh-menue-spalte a, .sh-menue-klappe a.sh-menue-ganz { display: flex; align-items: center; min-height: 44px; padding: 0; }

.sh-pfad { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 14px 0 0; list-style: none; font-size: .8125rem; color: var(--sh-text-2); }
.sh-pfad li + li::before { content: '/'; margin-right: 8px; color: var(--sh-rand); }
.sh-pfad a { color: inherit; text-decoration: none; }
.sh-pfad a:hover { color: var(--sh-akzent); text-decoration: underline; }
.sh-pfad [aria-current] { color: var(--sh-text); }


/* ═══ Suche ══════════════════════════════════════════════════════ */

.sh-suche { position: relative; display: flex; align-items: center; height: 48px; background: var(--sh-flaeche); border: 1px solid var(--sh-linie); }
.sh-suche:hover { border-color: var(--sh-rand); }
.sh-suche:focus-within { background: var(--sh-grund); border-color: var(--sh-akzent); outline: 1px solid var(--sh-akzent); outline-offset: -2px; }
.sh-suche > .sh-symbol { margin-left: 14px; color: var(--sh-text-2); }
.sh-suche input { flex: 1; min-width: 0; height: 100%; padding: 0 12px; border: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--sh-text); }
.sh-suche input:focus { outline: 0; }
.sh-suche input::placeholder { color: var(--sh-text-2); }
.sh-suche .sh-tat { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); min-height: 46px; height: 46px; padding: 0 18px; }

.sh-vorschlaege {
  position: absolute; top: calc(100% + 1px); left: -1px; right: -1px; z-index: 30;
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  background: var(--sh-grund); border: 1px solid var(--sh-linie); border-top: 2px solid var(--sh-akzent);
}
.sh-vorschlaege-spalte { padding: 16px 20px 20px; }
.sh-vorschlaege-spalte + .sh-vorschlaege-spalte { border-left: 1px solid var(--sh-linie); }
.sh-vorschlaege .sh-bez { margin-bottom: 8px; color: var(--sh-text-2); }
.sh-vorschlag { display: flex; align-items: center; gap: 10px; min-height: 36px; color: var(--sh-text); text-decoration: none; font-size: .9375rem; }
.sh-vorschlag b { font-weight: var(--pc-gewicht-bez); }
.sh-vorschlag:hover, .sh-vorschlag[aria-selected='true'] { color: var(--sh-akzent); }
.sh-vorschlag-treffer { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--sh-linie); color: var(--sh-text); text-decoration: none; }
.sh-vorschlag-treffer:first-of-type { border-top: 0; }
.sh-vorschlag-treffer .sh-platte { width: 56px; height: 56px; }
.sh-vorschlag-treffer .sh-platte img { padding: 6px; }
.sh-vorschlag-treffer:hover .sh-vorschlag-name { text-decoration: underline; }
.sh-vorschlag-name { font-size: .875rem; line-height: 1.35; font-weight: var(--pc-gewicht-halb); }
.sh-schleier { position: fixed; inset: 0; z-index: 20; background: var(--sh-schleier); }


/* ═══ Aktionsflächen ═════════════════════════════════════════════
   Die lauten Stellen des Shops. Immer dunkel — nur dort darf die
   Handlung gelb sein. Die Ware steht auf weißen Platten, die
   gelbe Schräge des Sport-Registers trennt die Fläche vom Hellen. */

.sh-aktion { position: relative; overflow: hidden; }
.sh-aktion-innen { position: relative; display: grid; gap: 32px; align-items: center; grid-template-columns: minmax(0, 1fr); padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 960px) { .sh-aktion-innen { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.sh-aktion-ware { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sh-aktion-ware .sh-platte { aspect-ratio: 3 / 4; }
.sh-aktion-ware .sh-platte img { padding: 10%; }
.sh-aktion-frist { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 18px; font-size: .8125rem; color: var(--sh-text-2); }

/* Das schmale Band über einer Kategorie: ein Satz, ein Code, ein Ziel. */
.sh-aktionsband { background: var(--sh-grund); }
.sh-aktionsband-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
.sh-aktionsband-text { flex: 1 1 auto; min-width: min(100%, 22ch); font-size: 1.125rem; font-weight: var(--pc-gewicht-sport); font-stretch: var(--pc-breite-sport-h2); text-transform: uppercase; line-height: 1.1; }
.sh-aktionsband-text em { font-style: normal; color: var(--sh-akzent); }

/* Gutscheincode. Gestrichelt umrandet: Das ist der eine Ort, an dem
   ein Rand gestrichelt sein darf — er sagt „zum Ausschneiden". */
.sh-code { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 14px; border: 1px dashed var(--sh-akzent); color: var(--sh-akzent); font-weight: var(--pc-gewicht-sport); font-stretch: var(--pc-breite-sport-sub); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.sh-code button { height: 30px; padding: 0 10px; border: 0; background: transparent; color: var(--sh-text); font: inherit; font-size: .75rem; font-weight: var(--pc-gewicht-halb); letter-spacing: .04em; cursor: pointer; text-decoration: underline; text-underline-offset: .25em; }

/* Kategorie-Kachel: Bild, Name groß, Anzahl. */
.sh-bereiche { display: grid; gap: var(--sh-luecke); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .sh-bereiche { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sh-bereich { position: relative; display: block; color: var(--sh-text); text-decoration: none; }
.sh-bereich .sh-platte { aspect-ratio: 5 / 4; }
.sh-bereich .sh-platte img { padding: 10% 30% 10% 22%; transition: transform .35s ease; }
.sh-bereich:hover .sh-platte img { transform: scale(1.05); }
.sh-bereich-name { position: absolute; left: 14px; bottom: 12px; z-index: 1; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: .95; font-weight: var(--pc-gewicht-sport); font-stretch: var(--pc-breite-sport); text-transform: uppercase; }
.sh-bereich-name small { display: block; margin-top: 6px; font-size: .75rem; font-weight: var(--pc-gewicht-halb); font-stretch: 100%; text-transform: none; color: var(--sh-text-2); }
.sh-bereich:hover .sh-bereich-name { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em; }


/* ═══ Kategorieseite: Werkzeugleiste und Filter ══════════════════ */

.sh-kategorie { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .sh-kategorie { grid-template-columns: 248px minmax(0, 1fr); gap: 40px; } }

.sh-schnellwahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sh-chip-wahl {
  --sh-e: 7px; position: relative;
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  font-size: .875rem; font-weight: var(--pc-gewicht-halb); color: var(--sh-text); text-decoration: none; background: var(--sh-grund);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sh-e)), calc(100% - var(--sh-e)) 100%, 0 100%);
}
.sh-chip-wahl small { font-size: .75rem; font-weight: 400; color: var(--sh-text-2); font-variant-numeric: tabular-nums; }
.sh-chip-wahl:hover { border-color: var(--sh-text); }
.sh-chip-wahl:hover::after { color: var(--sh-text); }
.sh-chip-wahl[aria-current]::after, .sh-chip-wahl[aria-pressed='true']::after { color: var(--sh-wahl); }
.sh-chip-wahl[aria-current], .sh-chip-wahl[aria-pressed='true'] { border-color: var(--sh-wahl); color: var(--sh-wahl); background: color-mix(in srgb, var(--sh-wahl) 8%, var(--sh-grund)); }

.sh-werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 0; border-top: 1px solid var(--sh-linie); border-bottom: 1px solid var(--sh-linie); }
.sh-werkzeug-anzahl { font-size: .875rem; color: var(--sh-text-2); font-variant-numeric: tabular-nums; }
.sh-werkzeug-anzahl b { color: var(--sh-text); font-weight: var(--pc-gewicht-halb); }
.sh-werkzeug-rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.sh-werkzeug select.sh-eingabe { width: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; font-size: .875rem; }

.sh-filterchips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sh-chip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 2px 0 10px; background: var(--sh-flaeche); border: 1px solid var(--sh-linie); font-size: .8125rem; font-weight: var(--pc-gewicht-halb); color: var(--sh-text); }
.sh-chip button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; background: transparent; color: var(--sh-text-2); cursor: pointer; }
.sh-chip button:hover { color: var(--sh-text); }

.sh-filter { min-width: 0; }
.sh-filter-kopf { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; }
.sh-filtergruppe { border-top: 1px solid var(--sh-linie); }
.sh-filtergruppe:last-child { border-bottom: 1px solid var(--sh-linie); }
.sh-filtergruppe > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; cursor: pointer; list-style: none; }
.sh-filtergruppe > summary::-webkit-details-marker { display: none; }
.sh-filtergruppe > summary .sh-h3 { font-size: .875rem; }
.sh-filtergruppe > summary small { margin-left: 8px; font-size: .75rem; font-weight: var(--pc-gewicht-halb); color: var(--sh-wahl); }
.sh-filtergruppe > summary::after { content: ''; width: 8px; height: 8px; margin-right: 4px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .16s ease; }
.sh-filtergruppe[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.sh-filtergruppe-inhalt { padding: 0 0 16px; }

/* Preisspanne: Spur, gewählter Abschnitt in --sh-wahl, eckige Griffe. */
.sh-spanne { position: relative; height: 28px; margin: 4px 9px 12px; }
.sh-spanne::before { content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--sh-linie); }
.sh-spanne-wahl { position: absolute; top: 13px; height: 2px; background: var(--sh-wahl); }
.sh-spanne-griff { position: absolute; top: 5px; width: 18px; height: 18px; margin-left: -9px; background: var(--sh-grund); border: 2px solid var(--sh-wahl); cursor: grab; }
.sh-spanne-felder { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.sh-spanne-felder .sh-eingabe { min-height: 40px; padding: 8px 10px; font-size: .875rem; font-variant-numeric: tabular-nums; }

.sh-mehr { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 48px; }
.sh-mehr-spur { width: 220px; height: 2px; background: var(--sh-linie); }
.sh-mehr-spur i { display: block; height: 100%; background: var(--sh-text); }


/* ═══ Produktdetailseite ═════════════════════════════════════════ */

.sh-pdp { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .sh-pdp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } }
.sh-galerie { display: grid; gap: 12px; grid-template-columns: 76px minmax(0, 1fr); align-items: start; }
.sh-galerie-leiste { display: flex; flex-direction: column; gap: 8px; }
.sh-galerie-leiste button { padding: 0; border: 1px solid transparent; background: none; cursor: pointer; }
.sh-galerie-leiste button[aria-current='true'] { border-color: var(--sh-wahl); outline: 1px solid var(--sh-wahl); outline-offset: -2px; }
.sh-galerie-leiste .sh-platte { aspect-ratio: 1; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.sh-galerie-leiste .sh-platte img { padding: 6px; }
.sh-galerie-bild { aspect-ratio: 4 / 5; --sh-e: var(--pc-sport-ecke-bild); }
.sh-galerie-bild img { padding: 6% 12%; }
.sh-pdp-info { display: flex; flex-direction: column; gap: 20px; align-self: start; }
@media (min-width: 1024px) { .sh-pdp-info { position: sticky; top: 100px; } }
.sh-pdp-kauf { display: flex; gap: 10px; align-items: stretch; }
.sh-pdp-kauf .sh-tat { flex: 1; }
.sh-pdp-kauf .sh-taste-symbol { width: 56px; height: 56px; border: 1px solid var(--sh-rand); }
.sh-zusagen { display: grid; gap: 10px; margin: 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--sh-linie); font-size: .875rem; }
.sh-zusagen li { display: flex; gap: 10px; align-items: center; }

/* Sprungleiste unter dem Kaufbereich — die Kapitelleiste des
   Sport-Registers als Anker, nicht als Reiter: Der Shop zeigt alles
   untereinander, damit die Suche der Seite nichts verbirgt. */
.sh-sprungleiste { position: sticky; top: 77px; z-index: 30; background: var(--sh-grund); border-bottom: 1px solid var(--sh-linie); }
.sh-sprungleiste ul { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.sh-sprungleiste a { position: relative; display: inline-flex; align-items: center; min-height: 52px; white-space: nowrap; font-size: .875rem; font-weight: var(--pc-gewicht-sport-titel); font-stretch: var(--pc-breite-sport-sub); text-transform: uppercase; color: var(--sh-text-2); text-decoration: none; }
.sh-sprungleiste a:hover, .sh-sprungleiste a[aria-current] { color: var(--sh-text); }
/* Sprungmarken, keine Reiter (D11 der Gegenpruefung): der aktuelle
   Abschnitt nur in Textfarbe, ohne Unterstrich. Auf dem Telefon eine Zeile,
   die seitlich scrollt; der Verlauf rechts zeigt, dass es weitergeht. */
@media (max-width: 759px) {
  .sh-sprungleiste ul { gap: 22px; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); padding-right: 32px; }
}

/* Merkmal und Wert — die Form von SpDaten, im Shop enger. */
.sh-daten { margin: 0; }
.sh-daten > div { display: grid; gap: 2px 24px; padding: .7rem 0; border-top: 1px solid var(--sh-linie); }
.sh-daten > div:last-child { border-bottom: 1px solid var(--sh-linie); }
.sh-daten dt { font-size: .8125rem; font-weight: var(--pc-gewicht-halb); color: var(--sh-text-2); }
.sh-daten dd { margin: 0; font-size: .9375rem; font-variant-numeric: tabular-nums; }
@media (min-width: 600px) { .sh-daten > div { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); align-items: baseline; } }

/* Das Set: eine Aktionsfläche im Kaufbereich. */
.sh-set { padding: 20px; }
.sh-set-ware { display: flex; align-items: center; gap: 8px; margin: 14px 0; }
.sh-set-ware .sh-platte { width: 72px; height: 72px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.sh-set-ware .sh-platte img { padding: 6px; }
.sh-set-plus { font-size: 1.25rem; font-weight: var(--pc-gewicht-sport); color: var(--sh-akzent); }


/* ═══ Bewertungen ════════════════════════════════════════════════
   Unter jeder Übersicht steht, ob und wie Bewertungen geprüft
   werden (§ 5b Abs. 3 UWG). Die Zeile ist Teil der Figur. */

.sh-wertung { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .sh-wertung { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; } }
.sh-wertung-zahl { font-size: 4rem; line-height: .9; font-weight: var(--pc-gewicht-sport); font-stretch: var(--pc-breite-sport); font-variant-numeric: tabular-nums; }
.sh-verteilung { display: grid; gap: 6px; margin: 20px 0 0; padding: 0; list-style: none; }
.sh-verteilung li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) 2.6em; gap: 10px; align-items: center; font-size: .8125rem; color: var(--sh-text-2); font-variant-numeric: tabular-nums; }
.sh-verteilung li > span:last-child { text-align: right; }
.sh-verteilung-spur { height: 8px; background: var(--sh-linie); }
.sh-verteilung-spur i { display: block; height: 100%; background: var(--sh-text); }
.sh-bewertung { padding: 22px 0; border-top: 1px solid var(--sh-linie); }
.sh-bewertung:last-child { border-bottom: 1px solid var(--sh-linie); }
.sh-bewertung-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.sh-bewertung-meta { font-size: .8125rem; color: var(--sh-text-2); }
.sh-bewertung-geprueft { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: var(--pc-gewicht-halb); color: var(--sh-text); }
.sh-bewertung-antwort { margin: 16px 0 0 24px; padding: 14px 16px; background: var(--sh-flaeche); font-size: .9375rem; }
.sh-bewertung-fuss { display: flex; gap: 16px; align-items: center; margin-top: 12px; font-size: .8125rem; color: var(--sh-text-2); }


/* ═══ Warenkorb ══════════════════════════════════════════════════ */

.sh-korb { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .sh-korb { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; } }
.sh-zeile { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 8px 20px; padding: 20px 0; border-top: 1px solid var(--sh-linie); }
.sh-zeile:last-child { border-bottom: 1px solid var(--sh-linie); }
.sh-zeile .sh-platte { grid-row: span 2; width: 104px; aspect-ratio: 1; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.sh-zeile .sh-platte img { padding: 8px; }
.sh-zeile-name { font-weight: var(--pc-gewicht-halb); line-height: 1.35; color: var(--sh-text); text-decoration: none; }
.sh-zeile-name:hover { text-decoration: underline; }
.sh-zeile-angaben { margin: 4px 0 0; font-size: .8125rem; color: var(--sh-text-2); }
.sh-zeile .sh-preis { justify-content: flex-end; text-align: right; }
.sh-zeile .sh-preis-zeile { text-align: right; }
.sh-zeile-tun { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.sh-zeile-klein { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 4px 14px; padding: 14px 0; }
.sh-zeile-klein .sh-platte { width: 64px; grid-row: span 1; }

/* Die Strecke bis zum freien Versand. Die Füllung endet schräg. */
.sh-versandziel { padding: 14px 16px; background: var(--sh-flaeche); font-size: .875rem; }
.sh-versandziel-spur { height: 6px; margin-top: 10px; background: var(--sh-linie); }
.sh-versandziel-spur i { display: block; height: 100%; background: var(--sh-text); clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.sh-versandziel-erreicht { display: flex; align-items: center; gap: 8px; font-weight: var(--pc-gewicht-halb); }

.sh-summe { padding: 24px; background: var(--sh-flaeche); }
.sh-summe dl { margin: 0; }
.sh-summe dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.sh-summe dt { color: var(--sh-text-2); }
.sh-summe dd { margin: 0; }
.sh-summe .sh-summe-gesamt { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--sh-rand); align-items: baseline; }
.sh-summe .sh-summe-gesamt dt { color: var(--sh-text); font-weight: var(--pc-gewicht-halb); }
.sh-summe .sh-summe-gesamt dd { font-size: 1.75rem; line-height: 1; font-weight: var(--pc-gewicht-sport); font-stretch: var(--pc-breite-sport); }
.sh-summe-nachlass dd { font-weight: var(--pc-gewicht-halb); }

/* Die Schublade: rechts, mit Schleier statt Schatten. */
.sh-schublade { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(420px, 100vw); display: flex; flex-direction: column; background: var(--sh-grund); border-left: 1px solid var(--sh-linie); }
.sh-schublade-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 24px; border-bottom: 1px solid var(--sh-linie); }
.sh-schublade-inhalt { flex: 1; overflow-y: auto; padding: 8px 24px 24px; }
.sh-schublade-fuss { display: grid; gap: 10px; padding: 20px 24px 24px; border-top: 1px solid var(--sh-linie); }


/* ═══ Kasse ══════════════════════════════════════════════════════
   Eigener, reduzierter Kopf: kein Sortiment, keine Suche. Der
   letzte Knopf heißt „Zahlungspflichtig bestellen" (§ 312j BGB)
   und nichts anderes. */

.sh-kasse-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; border-bottom: 1px solid var(--sh-linie); }
.sh-schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.sh-schritte li { counter-increment: schritt; display: flex; flex-direction: column; gap: 8px; font-size: .8125rem; font-weight: var(--pc-gewicht-halb); color: var(--sh-text-2); }
.sh-schritte li::before { content: ''; height: 4px; background: var(--sh-linie); clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.sh-schritte li span::before { content: counter(schritt) ' · '; font-variant-numeric: tabular-nums; }
.sh-schritte li.fertig { color: var(--sh-text); }
.sh-schritte li.fertig::before { background: var(--sh-text); }
.sh-schritte li[aria-current] { color: var(--sh-text); }
.sh-schritte li[aria-current]::before { background: var(--sh-wahl); }
.sh-kasse-block { padding: 20px 0; border-top: 1px solid var(--sh-linie); }
.sh-kasse-block-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sh-rechtszeile { font-size: .8125rem; line-height: 1.55; color: var(--sh-text-2); }
.sh-rechtszeile a { color: var(--sh-text); }


/* ═══ Schlägervergleich ══════════════════════════════════════════ */

.sh-vergleich-rahmen { overflow-x: auto; }
.sh-vergleich { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; font-size: .9375rem; }
.sh-vergleich th, .sh-vergleich td { padding: 12px 16px 12px 0; border-top: 1px solid var(--sh-linie); text-align: left; vertical-align: top; font-variant-numeric: tabular-nums; }
.sh-vergleich thead th { border-top: 0; padding-bottom: 20px; vertical-align: bottom; }
.sh-vergleich tbody th { width: 180px; font-size: .8125rem; font-weight: var(--pc-gewicht-halb); color: var(--sh-text-2); }
.sh-vergleich-gruppe th { padding-top: 28px; border-top: 0; font-size: .75rem; font-weight: var(--pc-gewicht-bez); font-stretch: var(--pc-breite-bez); letter-spacing: var(--pc-sperrung-bez); text-transform: uppercase; color: var(--sh-akzent) !important; }
/* Zeilen, in denen sich die Schläger unterscheiden, tragen den
   Strich vor der Beschriftung — „Nur Unterschiede" blendet den Rest aus. */
.sh-vergleich tr.anders th:first-child::before { content: ''; display: inline-block; width: 12px; height: 2px; margin-right: 8px; vertical-align: middle; background: var(--sh-akzent); }
.sh-vergleich-kopf { display: flex; flex-direction: column; gap: 8px; }
.sh-vergleich-kopf .sh-platte { aspect-ratio: 4 / 5; max-width: 160px; }
.sh-vergleich-kopf .sh-platte img { padding: 8%; }

/* Die Vergleichsleiste: dunkel, am unteren Rand, solange gewählt ist. */
.sh-vergleichsleiste { position: sticky; bottom: 0; z-index: 30; }
.sh-vergleichsleiste-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; min-height: 80px; padding-top: 12px; padding-bottom: 12px; }
.sh-vergleichsleiste-plaetze { display: flex; gap: 8px; }
.sh-vergleichsleiste-platz { position: relative; width: 56px; height: 56px; }
.sh-vergleichsleiste-platz .sh-platte { width: 100%; height: 100%; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.sh-vergleichsleiste-platz .sh-platte img { padding: 4px; }
.sh-vergleichsleiste-leer { border: 1px dashed var(--sh-rand); display: grid; place-items: center; font-size: .6875rem; color: var(--sh-text-2); }


/* ═══ Konto ══════════════════════════════════════════════════════ */

.sh-konto { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .sh-konto { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; } }
.sh-konto-nav { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.sh-konto-nav a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding-left: 14px; color: var(--sh-text-2); text-decoration: none; font-size: .9375rem; }
.sh-konto-nav a:hover { color: var(--sh-text); }
.sh-konto-nav a[aria-current] { color: var(--sh-text); font-weight: var(--pc-gewicht-halb); }
.sh-konto-nav a[aria-current]::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--sh-wahl); }
.sh-konto-nav small { font-size: .75rem; color: var(--sh-text-2); font-variant-numeric: tabular-nums; }

.sh-status { display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; font-weight: var(--pc-gewicht-halb); white-space: nowrap; }
.sh-status::before { content: ''; width: 8px; height: 8px; background: var(--sh-text); }
.sh-status-offen::before { background: transparent; border: 1px solid var(--sh-text); }
.sh-status-fertig { color: var(--sh-lager); }
.sh-status-fertig::before { background: var(--sh-lager); }
.sh-status-still { color: var(--sh-text-2); }
.sh-status-still::before { background: transparent; border: 1px solid var(--sh-text-2); }

/* Sendungsverlauf: vier Glieder mit schrägem Ende. */
.sh-verlauf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.sh-verlauf li { display: flex; flex-direction: column; gap: 6px; font-size: .75rem; color: var(--sh-text-2); }
.sh-verlauf li::before { content: ''; height: 6px; background: var(--sh-linie); clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.sh-verlauf li.fertig { color: var(--sh-text); }
.sh-verlauf li.fertig::before { background: var(--sh-text); }
.sh-verlauf li b { font-weight: var(--pc-gewicht-halb); color: var(--sh-text); }

.sh-bestellung { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto auto; gap: 12px 24px; align-items: center; padding: 16px 0; border-top: 1px solid var(--sh-linie); }
.sh-bestellung:last-child { border-bottom: 1px solid var(--sh-linie); }
.sh-bestellung-ware { display: flex; gap: 6px; }
.sh-bestellung-ware .sh-platte { width: 48px; height: 48px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); }
.sh-bestellung-ware .sh-platte img { padding: 4px; }
@media (max-width: 759px) { .sh-bestellung { grid-template-columns: 1fr auto; } .sh-bestellung-ware { grid-column: 1 / -1; } }


/* ═══ Fußzeile ═══════════════════════════════════════════════════
   Im Markenraum, mit der gelben Schräge oben — derselbe Abschluss
   wie auf jeder Unterseite von padelcore.eu (E131). */

.sh-fuss { position: relative; padding-top: calc(var(--pc-trenner-hoehe) + 100vw * tan(var(--pc-trenner-winkel))); }
.sh-fuss-spalten { display: grid; gap: 32px 48px; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); padding-top: 48px; padding-bottom: 40px; }
.sh-fuss-liste { display: flex; flex-direction: column; margin: 10px 0 0; padding: 0; list-style: none; }
.sh-fuss-liste a { display: inline-flex; align-items: center; min-height: 36px; font-size: .875rem; color: var(--sh-text-2); text-decoration: none; }
.sh-fuss-liste a:hover { color: var(--sh-akzent); }
.sh-fuss-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 20px; padding-bottom: 24px; border-top: 1px solid var(--sh-linie); font-size: .8125rem; color: var(--sh-text-2); }
.sh-fuss-zahlung { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-fuss-zahlung span { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid var(--sh-linie); font-size: .75rem; font-weight: var(--pc-gewicht-halb); color: var(--sh-text); }

@media (prefers-reduced-motion: reduce) {
  .sh-kachel-bild img, .sh-bereich .sh-platte img, .sh-kachel-schnell { transition: none; }
  .sh-kachel:hover .sh-kachel-bild img, .sh-bereich:hover .sh-platte img { transform: none; }
}