/* =====================================================================
   Schritt 3.23 – globale Dark-Mode-Schutzschicht
   Entfernt helle Karteninseln auf der gesamten Website.
   ===================================================================== */

html[data-theme="dark"] {
  color-scheme: dark;

  --dm-page: #07111e;
  --dm-page-soft: #0a1625;
  --dm-panel: #0d1a2b;
  --dm-panel-raised: #12243a;
  --dm-panel-soft: #172b42;
  --dm-panel-hover: #1b334d;
  --dm-text: #eef5ff;
  --dm-text-soft: #c8d7e8;
  --dm-muted: #94a8bf;
  --dm-border: rgba(132, 168, 204, 0.17);
  --dm-border-strong: rgba(149, 187, 224, 0.28);
  --dm-shadow:
    0 18px 42px
    rgba(0, 0, 0, 0.25);
  --dm-shadow-soft:
    0 10px 25px
    rgba(0, 0, 0, 0.18);
}

/* ---------------------------------------------------------------------
   Seitenhintergrund und große Hauptflächen
   --------------------------------------------------------------------- */

html[data-theme="dark"]
  body.premium-site {
  color: var(--dm-text) !important;
  background:
    radial-gradient(
      circle at 90% 10%,
      color-mix(
        in srgb,
        var(--design-primary) 12%,
        transparent
      ),
      transparent 34rem
    ),
    radial-gradient(
      circle at 5% 85%,
      color-mix(
        in srgb,
        var(--design-secondary) 9%,
        transparent
      ),
      transparent 32rem
    ),
    linear-gradient(
      145deg,
      var(--dm-page),
      var(--dm-page-soft)
    ) !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .page,
    .profile-app-main,
    .scoreboard-page,
    .presentation-stage-content
  ) {
  color: var(--dm-text);
}

/* Große Container, die früher häufig weiß wurden. */

html[data-theme="dark"]
  body.premium-site
  :is(
    .panel,
    .wizard-shell,
    .wizard-step,
    .home-tournament-browser,
    .past-tournaments-section,
    .spectator-overview-section,
    .spectator-detail-section,
    .spectator-progress-section,
    .spectator-ranking-section,
    .referee-sport-tournament-section,
    .referee-match-status-section,
    .referee-progress-subsection,
    .spectator-progress-subsection,
    .tournament-overview-panel,
    .referee-schedule-tournament-details,
    .spectator-detail-summary,
    .system-collapsible-section,
    .collapsible-section-content,
    .ranking-system-section,
    .large-group-overview,
    .combined-tournament-overview,
    .tournament-tree-section,
    .knockout-system-section,
    .double-ko-system-section,
    .playing-field-schedule-section,
    .playing-field-block,
    .playing-field-settings,
    .ranking-rules-section,
    .pairing-mode-section,
    .knockout-settings,
    .group-knockout-settings,
    .wm-system-settings,
    .professional-edit-panel,
    .settings-save-bar,
    .volleyball-set-settings,
    .volleyball-set-target-settings,
    .profile-app-detail,
    .profile-settings-menu,
    .personal-team-card,
    .person-registration-grid > section,
    .scoreboard-card,
    .football-scoreboard-card,
    .volleyball-scoreboard-card,
    .team-alert-referee-panel
  ) {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
  background:
    linear-gradient(
      180deg,
      var(--dm-panel),
      color-mix(
        in srgb,
        var(--dm-panel) 90%,
        var(--dm-page)
      )
    ) !important;
  box-shadow: var(--dm-shadow) !important;
}

/* ---------------------------------------------------------------------
   Innenkarten und dynamisch erzeugte Inhalte
   --------------------------------------------------------------------- */

