:root { color-scheme: dark; --boden: #1a1917; --flaeche: #22211e; --creme: #ece2d3; --akzent: #c8a98a; --leise: #9a8f80; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--boden); color: var(--creme); font-family: Arial, Helvetica, sans-serif; font-weight: 400; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 5px; }
.kopf { padding: 27px 4.5%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #363430; }
.wortmarke { font-size: 22px; letter-spacing: -.04em; }
.wortmarke span { display: block; margin-top: 8px; font-size: 9px; text-transform: uppercase; letter-spacing: .23em; color: var(--leise); }
.edition { color: var(--leise); font-size: 11px; letter-spacing: .04em; }
.edition i { font-style: normal; color: var(--akzent); padding-left: 40px; }
main { max-width: 1700px; margin: auto; padding: 0 4.5%; }
.intro { display: flex; justify-content: space-between; align-items: end; padding: 38px 0 30px; gap: 24px; }
.augenbraue { margin: 0 0 16px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--akzent); }
h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(27px, 3.1vw, 49px); font-weight: 400; line-height: 1.1; letter-spacing: -.025em; margin: 0; }
.anleitung { padding: 0 2.5% 4px 0; }
.anleitung p { margin: 0 0 13px; font-size: 17px; line-height: 1.5; }
.anleitung span { color: var(--leise); font-size: 12px; line-height: 1.6; }
.halle { position: relative; width: 100%; isolation: isolate; }
.grundriss { display: block; width: 100%; height: auto; }
.bereich { position: absolute; width: 24%; z-index: 1; }
.court1 { left: 8%; top: 28%; }
.court2 { left: 38%; top: 28%; }
.court3 { left: 68%; top: 28%; }
.lounge { left: 68%; top: 68%; width: 21%; }
.display { position: relative; aspect-ratio: 16/9; background: #1a1917; border: 3px solid #484540; box-shadow: 0 10px 25px #0006; }
.display::after { content: ''; position: absolute; height: 7px; width: 30%; left: 35%; bottom: -11px; background: #363430; z-index: -1; }
iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.oeffnen { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.oeffnen:hover { outline: 1px solid var(--akzent); outline-offset: 2px; }
.beschriftung { display: flex; align-items: center; gap: 8px; padding: 16px 0 0; font-size: clamp(8px, .9vw, 13px); color: var(--leise); }
.beschriftung b { padding-left: 7px; font-weight: 400; color: var(--creme); }
.status { margin-left: auto; font-size: .85em; }
.pfeil { color: var(--akzent); font-size: 16px; }
.legende { position: absolute; left: 5%; bottom: 3%; display: flex; gap: 12px; align-items: center; color: var(--leise); font-size: clamp(7px, .85vw, 12px); }
.punkt { width: 5px; height: 5px; background: var(--akzent); border-radius: 50%; }
.fuss { display: flex; gap: 16px; justify-content: space-between; align-items: center; padding: 18px 0 24px; font-size: 11px; color: var(--leise); }
.fuss p { margin: 0; }
.vollbild-leiste { position: fixed; inset: 0 0 auto; height: 68px; z-index: 20; background: var(--boden); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 28px; font-size: 12px; color: var(--leise); border-bottom: 1px solid #484540; }
.vollbild-leiste[hidden] { display: none; }
.vollbild-leiste button { padding: 12px; border: 1px solid #484540; background: var(--flaeche); color: var(--creme); }
body.fokus { overflow: hidden; }
body.fokus .kopf, body.fokus .intro, body.fokus .fuss, body.fokus .grundriss, body.fokus .legende, body.fokus .bereich:not(.gross) { visibility: hidden; }
.bereich.gross { position: fixed; inset: 68px 0 0; width: 100%; height: calc(100dvh - 68px); display: flex; justify-content: center; align-items: center; background: var(--boden); z-index: 10; }
.bereich.gross .display { width: min(100vw - 32px, (100dvh - 100px) * 16 / 9); }
.bereich.gross .beschriftung, .bereich.gross .oeffnen, .bereich.gross .display::after { display: none; }
.bereich.gross iframe { pointer-events: auto; }
@media (max-width: 700px) {
  .kopf { padding: 20px 5%; } .edition { display: none; }
  .intro { padding: 26px 0; gap: 16px; } .anleitung { max-width: 42%; padding: 0; }
  .anleitung p { font-size: 13px; } .anleitung span { font-size: 10px; }
  .augenbraue { font-size: 8px; letter-spacing: .07em; }
  .display { border-width: 2px; } .beschriftung { padding-top: 10px; } .status { display: none; }
  .fuss { font-size: 10px; align-items: start; } .fuss span { text-align: right; }
  .vollbild-leiste { padding: 0 12px; gap: 12px; } .vollbild-leiste > span:last-child { display: none; }
}
@media (max-height: 550px) and (orientation: landscape) {
  .kopf { padding-top: 12px; padding-bottom: 12px; } .intro { padding: 18px 0; }
  h1 { font-size: 28px; } .anleitung span { display: none; }
  .vollbild-leiste { height: 52px; } .bereich.gross { top: 52px; height: calc(100dvh - 52px); }
  .bereich.gross .display { width: min(100vw - 24px, (100dvh - 68px) * 16 / 9); }
}

:root { --boden:#0f1c44; --flaeche:#162660; --creme:#eaf3fe; --akzent:#d0e6fd; --leise:#d0e6fd; }
h1 { font-family: Arial, Helvetica, sans-serif; }