/* Circle Menu CSS Tuning Kit
   --------------------------------------------------
   Anpassbare Layer für Feinjustierung ohne Kern-Dateien zu ändern.
   Reihenfolge: wird NACH circle-menu.css / landing.css / circlemenu-addon.css geladen.
*/
:root {
  /* Globale Feinjustierung */
  --cm-segment-text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  --cm-label-font-weight: 600;
  --cm-label-letter-spacing: .4px;
  --cm-label-text-transform: none; /* z.B. uppercase */
  --cm-tooltip-bg: rgba(0,0,0,0.75);
  --cm-tooltip-color: #fff;
  --cm-tooltip-radius: 6px;
  --cm-rim-color-override: none; /* z.B. rgba(255,255,255,0.15) */
}

/* SVG Segment Labels */
.segment-text {
  text-shadow: var(--cm-segment-text-shadow);
  font-weight: var(--cm-label-font-weight);
  letter-spacing: var(--cm-label-letter-spacing);
  text-transform: var(--cm-label-text-transform);
}

/* Tooltip Styling */
.tooltip#tooltip {
  background: var(--cm-tooltip-bg);
  color: var(--cm-tooltip-color);
  border-radius: var(--cm-tooltip-radius);
  backdrop-filter: blur(4px) saturate(140%);
  -webkit-backdrop-filter: blur(4px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 6px 10px;
  font-size: 14px;
}

/* Optional: Rim Farbe überschreiben */
.menu-rim {
  stroke: var(--cm-rim-color-override, var(--menu-rim-color));
}

/* Responsive Liste Feintuning */
.responsive-list .segment-link {
  transition: filter .2s, transform .2s;
}
.responsive-list .segment-link:hover {
  transform: translateX(2px);
}

/* Center Logo (falls Overlay aktiv) */
#r4it-center-logo-overlay img, #r4it-center-logo-overlay svg {
  filter: drop-shadow(0 0 6px rgba(0,0,0,.4));
}

/* Utility Klassen */
.cm-hide-icons .segment-text .fa { display:none; }
.cm-uppercase-labels .segment-text { text-transform: uppercase; }

/* Debug helper (aktivieren durch body.cm-debug) */
body.cm-debug .menu-segment { outline:1px dashed #f0f; }
body.cm-debug .segment-images image { outline:1px solid #0ff; }
/* Segment image layer refinements */
svg .segment-images image {
  image-rendering: auto;
  mix-blend-mode: normal;
  opacity: 0.95;
  transition: opacity .35s ease, transform .35s ease;
}
svg .segment-images image:hover { opacity:1; }
/* When a segment is transparent, ensure its image isn't dimmed by leftover gradient */
svg .menu-group path.menu-segment[style*="fill: transparent"] { pointer-events:auto; }

/* ================================================================
   SVG-Größenkorrektur (Prod-Overlay)
   Problem: .menu-svg erbt width:100% von landing.css (Plugin),
   wobei 100% = 100vw (.menu-wrapper width:100vw) → bildschirmgroßes SVG.
   Fix: Explizite Pixelgröße passend zum viewBox="0 0 480 480".
   ================================================================ */
.menu-svg {
  width: min(480px, 88vw) !important;
  height: min(480px, 88vw) !important;
  max-width: 480px !important;
  max-height: 480px !important;
}