/* peoples Designsystem nach Figma „Relaunch · Sections & Components“ (11/2026).
   Eine Quelle für alle Unterseiten: Abschnitte, Überschriften, Buttons, Glas, Karten.
   Werte aus Figma (Desktop 1440): Gutter 65, Sektion 65, H2 60, Card-H3 32, Eyebrow 16, Radius 24.
   Tokens bauen auf site-figma.css (--fx-*) und den Brand-Farben aus design-tokens/relaunch.css auf. */

body.pf-figma{
 --ds-ink:hsl(var(--pf-brand-brown));
 --ds-paper:hsl(var(--pf-brand-cream));
 --ds-gold:hsl(var(--pf-brand-gold));
 --ds-sand:hsl(var(--pf-brand-sand));
 --ds-container:1310px;
 --ds-gutter:var(--fx-gutter,clamp(22px,4.52vw,65px));
 --ds-section:var(--fx-section,clamp(56px,4.52vw,65px));
 --ds-radius:24px;
 --ds-hero:clamp(44px,5.35vw,77px);
 --ds-h2:var(--fx-h2,clamp(32px,4.17vw,60px));
 --ds-h3:var(--fx-h3,clamp(24px,2.23vw,32px));
 --ds-caption:clamp(20px,1.67vw,24px);
 --ds-eyebrow:var(--fx-eyebrow,clamp(14px,1.12vw,16px));
 --ds-glass-fill:hsl(var(--pf-brand-cream)/.12);
 --ds-glass-line:hsl(var(--pf-brand-cream)/.42);
 --ds-glass-shadow:inset 0 1px 0 hsl(var(--pf-brand-cream)/.2),0 12px 32px hsl(var(--pf-brand-brown)/.12);
 /* Figma „Text“-Abschnitte (13.11.2026 aus Figma gelesen): Linear #DDC19D 28 % → #FFF3E0, schräg von oben links. */
 --ds-soft:linear-gradient(122deg,hsl(var(--pf-brand-sand)/.28) 0%,hsl(var(--pf-brand-cream)) 100%);
 --ds-card-soft:linear-gradient(135deg,hsl(var(--pf-brand-sand)/.3) 17%,hsl(var(--pf-brand-cream)/0) 83%);
}

/* ── Abschnitte und Tonalität ── */
.ds-section{position:relative;padding-block:var(--ds-section);color:var(--ds-ink);--ds-accent:hsl(var(--pf-brand-brown)/.6);--ds-line:var(--ds-ink)}
.ds-section--paper{background:var(--ds-paper)}
.ds-section--soft{background:var(--ds-soft)}
.ds-section--brown{background:var(--ds-ink);color:var(--ds-paper);--ds-accent:var(--ds-gold);--ds-line:var(--ds-paper)}
.ds-section--flush{padding-block:0}
.ds-wrap{width:min(var(--ds-container),calc(100% - 2*var(--ds-gutter)));margin-inline:auto}
.ds-stack{display:flex;flex-direction:column;gap:32px}
.ds-tone-light{color:var(--ds-paper);--ds-accent:var(--ds-gold);--ds-line:var(--ds-paper)}

/* ── Überschrift: Eyebrow (versal) + H2 kleingeschrieben, Zeile 2 als Akzent, Linie darunter ── */
.ds-heading{display:inline-flex;flex-direction:column;align-items:flex-start;max-width:100%;gap:6px}
.ds-heading--center{align-items:center;text-align:center;margin-inline:auto}
body.pf-figma main#main .ds-eyebrow{font:700 var(--ds-eyebrow)/1.5 var(--pf-font-headline);letter-spacing:.16em;text-transform:uppercase;margin:0;color:inherit;text-wrap:balance}
/* Review 09.11. (V1-24): keine Einzelwörter in der letzten Zeile von Eyebrows und Club-Chips. */
body.pf-figma main#main :is(.pf-eyebrow,.eyebrow,.pf-club-tabs small,.ds-tab-kicker){text-wrap:balance}
.ds-nowrap{white-space:nowrap}
body.pf-figma main#main .ds-title{font:400 var(--ds-h2)/1.08 var(--pf-font-headline);letter-spacing:-.05em;margin:0;color:inherit;text-wrap:balance}
body.pf-figma main#main .ds-title--hero{font-size:var(--ds-hero);line-height:1.04}
.ds-title .ds-accent{color:var(--ds-accent)}
.ds-heading .ds-rule{display:block;align-self:stretch;height:1px;margin-top:2px;background:var(--ds-line);opacity:.9}
.ds-heading--plain .ds-accent{color:inherit}

/* ── Text ── */
body.pf-figma main#main .ds-body{font:300 16px/1.65 var(--pf-font-body);margin:0;color:inherit}
body.pf-figma main#main .ds-body+.ds-body{margin-top:1.65em}
body.pf-figma main#main .ds-lead{font:500 12px/1.65 var(--pf-font-body);margin:0 0 4px;color:inherit}
body.pf-figma main#main .ds-meta{font:500 12px/1.65 var(--pf-font-body);margin:0;text-transform:uppercase;letter-spacing:.02em}
body.pf-figma main#main .ds-card-title{font:400 var(--ds-h3)/1.12 var(--pf-font-headline);letter-spacing:-.04em;margin:0;color:inherit}
body.pf-figma main#main .ds-caption{font:400 var(--ds-caption)/1.1 var(--pf-font-headline);letter-spacing:-.04em;margin:0;color:inherit}

