* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
}

/* Gesamte Seite auf volle Höhe setzen */
html, body {
    height: 100%;
    margin: 0;
    padding: 30px 0 0 0; /* Höhe der Navigation berücksichtigen */
    display: flex;
    flex-direction: column;
}
 
@media (min-width: 769px) {   
    html, body {
        overflow-y: scroll;
    }
}

/* Der Hauptinhalt füllt den Platz über dem Footer */
.main-content {
    flex: 1;
    /* padding: 30px 0;  */
}

.error-message {
    color: red;
    font-size: 0.9em;
    display: block;
    margin-top: 5px;
}

/* Login Formulare */

/* Login-Seite */

.login-page {
    font-family: Arial, sans-serif;
    background-color: #f3f6f9;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.login-box {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 350px;
}

.logo-login {
    background: #2a5daa;
    color: white;
    font-size: 24px;
    font-weight: bold;
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 10px;
}

h2 {
    color: #333;
    margin-bottom: 1rem;
}

.form-group {
    text-align: left;
    margin-bottom: 15px;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

input:not([type="checkbox"]) {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    background: #fdfde3;
}

.checkbox-container input[type="checkbox"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    background: #fdfde3;
}

.password-container {
    display: flex;
    align-items: center;
    position: relative;
}
.password-container label{
    display: block;
    margin-right: 5px;
    margin-bottom: 0 !important;
}

.password-container input {
    display: block;
    flex-grow: 1;
    padding-right: 30px;
}

.password-container button {
    display: block;
    background: #2a5daa;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    margin-left: 5px;
}

.btn-primary {
    background: #2a5daa;
    color: white;
    border: none;
    padding: 12px;
    font-size: 16px;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-primary:hover {
    background: #1d4f8f;
}

.forgot-password {
    display: block;
    margin-top: 15px;
}

.forgot-password a {
    text-decoration: none;
    color: #2a5daa;
    font-size: 14px;
}

.forgot-password a:hover {
    text-decoration: underline;
}

/* Login Formular Ende */

header {
    position: relative; /* 🔥 Damit sich das Dropdown überlagern kann */
    z-index: 900; /* Muss unterhalb des Dropdowns bleiben */
}

/* Allgemeine Navigation */
.navbar {
    height: 60px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #007bff, #0056b3);
    padding: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Navbar über alles legen */
}

.nav-container {
    width: 900px;
    margin: 0 auto; /* Zentriert den Container */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Logo links, Menü rechts */
    height: 60px; /* Gleiche Höhe wie Navbar */
}

/* Logo bleibt links */
.navbar .logo {
    flex: 0 0 auto;
}

.nav-container .logo img {
    height: 50px;
    margin-left: 20px;
    margin-top: 3px;
}

/* Menü zentrieren (Desktop) */
.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0;
    margin-right: 20px;
    z-index: 1100;
}

/* Menü-Punkte */
.nav-links li {
    display: inline-block;
}

/* Entfernt den Hover-Hintergrund nur für den Logout-Button */
.nav-links li.logout a {
    padding: 0; /* Entfernt zusätzlichen Innenabstand */
    background: none !important; /* Keine Hintergrundfarbe */
    display: flex; /* Passt sich dem Icon an */
    align-items: center; /* Zentriert das Icon */
    justify-content: center;
    border-radius: 0; /* Falls abgerundete Ecken entfernt werden müssen */
}

.nav-links li.logout a:hover {
    background: none !important; /* Kein Hover-Hintergrund */
}

/* Nur das Bild soll sich beim Hover verändern */
.nav-links li.logout a img {
    transition: opacity 0.3s ease-in-out;
}

.nav-links li.logout a img:hover {
    opacity: 0.7; /* Bild wird leicht transparent */
}

.nav-links a {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 15px;
    transition: background 0.3s;
    border-radius: 5px;
}

.nav-links a:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Hamburger-Button */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 30px;
    color: white;
    cursor: pointer;
}

.active-menu {
    background-color: rgba(255, 255, 255, 0.2); /* Heller Hintergrund */
    color: #fff; /* Optional: Textfarbe ändern */
    font-weight: bold; /* Optional: Fettdruck */
}


.page-title {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: bold;
    color: white;
    white-space: nowrap;
}

/* 🚀 Mobile Ansicht */
@media (max-width: 768px) {

    .navbar {
        justify-content: space-between;
    }

    /* ✅ Mobile-Menü vollständig sichtbar & mittig */
    .nav-links {
        display: none;
        flex-direction: column;
        background: #0056b3;
        position: fixed;
        top: 60px !important; /* Direkt unter Navbar */
        left: 50%;
        transform: translateX(-50%); /* Mittig ausrichten */
        width: 90%; /* Breite für mobile Ansicht */
        max-width: 400px;
        text-align: center;
        padding: 15px 0;
        z-index: 9999 !important; /* Menü über alles legen */
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        margin: 10px 0;
    }

    .menu-toggle {
        display: block;
        margin-right: 20px;
    }

    .page-title {
        display: block;
    }
}

/* Admin-Seite */

.admin-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.button-container {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.admin-container h2 {
    text-align: center;
    color: #0056b3;
    margin-bottom: 20px;
}
.admin-container h3 {
    text-align: center;
    color: #0056b3;
    margin-top: 20px;
}
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}
.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}
.form-group input[type="checkbox"] {
    width: auto;
    margin-right: 10px;
}
.btn {
    display: inline-block;
    padding: 10px;
    font-size: 16px;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}
.btn-primary {
    background-color: #007bff;
    color: white;
}
.btn-primary:hover {
    background-color: #0056b3;
}
.btn-secondary {
    background-color: #6c757d;
    color: white;
}
.btn-secondary:hover {
    background-color: #5a6268;
}

.btn-danger {
    color: white;
    background-color: #dc3545;
}

.btn-danger:hover {
    background-color: #fc1930;
}

.btn-center{
    text-align: center;
    width: 110px;
    margin: 0 auto;
}

.checkbox-label {
    display: inline-flex !important;
    align-items: center;
    gap: 20px; /* Abstand von 20px zwischen Text und Checkbox */
}

/* Nutzer anzeigen */

.user-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.user-table th, .user-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}
.user-table th {
    background-color: #007bff;
    color: white;
}
.icon-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    margin: 0 5px;
}
.icon-button img {
    width: 18px;
    height: 18px;
}

.action-icons {
    display: flex;
    align-items: center;
    gap: 15px; /* Abstand zwischen den Icons */
}

@media (max-width: 768px) {
    .admin-container .action-icons {
        flex-direction: column; /* Icons untereinander statt nebeneinander */
        align-items: center; /* Sorgt für mittige Ausrichtung */
        gap: 10px; /* Kleineren Abstand zwischen den Icons */
    }
    
    .admin-container .action-icons a,
    .admin-container .action-icons form {
        width: 100%; /* Stellt sicher, dass sie in einer Linie bleiben */
        text-align: center;
    }
}

/* Kuerze-Formular im Adminbereich */

/* Kürzelverwaltung spezifisch */
.kuerzel-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/* Tabelle für Kürzelverwaltung */
.kuerzel-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.kuerzel-table th, .kuerzel-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.kuerzel-form {
    display: flex;
    flex-direction: column; /* Alle Elemente untereinander */
    gap: 10px; /* Abstand zwischen Feldern und Button */
}

