/* ============================================================================
   startseite.css - nur was die Startseite ueber bbc08.css hinaus braucht.

   bbc08.css traegt den Stilblock des Templates vollstaendig und die
   gemeinsamen Bausteine des Grundkonstrukts (Abschnitt C). Hier stehen
   vier Ergaenzungen, die erst durch echte Daten noetig werden:
     1  Kurzmeldungsband bei 901-1300px: drei Eintraege als Gruppe mittig
     2  Newsbilder als <picture> (bild_picture, ADR-0002)
     3  leere Angaben in der Infozeile der Buehne
     4  Trainingsplan mit anderen Tagen oder Zeiten als im Template
   Der Platzhalter an Stelle eines Knopfs ist die Huelle .p-fehlt aus
   bbc08.css (C3), keine eigene Klasse mehr.
   ========================================================================= */

/* ---- 1 · Kurzmeldungsband 901-1300px: drei Eintraege, Gruppe mittig ---
   Das Band traegt fuenf Plaetze (start_kurzmeldungen_html). Bis 1300px
   zeigt das Template davon drei in drei gleich breiten Spalten ueber die
   volle Zeile. In dieser Stufe gilt die Regel der live abgenommenen
   30_Design/index.html: feste Hoechstbreite je Spalte, die Gruppe mittig,
   der erste Eintrag bekommt seinen Innenabstand zurueck. Nur hier: bis
   900px ist das Band einspaltig, ab 1301px stehen alle fuenf in einer
   Reihe (bbc08.css, Design-Erkenntnisse §5). Ohne
   die Grenze schlug diese Regel ab 1301px die Spalten des Templates, und
   die Meldungen standen in zwei Reihen. */
@media (min-width: 901px) and (max-width: 1300px) {
  .p-strip .p-wrap { grid-template-columns: repeat(3, minmax(0, 21rem));
                     justify-content: center; }
  .p-strip a:first-child { padding-left: var(--s8); }
}

/* ---- 2 · Newsbilder --------------------------------------------------
   bild_picture() liefert <picture> um das <img>. .p-shot ist ein Raster
   und rechnet mit dem <img> als einzigem Rasterkind (.p-shot img: 100 %
   hoch und breit, object-fit: cover). Die Huelle nimmt deshalb selbst die
   ganze Flaeche, und das <img> fuellt sie. NICHT display: contents - dann
   werden die <source>-Elemente zu eigenen Rasterzeilen, und das Bild
   rutscht um deren Anteil nach unten (gemessen 28.09.2026). */
.p-shot > picture { display: block; width: 100%; height: 100%; }

/* ---- 3 · Infozeile der Buehne ohne Termin -----------------------------
   Hat eine Mannschaft keinen Termin, bleiben Datum und Ort leer. Der
   Trennpunkt davor kommt aus ::before und stuende sonst allein da. */
.p-meta > span:empty { display: none; }

/* ---- 4 · Trainingsplan mit anderem Raster ------------------------------
   bbc08.css baut das Raster fuer vier Tage und neun Halbstunden
   (Montag bis Donnerstag, 16:30 bis 21:00). Weichen die Daten davon ab,
   setzt index.php data-raster und die Masse als Eigenschaften:
     --p-plan-bahnen    vier Bahnen je Tag
     --p-plan-schritte  Zahl der Halbstunden
     --p-plan-reihen    der Tagesblock so oft, wie es Tage gibt (schmal)
   Die Zeilenmuster bleiben die des Templates (32px breit, 22px schmal). */
.p-plan[data-raster] {
  --p-plan-block: auto repeat(var(--p-plan-schritte), minmax(32px, auto)) auto;
  grid-template-columns: auto repeat(var(--p-plan-bahnen), minmax(0, 1fr));
}
@media (max-width: 1300px) {
  .p-plan[data-raster] {
    --p-plan-block: auto repeat(var(--p-plan-schritte), minmax(22px, auto)) auto;
    grid-template-columns: auto repeat(4, minmax(0, 1fr));
    grid-template-rows: var(--p-plan-reihen);
  }
}
/* Eintraege, die nicht ins Raster passen, stehen als Tabelle darunter. */
.p-plan + table.t { margin-top: var(--s6); }

