form#Suchseite {
    display: flex;
    flex-wrap: wrap; /* Elemente umbrechen, wenn nötig */
    align-items: center; /* Vertikale Ausrichtung */
    gap: 0; /* Kein Abstand zwischen den Blöcken */
}

form#Suchseite > div {
    flex: 0 0 auto; /* Elemente sollen sich nicht dehnen */
    margin: 0; /* Entfernt äußere Abstände */
    padding: 0; /* Entfernt innere Abstände */
    display: flex; /* Flexbox für horizontale Ausrichtung */
    align-items: center; /* Zentriert die Inhalte vertikal */
}

/* Abstand zwischen Label und Textfeld */
form#Suchseite label {
    margin-right: 10px; /* Abstand rechts vom Label */
    white-space: nowrap; /* Verhindert Zeilenumbruch beim Label */
}

/* Abstand nach den Input-Feldern */
form#Suchseite input[type="text"],
form#Suchseite input[type="date"] {
    margin-right: 10px; /* Abstand rechts vom Input-Feld */
    box-sizing: border-box; /* Verhindert Überlauf bei Padding */
}

/* Buttons in einer separaten Zeile */
form#Suchseite .buttons-container {
    flex: 1 1 100%; /* Nimmt die volle Breite der Zeile ein */
    display: flex;
    gap: 10px; /* Abstand zwischen den Buttons */
    justify-content: flex-start; /* Buttons links ausrichten */
}

.custom-row {
    color: inherit !important; /* Wird durch PHP überschrieben */
}

.tourenart-symbol {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid black; /* Umrandung für besseren Kontrast */
}

/* Helle Farben automatisch dunkler machen */
.tourenart-symbol.light {
    filter: brightness(80%);
}

.tourenart-text {
    color: black !important; /* Stellt sicher, dass der Text schwarz bleibt */
}

input[type="submit"] {
    width: auto;
    min-width: 120px;
    height: 42px; /* Leicht erhöhte Höhe für bessere Balance */
    padding: 5px 15px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    align-items: center; /* Perfekte vertikale Zentrierung */
    justify-content: center; /* Perfekte horizontale Zentrierung */
    text-align: center;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Allgemeine Regeln für alle Text-Inputs und Textareas */
input[type="text"],
textarea {
    width: 100%; /* Nimmt die volle verfügbare Breite des Elternelements ein */
    box-sizing: border-box; /* Stellt sicher, dass Padding und Border in der Breite enthalten sind */
    /* Optional: eine maximale Breite für größere Bildschirme */
    max-width: 600px; /* Beispielwert: Felder werden nicht breiter als 600px */
}

/* Spezifische Regeln für Textareas (für dynamisches Wachstum) */
textarea {
    resize: none; /* Verhindert manuelles Größenändern durch den Benutzer */
    overflow: hidden; /* Verbirgt Scrollleisten, wenn Inhalt noch nicht über max-Höhe hinausgeht */
    min-height: 50px; /* Minimale Höhe, auch wenn leer */
}

/* Media Queries für responsive Anpassung auf kleineren Bildschirmen */
@media (max-width: 768px) {
    input[type="text"],
    textarea {
        max-width: 95%; /* Auf Tablets und kleineren Bildschirmen max. 95% der Breite */
        margin-left: auto; /* Zentrierung */
        margin-right: auto; /* Zentrierung */
        display: block; /* Für Zentrierung notwendig, falls nicht schon Block-Level */
    }
}

@media (max-width: 480px) {
    input[type="text"],
    textarea {
        max-width: 98%; /* Auf sehr kleinen Smartphones fast die volle Breite */
    }
}

/* textarea { */
    /* border: 1px solid #ccc;  */
    /* resize: none; */
    /* overflow: hidden; */
    /* min-height: 24px; */
    /* width: 100%; */
    /* box-sizing: border-box; */
/* } */

/* .textarea-error-border { */
    /* border: 2px solid red !important; /* Der rote Rahmen mit hoher Priorität */ */
/* } */

/* Bestehende, möglicherweise überschriebene Regel */
.textarea-error-border {
    border: 2px solid red !important;
}

/* NEU: Spezifischere Regeln für die Formulare */
form[name="TourenbuchNeuEintrag"] textarea.textarea-error-border,
form[name="TourenbuchBearbeitenSeite"] textarea.textarea-error-border {
    border: 2px solid red !important;
}

/* Stellen Sie sicher, dass die Standard-Textarea-Regel nicht später die wichtige Regel überschreibt */
/* Diese Regel sollte idealerweise VOR den spezifischen Fehlerregeln stehen, 
   oder Sie müssen sie auch spezifischer machen, um Konflikte zu vermeiden. */
/* Beispiel: Wenn die Standard-Textarea-Regel im tourenbuch-ui.css wie folgt aussieht: */
textarea {
    border: 1px solid #ccc; /* Dies könnte das Problem sein, wenn es nach der .textarea-error-border Regel steht */
    resize: none;
    overflow: hidden;
    min-height: 24px;
    width: 100%;
    box-sizing: border-box;
}

/* Falls nötig, um die Standard-Border auch spezifisch zu machen, wenn der Fehler-Border nicht aktiv ist: */
form[name="TourenbuchNeuEintrag"] textarea:not(.textarea-error-border),
form[name="TourenbuchBearbeitenSeite"] textarea:not(.textarea-error-border) {
    border: 1px solid #ccc;
}