.kuerzel-input-container {
    display: flex;
    gap: 10px; /* Abstand zwischen den Eingabefeldern */
    justify-content: center; /* Zentriert die Felder */
}

/* Kürzel-Formulare kompakter */
.kuerzel-input {
    /* min-width: 70px; Mindestbreite */
    padding: 6px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.kuerzel-input:nth-of-type(2){
    flex: 1; 
}

.kuerzel-input:nth-of-type(3){
    flex: 3; 
}

/* Buttons für die Kürzelverwaltung */
.kuerzel-actions {
    display: flex;
    gap: 5px;
    align-items: center;
}

.kuerzel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 14px;
    padding: 5px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.kuerzel-edit {
    background-color: #007bff;
    color: white;
}

.kuerzel-edit:hover {
    background-color: #0056b3;
}

.kuerzel-delete {
    background-color: #dc3545;
    color: white;
}

.kuerzel-delete:hover {
    background-color: #a71d2a;
}


/* Backup Container */

.backup-container {
    text-align: center;
    margin-top: 20px;
}

.backup-container h3 {
    margin-bottom: 10px;
}

.backup-container form {
    display: inline-block;
}

.backup-list {
    margin-top: 10px;
    font-weight: bold;
}

.backup-item {
    display: block;
    padding: 5px 0;
}

/* Info Tabelle neben Termineingabeformular */

.hidden {
    display: none !important;
}

.visible {
    display: flex !important; /* Standardmäßig flex für die Tabelle */
}

/* Alternative Anzeige für block */
[data-layout="block"] .visible {
    display: block !important;
}

#edit-container-info {
    display: block;
    flex-wrap: wrap;
    gap: 20px;
}

#appointmentForm {
    flex: 1;
}

.table-container-info {
    padding-top: 48px;
    width: 100% !important;
    flex: 1;
}

.table-container-info .table-info {
    height: auto !important;
    max-height: 490px;
}

.table-container-info hr{
    display: none;
}

.table-container-info table.table-info  {
 margin-left: auto;
 margin-right: auto;
}

#appointmentForm button[type=submit]{
    display: block;
    margin: 0 auto;
}

@media (max-width: 768px) {
    #edit-container-info {
        flex-direction: column;
    }

    .table-container-info {
        display: block;
        margin: 0 auto;
        padding-top: 0px;
        width: 100% !important;
        flex: 1;
    }

    .table-container-info .table-info {
        height: 197px !important;
    }

    .table-container-info hr{
        display: block;
    }
}

/* Button zum Ein- und Ausblenden bei Termineingabe */

#appointmentForm {
    transition: all 0.3s ease-in-out;
}

#toggleFormButton {
    display: block;
    margin: 10px auto;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: bold;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#toggleFormButton:hover {
    background: #0056b3;
}


main {
    padding: 20px;
}

/* Hinzufgen Button bei Hunden und Menschen */

/* Standard-Layout (Desktop) */
.dropdown-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert die Elemente vertikal */
    justify-content: space-between; /* Zentriert die Elemente horizontal */
    gap: 10px; /* Abstand zwischen Button und Dropdown */
}

/* Hinzufgen-Button Styling */
.add-button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid #28a745; /* Grner Rand */
    background-color: #28a745; /* Grne Hintergrundfarbe */
    color: white;
    border-radius: 5px;
    font-weight: bold; /* Schrift fett fr besseren Kontrast */
    text-decoration: none; /* Entfernt den Unterstrich */
}

.add-button:hover {
    background-color: #218838; /* Dunkleres Grn beim Hover */
    text-decoration: none; /* Kein Unterstrich beim Hover */
}

.add-button:focus {
    outline: none; /* Entfernt den Standardfokusrahmen */
    box-shadow: 0 0 5px #28a745; /* Grner Fokusrahmen beim Klicken */
}

/* Mobile Ansicht (Buttons untereinander) */
@media (max-width: 768px) {
    .dropdown-container {
        flex-direction: column; /* Stellt die Buttons untereinander */
        align-items: center; /* Zentriert die Buttons horizontal */
    }

    .add-button {
        margin-bottom: 10px; /* Abstand zwischen Button und Dropdown */
    }
}

/* --- Dropdownmenü --- */

/* Cursor zu "Hand" ändern bei Hover auf Dropdown-Elemente */
.dropdown-item {
    cursor: pointer;
}

.dropdown-container {
    position: relative;
    z-index: 10;
}

/* Container für benutzerdefiniertes Dropdown */
.custom-dropdown {
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    position: relative;
}

.custom-dropdown:nth-of-type(3) {
    z-index: 5;
}

/* Diagramm bei Hunden */ 
.chart-wrapper {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 900px;
    overflow-x: auto;
    position: relative;
}

.y-axis-container {
    flex-shrink: 0;
    width: 50px; /* Fixierte Y-Achse */
    background: white; /* Hintergrund, damit es sich vom Diagramm abhebt */
    position: sticky;
    left: 0;
    z-index: 10;
}

.chart-container {
    flex-grow: 1;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
    max-width: 1500px; /* Erhöhe auf 1200px */
}