/* ---- 5 · Vereinsshop: das Schaufenster (app/bausteine/start_shop.php) ----
   Gewaehlt am 30.09.2026 (Vorschlag C). Weisse Flaeche (p-sec--alt) direkt
   nach dem Kurzmeldungsband - damit laeuft die Folge weiss, grau, gruen:
   Shop, Spieltag, Mitglied werden, Mannschaften, Termine, Sponsoren.

   .p-shop__held    der gruene Hoody gross auf dunkler Buehne, von oben ein
                    Lichtkegel, unten ein Lichtfleck als Standflaeche - in
                    beiden Themen dunkel wie die Baender (--p-band).
   .p-shop__kachel  die uebrigen Artikel: Vitrine (heller Grund mit Licht
                    von oben, Sims, weicher Schatten - in beiden Themen
                    gleich, wie das Logoschild der Sponsoren), darunter
                    Kurzname und Preis. Nur der Kachelrahmen folgt dem
                    Thema.
   Die meisten Artikel sind schwarz: jeder steht auf hellem Grund oder unter
   einem Lichtfleck - nie Schwarz auf Schwarz.

   Breiten (nur Zahlen der Leiter)
     bis 480    Held hochkant ueber der Wischreihe, eine Kachel mittig
     481-640    Held quer, Wischreihe mit zwei Kacheln mittig
     641-900    Held quer ueber die volle Breite, Raster drei Spalten
     ab 901     Held links (zwei Kachelbreiten), Raster drei mal drei */

/* Das Licht der Buehne wandert weich mit der Maus (startseite.js).
   Registriert, damit der Uebergang rechnen kann. */
@property --p-shop-lx {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* ---- Farben der Vitrine ------------------------------------------------ */
/* Die Vitrine ist in beiden Themen hell - wie das Logoschild der
   Sponsorentafel (.p-partner__logo), der Rahmen der Kachel folgt dem
   Thema. Im dunklen Thema ist sie eine Spur grauer, damit sie neben dem
   fast schwarzen Grund nicht grell wirkt (Auftraggeber 30.09.2026). */
.p-shop {
  --p-shop-luft: var(--s6);
  --p-shop-rahmen:     #e3e5e7;              --p-shop-rahmen:     light-dark(#e3e5e7, #2c2c2c);
  --p-shop-oben:       #f5f6f7;              --p-shop-oben:       light-dark(#f5f6f7, #e5e7e9);
  --p-shop-unten:      #e7e9eb;              --p-shop-unten:      light-dark(#e7e9eb, #d5d8db);
  --p-shop-licht:      #ffffff;              --p-shop-licht:      light-dark(#ffffff, #f3f4f5);
  --p-shop-licht-an:   #ffffff;              --p-shop-licht-an:   light-dark(#ffffff, #fafafa);
  --p-shop-sims:       #dde0e3;              --p-shop-sims:       light-dark(#dde0e3, #cacdd1);
  --p-shop-simskante:  rgba(255, 255, 255, .95);
  --p-shop-schatten:   rgba(0, 0, 0, .32);
  --p-shop-anhebung:   rgba(0, 0, 0, .12);
}

/* Der Knopf im Kopf traegt den Pfeil "fuehrt hinaus". */
.p-shop .p-shop__pfeil { flex: none; }
/* Bis 480 ist die Ueberschrift klein (--p-t-hero haengt an der
   Fensterbreite) - der Knopf daneben nimmt dort die kleine Groesse
   (Masse wie .btn--sm), sonst ueberragt er sie. */
@media (max-width: 480px) {
  .p-shop .p-shop__zumshop { height: auto; min-height: var(--h-btn-sm); padding: 0 var(--s5);
                             font-size: var(--t-label); }
}

/* ---- Fenster: Held und Raster ------------------------------------------ */
.p-shop .p-shop__fenster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--p-shop-luft);
}
.p-shop .p-shop__raster { list-style: none; margin: 0; padding: 0; }
.p-shop .p-shop__platz { display: flex; min-width: 0; }