html[data-theme="dark"]
  body.premium-site
  :is(
    .detail-box,
    .summary-item,
    .summary-text-item,
    .home-action-card,
    .wizard-option-card,
    .admin-item,
    .spectator-tournament-card,
    .spectator-tournament-basics > span,
    .spectator-detail-match,
    .spectator-match-card,
    .spectator-schedule-block,
    .spectator-schedule-block-heading,
    .spectator-schedule-block-matches,
    .spectator-status-empty,
    .referee-status-empty,
    .referee-tournament-grid > article,
    .referee-schedule-match-card,
    .referee-status-summary-item,
    .referee-progress-group-card,
    .referee-progress-bracket,
    .referee-result-editor-card,
    .referee-match-result,
    .team-list-item,
    .people-role-row,
    .people-search-result,
    .personal-members-details,
    .local-person-button,
    .fixture-card,
    .fixture-empty,
    .fixture-grid,
    .playing-field-select-field,
    .playing-field-statistics > div,
    .playing-field-explanation,
    .playing-field-grid,
    .playing-field-card,
    .playing-field-free,
    .qualification-summary,
    .qualification-summary-item,
    .first-round-summary-item,
    .group-card,
    .bracket-group-card,
    .bracket-match,
    .bracket-team,
    .bracket-scroll,
    .group-bracket-scroll,
    .group-bracket-board,
    .tournament-bracket,
    .wm-third-comparison,
    .wm-third-empty,
    .wm-third-note,
    .system-validation-warning,
    .notice,
    .empty-state,
    .team-call-popup-card,
    .profile-settings-row,
    .profile-hero-stats,
    .profile-next-spotlight,
    .volleyball-game-selection,
    .volleyball-readonly-control,
    .volleyball-match-meta span,
    .volleyball-current-set,
    .volleyball-match-set-score,
    .volleyball-set-history-wrap
  ) {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
  background:
    var(--dm-panel-raised) !important;
  box-shadow: var(--dm-shadow-soft) !important;
}

/* Flächen innerhalb von Karten erhalten eine weitere dunkle Abstufung. */

html[data-theme="dark"]
  body.premium-site
  :is(
    .fixture-teams,
    .spectator-match-teams,
    .spectator-match-context,
    .spectator-match-score,
    .referee-match-card-topline,
    .referee-match-context,
    .referee-match-teams,
    .referee-match-result,
    .playing-field-card-topline,
    .playing-field-teams,
    .admin-schedule-meta,
    .bracket-match-heading,
    .bracket-team,
    .group-card-heading,
    .combined-tournament-overview-heading,
    .system-subsection-heading,
    .profile-settings-row-main,
    .profile-settings-row-summary
  ) {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
  background:
    color-mix(
      in srgb,
      var(--dm-panel-soft) 92%,
      transparent
    ) !important;
}

/* ---------------------------------------------------------------------
   Turnierbaum
   --------------------------------------------------------------------- */

html[data-theme="dark"]
  body.premium-site
  :is(
    .bracket-scroll,
    .group-bracket-scroll,
    .spectator-bracket-scroll
  ) {
  border-color: var(--dm-border) !important;
  background:
    var(--dm-page-soft) !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .bracket-round > h3,
    .group-bracket-column > h3,
    .spectator-bracket-phase,
    .group-stage-board-column > h3,
    .knockout-board-column > h3
  ) {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--design-primary) 24%,
        var(--dm-panel-soft)
      ),
      var(--dm-panel-soft)
    ) !important;
}

html[data-theme="dark"]
  body.premium-site
  .bracket-match {
  border:
    1px solid
    var(--dm-border) !important;
  color: var(--dm-text) !important;
  background:
    linear-gradient(
      155deg,
      var(--dm-panel-raised),
      var(--dm-panel)
    ) !important;
}

html[data-theme="dark"]
  body.premium-site
  .bracket-team {
  color: var(--dm-text) !important;
  border:
    1px solid
    var(--dm-border) !important;
  background:
    var(--dm-panel-soft) !important;
}

html[data-theme="dark"]
  body.premium-site
  .bracket-team
  :is(
    span,
    strong
  ) {
  color: var(--dm-text) !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .bracket-match-label,
    .spectator-bracket-status,
    .referee-progress-match-status
  ) {
  color: var(--dm-muted) !important;
}

/* Verbindungslinien bleiben sichtbar, aber nicht weiß. */

html[data-theme="dark"]
  body.premium-site
  :is(
    .bracket-round,
    .group-bracket-column,
    .group-board-match-wrap
  ) {
  --bracket-line:
    color-mix(
      in srgb,
      var(--design-primary) 40%,
      #728aa3
    );
}

/* ---------------------------------------------------------------------
   Spielplan und komplette Begegnungslisten
   --------------------------------------------------------------------- */

