/* =====================================================================
   Turnier-App Schritt 3.18 – Premium-Design für die komplette Website
   ===================================================================== */

:root {
  --site-premium-blue: #175cd3;
  --site-premium-cyan: #0f7fa7;
  --site-premium-green: #0d8b68;
  --site-premium-violet: #7357df;
  --site-premium-orange: #d96418;
  --site-premium-red: #c4322a;
  --site-premium-ink: #132a44;
  --site-premium-soft-ink: #50647a;
  --site-premium-card: rgba(255, 255, 255, 0.94);
  --site-premium-glass: rgba(255, 255, 255, 0.82);
  --site-premium-line: rgba(18, 58, 99, 0.10);
  --site-premium-shadow:
    0 22px 56px rgba(20, 61, 98, 0.13);
  --site-premium-shadow-strong:
    0 32px 84px rgba(15, 54, 88, 0.18);
  --site-premium-radius: 24px;
  --site-premium-radius-small: 16px;
}

body.premium-site .hidden {
  display: none !important;
}

body.premium-site:not(.personal-profile-page) {
  --premium-accent: var(--site-premium-blue);
  --premium-accent-2: var(--site-premium-cyan);
  --premium-accent-soft: #eaf3ff;
  --premium-hero-start: #0c2947;
  --premium-hero-middle: #164f7c;
  --premium-hero-end: #08735d;

  position: relative;
  isolation: isolate;
  color: var(--text);
  background:
    radial-gradient(
      circle at 5% 10%,
      color-mix(in srgb, var(--premium-accent) 15%, transparent),
      transparent 28rem
    ),
    radial-gradient(
      circle at 95% 36%,
      color-mix(in srgb, var(--premium-accent-2) 14%, transparent),
      transparent 30rem
    ),
    linear-gradient(
      180deg,
      #edf5fb 0,
      var(--background) 520px
    );
}

body.premium-site[data-premium-area="admin"] {
  --premium-accent: #7357df;
  --premium-accent-2: #315fc6;
  --premium-accent-soft: #f0edff;
  --premium-hero-start: #1b1645;
  --premium-hero-middle: #463690;
  --premium-hero-end: #155f86;
}

body.premium-site[data-premium-area="football"] {
  --premium-accent: #0b8f68;
  --premium-accent-2: #1769aa;
  --premium-accent-soft: #e7faf3;
  --premium-hero-start: #0b2f37;
  --premium-hero-middle: #08745b;
  --premium-hero-end: #145788;
}

body.premium-site[data-premium-area="volleyball"] {
  --premium-accent: #d7651e;
  --premium-accent-2: #7157db;
  --premium-accent-soft: #fff0e7;
  --premium-hero-start: #421e17;
  --premium-hero-middle: #a3421f;
  --premium-hero-end: #5d43a8;
}

body.premium-site[data-premium-area="referee"] {
  --premium-accent: #0d8c82;
  --premium-accent-2: #1769aa;
  --premium-accent-soft: #e5faf7;
  --premium-hero-start: #0a2737;
  --premium-hero-middle: #075f68;
  --premium-hero-end: #194f8b;
}

body.premium-site[data-premium-area="scoreboard"] {
  --premium-accent: #0da776;
  --premium-accent-2: #1567a8;
  --premium-accent-soft: #e4faf2;
  --premium-hero-start: #071c2d;
  --premium-hero-middle: #0a4f5d;
  --premium-hero-end: #0b7659;
}

body.premium-site[data-premium-area="account"] {
  --premium-accent: #7357df;
  --premium-accent-2: #0e8e72;
  --premium-accent-soft: #f0edff;
  --premium-hero-start: #1d1749;
  --premium-hero-middle: #4a3b9e;
  --premium-hero-end: #08725d;
}

body.premium-site:not(.personal-profile-page)::before,
body.premium-site:not(.personal-profile-page)::after {
  position: fixed;
  z-index: -1;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  content: "";
  filter: blur(90px);
  opacity: 0.42;
  pointer-events: none;
}

body.premium-site:not(.personal-profile-page)::before {
  top: 140px;
  left: -220px;
  background:
    color-mix(
      in srgb,
      var(--premium-accent) 35%,
      transparent
    );
}

body.premium-site:not(.personal-profile-page)::after {
  right: -220px;
  bottom: 80px;
  background:
    color-mix(
      in srgb,
      var(--premium-accent-2) 30%,
      transparent
    );
}

/* ---------------------------------------------------------------------
   Globaler Premium-Kopf
   --------------------------------------------------------------------- */

body.premium-site:not(.personal-profile-page)
  .site-header {
  position: relative;
  min-height: 210px;
  padding-top:
    max(
      34px,
      env(safe-area-inset-top)
    );
  padding-bottom: 76px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 83% -45%,
      rgba(255, 255, 255, 0.38),
      transparent 45%
    ),
    radial-gradient(
      circle at 12% 145%,
      rgba(75, 237, 184, 0.29),
      transparent 48%
    ),
    linear-gradient(
      125deg,
      var(--premium-hero-start) 0%,
      var(--premium-hero-middle) 53%,
      var(--premium-hero-end) 120%
    );
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.10);
}

body.premium-site:not(.personal-profile-page)
  .site-header::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    );
  background-size: 36px 36px;
  content: "";
  mask-image:
    linear-gradient(
      to bottom,
      #000,
      transparent 92%
    );
  pointer-events: none;
}

body.premium-site:not(.personal-profile-page)
  .site-header > * {
  position: relative;
  z-index: 2;
}

body.premium-site:not(.personal-profile-page)
  .site-header > div:first-child {
  max-width: 720px;
}

body.premium-site:not(.personal-profile-page)
  .site-header h1 {
  margin: 0;
  color: #fff;
  font-size:
    clamp(
      2rem,
      5vw,
      3.3rem
    );
  letter-spacing: -0.045em;
  line-height: 1.03;
  text-wrap: balance;
}

body.premium-site:not(.personal-profile-page)
  .site-header .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

body.premium-site:not(.personal-profile-page)
  .site-header .subtitle {
  max-width: 640px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.91rem;
  line-height: 1.55;
}

.premium-header-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.premium-header-chip > span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  font-size: 0.7rem;
}