/* ---- Held: der gruene Hoody -------------------------------------------- */
.p-shop .p-shop__held {
  /* Lage des Artikels; die Stufen unten setzen andere Werte. */
  --p-shop-hx: 50%;        /* waagerechte Mitte des Artikels */
  --p-shop-hboden: 136px;  /* Standflaeche, von unten - ueber dem Schild */
  --p-shop-hhoehe: calc(100% - 136px - 26px);  /* Hoehe des Bildes */
  position: relative; display: block; overflow: hidden; isolation: isolate;
  aspect-ratio: 1 / 1.15;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .07);
  background: #070707;
  color: var(--p-band-fg);
  text-decoration: none;
  transition: transform .15s var(--ease), box-shadow var(--normal) var(--ease),
              --p-shop-lx .7s var(--ease);
}
.p-shop .p-shop__held:hover { text-decoration: none; }

/* Lichtkegel von oben, Lampe am oberen Rand, Lichtfleck als Standflaeche.
   --p-shop-lx (-1 bis 1) neigt den Kegel zur Maus hin. */
.p-shop .p-shop__licht {
  --p-shop-lampe: calc(var(--p-shop-hx) + var(--p-shop-lx) * 4%);
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 34% 5% at var(--p-shop-lampe) calc(100% - var(--p-shop-hboden)),
                    rgba(23, 171, 82, .30), transparent 72%),
    radial-gradient(ellipse 46% 9% at var(--p-shop-lampe) calc(100% - var(--p-shop-hboden)),
                    rgba(255, 255, 255, .15), transparent 72%),
    radial-gradient(ellipse 22% 9% at var(--p-shop-lampe) 0%,
                    rgba(255, 255, 255, .42), transparent 72%),
    linear-gradient(180deg, transparent 35%, rgba(7, 7, 7, .6) 100%),
    conic-gradient(from calc(157deg - var(--p-shop-lx) * 7deg) at var(--p-shop-lampe) -14%,
                   transparent 0deg, rgba(255, 255, 255, .07) 8deg,
                   rgba(255, 255, 255, .15) 23deg, rgba(255, 255, 255, .07) 38deg,
                   transparent 46deg, transparent 360deg);
  transition: opacity var(--normal) var(--ease), filter var(--normal) var(--ease);
}

.p-shop .p-shop__held .p-shop__bild {
  position: absolute; z-index: 1;
  left: var(--p-shop-hx); bottom: var(--p-shop-hboden);
  height: var(--p-shop-hhoehe); width: auto; max-width: 78%;
  object-fit: contain; object-position: 50% 100%;
  transform: translateX(-50%);
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .6));
  transition: transform .45s var(--ease);
}

.p-shop .p-shop__held .p-shop__schild {
  position: absolute; z-index: 2;
  left: var(--s6); right: var(--s6); bottom: var(--s6);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2);
}
.p-shop .p-shop__held .p-shop__name {
  font-family: var(--p-font-display); font-stretch: 82%; font-weight: 700;
  text-transform: uppercase; line-height: .94; letter-spacing: .005em;
  font-size: clamp(1.9rem, 3.4vw, 3.2rem);
  color: #ffffff;
}
.p-shop .p-shop__held .p-shop__preis {
  font-size: 1.05rem; font-weight: 600; color: var(--p-band-fg);
  font-variant-numeric: tabular-nums;
}
.p-shop .p-shop__held .p-shop__mehr {
  display: inline-flex; align-items: center; gap: var(--s3);
  margin-top: var(--s4);
  height: var(--h-btn); padding: 0 16px;
  border-radius: var(--r-lg);
  background: var(--accent-500); color: var(--accent-fg);
  font-size: var(--t-xs); font-weight: 600; line-height: 1;
  letter-spacing: var(--tr-btn); text-transform: uppercase; white-space: nowrap;
  transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

/* ---- Kachel ------------------------------------------------------------ */
.p-shop .p-shop__kachel {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--p-shop-rahmen);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--fg-1); text-decoration: none;
  transition: transform .15s var(--ease), border-color var(--fast) var(--ease),
              box-shadow var(--normal) var(--ease);
}
.p-shop .p-shop__kachel:hover { text-decoration: none; }