/* ── Buttons: Pille, Liebling Medium 16, Klickfläche mind. 44 px ── */
body.pf-figma .ds-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 22px;border-radius:999px;border:1px solid currentColor;background:none;color:inherit;font:500 16px/1.3 var(--pf-font-headline);letter-spacing:0;text-transform:lowercase;text-decoration:none;cursor:pointer;transition:background .2s ease,opacity .2s ease,transform .2s ease;white-space:nowrap}
body.pf-figma .ds-button:hover{background:hsl(var(--pf-brand-brown)/.08)}
body.pf-figma .ds-button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
body.pf-figma .ds-button--solid{background:var(--ds-ink);color:var(--ds-paper);border-color:var(--ds-ink)}
body.pf-figma .ds-button--solid:hover{background:var(--ds-ink);opacity:.9}
body.pf-figma .ds-button--glass{color:var(--ds-paper);border-color:var(--ds-glass-line);background:hsl(var(--pf-brand-cream)/.2);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);box-shadow:var(--ds-glass-shadow)}
body.pf-figma .ds-button--glass:hover{background:hsl(var(--pf-brand-cream)/.3)}
/* Adrian 13.11.2026: auch „ghost“ mit sichtbarem Rand, sonst nicht als Button erkennbar. */
body.pf-figma .ds-button--ghost{color:var(--ds-paper);border-color:hsl(var(--pf-brand-cream)/.55)}
body.pf-figma .ds-button--ghost:hover{background:hsl(var(--pf-brand-cream)/.1)}
body.pf-figma .ds-button--light{color:var(--ds-paper);border-color:var(--ds-paper)}
body.pf-figma .ds-button--light:hover{background:hsl(var(--pf-brand-cream)/.12)}
body.pf-figma .ds-button--gold{color:var(--ds-gold);border-color:var(--ds-gold)}
body.pf-figma .ds-button--gold:hover{background:hsl(var(--pf-brand-gold)/.1)}
body.pf-figma .ds-button[aria-disabled=true],body.pf-figma button.ds-button:disabled{opacity:.45;pointer-events:none}
.ds-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 15px}

/* ── Glas (Figma „Relaunch/Glas“) ── */
.ds-glass{color:var(--ds-paper);background:var(--ds-glass-fill);border:1px solid var(--ds-glass-line);border-radius:var(--ds-radius);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);box-shadow:var(--ds-glass-shadow);--ds-accent:var(--ds-gold);--ds-line:var(--ds-paper)}

/* ── Foto-Füllung ── */
.ds-photo-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ds-photo-card{position:relative;overflow:hidden;border-radius:var(--ds-radius);background:hsl(var(--pf-brand-sand)/.4);margin:0}
.ds-photo-card>img{display:block;width:100%;height:100%;object-fit:cover}

/* ── Foto-Hero (Figma „Hero“, 1440×766, Glas-Panel unten links) ── */
.ds-hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(600px,53.2vw,766px);padding:clamp(112px,9vw,130px) var(--ds-gutter) var(--ds-gutter);overflow:hidden;color:var(--ds-paper);background:var(--ds-ink);isolation:isolate}
.ds-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.ds-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,hsl(var(--pf-brand-brown)/.28) 0%,hsl(var(--pf-brand-brown)/0) 26%,hsl(var(--pf-brand-brown)/0) 45%,hsl(var(--pf-brand-brown)/.32) 100%)}
/* Review 09.11. (V2-03): Figma-Glas-Panel 573 px breit (Text 475 + 2×49 Innenabstand), wächst nur mit dem Titel (Coach 604);
   die Obergrenze 780 px bleibt für lange Live-Titel. */
/* Adrian 13.11.2026: Hero-Text auf hellen Fotos schwer lesbar – Glas im Hero dunkler getönt. */
.ds-hero-panel.ds-glass{background:hsl(var(--pf-brand-brown)/.42)}
.ds-hero-panel{display:flex;flex-direction:column;gap:20px;width:auto;min-width:min(100%,573px);max-width:min(100%,780px);padding:clamp(28px,3.4vw,49px)}
.ds-hero-panel .ds-heading{align-self:stretch}
.ds-hero-panel .ds-title .ds-accent{color:var(--ds-gold)}
/* Fließtext bricht auf Panelbreite um (min. 475 px, bei breitem Titel so breit wie der Titel – wie Figma Coach 506 px). */
.ds-hero-panel .ds-body{max-width:none;contain:inline-size}
.ds-hero--center{align-items:center}

/* ── Textblock (Figma „Text“): einspaltig oder zweispaltig mit Fotokarte ── */
.ds-text{display:grid;gap:32px}
.ds-text--single .ds-text-copy{max-width:763px;display:flex;flex-direction:column;gap:28px}
.ds-text--split{grid-template-columns:minmax(0,591px) minmax(0,643px);justify-content:space-between;align-items:end;gap:clamp(32px,5vw,76px)}
.ds-text--split.ds-text--center{align-items:center}
.ds-text--split .ds-text-copy{display:flex;flex-direction:column;gap:20px}
.ds-text--reverse .ds-text-media{order:-1}
.ds-text-media{aspect-ratio:643/555;min-height:0}
.ds-text-media--tall{aspect-ratio:643/682}
.ds-text-copy>.ds-heading{margin-bottom:4px}
.ds-text-copy>.ds-button{align-self:flex-start;margin-top:8px}

