/* ============================================================
   Pakete (Upselling 2026): Paketliste, Paketseite, Paket-Hinweis auf der Planseite und im
   Warenkorb. Nutzt die Variablen aus shop_storefront.css (--shop-*). Geladen von
   bundle_list.html, bundle_detail.html, plan_detail.html und cart.html.
   ============================================================ */

/* ---------- Paketliste ---------- */
.shop-bundle-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .shop-bundle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shop-bundle-card[hidden] { display: none; }

/* ---------- Split-Bild (Makro sm.split_media): Paketkarte und Hero der Paketseite ----------
   Je Plan ein Foto-Feld, getrennt durch 45-Grad-Schnitte. Der Schnitt ist eine Maske mit
   linear-gradient(135deg): der Winkel gilt unabhaengig vom Seitenverhaeltnis, 50 % liegt genau in
   der Mitte. Feld 1 liegt vollflaechig darunter, jedes weitere beginnt bei --from (i / n * 100 %)
   und deckt alles dahinter ab, so entstehen an den Kanten keine Luecken. --split-shift verschiebt
   alle Schnitte entlang der Gradientenachse (Hero: in den sichtbaren Bildbereich rechts). */
.shop-split { position: absolute; inset: 0; --split-shift: 0px; }
.shop-split__slice {
    --at: calc(var(--from) + var(--split-shift));
    position: absolute; inset: 0; overflow: hidden;
    background: linear-gradient(160deg, #2c4f7c 0%, #1b2330 100%);
    -webkit-mask-image: linear-gradient(135deg, transparent calc(var(--at) - .4px), #000 calc(var(--at) + .4px));
    mask-image: linear-gradient(135deg, transparent calc(var(--at) - .4px), #000 calc(var(--at) + .4px));
}
.shop-split__slice:first-child { -webkit-mask-image: none; mask-image: none; }
/* Ohne Foto: Markenfarben, abwechselnd blau und orange */
.shop-split__slice:nth-of-type(even) { background: linear-gradient(160deg, #a9460a 0%, #3a1e10 100%); }
.shop-split__slice img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transform: scale(1.01); transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
/* Schnittkante: feine helle Linie mit leichtem Schein */
.shop-split__cut {
    --at: calc(var(--from) + var(--split-shift));
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(135deg,
        transparent calc(var(--at) - 6px), rgba(255, 255, 255, .10) calc(var(--at) - 1.5px),
        rgba(255, 255, 255, .95) calc(var(--at) - 1px), rgba(255, 255, 255, .95) calc(var(--at) + 1px),
        rgba(255, 255, 255, .10) calc(var(--at) + 1.5px), transparent calc(var(--at) + 6px));
}
@media (prefers-reduced-motion: reduce) { .shop-split__slice img { transition: none; } }

/* Karte: das Split-Bild fuellt die ganze Karte. Der Text liegt unten auf einem dunklen Verlauf
   (Weiss auf mind. rgba(13,17,23,.62) ueber Foto, dazu Textschatten). */
.shop-bundle-card {
    position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
    border-radius: var(--shop-radius); background: #1b2330; color: #fff;
    box-shadow: var(--shop-shadow); transition: box-shadow .25s ease, transform .25s ease;
}
.shop-bundle-card:hover, .shop-bundle-card:focus-within { box-shadow: var(--shop-shadow-hover); transform: translateY(-2px); }
.shop-bundle-card__media { z-index: -1; }
/* Hover: die Felder ruecken gegenlaeufig ein Stueck entlang des Schnitts */
.shop-bundle-card:hover .shop-split__slice img { transform: scale(1.06) translate(-1%, 1%); }
.shop-bundle-card:hover .shop-split__slice:nth-of-type(even) img { transform: scale(1.06) translate(1%, -1%); }
/* Lesbarkeit: oben leicht abgedunkelt (Badge), unten kraeftig fuer den Text */
.shop-bundle-card__media::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(13, 17, 23, .38) 0%, rgba(13, 17, 23, 0) 22%),
        linear-gradient(180deg, rgba(13, 17, 23, 0) 28%, rgba(13, 17, 23, .62) 44%, rgba(13, 17, 23, .86) 60%, rgba(13, 17, 23, .95) 100%);
}
.shop-bundle-card__badge {
    position: absolute; top: 1rem; left: 1rem; padding: .35rem .75rem; border-radius: 999px;
    background: #a9460a; color: #fff; font-size: .85rem; font-weight: 800; letter-spacing: .01em;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
/* Oben bleibt eine freie Bildzone (Fotos und Schnitt sichtbar), der Text beginnt darunter */
.shop-bundle-card__body { display: flex; flex-direction: column; gap: .7rem; margin-top: 12rem; padding: 1.5rem 1.4rem 1.4rem; }
.shop-bundle-card__kicker { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #ffb98a; }
.shop-bundle-card__body { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.shop-bundle-card .shop-btn { text-shadow: none; }
.shop-bundle-card__name { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.shop-app .shop-bundle-card__name a { color: #fff; text-decoration: none; }
.shop-app .shop-bundle-card__name a:hover, .shop-app .shop-bundle-card__name a:focus-visible { text-decoration: underline; text-underline-offset: .15em; }
.shop-bundle-card__teaser {
    color: rgba(255, 255, 255, .84); margin: 0; font-size: .95rem; line-height: 1.5;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.shop-bundle-card__plans { list-style: none; margin: .1rem 0 0; padding: 0; display: grid; gap: .45rem; }
.shop-bundle-card__plan { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.shop-bundle-card__num {
    flex: 0 0 1.6rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 800; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35);
}
.shop-app .shop-bundle-card__plan a { color: #fff; text-decoration: none; }
.shop-app .shop-bundle-card__plan a:hover, .shop-app .shop-bundle-card__plan a:focus-visible { text-decoration: underline; text-underline-offset: .15em; }
.shop-bundle-card__foot {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .9rem 1rem;
    margin-top: .35rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .2);
}
.shop-bundle-card__price { margin: 0; font-weight: 700; flex: 1 1 14rem; }
.shop-bundle-card__price small { display: block; margin-top: .15rem; font-weight: 400; font-size: .82rem; color: rgba(255, 255, 255, .74); }
.shop-app .shop-bundle-card .shop-btn--primary { background: #fff; color: var(--shop-ink); }
.shop-app .shop-bundle-card .shop-btn--primary:hover,
.shop-app .shop-bundle-card .shop-btn--primary:focus-visible { background: #f1f3f6; color: var(--shop-ink); }
.shop-bundle-card .shop-btn i { font-size: .8em; margin-left: .35rem; transition: transform .15s ease; }
.shop-bundle-card .shop-btn:hover i { transform: translateX(2px); }
.shop-bundle-card :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 479px) {
    .shop-bundle-card__body { margin-top: 9.5rem; padding: 1.25rem 1.1rem 1.1rem; }
    .shop-bundle-card .shop-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .shop-bundle-card, .shop-bundle-card .shop-btn i { transition: none; }
    .shop-bundle-card:hover, .shop-bundle-card:focus-within { transform: none; }
    .shop-bundle-card:hover .shop-split__slice img,
    .shop-bundle-card:hover .shop-split__slice:nth-of-type(even) img { transform: scale(1.01); }
}

/* Filterfeld der Paketliste (Basis .shop-filters aus shop_storefront.css), clientseitig */
.shop-bundle-sort { position: relative; display: inline-flex; align-items: center; margin: 0; flex: 0 0 auto; }
.shop-bundle-sort i { position: absolute; left: 1rem; color: var(--shop-muted); pointer-events: none; font-size: .9rem; }
.shop-app .shop-bundle-sort select {
    min-height: 46px; padding: .55rem 2.2rem .55rem 2.5rem; border: 1.5px solid var(--shop-line-strong); border-radius: 999px;
    background-color: #fff; color: var(--shop-ink); font-size: .95rem; font-weight: 600; cursor: pointer;
}
.shop-app .shop-bundle-sort select:focus { outline: none; border-color: var(--shop-accent); box-shadow: 0 0 0 3px var(--shop-accent-soft); }
.shop-app .shop-bundle-filters__reset {
    background: none; border: 0; padding: 0; font: inherit; font-size: .88rem; font-weight: 700;
    color: var(--shop-accent); text-decoration: underline; text-underline-offset: .15em; cursor: pointer;
}
.shop-bundle-filters__reset[hidden], .shop-app .shop-bundle-filters .shop-filter[hidden] { display: none; }
@media (max-width: 600px) { .shop-bundle-sort, .shop-app .shop-bundle-sort select { width: 100%; } }

/* ---------- Paketseite ----------
   Hero = .shop-plan-hero--media der Planseite (shop_storefront.css), statt eines Fotos das
   Split-Bild der Planfotos. Ab 992 px laeuft der Schnitt auf halber Hoehe durch die Luecke zwischen
   Textspalte und Kaufbox (Mitte des 56-px-Spaltenabstands, vgl. --plan-text-end in
   shop_storefront.css), sonst laege er hinter der Kaufbox. Horizontale Verschiebung dx entspricht
   dx * cos 45 entlang der 135-Grad-Gradientenachse. */
@media (min-width: 992px) {
    .shop-bundle-hero .shop-split { --split-shift: calc(min(182px, 50vw - 408px) * .7071); }
}
.shop-app .shop-bundle-hero .shop-chip--deal { background: #a9460a; border-color: #a9460a; color: #fff; }
.shop-bundle-hero .shop-bundle-desc { max-width: 40rem; margin-bottom: 1.5rem; color: rgba(255, 255, 255, .86); font-size: 1.05rem; line-height: 1.6; }
.shop-bundle-desc p { margin: 0 0 .75rem; }
.shop-app .shop-bundle-hero__plans { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.shop-bundle-hero__plans li { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; font-size: 1.05rem; font-weight: 700; }
.shop-app .shop-bundle-hero__plans a { color: #fff; text-decoration: none; }
.shop-app .shop-bundle-hero__plans a:hover, .shop-app .shop-bundle-hero__plans a:focus-visible { text-decoration: underline; text-underline-offset: .15em; }
.shop-bundle-hero__owned { font-size: .85rem; font-weight: 700; color: #8fe0b0; }
/* Kaufbox im Hero: weisse Karte wie die Planseite (.shop-plan-hero--media .shop-buybox) */
.shop-bundle-summary.shop-buybox .shop-buybox__label { margin-bottom: 1rem !important; }
.shop-bundle-summary__row { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .5rem; }
.shop-bundle-summary__row--total { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; border-top: 1px solid var(--shop-line); padding-top: .85rem; margin: .85rem 0 1.1rem; }
.shop-bundle-summary__saving { color: var(--shop-success); font-weight: 700; }
.shop-bundle-summary__note { font-size: .85rem; color: var(--shop-muted); margin: .75rem 0 0; }

/* Plaene des Pakets: Karte mit Foto links (mobil oben) und Nummer wie im Hero */
.shop-app .shop-bundle-section__title { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 1.25rem; }
.shop-bundle-groups { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.shop-bundle-group {
    background: #fff; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); box-shadow: var(--shop-shadow);
    overflow: hidden; display: grid; grid-template-columns: 220px minmax(0, 1fr); scroll-margin-top: 1rem;
}
.shop-bundle-group__media {
    position: relative; min-height: 180px; background: linear-gradient(160deg, #2c4f7c 0%, #1b2330 100%);
    display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .6); font-size: 2rem;
}
.shop-bundle-group:nth-child(even) .shop-bundle-group__media { background: linear-gradient(160deg, #a9460a 0%, #3a1e10 100%); }
.shop-bundle-group__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop-bundle-group__num {
    position: absolute; top: .75rem; left: .75rem; width: 2rem; height: 2rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 800;
    background: rgba(13, 17, 23, .72); color: #fff; border: 1px solid rgba(255, 255, 255, .45);
}
.shop-bundle-group__body { padding: 1.25rem 1.4rem; min-width: 0; }
@media (max-width: 599px) {
    .shop-bundle-group { grid-template-columns: 1fr; }
    .shop-bundle-group__media { min-height: 0; aspect-ratio: 16 / 9; }
    .shop-bundle-group__body { padding: 1.1rem; }
}
.shop-bundle-group__title { font-size: 1.2rem; font-weight: 800; margin: 0 0 .35rem; }
.shop-bundle-group__title a { color: inherit; }
.shop-bundle-group__facts { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 .5rem; font-size: .9rem; font-weight: 600; color: var(--shop-ink-2); }
.shop-bundle-group__facts i { color: var(--shop-muted); margin-right: .2rem; }
.shop-bundle-group__facts [hidden] { display: none; }
.shop-bundle-group__teaser { color: var(--shop-muted); margin: 0 0 1rem; font-size: .95rem; }
.shop-bundle-group__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-top: .9rem; border-top: 1px solid var(--shop-line); }
.shop-bundle-group__row label { font-weight: 600; font-size: .9rem; }
.shop-bundle-group__row select { min-height: 44px; max-width: 100%; border: 1px solid var(--shop-line-strong); border-radius: var(--shop-radius-sm); padding: .4rem .6rem; background: #fff; }
.shop-bundle-group__price { margin-left: auto; text-align: right; font-weight: 800; font-size: 1.1rem; }
.shop-bundle-group__price small { display: block; font-weight: 400; color: var(--shop-muted); font-size: .85rem; }
.shop-bundle-group.is-owned { background: var(--shop-bg-soft); }
.shop-bundle-owned { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--shop-success); }

/* ---------- Hinweis auf der Planseite (Kaufbox) und im Warenkorb ---------- */
.shop-bundle-box { margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--shop-radius-sm); background: var(--shop-accent-soft); color: var(--shop-ink); font-size: .95rem; }
.shop-bundle-box p { margin: 0; }
.shop-bundle-box + .shop-bundle-box { margin-top: .5rem; }
.shop-bundle-box a { font-weight: 700; color: var(--shop-accent-strong); }
.shop-bundle-box i { color: var(--shop-accent); margin-right: .35rem; }
/* Planseite: Angebotskarten unter den Kennzahlen (Paket, Coaching-Bonus). Gleiche Rundung und
   Glas-Optik wie .shop-kpis, aber als eigene Karten mit Signalfarbe, Icon, Ueberschrift und Button,
   damit das Angebot sofort ins Auge faellt. Kontraste (AA): #a9460a auf Weiss 5,9:1, Weiss auf
   #a9460a 5,9:1, #285180 auf Weiss 8,1:1, #ffb98a / #cbd8e8 auf dunklem Glas > 9:1. */
.shop-plan-offers { display: grid; gap: .75rem; margin-top: 1rem; }
.shop-plan-offer {
    --offer-bar: var(--shop-accent); --offer-ink: var(--shop-accent); --offer-soft: var(--shop-accent-soft);
    --offer-btn: var(--shop-accent); --offer-btn-hover: var(--shop-accent-strong);
    display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start;
    padding: 1.05rem 1.15rem 1.1rem 1rem; background: #fff; border: 1px solid var(--shop-line);
    border-left: 4px solid var(--offer-bar); border-radius: var(--shop-radius); box-shadow: var(--shop-shadow);
}
.shop-plan-offer--bundle {
    --offer-bar: var(--shop-goal); --offer-ink: #a9460a; --offer-soft: #fdeee4;
    --offer-btn: #a9460a; --offer-btn-hover: #8a3906;
}
.shop-plan-offer__icon {
    display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
    border-radius: 50%; background: var(--offer-soft); color: var(--offer-bar); font-size: 1.05rem;
}
.shop-plan-offer__body { min-width: 0; }
.shop-plan-offer__eyebrow { margin: 0 0 .2rem; font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--offer-ink); }
.shop-plan-offer__title { margin: 0 0 .3rem; font-size: clamp(1.05rem, .95rem + .4vw, 1.2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: var(--shop-ink); }
.shop-plan-offer__text { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--shop-ink-2); }
.shop-app .shop-plan-offer__cta {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .75rem; padding: .5rem 1rem;
    border-radius: 999px; background: var(--offer-btn); color: #fff; font-size: .875rem; font-weight: 700;
    text-decoration: none; line-height: 1.2; transition: background-color .15s ease;
}
.shop-app .shop-plan-offer__cta:hover, .shop-app .shop-plan-offer__cta:focus-visible { background: var(--offer-btn-hover); color: #fff; }
.shop-plan-offer__cta i { font-size: .8rem; transition: transform .15s ease; }
.shop-plan-offer__cta:hover i { transform: translateX(2px); }
/* Coaching-Bonus: zweitrangig neben dem Paket, daher Umriss-Button statt gefuellt */
.shop-app .shop-plan-offer--coaching .shop-plan-offer__cta { background: transparent; color: var(--offer-btn); box-shadow: inset 0 0 0 1.5px var(--offer-btn); }
.shop-app .shop-plan-offer--coaching .shop-plan-offer__cta:hover,
.shop-app .shop-plan-offer--coaching .shop-plan-offer__cta:focus-visible { background: var(--offer-btn); color: #fff; }
/* Foto-Hero: Glas wie die Kennzahlen, Signalfarben bleiben */
.shop-plan-hero--media .shop-plan-offer {
    --offer-soft: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .18); border-left-color: var(--offer-bar); box-shadow: none;
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .shop-plan-hero--media .shop-plan-offer { background: rgba(25, 30, 37, .9); }
}
.shop-plan-hero--media .shop-plan-offer--coaching { --offer-bar: #8fb3dd; }
.shop-plan-hero--media .shop-plan-offer__eyebrow { color: #cbd8e8; }
.shop-plan-hero--media .shop-plan-offer--bundle .shop-plan-offer__eyebrow { color: #ffb98a; }
.shop-plan-hero--media .shop-plan-offer__title { color: #fff; }
.shop-plan-hero--media .shop-plan-offer__text { color: rgba(255, 255, 255, .86); }
.shop-app .shop-plan-hero--media .shop-plan-offer__cta { background: #fff; color: var(--offer-btn); }
.shop-app .shop-plan-hero--media .shop-plan-offer__cta:hover,
.shop-app .shop-plan-hero--media .shop-plan-offer__cta:focus-visible { background: #f1f3f6; color: var(--offer-btn-hover); }
.shop-app .shop-plan-hero--media .shop-plan-offer--coaching .shop-plan-offer__cta { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.shop-app .shop-plan-hero--media .shop-plan-offer--coaching .shop-plan-offer__cta:hover,
.shop-app .shop-plan-hero--media .shop-plan-offer--coaching .shop-plan-offer__cta:focus-visible { background: #fff; color: var(--shop-accent); }
.shop-plan-hero--media .shop-plan-offer :focus-visible { outline-color: rgba(255, 255, 255, .9); }
/* Coaching-Bonus im Abschnitt "Von deinem Coach erstellt" (.shop-coach, weisse Karte): als
   hervorgehobener Block in der Karte, hellblau statt weiss, ohne eigenen Schatten. .shop-coach p
   (shop_storefront.css) faerbt alle Absaetze grau, daher Farben hier mit hoeherer Spezifitaet.
   Kontrast: #285180 auf #e9eff6 7,0:1, --shop-ink-2 auf #e9eff6 > 7:1. */
.shop-coach .shop-plan-offer { grid-template-columns: 1fr; margin: 1.1rem 0 1.25rem; background: var(--shop-accent-soft); border-color: transparent; border-left-color: var(--offer-bar); box-shadow: none; }
.shop-coach .shop-plan-offer p.shop-plan-offer__eyebrow { color: var(--offer-ink); }
.shop-coach .shop-plan-offer p.shop-plan-offer__title { color: var(--shop-ink); }
.shop-coach .shop-plan-offer p.shop-plan-offer__text { color: var(--shop-ink-2); }
.shop-app .shop-coach .shop-plan-offer__text a { font-weight: 700; color: var(--offer-ink); text-decoration: underline; text-underline-offset: .15em; }
.shop-app .shop-coach .shop-plan-offer__text a:hover { color: var(--shop-accent-strong); }
@media (max-width: 480px) {
    .shop-plan-offer { gap: .75rem; padding: .9rem .95rem .95rem .85rem; }
    .shop-plan-offer__icon { width: 2.1rem; height: 2.1rem; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) { .shop-plan-offer__cta, .shop-plan-offer__cta i { transition: none; } }
.shop-cart-item__bundle { font-size: .85rem; color: var(--shop-muted); margin-top: .35rem; }
.shop-cart-item__bundle strong { color: var(--shop-ink); }
.shop-cart-bundle-hints { margin-top: 1rem; }

/* Planliste: Paket-Streifen ueber den Plaenen (plan_list.html, bundles_teaser). Gleiche Karte wie
   das Paket-Angebot der Planseite, breit: Button rechts, auf dem Handy darunter. */
.shop-plan-offer--wide { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.shop-plan-offer--wide .shop-plan-offer__cta { margin-top: 0; white-space: nowrap; }
.shop-bundle-teaser { margin: 0 0 1.75rem; }
@media (max-width: 640px) {
    .shop-plan-offer--wide { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
    .shop-plan-offer--wide .shop-plan-offer__cta { grid-column: 1 / -1; justify-self: start; }
}

/* Paket-Auswahl in EINER Karte (2026-10-20): Planseite (.shop-plan-offer__pick) und Warenkorb
   (.shop-bundle-box--pick), Dropdown im Stil der Varianten-Auswahl der Paketseite */
.shop-plan-offer__pick { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: .7rem 0 0; font-size: .875rem; font-weight: 600; color: var(--shop-ink-2); }
.shop-plan-offer__pick select,
.shop-bundle-box__pick select {
    min-height: 40px; max-width: 100%; border: 1px solid var(--shop-line-strong); border-radius: var(--shop-radius-sm);
    padding: .35rem .6rem; background: #fff; color: var(--shop-ink); font: inherit; font-weight: 600;
}
.shop-plan-hero--media .shop-plan-offer__pick { color: rgba(255, 255, 255, .86); }
.shop-bundle-box__pick { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .6rem; }
.shop-bundle-box__pick select { flex: 1 1 260px; }
.shop-bundle-box__pick a { white-space: nowrap; }