/* Designsystem – Bereich offers. Bausteine dieses Bereichs; Kern-Tokens und -Klassen stehen in ds.css.
   Seiten: /exklusive-angebote, /mitglied-werden, /fitnessstudio-bad-vilbel. */

/* ── Clubs hell (Figma „Angebote“ · Clubs auf Sand): ds/ClubTabs im hellen Modus, Hülle <div class="ds-offers-clubs-light"> ── */
body.pf-figma main#main .ds-offers-clubs-light>.ds-club-explorer{background:var(--ds-soft);color:var(--ds-ink);--ds-accent:hsl(var(--pf-brand-brown)/.55);--ds-line:var(--ds-ink)}
body.pf-figma main#main .ds-offers-clubs-light .ds-club-explorer-text{color:var(--ds-ink)}
body.pf-figma main#main .ds-offers-clubs-light .pf-club-tabs button{color:var(--ds-ink);background:hsl(var(--pf-brand-sand)/.22);border-color:hsl(var(--pf-brand-brown)/.18);box-shadow:none}
body.pf-figma main#main .ds-offers-clubs-light .pf-club-tabs button:not([aria-pressed=true]):hover{background:hsl(var(--pf-brand-sand)/.38)}
body.pf-figma main#main .ds-offers-clubs-light .pf-club-tabs button[aria-pressed=true]{background:var(--ds-ink);color:var(--ds-paper)}
body.pf-figma main#main .ds-offers-clubs-light .pf-region svg{fill:hsl(var(--pf-brand-sand)/.18)}
body.pf-figma main#main .ds-offers-clubs-light .pf-region .pf-geo-road{stroke:hsl(var(--pf-brand-brown)/.22)}
body.pf-figma main#main .ds-offers-clubs-light .pf-region .pf-geo-river{stroke:hsl(var(--pf-brand-brown)/.5)}
body.pf-figma main#main .ds-offers-clubs-light .pf-region svg text{fill:hsl(var(--pf-brand-brown)/.45)}
body.pf-figma main#main .ds-offers-clubs-light .pf-map-point span{color:var(--ds-ink);background:hsl(var(--pf-brand-sand)/.55);border-color:hsl(var(--pf-brand-brown)/.18)}
body.pf-figma main#main .ds-offers-clubs-light .pf-map-point[aria-pressed=true] span{color:var(--ds-paper);background:var(--ds-ink);border-color:var(--ds-ink)}
body.pf-figma main#main .ds-offers-clubs-light .pf-map-note,body.pf-figma main#main .ds-offers-clubs-light .pf-map-note a,body.pf-figma main#main .ds-offers-clubs-light .pf-map-disclosure summary{color:var(--ds-ink)}
body.pf-figma main#main .ds-offers-clubs-light .pf-map-legend span+span::before{background:hsl(var(--pf-brand-brown)/.5)}
body.pf-figma main#main .ds-offers-clubs-light :is(button,a,summary):focus-visible{outline-color:var(--ds-ink)}

/* ── Bad Vilbel: Renderings sichtbar als „Visualisierung“ kennzeichnen ── */
.ds-offers-visual-frame{position:relative}
.ds-offers-visual,.ds-offers-bv-training .ds-card-media::before{position:absolute;z-index:2;padding:4px 12px;border:1px solid var(--ds-glass-line);border-radius:999px;background:hsl(var(--pf-brand-brown)/.35);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);color:var(--ds-paper);font:500 12px/1.5 var(--pf-font-body);letter-spacing:.02em;pointer-events:none}
.ds-offers-visual{right:var(--ds-gutter);bottom:var(--ds-gutter)}
.ds-offers-bv-training .ds-card-media::before{content:"Visualisierung";left:24px;top:76px}
.ds-offers-bv-training .ds-card.is-open .ds-card-media::before{top:auto;bottom:24px}

