/* =============================================================================
   RHYLOO Light Theme
   Aktiviert durch die Klasse `theme-light` auf <html> (documentElement).
   Standard bleibt Dark. Akzentfarben (Grün, Rot, Gold, Violett) bleiben in
   beiden Themes gleich; nur Hintergründe, Flächen, Text und Rahmen werden
   umgeschaltet. Helle Akzent-Textfarben werden für Lesbarkeit auf Weiß
   abgedunkelt (kein Hell-auf-Hell).
   ============================================================================= */

/* ---- CSS-Variablen für die React-Inhaltsseiten (Blog/FAQ/Vergleiche/…) ---- */
:root {
  --rh-page: #0D0D0D;
  --rh-footer: #0B0B0B;
  --rh-surface: #111111;
  --rh-surface2: #141414;
  --rh-imgph: #151515;
  --rh-card: rgba(255,255,255,0.03);
  --rh-card2: rgba(255,255,255,0.05);
  --rh-card-faint: rgba(255,255,255,0.02);
  --rh-chip: rgba(255,255,255,0.05);
  --rh-text: #ffffff;
  --rh-text-strong: #d4d4d4;
  --rh-text-muted: #b3b3b3;
  --rh-text-mut2: #9a9a9a;
  --rh-text-mut3: #8a8a8a;
  --rh-text-faint: #7d7d7d;
  --rh-text-faint2: #666666;
  --rh-border: rgba(255,255,255,0.08);
  --rh-border-faint: rgba(255,255,255,0.06);
  --rh-border-strong: rgba(255,255,255,0.14);
  --rh-header-bg: rgba(17,17,17,0.95);
  --rh-link: #6fce78;
  --rh-link-hover: #8fe098;
}

html.theme-light {
  --rh-page: #ffffff;
  --rh-footer: #f3f3f5;
  --rh-surface: #f6f6f7;
  --rh-surface2: #eef0f1;
  --rh-imgph: #e9eaec;
  --rh-card: rgba(0,0,0,0.03);
  --rh-card2: rgba(0,0,0,0.05);
  --rh-card-faint: rgba(0,0,0,0.02);
  --rh-chip: rgba(0,0,0,0.05);
  --rh-text: #16181d;
  --rh-text-strong: #2a2d33;
  --rh-text-muted: #3a3d42;
  --rh-text-mut2: #55585e;
  --rh-text-mut3: #5c5f65;
  --rh-text-faint: #6b6e74;
  --rh-text-faint2: #6d7075;
  --rh-border: rgba(0,0,0,0.10);
  --rh-border-faint: rgba(0,0,0,0.08);
  --rh-border-strong: rgba(0,0,0,0.14);
  --rh-header-bg: rgba(255,255,255,0.90);
  --rh-link: #2f8a38;
  --rh-link-hover: #256e2d;
}

