/* bsport-Abo-Karten am Handy (eingebunden auf den Kursseiten mit Abo-Karten).
   Am Handy rendert bsport eine eigene Kartenvariante: Titel/Preis links,
   Laufzeit-Plakette und Warenkorb-Knopf rechts, Preis und "/Monat" ohne Umbruch.
   Diese Variante ist fuer mindestens ~315 px gebaut. In unseren Kacheln ist die
   Karte am Handy nur 250-260 px breit — dann ragen Plakette und Warenkorb-Knopf
   rund 60 px aus der Karte und liegen ausserhalb des sichtbaren Bereichs. Am
   Handy ist dieser Knopf der einzige Weg zum Abo (Befund 23.09.2026).
   Die Regel greift nur fuer die Handy-Variante (sie hat den Warenkorb-Knopf
   .bs-contract-card__price-icon) und nur, wenn die Karte schmal ist. Die
   Desktop-Variante mit "Details"/"Abonnieren" bleibt unberuehrt. */
[id*="bsport-widget"] [id^="contract-button-container-"]:has(.bs-contract-card__price-icon){container-type:inline-size;container-name:mdkarte}
@container mdkarte (max-width:330px){
  /* Titel oben ueber die volle Breite, darunter die Laufzeit-Plakette, darunter
     der Preis; der Warenkorb-Knopf rechts neben Plakette und Preis. */
  [id*="bsport-widget"] .cleanslate .bs-contract-card__grid{grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto auto!important;row-gap:10px!important}
  [id*="bsport-widget"] .cleanslate .bs-contract-card__grid > *,
  [id*="bsport-widget"] .cleanslate .bs-generic-card__content{min-width:0!important}
  [id*="bsport-widget"] .cleanslate .bs-contract-card__grid > :nth-child(1){grid-column:1 / -1!important;grid-row:1!important}
  [id*="bsport-widget"] .cleanslate .bs-contract-card__grid > :nth-child(2){grid-column:1!important;grid-row:2!important;justify-self:start!important;justify-content:flex-start!important}
  [id*="bsport-widget"] .cleanslate .bs-contract-card__grid > :nth-child(3){grid-column:1!important;grid-row:3!important}
  [id*="bsport-widget"] .cleanslate .bs-contract-card__grid > :nth-child(4){grid-column:2!important;grid-row:2 / 4!important;align-self:end!important}
}