/* ── Schrittliste mit Icon-Schiene (Figma Benefit / Transparenz / Bulletpoints) ── */
.ds-steps{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:22px;position:relative}
.ds-steps>li{position:relative;display:grid;grid-template-columns:50px minmax(0,1fr);align-items:center;gap:24px;min-height:50px}
.ds-steps>li:not(:last-child)::after{content:"";position:absolute;left:25px;top:50px;width:1px;height:22px;background:hsl(var(--pf-brand-brown)/.22)}
.ds-steps--loose{gap:50px}
.ds-steps--loose>li:not(:last-child)::after{height:50px}
.ds-steps--loose>li{align-items:start}
.ds-step-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:hsl(var(--pf-brand-sand)/.12);border:1px solid hsl(var(--pf-brand-brown)/.22)}
.ds-step-icon svg{width:30px;height:30px;stroke-width:1.1}
.ds-step-icon .ds-mark{width:30px;height:auto}
.ds-step-text{display:flex;flex-direction:column}
body.pf-figma main#main .ds-step-title{font:700 var(--ds-eyebrow)/1.5 var(--pf-font-headline);letter-spacing:.16em;text-transform:uppercase;margin:0}
body.pf-figma main#main .ds-step-text p{font:300 16px/1.65 var(--pf-font-body);margin:0}
.ds-section--brown .ds-step-icon{background:hsl(var(--pf-brand-cream)/.08);border-color:hsl(var(--pf-brand-cream)/.3)}

/* ── Infokarte (Figma „icon-Card2“) ── */
.ds-info-card{display:flex;flex-direction:column;gap:16px;padding:clamp(28px,2.8vw,40px);border-radius:var(--ds-radius);background:var(--ds-card-soft);color:var(--ds-ink)}
.ds-info-card-head{display:flex;align-items:center;gap:12px}
.ds-info-card-head svg{width:50px;height:50px;flex:none;stroke-width:1.2}
.ds-info-card hr{border:0;border-top:1px solid currentColor;margin:0;width:100%}
.ds-info-card .ds-button{align-self:flex-start;margin-top:4px}
.ds-hours{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 24px}
.ds-hours>div{display:flex;flex-direction:column;gap:6px;min-width:124px}
/* Review 09.11. (V1-10): Auf schmalen, hohen Karten lief der Verlauf zur Hälfte ins Transparente – mobil endet er deckend. */
@media(max-width:700px){.ds-info-card{background:linear-gradient(135deg,hsl(var(--pf-brand-sand)/.3) 17%,hsl(var(--pf-brand-sand)/.12) 83%)}}
.ds-section--brown .ds-info-card{background:linear-gradient(135deg,hsl(var(--pf-brand-cream)/.1),hsl(var(--pf-brand-cream)/.02));color:var(--ds-paper)}

/* ── Foto-CTA (Figma „CTA“, 1440×550, Glaskarte unten links / mittig) ── */
.ds-cta{position:relative;display:flex;align-items:flex-end;min-height:clamp(480px,38.2vw,550px);padding:var(--ds-section) var(--ds-gutter);overflow:hidden;isolation:isolate;background:hsl(var(--pf-brand-sand)/.8);color:var(--ds-paper)}
.ds-cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.ds-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,hsl(var(--pf-brand-brown)/.34),hsl(var(--pf-brand-brown)/.04) 62%)}
.ds-cta--center{align-items:center}
.ds-cta-card{display:flex;flex-direction:column;align-items:flex-start;gap:22px;width:min(100%,520px);padding:32px 44px}
.ds-cta-card .ds-heading{align-self:stretch}
/* Review 09.11. (V1-13): Figma-„Stage-Karte“ hat 45 px Innenabstand und wächst mit der Überschrift (517–566 px);
   der Fließtext bricht auf Überschriftenbreite um, statt die Karte zu verbreitern. */
@media(min-width:701px){
 .ds-cta:not(.ds-cta--mitte) .ds-cta-card{width:fit-content;min-width:min(100%,517px);max-width:min(100%,640px);padding:33px 45px}
 .ds-cta:not(.ds-cta--mitte) .ds-cta-card>.ds-body{contain:inline-size;width:100%}
}
.ds-cta--mitte{justify-content:center;align-items:center;min-height:0}
.ds-cta--mitte::before{background:hsl(var(--pf-brand-brown)/.38)}
.ds-cta--mitte .ds-cta-card{width:min(100%,793px);align-items:center;text-align:center}
.ds-cta--mitte .ds-cta-card .ds-body{max-width:604px}

/* ── CTA Optionen: Banner + zwei Infokarten ── */
.ds-options{display:flex;flex-direction:column;gap:32px}
.ds-options-banner{aspect-ratio:1310/306;border-radius:var(--ds-radius);overflow:hidden;margin:0}
.ds-options-banner img{width:100%;height:100%;object-fit:cover;display:block}
.ds-options-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}