/* Stil für den Button, der das Dropdown öffnet */
.dropdown-button {
    width: 100%;
    padding: 14px;
    background-color: #0056b3;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Die Dropdown-Liste */
.dropdown-list {
    display: none;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    border-radius: 6px;
    background: white;
    padding: 5px 0;
    margin-top: 5px;
    list-style: none;
    position: absolute;
    left: 0;
    top: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
    z-index: 20;
}

/* Einzelne Dropdown-Elemente */
.dropdown-item {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
    color: #333;
    background-color: white;
}

/* Letztes Element ohne Rand */
.dropdown-item:last-child {
    border-bottom: none;
}

/* Abwechselnde Hintergrundfarben für besseren Kontrast */
.dropdown-item:nth-child(even) {
    background-color: #f1f1f1;
}

.dropdown-item:nth-child(odd) {
    background-color: #ffffff;
}

/* Die Beschreibung unter dem Namen */
.description {
    font-size: 14px;
    color: #555;
    opacity: 1;
}

/* Tabelle Infos */
/* Tabelle Infos */
.table-info {
    width: 400px; /* Fixe Breite beibehalten */
    height: 197px; /* Höhe begrenzen */
    max-height: 490px; /* Maximale Höhe für Anpassbarkeit */
    overflow-y: auto; /* Vertikales Scrollen aktivieren */
    overflow-x: hidden; /* Horizontalen Scrollbalken verhindern */
    display: block; /* Erforderlich für das Scrollverhalten */
    margin-top: 15px;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Das tbody soll scrollbar sein */
/* Das tbody soll scrollbar sein und mitwachsen */
.table-info tbody {
    display: block;
    height: auto;
    max-height: calc(100% - 40px); /* Automatisch anpassbar, bleibt innerhalb der Tabelle */
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}

/* Header bleibt fixiert */
.table-info thead {
    display: table;
    width: 400px; /* Fixe Breite */
    table-layout: fixed;
    position: sticky;
    top: 0;
    background-color: #007bff; /* Blaue Hintergrundfarbe */
    color: white;
    z-index: 10;
}

/* Spalten fixieren */
.table-info th {
    background-color: #007bff;
    color: white;
    font-weight: bold;
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Zeilenstruktur */
.table-info tr {
    display: table;
    width: 400px; /* Fixe Breite */
    table-layout: fixed; /* Gleiche Spaltenbreite */
}

/* Tabellenzellen */
.table-info td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

.table-info td:first-child,
.table-info th:first-child {
    width: 70px;
}

.table-info td:first-child {
    text-align: center;
}

/* Alternierende Zeilenfarben */
.table-info tr:nth-child(even) {
    background-color: #f2f2f2;
}

.table-info tr:nth-child(odd) {
    background-color: #ffffff;
}

/* Hover-Effekt */
.table-info tr:hover {
    background-color: #e9ecef;
}

/* Responsive Design */
@media (max-width: 768px) {
    .table-info {
        width: 100%; /* Passt sich an kleinere Bildschirme an */
    }
}


/* -------------------------------------------------- */

/* .row-betreut td,
.row-betreut a,
.row-betreut p,
.row-betreut span {
    color: #999 !important;
} */

.row-betreut {
    opacity: 0.4; /* alles leicht ausgegraut */
}

/* Falls bestimmte Elemente volle Deckkraft behalten sollen */
.row-betreut img,
.row-betreut .dog-profile-img {
    opacity: 1;
}

/* Container für Tabellen */
.table-container {
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow-x: auto; /* Falls die Tabelle breiter als der Bildschirm ist */
}

.table-dates {
    width: 100%; /* Stellt sicher, dass die Tabelle sich anpasst */
    table-layout: auto; 
    border-collapse: collapse;
}

.table-container h2 {
    padding: 15px 0;
    text-align: center; /* Zentrieren der Überschrift */
}

/* Tabelle mit schönem Design */
table.table-dates {
    width: 100%; /* Stellt sicher, dass die Tabelle sich anpasst */
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto;
}

/* Tabellenkopf */
.table-dates th {
    background-color: #007bff;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px;
    text-align: left;
    font-weight: bold;
    cursor: pointer;
}

/* Tabellenzellen */
.table-dates td {
    vertical-align: middle; /* Inhalt mittig ausrichten */
    padding: 12px; /* Gleicher Padding-Wert für alle Zellen */
    border-bottom: 1px solid #ddd; /* Einheitliche untere Linie */
}


/* .table-dates td.actions, */
.actions-icons,
.table-dates th:nth-child(1) {
    width: 100px !important; /* Kann nach Bedarf angepasst werden */
    text-align: center;
}

/* Spezielle Anpassung für die Aktionen-Zelle */
.table-dates td.actions {
    width: 100px !important; /* Oder eine andere Breite nach Bedarf */
    display: table-cell !important; /* Sicherstellen, dass es sich wie eine normale Tabelle verhält */
    text-align: center; /* Zentrieren der Icons */
    vertical-align: middle; /* Vertikal zentrieren */
    padding: 12px; /* Gleicher Padding-Wert */
    border-bottom: 1px solid #ddd; /* Gleiche Linienhöhe */
}

/* Falls die Icons in der "Aktionen"-Spalte zu klein oder ungleich sind */
.table-dates td.actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px; /* Standardgröße für Icons */
    padding: 5px; /* Einheitliches Padding für bessere Ausrichtung */
}

/* Verhindert, dass sich die Zellenhöhe durch zu große Icons ändert */
.table-dates td.actions img,
.table-dates td.actions a {
    max-height: 20px; /* Maximalhöhe setzen */
}

/* Farben fürs Testergebnis */
.test-border {
    width: 6px;
    border-radius: 3px;
    margin-right: 8px;
}

/* Abwechselnde Zeilenfarben */
.table-dates tr:nth-child(even) {
    background-color: #f8f9fa;
}

.table-dates tr:nth-child(odd) {
    background-color: #ffffff;
}

/* Links in der Tabelle */
.table-dates a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

.table-dates a:hover {
    text-decoration: underline;
}    

.table-dates tbody td.actions {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.date-empty {
    background-color: #d3d3d3; /* Hellgrau */
    color: #666; /* Dunklere Schriftfarbe für bessere Lesbarkeit */
    font-style: italic;
    text-align: center;
}

#loadMore {
    display: block;
    width: 200px;
    margin: 20px auto;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#loadMore:hover {
    background-color: #0056b3;
}

.table-dates td:first-child,
.table-dates th:first-child {
    text-align: center;
}

.table-dates td.mobile-actions-wrapper {
    display: none;
}

/* Responsives Design */
@media (max-width: 768px) {
    /* Container für mobile Ansicht */
    .table-container {
        width: auto;
        padding: 10px;
    }

    /* Tabelle als Block-Element */
    .table-dates {
        width: 100%;
        display: block;
    }

    /* Aktionen-Spalte darf sich anpassen */
    .table-dates td.actions {
        width: 100% !important; /* Erlaubt volle Breite */
        display: flex;
        justify-content: space-between; /* Schiebt die Icons an den Rand */
        align-items: center;
        padding: 10px;
    }
    
    /* Falls noch mehr Abstand gewünscht ist */
    .table-dates td.actions a {
        flex: 1;
        text-align: center;
    }

    /* Setzt das erste Icon ganz nach links */
    .table-dates td.actions a:first-child {
        justify-content: flex-start;
        text-align: left;
    }

    /* Setzt das letzte Icon ganz nach rechts */
    .table-dates td.actions a:last-child {
        justify-content: flex-end;
        text-align: right;
    }

    /* Falls noch mehr Platz gebraucht wird */
    .table-dates td.actions a {
        min-width: 80px; /* Erhöht Abstand zwischen den Icons */
    }

    /* Das | Zeichen in der mobilen Ansicht ausblenden */
    .table-dates td.actions .separator {
        display: none;
    }

    /* Aktionen-Überschrift in der mobilen Ansicht ausblenden */
    .table-dates tbody td.actions::before {
        content: none !important;
    }

    /* Kopfzeile entfernen */
    .table-dates thead {
        display: none;
    }

    /* Tabelle als flexibles Block-Element */
    .table-dates tbody {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* Einzelne Zeilen als flex-Container */
    .table-dates tbody tr {
        display: flex;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 10px;
        border: 1px solid #ddd;
        padding: 10px;
        border-radius: 8px;
        background: #f9f9f9;
    }

    /* Inhalte linksbündig ausrichten */
    .table-dates tbody td {
        display: block; /* Block-Element für klare Struktur */
        text-align: left; /* Inhalte links ausrichten */
        padding: 8px;
        border: none;
        font-size: 16px;
        box-sizing: border-box;
    }

    /* Die Icons in der mobilen Ansicht ganz nach links & rechts setzen */
    .table-dates tbody td.actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Labels für die mobile Ansicht */
    .table-dates tbody td::before {
        content: attr(data-label) ": ";
        font-weight: bold;
        color: #333;
        padding: 0 5px;
        display: inline-block;
    }
    .table-dates tbody td[data-label="BeschreibungKurz"]::before {
        content: "Beschreibung: ";
    }

    /* Ganze Karte etwas kompakter */
    .table-dates tbody tr {
        padding: 6px 8px;
        margin-bottom: 8px;
        border-radius: 6px;
    }

    /* Weniger Abstand in den Zeilen */
    .table-dates tbody td {
        padding: 4px 0;
        font-size: 15px; /* statt 16px */
    }

    /* Label etwas dezenter */
    .table-dates tbody td::before {
        font-size: 15px;
        color: #333;
        width: 110px; /* verhindert Zeilenbruch */
        display: inline-block;
    }

    /* Hundename klarer */
    .dog-name-text {
        font-size: 15px !important;
        font-weight: 600;
    }

    /* Rasse etwas kleiner */
    .dog-race-text {
        font-size: 15px !important;
    }

        /* Alte Checkbox + alte Icons ausblenden */
    #tableDates tbody td:first-child,
    #tableDates tbody td.actions {
        display: none !important;
    }

    /* Neue mobile Zeile anzeigen */
    #tableDates td.mobile-actions-wrapper {
        display: block;
        padding: 8px 0;
        border-bottom: 1px solid #ddd;
    }

    .mobile-actions-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .mobile-select {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 1;
    }

    .mobile-icons {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        flex: 1;
        font-size: 1.4rem;
    }

    #tableDates td.mobile-actions-wrapper::before {
        content: none !important;
    }

    #tableDates .mobile-select input[type="checkbox"] {
        transform: scale(1.6);
    }
}

