/* =========================================================================
   Erfolgsrad für Agenturbetriebe – Styles
   -------------------------------------------------------------------------
   Inline auf werkzeuge.php eingebunden (KEIN iframe). Deshalb ist jede Regel
   auf #erfolgsrad-app gescopt: die Ursprungsdatei stylte body, den
   Universalselektor und .header und wuerde sonst Seitenkopf sowie
   Fliesstext der Website ueberschreiben.
   ========================================================================= */

#erfolgsrad-app {
  --bg-color: #060b19;
  --text-main: #e2e8f0;
  --blue-standard: #3a7cd4;
  --orange-kpi: #ffa500;

  /* Füllt die Kachel unter der Werkzeug-Leiste flächendeckend aus */
  display: flex;
  flex-direction: column;
  width: 100%;
  height: min(82vh, 900px);
  overflow: hidden;

  background: var(--bg-color);
  color: var(--text-main);
  font-family: inherit;          /* Seiten-Schrift; 'Inter' wird nicht geladen */
  line-height: 1.5;
}
/* display:flex würde das hidden-Attribut überstimmen */
#erfolgsrad-app[hidden] { display: none; }

#erfolgsrad-app *,
#erfolgsrad-app *::before,
#erfolgsrad-app *::after { box-sizing: border-box; }

/* -----------------------
   DESKTOP: ECHTES RAD
   ----------------------- */
#erfolgsrad-app .desktop-layout { display: flex; flex: 1; min-height: 0; overflow: hidden; }

#erfolgsrad-app .wheel-panel { flex: 1; width: 50%; display: flex; justify-content: center; align-items: center; position: relative; padding: 20px; }
#erfolgsrad-app .details-panel {
  flex: 1; width: 50%; background: rgba(15, 23, 42, 0.8); border-left: 1px solid rgba(255,255,255,0.1);
  padding: 40px 30px; overflow-y: auto; display: flex; flex-direction: column;
  backdrop-filter: blur(10px);
}

#erfolgsrad-app .wheel-svg { width: 100%; max-width: 800px; max-height: 100%; display: block; overflow: visible; filter: drop-shadow(0 0 30px rgba(0,0,0,0.5)); }

/* Dynamic Core */
#erfolgsrad-app .core-circle { fill: #0f172a; stroke: rgba(255,255,255,0.1); stroke-width: 2; transition: fill 0.3s; }

#erfolgsrad-app .core-text-container {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 20px; transition: color 0.3s;
}
#erfolgsrad-app .core-badge {
  font-size: 0.75rem; text-transform: uppercase; padding: 4px 10px; border-radius: 6px;
  color: #060b19; font-weight: 800; margin-bottom: 8px; letter-spacing: 1px;
  transition: background 0.3s;
}
#erfolgsrad-app .core-title { font-size: 1.5rem; font-weight: bold; line-height: 1.2; margin-bottom: 5px; }
#erfolgsrad-app .core-subtitle { font-size: 0.95rem; opacity: 0.8; font-weight: 500; }

#erfolgsrad-app .inner-slice { cursor: pointer; transition: opacity 0.3s; }
#erfolgsrad-app .inner-slice-path { stroke: var(--bg-color); stroke-width: 3; transition: filter 0.3s, opacity 0.3s; }
#erfolgsrad-app .inner-slice:hover .inner-slice-path,
#erfolgsrad-app .inner-slice.active .inner-slice-path { filter: brightness(1.2); }

#erfolgsrad-app .icon-container { pointer-events: none; transition: opacity 0.3s; }
#erfolgsrad-app .icon-container svg { color: #fff; width: 100%; height: 100%; }

#erfolgsrad-app .outer-slice-path { stroke: var(--bg-color); stroke-width: 1.5; cursor: pointer; transition: filter 0.2s, opacity 0.3s; }
#erfolgsrad-app .outer-slice-path:hover { filter: brightness(1.3); }

#erfolgsrad-app .empty-state { text-align: center; color: #8892b0; margin-top: 50px; font-style: italic; }
#erfolgsrad-app .empty-state p { color: #8892b0; }
#erfolgsrad-app .details-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 20px; }
#erfolgsrad-app .details-header .icon { width: 40px; height: 40px; }
#erfolgsrad-app .details-header h2 { margin: 0; font-size: 1.4rem; }
#erfolgsrad-app .details-badge { font-size: 0.7rem; text-transform: uppercase; font-weight: bold; padding: 3px 8px; border-radius: 4px; display: inline-block; margin-bottom: 5px; background: rgba(255,255,255,0.1); }