.premium-header-decoration {
  position: absolute !important;
  z-index: 1 !important;
  right: max(30px, calc((100% - 1100px) / 2));
  bottom: -118px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  box-shadow:
    0 0 0 42px rgba(255, 255, 255, 0.025),
    0 0 0 84px rgba(255, 255, 255, 0.018);
  pointer-events: none;
}

body.premium-site:not(.personal-profile-page)
  .site-header
  :is(
    .header-actions,
    .public-role-nav
  ) {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ---------------------------------------------------------------------
   Hauptlayout, Karten und Animationen
   --------------------------------------------------------------------- */

body.premium-site:not(.personal-profile-page)
  .page {
  position: relative;
  z-index: 5;
  width:
    min(
      1180px,
      calc(100% - 34px)
    );
  margin-top: -48px;
  padding-top: 0;
  padding-bottom: 60px;
}

body.premium-site:not(.personal-profile-page)
  .panel,
body.premium-site:not(.personal-profile-page)
  .wizard-shell,
body.premium-site:not(.personal-profile-page)
  .referee-match-status-section,
body.premium-site:not(.personal-profile-page)
  .spectator-overview-section,
body.premium-site:not(.personal-profile-page)
  .spectator-detail-section,
body.premium-site:not(.personal-profile-page)
  .referee-sport-tournament-section {
  border: 1px solid var(--site-premium-line);
  border-radius: var(--site-premium-radius);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.97),
      rgba(250, 253, 255, 0.94)
    );
  box-shadow: var(--site-premium-shadow);
}

body.premium-site:not(.personal-profile-page)
  .panel {
  padding:
    clamp(
      20px,
      3vw,
      28px
    );
}

body.premium-site:not(.personal-profile-page)
  .premium-reveal {
  opacity: 0;
  transform: translateY(18px);
}

body.premium-site.premium-page-loaded:not(.personal-profile-page)
  .premium-reveal {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 430ms ease,
    transform 520ms
      cubic-bezier(
        0.2,
        0.8,
        0.2,
        1
      );
  transition-delay:
    calc(
      var(--premium-reveal-index, 0)
      * 32ms
    );
}

body.premium-site:not(.personal-profile-page)
  .section-heading {
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 20px;
}

body.premium-site:not(.personal-profile-page)
  .section-heading h2,
body.premium-site:not(.personal-profile-page)
  .section-heading h3 {
  color: var(--site-premium-ink);
  letter-spacing: -0.03em;
}

body.premium-site:not(.personal-profile-page)
  .section-heading h2 {
  font-size:
    clamp(
      1.25rem,
      3vw,
      1.75rem
    );
}

body.premium-site:not(.personal-profile-page)
  .section-support-copy {
  max-width: 670px;
  color: var(--site-premium-soft-ink);
  font-size: 0.74rem;
  line-height: 1.5;
}

body.premium-site:not(.personal-profile-page)
  .eyebrow {
  color:
    color-mix(
      in srgb,
      var(--premium-accent) 80%,
      var(--site-premium-ink)
    );
  font-size: 0.66rem;
  letter-spacing: 0.11em;
}

body.premium-site:not(.personal-profile-page)
  .counter,
body.premium-site:not(.personal-profile-page)
  .sport-badge,
body.premium-site:not(.personal-profile-page)
  .qualification-badge {
  border: 1px solid
    color-mix(
      in srgb,
      var(--premium-accent) 18%,
      transparent
    );
  color:
    color-mix(
      in srgb,
      var(--premium-accent) 85%,
      #10283f
    );
  background:
    color-mix(
      in srgb,
      var(--premium-accent-soft) 78%,
      #fff
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  font-weight: 900;
}

body.premium-site:not(.personal-profile-page)
  .counter {
  min-height: 30px;
  padding-inline: 11px;
  border-radius: 999px;
  font-size: 0.64rem;
}

/* ---------------------------------------------------------------------
   Buttons, Felder, Schalter und Meldungen
   --------------------------------------------------------------------- */

body.premium-site:not(.personal-profile-page)
  .button {
  min-height: 45px;
  padding: 10px 15px;
  border-radius: 13px;
  font-size: 0.71rem;
  font-weight: 900;
  letter-spacing: -0.005em;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    border-color 150ms ease,
    background 150ms ease;
}

body.premium-site:not(.personal-profile-page)
  .button:hover:not(:disabled) {
  transform: translateY(-2px);
}

body.premium-site:not(.personal-profile-page)
  .button-primary {
  border-color: transparent;
  color: #fff;
  background:
    linear-gradient(
      125deg,
      var(--premium-accent),
      var(--premium-accent-2)
    );
  box-shadow:
    0 12px 25px
      color-mix(
        in srgb,
        var(--premium-accent) 25%,
        transparent
      );
}

body.premium-site:not(.personal-profile-page)
  .button-primary:hover:not(:disabled) {
  box-shadow:
    0 17px 31px
      color-mix(
        in srgb,
        var(--premium-accent) 32%,
        transparent
      );
}

body.premium-site:not(.personal-profile-page)
  .button-secondary {
  color: var(--site-premium-ink);
  border-color: rgba(18, 58, 99, 0.12);
  background: rgba(255, 255, 255, 0.84);
  box-shadow:
    0 8px 18px rgba(18, 58, 99, 0.07);
}

body.premium-site:not(.personal-profile-page)
  .site-header .button-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: none;
  backdrop-filter: blur(10px);
}

body.premium-site:not(.personal-profile-page)
  .site-header .button-primary {
  color: #103529;
  background:
    linear-gradient(
      145deg,
      #d9fff1,
      #79e2bb
    );
  box-shadow:
    0 13px 29px rgba(0, 0, 0, 0.18);
}

