body {
    background-color: #0e0e0e;
    color: #e0e0e0;
    font-family: 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* Sticky-Footer-Layout: .site-wrap (Wrapper aus header.php, umschliesst
   alles zwischen Header und Footer) ist eine Flex-Spalte über die volle
   Fensterhöhe. Der Footer bekommt weiter unten margin-top:auto statt der
   früheren position:absolute-Krücke - dadurch klebt er immer am unteren
   Fensterrand, AUCH bei sehr kurzem Seiteninhalt (z.B. eine leere Tabelle),
   ohne dass jede einzelne Seite ein manuelles padding-bottom braucht, um
   ihn nicht zu überlappen (genau das ist vorher schon einmal passiert). */
.site-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: #5cc9ff; text-decoration: none; }
a:hover { color: #82dfff; }

header {
    background: #1a1a1a;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #222;
    position: static;
    top: 0;
    z-index: 1;
}
header h1 { color: #fff; margin: 0; font-size: 20px; }
nav a { margin: 0 10px; color: #ccc; font-weight: 500; }
nav a:hover { color: #fff; }

.container {
    max-width: 1585px;
    /* margin-right stand vorher auf "unset" (=0) statt "auto" - auf sehr
       breiten Bildschirmen (>1585px) klebte der Container dadurch rechts an
       statt zentriert zu sein, während links der ganze Leerraum landete. */
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    /* Füllt die Höhe zwischen Header und Footer (siehe .site-wrap oben) -
       schiebt den Footer damit auf jeder Seite ans untere Fensterende,
       unabhängig von der Inhaltsmenge. padding-bottom ist jetzt rein
       optischer Abstand vor dem Footer, keine strukturelle Notwendigkeit
       mehr (vorher musste er exakt die Footer-Höhe abdecken). */
    flex: 1 0 auto;
    padding-bottom: 40px;
    width: 100%;
    box-sizing: border-box;
}

/* Titelzeile (Rentals/Tickets/Helpdesk/Late Night Checkin: Icon+H1 + ggf.
   ein "Neu"-Button). Bisher ganz ohne eigene Regel - H1 und Button standen
   dadurch als normale Blockelemente UNTEREINANDER bzw. der Button hing am
   Text-Baseline des H1 und wirkte "zu tief". Jetzt echte, vertikal
   zentrierte Flex-Zeile für alle Seiten, die diese Klasse nutzen. */
.rental_title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}
.rental_title h1 {
    margin: 0;
}

/* Die geteilte .btn/.button-Basisregel weiter unten bringt margin-top:10px
   mit (für Buttons UNTER einem Formularfeld gedacht). Das verschiebt jeden
   .btn sichtbar nach unten, sobald er stattdessen in einer Tabellenzelle
   (vertical-align:middle) sitzt. */
table td .btn,
table td .button {
    margin-top: 0;
}

/* Eigene, komplett EIGENSTÄNDIGE Klasse für Buttons in der Titelzeile
   (.rental_title bei Rentals/Tickets/Helpdesk/Late Night Checkin) - bewusst
   OHNE jede Abhängigkeit von .btn/.button/.add-new-rental/.button-primary.
   Vorher lagen hier mehrere übereinandergestapelte Kompensations-Regeln auf
   derselben geteilten .btn/.button-Basis (margin-top:10px -> .rental_title
   .btn{margin-top:0} -> zusätzlich .add-new-rental{margin-top:-12px
   !important}), die sich gegenseitig überschrieben - jede Anpassung AN
   EINER Stelle liess Buttons AN EINER ANDEREN Stelle wieder verrutschen.
   Diese Klasse hat keinerlei Berührungspunkt mehr mit .btn/.button: Änderungen
   hier können nirgendwo sonst mehr etwas verschieben, und umgekehrt. */
.title-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--lan-primary, #af151a);
    border: none;
    color: var(--lan-primary-text, #fff);
    padding: 10px 20px;
    margin: 0;
    cursor: pointer;
    line-height: 1em;
    font-size: 16px;
    border-radius: 0px;
    font-family: "Segoe UI", Roboto, sans-serif;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease-in-out;
}
.title-action-btn:hover {
    background-color: var(--lan-primary-hover, #912226);
    color: var(--lan-primary-text, #fff);
}

@media (max-width: 600px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}


h1, h2, h3, h4 {
    color: #fff;
    font-weight: 600;
}

::selection {
    background: var(--lan-primary, #af151a);
    color: var(--lan-primary-text, #fff);
}

.button, .slr-return, .dataTables_wrapper div.dt-buttons > .dt-button, .btn, #lsf-reset-filters, #slt-reset-filters {
    background-color: var(--lan-primary, #af151a);
    border: none;
    color: var(--lan-primary-text, #fff);
    padding: 10px 20px;
    margin-top: 10px;
    cursor: pointer;
    line-height: 1em;
    font-size: 16px;
    border-radius: 0px;
    transition: background 0.2s ease-in-out;
    font-family: "Segoe UI", Roboto, sans-serif;
}
.button:hover, .dataTables_wrapper div.dt-buttons > .dt-button:hover, .btn:hover, #lsf-reset-filters:hover, #slt-reset-filters:hover {
    background-color: var(--lan-primary-hover, #912226);
    color: var(--lan-primary-text, #fff);
}

.small-btn {
    padding: 5px 10px;
    font-size: 14px;
}

.slr-return {
    margin-top: 0px;
    float: right;
}

#lsf-reset-filters, #slt-reset-filters {
    background-color: var(--lan-primary, #af151a);
    border: none;
    color: var(--lan-primary-text, #fff);
    padding: 10px 20px;
    margin-top: 0;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}

.dataTables_wrapper div.dt-buttons > .dt-button:hover:not(.disabled) {
    border: 0;
    background-color: var(--lan-primary-hover, #912226);
}

.lsf-filter-reset {
    margin-left: auto;
}

/* War vorher auf #lsf-rentals-table_filter/#slt-tickets-table_filter
   beschränkt (nur diese zwei Tabellen-IDs) - jede neue DataTable auf einer
   weiteren Seite (z.B. Late Night Checkin) hatte dadurch KEIN
   margin-bottom unter dem Suchfeld. Generische DataTables-eigene Klasse
   statt Tabellen-ID-Liste, gilt automatisch für jede DataTable im Portal. */
.dataTables_filter {
    margin-bottom: 20px;
}

/* Filterleiste (Rentals/Tickets: Gegenstand/Annahme/Abgabe/... + "Filter
   zurücksetzen"). Basiswerte waren bisher inline im PHP-Markup, jetzt hier
   zentral, damit die Mobile-Regel unten sie ohne !important überschreiben
   kann (ein style-Attribut hätte sonst immer Vorrang vor externem CSS). */
.lsf-rental-filters {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #1a1a1a;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

@media (max-width: 600px) {
    /* Auf Mobile bricht die Leiste sonst in mehrere Zeilen um (4 Filter +
       Reset-Button je zur Hälfte nebeneinander) und wird dadurch sehr hoch.
       Stattdessen: eine einzige Zeile, die als Ganzes horizontal scrollt -
       "ein Filterbalken bleibt ein Filterbalken". */
    .lsf-rental-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .lsf-rental-filters > div {
        flex: 0 0 auto;
    }

    /* Der auto-margin würde in der scrollenden Zeile eine riesige Lücke vor
       dem Button aufreissen (er zieht dann auf die volle Inhaltsbreite statt
       nur auf die Viewport-Breite) - in der Zeile soll er einfach direkt auf
       den letzten Filter folgen. */
    .lsf-rental-filters .lsf-filter-reset {
        margin-left: 0;
    }
}

.dataTables_wrapper div.dt-buttons > .dt-button {
    margin-bottom: 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #1a1a1a;
    color: #eee;
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
}
table th, table td {
    padding: 10px;
    border-bottom: 1px solid #333;
}
table th {
    background: #222;
    color: #fff;
}
table tr:hover {
    background: #2a2a2a;
}

.card {
    /*background: #1a1a1a;*/
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    /*box-shadow: 0 2px 6px rgba(0,0,0,0.6);*/
}

.card h1 {
    margin-top: 0;
}

footer {
    background: #1a1a1a;
    /* Eine Zeile: Copyright links, rechtliche Links rechts (umbrechend auf
       schmalen Bildschirmen). Horizontal 20px wie .site-header/.container. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 20px;
    padding: 14px 20px;
    font-size: 13px;
    color: #777;
    /* margin-top:auto statt der früheren position:absolute+bottom:0 -
       schiebt den Footer innerhalb der Flex-Spalte .site-wrap an den
       unteren Rand, statt sich über kurzen Seiteninhalt zu legen (siehe
       .site-wrap/.container oben). flex-shrink:0 verhindert, dass der
       Footer selbst gestaucht wird, falls .container mal mehr als die
       volle Höhe braucht. */
    margin-top: auto;
    flex-shrink: 0;
}
footer p {
    margin: 0;
}
footer .footer-copyright,
footer .footer-copyright a {
    color: #999;
    text-decoration: none;
}
footer .footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
footer .footer-legal-links a {
    color: #999;
    text-decoration: none;
}
footer .footer-copyright a:hover,
footer .footer-legal-links a:hover {
    color: #fff;
    text-decoration: underline;
}
@media (max-width: 480px) {
    footer { justify-content: center; text-align: center; }
}

.site-header {
    background: #1a1a1a;
    padding: 10px 20px; /* horizontal exakt wie .container (20px), damit Logo und Seiteninhalt fluchten */
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #2a2a2a;
    position: sticky;
    top: 0;
    z-index: 5;
    /* Keine feste height mehr: Logo-Schrift (22px, ~35px Zeilenhöhe) + 15px
       Padding oben+unten brauchen zusammen ~65px - bei fix 45px lief das
       Logo unten sichtbar über den Header-Rand hinaus (oben 15px Abstand,
       unten sogar -5px, also Überlauf). Ohne feste Höhe berechnet sich die
       Boxgröße korrekt aus Padding + Inhalt, oben/unten symmetrisch. */
}

@media (max-width: 600px) {
    /* .site-header hatte fix 30px links/rechts (fuer Desktop gedacht),
       waehrend .container auf Mobile nur noch 14px hat - dadurch standen
       Logo/Burger-Menü sichtbar weiter eingerückt als der Seiteninhalt
       darunter (z.B. der "Rentals"-Titel). Jetzt beide gleich. Muss NACH
       der Regel oben stehen: bei gleicher Spezifität gewinnt im CSS die
       spätere Quelltext-Position, unabhängig von der Media Query. */
    .site-header {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Logo Placeholder Styling */
.logo a {
    color: #ffffff;
    text-decoration: none;
    font-size: 22px;
    font-weight: 700;
    transition: color 0.3s ease;
}

.logo a:hover {
    color: #cccccc;
}

.main-menu ul {
    display: flex;
    gap: 15px; /* Abstand zwischen den Menüpunkten */
    list-style-type: none;
}

/* Main Navigation Styling */
.main-navigation .main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px; /* Abstand zwischen den Menüpunkten */
}

.main-navigation a {
    display: block;
    color: #e0e0e0;
    padding: 6px 10px; /* Abgerundete Ecken */
    font-weight: 500;
    text-decoration: none;
    position: relative;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease, color 0.3s ease;
}

/* Hover-Effekt für Menüpunkte */
.main-navigation a:hover {
    border-bottom: 3px solid var(--lan-primary, #af151a);
    color: #fff;
}

/* Styling für den aktiven Menüpunkt */
.main-navigation .current-menu-item > a {
    border-bottom: 3px solid var(--lan-primary, #af151a);
    color: #fff;
}

/* Entfernt die alten, einfachen Header-Stile, um Konflikte zu vermeiden */
header h1, nav a {
    /* Diese alten Regeln werden durch die neuen, spezifischeren oben ersetzt. */
    /* Du kannst sie auskommentieren oder löschen, wenn du magst. */
    margin: 0;
}

input, textarea, select {
    font-size: 14px;

}

.lsf-textarea {
    background-color: #171d24;
    border: 1px solid rgba(0, 115, 170, 0.35);
    border-radius: 8px;
    padding: 10px 15px;
    color: white;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lsf-input {
    background-color: #171d24;
    border: 1px solid rgba(0, 115, 170, 0.35);
    border-radius: 8px;
    padding: 10px 15px;
    color: white;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lsf-textarea:focus,
.lsf-input:focus {
    outline: none;
    border-color: #0073aa;
    background-color: #1c232c;
}

.user-form-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
    margin-bottom: 18px;
}

.user-form-group > div {
    flex: 1 1 200px;
}

.user-form-group .lsf-input,
.user-form-group select.lsf-input {
    width: 100%;
    box-sizing: border-box;
}

/* Erstellungsformulare (Rentals/Tickets): Ohne eigene max-width zog sich
   .user-form-group (flex, je Kind mind. 200px + wachsend) auf breiten
   Bildschirmen über die volle Seitenbreite - Platznummer landete dadurch
   links, Benutzername weit entfernt rechts mit riesiger Lücke dazwischen
   statt als zusammengehöriges Feldpaar zu wirken. Eine feste Formularbreite
   behebt das für alle Felder auf einmal. */
.lsf-rental-form,
.slt-ticket-form {
    max-width: 640px;
}

.lsf-field {
    margin-bottom: 18px;
}

.lsf-field-hint {
    font-weight: 400;
    color: #9aa4ad;
    font-size: 13px;
}

.slt-ticket-form input[type="text"],
.slt-ticket-form select.lsf-input,
#slr-rental-create input[type="text"],
#slr-rental-create select.lsf-input {
    width: 100%;
    box-sizing: border-box;
}

.slt-ticket-form textarea.lsf-textarea,
#slr-rental-create textarea.lsf-textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.slt-ticket-form label,
#slr-rental-create label {
    display: block;
    margin-bottom: 6px;
}

textarea {
    height: 120px;
}

.dataTables_wrapper div.dt-buttons > .dt-button {
    background: var(--lan-primary, #af151a);
}

.title-icon {
    margin-right: 7px;
    top: 1px;
    position: relative;
}

.back-link {
    color: white;
}
/* Header-/Footer-Hintergrund über die volle Fensterbreite: .site-wrap ist in
   header.php auf max-width 1920px begrenzt (Inhalt bleibt so), nur die
   Hintergründe reichen per Pseudo-Element bis an beide Fensterränder.
   calc(50% - 50vw) = Abstand vom Wrapper-Rand zum Fensterrand; der
   Überstand um die Scrollbar-Breite wird von html { overflow-x: hidden }
   (style.css) abgeschnitten, es entsteht kein horizontales Scrollen.
   Die Farbe liegt komplett im Pseudo-Element (statt auf dem Element
   selbst), damit Mitte und Seiten exakt gleich aussehen. */
.site-header {
    background: transparent;
}
.site-header::before {
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    bottom: -1px;
    background: linear-gradient(var(--lan-header, transparent), var(--lan-header, transparent)), #1a1a1a;
    border-bottom: 1px solid #2a2a2a;
}
footer {
    position: relative;
    isolation: isolate;
    background: transparent;
}
footer::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    z-index: -1;
    background: #1a1a1a;
}