#checkAll {
    display: none !important;
}

#bulkDeleteButton{
    margin-top: 10px;
}

/* ########################################### */
/* Formatierung der Testfragen im Adminbereich */

/* Abwechselnde Zeilenfarben */
.table-testfragen tr:nth-child(even) {
    background-color: #f8f9fa;
}

.table-testfragen tr:nth-child(odd) {
    background-color: #ffffff;
}

.table-testfragen {
    display: block;
}
.table-testfragen thead {
    display: none; /* Kopfzeile verbergen */
}
.table-testfragen tbody {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Abstand zw. den Cards */
}
.table-testfragen tbody tr {
    display: block;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #f9f9f9;
}
.table-testfragen tbody td {
    display: block;
    padding: 4px 0;
    border: none;
    font-size: 15px;
    box-sizing: border-box;
    position: relative;
}

/* 2) Label vor den Werten einfügen per nth-child */
.table-testfragen tbody td:nth-child(1)::before {
    content: "Nr: ";
    font-weight: bold;
}
.table-testfragen tbody td:nth-child(2)::before {
    content: "Bereich: ";
    font-weight: bold;
}
.table-testfragen tbody td:nth-child(3)::before {
    content: "Emotion: ";
    font-weight: bold;
}
.table-testfragen tbody td:nth-child(4)::before {
    content: "Beschreibung: ";
    font-weight: bold;
}

/* 3) Die letzten drei Zellen in einer Zeile nebeneinander */
.table-testfragen tbody td:nth-child(5),
.table-testfragen tbody td:nth-child(6),
.table-testfragen tbody td:nth-child(7) {
    display: inline-block;
    margin-right: 1.5rem;
}
.table-testfragen tbody td:nth-child(5)::before {
    content: "Typ: ";
    font-weight: bold;
}
.table-testfragen tbody td:nth-child(6)::before {
    content: "Aktiv: ";
    font-weight: bold;
}
.table-testfragen tbody td:nth-child(7)::before {
    content: "Aktiv: ";
    font-weight: bold;
}
/* 1) Bereichsnummer (erste Zelle) komplett verbergen */
.table-testfragen tbody td.cell-bereichsnummer {
    display: none;
}

/* 2) Fragennummer‑Zelle ihr altes data-label ändern */
.table-testfragen tbody td.cell-fragennummer::before {
    content: "Nr: ";
    font-weight: bold;
}


/* 3) Falls du noch die Breite anpassen willst, kannst du hier nachsteuern */
.table-testfragen tbody td.cell-fragennummer {
    display: inline-block;
    margin-right: 1.5rem;
}

.alert-danger {
    background-color: #ffed48; /* Hellgelber Hintergrund */
    color: #000000; /* Schwarze Schrift */
    font-weight: bold; /* Fette Schrift */
    text-align: center; /* Zentrierter Text */
    padding: 15px; /* Innenabstand */
    margin: 10px 0; /* Außenabstand oben/unten */
    border: 1px solid #473b14; /* Gelber Rand */
    border-radius: 4px; /* Abgerundete Ecken */
    width: 100%; /* Volle Breite */
    box-sizing: border-box; /* Damit padding nicht die Breite verändert */
  }

/* ENDE Formatierung der Testfragen im Adminbereich */
/* ################################################ */

/* ################################################ */
/* Modal‑Overlay: unsichtbar, bis JS “display:flex” setzt */
.modal-overlay {
    display: none;           /* versteckt das Overlay initial */
    position: fixed;         /* deckt das ganze Fenster ab */
    inset: 0;                /* top/right/bottom/left = 0 */
    background: rgba(0,0,0,0.6);
    align-items: center;     /* zentriert vertikal */
    justify-content: center; /* zentriert horizontal */
    z-index: 10000;          /* ganz oben */
}

/* Das Innere des Modals */
.modal-content {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 1rem 1rem 0;
    max-width: 90%;
    max-height: 90%;
    min-width: 600px;
    overflow: auto;
    border-radius: 6px;
    position: relative;
}

@media (max-width: 768px) {
    .modal-overlay {
        align-items: flex-start;   /* Modal oben starten */
        overflow-y: auto;          /* Scrollen innerhalb des Overlays erlauben */
        padding-top: 10vh;         /* etwas Abstand zum oberen Rand */
    }

    .modal-content {
        min-width: unset;
        width: 92%;
        max-height: none;          /* erlaubt volle Anzeige auf kleinen Screens */
        margin: 0 auto 10vh;       /* etwas Abstand unten, falls gescrollt wird */
    }
}

.dup-note { 
    margin: .25rem 0 .75rem; 
    font-size: .95rem; 
    opacity: .9; }

@media (max-width: 768px) {
  .modal-content .form-actions { 
    display: flex; 
    gap: .5rem; 
    flex-wrap: wrap; }
  .modal-content .form-actions .btn { 
    flex: 1 1 auto; 
    white-space: nowrap; }
}

/* 2) Sorge dafür, dass das Formular den restlichen Platz einnimmt und scrollbar ist */
#testModalBody form {
    flex: 1;
    overflow-y: auto;
  }

/* Schließ‑Button oben rechts */
.modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}
/* ENDE Modal‑Overlay: */
/* ################################################ */

/* -------------------------------------------------
   AUSKLAPP-BOX: Kopfzeile (Summary)
-------------------------------------------------*/
.test-wrapper summary {
    /* Marker ausblenden */
    list-style: none;
    cursor: pointer;
    
    /* Styling und Flex‑Layout */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
  
    /* volle Breite */
    width: 100%;
    box-sizing: border-box;
  }
  .test-wrapper summary::-webkit-details-marker {
    display: none;
  }

  /* ===== Test‑Button in der Kopf‑Box ===== */
.div-test-wrapper .test-btn {
    display: block;
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    margin: 0 auto 10px;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
  }
  .div-test-wrapper .test-btn:hover {
    background-color: #0056b3;
  }


  
