.dark-mode .gwo-intro-popup .gwo-intro-title-modern {
  color: #00b3b3 !important;
}
/* Popup title: more turquoise */
.gwo-intro-title-modern {
  font-size: 2rem;
  font-weight: 900;
  color: #00b3b3;
  margin: 0 0 18px 0;
  text-align: center;
  letter-spacing: 0.01em;
  transition: color 0.2s;
}
.dark-mode .gwo-intro-title-modern {
  color: #00d4df !important;
}

/* Close button: no circle, just X, turquoise */
.gwo-intro-close-btn-modern {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: none;
  border-radius: 0;
  width: auto;
  height: auto;
  font-size: 2.1rem;
  color: #0fdac7;
  font-weight: 900;
  cursor: pointer;
  box-shadow: none;
  z-index: 10;
  transition: color 0.2s;
}
.gwo-intro-close-btn-modern:hover {
  color: #0f766e;
}
/* Modern GWÖ Intro Popup Title and Close Button */
.gwo-intro-title-modern {
  font-size: 2rem;
  font-weight: 900;
  color: #0f766e;
  margin: 0 0 18px 0;
  text-align: center;
  letter-spacing: 0.01em;
  transition: color 0.2s;
}
.gwo-intro-close-btn-modern {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: none;
  border-radius: 0;
  width: auto;
  height: auto;
  font-size: 2.1rem;
  color: #888888;
  font-weight: 900;
  cursor: pointer;
  box-shadow: none;
  z-index: 10;
  transition: color 0.2s;
}
.gwo-intro-close-btn-modern:hover {
  color: #444444;
}

/* Dark mode: make title and close button darker for contrast */
.dark-mode .gwo-intro-title-modern {
  color: #1a3a2a !important;
}
.dark-mode .gwo-intro-close-btn-modern {
  background: transparent !important;
  color: #888888 !important;
  box-shadow: none !important;
}
.dark-mode .gwo-intro-close-btn-modern:hover {
  color: #444444 !important;
}
/* GWÖ Intro Popup - Spezifischer Satz in schwarz im Dark Mode */
.dark-mode .gwo-intro-howtext {
  color: #000000 !important;
}
/* ============================================================
   DARK MODE CSS KLASSE
   ============================================================ */

.dark-mode {
  background-color: #242936;
}

.dark-mode body {
  background-color: #242936;
  color: #c9d1d9;
}

.dark-mode header,
.dark-mode .gwoe-header {
  background-color: #1f242f !important;
  border-bottom-color: #3a404f !important;
}

.dark-mode .gwoe-divider {
  border-bottom-color: #3a404f !important;
}

/* Text-Farben bleiben wie im Light Mode */

.dark-mode h1 {
  color: #a8c454 !important;
}

.dark-mode h2,
.dark-mode h3 {
  color: #00d4df !important;
}

.dark-mode p,
.dark-mode div,
.dark-mode li {
  color: #ffffff;
}

.dark-mode span {
  color: #ffffff;
}

/* GWÖ Intro Popup - Text in Dark Mode: schwarz */
.dark-mode .gwo-intro-popup p,
.dark-mode .gwo-intro-popup span {
  color: #000000 !important;
}

/* Setup Modal (Startwerte Fairness) - dunkler Hintergrund */
.dark-mode .setup-modal {
  background: #1e2532 !important;
  color: #e5e7eb !important;
}

.dark-mode .setup-modal h2 {
  color: #00d4df !important;
}

/* Wichtige Texte etwas heller */
.dark-mode strong,
.dark-mode .important {
  color: #c9d1d9 !important;
}

/* Winner Card - Labels dunkel für bessere Lesbarkeit */
.dark-mode .winner-card strong {
  color: #2b2b2b !important;
}

.dark-mode .winner-card span {
  color: #2b2b2b !important;
}

.dark-mode .winner-card p {
  color: #2b2b2b !important;
}

/* Profit Werte - Grün/Rot auch im Dark Mode */
.dark-mode .winner-card .value-positive,
.dark-mode .value-positive {
  color: #4ade80 !important;
}

.dark-mode .winner-card .value-negative,
.dark-mode .value-negative {
  color: #ff6b6b !important;
}

/* Intro Banner und GWÖ-Link Section - bessere Lesbarkeit */
.dark-mode .intro h1,
.dark-mode .intro p,
.dark-mode .intro h3 {
  color: #ffffff !important;
}

/* GWÖ-Link Text bleibt türkis */
.dark-mode .gwoe-link-section p {
  color: var(--gwoe-turq) !important;
}

.dark-mode .gwoe-link-btn {
  color: #ffffff !important;
}

/* Buttons unten (GWÖ-Mitglied werden, Spenden) - Text weiß */
.dark-mode .buttons a {
  color: #ffffff !important;
}