@media(max-width:1000px){
 .ds-text--split{grid-template-columns:1fr;align-items:start}
 .ds-text--split .ds-text-media{order:-1}
 .ds-text--split.ds-text--media-last .ds-text-media{order:0}
 .ds-options-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
 .ds-hero{min-height:clamp(620px,170vw,770px);padding:96px 12px 22px;align-items:flex-end}
 .ds-hero-panel{padding:26px 22px;gap:16px;width:100%}
 .ds-cta{min-height:620px;padding:22px 12px;align-items:flex-end}
 .ds-cta::before{background:linear-gradient(180deg,hsl(var(--pf-brand-brown)/.06) 25%,hsl(var(--pf-brand-brown)/.5))}
 .ds-cta--mitte::before{background:hsl(var(--pf-brand-brown)/.42)}
 .ds-cta-card{padding:26px 22px;gap:18px;width:100%}
 .ds-cta--mitte{padding:56px 12px}
 .ds-options-banner{aspect-ratio:346/220}
 .ds-hours>div{min-width:0;flex:1 1 40%}
 .ds-steps{gap:18px}
 .ds-steps>li:not(:last-child)::after{height:18px}
 body.pf-figma .ds-actions .ds-button,body.pf-figma .ds-text-copy>.ds-button,body.pf-figma main#main .ds-button{white-space:normal;text-align:center;max-width:100%}
 /* Geräte-Review 09.11.2026: lange CTA-Texte („erlebe, wie sich zusammenhalt anfühlt“) ragten bei 360 px aus der Glas-Box. */
 .ds-text-copy,.ds-split-copy{min-width:0}
}
@media(prefers-reduced-motion:reduce){body.pf-figma .ds-button{transition:none}}

/* ── Kopfzeile von Slider-Abschnitten: Überschrift links, Text rechts ── */
.ds-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.ds-head>.ds-body{max-width:498px}
.ds-head--right>.ds-body{text-align:right}
.ds-rail-section{display:flex;flex-direction:column;gap:47px;overflow:hidden}

/* ── Karten-Slider (Figma „Slider“ + Trainings-/Coach-Karte + Karte-Button) ── */
.ds-rail{display:flex;gap:var(--ds-rail-gap,28px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--ds-rail-start);padding-inline:var(--ds-rail-start) var(--ds-gutter);scrollbar-width:none;overscroll-behavior-x:contain;--ds-rail-start:max(var(--ds-gutter),calc((100% - var(--ds-container))/2))}
.ds-rail::-webkit-scrollbar{display:none}
.ds-rail--tight{--ds-rail-gap:22px}
.ds-card{position:relative;flex:none;display:flex;width:clamp(286px,28.9vw,416px);height:clamp(430px,43.5vw,627px);border-radius:var(--ds-radius);overflow:hidden;background:var(--ds-ink);color:var(--ds-paper);scroll-snap-align:start;transition:width .45s cubic-bezier(.2,.7,.2,1),background .3s ease}
.ds-card-media{position:relative;flex:none;width:clamp(286px,28.9vw,416px);height:100%;border-radius:var(--ds-radius);overflow:hidden;background:var(--ds-ink)}
.ds-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ds-card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,hsl(var(--pf-brand-brown)/.45) 0%,hsl(var(--pf-brand-brown)/.21) 40%,hsl(var(--pf-brand-brown)/0) 70%);pointer-events:none;transition:opacity .3s ease}
/* Meeting Celie 12.11.2026: Dachzeile bündig mit der Titelzeile (vorher 10 px nach rechts versetzt). */
body.pf-figma main#main .ds-card-label{position:absolute;left:24px;top:36px;z-index:1;margin:0;font:700 var(--ds-eyebrow)/1.5 var(--pf-font-headline);letter-spacing:.16em;text-transform:uppercase;color:var(--ds-paper);max-width:calc(100% - 48px);text-wrap:balance}
.ds-card-foot{position:absolute;left:24px;right:24px;bottom:24px;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.ds-card-foot--stack{flex-direction:column;align-items:flex-start;gap:12px}
body.pf-figma main#main .ds-card-foot .ds-card-title{color:var(--ds-paper);max-width:292px}
.ds-round{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid currentColor;background:none;color:inherit;cursor:pointer;padding:0;transition:background .2s ease,transform .2s ease}
.ds-round svg{width:22px;height:22px}
.ds-round:hover{background:hsl(var(--pf-brand-cream)/.14)}
.ds-section:not(.ds-section--brown) .ds-rail-tools .ds-round:hover,.ds-card-info .ds-round:hover{background:hsl(var(--pf-brand-brown)/.08)}
.ds-round:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* Review 09.11. (V1-21): Pfeil am Anfang/Ende des Sliders gedimmt (ds.js setzt aria-disabled). */
.ds-rail-tools .ds-round[aria-disabled=true]{opacity:.35;cursor:default}
.ds-rail-tools .ds-round[aria-disabled=true]:hover{background:none}
.ds-card-info{display:none;flex-direction:column;justify-content:flex-end;gap:22px;width:min(491px,100%);padding:40px;color:var(--ds-ink)}
.ds-card-info--top{justify-content:flex-start;padding-top:38px}
.ds-card-info .ds-card-title{color:var(--ds-ink)}
.ds-card-info hr{border:0;border-top:1px solid currentColor;margin:0}
.ds-card-info-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto}
.ds-card-info--top .ds-card-info-foot{margin-top:auto}
.ds-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.ds-facts li{display:flex;flex-direction:column;gap:6px}
.ds-facts .ds-meta{display:flex;align-items:center;gap:8px}
.ds-facts .ds-meta svg{width:22px;height:22px}
.ds-card.is-open{width:min(961px,calc(100vw - 2*var(--ds-gutter)));background:linear-gradient(123deg,hsl(var(--pf-brand-cream)/0) 17%,hsl(var(--pf-brand-sand)/.3) 83%),hsl(var(--pf-brand-sand)/.12)}
.ds-card--coach.is-open{width:min(985px,calc(100vw - 2*var(--ds-gutter)))}
.ds-card.is-open .ds-card-info{display:flex;animation:ds-fade .35s ease both}
.ds-card.is-open .ds-card-foot,.ds-card.is-open .ds-card-label{display:none}
.ds-card.is-open .ds-card-media::after{opacity:0}
@keyframes ds-fade{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.ds-rail-tools{display:flex;justify-content:flex-end;gap:12px}
/* Review 09.11. (V1-23): Figma Mobil – Linie unter „mach dein ding.“, Slider-Pfeile linksbündig. */
.ds-rule--mobile{display:none!important}
@media(max-width:700px){.ds-rule--mobile{display:block!important}.ds-rail-tools{justify-content:flex-start}}
.ds-rail-tools .ds-round{color:var(--ds-ink)}
.ds-section--brown .ds-rail-tools .ds-round{color:var(--ds-paper)}

/* ── Boxen-Übersicht (Feature-Karte mit Glas-Unterzeile) ── */
.ds-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,416px));gap:22px}
.ds-feature{position:relative;aspect-ratio:416/523;border-radius:var(--ds-radius);overflow:hidden;background:var(--ds-ink);margin:0}
.ds-feature>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ds-feature details{position:absolute;left:22px;right:22px;bottom:22px;padding:20px 24px;border-radius:20px;color:var(--ds-paper);background:var(--ds-glass-fill);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);box-shadow:var(--ds-glass-shadow)}
.ds-feature summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none}
.ds-feature summary::-webkit-details-marker{display:none}
.ds-feature summary svg{width:24px;height:24px;flex:none;transition:transform .25s ease}
.ds-feature details[open] summary svg{transform:rotate(45deg)}
.ds-feature details p{margin:12px 0 0!important}
.ds-feature summary:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:8px}
/* Feature-Karte als Link (Mitglied werden „deine optionen“): gleiche Glas-Unterzeile, Pfeil statt „+“. */
.ds-feature-label{position:absolute;left:22px;right:22px;top:22px;margin:0;color:var(--ds-paper);font:700 var(--ds-eyebrow)/1.4 var(--pf-font-headline);letter-spacing:.16em;text-transform:uppercase;text-shadow:0 1px 12px hsl(var(--pf-brand-brown)/.45)}
.ds-feature-link{position:absolute;left:22px;right:22px;bottom:22px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px;border-radius:20px;color:var(--ds-paper);background:var(--ds-glass-fill);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);box-shadow:var(--ds-glass-shadow);text-decoration:none}
.ds-feature-link svg{width:24px;height:24px;flex:none;transition:transform .25s ease}
.ds-feature-link:hover svg{transform:translateX(4px)}
.ds-feature-link:focus-visible{outline:2px solid var(--ds-paper);outline-offset:4px}

