/* Designsystem – Bereich clubs. Bausteine dieses Bereichs; Kern-Tokens und -Klassen stehen in ds.css. */

/* ── Club Infos (Figma „Club Infos“, ds/ClubInfos.astro + relaunch/ClubFacts.astro) ── */
.ds-club-infos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.ds-club-infos--auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.ds-club-infos--aside{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.ds-club-infos--aside>.ds-club-info{grid-column:1}
.ds-club-infos--aside>.ds-club-info.is-tall{grid-column:2;grid-row:1/span 2}
.ds-club-info{display:flex;min-width:0}
.ds-club-info>.ds-info-card{flex:1;min-width:0}
.ds-club-info.is-wide{grid-column:1/-1}
.ds-club-cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px 32px;margin:0}
.ds-club-cols>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.ds-club-cols--stack{flex-direction:column;justify-content:flex-start;gap:26px}
.ds-club-cols dd{margin:0}
.ds-club-cols a,.ds-club-lines a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ds-club-cols a:hover{text-decoration-thickness:2px}
.ds-club-note{margin-top:4px!important}
.ds-club-info .ds-button{align-self:flex-start;margin-top:4px}
.ds-club-lines{display:flex;flex-direction:column}
body.pf-figma main#main .ds-club-lines .ds-body+.ds-body{margin-top:0}
.ds-club-lines .ds-body+.ds-meta{margin-top:14px}

/* ── Club-Kacheln (relaunch/ClubOverview.astro + ClubGrid.astro) ── */
.ds-club-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.ds-club-tile{position:relative;display:block;aspect-ratio:311/420;border-radius:var(--ds-radius);overflow:hidden;background:var(--ds-ink);color:var(--ds-paper);text-decoration:none;isolation:isolate}
.ds-club-tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s ease}
.ds-club-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,hsl(var(--pf-brand-brown)/.45),hsl(var(--pf-brand-brown)/0) 55%)}
.ds-club-tile:hover>img{transform:scale(1.03)}
.ds-club-tile:focus-visible{outline:2px solid var(--ds-ink);outline-offset:3px}
.ds-club-tile-label{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-radius:18px}
.ds-club-tile-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
body.pf-figma main#main .ds-club-tile .ds-eyebrow{font-size:13px}
body.pf-figma main#main .ds-club-tile .ds-meta{color:var(--ds-gold)}
.ds-club-tile .ds-round{width:38px;height:38px}
.ds-club-tile.is-signature .ds-club-tile-label{background:hsl(var(--pf-brand-brown)/.42)}

/* ── Clubs-tabs (ds/ClubTabs.astro): Kopf + Club-Explorer aus shared-clubs.mjs, Figma-Werte wie Startseite ── */
.ds-club-explorer-head{margin-bottom:29px}
body.pf-figma main#main .ds-club-explorer-text{margin:0;font:300 clamp(20px,1.65vw,23.76px)/1.2 var(--pf-font-body);letter-spacing:-.035em;text-align:right;color:var(--ds-paper)}
body.pf-figma main#main .ds-club-explorer{padding-block:82px 66px}
body.pf-figma main#main .ds-club-explorer .pf-club-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:32px}
body.pf-figma main#main .ds-club-explorer .pf-club-tabs button{display:flex;flex-direction:column-reverse;justify-content:flex-end;align-items:flex-start;gap:4px;min-width:0;padding:15px 19px;border-radius:18px;
 color:var(--fx-paper);background:hsl(var(--pf-brand-cream)/.2);border:1px solid var(--fx-glass-line);box-shadow:var(--fx-glass-shadow)}
body.pf-figma main#main .ds-club-explorer .pf-club-tabs button>span{display:none}
body.pf-figma main#main .ds-club-explorer .pf-club-tabs button strong{font:400 clamp(18px,1.67vw,24px)/1.1 var(--pf-font-headline);letter-spacing:-.04em}
body.pf-figma main#main .ds-club-explorer .pf-club-tabs small{margin:0;font:700 var(--fx-eyebrow)/1.5 var(--pf-font-headline);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
body.pf-figma main#main .ds-club-explorer .pf-club-tabs button[aria-pressed=true]{background:var(--fx-gold);color:var(--fx-ink);border-color:transparent;box-shadow:none;padding-bottom:15px}
body.pf-figma main#main .ds-club-explorer .pf-club-stage{grid-template-columns:679fr 631fr;gap:0;align-items:stretch}
body.pf-figma main#main .ds-club-explorer .pf-region{border:0;background:none;border-radius:var(--fx-radius);min-height:600px}
body.pf-figma main#main .ds-club-explorer .pf-region svg{fill:hsl(var(--pf-brand-cream)/.06)}
body.pf-figma main#main .ds-club-explorer .pf-map-point span{font:300 clamp(18px,1.65vw,23.76px)/1.2 var(--pf-font-body);letter-spacing:-.035em;padding:7px 13px;border-radius:12px;text-align:center;
 background:hsl(var(--pf-brand-cream)/.2);border:1px solid var(--fx-glass-line);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}