/* Header Button (Neues Spiel) - bleibt wie im Light Mode */
.dark-mode .btn-ghost {
  background: var(--gwoe-white) !important;
  color: var(--gwoe-turq) !important;
  border: 1px solid #dfe3e6 !important;
}

/* Videos Sektion - sichtbare weiße Box mit Border wie im Light Mode */
.dark-mode .info {
  background: var(--gwoe-white) !important;
  border-left: 6px solid var(--gwoe-green) !important;
  border-radius: var(--radius) !important;
  padding: 1.5rem !important;
  box-shadow: var(--shadow) !important;
}

.dark-mode .info h1 {
  color: var(--gwoe-green) !important;
  font-weight: 700 !important;
}

.dark-mode .info p {
  color: #4a4a4a !important;
}

/* Video Copyright-Text weiß */
.dark-mode .info .video-copyright {
  color: #ffffff !important;
}

/* Titel - dunkeltürkis wie im Light Mode */
.dark-mode .winner-title {
  color: var(--gwoe-turq) !important;
}

.dark-mode .chart-title.chart-index,
.dark-mode .chart-title.chart-values {
  color: var(--gwoe-turq) !important;
}

/* Weiße Boxen etwas dunkler machen */
.dark-mode .gwoe-link-section {
  background: #d0d3d7 !important;
}

.dark-mode .winner-section {
  background: #d0d3d7 !important;
}

.dark-mode .chart-card {
  background: #d0d3d7 !important;
}

/* Zeilen in Gewinner-Card leicht transparenter */
.dark-mode .winner-card p {
  background: rgba(247, 249, 250, 0.15) !important;
}

/* Footer dunkler */
.dark-mode footer {
  background: #1f242f !important;
  color: #c9d1d9 !important;
}

.dark-mode footer a {
  color: #00d4df !important;
}

