* { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: system-ui, sans-serif;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow-x: hidden;
      background: #020814;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -3;
      background:
        linear-gradient(rgba(0, 10, 25, .68), rgba(0, 10, 25, .82)),
        url("background.jpg") center / cover no-repeat;
      animation: backgroundZoom 55s ease-in-out infinite alternate;
      transform-origin: center;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      background: radial-gradient(circle at center, rgba(255,255,255,.04), rgba(0,0,0,.28));
      pointer-events: none;
    }

    #waterParticles {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: .55;
    }

    @keyframes backgroundZoom {
      from { transform: scale(1); }
      to { transform: scale(1.06); }
    }

main,
.top-controls {
      position: relative;
      z-index: 1;
    }

    main {
      width: min(1180px, 94vw);
      padding: 2rem;
      backdrop-filter: blur(3px);
    }

.top-controls {
      position: fixed;
      top: 1rem;
      right: 1rem;
      display: flex;
      align-items: center;
      gap: .6rem;
      z-index: 2;
    }

    .clock {
      font-size: clamp(1rem, 2vw, 1.4rem);
      opacity: .9;
      font-variant-numeric: tabular-nums;
    }

    .hero-title {
      margin-bottom: .75rem;
      text-transform: uppercase;
    }

    .hero-kicker {
      color: #dff6ff;
      font-size: clamp(.78rem, 1.3vw, 1.02rem);
      font-weight: 800;
      letter-spacing: .18em;
      margin-bottom: .15rem;
      opacity: .92;
    }

    h1 {
      font-size: clamp(2.8rem, 7.5vw, 6.4rem);
      line-height: .9;
      margin: 0;
      font-weight: 950;
      letter-spacing: .055em;
      color: #ffffff;
      text-shadow:
        0 0 12px rgba(255, 255, 255, .28),
        0 0 34px rgba(120, 210, 255, .32),
        0 0 30px rgba(0, 0, 0, .72);
    }

    .hero-subline {
      margin-top: .45rem;
      color: rgba(255,255,255,.9);
      font-size: clamp(.9rem, 1.7vw, 1.22rem);
      font-weight: 800;
      letter-spacing: .08em;
    }

    .hero-final {
      display: inline-block;
      margin-top: .7rem;
      padding: .42rem .8rem;
      border: 1px solid rgba(120, 210, 255, .42);
      border-radius: 999px;
      background: rgba(120, 210, 255, .12);
      color: #dff6ff;
      font-size: clamp(.78rem, 1.3vw, .98rem);
      font-weight: 900;
      letter-spacing: .11em;
      text-transform: uppercase;
      text-shadow: 0 0 14px rgba(120, 210, 255, .25);
    }

    .subtitle {
      font-size: clamp(1rem, 2vw, 1.5rem);
      opacity: .85;
      margin-bottom: 2rem;
    }

    .timer {
      font-size: clamp(2.8rem, 10vw, 8rem);
      font-weight: 900;
      letter-spacing: .04em;
      color: #ffffff;
      text-shadow:
        0 0 12px rgba(255, 255, 255, .35),
        0 0 28px rgba(120, 210, 255, .28),
        0 0 55px rgba(255, 220, 90, .18),
        0 0 30px rgba(0, 0, 0, .85);
      animation: timerGlow 4s ease-in-out infinite alternate;
    }

    @keyframes timerGlow {
      from {
        text-shadow:
          0 0 10px rgba(255, 255, 255, .25),
          0 0 22px rgba(120, 210, 255, .18),
          0 0 45px rgba(255, 220, 90, .12),
          0 0 30px rgba(0, 0, 0, .85);
      }

      to {
        text-shadow:
          0 0 16px rgba(255, 255, 255, .45),
          0 0 36px rgba(120, 210, 255, .32),
          0 0 70px rgba(255, 220, 90, .22),
          0 0 30px rgba(0, 0, 0, .85);
      }
    }

    .labels {
      display: flex;
      justify-content: center;
      gap: 2rem;
      opacity: .75;
      margin-bottom: 2rem;
    }

    .buttons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: .7rem;
      margin-bottom: 1.5rem;
    }

