/* Hell-/Dunkel-Umschaltung für die /new-Variante. */
html {
  color-scheme: light;
}

.theme-toggle {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--navy-900);
  background: #fff;
  box-shadow: 0 5px 16px rgba(8, 29, 49, 0.07);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.theme-toggle:hover {
  border-color: var(--line-strong);
  background: var(--surface-blue);
}

.theme-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle-icon--sun {
  display: none;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf3f7;
  --muted: #b9c8d6;
  --muted-light: #91a8bb;
  --background-dark: #081b2e;
  /* Karten liegen bewusst noch etwas dunkler als der Seitenhintergrund. */
  --surface: #071827;
  --surface-soft: #091d30;
  --surface-blue: #0e2a45;
  /* Konturen setzen sich im Dunkelmodus dunkler statt heller ab. */
  --line: #04121e;
  --line-strong: #020a12;
  --shadow-sm: 0 8px 28px rgba(0, 0, 0, 0.16);
  --shadow-md: 0 22px 62px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] body {
  color: var(--ink);
  background: var(--background-dark);
}

html[data-theme="dark"] .page-glow::before {
  border-color: rgba(30, 72, 112, 0.09);
}

html[data-theme="dark"] .page-glow::after {
  background: rgba(16, 84, 105, 0.05);
}

html[data-theme="dark"] .site-header {
  border-color: rgba(2, 10, 18, 0.92);
  background: rgba(7, 24, 39, 0.95);
}

html[data-theme="dark"] .brand strong,
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .hero-tagline,
html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .club-copy h2,
html[data-theme="dark"] .gallery-callout h2,
html[data-theme="dark"] .sponsor h2,
html[data-theme="dark"] .subpage-hero h1,
html[data-theme="dark"] .album-header h1,
html[data-theme="dark"] .album-card-copy h2,
html[data-theme="dark"] .album-placeholder b,
html[data-theme="dark"] .result-card h3,
html[data-theme="dark"] .result-score-row strong,
html[data-theme="dark"] .team-card h3,
html[data-theme="dark"] .team-position b,
html[data-theme="dark"] #teamGrid .team-stats dd,
html[data-theme="dark"] .match-date-block b,
html[data-theme="dark"] .match-info h3,
html[data-theme="dark"] .month-head h3,
html[data-theme="dark"] .calendar-day-top b,
html[data-theme="dark"] .calendar-match-pairing strong,
html[data-theme="dark"] .training-card:not(.training-card-featured) h3,
html[data-theme="dark"] .club-facts b,
html[data-theme="dark"] .sponsor-options b,
html[data-theme="dark"] .stats-strip b,
html[data-theme="dark"] .hero-panel--homegames .homegame-date,
html[data-theme="dark"] .hero-panel--homegames .homegame-list strong,
html[data-theme="dark"] .hero-panel--homegames .fixture-team-line > strong,
html[data-theme="dark"] .hero-panel--homegames .result-score b {
  color: #f4f8fb;
}

html[data-theme="dark"] .brand small,
html[data-theme="dark"] .site-navigation a,
html[data-theme="dark"] .footer-main nav a {
  color: #b9c8d6;
}

html[data-theme="dark"] .brand > img,
html[data-theme="dark"] .brand-footer > img {
  filter: brightness(0) invert(1) drop-shadow(0 7px 14px rgba(0, 0, 0, 0.24));
}

html[data-theme="dark"] .site-navigation a:hover,
html[data-theme="dark"] .site-navigation a.is-current {
  color: #fff;
  background: #173b5c;
}

html[data-theme="dark"] .site-navigation .nav-cta,
html[data-theme="dark"] .site-navigation .nav-cta:hover {
  border: 1px solid var(--line-strong);
  color: #fff;
  background: #071827;
}

html[data-theme="dark"] .menu-toggle,
html[data-theme="dark"] .theme-toggle {
  border-color: var(--line-strong);
  color: #dcc78f;
  background: #173b5c;
  box-shadow: none;
}

html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .menu-toggle:hover {
  background: #1d496d;
}

html[data-theme="dark"] .theme-toggle-icon--moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle-icon--sun {
  display: block;
}

html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .club-facts small {
  color: #67c7de;
}

html[data-theme="dark"] :where(
  .hero-panel,
  .stats-strip,
  .result-card,
  .team-card,
  .match-card,
  .month-card,
  .calendar-day,
  .training-card:not(.training-card-featured),
  .club-facts article,
  .sponsor-options article,
  .album-card,
  .album-meta,
  .album-placeholder,
  .calendar-match-popover,
  .empty-state
) {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
}

html[data-theme="dark"] .hero-panel--homegames {
  border-color: var(--line-strong);
}

html[data-theme="dark"] .hero-panel--homegames .featured-match {
  border-color: var(--line);
  background: transparent;
}

html[data-theme="dark"] .hero-panel--homegames .homegame-list li + li,
html[data-theme="dark"] .hero-panel--homegames .fixture-section--result,
html[data-theme="dark"] .hero-panel--homegames .hero-season-status {
  border-color: var(--line);
}

