/*
  zaios-theme-cyan.css
  Einfach in jede HTML-Datei nach style.css einbinden:
  <link rel="stylesheet" href="/zaios-theme-cyan.css" />
  Keine HTML-Änderungen nötig.
*/

/* ============================================================
   Dark Mode (default) — Grün → Cyan
   ============================================================ */
:root {
  --accent:           #00bfa8;
  --accent-light:     #009d8b;
  --accent-glow:      rgba(0,191,168,0.12);
  --accent-gradient:  linear-gradient(135deg, #00d4ba, #009d8b);
  --green:            #00bfa8;
  --green-light:      #5eead4;
  --green-glow:       rgba(0,191,168,0.12);
}

/* ============================================================
   Light Mode — Grün → Cyan
   ============================================================ */
[data-theme="light"] {
  --accent:           #00bfa8;
  --accent-light:     #009d8b;
  --accent-glow:      rgba(0,191,168,0.12);
  --accent-gradient:  linear-gradient(135deg, #00bfa8, #009d8b);
  --green:            #00bfa8;
  --green-light:      #5eead4;
}

/* ============================================================
   High Contrast — Grün → Cyan
   ============================================================ */
[data-theme="hc"] {
  --accent:           #00ffdd;
  --accent-light:     #00ffdd;
  --accent-glow:      rgba(0,255,221,0.2);
  --accent-gradient:  linear-gradient(135deg, #00ffdd, #00ffdd);
  --green:            #00ffdd;
  --green-light:      #00ffdd;
  --green-glow:       rgba(0,255,221,0.2);
}

/* ============================================================
   Hardcoded Grün-Werte in nav.css überschreiben
   ============================================================ */
.nav-extra-link.active,
.nav-link.nav-extra-link.active {
  color: #00bfa8 !important;
}

[data-theme="light"] .nav-extra-link.active,
[data-theme="light"] .nav-link.nav-extra-link.active {
  color: #009d8b !important;
}

[data-theme="hc"] .nav-extra-link.active,
[data-theme="hc"] .nav-link.nav-extra-link.active {
  color: #00ffdd !important;
}

.lang-btn.active .lang-flag {
  background: #00bfa8;
}


/* ============================================================
   Logo SVGs (Quell-SVGs sind weiß — Farbe via CSS-Filter)
   ============================================================ */

/* Nav Z-Logo ist jetzt Orange (#FF6B2C) — kein Filter nötig */
.nav-logo img.logo-img {
  filter: none;
}

/* Dark: Splash-Logo Cyan + Glow */
.splash-logo {
  filter: invert(65%) sepia(50%) saturate(600%)
          hue-rotate(130deg) brightness(95%) contrast(90%)
          drop-shadow(0 0 60px rgba(0,191,168,0.3)) !important;
}

/* Dark: Hero + Footer Wordmark — weiß lassen (auf dunklem Hintergrund) */
.hero-brand img.logo-img,
.footer-logo img.logo-img {
  filter: none;
}

/* Light: Nav Z-Logo bleibt Orange — kein Filter */
[data-theme="light"] .nav-logo img.logo-img {
  filter: none;
}

[data-theme="light"] .hero-brand img.logo-img,
[data-theme="light"] .footer-logo img.logo-img {
  filter: invert(10%) sepia(20%) saturate(400%)
          hue-rotate(170deg) brightness(30%) contrast(100%);
}

[data-theme="light"] .splash-logo {
  filter: invert(10%) sepia(20%) saturate(400%)
          hue-rotate(170deg) brightness(30%) contrast(100%)
          drop-shadow(0 0 60px rgba(0,191,168,0.15)) !important;
}

/* HC: weiß lassen (maximaler Kontrast) */
[data-theme="hc"] .nav-logo img.logo-img,
[data-theme="hc"] .hero-brand img.logo-img,
[data-theme="hc"] .footer-logo img.logo-img {
  filter: none;
}

[data-theme="hc"] .splash-logo {
  filter: drop-shadow(0 0 60px rgba(0,255,221,0.4)) !important;
}

/* ============================================================
   Stat-Zahlen (gradient text) — Orange Akzent
   ============================================================ */
.stat-num {
  background: linear-gradient(135deg, #FF6B2C, #E55A1F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   Back-to-top Button — Orange
   ============================================================ */
.back-to-top {
  background: #FF6B2C;
  box-shadow: 0 4px 16px rgba(255,107,44,0.3);
}
.back-to-top:hover {
  background: #E55A1F;
}

/* ============================================================
   Tab-Button aktiv — Orange
   ============================================================ */
.tab-btn.active {
  background: #FF6B2C;
  border-color: #FF6B2C;
}

/* ============================================================
   Card hover glow
   ============================================================ */
.card:hover {
  border-color: #00bfa8;
  box-shadow: 0 0 20px rgba(0,191,168,0.15);
}

[data-theme="hc"] .card:hover {
  border-color: #00ffdd;
}