/* Wahren Cockpit v5.1 integration: structure from OPUS, existing Playbook logic preserved */
:root{
  --cockpit-bg-deep:#060a06;
  --cockpit-bg-mid:#0a1410;
  --cockpit-card:rgba(16,24,18,.62);
  --cockpit-card-strong:rgba(20,30,22,.88);
  --cockpit-gold:#ffd700;
  --cockpit-gold-warm:#ffb347;
  --cockpit-red:#dc2626;
  --cockpit-red-deep:#991b1b;
  --phase-today:#ff6b4a;
  --phase-play:#4ade80;
  --phase-learn:#ffd700;
  --phase-team:#60a5fa;
  --cockpit-text:#f5f5f0;
  --cockpit-dim:#aab4aa;
  --cockpit-faint:#687168;
  --cockpit-border:rgba(255,215,0,.14);
}
body{
  background:
    radial-gradient(ellipse at 50% -20%,rgba(255,179,71,.08) 0%,transparent 48%),
    radial-gradient(ellipse at 80% 100%,rgba(74,222,128,.04) 0%,transparent 52%),
    var(--cockpit-bg-deep);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.012) 2px,rgba(255,255,255,.012) 4px);
  pointer-events:none;
  z-index:100;
}
.cockpit-topbar{
  position:sticky;
  top:0;
  z-index:60;
  min-height:58px;
  padding:12px 28px;
  background:rgba(6,10,6,.88);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--cockpit-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.cockpit-logo{display:flex;align-items:center;gap:12px;color:var(--cockpit-text);text-decoration:none}
.cockpit-logo-mark{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--cockpit-red),var(--cockpit-red-deep));
  border:1px solid var(--cockpit-gold);
  box-shadow:0 4px 20px rgba(220,38,38,.36);
  display:flex;align-items:center;justify-content:center;
}
.cockpit-logo-text{font-family:var(--ff-d);font-weight:800;font-size:17px;letter-spacing:0}
.cockpit-logo-text span{color:var(--cockpit-gold)}
.cockpit-meta{display:flex;align-items:center;gap:16px;color:var(--cockpit-dim);font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
.mobile-match-chip{display:none}
.cockpit-live-dot{width:8px;height:8px;border-radius:50%;background:var(--phase-play);box-shadow:0 0 12px rgba(74,222,128,.5);animation:cockpitPulse 2s ease-in-out infinite;display:inline-block;margin-right:7px}
.mode-switcher{
  margin-right:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,215,0,.22);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:var(--cockpit-text);
  padding:7px 11px 7px 12px;
  font-family:inherit;
  font-size:11px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.mode-switcher:hover,.mode-switcher.open{
  background:rgba(255,215,0,.1);
  border-color:rgba(255,215,0,.48);
  transform:translateY(-1px);
}
.mode-current{display:inline-flex;align-items:center;gap:7px}
.mode-emoji{font-size:14px;line-height:1}
.mode-label{color:var(--cockpit-gold)}
.mode-chevron{
  color:var(--cockpit-dim);
  font-size:9px;
  transition:transform .2s ease;
}
.mode-switcher.open .mode-chevron{transform:rotate(180deg)}
.mode-dropdown{
  display:none;
  position:absolute;
  top:50px;
  left:196px;
  width:min(320px,calc(100vw - 28px));
  padding:10px;
  border:1px solid rgba(255,215,0,.22);
  border-radius:18px;
  background:rgba(6,10,6,.96);
  box-shadow:0 24px 70px rgba(0,0,0,.52),0 0 40px rgba(255,179,71,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  z-index:330;
}
.mode-dropdown.open{display:grid;gap:7px}
.mode-option{
  width:100%;
  display:grid;
  grid-template-columns:30px 1fr;
  gap:3px 10px;
  text-align:left;
  border:1px solid transparent;
  border-radius:13px;
  background:transparent;
  color:var(--cockpit-text);
  padding:10px;
  font-family:inherit;
  cursor:pointer;
}
.mode-option span{grid-row:1 / span 2;font-size:18px;align-self:center}
.mode-option strong{font-size:13px;font-weight:900;line-height:1.05}
.mode-option em{font-style:normal;font-size:11px;color:var(--cockpit-dim);line-height:1.25}
.mode-option:hover,.mode-option.active{
  border-color:rgba(255,215,0,.24);
  background:rgba(255,215,0,.08);
}
.mode-backdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:320;
  background:transparent;
}
.mode-backdrop.open{display:block}
.sound-toggle{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--cockpit-border);
  background:rgba(255,255,255,.03);
  color:var(--cockpit-dim);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.sound-toggle.active,.sound-toggle:hover{color:var(--cockpit-gold);border-color:rgba(255,215,0,.45);background:rgba(255,215,0,.08)}
.welcome-overlay{
  position:fixed;
  inset:0;
  z-index:420;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(3,6,3,.76);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
.welcome-overlay.visible{display:flex}
.welcome-card{
  width:min(620px,100%);
  border:1px solid rgba(255,215,0,.24);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(16,24,18,.98),rgba(6,10,6,.98));
  box-shadow:0 38px 110px rgba(0,0,0,.62),0 0 70px rgba(255,179,71,.09);
  padding:26px;
}
.welcome-kicker{
  font-size:11px;
  font-weight:900;
  letter-spacing:2.6px;
  text-transform:uppercase;
  color:var(--cockpit-gold);
  margin-bottom:10px;
}
.welcome-card h2{
  margin:0 0 7px;
  font-family:var(--ff-d);
  font-size:clamp(28px,5vw,44px);
  line-height:1;
  color:var(--cockpit-text);
}
.welcome-card p{margin:0 0 18px;color:var(--cockpit-dim);font-size:14px;line-height:1.45}
.welcome-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.welcome-option{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:3px 10px;
  text-align:left;
  border:1px solid rgba(255,255,255,.08);
  border-radius:15px;
  background:rgba(255,255,255,.035);
  color:var(--cockpit-text);
  padding:13px;
  font-family:inherit;
  cursor:pointer;
}
.welcome-option span{grid-row:1 / span 2;font-size:21px;align-self:center}
.welcome-option strong{font-size:14px;font-weight:900}
.welcome-option em{font-size:12px;font-style:normal;color:var(--cockpit-dim);line-height:1.25}
.welcome-option:hover{border-color:rgba(255,215,0,.36);background:rgba(255,215,0,.08)}
.welcome-option.welcome-primary{
  grid-column:1 / -1;
  border-color:rgba(255,215,0,.34);
  background:linear-gradient(135deg,rgba(255,215,0,.11),rgba(76,175,80,.06));
}
.welcome-option.welcome-primary strong{color:var(--cockpit-gold)}
.welcome-skip{
  margin-top:14px;
  width:100%;
  border:1px solid rgba(255,215,0,.22);
  border-radius:999px;
  background:rgba(0,0,0,.18);
  color:var(--cockpit-gold);
  padding:11px;
  font-family:inherit;
  font-weight:900;
  cursor:pointer;
}
body.mode-welcome-visible .onboard{display:none!important}
.cockpit-hero{
  position:relative;
  min-height:min(820px,calc(100svh - 58px));
  padding:44px 28px 36px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.cockpit-ball-deco{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none}
#ballCanvas{width:100%;height:100%;opacity:0;transition:opacity 1.2s ease;pointer-events:auto}
#ballCanvas.loaded{opacity:1}
.cockpit-hero-content{position:relative;z-index:2;width:min(1100px,100%);text-align:center;pointer-events:none}
.cockpit-eyebrow{
  color:var(--cockpit-gold);
  font-size:11px;
  letter-spacing:4px;
  text-transform:uppercase;
  font-weight:800;
  margin-bottom:20px;
}
.cockpit-eyebrow .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cockpit-gold);box-shadow:0 0 10px rgba(255,179,71,.45);margin:0 12px;vertical-align:middle}
.cockpit-hero h1{
  font-family:var(--ff-d);
  font-size:clamp(42px,6vw,76px);
  font-weight:800;
  line-height:.96;
  letter-spacing:0;
  color:var(--cockpit-text);
  margin:0 auto 16px;
  max-width:900px;
}
.cockpit-hero h1 .gold{
  display:block;
  color:transparent;
  background:linear-gradient(135deg,var(--cockpit-gold),var(--cockpit-gold-warm));
  -webkit-background-clip:text;
  background-clip:text;
  font-style:italic;
}
.cockpit-sub{color:var(--cockpit-dim);font-size:clamp(16px,1.6vw,19px);max-width:620px;margin:0 auto 8px;line-height:1.5}
.cockpit-hero-explain{
  max-width:560px;
  margin:0 auto 24px;
  color:rgba(245,245,240,.76);
  font-size:14px;
  line-height:1.45;
}
.cockpit-hero-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:24px;pointer-events:auto}
.cockpit-hero-actions a,.cockpit-card-cta{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:999px;
  padding:10px 15px;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  border:1px solid rgba(255,215,0,.24);
  color:var(--cockpit-text);
  background:rgba(0,0,0,.22);
}
.cockpit-hero-actions a:first-child,.cockpit-card-cta:hover{background:var(--cockpit-gold);color:#060a06}
.cockpit-daily-quote{
  width:min(640px,calc(100% - 32px));
  max-width:640px;
  margin:0 auto 22px;
  padding:11px 18px;
  border-color:rgba(255,215,0,.11);
  background:rgba(6,10,6,.24);
  pointer-events:auto;
}
.cockpit-daily-quote .quote-text{
  color:rgba(245,245,240,.86);
  font-size:14px;
  line-height:1.35;
  white-space:normal;
  overflow-wrap:break-word;
}
.cockpit-daily-quote .quote-author{
  color:rgba(255,215,0,.58);
  font-size:10px;
}
.cockpit-stats{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.cockpit-stat .n{font-family:var(--ff-d);font-weight:800;font-size:30px;color:var(--cockpit-gold);line-height:1;text-shadow:0 0 18px rgba(255,179,71,.32)}
.cockpit-stat .l{font-size:10px;color:rgba(245,245,240,.58);letter-spacing:2.3px;text-transform:uppercase;margin-top:5px}
.cockpit-phase-grid{display:grid;grid-template-columns:1.3fr 1.3fr repeat(3,1fr);gap:12px;pointer-events:auto;align-items:stretch}
.cockpit-phase{
  --phase-color:var(--cockpit-gold);
  position:relative;
  min-height:164px;
  padding:22px 18px 18px;
  border-radius:18px;
  background:var(--cockpit-card);
  border:1px solid rgba(255,255,255,.07);
  color:inherit;
  text-decoration:none;
  text-align:left;
  overflow:hidden;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:flex;
  flex-direction:column;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.cockpit-phase[data-cockpit-phase=today]{--phase-color:var(--phase-today);grid-column:span 2}
.cockpit-phase[data-cockpit-phase=play]{--phase-color:var(--phase-play)}
.cockpit-phase[data-cockpit-phase=learn]{--phase-color:var(--phase-learn)}
.cockpit-phase[data-cockpit-phase=team]{--phase-color:var(--phase-team)}
.cockpit-phase::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--phase-color),transparent 54%);opacity:.08;pointer-events:none}
.cockpit-phase:hover{transform:translateY(-5px);border-color:var(--phase-color);box-shadow:0 24px 60px -28px var(--phase-color)}
.cockpit-phase-num{position:absolute;top:12px;right:16px;font-family:var(--ff-d);font-size:58px;font-weight:800;line-height:1;color:var(--phase-color);opacity:.14}
.cockpit-phase.has-live-pill .cockpit-phase-num{display:none}
.live-pill{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 10px;background:rgba(255,107,74,.14);border:1px solid rgba(255,107,74,.5);color:var(--phase-today);font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
.live-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--phase-today);box-shadow:0 0 8px rgba(255,107,74,.45);animation:cockpitPulse 2s ease-in-out infinite}
.cockpit-phase-icon{width:40px;height:40px;border-radius:12px;border:1px solid var(--phase-color);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:13px}
.cockpit-phase-label{font-family:var(--ff-d);font-size:21px;font-weight:800;color:var(--cockpit-text);line-height:1.05}
.cockpit-phase-tagline{font-size:12px;color:var(--cockpit-dim);margin-top:6px;margin-bottom:0}
.cockpit-phase-items{display:none;list-style:none;margin:0;margin-top:auto;padding:0;color:var(--cockpit-faint);font-size:12px;line-height:1.75}
.cockpit-phase-items li{display:flex;align-items:center;gap:8px}
.cockpit-phase-items li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--phase-color);opacity:.7;flex:0 0 auto}
.phase-last{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06);font-size:10px;color:var(--cockpit-faint);letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.phase-last .dot-act{width:5px;height:5px;border-radius:50%;background:var(--phase-color);opacity:.65}
.cockpit-phase-arrow{position:absolute;right:18px;bottom:18px;color:var(--phase-color);font-size:23px}
.cockpit-phase.pulse-active{animation:phasePulse 2.6s ease-in-out infinite}
@keyframes phasePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,215,0,.22)}50%{box-shadow:0 0 0 9px rgba(255,215,0,0)}}
@keyframes cockpitPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.24)}}
.cockpit-scroll-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--cockpit-faint);font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;pointer-events:none}
.cockpit-scroll-hint .arrow{color:var(--cockpit-gold);font-size:18px;animation:bounce 2s ease-in-out infinite}
.cockpit-anchor,.cockpit-scroll-target{scroll-margin-top:74px}
.hub-layer-anchor{scroll-margin-top:78px}
.hub-layer-map{
  width:min(1040px,calc(100% - 40px));
  margin:0 auto 16px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  position:relative;
  z-index:2;
}
.hub-layer-card{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  min-height:48px;
  padding:9px 12px;
  border-radius:999px;
  text-decoration:none;
  color:var(--cockpit-text);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(12,20,14,.42);
  box-shadow:none;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.hub-layer-card span,
.hub-layer-head span{
  color:var(--cockpit-gold);
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
}
.hub-layer-card span{
  flex:0 0 auto;
  border:1px solid rgba(255,215,0,.2);
  border-radius:999px;
  padding:4px 8px;
  background:rgba(255,215,0,.06);
  letter-spacing:1.3px;
}
.hub-layer-card strong{
  font-family:var(--ff-d);
  font-size:16px;
  line-height:1;
  letter-spacing:0;
  min-width:0;
}
.hub-layer-card em{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  color:var(--cockpit-dim);
  font-style:normal;
  font-size:11px;
  line-height:1.25;
  text-align:right;
}
.hub-layer-card-today{border-color:rgba(255,107,74,.32);background:linear-gradient(135deg,rgba(255,107,74,.10),rgba(12,20,14,.42))}
.hub-layer-card-grow{border-color:rgba(255,215,0,.24)}
.hub-layer-card-discover{border-color:rgba(96,165,250,.22)}
.hub-layer-head{
  width:min(1040px,calc(100% - 40px));
  margin:18px auto 12px;
  padding:15px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  position:relative;
  z-index:2;
}
.hub-layer-head h2{
  font-family:var(--ff-d);
  font-size:clamp(25px,3.2vw,34px);
  line-height:1;
  color:var(--cockpit-text);
  margin:6px 0 0;
  letter-spacing:0;
}
.hub-layer-head p{
  color:var(--cockpit-dim);
  font-size:14px;
  line-height:1.45;
  margin:7px 0 0;
}
.hub-layer-head>strong{
  max-width:330px;
  color:var(--cockpit-gold);
  font-family:var(--ff-d);
  font-size:16px;
  line-height:1.2;
  text-align:right;
}
.hub-layer-head-today{border-color:rgba(255,107,74,.26)}
.hub-layer-head-grow{
  margin-top:34px;
  border-color:rgba(255,215,0,.22);
  box-shadow:0 -22px 60px -52px rgba(255,215,0,.9);
}
.hub-layer-head-discover{border-color:rgba(96,165,250,.22)}
.hub-action-grid{
  width:min(1040px,calc(100% - 40px));
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  position:relative;
  z-index:2;
}
.hub-action-card{
  display:inline-grid;
  grid-template-columns:auto auto;
  align-items:center;
  gap:5px 8px;
  min-width:0;
  padding:7px 10px;
  border-radius:999px;
  color:var(--cockpit-text);
  text-decoration:none;
  border:1px solid rgba(255,215,0,.11);
  background:rgba(6,10,6,.28);
}
.hub-action-card:not(:last-child)::after{
  content:"→";
  margin-left:4px;
  color:var(--cockpit-gold);
  opacity:.8;
  grid-column:3;
  grid-row:1 / span 2;
}
.hub-action-card span{
  width:max-content;
  color:#060a06;
  background:var(--cockpit-gold);
  border-radius:999px;
  padding:2px 7px;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
}
.hub-action-card strong{
  font-family:var(--ff-d);
  font-size:12px;
  line-height:1.08;
  white-space:nowrap;
}
.hub-action-card em{
  grid-column:2;
  color:var(--cockpit-dim);
  font-style:normal;
  font-size:9px;
  line-height:1;
  letter-spacing:.9px;
  text-transform:uppercase;
}
.hub-detail-drawer{
  width:min(1040px,calc(100% - 40px));
  margin:0 auto 24px;
  border:1px solid rgba(255,215,0,.16);
  border-radius:18px;
  background:rgba(6,10,6,.24);
  box-shadow:0 18px 64px -46px rgba(0,0,0,.84);
  overflow:hidden;
  position:relative;
  z-index:2;
}
.hub-detail-drawer summary{
  list-style:none;
  cursor:pointer;
  min-height:64px;
  padding:14px 18px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto auto;
  align-items:center;
  gap:8px 14px;
  color:var(--cockpit-text);
}
.hub-detail-drawer summary::-webkit-details-marker{display:none}
.drawer-kicker{
  border:1px solid rgba(255,215,0,.22);
  border-radius:999px;
  padding:5px 10px;
  color:var(--cockpit-gold);
  background:rgba(255,215,0,.07);
  font-size:10px;
  font-weight:900;
  letter-spacing:1.4px;
  text-transform:uppercase;
  white-space:nowrap;
}
.drawer-count{
  border:1px solid rgba(255,215,0,.18);
  border-radius:999px;
  padding:5px 9px;
  color:var(--cockpit-gold);
  background:rgba(255,215,0,.055);
  font-size:10px;
  font-weight:900;
  letter-spacing:.8px;
  white-space:nowrap;
}
.drawer-hint{
  color:var(--cockpit-dim);
  font-size:10px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  white-space:nowrap;
}
.drawer-hint::after{content:"Tippen zum Ausklappen"}
.hub-detail-drawer[open] .drawer-hint::after,
.matchday-compact-details[open] .drawer-hint::after{content:"Geöffnet"}
.hub-detail-drawer summary .drawer-kicker{
  grid-column:1;
  grid-row:1 / span 2;
}
.hub-detail-drawer summary strong{
  grid-column:2;
  grid-row:1;
  font-family:var(--ff-d);
  font-size:19px;
  line-height:1.05;
}
.hub-detail-drawer summary em{
  grid-column:2;
  grid-row:2;
  max-width:none;
  color:var(--cockpit-dim);
  font-style:normal;
  font-size:12px;
  line-height:1.35;
  text-align:left;
}
.hub-detail-drawer summary .drawer-count{
  grid-column:3;
  grid-row:1 / span 2;
}
.hub-detail-drawer summary .drawer-hint{
  grid-column:4;
  grid-row:1 / span 2;
}
.hub-detail-drawer summary::after{
  content:"+";
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--cockpit-gold);
  color:#060a06;
  font-weight:900;
  grid-column:5;
  grid-row:1 / span 2;
}
.hub-detail-drawer[open] summary::after{content:"−"}
.hub-detail-drawer-body{
  padding:0 0 18px;
  border-top:1px solid rgba(255,215,0,.09);
}
.hub-detail-drawer-body>.section:first-child{padding-top:24px}
.matchday-focus-card{
  width:min(1040px,calc(100% - 40px));
  margin:0 auto 18px;
  padding:20px;
  border:1px solid rgba(255,215,0,.2);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(255,215,0,.09),rgba(74,222,128,.045) 58%,rgba(6,10,6,.34));
  box-shadow:0 28px 90px -68px rgba(255,215,0,.85), inset 0 1px 0 rgba(255,255,255,.05);
  position:relative;
  z-index:2;
}
.matchday-focus-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,300px);
  align-items:stretch;
  gap:18px;
}
.matchday-focus-kicker,
.opponent-profile-label{
  color:var(--cockpit-gold);
  font-family:var(--ff-d);
  font-size:11px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.matchday-focus-copy h3{
  margin:4px 0 0;
  color:var(--cockpit-text);
  font-family:var(--ff-d);
  font-size:clamp(22px,3vw,31px);
  font-weight:900;
  line-height:1.02;
  letter-spacing:0;
}
.matchday-focus-copy p{
  max-width:640px;
  margin:6px 0 0;
  color:var(--cockpit-dim);
  font-size:13px;
  line-height:1.45;
}
.matchday-focus-opponent{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
  min-height:100%;
  padding:14px;
  border:1px solid rgba(255,215,0,.14);
  border-radius:13px;
  background:rgba(6,10,6,.34);
}
.matchday-focus-opponent span{
  color:var(--cockpit-gold);
  font-family:var(--ff-d);
  font-size:10px;
  font-weight:900;
  letter-spacing:1.3px;
  text-transform:uppercase;
}
.matchday-focus-opponent strong{
  color:var(--cockpit-text);
  font-family:var(--ff-d);
  font-size:17px;
  font-weight:900;
  line-height:1.05;
}
.matchday-focus-opponent em{
  color:var(--cockpit-dim);
  font-style:normal;
  font-size:12px;
}
.matchday-focus-opponent a{
  align-self:flex-start;
  margin-top:4px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--cockpit-gold);
  color:#060a06;
  font-family:var(--ff-d);
  font-size:12px;
  font-weight:900;
  text-decoration:none;
}
.matchday-focus-card .hub-action-grid{
  width:100%;
  margin:14px 0 0;
}
.matchday-focus-card .hub-action-card{
  background:rgba(6,10,6,.35);
}
.matchday-focus-opponent a:focus,
.matchday-focus-opponent a:focus-visible,
.matchday-compact-details summary:focus,
.matchday-compact-details summary:focus-visible,
.hub-action-card:focus,
.hub-action-card:focus-visible,
.quick-drill-card a:focus,
.quick-drill-card a:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,215,0,.2),0 0 0 1px var(--cockpit-gold);
}
.matchday-command{
  margin-top:11px;
  width:min(640px,100%);
  border:1px solid rgba(255,215,0,.2);
  border-left:3px solid var(--cockpit-gold);
  border-radius:10px;
  padding:9px 10px;
  background:rgba(255,215,0,.07);
  color:var(--cockpit-text);
  font-size:13px;
  line-height:1.38;
}
.matchday-command strong{color:var(--cockpit-gold);font-weight:900}
.pokal-mini-plan{
  margin-top:10px;
  width:min(700px,100%);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}