html[data-theme="dark"]
  body.premium-site
  :is(
    .spectator-schedule-block,
    .playing-field-block,
    .fixture-card
  ) {
  overflow: hidden;
  color: var(--dm-text) !important;
  border:
    1px solid
    var(--dm-border) !important;
  background:
    var(--dm-panel) !important;
  box-shadow: var(--dm-shadow-soft) !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .spectator-schedule-block-heading,
    .playing-field-block-heading
  ) {
  margin: 0 !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--design-primary) 18%,
        var(--dm-panel-soft)
      ),
      var(--dm-panel-soft)
    ) !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .spectator-schedule-block-heading,
    .playing-field-block-heading
  )
  :is(
    span,
    strong,
    small
  ) {
  color: var(--dm-text) !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .spectator-schedule-block-matches,
    .playing-field-grid,
    .fixture-grid
  ) {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
  background:
    var(--dm-panel) !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .spectator-detail-match,
    .spectator-match-card,
    .referee-schedule-match-card,
    .playing-field-card,
    .fixture-card
  ) {
  color: var(--dm-text) !important;
  border:
    1px solid
    var(--dm-border) !important;
  border-left:
    4px solid
    color-mix(
      in srgb,
      var(--design-primary) 58%,
      #7f96ae
    ) !important;
  background:
    var(--dm-panel-raised) !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .spectator-detail-match,
    .spectator-match-card,
    .referee-schedule-match-card,
    .playing-field-card,
    .fixture-card
  )
  :is(
    strong,
    span,
    small
  ) {
  color: var(--dm-text-soft);
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .spectator-match-teams strong,
    .referee-match-teams strong,
    .playing-field-teams strong,
    .fixture-teams strong
  ) {
  color: var(--dm-text) !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .spectator-match-versus,
    .referee-match-versus,
    .playing-field-teams > span,
    .fixture-teams > span
  ) {
  color: var(--dm-muted) !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .status-running,
    .state-running
  ) {
  border-left-color:
    var(--design-success) !important;
}

html[data-theme="dark"]
  body.premium-site
  .status-paused {
  border-left-color:
    var(--design-warning) !important;
}

html[data-theme="dark"]
  body.premium-site
  .status-completed {
  border-left-color:
    #71859a !important;
}

/* ---------------------------------------------------------------------
   Tabellen: keine weißen Zeilen oder Tabellenköpfe
   --------------------------------------------------------------------- */

html[data-theme="dark"]
  body.premium-site
  :is(
    .ranking-table-wrapper,
    .wm-third-table,
    .bracket-group-card table
  ) {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
  background:
    var(--dm-panel) !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .ranking-table,
    .wm-third-table,
    .bracket-group-card table
  ) {
  color: var(--dm-text) !important;
  background:
    var(--dm-panel) !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .ranking-table,
    .wm-third-table,
    .bracket-group-card table
  )
  thead,
html[data-theme="dark"]
  body.premium-site
  :is(
    .ranking-table,
    .wm-third-table,
    .bracket-group-card table
  )
  th {
  color: var(--dm-text-soft) !important;
  border-color: var(--dm-border) !important;
  background:
    var(--dm-panel-soft) !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .ranking-table,
    .wm-third-table,
    .bracket-group-card table
  )
  tbody,
html[data-theme="dark"]
  body.premium-site
  :is(
    .ranking-table,
    .wm-third-table,
    .bracket-group-card table
  )
  tr,
html[data-theme="dark"]
  body.premium-site
  :is(
    .ranking-table,
    .wm-third-table,
    .bracket-group-card table
  )
  td {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
  background:
    var(--dm-panel-raised) !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .ranking-table,
    .wm-third-table,
    .bracket-group-card table
  )
  tbody
  tr:nth-child(even)
  td {
  background:
    color-mix(
      in srgb,
      var(--dm-panel-soft) 88%,
      var(--dm-panel-raised)
    ) !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .ranking-team,
    .ranking-position,
    .ranking-points,
    .ranking-games,
    .ranking-wins,
    .ranking-draws,
    .ranking-losses,
    .ranking-score-ratio,
    .ranking-difference
  ) {
  color: var(--dm-text) !important;
}

/* ---------------------------------------------------------------------
   Formulare, Eingabefelder und Auswahlelemente
   --------------------------------------------------------------------- */

