/* Runde 3: Fahrerkarten im Team-Abschnitt. Drei Ebenen (Grund, freigestellte Person, Name) im CSS-3D-Raum,
   Lichtreflex und Schatten folgen der Neigung. Bewegung setzt team-cards.js; ohne Skript stehen die Karten still. */
.class-stage{--cw:clamp(196px,20vw,290px);position:relative;margin:40px 0 0 -108.02%;width:208.02%}
.driver-cards{list-style:none;margin:0;padding:44px 0 0;display:flex;justify-content:center;align-items:flex-start}
/* Runde 3b: Die scrollbare Pro-Liste am Handy nimmt den Fokus an. Der Rahmen liegt innen, weil die Liste bis an den Bildrand reicht. */
.driver-cards:focus-visible{outline-offset:-3px}
.driver{position:relative;flex:0 0 auto;width:var(--cw);transition:translate 320ms var(--ease)}
.driver+.driver{margin-left:calc(var(--cw)*-.12)}
.team-section>.classes-detail{min-width:0}
.driver:nth-child(2){margin-top:-16px}
.driver:nth-child(1) .tc{--fan:-4deg}.is-single .driver .tc{--fan:-2deg}.driver:nth-child(2) .tc{--fan:.6deg}.driver:nth-child(3) .tc{--fan:4.2deg}