/* Außeres Summary‑Pfeil nur für das direkte Kind von .test-wrapper */
.test-wrapper > summary::after {
    content: '▸';
    font-size: 2.2rem;
    line-height: 1;
  }
  
  .test-wrapper[open] > summary::after {
    content: '▾';
    font-size: 2.2rem;
    line-height: 1;
  }

  .evaluation-section > summary::after {
    content: '▸';
  }
  
  .evaluation-section[open] > summary::after {
    content: '▾';
  }
  
  /* -------------------------------------------------
     BEREICHSLISTE: Verstecken/Einblenden
  -------------------------------------------------*/
  /* Vorher verstecken */
  .test-wrapper .test-evaluation {
    display: none;
  }
  /* Wenn <details open> */
  .test-wrapper[open] .test-evaluation {
    display: block;
  }
  
  /* -------------------------------------------------
     INNERE BEREICHE („evaluation-section“)
  -------------------------------------------------*/
  .evaluation-section summary {
    list-style: none;
    cursor: pointer;
    font-weight: bold;
    padding: 0.5rem;
    background: #f9f9f9;
    border-radius: 4px;
    margin-top: 0.5rem;
  }
  .evaluation-section summary::-webkit-details-marker {
    display: none;
  }
  .evaluation-section summary::after {
    content: '▶';
    float: right;
  }
  .evaluation-section[open] summary::after {
    content: '▼';
  }

  .last-test-date {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.25rem;
  }

  @media (max-width: 600px) {
    .test-wrapper summary.test-summary {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.25rem;
      position: relative;         /* damit das Pseudo-Element absolut positioniert werden kann */
    }
  
    .test-wrapper summary.test-summary::after {
      /* statt float nutzen wir jetzt absolute Positionierung */
      position: absolute;
      top: 0.75rem;               /* an deine Padding‑Werte anpassen */
      right: 1rem;
    }
  }

  /* 1) Punkte aus der Liste entfernen */
.evaluation-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .evaluation-list li {
    border-left: 4px solid #f9f9f9;
    padding-left: 0.75rem;
    margin-bottom: 0.5rem;
  }