/* ── BV-Training: Aufzählung im geöffneten Karten-Panel (Figma „signature-aufzählung“) ── */
body.pf-figma main#main .ds-offers-bv-training .ds-facts{gap:16px}
body.pf-figma main#main .ds-offers-bv-training .ds-facts li{gap:0}
body.pf-figma main#main .ds-offers-bv-training .ds-facts .ds-meta{gap:8px;text-transform:none;letter-spacing:0}
body.pf-figma main#main .ds-offers-bv-training .ds-facts .ds-meta svg{width:24px;height:24px;flex:none}
body.pf-figma main#main .ds-offers-bv-training .ds-facts .ds-body:empty{display:none}

/* ── Pricing Early Bird (Figma 4928:11369): heller Grund, brauner Hinweis mit Logo-Muster und Live-Verfügbarkeit ── */
.ds-offers-bv-pricing .ds-stack{gap:22px}
.ds-offers-bv-pricing .ds-heading{margin-bottom:7px}
.ds-offers-earlybird{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px 48px;padding:28px 40px;border-radius:var(--ds-radius);color:var(--ds-paper);
 background:linear-gradient(159deg,hsl(var(--pf-brand-cream)/0) 17%,hsl(var(--pf-brand-sand)/.3) 83%),linear-gradient(hsl(var(--pf-brand-sand)/.12),hsl(var(--pf-brand-sand)/.12)),var(--ds-ink)}
.ds-offers-earlybird::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background:url('/relaunch/assets/live-exklusive-angebote-pricing-herbst-pattern.webp') left top/875px auto repeat}
.ds-offers-earlybird-copy{display:flex;flex-direction:column;gap:8px;max-width:620px}
.ds-offers-earlybird .ds-eyebrow{color:var(--ds-gold)}
.ds-offers-earlybird .ds-card-title{color:var(--ds-paper);max-width:none}
.ds-offers-earlybird .ds-body{margin:0;color:var(--ds-paper)}
.ds-offers-availability{display:flex;flex-direction:column;gap:6px;min-width:250px;padding-left:40px;border-left:1px solid hsl(var(--pf-brand-cream)/.42)}
.ds-offers-availability>p{margin:0}
.ds-offers-availability .availability-status{color:var(--ds-gold)}
.ds-offers-availability .availability-status.is-live::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--ds-gold);vertical-align:1px}
.ds-offers-availability .availability-count{display:flex;align-items:baseline;gap:12px;font:300 16px/1.35 var(--pf-font-body)}
.ds-offers-availability .availability-count strong{font:300 56px/1 var(--pf-font-body);letter-spacing:-.04em;color:var(--ds-paper)}
.ds-offers-availability meter{width:100%;height:6px}
.ds-offers-availability small{font:300 13px/1.5 var(--pf-font-body);color:var(--ds-paper)}
/* Segment-Umschalter: nur Laufzeiten (Bad Vilbel hat keine Signature-Tarife), rechts wie in Figma. */
body.pf-figma main#main .ds-offers-bv-pricing .pf-tariff-toolbar{justify-content:flex-end;margin-bottom:22px}
body.pf-figma main#main .ds-offers-bv-pricing .pf-changer-offer{margin-top:0;border:1px solid hsl(var(--pf-brand-gold)/.5)}
body.pf-figma main#main .ds-offers-bv-pricing .pf-changer-bottom .pf-button{background:none;color:var(--ds-paper);border:1px solid var(--ds-paper);box-shadow:none}
body.pf-figma main#main .ds-offers-bv-pricing .pf-changer-bottom .pf-button:hover{background:hsl(var(--pf-brand-cream)/.12)}
@media(max-width:860px){
 .ds-offers-earlybird{grid-template-columns:1fr;padding:28px 20px}
 .ds-offers-availability{min-width:0;padding:20px 0 0;border-left:0;border-top:1px solid hsl(var(--pf-brand-cream)/.42)}
}
@media(max-width:700px){
 .ds-offers-visual{right:22px;top:96px;bottom:auto}
 .ds-offers-bv-training .ds-card-media::before{left:22px;top:64px}
 .ds-offers-availability .availability-count strong{font-size:44px}
}

/* Mobil: Versprechen-Foto (ds PromiseBox) – min-height + aspect-ratio der Fotokarte erzwangen 487px Breite
   (horizontales Scrollen bei 390). Lokal korrigiert; Kern-Korrektur in ds.css empfohlen. */