.tc{--fan:0deg;position:relative;width:var(--cw);aspect-ratio:63/88;perspective:900px;rotate:var(--fan);transition:opacity 420ms ease-out calc(var(--i,0)*80ms),translate 640ms var(--ease) calc(var(--i,0)*80ms),scale 640ms var(--ease) calc(var(--i,0)*80ms),rotate 320ms var(--ease)}
@starting-style{.tc{opacity:0;translate:0 46px;scale:.94}}
/* Runde 3b: derselbe Anfangswert für den Auftritt beim ersten Blick. team-cards.js setzt die Klasse nur für einen Stilschritt. */
.tc.tc-enter{opacity:0;translate:0 46px;scale:.94;transition:none}
.tc-body{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.tc-layer{position:absolute;inset:0;border-radius:14px}
.tc-bg{overflow:hidden;transform:translateZ(0);background:radial-gradient(115% 62% at 50% 20%,#2a78d466,transparent 62%),linear-gradient(168deg,#11305c 0%,#0a1a33 46%,#060c16 100%);box-shadow:inset 0 0 0 1px #9fd2ff47,inset 0 0 0 7px #050a1230,inset 0 0 0 8px #66c9ff26}
.tc-bg:before{content:'';position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(115deg,#ffffff08 0 1px,transparent 1px 7px)}
.tc-bg:after{content:'';position:absolute;inset:0;z-index:3;background:linear-gradient(to top,#050a12 0%,#050a12e8 17%,#050a1200 47%)}
.tc-mark{position:absolute;z-index:0;width:148%;max-width:none;left:-24%;top:-2%;opacity:.5}
.tc-glare{position:absolute;z-index:2;left:-50%;top:-50%;width:200%;height:200%;background:radial-gradient(circle at 50% 50%,#ffffff52 0,#bfe4ff24 15%,#ffffff00 36%);pointer-events:none}
.tc-person{transform:translateZ(58px) scale(.936);clip-path:inset(-24% 0 0 0 round 0 0 14px 14px);mask-image:linear-gradient(to bottom,#000 70%,#0000 96%)}
.tc-person img{position:absolute;width:180%;max-width:none;left:-40%;top:-14%;height:auto;user-select:none;-webkit-user-drag:none}
.tc-front{overflow:hidden;transform:translateZ(94px) scale(.896);pointer-events:none}
.tc-name{position:absolute;left:9%;right:8%;bottom:7.5%;font-family:Exo,Barlow,sans-serif;font-style:italic;font-weight:700;font-size:calc(var(--cw)*.118);line-height:1;letter-spacing:-.035em;color:#fff;text-shadow:0 2px 16px #000d;overflow-wrap:anywhere}
.tc-name:before{content:'';display:block;width:30px;height:2px;margin-bottom:10px;background:var(--ice)}
.tc-sheen{position:absolute;inset:-10% -70%;background:linear-gradient(104deg,#fff0 41%,#ffffff12 47%,#bfe4ff1f 50%,#ffffff0d 53%,#fff0 59%)}
.tc-shadow{position:absolute;left:6%;right:6%;bottom:-22px;height:44px;border-radius:50%;background:radial-gradient(closest-side,#000000a8,#0000);z-index:-1;pointer-events:none}
.tc.is-free .tc-bg{background:radial-gradient(110% 60% at 50% 30%,#5f86b02e,transparent 64%),linear-gradient(168deg,#1b293b 0%,#0e1724 50%,#070b12 100%)}
.tc-slot{position:absolute;inset:15px;z-index:2;border:1.5px dashed #a9bfd86b;border-radius:9px}
.tc-free-mark{display:grid;place-items:center;transform:translateZ(58px) scale(.936);pointer-events:none}
.tc-free-mark img{width:84%;margin-top:-26%;max-width:none}

.driver-meta{margin-top:20px;padding-left:4px;font-size:14px;line-height:1.35;color:#aab8cb}
.driver-meta strong{display:block;margin-bottom:5px;font-size:18px;font-weight:600;color:var(--white)}
.driver-class{display:inline-block;margin-left:9px;padding:1px 8px;border:1px solid #3d6f9d;border-radius:2px;font-size:12px;color:#c4e6ff}
.driver-meta strong+.driver-class{margin-left:0}
.driver-meta .text-link{display:flex;width:max-content;margin-top:10px;gap:22px;font-size:15px}
.classes-detail .class-stage .ai-note{max-width:none;margin-top:34px;text-align:center;font-size:13px;color:#a9bdd2}
.tilt-sensor-status:empty{margin:0}
.tilt-sensor{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:20px;padding:9px 14px;border:1px solid #3a5878;border-radius:3px;font-size:14px;color:#dceeff}
.tilt-sensor[aria-pressed=true]{color:var(--ice);background:#102847;border-color:#4d86ba}
.tilt-sensor svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;fill:none}
.tilt-sensor-status{display:block;min-height:1.4em;margin-top:8px;font-size:13px;color:#a9bdd2}
.paused .tc{transition:none}

@media(hover:hover) and (pointer:fine){
  .driver-cards:has(.driver:hover) .driver{translate:var(--part,0px) 0}
  .driver:hover~.driver{--part:calc(var(--cw)*.08)}
  .driver:has(~.driver:hover){--part:calc(var(--cw)*-.08)}
  .driver:hover{z-index:4}
  .driver:hover .tc{rotate:0deg}
  .paused .driver-cards:has(.driver:hover) .driver{translate:none}
  .paused .driver:hover .tc{rotate:var(--fan)}
  .tilt-sensor:hover{background:#13263c;border-color:#4d86ba}
}
@media(max-width:1100px) and (min-width:761px){.class-stage{--cw:clamp(180px,21vw,240px)}}
@media(max-width:760px){
  .class-stage{--cw:min(64vw,262px);margin:26px -24px 0;width:auto}
  .driver-cards{justify-content:flex-start;gap:16px;padding:40px calc((100vw - var(--cw))/2) 6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
  .driver-cards::-webkit-scrollbar{display:none}
  .driver{scroll-snap-align:center}
  .driver+.driver{margin-left:0}
  .driver:nth-child(2){margin-top:0}
  .driver .tc{--fan:0deg}
  .class-stage.is-single .driver-cards{justify-content:center;overflow:visible;padding-left:0;padding-right:0}
  .tc-name{font-size:calc(var(--cw)*.112)}
  .driver-meta{margin-top:16px}
  .driver-meta strong{font-size:17px}
  .classes-detail .class-stage .ai-note{margin-top:22px;padding:0 24px}
  .tilt-sensor{margin:18px 0 0}
}
@media(prefers-reduced-motion:reduce){.tc-body{transform:none!important}.tc-glare,.tc-sheen,.tc-shadow{transform:none!important}.driver{translate:none!important}.tc{rotate:var(--fan)!important}}