/* #################################### */
/*               Farbschema             */
/* #################################### */
/* Hauptfarben und Variablen für Farbmanagement */
:root {
    /* Primäre Akzentfarbe, verwendet für hervorstechende Elemente */
    --primary-color: #dd3333;

    /* Dunklere Variante der Primärfarbe, um Kontraste für Rahmen zu schaffen */
    --primary-color-dark: #b02828;

    /* Hellere Variante der Primärfarbe, um Kontraste für Rahmen zu schaffen */
    --primary-color-light: #ED9797;

    /* Sekundärfarbe, meist für neutrale oder weniger prominente Bereiche */
    --secondary-color: #343434;

    /* Helle Schriftfarbe, üblicherweise für Texte auf dunklen Hintergründen */
    --text-color-light: white;

    /* Dunkle Schriftfarbe, üblicherweise für Texte auf hellen Hintergründen */
    --text-color-dark: black;

    /* Standardhintergrundfarbe für helle Bereiche */
    --background-color-light: #f9f9f9;

    /* Standardfarbe für Rahmenlinien */
    --border-color: #ddd;
}

/* Farbmanagement für den dunklen Modus */
@media (prefers-color-scheme: dark) {
    :root {
        /* Ändert die Standardtextfarben basierend auf dem Systemthema */
        --text-color-dark: black;
        --text-color-light: white;
    }
}

/* Abstände für den Kalender-Container */
.calendar-padding {
    padding-top: 25px;
    /* Oben großzügiger Abstand */
    padding-bottom: 0px;
    /* Unten kein zusätzlicher Abstand */
}

/* Abstände für den Detailbereich unter dem Kalender */
.calendar-padding-details {
    padding-top: 0px;
    /* Oben kein zusätzlicher Abstand */
    padding-bottom: 25px;
    /* Unten großzügiger Abstand */
}

/* #################################### */
/*   minimalisticalendar_shortcode 1/2  */
/* #################################### */

/* Container für die Kalenderüberschrift (Monats- und Navigationsbuttons) */
.calendar-header {
    display: grid;
    /* Gitterlayout für eine klare Anordnung */
    grid-template-columns: auto 1fr auto;
    /* Zwei feste und eine flexible Spalte */
    align-items: center;
    /* Vertikale Ausrichtung in der Mitte */
    gap: 10px;
    /* Zwischenräume zwischen den Elementen */
    margin-bottom: 10px;
    /* Platz unterhalb der Überschrift */
    background-color: transparent;
    /* Keine Hintergrundfarbe */
}

/* Textstil für den Monatstitel in der Überschrift */
.calendar-title {
    text-align: center;
    /* Zentrierte Ausrichtung des Texts */
    font-size: 20px;
    /* Größere Schrift für bessere Sichtbarkeit */
    font-weight: bold;
    /* Hervorgehobener Text */
    line-height: 1.2;
    /* Leichte Erhöhung der Zeilenhöhe */
    color: var(--text-color-light);
    /* Helle Farbe, abhängig von den Variablen */
}

/* Gemeinsame Stile für Buttons (Navigation und Titelbutton) */
.calendar-nav,
.calendar-title-button {
    display: flex;
    /* Flexbox für einfache Ausrichtung */
    align-items: center;
    /* Vertikale Zentrierung */
    justify-content: center;
    /* Horizontale Zentrierung */
    text-align: center;
    /* Text zentrieren */
    padding: 0;
    /* Kein zusätzlicher Innenabstand */
    border: 1px solid var(--border-color);
    /* Rahmen in Standardrahmenfarbe */
    border-radius: 4px;
    /* Abgerundete Ecken */
    cursor: pointer;
    /* Zeigeränderung bei Hover */
    height: 38px;
    /* Einheitliche Höhe */
    line-height: normal;
    /* Standardzeilenhöhe */
    transition: all 0.3s ease;
    /* Glatter Übergang für visuelle Änderungen */
    color: var(--text-color-light);
    /* Helle Textfarbe */
}

/* Spezifische Stile für die Zurück-/Weiter-Navigationsbuttons */
.calendar-nav {
    background-color: var(--primary-color);
    /* Primärfarbe für Knöpfe */
    font-size: 12px;
    /* Kleinere Schriftgröße */
    width: 120px;
    /* Breitere Buttons für bessere Klickbarkeit */
}

/* Anpassungen der Breite auf kleineren Bildschirmen */
@media (max-width: 768px) {
    .calendar-nav {
        width: 80px;
        /* Reduzierte Breite für Tablets und kleine Geräte */
    }
}

@media (max-width: 480px) {
    .calendar-nav {
        width: 60px;
        /* Noch schmalere Buttons für Smartphones */
    }
}

