/* Lokal ausgeliefert statt über Google Fonts: keine Übertragung der
   Besucher-IP an Dritte, und die Seite bleibt ohne Fremd-Hosts lauffähig. */
@font-face {
  font-family: "Comic Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/comic-neue-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Comic Neue";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/comic-neue-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --canvas: #eaf6ff;
  --sky: #7fc4ee;
  --sky-deep: #2f709d;
  --ink: #24475f;
  --muted: #6b8799;
  --line: rgba(66, 128, 168, .18);
  --live: #d95d4c;

  --glow-a: rgba(180, 224, 249, .72);
  --glow-b: rgba(112, 190, 235, .3);
  --grid-line: rgba(63, 132, 176, .045);
  --grid-opacity: .45;

  --card-bg: rgba(251, 253, 255, .8);
  --card-border: rgba(255, 255, 255, .72);
  --card-shadow: 0 32px 80px rgba(53, 121, 163, .17);
  --card-inset: inset 0 1px 0 rgba(255, 255, 255, .85);
  --chip-bg: rgba(251, 253, 255, .75);

  --frame: #102536;
  --dot-idle: #c29a49;
  --dot-idle-ring: rgba(194, 154, 73, .13);
  --dot-live: #64b5e5;
  --brand-mark-ink: #f3fbff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0d1b26;
    --sky: #3f7ba3;
    --sky-deep: #9dd3f2;
    --ink: #dbeaf6;
    --muted: #8fa9bc;
    --line: rgba(150, 200, 235, .16);
    --live: #e8705f;

    --glow-a: rgba(46, 96, 133, .5);
    --glow-b: rgba(32, 74, 105, .42);
    --grid-line: rgba(140, 190, 226, .05);
    --grid-opacity: .5;

    --card-bg: rgba(22, 42, 58, .72);
    --card-border: rgba(150, 200, 235, .12);
    --card-shadow: 0 32px 80px rgba(0, 0, 0, .45);
    --card-inset: inset 0 1px 0 rgba(190, 225, 248, .07);
    --chip-bg: rgba(22, 42, 58, .7);

    --dot-idle: #d0a95c;
    --dot-idle-ring: rgba(208, 169, 92, .16);
    --dot-live: #6fbfef;
    --brand-mark-ink: #0d1b26;
  }
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", cursive;
  background:
    radial-gradient(circle at 8% 12%, var(--glow-a), transparent 25rem),
    radial-gradient(circle at 92% 88%, var(--glow-b), transparent 31rem),
    var(--canvas);
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: var(--grid-opacity);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.page {
  width: min(1320px, calc(100% - 48px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 24px 0 18px;
}

.topbar,
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar {
  min-height: 52px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--sky-deep);
  font-size: .92rem;
  font-weight: 750;
  letter-spacing: .015em;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 12px;
  background: var(--sky);
  box-shadow: 0 8px 22px rgba(74, 157, 208, .24);
}

.brand-mark i {
  display: block;
  width: 10px;
  height: 10px;
  border: 2px solid var(--brand-mark-ink);
  border-radius: 50%;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 650;
  backdrop-filter: blur(12px);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot-idle);
  box-shadow: 0 0 0 5px var(--dot-idle-ring);
}

.status.is-live {
  color: var(--sky-deep);
}

.status.is-live .status-dot {
  background: var(--dot-live);
  box-shadow: 0 0 0 5px rgba(100, 181, 229, .16);
}

.status.is-offline .status-dot {
  background: var(--live);
  box-shadow: 0 0 0 5px rgba(217, 93, 76, .12);
}

.stream-section {
  padding: clamp(14px, 2vh, 22px) 0 0;
}

h1 {
  margin: 0 0 10px;
  color: var(--sky-deep);
  font-size: clamp(1.5rem, 2.2vw, 2.35rem);
  font-weight: 720;
  line-height: .95;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
}

.player-card {
  padding: clamp(7px, 1vw, 12px);
  border: 1px solid var(--card-border);
  border-radius: 30px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow), var(--card-inset);
  backdrop-filter: blur(18px);
}

.player-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 21px;
  background: var(--frame);
}

video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--frame);
}

.offline {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(146, 209, 246, .2), transparent 28%),
    linear-gradient(145deg, #183e56, #0d2231);
}

.offline[hidden] { display: none; }

.offline-mark {
  position: relative;
  display: grid;
  width: 90px;
  height: 90px;
  place-items: center;
  border: 1px solid rgba(207, 235, 252, .28);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(207, 235, 252, .04), 0 0 0 38px rgba(207, 235, 252, .025);
}

.offline-mark::before,
.offline-mark::after,
.offline-mark span {
  position: absolute;
  display: block;
  content: "";
  border-radius: 50%;
}

.offline-mark::before {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(221, 242, 255, .62);
}

.offline-mark::after {
  width: 10px;
  height: 10px;
  background: #d9f1ff;
}

.offline-mark span {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(221, 242, 255, .22);
  animation: breathe 2.2s ease-in-out infinite;
}

@keyframes breathe {
  50% { transform: scale(1.18); opacity: .35; }
}

.live-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--live);
  color: white;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .12em;
  box-shadow: 0 8px 26px rgba(217, 93, 76, .28);
}

/* Autoplay erzwingt Stummschaltung. Ohne sichtbaren Hinweis findet kaum
   jemand den Weg zum Ton zurück. */
.unmute {
  position: absolute;
  right: 18px;
  bottom: 58px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(16, 37, 54, .82);
  color: #f2fbff;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(8, 24, 38, .35);
}

.unmute[hidden] { display: none; }

.unmute:hover { background: rgba(16, 37, 54, .94); }

.unmute:focus-visible {
  outline: 2px solid #9dd3f2;
  outline-offset: 3px;
}

.unmute-icon {
  width: 15px;
  height: 15px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2fbff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M19 5a9 9 0 0 1 0 14'/%3E%3C/svg%3E") center / contain no-repeat;
}

footer {
  min-height: 54px;
  justify-content: flex-end;
  color: var(--muted);
  font-size: .78rem;
}

@media (max-width: 680px) {
  .page { width: min(100% - 24px, 1320px); padding-top: 14px; }
  .brand > span:last-child { display: none; }
  .stream-section { padding-top: 14px; }
  h1 { margin-bottom: 8px; }
  .player-card { border-radius: 20px; }
  .player-frame { border-radius: 14px; }
  .unmute { right: 12px; bottom: 50px; padding: 8px 13px; font-size: .74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .offline-mark span { animation: none; }
}