/* Vitrine: Licht von oben, Rueckwand, Sims mit heller Kante.
   --p-shop-simsh ist die Hoehe des Simses; der Artikel steht auf seiner
   Kante (--p-shop-kante), "Im Shop ansehen" liegt darauf. Mindestens
   30px, damit das 24px hohe Schild auch in schmalen Kacheln ganz auf dem
   Sims liegt und den Fuss des Artikels nicht verdeckt. */
.p-shop .p-shop__vitrine {
  --p-shop-simsh: max(17%, 30px);
  --p-shop-kante: calc(100% - var(--p-shop-simsh));
  position: relative; display: block;
  aspect-ratio: 5 / 4;
  background:
    radial-gradient(ellipse 72% 62% at var(--p-shop-mx, 50%) var(--p-shop-my, 24%),
                    var(--p-shop-licht), transparent 72%),
    linear-gradient(180deg, transparent 0 var(--p-shop-kante),
                    var(--p-shop-simskante) var(--p-shop-kante) calc(var(--p-shop-kante) + 1px),
                    var(--p-shop-sims) calc(var(--p-shop-kante) + 1px) 100%),
    linear-gradient(180deg, var(--p-shop-oben), var(--p-shop-unten) var(--p-shop-kante));
}
/* Weicher Schatten unter dem Artikel, auf dem Sims. */
.p-shop .p-shop__vitrine::after {
  content: ""; position: absolute; z-index: 0;
  left: 20%; right: 20%; height: 9%;
  bottom: calc(var(--p-shop-simsh) - 5.5%);
  background: radial-gradient(closest-side, var(--p-shop-schatten), transparent);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
/* Das Bild steht mit seiner Unterkante auf der Simskante. Oben bleiben
   9% Luft - so viel steigt der Artikel beim Ueberfahren, ohne an die
   Oberkante zu stossen. */
.p-shop .p-shop__vitrine .p-shop__bild {
  position: absolute; z-index: 1;
  left: 10%; width: 80%;
  top: 9%; height: calc(var(--p-shop-kante) - 8%);
  object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 6px 8px var(--p-shop-anhebung));
  transition: transform .35s var(--ease);
}
/* Muetze und Cap sind in Wirklichkeit kleiner - sie stehen kleiner da. */
.p-shop .p-shop__kachel[data-art="kopf"] .p-shop__bild { top: 24%; height: calc(var(--p-shop-kante) - 23%); }
.p-shop .p-shop__kachel[data-art="kopf"] .p-shop__vitrine::after { left: 30%; right: 30%; }
/* Der Schirm ist breiter als hoch und darf die Breite nehmen. */
.p-shop .p-shop__kachel[data-art="zubehoer"] .p-shop__bild { left: 6%; width: 88%; top: 12%; height: calc(var(--p-shop-kante) - 11%); }

/* "Im Shop ansehen": kleines Schild auf dem Sims. */
.p-shop .p-shop__kachel .p-shop__mehr {
  position: absolute; z-index: 2; left: 50%;
  bottom: max(3px, calc((var(--p-shop-simsh) - 24px) / 2));
  display: inline-flex; align-items: center; gap: var(--s2);
  max-width: calc(100% - 8px);
  height: 24px; padding: 0 10px;
  border-radius: var(--r-lg);
  background: var(--accent-500); color: var(--accent-fg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  font-size: var(--t-xs); font-weight: 600; line-height: 1;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease);
}

.p-shop .p-shop__text {
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1);
  padding: var(--s5) var(--s5) var(--s5);
}
.p-shop .p-shop__kachel .p-shop__name {
  font-family: var(--p-font-display); font-stretch: 82%; font-weight: 700;
  text-transform: uppercase; line-height: 1.05; letter-spacing: .01em;
  font-size: 1.06rem; color: var(--fg-1);
  overflow-wrap: anywhere;
}
.p-shop .p-shop__kachel .p-shop__preis {
  font-size: 15px; font-weight: 600; color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}

/* ---- Ueberfahren und Tastatur ------------------------------------------
   Mit Maus: der Artikel hebt sich vom Sims, sein Schatten wird kleiner,
   und "Im Shop ansehen" gleitet auf den Sims. Mit dem Finger
   (hover: none) steht das Schild immer da - dort gibt es kein
   Ueberfahren. */
@media (hover: hover) {
  .p-shop .p-shop__kachel .p-shop__mehr { opacity: 0; transform: translate(-50%, 6px); }

  .p-shop .p-shop__kachel:hover { transform: translateY(-2px); border-color: var(--border-strong);
                                  box-shadow: var(--sh-md); }
  .p-shop .p-shop__kachel:hover .p-shop__vitrine { --p-shop-licht: var(--p-shop-licht-an); }
  .p-shop .p-shop__kachel:hover .p-shop__bild { transform: translateY(-5%) scale(1.03); }
  .p-shop .p-shop__kachel:hover .p-shop__vitrine::after { transform: scale(.72); opacity: .5; }
  .p-shop .p-shop__kachel:hover .p-shop__mehr { opacity: 1; transform: translateX(-50%); }

  .p-shop .p-shop__held:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
  .p-shop .p-shop__held:hover .p-shop__bild { transform: translate(-50%, -3%) scale(1.02); }
  .p-shop .p-shop__held:hover .p-shop__licht { filter: brightness(1.3); }
  .p-shop .p-shop__held:hover .p-shop__mehr { background: var(--p-on-band);
                                              box-shadow: 0 0 16px var(--accent-glow); }
}
/* Tastatur: derselbe Zustand wie beim Ueberfahren, dazu der Fokusring. */
.p-shop .p-shop__kachel:focus-visible,
.p-shop .p-shop__held:focus-visible {
  outline: none; border-radius: var(--r-lg);
  box-shadow: 0 0 0 3px var(--accent-glow), 0 0 0 1px var(--accent-text);
}
.p-shop .p-shop__kachel:focus-visible { border-color: var(--accent-border); }
.p-shop .p-shop__kachel:focus-visible .p-shop__vitrine { --p-shop-licht: var(--p-shop-licht-an); }
.p-shop .p-shop__kachel:focus-visible .p-shop__bild { transform: translateY(-5%) scale(1.03); }
.p-shop .p-shop__kachel:focus-visible .p-shop__vitrine::after { transform: scale(.72); opacity: .5; }
.p-shop .p-shop__kachel:focus-visible .p-shop__mehr { opacity: 1; transform: translateX(-50%); }
.p-shop .p-shop__held:focus-visible .p-shop__bild { transform: translate(-50%, -3%) scale(1.02); }
.p-shop .p-shop__held:focus-visible .p-shop__licht { filter: brightness(1.3); }
.p-shop .p-shop__held:focus-visible .p-shop__mehr { background: var(--p-on-band); }

/* ---- Laufleiste unter der Wischreihe (vom Skript eingeschaltet) --------- */
.p-shop .p-shop__lauf { display: none; }