body.premium-site:not(.personal-profile-page)
  :is(
    input,
    select,
    textarea
  ) {
  min-height: 50px;
  padding-inline: 14px;
  border: 1px solid #d7e0e9;
  border-radius: 13px;
  color: var(--site-premium-ink);
  background: #f8fbfd;
  box-shadow:
    inset 0 1px 2px
      rgba(18, 58, 99, 0.035);
  outline: none;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

body.premium-site:not(.personal-profile-page)
  textarea {
  min-height: 110px;
  padding-block: 12px;
}

body.premium-site:not(.personal-profile-page)
  :is(
    input,
    select,
    textarea
  ):focus {
  border-color:
    color-mix(
      in srgb,
      var(--premium-accent) 70%,
      #fff
    );
  background: #fff;
  box-shadow:
    0 0 0 4px
      color-mix(
        in srgb,
        var(--premium-accent) 12%,
        transparent
      );
}

body.premium-site:not(.personal-profile-page)
  label {
  color: #43566c;
  font-size: 0.72rem;
  font-weight: 850;
}

body.premium-site:not(.personal-profile-page)
  .checkbox-line,
body.premium-site:not(.personal-profile-page)
  .feature-switch,
body.premium-site:not(.personal-profile-page)
  .football-halftime-toggle {
  padding: 13px 15px;
  border: 1px solid rgba(18, 58, 99, 0.10);
  border-radius: 15px;
  background: #f8fbfd;
}

body.premium-site:not(.personal-profile-page)
  .notice {
  padding: 15px 17px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--premium-accent) 16%,
      #dbe4ec
    );
  border-radius: 16px;
  color: #40556b;
  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--premium-accent-soft) 55%,
        #fff
      ),
      #fff
    );
  box-shadow:
    inset 4px 0 0
      color-mix(
        in srgb,
        var(--premium-accent) 70%,
        #fff
      );
}

body.premium-site:not(.personal-profile-page)
  .form-message {
  border-radius: 12px;
}

body.premium-site:not(.personal-profile-page)
  .empty-state,
body.premium-site:not(.personal-profile-page)
  .spectator-status-empty,
body.premium-site:not(.personal-profile-page)
  .referee-status-empty,
body.premium-site:not(.personal-profile-page)
  .fixture-empty {
  padding: 28px 20px;
  border: 1px dashed
    color-mix(
      in srgb,
      var(--premium-accent) 24%,
      #d7e1ea
    );
  border-radius: 19px;
  color: #687b8f;
  background:
    linear-gradient(
      145deg,
      #f8fbfd,
      #fff
    );
  text-align: center;
}

body.premium-site:not(.personal-profile-page)
  .empty-icon {
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0 auto 12px;
  place-items: center;
  border-radius: 20px;
  background:
    color-mix(
      in srgb,
      var(--premium-accent-soft) 75%,
      #fff
    );
  box-shadow:
    0 12px 24px rgba(18, 58, 99, 0.08);
  font-size: 1.55rem;
}

body.premium-site:not(.personal-profile-page)
  details {
  border-radius: 17px;
}

/* ---------------------------------------------------------------------
   Startseite / Zuschauer-Katalog
   --------------------------------------------------------------------- */

body.premium-site.spectator-catalogue-page
  .spectator-catalogue-layout {
  display: grid;
  gap: 25px;
}

body.premium-site
  .spectator-catalogue-layout
  > section:first-child {
  padding:
    clamp(
      22px,
      4vw,
      32px
    );
  border: 1px solid var(--site-premium-line);
  border-radius: 27px;
  background: var(--site-premium-card);
  box-shadow: var(--site-premium-shadow-strong);
}

body.premium-site
  .spectator-tournament-grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(260px, 1fr)
    );
  gap: 17px;
}

body.premium-site
  .spectator-tournament-card {
  position: relative;
  display: grid;
  gap: 16px;
  min-height: 230px;
  padding: 20px;
  border: 1px solid rgba(18, 58, 99, 0.10);
  border-radius: 21px;
  color: var(--site-premium-ink);
  background:
    radial-gradient(
      circle at 100% 0,
      color-mix(
        in srgb,
        var(--premium-accent) 13%,
        transparent
      ),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #fff,
      #f8fbfd
    );
  box-shadow:
    0 15px 36px rgba(18, 58, 99, 0.10);
  text-decoration: none;
  overflow: hidden;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

body.premium-site
  .spectator-tournament-card::after {
  position: absolute;
  right: -42px;
  bottom: -70px;
  width: 150px;
  height: 150px;
  border: 18px solid
    color-mix(
      in srgb,
      var(--premium-accent) 7%,
      transparent
    );
  border-radius: 999px;
  content: "";
}

body.premium-site
  .spectator-tournament-card:hover {
  transform: translateY(-5px);
  border-color:
    color-mix(
      in srgb,
      var(--premium-accent) 28%,
      transparent
    );
  box-shadow:
    0 24px 50px
      color-mix(
        in srgb,
        var(--premium-accent) 15%,
        rgba(18, 58, 99, 0.12)
      );
}

body.premium-site
  .spectator-tournament-card-topline {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

body.premium-site
  .spectator-tournament-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--site-premium-ink);
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}

body.premium-site
  .spectator-tournament-card p {
  position: relative;
  z-index: 1;
  color: #64768a;
  line-height: 1.5;
}

body.premium-site
  .spectator-tournament-state {
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--premium-accent);
  background: var(--premium-accent-soft);
  font-size: 0.61rem;
  font-weight: 900;
}

body.premium-site
  .spectator-tournament-basics {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
}

body.premium-site
  .spectator-tournament-basics > span {
  padding: 9px 10px;
  border: 1px solid rgba(18, 58, 99, 0.08);
  border-radius: 12px;
  color: #586b80;
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.63rem;
}

body.premium-site
  .spectator-tournament-open {
  position: relative;
  z-index: 1;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--premium-accent);
  font-size: 0.69rem;
  font-weight: 900;
}

body.premium-site
  .past-tournaments-section {
  padding: 10px;
  border: 1px solid var(--site-premium-line);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--site-premium-shadow);
  backdrop-filter: blur(14px);
}

body.premium-site
  .past-tournaments-section > summary {
  min-height: 58px;
  padding: 12px 15px;
  border-radius: 14px;
  color: var(--site-premium-ink);
  cursor: pointer;
}

/* ---------------------------------------------------------------------
   Admin-Wizard und Verwaltung
   --------------------------------------------------------------------- */

body.premium-site.admin-wizard-page
  .admin-layout {
  width:
    min(
      1220px,
      calc(100% - 34px)
    );
}

body.premium-site
  .wizard-shell {
  display: grid;
  grid-template-columns:
    235px
    minmax(0, 1fr);
  gap: 20px;
  padding: 13px;
  overflow: visible;
}