html[data-theme="dark"]
  body.premium-site
  :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    select,
    textarea
  ) {
  color: var(--dm-text) !important;
  border-color: var(--dm-border-strong) !important;
  background:
    var(--dm-panel) !important;
  box-shadow: none !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    input,
    select,
    textarea
  )::placeholder {
  color: var(--dm-muted) !important;
  opacity: 0.86;
}

html[data-theme="dark"]
  body.premium-site
  select option {
  color: var(--dm-text);
  background: var(--dm-panel);
}

html[data-theme="dark"]
  body.premium-site
  :is(
    input,
    select,
    textarea
  ):focus {
  border-color:
    color-mix(
      in srgb,
      var(--design-primary) 70%,
      #9cb8d2
    ) !important;
  background:
    var(--dm-panel-raised) !important;
  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--design-primary) 20%,
      transparent
    ) !important;
}

/* Sekundärbuttons und Menüs dürfen ebenfalls nicht weiß aufleuchten. */

html[data-theme="dark"]
  body.premium-site
  :is(
    .button-secondary,
    .button-danger-light,
    .viewer-access-menu > summary,
    .viewer-access-panel,
    .admin-more-options-content,
    .referee-result-editor-close,
    .scoreboard-focus-exit,
    .scoreboard-fullscreen-toggle
  ) {
  color: var(--dm-text) !important;
  border-color: var(--dm-border-strong) !important;
  background:
    var(--dm-panel-soft) !important;
}

/* ---------------------------------------------------------------------
   Hinweise und Statusfarben als dunkle Tönungen
   --------------------------------------------------------------------- */

html[data-theme="dark"]
  body.premium-site
  :is(
    .notice-success,
    .team-call-popup[data-notification-type="now"] .team-call-popup-card
  ) {
  color: #d8fff0 !important;
  border-color:
    color-mix(
      in srgb,
      var(--design-success) 45%,
      var(--dm-border)
    ) !important;
  background:
    color-mix(
      in srgb,
      var(--design-success) 14%,
      var(--dm-panel)
    ) !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .notice-warning,
    .system-validation-warning,
    .qualification-status-locked,
    .team-call-popup[data-notification-type="soon"] .team-call-popup-card
  ) {
  color: #fff0c7 !important;
  border-color:
    color-mix(
      in srgb,
      var(--design-warning) 44%,
      var(--dm-border)
    ) !important;
  background:
    color-mix(
      in srgb,
      var(--design-warning) 13%,
      var(--dm-panel)
    ) !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .notice-error,
    .team-call-popup[data-notification-type="retracted"] .team-call-popup-card
  ) {
  color: #ffd8d4 !important;
  border-color:
    color-mix(
      in srgb,
      var(--design-danger) 44%,
      var(--dm-border)
    ) !important;
  background:
    color-mix(
      in srgb,
      var(--design-danger) 13%,
      var(--dm-panel)
    ) !important;
}

/* ---------------------------------------------------------------------
   Profil, Registrierung und Design-Studio
   --------------------------------------------------------------------- */

html[data-theme="dark"]
  body.premium-site
  :is(
    .profile-settings-menu,
    .profile-settings-row,
    .profile-app-detail,
    .person-registration-grid > section,
    #active-person-panel,
    .admin-design-studio,
    .admin-design-body,
    .admin-design-panel,
    .design-preset-card,
    .design-color-field,
    .design-upload-card,
    .saved-design-create,
    .saved-design-card,
    .saved-design-empty
  ) {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
  background:
    var(--dm-panel) !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .design-color-mode-tabs,
    .design-segmented,
    .design-upload-preview,
    .saved-design-preview
  ) {
  border-color: var(--dm-border) !important;
  background:
    var(--dm-panel-raised) !important;
}

/* ---------------------------------------------------------------------
   Scoreboard
   --------------------------------------------------------------------- */

html[data-theme="dark"]
  body.premium-site.app-scoreboard
  :is(
    .scoreboard-card,
    .football-scoreboard-card,
    .volleyball-scoreboard-card,
    .volleyball-game-selection,
    .volleyball-readonly-control,
    .team-alert-referee-panel,
    .referee-result-editor-card
  ) {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
  background:
    var(--dm-panel) !important;
}

