/* Blue2 Shop – Produktkacheln ([blue2_shop] / Elementor-Widget „Blue2 Shop").
   Vorgaben = das bisherige Kachel-Design auf skipper360.at. Im Elementor-Widget unter „Stil" überschreibbar.
   --b2s-spalten setzt der Shortcode (Kacheln je Reihe am PC). */

.b2-shop {
  --b2s-hg: #1b2a40;          /* Kachel-Hintergrund */
  --b2s-text: #ffffff;
  --b2s-akzent: #2cc3e4;      /* *Sternchen*-Teil im Titel */
  --b2s-btn: #0e8fa3;
  --b2s-btn-hover: #0b7484;
  --b2s-btn-text: #ffffff;
  --b2s-gap: 12px;
  --b2s-min: 220px;           /* schmaler wird eine Kachel nie – dann bricht die Reihe um */
  display: grid;
  gap: var(--b2s-gap);
  /* ⚠ DIE EIGENTLICHE SPALTENREGEL STEHT IM style-ATTRIBUT (blue2-shop.php, 1.1.1) – nicht hier.
     WP Rocket (Minify CSS) hat die verschachtelte Formel max(var(…), calc(…)) zerlegt („max(var(--b2s-min)) calc(…)"):
     Besucher bekamen eine ungültige Regel und die Kacheln groß untereinander; angemeldete Nutzer (Original-CSS) nicht.
     Hier nur ein einfacher Rückfall ohne Verschachtelung: so viele Kacheln, wie mit mind. 220 px Platz haben. */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.b2s-karte {
  position: relative; overflow: hidden;        /* trägt das Eck-Band */
  display: flex; flex-direction: column;
  background: var(--b2s-hg); color: var(--b2s-text);
  padding: 14px 10px 16px;
}
.b2s-titel { margin: 0 0 10px; padding-right: 48px; color: var(--b2s-text); font-size: 18px; font-weight: 500; line-height: 1.25; }
.b2s-akzent { color: var(--b2s-akzent); }
.b2s-untertitel { margin: 0 0 12px; font-size: 14px; line-height: 1.35; }
.b2s-bild { margin: 0 0 12px; }
.b2s-bild img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 0; }
.b2s-preis { margin: 0 0 18px; font-size: 18px; font-weight: 500; }

/* Knöpfe unten bündig – auch wenn Titel/Untertitel unterschiedlich lang sind */
.b2s-knoepfe { margin-top: auto; display: flex; justify-content: space-around; gap: 10px; flex-wrap: wrap; }
.b2s-btn {
  display: inline-block; min-width: 0; padding: 10px 18px; border-radius: 3px; text-align: center;   /* 1.1.1: schmaler – passen in 220–260 px nebeneinander */
  background: var(--b2s-btn); color: var(--b2s-btn-text) !important; text-decoration: none !important;
  font-weight: 700; font-size: 15px; line-height: 1.2;
}
.b2s-btn:hover, .b2s-btn:focus-visible { background: var(--b2s-btn-hover); }

/* Eck-Band oben rechts (Dreieck 72 px, Text auf der Diagonale – Mittelpunkt 24/24 px vom Eck) */
.b2s-band { position: absolute; top: 0; right: 0; width: 72px; height: 72px; z-index: 2; pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%); }
.b2s-band span { position: absolute; top: 19px; right: -4px; width: 56px; height: 10px; line-height: 10px;
  text-align: center; transform: rotate(45deg); font: 800 10px/10px sans-serif; letter-spacing: .08em; }
.b2s-band-new     { background: #facc15; } .b2s-band-new span     { color: #1f2937; }
.b2s-band-beta    { background: #e11d48; } .b2s-band-beta span    { color: #fff; }
.b2s-band-classic { background: #7d8b99; } .b2s-band-classic span { color: #fff; font-size: 9px; letter-spacing: .06em; }
.b2s-band-legacy  { background: #5f6b77; } .b2s-band-legacy span  { color: #fff; font-size: 9px; letter-spacing: .06em; }
/* 1.1.0: Lehrgang (türkis) und e-Prüfung/Wissenscheck (grün) – längere Wörter, daher 8 px */
.b2s-band-lehrgang { background: #06b6d4; } .b2s-band-lehrgang span { color: #fff; font-size: 8px; letter-spacing: .04em; }
.b2s-band-pruefung { background: #16a34a; } .b2s-band-pruefung span { color: #fff; font-size: 8px; letter-spacing: .03em; }

.b2s-hinweis { padding: 10px 14px; background: #fdf4e3; border-left: 5px solid #d8a92e; color: #5b4406; font-size: 14px; }

/* ---- KARUSSELL (1.2.0) ---------------------------------------------------------------------------------------
   Eine Reihe, waagrecht blätterbar (Wischen, Pfeile, Punkte; optional automatisch – karussell.js). Ohne Preis/Knöpfe,
   ganze Karte = Link. Kartenbreite --b2s-w kommt INLINE aus PHP (WP Rocket zerlegt verschachtelte max/calc). */
/* 1.2.2: Pfeile AUSSERHALB (wie das alte Elementor-Karussell) – die Karten nutzen die volle Widget-Breite.
   Auf schmalen Schirmen ist außen kein Platz: dann wieder innen (Rand 30 px). */
.b2-shop.b2s-karussell { display: block; position: relative; padding: 0; }
.b2s-spur { display: flex; gap: var(--b2s-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.b2s-spur::-webkit-scrollbar { display: none; }
.b2s-spur > .b2s-karte { flex: 0 0 var(--b2s-w, 240px); scroll-snap-align: start; box-sizing: border-box; }   /* Innenabstand IN der Breite, sonst nur 3½ statt 4 sichtbar */
.b2s-karte.b2s-k { display: flex; flex-direction: column; text-decoration: none !important; color: var(--b2s-text) !important;
  padding: 14px 10px 10px; }   /* 1.2.1: wie das alte Elementor-Karussell – schmaler Rand, Bild fast kartenbreit */
.b2s-k .b2s-titel { display: block; margin: 0 0 8px; padding-right: 40px; font-size: 17px; }   /* Platz neben der Ecke; 17 px = seltener zweizeilig (Größe: Widget → Stil → Titel) */
.b2s-k .b2s-untertitel { display: block; margin: 0 0 10px; }
.b2s-k .b2s-bild { display: block; margin: auto 0 0; }   /* Bilder unten bündig = alle auf einer Linie; Lücke nur, wenn ein Titel zweizeilig ist */
.b2s-k .b2s-bild img { aspect-ratio: auto; height: var(--b2s-bildh, 120px); width: 100%; object-fit: cover; }
a.b2s-k:hover .b2s-bild img, a.b2s-k:focus-visible .b2s-bild img { filter: brightness(1.08); }
.b2s-pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 44px; padding: 0; border: 0;
  background: none; color: var(--b2s-btn); font-size: 42px; line-height: 40px; cursor: pointer; }
.b2s-pfeil:hover { color: var(--b2s-btn-hover); }
.b2s-pfeil[disabled] { opacity: .25; cursor: default; }
.b2s-zurueck { left: -34px; } .b2s-weiter { right: -34px; }
@media (max-width: 760px) {
  .b2-shop.b2s-karussell { padding: 0 30px; }
  .b2s-zurueck { left: 0; } .b2s-weiter { right: 0; }
}
.b2s-punkte { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.b2s-punkte button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #c4c8cc; cursor: pointer; }
.b2s-punkte button.an { background: #1b2a40; }