/* --- Nested I/R/O ratings charts (complete charts.css) --- */
.section-h { margin-top: 24px; margin-bottom: 8px; }

/* Accordion for Bereiche/Themen in Auswertung */
.accordion2 { border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; margin:12px 0; background:#fff; }
.accordion2 > summary { cursor:pointer; padding:12px 16px; background:#fff; font-weight:700; color:#2f6b54; list-style:none; }
.accordion2[open] > summary::marker, .accordion2 > summary::marker { display:none; }
.accordion2 .body { padding:12px 16px; border-top:1px solid #e5e7eb; }

.chart-aspekt { padding:10px 0; border-bottom:1px dashed #e5e7eb; }
.chart-aspekt:last-child { border-bottom:0; }
.chart-aspekt h4 { margin:0 0 8px; font-size:16px; }

.iro-block { margin:6px 0 14px; }
.iro-title { font-weight:700; color:#1b1b1b; margin:6px 0 6px; font-size:14px; }
.bars { display:flex; flex-direction:column; gap:6px; }
.bar-row { display:flex; align-items:center; gap:10px; position: relative; }
.bar { height:12px; min-width:2px; border-radius:999px; background:#f1f5f9; position:relative; flex:1; overflow:hidden; }
.bar > .fill { position:absolute; height:100%; left:0; top:0; width:0%; transition:width .4s ease; }
.bar-label { width:110px; font-size:12px; color:#6b7280; text-transform:uppercase; letter-spacing:.02em; }
.bar-value { width:56px; text-align:right; font-size:12px; color:#111827; }

:root {
  /* Farben für Bewertungen */
  --wesentlich:#2E7D32;   /* sattes Grün */
  --unwesentlich:#FB8C00; /* Orange */
  --irrelevant:#9E9E9E;   /* Grau */
}
.fill-wes { background: var(--wesentlich); }
.fill-unw { background: var(--unwesentlich); }
.fill-irr { background: var(--irrelevant); }
.badge-mini { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; background:#e9f2ee; color:#2f6b54; }

@media (max-width: 800px){
  .bar-label { width:96px; }
  .bar-value { width:48px; }
}

/* --- Tooltips für Balkenreihen ----------------------------------------- */
.bar-row[data-tooltip]:hover::after,
.bar-row[data-tooltip]:focus-within::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 0; top: -8px; transform: translateY(-100%);
  background: #111; color: #fff;
  padding: 8px 10px; border-radius: 8px;
  max-width: 640px; white-space: normal; line-height: 1.25;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  z-index: 50;
}
.bar-row[data-tooltip]:hover::before,
.bar-row[data-tooltip]:focus-within::before{
  content: ""; position:absolute; left:12px; top:-8px; transform: translateY(-100%);
  border:6px solid transparent; border-top-color:#111;
}


/* ---- Tooltip für Einreichungsformular aktivieren ---- */

/* Positionierungs-Kontext: Tooltip wird relativ zur Card positioniert */
.card.aspect { position: relative; }

/* Sicherstellen, dass der h3 als Trigger inline/block ist */
.card.aspect h3[data-tooltip] { display: inline-block; cursor: help; }

/* Tooltip-Pfeil & Box (kopiert/angepasst von bestehendem charts.css) */
.card.aspect h3[data-tooltip]:hover::after,
.card.aspect h3[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  top: -8px;
  transform: translateY(-100%);
  background: #111;
  color: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  max-width: 640px;
  white-space: normal;
  line-height: 1.25;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  z-index: 50;
  opacity: 1;
  pointer-events: none;
}

/* Dreieck-Pfeil */
.card.aspect h3[data-tooltip]:hover::before,
.card.aspect h3[data-tooltip]:focus::before {
  content: "";
  position: absolute;
  left: 12px;
  top: -8px;
  transform: translateY(-100%);
  border: 6px solid transparent;
  border-top-color: #111;
  z-index: 51;
}

/* Optional: smoother fade-in */
.card.aspect h3[data-tooltip]::after,
.card.aspect h3[data-tooltip]::before {
  transition: opacity .18s ease, transform .18s ease;
  opacity: 0;
}
.card.aspect h3[data-tooltip]:hover::after,
.card.aspect h3[data-tooltip]:hover::before,
.card.aspect h3[data-tooltip]:focus::after,
.card.aspect h3[data-tooltip]:focus::before {
  opacity: 1;
}
/* Eltern erlauben, dass Pseudo-Elemente sichtbar sind */
.card.aspect,
.card.aspect .body,
.accordion.thema,
.accordion.thema .body,
.accordion.bereich,
.accordion.bereich .body {
  overflow: visible !important;
}

/* Sicherstellen, dass h3 Trigger inline-block ist */
.card.aspect h3[data-tooltip] { display: inline-block; cursor: help; }

/* kleine Anpassung: Tooltip leicht zentrieren */
.card.aspect h3[data-tooltip]:hover::after,
.card.aspect h3[data-tooltip]:focus::after {
  left: 50%;
  transform: translate(-50%, -100%);
}
.card.aspect h3[data-tooltip]:hover::before,
.card.aspect h3[data-tooltip]:focus::before {
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
}