/* Allgemeine Stile für den Kalender-Container */
#calendar-container {
    
    max-width: fit-content; /* Weiter erhöht für eine noch breitere Darstellung */
    margin: 20px auto;
    padding: 20px; /* Etwas mehr Innenabstand */
    background-color: var(--seidengrau); /* Heller Hintergrund für den Container */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}

/* Header des Kalenders (Buttons und Selects) */
#calendar-header {
    /* Die Bootstrap-Klassen d-flex, justify-content-between, align-items-center
       sind bereits im HTML vorhanden. Wir stellen sicher, dass sie nicht überschrieben werden. */
    display: flex !important; /* Erzwingt Flex-Display, falls es überschrieben wird */
    flex-direction: row !important; /* Stellt horizontale Anordnung sicher */
    justify-content: space-between !important; /* Verteilt den Platz */
    align-items: center !important; /* Zentriert vertikal */
    flex-wrap: nowrap; /* Stellt sicher, dass die Elemente nicht in die nächste Zeile umbrechen. */
    padding: 10px 15px;
    border-radius: 6px;
    border-bottom: 1px solid var(--seidengrau-orig); /* Dezente Trennlinie zum Kalender */
}

#calendar-header .btn-primary {
    background-color: var(--gold); /* Verwendung deiner Farbvariable */
    border-color: var(--gold-dunkel);
    color: var(--anthrazit);
}

#calendar-header .btn-primary:hover {
    background-color: var(--gold-dunkel);
    border-color: var(--gold-dunkel);
}

/* Stellt sicher, dass Buttons und Selects die gleiche Höhe haben */
#calendar-header .btn,
#calendar-header .form-select {
    height: calc(1.5em + 0.75rem + 2px); /* Standard Bootstrap Form-Control Höhe */
    padding: 0.375rem 0.75rem; /* Standard Bootstrap Padding */
    font-size: 1rem; /* Standard Bootstrap Schriftgröße */
    line-height: 1.5; /* Standard Bootstrap Line-height */
}

/* Direkte Button-Kinder des Headers */
#calendar-header>.btn {
    flex: 0 0 auto; /* Nicht wachsen, nicht schrumpfen, Basisbreite automatisch */
    white-space: nowrap; /* Verhindert Umbruch innerhalb der Buttons, falls Text länger wäre */
}

/* Spezifische Stile für den Container der Select-Boxen */
#calendar-header .month-year-selectors {
    /* Die Klasse "d-flex" ist bereits im HTML vorhanden. */
    flex: 1 1 0; /* Erlaubt Wachsen und Schrumpfen, Basisbreite ist 0, damit es den Raum füllt */
    min-width: 0; /* WICHTIG: Erlaubt diesem Flex-Item, kleiner als seine Inhaltsbreite zu werden. */
    /* display: flex; ist bereits durch Bootstrap-Klasse .d-flex gesetzt */
    justify-content: center; /* Zentriert die Select-Boxen horizontal innerhalb dieses Divs. */
    align-items: center; /* Zentriert die Select-Boxen vertikal. */
    margin: 0 0.5rem; /* Fügt horizontalen Abstand zu den Pfeil-Buttons hinzu. */
    overflow: hidden; /* Verhindert, dass übermäßig breiter Inhalt den Container sprengt */
}

/* Anpassung der Selects */
#calendar-header .form-select {
    border-color: var(--seidengrau-orig);
    box-shadow: none; /* Entfernt den Standard-Bootstrap-Schatten bei Fokus */
    /* width: auto; wird beibehalten, aber wir geben eine maximale Breite, um Umbruch zu vermeiden */
    max-width: 120px; /* Beispiel: Maximale Breite für jede Select-Box, anpassen bei Bedarf */
    flex: 0 1 auto; /* Nicht wachsen, erlaubt Schrumpfen, Basisbreite automatisch */
    /* Die Klasse "mx-1" im HTML der Select-Boxen sorgt bereits für einen kleinen Abstand zueinander,
       falls das gewünscht ist oder wenn sie sehr nah am Rand ihres Containers wären. */
}

/* Verbesserter Fokus-Zustand für Selects */
#calendar-header .form-select:focus {
    border-color: var(--gold, #FFC107); /* Goldener Rahmen bei Fokus, mit Fallback */
    outline: 0;
    /* Erzeugt einen semi-transparenten Schatten basierend auf der --gold Variable */
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--gold, #FFC107) 25%, transparent);
}