body.pf-figma main#main .ds-club-explorer .pf-map-point small{font:700 var(--fx-eyebrow)/1.5 var(--pf-font-headline);letter-spacing:.16em;text-transform:uppercase}
body.pf-figma main#main .ds-club-explorer .pf-map-point[aria-pressed=true] span{background:hsl(var(--pf-brand-gold)/.2);border-color:hsl(var(--pf-brand-gold)/.42);color:var(--fx-gold)}
body.pf-figma main#main .ds-club-explorer .pf-map-point i{display:none}
body.pf-figma main#main .ds-club-explorer .pf-map-point span{display:flex;flex-direction:column-reverse;align-items:center;text-transform:lowercase}
body.pf-figma main#main .ds-club-explorer .pf-region .pf-geo-road{stroke:hsl(var(--pf-brand-cream)/.3);stroke-width:1.5}
body.pf-figma main#main .ds-club-explorer .pf-region .pf-geo-river{stroke:hsl(var(--pf-brand-gold)/.55);stroke-width:2}
body.pf-figma main#main .ds-club-explorer .pf-map-legend span+span::before{background:hsl(var(--pf-brand-gold)/.7)}
body.pf-figma main#main .ds-club-explorer .pf-region svg text{fill:hsl(var(--pf-brand-cream)/.45)}
body.pf-figma main#main .ds-club-explorer #club-view .pf-club-detail{position:relative;display:block;min-height:clamp(526px,57.7vw,831px);height:100%;border-radius:var(--fx-radius);overflow:hidden;background:var(--fx-ink);color:var(--fx-paper);--pf-cta-fill:hsl(var(--pf-brand-cream));--pf-cta-ink:hsl(var(--pf-brand-brown));--pf-cta-outline:hsl(var(--pf-brand-cream));--pf-cta-hover:hsl(var(--pf-brand-cream)/.08)}
body.pf-figma main#main .ds-club-explorer .pf-club-detail figure{position:absolute;inset:0;min-height:0}
body.pf-figma main#main .ds-club-explorer .pf-club-detail figure img{position:absolute;inset:0;width:100%;height:100%}
body.pf-figma main#main .ds-club-explorer .pf-club-detail figcaption{position:absolute;top:16px;left:16px;right:auto;width:auto;padding:8px 14px;border-radius:24px;
 background:hsl(var(--pf-brand-cream)/.42);border:1px solid var(--fx-glass-line);color:var(--fx-paper);
 font:700 var(--fx-eyebrow)/1.5 var(--pf-font-headline);letter-spacing:.16em;text-transform:uppercase;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body.pf-figma main#main .ds-club-explorer .pf-club-copy{position:absolute;left:24px;right:16px;bottom:29px;padding:28px 32px;display:flex;flex-direction:column;gap:16px;
 background:var(--fx-glass-fill);border:1px solid var(--fx-glass-line);border-radius:var(--fx-radius);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);box-shadow:var(--fx-glass-shadow)}
body.pf-figma main#main .ds-club-explorer .pf-club-copy>p{margin:0;font-size:16px}
body.pf-figma main#main .ds-club-explorer .pf-club-copy ul{margin:0}
body.pf-figma main#main .ds-club-explorer .pf-club-copy li{font:500 12px/1.65 var(--pf-font-body);margin:0;text-transform:none;letter-spacing:0}
body.pf-figma main#main .ds-club-explorer .pf-club-actions{gap:16px}
body.pf-figma main#main .ds-club-explorer .pf-club-actions a.pf-button[href]{background:none;color:var(--fx-paper);border:1px solid var(--fx-paper)}
/* Adrian 13.11.2026: zweiter Button muss als Button erkennbar sein, darum mit Rand. */
body.pf-figma main#main .ds-club-explorer .pf-club-actions a.pf-button-secondary[href]{border-color:hsl(var(--pf-brand-cream)/.55);padding-inline:20px;text-transform:none}
body.pf-figma main#main .ds-club-explorer .pf-club-actions a.pf-button[href]:hover{background:hsl(var(--pf-brand-cream)/.12)}
@media(max-width:1000px){
 body.pf-figma main#main .ds-club-explorer .pf-club-stage{grid-template-columns:1fr}
}
@media(max-width:700px){
 body.pf-figma main#main .ds-club-explorer{padding-block:56px}
 body.pf-figma main#main .ds-club-explorer .pf-club-tabs{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
 body.pf-figma main#main .ds-club-explorer #club-view .pf-club-detail{min-height:526px}
 body.pf-figma main#main .ds-club-explorer .pf-club-copy{left:16px;right:16px;bottom:13px;padding:28px 16px 16px}
 body.pf-figma main#main .ds-club-explorer .pf-club-actions{flex-direction:column;align-items:flex-start;gap:6px}
 body.pf-figma main#main .ds-club-explorer .pf-region{min-height:420px}
}
body.pf-figma main#main .ds-club-explorer .pf-map-disclosure>.pf-region{background:none;border:0;box-shadow:none}
body.pf-figma main#main .ds-club-explorer .pf-region-canvas{background-image:none}
body.pf-figma main#main .ds-club-explorer .pf-region svg text,body.pf-figma main#main .ds-club-explorer .pf-map-legend{display:none}
body.pf-figma main#main .ds-club-explorer .pf-map-note{font-size:11px;color:hsl(var(--pf-brand-cream)/.78)}
body.pf-figma main#main .ds-club-explorer .pf-region-canvas .pf-map-point{transform:translate(-50%,-50%)}
@media(min-width:701px) and (max-width:1000px){
 body.pf-figma main#main .ds-club-explorer .pf-club-stage>#club-view{grid-column:1;grid-row:1}
 body.pf-figma main#main .ds-club-explorer .pf-map-disclosure{grid-column:1;grid-row:2;margin-top:24px}
}

