/* =============================================================
   kalender.css — Modernes Kalenderdesign
   Stand: 2026-04-11

   CSS-Variablen werden per <style>:root{}</style> in der JSP
   durch die DB-Konfiguration des Kalenders gesetzt.
   Fallback-Werte hier für den Fall, dass keine Variablen gesetzt sind.
   ============================================================= */

/* === 1. Tabellen-Kalender (HTMLCalendar, art=0 und art=1) === */

/* Basis: alle Tabellen mit class="kalender" */
table.kalender {
    font-family: var(--cal-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif);
    font-size: var(--cal-font-size, 12px);
    background-color: transparent;
    border-collapse: collapse;
    border: var(--cal-main-border-width, 0px) solid var(--cal-main-border-color, #cccccc);
}

/* Äußere Layout-Tabelle (art=0, enthält die Monatskästchen).
   Direktkinder-Selektor: nur Zellen der Layout-Tabelle selbst, nicht nested kal-month-Zellen. */
table.kal-layout {
    border-collapse: collapse;
}
table.kal-layout > tbody > tr > td,
table.kal-layout > thead > tr > td,
table.kal-layout > tfoot > tr > td,
table.kal-layout > tbody > tr > th,
table.kal-layout > thead > tr > th,
table.kal-layout > tfoot > tr > th {
    border-top:    var(--cal-main-cell-border-h, none);
    border-bottom: var(--cal-main-cell-border-h, none);
    border-left:   var(--cal-main-cell-border-v, none);
    border-right:  var(--cal-main-cell-border-v, none);
}

/* Monats-Tabelle (class="kalender kal-month"): Card-Look, feste Breite */
table.kal-month {
    margin: 4px;
    border: var(--cal-month-border-width, 1px) solid var(--cal-month-border-color, #d8d8d8);
    border-collapse: var(--cal-month-border-collapse, collapse);
    border-spacing: var(--cal-month-border-spacing, 0);
    width: 172px;       /* 7 × 24px + 4px Reserve — alle Monate gleich breit */
    table-layout: fixed;
}

/* Monats-Header (colspan=7 in <thead>) */
table.kal-month thead td {
    background-color: var(--cal-main-bg, #f0f0f0);
    color: #222;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 5px 4px;
    border-bottom: 2px solid #d0d0d0;
    text-align: center;
    white-space: nowrap;
}

/* Wochentage-Zeile (td.t) */
table.kal-month td.t {
    background-color: var(--cal-main-bg, #f7f7f7);
    color: #555;
    font-weight: 700;
    font-size: 10px;
    text-align: center;
    padding: 2px 0;
    border-bottom: 1px solid #e4e4e4;
    min-width: 24px;
}

/* Alle Tageszellen */
table.kal-month td {
    width: 24px;
    height: 22px;
    min-width: 22px;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    border-top:    var(--cal-day-cell-border-h, none);
    border-bottom: var(--cal-day-cell-border-h, none);
    border-left:   var(--cal-day-cell-border-v, none);
    border-right:  var(--cal-day-cell-border-v, none);
}

/* Freier Tag */
table.kal-month td.k {
    background-color: var(--cal-frei-bg, #ffffff);
    color: var(--cal-frei-color, #222);
}

/* Belegt */
table.kal-month td.kb {
    background-color: var(--cal-belegt-bg, #d94f3d);
    color: var(--cal-belegt-color, #ffffff);
    font-weight: 600;
}

/* Reserviert */
table.kal-month td.kr {
    background-color: var(--cal-reserviert-bg, #4a7fe8);
    color: var(--cal-reserviert-color, #ffffff);
    font-weight: 600;
}

/* Anreisetag belegt: Gradient frei → belegt (rechte Hälfte rot) */
table.kal-month td.kan_b {
    background: linear-gradient(135deg,
        var(--cal-frei-bg, #ffffff) 50%,
        var(--cal-belegt-bg, #d94f3d) 50%);
}

/* Abreisetag belegt: Gradient belegt → frei (linke Hälfte rot) */
table.kal-month td.kab_b {
    background: linear-gradient(315deg,
        var(--cal-frei-bg, #ffffff) 50%,
        var(--cal-belegt-bg, #d94f3d) 50%);
}

/* Anreisetag reserviert: Gradient frei → reserviert (rechte Hälfte blau) */
table.kal-month td.kan_r {
    background: linear-gradient(135deg,
        var(--cal-frei-bg, #ffffff) 50%,
        var(--cal-reserviert-bg, #4a7fe8) 50%);
}

/* Abreisetag reserviert: Gradient reserviert → frei (linke Hälfte blau) */
table.kal-month td.kab_r {
    background: linear-gradient(315deg,
        var(--cal-frei-bg, #ffffff) 50%,
        var(--cal-reserviert-bg, #4a7fe8) 50%);
}

/* Anreisetag eigen: Gradient frei → eigen (rechte Hälfte grün) */
table.kal-month td.kan_e {
    background: linear-gradient(135deg,
        var(--cal-frei-bg, #ffffff) 50%,
        var(--cal-eigen-bg, #7bcf8a) 50%);
}

/* Abreisetag eigen: Gradient eigen → frei (linke Hälfte grün) */
table.kal-month td.kab_e {
    background: linear-gradient(315deg,
        var(--cal-frei-bg, #ffffff) 50%,
        var(--cal-eigen-bg, #7bcf8a) 50%);
}

/* An- UND Abreisetag zugleich: links = endende Buchung, rechts = beginnende Buchung */
table.kal-month td.ka_b_b { background: linear-gradient(135deg, var(--cal-belegt-bg,     #d94f3d) calc(50% - 1px), var(--cal-month-border-color, #d8d8d8) calc(50% - 1px), var(--cal-month-border-color, #d8d8d8) calc(50% + 1px), var(--cal-belegt-bg,     #d94f3d) calc(50% + 1px)); color: var(--cal-belegt-color,     #ffffff); font-weight: 600; }
table.kal-month td.ka_b_r { background: linear-gradient(135deg, var(--cal-belegt-bg,     #d94f3d) 50%, var(--cal-reserviert-bg,  #4a7fe8) 50%); font-weight: 600; }
table.kal-month td.ka_b_e { background: linear-gradient(135deg, var(--cal-belegt-bg,     #d94f3d) 50%, var(--cal-eigen-bg,       #7bcf8a) 50%); font-weight: 600; }
table.kal-month td.ka_r_b { background: linear-gradient(135deg, var(--cal-reserviert-bg, #4a7fe8) 50%, var(--cal-belegt-bg,      #d94f3d) 50%); font-weight: 600; }
table.kal-month td.ka_r_r { background: linear-gradient(135deg, var(--cal-reserviert-bg, #4a7fe8) calc(50% - 1px), var(--cal-month-border-color, #d8d8d8) calc(50% - 1px), var(--cal-month-border-color, #d8d8d8) calc(50% + 1px), var(--cal-reserviert-bg, #4a7fe8) calc(50% + 1px)); color: var(--cal-reserviert-color, #ffffff); font-weight: 600; }
table.kal-month td.ka_r_e { background: linear-gradient(135deg, var(--cal-reserviert-bg, #4a7fe8) 50%, var(--cal-eigen-bg,       #7bcf8a) 50%); font-weight: 600; }
table.kal-month td.ka_e_b { background: linear-gradient(135deg, var(--cal-eigen-bg,      #7bcf8a) 50%, var(--cal-belegt-bg,      #d94f3d) 50%); font-weight: 600; }
table.kal-month td.ka_e_r { background: linear-gradient(135deg, var(--cal-eigen-bg,      #7bcf8a) 50%, var(--cal-reserviert-bg,  #4a7fe8) 50%); font-weight: 600; }
table.kal-month td.ka_e_e { background: linear-gradient(135deg, var(--cal-eigen-bg,      #7bcf8a) calc(50% - 1px), var(--cal-month-border-color, #d8d8d8) calc(50% - 1px), var(--cal-month-border-color, #d8d8d8) calc(50% + 1px), var(--cal-eigen-bg,      #7bcf8a) calc(50% + 1px)); color: var(--cal-eigen-color,     #1a5e28); font-weight: 600; }

/* Heute */
table.kal-month td.kh {
    background-color: var(--cal-heute-bg, #f5c518);
    color: var(--cal-heute-color, #222);
    font-weight: 700;
}

/* Feiertag */
table.kal-month td.kf {
    background-color: var(--cal-feiertag-bg, #fdf3d0);
    color: var(--cal-feiertag-color, #a03010);
    font-style: italic;
}

/* Eigen (nur für Admin sichtbar) */
table.kal-month td.ke {
    background-color: var(--cal-eigen-bg, #7bcf8a);
    color: var(--cal-eigen-color, #1a5e28);
}

/* Heute-Rahmen (zusätzliche Markierung) */
table.kal-month td.khlfr {
    outline: 2px solid var(--cal-heute-bg, #f5c518);
    outline-offset: -2px;
}

/* Leere Zellen am Monatsanfang/-ende */
table.kal-month td:not([class]) {
    background-color: var(--cal-main-bg, #fafafa);
}


/* === Legende === */

#legend {
    margin-top: 14px;
    font-family: var(--cal-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif);
    font-size: 12px;
}

#legend > div:first-child {
    font-weight: 600;
    color: #444;
    margin-bottom: 5px;
}

#legend table.kalender {
    border-collapse: separate;
    border-spacing: 3px;
}

#legend table.kalender td {
    padding: 3px 10px;
    font-size: 11px;
    min-width: 55px;
    width: auto;
    height: auto;
    text-align: center;
    white-space: nowrap;
    border-radius: 3px;
}

/* Farben der Legende – gleich wie im Kalender */
#legend table.kalender td.k   { background-color: var(--cal-frei-bg, #ffffff); color: var(--cal-frei-color, #222); border: 1px solid #d8d8d8; }
#legend table.kalender td.kb  { background-color: var(--cal-belegt-bg, #d94f3d); color: var(--cal-belegt-color, #ffffff); }
#legend table.kalender td.kr  { background-color: var(--cal-reserviert-bg, #4a7fe8); color: var(--cal-reserviert-color, #ffffff); }
#legend table.kalender td.kan_b { background: linear-gradient(135deg, var(--cal-frei-bg, #ffffff) 50%, var(--cal-belegt-bg, #d94f3d) 50%); }
#legend table.kalender td.kab_b { background: linear-gradient(315deg, var(--cal-frei-bg, #ffffff) 50%, var(--cal-belegt-bg, #d94f3d) 50%); }
#legend table.kalender td.ka    { background-color: var(--cal-belegt-bg, #d94f3d); color: var(--cal-belegt-color, #ffffff); }
#legend table.kalender td.kh  { background-color: var(--cal-heute-bg, #f5c518); color: var(--cal-heute-color, #222); }
#legend table.kalender td.kf  { background-color: var(--cal-feiertag-bg, #fdf3d0); color: var(--cal-feiertag-color, #a03010); }
#legend table.kalender td.ke  { background-color: var(--cal-eigen-bg, #7bcf8a); color: var(--cal-eigen-color, #1a5e28); }


/* === 2. Zeilen-Kalender (art=1): Tabelle mit Monaten als Zeilen === */

/* Für die äußere Tabelle aus calendarSnippet.jsp (art=1):
   Keine Card-Optik, nur strukturelle Anpassungen */
table.kalender td.k,
table.kalender td.kb,
table.kalender td.kr,
table.kalender td.kan_b,
table.kalender td.kab_b,
table.kalender td.kan_r,
table.kalender td.kab_r,
table.kalender td.kan_e,
table.kalender td.kab_e,
table.kalender td.ka_b_b,
table.kalender td.ka_b_r,
table.kalender td.ka_b_e,
table.kalender td.ka_r_b,
table.kalender td.ka_r_r,
table.kalender td.ka_r_e,
table.kalender td.ka_e_b,
table.kalender td.ka_e_r,
table.kalender td.ka_e_e,
table.kalender td.kh,
table.kalender td.kf,
table.kalender td.ke {
    min-width: 22px;
    text-align: center;
    vertical-align: middle;
    padding: 1px 0;
}

/* Farben für art=1 (ohne kal-month, also generische Tabelle) */
table.kalender:not(.kal-month) td.k   { background-color: var(--cal-frei-bg, #ffffff); color: var(--cal-frei-color, #222); }
table.kalender:not(.kal-month) td.kb  { background-color: var(--cal-belegt-bg, #d94f3d); color: var(--cal-belegt-color, #ffffff); }
table.kalender:not(.kal-month) td.kr  { background-color: var(--cal-reserviert-bg, #4a7fe8); color: var(--cal-reserviert-color, #ffffff); }
table.kalender:not(.kal-month) td.kan_b { background: linear-gradient(135deg, var(--cal-frei-bg, #ffffff) 50%, var(--cal-belegt-bg, #d94f3d) 50%); }
table.kalender:not(.kal-month) td.kab_b { background: linear-gradient(315deg, var(--cal-frei-bg, #ffffff) 50%, var(--cal-belegt-bg, #d94f3d) 50%); }
table.kalender:not(.kal-month) td.kan_r { background: linear-gradient(135deg, var(--cal-frei-bg, #ffffff) 50%, var(--cal-reserviert-bg, #4a7fe8) 50%); }
table.kalender:not(.kal-month) td.kab_r { background: linear-gradient(315deg, var(--cal-frei-bg, #ffffff) 50%, var(--cal-reserviert-bg, #4a7fe8) 50%); }
table.kalender:not(.kal-month) td.kan_e { background: linear-gradient(135deg, var(--cal-frei-bg, #ffffff) 50%, var(--cal-eigen-bg, #7bcf8a) 50%); }
table.kalender:not(.kal-month) td.kab_e { background: linear-gradient(315deg, var(--cal-frei-bg, #ffffff) 50%, var(--cal-eigen-bg, #7bcf8a) 50%); }
table.kalender:not(.kal-month) td.ka_b_b { background: linear-gradient(135deg, var(--cal-belegt-bg,     #d94f3d) calc(50% - 1px), var(--cal-month-border-color, #d8d8d8) calc(50% - 1px), var(--cal-month-border-color, #d8d8d8) calc(50% + 1px), var(--cal-belegt-bg,     #d94f3d) calc(50% + 1px)); color: var(--cal-belegt-color,     #ffffff); }
table.kalender:not(.kal-month) td.ka_b_r { background: linear-gradient(135deg, var(--cal-belegt-bg,     #d94f3d) 50%, var(--cal-reserviert-bg, #4a7fe8) 50%); }
table.kalender:not(.kal-month) td.ka_b_e { background: linear-gradient(135deg, var(--cal-belegt-bg,     #d94f3d) 50%, var(--cal-eigen-bg,      #7bcf8a) 50%); }
table.kalender:not(.kal-month) td.ka_r_b { background: linear-gradient(135deg, var(--cal-reserviert-bg, #4a7fe8) 50%, var(--cal-belegt-bg,     #d94f3d) 50%); }
table.kalender:not(.kal-month) td.ka_r_r { background: linear-gradient(135deg, var(--cal-reserviert-bg, #4a7fe8) calc(50% - 1px), var(--cal-month-border-color, #d8d8d8) calc(50% - 1px), var(--cal-month-border-color, #d8d8d8) calc(50% + 1px), var(--cal-reserviert-bg, #4a7fe8) calc(50% + 1px)); color: var(--cal-reserviert-color, #ffffff); }
table.kalender:not(.kal-month) td.ka_r_e { background: linear-gradient(135deg, var(--cal-reserviert-bg, #4a7fe8) 50%, var(--cal-eigen-bg,      #7bcf8a) 50%); }
table.kalender:not(.kal-month) td.ka_e_b { background: linear-gradient(135deg, var(--cal-eigen-bg,      #7bcf8a) 50%, var(--cal-belegt-bg,     #d94f3d) 50%); }
table.kalender:not(.kal-month) td.ka_e_r { background: linear-gradient(135deg, var(--cal-eigen-bg,      #7bcf8a) 50%, var(--cal-reserviert-bg, #4a7fe8) 50%); }
table.kalender:not(.kal-month) td.ka_e_e { background: linear-gradient(135deg, var(--cal-eigen-bg,      #7bcf8a) calc(50% - 1px), var(--cal-month-border-color, #d8d8d8) calc(50% - 1px), var(--cal-month-border-color, #d8d8d8) calc(50% + 1px), var(--cal-eigen-bg,      #7bcf8a) calc(50% + 1px)); color: var(--cal-eigen-color, #1a5e28); }
table.kalender:not(.kal-month) td.kh  { background-color: var(--cal-heute-bg, #f5c518); color: var(--cal-heute-color, #222); font-weight: 700; }
table.kalender:not(.kal-month) td.kf  { background-color: var(--cal-feiertag-bg, #fdf3d0); color: var(--cal-feiertag-color, #a03010); }
table.kalender:not(.kal-month) td.ke  { background-color: var(--cal-eigen-bg, #7bcf8a); color: var(--cal-eigen-color, #1a5e28); }


/* === 3. Kachel-Kalender (art=2): Flexbox-Gitter, Monate umbrechen gleichmäßig === */

/*
 * Wrapper-Div aus calendarSnippet.jsp (kalenderart=2).
 * Flex-Container hebt das float:left der generierten <table align="left"> auf —
 * Flex-Items können nicht floaten, der Browser verteilt sie gleichmäßig.
 */
.kal-resp-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
    align-items: flex-start;   /* Monate in einer Zeile oben ausrichten, nicht strecken */
    width: 100%;               /* verhindert unkontrollierte Breite innerhalb overflow-x:auto */
    box-sizing: border-box;
}

/* Safari: <table> als direktes Flex-Item funktioniert nicht — Wrapper-div als Flex-Item */
.kal-resp-grid .kal-month-item {
    line-height: 0; /* verhindert Leerzeichen-Gap zwischen div und table */
}

.kal-resp-grid .kal-month-item table.kal-month {
    margin: 0;
}


/* === 4. Responsive Kalender (RespHTMLCalendar, art=2, calbox) === */

.calbox {
    display: inline-block;
    vertical-align: top;
    width: 200px;
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    margin: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    border: 1px solid #e0e0e0;
}

.cal_day {
    padding: 0 4px 8px 4px;
    box-sizing: border-box;
}

.cal_headL {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #222;
    display: block;
    margin: 8px 0 4px 0;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.5px;
}

/* Alle Spans: Wochentage und Tageszellen */
.cal_day span {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 11px;
    color: #222;
    text-align: center;
    width: 26px;
    height: 24px;
    display: inline-block;
    line-height: 24px;
    border-radius: 2px;
}

/* Freier Tag: dezenter Punkt */
.cal_day .cal_day_empty::before {
    opacity: 0.18;
    content: '·';
    font-size: 16px;
    line-height: 24px;
}

/* Heute */
.heute {
    background: #f5c518 !important;
    font-weight: 700;
}

/* Belegt */
.bel_b { background: #d94f3d; color: #fff !important; font-weight: 600; }
.b_b   { background: #d94f3d; color: #fff !important; font-weight: 600; }

/* Reserviert */
.res_r { background: #4a7fe8; color: #fff !important; font-weight: 600; }
.r_r   { background: #4a7fe8; color: #fff !important; font-weight: 600; }

/* An-/Abreise mit Gradienten (zeigt Übergang) */
.an_b { background: linear-gradient(135deg, #ffffff 50%, #d94f3d 50%); }
.ab_b { background: linear-gradient(315deg, #ffffff 50%, #d94f3d 50%); }
.an_r { background: linear-gradient(135deg, #ffffff 50%, #4a7fe8 50%); }
.ab_r { background: linear-gradient(315deg, #ffffff 50%, #4a7fe8 50%); }

/* Direkte Übergänge (Abreise einer → Anreise nächster Buchung) */
.b_r  { background: linear-gradient(90deg, #d94f3d 50%, #4a7fe8 50%); }
.r_b  { background: linear-gradient(90deg, #4a7fe8 50%, #d94f3d 50%); }


/* === Responsive: kleinere Bildschirme === */
@media (max-width: 580px) {
    .calbox {
        width: calc(50% - 16px);
        min-width: 160px;
    }

    .cal_day span {
        width: calc((100% - 0px) / 7);
        height: 28px;
        line-height: 28px;
        font-size: 10px;
    }

    table.kal-month td {
        width: 28px;
        height: 26px;
        min-width: 22px;
        font-size: 11px;
    }
}