/* 3) Dünner Rahmen um den gesamten Auswertungstext */
.evaluation-content {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

/* kleiner unaufdringlicher Info‑Button */
.comment-toggle {
    background: none;
    border: none;
    padding: 0 0.25em;
    font-size: 1.2em;
    line-height: 1;
    cursor: pointer;
  }
  /* Kommentar‑Box */
    .eval-comment {
        display: none;
        margin: 0.5em 0 1em;
        padding: 0.5em;
        background: #f0f8ff;
        border-left: 3px solid #007bff;
        border-radius: 3px;
        font-size: 0.9em;
        color: #333;
    }
        /* sobald hidden weg ist, sichtbar machen */
    .eval-comment:not([hidden]) {
        display: block;
    }
  
  /* -------------------------------------------------
     ABSTAND ZWISCHEN STATUS UND LISTE
  -------------------------------------------------*/
  .test-evaluation {
    margin-top: 0.5rem;
    padding: 0 0.5rem;
  }

  /* ------ Farben ------ */
/* ===== Farben für Evaluation (nur linke Border) ===== */
.eval-border-yellow-light { border-left: 4px solid #f7fa56 !important; }
.eval-border-yellow      { border-left: 4px solid #f1c40f !important; }
.eval-border-orange      { border-left: 4px solid #e67e22 !important; }
.eval-border-red         { border-left: 4px solid #e74c3c !important; }

/* Abstand/Box-Sizing für alle eval‑border Klassen unter .test-wrapper */
.test-wrapper > summary[class*="eval-border-"],
.evaluation-section > summary[class*="eval-border-"],
.test-wrapper .evaluation-list li[class*="eval-border-"] {
  padding-left: 0.75rem;
  box-sizing: border-box;
}

/* ################################################### */
/* START Formular Testfragen */

.bereich-titel-klappbar {
  cursor: pointer;
  font-weight: bold;
  margin-bottom: 5px;
  padding: 5px;
  background-color: #e0e0e0;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.bereich-titel-klappbar:hover {
  background-color: #d0d0d0;
}

.bereich-titel-klappbar.offen {
  background-color: #c0c0c0;
}

.frageblock {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    background: #fafafa;
}
.form-title {
    font-size: 1.8rem;            /* deutlich größer als Standardtext */
    margin-bottom: 1.5rem;        /* Luft unten */
    color: #007bff;               /* gleiche Farbe wie Deine Buttons */
    border-bottom: 3px solid #007bff;
    padding-bottom: 0.3rem;       /* unterhalb des Texts */
    font-weight: 600;
    letter-spacing: 0.5px;
}

.modal-content .form-date {
    text-align: center;
    margin: 0.5rem 0 1rem;
    font-size: 0.9rem;
    color: #555;
  }

.skala {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    color: #666;
    padding: 0 12px;
}
.back-link {
    margin-top: 2rem;
}
.bereich-titel {
    font-size: 1.2rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #eef6ff;          /* sehr hellblauer Hintergrund */
    border-left: 4px solid #007bff;
    border-radius: 4px;
    color: #004085;
    font-weight: 500;
}
.frage-meta {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: #333;
}
.frage-meta strong {
    color: #007bff;
}
.frage-text {
    margin-bottom: 1rem;
    line-height: 1.4;
    color: #444;
}
input[type=range], textarea {
    width: 100%;
}
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: transparent; /* wichtig, damit der Track sichtbar bleibt */
}
/* Track (Schiene) */
input[type=range]::-webkit-slider-runnable-track {
    background-color: #ccc;
    height: 6px;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: #4285f4; /* oder deine Standardfarbe */
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -9px; /* <-- Das hebt ihn etwas an */
}
input[type=range]::-moz-range-thumb {
    background-color: #4285f4;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
}
/* Thumb (Anfasser) bei unbewertetem Wert */
input.range-unbewertet::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: gray !important;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
}
.skala span:first-child {
    margin-left: 10%;
}
/* ► Abstand über dem Kommentar-Feld */
.text-wrapper {
    margin-top: 1rem;
  }
  
  /* ► Label deutlich absetzen */
  .text-wrapper label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #333;
  }
  
  /* ► Schickeres Textarea: volle Breite, Innenabstand, sanfte Rundung */
  .text-wrapper textarea {
    width: 100%;
    min-height: 4rem;           /* bei Bedarf anpassen */
    padding: 0.5rem 0.75rem;     /* Innenabstand */
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fafafa;
    resize: vertical;            /* nur vertikal skalierbar */
    font-family: inherit;        /* Systemschrift übernehmen */
    font-size: 0.95rem;
    line-height: 1.4;
    box-sizing: border-box;      /* padding mit einrechnen */
    transition: border-color 0.2s ease;
  }
  
  /* ► Fokus‑Stil */
  .text-wrapper textarea:focus {
    outline: none;
    border-color: #007bff;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.2);
  }
  
  /* ► Platz für den Placeholder, falls noch leer */
  .text-wrapper textarea::placeholder {
    color: #999;
    font-style: italic;
  }
  
/* sorgen dafür, dass das Formular im Modal nicht über den Viewport hinausgeht */
#testModalBody form {
    max-width: 700px;    /* oder dein Wunschwert */
    margin: 0 auto;      /* zentriert das Formular im Modal */
    box-sizing: border-box;
    /* Entferne overflow:hidden, damit nichts abgeschnitten wird */
  }
  
  /* 2) Buttons nebeneinander, linksbündig */
  .form-actions {
    /* 1) Klebt den Button‑Bar unten im Modal */
    position: sticky;
    bottom: 0;
    background: #fff;            /* passt zum Modal-Hintergrund */
    border-top: 1px solid #ddd;  /* dezente Trennlinie */
    padding: 1rem;               /* etwas Luft um die Buttons */
    z-index: 10;                 /* vor dem scrollbaren Inhalt */
  
    /* 2) Flex‑Layout für die Buttons */
    display: flex;
    justify-content: center; /* linksbündig; für zentriert: center */
    align-items: center;
    gap: 1rem;                   /* Abstand zwischen den Buttons */
  
    /* 3) Wenn Du trotzdem oben noch etwas Abstand willst */
    margin-top: 1rem;            /* optional */
  }
  
  /* 3) Buttons nicht 100% breit, sondern automatisch so groß wie ihr Inhalt */
  .form-actions .btn {
    flex: 0 0 auto;            /* kein Dehnen */
    min-width: 140px;           /* Hörst du für "Test speichern" als Minimum */
    width: auto !important;     /* überschreibt evtl. vorhandenes width:100% */
    text-align: center;
  }

  .disabled-textarea {
    background-color: #f3f3f3;
    color: #999;
    pointer-events: none;
    }

@media (max-width: 768px) {
    .skala {
        padding: 0 10px 0 15px;
    }
}
/* Ende Formular Testfragen */
/* ################################################### */

/* Filter und Paginierung für mobile Ansicht */
.filter-options,
.pagination-container {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

.pagination-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

.pagination-container .pagination {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.filter-options form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.filter-options input,
.filter-options select,
.filter-options button {
    font-size: 14px;
    padding: 8px;
}

/* Tabelle Farbskala */

.Farbskala {
    margin-top: 20px;
    margin-right: 10px;
    width: fit-content;
}

.Farbskala table {
    border-collapse: collapse;
    width: 100%;
    min-width: 250px;
    border-radius: 8px;
    overflow: hidden;    
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.Farbskala th {
    background-color: #007bff;
    color: white;
    padding: 8px;
}

.Farbskala td {
    padding: 8px;
    vertical-align: middle;
    border-bottom: 1px solid #ddd;
}

.color-box {
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #000;
}

/* Optische Anpassung an bestehendes Design */
.table-header {
    text-align: center;
    background-color: #007bff;
    color: white;
    font-weight: bold;
}

.table-header th {
    text-align: center;
}

.Farbskala th:first-child {
    border-right: 1px solid white;
}

.Farbskala th:first-child,
.Farbskala td:first-child {
    width: 70px;
}

@media (max-width: 768px) {
    #infoTableContainer {
        flex-direction: column;
        align-items: center;
    }

    .Farbskala,
    .table-info { 
        width: 100%;
    }

    .Farbskala {
        margin-right: 0;
    }
}

/* --- Farbliche Hinterlegung des Datums --- */
.date-dark-green {
    background-color: #006400; /* Dunkelgrün */
    color: white;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
}

.date-dark-green::before {
    color: white !important;
}

.date-light-green {
    background-color: #90ee90; /* Hellgrün */
    color: black;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
}

.date-yellow {
    background-color: #ffeb3b; /* Gelb */
    color: black;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
}

.date-red {
    background-color: #ff4444; /* Rot */
    color: white;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
}


/* Styling für die Überschrift */
.table-container h2 {
    text-align: center;
    font-size: 26px;
    color: #0056b3;
    margin-bottom: 15px;
    font-weight: bold;
}

/* Styling für die Navigationselemente bei der Termineingabe */

/* Date-Filter: Desktop in einer Zeile, mittig */
.date-filter { margin: 20px 0; }
.date-filter-form {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;   /* horizontal zentriert am PC */
  flex-wrap: nowrap;         /* alles in einer Zeile */
}
.date-filter-form .range {
  display: flex;
  align-items: center;
  gap: 8px;                  /* Label neben Input */
}
.date-filter-form .range label {
  margin: 0;
}
.date-filter-form .btn-row {
  display: flex;
  gap: 10px;                 /* Buttons nebeneinander */
  align-items: center;
  justify-content: center;   /* als Gruppe zentriert */
}

/* Mobil: untereinander, Labels & Inputs zentriert; Buttons nebeneinander zentriert */
@media (max-width: 640px) {
  .date-filter-form {
    flex-direction: column;
    gap: 10px;
    align-items: center;     /* alles zentrieren */
  }
  .date-filter-form .range {
    flex-direction: column;  /* Label über Input */
    align-items: center;
    width: 100%;
    max-width: 320px;        /* angenehme Breite am Handy */
  }
  .date-filter-form input[type="date"] {
    width: 100%;
  }
  .date-filter-form .btn-row {
    justify-content: center; /* Buttons nebeneinander, zentriert */
  }
}

.pagination-container {
    display: flex;
    flex-direction: column; /* Setzt die Navigation über die Filteroptionen */
    align-items: center; /* Zentriert alle Elemente */
    flex-wrap: wrap; /* Ermöglicht Umbruch auf kleineren Bildschirmen */
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
    gap: 15px;
}

.pagination {
    display: flex;
    gap: 12px; /* Abstand zwischen Pfeilen */
    align-items: center;
    justify-content: center;
    width: 100%; /* Sorgt dafür, dass die Pfeile mittig bleiben */
}

.pagination a {
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
    border: 1px solid #007bff;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
}

.pagination a:hover {
    background-color: #007bff;
    color: white;
}

.pagination span {
    font-weight: bold;
    padding: 5px 10px;
}

.filter-options {
    display: flex;
    gap: 2px;
    align-items: center;
    gap: 20px; /* Größerer Abstand zwischen den Elementen */
    flex-wrap: wrap; /* Umbruch auf kleineren Bildschirmen */
}

.filter-options label {
    margin-right: 0px; /* Kein Abstand mehr zwischen Label und Input */
    white-space: nowrap; /* Verhindert Zeilenumbruch */ 
}

/* Suchfeld schmaler machen, damit es sich besser anpasst */
.filter-options input[type="text"] {
    width: 200px;
    max-width: 100%; /* Passt sich flexibel an */
}

.filter-options select,
.filter-options input[type="text"] {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.filter-options button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
}

.filter-options button:hover {
    background-color: #0056b3;
}

/* Responsives Design für kleinere Bildschirme */
@media (max-width: 768px) {
    .pagination-container {
        flex-direction: column; /* Bricht die Elemente auf neue Zeilen um */
        gap: 10px;
        align-items: center;
        text-align: center;
    }

    .pagination {
        justify-content: center; /* Zentriert die Navigation */
    }

    .filter-options {
        flex-direction: column; /* Filteroptionen untereinander anzeigen */
        align-items: center;
    }

    .filter-options input[type="text"] {
        width: 100%; /* Volle Breite auf kleinen Bildschirmen */
        max-width: 300px;
    }
}

#printButton {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
}

#printButton:hover {
    background: #0056b3;
}


/* Styling für das Filterfeld Startseite */
.filter-container {
    text-align: center;
    margin-bottom: 15px;
}

/* Flexbox für Suchfeld + Anzahl */
.filter-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Abstand zwischen Suchfeld & Anzahl */
    background: #f8f9fa;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: fit-content; /* Passt sich automatisch an */
    margin: 0 auto 20px; /* Zentriert den Container */
}

/* Styling für das Suchfeld */
#filterInput {
    width: 80%;
    max-width: 300px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
    transition: 0.3s;
}

/* Fokus-Effekt für das Suchfeld */
#filterInput:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

/* Styling für die Anzahl */
#entryCount {
    font-size: 16px;
    font-weight: bold;
    color: #007bff;
    background: #e9ecef;
    padding: 8px 12px;
    border-radius: 6px;
}

.sort-index-btn {
    width: 61px;
    height: 41px;
    color: white;
    border: 5px solid #e74c3c;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.sort-index-btn.active {
    border: 5px solid #2ecc71;
}

/* Responsive Anpassung für das Filterfeld */
@media (max-width: 768px) {    
    .sort-index-btn {
        width: 93px;
    }
    
    #printButton {
        display: none;
    }

    #filterInput {
        width: 100%;
    }
}

/* Legende Index Farben */
.color-ring {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
}

 select { 
    appearance: none;
    background-size: auto 50%;
    background-image:url(../images/select-arrow.png);
    background-position: right 10px center;
    background-repeat: no-repeat;
    line-height: 20px;
}

select option {
    font-size: 16px;
    line-height: 4; 
}

/* Gilt nur für die Status-Selectbox */
select[name="IDStatus"] {
    margin: 6px 0 6px 8px;   /* oben, rechts, unten, links */
    padding: 4px 6px;        /* Innenabstand (oben/unten, links/rechts) */
    width: 10rem;
    font-size: 1rem;
}

select[name="IDAktion"] {
    padding: 4px 6px;        /* Innenabstand (oben/unten, links/rechts) */
    width: 10rem;
    font-size: 1rem;
}

/* Styling für das neue Beschreibung-Feld */
#beschreibung {
    width: 100%; /* Volle Breite */
    min-height: 40px; /* Standardhöhe */
    max-height: 300px; /* Maximalhöhe */
    resize: vertical; /* Benutzer kann Größe anpassen */
    padding: 8px; /* Angleichung an Input-Felder */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    #beschreibung {
        height: 40px; /* Standardhöhe */
    }
}

/* Fokus-Styling für bessere Sichtbarkeit */
#beschreibung:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    outline: none;
}

input#datum,
input#beschreibung {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;    
}

select#hund,
select#mensch,
select#frmdog,
select#frmpeople {
    width: 100%; 
    min-width: 350px; 
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;   
} 

/* ----- Eingabeformular ----- */

/* Gemeinsame Stile für Formulare */

.edit-container p {
    margin-top: 15px;
}

.edit-container input[type="text"],
.edit-container input[type="date"],
.edit-container textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.edit-container textarea {
    resize: vertical;
    height: 200px;
}

/* Button bei Mensch und Hund Bearbeiten/Löschen */

.button-container {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    margin-bottom: 10px;
}

.edit-btn, .delete-btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.edit-btn {
    background-color: #007bff;
    color: white;
}

.edit-btn:hover {
    background-color: #0056b3;
}

.delete-btn {
    color: white;
    background-color: #f9f9f9;
}

.admin-container .delete-btn:hover {
    background-color: #f9f9f9 !important;
}

.edit-container button[type="submit"],
.edit-container a {
    display: inline-block;
    padding: 10px;
    font-size: 16px;
    text-decoration: none;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.edit-container button[type="submit"]:hover,
.edit-container a:hover {
    background-color: #0056b3;
}

.edit-container button[type="submit"] {
    margin-right: 10px;
}

.edit-container a {
    background-color: #6c757d;
}

.edit-container a:hover {
    background-color: #5a6268;
}

/* Container Aufenthalt */

.aufenthalt-fieldset {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 12px;
    margin: 15px 0;
    background-color: #fafafa;
}

.aufenthalt-fieldset legend {
    font-weight: bold;
    padding: 0 6px;
}

.aufenthalt-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.aufenthalt-field label {
    margin-bottom: 3px;
}

.aufenthalt-block {
    margin: 10px 0;
}

.aufenthalt-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.aufenthalt-field label {
    margin-bottom: 3px;
}

.aufenthalt-field input,
.aufenthalt-field select {
    padding: 4px 6px;
}

/* 🔹 Gesamter Bereich (Tabelle + Button) */
.aufenthalt-wrapper {
    position: relative;
    border: 2px solid #007bff;
    border-radius: 8px;
    padding: 20px 12px 18px;   /* oben etwas mehr Platz, damit Legende nicht verdeckt wird */
    margin-top: 25px;
    margin-bottom: 20px;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: visible;         /* 🔥 wichtig: erlaubt, dass die Legende übersteht */
    min-inline-size: 0;
}

/* 🔹 Safari/Edge-Fix */
.aufenthalt-wrapper {
    min-inline-size: 0;
}

/* 🔹 Überschrift (legend) */
.aufenthalt-wrapper legend {
    position: absolute;
    top: -12px;
    left: 20px;
    background: #fff;
    padding: 0 8px;
    font-weight: 600;
    color: #007bff;
    font-size: 1.05em;
    white-space: nowrap;
    z-index: 100; 
}

/* 🔹 Tabelle sauber im Wrapper platzieren */
.aufenthalt-wrapper table {
    width: calc(100% - 4px);      /* exakte Anpassung innerhalb des Rahmens */
    border-collapse: collapse;
    margin: 0 auto;               /* zentriert, wenn kleiner als Wrapper */
    table-layout: fixed;          /* verhindert Überdehnung bei langen Texten */
}

/* 🔹 Spalten gleichmäßig aufteilen */
.aufenthalt-wrapper th,
.aufenthalt-wrapper td {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 🔹 Button nur so breit wie Text */
.aufenthalt-buttons {
    text-align: center;
    margin-top: 12px;
}

.aufenthalt-buttons button {
    background: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-weight: 600;
    cursor: pointer;
    width: auto;                /* nur so breit wie Text */
}

.aufenthalt-buttons button:hover {
    background: #0069d9;
}

input[type="date"] {
    max-width: 160px;   /* oder was bei dir passt */
    width: 100%;        /* passt sich Container an */
    box-sizing: border-box;
}

.aufenthalt-tabelle {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 0.9em;
}

.aufenthalt-tabelle thead {
    background-color: #007bff;   /* gleiche Header-Farbe wie andere Tabellen */
    color: white;
    text-align: center;
}

.aufenthalt-tabelle th,
.aufenthalt-tabelle td {
    border: 1px solid #ccc;
    padding: 6px 8px;
    vertical-align: top;
}

.aufenthalt-tabelle th:first-child,
.aufenthalt-tabelle td:first-child {
    width: 95px;   /* Datum: schmal */
}

/* 🔹 Kein Zeilenumbruch in Datum und Aktion */
.aufenthalt-tabelle td:first-child,     /* Datum */
.aufenthalt-tabelle td:nth-child(2) {   /* Aktion */
    white-space: nowrap;                /* Kein Umbruch im Wort */
    word-break: keep-all;               /* Keine Trennung mitten im Wort */
}

/* Zebra-Streifen */
.aufenthalt-tabelle tbody tr:nth-child(odd) {
    background-color: #ffffff;
}
.aufenthalt-tabelle tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

.aufenthalt-tabelle tbody tr:hover {
    background-color: #f1f1f1;  /* Hover-Effekt */
    cursor: pointer;
}

#btn-update, #btn-delete {
    display: none;
}

/* 🔹 Bemerkung in der Tabelle kürzen im Hochformat */
@media (max-width: 600px) {
    .aufenthalt-tabelle td:nth-child(3) {
        max-width: 25ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: help; /* zeigt an, dass ein Tooltip verfügbar ist */
    }
}

/* 🔹 Im Querformat (größerer Bildschirm) wieder vollständig zeigen */
@media (min-width: 601px) {
    .aufenthalt-tabelle td:nth-child(3) {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        cursor: default;
    }
}

/* Gemeinsames Styling für Detailansichten und Formulare */
.detail-container, 
.dropdown-container,
.edit-container,
.terminuebersicht-container,
.dog-people-summary,
.div-test-wrapper {
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .detail-container, 
    .dropdown-container,
    .edit-container,
    .terminuebersicht-container,
    .dog-people-summary,
    .div-test-wrapper {
        width: 95%;
    }    
}

.dropdown-container h2 {
    font-size: 24px;
    margin-bottom: 0;
}

.detail-container h2,
.edit-container h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.detail-container p {
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 1.5;
}

.detail-container p strong {
    color: #333;
}

.detail-container .status {
    font-weight: bold;
    color: #28a745;
}

.detail-container .status.inactive {
    color: #dc3545;
}

/* Styling für den Bearbeiten-Button */
.detail-container form button,
form button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    text-decoration: none;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.detail-container form button:hover,
form button:hover {
    background-color: #0056b3;
}

/* Footer-Stil */
/* Fixierter Footer am unteren Rand */
footer {
    background: linear-gradient(135deg, #0056b3, #003f80);
    color: white;
    text-align: center;
    padding: 15px 0;
    font-size: 16px;
    font-weight: bold;
    bottom: 0;
    width: 100%;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2);
    height: 60px; /* Höhe des Footers */
}

/* Falls der Footer immer unten bleiben soll */
.footer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
}

