/* Fellnasensitter Verfügbarkeitskalender
   Statusfarben: good #0ca30c / warning #fab219 / critical #d03b3b
   (fixe Statuspalette, jeweils mit Icon + Text kombiniert, nie Farbe allein) */

.fns-verfuegbarkeit {
    --fns-ink: #0b0b0b;
    --fns-ink-muted: #898781;
    --fns-surface: #fcfcfb;
    --fns-line: #e4e3de;

    --fns-good: #0ca30c;
    --fns-good-bg: rgba(12, 163, 12, 0.12);
    --fns-warning: #c98a00;
    --fns-warning-bg: rgba(250, 178, 25, 0.22);
    --fns-critical: #d03b3b;
    --fns-critical-bg: rgba(208, 59, 59, 0.12);

    color: var(--fns-ink);
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    font-size: 15px;
}

.fns-monat {
    border-collapse: collapse;
    background: var(--fns-surface);
    width: 320px;
    max-width: 100%;
}

.fns-monat caption {
    text-align: left;
    font-weight: 600;
    font-size: 16px;
    padding: 4px 2px 10px;
    caption-side: top;
    color: var(--fns-ink);
}

.fns-monat th {
    font-weight: 500;
    font-size: 12px;
    color: var(--fns-ink-muted);
    padding: 4px 0;
    text-align: center;
}

.fns-monat td {
    text-align: center;
    vertical-align: middle;
    border: 1px solid var(--fns-line);
    width: 14.28%;
    height: 40px;
    position: relative;
    font-variant-numeric: tabular-nums;
}

.fns-tag {
    font-weight: 500;
}

.fns-tagnummer {
    display: block;
    font-size: 13px;
}

.fns-icon {
    display: block;
    font-size: 10px;
    line-height: 1;
    margin-top: 1px;
}

.fns-leer {
    background: transparent;
    border-color: transparent;
}

.fns-frei {
    background: var(--fns-good-bg);
    border-left: 3px solid var(--fns-good);
}
.fns-frei .fns-icon { color: var(--fns-good); }

.fns-teilweise {
    background: var(--fns-warning-bg);
    border-left: 3px solid var(--fns-warning);
}
.fns-teilweise .fns-icon { color: var(--fns-warning); }

.fns-belegt {
    background: var(--fns-critical-bg);
    border-left: 3px solid var(--fns-critical);
}
.fns-belegt .fns-icon { color: var(--fns-critical); }

.fns-legende {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    padding-top: 4px;
    border-top: 1px solid var(--fns-line);
    font-size: 13px;
    color: var(--fns-ink);
}

.fns-legende-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fns-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    font-size: 10px;
    color: #fff;
    font-weight: 700;
}
.fns-swatch.fns-frei { background: var(--fns-good); border-left: none; }
.fns-swatch.fns-teilweise { background: var(--fns-warning); border-left: none; }
.fns-swatch.fns-belegt { background: var(--fns-critical); border-left: none; }

.fns-legende-hinweis {
    color: var(--fns-ink-muted);
    font-size: 12px;
}

.fns-stand {
    margin-left: auto;
}

@media (max-width: 480px) {
    .fns-verfuegbarkeit { gap: 20px; }
    .fns-monat { width: 100%; }
}