.dark-mode .video-card {
  background: #ffffff !important;
  border: 2px solid #d0d3d7 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}

.dark-mode .video-card h2 {
  color: inherit !important;
}

.dark-mode .video-card h2.turq {
  color: var(--gwoe-turq) !important;
}

.dark-mode .video-card h2.green {
  color: var(--gwoe-green) !important;
}

.dark-mode .video-card p {
  color: #2b2b2b !important;
  font-weight: normal !important;
}

.dark-mode .icon-turq {
  background: var(--gwoe-turq) !important;
}

.dark-mode .icon-green {
  background: var(--gwoe-green) !important;
}

/* Video Copyright-Text weiß für bessere Lesbarkeit */
.dark-mode .video-copyright {
  color: #ffffff !important;
}

.dark-mode .badge-turq {
  background: #e6f2f3 !important;
  color: var(--gwoe-turq) !important;
  border: 1px solid #cfe5e7 !important;
}

.dark-mode .badge-green {
  background: #eef3e0 !important;
  color: var(--gwoe-green) !important;
  border: 1px solid #dbe6b7 !important;
}

/* Darkmode: Tabelle lesbarer machen mit Farbwechsel, ohne weiße Striche */
.dark-mode table {
  background-color: #232a36 !important;
  color: #eaf6fb !important;
  border-collapse: collapse !important;
}
.dark-mode th {
  background-color: #1a2230 !important;
  color: #00d4df !important;
  border-bottom: none !important;
}
.dark-mode td {
  background-color: #232a36 !important;
  color: #fff !important;
  border-bottom: none !important;
}
.dark-mode tr:nth-child(even) td {
  background-color: #283040 !important;
}
.dark-mode tr:nth-child(odd) td {
  background-color: #232a36 !important;
}

.dark-mode .panel,
.dark-mode .hero,
.dark-mode .game-card {
  background-color: rgba(30, 35, 48, 0.95) !important;
  border-color: #3a404f !important;
}

.dark-mode .mid-container {
  background-color: #242936 !important;
  border-color: #3a404f !important;
}

.dark-mode .step {
  background: #3a3f4f !important;
  border-color: #3a404f !important;
}

.dark-mode .stepno {
  background-color: #8ba23f !important;
  color: #ffffff !important;
}

.dark-mode input,
.dark-mode select,
.dark-mode textarea {
  background-color: #2a2f3d !important;
  border-color: #3a404f !important;
  color: #c9d1d9 !important;
}

.dark-mode label {
  color: #ffffff;
}

.dark-mode button {
  color: #ffffff !important;
}

.dark-mode .btn.link,
.dark-mode .gwoe-home-link {
  color: #00d4df !important;
}

.dark-mode a {
  color: #00d4df !important;
}

.dark-mode dialog,
.dark-mode .modal {
  background-color: #242936 !important;
  border-color: #3a404f !important;
}

.dark-mode .modal-head,
.dark-mode .modal-foot {
  border-color: #3a404f !important;
}

.dark-mode .rules li {
  background: #2f3441 !important;
  border-color: #3a404f !important;
  color: #c9d1d9;
}

.dark-mode .footer {
  border-top-color: #3a404f !important;
  background-color: #242936;
}

.dark-mode .stepper-container {
  background-color: #2a2f3d !important;
}

.dark-mode .stat-pill {
  background-color: #2a2f3d !important;
  border-color: #3a404f !important;
}

.dark-mode .error {
  color: #ff6b6b !important;
}

/* SVG/Chart Text dunkler machen */
.dark-mode svg text {
  fill: #ffffff !important;
  transition: fill 0.2s ease;
}

/* Gemeinwohl-Index Charts - bleiben wie im Light Mode */
.dark-mode .gwoe-index-chart {
  background: #ffffff !important;
  border: 1px solid #d4d4d4 !important;
}

.dark-mode .gwoe-index-chart div[style*="color"] {
  color: #111827 !important;
}

.dark-mode .gwoe-index-chart svg text {
  fill: #6b7280 !important;
}

.dark-mode .gwoe-index-chart svg line[stroke] {
  stroke: #9ca3af !important;
}

.dark-mode .gwoe-index-chart svg line[stroke="#e5e7eb"] {
  stroke: #e5e7eb !important;
}

/* Bei Hover über die Chart-Linien die Zahlen heller machen */
.dark-mode .chart-card:hover svg text {
  fill: #ffffff !important;
}

/* Aber nicht bei Gemeinwohl-Index */
.dark-mode .gwoe-index-chart:hover svg text {
  fill: #6b7280 !important;
}

/* Index Chart Sidebar - Text bleibt dunkel wie im Light Mode */
.dark-mode .index-chart-card {
  background: #ffffff !important;
  border-color: #d4d4d4 !important;
}

.dark-mode .index-chart-title {
  color: #111827 !important;
}

.dark-mode .index-chart-card svg text {
  fill: #6b7280 !important;
}

.dark-mode .index-chart-card svg line {
  stroke: #9ca3af !important;
}

.dark-mode-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background-color: #89a23a;
  color: white;
  font-size: 1.6rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 99999;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark-mode-toggle:hover {
  transform: scale(1.1);
}

.dark-mode .dark-mode-toggle {
  background-color: #00a0a7;
}

@media (max-width: 768px) {
  .dark-mode-toggle {
    bottom: 15px;
    right: 15px;
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
  }
}

@media (max-width: 480px) {
  .dark-mode-toggle {
    bottom: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }
}

/* ============================================================
   STARTSEITE - BESTIMMTE TEXTE TÜRKIS
   ============================================================ */
/* Hero-Box auf Startseite dunkler machen */
body.start-page.dark-mode .hero {
  background: rgba(26, 31, 46, 0.95) !important;
  border-color: #3a404f !important;
}

/* Boxen auf Startseite heller machen */
body.start-page.dark-mode .step {
  background: #1a1f2e !important;
  border-color: #2a303d !important;
}

.dark-mode.start-page .step h3 .step-title {
  color: #00d4df !important;
}

.dark-mode.start-page label,
.dark-mode.start-page .hero p {
  color: #00d4df !important;
}

.dark-mode.start-page .hero-motivation {
  color: #ffffff !important;
}

/* ============================================================
   ABSCHLUSSSEITE - NUR SEITENHINTERGRUND DUNKEL
   ============================================================ */

/* NUR der Body-Hintergrund wird dunkel */
body.end-page.dark-mode {
  background-color: #1a1f2e !important;
}

/* ALLE Dark Mode Styles für End-Page überschreiben - AUSSER .info section */
body.end-page.dark-mode header,
body.end-page.dark-mode .intro,
body.end-page.dark-mode section.buttons,
body.end-page.dark-mode .winner-section,
body.end-page.dark-mode .gwoe-link-section,
body.end-page.dark-mode .final-stats-section,
body.end-page.dark-mode div:not(.dark-mode-toggle):not(.video-card):not(.video-wrapper):not(.icon):not(.video-grid):not(.video-text):not(.video-head):not(.badge):not(.badge-turq):not(.badge-green),
body.end-page.dark-mode h1:not(section.info h1),
body.end-page.dark-mode h2:not(section.info h2),
body.end-page.dark-mode h3,
body.end-page.dark-mode p:not(section.info p),
body.end-page.dark-mode span:not(section.info span),
body.end-page.dark-mode table,
body.end-page.dark-mode th,
body.end-page.dark-mode td,
body.end-page.dark-mode button:not(.dark-mode-toggle),
body.end-page.dark-mode a,
body.end-page.dark-mode svg text,
body.end-page.dark-mode strong,
body.end-page.dark-mode li,
body.end-page.dark-mode label {
  background-color: unset !important;
  color: unset !important;
  border-color: unset !important;
  fill: unset !important;
  background: unset !important;
}

/* Video-Box (.info) MUSS SICHTBAR SEIN */
body.end-page.dark-mode section.info {
  background: #ffffff !important;
  border: 2px solid #a0a0a0 !important;
  border-left: 8px solid var(--gwoe-green) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1) !important;
  padding: 1.5rem !important;
  min-height: 550px !important;
}