.pokal-mini-plan span{
  min-height:42px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:8px 9px;
  background:rgba(0,0,0,.16);
  color:var(--cockpit-dim);
  font-size:11px;
  line-height:1.25;
}
.pokal-mini-plan strong{
  display:block;
  margin-bottom:2px;
  color:var(--cockpit-gold);
  font-family:var(--ff-d);
  font-size:12px;
  font-weight:900;
}
.matchday-compact-details{
  width:100%;
  margin-top:14px;
  border:1px solid rgba(255,215,0,.15);
  border-radius:12px;
  background:rgba(0,0,0,.16);
}
.matchday-compact-details summary{
  cursor:pointer;
  list-style:none;
  padding:10px 12px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto auto;
  align-items:center;
  gap:5px 10px;
  color:var(--cockpit-gold);
}
.matchday-compact-details summary::-webkit-details-marker{display:none}
.matchday-compact-details summary .drawer-kicker{
  grid-column:1;
  grid-row:1 / span 2;
}
.matchday-compact-details summary strong{
  grid-column:2;
  grid-row:1;
  color:var(--cockpit-text);
  font-family:var(--ff-d);
  font-size:13px;
  font-weight:900;
  line-height:1.05;
}
.matchday-compact-details summary em{
  grid-column:2;
  grid-row:2;
  color:var(--cockpit-dim);
  font-size:11px;
  font-style:normal;
  line-height:1.3;
}
.matchday-compact-details summary .drawer-count{
  grid-column:3;
  grid-row:1 / span 2;
}
.matchday-compact-details summary .drawer-hint{
  grid-column:4;
  grid-row:1 / span 2;
}
.matchday-compact-details summary::after{
  content:"+";
  width:20px;
  height:20px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,215,0,.13);
  color:var(--cockpit-gold);
  grid-column:5;
  grid-row:1 / span 2;
}
.matchday-compact-details[open]{
  padding-bottom:10px;
}
.matchday-compact-details[open] summary{
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:10px;
}
.matchday-compact-details[open] summary::after{content:"−"}
.matchday-compact-details .matchday-ritual,
.matchday-compact-details .quick-drill-card,
.matchday-compact-details .opponent-profile-chips,
.matchday-compact-details .countdown{
  margin-left:10px;
  margin-right:10px;
}
.matchday-compact-details .opponent-profile-label{
  margin:10px 10px 0;
}
.matchday-compact-details .matchday-ritual,
.matchday-compact-details .quick-drill-card{
  width:calc(100% - 20px);
}
.matchday-ritual{
  margin-top:9px;
  width:min(520px,100%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  padding:9px;
  background:rgba(0,0,0,.14);
}
.matchday-ritual-label{
  margin-bottom:7px;
  color:var(--cockpit-gold);
  font-family:var(--ff-d);
  font-size:11px;
  font-weight:900;
  letter-spacing:.9px;
  text-transform:uppercase;
}
.matchday-ritual-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}
.matchday-ritual-steps span{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  padding:6px 7px;
  background:rgba(255,255,255,.035);
}
.matchday-ritual-steps strong{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 18px;
  border-radius:999px;
  background:rgba(255,215,0,.14);
  color:var(--cockpit-gold);
  font-family:var(--ff-d);
  font-size:11px;
  font-weight:900;
}
.matchday-ritual-steps em{
  color:var(--cockpit-text);
  font-style:normal;
  font-size:11px;
  font-weight:800;
  line-height:1.15;
}
.quick-drill-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:min(520px,100%);
  margin-top:9px;
  border:1px solid rgba(102,187,106,.2);
  border-left:3px solid #66bb6a;
  border-radius:10px;
  padding:10px;
  background:rgba(76,175,80,.06);
}
.quick-drill-card span{
  display:block;
  color:#66bb6a;
  font-family:var(--ff-d);
  font-size:11px;
  font-weight:900;
  letter-spacing:.9px;
  text-transform:uppercase;
}
.quick-drill-card strong{
  display:block;
  margin-top:3px;
  color:var(--cockpit-text);
  font-family:var(--ff-d);
  font-size:14px;
  font-weight:900;
  line-height:1.15;
}
.quick-drill-card em{
  display:block;
  margin-top:4px;
  color:var(--cockpit-dim);
  font-style:normal;
  font-size:12px;
  line-height:1.35;
}
.quick-drill-card a{
  flex:0 0 auto;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--cockpit-text);
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}
.opponent-profile-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}
.opponent-profile-chips span,
.role-mission-grid span,
.score-state-grid span{
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  background:rgba(0,0,0,.2);
}
.opponent-profile-chips span{
  display:flex;
  flex-direction:column;
  min-width:78px;
  padding:7px 9px;
}
.opponent-profile-chips strong{
  color:var(--cockpit-text);
  font-family:var(--ff-d);
  font-size:16px;
  line-height:1;
  font-weight:900;
}
.opponent-profile-chips em{
  margin-top:2px;
  color:var(--cockpit-dim);
  font-style:normal;
  font-size:10px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
}
.role-mission-grid,
.score-state-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.role-mission-grid{
  margin-top:10px;
}
.role-mission-grid span,
.score-state-grid span{
  display:block;
  padding:9px 10px;
}
.role-mission-grid strong,
.score-state-grid strong{
  display:block;
  color:var(--cockpit-gold);
  font-family:var(--ff-d);
  font-size:13px;
  font-weight:900;
  line-height:1.1;
}
.role-mission-grid em,
.score-state-grid em{
  display:block;
  margin-top:4px;
  color:var(--cockpit-dim);
  font-style:normal;
  font-size:12px;
  line-height:1.35;
}
.score-state-card{
  margin-bottom:12px;
  padding:12px;
  border:1px solid rgba(255,215,0,.16);
  border-radius:10px;
  background:rgba(255,215,0,.045);
}
.score-state-head{
  margin-bottom:8px;
  color:var(--cockpit-gold);
  font-family:var(--ff-d);
  font-size:12px;
  font-weight:900;
  letter-spacing:.9px;
  text-transform:uppercase;
}
.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  width:min(430px,100%);
  margin-top:12px;
}
.cd-unit{border:1px solid rgba(220,38,38,.18);border-radius:8px;background:rgba(6,10,6,.45);padding:7px 4px;text-align:center}
.cd-num{font-family:var(--ff-d);font-size:20px;font-weight:800;line-height:1;color:var(--cockpit-gold);display:block;text-shadow:0 0 12px rgba(255,179,71,.35)}
.cd-num.tick{animation:tick .35s ease}
.cd-lbl{display:block;margin-top:3px;color:var(--cockpit-dim);font-size:9px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}
.countdown.live,.countdown.live-text{grid-template-columns:1fr}
.countdown.live .cd-unit{border-color:rgba(74,222,128,.35)}
.countdown.live .cd-num{color:var(--phase-play)}
@keyframes tick{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.mini-field-wrap{margin:0 0 12px;padding:14px;border-radius:12px;background:linear-gradient(135deg,rgba(220,38,38,.07),rgba(74,222,128,.05));border:1px solid rgba(74,222,128,.15)}
.mini-field-label{text-align:center;color:var(--phase-play);font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.mini-field-svg{display:block;width:100%;height:auto;max-height:136px}
.cockpit-image-strip{
  width:min(1040px,calc(100% - 40px));
  margin:18px auto 28px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.cockpit-image-card{
  display:block;
  position:relative;
  height:152px;
  min-height:152px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  background:#071007;
  color:inherit;
  text-decoration:none;
}
.cockpit-image-card img{width:100%;height:100%;min-height:0;display:block;object-fit:cover;filter:saturate(.95) contrast(1.03)}
.cockpit-image-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.78))}
.cockpit-image-copy{position:absolute;left:12px;right:12px;bottom:12px;z-index:2}
.cockpit-image-copy span{display:block;color:var(--cockpit-gold);font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:4px}
.cockpit-image-copy strong{font-family:var(--ff-d);font-size:16px;line-height:1.08;color:#fff}
.cockpit-image-copy em{display:block;margin-top:4px;font-style:normal;color:#cbd7cb;font-size:12px;line-height:1.35}
.mode-hidden{display:none!important}
body:not([data-mode="hub"]) .cockpit-hero{
  min-height:auto;
  padding-top:34px;
  padding-bottom:24px;
}
body:not([data-mode="hub"]) .cockpit-phase-grid,
body:not([data-mode="hub"]) .cockpit-hero-actions,
body:not([data-mode="hub"]) .cockpit-scroll-hint{display:none!important}
body:not([data-mode="hub"]) .cockpit-stats{margin-bottom:0;gap:22px}
.section-fokus-banner{
  display:none;
  width:min(1040px,calc(100% - 40px));
  margin:18px auto 14px;
  align-items:center;
  gap:14px;
  padding:15px 16px;
  border-radius:17px;
  border:1px solid rgba(255,215,0,.2);
  background:linear-gradient(135deg,rgba(255,215,0,.08),rgba(0,0,0,.2));
  box-shadow:0 18px 50px -30px rgba(255,179,71,.45);
}
body[data-mode="prematch"] .section-fokus-banner[data-banner="prematch"],
body[data-mode="match"] .section-fokus-banner[data-banner="match"],
body[data-mode="postmatch"] .section-fokus-banner[data-banner="postmatch"],
body[data-mode="learn"] .section-fokus-banner[data-banner="learn"],
body[data-mode="team"] .section-fokus-banner[data-banner="team"]{display:flex}
.fb-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,215,0,.28);
  background:rgba(255,255,255,.05);
  flex:0 0 auto;
}
.fb-body{min-width:0;flex:1}
.fb-label{
  font-family:var(--ff-d);
  font-weight:900;
  font-size:16px;
  color:var(--cockpit-text);
  line-height:1.15;
}
.fb-desc{
  margin-top:3px;
  font-size:12px;
  color:var(--cockpit-dim);
  line-height:1.4;
}
.fb-exit{
  flex:0 0 auto;
  border:1px solid rgba(255,215,0,.24);
  border-radius:999px;
  background:rgba(0,0,0,.18);
  color:var(--cockpit-gold);
  padding:8px 12px;
  font-family:inherit;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}
