/* ═══════════════════════════════════════════════════════
   HINWEIS: Die Farbpalette (CSS Custom Properties) ist
   zentral in kalender.html im :root-Block definiert.
   Alle Farbwerte hier referenzieren diese Variablen.
   ═══════════════════════════════════════════════════════ */

@font-face {
    font-family: 'DM Sans';
    src: url('DMSans-VariableFont_opsz,wght.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

* {
    font-family: 'DM Sans', system-ui, sans-serif;
}

.kalender {
    border-collapse: collapse;
    float: left;
    border: 1px solid var(--c-border-table, black);
    margin: 0px;
    font-family: 'DM Sans', system-ui, sans-serif;
}
.kalender td, .kalender th {
    border-bottom: 1px solid var(--c-border-table, black);
    font-size: 75%;
}
.Feiertag {
    width: 110px;
    font-size: 80%;
    display: inline;
}
#Kal {
    margin-top: 40px;
    width: 100%;
    border: 0px solid gray;
    height: auto;
    font-family: 'DM Sans', system-ui, sans-serif;
    box-sizing: border-box;
}
.so { background: var(--c-so-bg,  #ffcccc); }
.sa { background: var(--c-sa-bg,  #dddddd); }

#Kal h1 {
    position: absolute;
    top: 10px;
    padding: 3px;
    margin: 0px;
    left: 860px;
    font-size: 150%;
}
#Kal td a {
    font-size: 120%;
    font-weight: normal;
    color: var(--c-accent, red);
}

@media screen and (min-width: 901px) {

    #Kal {
        width: 100%;
        height: auto;
    }

    .jahrBlock {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
        box-sizing: border-box;
        padding: 0 8px;
    }

    .kalender {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        float: none;
        table-layout: fixed;
        box-sizing: border-box;
    }

    /* Dritte Spalte (Feiertag/Mondphase) bekommt den Restplatz */
    .kalender td:nth-child(3),
    .kalender th:nth-child(3) {
        width: 100%;
        max-width: 0;      /* Pflicht-Trick bei table-layout:fixed + overflow:hidden */
        overflow: hidden;
    }

    /* Tageszahl + Wochentag: kompakt, kein Umbruch */
    .kalender td:first-child  { width: 1.8em; white-space: nowrap; }
    .kalender td:nth-child(2) { width: 2em;   white-space: nowrap; }
}
a { font-size: 80%; font-weight: bold; }

#fussleiste {
    border: 0px solid red;
    position: absolute;
    top: 599px;
    left: 159px;
    font-size: 70%;
    font-family: 'DM Sans', system-ui, sans-serif;
    color: var(--c-fuss-text, inherit);
}
#fussleiste * { margin: 0px; padding: 0px; }
#fussleiste p {
    position: absolute;
    top: -590px;
    left: 1530px;
}

#container {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 2;
    background-color: white;
    background-position: 310px 25px;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-left: 10px solid #F95F0B;
    border-top: 1px solid silver;
    padding: 25px 0px 0px 0px;
    font-family: 'DM Sans', system-ui, sans-serif;
    width: 392px;
    height: 220px;
}
#content {
    background-color: white;
    width: 382px;
    border-left: 0px solid #F95F0B;
    padding-left: 10px;
    height: 220px;
    overflow: auto;
}
#container #ende {
    position: absolute;
    top: 0px; right: 0px;
    color: black;
    font-weight: normal;
    display: block;
    background: #FFF2D6;
    text-decoration: none;
    font-size: 75%;
    border-left: 1px solid white;
    border-top: 1px solid white;
    border-right: 1px solid gray;
    border-bottom: 1px solid silver;
    display: block;
    width: 100px;
    height: 19px;
    padding: 4px 5px 0px 7px;
}
#content h1 { color: #A10303; font-size: 120%; }
#content h3 {
    color: black !important;
    font-size: 80% !important;
    border-bottom: 1px solid #F95F0B;
    padding-bottom: 3px;
}
#content h2 {
    color: #F95F0B !important;
    font-size: 90% !important;
    margin-bottom: -15px !important;
}
#content div {
    font-size: 80%;
    line-height: 1.5em;
    margin-top: 2em;
    font-family: 'DM Sans', system-ui, sans-serif;
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE — Mobile (max. 900px Breite)
   Desktop-Layout bleibt vollständig unverändert.
   ═══════════════════════════════════════════════════════ */

@media screen and (max-width: 900px) {

    #Kal {
        position: relative;
        width: 100%;
        height: auto;
        margin-top: 60px;
        padding: 8px;
        box-sizing: border-box;
    }

    #Kal h1 {
        position: fixed;
        top: 0;
        left: 0; right: 0;
        z-index: 99;
        text-align: center;
        font-size: 120%;
        margin: 0;
        padding: 10px 60px;
        background: var(--c-bg-nav, #fff);
        border-bottom: 1px solid var(--c-border-nav, #ccc);
        pointer-events: none;
    }

    #rueck,
    #vor {
        position: fixed;
        top: 0;
        z-index: 100;
        background: var(--c-bg-nav, #fff);
        padding: 10px 14px;
        font-size: 100%;
        font-weight: bold;
        color: var(--c-accent, red);
        text-decoration: none;
        border-bottom: 1px solid var(--c-border-nav, #ccc);
    }
    #rueck { left: 0;  border-right: 1px solid var(--c-border-nav, #ccc); }
    #vor   { right: 0; border-left:  1px solid var(--c-border-nav, #ccc); }

    .kalender {
        float: none;
        display: table;
        width: 100%;
        table-layout: auto;
        margin-bottom: 16px;
        box-sizing: border-box;
    }

    .kalender td:first-child,
    .kalender td:nth-child(2) {
        white-space: nowrap;
        width: 1px;
        text-align: left;
    }

    .kalender td:nth-child(3) { width: 100%; }

    .kalender thead th {
        font-size: 100%;
        padding: 6px 8px;
        background: var(--c-bg-thead, #f0f0f0);
        text-align: center;
    }

    .kalender td,
    .kalender th {
        font-size: 90%;
        padding: 5px 8px;
    }

    .Feiertag {
        width: auto;
        font-size: 88%;
        display: inline;
    }

    #fussleiste {
        position: static;
        display: block;
        margin-top: 24px;
        padding: 12px 8px;
        font-size: 75%;
        text-align: center;
        border-top: 1px solid var(--c-fuss-border, #ddd);
    }
    #fussleiste p {
        position: static;
        margin-top: 8px !important;
    }
}