html[data-theme="dark"]
  body.premium-site.app-scoreboard
  :is(
    .scoreboard-team,
    .scoreboard-score,
    .scoreboard-timer,
    .volleyball-current-set,
    .volleyball-match-set-score,
    .volleyball-set-history-chip
  ) {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
  background:
    var(--dm-panel-raised) !important;
}

/* ---------------------------------------------------------------------
   Vollbild und Extra-Monitor
   --------------------------------------------------------------------- */

html[data-theme="dark"]
  .presentation-stage-content
  :is(
    .collapsible-section-content,
    .ranking-table-wrapper,
    .bracket-scroll,
    .group-bracket-scroll,
    .spectator-schedule-block,
    .spectator-schedule-block-matches,
    .playing-field-block,
    .playing-field-grid
  ),
html[data-theme="dark"]
  [data-presentation-target]:fullscreen
  :is(
    .collapsible-section-content,
    .ranking-table-wrapper,
    .bracket-scroll,
    .group-bracket-scroll,
    .spectator-schedule-block,
    .spectator-schedule-block-matches,
    .playing-field-block,
    .playing-field-grid
  ) {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
  background:
    var(--dm-panel) !important;
}

html[data-theme="dark"]
  .presentation-stage-content
  :is(
    .bracket-match,
    .bracket-team,
    .spectator-detail-match,
    .playing-field-card,
    .fixture-card
  ),
html[data-theme="dark"]
  [data-presentation-target]:fullscreen
  :is(
    .bracket-match,
    .bracket-team,
    .spectator-detail-match,
    .playing-field-card,
    .fixture-card
  ) {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
  background:
    var(--dm-panel-raised) !important;
}

/* ---------------------------------------------------------------------
   Schutz vor später dynamisch oder inline eingefügten weißen Flächen
   --------------------------------------------------------------------- */

html[data-theme="dark"]
  body.premium-site
  :is(
    [style*="background: white"],
    [style*="background:white"],
    [style*="background-color: white"],
    [style*="background-color:white"],
    [style*="background: #fff"],
    [style*="background:#fff"],
    [style*="background-color: #fff"],
    [style*="background-color:#fff"],
    [style*="background: rgb(255"],
    [style*="background-color: rgb(255"]
  ) {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
  background:
    var(--dm-panel-raised) !important;
}

/* Helle Textfarben aus älteren Regeln werden auf dunklen Flächen lesbar. */

html[data-theme="dark"]
  body.premium-site
  :is(
    .panel,
    .system-collapsible-section,
    .collapsible-section-content,
    .spectator-schedule-block,
    .playing-field-block,
    .bracket-match,
    .bracket-team,
    .fixture-card,
    .ranking-table,
    .group-card
  )
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    label,
    strong,
    b,
    td,
    th
  ) {
  color: var(--dm-text) !important;
}

/* Kleingedrucktes bleibt unterscheidbar. */

html[data-theme="dark"]
  body.premium-site
  :is(
    .panel,
    .system-collapsible-section,
    .collapsible-section-content,
    .spectator-schedule-block,
    .playing-field-block,
    .bracket-match,
    .fixture-card,
    .group-card
  )
  :is(
    small,
    .muted,
    .meta,
    .helper-text
  ) {
  color: var(--dm-muted) !important;
}

/* ---------------------------------------------------------------------
   Smartphone hoch und quer
   --------------------------------------------------------------------- */

@media (max-width: 620px) {
  html[data-theme="dark"]
    body.premium-site
    :is(
      .spectator-schedule-block,
      .playing-field-block,
      .bracket-match,
      .group-card,
      .referee-schedule-match-card,
      .spectator-detail-match
    ) {
    box-shadow:
      0 10px 24px
      rgba(0, 0, 0, 0.22) !important;
  }

  html[data-theme="dark"]
    body.premium-site
    :is(
      .spectator-schedule-block-heading,
      .playing-field-block-heading
    ) {
    border-radius:
      14px
      14px
      0
      0 !important;
  }
}

body.is-phone-landscape
  .spectator-schedule-block,
body.is-phone-landscape
  .playing-field-block {
  min-width: 0;
}

/* Nutzer mit reduzierten Animationen erhalten keine zusätzlichen Übergänge. */

html[data-reduce-motion="true"]
  body.premium-site
  *,
html[data-design-animation="off"]
  body.premium-site
  * {
  transition-duration:
    0.001ms !important;
}