.merkkasten {
    border-left: 4px solid;
    border-radius: 0.375rem;
    padding: 0.85rem 1.1rem;
    margin-bottom: 0.75rem;
    background-color: rgba(0,0,0,0.03);
}
.merkkasten.formel  { border-color: #2980b9; background-color: rgba(41,128,185,0.06); }
.merkkasten.wichtig { border-color: #e67e22; background-color: rgba(230,126,34,0.06); }
.merkkasten.tipp    { border-color: #27ae60; background-color: rgba(39,174,96,0.06); }
.merkkasten.einheit { border-color: #8e44ad; background-color: rgba(142,68,173,0.06); }

.dreieck-wrapper {
    position: relative;
    width: 160px;
    height: 140px;
    margin: 2rem auto;
}
.dreieck-form {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(41,128,185,0.1), rgba(41,128,185,0.2));
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    border-bottom: 3px solid #2980b9;
}
.dreieck-linie-horizontal {
    position: absolute; top: 55%; left: 22%; right: 22%; height: 2px; background: #2980b9;
}
.dreieck-linie-vertikal {
    position: absolute; top: 55%; left: 50%; bottom: 0; width: 2px; background: #2980b9; transform: translateX(-50%);
}
.dreieck-wrapper .var {
    position: absolute; font-weight: 700; font-size: 1.3rem; color: #2980b9; text-align: center;
}
.var-oben  { top: 15%; left: 50%; transform: translateX(-50%); }
.var-links { bottom: 8%; left: 22%; }
.var-rechts{ bottom: 8%; right: 22%; }

.dreieck-wrapper.masse .dreieck-form {
    background: linear-gradient(135deg, rgba(142,68,173,0.1), rgba(142,68,173,0.2));
    border-bottom: 3px solid #8e44ad;
}
.dreieck-wrapper.masse .dreieck-linie-horizontal { background: #8e44ad; }
.dreieck-wrapper.masse .dreieck-linie-vertikal   { background: #8e44ad; }
.dreieck-wrapper.masse .var { color: #8e44ad; }