/* Stil für den Monatsnamen-Button in der Mitte */
.calendar-title-button {
    background-color: var(--secondary-color);
    /* Sekundärfarbe für weniger Hervorhebung */
    font-size: 20px;
    /* Größere Schrift für bessere Lesbarkeit */
    flex-grow: 1;
    /* Button dehnt sich aus, um den freien Platz zu nutzen */
    width: auto;
    /* Automatische Breite basierend auf Inhalt */
}

/* Platzierung des Zurück-Buttons auf der linken Seite */
#prev-month {
    justify-self: start;
}

/* Platzierung des Weiter-Buttons auf der rechten Seite */
#next-month {
    justify-self: end;
}

/* Stil für Wochentage (Kopfzeile des Kalenders) */
.calendar-weekday {
    display: flex;
    /* Flexbox für einfache Ausrichtung */
    align-items: center;
    /* Vertikale Zentrierung */
    justify-content: center;
    /* Horizontale Zentrierung */
    height: 38px;
    /* Einheitliche Höhe */
    background-color: var(--primary-color);
    /* Hervorgehobene Hintergrundfarbe */
    color: var(--text-color-light);
    /* Helle Schriftfarbe */
    border-radius: 4px;
    /* Abgerundete Ecken */
    font-weight: bold;
    /* Hervorgehobene Schrift */
    border: 1px solid var(--primary-color-dark);
    /* Dunkler Rahmen für Kontrast */
    margin-bottom: 10px;
    /* Abstand nach unten */
}

/* Grid-Layout für Kalendertage */
.calendar-grid {
    display: grid;
    /* Gitterlayout */
    grid-template-columns: repeat(7, 1fr);
    /* Sieben Spalten, gleichmäßig verteilt */
    gap: 5px;
    /* Abstand zwischen den Elementen */
}

/* Stil für einzelne Kalendertage */
.calendar-day {
    height: 60px;
    /* Einheitliche Höhe */
    text-align: center;
    /* Text zentrieren */
    line-height: 30px;
    /* Vertikale Ausrichtung des Texts */
    background-color: var(--background-color-light);
    /* Heller Hintergrund */
    color: var(--text-color-dark);
    /* Dunkle Schriftfarbe */
    border: 1px solid var(--border-color);
    /* Standardrahmen */
    border-radius: 4px;
    /* Abgerundete Ecken */
}

/* Stil für einzelne Kalendertage mit Ereignis */
.calendar-day.event-day {
    background-color: var(--primary-color-light);
    border: 1px solid var(--primary-color);
    /* Standardrahmen */
}

.calendar-day.current-day {
    background-color: var(--primary-color-dark);
    /* Zum Beispiel ein sanftes Gelb */
    border: 1px solid var(--primary-color);
    /* Etwas markanterer Rahmen */
    color: #FFF;
    /* Dunkle Schrift */
}

/* Container für Bulletpoints innerhalb eines Kalendertages */
.calendar-day .bullets {
    margin-top: 5px;
    /* Abstand nach oben */
    display: flex;
    /* Flexbox für gleichmäßige Verteilung */
    justify-content: center;
    /* Zentrierung der Bulletpoints */
    gap: 3px;
    /* Abstand zwischen den Bulletpoints */
}

/* Stil für kleine Punkte, die Ereignisse anzeigen */
.bullet {
    width: 8px;
    /* Einheitliche Breite */
    height: 8px;
    /* Einheitliche Höhe */
    border-radius: 50%;
    /* Runde Punkte */
    display: inline-block;
    /* Inline-Block-Element */
}

/* Stil für Ereignis-Bulletpoints */
.event-bullet {
    display: inline-block;
    /* Inline-Block-Element */
    width: 10px;
    /* Leicht größere Breite */
    height: 10px;
    /* Leicht größere Höhe */
    border-radius: 50%;
    /* Runde Punkte */
    margin-right: 5px;
    /* Abstand zum Text */
    vertical-align: middle;
    /* Vertikale Ausrichtung */
    position: relative;
    /* Ermöglicht die Nutzung von top/bottom */
    top: -3px;
    /* Leichte Verschiebung nach oben */
}

.event-link {
    color: var(--text-color-dark);
}

/* Stil für leere Kalendertage (z.B. Anfang/Ende des Monats) */
.calendar-day.empty {
    background: none;
    /* Kein Hintergrund */
    border: none;
    /* Kein Rahmen */
}

/* #################################### */
/*   minimalisticalendar_shortcode 2/2  */
/* #################################### */

/* Stil für den Detailbereich unter dem Kalender */
#minimalistic-calendar-details {
    margin-top: 20px;
    /* Platz über dem Detailbereich */
    padding: 10px;
    /* Innenabstand für den Detailbereich */
    border: 1px solid var(--border-color);
    /* Standardrahmenfarbe */
    border-radius: 4px;
    /* Abgerundete Ecken */
    background-color: var(--background-color-light);
    /* Heller Hintergrund */
    color: var(--text-color-dark);
    /* Dunkle Schriftfarbe */
}