.fb-exit:hover{background:var(--cockpit-gold);color:#060a06}
.postmatch-focus-card,
.mode-live-focus{display:none}
body[data-mode="postmatch"] .postmatch-focus-card{
  width:min(760px,calc(100% - 40px));
  margin:12px auto 18px;
  display:grid;
  gap:12px;
  border:1px solid rgba(74,222,128,.24);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(74,222,128,.10),rgba(255,215,0,.05));
  padding:18px;
}
.postmatch-focus-card span,
.mode-live-focus span{
  display:block;
  font-family:var(--ff-d);
  font-size:11px;
  font-weight:900;
  color:var(--cockpit-gold);
  letter-spacing:1.6px;
  text-transform:uppercase;
  margin-bottom:4px;
}
.postmatch-focus-card strong,
.mode-live-focus strong{
  display:block;
  font-family:var(--ff-d);
  font-size:24px;
  line-height:1.05;
  color:var(--cockpit-text);
}
.postmatch-focus-card em,
.mode-live-focus em{
  display:block;
  margin-top:4px;
  font-style:normal;
  font-size:13px;
  color:var(--cockpit-dim);
}
.postmatch-focus-card p{
  margin:0;
  color:var(--cockpit-dim);
  font-size:13px;
  line-height:1.45;
}
.postmatch-focus-card div:last-child,
.mode-live-actions{display:flex;gap:9px;flex-wrap:wrap}
.postmatch-focus-card a,
.mode-live-actions a{
  border-radius:999px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,215,0,.22);
  color:var(--cockpit-text);
  padding:9px 12px;
  text-decoration:none;
  font-size:12px;
  font-weight:900;
}
.postmatch-focus-card a:first-child,
.mode-live-actions a:first-child{background:var(--cockpit-gold);color:#060a06}
body[data-mode="match"] .mode-live-focus{
  width:min(920px,calc(100% - 40px));
  margin:12px auto 14px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
  border:1px solid rgba(74,222,128,.28);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(74,222,128,.10),rgba(0,0,0,.20));
  padding:18px;
}
body[data-mode="match"] .mode-season-block,
body[data-mode="match"] .mode-matchday-detail{display:none!important}
.stepper-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,215,0,.12);
}
body:not([data-mode="prematch"]) .stepper-controls{display:none!important}
body[data-mode="prematch"] .mode-stepper-grid{display:block!important}
body[data-mode="prematch"] .mode-plan-block{display:none;margin-bottom:9px}
body[data-mode="prematch"] .mode-plan-block.active-step{display:block}
.stepper-btn{
  border:0;
  border-radius:999px;
  background:var(--cockpit-gold);
  color:#060a06;
  padding:9px 12px;
  font-family:inherit;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}
