/* Zusätzliche Styles für Dark Mode */
:root[data-theme="dark"] {
  --color-bg: var(--surface-card);
  --color-primary: var(--brand-primary);
  --color-text: var(--text-body);
  --qr-card: var(--surface-card);
  --qr-border: rgba(255, 255, 255, 0.1);
  --qr-card-border: var(--qr-border);
  --qr-bg-soft: var(--surface-muted);
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) {
  background-color: var(--bg-page);
  color: var(--text-primary);
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) a {
  color: var(--accent-color, #9dc6ff);
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) h1,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) h2,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) h3,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) h4,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) h5,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) h6 {
  color: var(--text-heading);
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .uk-card-title {
  color: var(--text-heading);
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .qr-card {
  background-color: var(--qr-card);
  color: var(--text-body);
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .qr-card a {
  color: var(--accent-color, #9dc6ff);
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .uk-card h3,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .uk-card p {
  color: var(--text-body);
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode),
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .wrapper,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .content,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .uk-background-muted,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .uk-background-default,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode).uk-background-muted,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode).uk-background-default {
  background-color: var(--bg-page);
  color: var(--text-primary);
}

:where(html[data-theme="dark"] body.admin-page, body[data-theme="dark"].admin-page, body.dark-mode.admin-page) {
  background: var(--bg-page);
}

:where(html[data-theme="dark"] body.admin-page, body[data-theme="dark"].admin-page, body.dark-mode.admin-page) .uk-section,
:where(html[data-theme="dark"] body.admin-page, body[data-theme="dark"].admin-page, body.dark-mode.admin-page) .uk-container,
:where(html[data-theme="dark"] body.admin-page, body[data-theme="dark"].admin-page, body.dark-mode.admin-page) .uk-grid,
:where(html[data-theme="dark"] body.admin-page, body[data-theme="dark"].admin-page, body.dark-mode.admin-page) .uk-grid > * {
  background: transparent !important;
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .uk-progress {
  background-color: var(--surface-muted);
  color: var(--accent-color, #1e87f0);
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .uk-button-primary {
  background-color: var(--accent-color, #1e87f0);
  border-color: var(--accent-color, #1e87f0);
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .uk-button,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .uk-button-default {
  color: var(--text-heading);
  background-color: var(--surface-muted);
  border-color: var(--border-muted);
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .btn-black {
  background-color: var(--surface-muted) !important;
  color: var(--text-body) !important;
  border: 2px solid var(--border-muted);
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .btn-black:hover {
  background-color: var(--text-body) !important;
  color: var(--surface-page) !important;
  border-color: var(--text-body);
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .btn-transparent {
  background-color: transparent !important;
  color: var(--accent-color, #9dc6ff) !important;
  border: 2px solid var(--accent-color, #9dc6ff);
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .btn-transparent:hover {
  background-color: var(--accent-color, #9dc6ff) !important;
  color: var(--surface-page) !important;
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) input,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) textarea,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) select {
  background-color: var(--surface-card);
  color: var(--text-body);
  border-color: var(--border-muted);
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .sortable-list li,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .terms li,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .dropzone,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .mc-option {
  background-color: var(--surface-card);
  border-color: var(--border-muted);
  color: var(--text-body);
  font-size: 1rem;
  padding: 16px;
  white-space: normal;
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .dropzone.over {
  background-color: var(--surface-subtle);
}

:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .qr-handle {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  cursor: grab;
}

:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .qr-handle:focus {
  outline: 2px solid var(--accent-color);
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .uk-alert-success {
  background-color: #145214;
  color: var(--text-heading);
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .uk-alert-danger {
  background-color: var(--danger-600);
  color: var(--text-heading);
}

:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .uk-form-danger {
  border-color: var(--danger-600) !important;
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .uk-alert-primary {
  background-color: var(--accent-color, #003366);
  color: var(--text-heading);
}

:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .mc-option input {
  transform: scale(1.3);
  margin-right: 8px;
}

/* Einheitlicher Kartenrahmen fuer Admin-Tabs im Dunkelmodus */
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .tab-card {
  background-color: var(--surface-card);
  color: var(--text-body);
}

:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .topbar {
  background-color: var(--bg-card);
  border-color: var(--border-muted);
}

:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .git-btn,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .uk-icon-button:not(.uk-button-primary) {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-muted);
}
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .modern-info-card {
  border-color: var(--border-muted);
}

/* Sticky actions and onboarding components in Dark Mode */
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .sticky-actions {
  background: rgba(0, 0, 0, 0.95);
}

:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .onboarding-step {
  border-color: var(--border-muted);
  background: linear-gradient(135deg, var(--surface-card) 0%, var(--surface-subtle) 100%);
  box-shadow: 0 6px 30px rgba(0,0,0,0.5);
}

:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .onboarding-timeline .timeline-step {
  border-color: var(--border-muted);
  color: var(--text-muted);
}

:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .onboarding-timeline .timeline-step.inactive {
  color: var(--border-muted);
  border-color: var(--border-muted);
  cursor: not-allowed;
}

:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .onboarding-timeline .timeline-step.active,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .onboarding-timeline .timeline-step.completed {
  border-color: var(--accent-color, #1e87f0);
  color: var(--accent-color, #1e87f0);
}

:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .uk-icon,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .uk-icon-button,
:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .uk-form-icon {
  color: var(--text-body);
}

:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .site-footer {
  background-color: var(--bg-muted);
  border-color: var(--border-muted);
  color: var(--text-primary);
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

:where(html[data-theme="dark"], body[data-theme="dark"], body.dark-mode) .footer-menu a {
  color: var(--accent-color, #9dc6ff);
}

body[data-theme="dark"] .uk-icon-button {
  color: var(--text-heading);
  background-color: rgba(255, 255, 255, 0.2);
}
body[data-theme="dark"] .uk-icon-button.uk-button-primary {
  background-color: var(--accent-color, #1e87f0);
  border-color: var(--accent-color, #1e87f0);
}

/* Active state for navigation items in dark off-canvas menus */
.uk-offcanvas-bar .uk-nav-default > li.uk-active > a {
  background-color: var(--bg-accent-soft);
  color: var(--text-primary);
}

/* Active state for navigation items in dark mode */
body[data-theme="dark"] .uk-navbar-nav > li.uk-active > a,
body[data-theme="dark"] .uk-nav-default > li.uk-active > a {
  background-color: var(--bg-accent-soft);
  color: var(--text-primary);
}

/* Styles fuer QR-Scan-Popup im Dunkelmodus */
body[data-theme="dark"] .uk-modal-dialog {
  background-color: var(--surface-card);
  color: var(--text-body);
}

/* Hoverfarbe für Katalogkarten im Dunkelmodus */
body[data-theme="dark"] .qr-card.uk-card-hover:hover {
  background-color: var(--text-heading);
  color: var(--surface-page);
}

body[data-theme="dark"] .qr-card.uk-card-hover:hover h3,
body[data-theme="dark"] .qr-card.uk-card-hover:hover p {
  color: var(--surface-page);
}

/* Tabellenlesbarkeit im Dunkelmodus verbessern */
body[data-theme="dark"] .uk-table th,
body[data-theme="dark"] .uk-table td {
  color: var(--text-body);
  background-color: var(--surface-card);
  border-color: var(--border-muted);
}
body[data-theme="dark"] .uk-table thead th {
  background-color: var(--surface-muted);
}
body[data-theme="dark"] .uk-table tr {
  border-color: var(--border-muted);
}

body[data-theme="dark"] .calserver-metcal,
body[data-theme="dark"] .calserver-metcal .calserver-metcal__title,
body[data-theme="dark"] .calserver-metcal .calserver-metcal__lead,
body[data-theme="dark"] .calserver-metcal .calserver-metcal__note,
body[data-theme="dark"] .calserver-metcal .calserver-metcal__footnote,
body[data-theme="dark"] .calserver-metcal .calserver-metcal__eyebrow,
body[data-theme="dark"] .calserver-metcal .calserver-metcal__badge,
body[data-theme="dark"] .calserver-metcal .calserver-metcal__cta .uk-button,
body[data-theme="dark"] .calserver-metcal .calserver-metcal__cta .uk-button .uk-icon,
body[data-theme="dark"] .calserver-metcal .calserver-metcal__card,
body[data-theme="dark"] .calserver-metcal .calserver-metcal__card h3,
body[data-theme="dark"] .calserver-metcal .calserver-metcal__card p,
body[data-theme="dark"] .calserver-metcal .calserver-metcal__card ul,
body[data-theme="dark"] .calserver-metcal .calserver-metcal__card ul li,
body[data-theme="dark"] .calserver-metcal .calserver-metcal__card strong,
body[data-theme="dark"] .calserver-metcal .calserver-metcal__card svg {
  color: var(--text-heading);
}

body[data-theme="dark"] .calserver-metcal .calserver-metcal__cta .uk-button-default:hover,
body[data-theme="dark"] .calserver-metcal .calserver-metcal__cta .uk-button-default:focus {
  color: var(--surface-page);
}

@media (min-width: 640px) {
  body[data-theme="dark"] .sortable-list li,
  body[data-theme="dark"] .terms li,
  body[data-theme="dark"] .dropzone,
  body[data-theme="dark"] .mc-option {
    font-size: 1.3rem;
  }
}

@media (min-width: 960px) {
  body[data-theme="dark"] .sortable-list li,
  body[data-theme="dark"] .terms li,
  body[data-theme="dark"] .dropzone,
  body[data-theme="dark"] .mc-option {
    font-size: 1.5rem;
  }
  body[data-theme="dark"] .mc-option input {
    transform: scale(1.3);
  }
}

body[data-theme="dark"] .flip-card-front,
body[data-theme="dark"] .flip-card-back {
  background-color: var(--surface-card);
  color: var(--text-body);
  border: 1px solid var(--border-muted);
}

/* FAQ page elements in Dark Mode */
body[data-theme="dark"] .uk-heading-divider {
  border-bottom-color: var(--border-muted);
  color: var(--text-heading);
}

body[data-theme="dark"] .uk-heading-bullet {
  color: var(--text-heading);
}

body[data-theme="dark"] .uk-heading-bullet::before {
  border-color: var(--border-muted);
}

body[data-theme="dark"] .uk-accordion-title {
  background-color: var(--surface-card);
  color: var(--text-heading);
}

body[data-theme="dark"] .uk-accordion-title::before {
  filter: invert(1);
}

body[data-theme="dark"] .uk-accordion-content {
  background-color: var(--surface-card);
  color: var(--text-body);
}

/* Admin Pages: token-aligned dark theme surfaces and hierarchy */
[data-theme="dark"] .admin-page,
body[data-theme="dark"].admin-page {
  color: var(--text-primary);
}

[data-theme="dark"] .admin-page h1,
[data-theme="dark"] .admin-page h2,
[data-theme="dark"] .admin-page h3,
[data-theme="dark"] .admin-page h4,
[data-theme="dark"] .admin-page h5,
[data-theme="dark"] .admin-page h6,
[data-theme="dark"] .admin-page .uk-card-title {
  color: var(--text-heading);
}

[data-theme="dark"] .admin-page .uk-text-meta,
[data-theme="dark"] .admin-page .uk-text-muted {
  color: var(--text-secondary);
}

[data-theme="dark"] .admin-page .uk-card {
  background: var(--bg-card);
  border-color: var(--border-muted);
  color: var(--text-primary);
}

[data-theme="dark"] .admin-page .uk-card .uk-form-label,
[data-theme="dark"] .admin-page .uk-form-label {
  color: var(--text-heading);
}

[data-theme="dark"] .admin-page .page-tree {
  filter: none;
  opacity: 1;
  color: var(--text-primary);
}

[data-theme="dark"] .admin-page .page-tree .uk-text-meta {
  color: var(--text-secondary);
}

[data-theme="dark"] .admin-page .page-tree .uk-text-bold {
  color: var(--text-heading);
}

[data-theme="dark"] .page-tree-action-toggle {
  background-color: var(--surface-muted);
}

[data-theme="dark"] .page-tree-action-toggle:hover,
[data-theme="dark"] .page-tree-action-toggle:focus {
  background-color: var(--surface-subtle);
}

[data-theme="dark"] .page-tree-actions .uk-dropdown {
  background-color: var(--surface-card);
  border: 1px solid var(--border-muted);
}

[data-theme="dark"] .admin-page .uk-button-primary {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-on-primary);
}

[data-theme="dark"] .admin-page .uk-button-default {
  background-color: var(--bg-muted);
  border-color: var(--border-muted);
  color: var(--text-primary);
}

[data-theme="dark"] .admin-page .uk-button-default:hover,
[data-theme="dark"] .admin-page .uk-button-default:focus {
  background-color: var(--bg-subtle);
  color: var(--text-heading);
}

/* Pricing grid cards in Dark Mode */
body[data-theme="dark"] .pricing-grid .uk-card-quizrace {
  background-color: var(--qr-card);
  color: var(--text-body);
  border: 1px solid var(--qr-card-border);
}

body[data-theme="dark"] .pricing-grid .uk-card-quizrace.uk-card-popular {
  background-color: var(--qr-card);
  color: var(--text-heading);
  border: 1px solid var(--qr-card-border);
}

body[data-theme="dark"] .pricing-grid .uk-card-quizrace .uk-text-meta,
body[data-theme="dark"] .pricing-grid .uk-card-quizrace li,
body[data-theme="dark"] .pricing-grid .uk-card-quizrace h3 {
  color: var(--text-body);
}

/* Dark mode dropdown menu styling */
body.dark-mode .dropdown-menu,
body.dark-mode .v-menu__content,
body.dark-mode .uk-dropdown {
  background-color: var(--surface-card) !important;
  color: var(--text-body) !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

body.dark-mode .dropdown-menu a,
body.dark-mode .v-list-item,
body.dark-mode .uk-dropdown a,
body.dark-mode .uk-dropdown button {
  color: var(--text-body) !important;
}

body.dark-mode .dropdown-menu a:hover,
body.dark-mode .v-list-item:hover,
body.dark-mode .uk-dropdown a:hover,
body.dark-mode .uk-dropdown button:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}