/* Grundfläche des Dokuments (überschreibt das Inline-Style am <body>). */
html.theme-light body { background-color: #ffffff !important; color: #16181d !important; }

/* ============================ STATISCHE SEITEN ============================= */
/* Tailwind-Utility-Klassen (arbitrary values) werden gezielt überschrieben.  */

/* ---- Hintergründe: dunkel -> hell ---- */
html.theme-light .bg-\[\#0D0D0D\],
html.theme-light .bg-\[\#0E0E0E\] { background-color: #ffffff !important; }
html.theme-light .bg-\[\#0B0B0B\] { background-color: #f3f3f5 !important; }
html.theme-light .bg-\[\#111111\] { background-color: #f6f6f7 !important; }
html.theme-light .bg-\[\#141414\] { background-color: #eef0f1 !important; }
html.theme-light .bg-\[\#1A1A1A\] { background-color: #e7e8ea !important; }

/* ---- Transluzente weiße Flächen -> transluzentes Schwarz ---- */
html.theme-light .bg-white\/\[0\.02\] { background-color: rgba(0,0,0,0.02) !important; }
html.theme-light .bg-white\/\[0\.03\] { background-color: rgba(0,0,0,0.03) !important; }
html.theme-light .bg-white\/\[0\.04\] { background-color: rgba(0,0,0,0.035) !important; }
html.theme-light .bg-white\/\[0\.05\] { background-color: rgba(0,0,0,0.045) !important; }
html.theme-light .bg-white\/\[0\.06\] { background-color: rgba(0,0,0,0.05) !important; }
html.theme-light .bg-white\/\[0\.07\] { background-color: rgba(0,0,0,0.06) !important; }

/* ---- Text: weiß/grau -> dunkel ---- */
html.theme-light .text-white { color: #16181d !important; }
html.theme-light .text-\[\#A0A0A0\] { color: #55585e !important; }
html.theme-light .text-\[\#8a8a8a\] { color: #5c5f65 !important; }
html.theme-light .text-\[\#666666\] { color: #6d7075 !important; }
html.theme-light .text-\[\#C8C8C8\] { color: #33363b !important; }
html.theme-light .text-\[\#cfcfcf\] { color: #33363b !important; }
html.theme-light .text-\[\#D8D8D8\] { color: #2e3136 !important; }
html.theme-light .text-\[\#555555\] { color: #6d7075 !important; }

/* ---- Helle Akzent-Textfarben für Weiß abdunkeln (Lesbarkeit) ---- */
html.theme-light .text-\[\#8FD196\] { color: #2f8a38 !important; }
html.theme-light .text-\[\#AC99C6\] { color: #6b5b8a !important; }
html.theme-light .text-\[\#C9BBDD\] { color: #6b5b8a !important; }
html.theme-light .text-\[\#FF8272\] { color: #d63a28 !important; }
html.theme-light .text-\[\#EEC216\] { color: #9a7d00 !important; }

/* ---- Rahmen: weiß-transluzent -> schwarz-transluzent ---- */
html.theme-light .border-white\/\[0\.06\] { border-color: rgba(0,0,0,0.08) !important; }
html.theme-light .border-white\/\[0\.07\] { border-color: rgba(0,0,0,0.09) !important; }
html.theme-light .border-white\/\[0\.08\] { border-color: rgba(0,0,0,0.10) !important; }
html.theme-light .border-white\/\[0\.1\],
html.theme-light .border-white\/\[0\.10\] { border-color: rgba(0,0,0,0.12) !important; }
html.theme-light .border-white\/\[0\.12\] { border-color: rgba(0,0,0,0.14) !important; }
html.theme-light .border-white\/\[0\.14\] { border-color: rgba(0,0,0,0.16) !important; }
html.theme-light .border-white { border-color: rgba(0,0,0,0.12) !important; }

/* ---- Hero „Hase“-Effekt: für hellen Hintergrund anpassen ---- */
/* Die Hase-Grafik nutzt mix-blend-mode:screen (nur auf Dunkel korrekt). Im
   Light-Theme bekommt der maskierte Wrapper einen dunklen Untergrund, sodass
   die Grafik als dunkler „Orb“ auf heller Seite erhalten bleibt. */
html.theme-light .hase-wrap { background-color: #0D0D0D; }
/* Rechter Verlauf-Fade des Heros ins Seitenweiß statt ins Schwarz. */
html.theme-light .hero-fade {
  background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.80) 15%, rgba(255,255,255,0.18) 46%, rgba(255,255,255,0) 74%) !important;
}

/* ---- Referenz-Logos: helle Karten auf heller Seite abgrenzen ---- */
html.theme-light .logo-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 10px 30px -14px rgba(0,0,0,0.25);
}
html.theme-light .logo-card:hover { box-shadow: 0 18px 40px -16px rgba(0,0,0,0.32); }

/* ---- Toggle-Button (Dark/Light-Schalter) ---- */
#rh-theme-toggle {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 2147483000;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(17,17,17,0.92);
  color: #EEC216;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
#rh-theme-toggle:hover { transform: translateY(-2px); }
html.theme-light #rh-theme-toggle {
  border-color: rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.92);
  color: #459C4D;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.25);
}
@media (max-width: 640px) {
  #rh-theme-toggle { width: 40px; height: 40px; font-size: 16px; left: 14px; bottom: 14px; }
}