button {
      border: 1px solid rgba(255,255,255,.35);
      background: rgba(255,255,255,.14);
      color: white;
      padding: .75rem 1rem;
      border-radius: 999px;
      cursor: pointer;
      font-weight: 700;
      backdrop-filter: blur(6px);
      transition: all .15s ease;
      font: inherit;
      line-height: 1.2;
    }

    button:hover,
    button.active,
    button[aria-pressed="true"] {
      background: rgba(255,255,255,.32);
    }

    button:focus-visible,
    .nrw-downloads button:focus-visible {
      outline: 3px solid rgba(255, 220, 90, .85);
      outline-offset: 3px;
    }

    button.gold-button {
      background: rgba(255, 220, 90, 0.18);
      border: 1px solid rgba(255, 220, 90, 0.35);
      color: #fff8d6;
    }

button.gold-button:hover,
    button.gold-button.active,
    button.gold-button[aria-pressed="true"] {
      background: rgba(255, 220, 90, 0.32);
    }

    button.nrw-button {
      background: rgba(120, 210, 255, 0.18);
      border: 1px solid rgba(120, 210, 255, 0.4);
      color: #dff6ff;
    }

button.nrw-button:hover,
    button.nrw-button.active,
    button.nrw-button[aria-pressed="true"] {
      background: rgba(120, 210, 255, 0.34);
    }

    .music-toggle {
      min-width: 6.6rem;
      padding: .55rem .8rem;
      font-size: .86rem;
      background: rgba(0, 0, 0, .34);
      border-color: rgba(255, 255, 255, .26);
      color: rgba(255, 255, 255, .9);
    }

    .music-toggle.is-playing {
      background: rgba(255, 220, 90, .24);
      border-color: rgba(255, 220, 90, .48);
      color: #fff8d6;
    }

