/*
 * wetter-kalender.css  -  Jahres-Kalender (Tabelle)
 * Version: 1.3.0
 *
 * Ergänzt wetter.css nur auf der Kalenderseite. Enthält das Sticky-Layout
 * (Jahre oben, Tagesspalte links) sowie das dezente Farbschema der alten
 * Seite (wr-kalender.asp): Temperatur nach Kenntag (blau kalt / rot heiss),
 * Sonne als Gelb-Rampe, Niederschlag als Cyan-Rampe, Wind als Graustufen.
 *
 * Farben und Schwellen entsprechen 1:1 der alten ASP-Klassifizierung.
 *
 * Changelog:
 *   1.3.0  Topbar deckender Hintergrund; horizontales Sticky ueber neue
 *          DOM-Position (direktes Kind der Scrollflaeche, siehe
 *          wetter-kalender.php). Tabelle deckender Hintergrund gegen blauen
 *          Scroll-Grund hinter leeren Zellen.
 *   1.2.1  Text-Einzug jetzt Standard (auch auf schmalen Desktop-Fenstern);
 *          flush nur noch auf echten Handys (<= 560px).
 *   1.2.0  Eine Vollfenster-Scrollfläche (kal-scroll): Navi-Leiste/Titel/Info
 *          scrollen mit weg, Jahres-Kopf bleibt oberste Zeile, kein Leerraum
 *          unten; Desktop-Texte wieder eingerückt, Mobile flush.
 *   1.1.0  Vollhöhen-Layout (body.kal-page): Kalender füllt das Fenster,
 *          Ortsauswahl/Titel/Info scrollen weg, Jahres-Kopf bleibt oben.
 *          Mobile ohne seitlichen Rand, kompaktere Zellen.
 *   1.0.0  Erstfassung.
 */

/* ================================================================== *
 *  Vollfenster-Scrollfläche: nur die Kalenderseite (body.kal-page)
 *  Navi-Leiste, Ortsauswahl, Titel und Info liegen mit in dieser einen
 *  Scrollfläche und wandern beim Scrollen nach oben weg - die Jahres-
 *  Kopfzeile bleibt als wirklich oberste Zeile picken (Desktop & Mobile).
 * ================================================================== */
.kal-page {
    height: 100vh;
    height: 100dvh;                /* robuster auf Mobile (Adressleiste) */
    overflow: hidden;              /* kein Eigen-Scroll des Fensters */
}
.kal-scroll {
    height: 100vh;
    height: 100dvh;
    overflow: auto;                /* die EINZIGE Scrollfläche (beide Achsen) */
    background: var(--wetter-bg);
    -webkit-overflow-scrolling: touch;
}
.kal-main { background: var(--wetter-surface); }

/* Navi-Leiste und Textblock scrollen mit weg; beim H-Scroll bleiben sie links */
.kal-page .wetter-header { position: sticky; left: 0; }
.kal-topbar {
    position: sticky;
    left: 0;                       /* bleibt beim horizontalen Scrollen links */
    padding: 16px 26px 12px;       /* Standard: Texte angenehm eingerückt */
    background: var(--wetter-surface);   /* deckt den blauen Scroll-Grund ab */
}

.kal-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.kal-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin: 0;
    font-size: .82rem;
    color: var(--wetter-text-muted);
}
.kal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: center;
}
.kal-legend__group { display: inline-flex; align-items: center; gap: 5px; }
.kal-legend__swatch {
    display: inline-block;
    width: 13px; height: 13px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 2px;
    vertical-align: middle;
}

.wetter-empty--pad { padding: 16px; }

.kal {
    border-collapse: separate; /* Pflicht für position: sticky */
    border-spacing: 0;
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    color: #000;
    background: var(--wetter-surface);   /* kein blauer Scroll-Grund hinter leeren Zellen */
}
.kal th,
.kal td {
    padding: 2px 6px;
    text-align: center;
    border-right: 1px solid #ececec;
    border-bottom: 1px solid #f1f1f1;
}

