/* Mermaid-Diagramm-Stile */
.mermaid {
    display: block;
    margin: 1rem auto;
    max-width: 100%;
    overflow: auto;
    text-align: center;
}

.mermaid svg {
    max-width: 100%;
    height: auto;
}

.mermaid .label {
    font-family: var(--font);
    font-size: 0.9rem;
}

.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon,
.mermaid .node path {
    fill: #f9f9f9;
    stroke: #333;
    stroke-width: 1px;
}

.mermaid .edgePath path {
    stroke: #333;
    fill: none;
    stroke-width: 1.5px;
}

.mermaid .cluster rect {
    fill: #fff;
    stroke: #333;
    stroke-width: 1px;
}

.mermaid .cluster text {
    fill: #333;
}

.mermaid .cluster .label {
    text-align: center;
}