/* GWÖ-Link Section Text bleibt türkis im Dark Mode */
body.end-page.dark-mode .gwoe-link-section p,
body.end-page.dark-mode .gwoe-link-section p strong {
  color: var(--gwoe-turq) !important;
}

/* Video-Box (.info) hell und sichtbar machen im Dark Mode */
body.end-page.dark-mode section.info {
  background: #ffffff !important;
  border: 2px solid #d0d3d7 !important;
  border-left: 6px solid var(--gwoe-green) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  padding: 1.5rem !important;
  min-height: 550px !important;
}

body.end-page.dark-mode section.info h1 {
  color: var(--gwoe-green) !important;
  font-size: 1.4rem !important;
  margin: 0 0 .4rem !important;
}

body.end-page.dark-mode section.info .video-copyright {
  color: #6b7280 !important;
}

/* Video-Cards auf end-page hell und sichtbar machen */
body.end-page.dark-mode .video-card {
  background: #ffffff !important;
  border: 2px solid #d0d3d7 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}

body.end-page.dark-mode .video-card h2,
body.end-page.dark-mode .video-card p {
  color: #2b2b2b !important;
}

/* React App - GWO Intro Text bleibt dunkel */
.dark-mode .gwo-intro-text,
.dark-mode .gwo-intro-text span {
  color: #111 !important;
}

/* GWÖ-Intro Überschrift behält Light Mode Farbe */
.dark-mode h2:has(+ button) {
  color: #0f766e !important;
}

/* Fairness Modal - Dunkler Hintergrund im Dark Mode */
.dark-mode .fairness-modal {
  background: #1a1f2e !important;
  color: #ffffff !important;
}

.dark-mode .fairness-modal .fairness-info {
  color: #ffffff !important;
}

.dark-mode .fairness-modal .fairness-info b {
  color: #ffffff !important;
}

.dark-mode .fairness-modal h2 {
  color: #00d4df !important;
}

.dark-mode .fairness-modal table {
  background-color: #242936;
}

.dark-mode .fairness-modal th {
  color: #00d4df !important;
  background-color: #1a1f2e;
  border-bottom-color: #3a404f !important;
}

.dark-mode .fairness-modal td {
  color: #ffffff;
  background-color: #242936;
  border-bottom-color: #32374a !important;
}

.dark-mode .fairness-modal button {
  background-color: #a8c454 !important;
  color: #ffffff !important;
  border: none !important;
}

/* ============================================================
   REACT APP - FAIRNESS INFO TEXT BLEIBT DUNKEL
   ============================================================ */
.dark-mode .fairness-info,
.dark-mode .fairness-info b {
  color: #111 !important;
}

/* React App - Fairness Info beh�lt Light Mode Farbe */
.dark-mode .fairness-info,
.dark-mode .fairness-info b {
  color: #111 !important;
}

/* Info Icon (ⓘ) - 1:1 wie im Light Mode, nur andere Farbe */
.dark-mode .info {
  color: #5ec5cc !important;
  margin-left: 6px;
  cursor: help;
  opacity: 0.75;
  font-size: 0.85em;
  display: inline-block;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

.dark-mode .info:hover {
  opacity: 1;
  color: #7dd4da !important;
}

/* Leicht dunklerer Hintergrund für GWÖ-Info-Boxen und Popups im Darkmode */
.dark-mode .gwo-intro-popup,
.dark-mode .gwo-intro-popup .gwo-intro-howtext,
.dark-mode .gwo-intro-popup .gwo-intro-title-modern,
.dark-mode .gwo-intro-popup .modal-content,
.dark-mode .gwo-intro-popup .modal-body {
  background-color: #e3ede6 !important; /* sanftes, leicht dunkleres Grün */
}

/* Leicht dunklerer Hintergrund für allgemeine Info-Boxen im Darkmode */
.dark-mode .info-box,
.dark-mode .modal-content,
.dark-mode .modal-body {
  background-color: #e3ede6 !important;
}

/* Text bleibt kontrastreich */
.dark-mode .info-box,
.dark-mode .modal-content,
.dark-mode .modal-body {
  color: #222 !important;
}

/* Cache buster: 20260111-143000 */