/* Bestueckungen (07.10.): Karten aus Jakobs v17 (css/v17.css, .b17 und .bs17), auf Automaten- und Sortimentseite */
.b17 { position: relative; background: linear-gradient(180deg, var(--paper) 0%, #fff 22%, #fff 78%, var(--paper) 100%); padding: clamp(72px, 9vw, 128px) 0 clamp(64px, 8vw, 112px); }
.b17-kopf { max-width: 760px; margin: 0 auto; text-align: center; }
.b17-kopf .stichwort { display: inline-block; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--green-2); margin-bottom: 14px; }
.b17-kopf h2 { font-size: clamp(34px, 4.4vw, 60px); }
.b17-kopf p { margin: 18px auto 0; font-size: 18px; color: var(--muted); max-width: 40em; }
.bs17 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; margin-top: clamp(36px, 5vw, 64px); }
.bs17-karte { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 18px 16px 18px;
              text-decoration: none; color: var(--ink); transition: transform .45s var(--ease-in-out, ease), box-shadow .45s, border-color .3s; }
.bs17-karte:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -40px rgba(15,51,25,.55); border-color: var(--green-light); }
.bs17-nr { position: absolute; top: 14px; left: 16px; font: 800 13px/1 var(--font-display); color: var(--green-2); background: var(--green-tint); border-radius: var(--pill); padding: 6px 9px; }
.bs17-bild { display: flex; align-items: flex-end; justify-content: center; height: clamp(190px, 17vw, 250px); margin: 8px 0 14px; }
.bs17-bild img { height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(15,51,25,.16)); }
.bs17-karte h3 { font: 700 17px/1.2 var(--font-body); color: var(--ink); letter-spacing: 0; }
.bs17-karte p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.bs17-mix { display: flex; height: 6px; border-radius: 6px; overflow: hidden; margin-top: auto; padding-top: 0; gap: 2px; }
.bs17-mix i { display: block; height: 6px; border-radius: 6px; }
.bs17-meta { margin-top: 12px; font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.bs17-karte .bs17-mix { margin-top: 14px; }
.mix-getraenke { background: #6EC1E4; } .mix-snacks { background: #F2B544; } .mix-kalt { background: #71C487; } .mix-warm { background: #EB8A46; }
.bs17-legende { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 22px; font-size: 13.5px; color: var(--muted); }
.bs17-legende span { display: inline-flex; align-items: center; gap: 8px; }
.bs17-legende i { width: 18px; height: 6px; border-radius: 6px; display: inline-block; }
.b17-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 30px; }
.b17-fuss span { font-size: 15px; color: var(--muted); }
@media (max-width: 1180px) {
  .bs17 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 4px 4px 18px; margin-left: -4px; margin-right: -4px; scrollbar-width: thin; }
  .bs17-karte { flex: 0 0 clamp(210px, 42vw, 250px); scroll-snap-align: start; }