/* Designsystem – Bereich training. Bausteine dieses Bereichs; Kern-Tokens und -Klassen stehen in ds.css.
   Diese Datei wird vor ds.css geladen (@import) – alle Regeln sind deshalb über body.pf-figma main#main abgesichert.
   Inhalt: Kurse Übersicht (.ds-kurs-*), Kurse Plan (.ds-kplan-*), Personal-Training-Coach-Karten, Benefit-Logos. */

/* ── Gemeinsam: Text-Link-Schaltfläche, Hinweiszeile ── */
body.pf-figma main#main .ds-kurs-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
body.pf-figma main#main .ds-kurs-link:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}
body.pf-figma main#main .ds-kplan-note{margin:0;padding:12px 20px;border-radius:16px;background:hsl(var(--pf-brand-sand)/.25);font:300 14px/1.6 var(--pf-font-body)}

/* ── Kurse Übersicht (Figma 4928:10492): Suche, Filter, Foto-Kurskarten ── */
body.pf-figma main#main .ds-kurs{padding-top:clamp(56px,5.7vw,82px)}
body.pf-figma main#main .ds-kurs-stack{display:flex;flex-direction:column;gap:22px}
body.pf-figma main#main .ds-kurs-stack>.ds-heading{align-self:flex-start;margin-bottom:7px}
body.pf-figma main#main .ds-kurs-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
body.pf-figma main#main .ds-kurs-search{flex:0 1 440px;min-width:0}
body.pf-figma main#main .ds-kurs-search input{box-sizing:border-box;width:100%;height:50px;padding:5px 25px;border:1px solid hsl(var(--pf-brand-brown)/.4);border-radius:50px;background:transparent;color:var(--ds-ink);font:300 14px/1.65 var(--pf-font-body)}
body.pf-figma main#main .ds-kurs-search input::placeholder{color:hsl(var(--pf-brand-brown)/.75)}
body.pf-figma main#main .ds-kurs-search input:focus-visible{outline:2px solid var(--ds-ink);outline-offset:3px}
body.pf-figma main#main .ds-kurs-bar>.ds-button{min-height:50px;min-width:192px}
/* Review 09.11. (V1-06): Figma 4928:10492 – drei Spalten Sportart | Standort | Dauer (x 105 / 606 / 1087 bei 1440) ohne Kartenfläche. */
body.pf-figma main#main .ds-kurs-filter{display:grid;grid-template-columns:minmax(0,41fr) minmax(0,37fr) minmax(0,23fr);align-items:start;gap:28px 48px;padding:40px;border-radius:0;background:none}
body.pf-figma main#main .ds-kurs-filter[hidden]{display:none}
body.pf-figma main#main .ds-kurs-filter fieldset{min-width:0;margin:0;padding:0;border:0}
body.pf-figma main#main .ds-kurs-chip{text-transform:lowercase}
body.pf-figma main#main .ds-kurs-filter legend{float:left;width:100%;margin:0 0 22px;padding:0}
body.pf-figma main#main .ds-kurs-filter legend+*{clear:both}
body.pf-figma main#main .ds-kurs-chips{display:flex;flex-wrap:wrap;gap:12px}
body.pf-figma main#main .ds-kurs-chip{min-width:100px;min-height:44px;padding:8px 20px;border:1px solid var(--ds-ink);border-radius:50px;background:none;color:var(--ds-ink);font:300 14px/1.65 var(--pf-font-body);cursor:pointer;transition:background .2s ease,color .2s ease}
body.pf-figma main#main .ds-kurs-chip:hover{background:hsl(var(--pf-brand-brown)/.08)}
body.pf-figma main#main .ds-kurs-chip[aria-pressed=true]{background:var(--ds-ink);color:var(--ds-paper)}
body.pf-figma main#main .ds-kurs-chip:focus-visible{outline:2px solid var(--ds-ink);outline-offset:3px}
body.pf-figma main#main .ds-kurs-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;font:500 12px/1.65 var(--pf-font-body)}
body.pf-figma main#main .ds-kurs-meta p{margin:0;font:inherit}
body.pf-figma main#main .ds-kurs-meta-tools{display:flex;align-items:center;gap:16px}
body.pf-figma main#main .ds-kurs-meta label{display:flex;align-items:center;gap:10px}
body.pf-figma main#main .ds-kurs-meta select{min-height:44px;padding:6px 14px;border:1px solid hsl(var(--pf-brand-brown)/.4);border-radius:50px;background:transparent;color:inherit;font:300 14px/1.4 var(--pf-font-body)}
body.pf-figma main#main .ds-kurs-meta select:focus-visible{outline:2px solid var(--ds-ink);outline-offset:3px}
body.pf-figma main#main .ds-kurs-empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:32px 0}
body.pf-figma main#main .ds-kurs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;gap:22px}
body.pf-figma main#main .ds-kurs-grid .ds-card{width:auto;height:397px;scroll-snap-align:none}
body.pf-figma main#main .ds-kurs-grid .ds-card-media{width:100%;height:100%}
body.pf-figma main#main .ds-kurs-grid .ds-card-label{left:22px;top:24px;padding:12px;max-width:calc(100% - 44px)}
body.pf-figma main#main .ds-kurs-title{text-transform:lowercase}
body.pf-figma main#main .ds-kurs-grid .ds-card-foot .ds-round{width:38px;height:38px}
/* Tippfläche bis 1024 px mindestens 44 px (Sichtprüfung N05), Desktop wie Figma. */
@media(max-width:1024px){body.pf-figma main#main .ds-kurs-grid .ds-card-foot .ds-round{width:44px;height:44px}}
body.pf-figma main#main .ds-kurs-grid .ds-card.is-open{grid-column:span 2;flex-direction:row;width:auto;height:auto;min-height:397px}
body.pf-figma main#main .ds-kurs-grid .ds-card.is-open>.ds-card-label{display:none}
body.pf-figma main#main .ds-kurs-grid .ds-card.is-open .ds-card-media{width:calc((100% - 22px)/2);height:auto;min-height:397px}
body.pf-figma main#main .ds-kurs-grid .ds-card.is-open .ds-card-info{flex:1;width:auto;justify-content:flex-start;padding:35px 40px 35px clamp(32px,6.4vw,87px)}
body.pf-figma main#main .ds-kurs-grid .ds-card-info .ds-body{max-width:448px}
body.pf-figma main#main .ds-kurs-tags{display:flex;flex-wrap:wrap;gap:6px;max-width:360px;margin:0;padding:0;list-style:none}
body.pf-figma main#main .ds-kurs-tags li{min-width:100px;padding:5px 10px;border-radius:50px;background:hsl(var(--pf-brand-sand)/.2);font:300 14px/1.65 var(--pf-font-body);text-align:center;text-transform:lowercase}
body.pf-figma main#main .ds-kurs-info .ds-card-info-foot{flex-wrap:wrap;margin-top:8px}

/* ── Kurse Plan (Figma 4928:10491): Filterzeile, Woche, Tagesspalten mit aufklappenden Kurs-Zeilen ── */
body.pf-figma main#main .ds-kplan{padding-top:clamp(56px,5.7vw,82px)}
body.pf-figma main#main .ds-kplan-stack{display:flex;flex-direction:column;gap:22px}
body.pf-figma main#main .ds-kplan-stack>.ds-heading{align-self:flex-start;margin-bottom:7px}
body.pf-figma main#main .ds-kplan-filters{display:flex;flex-wrap:wrap;align-items:center;gap:16px 21px;padding-bottom:29px;border-bottom:1px solid hsl(var(--pf-brand-brown)/.5)}
body.pf-figma main#main .ds-kplan-select{flex:1 1 240px;max-width:342px;margin:0}
body.pf-figma main#main .ds-kplan-select select{box-sizing:border-box;width:100%;height:50px;padding:5px 56px 5px 25px;border:1px solid hsl(var(--pf-brand-brown)/.4);border-radius:50px;appearance:none;-webkit-appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23493629' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 22px center/24px;color:var(--ds-ink);font:300 14px/1.65 var(--pf-font-body);cursor:pointer;text-overflow:ellipsis}
body.pf-figma main#main .ds-kplan-select select:focus-visible{outline:2px solid var(--ds-ink);outline-offset:3px}
body.pf-figma main#main .ds-kplan-filters>.ds-button{min-height:50px;min-width:192px;margin-left:auto}
body.pf-figma main#main .ds-kplan-week{display:flex;align-items:center;justify-content:space-between;gap:16px}
body.pf-figma main#main .ds-kplan-week p{margin:0;text-align:center;font:300 16px/1.65 var(--pf-font-body)}
body.pf-figma main#main .ds-kplan-week p span{display:block;font:500 12px/1.65 var(--pf-font-body)}
body.pf-figma main#main .ds-kplan-week strong{font-weight:300}
body.pf-figma main#main .ds-kplan-week .ds-round,body.pf-figma main#main .ds-kplan-slot .ds-round{color:var(--ds-ink)}
body.pf-figma main#main .ds-kplan-week .ds-round:hover,body.pf-figma main#main .ds-kplan-slot .ds-round:hover{background:hsl(var(--pf-brand-brown)/.08)}
body.pf-figma main#main .ds-kplan-icon{display:inline-grid;place-items:center;flex:none}
body.pf-figma main#main .ds-kplan-icon svg{width:22px;height:22px}
body.pf-figma main#main .ds-round .ds-kplan-icon svg{width:20px;height:20px}
body.pf-figma main#main .ds-kplan-grid{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*21px)/4);align-items:start;gap:21px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:14px;scrollbar-width:thin;scrollbar-color:hsl(var(--pf-brand-brown)/.35) transparent}
/* Meeting Celie 12.11.2026: Desktop wie mobil wischbar mit 4 sichtbaren Tagen; 7 Spalten quetschten die Kursnamen senkrecht. */
body.pf-figma main#main .ds-kplan-grid:focus-visible{outline:2px solid var(--ds-ink);outline-offset:4px;border-radius:8px}
body.pf-figma main#main .ds-kplan-grid--single{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);overflow:visible}
body.pf-figma main#main .ds-kplan-day{display:flex;flex-direction:column;gap:10px;min-width:0;scroll-snap-align:start}
body.pf-figma main#main .ds-kplan-grid--single .ds-kplan-day{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-items:start;gap:10px 21px}
body.pf-figma main#main .ds-kplan-grid--single .ds-kplan-dayname{grid-column:1/-1;text-align:left}
body.pf-figma main#main .ds-kplan-dayname{margin:0 0 6px;font:700 var(--ds-eyebrow)/1.5 var(--pf-font-headline);letter-spacing:.16em;text-transform:uppercase;text-align:center}
body.pf-figma main#main .ds-kplan-dayname span{display:block;font:500 12px/1.65 var(--pf-font-body);letter-spacing:0}
body.pf-figma main#main .ds-kplan-grid--single .ds-kplan-dayname span{display:inline;margin-left:10px}
body.pf-figma main#main .ds-kplan-empty{margin:0;padding:18px 0;font:300 14px/1.6 var(--pf-font-body);text-align:center;opacity:.6}
body.pf-figma main#main .ds-kplan-slot{display:flex;flex-direction:column;gap:22px;padding:20px 24px;border:1px solid hsl(var(--pf-brand-brown)/.35);border-radius:16px;background:var(--ds-paper);color:var(--ds-ink)}
body.pf-figma main#main .ds-kplan-slot:not(.is-open){gap:0}
body.pf-figma main#main .ds-kplan-row{display:flex;align-items:flex-end;gap:16px}
body.pf-figma main#main .ds-kplan-row time{flex:none;min-width:50px;font:300 20px/1.2 var(--pf-font-body);letter-spacing:-.02em}
body.pf-figma main#main .ds-kplan-name{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0;font:300 16px/1.4 var(--pf-font-body);overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
body.pf-figma main#main .ds-kplan-meta{font:500 12px/1.4 var(--pf-font-body);letter-spacing:.02em;text-transform:uppercase}
body.pf-figma main#main .ds-kplan-slot.is-open .ds-kplan-meta{opacity:.6}
body.pf-figma main#main .ds-kplan-detail{display:flex;flex-direction:column;gap:12px}
body.pf-figma main#main .ds-kplan-detail[hidden]{display:none}
body.pf-figma main#main .ds-kplan-detail hr{width:100%;margin:0;border:0;border-top:1px solid currentColor}
body.pf-figma main#main .ds-kplan-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin:4px 0 0}
body.pf-figma main#main .ds-kplan-facts>div{display:flex;flex-direction:column;gap:6px;min-width:0}
body.pf-figma main#main .ds-kplan-facts dt{display:flex;align-items:center;gap:8px;font:500 12px/1.65 var(--pf-font-body);letter-spacing:.02em;text-transform:uppercase}
body.pf-figma main#main .ds-kplan-facts dd{margin:0;font:300 15px/1.5 var(--pf-font-body);overflow-wrap:anywhere}
body.pf-figma main#main .ds-kplan-state{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 0;text-align:center}
body.pf-figma main#main .ds-kplan-spinner{width:36px;height:36px;border:3px solid hsl(var(--pf-brand-brown)/.18);border-top-color:var(--ds-ink);border-radius:50%;animation:ds-kplan-spin .9s linear infinite}
@keyframes ds-kplan-spin{to{transform:rotate(360deg)}}

/* ── Personal Training: Hero-Panel breiter, damit „personal training“ einzeilig bleibt (Figma: Panel wächst mit) ── */
body.pf-figma main#main .ds-hero-panel:has(#pt-title){width:min(100%,720px)}

/* ── Personal Training: Coach-Karte (Portrait mittig), Platzhalter „coming soon.“ ohne Foto ── */
body.pf-figma main#main #coaches .ds-card--coach .ds-card-media img{object-position:50% 30%}
body.pf-figma main#main #coaches .ds-card-info .ds-lead{margin:0}

/* ── Benefits: Logos mit heller Schrift brauchen eine dunkle Kachel (bewusste Abweichung von Figma „cream“) ── */
body.pf-figma main#main .ds-tr-partners .ds-benefit-logo:has(img:is([alt^="doctorfrost"],[alt^="Revolver"],[alt^="smooth skin"],[alt^="hello skin"])){background:var(--ds-ink)}
body.pf-figma main#main .ds-tr-partners .ds-benefit-details strong{font-weight:500}

@media(max-width:1000px){
 body.pf-figma main#main .ds-kurs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.pf-figma main#main .ds-kurs-filter{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:0}
 body.pf-figma main#main .ds-kurs-grid .ds-card.is-open .ds-card-info{padding:28px}
 body.pf-figma main#main .ds-kplan-grid{grid-auto-columns:calc((100% - 21px)/2)}
}
@media(max-width:700px){
 body.pf-figma main#main .ds-kurs-bar{flex-direction:column;align-items:stretch}
 body.pf-figma main#main .ds-kurs-search{flex:none}
 body.pf-figma main#main .ds-kurs-filter{grid-template-columns:minmax(0,1fr);gap:24px;padding:8px 0}
 body.pf-figma main#main .ds-kurs-filter legend{margin-bottom:14px}
 body.pf-figma main#main .ds-kurs-chip{min-width:0;padding:8px 16px}
 body.pf-figma main#main .ds-kurs-grid{gap:12px}
 body.pf-figma main#main .ds-kurs-grid .ds-card{height:250px;border-radius:18px}
 body.pf-figma main#main .ds-kurs-grid .ds-card-media{border-radius:18px}
 body.pf-figma main#main .ds-kurs-grid .ds-card-label{left:10px;top:10px;padding:6px;font-size:11px;letter-spacing:.12em}
 body.pf-figma main#main .ds-kurs-grid .ds-card-foot{left:14px;right:12px;bottom:14px;flex-direction:column;align-items:flex-start;gap:10px}
 body.pf-figma main#main .ds-kurs-grid .ds-card-foot .ds-card-title{font-size:20px;overflow-wrap:anywhere}
 body.pf-figma main#main .ds-kurs-grid .ds-card.is-open{flex-direction:column;min-height:0}
 body.pf-figma main#main .ds-kurs-grid .ds-card.is-open>.ds-card-label{display:none}
body.pf-figma main#main .ds-kurs-grid .ds-card.is-open .ds-card-media{width:100%;height:220px;min-height:0}
 body.pf-figma main#main .ds-kurs-grid .ds-card.is-open .ds-card-info{padding:22px}
 body.pf-figma main#main .ds-kplan-filters{flex-direction:column;align-items:stretch}
 body.pf-figma main#main .ds-kplan-select{flex:none;max-width:none}
 body.pf-figma main#main .ds-kplan-filters>.ds-button{margin-left:0}
 body.pf-figma main#main .ds-kplan-grid{grid-auto-columns:86%;gap:14px}
 body.pf-figma main#main .ds-kplan-slot{padding:16px 18px}
 body.pf-figma main#main .ds-kplan-grid--single .ds-kplan-day{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
 body.pf-figma main#main .ds-kplan-spinner{animation-duration:3s}
 body.pf-figma main#main .ds-kurs-chip{transition:none}
}

/* Adrian 13.11.2026: Personal-Training-Header – Coach und Mitglied stehen sonst hinter dem Glas-Panel.
   Desktop: Bild leicht vergrößert und nach rechts verschoben, beide Gesichter bleiben frei sichtbar. */
@media(min-width:1001px) and (max-width:1279px){body.pf-figma main#main .ds-hero:has(#pt-title)>img{transform:scale(1.5);transform-origin:0% 10%}}
@media(min-width:1280px) and (max-width:1599px){body.pf-figma main#main .ds-hero:has(#pt-title)>img{transform:scale(1.3);transform-origin:0% 8%}}
@media(min-width:1600px){body.pf-figma main#main .ds-hero:has(#pt-title)>img{object-position:50% 12%}}
/* Adrian 13.11.2026: Live-Shootingbilder in „Built around you“ sind oben hell – Etikett bleibt lesbar. */
body.pf-figma main#main #pt-staerken .ds-card-media::after{background:linear-gradient(to bottom,hsl(var(--pf-brand-brown)/.42) 0%,hsl(var(--pf-brand-brown)/0) 26%),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%)}