/* SAR Abfallkalender – bewusst schlicht, passt zu Bootstrap 5 */
.sar-abfallkalender {
    --sak-rand: #dee2e6;
    --sak-gedimmt: #6c757d;
    --sak-akzent: #3b6e3b;
    --sak-heute-bg: #eef6ee;
    --sak-aenderung-bg: #fff3cd;
    --sak-aenderung-rand: #e0a800;
    --sak-aenderung-text: #664d03;
    margin-bottom: 1.5rem;
}

/* Abstand des Inhaltselements nach oben, z. B. zum Rahmen der Container-Spalte */
.frame-type-sarabfallkalender_wochenvorschau {
    margin-top: 1rem;
}

.sar-abfallkalender ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sar-abfallkalender__wochen {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.sar-abfallkalender__woche {
    border: 1px solid var(--sak-rand);
    border-radius: .375rem;
    padding: 1rem;
}

.sar-abfallkalender__woche.is-aktuell {
    border-color: var(--sak-akzent);
}

.sar-abfallkalender__titel {
    font-size: 1.15rem;
    margin: 0 0 .25rem;
}

.sar-abfallkalender__zeitraum {
    color: var(--sak-gedimmt);
    font-size: .9rem;
    margin: 0 0 .75rem;
}

.sar-abfallkalender__tage > li + li {
    margin-top: .75rem;
}

.sar-abfallkalender__tag.is-heute {
    background: var(--sak-heute-bg);
    border-radius: .375rem;
    margin-inline: -.5rem;
    padding: .25rem .5rem;
}

.sar-abfallkalender__tag.is-vergangen {
    opacity: .5;
}

.sar-abfallkalender__datum {
    font-weight: 600;
    margin: 0 0 .25rem;
}

.sar-abfallkalender__heute {
    background: var(--sak-akzent);
    border-radius: 1rem;
    color: #fff;
    font-size: .75rem;
    font-weight: 400;
    margin-left: .35rem;
    padding: .1rem .5rem;
    vertical-align: middle;
}

.sar-abfallkalender__tonnen {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
}

.sar-abfallkalender__tonne {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-size: .85rem;
    text-align: center;
}

.sar-abfallkalender__tonne img {
    height: 60px;
    width: auto;
}

/* Verschobene und zusätzliche Termine */
.sar-abfallkalender__tag.is-geaendert {
    border-left: 4px solid var(--sak-aenderung-rand);
    padding-left: .5rem;
}

.sar-abfallkalender__aenderung {
    background: var(--sak-aenderung-bg);
    border: 1px solid var(--sak-aenderung-rand);
    border-radius: .25rem;
    color: var(--sak-aenderung-text);
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    margin-top: .2rem;
    padding: .1rem .4rem;
    white-space: nowrap;
}

/* Vergangene Tage werden gedimmt, die Änderung soll trotzdem lesbar bleiben */
.sar-abfallkalender__tag.is-vergangen.is-geaendert {
    opacity: .7;
}

/* Jahresübersicht */
.sar-abfallkalender__monate {
    display: grid;
    gap: 1rem 2rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.sar-abfallkalender__monatsname {
    border-bottom: 2px solid var(--sak-akzent);
    font-size: 1rem;
    margin: 0 0 .5rem;
    padding-bottom: .25rem;
}

.sar-abfallkalender__tag.is-kompakt {
    align-items: center;
    display: flex;
    gap: .5rem;
}

.sar-abfallkalender__tag.is-kompakt .sar-abfallkalender__datum {
    flex: 0 0 4.5rem;
    margin: 0;
}

.sar-abfallkalender__tag.is-kompakt .sar-abfallkalender__tonnen {
    gap: .25rem;
}

.sar-abfallkalender__tag.is-kompakt .sar-abfallkalender__tonne {
    flex-direction: row;
    gap: .35rem;
}

.sar-abfallkalender__tag.is-kompakt .sar-abfallkalender__aenderung {
    margin-top: 0;
}

.sar-abfallkalender__tag.is-kompakt .sar-abfallkalender__tonne img {
    height: 28px;
}

.sar-abfallkalender__tag.is-kompakt .sar-abfallkalender__tonnenname {
    /* Name nur für Screenreader, das Icon reicht optisch */
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.sar-abfallkalender__tage.is-kompakt > li + li,
.sar-abfallkalender__monat .sar-abfallkalender__tage > li + li {
    margin-top: .35rem;
}

.sar-abfallkalender__fehlt,
.sar-abfallkalender__leer {
    color: var(--sak-gedimmt);
    font-style: italic;
}

.sar-abfallkalender__fusszeile {
    color: var(--sak-gedimmt);
    font-size: .85rem;
    margin-top: .75rem;
}