/* ═══ Startseite und Markenseite ═════════════════════════════════
   Zusammengesetzt aus den Bausteinen der Uebergabe; die Abstaende, die in
   den Referenzen als style-Attribut stehen, stehen hier. */

/* Volle Fensterbreite aus der Inhaltsspalte heraus (Aktion, Laufband). */
.sh-vollbreit { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* Der Inhalt der Startseite beginnt ohne Abstand unter der Sortimentsleiste. */
.home .site-content { padding-top: 0; }
.home .entry-content > * + * { margin-top: 0; }


/* Grosse Aktion */
.sh-startkopf .sh-schlag { margin-top: 16px; }
.sh-startkopf .sh-text { margin-top: 22px; max-width: 40ch; }
.sh-startkopf-tasten { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sh-aktion-artikel { position: relative; display: block; color: var(--sh-text); text-decoration: none; }
.sh-aktion-artikel .sh-platte { aspect-ratio: 3 / 4; }
.sh-aktion-flaggen { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 4px; }
.sh-aktion-name { display: block; margin-top: 10px; color: var(--sh-text); }
.sh-aktion-artikel .sh-preis { margin-top: 4px; }
.sh-aktion-artikel:hover .sh-aktion-name { text-decoration: underline; }
.sh-aktion-artikel .sh-platte img { transition: transform .35s ease; }
.sh-aktion-artikel:hover .sh-platte img { transform: scale(1.04); }
@media (max-width: 599px) { .sh-aktion-ware { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .sh-aktion-artikel .sh-preis-jetzt { font-size: 1.0625rem; } }

/* Kollektion: das Raster aus dem [products]-Kurzcode */
.sh-kollektion .woocommerce { margin: 0; }

/* Laufband */
.sh-marken-kopf { padding-bottom: 0; }
.sh-laufband { padding: 4px 0 22px; }

/* Paket */
.sh-paket-liste { display: grid; gap: 24px 32px; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .sh-paket-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sh-paket-liste li { display: flex; gap: 14px; align-items: flex-start; padding-top: 16px; border-top: 1px solid var(--sh-linie); }
.sh-paket-liste .sh-symbol { margin-top: 1px; }
.sh-paket-liste .sh-text { margin-top: 6px; }

/* Breite Seiten: keine Lesebreite, Textfarbe wie im Register. */
.sh-seite-breit .entry-content { max-width: none; color: var(--sh-text); }

/* Markenseite: Logo auf der Platte, Name und Anzahl darunter - auf der
   Platte stuende der Name ueber dem Logo. */
.sh-markenseite-text { margin-top: 10px; }
.sh-markenraster { margin-top: 8px; }
@media (min-width: 1100px) { .sh-markenraster { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sh-marke .sh-platte { aspect-ratio: 3 / 2; }
.sh-marke .sh-platte img { padding: 16% 20%; object-fit: contain; }
.sh-marke .sh-bereich-name { position: static; display: block; margin-top: 10px; font-size: 1.125rem; }
.sh-marke:hover .sh-bereich-name { text-decoration-thickness: 2px; }

/* Bereiche: Das Register stellt vier Spalten (acht Bereiche im Entwurf).
   Solange es weniger sind, keine einzelne Kachel in der zweiten Reihe. */
@media (min-width: 1100px) {
  .sh-bereiche--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sh-bereiche--3, .sh-bereiche--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .sh-bereiche--3, .sh-bereiche--5, .sh-bereiche--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Neuheiten und Limitierte Editionen (inc/neuheiten.php) */
.sh-neuheiten-kopf .sh-bez { margin-top: 18px; }
.sh-neuheiten-kopf .sh-h1 { margin-top: 8px; }
.sh-neuheiten-kopf .sh-text { margin-top: 10px; }
.sh-neuheiten-kopf + nav .sh-schnellwahl { margin-top: 4px; }

/* ═══ Startseite nach Padel Nuestro (C27) ═══════════════════════════ */

/* Zwei Kollektionskacheln unter der Kampagne */
.sh-kollmarken { display: grid; gap: var(--sh-luecke); grid-template-columns: minmax(0, 1fr); padding-top: var(--sh-luecke); }
@media (min-width: 760px) { .sh-kollmarken { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sh-kollmarke {
  --sh-e: var(--sh-ecke-platte);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 8px;
  min-height: 200px; padding: 20px 8px 20px 24px; overflow: hidden;
  color: var(--sh-text); text-decoration: none; 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-kollmarke-text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sh-kollmarke-name { display: block; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1; font-weight: var(--pc-gewicht-sport); font-stretch: var(--pc-breite-sport); text-transform: uppercase; }
/* Herstellerlogos alle gleich hoch, 24 px (Marco, 31.10.2026, Kap. 55, D3). */
.sh-kollmarke-name img { display: block; width: auto; max-width: 140px; height: 24px; object-fit: contain; object-position: left center; mix-blend-mode: multiply; }
.sh-kollmarke .sh-klein { color: var(--sh-text-2); }
.sh-kollmarke .sh-verweis { margin-top: 4px; }
.sh-kollmarke:hover .sh-verweis { text-decoration: underline; }
.sh-kollmarke-ware { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 100%; min-height: 180px; }
.sh-kollmarke-ware img { width: 40%; max-width: 140px; height: auto; aspect-ratio: 4 / 5; object-fit: contain; mix-blend-mode: multiply; margin: 0 1%; transition: transform .35s ease; }
.sh-kollmarke-ware img:nth-child(2) { position: relative; z-index: 1; }
.sh-kollmarke:hover .sh-kollmarke-ware img:nth-child(2) { transform: translateY(-3%); }
@media (max-width: 759px) {
  .sh-kollmarke { min-height: 0; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: 16px 8px 16px 16px; }
  .sh-kollmarke .sh-verweis { white-space: nowrap; }
  .sh-kollmarke-ware { min-height: 140px; }
  .sh-kollmarke-name img { height: 30px; max-width: 130px; }
}

/* Abschnitte mit Reitern */
.sh-reiter-leiste { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.sh-reiter-leiste .sh-chip-wahl { white-space: nowrap; }
.sh-chip-wahl[aria-selected='true'] { border-color: var(--sh-wahl); color: var(--sh-wahl); background: color-mix(in srgb, var(--sh-wahl) 8%, var(--sh-grund)); }
.sh-chip-wahl[aria-selected='true']::after { color: var(--sh-wahl); }
.sh-reiter-feld .sh-raster { --sh-spalten: 5; }
.sh-reiter-feld[hidden] { display: none; }
.sh-reiter-mehr { display: inline-flex; margin-top: 20px; }
.sh-reiter-feld .woocommerce { margin: 0; }

/* Sortiment kompakt: eine Reihe, Name unter der Platte */
@media (min-width: 760px) { .sh-bereiche-kompakt { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sh-bereiche-kompakt { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sh-bereiche-kompakt .sh-platte { aspect-ratio: 1; }
.sh-bereiche-kompakt .sh-platte img { padding: 14%; }
.sh-bereiche-kompakt .sh-bereich-name { position: static; display: block; margin-top: 10px; font-size: 1.125rem; }

/* Niveau */
.sh-niveau-raster { display: grid; gap: var(--sh-luecke); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .sh-niveau-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sh-niveau-kachel { display: flex; flex-direction: column; color: var(--sh-text); text-decoration: none; }
.sh-niveau-kachel .sh-platte { aspect-ratio: 4 / 3; }
.sh-niveau-kachel .sh-platte img { padding: 8% 20%; transition: transform .35s ease; }
.sh-niveau-kachel:hover .sh-platte img { transform: scale(1.05); }
.sh-niveau-name { margin-top: 12px; font-size: 1.25rem; line-height: 1; font-weight: var(--pc-gewicht-sport); font-stretch: var(--pc-breite-sport); text-transform: uppercase; }
.sh-niveau-kachel:hover .sh-niveau-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.sh-niveau-text { margin-top: 6px; color: var(--sh-text-2); }
.sh-niveau-zahl { margin-top: 6px; color: var(--sh-text-2); font-variant-numeric: tabular-nums; }

/* Starttext am Ende */
.sh-starttext { max-width: 68ch; color: var(--sh-text-2); border-top: 1px solid var(--sh-linie); }
.sh-starttext .sh-h2 { margin-bottom: 12px; color: var(--sh-text); }
.sh-starttext .sh-h3 { margin: 24px 0 8px; color: var(--sh-text); }
.sh-starttext p { margin: 0 0 12px; line-height: 1.62; }
.sh-starttext a { color: var(--sh-text); }

@media (prefers-reduced-motion: reduce) {
  .sh-kollmarke-ware img, .sh-niveau-kachel .sh-platte img { transition: none; }
  .sh-kollmarke:hover .sh-kollmarke-ware img:nth-child(2), .sh-niveau-kachel:hover .sh-platte img { transform: none; }
}

/* Reihen zum Wischen auf dem Telefon: eine Zeile, die Nachbarkachel
   angeschnitten, damit man sieht, dass es weitergeht. Steht am Ende,
   weil es die Spalten der Raster darueber aufhebt. */
@media (max-width: 759px) {
  .sh-wischen, .sh-reiter-feld .sh-raster {
    display: grid; grid-auto-flow: column; grid-template-columns: none;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-left: calc(-1 * var(--sh-rand-seite, 16px)); margin-right: calc(-1 * var(--sh-rand-seite, 16px));
    padding-left: var(--sh-rand-seite, 16px); padding-right: var(--sh-rand-seite, 16px);
    scroll-padding-left: var(--sh-rand-seite, 16px); scrollbar-width: none;
  }
  .sh-wischen::-webkit-scrollbar, .sh-reiter-feld .sh-raster::-webkit-scrollbar { display: none; }
  .sh-wischen > *, .sh-reiter-feld .sh-raster > * { scroll-snap-align: start; }
  .sh-bereiche-kompakt { grid-auto-columns: 36%; }
  .sh-niveau-raster { grid-auto-columns: 44%; }
  .sh-reiter-feld .sh-raster { grid-auto-columns: 42%; }
  .sh-reiter-leiste.sh-wischen { display: flex; flex-wrap: nowrap; gap: 8px; }
  .sh-reiter-leiste > * { flex: none; }
}