/* ==========================================================================
   GLOBALER FIX FÜR MOBILE TABELLEN & BILDER IN ALLEN ARTIKELN
   ========================================================================== */

/* Zwingt alle Tabellen in Beiträgen, maximal so breit wie der Bildschirm zu sein */
.com-content-article table,
.item-page table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    word-break: break-word !important;
}

/* Verhindert, dass Bilder oder Boxen den Bildschirm nach rechts wegdrücken */
.com-content-article img,
.com-content-article div,
.com-content-article p {
    max-width: 100% !important;
    height: auto !important;
}

/* Macht Tabellen auf Smartphones scrollbar, falls sie sehr viele Spalten haben */
.com-content-article, .item-page {
    overflow-x: auto !important;
}

/* ==========================================================================
   FINALER COMPACT-FIX FÜR DEN FOOTER (LINKS IN EINER REIHE)
   ========================================================================== */

/* 1. Zwingt das Menü (Impressum, Links, Kontakt), sich horizontal aufzureihen */
footer .mod-menu ul.nav,
footer ul.menu,
footer .navbar-nav,
footer ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 25px !important;                 /* Abstand zwischen Impressum, Links, Kontakt */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* 2. Entfernt vertikale Block-Eigenschaften der Listenpunkte */
footer .mod-menu li,
footer ul li,
footer .nav-item {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Verhindert, dass einzelne Wörter innerhalb eines Links umbrechen */
footer .mod-menu a,
footer ul li a {
    white-space: nowrap !important;
    display: inline-block !important;
}

/* 4. Sorgt dafür, dass Menü und Copyright sauber nebeneinander aufgeteilt werden */
footer .container-inner,
footer .footer-content {
    display: flex !important;
    justify-content: space-between !important; /* Drückt ein Element nach links, das andere nach rechts */
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

/* ==========================================================================
   MODERNES & RESPONSIVES HEADER-LAYOUT (OHNE TABELLEN)
   ========================================================================== */

/* Richtet Logo und Text elegant in einer Reihe aus */
.fw-header-box {
    display: flex !important;
    align-items: center !important;   /* Zentriert Logo und Text vertikal zueinander */
    gap: 25px !important;             /* Abstand zwischen dem Logo und dem Text */
    flex-wrap: wrap !important;       /* Bricht auf Smartphones automatisch sauber um */
    padding: 10px 0;
}

/* Stil für den großen Text */
.fw-header-title {
    font-size: 2rem !important;       /* Entspricht den 24pt aus Ihrem alten Editor */
    font-weight: 700 !important;      /* Schrifttyp: Fett */
    color: #ffffff !important;         /* Textfarbe: Weiß */
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Schutz für das Logo auf kleinen Displays */
.fw-header-logo {
    max-width: 150px !important;
    height: auto !important;          /* Verhindert Verzerrungen des Logos */
    display: block !important;
}

/* Spezielle Optimierung für Smartphones (Bildschirme kleiner als 768 Pixel) */
@media (max-width: 767.98px) {
    .fw-header-box {
        justify-content: center !important; /* Zentriert Logo und Text auf dem Handy */
        text-align: center !important;
    }
    .fw-header-title {
        font-size: 1.5rem !important; /* Macht den Text auf Handys für bessere Lesbarkeit etwas kleiner */
    }
}

/* Verhindert unschöne Link-Formatierungen im Kopfbereich */
.fw-header-link {
    display: flex !important;
    align-items: center !important;
    gap: 25px !important;
    text-decoration: none !important; /* Entfernt die Unterstreichung */
    color: inherit !important;         /* Behält das saubere Weiß des Textes */
}

.fw-header-link:hover {
    text-decoration: none !important;
    opacity: 0.9;                     /* Lässt den Header beim Drüberfahren ganz dezent elegant aufhellen */
}

/* ==========================================================================
   EINSATZDATENBANK - FIX FÜR ÜBERLAPPENDE SPALTEN
   ========================================================================== */

/* 1. Das Tabellen-Layout flexibel machen und Ineinanderquetschen verbieten */
main table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important; /* Wichtig: Verhindert starre, feste Spaltenvorgaben */
    border-collapse: collapse !important;
}

/* 2. Jeder Spaltenüberschrift ihren festen Platz zuweisen */
main table th {
    display: table-cell !important;
    padding: 12px 20px !important;  /* Mehr seitlicher Abstand zwischen den Spalten */
    text-align: left !important;
    font-weight: 700 !important;
    white-space: nowrap !important; /* Verbietet Wörtern, sich zu überlappen oder umzubrechen */
    vertical-align: bottom !important;
}

/* 3. Die Daten-Zellen darunter exakt anpassen */
main table td {
    display: table-cell !important;
    padding: 15px 20px !important;  /* Einheitlicher Abstand für die Berichte */
    vertical-align: middle !important;
}

/* 4. Fix für die farbigen Balken am linken Rand */
/* Erzeugt einen spürbaren Sicherheitsabstand, damit die Nummern (Nr. 91) nicht an der Linie kleben */
main table tr td:first-child,
main table tr th:first-child {
    padding-left: 30px !important; 
}

/* ==========================================================================
   OPTIMIERUNG DER FAHRZEUGLISTE IN DER DETAILSANSICHT
   ========================================================================== */

/* 1. Die Fahrzeugliste nebeneinander anordnen (wie im alten System) */
.eb-details-vehicles ul,
[class*="einsatz"] .vehicles ul,
main .einsatz-details ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 15px !important;            /* Abstand zwischen den Fahrzeugen */
    padding-left: 15px !important;    /* Leicht eingerückt unter der Überschrift */
    list-style-type: disc !important; /* Klassischer Aufzählungspunkt */
    margin-top: 5px !important;
    margin-bottom: 15px !important;
}

/* 2. Styling für die einzelnen Fahrzeuge */
.eb-details-vehicles li,
[class*="einsatz"] .vehicles li {
    display: list-item !important;    /* Stellt sicher, dass es ein Aufzählungspunkt bleibt */
    white-space: nowrap !important;   /* Verhindert Zeilenumbrüche innerhalb des Fahrzeugnamens */
    font-weight: 500 !important;
}

/* 3. Falls die Fahrzeuge als Links ausgegeben werden (wie im alten Screenshot) */
.eb-details-vehicles a,
[class*="einsatz"] .vehicles a {
    color: #0d6efd !important;        /* Das typische, schicke Link-Blau */
    text-decoration: none !important;
}

.eb-details-vehicles a:hover,
[class*="einsatz"] .vehicles a:hover {
    text-decoration: underline !important;
}

/* Blaulicht-Komponente: Miniaturbild in der Einsatzübersicht wieder anzeigen */
.eb_uebersicht_img,
.eb-overview-image,
td.kurzbericht img,
.eb_liste_mini_img {
    display: inline-block !important;
    visibility: visible !important;
    max-width: 80px !important; /* Optimierte Breite für die Tabellenspalte */
    height: auto !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
    float: left !important;
}

/* Verhindert, dass der Kurzbericht-Text das Bild unschön überlappt */
.eb_uebersicht_text,
td.kurzbericht {
    overflow: hidden !important;
}