/* ── Options- und Klapp-Karten (Classic & Signature, Option-Card2) ── */
.ds-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.ds-option{display:flex;flex-direction:column;gap:10px;padding:clamp(28px,2.8vw,40px);border-radius:var(--ds-radius);background:var(--ds-paper);color:var(--ds-ink)}
.ds-option--dark{background:var(--ds-ink);color:var(--ds-paper)}
.ds-option--soft{background:var(--ds-card-soft);gap:16px}
.ds-option-head{display:flex;flex-direction:column;gap:6px}
.ds-option-head hr,.ds-option>hr{border:0;border-top:1px solid currentColor;margin:4px 0 0;width:100%}
body.pf-figma main#main .ds-option--dark .ds-eyebrow{color:var(--ds-gold)}
.ds-option-iconhead{display:flex;align-items:center;gap:12px}
.ds-option-iconhead svg{width:50px;height:50px;flex:none;stroke-width:1.2}
.ds-option details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid currentColor;cursor:pointer;list-style:none;font:300 16px/1.65 var(--pf-font-body)}
.ds-option details>summary::-webkit-details-marker{display:none}
.ds-option--soft details>summary{border-bottom:0;border-top:1px solid currentColor;justify-content:flex-end}
/* Review 09.11. (V1-14): Die unsichtbare Screenreader-Beschriftung zählt nicht – sonst rutscht das „+“ nach links. */
.ds-option--soft details>summary:has(span:not(:empty):not(.ds-sr)){justify-content:space-between}
.ds-option details>summary svg{width:24px;height:24px;flex:none;transition:transform .25s ease}
.ds-option details[open]>summary svg{transform:rotate(45deg)}
.ds-option details>summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.ds-option-more{display:flex;flex-direction:column;gap:16px;padding-top:16px}
.ds-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;max-width:480px}
.ds-checklist li{display:flex;align-items:center;gap:8px;font:500 12px/1.65 var(--pf-font-body)}
.ds-checklist svg{width:24px;height:24px;flex:none}
.ds-option-more .ds-button{align-self:flex-start}

/* ── Guidelines (3er-Raster) ── */
/* Figma „Guideline-Karte“ zu/offen (Emanuel/Celie 12.11.2026): zu = Icon, Titel, Linie, Plus; offen = Text + Schließen-Kreuz.
   Raster oben bündig – eine offene Karte wird höher, die Nachbarn bleiben kompakt. */
