/* BBOY MASCOT — weekly classes cards. Uses the site's v2 tokens; the fallbacks only matter outside the site. */
.v2-classes{
 --cc-bg:var(--bg,#111316);--cc-card:var(--card,#1a1d21);--cc-ink:var(--ink,#f3f3f1);--cc-muted:var(--muted,#7f848b);
 --cc-soft:var(--soft,#aeb2b8);--cc-line:var(--line,#2a2e33);--cc-accent:var(--accent,#ffcc33);--cc-btn:var(--btn,#ffcc33);
 --cc-r:var(--r,clamp(22px,2.4vw,34px));--cc-ease:var(--ease,cubic-bezier(.22,1,.36,1));--cc-gap:var(--gap,clamp(10px,1.1vw,16px));
 padding:var(--sec,clamp(64px,9vh,104px)) var(--pad,4vw);background:var(--cc-bg);color:var(--cc-ink)
}
.classes-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 40px;margin-bottom:clamp(28px,4vw,48px)}
.classes-head .mono-label{flex-basis:100%;margin:0}
.classes-head h2{margin:0}
.classes-head h2 em{background:var(--grad,linear-gradient(100deg,#ffcc33 0%,#ffcc33 100%));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:300;font-style:normal}
.classes-hint{margin:0;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--cc-muted)}

.class-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cc-gap)}
.class-card{position:relative;min-height:600px;border-radius:var(--cc-r);overflow:hidden;background:var(--cc-card);isolation:isolate}

/* back: the timetable */
.cc-back{position:absolute;inset:0;box-sizing:border-box;padding:30px 30px 32px;display:flex;flex-direction:column;gap:18px}
.cc-logo{display:block;width:auto;height:44px;max-width:72%;object-fit:contain;object-position:left center}
.cc-logo--tall{height:62px}
.cc-eyebrow{margin:6px 0 0;color:var(--cc-accent)}
.cc-title{margin:-8px 0 0;font-size:clamp(38px,3.6vw,52px);line-height:.9;letter-spacing:-.055em;font-weight:860}
.cc-title em{font-style:normal;font-weight:300;color:var(--cc-accent);letter-spacing:-.05em}
.cc-rows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--cc-line)}
.cc-rows li{display:grid;grid-template-columns:112px minmax(0,1fr) auto;column-gap:8px;align-items:center;min-height:52px;border-top:1px solid var(--cc-line)}
.cc-time{font-size:12px;color:var(--cc-soft);font-variant-numeric:tabular-nums}
.cc-name{font-size:20px;font-weight:800;letter-spacing:-.035em}
.cc-age{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--cc-accent)}
.cc-place{margin:0;font-size:11px;letter-spacing:1.2px;line-height:1.6;text-transform:uppercase;color:var(--cc-soft)}
.cc-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:32px;min-height:44px;box-sizing:border-box;padding:14px 18px 14px 20px;border-radius:999px;background:var(--cc-btn);color:#111111;font-weight:700;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;text-decoration:none}
a.cc-cta:hover{background:#ffd966;color:#111111}
.cc-cta svg,.cc-more svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* front: photo + school, slides away */
.cc-front{position:absolute;inset:0;z-index:1;background:var(--cc-bg);transition:transform .85s var(--cc-ease);will-change:transform}
.cc-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,60% 40%);filter:grayscale(1) contrast(1.06)}
.cc-front:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(17,19,22,.88) 0%,rgba(17,19,22,0) 45%)}
.cc-front>.cc-logo{position:absolute;top:28px;left:28px;z-index:1}
.cc-front-text{position:absolute;left:28px;right:28px;bottom:30px;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cc-front-text .cc-eyebrow{margin:0}
.cc-school{margin:0;font-size:clamp(28px,2.5vw,34px);line-height:.95;letter-spacing:-.05em;font-weight:820}
.cc-more{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:2px;text-transform:uppercase}
.cc-toggle{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;cursor:pointer}
.cc-toggle:focus-visible{outline:2px solid var(--cc-ink);outline-offset:-6px;border-radius:var(--cc-r)}

/* open states: hover on mouse devices, .is-open from tap / keyboard */
.class-card[data-slide="left"].is-open .cc-front{transform:translateX(-101%)}
.class-card[data-slide="right"].is-open .cc-front{transform:translateX(101%)}
.class-card[data-slide="up"].is-open .cc-front{transform:translateY(-101%)}
@media (hover:hover) and (pointer:fine){
 .class-card[data-slide="left"]:hover .cc-front{transform:translateX(-101%)}
 .class-card[data-slide="right"]:hover .cc-front{transform:translateX(101%)}
 .class-card[data-slide="up"]:hover .cc-front{transform:translateY(-101%)}
}
@media (prefers-reduced-motion:reduce){.cc-front{transition:opacity .2s linear}.class-card.is-open .cc-front,.class-card:hover .cc-front{transform:none!important;opacity:0;pointer-events:none}}

@media (max-width:1100px){.class-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
 .class-cards{grid-template-columns:minmax(0,1fr)}
 .class-card{min-height:560px}
 /* on a phone every card slides sideways, alternating */
 .class-card[data-slide="up"].is-open .cc-front{transform:translateX(-101%)}
}
/* timetable rows: name and age stacked so nothing overlaps on narrow cards */
.cc-rows li{grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;row-gap:3px;align-content:center;padding:9px 0}
.cc-time{grid-row:1/3;align-self:center}
.cc-name{grid-column:2;font-size:19px;line-height:1.1}
.cc-age{grid-column:2;font-size:10px;letter-spacing:1.3px}
.cc-age:empty{display:none}
.cc-cta{gap:18px;white-space:nowrap}

/* Each school gets its own flyer: its own photo, its own colour, its own layout */
.cc-photo{filter:saturate(.55) contrast(1.05) brightness(.92)}
.cc-front>.cc-logo{max-width:62%}
.cc-day{position:absolute;z-index:1;top:26px;right:26px;padding:7px 12px;border-radius:999px;font-family:var(--mono,"Chivo Mono",monospace);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#111;background:var(--school,#fff)}
.class-card{--school:#fff}
.cc-front .cc-eyebrow{color:var(--school)}
.class-card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:3;background:var(--school);pointer-events:none}

/* 1 · Schwarz-Rot-Club — red, logo on a dark glass chip, text at the bottom */
.cc--src{--school:#ff5a60}
.cc--src .cc-photo{object-position:50% 50%}
.cc--src .cc-front>.cc-logo{box-sizing:content-box;height:34px;padding:12px 16px;border-radius:14px;background:rgba(10,11,13,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);top:22px;left:22px}

/* 2 · Musikhaus Sieber — orange, text at the top, logo on a light chip at the bottom */
.cc--sieber{--school:#ff8a3d}
.cc--sieber .cc-photo{object-position:50% 60%}
.cc--sieber .cc-front:after{background:linear-gradient(180deg,rgba(17,19,22,.9) 0%,rgba(17,19,22,0) 42%),linear-gradient(0deg,rgba(17,19,22,.55) 0%,rgba(17,19,22,0) 30%)}
.cc--sieber .cc-front-text{top:28px;bottom:30px}
.cc--sieber .cc-more{margin-top:auto}
.cc--sieber .cc-front>.cc-logo{top:auto;bottom:22px;left:auto;right:22px;box-sizing:content-box;height:44px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.92)}
.cc--sieber .cc-day{top:auto;right:auto;bottom:62px;left:28px}

/* 3 · Holodeck — ice blue, portrait photo, white logo straight on the picture, day on the side */
.cc--holodeck{--school:#8fd8ff}
.cc--holodeck .cc-photo{object-position:50% 30%}
.cc--holodeck .cc-day{top:auto;bottom:34px;right:26px}
@media (max-width:700px){
 .cc--src .cc-photo{object-position:52% 50%}
 .cc--sieber .cc-photo{object-position:48% 60%}
}