/* ── Gym-Changer-Karte direkt unter der Tariftabelle (unsere-clubs) ── */
.ds-clubs-changer{padding-bottom:var(--ds-section)}
/* Adrian 13.11.2026: Gym Changer rückt näher an die Tariftabelle. */
body.pf-figma main#main .pf-clubs-pricing:has(+ .ds-clubs-changer){padding-bottom:24px}
/* Adrian 13.11.2026: letzte Foto-CTA auf /unsere-clubs mit mehr Kontrast und ruhigerem Text. */
body.pf-figma main#main #cta-studiowechsler-kampagne.ds-cta--mitte .ds-cta-card{background:hsl(var(--pf-brand-brown)/.72);gap:16px}
body.pf-figma main#main #cta-studiowechsler-kampagne.ds-cta--mitte .ds-body{line-height:1.5}
.ds-clubs-changer .pf-changer-offer{margin-top:0}

@media(max-width:1000px){
 .ds-club-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ds-club-tile{aspect-ratio:4/3}
 .ds-club-infos--aside{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ds-club-infos--aside>.ds-club-info{grid-column:1/-1}
 .ds-club-infos--aside>.ds-club-info.is-tall{grid-column:1/-1;grid-row:auto;order:-1}
 body.pf-figma main#main .ds-club-explorer-text{text-align:left}
}
@media(max-width:700px){
 .ds-club-infos,.ds-club-infos--aside{grid-template-columns:1fr;gap:16px}
 .ds-club-cols{flex-direction:column;gap:14px}
 .ds-club-cols--stack{gap:14px}
 .ds-club-grid{gap:12px}
 .ds-club-tile{aspect-ratio:3/4}
 .ds-club-tile-label{left:8px;right:8px;bottom:8px;padding:12px;border-radius:14px}
 .ds-club-tile .ds-round{display:none}
 body.pf-figma main#main .ds-club-tile .ds-eyebrow{font-size:11px}
 body.pf-figma main#main .ds-club-tile .ds-caption{font-size:19px}
 .ds-club-explorer-head{margin-bottom:24px}
}
@media(prefers-reduced-motion:reduce){.ds-club-tile>img{transition:none}}

/* Textlink im Slider-Kopf der Club-Seiten („erfahre mehr über dein training“) */
.ds-clubs-link{display:inline-block;margin-top:6px;color:inherit;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.ds-clubs-link:hover{text-decoration-thickness:2px}

/* Impressionen der Club-Seiten: Club-Label oben links bleibt auch auf hellen Fotos lesbar */
.ds-gallery[id$="-atmosphere"] .ds-card-media::after{background:linear-gradient(to bottom,hsl(var(--pf-brand-brown)/.45) 0%,hsl(var(--pf-brand-brown)/0) 38%)}
.ds-club-cols>div{max-width:260px}
.ds-club-cols--stack>div{max-width:none}
@media(max-width:700px){.ds-club-cols>div{max-width:none}}

/* Mobil: Club-Reiter brechen statt abzuschneiden („Classic · ab 02.01.2027“). */
@media(max-width:1024px){body.pf-figma main#main .ds-club-explorer .pf-club-tabs small{white-space:normal;overflow:visible;text-overflow:clip;letter-spacing:.1em}}

/* Meeting Celie 12.11.2026: Mobil nimmt die Glasbox sonst zu viel vom Clubfoto ein – Ausstattungsliste wie in Figma nur am Desktop. */
@media(max-width:700px){body.pf-figma main#main .ds-club-explorer .pf-club-copy ul{display:none}}
/* Adrian 13.11.2026: Club-Galerien im Figma-Hochformat 416×523 (Club-Seiten „Karben/Rosbach/Bad Homburg“). */
.ds-gallery[id$="-atmosphere"] .ds-card{height:clamp(360px,36.3vw,523px)}
@media(max-width:700px){.ds-gallery[id$="-atmosphere"] .ds-card{height:auto;aspect-ratio:416/523}}