.panel {
      max-width: 1100px;
      margin: 0 auto;
      padding: 1rem 1.2rem;
      background: rgba(0,0,0,.38);
      border: 1px solid rgba(255,255,255,.18);
      border-radius: .75rem;
      text-align: left;
    }

    .content-panel {
      margin-top: 1rem;
    }

    .panel[hidden] {
      display: none;
    }

    .panel h2 {
      margin-top: 0;
      text-align: center;
    }

    .motivation-big {
      text-align: center;
      font-size: clamp(0.95rem, 1.6vw, 1.5rem);
      font-weight: 900;
      line-height: 1.4;
      padding: 1rem;
    }

    .fade { animation: fadeText 0.8s ease; }

    @keyframes fadeText {
      0% { opacity: 0; transform: translateY(8px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    .event {
      display: grid;
      grid-template-columns: 4rem 1fr;
      gap: .7rem;
      padding: .35rem 0;
      border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .event:last-child { border-bottom: 0; }

    .day-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
      gap: .7rem;
      text-align: center;
    }

    .wk {
      opacity: .75;
      font-weight: 700;
    }

    .bestzeiten {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
      gap: .7rem;
      text-align: center;
    }

.timecard {
      background: rgba(255, 220, 90, 0.18);
      border: 1px solid rgba(255, 220, 90, 0.35);
      border-radius: .5rem;
      padding: .8rem;
      backdrop-filter: blur(4px);
      transition: transform .15s ease;
      cursor: pointer;
    }

    .timecard:hover { transform: translateY(-2px); }


button.timecard {
      width: 100%;
      text-align: center;
      display: block;
      font: inherit;
      border-radius: .5rem;
      padding: .8rem;
    }

    button.timecard:hover {
      background: rgba(255, 220, 90, 0.24);
    }

    .timecard.nrw-card {
      background: rgba(120, 210, 255, 0.16);
      border-color: rgba(120, 210, 255, 0.38);
    }

    .discipline {
      opacity: .85;
      font-size: .95rem;
      color: #ffe082;
      margin-bottom: .2rem;
    }

    .best {
      font-size: 1rem;
      font-weight: 900;
      color: #fff8d6;
      text-shadow: 0 0 10px rgba(255, 220, 90, .35);
      line-height: 1.35;
    }

    button.timecard.day-card {
      background: transparent !important;
      border-color: rgba(255,255,255,.28) !important;
    }

    button.timecard.day-card:hover {
      background: rgba(255,255,255,.12) !important;
    }

    .timecard.day-card .discipline,
    .timecard.day-card .best {
      color: #ffffff;
      text-shadow: none;
    }

    .race-day {
      margin-top: .35rem;
      font-size: .85rem;
      font-weight: 800;
      color: #dff6ff;
      opacity: .85;
    }


    .time-result-button {
      border: 0;
      background: transparent;
      color: inherit;
      padding: 0;
      border-radius: 0;
      font: inherit;
      font-weight: 900;
      text-decoration: underline;
      text-underline-offset: .18rem;
      cursor: pointer;
      backdrop-filter: none;
    }

    .time-result-button:hover {
      background: transparent;
      color: #fff8d6;
      text-shadow: 0 0 10px rgba(255, 220, 90, .45);
    }

    .race-table {
      width: 100%;
      border-collapse: collapse;
      font-size: .9rem;
    }

    .race-table th,
    .race-table td {
      padding: .45rem .5rem;
      border-bottom: 1px solid rgba(255,255,255,.12);
      white-space: nowrap;
    }

    .race-table th {
      color: #ffe082;
      text-align: left;
    }

    .race-table .simon-row {
      background: rgba(255, 220, 90, .22);
      color: #fff8d6;
      font-weight: 900;
    }

    .progress-best {
      background: rgba(255, 220, 90, .24);
      color: #fff8d6;
      font-weight: 900;
    }

    .small-note {
      text-align: center;
      opacity: .75;
      margin-bottom: 1rem;
    }

    .quali-full-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.2rem;
    }

    .quali-table-box { overflow-x: auto; }

    .quali-table-box h3 {
      text-align: center;
      color: #ffe082;
      margin-top: 0;
    }

    .quali-table {
      width: 100%;
      border-collapse: collapse;
      font-size: .86rem;
    }

    .quali-table th,
    .quali-table td {
      padding: .35rem .45rem;
      border-bottom: 1px solid rgba(255,255,255,.12);
      text-align: right;
      white-space: nowrap;
    }

    .quali-table th:first-child,
    .quali-table td:first-child {
      text-align: left;
      font-weight: 800;
    }

    .quali-table .highlight-col {
      background: rgba(255, 220, 90, 0.22);
      color: #fff8d6;
      font-weight: 900;
    }

    
    .nrw-downloads {
      display: flex;
      gap: .8rem;
      justify-content: center;
      margin-bottom: 1.2rem;
      flex-wrap: wrap;
    }

    .nrw-downloads button {
      display: inline-block;
      padding: .7rem 1rem;
      border-radius: 999px;
      font-weight: 800;
      color: white;
      background: rgba(120, 210, 255, 0.18);
      border: 1px solid rgba(120, 210, 255, 0.38);
      transition: all .15s ease;
    }

    .nrw-downloads button:hover {
      background: rgba(120, 210, 255, 0.34);
    }


    @media (max-width: 1000px) {
      .quali-full-grid { grid-template-columns: 1fr; }
    }

@media (max-width: 700px) {
      .top-controls {
        top: .65rem;
        right: .65rem;
        gap: .45rem;
      }

      .music-toggle {
        min-width: auto;
        padding: .5rem .65rem;
      }

      .timer {
        font-size: clamp(2.45rem, 13vw, 4.2rem);
        letter-spacing: .02em;
      }

      h1 {
        font-size: clamp(2.6rem, 15vw, 4.2rem);
        letter-spacing: .035em;
      }

      .hero-kicker,
      .hero-subline,
      .hero-final {
        letter-spacing: .08em;
      }

      .hero-title {
        margin-bottom: .95rem;
      }

      .labels {
        gap: 1rem;
        font-size: .9rem;
      }

      main { padding: 1rem; }
      .panel { padding: .9rem; }
    }

    @media (max-width: 480px) {
      .buttons {
        gap: .45rem;
      }

      .buttons button {
        padding: .62rem .72rem;
        font-size: .9rem;
      }

      .labels {
        justify-content: space-between;
        gap: .35rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }

      #waterParticles {
        display: none;
      }
    }


    .simon-event-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: .8rem;
      margin: 1rem 0 1.25rem;
      text-align: center;
    }

    button.simon-event-card {
      min-height: 8.7rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-color: rgba(255, 220, 90, .48);
      background:
        linear-gradient(145deg, rgba(255, 220, 90, .24), rgba(120, 210, 255, .13));
    }

    button.simon-event-card:hover {
      background:
        linear-gradient(145deg, rgba(255, 220, 90, .34), rgba(120, 210, 255, .2));
    }

    .schedule-heading {
      margin: 1.2rem 0 .65rem;
      text-align: center;
      color: #dff6ff;
    }

    .djm-entry-table td:nth-child(2),
    .djm-entry-table td:nth-child(4) {
      white-space: normal;
    }