/* Kalendertabelle */
#calendar-table {
    margin-top: 15px;
}

#calendar-table th {
    background-color: var(--seidengrau); /* Heller Hintergrund für die Wochentage */
    color: var(--anthrazit);
    font-weight: 600;
}

/* Zellen und Kopfzellen */
#calendar-table td,
#calendar-table th {
    padding: 5px; /* Konsistentes Padding */
    width: calc(100% / 7); /* Gleichmäßige Breite für 7 Spalten */
    height: 50px; /* Feste Höhe */
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box; /* Padding und Border werden in die Breite/Höhe einberechnet */
}

/* Hervorhebung für den heutigen Tag */
/* td.today selbst erhält keinen speziellen Hintergrund mehr, wenn .day-number gestylt wird */
#calendar-table td.today .day-number {
    background-color: var(--gold, #FFC107); /* Deine Gold-Variable, mit Fallback */
    color: var(--anthrazit); /* Dunkler Text auf hellem Gold */
    border-radius: 50%; /* Macht den heutigen Tag rund */
    display: inline-flex; /* Ermöglicht Zentrierung des Inhalts */
    align-items: center;
    justify-content: center;
    width: 30px;  /* Größe des Kreises für die Tagesnummer */
    height: 30px; /* Größe des Kreises für die Tagesnummer */
    line-height: 1; /* Stellt sicher, dass die Zahl im kleinen Kreis zentriert ist */
}

/* Struktur innerhalb der Kalenderzelle */
/* Die allgemeinen td-Stile (Höhe, Padding, Ausrichtung) sind jetzt oben definiert */

#calendar-table td .day-number {
    font-weight: bold; /* Tagesnummer fett darstellen */
    line-height: 1; /* Angepasst für bessere Zentrierung im Kreis */
    display: inline-flex; /* Ermöglicht Zentrierung und feste Größe */
    align-items: center;
    justify-content: center;
    width: 30px; /* Feste Größe für den Tagesnummern-Bereich */
    height: 30px; /* Feste Größe für den Tagesnummern-Bereich */
}

/* Mauszeiger für auswählbare Tage */
#calendar-table td:not(.past-day):not(.booked-day):not(.disabled-for-selection) {
    cursor: pointer;
}

/* Vergangene Tage im aktuellen Monat ausblenden */
#calendar-table td.past-day {
    visibility: hidden; /* Macht das Element unsichtbar, aber es belegt weiterhin Platz */
    /* Der Cursor ist hier irrelevant, da das Element nicht sichtbar ist. */
}

/* Belegte Tage */
#calendar-table td.booked-day {
    background-color: var(--seidengrau); /* Hellerer, dezenter Hintergrund */
    color: var(--seidengrau-orig); /* Dunklere, aber nicht schwarze Schrift */
    /* text-decoration: line-through; */ /* Optional: Durchstreichen, falls gewünscht */
    /* pointer-events: none; ist bereits in .disabled-for-selection und .booked-day implizit durch JS-Logik */
}

