/* ============================================================
   FARBSETS – hoerhaus-intranet
   Alle Variablen erben von :root (style.css), hier nur Overrides.
   Selektoren mit html[data-colorset] haben höhere Spezifität als :root.
   ============================================================ */

/* ---- 1. WALDGRÜN (Standard) ----------------------------- */
html[data-colorset="waldgruen"] {
  --color-utility-bg:     #0f1a11;
  --color-header-bg:      #142e1a;
  --color-primary:        #1e6b34;
  --color-primary-hover:  #145226;
  --color-primary-mid:    #3a9956;
  --color-primary-pale:   #e8f2eb;
  --color-primary-border: #c3ddc9;
  --color-footer-bg:      #0e1f11;
  --color-tag-bg:         #ddf0e3;
  --color-tag-text:       #175c2a;
}

/* ---- 2. OZEANBLAU --------------------------------------- */
html[data-colorset="ozeanblau"] {
  --color-utility-bg:     #081525;
  --color-header-bg:      #0d2137;
  --color-primary:        #1056a0;
  --color-primary-hover:  #0a4280;
  --color-primary-mid:    #2b82cc;
  --color-primary-pale:   #e8f2fb;
  --color-primary-border: #b8d4f0;
  --color-footer-bg:      #08121e;
  --color-tag-bg:         #d6eaff;
  --color-tag-text:       #0a3e80;
}

/* ---- 3. SCHIEFER (Teal) --------------------------------- */
html[data-colorset="schiefer"] {
  --color-utility-bg:     #0f2025;
  --color-header-bg:      #183035;
  --color-primary:        #0d7272;
  --color-primary-hover:  #095858;
  --color-primary-mid:    #1a9898;
  --color-primary-pale:   #e5f4f4;
  --color-primary-border: #aad8d8;
  --color-footer-bg:      #0a1e22;
  --color-tag-bg:         #cceeee;
  --color-tag-text:       #0a5252;
}

/* ---- 4. PFLAUME ----------------------------------------- */
html[data-colorset="pflaume"] {
  --color-utility-bg:     #1a1028;
  --color-header-bg:      #28183e;
  --color-primary:        #6a2c9e;
  --color-primary-hover:  #511d7d;
  --color-primary-mid:    #8e4ec4;
  --color-primary-pale:   #f2ebff;
  --color-primary-border: #d4b8f0;
  --color-footer-bg:      #160e22;
  --color-tag-bg:         #e8d5ff;
  --color-tag-text:       #4a1a74;
}

/* ---- 5. KUPFER ------------------------------------------ */
html[data-colorset="kupfer"] {
  --color-utility-bg:     #1e1006;
  --color-header-bg:      #2e1c0c;
  --color-primary:        #8c4200;
  --color-primary-hover:  #6e3200;
  --color-primary-mid:    #b85c00;
  --color-primary-pale:   #fff4e8;
  --color-primary-border: #f0d0a0;
  --color-footer-bg:      #1a1006;
  --color-tag-bg:         #ffe8c8;
  --color-tag-text:       #6e3000;
}

/* ---- 6. GRAPHIT ----------------------------------------- */
html[data-colorset="graphit"] {
  --color-utility-bg:     #121728;
  --color-header-bg:      #1c2236;
  --color-primary:        #2c4fa0;
  --color-primary-hover:  #1e3a80;
  --color-primary-mid:    #4a6ac8;
  --color-primary-pale:   #eaedff;
  --color-primary-border: #c0ccf0;
  --color-footer-bg:      #101520;
  --color-tag-bg:         #d8deff;
  --color-tag-text:       #1a3070;
}

/* ---- 7. MITTERNACHT (hoher Kontrast) -------------------- */
html[data-colorset="mitternacht"] {
  --color-utility-bg:     #04080f;
  --color-header-bg:      #07101e;
  --color-primary:        #0057cc;
  --color-primary-hover:  #0040a0;
  --color-primary-mid:    #3380e8;
  --color-primary-pale:   #e6f0ff;
  --color-primary-border: #b0ccf8;
  --color-footer-bg:      #04080f;
  --color-tag-bg:         #cce0ff;
  --color-tag-text:       #003899;
}

/* ---- 8. KARMESIN (hoher Kontrast) ----------------------- */
html[data-colorset="karmesin"] {
  --color-utility-bg:     #100404;
  --color-header-bg:      #1e0808;
  --color-primary:        #c00018;
  --color-primary-hover:  #980012;
  --color-primary-mid:    #e02a3e;
  --color-primary-pale:   #fff0f2;
  --color-primary-border: #ffc0c8;
  --color-footer-bg:      #100404;
  --color-tag-bg:         #ffe0e4;
  --color-tag-text:       #900012;
}

/* ---- 9. SONNENGOLD (hoher Kontrast) --------------------- */
html[data-colorset="sonnengold"] {
  --color-utility-bg:     #100e00;
  --color-header-bg:      #1e1800;
  --color-primary:        #7a5000;
  --color-primary-hover:  #5c3c00;
  --color-primary-mid:    #c07800;
  --color-primary-pale:   #fff8e0;
  --color-primary-border: #f0d870;
  --color-footer-bg:      #100e00;
  --color-tag-bg:         #fff0b8;
  --color-tag-text:       #5c3800;
}


/* ============================================================
   FARBSET-UMSCHALTER UI
   ============================================================ */
.colorset-wrapper {
  position: relative;
  flex-shrink: 0;
}

/* Toggle-Button in der Utility-Bar */
.colorset-btn {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 4px;
  padding: .22rem .6rem;
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  cursor: pointer;
  font-family: inherit;
  letter-spacing: .03em;
  transition: background .12s, color .12s;
  line-height: 1;
}
.colorset-btn:hover {
  background: rgba(255,255,255,.18);
  color: #fff;
}
.colorset-btn svg { flex-shrink: 0; }

/* Aktuelle Swatch-Vorschau im Button */
.colorset-btn-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary-mid);
  border: 1.5px solid rgba(255,255,255,.4);
  flex-shrink: 0;
  transition: background .2s;
}

/* Panel */
#colorset-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.1);
  padding: 1rem;
  width: 220px;
  animation: panel-in .15s ease;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #colorset-panel { animation: none; }
}

#colorset-panel[hidden] { display: none; }

.colorset-panel-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: .6rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid #f0f0f0;
}

/* Breiter für 9 Farbsets */
#colorset-panel {
  width: 248px;
}

.colorset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
}

.colorset-pick {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .65rem;
  border: 1.5px solid #e8e8e8;
  border-radius: 6px;
  background: #fafafa;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 500;
  color: #333;
  font-family: inherit;
  transition: border-color .12s, background .12s;
  text-align: left;
  line-height: 1.2;
}
.colorset-pick:hover {
  border-color: #bbb;
  background: #f0f0f0;
}
.colorset-pick.is-active {
  border-color: currentColor;
  background: #fff;
  font-weight: 700;
}

.colorset-swatch {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

/* Haken-Markierung für aktives Set */
.colorset-pick.is-active::after {
  content: '✓';
  margin-left: auto;
  font-size: .7rem;
  opacity: .6;
}