.ds-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,416px));justify-content:center;align-items:start;gap:22px}
.ds-guide{border-radius:var(--ds-radius);background:var(--ds-paper);color:var(--ds-ink)}
/* Adrian 13.11.2026: Guidelines als Slider; Karten gleich breit wie andere Slider-Karten, offene Karte wächst nur nach unten. */
.ds-guide-rail{align-items:flex-start;margin:0;list-style:none}
.ds-guide-rail>.ds-guide{flex:none;width:clamp(272px,28.9vw,416px);scroll-snap-align:start}
.ds-guide-rail .ds-guide-summary .ds-card-title{min-height:2.2em}
.ds-guide-details{display:flex;flex-direction:column}
.ds-guide-summary{display:flex;flex-direction:column;gap:6px;padding:28px 28px 20px;border-radius:var(--ds-radius);cursor:pointer;list-style:none}
.ds-guide-summary::-webkit-details-marker{display:none}
.ds-guide-summary:focus-visible,.ds-guide-close:focus-visible{outline:2px solid var(--ds-ink);outline-offset:-6px}
.ds-guide-icon{display:block;line-height:0}
.ds-guide-icon svg{width:57px;height:57px;stroke-width:1}
.ds-guide-summary .ds-card-title{margin:0}
.ds-guide-rule{display:block;border-top:1px solid currentColor;margin:2px 0 0;width:97%}
.ds-guide-plus{display:flex;justify-content:flex-end;margin-top:14px;line-height:0;opacity:.7}
.ds-guide-plus svg,.ds-guide-close svg{width:20px;height:20px;stroke-width:1.2}
.ds-guide-details[open] .ds-guide-plus{display:none}
.ds-guide-body{display:flex;flex-direction:column;gap:8px;padding:0 28px 20px}
.ds-guide-body .ds-body{margin:0}
.ds-guide-close{align-self:flex-end;display:inline-grid;place-items:center;width:44px;height:44px;margin:-8px -12px 0 0;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;opacity:.7}
.ds-guide-close:hover,.ds-guide-summary:hover .ds-guide-plus{opacity:1}
@media(prefers-reduced-motion:no-preference){.ds-guide-details[open] .ds-guide-body{animation:ds-guide-in .35s ease both}}
@keyframes ds-guide-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* Review 09.11. (V1-09): Im langen Handy-/Tablet-Abschnitt endet der Verlauf in Kartenfarbe – feine Kante hält die Karten sichtbar. */
@media(max-width:1100px){.ds-guide{box-shadow:inset 0 0 0 1px hsl(var(--pf-brand-brown)/.12)}}

/* ── Feedback: Foto + zentriertes Glas-Panel ── */
.ds-photo-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:596px;padding:var(--ds-section) var(--ds-gutter);overflow:hidden;isolation:isolate;background:var(--ds-ink)}
.ds-photo-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.ds-photo-stage::before{content:"";position:absolute;inset:0;background:hsl(var(--pf-brand-brown)/.25);z-index:-1}
.ds-stage-panel{width:min(100%,1000px);padding:40px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}

/* ── Benefits (Zeilen mit Partnerlogo) ── */
.ds-benefits{display:flex;flex-direction:column;gap:22px}
.ds-benefit{border-radius:22px;border:1px solid transparent;background:linear-gradient(166deg,hsl(var(--pf-brand-sand)/.3) 17%,hsl(var(--pf-brand-cream)/0) 83%);color:var(--ds-ink);transition:border-color .2s ease}
.ds-benefit[open]{border-color:var(--ds-ink)}
.ds-benefit>summary{display:grid;grid-template-columns:180px minmax(0,1fr) 44px;align-items:center;gap:32px;padding:23px;cursor:pointer;list-style:none}
.ds-benefit>summary::-webkit-details-marker{display:none}
.ds-benefit-logo{display:grid;place-items:center;height:88px;border-radius:16px;background:var(--ds-paper);overflow:hidden;padding:12px}
.ds-benefit-logo img{max-width:100%;max-height:64px;object-fit:contain}
.ds-benefit-logo span{font:300 14px/1.65 var(--pf-font-body)}
.ds-benefit-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.ds-benefit .ds-round svg{transition:transform .25s ease}
.ds-benefit[open] .ds-round svg{transform:rotate(45deg)}
.ds-benefit-details{padding:0 23px 23px calc(23px + 180px + 32px)}
.ds-benefit>summary:focus-visible{outline:2px solid currentColor;outline-offset:-4px;border-radius:22px}

/* ── Impressionen (Bildstreifen) ── */
.ds-gallery .ds-card{height:clamp(300px,30.5vw,439px)}
.ds-gallery .ds-card-media{width:100%}

/* ── Reiter auf Brown (Figma „Peoples“ / Club-Tabs) ── */
.ds-tabs{display:grid;grid-template-columns:repeat(var(--ds-tab-count,4),minmax(0,1fr));gap:12px;padding-bottom:32px}
.ds-tab{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:15px 19px;border-radius:18px;text-align:left;cursor:pointer;color:var(--ds-paper);border:1px solid var(--ds-glass-line);background:hsl(var(--pf-brand-cream)/.2);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);box-shadow:var(--ds-glass-shadow);transition:background .2s ease}
.ds-tab:hover{background:hsl(var(--pf-brand-cream)/.28)}
.ds-tab[aria-selected=true]{background:var(--ds-gold);color:var(--ds-ink);border-color:var(--ds-gold);box-shadow:none}
.ds-tab:focus-visible{outline:2px solid var(--ds-gold);outline-offset:3px}
.ds-tab-kicker{font:700 var(--ds-eyebrow)/1.5 var(--pf-font-headline);letter-spacing:.16em;text-transform:uppercase}
.ds-tab-name{font:400 var(--ds-caption)/1.1 var(--pf-font-headline);letter-spacing:-.04em}
.ds-tab-panel{display:grid;grid-template-columns:minmax(0,565px) minmax(0,643px);justify-content:space-between;align-items:end;gap:32px}
.ds-tab-panel[hidden]{display:none}
.ds-tab-copy{display:flex;flex-direction:column;gap:16px;padding:40px 40px 40px 0}
body.pf-figma main#main .ds-tab-copy .ds-eyebrow{color:var(--ds-gold)}
.ds-tab-copy hr{border:0;border-top:1px solid hsl(var(--pf-brand-cream)/.8);margin:0}

/* ── Kartenreihe (Mitgliedschaftsmodelle) ── */
.ds-card-row{display:grid;grid-template-columns:repeat(3,minmax(0,416px));gap:28px}
.ds-card-row .ds-card,.ds-card-row .ds-card-media{width:100%}

/* Review 09.11. (V1-11, V2-10): Dreier-Reihen bleiben bis 1001 px dreispaltig; auf dem Tablet werden sie zum Wisch-Streifen
   statt 2 + 1 mit leerem Platz. Die Guidelines (6 Karten) gehen weiter 2 × 3 auf. */
@media(max-width:1100px){
 .ds-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ds-tab-panel{grid-template-columns:1fr;align-items:start}
 .ds-tab-panel .ds-photo-card{order:-1}
 .ds-tab-copy{padding:8px 0 0}
}
@media(min-width:701px) and (max-width:1000px){
 .ds-feature-grid,.ds-card-row{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--ds-gutter);margin-inline:calc(-1*var(--ds-gutter));padding-inline:var(--ds-gutter);scrollbar-width:none;overscroll-behavior-x:contain}
 .ds-feature-grid::-webkit-scrollbar,.ds-card-row::-webkit-scrollbar{display:none}
 .ds-feature-grid>.ds-feature{flex:none;width:min(340px,44vw);scroll-snap-align:start}
 .ds-card-row .ds-card{flex:none;width:min(340px,44vw);height:calc(min(340px,44vw)*627/416);scroll-snap-align:start}
}
@media(max-width:1000px){
 .ds-option-grid{grid-template-columns:1fr}
 .ds-card.is-open{flex-direction:column;height:auto;width:min(416px,calc(100vw - 2*var(--ds-gutter)))}
 .ds-card.is-open .ds-card-media{width:100%;height:clamp(240px,60vw,360px)}
 .ds-card.is-open .ds-card-media img{object-position:50% 20%}
 .ds-card.is-open .ds-card-info{width:100%;padding:24px}
}
@media(max-width:700px){
 .ds-rail-section{gap:28px}
 .ds-feature-grid,.ds-guide-grid,.ds-card-row{grid-template-columns:1fr}
 .ds-card-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--ds-gutter);margin-inline:calc(-1*var(--ds-gutter));padding-inline:var(--ds-gutter);gap:16px;scrollbar-width:none}
 .ds-card-row .ds-card{width:min(300px,82vw);flex:none}
 .ds-card,.ds-card-media{width:min(269px,72vw);height:calc(min(269px,72vw)*627/416)}
 .ds-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ds-tab{padding:12px 14px}
 /* Review 09.11. (V1-16): Logo über dem Text, damit die Beschreibung die volle Breite bekommt. */
 .ds-benefit>summary{grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"logo plus" "text text";gap:14px;padding:16px}
 .ds-benefit>summary>.ds-benefit-logo{grid-area:logo;justify-self:start;width:132px}
 .ds-benefit>summary>.ds-benefit-text{grid-area:text}
 .ds-benefit>summary>.ds-round{grid-area:plus;align-self:start}
 .ds-benefit-logo{height:64px}
 .ds-benefit-details{padding:0 16px 18px}
 .ds-photo-stage{min-height:0;padding:56px 12px}
 .ds-stage-panel{padding:26px 18px}
 .ds-head>.ds-body{text-align:left}
}
@media(prefers-reduced-motion:reduce){.ds-card,.ds-feature summary svg,.ds-option details>summary svg{transition:none}.ds-card.is-open .ds-card-info{animation:none}}

/* ── Header über Vollbild-Hero: Glas auf Brown, helle Schrift (wie Startseite) ── */
body.pf-figma.pf-over-hero:not(.pf-navigation-open) .pf-header{--pf-web-text:hsl(var(--pf-brand-cream));color:var(--ds-paper);background:hsl(var(--pf-brand-brown)/.3);border-color:hsl(var(--pf-brand-brown)/.2);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);box-shadow:var(--ds-glass-shadow)}
body.pf-figma.pf-over-hero:not(.pf-navigation-open) .pf-header .pf-nav-join{background:hsl(var(--pf-brand-cream)/.2);color:var(--ds-paper);border:1px solid var(--ds-glass-line)}
/* Meeting Celie 12.11.2026: Über dunklem Foto passen sich auch Menü-Button und Trennstriche an (vorher braun auf dunklem Glas). */
body.pf-figma.pf-over-hero:not(.pf-navigation-open) .pf-header{--pf-web-rule:hsl(var(--pf-brand-cream)/.3)}
body.pf-figma.pf-over-hero:not(.pf-navigation-open) header.pf-header .pf-panel a.pf-button[href]{background:hsl(var(--pf-brand-cream)/.2);color:var(--ds-paper);border:1px solid var(--ds-glass-line)}