/* ---- bis 640: Wischreihe ------------------------------------------------
   Die Reihe laeuft bis an die Fensterkanten (negativer Rand = Innenabstand
   von .p-wrap, dieselbe Variable - kein Seitenueberlauf). Die Kacheln
   rasten mittig ein - bis 480 eine, 481-640 zwei -, links und rechts ist
   der Nachbar angeschnitten: so sieht man, dass es weitergeht. Auch der
   erste und der letzte Artikel stehen mittig, dort bleibt eine Seite
   frei (Auftraggeber 30.09.2026).
   Masse in cqi der Sektion - sie ist so breit wie das Fenster:
     --p-shop-n     Kacheln im Fenster
     --p-shop-w     Breite einer Kachel
     --p-shop-rand  (Fenster - n Kacheln - Luecken) / 2; Innenabstand der
                    Reihe und zugleich scroll-padding, damit das
                    Einrasten dort anlegt. */
@media (max-width: 640px) {
  .p-shop { container-type: inline-size;
            --p-shop-n: 1;
            --p-shop-w: min(calc(100cqi - 2 * (40px + var(--s5))), 300px); }
  .p-shop .p-shop__raster {
    --p-shop-rand: calc((100cqi - var(--p-shop-n) * var(--p-shop-w)
                         - (var(--p-shop-n) - 1) * var(--s5)) / 2);
    display: flex; gap: var(--s5);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--p-gut));
    padding: var(--s2) var(--p-shop-rand) var(--s4);
    scroll-padding-inline: var(--p-shop-rand);
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
  .p-shop .p-shop__platz {
    flex: 0 0 var(--p-shop-w);
    scroll-snap-align: start;
  }
  /* Die Kacheln sind hier schmal - die Vitrine wird quadratisch, damit
     die hohen Artikel (Jacken, Hoodies) nicht klein werden. */
  .p-shop .p-shop__vitrine { aspect-ratio: 1 / 1; --p-shop-simsh: max(16%, 30px); }
  /* Finger: keine Bildlaufleiste, stattdessen die Laufleiste darunter. */
  @media (hover: none) {
    .p-shop .p-shop__raster { scrollbar-width: none; }
    .p-shop .p-shop__raster::-webkit-scrollbar { display: none; }
    .p-shop .p-shop__lauf:not([hidden]) {
      display: block; position: relative; overflow: hidden;
      height: 3px; margin-top: var(--s2);
      border-radius: var(--r-full);
      background: var(--p-shop-rahmen);
    }
    .p-shop .p-shop__lauf.p-shop__lauf--voll { visibility: hidden; }
    .p-shop .p-shop__laufdaumen {
      position: absolute; top: 0; bottom: 0;
      width: var(--p-shop-laufbreite, 40%);
      left: calc(var(--p-shop-laufpos, 0) * (100% - var(--p-shop-laufbreite, 40%)));
      border-radius: inherit;
      background: var(--accent-text);
    }
  }
}

/* 481-640: Held quer - Artikel rechts, Schild links. Zwei Kacheln mittig.
   Der Artikel steht ueber der Hoehe des Knopfes (Standflaeche 19%),
   sonst laege bei 481 der Knopf auf dem linken Aermel. */
@media (min-width: 481px) and (max-width: 640px) {
  .p-shop .p-shop__held {
    --p-shop-hx: 67%; --p-shop-hboden: 19%; --p-shop-hhoehe: 72%;
    aspect-ratio: 4 / 3;
  }
  .p-shop .p-shop__held .p-shop__schild { right: 45%; bottom: var(--s7); left: var(--s7); }
  .p-shop { --p-shop-n: 2;
            --p-shop-w: calc((100cqi - 2 * (40px + var(--s5)) - var(--s5)) / 2); }
}

/* ---- ab 641: Raster ---------------------------------------------------- */
@media (min-width: 641px) {
  .p-shop .p-shop__raster {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--p-shop-luft);
  }
}