/* Stil für den Text innerhalb des Detailbereichs */
#minimalistic-calendar-details p {
    white-space: pre-wrap;
    /* Zeilenumbrüche ermöglichen */
    margin-bottom: 10px;
    /* Abstand zwischen Absätzen */
    line-height: 1.5;
    /* Erhöhter Zeilenabstand */
    text-align: left;
    /* Text linksbündig */
    font-size: 16px;
    /* Angemessene Schriftgröße für Lesbarkeit */
}

/* #################################### */
/* minimalisticalendar_legend_shortcode */
/* #################################### */

/* Container für die Legende */
.legend-container {
    padding: 10px;
    /* Innenabstand um den Text */
    background-color: var(--background-color-light);
    /* Heller Hintergrund passend zum Design */
    border: 1px solid var(--border-color);
    /* Rahmen mit Standardfarbe */
    border-radius: 4px;
    /* Abgerundete Ecken */
    margin-top: 20px;
    /* Abstand über der Legende */
    color: var(--text-color-dark);
    /* Dunkle Schriftfarbe */
    font-size: 16px;
    /* Angemessene Schriftgröße */
}

/* Stil für Überschriften in der Legende */
.calendar-legend h3 {
    margin-bottom: 10px;
    /* Abstand unter der Überschrift */
    font-size: 18px;
    /* Größere Schriftgröße */
    font-weight: bold;
    /* Hervorgehobene Schrift */
}

/* Stil für Punkte in der Legende */
.calendar-legend .bullet {
    display: inline-block;
    /* Punkte werden als Inline-Block-Element dargestellt */
    width: 12px;
    /* Einheitliche Breite der Punkte */
    height: 12px;
    /* Einheitliche Höhe der Punkte */
    border-radius: 50%;
    /* Punkte sind rund */
    margin-right: 10px;
    /* Abstand zwischen Punkt und nachfolgendem Text */
    vertical-align: middle;
    /* Vertikale Ausrichtung zur Mitte */
}

/* Stile für Listen innerhalb der Legende */
.legend-container ul {
    list-style: none;
    /* Keine Standardaufzählungszeichen */
    margin: 0;
    /* Kein Abstand um die Liste */
}

.legend-container li {
    display: flex;
    /* Flexbox zur einfachen Ausrichtung */
    align-items: center;
    /* Vertikale Zentrierung der Inhalte */
    margin-bottom: 5px;
    /* Abstand zwischen Listenelementen */
}

.legend-container li.subcategory {
    margin-left: 20px;
    /* Einzug für untergeordnete Kategorien */
    font-size: 0.8em !important;
    /* Kleinere Schriftgröße für Unterkategorien */
}

.legend-container ul.subcategories {
    padding-left: 10px;
    /* Zusätzlicher Abstand für verschachtelte Listen */
}

/* Stil für Punkte innerhalb der Legende */
.legend-container .bullet {
    display: inline-block;
    /* Inline-Block-Element für runde Punkte */
    width: 10px;
    /* Kleinere Breite der Punkte */
    height: 10px;
    /* Kleinere Höhe der Punkte */
    border-radius: 50%;
    /* Punkte sind rund */
    margin-right: 10px;
    /* Abstand zwischen Punkt und Text */
}

/* Stile für Überschriften innerhalb der Legende */
.legend-container h3 {
    margin-top: 5px !important;
    /* Kleiner Abstand über der Überschrift */
    margin-bottom: 10px !important;
    /* Abstand unter der Überschrift */
}

/* Stile für die Legendelemente */
#legend-items {
    text-transform: uppercase;
    /* Text wird in Großbuchstaben angezeigt */
    padding: 0px;
    /* Kein zusätzlicher Innenabstand */
}

/* #################################### */
/*  minimalisticalendar_list_shortcode  */
/* #################################### */

/* Stil für Symbole zum Ein-/Ausklappen in der Hauptkategorie */
.main-category[data-has-subcategories="true"] .toggle-symbol {
    cursor: pointer;
    /* Zeigeränderung bei Hover */
    margin-left: 10px;
    /* Abstand links vom Symbol */
}

/* Versteckte Elemente */
.hidden {
    display: none;
    /* Unsichtbare Elemente */
}

/* Abstände zwischen einzelnen Listeneinträgen */
.list-entry {
    padding-bottom: 10px;
    /* Abstand nach unten für jeden Eintrag */
}

/* Abstände zwischen Monatsabschnitten */
.list-month {
    padding-bottom: 20px;
    /* Größerer Abstand zwischen Monaten */
}

/* Stil für Datumsangaben in der Liste */
.list-date {
    font-weight: bold;
    /* Hervorhebung durch Fettdruck */
}

/* Stil für Quellenangaben in der Liste */
.list-source {
    font-style: italic;
    /* Hervorhebung durch Kursiv */
    font-size: 0.8em;
    /* Kleinere Schriftgröße für Unterkategorien */
}

/* Stil für Titel in der Liste */
.list-title {
    /* Leere Klasse für weitere Formatierung */
}