/* ── Versprechen (Figma „Text Box“) ── */
.ds-promise-list{list-style:none;margin:0;padding:0;max-width:560px}
.ds-promise-list li+li{border-top:1px solid hsl(var(--pf-brand-brown)/.8)}
.ds-promise-list button{display:flex;align-items:center;gap:8px;width:100%;min-height:76px;padding:25px 24px;border:0;border-radius:16px;background:none;color:inherit;text-align:left;cursor:pointer;font:300 16px/1.65 var(--pf-font-body)}
.ds-promise-list button:hover,.ds-promise-list button[aria-expanded=true]{background:hsl(var(--pf-brand-sand)/.12)}
.ds-promise-list button:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
.ds-promise-list button>span{flex:1}
.ds-promise-list svg{width:24px;height:24px;flex:none}
.ds-promise-list .ds-promise-arrow{transition:transform .25s ease}
.ds-promise-list button[aria-expanded=true] .ds-promise-arrow{transform:rotate(180deg)}
.ds-promise-media{position:relative;display:flex;align-items:flex-end;padding:26px}
.ds-promise-media>img{position:absolute;inset:0}
.ds-promise-detail{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:28px 32px;width:100%}
.ds-promise-detail hr{border:0;border-top:1px solid hsl(var(--pf-brand-cream)/.8);margin:0;width:100%}
@media(max-width:700px){.ds-promise-media{aspect-ratio:auto;min-height:420px;padding:12px}.ds-promise-detail{padding:22px}}
.ds-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ds-card-link{position:absolute;inset:0;z-index:2;border-radius:inherit}
.ds-card-link:focus-visible{outline:2px solid var(--ds-paper);outline-offset:-4px}
.ds-gallery{gap:0}
.ds-gallery .ds-card-foot{display:none}
/* Alte globale Unterstreichungen dürfen Designsystem-Titel nicht doppeln. */
body.pf-figma main#main .ds-title{border-bottom:0!important;padding-bottom:0!important;margin:0!important;display:block;max-width:none}
.ds-stack>.ds-heading,.ds-head>.ds-heading,.ds-text-copy>.ds-heading,.ds-options>.ds-heading{align-self:flex-start}
.ds-heading--center{align-self:center!important}

/* Hinweis auf vergangene Termine (Corporate Days, Events) */
.ds-event-ended{margin:0;padding:16px 20px;border-left:3px solid var(--ds-ink);border-radius:12px;background:hsl(var(--pf-brand-sand)/.2);color:var(--ds-ink)}

/* ── Tippflächen (Sichtprüfung F03): auf Handy und Tablet mindestens 44 px hoch; am Desktop bleiben die Figma-Maße. ── */
@media(max-width:1024px){
 body.pf-figma :is(main,.pf-footer,.pf-header) :is(a.pf-button[href],button.pf-button),
 body.pf-figma header.pf-header a.pf-nav-join[href],
 body.pf-figma main#main .pf-pricing-campaign a[href],
 body.pf-figma main#main .pf-campaign-pricing .pf-tariff-content>a.pf-button[href],
 body.pf-home-figma .pf-fx-hero .stage-options button{min-height:44px}
 body.pf-figma .pf-footer .footer-cookie-btn{display:inline-flex;align-items:center;min-height:44px}
 .ds-feature summary{min-height:44px}
 body.pf-figma main#main .ds-clubs-link{display:inline-flex;align-items:center;min-height:44px}
 /* Review 09.11.: Logo-Link im Header war nur 52×29 px groß; die Tippfläche wächst, das Logo bleibt gleich groß. */
 body.pf-figma header.pf-header .pf-logo{min-height:44px;min-width:44px}
 /* Review 09.11. (V2-08): OSM-Hinweis der Clubkarte, E-Mail und Logo im Footer waren 14–29 px hoch. */
 body.pf-figma main#main .pf-map-note a[href]{display:inline-flex;align-items:center;min-height:44px}
 body.pf-figma .pf-footer a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:44px}
 body.pf-figma .pf-footer .pf-logo{min-height:44px}
}

/* Bildausschnitt-Review 09.11.2026: eigener Bildausschnitt fürs Handy (Img positionMobile → --pos-m). */
@media(max-width:700px){body.pf-figma img[style*="--pos-m"]{object-position:var(--pos-m)!important}}

/* Adrian 09.11.2026: Galerie-Pfeile mit etwas Abstand zu den Bildern. */
body.pf-figma main#main .ds-gallery .ds-rail-tools{margin-top:22px}

/* Meeting Celie 12.11.2026: Keine Verläufe mehr über Fotos mit Glasbox (Hero, CTA-Bänder) – die Box schafft den Kontrast. */
.ds-hero::before,.ds-cta::before{content:none}
/* Adrian 13.11.2026: „coming soon“-Coaches wie live – Bild unscharf, braune Glasbox unten. */
.ds-card--soon .ds-card-media img{filter:blur(14px);transform:scale(1.08)}
.ds-card--soon .ds-card-media::after{display:none}
.ds-card-soon{position:absolute;left:20px;right:20px;bottom:20px;z-index:1;display:grid;gap:12px;padding:24px;border-radius:var(--ds-radius);background:hsl(var(--pf-brand-brown)/.9);color:var(--ds-paper);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.ds-card-soon .ds-card-title,.ds-card-soon .ds-body{margin:0;color:var(--ds-paper)}
body.pf-figma main#main .ds-card-soon .ds-card-title{color:var(--ds-paper)}