:root { color-scheme: dark; --ink: #0e0d0e; --paper: #f8f6f1; --muted: #aaa6ad; --surface: #181619; --surface-2: #232026; --line: #37323a; --purple: #5b1c9f; --purple-light: #9146ff; --purple-border: #5b267c; --orange: #ff812e; --orange-soft: #ffb17d; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: Arial, Helvetica, sans-serif; }
.site-shell { background: linear-gradient(120deg, rgb(91 28 159 / 16%), transparent 32%), var(--ink); min-height: 100svh; padding: 0 1rem 2.25rem; }
.channel-hub { margin: 0 auto; max-width: 72rem; }
.hero { border-bottom: 1px solid var(--line); display: flex; justify-content: flex-start; margin: 0 calc(50% - 50vw) clamp(1.5rem, 3.8vw, 2.8rem); padding: clamp(1rem, 2.4vw, 1.45rem) max(1rem, calc((100vw - 72rem) / 2 + 1rem)); }
.brand-banner { display: block; height: auto; max-width: 100%; width: clamp(17rem, 33vw, 30rem); }
.live-player { aspect-ratio: 16 / 9; margin: 0 auto clamp(2.5rem, 5vw, 4rem); max-width: 58rem; overflow: hidden; width: min(100%, 58rem); }
.live-player iframe { border: 0; display: block; height: 100%; width: 100%; }
.channel-list { display: grid; gap: clamp(3rem, 7vw, 5rem); }
.channel-card { background: transparent; border: 0; display: block; margin-inline: auto; outline: none; overflow: visible; position: relative; transform: rotate(var(--tilt, 0deg)); transition: filter 180ms ease, transform 180ms ease; width: 80%; }
.channel-card-button { cursor: pointer; padding: 0; }
.channel-card:nth-child(odd) { --tilt: -.45deg; }
.channel-card:nth-child(even) { --tilt: .45deg; }
.channel-card img { display: block; filter: drop-shadow(0 .65rem .7rem #0000008c); height: auto; width: 100%; }
.channel-card:hover, .channel-card:focus-visible { filter: drop-shadow(0 0 .7rem rgb(145 70 255 / 58%)); transform: translateY(-.32rem) rotate(0deg); }
.imprint { border-top: 1px solid var(--line); color: var(--muted); display: flex; font-size: .82rem; gap: .5rem 1.5rem; justify-content: space-between; margin: clamp(2.75rem, 7vw, 4.5rem) 0 0; padding: 1.25rem 0 0; }
.imprint p { margin: 0; }
.imprint a { color: var(--paper); font-weight: 700; text-decoration: none; }
.imprint a:hover, .imprint a:focus-visible { color: #fff; }
.booking-dialog { background: var(--surface); border: 1px solid #654872; border-radius: .75rem; color: var(--paper); color-scheme: dark; max-height: min(44rem, calc(100svh - 1.5rem)); max-width: min(28.75rem, calc(100vw - 2rem)); overflow: hidden; padding: 0; width: 100%; }
.booking-dialog::backdrop { background: rgb(0 0 0 / 60%); }
.booking-dialog__content { background: var(--surface); box-shadow: 0 1.25rem 3.75rem rgb(0 0 0 / 60%); padding: 1.2rem; position: relative; }
.booking-dialog h2 { font-size: 1rem; letter-spacing: -.025rem; line-height: 1.25; margin: .15rem 2.5rem 0 0; }
.booking-dialog__intro { color: var(--muted); font-size: .82rem; line-height: 1.5; margin: .85rem 0 0; }
.booking-dialog__close { align-items: center; background: transparent; border: 1px solid #61476e; border-radius: .375rem; color: #d9c9ff; cursor: pointer; display: inline-flex; font-size: 1.1rem; height: 1.7rem; justify-content: center; line-height: 1; position: absolute; right: 1.2rem; top: 1.2rem; width: 1.7rem; }
.booking-dialog__close:hover, .booking-dialog__close:focus-visible { border-color: #e76f6f; color: #ffabab; outline: 0; }
.booking-form { display: grid; gap: .8rem; margin-top: 1.1rem; }
.booking-form__field { display: grid; gap: .35rem; }
.booking-form label { color: var(--orange-soft); font-size: .72rem; font-weight: 800; letter-spacing: .044rem; text-transform: uppercase; }
.booking-form input, .booking-form textarea { background: #121113; border: 1px solid #403648; border-radius: .4375rem; color: var(--paper); font: inherit; font-size: .82rem; min-height: 2.5rem; padding: .6rem .7rem; resize: vertical; width: 100%; }
.booking-form textarea { min-height: 8.5rem; line-height: 1.45; }
.booking-form input:focus, .booking-form textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 .18rem rgb(255 129 46 / 18%); outline: 0; }
.booking-form input[aria-invalid="true"], .booking-form textarea[aria-invalid="true"] { border-color: #ff9ca7; }
.booking-form__error { color: #ffb8c2; font-size: .72rem; line-height: 1.4; margin: 0; min-height: 1em; }
.booking-form__status { color: var(--orange-soft); font-size: .76rem; line-height: 1.4; margin: 0; min-height: 1.4em; }
.booking-form__submit { background: var(--purple-light); border: 0; border-radius: .4375rem; color: #fff; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700; min-height: 2.625rem; padding: .65rem .8rem; width: 100%; }
.booking-form__submit:hover, .booking-form__submit:focus-visible { background: #a661ff; box-shadow: 0 0 .7rem rgb(145 70 255 / 36%); outline: 0; }
.booking-form__trap { height: 0; opacity: 0; overflow: hidden; position: absolute; width: 0; }
@media (max-width: 38rem) { .site-shell { padding-inline: .65rem; } .hero { padding-inline: .65rem; } .brand-banner { width: min(22rem, 100%); } .imprint { align-items: center; flex-direction: column; text-align: center; } }
@media (max-width: 38rem) { .booking-dialog { max-height: calc(100svh - .75rem); max-width: calc(100vw - 1rem); } .booking-dialog__content { padding: 1rem; } .booking-dialog__close { font-size: 1.25rem; height: 2.75rem; right: 1rem; top: 1rem; width: 2.75rem; } .booking-dialog h2 { font-size: 1.05rem; margin-right: 3.25rem; } .booking-dialog__intro { font-size: .9rem; } .booking-form label { font-size: .75rem; } .booking-form input, .booking-form textarea { font-size: 1rem; min-height: 2.75rem; } .booking-form textarea { min-height: 10rem; } .booking-form__error, .booking-form__status { font-size: .82rem; } .booking-form__submit { font-size: 1rem; min-height: 2.75rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }