.svKalender {
    width: 700px;
    max-width: 700px;
    height: 700px;
    max-height: 700px;
    border: 5px solid rgb(90, 158, 51);
    margin: 40px 0;
    overflow: hidden;
    position: relative;
    border-radius: 6px; /* Abgerundete Ecken */
    background: linear-gradient(to bottom right, rgba(220, 220, 220, 0.3), rgba(220, 220, 220, 1));
    backdrop-filter: blur(8px); /* Milchglaseffekt */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 4px 8px rgba(0, 0, 0, 0.2); /* Sanfter Schatten */
}

#svKalenderContainer {
    position: absolute;
    width: 100%;
    transition: transform 0.5s ease-in-out;
}

.svKalenderSeite {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Kacheln links ausrichten */
    padding: 10px;
}

/*#--Termin--#*/

.svKalenderTerminEintragKopf {
    display: inline-block;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin: 5px 0;
    padding: 5px 0;
    min-height: 75px;
    height:auto;
}

.svKalenderTerminEintrag {
    font-weight: bold;
    flex: 0 0 calc(33.33% - 20px); /* Drei Kacheln pro Zeile mit Lücken */
    aspect-ratio: 1; /* Für quadratische Kacheln */
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(40, 96, 144, 0.5); /* Rahmen in deinem Blau */
    box-sizing: border-box;
    padding: 10px;
    margin: 10px;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    border-radius: 6px; /* Abgerundete Kacheln */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Sanfter Schatten */
    transition: background 0.3s ease, box-shadow 0.3s ease; /* Hover-Effekte sanft */
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-snap-type: mandatory;
}

@media screen and (max-width: 840px) {
    .svKalenderTerminEintrag {
        flex: 0 0 calc(100% - 20px); /* Drei Kacheln pro Zeile mit Lücken */
        height:auto!important;
        aspect-ratio: unset;
    }

    .svKalender {
        width: auto;
        height: 760px;
        max-height: 760px;
        overflow-y: scroll!important;
        scroll-snap-type: y mandatory;
        scroll-snap-type: mandatory;
        scrollbar-color: rgb(90, 158, 51) white; /** Firefox **/
        scrollbar-width: thin;
    }

    .svKalenderSeite {
        padding: 0!important;
    }

    .svKalenderButtons{
        display:none!important;
    }


    .svKalender::-webkit-scrollbar {
        width: 50px!important;
    }

    .svKalender::-webkit-scrollbar-thumb {
        background-color: darkgreen!important;
        border-radius: 6px;
    }

    .svKalender::-webkit-scrollbar-track {
        background-color: darkgrey!important;
    }

    .eventCollapsed {
        display: inline;
    }
    .toggleIcon {
        display: inline;
        margin-left: 5px;
    }
    .eventExpanded {
        display: none;
    }
}

.svKalenderTerminDatum {
    display: block;
}

/*#--LEGEND--#*/
.legend {
    display: flex;
    flex-wrap: wrap; /* Elemente umbrechen, falls sie nicht in eine Reihe passen */
    gap: 20px; /* Abstand zwischen den Legenden-Elementen */
    justify-content: flex-start; /* Elemente gleichmäßig zentriert verteilen */
    font-family: Arial, sans-serif;
    font-size: 14px;
    margin: 5px 10px;
    padding: 5px;
    border: 5px solid rgb(90, 158, 51);
    border-radius: 6px; /* Abgerundete Ecken */
    background: linear-gradient(to bottom right, rgba(220, 220, 220, 0.3), rgba(220, 220, 220, 1));
    backdrop-filter: blur(8px); /* Milchglaseffekt */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 4px 8px rgba(0, 0, 0, 0.2); /* Sanfter Schatten */

}

.legend-item {
    display: flex;
    align-items: center; /* Zentriert Farbbox und Text vertikal */
    gap: 10px; /* Abstand zwischen Farbbox und Text */
    padding: 5px; /* Optional: Innenabstand */
    border: 1px solid #ccc; /* Optional: Umrandung um die Legenden-Elemente */
    border-radius: 4px; /* Optional: Abgerundete Ecken */
    background: white;
}

.legend-text {
    color: black !important; /* Textfarbe bleibt schwarz */
}

.color-box {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc; /* Optional: Umrandung für die Farbbox */
    border-radius: 4px; /* Optional: Abgerundete Ecken */
}

/*#--Termine Colors--#*/
.svKalenderTerminEintrag.pruefung {
    color: rgb(104, 34, 139);
    border-color: rgb(104, 34, 139);
    background: white;
    scrollbar-color: rgb(104, 34, 139) rgb(104, 34, 139); /** Firefox **/
}

.svKalenderTerminEintrag.agility {
    color: rgb(238, 118, 0);
    border-color: rgb(238, 118, 0);
    background: white;
    scrollbar-color: rgb(238, 118, 0) rgb(238, 118, 0); /** Firefox **/
}

.svKalenderTerminEintrag.hoopers {
    color: rgb(24, 116, 205);
    border-color: rgb(24, 116, 205);
    background: white;
    scrollbar-color: rgb(24, 116, 205) rgb(24, 116, 205); /** Firefox **/
}