body.premium-site
  .wizard-progress {
  position: sticky;
  top: 16px;
  display: grid;
  align-self: start;
  gap: 5px;
  padding: 9px;
  border: 1px solid rgba(18, 58, 99, 0.08);
  border-radius: 18px;
  background: #f6f8fc;
}

body.premium-site
  .wizard-progress button {
  display: grid;
  grid-template-columns:
    36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 55px;
  padding: 8px 10px;
  border: 0;
  border-radius: 13px;
  color: #718094;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

body.premium-site
  .wizard-progress button span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  color: #6c7b8d;
  background: #e8edf3;
  font-weight: 950;
}

body.premium-site
  .wizard-progress button strong {
  font-size: 0.68rem;
}

body.premium-site
  .wizard-progress button.active {
  color: #fff;
  background:
    linear-gradient(
      125deg,
      var(--premium-accent),
      var(--premium-accent-2)
    );
  box-shadow:
    0 12px 25px
      color-mix(
        in srgb,
        var(--premium-accent) 20%,
        transparent
      );
}

body.premium-site
  .wizard-progress button.active span {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

body.premium-site
  #tournament-wizard {
  min-width: 0;
}

body.premium-site
  .wizard-step {
  min-height: 470px;
  margin: 0;
  border-radius: 20px;
  box-shadow: none;
}

body.premium-site
  .admin-sport-choice {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

body.premium-site
  .admin-sport-choice label {
  min-height: 90px;
}

body.premium-site
  .admin-sport-choice label span {
  display: grid;
  min-height: 90px;
  place-items: center;
  border: 1px solid rgba(18, 58, 99, 0.10);
  border-radius: 17px;
  color: var(--site-premium-ink);
  background: #f8fbfd;
  font-size: 1rem;
  font-weight: 900;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

body.premium-site
  .admin-sport-choice input:checked + span {
  color: #fff;
  border-color: transparent;
  background:
    linear-gradient(
      125deg,
      var(--premium-accent),
      var(--premium-accent-2)
    );
  box-shadow:
    0 15px 30px
      color-mix(
        in srgb,
        var(--premium-accent) 22%,
        transparent
      );
}

body.premium-site
  .wizard-option-grid {
  gap: 13px;
}

body.premium-site
  .wizard-option-card {
  min-height: 118px;
  padding: 17px;
  border: 1px solid rgba(18, 58, 99, 0.10);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      #f8fbfd,
      #fff
    );
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

body.premium-site
  .wizard-option-card:hover {
  transform: translateY(-3px);
  border-color:
    color-mix(
      in srgb,
      var(--premium-accent) 25%,
      transparent
    );
  box-shadow:
    0 15px 30px rgba(18, 58, 99, 0.10);
}

body.premium-site
  .wizard-navigation {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 15px;
  padding: 14px;
  border: 1px solid rgba(18, 58, 99, 0.08);
  border-radius: 17px;
  background: rgba(248, 251, 253, 0.92);
}

body.premium-site
  .admin-list {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(290px, 1fr)
    );
  gap: 16px;
}

body.premium-site
  .admin-item {
  position: relative;
  min-height: 190px;
  padding: 20px;
  border: 1px solid rgba(18, 58, 99, 0.09);
  border-radius: 20px;
  background:
    radial-gradient(
      circle at 100% 0,
      color-mix(
        in srgb,
        var(--premium-accent) 10%,
        transparent
      ),
      transparent 38%
    ),
    #fff;
  box-shadow:
    0 16px 36px rgba(18, 58, 99, 0.10);
}

body.premium-site
  .admin-item-actions {
  gap: 8px;
}

body.premium-site
  .admin-more-options {
  border: 1px solid rgba(18, 58, 99, 0.08);
  border-radius: 13px;
  background: #f8fbfd;
}

/* ---------------------------------------------------------------------
   Turnierverwaltung und Einstellungen
   --------------------------------------------------------------------- */

body.premium-site
  .tournament-workflow,
body.premium-site
  .referee-quick-nav {
  position: sticky;
  z-index: 30;
  top: 10px;
  display: flex;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--site-premium-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 14px 34px rgba(18, 58, 99, 0.11);
  backdrop-filter: blur(16px);
  overflow-x: auto;
}

body.premium-site
  .tournament-workflow a,
body.premium-site
  .referee-quick-nav a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-width: max-content;
  min-height: 43px;
  padding: 8px 12px;
  border-radius: 12px;
  color: #496076;
  background: #f4f7fa;
  font-size: 0.65rem;
  font-weight: 900;
  text-decoration: none;
}

body.premium-site
  .tournament-workflow a:hover,
body.premium-site
  .referee-quick-nav a:hover {
  color: #fff;
  background:
    linear-gradient(
      125deg,
      var(--premium-accent),
      var(--premium-accent-2)
    );
}

body.premium-site
  .tournament-workflow a span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 8px;
  background: rgba(18, 58, 99, 0.08);
}

body.premium-site
  .tournament-overview-panel,
body.premium-site
  .referee-schedule-tournament-details,
body.premium-site
  .spectator-detail-summary {
  position: relative;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(
      circle at 96% 0,
      rgba(255, 255, 255, 0.20),
      transparent 32%
    ),
    linear-gradient(
      130deg,
      var(--premium-hero-start),
      var(--premium-hero-middle) 58%,
      var(--premium-hero-end)
    );
  box-shadow:
    0 24px 54px
      color-mix(
        in srgb,
        var(--premium-accent) 18%,
        rgba(18, 58, 99, 0.14)
      );
  overflow: hidden;
}

body.premium-site
  :is(
    .tournament-overview-panel,
    .referee-schedule-tournament-details,
    .spectator-detail-summary
  )
  :is(
    h2,
    h3,
    strong,
    .eyebrow,
    p
  ) {
  color: #fff;
}

body.premium-site
  :is(
    .tournament-overview-panel,
    .referee-schedule-tournament-details
  )
  .detail-box {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(10px);
}

body.premium-site
  :is(
    .tournament-overview-panel,
    .referee-schedule-tournament-details
  )
  .detail-box span {
  color: rgba(255, 255, 255, 0.60);
}

body.premium-site
  .tournament-detail-grid {
  gap: 10px;
}

body.premium-site
  .detail-box {
  padding: 14px;
  border: 1px solid rgba(18, 58, 99, 0.08);
  border-radius: 15px;
  background: #f8fbfd;
}