/* Link-Stil im Footer */
footer a {
    color: #ffcc00;
    text-decoration: none;
    font-weight: bold;
}

footer a:hover {
    text-decoration: underline;
}

/* Damit kein Inhalt überlappt */
body::after {
    content: "";
    display: block;
    height: 60px; /* Gleiche Höhe wie der Footer */
}

/* Dropdown-Filter (filtered_dropdown.php) */
.dropdown-filter {
    position: relative;
    width: 100%;
}

.dropdown-filter input {
    padding: 8px;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 999;
    display: none;
    padding: 0;
    margin: 0;
    list-style: none;
}

.dropdown-list li {
    padding: 8px;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;       /* verhindert zusätzlich Kontextmenü auf Mobilgeräten */
    -webkit-user-select: none;         /* Safari */
    -moz-user-select: none;            /* Firefox */
    -ms-user-select: none;             /* IE10+/Edge */
    user-select: none;                 /* Standard */
    text-decoration: none !important;  /* erzwingt Entfernung der Unterstreichung */
    outline: none !important;          /* verhindert Fokushervorhebung */
}

.dropdown-list li:hover {
    background-color: #f0f0f0;
}

.dropdown-list.active {
    display: block;
}

.dropdown-list li.highlight {
    background-color: #e0e0e0;
}

.checkbox-container {
    max-width: 50px;
    display: flex;
    align-items: center;
    gap: 10px; /* Abstand zwischen Text und Checkbox */
    margin-bottom: 15px;
}

.checkbox-container strong {
    min-width: 60px; /* Oder eine passende Breite */
    text-align: left;
}

.container-button{
    margin-top: 50px;
}

.qr-btn {
    background-color: #008CBA;
    color: white;
    border: none;
    padding: 10px 15px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s;
}

.qr-btn:hover {
    background-color: #005f75;
}

@media (max-width: 768px) {
    .qr-btn {
        display: none;
    }
}

/* Profilbild formatieren */
.dog-profile {
    display: flex;
    align-items: center;
    gap: 20px;
}

.dog-image {
    width: 150px;  /* oder eine andere passende Größe */
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    margin-bottom: 10px;
}

.dog-image.large {
    transform: scale(2);
}

.dog-info {
    flex-grow: 1;
}

/* Lightbox Hintergrund */
/* Lightbox Hintergrund mit sanfter Einblendung */
/* Lightbox Hintergrund mit sanfter Einblendung */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Wenn Lightbox sichtbar wird */
.lightbox.show {
    opacity: 1;
    visibility: visible;
}


/* Lightbox-Bild */
.lightbox-img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transform: scale(0.8);
    transition: transform 0.3s ease-in-out;
}

/* Wenn die Lightbox aktiv ist, das Bild vergrößern */
.lightbox.show .lightbox-img {
    transform: scale(1);
}

/* Standard-Layout (Desktop) */
.dog-name-cell {
    display: flex;
    align-items: center;
}

/* Wrapper für Name & Profilbild */
.dog-name-wrapper {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between; /* Name links, Bild rechts */
    width: 100%;
}

/* Name & Rasse zusammenhalten */
.dog-info {
    display: flex;
    flex-direction: column;
}

/* Name */
.dog-name-text {
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
    color: #007bff;
}

/* Rasse */
.dog-race-text {
    display: none;
}

.status-stay-line {
    display: table-cell;
    font-size: 0.8em;
    color: #353535;
    margin: 5px 0 6px 0;
}

/* Profilbild */
.dog-profile-img {
    width: 60px;  /* Profilbild größer machen */
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px; /* Abstand zwischen Name & Bild */
    transition: transform 0.2s ease-in-out;
}

/* Rahmenfarbe je nach Index */
.border-red {
    border: 5px solid #e74c3c;
}
.border-orange {
    border: 5px solid #e67e22;
}
.border-yellow {
    border: 5px solid #f1c40f;
}
.border-green {
    border: 5px solid #2ecc71;
}

/* Hover-Effekt für das Bild */
.dog-profile-img:hover {
    transform: scale(1.1);
}

/* Standard-Layout (Desktop) - Rasse bleibt sichtbar */
@media (min-width: 769px) {
    .dog-race-column {
        display: table-cell; /* Spalte bleibt sichtbar */
    }

    .dog-label {
        display: none; /* Labels verschwinden in der mobilen Ansicht */
    }

    .status-stay-line-mobil {
        display: none;
    }
}

/* Mobile Ansicht */
@media (max-width: 768px) {
    .dog-race-text {
        display: block; /* In der mobilen Ansicht bleibt die Rasse sichtbar */
    }

    .dog-name-wrapper {
        flex-direction: row-reverse; /* Profilbild wirklich nach rechts */
    }

    td[data-label="Hundename"]::before {
        display: none !important; /* Versteckt das generierte "Hundename:" */
    }

    td[data-label="Datum"] {
        margin-bottom: 8px; /* Versteckt das generierte "Hundename:" */
    }

    .dog-label {
        display: none; /* Labels verschwinden in der mobilen Ansicht */
    }

    .dog-race-column {
        display: none !important; /* Spalte Rasse komplett ausblenden */
    }

    .status-stay-line-mobil {
        display: table-cell;
        font-size: 0.8em;
        color: #353535;
        margin: 5px 0 6px 0;
    }
}