/* --- Sticky Kopfzeilen (zwei Reihen: Jahre, dann Kennwerte) --- */
.kal thead th {
    position: sticky;
    background: var(--wetter-primary);
    color: #fff;
    z-index: 2;
    border-right: 1px solid rgba(255, 255, 255, .18);
    border-bottom: none;
}
.kal thead tr.kal-years th {
    top: 0;
    height: 26px;
    font-weight: 700;
    font-size: 12px;
}
.kal thead tr.kal-metrics th {
    top: 26px;
    height: 22px;
    font-weight: 400;
    font-size: 10px;
}
.kal thead th abbr { color: #fff; text-decoration: none; }

/* --- Sticky Tagesspalte links --- */
.kal .kal-day {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--wetter-surface);
    color: var(--wetter-text);
    text-align: left;
    font-weight: 600;
    padding-right: 10px;
    border-right: 2px solid #888;
}

/* Ecke oben-links (über der Tagesspalte): in beide Richtungen sticky */
.kal thead th.kal-corner {
    left: 0;
    top: 0;
    z-index: 3;
    text-align: left;
    border-right: 2px solid #888;
}

/* Jahres-Trennlinie: linke Kante jeder Jahresgruppe */
.kal .year-sep { border-left: 3px solid #888; }

/* Monatsanfang: dicke Oberkante über die ganze Zeile */
.kal tr.month-start td,
.kal tr.month-start .kal-day { border-top: 2px solid #b9b9b9; }

/* leere Zelle (kein Datenwert) dezent */
.kal td.kal-empty { background: var(--wetter-surface); color: #bbb; }

/* ================================================================== *
 *  Farbschema (1:1 aus wr-kalender.asp / weather.css)
 * ================================================================== */

/* Temperatur - Kenntag */
.tblhitze  { background: #990000; color: #fff; }
.tblsommer { background: #ff3300; color: #fff; }
.tblwarm   { background: #ff9966; color: #fff; }
.tblfrost  { background: #0099ff; color: #fff; }
.tbleis    { background: #0033cc; color: #fff; }

/* Sonne - Gelb-Rampe */
.tblson0 { background: #ffffff; }
.tblson1 { background: #ffffcc; }
.tblson2 { background: #ffff99; }
.tblson3 { background: #ffff66; }
.tblson4 { background: #ffff33; }
.tblson5 { background: #ffff00; }

/* Niederschlag - Cyan-Rampe */
.tblnie0 { background: #ddffff; }
.tblnie1 { background: #ccffff; }
.tblnie2 { background: #99ffff; }
.tblnie3 { background: #66ffff; }
.tblnie4 { background: #33ffff; }
.tblnie5 { background: #00ffff; }

/* Wind - Graustufen */
.tblwin0 { background: #ffffff; }
.tblwin1 { background: #dddddd; }
.tblwin2 { background: #bbbbbb; }
.tblwin3 { background: #999999; color: #fff; }
.tblwin4 { background: #777777; color: #fff; }
.tblwin5 { background: #555555; color: #fff; }
.tblwin6 { background: #333333; color: #fff; }
.tblwin7 { background: #111111; color: #fff; }

/* Damit die farbige Klasse auch in der sticky Tagesspalte nicht durchscheint,
   behalten Tagesspalte und Kopf ihre eigene Deckfarbe (siehe oben). */

/* ================================================================== *
 *  Mobile: seitlichen Space wegnehmen, Bildschirm maximal ausnutzen
 * ================================================================== */
/* ================================================================== *
 *  Handy (schmal): seitlichen Space wegnehmen, Bildschirm maximal nutzen
 * ================================================================== */
@media (max-width: 560px) {
    .kal-page .wetter-header__inner { padding: 10px 10px; }
    .kal-topbar { padding: 10px 12px 8px; }
    .kal th,
    .kal td { padding: 2px 4px; }
    .kal .kal-day { padding-left: 6px; padding-right: 8px; }
    .kal-intro { font-size: .78rem; }
}