body.premium-site
  .detail-box span {
  color: #7d8da0;
  font-size: 0.6rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body.premium-site
  .detail-box strong {
  color: var(--site-premium-ink);
  font-size: 0.84rem;
}

body.premium-site
  .collapsible-section {
  overflow: hidden;
}

body.premium-site
  .collapsible-section-toggle {
  min-height: 74px;
  padding: 16px 20px;
  border: 0;
  color: var(--site-premium-ink);
  background:
    linear-gradient(
      180deg,
      #fff,
      #f8fbfd
    );
}

body.premium-site
  .collapsible-title {
  font-size: 1.1rem;
  letter-spacing: -0.025em;
}

body.premium-site
  .collapsible-section-content {
  border-top: 1px solid rgba(18, 58, 99, 0.08);
}

body.premium-site
  .collapsible-subsection {
  padding:
    clamp(
      18px,
      3vw,
      25px
    );
}

body.premium-site
  .team-form {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  gap: 10px;
  align-items: end;
}

body.premium-site
  .team-list,
body.premium-site
  .people-admin-team-list {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(250px, 1fr)
    );
  gap: 12px;
}

body.premium-site
  .playing-field-card,
body.premium-site
  .group-card {
  border: 1px solid rgba(18, 58, 99, 0.09);
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 13px 28px rgba(18, 58, 99, 0.08);
}

body.premium-site
  .playing-field-name,
body.premium-site
  .group-card-heading {
  color: var(--site-premium-ink);
  background:
    linear-gradient(
      135deg,
      var(--premium-accent-soft),
      #fff
    );
}

body.premium-site
  .tournament-settings-layout
  #tournament-settings-form {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 18px;
}

body.premium-site
  .tournament-settings-layout
  #tournament-settings-form
  > :first-child,
body.premium-site
  .tournament-settings-layout
  #tournament-settings-form
  > :last-child {
  grid-column: 1 / -1;
}

body.premium-site
  .settings-more-details {
  margin-top: 14px;
  border: 1px solid rgba(18, 58, 99, 0.09);
  background: #f8fbfd;
}

body.premium-site
  .settings-more-details > summary {
  min-height: 55px;
  padding: 12px 15px;
  color: var(--site-premium-ink);
  font-weight: 900;
  cursor: pointer;
}

body.premium-site
  .settings-more-content {
  padding: 16px;
  border-top: 1px solid rgba(18, 58, 99, 0.08);
}

/* ---------------------------------------------------------------------
   Schiedsrichter-Katalog und Spielplan
   --------------------------------------------------------------------- */

body.premium-site
  .experience-guide {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--site-premium-line);
  border-radius: 20px;
  background: var(--site-premium-card);
  box-shadow: var(--site-premium-shadow);
}

body.premium-site
  .experience-guide > div {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 11px;
  border-radius: 14px;
  background: #f8fbfd;
}

body.premium-site
  .experience-guide > div span {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background:
    linear-gradient(
      125deg,
      var(--premium-accent),
      var(--premium-accent-2)
    );
  font-weight: 950;
}

body.premium-site
  .experience-guide > div strong {
  color: var(--site-premium-ink);
  font-size: 0.7rem;
}

body.premium-site
  .referee-tournament-catalogue {
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--site-premium-line);
  border-radius: 26px;
  background: var(--site-premium-card);
  box-shadow: var(--site-premium-shadow-strong);
}

body.premium-site
  .referee-sport-tournament-section {
  padding: 18px;
  box-shadow: none;
}

body.premium-site
  .referee-sport-section-heading {
  margin-bottom: 13px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(18, 58, 99, 0.08);
}

body.premium-site
  .referee-tournament-grid,
body.premium-site
  .referee-match-grid {
  gap: 13px;
}

body.premium-site
  .referee-tournament-grid
  > article,
body.premium-site
  .referee-schedule-match-card {
  position: relative;
  border: 1px solid rgba(18, 58, 99, 0.09);
  border-radius: 19px;
  background:
    linear-gradient(
      180deg,
      #fff,
      #f8fbfd
    );
  box-shadow:
    0 14px 32px rgba(18, 58, 99, 0.09);
  overflow: hidden;
}

body.premium-site
  .referee-tournament-grid
  > article:hover,
body.premium-site
  .referee-schedule-match-card:hover {
  border-color:
    color-mix(
      in srgb,
      var(--premium-accent) 25%,
      transparent
    );
  box-shadow:
    0 20px 42px
      color-mix(
        in srgb,
        var(--premium-accent) 12%,
        rgba(18, 58, 99, 0.09)
      );
}

body.premium-site
  .card-accent {
  width: 6px;
  background:
    linear-gradient(
      to bottom,
      var(--premium-accent),
      var(--premium-accent-2)
    );
}

body.premium-site
  .referee-status-summary {
  gap: 10px;
}

body.premium-site
  .referee-status-summary-item {
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.09);
}

body.premium-site
  .referee-match-status-section,
body.premium-site
  .spectator-overview-section,
body.premium-site
  .spectator-detail-section {
  padding:
    clamp(
      20px,
      3vw,
      27px
    );
  margin-bottom: 18px;
}

body.premium-site
  .referee-running-section,
body.premium-site
  .spectator-live-section {
  border-color:
    color-mix(
      in srgb,
      #e87518 22%,
      rgba(18, 58, 99, 0.10)
    );
  box-shadow:
    0 20px 48px rgba(199, 83, 8, 0.10);
}

body.premium-site
  .referee-schedule-match-card {
  padding: 18px;
}

body.premium-site
  .referee-match-card-topline,
body.premium-site
  .spectator-match-topline {
  margin-bottom: 12px;
}

body.premium-site
  .referee-match-field {
  color: var(--premium-accent);
  background: var(--premium-accent-soft);
}

body.premium-site
  .referee-match-teams,
body.premium-site
  .spectator-match-teams {
  color: var(--site-premium-ink);
  font-size: 0.9rem;
}

body.premium-site
  .referee-match-scoreboard-link {
  margin-top: 13px;
}

/* ---------------------------------------------------------------------
   Zuschauer-Turnierdetail, Tabellen und K.-o.-Baum
   --------------------------------------------------------------------- */

body.premium-site
  .spectator-detail-summary {
  padding:
    clamp(
      22px,
      4vw,
      34px
    );
}