#erfolgsrad-app .point-card {
  background: rgba(255,255,255,0.03); border-radius: 8px; margin-bottom: 15px;
  border-left: 3px solid; overflow: hidden; transition: all 0.3s ease;
}
#erfolgsrad-app .point-header {
  padding: 15px; display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; user-select: none; transition: background 0.2s;
}
#erfolgsrad-app .point-header:hover { background: rgba(255,255,255,0.05); }
#erfolgsrad-app .point-card h4 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
#erfolgsrad-app .point-card h4 svg { width: 18px; height: 18px; }
#erfolgsrad-app .toggle-icon { font-size: 1.5rem; font-weight: bold; line-height: 1; transition: transform 0.3s; }

#erfolgsrad-app .point-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease-out; padding: 0 15px; }
#erfolgsrad-app .point-card.is-open .point-body { max-height: 800px; padding: 0 15px 15px 15px; }

/* Typography */
#erfolgsrad-app .desc-text p { margin: 0 0 10px 0; color: #cbd5e1; line-height: 1.5; font-size: 0.9rem; }
#erfolgsrad-app .desc-text p:last-child { margin-bottom: 0; }

/* -----------------------
   MOBILE: COCKPIT GRID
   ----------------------- */
#erfolgsrad-app .mobile-layout { display: none; padding: 20px; }
#erfolgsrad-app .wheel-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
#erfolgsrad-app .segment-card {
  background: rgba(30, 41, 59, 0.7); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 20px; backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.3); border-top: 4px solid;
}
#erfolgsrad-app .segment-card h3 { margin: 0 0 10px 0; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
#erfolgsrad-app .segment-card h3 svg { width: 24px; height: 24px; }
#erfolgsrad-app .points-container { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
#erfolgsrad-app .point-btn {
  background: rgba(255,255,255,0.05); border: 1px solid; border-radius: 8px;
  padding: 12px; cursor: pointer; text-align: left; font-family: inherit; font-size: 0.9rem;
  transition: all 0.2s ease; font-weight: 500; display: flex; align-items: center; gap: 10px;
}
#erfolgsrad-app .point-btn svg { width: 18px; height: 18px; opacity: 0.8; }

/* Mobile Modal – per <teleport> an <body> gehaengt, deshalb OHNE
   #erfolgsrad-app-Praefix. Die Klassennamen sind dafuer eindeutig. */
.erfolgsrad-modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(6, 11, 25, 0.85); display: flex; justify-content: center; align-items: center;
  z-index: 2147483000; backdrop-filter: blur(5px); padding: 15px;
}
.erfolgsrad-modal-content {
  background: #0f172a; width: 100%; max-width: 500px; max-height: 80vh; overflow-y: auto;
  padding: 30px; border-radius: 16px; color: #e2e8f0;
  position: relative; box-shadow: 0 25px 50px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1);
}
/* Am OVERLAY ansetzen, nicht erst am Content: Overlay und Content tragen
   beide width/height:100% PLUS padding. Ohne border-box addiert sich das
   Padding auf die 100% — das Overlay wurde dadurch 30px breiter und hoeher
   als der Viewport und schob das Modal sichtbar nach rechts unten. Die
   Regel deckt den Content als Kind mit ab; #erfolgsrad-app kann das nicht
   leisten, weil <teleport> das Overlay an <body> haengt. */
.erfolgsrad-modal-overlay,
.erfolgsrad-modal-overlay *,
.erfolgsrad-modal-overlay *::before,
.erfolgsrad-modal-overlay *::after { box-sizing: border-box; }
.erfolgsrad-modal-content h3 { font-size: 1.2rem; }
.erfolgsrad-modal-content h3 svg { width: 24px; height: 24px; }
.erfolgsrad-modal-close { position: absolute; top: 15px; right: 15px; background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; }

.erfolgsrad-modal-desc p { color: #cbd5e1; line-height: 1.5; margin: 0 0 15px 0; font-size: 0.95rem; }
.erfolgsrad-modal-desc p:last-child { margin-bottom: 0; }

/* MEDIA QUERY – Umschaltpunkt identisch zu isMobile (window.innerWidth <= 1024) */
@media (max-width: 1024px) {
  /* Kachel wächst mit dem Inhalt, die Seite scrollt – kein zweiter Scroller */
  #erfolgsrad-app { height: auto; overflow: visible; }
  #erfolgsrad-app .desktop-layout { display: none !important; }
  #erfolgsrad-app .mobile-layout { display: block !important; }
}

/* Button Hovers */
#erfolgsrad-app .btn-standard:hover { background: var(--blue-standard) !important; color: #fff !important; box-shadow: 0 0 10px var(--blue-standard); }
#erfolgsrad-app .btn-kpi:hover { background: var(--orange-kpi) !important; color: #000 !important; box-shadow: 0 0 10px var(--orange-kpi); }