/* LEVADIS 4F v4.0.1 – Smiley-Farben angepasst (dezente Markenfarbe) */
.lev4f {
  --violett: #574b90;
  --blau: #2B6CB0;
  --tuerkis: #22D1C7;
  --orange: #FF8A3D;
  --bg: #f7f8fb;
  --card: #fff;
  --muted: #667089;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.lev4f .card {
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
  padding: 16px;
  margin: 12px 0;
}

.lev4f h2 { margin: .2rem 0 .4rem; color: #433a6e; }
.lev4f h3 { margin: 14px 0 4px; color: #433a6e; }

.lev4f .header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 8px;
}

.lev4f .muted { color: var(--muted); }

.lev4f .btn {
  background: #e7e8f0;
  color: #433a6e;
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}
.lev4f .btn.primary { background: #433a6e; color: #fff; }
.lev4f .btn:hover { filter: brightness(.97); box-shadow: 0 2px 6px rgba(0,0,0,.06); }

.lev4f .stack { display: flex; flex-direction: column; gap: 12px; }

.lev4f details.card>summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lev4f details.card>summary::-webkit-details-marker { display: none; }

.lev4f .pill {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: inline-block;
}

.lev4f .qs {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lev4f .qrow {
  display: grid;
  grid-template-columns: 48px 1fr 220px;
  gap: 10px;
  align-items: center;
  border: 1px solid #e6e8ef;
  border-radius: 10px;
  padding: 10px;
}

.lev4f .qnum { font-weight: 700; color: #97a; }
.lev4f .qtext { line-height: 1.35; }

/* -----------------------------------------------------------
   SMILEYS – dezente LEVADIS®-Farbe
   ----------------------------------------------------------- */
.lev4f .smileys {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  user-select: none;
}

.lev4f .smiley {
  cursor: pointer;
  transition: transform .15s, opacity .15s, color .2s ease;
  opacity: .55;
  font-size: 1.55rem;
  color: var(--violett);
}

/* Einheitliche Farbe für alle Werte */
.lev4f .smiley[data-val="1"],
.lev4f .smiley[data-val="2"],
.lev4f .smiley[data-val="3"],
.lev4f .smiley[data-val="4"],
.lev4f .smiley[data-val="5"] {
  color: var(--violett);
}

/* Hover- und Auswahl-Effekt */
.lev4f .smiley:hover {
  transform: scale(1.15);
  opacity: .9;
  color: #6b5db0; /* leicht helleres Violett */
}

.lev4f .smiley.selected {
  transform: scale(1.25);
  opacity: 1;
  color: #433a6e; /* dunkleres Akzentviolett */
}

/* Für SVG-Icons */
.lev4f .smiley svg path {
  fill: var(--violett) !important;
  stroke: var(--violett) !important;
  opacity: 0.85;
}

/* -----------------------------------------------------------
   ERGEBNISBEREICH
   ----------------------------------------------------------- */
.lev4f #result-view h2 { margin-bottom: 2px; }
.lev4f #subtitle { color: #667089; font-size: .95rem; margin-bottom: 10px; }

.lev4f .charts {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}
.lev4f .charts .chartbox { flex: 1; min-width: 0; }
.lev4f .charts canvas {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
}

.lev4f #codebox {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f6f6fb;
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 12px;
}

.lev4f .legend4f {
  margin-top: 12px;
  font-size: 0.95rem;
  color: #433a6e;
  line-height: 1.45;
}
.lev4f .legend4f h3 { margin-bottom: 8px; }
.lev4f .legend4f ul { list-style: none; padding: 0; margin: 0; }
.lev4f .legend4f li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0;
}
.lev4f .legend4f .color {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lev4f .result-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.hidden { display: none !important; }