body.premium-site
  .spectator-detail-summary h2 {
  margin: 10px 0 4px;
  font-size:
    clamp(
      1.45rem,
      4vw,
      2.15rem
    );
  letter-spacing: -0.04em;
}

body.premium-site
  .spectator-overview-match-list {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(270px, 1fr)
    );
  gap: 13px;
}

body.premium-site
  .spectator-detail-match {
  position: relative;
  min-height: 150px;
  padding: 17px;
  border: 1px solid rgba(18, 58, 99, 0.09);
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      #fff,
      #f8fbfd
    );
  box-shadow:
    0 13px 30px rgba(18, 58, 99, 0.08);
}

body.premium-site
  .spectator-live-section
  .spectator-detail-match {
  border-color: rgba(220, 102, 20, 0.20);
  background:
    linear-gradient(
      145deg,
      #fff9f3,
      #fff
    );
}

body.premium-site
  .spectator-match-status {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 900;
}

body.premium-site
  .spectator-match-score {
  color: var(--site-premium-ink);
  font-size: 1.15rem;
}

body.premium-site
  .spectator-full-plan-toggle-wrap {
  margin: 20px 0;
}

body.premium-site
  .spectator-full-plan-toggle {
  min-width: min(100%, 340px);
}

body.premium-site
  .ranking-table-wrapper {
  border: 1px solid rgba(18, 58, 99, 0.09);
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 13px 28px rgba(18, 58, 99, 0.08);
  overflow: auto;
}

body.premium-site
  .ranking-table {
  min-width: 650px;
  border-collapse: separate;
  border-spacing: 0;
}

body.premium-site
  .ranking-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: #496077;
  background: #edf3f8;
  font-size: 0.61rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body.premium-site
  .ranking-table :is(th, td) {
  padding: 12px 11px;
  border-bottom: 1px solid rgba(18, 58, 99, 0.07);
}

body.premium-site
  .ranking-table tbody tr:hover td {
  background:
    color-mix(
      in srgb,
      var(--premium-accent-soft) 45%,
      #fff
    );
}

body.premium-site
  .bracket-scroll,
body.premium-site
  .spectator-bracket-scroll {
  padding: 12px;
  border: 1px solid rgba(18, 58, 99, 0.09);
  border-radius: 19px;
  background: #f5f8fb;
}

body.premium-site
  .bracket-match {
  border: 1px solid rgba(18, 58, 99, 0.10);
  border-radius: 15px;
  background: #fff;
  box-shadow:
    0 10px 22px rgba(18, 58, 99, 0.08);
}

/* ---------------------------------------------------------------------
   Registrierung
   --------------------------------------------------------------------- */

body.premium-site.person-registration-page
  .person-registration-layout {
  display: grid;
  gap: 20px;
}

body.premium-site
  .person-registration-grid {
  display: grid;
  grid-template-columns:
    1.15fr 0.85fr;
  gap: 18px;
}

body.premium-site
  .person-registration-grid > section {
  min-height: 380px;
  margin: 0;
}

body.premium-site
  .person-registration-grid > section:first-child {
  background:
    radial-gradient(
      circle at 100% 0,
      color-mix(
        in srgb,
        var(--premium-accent) 12%,
        transparent
      ),
      transparent 35%
    ),
    #fff;
}

body.premium-site
  #active-person-panel {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(
      125deg,
      var(--premium-hero-start),
      var(--premium-hero-middle),
      var(--premium-hero-end)
    );
}

body.premium-site
  #active-person-panel
  :is(
    h2,
    p,
    .eyebrow
  ) {
  color: #fff;
}

body.premium-site
  .local-person-list {
  display: grid;
  gap: 9px;
}

body.premium-site
  .local-person-button {
  min-height: 60px;
  padding: 11px 13px;
  border: 1px solid rgba(18, 58, 99, 0.09);
  border-radius: 14px;
  background: #f8fbfd;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
}

body.premium-site
  .local-person-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 24px rgba(18, 58, 99, 0.08);
}

/* ---------------------------------------------------------------------
   Scoreboard: maximale Lesbarkeit, hochwertige Steuerung
   --------------------------------------------------------------------- */

body.premium-site.app-scoreboard {
  background:
    radial-gradient(
      circle at 0 0,
      rgba(14, 159, 111, 0.12),
      transparent 28rem
    ),
    linear-gradient(
      180deg,
      #e8f2f7,
      #f5f8fb 600px
    );
}

body.premium-site.app-scoreboard
  .site-header {
  min-height: 175px;
  padding-bottom: 58px;
}

body.premium-site.app-scoreboard
  .volleyball-scoreboard-page {
  width:
    min(
      1280px,
      calc(100% - 28px)
    );
  margin-top: -36px;
}

body.premium-site.app-scoreboard
  .volleyball-scoreboard-content {
  display: grid;
  gap: 16px;
}

body.premium-site.app-scoreboard
  :is(
    .volleyball-game-selection,
    .football-timer-settings,
    .volleyball-set-mode-panel,
    .volleyball-set-target-panel,
    .team-alert-referee-panel
  ) {
  margin: 0;
  border-radius: 21px;
}

body.premium-site.app-scoreboard
  .volleyball-game-selection {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.13);
  background:
    linear-gradient(
      125deg,
      #0a263d,
      #0a5d65,
      #087357
    );
}

body.premium-site.app-scoreboard
  .volleyball-game-selection
  :is(
    h2,
    .eyebrow,
    label,
    p
  ) {
  color: #fff;
}

body.premium-site.app-scoreboard
  .volleyball-readonly-control,
body.premium-site.app-scoreboard
  .volleyball-game-selection input {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.09);
}

body.premium-site.app-scoreboard
  .volleyball-match-meta span {
  border-color: rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.09);
}

body.premium-site.app-scoreboard
  .volleyball-scoreboard-card,
body.premium-site.app-scoreboard
  .football-scoreboard-card,
body.premium-site.app-scoreboard
  .scoreboard-card {
  border: 1px solid rgba(18, 58, 99, 0.09);
  border-radius: 27px;
  background:
    linear-gradient(
      180deg,
      #fff,
      #f8fbfd
    );
  box-shadow: var(--site-premium-shadow-strong);
  overflow: hidden;
}