/* 641-900: Held quer ueber die volle Breite, darunter drei Spalten. */
@media (min-width: 641px) and (max-width: 900px) {
  .p-shop .p-shop__held {
    --p-shop-hx: 63%; --p-shop-hboden: 10%; --p-shop-hhoehe: 80%;
    aspect-ratio: 16 / 7;
  }
  .p-shop .p-shop__held .p-shop__schild { right: 50%; bottom: var(--s8); left: var(--s8); }
}

/* ab 901: Held links, so breit wie zwei Kacheln und so hoch wie das
   Raster (die Zeile streckt ihn); rechts drei mal drei. */
@media (min-width: 901px) {
  .p-shop .p-shop__fenster { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .p-shop .p-shop__held {
    --p-shop-hx: 50%; --p-shop-hboden: 25%; --p-shop-hhoehe: 58%;
    aspect-ratio: auto; min-height: 100%;
  }
  .p-shop .p-shop__held .p-shop__schild { left: var(--s8); right: var(--s8); bottom: var(--s8); }
}
/* 901-1000: die Kacheln sind hier am schmalsten - etwas weniger Luft. */
@media (min-width: 901px) and (max-width: 1000px) {
  .p-shop { --p-shop-luft: var(--s5); }
  .p-shop .p-shop__text { padding: var(--s4) var(--s4) var(--s5); }
  .p-shop .p-shop__kachel .p-shop__name { font-size: 1rem; }
  .p-shop .p-shop__kachel .p-shop__mehr { font-size: 11px; letter-spacing: .04em; padding: 0 8px; }
}

/* ---- Ohne Bewegung ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .p-shop .p-shop__held,
  .p-shop .p-shop__kachel { transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
  .p-shop .p-shop__kachel:hover,
  .p-shop .p-shop__held:hover { transform: none; }
  .p-shop .p-shop__kachel:hover .p-shop__bild,
  .p-shop .p-shop__kachel:focus-visible .p-shop__bild { transform: none; }
  .p-shop .p-shop__held:hover .p-shop__bild,
  .p-shop .p-shop__held:focus-visible .p-shop__bild { transform: translateX(-50%); }
  .p-shop .p-shop__kachel .p-shop__mehr,
  .p-shop .p-shop__kachel:hover .p-shop__mehr { transform: translateX(-50%); }
  .p-shop .p-shop__kachel:hover .p-shop__vitrine::after,
  .p-shop .p-shop__kachel:focus-visible .p-shop__vitrine::after { transform: none; opacity: 1; }
}

/* ---- 6 · Unsere Mannschaften: zwei und die Uebersicht ------------------
   Nur Herren und Herren II, dazu die Kachel "Alle Mannschaften" zur
   Uebersicht /mannschaften (Auftraggeber 30.09.2026). Drei Kacheln
   nebeneinander; 481-640 zwei, die Uebersicht darunter ueber die ganze
   Breite; bis 480 untereinander wie zuvor. */
.p-teams.p-teams--start { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-team-card--alle .p-name { color: var(--accent-text); }
@media (max-width: 640px) {
  .p-teams.p-teams--start { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-teams--start .p-team-card--alle { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .p-teams.p-teams--start { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 7 · Platzbelegungsplan: eingeklappt nur heute ---------------------
   startseite.js klappt den Plan ein (.p-plan--heute): stehen bleibt der
   heutige Wochentag, an Tagen ohne Training der naechste Trainingstag;
   der Knopf darunter klappt die ganze Woche auf (Auftraggeber
   30.09.2026). Eingeklappt steht der eine Tag in jeder Breite wie ein
   Tagesblock des schmalen Aufbaus - Zeitspalte und vier Bahnen; gelesen
   werden --z (Zeile im Block) und --cs (Bahn). Ohne Skript steht die
   ganze Woche da.
   In der groessten Ansicht ab 1501px steht der Plan immer vollstaendig,
   ohne Knopf (Auftraggeber 30.09.2026: "Zeige den Platzbelegungsplan in
   der größten Ansicht immer vollständig"); die Markierung des heutigen
   Tags bleibt. */
@media (max-width: 1500px) {
  .p-plan.p-plan--heute { grid-template-columns: auto repeat(4, minmax(0, 1fr));
                          grid-template-rows: var(--p-plan-block); }
  .p-plan--heute .p-plan__tag:not(.p-plan__tag--heute),
  .p-plan--heute .p-plan__saeule { display: none; }
  .p-plan--heute .p-plan__tag--heute .p-plan__zeit,
  .p-plan--heute .p-plan__tag--heute .p-plan__linie { display: block; grid-row: var(--z); }
  .p-plan--heute .p-plan__tag--heute .p-plan__eintrag { grid-column: var(--cs) / span var(--breite);
                                                       grid-row: var(--z) / span var(--d); }
  .p-plan--heute .p-plan__tag--heute .p-plan__tagname { grid-column: 1 / -1; grid-row: var(--z);
                                                       padding-top: 0; }
}
.p-plan__heute { color: var(--accent-text); }
.p-plan__klapp { margin-top: var(--p-sp-oben); }
@media (min-width: 1501px) {
  .p-plan__klapp { display: none; }
}

/* ---- 8 · Sponsorentafel der Startseite: kleiner -------------------------
   Auftraggeber 30.09.2026: auf der Startseite deutlich kleiner, alle
   Partner bleiben; /sponsoren bleibt, wie es ist (dort fehlt
   .p-sponsors--start).
     ab 901    Kacheln mit Namen, gut 30 % kleiner: 5 / 6 / 7 Spalten
               statt 3 / 4 / 5, Logoschild 62 statt 88px hoch
     bis 900   nur noch die weissen Logoschilder als kleine Symbole,
               3 / 4 / 5 Spalten; der Name bleibt fuer Vorleseprogramme
   Flex-Umbruch statt Raster: eine unvollstaendige letzte Reihe steht
   mittig statt links. */
.p-sponsors.p-sponsors--start {
  --p-sp-n: 3; --p-sp-luft: var(--s3);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--p-sp-luft);
}
.p-sponsors--start > .p-partner {
  position: relative;
  flex: 0 0 calc((100% - (var(--p-sp-n) - 1) * var(--p-sp-luft)) / var(--p-sp-n));
}
@media (max-width: 900px) {
  .p-sponsors--start > .p-partner,
  .p-sponsors--start > .p-partner:hover { padding: 0; gap: 0; background: none; border: 0; }
  .p-sponsors--start .p-partner__logo { height: 52px; padding: 6px; }
  .p-sponsors--start > .p-partner:hover .p-partner__logo { border-color: var(--accent-border); }
  .p-sponsors--start .p-partner__name { position: absolute; width: 1px; height: 1px;
                                        overflow: hidden; clip-path: inset(50%);
                                        white-space: nowrap; }
}
@media (min-width: 481px) and (max-width: 900px) {
  .p-sponsors.p-sponsors--start { --p-sp-n: 4; }
  .p-sponsors--start .p-partner__logo { height: 56px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .p-sponsors.p-sponsors--start { --p-sp-n: 5; }
}
@media (min-width: 901px) {
  .p-sponsors.p-sponsors--start { --p-sp-n: 5; --p-sp-luft: var(--s4); }
  .p-sponsors--start > .p-partner { padding: var(--s4) var(--s4) var(--s3); gap: var(--s3); }
  .p-sponsors--start .p-partner__logo { height: 62px; padding: var(--s3); }
  .p-sponsors--start .p-partner__name { font-size: var(--t-xs); }
}
@media (min-width: 1001px) {
  .p-sponsors.p-sponsors--start { --p-sp-n: 6; }
}
@media (min-width: 1301px) {
  .p-sponsors.p-sponsors--start { --p-sp-n: 7; }
}