/* css/style.css - Übernommen aus deiner Originaldatei */

/* Grundlegende Stile - passe sie nach Bedarf an */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /* max-width: 800px; */ /* Entfernt oder angepasst für Bootstrap-Container */
    /* margin: 20px auto; */ /* Bootstrap-Container übernimmt Zentrierung */
    /* padding: 0 10px; */ /* Bootstrap-Container hat eigenes Padding */
    background-color: #f8f9fa; /* Heller Hintergrund für Kontrast */
}

/* Konsistente Abstände für Überschriften */
h2, h3, h4, h5, h6 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

/* Etwas mehr Platz unter Formulargruppen */
.mb-3, .mb-4 {
    margin-bottom: 1.5rem !important;
}

/* Styling für die Tabelle im Admin-Bereich für bessere Lesbarkeit */
.table-sm th, .table-sm td {
    padding: 0.4rem; /* Etwas mehr Padding als Bootstrap Standard für table-sm */
    vertical-align: middle; /* Vertikal zentrieren */
}

/* Hervorhebung für inaktive Zeilen in Admin-Tabelle */
.table-light.text-muted.opacity-75 td {
    font-style: italic;
}

/* Sorge dafür, dass die Beschreibung in Tabellen umbricht */
.text-break {
    word-break: break-word; /* Stellt sicher, dass lange Wörter umgebrochen werden */
    white-space: normal !important; /* Überschreibt ggf. andere White-Space-Regeln */
}

/* Stil für Flash-Nachrichten (Bootstrap macht das meiste, aber zur Sicherheit) */
.alert {
    margin-top: 1rem;
}

/* Zentrierter Footer */
footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #dee2e6; /* Leichte Trennlinie */
}

/* Anpassungen für kleine Bildschirme, falls nötig */
@media (max-width: 768px) {
    /* Beispiel: Schriftgröße in Tabellen anpassen */
    .table {
        font-size: 0.85rem;
    }
    /* Beispiel: Buttons im Admin-Bereich untereinander anordnen */
    .admin-actions a {
      /* display: block; */
      /* margin-bottom: 5px; */
    }
}

/* Falls du spezifische Fehler-Stylings brauchst (Bootstrap hat .is-invalid) */
.error {
    color: #dc3545; /* Bootstrap's danger color */
    font-size: 0.875em;
    margin-top: 0.25rem;
}

/* Minimalistische Anpassung für das Logo/Brand in der Navbar */
.navbar-brand {
    font-weight: 500;
}

/* Badge Positionierung im Admin-Link (aus header.php) */
.navbar .nav-link .badge {
    font-size: 0.65em; /* Kleinere Schrift im Badge */
    padding: 0.3em 0.5em; /* Padding anpassen */
}

/* NEUE CSS-REGELN FÜR DAS LOGO (finale Überarbeitung) */

/* Die gesamte Navbar: Behält ihre normale Höhe und hat 'overflow: visible' */
.navbar {
    padding-top: var(--bs-navbar-padding-y, 0.5rem); /* Standard Bootstrap Padding */
    padding-bottom: var(--bs-navbar-padding-y, 0.5rem); /* Standard Bootstrap Padding */
    overflow: visible; /* Sehr wichtig, damit das Logo herausragen kann */
}

/* Der Navbar-Brand-Container (der Link): Muss der Positionierungsreferenzpunkt für das Logo sein */
.navbar-brand {
    position: relative; /* Wichtig: Macht dies zum Referenzpunkt für das absolut positionierte Logo */
    display: flex; /* Für Flexbox-Ausrichtung von Logo und Text */
    align-items: center; /* Vertikale Zentrierung von Logo und Text */
    /* Padding anpassen, um Platz für das Logo zu schaffen, das sich links davon befindet */
    padding-left: 70px; /* Breite des Logos (60px) + gewünschter Abstand (10px) */
    z-index: 1000; /* Stellt sicher, dass der Brand-Bereich über anderen Elementen liegt */
}

/* Das Logo-Bild selbst */
.navbar-logo {
    height: 60px; /* Gewünschte Höhe */
    width: 60px;  /* Gewünschte Breite */
    position: absolute; /* Positioniert das Logo absolut innerhalb von .navbar-brand */
    padding-top: 10px;
    left: 0; /* Positioniert es ganz links im .navbar-brand */
    top: 50%; /* Vertikale Mitte des .navbar-brand */
    transform: translateY(-50%); /* Zentriert es vertikal basierend auf seiner eigenen Höhe */
    /* Optional: Füge hier einen kleinen Abstand vom linken Rand des Browsers hinzu,
       wenn die Navbar selbst kein Container ist oder du mehr Kontrolle willst.
       Alternativ kannst du das padding-left des .navbar-brand erhöhen. */
    z-index: 1001; /* Sicherstellen, dass das Logo über dem Brand-Hintergrund liegt */
}

/* Anpassung des Textes im Navbar-Brand, falls nötig, z.B. wenn er zu nah am Logo ist */
.navbar-brand span {
    margin-left: 10px; /* Abstand zwischen Logo und Text */
}


/* Anpassung für kleine Bildschirme */
@media (max-width: 576px) {
    .navbar-logo {
        height: 40px; /* Kleinere Höhe auf Mobilgeräten */
        width: 40px;  /* Kleinere Breite auf Mobilgeräten */
        left: 0; /* Bleibt am linken Rand des Brand-Bereichs */
        top: 50%;
        transform: translateY(-50%);
    }
    .navbar-brand {
        padding-left: 50px; /* Breite des Logos (40px) + Abstand (10px) */
    }
}