@media(max-width:700px){body.pf-figma main#main .ds-promise-media{aspect-ratio:auto;width:100%;min-width:0}}
/* Mobil: Karten-Reihe (ds CardRow) rastet sonst ohne Gutter am linken Rand ein. Kern-Korrektur in ds.css empfohlen. */
@media(max-width:700px){body.pf-figma main#main .ds-card-row{scroll-padding-inline:var(--ds-gutter)}}

/* ── Clubs als Lageplan (Figma „Angebote · dein ort." 4934:36814): ds/ClubMap, Marker sind Links ── */
.ds-club-map-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.ds-club-map-head>.ds-body{margin:0;text-align:right}
body.pf-figma main#main .ds-club-map{display:block;width:100%;max-width:680px;margin:0 auto;padding:0 0 72px;border:0;border-radius:var(--ds-radius);background:none;overflow:visible}
body.pf-figma main#main .ds-club-map .pf-region-canvas{background:none;overflow:visible}
body.pf-figma main#main .ds-club-map svg{fill:none}
body.pf-figma main#main .ds-club-map .pf-geo-road{stroke:hsl(var(--pf-brand-sand)/.75);stroke-width:2}
body.pf-figma main#main .ds-club-map .pf-geo-river{stroke:hsl(var(--pf-brand-brown)/.35);stroke-width:3}
body.pf-figma main#main .ds-club-map svg text{stroke:none;fill:hsl(var(--pf-brand-brown)/.4)}
body.pf-figma main#main .ds-club-map .pf-map-point{transform:translate(-50%,-50%);text-decoration:none;color:var(--ds-ink)}
body.pf-figma main#main .ds-club-map .pf-map-point i{display:none}
body.pf-figma main#main .ds-club-map .pf-map-point span{display:flex;flex-direction:column;align-items:center;min-height:44px;justify-content:center;padding:6px 12px;border:1px solid var(--ds-glass-line);border-radius:8px;background:hsl(var(--pf-brand-sand)/.55);color:var(--ds-ink);font:300 18px/1.2 var(--pf-font-body);box-shadow:0 4px 16px hsl(var(--pf-brand-brown)/.12);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);transition:background .2s ease,color .2s ease}
body.pf-figma main#main .ds-club-map .pf-map-point small{font:700 11px/1.4 var(--pf-font-headline);letter-spacing:.16em;text-transform:uppercase;opacity:1}
body.pf-figma main#main .ds-club-map .pf-map-point:is(:hover,:focus-visible,[aria-current=true]) span{background:var(--ds-ink);color:var(--ds-paper)}
body.pf-figma main#main .ds-club-map .pf-map-point:focus-visible{outline:2px solid var(--ds-ink);outline-offset:5px;border-radius:10px}
body.pf-figma main#main .ds-club-map .pf-map-note,body.pf-figma main#main .ds-club-map .pf-map-note a{left:0;right:0;bottom:8px;text-align:center;color:var(--ds-ink)}
body.pf-figma main#main .ds-club-map .pf-map-legend span+span::before{background:hsl(var(--pf-brand-brown)/.35)}
@media(max-width:700px){
 .ds-club-map-head{display:block}
 .ds-club-map-head>.ds-body{text-align:left;margin-top:16px}
 body.pf-figma main#main .ds-club-map .pf-map-point span{font-size:14px;padding:4px 8px}
 body.pf-figma main#main .ds-club-map .pf-map-point small{font-size:9px}
}
body.pf-figma main#main .ds-club-map .pf-map-legend{justify-content:center}

/* ── Black November: Tarif-Karte (Figma 5012:20740) und Tarif-Karte_B2B (5012:22439) ──
   Karten mit details[data-detail-layout] (tariff-render.js): Kampagnenhinweis in der Preis-Fläche, Folgebeitrag und
   Leistungen in „Das ist für dich drin“, Button braun mit goldener Schrift ohne Rand (nur in der Preistabelle). */
body.pf-figma main#main .ds-tariff-offer{display:flex;flex-direction:column;gap:6px;min-width:0;color:var(--ds-ink)}
body.pf-figma main#main .ds-tariff-offer>p{margin:0}
body.pf-figma main#main .ds-tariff-offer>.ds-tariff-offer-place{font:700 var(--ds-eyebrow)/1.5 var(--pf-font-headline);letter-spacing:.16em;text-transform:uppercase}
body.pf-figma main#main .ds-tariff-offer>.ds-tariff-offer-title{font:700 32px/1.12 var(--pf-font-headline);letter-spacing:-.04em}
body.pf-figma main#main .pf-tariff-content:has(>.pf-tariff-benefits[data-detail-layout])>a.pf-button[href],
body.pf-figma main#main .pf-tariff-expanded .ds-tariff-expanded-cta[href]{order:1;align-self:flex-start;margin-top:28px;min-height:38px;padding:0 20px;border:0;border-radius:999px;background:var(--ds-ink);color:var(--ds-gold);box-shadow:none}
body.pf-figma main#main .pf-tariff-content:has(>.pf-tariff-benefits[data-detail-layout])>a.pf-button[href]:hover,
body.pf-figma main#main .pf-tariff-expanded .ds-tariff-expanded-cta[href]:hover{background:hsl(var(--pf-brand-brown)/.9)}
body.pf-figma main#main .pf-tariff-content:has(>.pf-tariff-benefits[data-detail-layout])>a.pf-button[href]:focus-visible,
body.pf-figma main#main .pf-tariff-expanded .ds-tariff-expanded-cta[href]:focus-visible{outline:2px solid var(--ds-ink);outline-offset:3px}
body.pf-figma main#main .pf-tariff-content:has(>.pf-tariff-benefits[data-detail-layout])>.pf-tariff-benefits{order:2;margin-top:22px}
/* Offene Mitgliederkarte: der Button wandert mit in die Detail-Tafel (Figma „offen“). */
body.pf-figma main#main .pf-tariff-stage[data-details-layout=offer] .pf-tariff-content>a.pf-button{display:none}
/* Detail-Tafel ohne Titelkopf: rechts nur „schließen“, B2B mit dem Vorteil daneben. */
body.pf-figma main#main .pf-tariff-expanded[data-detail-layout]{gap:29px}
body.pf-figma main#main .pf-tariff-expanded .ds-tariff-expanded-head{flex-direction:row;align-items:flex-start;justify-content:space-between;padding:0;background:none}
body.pf-figma main#main .pf-tariff-expanded .ds-tariff-expanded-head .pf-tariff-expanded-close{margin-top:0}
body.pf-figma main#main .pf-tariff-expanded[data-detail-layout=offer] .ds-tariff-expanded-head{margin-bottom:auto}
body.pf-figma main#main .pf-tariff-expanded>.ds-tariff-detail-lead{margin:0;padding-bottom:6px;border-bottom:1px solid var(--ds-ink);font:300 16px/1.65 var(--pf-font-body)}
body.pf-figma main#main .pf-tariff-expanded>.ds-tariff-detail-note{margin:auto 0 0;padding-top:6px;border-top:1px solid var(--ds-ink);font:300 16px/1.65 var(--pf-font-body)}
body.pf-figma main#main .pf-tariff-expanded .ds-tariff-expanded-cta[href]{margin-top:0}
/* Firmenfitness: Preis mit Firmen-Code direkt unter der Preis-Fläche (Adrian 13.11.2026). */
body.pf-figma main#main .pf-tariff-content .ds-tariff-code{margin:12px 0 0;padding:0 20px;color:var(--ds-ink);font:400 18px/1.5 var(--pf-font-body)}
body.pf-figma main#main .pf-tariff-content .ds-tariff-code strong{font-weight:700}
.pf-tariff-benefits>.ds-tariff-detail-lead,.pf-tariff-benefits>.ds-tariff-detail-note{margin:0 0 16px}
@media(min-width:701px) and (max-width:1100px){body.pf-figma main#main .ds-tariff-offer>.ds-tariff-offer-title{font-size:26px}}
@media(max-width:700px){
 body.pf-figma main#main .ds-tariff-offer>.ds-tariff-offer-place{font-size:12px}
 body.pf-figma main#main .ds-tariff-offer>.ds-tariff-offer-title{font-size:22px}
 body.pf-figma main#main .pf-tariff-content .ds-tariff-code{padding:0 16px;font-size:16px}
 body.pf-figma main#main .pf-tariff-expanded[data-detail-layout]{gap:22px}
 /* Figma mobil offen: kein Schließen-Kreuz, die Zeile „Das ist für dich drin“ schließt. */
 body.pf-figma main#main .pf-tariff-expanded .ds-tariff-expanded-head .pf-tariff-expanded-close{display:none}
 body.pf-figma main#main .pf-tariff-expanded[data-detail-layout=offer] .ds-tariff-expanded-head{display:none}
}
/* Kampagnen-CTA Firmenfitness (CorporateCampaign.astro): Figma dunkelt das Foto flach um 20 % ab, ohne Verlauf. */
body.pf-figma main#main div[data-campaign-window]>.ds-cta>img{filter:brightness(.8)}

/* Club-Box zum Lageplan (Adrian 13.11.2026): Klick auf Marker öffnet sie rechts neben der Karte, mobil darunter. */
body.pf-figma main#main .ds-club-map-layout{display:grid;grid-template-columns:minmax(0,680px);justify-content:center;align-items:center;gap:clamp(24px,3vw,48px);margin-top:clamp(24px,4vw,48px)}
body.pf-figma main#main .ds-club-map-cards:not(:has(article:not([hidden]))){display:none}
body.pf-figma main#main .ds-club-map-card{position:relative;overflow:hidden;border:1px solid hsl(var(--pf-brand-brown)/.12);border-radius:var(--ds-radius);background:var(--ds-paper);box-shadow:0 18px 48px hsl(var(--pf-brand-brown)/.14);animation:ds-club-map-card-in .32s cubic-bezier(.22,1,.36,1)}
body.pf-figma main#main .ds-club-map-card figure{position:relative;margin:0;aspect-ratio:3/2}
body.pf-figma main#main .ds-club-map-card img{display:block;width:100%;height:100%;object-fit:cover}
body.pf-figma main#main .ds-club-map-card figcaption{position:absolute;left:16px;top:16px;padding:6px 14px;border:1px solid var(--ds-glass-line);border-radius:999px;background:hsl(var(--pf-brand-cream)/.2);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);color:var(--ds-paper);font:700 12px/1.4 var(--pf-font-headline);letter-spacing:.16em;text-transform:uppercase}
body.pf-figma main#main .ds-club-map-card-copy{padding:clamp(20px,2.4vw,32px)}
body.pf-figma main#main .ds-club-map-card-place{margin:0 0 6px;color:hsl(var(--pf-brand-brown)/.6);font:700 12px/1.4 var(--pf-font-headline);letter-spacing:.16em;text-transform:uppercase}
body.pf-figma main#main .ds-club-map-card h3{margin:0;color:var(--ds-ink);font:400 clamp(24px,2.2vw,32px)/1.1 var(--pf-font-headline);letter-spacing:-.02em}
body.pf-figma main#main .ds-club-map-card-copy>p:not(.ds-club-map-card-place){margin:10px 0 0;color:hsl(var(--pf-brand-brown)/.8);font:400 16px/1.5 var(--pf-font-body)}
body.pf-figma main#main .ds-club-map-card-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;color:var(--ds-ink)}
body.pf-figma main#main .ds-club-map-close{position:absolute;right:12px;top:12px;z-index:1;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ds-glass-line);border-radius:50%;background:hsl(var(--pf-brand-brown)/.35);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);color:var(--ds-paper);font:300 26px/1 var(--pf-font-body);cursor:pointer}
body.pf-figma main#main .ds-club-map-close:focus-visible{outline:2px solid var(--ds-paper);outline-offset:2px}
@keyframes ds-club-map-card-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (min-width:961px){body.pf-figma main#main .ds-club-map-layout.is-open{grid-template-columns:minmax(0,600px) minmax(320px,420px)}}
@media (prefers-reduced-motion:reduce){body.pf-figma main#main .ds-club-map-card{animation:none}}