/* Side-Panel mit Berechnungs-Erklärung. */
.result-layout { display: flex; gap: 16px; align-items: flex-start; }
.result-layout .result-table-wrap { flex: 1.2; min-width: 0; }
.result-layout .explanation-panel-slot { flex: 1; max-width: 480px; }

.explanation-panel {
    background: #f4f7ff;
    border-left: 3px solid #4a7eff;
    padding: 14px 16px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.45;
    max-height: 70vh;
    overflow-y: auto;
    position: sticky;
    top: 8px;
}
.explanation-panel header { display: flex; justify-content: space-between; align-items: baseline; }
.explanation-panel header h4 { margin: 0; font-size: 14px; }
.explanation-panel header button.close {
    background: transparent; border: 0; font-size: 18px; cursor: pointer; color: #666;
}

.explanation-panel .step { margin: 10px 0; }
.explanation-panel .step-label {
    font-weight: bold; font-size: 11.5px; color: #333;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.explanation-panel .step-body { margin-top: 2px; }

.explanation-panel .graph { margin: 8px 0; text-align: center; }
.explanation-panel .graph svg { max-width: 100%; height: auto; }

.explanation-panel .legal {
    margin-top: 12px; padding-top: 8px; border-top: 1px solid #ddd;
    font-size: 11px; color: #666;
}

/* Anmerkungs-Kästen */
.annotation-box { border-radius: 4px; padding: 8px 10px; margin: 10px 0; font-size: 12px; }
.annotation-box .box-label {
    font-size: 10.5px; font-weight: bold; text-transform: uppercase;
    letter-spacing: 0.4px;
}
.annotation-box .box-controls {
    margin-top: 6px; display: flex; gap: 6px; align-items: center;
}
.annotation-box textarea {
    width: 100%; min-height: 50px; font-family: inherit; font-size: 12px;
    padding: 4px 6px; box-sizing: border-box;
}
.annotation-box.visible { background: #fff8dc; border-left: 3px solid #d4a600; }
.annotation-box.visible .box-label { color: #8a6a00; }
.annotation-box.internal { background: #eee; border-left: 3px solid #888; }
.annotation-box.internal .box-label { color: #555; }

/* Info-Icon in der Tabelle */
.info-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: #4a7eff; color: white; font-size: 12px; font-weight: bold;
    cursor: pointer; margin-left: 6px; vertical-align: middle;
    border: 0; padding: 0;
}
.info-icon[aria-pressed="true"] { background: #1a4a9e; }
.info-icon:hover { background: #3366dd; }

.explanation-panel-slot:empty { display: none; }

/* Ergebnistabelle (falls nicht schon vorhanden) */
.result-table { width: 100%; border-collapse: collapse; }
.result-table th, .result-table td {
    padding: 6px 8px; border-bottom: 1px solid #eee; text-align: left;
}

/* Klickbare Stat-Cards (Dashboard + Prüfprotokoll) */
.stat-card.clickable { cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.stat-card.clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.08); }
.stat-card.clickable.active-filter {
    outline: 2px solid #4a7eff;
    outline-offset: 2px;
}

/* Druck: Panel wird nicht gedruckt — dafür gibt es das separate PDF */
@media print {
    .explanation-panel, .info-icon, .print-dialog-overlay { display: none !important; }
}