html[data-theme="dark"] .hero-panel--homegames .homegame-link,
html[data-theme="dark"] .text-link,
html[data-theme="dark"] .breadcrumb:hover,
html[data-theme="dark"] .footer-main nav a:hover {
  color: #8bd3e3;
}

html[data-theme="dark"] .stats-strip article,
html[data-theme="dark"] #teamGrid .team-stats,
html[data-theme="dark"] #teamGrid .team-stats div + div,
html[data-theme="dark"] .result-card .text-link,
html[data-theme="dark"] .footer-bottom {
  border-color: var(--line);
}

html[data-theme="dark"] .section-surface {
  border-color: var(--line);
  background: var(--background-dark);
}

html[data-theme="dark"] .section-surface::before {
  background: linear-gradient(110deg, rgba(30, 72, 112, 0.045), transparent 42%, rgba(16, 84, 105, 0.035));
}

html[data-theme="dark"] :where(.button-secondary, .button-light) {
  border-color: var(--line-strong);
  color: #edf3f7;
  background: var(--surface);
}

html[data-theme="dark"] :where(.button-secondary, .button-light):hover {
  background: var(--surface-blue);
}

html[data-theme="dark"] .button-primary {
  border-color: var(--line-strong);
  background: linear-gradient(135deg, #071827, #173b5c);
  box-shadow: none;
}

html[data-theme="dark"] :where(.team-filter, .view-btn, .month-nav) {
  border-color: var(--line);
  color: var(--muted);
  background: var(--surface);
}

html[data-theme="dark"] :where(.team-filter, .view-btn, .month-nav):hover {
  border-color: var(--line-strong);
  color: #fff;
  background: var(--surface-blue);
}

html[data-theme="dark"] .team-filter.is-active,
html[data-theme="dark"] .view-btn.is-active {
  border-color: #b8964f;
  color: #f2dfad;
  background: #071827;
  box-shadow: none;
}

html[data-theme="dark"] .view-switch {
  border-color: var(--line);
  background: #071827;
}

html[data-theme="dark"] .view-switch .view-btn.is-active {
  color: #fff;
  background: var(--surface-blue);
  box-shadow: none;
}

html[data-theme="dark"] :where(.match-date-block, .calendar-day.is-outside) {
  border-color: var(--line);
  background: var(--surface-soft);
}

/* Datum und Uhrzeit bleiben typografisch, ohne zusätzlichen Kasten. */
#spiele .match-date-block {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

html[data-theme="dark"] .training-card:not(.training-card-featured) .card-label {
  color: #67c7de;
}

html[data-theme="dark"] .training-card:not(.training-card-featured) .time-list dt {
  color: #f4f8fb;
}

html[data-theme="dark"] .training-card:not(.training-card-featured) :where(.time-list dd, address) {
  color: #b9c8d6;
}

html[data-theme="dark"] .calendar-day.has-match {
  border-color: var(--line-strong);
  background: var(--surface);
  box-shadow: none;
}

html[data-theme="dark"] #spiele :where(.venue-badge, .calendar-dot),
html[data-theme="dark"] .hero-panel--homegames .venue-badge {
  border-color: #466984;
  color: #d8e9f3;
  background: #173b5c;
}

html[data-theme="dark"] #spiele :where(.venue-badge--away, .calendar-dot--away),
html[data-theme="dark"] .hero-panel--homegames .venue-badge--away {
  border-color: #8c7540;
  color: #f0dca6;
  background: #403820;
}

html[data-theme="dark"] .calendar-match-popover {
  color: var(--ink);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] #newsGrid .venue-badge {
  color: #9dd5e4;
}

html[data-theme="dark"] #newsGrid .venue-badge--away {
  color: #f0dca6;
}

html[data-theme="dark"] .status-pill {
  border-color: var(--line-strong);
  color: #dbe7ef;
  background: var(--surface-blue);
}

html[data-theme="dark"] .error-state {
  border-color: #9f694d;
  color: #f0c4ad;
  background: #3b251f;
}

html[data-theme="dark"] .gallery-callout {
  border-color: var(--line);
  background: var(--surface);
}

html[data-theme="dark"] .site-footer {
  border-color: var(--line);
  background: #071827;
}

html[data-theme="dark"] .skeleton-card {
  background: linear-gradient(100deg, #102e4b 20%, #173b5c 40%, #102e4b 60%);
}

html[data-theme="dark"] .photo-card,
html[data-theme="dark"] .album-cover {
  background: var(--surface-blue);
}

html[data-theme="dark"] :focus-visible {
  outline-color: rgba(220, 199, 143, 0.68);
}

@media (max-width: 1040px) and (min-width: 841px) {
  .header-inner {
    gap: 8px;
  }

  .site-navigation a {
    padding-inline: 7px;
    font-size: 12px;
  }

  .site-navigation .nav-cta {
    margin-left: 2px;
    padding-inline: 11px;
  }
}

@media (max-width: 840px) {
  .header-inner {
    gap: 8px;
  }

  .menu-toggle {
    margin-left: auto;
  }

  .theme-toggle {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  html[data-theme="dark"] .site-navigation {
    border-color: var(--line);
    background: rgba(7, 24, 39, 0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle {
    transition: none;
  }
}