/* Ausgewählte Tage und Zeitraum */
#calendar-table td.selected-arrival .day-number,
#calendar-table td.selected-departure .day-number { /* Korrigiert: Beide zielen auf .day-number */
    background-color: var(--blau, #007bff) !important;
    /* Bootstrap Primary Blue oder Fallback */
    color: var(--weiss, #FFFFFF) !important;
    border-radius: 50%;
    /* Der Kreis wird auf die Tagesnummer angewendet, nicht auf die ganze Zelle */
    width: 30px; /* Behält die Größe des Kreises bei */
    height: 30px; /* Behält die Größe des Kreises bei */
}

#calendar-table td.selected-range {
    background-color: color-mix(in srgb, var(--blau, #007bff) 30%, transparent) !important;
    /* Hellerer Blauton für den Bereich */
    /* color: var(--anthrazit) !important; */
    /* Textfarbe ggf. anpassen */
    /* Wichtig: Sicherstellen, dass .selected-range nicht die Dimensionen ändert */
    /* Wenn .selected-range einen Border oder zusätzliches Padding hätte, müsste das hier berücksichtigt werden */
}

/* Tage, die nicht als Abreise gewählt werden können */
#calendar-table td.disabled-for-selection {
    background-color: var(--seidengrau, #D3D3D3) !important;
    /* Helles Grau */
    color: var(--seidengrau-orig) !important;
    pointer-events: none;
    text-decoration: line-through;
}

/* Stil für die Preisvorschau unter dem Tag */
#calendar-table td .price-preview {
    font-size: 0.7em; /* Kleinere Schriftgröße für den Preis */
    color: var(--stammeiche); /* Farbe für den Preis */
    margin-top: 2px; /* Kleiner Abstand zur Tagesnummer */
    min-height: 1em; /* Verhindert Layout-Sprünge, wenn Preis geladen wird */
}

/* Preisvorschau in ausgewählten/belegten Zellen ausblenden */
#calendar-table td.selected-arrival .price-preview,
#calendar-table td.selected-departure .price-preview,
#calendar-table td.selected-range .price-preview,
#calendar-table td.booked-day .price-preview,
#calendar-table td.past-day .price-preview {
    display: none;
}

/* Container für die Details unter dem Kalender */
.details-container {
    max-width: fit-content;
    margin: 30px auto 0 auto;
    /* Abstand zum Kalender */
    padding: 20px;
    /* Innenabstand */
    background-color: var(--weiss);
    /* Weißer Hintergrund */
    border-radius: 8px;
    /* Abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Leichter Schatten */
    border: 1px solid #ddd;
    /* Dezenter Rand */
}

/* In calendar.css oder stylesheet.css */
#selection-info {
    border: 1px solid var(--seidengrau-orig);
    padding: 15px;
    border-radius: 5px;
    background-color: var(--seidengrau); /* Oder eine andere passende Hintergrundfarbe */
}

#selection-info h4 {
    margin-top: 0;
    color: var(--stammeiche); /* Passend zu anderen Überschriften */
}

#selection-info p strong {
    color: var(--anthrazit); /* Etwas dunkler für die Label */
}

/* Neue Spans für Preisinformationen in der Auswahl-Info */
#selection-info p span {
    font-weight: normal; /* Standardgewicht für die Werte */
}

#selection-info p strong {
    display: inline-block; /* Ermöglicht feste Breite für Labels */
    min-width: 120px; /* Beispiel: Feste Breite für die Labels */
    margin-right: 10px; /* Abstand zwischen Label und Wert */
}

/* Stile für den Personen-Auswahl-Container und das Input-Feld */
#persons-input-container .input-group {
    width: 150px; /* Von Inline-Style verschoben */
}

#persons-input-container input[type="text"][readonly].form-control {
    background-color: var(--seidengrau); /* Konsistent mit anderen readonly-Feldern */
    cursor: default; /* Zeigt an, dass das Feld nicht direkt bearbeitet werden kann */
    /* Bootstrap .form-control text-center ist bereits im HTML */
}


.person-selector-group .person-btn.active {
    background-color: var(--blau, #007bff) !important;
    /* Aktiven Button hervorheben */
    color: var(--weiss, #FFFFFF) !important;
}

/* Spezifische Stile für den "Reservieren"-Button */
#reservieren-button {
    background-color: var(--backstein); /* Deine primäre Aktionsfarbe */
    border-color: var(--backstein);
    color: var(--weiss);
    padding: 0.75rem 1.5rem; /* Etwas großzügigeres Padding für btn-lg */
    font-size: 1.15rem; /* Etwas größere Schrift für btn-lg */
    font-weight: bold;
    text-transform: uppercase; /* Optional: Text in Großbuchstaben */
    letter-spacing: 0.5px; /* Optional: Leichter Buchstabenabstand */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

#reservieren-button:hover,
#reservieren-button:focus {
    background-color: color-mix(in srgb, var(--backstein) 85%, black); /* Etwas dunkler beim Hover/Fokus */
    border-color: color-mix(in srgb, var(--backstein) 80%, black);
    color: var(--weiss);
    transform: translateY(-2px); /* Leichter Anhebe-Effekt */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Leichter Schatten beim Hover/Fokus */
}

.column-span {
    /* Span über beide Columns */

    grid-column: 1 / -1; /* Spannt über alle Spalten */
}