.svKalenderTerminEintrag.koerung {
    color: rgb(105, 105, 105);
    border-color: rgb(105, 105, 105);
    background: white;
    scrollbar-color: rgb(105, 105, 105) rgb(105, 105, 105);
}

.svKalenderTerminEintrag.leistungshueten {
    color: #ffa500;
    border-color: #ffa500;
    background: white;
    scrollbar-color: #ffa500 #ffa500;
}

.svKalenderTerminEintrag.obedience {
    color: rgb(238, 122, 233);
    border-color: rgb(238, 122, 233);
    background: white;
    scrollbar-color: rgb(238, 122, 233) rgb(238, 122, 233);
}

.svKalenderTerminEintrag.rally-obedience {
    color: rgb(238, 0, 0);
    border-color: rgb(238, 0, 0);
    background: white;
    scrollbar-color: rgb(238, 0, 0) rgb(238, 0, 0);
}

.svKalenderTerminEintrag.rettungshund {
    color: rgb(45, 30, 240);
    border-color: rgb(45, 30, 240);
    background: white;
    scrollbar-color: rgb(45, 30, 240) rgb(45, 30, 240);
}

.svKalenderTerminEintrag.wesensbeurteilung {
    color: rgb(139, 90, 43);
    border-color: rgb(139, 90, 43);
    background: white;
    scrollbar-color: rgb(139, 90, 43) rgb(139, 90, 43);
}

.svKalenderTerminEintrag.zuchtschau {
    color: rgb(0, 139, 0);
    border-color: rgb(0, 139, 0);
    background: white;
    scrollbar-color: rgb(0, 139, 0) rgb(0, 139, 0);
}

.svKalenderTerminEintrag.pruefung:hover {
    color: white;
    background: rgb(104, 34, 139);
}

.svKalenderTerminEintrag.agility:hover {
    color: white;
    background: rgb(238, 118, 0);
}

.svKalenderTerminEintrag.hoopers:hover {
    color: white;
    background: rgb(24, 116, 205);
}

.svKalenderTerminEintrag.koerung:hover {
    color: white;
    background: rgb(105, 105, 105);
}

.svKalenderTerminEintrag.leistungshueten:hover {
    color: white;
    background: #ffa500;
}

.svKalenderTerminEintrag.obedience:hover {
    color: white;
    background: rgb(238, 122, 233);
}

.svKalenderTerminEintrag.rally-obedience:hover {
    color: white; /* Dunkleres Tiefes Pink */
    background: rgb(238, 0, 0); /* Schriftfarbe passend zum Farbverlauf */
}

.svKalenderTerminEintrag.rettungshund:hover {
    color: white; /* Dunkleres Dunkles Türkis */
    background: rgb(45, 30, 240); /* Schriftfarbe passend zum Farbverlauf */
}

.svKalenderTerminEintrag.wesensbeurteilung:hover {
    color: white; /* Dunkleres Orangerot */
    background: rgb(139, 90, 43); /* Schriftfarbe passend zum Farbverlauf */
}

.svKalenderTerminEintrag.zuchtschau:hover {
    color: white; /* Dunkleres Blauviolett */
    background: rgb(0, 139, 0); /* Schriftfarbe passend zum Farbverlauf */
}

.svKalenderTerminEintrag:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Hover: stärkerer Schatten */
    transition: background 0.3s ease, box-shadow 0.3s ease; /* Hover-Effekte sanft */
}

.pruefung {
    background: rgb(104, 34, 139);
    color: white;
}

.agility {
    background: rgb(238, 118, 0);
    color: white;
}

.hoopers {
    background: rgb(24, 116, 205);
    color: white;
}

.koerung {
    background: rgb(105, 105, 105);
    color: white;
}

.leistungshueten {
    background: #ffa500;
    color: white;
}

.obedience {
    background: rgb(238, 122, 233);
    color: white;
}

.rally-obedience {
    background: rgb(238, 0, 0);
    color: white;
}

.rettungshund {
    background: rgb(45, 30, 240);
    color: white;
}

.wesensbeurteilung {
    background: rgb(139, 90, 43);
    color: white;
}

.zuchtschau {
    background: rgb(0, 139, 0);
    color: white;
}

.titlelink {
    color: inherit;
}

.titlelink:hover {
    color: inherit;
}

.eventTeaser {
    display: inline-block;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin: 5px 0 0 0;
    padding: 5px 0;
    cursor: pointer;
}
@media screen and (min-width: 841px) {
     .eventExpanded{
        display: inline;
    }
    .eventHeader,
    .eventCollapsed,
    .toggleIcon {
        display: none;
    }
}
/*
.eventCollapsed,
.toggleIcon {
    display: none;
}
.eventExpanded
 {
    display: inline-block;
}*/

.download-ics {
    background: darkgrey;
    color: inherit;
}

.download-ics:hover {
    background: lightgrey;
    color: inherit;
}

/*#--Buttons--#*/
.svKalenderButtons {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.svKalenderButtons .svKalenderLeftButtonField {
    display: flex;
    justify-content: left;
}

.svKalenderButtons .svKalenderRightButtonField {
    display: flex;
    justify-content: right;
}

.termin-export{
    display:flex;
    justify-content: center;
    align-items: center;
}