/* D62 – Desktop-Startseite (> 960 px): Hallen-Hero mit Intro R62, Ball-Menü oben rechts.
   Alles hängt an html.d62 (wird nur auf der Startseite und nur über 960 px gesetzt). Handy unberührt. */
.d62-hero, .d62-menu, .d62-brand { display:none; }
@media (min-width:961px) {
html.d62 body { background:#12110d; }
html.d62 .site-header, html.d62 .r7-hero, html.d62 .dock { display:none !important; }
html.d62 .d62-hero { display:block; position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden; background:#0b0a08; isolation:isolate; }
html.d62 .d62-stage { position:absolute; left:0; top:0; transform-origin:0 0; }
html.d62 .d62-stage > img, html.d62 .d62-stage > video { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; }
html.d62 .d62-film[hidden], html.d62 .d62-still[hidden] { display:none; }
html.d62 .d62-ball { position:absolute; left:0; top:0; z-index:6; pointer-events:none; background-repeat:no-repeat; will-change:transform; }
html.d62 .d62-ball[hidden] { display:none; }
html.d62 .d62-ball { background-image:var(--d62-atlas); }

/* Overlays erscheinen erst zum Textzeitpunkt (wie auf dem Handy) */
html.d62 .d62-ov { position:absolute; left:0; top:0; z-index:4; opacity:0; visibility:hidden; transition:opacity .7s ease, visibility 0s linear .7s; }
html.d62 .d62-hero.d62-text .d62-ov { opacity:1; visibility:visible; transition:opacity .7s ease; }
html.d62 .d62-plate, html.d62 .d62-act { transform-origin:0 0; }

/* Live-Ergebnistafel auf dem gerenderten Bildschirm */
html.d62 #d62-board { position:absolute; z-index:4; }
html.d62 #d62-board .r19-scoreboard { max-width:none; }
html.d62 #d62-board .r19-controls, html.d62 #d62-board .r19-details { display:none; }

/* Hochgestellte Plattenhälften der Nebentische */
html.d62 .d62-plate:focus-visible, html.d62 .d62-act:focus-visible { outline:3px solid #ffd21e; outline-offset:4px; }

/* Schrift auf der unteren Haupttischhälfte (Probetraining links, Minispiel rechts) */
html.d62 .d62-act { display:block; background:none; border:0; padding:0; cursor:pointer; text-align:center; text-decoration:none; color:#fff; font:inherit; }
html.d62 .d62-act strong { display:block; font-weight:800; font-size:30px; letter-spacing:.06em; text-transform:uppercase; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.4); }
html.d62 .d62-act small { display:block; margin-top:2px; font-size:15px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#ffd21e; }
html.d62 .d62-act:hover strong { color:#ffd21e; }

/* Kopf: Wappen links, Ball-Menü oben rechts */
html.d62 .d62-brand { display:flex; position:absolute; z-index:30; left:28px; top:22px; align-items:center; gap:12px; color:#fff; text-decoration:none; }
html.d62 .d62-brand img { width:52px; height:52px; }
html.d62 .d62-brand strong { display:block; font-size:18px; font-weight:800; letter-spacing:.01em; }
html.d62 .d62-brand small { display:block; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#ffd21e; }
html.d62 .d62-menu { display:grid; place-items:center; position:fixed; z-index:31; right:24px; top:16px; width:76px; height:76px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; }
html.d62 .d62-menu img { width:100%; height:100%; display:block; border-radius:50%; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)); transition:transform .25s ease; }
html.d62 .d62-menu:hover img { transform:scale(1.05); }
html.d62 .d62-menu:focus-visible { outline:3px solid #ffd21e; outline-offset:4px; }
html.d62 .d62-skip { position:absolute; z-index:8; right:28px; bottom:26px; padding:10px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.45); background:rgba(11,10,8,.55); color:#fff; font:700 13px/1 inherit; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
html.d62 .d62-skip[hidden] { display:none; }
html.d62 .d62-scrollcue { position:absolute; z-index:5; left:50%; bottom:18px; transform:translateX(-50%); color:#fff; opacity:.75; font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; }

/* Menü als Seitenpanel rechts (gleicher Inhalt wie auf dem Handy), Halle dahinter abgedunkelt */
html.d62 .sheet-r40.r44-sheet { display:none; }
html.d62 .sheet-r40.r44-sheet.is-open { display:block !important; position:fixed; inset:0; z-index:90; padding:0 !important; }
html.d62 .sheet-r40 .sheet-backdrop { position:absolute; inset:0; background:rgba(6,5,3,.62) !important; backdrop-filter:blur(2px); opacity:0; transition:opacity .3s ease; }
html.d62 .sheet-r40.is-visible .sheet-backdrop { opacity:1; }
html.d62 .sheet-r40 .sheet-panel { position:absolute !important; inset:0 0 0 auto !important; width:min(480px,92vw) !important; max-height:none !important; height:100% !important; margin:0 !important; border-radius:0 !important; border:0 !important; border-left:1px solid rgba(255,210,30,.25) !important;
  transform:translateX(40px) !important; opacity:0 !important; transition:transform .32s cubic-bezier(.2,.7,.2,1), opacity .25s ease !important; display:flex; flex-direction:column; }
html.d62 .sheet-r40.is-visible .sheet-panel { transform:none !important; opacity:1 !important; }
html.d62 .sheet-r40 .sheet-head { padding:30px 30px 18px !important; }
html.d62 .sheet-r40 .r45-menu { padding:4px 22px 22px !important; }
@media (prefers-reduced-motion:reduce) { html.d62 .sheet-r40 .sheet-panel { transition:none !important; } }
}

/* Sehr breite Monitore: Seitenränder mit unscharfer Halle füllen statt Schwarz */
html.d62 .d62-hero::before { content:""; position:absolute; inset:-40px; z-index:-1; background:url("final-desktop-1280.webp") center/cover no-repeat; filter:blur(28px) brightness(.55); }

@media (min-width:961px){
/* Unterseiten: Menü-Beschriftung nur oben, beim Scrollen bleibt nur der Ball (kein Text über Inhalten) */
}
@media (min-width:961px){
/* Platten-Schrift: wie aufgedruckt, links/rechts der weißen Mittellinie der hochgestellten Platte */
html.d62 .d62-plate { display:grid; grid-template-columns:1fr 1fr; column-gap:30px; align-items:center; padding:10px 18px; box-sizing:border-box; color:#fff; text-decoration:none; font-family:inherit; overflow:hidden; }
html.d62 .d62-plate .d62-h { display:flex; flex-direction:column; min-width:0; }
html.d62 .d62-plate .d62-ha { align-items:center; text-align:center; gap:6px; }
html.d62 .d62-plate .d62-hb { align-items:flex-start; text-align:left; gap:3px; }
html.d62 .d62-plate .d62-k { font-weight:800; font-size:17px; line-height:1.08; letter-spacing:.14em; text-transform:uppercase; color:#fff; text-shadow:0 1px 1px rgba(5,20,50,.45); }
html.d62 .d62-seg { font:400 50px/1 "R45 Seg14", monospace; color:#ffd21e; text-shadow:0 0 10px rgba(255,190,40,.5); letter-spacing:.06em; }
html.d62 .d62-plate [data-f="date"] { white-space:nowrap; font-weight:800; font-size:23px; line-height:1.05; color:#fff; text-shadow:0 1px 1px rgba(5,20,50,.45); }
html.d62 .d62-plate [data-f="time"] { font-weight:800; font-size:18px; line-height:1.15; color:#ffd21e; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
html.d62 .d62-plate [data-f="info"] { font-weight:600; font-size:15px; line-height:1.15; color:#eef2fb; }
html.d62 .d62-plate [hidden] { display:none !important; }
html.d62 .d62-plate:hover .d62-k, html.d62 .d62-plate:focus-visible .d62-k { color:#ffd21e; }
}
@media (min-width:961px){
html.d62.d62-playing:not(.d62-landed) .d62-menu img { opacity:0; }
html.d62.d62-landed .d62-menu img { opacity:1; transition:opacity .2s linear; }
}

/* DK 01.10. (6): HEIM/GAST ~30 % kleiner, Mannschaftsnamen größer in den breiteren Seitenfeldern */
html.d62 #d62-board .r19-label { font-size:clamp(7px,1.82cqw,12px); }
html.d62 #d62-board .r19-team, html.d62 #d62-board .r19-team-long { width:29%; max-height:66%; font-size:clamp(10px,3.25cqw,23px); line-height:1.4; overflow-wrap:normal; word-break:normal; hyphens:none; }
html.d62 #d62-board .r19-team-long { font-size:clamp(9px,2.9cqw,20px); }

/* DK 01.10. (7): perspektivische Plattenschrift – Canvas-Ersatzdarstellung (nur wenn der Browser matrix3d abflacht) */
html.d62 .d62-hero > .r26-plane-paint { position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity .7s ease; }
html.d62 .d62-hero.d62-text > .r26-plane-paint { opacity:1; }
html.d62 .d62-hero .r26-paint-link > * { opacity:0; }
html.d62 .d62-hero .r26-paint-link:focus-visible { background:rgba(255,255,255,.12); }

/* DK 02.10.: Tafel per Klick weiterschalten */
html.d62 #d62-board .r19-stage { cursor:pointer; }

/* DK 02.10.: Hochkant-Desktop (z. B. Handy im Modus „Desktop-Website“): Hero nur so hoch wie die Halle,
   keine Restfläche aus unscharfem Hintergrund (alte Viewport-Regel min-block-size gilt hier nicht) */
html.d62 body.r41-viewport main > section.d62-hero, html.d62 .d62-hero { min-block-size:0 !important; }
@media (min-aspect-ratio: 4/3) { html.d62 .d62-hero { min-height:560px; } }
@media (max-aspect-ratio: 4/3) { html.d62 .d62-hero { min-height:0; } }

/*BOARD-GATE-CSS*/ html.d62 #d62-board:not(.d62-board-ready) { opacity:0 !important; visibility:hidden !important; transition:none !important; }
@media (prefers-reduced-motion:reduce) { html.d62 #d62-board { transition:none !important; } }

/* DK 09.10.: Hero-Medien 1920x1536 (oben deckungsgleich mit 16:9). Ältere 16:9-Filme oben bündig statt gestreckt/beschnitten. */
html.d62 .d62-stage > video, html.d62 .d62-stage > .d63-film, html.d62 .d62-stage > .d63-final { object-fit:contain; object-position:50% 0; }