body.premium-site.app-scoreboard
  :is(
    .volleyball-team-name,
    .football-team-name,
    .scoreboard-team-name
  ) {
  color: var(--site-premium-ink);
  letter-spacing: -0.035em;
}

body.premium-site.app-scoreboard
  :is(
    .volleyball-team-score,
    .football-team-score,
    .scoreboard-team-score
  ) {
  color: var(--site-premium-ink);
  text-shadow:
    0 8px 25px
      color-mix(
        in srgb,
        var(--premium-accent) 14%,
        transparent
      );
}

body.premium-site.app-scoreboard
  .score-button,
body.premium-site.app-scoreboard
  .volleyball-score-button {
  border-radius: 18px;
  box-shadow:
    0 13px 28px rgba(18, 58, 99, 0.13);
}

body.premium-site.app-scoreboard
  .football-timer-settings-toggle {
  min-height: 66px;
  border-radius: 17px;
  color: var(--site-premium-ink);
  background: #f8fbfd;
}

body.premium-site.app-scoreboard
  .football-time-mode-panel,
body.premium-site.app-scoreboard
  .football-phase-time-card {
  border-color: rgba(18, 58, 99, 0.09);
  border-radius: 17px;
  background: #f8fbfd;
}

body.premium-site.app-scoreboard
  .team-alert-referee-panel {
  border-color:
    color-mix(
      in srgb,
      #d97706 20%,
      rgba(18, 58, 99, 0.10)
    );
  background:
    linear-gradient(
      145deg,
      #fff9ee,
      #fff
    );
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */

body.premium-site:not(.personal-profile-page)
  .site-footer {
  padding:
    22px
    max(
      20px,
      env(safe-area-inset-right)
    )
    max(
      24px,
      env(safe-area-inset-bottom)
    );
  color: #77879a;
  background: transparent;
  font-size: 0.62rem;
  text-align: center;
}

/* ---------------------------------------------------------------------
   Dark Mode für die komplette Website
   --------------------------------------------------------------------- */

html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page) {
  --site-premium-ink: #eef5ff;
  --site-premium-soft-ink: #a7b8cc;
  --site-premium-card: rgba(15, 27, 44, 0.95);
  --site-premium-glass: rgba(15, 27, 44, 0.82);
  --site-premium-line: rgba(129, 164, 198, 0.14);
  --site-premium-shadow:
    0 24px 60px rgba(0, 0, 0, 0.32);
  --site-premium-shadow-strong:
    0 34px 90px rgba(0, 0, 0, 0.42);

  background:
    radial-gradient(
      circle at 5% 10%,
      color-mix(
        in srgb,
        var(--premium-accent) 14%,
        transparent
      ),
      transparent 30rem
    ),
    radial-gradient(
      circle at 95% 36%,
      color-mix(
        in srgb,
        var(--premium-accent-2) 12%,
        transparent
      ),
      transparent 32rem
    ),
    linear-gradient(
      180deg,
      #07111e 0,
      var(--background) 540px
    );
}

html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page)
  :is(
    .panel,
    .wizard-shell,
    .referee-match-status-section,
    .spectator-overview-section,
    .spectator-detail-section,
    .referee-sport-tournament-section,
    .spectator-catalogue-layout > section:first-child,
    .referee-tournament-catalogue
  ) {
  border-color: var(--site-premium-line);
  background:
    linear-gradient(
      180deg,
      rgba(17, 31, 50, 0.97),
      rgba(12, 23, 38, 0.96)
    );
  box-shadow: var(--site-premium-shadow);
}

html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page)
  :is(
    .section-heading h2,
    .section-heading h3,
    .detail-box strong,
    .spectator-tournament-card h3,
    .referee-match-teams,
    .spectator-match-teams,
    .experience-guide > div strong,
    .collapsible-title
  ) {
  color: var(--site-premium-ink);
}

html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page)
  :is(
    .section-support-copy,
    .spectator-tournament-card p,
    .detail-box span
  ) {
  color: var(--site-premium-soft-ink);
}

html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page)
  .button-secondary {
  color: #eaf3ff;
  border-color: rgba(129, 164, 198, 0.18);
  background: #172940;
}

html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page)
  :is(
    input,
    select,
    textarea
  ) {
  color: #eef5ff;
  border-color: #30455e;
  background: #0d1929;
}

html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page)
  :is(
    input,
    select,
    textarea
  ):focus {
  background: #101f32;
}

html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page)
  label {
  color: #afbdd0;
}

html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page)
  :is(
    .checkbox-line,
    .feature-switch,
    .football-halftime-toggle,
    .wizard-progress,
    .wizard-navigation,
    .settings-more-details,
    .tournament-workflow,
    .referee-quick-nav,
    .experience-guide,
    .empty-state,
    .spectator-status-empty,
    .referee-status-empty,
    .fixture-empty,
    .bracket-scroll,
    .spectator-bracket-scroll
  ) {
  color: #eaf3ff;
  border-color: rgba(129, 164, 198, 0.14);
  background: #101d2e;
}

html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page)
  .notice {
  color: #c6d4e5;
  border-color: rgba(129, 164, 198, 0.16);
  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--premium-accent) 10%,
        #101d2e
      ),
      #101d2e
    );
}

html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page)
  :is(
    .spectator-tournament-card,
    .admin-item,
    .wizard-option-card,
    .referee-tournament-grid > article,
    .referee-schedule-match-card,
    .spectator-detail-match,
    .playing-field-card,
    .group-card,
    .bracket-match,
    .ranking-table-wrapper,
    .local-person-button
  ) {
  color: #eef5ff;
  border-color: rgba(129, 164, 198, 0.14);
  background:
    linear-gradient(
      180deg,
      #111f31,
      #0e1929
    );
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page)
  .spectator-tournament-basics > span,
html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page)
  .detail-box,
html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page)
  .experience-guide > div,
html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page)
  .collapsible-section-toggle,
html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page)
  .team-card-facts {
  color: #dce7f4;
  border-color: rgba(129, 164, 198, 0.13);
  background: #101d2e;
}

html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page)
  .ranking-table th {
  color: #c7d5e6;
  background: #1b2c42;
}

html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page)
  .ranking-table td {
  color: #eaf3ff;
  background: #111f31;
}

html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page)
  .ranking-table tbody tr:hover td {
  background: #182b42;
}

