/* ===== Panel (Sidebar) ===== */

.ampel-panel {
    padding: 8px 12px;
}

.ampel-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a7f72;
    margin-bottom: 6px;
    margin-top: 10px;
}

.ampel-varianten {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.ampel-variante-btn {
    flex: 3;
    padding: 10px 6px;
    border-radius: 10px;
    border: 1.5px solid #d9d0c4;
    background: #f3eee4;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #4f6470;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ampel-variante-btn:hover {
    background: #e7ecef;
    border-color: #486959;
    color: #486959;
}

.ampel-variante-btn.aktiv {
    background: #486959;
    border-color: #486959;
    color: #fff;
}

.ampel-add-btn {
    width: 100%;
    padding: 10px 10px;
    border-radius: 10px;
    background: #486959;
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
}

.ampel-add-btn:hover {
    background: #3a5547;
}

.ampel-add-btn-sekundaer {
    background: #7a9488;
}

.ampel-add-btn-sekundaer:hover {
    background: #627d72;
}

/* ===== Canvas-Widget: Klassische Ampel ===== */

.ampel-widget {
    background: #1a1a18;
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    aspect-ratio: 1 / 2;
}

.ampel-licht {
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.2;
    transition: opacity 0.3s;
}

.ampel-lichter {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 100%;
}

.ampel-licht.rot {
    background: #e74c3c;
}

.ampel-licht.gelb {
    background: #f1c40f;
}

.ampel-licht.gruen {
    background: #2ecc71;
}

.ampel-licht.aktiv {
    opacity: 1;
}

/* ===== Canvas-Widget: Tacho ===== */

.ampel-tacho {
    width: 100%;
}

.ampel-tacho svg {
    width: 100%;
    display: block;
    transition: filter 0.3s;
}

.ampel-tacho svg.bruellt {
    filter:
        drop-shadow(0 0 8px rgba(231, 76, 60, 1))
        drop-shadow(0 0 20px rgba(231, 76, 60, 0.9))
        drop-shadow(0 0 40px rgba(231, 76, 60, 0.7));
}

/* ===== Steuerung (gemeinsam für beide Varianten) ===== */

.ampel-steuerung {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.ampel-slider {
    width: 100%;
    accent-color: #486959;
}

.ampel-btn {
    width: 100%;
    padding: 6px 10px;
    border-radius: 8px;
    background: #486959;
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ampel-btn:hover {
    background: #3a5547;
}

/* ===== Canvas-Widget: Statistik ===== */

.ampelstatistik-widget {
    background: #1a1a18;
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    aspect-ratio: 3 / 2;
}

.ampelstatistik-zeile {
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-size: 1em;
    font-weight: 600;
}

.ampelstatistik-punkt {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    flex-shrink: 0;
}

.ampelstatistik-punkt.rot {
    background: #e74c3c;
}

.ampelstatistik-punkt.gelb {
    background: #f1c40f;
}

.ampelstatistik-punkt.gruen {
    background: #2ecc71;
}

.ampelstatistik-zeit {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.ampelstatistik-steuerung {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.ampelstatistik-btn {
    flex: 1;
    padding: 0.4em 0.6em;
    border-radius: 8px;
    background: #486959;
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
}

.ampelstatistik-btn:hover {
    background: #3a5547;
}

/* ===== Canvas-Widget: Monster ===== */

.monster-widget {
    width: 100%;
}

.monster-bild {
    width: 100%;
    display: block;
    transition: opacity 0.15s, filter 0.3s;
}

.monster-bild.bruellt {
    filter:
        drop-shadow(0 0 8px rgba(231, 76, 60, 1)) drop-shadow(0 0 20px rgba(231, 76, 60, 0.9)) drop-shadow(0 0 40px rgba(231, 76, 60, 0.7));
}