/* ===========================
   CHART CONTAINER
=========================== */
.chart-wrapper {
    position: relative;
    width: 100%;
    padding: 20px 24px;
}

/* ===========================
   SPALTEN
=========================== */
.chart-columns {
    display: flex;
    gap: 48px;
    width: 100%;
}

/* direkte Kinder = Spalten-Wrapper */
.chart-columns > div {
    flex: 1 1 0;
    min-width: 0;
}

.chart-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* ===========================
   NODE DESIGN
=========================== */
.node {
    background: #ffffff;
    border-radius: 10px;
    padding: 12px;
    border: 1px solid #d7dbe0;
    position: relative;
    cursor: default;
    transition: 0.2s;
    box-shadow: 0 1px 3px rgba(15,23,42,0.08);

    width: 100%;
    box-sizing: border-box;
    flex: 1 1 auto;
}

.node.node-task {
    border-color: rgba(56,189,248,0.7);
    background: rgba(224,242,254,0.97);
}

.node.node-hazard {
    border-color: rgba(248,113,113,0.8);
    background: rgba(254,242,242,0.98);
}

.node.node-equipment {
    border-color: rgba(52,211,153,0.8);
    background: rgba(236,253,245,0.98);
}

/* neue lila Spalte: Betriebsanweisungen */
.node.node-instruction {
    border-color: rgba(168,85,247,0.85);        /* kräftiges Lila */
    background: rgba(250,245,255,0.98);         /* pastelliges Lila */
}

.node-title {
    font-weight: 600;
    margin-bottom: 6px;
}

.node-sub {
    font-size: 12px;
    color: #6b7280;
}

/* ===========================
   HAZARD RISK BALKEN
=========================== */
.hazard-risk-bar {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.risk-green   { background:#dcfce7; color:#166534; }
.risk-yellow  { background:#fef9c3; color:#92400e; }
.risk-orange  { background:#ffedd5; color:#9a3412; }
.risk-red     { background:#fee2e2; color:#b91c1c; }
.risk-darkred { background:#991b1b; color:#fef2f2; }

/* ===========================
   EQUIPMENT WARNUNGEN
=========================== */
.warn-icon {
    font-size: 18px;
    position: absolute;
    right: 8px;
    top: 8px;
}

.warn-red    { color:#dc2626; }
.warn-yellow { color:#d97706; }

/* ===========================
   HOVER LOGIK
=========================== */
.node.is-focused {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 2px rgba(47,128,237,0.4),
        0 6px 18px rgba(15,23,42,0.28);
    z-index: 10;
}

.node.is-dimmed {
    opacity: 0.25;
    filter: grayscale(0.15);
}

.chart-line.is-dimmed {
    stroke-opacity: 0.15;
    stroke-width: 2;
}

.chart-line.is-related {
    stroke-opacity: 1;
    stroke-width: 4;
}

/* ===========================
   SVG LINIEN
=========================== */
.chart-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.chart-line-th {
    stroke: #38bdf8;   /* blau */
}

.chart-line-he {
    stroke: #22c55e;   /* grün */
}

/* neue lila Linie Equipment → Betriebsanweisung */
.chart-line-ei {
    stroke: #a855f7;   /* kräftiges Lila */
}