html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page)
  .past-tournaments-section {
  border-color: rgba(129, 164, 198, 0.14);
  background: rgba(15, 27, 44, 0.86);
}

html[data-theme="dark"]
  body.premium-site:not(.personal-profile-page)
  .past-tournaments-section > summary {
  color: #eef5ff;
}

html[data-theme="dark"]
  body.premium-site.app-scoreboard {
  background:
    radial-gradient(
      circle at 0 0,
      rgba(14, 159, 111, 0.11),
      transparent 30rem
    ),
    linear-gradient(
      180deg,
      #07111e,
      #0a1422 650px
    );
}

html[data-theme="dark"]
  body.premium-site.app-scoreboard
  :is(
    .volleyball-scoreboard-card,
    .football-scoreboard-card,
    .scoreboard-card,
    .football-time-mode-panel,
    .football-phase-time-card
  ) {
  color: #eef5ff;
  border-color: rgba(129, 164, 198, 0.14);
  background:
    linear-gradient(
      180deg,
      #111f31,
      #0e1929
    );
}

html[data-theme="dark"]
  body.premium-site.app-scoreboard
  :is(
    .volleyball-team-name,
    .football-team-name,
    .scoreboard-team-name,
    .volleyball-team-score,
    .football-team-score,
    .scoreboard-team-score
  ) {
  color: #eef5ff;
}

/* ---------------------------------------------------------------------
   Tablet, Smartphone und Querformat
   --------------------------------------------------------------------- */

@media (max-width: 980px) {
  body.premium-site:not(.personal-profile-page)
    .site-header {
    min-height: 190px;
    padding-bottom: 64px;
  }

  body.premium-site:not(.personal-profile-page)
    .page {
    margin-top: -40px;
  }

  body.premium-site
    .wizard-shell {
    grid-template-columns: 1fr;
  }

  body.premium-site
    .wizard-progress {
    position: static;
    grid-template-columns:
      repeat(5, minmax(90px, 1fr));
    overflow-x: auto;
  }

  body.premium-site
    .wizard-progress button {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  body.premium-site
    .tournament-settings-layout
    #tournament-settings-form {
    grid-template-columns: 1fr;
  }

  body.premium-site
    .tournament-settings-layout
    #tournament-settings-form
    > * {
    grid-column: auto !important;
  }
}

@media (max-width: 760px) {
  body.premium-site:not(.personal-profile-page)
    .site-header {
    min-height: 160px;
    padding:
      max(
        24px,
        env(safe-area-inset-top)
      )
      max(
        16px,
        env(safe-area-inset-right)
      )
      54px
      max(
        16px,
        env(safe-area-inset-left)
      );
  }

  body.premium-site:not(.personal-profile-page)
    .site-header h1 {
    font-size: 1.85rem;
  }

  body.premium-site:not(.personal-profile-page)
    .site-header .subtitle {
    max-width: 520px;
    font-size: 0.75rem;
  }

  .premium-header-decoration {
    right: -100px;
    bottom: -160px;
  }

  body.premium-site:not(.personal-profile-page)
    .page {
    width:
      min(
        100% - 20px,
        760px
      );
    margin-top: -33px;
  }

  body.premium-site
    .person-registration-grid {
    grid-template-columns: 1fr;
  }

  body.premium-site
    .person-registration-grid > section {
    min-height: 0;
  }

  body.premium-site
    .team-form {
    grid-template-columns: 1fr;
  }

  body.premium-site
    .experience-guide {
    grid-template-columns: 1fr;
  }

  body.premium-site
    .experience-guide > div {
    min-height: 52px;
  }

  body.premium-site
    .tournament-workflow,
  body.premium-site
    .referee-quick-nav {
    top: 4px;
  }

  body.premium-site
    .spectator-overview-match-list {
    grid-template-columns: 1fr;
  }

  body.premium-site
    .site-header
    :is(
      .header-actions,
      .public-role-nav
    ) {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  body.premium-site:not(.personal-profile-page)
    .site-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  body.premium-site:not(.personal-profile-page)
    .site-header .subtitle {
    display: none;
  }

  .premium-header-chip {
    margin-bottom: 9px;
  }

  body.premium-site
    .spectator-tournament-grid,
  body.premium-site
    .admin-list,
  body.premium-site
    .team-list,
  body.premium-site
    .people-admin-team-list {
    grid-template-columns: 1fr;
  }

  body.premium-site
    .spectator-tournament-card {
    min-height: 210px;
  }

  body.premium-site
    .wizard-progress {
    grid-template-columns:
      repeat(5, minmax(76px, 1fr));
  }

  body.premium-site
    .wizard-progress button {
    min-height: 61px;
    padding: 7px;
  }

  body.premium-site
    .wizard-progress button strong {
    font-size: 0.55rem;
  }

  body.premium-site
    .admin-sport-choice {
    grid-template-columns: 1fr;
  }

  body.premium-site
    .tournament-detail-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  body.premium-site
    .section-heading {
    align-items: flex-start;
  }

  body.premium-site
    .section-heading .counter {
    flex: 0 0 auto;
  }

  body.premium-site.app-scoreboard
    .volleyball-scoreboard-page {
    width: calc(100% - 12px);
  }
}

body.is-phone-landscape.premium-site:not(.personal-profile-page)
  .site-header {
  display: none;
}

body.is-phone-landscape.premium-site:not(.personal-profile-page)
  .page {
  margin-top: 0;
  padding-top:
    max(
      10px,
      env(safe-area-inset-top)
    );
}

body.is-phone-landscape.premium-site
  .wizard-progress {
  grid-template-columns:
    repeat(5, minmax(105px, 1fr));
}

body.is-phone-landscape.premium-site
  .spectator-tournament-grid,
body.is-phone-landscape.premium-site
  .referee-match-grid {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

body.is-phone-landscape.premium-site.app-scoreboard
  .volleyball-scoreboard-page {
  width:
    calc(
      100% -
      max(
        12px,
        env(safe-area-inset-left)
      ) -
      max(
        12px,
        env(safe-area-inset-right)
      )
    );
}

/* Bestehende Einstellung „Animationen reduzieren“ respektieren. */

html[data-reduce-motion="true"]
  body.premium-site
  .premium-reveal,
html[data-reduce-motion="true"]
  body.premium-site.premium-page-loaded
  .premium-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}