.stepper-btn.ghost{
  background:rgba(255,255,255,.05);
  color:var(--cockpit-text);
  border:1px solid rgba(255,215,0,.18);
}
.stepper-btn:disabled{opacity:.38;cursor:not-allowed}
.stepper-progress{display:flex;align-items:center;justify-content:center;gap:6px;flex:1}
.stepper-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  border:1px solid rgba(255,215,0,.45);
  background:transparent;
}
.stepper-dot.active{background:var(--cockpit-gold);box-shadow:0 0 12px rgba(255,215,0,.36)}
body[data-mode="match"] .hub-detail-drawer{
  border-color:rgba(74,222,128,.36);
  box-shadow:0 20px 70px -38px rgba(74,222,128,.75);
}
body[data-mode="team"] #team,
body[data-mode="learn"] .pitch{
  box-shadow:0 28px 90px -34px rgba(255,215,0,.58);
}
.cockpit-topbar{z-index:310}
.cockpit-topbar+.offline-bar,
.cockpit-topbar~.offline-bar,
.cockpit-topbar~.offline-bar.show{top:58px!important}
.pitch{border-color:rgba(255,215,0,.12);box-shadow:0 30px 90px -20px rgba(0,0,0,.66),0 0 70px -24px rgba(74,222,128,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.pitch-lines svg line,.pitch-lines svg circle,.pitch-lines svg rect{stroke:rgba(245,245,232,.38)!important;filter:drop-shadow(0 0 4px rgba(255,215,0,.08))}
.pitch-lines svg path{stroke:rgba(255,215,0,.10)!important}
.section-head{max-width:1040px}
.saison-cards,.tool-grid,.guide-grid{position:relative;z-index:2}
@media(max-width:980px){
  .cockpit-phase-grid{grid-template-columns:repeat(2,1fr)}
  .cockpit-phase[data-cockpit-phase=today]{grid-column:span 2}
  .hub-layer-map{grid-template-columns:1fr}
  .cockpit-image-strip{grid-template-columns:repeat(2,1fr)}
  .cockpit-hero{min-height:auto;padding-top:38px}
}
@media(max-width:640px){
  .cockpit-topbar{padding:10px 15px}
  .cockpit-logo{order:1;flex:0 0 auto}
  .cockpit-logo-text{display:none}
  .mode-switcher{order:3;flex:0 0 auto;padding:7px 9px;margin-right:0}
  .mode-label{display:none}
  .mode-dropdown{left:14px;top:52px}
  .cockpit-meta{order:2;flex:1 1 auto;justify-content:center;margin-left:0;min-width:0;gap:8px}
  .cockpit-meta span:not(.streak-badge){display:none}
  .cockpit-meta .mobile-match-chip{
    display:inline-flex!important;
    align-items:center;
    max-width:160px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--cockpit-gold);
    letter-spacing:.6px;
  }
  .cockpit-meta .sound-toggle{display:none}
  .cockpit-hero{padding:28px 16px 30px}
  .cockpit-eyebrow{max-width:320px;margin-left:auto;margin-right:auto;font-size:10px;letter-spacing:2px;line-height:1.35}
  .cockpit-hero h1{max-width:320px;font-size:clamp(28px,8vw,32px);overflow-wrap:break-word}
  .cockpit-hero h1 .gold{display:block;max-width:310px;margin:0 auto;font-size:.92em;line-height:1.05;white-space:normal}
  .cockpit-sub{max-width:320px;font-size:14px}
  .cockpit-hero-explain{max-width:320px;font-size:13px;margin-bottom:18px}
  .cockpit-stats{gap:18px;margin-bottom:24px}
  .cockpit-stat .n{font-size:25px}
  .cockpit-phase-grid{grid-template-columns:1fr;gap:10px}
  .cockpit-phase[data-cockpit-phase=today]{grid-column:auto}
  .cockpit-phase{min-height:auto;padding:22px 18px}
  .hub-layer-map{width:calc(100% - 32px);gap:10px}
  .hub-layer-card{
    min-height:auto;
    padding:15px;
  }
  .hub-layer-head{width:calc(100% - 32px);margin:18px auto 12px;align-items:flex-start;flex-direction:column}
  .hub-layer-head>strong{text-align:left;font-size:15px}
  .hub-action-grid{
    width:calc(100% - 32px);
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    justify-content:stretch;
  }
  .matchday-focus-card{
    width:calc(100% - 32px);
    padding:14px;
    margin-bottom:16px;
  }
  .matchday-focus-main{
    grid-template-columns:1fr;
  }
  .matchday-focus-opponent{
    min-height:auto;
  }
  .matchday-focus-opponent a{
    width:100%;
    text-align:center;
  }
  .pokal-mini-plan{
    grid-template-columns:1fr 1fr;
  }
  .matchday-focus-card .hub-action-grid{
    width:100%;
  }
  .hub-action-card{
    width:auto;
    grid-template-columns:auto minmax(0,1fr);
    border-radius:13px;
    padding:8px 9px;
  }
  .hub-action-card strong{white-space:normal}
  .hub-action-card em{display:none}
  .hub-action-card:not(:last-child)::after{display:none}
  .matchday-ritual-steps{grid-template-columns:1fr 1fr}
  .quick-drill-card{align-items:flex-start;flex-direction:column}
  .quick-drill-card a{width:100%;text-align:center}
  .opponent-profile-chips span{min-width:calc(50% - 3px)}
  .role-mission-grid,
  .score-state-grid{grid-template-columns:1fr}
  .hub-detail-drawer{width:calc(100% - 32px)}
  .hub-detail-drawer summary,
  .matchday-compact-details summary{
    grid-template-columns:minmax(0,1fr) auto;
    padding:15px;
    gap:8px 10px;
  }
  .hub-detail-drawer summary .drawer-kicker,
  .matchday-compact-details summary .drawer-kicker,
  .hub-detail-drawer summary strong,
  .matchday-compact-details summary strong,
  .hub-detail-drawer summary em,
  .matchday-compact-details summary em,
  .hub-detail-drawer summary .drawer-count,
  .matchday-compact-details summary .drawer-count,
  .hub-detail-drawer summary .drawer-hint,
  .matchday-compact-details summary .drawer-hint{
    grid-column:1;
    grid-row:auto;
    justify-self:start;
  }
  .hub-detail-drawer summary em{text-align:left;max-width:none}
  .hub-detail-drawer summary::after,
  .matchday-compact-details summary::after{grid-column:2;grid-row:1 / span 5}
  .cockpit-image-strip{grid-template-columns:1fr;width:calc(100% - 32px);gap:10px}
  .cockpit-image-card{height:132px;min-height:132px}
  .cockpit-image-card img{height:100%;min-height:0}
  .section-fokus-banner{width:calc(100% - 32px);align-items:flex-start;flex-wrap:wrap}
  .fb-icon{width:36px;height:36px}
  .fb-exit{width:100%}
  body[data-mode="postmatch"] .postmatch-focus-card,
  body[data-mode="match"] .mode-live-focus{
    width:calc(100% - 32px);
    grid-template-columns:1fr;
  }
  .welcome-card{padding:20px}
  .welcome-options{grid-template-columns:1fr}
  .stepper-controls{flex-wrap:wrap}
  .stepper-progress{order:-1;flex-basis:100%}
  .countdown{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  #ballCanvas,.cockpit-phase,.live-pill::before,.cockpit-live-dot,.cockpit-phase.pulse-active{animation:none!important;transition:none!important}
}