/* =========================================================
   JOINT OPERATION COMMAND
   GEMEINSAMES WEBSITE-DESIGN
========================================================= */


/* =========================================================
   FARBEN UND GRUNDEINSTELLUNGEN
========================================================= */

:root {
    --background-body: #071017;
    --background-header: #0b151d;
    --background-navigation: #0d1922;
    --background-intro: #09141b;
    --background-footer: #0d1821;

    --blue-dark: #263f50;
    --blue-main: #315f7a;
    --blue-hover: #3c718f;
    --blue-light: #5fa8d3;

    --border-dark: #263640;
    --border-light: #344752;

    --text-main: #f2f5f7;
    --text-navigation: #e2e9ed;
    --text-muted: #b7c3ca;
    --text-footer: #91a5b1;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

html {
    background-color: var(--background-body);
}

body {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    font-family: Arial, Helvetica, sans-serif;

    color: var(--text-main);
    background-color: var(--background-body);
}


/* =========================================================
   GEMEINSAMER KOPFBEREICH
========================================================= */

.site-header {
    min-height: 102px;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 20px 30px;

    text-align: center;

    background-color: var(--background-header);

    border-bottom: 3px solid var(--blue-main);
}

.site-header h1 {
    margin: 0;

    color: var(--text-main);

    font-size: clamp(25px, 2.2vw, 34px);
    font-weight: 700;

    line-height: 1.2;

    text-transform: uppercase;
    letter-spacing: 3px;
}


/* =========================================================
   GEMEINSAME NAVIGATION
========================================================= */

.main-navigation {
    min-height: 62px;

    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;

    padding: 0 20px;

    background-color: var(--background-navigation);

    border-bottom: 1px solid var(--border-light);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.main-navigation a {
    min-width: 112px;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 17px 22px;

    color: var(--text-navigation);

    font-size: 14px;
    font-weight: 700;

    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    letter-spacing: 0.6px;

    border-left: 1px solid var(--border-dark);

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}
.main-navigation .navigation-user {
    min-width: 112px;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 17px 22px;

    color: var(--blue-light);

    font-size: 13px;
    font-weight: 700;

    text-align: center;
    text-transform: uppercase;

    letter-spacing: 0.6px;

    border-left: 1px solid var(--border-dark);
}

.main-navigation a:last-child {
    border-right: 1px solid var(--border-dark);
}

.main-navigation a:hover {
    color: #ffffff;
    background-color: var(--blue-hover);
}

.main-navigation a.active {
    color: #ffffff;
    background-color: var(--blue-main);
}


/* =========================================================
   STARTSEITE – HAUPTBEREICH
========================================================= */

.home-main {
    flex: 1;

    min-height: 0;

    display: flex;
    flex-direction: column;

    background-color: var(--background-body);
}


/* =========================================================
   STARTSEITE – WILLKOMMEN
========================================================= */

.intro {
    flex: 0 0 auto;

    padding: 23px 30px 24px;

    text-align: center;

    background-color: var(--background-intro);

    border-bottom: 1px solid var(--border-light);
}

.intro h2 {
    margin: 0;

    color: var(--text-main);

    font-size: clamp(24px, 2vw, 29px);
    font-weight: 700;

    line-height: 1.2;

    text-transform: uppercase;
    letter-spacing: 1.8px;
}

.intro h2::after {
    content: "";

    display: block;

    width: 430px;
    height: 3px;

    margin: 12px auto 9px;

    background-color: var(--blue-light);
}

.intro p {
    max-width: 1050px;

    margin: 0 auto;

    color: var(--text-muted);

    font-size: 16px;
    line-height: 1.55;
}


/* =========================================================
   STARTSEITE – KAMPAGNENBILD
========================================================= */

#campaign-map {
    flex: 1 1 auto;

    width: min(1500px, 100%);
    min-height: 570px;

    margin: 0 auto;

    background-image:
        linear-gradient(
            rgba(5, 10, 13, 0.06),
            rgba(5, 10, 13, 0.06)
        ),
        url("images/campaign_map.png");

    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

    border-left: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);

    /*
       Kein festes Seitenverhältnis:
       Dadurch darf das Bild wieder weiter nach unten reichen.
    */
}


/* =========================================================
   GEMEINSAMER FOOTER
========================================================= */

.site-footer {
    flex: 0 0 auto;

    min-height: 52px;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 15px 20px;

    color: var(--text-footer);
    background-color: var(--background-footer);

    font-size: 13px;
    text-align: center;

    border-top: 3px solid var(--blue-main);
}


/* =========================================================
   NORMALE UNTERSEITEN
========================================================= */

.page-main {
    flex: 1;

    width: min(1300px, calc(100% - 40px));

    margin: 38px auto;
}

.page-heading {
    margin-bottom: 22px;

    padding-left: 14px;

    border-left: 5px solid var(--blue-light);
}

.page-heading h2 {
    margin: 0;

    color: var(--text-main);

    font-size: clamp(27px, 3vw, 42px);

    text-transform: uppercase;
    letter-spacing: 1.8px;
}

.page-heading p {
    margin: 7px 0 0;

    color: var(--text-muted);

    font-size: 15px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .site-header {
        min-height: 88px;

        padding: 18px 20px;
    }

    .site-header h1 {
        font-size: 25px;
        letter-spacing: 2px;
    }

    .main-navigation {
        padding: 0 10px;
    }

    .main-navigation a {
        min-width: auto;

        padding: 15px 16px;

        font-size: 12px;
    }

    .intro {
        padding: 21px 20px;
    }

    #campaign-map {
        min-height: 480px;

        border-left: none;
        border-right: none;
    }
}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 650px) {

    .site-header {
        min-height: 78px;
    }

    .site-header h1 {
        font-size: 20px;
        letter-spacing: 1.3px;
    }

    .main-navigation {
        align-items: stretch;

        padding: 0;
    }

    .main-navigation a {
        flex: 1 1 50%;

        min-height: 48px;

        padding: 12px 8px;

        font-size: 11px;

        border-bottom: 1px solid var(--border-dark);
    }

    .intro {
        padding: 19px 14px 20px;
    }

    .intro h2 {
        font-size: 23px;
    }

    .intro h2::after {
        width: 100px;
    }

    .intro p {
        font-size: 14px;
    }

    #campaign-map {
        min-height: 330px;

        background-size: contain;
    }

    .page-main {
        width: calc(100% - 20px);

        margin: 25px auto;
    }
.main-navigation .navigation-user {
    flex: 1 1 50%;

    min-height: 48px;

    padding: 12px 8px;

    font-size: 11px;

    border-bottom: 1px solid var(--border-dark);
}    
}
/* =========================================================
   CAMPAIGN JOURNAL
========================================================= */

.campaign-main {
    width: min(1100px, calc(100% - 40px));
}

.campaign-header {
    margin-bottom: 34px;

    text-align: center;
}

.campaign-header h2 {
    margin: 0;

    color: var(--text-main);

    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 2px;
}

.campaign-header p {
    margin: 7px 0 0;

    color: var(--text-muted);

    font-size: 15px;
}

.campaign-week {
    width: fit-content;

    margin: 16px auto 0;
    padding: 7px 16px;

    color: #ffffff;
    background-color: var(--blue-dark);

    font-size: 13px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1px;

    border: 1px solid var(--blue-main);
    border-radius: 3px;
}


/* =========================================================
   ZEITLEISTE
========================================================= */

.campaign-timeline {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 22px;
}

.campaign-timeline::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 8px;

    width: 2px;

    background-color: var(--border-light);
}


/* =========================================================
   EINZELNER JOURNAL-EINTRAG
========================================================= */

.campaign-entry {
    --entry-color: var(--blue-light);

    position: relative;

    display: grid;

    grid-template-columns: 18px minmax(0, 1fr);

    gap: 18px;
}

.campaign-entry-marker {
    position: relative;
    z-index: 2;

    width: 18px;
    height: 18px;

    margin-top: 25px;

    background-color: var(--entry-color);

    border: 4px solid var(--background-body);
    border-radius: 50%;

    box-shadow: 0 0 0 2px var(--entry-color);
}

.campaign-entry-content {
    overflow: hidden;

    background-color: rgba(10, 21, 29, 0.96);

    border: 1px solid var(--border-light);
    border-left: 6px solid var(--entry-color);
    border-radius: 5px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}


/* =========================================================
   EINTRAGSKOPF
========================================================= */

.campaign-entry-header {
    min-height: 82px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding: 17px 21px;

    background-color: rgba(18, 32, 42, 0.95);

    border-bottom: 1px solid var(--border-light);
}

.campaign-entry-type {
    display: block;

    margin-bottom: 5px;

    color: var(--entry-color);

    font-size: 11px;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.campaign-entry-header h3 {
    margin: 0;

    color: var(--text-main);

    font-size: clamp(19px, 2.4vw, 25px);

    text-transform: uppercase;
    letter-spacing: 1px;
}

.campaign-entry-header time {
    flex: 0 0 auto;

    color: var(--text-muted);

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   EINTRAGSTEXT
========================================================= */

.campaign-entry-body {
    padding: 21px;
}

.campaign-entry-body p {
    margin: 0 0 14px;

    color: #d5dde2;

    font-size: 15px;
    line-height: 1.65;
}

.campaign-entry-body p:last-child {
    margin-bottom: 0;
}

.campaign-entry-body h4 {
    margin: 26px 0 13px;

    color: var(--text-main);

    font-size: 14px;

    text-transform: uppercase;
    letter-spacing: 1.2px;
}


/* =========================================================
   AUFTRÄGE INNERHALB EINES EINTRAGS
========================================================= */

.campaign-orders {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.campaign-order {
    min-height: 88px;

    display: grid;

    grid-template-columns: 78px minmax(0, 1fr);

    align-items: start;

    gap: 13px;

    padding: 14px;

    background-color: rgba(255, 255, 255, 0.035);

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.campaign-order strong {
    color: var(--text-main);

    font-size: 14px;
}

.campaign-order p {
    margin: 5px 0 0;

    color: var(--text-muted);

    font-size: 13px;
    line-height: 1.45;
}

.order-game {
    display: block;

    padding: 6px 5px;

    color: #101417;

    font-size: 11px;
    font-weight: 900;

    text-align: center;
    text-transform: uppercase;

    border-radius: 3px;
}

.dcs-label {
    background-color: #75bddd;
}

.ets2-label {
    background-color: #86bd73;
}

.msfs-label {
    background-color: #dda652;
}

.arma3-label {
    background-color: #b6a45c;
}


/* =========================================================
   FARBEN DER MELDUNGSARTEN
========================================================= */

.campaign-entry.operation {
    --entry-color: #5fa8d3;
}

.campaign-entry.mission {
    --entry-color: #55c66a;
}

.campaign-entry.logistics {
    --entry-color: #d8a340;
}

.campaign-entry.casualty {
    --entry-color: #cf5656;
}

.campaign-entry.system {
    --entry-color: #89969e;
}

.campaign-entry.intelligence {
    --entry-color: #a88ad2;
}

.campaign-entry.archive {
    --entry-color: #657782;
}


/* =========================================================
   ANIMATION DES NEUESTEN EINTRAGS
========================================================= */

.newest-entry {
    animation: campaign-entry-in 0.35s ease-out;
}

@keyframes campaign-entry-in {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   CAMPAIGN – TABLET
========================================================= */

@media (max-width: 760px) {

    .campaign-entry-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 8px;
    }

    .campaign-entry-header time {
        white-space: normal;
    }

    .campaign-orders {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   CAMPAIGN – SMARTPHONE
========================================================= */

@media (max-width: 500px) {

    .campaign-main {
        width: calc(100% - 20px);
    }

    .campaign-timeline::before {
        left: 6px;
    }

    .campaign-entry {
        grid-template-columns: 14px minmax(0, 1fr);

        gap: 10px;
    }

    .campaign-entry-marker {
        width: 14px;
        height: 14px;

        margin-top: 27px;

        border-width: 3px;
    }

    .campaign-entry-header {
        padding: 15px;
    }

    .campaign-entry-body {
        padding: 15px;
    }

    .campaign-order {
        grid-template-columns: 65px minmax(0, 1fr);

        padding: 11px;
    }
}
/* =========================================================
   MISSIONSSEITE
========================================================= */

.missions-page {
    width: min(1400px, calc(100% - 40px));
    min-height: calc(100vh - 230px);

    margin: 0 auto;
    padding: 45px 0 70px;
}


/* =========================================================
   SEITENÜBERSCHRIFT
========================================================= */

.missions-header {
    margin-bottom: 35px;

    text-align: center;
}

.missions-header h1 {
    margin: 5px 0 10px;

    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.missions-intro {
    max-width: 720px;

    margin: 0 auto;

    color: #aeb8c4;

    font-size: 1rem;
    line-height: 1.6;
}

.section-kicker {
    margin: 0;

    color: #4f9ed7;

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}


/* =========================================================
   FILTERBEREICH
========================================================= */

.mission-filter-panel {
    display: grid;
    grid-template-columns: auto auto minmax(230px, 1fr);
    gap: 25px;
    align-items: end;

    margin-bottom: 40px;
    padding: 22px;

    border: 1px solid rgba(87, 145, 190, 0.25);
    background: rgba(10, 19, 28, 0.88);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.mission-filter-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.mission-filter-label,
.mission-search-group label {
    color: #8998a7;

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mission-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.mission-filter-button,
.mission-status-button {
    min-height: 38px;

    padding: 8px 14px;

    border: 1px solid rgba(110, 139, 162, 0.4);
    background: rgba(23, 35, 46, 0.85);
    color: #c7d0d9;

    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.mission-filter-button:hover,
.mission-status-button:hover {
    border-color: #4f9ed7;
    color: #ffffff;
    transform: translateY(-1px);
}

.mission-filter-button.active,
.mission-status-button.active {
    border-color: #4f9ed7;
    background: #286b9c;
    color: #ffffff;
}

.mission-search-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.mission-search-group input {
    width: 100%;
    min-height: 40px;

    padding: 9px 12px;

    border: 1px solid rgba(110, 139, 162, 0.4);
    outline: none;

    background: rgba(6, 14, 21, 0.9);
    color: #ffffff;

    font-family: inherit;
}

.mission-search-group input::placeholder {
    color: #6f7d89;
}

.mission-search-group input:focus {
    border-color: #4f9ed7;
    box-shadow: 0 0 0 2px rgba(79, 158, 215, 0.12);
}


/* =========================================================
   ABSCHNITTSKOPF
========================================================= */

.missions-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: end;

    margin-bottom: 22px;
}

.missions-section-heading h2 {
    margin: 4px 0 0;

    color: #ffffff;

    font-size: 1.65rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mission-count {
    padding: 9px 13px;

    border: 1px solid rgba(79, 158, 215, 0.35);
    background: rgba(16, 29, 40, 0.8);
    color: #9db7ca;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.mission-count span {
    margin-right: 5px;

    color: #ffffff;
}


/* =========================================================
   MISSION GRID
========================================================= */

.mission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}


/* Wichtig für den JavaScript-Filter */

.mission-card[hidden] {
    display: none;
}


/* =========================================================
   MISSIONSKARTEN
========================================================= */

.mission-card {
    display: flex;
    flex-direction: column;

    min-height: 420px;

    overflow: hidden;

    border: 1px solid rgba(99, 132, 157, 0.32);
    background:
        linear-gradient(
            145deg,
            rgba(20, 33, 44, 0.97),
            rgba(8, 16, 24, 0.98)
        );

    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.3);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.mission-card:hover {
    border-color: rgba(79, 158, 215, 0.75);

    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);

    transform: translateY(-3px);
}

.mission-card-top {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;

    padding: 13px 17px;

    border-bottom: 1px solid rgba(110, 139, 162, 0.18);
    background: rgba(7, 15, 22, 0.7);
}


/* =========================================================
   PLATTFORM
========================================================= */

.mission-platform {
    padding: 5px 9px;

    border: 1px solid currentColor;

    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mission-platform-dcs {
    color: #62b8ef;
}

.mission-platform-arma {
    color: #9ab865;
}


/* =========================================================
   STATUS
========================================================= */

.mission-status {
    position: relative;

    padding-left: 13px;

    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mission-status::before {
    position: absolute;
    top: 50%;
    left: 0;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: currentColor;

    content: "";

    transform: translateY(-50%);
}

.mission-status-open {
    color: #62c98c;
}

.mission-status-running {
    color: #e3ad52;
}

.mission-status-waiting {
    color: #aeb5bc;
}


/* =========================================================
   KARTENINHALT
========================================================= */

.mission-card-content {
    flex: 1;

    padding: 23px 22px;
}

.mission-type {
    margin: 0 0 7px;

    color: #4f9ed7;

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.mission-card h3 {
    margin: 0 0 13px;

    color: #ffffff;

    font-size: 1.45rem;
    line-height: 1.25;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.mission-location {
    margin: 0 0 18px;

    color: #9dacb8;

    font-size: 0.82rem;
    font-weight: 600;
}

.mission-description {
    min-height: 70px;

    margin: 0 0 25px;

    color: #bec7ce;

    font-size: 0.93rem;
    line-height: 1.65;
}


/* =========================================================
   MISSIONSINFORMATIONEN
========================================================= */

.mission-card-data {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;

    overflow: hidden;

    border: 1px solid rgba(110, 139, 162, 0.18);
    background: rgba(110, 139, 162, 0.18);
}

.mission-card-data > div {
    min-width: 0;

    padding: 12px;

    background: rgba(7, 15, 22, 0.92);
}

.mission-data-label {
    display: block;

    margin-bottom: 6px;

    color: #71818e;

    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.mission-card-data strong {
    display: block;

    overflow-wrap: anywhere;

    color: #e4ebf0;

    font-size: 0.8rem;
}


/* =========================================================
   KARTENFUSS
========================================================= */

.mission-card-footer {
    padding: 16px 22px;

    border-top: 1px solid rgba(110, 139, 162, 0.18);
    background: rgba(7, 15, 22, 0.6);
}

.mission-card-footer .button {
    width: 100%;

    text-align: center;
}


/* =========================================================
   LEERE SUCHERGEBNISSE
========================================================= */

.mission-empty-state {
    margin-top: 20px;
    padding: 45px 25px;

    border: 1px dashed rgba(110, 139, 162, 0.45);

    background: rgba(9, 18, 26, 0.75);

    text-align: center;
}

.mission-empty-state h3 {
    margin: 0 0 10px;

    color: #ffffff;
    letter-spacing: 0.08em;
}

.mission-empty-state p {
    margin: 0;

    color: #8f9daa;
}


/* =========================================================
   ARCHIV UND ADMINISTRATION
========================================================= */

.mission-navigation-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;

    margin-top: 45px;
}

.mission-navigation-card {
    display: block;

    min-height: 210px;

    padding: 25px;

    border: 1px solid rgba(99, 132, 157, 0.3);

    background:
        linear-gradient(
            135deg,
            rgba(20, 33, 44, 0.94),
            rgba(8, 16, 24, 0.96)
        );

    color: inherit;
    text-decoration: none;

    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background-color 0.2s ease;
}

.mission-navigation-card:hover {
    border-color: #4f9ed7;
    transform: translateY(-3px);
}

.mission-navigation-label {
    color: #4f9ed7;

    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.mission-navigation-card h2 {
    margin: 8px 0 12px;

    color: #ffffff;

    font-size: 1.4rem;
    text-transform: uppercase;
}

.mission-navigation-card p {
    margin: 0 0 24px;

    color: #aeb8c1;

    line-height: 1.6;
}

.mission-navigation-link {
    color: #66b7eb;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}


/* =========================================================
   RESPONSIVE DARSTELLUNG
========================================================= */

@media (max-width: 1050px) {

    .mission-filter-panel {
        grid-template-columns: 1fr 1fr;
    }

    .mission-search-group {
        grid-column: 1 / -1;
    }

    .mission-card-data {
        grid-template-columns: 1fr;
    }

    .mission-description {
        min-height: auto;
    }
}


@media (max-width: 780px) {

    .missions-page {
        width: min(100% - 24px, 1400px);
        padding-top: 30px;
    }

    .mission-filter-panel {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mission-search-group {
        grid-column: auto;
    }

    .missions-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .mission-grid,
    .mission-navigation-panels {
        grid-template-columns: 1fr;
    }

    .mission-card {
        min-height: 0;
    }
}


@media (max-width: 480px) {

    .mission-filter-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mission-filter-button,
    .mission-status-button {
        width: 100%;
        padding-inline: 7px;
    }

    .mission-card-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .mission-card-content,
    .mission-card-footer {
        padding-right: 16px;
        padding-left: 16px;
    }
}
/* =========================================================
   MISSION ADMINISTRATION
========================================================= */

.mission-admin-page {
    flex: 1;

    width: min(1500px, calc(100% - 40px));

    margin: 0 auto;
    padding: 45px 0 70px;
}


/* =========================================================
   ADMIN-SEITENKOPF
========================================================= */

.mission-admin-header {
    margin-bottom: 35px;

    text-align: center;
}

.mission-admin-header h1 {
    margin: 5px 0 10px;

    color: var(--text-main);

    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mission-admin-header > p:last-child {
    max-width: 760px;

    margin: 0 auto;

    color: var(--text-muted);

    font-size: 1rem;
    line-height: 1.6;
}


/* =========================================================
   STATUSÜBERSICHT
========================================================= */

.mission-admin-statistics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;

    margin-bottom: 35px;
}

.mission-admin-stat-card {
    min-height: 145px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 22px;

    border: 1px solid rgba(99, 132, 157, 0.32);

    background:
        linear-gradient(
            145deg,
            rgba(20, 33, 44, 0.97),
            rgba(8, 16, 24, 0.98)
        );

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.mission-admin-stat-label {
    color: #8fa0ad;

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.mission-admin-stat-card strong {
    margin: 8px 0 5px;

    color: #ffffff;

    font-size: 2.25rem;
    line-height: 1;
}

.mission-admin-stat-note {
    color: #6f818e;

    font-size: 0.76rem;
}


/* =========================================================
   WERKZEUGLEISTE
========================================================= */

.mission-admin-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 22px;

    margin-bottom: 22px;
}

.mission-admin-toolbar h2 {
    margin: 4px 0 0;

    color: #ffffff;

    font-size: 1.65rem;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mission-admin-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


/* =========================================================
   GEMEINSAME BUTTONS
========================================================= */

.button {
    min-height: 42px;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding: 10px 17px;

    border: 1px solid transparent;

    color: #ffffff;

    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 800;

    text-decoration: none;
    text-align: center;

    letter-spacing: 0.1em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        color 0.2s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    border-color: #4f9ed7;
    background-color: #286b9c;
}

.button-primary:hover {
    background-color: #347cae;
}

.mission-admin-back-button {
    border-color: rgba(110, 139, 162, 0.45);

    background-color: rgba(20, 34, 44, 0.9);
    color: #cbd5dc;
}

.mission-admin-back-button:hover {
    border-color: #4f9ed7;
    color: #ffffff;
}


/* =========================================================
   ADMIN-FILTER
========================================================= */

.mission-admin-filter-panel {
    display: grid;
    grid-template-columns: 220px 220px minmax(260px, 1fr);
    gap: 18px;
    align-items: end;

    margin-bottom: 24px;
    padding: 20px;

    border: 1px solid rgba(87, 145, 190, 0.25);

    background: rgba(10, 19, 28, 0.88);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.mission-admin-filter-group,
.mission-admin-search-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mission-admin-filter-group label,
.mission-admin-search-group label {
    color: #8998a7;

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.mission-admin-filter-group select,
.mission-admin-search-group input {
    width: 100%;
    min-height: 42px;

    padding: 9px 11px;

    border: 1px solid rgba(110, 139, 162, 0.4);
    outline: none;

    background: rgba(6, 14, 21, 0.95);
    color: #ffffff;

    font-family: inherit;
}

.mission-admin-filter-group select:focus,
.mission-admin-search-group input:focus {
    border-color: #4f9ed7;

    box-shadow: 0 0 0 2px rgba(79, 158, 215, 0.12);
}


/* =========================================================
   ADMIN-LAYOUT
========================================================= */

.mission-admin-layout {
    display: grid;
    grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}


/* =========================================================
   LINKE SEITE – MISSIONSLISTE
========================================================= */

.mission-admin-list-panel {
    position: sticky;
    top: 20px;

    overflow: hidden;

    border: 1px solid rgba(99, 132, 157, 0.32);

    background: rgba(8, 16, 24, 0.96);

    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.3);
}

.mission-admin-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 15px;

    padding: 18px;

    border-bottom: 1px solid rgba(110, 139, 162, 0.22);

    background: rgba(17, 30, 40, 0.95);
}

.mission-admin-panel-header h2 {
    margin: 4px 0 0;

    color: #ffffff;

    font-size: 1.25rem;
    text-transform: uppercase;
}

.mission-admin-panel-label {
    color: #4f9ed7;

    font-size: 0.64rem;
    font-weight: 700;

    letter-spacing: 0.14em;
}

.mission-admin-list-count {
    color: #91a7b7;

    font-size: 0.65rem;
    font-weight: 700;

    letter-spacing: 0.1em;
}

.mission-admin-list-count span {
    margin-right: 4px;

    color: #ffffff;
}

.mission-admin-list {
    max-height: 720px;

    overflow-y: auto;
}

.mission-admin-list-item {
    width: 100%;

    display: block;

    padding: 17px 18px;

    border: 0;
    border-bottom: 1px solid rgba(110, 139, 162, 0.15);

    background: rgba(8, 16, 24, 0.92);
    color: inherit;

    font-family: inherit;
    text-align: left;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.mission-admin-list-item:hover {
    background-color: rgba(25, 43, 56, 0.95);
}

.mission-admin-list-item.active {
    background-color: rgba(32, 67, 91, 0.85);

    box-shadow: inset 4px 0 0 #4f9ed7;
}

.mission-admin-list-item[hidden] {
    display: none;
}

.mission-admin-list-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    margin-bottom: 11px;
}

.mission-admin-list-item > strong {
    display: block;

    margin-bottom: 7px;

    color: #ffffff;

    font-size: 0.92rem;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mission-admin-list-meta {
    color: #8d9ca8;

    font-size: 0.76rem;
}

.mission-admin-empty-list {
    padding: 35px 22px;

    text-align: center;
}

.mission-admin-empty-list strong {
    color: #ffffff;
}

.mission-admin-empty-list p {
    margin: 8px 0 0;

    color: #84939f;

    font-size: 0.82rem;
}


/* =========================================================
   RECHTE SEITE – EDITOR
========================================================= */

.mission-editor-panel {
    overflow: hidden;

    border: 1px solid rgba(99, 132, 157, 0.32);

    background:
        linear-gradient(
            145deg,
            rgba(17, 29, 39, 0.98),
            rgba(7, 14, 21, 0.99)
        );

    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.3);
}

.mission-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;

    padding: 21px 24px;

    border-bottom: 1px solid rgba(110, 139, 162, 0.2);

    background: rgba(18, 31, 41, 0.96);
}

.mission-editor-header h2 {
    margin: 5px 0 0;

    color: #ffffff;

    font-size: 1.45rem;
    text-transform: uppercase;
}

.mission-editor-id {
    color: #8295a3;

    font-size: 0.72rem;
    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   EDITOR-ABSCHNITTE
========================================================= */

.mission-editor-section {
    margin: 0;
    padding: 25px 24px 28px;

    border: 0;
    border-bottom: 1px solid rgba(110, 139, 162, 0.16);
}

.mission-editor-section legend {
    width: 100%;

    margin: 0 0 20px;
    padding: 0 0 10px;

    color: #ffffff;

    font-size: 0.85rem;
    font-weight: 800;

    letter-spacing: 0.11em;
    text-transform: uppercase;

    border-bottom: 1px solid rgba(79, 158, 215, 0.32);
}

.mission-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.mission-editor-field {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mission-editor-field-wide {
    grid-column: 1 / -1;
}

.mission-editor-field label {
    color: #8998a7;

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.mission-editor-field input,
.mission-editor-field select,
.mission-editor-field textarea {
    width: 100%;

    padding: 11px 12px;

    border: 1px solid rgba(110, 139, 162, 0.38);
    outline: none;

    background: rgba(5, 12, 18, 0.92);
    color: #ffffff;

    font-family: inherit;
    font-size: 0.9rem;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.mission-editor-field input,
.mission-editor-field select {
    min-height: 43px;
}

.mission-editor-field textarea {
    min-height: 115px;

    resize: vertical;

    line-height: 1.55;
}

.mission-editor-field input:focus,
.mission-editor-field select:focus,
.mission-editor-field textarea:focus {
    border-color: #4f9ed7;

    background-color: rgba(7, 17, 24, 0.98);

    box-shadow: 0 0 0 2px rgba(79, 158, 215, 0.12);
}

.mission-editor-field input::placeholder,
.mission-editor-field textarea::placeholder {
    color: #65747f;
}


/* =========================================================
   EDITOR-AKTIONEN
========================================================= */

.mission-editor-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;

    padding: 22px 24px;

    background: rgba(5, 12, 18, 0.82);
}

.mission-editor-actions-primary,
.mission-editor-actions-danger {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mission-admin-publish-button {
    border-color: #56b879;
    background-color: #28734a;
}

.mission-admin-publish-button:hover {
    background-color: #32905c;
}

.mission-admin-preview-button {
    border-color: #658aa3;
    background-color: #314c60;
}

.mission-admin-preview-button:hover {
    background-color: #3b607a;
}

.mission-admin-complete-button {
    border-color: #d7a147;
    background-color: #7a5522;
}

.mission-admin-complete-button:hover {
    background-color: #986a2a;
}

.mission-admin-delete-button {
    border-color: #cf5c5c;
    background-color: #782d2d;
}

.mission-admin-delete-button:hover {
    background-color: #983939;
}


/* =========================================================
   STATUSMELDUNGEN
========================================================= */

.mission-admin-message {
    margin: 0 24px 24px;
    padding: 14px 16px;

    border: 1px solid rgba(110, 139, 162, 0.4);

    background-color: rgba(19, 35, 46, 0.95);
    color: #dce5eb;

    font-size: 0.86rem;
    line-height: 1.45;
}

.mission-admin-message-success {
    border-color: rgba(86, 184, 121, 0.7);

    background-color: rgba(27, 83, 51, 0.75);
}

.mission-admin-message-info {
    border-color: rgba(79, 158, 215, 0.7);

    background-color: rgba(31, 75, 106, 0.75);
}

.mission-admin-message-warning {
    border-color: rgba(215, 161, 71, 0.75);

    background-color: rgba(103, 71, 28, 0.78);
}


/* =========================================================
   MISSION ADMIN – TABLET
========================================================= */

@media (max-width: 1100px) {

    .mission-admin-statistics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mission-admin-filter-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mission-admin-search-group {
        grid-column: 1 / -1;
    }

    .mission-admin-layout {
        grid-template-columns: 1fr;
    }

    .mission-admin-list-panel {
        position: static;
    }

    .mission-admin-list {
        max-height: 420px;
    }
}


/* =========================================================
   MISSION ADMIN – KLEINES TABLET
========================================================= */

@media (max-width: 780px) {

    .mission-admin-page {
        width: min(100% - 24px, 1500px);

        padding-top: 30px;
    }

    .mission-admin-toolbar,
    .mission-editor-header,
    .mission-editor-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .mission-admin-toolbar-actions,
    .mission-editor-actions-primary,
    .mission-editor-actions-danger {
        width: 100%;
    }

    .mission-admin-toolbar-actions .button,
    .mission-editor-actions .button {
        flex: 1 1 180px;
    }

    .mission-admin-filter-panel {
        grid-template-columns: 1fr;
    }

    .mission-admin-search-group {
        grid-column: auto;
    }

    .mission-editor-grid {
        grid-template-columns: 1fr;
    }

    .mission-editor-field-wide {
        grid-column: auto;
    }

    .mission-editor-id {
        white-space: normal;
    }
}


/* =========================================================
   MISSION ADMIN – SMARTPHONE
========================================================= */

@media (max-width: 520px) {

    .mission-admin-statistics {
        grid-template-columns: 1fr;
    }

    .mission-admin-stat-card {
        min-height: 120px;
    }

    .mission-admin-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .mission-admin-list-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .mission-editor-header,
    .mission-editor-section,
    .mission-editor-actions {
        padding-right: 16px;
        padding-left: 16px;
    }

    .mission-admin-message {
        margin-right: 16px;
        margin-left: 16px;
    }

    .mission-admin-toolbar-actions,
    .mission-editor-actions-primary,
    .mission-editor-actions-danger {
        flex-direction: column;
    }

    .mission-admin-toolbar-actions .button,
    .mission-editor-actions .button {
        width: 100%;
        flex: none;
    }
}
/* =========================================================
   MISSION DETAILS
========================================================= */

.mission-details-page {
    flex: 1;

    width: min(1400px, calc(100% - 40px));

    margin: 0 auto;
    padding: 35px 0 70px;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.mission-details-navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;

    margin-bottom: 20px;

    color: #748796;

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.mission-details-navigation a {
    color: #65afe0;
    text-decoration: none;
}

.mission-details-navigation a:hover {
    color: #ffffff;
}

.mission-details-navigation strong {
    color: #b8c4cc;
}


/* =========================================================
   MISSIONSKOPF
========================================================= */

.mission-details-hero {
    margin-bottom: 26px;
    padding: 29px;

    border: 1px solid rgba(99, 132, 157, 0.35);
    border-left: 6px solid #4f9ed7;

    background:
        linear-gradient(
            135deg,
            rgba(23, 40, 53, 0.98),
            rgba(7, 15, 22, 0.99)
        );

    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
}

.mission-details-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    margin-bottom: 20px;
}

.mission-details-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.mission-details-type {
    padding: 5px 9px;

    border: 1px solid rgba(79, 158, 215, 0.5);

    color: #9ec8e3;

    font-size: 0.67rem;
    font-weight: 800;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.mission-details-id {
    color: #788b98;

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    white-space: nowrap;
}

.mission-details-hero h1 {
    margin: 0 0 13px;

    color: #ffffff;

    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.08;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mission-details-summary {
    max-width: 920px;

    margin: 0 0 28px;

    color: #bac5cd;

    font-size: 1rem;
    line-height: 1.65;
}

.mission-details-hero-data {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;

    overflow: hidden;

    border: 1px solid rgba(110, 139, 162, 0.2);
    background: rgba(110, 139, 162, 0.2);
}

.mission-details-hero-data > div {
    min-width: 0;

    padding: 15px;

    background: rgba(6, 14, 21, 0.9);
}

.mission-details-hero-data span {
    display: block;

    margin-bottom: 7px;

    color: #6f818f;

    font-size: 0.62rem;
    font-weight: 700;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mission-details-hero-data strong {
    display: block;

    overflow-wrap: anywhere;

    color: #e8eef2;

    font-size: 0.86rem;
}


/* =========================================================
   DETAIL-LAYOUT
========================================================= */

.mission-details-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
    gap: 24px;
    align-items: start;
}

.mission-details-main,
.mission-details-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}


/* =========================================================
   GEMEINSAME PANELS
========================================================= */

.mission-details-panel,
.mission-details-side-panel {
    overflow: hidden;

    border: 1px solid rgba(99, 132, 157, 0.32);

    background:
        linear-gradient(
            145deg,
            rgba(18, 31, 41, 0.98),
            rgba(7, 14, 21, 0.99)
        );

    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.mission-details-panel-header {
    padding: 18px 21px;

    border-bottom: 1px solid rgba(110, 139, 162, 0.2);

    background: rgba(17, 30, 40, 0.95);
}

.mission-details-panel-header > span {
    display: block;

    margin-bottom: 5px;

    color: #4f9ed7;

    font-size: 0.64rem;
    font-weight: 800;

    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.mission-details-panel-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 1.25rem;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* =========================================================
   BRIEFING
========================================================= */

.mission-details-text {
    padding: 23px;
}

.mission-details-text p {
    margin: 0 0 16px;

    color: #c7d0d7;

    font-size: 0.95rem;
    line-height: 1.72;
}

.mission-details-text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   MISSIONSZIELE
========================================================= */

.mission-objective-list {
    margin: 0;
    padding: 20px 22px 23px;

    list-style: none;
}

.mission-objective-list li {
    position: relative;

    margin-bottom: 10px;
    padding: 13px 14px 13px 42px;

    border: 1px solid rgba(110, 139, 162, 0.18);

    background: rgba(7, 15, 22, 0.82);
    color: #d6dde2;

    font-size: 0.9rem;
    line-height: 1.45;
}

.mission-objective-list li:last-child {
    margin-bottom: 0;
}

.mission-objective-list li::before {
    position: absolute;
    top: 50%;
    left: 15px;

    width: 13px;
    height: 13px;

    border: 2px solid currentColor;

    content: "";

    transform: translateY(-50%);
}

.mission-objective-list.primary li {
    color: #dbe7ee;
}

.mission-objective-list.primary li::before {
    border-color: #59ba82;
    background: rgba(89, 186, 130, 0.2);
}

.mission-objective-list.secondary li {
    color: #b9c4cc;
}

.mission-objective-list.secondary li::before {
    border-color: #8497a5;
}


/* =========================================================
   KAMPAGNENAUSWIRKUNG
========================================================= */

.mission-campaign-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;

    margin: 22px;

    border: 1px solid rgba(110, 139, 162, 0.2);
    background: rgba(110, 139, 162, 0.2);
}

.mission-campaign-results > div {
    padding: 17px;

    background: rgba(6, 14, 21, 0.92);
}

.mission-campaign-results span {
    display: block;

    margin-bottom: 7px;

    color: #738694;

    font-size: 0.62rem;
    font-weight: 700;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mission-campaign-results strong {
    color: #ffffff;

    font-size: 0.9rem;
    line-height: 1.4;
}

.mission-campaign-effect {
    margin: 0;
    padding: 0 22px 23px;

    color: #b9c4cc;

    font-size: 0.91rem;
    line-height: 1.65;
}


/* =========================================================
   SERVERDATEN
========================================================= */

.mission-details-data-list {
    margin: 0;
    padding: 0;
}

.mission-details-data-list > div {
    display: grid;
    grid-template-columns: 115px minmax(0, 1fr);
    gap: 15px;

    padding: 14px 18px;

    border-bottom: 1px solid rgba(110, 139, 162, 0.14);
}

.mission-details-data-list > div:last-child {
    border-bottom: 0;
}

.mission-details-data-list dt {
    color: #718491;

    font-size: 0.67rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mission-details-data-list dd {
    min-width: 0;

    margin: 0;

    overflow-wrap: anywhere;

    color: #e2e8ec;

    font-size: 0.83rem;
    font-weight: 700;

    text-align: right;
}


/* =========================================================
   TEILNEHMER
========================================================= */

.mission-participant-counter {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;

    padding: 21px;

    border-bottom: 1px solid rgba(110, 139, 162, 0.16);

    background: rgba(5, 12, 18, 0.75);
}

.mission-participant-counter strong {
    color: #ffffff;

    font-size: 1.9rem;
}

.mission-participant-counter span {
    color: #768996;

    font-size: 0.72rem;

    text-transform: uppercase;
}

.mission-participant-list {
    max-height: 440px;

    margin: 0;
    padding: 0;

    overflow-y: auto;

    list-style: none;
}

.mission-participant-list li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 13px;
    align-items: center;

    padding: 14px 17px;

    border-bottom: 1px solid rgba(110, 139, 162, 0.14);
}

.mission-participant-list li:last-child {
    border-bottom: 0;
}

.participant-number {
    width: 34px;
    height: 34px;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    border: 1px solid rgba(79, 158, 215, 0.45);

    background: rgba(27, 61, 84, 0.65);
    color: #b9d9ed;

    font-size: 0.68rem;
    font-weight: 800;
}

.mission-participant-list strong {
    display: block;

    margin-bottom: 3px;

    color: #ffffff;

    font-size: 0.82rem;
}

.mission-participant-list div > span {
    color: #7f919e;

    font-size: 0.72rem;
}

.mission-participant-list .participant-empty {
    opacity: 0.58;
}

.mission-participant-list .participant-empty .participant-number {
    background: rgba(26, 36, 43, 0.7);
}


/* =========================================================
   SPIELERAKTIONEN
========================================================= */

.mission-detail-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;

    padding: 20px;
}

.mission-detail-actions .button {
    width: 100%;
}

.mission-detail-start-button {
    border-color: #d5a24d;
    background-color: #765321;
}

.mission-detail-start-button:hover:not(:disabled) {
    background-color: #93682b;
}

.mission-detail-leave-button {
    border-color: #b95b5b;
    background-color: #652b2b;
}

.mission-detail-leave-button:hover:not(:disabled) {
    background-color: #843737;
}

.button:disabled {
    opacity: 0.42;

    cursor: not-allowed;
    transform: none;
}

.mission-action-note {
    margin: 0;
    padding: 0 20px 20px;

    color: #7f919d;

    font-size: 0.76rem;
    line-height: 1.55;
}

.mission-detail-message {
    margin: 0 20px 20px;
    padding: 13px 14px;

    border: 1px solid rgba(110, 139, 162, 0.4);

    background: rgba(20, 36, 47, 0.9);
    color: #dce5ea;

    font-size: 0.79rem;
    line-height: 1.45;
}

.mission-detail-message-success {
    border-color: rgba(86, 184, 121, 0.7);
    background: rgba(28, 81, 51, 0.75);
}

.mission-detail-message-info {
    border-color: rgba(79, 158, 215, 0.7);
    background: rgba(30, 70, 98, 0.78);
}

.mission-detail-message-warning {
    border-color: rgba(215, 161, 71, 0.75);
    background: rgba(100, 69, 28, 0.8);
}


/* =========================================================
   ADMIN-VERKNÜPFUNGEN
========================================================= */

.mission-admin-shortcuts {
    padding-bottom: 18px;
}

.mission-admin-shortcuts .button {
    width: calc(100% - 36px);

    margin: 18px 18px 0;
}

.mission-detail-admin-button {
    border-color: #765fa3;
    background-color: #463467;
}

.mission-detail-admin-button:hover {
    background-color: #594284;
}


/* =========================================================
   WEITERE STATUSFARBEN
========================================================= */

.mission-status-draft {
    color: #81909b;
}

.mission-status-preparation {
    color: #6da7cf;
}

.mission-status-completed {
    color: #64c48a;
}

.mission-status-failed {
    color: #d35d5d;
}

.mission-status-cancelled {
    color: #8d959b;
}


/* =========================================================
   MISSION DETAILS – TABLET
========================================================= */

@media (max-width: 1100px) {

    .mission-details-hero-data {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mission-details-layout {
        grid-template-columns: 1fr;
    }

    .mission-details-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .mission-action-panel,
    .mission-admin-shortcuts {
        align-self: stretch;
    }
}


/* =========================================================
   MISSION DETAILS – KLEINES TABLET
========================================================= */

@media (max-width: 780px) {

    .mission-details-page {
        width: min(100% - 24px, 1400px);
        padding-top: 26px;
    }

    .mission-details-hero {
        padding: 22px;
    }

    .mission-details-hero-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .mission-details-id {
        white-space: normal;
    }

    .mission-details-hero-data {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mission-details-sidebar {
        grid-template-columns: 1fr;
    }

    .mission-campaign-results {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   MISSION DETAILS – SMARTPHONE
========================================================= */

@media (max-width: 520px) {

    .mission-details-page {
        width: calc(100% - 20px);
    }

    .mission-details-hero {
        padding: 17px;
    }

    .mission-details-hero h1 {
        font-size: 1.75rem;
    }

    .mission-details-badges {
        align-items: flex-start;
        flex-direction: column;
    }

    .mission-details-hero-data {
        grid-template-columns: 1fr;
    }

    .mission-details-panel-header,
    .mission-details-text {
        padding-right: 16px;
        padding-left: 16px;
    }

    .mission-objective-list {
        padding-right: 16px;
        padding-left: 16px;
    }

    .mission-details-data-list > div {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .mission-details-data-list dd {
        text-align: left;
    }

    .mission-campaign-results {
        margin-right: 16px;
        margin-left: 16px;
    }

    .mission-campaign-effect {
        padding-right: 16px;
        padding-left: 16px;
    }
}
/* =========================================================
   MISSION ARCHIVE
========================================================= */

.mission-archive-page {
    flex: 1;

    width: min(1400px, calc(100% - 40px));

    margin: 0 auto;
    padding: 45px 0 70px;
}


/* =========================================================
   ARCHIV-SEITENKOPF
========================================================= */

.mission-archive-header {
    margin-bottom: 35px;

    text-align: center;
}

.mission-archive-header h1 {
    margin: 5px 0 10px;

    color: #ffffff;

    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mission-archive-header > p:last-child {
    max-width: 760px;

    margin: 0 auto;

    color: var(--text-muted);

    font-size: 1rem;
    line-height: 1.6;
}


/* =========================================================
   ARCHIV-STATISTIK
========================================================= */

.mission-archive-statistics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;

    margin-bottom: 35px;
}

.mission-archive-stat-card {
    min-height: 140px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 21px;

    border: 1px solid rgba(99, 132, 157, 0.32);
    border-top: 4px solid #5f7f94;

    background:
        linear-gradient(
            145deg,
            rgba(20, 33, 44, 0.97),
            rgba(8, 16, 24, 0.98)
        );

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.27);
}

.mission-archive-stat-card > span {
    color: #899ba8;

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mission-archive-stat-card strong {
    margin: 8px 0 5px;

    color: #ffffff;

    font-size: 2.15rem;
    line-height: 1;
}

.mission-archive-stat-card small {
    color: #6f818e;

    font-size: 0.72rem;
    line-height: 1.4;
}

.archive-stat-success {
    border-top-color: #5fbd82;
}

.archive-stat-partial {
    border-top-color: #d1a04a;
}

.archive-stat-failed {
    border-top-color: #c95c5c;
}

.archive-stat-cancelled {
    border-top-color: #89959d;
}


/* =========================================================
   ARCHIV-WERKZEUGLEISTE
========================================================= */

.mission-archive-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;

    margin-bottom: 22px;
}

.mission-archive-toolbar h2 {
    margin: 4px 0 0;

    color: #ffffff;

    font-size: 1.65rem;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* =========================================================
   ARCHIV-FILTER
========================================================= */

.mission-archive-filter-panel {
    display: grid;
    grid-template-columns:
        180px
        200px
        150px
        170px
        minmax(260px, 1fr);

    gap: 17px;
    align-items: end;

    margin-bottom: 18px;
    padding: 20px;

    border: 1px solid rgba(87, 145, 190, 0.25);

    background: rgba(10, 19, 28, 0.88);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.mission-archive-filter-group,
.mission-archive-search-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mission-archive-filter-group label,
.mission-archive-search-group label {
    color: #8998a7;

    font-size: 0.67rem;
    font-weight: 700;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mission-archive-filter-group select,
.mission-archive-search-group input {
    width: 100%;
    min-height: 42px;

    padding: 9px 11px;

    border: 1px solid rgba(110, 139, 162, 0.4);
    outline: none;

    background: rgba(6, 14, 21, 0.95);
    color: #ffffff;

    font-family: inherit;
}

.mission-archive-filter-group select:focus,
.mission-archive-search-group input:focus {
    border-color: #4f9ed7;

    box-shadow: 0 0 0 2px rgba(79, 158, 215, 0.12);
}


/* =========================================================
   ERGEBNISLEISTE
========================================================= */

.mission-archive-result-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 9px;

    margin-bottom: 20px;

    color: #7f919e;

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mission-archive-result-bar strong {
    min-width: 34px;

    padding: 7px 10px;

    border: 1px solid rgba(79, 158, 215, 0.35);

    background: rgba(17, 31, 41, 0.9);
    color: #ffffff;

    text-align: center;
}


/* =========================================================
   ARCHIVLISTE
========================================================= */

.mission-archive-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mission-archive-entry[hidden] {
    display: none;
}


/* =========================================================
   ARCHIVEINTRAG
========================================================= */

.mission-archive-entry {
    overflow: hidden;

    border: 1px solid rgba(99, 132, 157, 0.32);

    background:
        linear-gradient(
            145deg,
            rgba(18, 31, 41, 0.98),
            rgba(7, 14, 21, 0.99)
        );

    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.29);
}

.mission-archive-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    padding: 15px 19px;

    border-bottom: 1px solid rgba(110, 139, 162, 0.2);

    background: rgba(17, 30, 40, 0.96);
}

.mission-archive-entry-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
}

.mission-archive-entry-header time {
    color: #8899a5;

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    white-space: nowrap;
}


/* =========================================================
   ERGEBNIS-STATUS
========================================================= */

.mission-archive-result {
    padding: 5px 9px;

    border: 1px solid currentColor;

    font-size: 0.66rem;
    font-weight: 800;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.archive-result-success {
    color: #63c48a;
}

.archive-result-partial {
    color: #d5a34d;
}

.archive-result-failed {
    color: #d45e5e;
}

.archive-result-cancelled {
    color: #929ca3;
}


/* =========================================================
   ARCHIVEINTRAG – INHALT
========================================================= */

.mission-archive-entry-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    gap: 0;
}

.mission-archive-entry-main {
    padding: 23px 24px;
}

.mission-archive-entry-main h2 {
    margin: 0 0 11px;

    color: #ffffff;

    font-size: clamp(1.45rem, 2.6vw, 2rem);
    line-height: 1.2;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mission-archive-location {
    margin: 0 0 17px;

    color: #91a1ad;

    font-size: 0.8rem;
    font-weight: 700;
}

.mission-archive-summary {
    max-width: 760px;

    margin: 0;

    color: #bac5cd;

    font-size: 0.92rem;
    line-height: 1.65;
}


/* =========================================================
   ARCHIVDATEN
========================================================= */

.mission-archive-entry-data {
    margin: 0;

    border-left: 1px solid rgba(110, 139, 162, 0.17);

    background: rgba(5, 12, 18, 0.48);
}

.mission-archive-entry-data > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 15px;

    padding: 14px 18px;

    border-bottom: 1px solid rgba(110, 139, 162, 0.14);
}

.mission-archive-entry-data > div:last-child {
    border-bottom: 0;
}

.mission-archive-entry-data dt {
    color: #718491;

    font-size: 0.65rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mission-archive-entry-data dd {
    min-width: 0;

    margin: 0;

    overflow-wrap: anywhere;

    color: #e3e9ed;

    font-size: 0.81rem;
    font-weight: 700;

    text-align: right;
}


/* =========================================================
   KAMPAGNENAUSWIRKUNG
========================================================= */

.mission-archive-impact {
    padding: 18px 24px;

    border-top: 1px solid rgba(110, 139, 162, 0.17);
    border-bottom: 1px solid rgba(110, 139, 162, 0.17);

    background: rgba(22, 43, 57, 0.45);
}

.mission-archive-impact > span {
    display: block;

    margin-bottom: 7px;

    color: #4f9ed7;

    font-size: 0.64rem;
    font-weight: 800;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.mission-archive-impact p {
    margin: 0;

    color: #bac5cd;

    font-size: 0.87rem;
    line-height: 1.55;
}


/* =========================================================
   ARCHIV-FUSS
========================================================= */

.mission-archive-entry-footer {
    padding: 16px 24px;

    background: rgba(5, 12, 18, 0.72);
}

.mission-archive-report-button {
    border-color: #567f99;

    background-color: #2e4f64;
}

.mission-archive-report-button:hover {
    background-color: #3a647f;
}


/* =========================================================
   EINSATZBERICHT
========================================================= */

.mission-archive-report {
    padding: 23px 24px;

    border-top: 1px solid rgba(79, 158, 215, 0.28);

    background:
        linear-gradient(
            135deg,
            rgba(22, 47, 63, 0.78),
            rgba(8, 18, 26, 0.9)
        );
}

.mission-archive-report[hidden] {
    display: none;
}

.mission-archive-report h3 {
    margin: 0 0 14px;

    color: #ffffff;

    font-size: 1rem;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mission-archive-report p {
    margin: 0 0 13px;

    color: #c3cdd4;

    font-size: 0.89rem;
    line-height: 1.65;
}

.mission-archive-report p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   LEERER ARCHIVZUSTAND
========================================================= */

.mission-archive-empty-state {
    margin-top: 25px;
    padding: 50px 25px;

    border: 1px dashed rgba(110, 139, 162, 0.45);

    background: rgba(9, 18, 26, 0.75);

    text-align: center;
}

.mission-archive-empty-state h2 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 1.25rem;
    letter-spacing: 0.08em;
}

.mission-archive-empty-state p {
    margin: 0;

    color: #8f9daa;
}


/* =========================================================
   MISSION ARCHIVE – TABLET
========================================================= */

@media (max-width: 1150px) {

    .mission-archive-statistics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mission-archive-filter-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mission-archive-search-group {
        grid-column: 1 / -1;
    }

    .mission-archive-entry-body {
        grid-template-columns: 1fr;
    }

    .mission-archive-entry-data {
        border-top: 1px solid rgba(110, 139, 162, 0.17);
        border-left: 0;
    }
}


/* =========================================================
   MISSION ARCHIVE – KLEINES TABLET
========================================================= */

@media (max-width: 780px) {

    .mission-archive-page {
        width: min(100% - 24px, 1400px);
        padding-top: 30px;
    }

    .mission-archive-statistics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mission-archive-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .mission-archive-toolbar .button {
        width: 100%;
    }

    .mission-archive-filter-panel {
        grid-template-columns: 1fr;
    }

    .mission-archive-search-group {
        grid-column: auto;
    }

    .mission-archive-entry-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .mission-archive-entry-header time {
        white-space: normal;
    }
}


/* =========================================================
   MISSION ARCHIVE – SMARTPHONE
========================================================= */

@media (max-width: 520px) {

    .mission-archive-page {
        width: calc(100% - 20px);
    }

    .mission-archive-statistics {
        grid-template-columns: 1fr;
    }

    .mission-archive-stat-card {
        min-height: 115px;
    }

    .mission-archive-entry-main,
    .mission-archive-impact,
    .mission-archive-entry-footer,
    .mission-archive-report {
        padding-right: 16px;
        padding-left: 16px;
    }

    .mission-archive-entry-data > div {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .mission-archive-entry-data dd {
        text-align: left;
    }

    .mission-archive-entry-badges {
        align-items: flex-start;
        flex-direction: column;
    }

    .mission-archive-report-button {
        width: 100%;
    }

    .mission-archive-result-bar {
        justify-content: space-between;
    }
}
/* ==========================================================
   LOGISTICS CONTROL
========================================================== */

.logistics-page {
    width: min(1400px, calc(100% - 40px));
    margin: 0 auto;
    padding: 55px 0 70px;
}


/* ==========================================================
   SEITENKOPF
========================================================== */

.logistics-header {
    margin-bottom: 35px;
    text-align: center;
}

.logistics-header h1 {
    margin: 8px 0 12px;

    font-size: clamp(2rem, 4vw, 3.2rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.logistics-intro {
    max-width: 760px;
    margin: 0 auto;

    color: #aeb8c4;
    line-height: 1.7;
}


/* ==========================================================
   FILTERBEREICH
========================================================== */

.logistics-filter-panel {
    display: grid;
    grid-template-columns: auto auto minmax(260px, 1fr);
    gap: 30px;
    align-items: end;

    margin-bottom: 45px;
    padding: 22px 25px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(
            135deg,
            rgba(17, 28, 39, 0.96),
            rgba(9, 17, 25, 0.96)
        );

    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.22);
}

.logistics-filter-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.logistics-filter-label,
.logistics-search-group label {
    color: #8f9aaa;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.logistics-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.logistics-filter-button,
.logistics-status-button {
    min-height: 38px;
    padding: 9px 14px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.035);
    color: #aeb8c4;

    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;

    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.logistics-filter-button:hover,
.logistics-status-button:hover {
    border-color: rgba(77, 176, 255, 0.55);
    color: #ffffff;
    transform: translateY(-1px);
}

.logistics-filter-button.active,
.logistics-status-button.active {
    border-color: #4db0ff;
    background: rgba(77, 176, 255, 0.16);
    color: #ffffff;
}

.logistics-search-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.logistics-search-group input {
    width: 100%;
    min-height: 42px;
    padding: 10px 13px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.24);
    color: #ffffff;

    font: inherit;
    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.logistics-search-group input::placeholder {
    color: #6f7b88;
}

.logistics-search-group input:focus {
    border-color: #4db0ff;
    box-shadow: 0 0 0 3px rgba(77, 176, 255, 0.12);
}


/* ==========================================================
   ÜBERSCHRIFT TRANSPORTBEREICH
========================================================== */

.logistics-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    align-items: end;

    margin-bottom: 24px;
}

.logistics-section-heading h2 {
    margin: 5px 0 0;

    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    letter-spacing: 0.04em;
}

.logistics-count {
    flex-shrink: 0;

    padding: 10px 14px;

    border: 1px solid rgba(77, 176, 255, 0.25);
    background: rgba(77, 176, 255, 0.08);
    color: #8ecfff;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.logistics-count span {
    margin-right: 5px;
    color: #ffffff;
    font-size: 1rem;
}


/* ==========================================================
   TRANSPORTKARTEN
========================================================== */

.logistics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.logistics-card {
    display: flex;
    flex-direction: column;
    min-width: 0;

    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(
            150deg,
            rgba(17, 29, 41, 0.98),
            rgba(7, 14, 21, 0.98)
        );

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);

    overflow: hidden;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.logistics-card:hover {
    transform: translateY(-4px);
    border-color: rgba(77, 176, 255, 0.3);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.34);
}

.logistics-card[hidden] {
    display: none;
}

.logistics-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;

    padding: 14px 18px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.18);
}

.logistics-platform,
.logistics-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 28px;
    padding: 6px 10px;

    border: 1px solid transparent;

    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* Plattformfarben */

.logistics-platform-ets2 {
    border-color: rgba(255, 177, 64, 0.45);
    background: rgba(255, 177, 64, 0.12);
    color: #ffc166;
}

.logistics-platform-msfs {
    border-color: rgba(78, 177, 255, 0.48);
    background: rgba(78, 177, 255, 0.12);
    color: #6fc5ff;
}


/* Statusfarben */

.logistics-status-open {
    border-color: rgba(78, 177, 255, 0.45);
    background: rgba(78, 177, 255, 0.12);
    color: #7bc9ff;
}

.logistics-status-accepted {
    border-color: rgba(209, 169, 74, 0.48);
    background: rgba(209, 169, 74, 0.12);
    color: #e7c76f;
}

.logistics-status-running {
    border-color: rgba(70, 199, 126, 0.48);
    background: rgba(70, 199, 126, 0.12);
    color: #69db9a;
}

.logistics-status-waiting {
    border-color: rgba(194, 133, 255, 0.45);
    background: rgba(194, 133, 255, 0.1);
    color: #d4a9ff;
}


/* Karteninhalt */

.logistics-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    padding: 24px 22px;
}

.logistics-type {
    margin: 0 0 8px;

    color: #4db0ff;

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.logistics-card-content h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 1.35rem;
    line-height: 1.25;
    letter-spacing: 0.045em;
}

.logistics-route {
    margin: 0 0 16px;

    color: #d9e2eb;

    font-size: 0.95rem;
    font-weight: 700;
}

.logistics-description {
    margin: 0 0 22px;

    color: #9da8b5;
    line-height: 1.65;
}


/* Frachtfeld */

.logistics-cargo-panel {
    display: flex;
    flex-direction: column;
    gap: 5px;

    margin-bottom: 22px;
    padding: 14px 16px;

    border-left: 3px solid #4db0ff;
    background: rgba(255, 255, 255, 0.035);
}

.logistics-cargo-panel strong {
    color: #ffffff;
    font-size: 1rem;
}

.logistics-cargo-panel small {
    color: #8793a0;
    font-size: 0.78rem;
}


/* Transportdaten */

.logistics-card-data {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;

    margin-top: auto;
}

.logistics-card-data > div {
    min-width: 0;
    padding: 12px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.16);
}

.logistics-data-label {
    display: block;
    margin-bottom: 5px;

    color: #778492;

    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.logistics-card-data strong {
    display: block;

    color: #ffffff;
    font-size: 0.84rem;
    line-height: 1.4;

    overflow-wrap: anywhere;
}


/* Kartenfuß */

.logistics-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;

    padding: 16px 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.2);
}

.logistics-availability {
    color: #8996a4;

    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
}

.logistics-card-footer .button {
    flex-shrink: 0;
}


/* ==========================================================
   LEERER ZUSTAND
========================================================== */

.logistics-empty-state {
    margin-top: 25px;
    padding: 45px 25px;

    border: 1px dashed rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.025);

    text-align: center;
}

.logistics-empty-state h3 {
    margin: 0 0 10px;
    color: #ffffff;
    letter-spacing: 0.08em;
}

.logistics-empty-state p {
    margin: 0;
    color: #8d99a6;
}


/* ==========================================================
   ARCHIV UND ADMINISTRATION
========================================================== */

.logistics-navigation-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;

    margin-top: 50px;
}

.logistics-navigation-card {
    position: relative;

    display: flex;
    flex-direction: column;
    min-height: 230px;
    padding: 28px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(
            140deg,
            rgba(17, 29, 41, 0.96),
            rgba(7, 14, 21, 0.96)
        );

    color: inherit;
    text-decoration: none;

    overflow: hidden;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.logistics-navigation-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 4px;
    height: 100%;

    background: #4db0ff;
}

.logistics-navigation-card:hover {
    transform: translateY(-4px);
    border-color: rgba(77, 176, 255, 0.32);
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.3);
}

.logistics-navigation-label {
    margin-bottom: 12px;

    color: #4db0ff;

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.logistics-navigation-card h2 {
    margin: 0 0 14px;

    color: #ffffff;
    font-size: 1.55rem;
}

.logistics-navigation-card p {
    max-width: 520px;
    margin: 0 0 24px;

    color: #9ba6b3;
    line-height: 1.65;
}

.logistics-navigation-link {
    margin-top: auto;

    color: #8dcfff;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}


/* ==========================================================
   RESPONSIVE ANPASSUNGEN
========================================================== */

@media (max-width: 1050px) {

    .logistics-filter-panel {
        grid-template-columns: 1fr 1fr;
    }

    .logistics-search-group {
        grid-column: 1 / -1;
    }

    .logistics-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 760px) {

    .logistics-page {
        width: min(100% - 24px, 1400px);
        padding-top: 35px;
    }

    .logistics-filter-panel {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 18px;
    }

    .logistics-search-group {
        grid-column: auto;
    }

    .logistics-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .logistics-card-data {
        grid-template-columns: 1fr;
    }

    .logistics-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .logistics-card-footer .button {
        width: 100%;
        text-align: center;
    }

    .logistics-navigation-panels {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 480px) {

    .logistics-filter-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .logistics-filter-button,
    .logistics-status-button {
        width: 100%;
    }

    .logistics-card-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .logistics-card-content {
        padding: 21px 17px;
    }

    .logistics-navigation-card {
        padding: 24px 21px;
    }
}
/* ==========================================================
   LOGISTICS DETAILS
========================================================== */

.logistics-details-page {
    width: min(1400px, calc(100% - 40px));
    margin: 0 auto;
    padding: 35px 0 70px;
}


/* ==========================================================
   BREADCRUMB
========================================================== */

.logistics-details-navigation {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 24px;

    color: #778492;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.logistics-details-navigation a {
    color: #4db0ff;
    text-decoration: none;

    transition: color 0.2s ease;
}

.logistics-details-navigation a:hover {
    color: #8ed0ff;
}

.logistics-details-navigation strong {
    color: #d8e1ea;
}


/* ==========================================================
   HERO / TRANSPORTKOPF
========================================================== */

.logistics-details-hero {
    margin-bottom: 30px;
    padding: 28px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(
            145deg,
            rgba(19, 32, 45, 0.98),
            rgba(7, 14, 21, 0.98)
        );

    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.28);
}

.logistics-details-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;

    margin-bottom: 22px;
}

.logistics-details-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.logistics-details-type {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 6px 10px;

    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.045);
    color: #c8d1db;

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.logistics-details-id {
    color: #6f7c89;

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.logistics-details-hero h1 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: 0.07em;
}

.logistics-details-summary {
    max-width: 900px;
    margin: 0 0 28px;

    color: #aab5c1;

    font-size: 1rem;
    line-height: 1.7;
}

.logistics-details-hero-data {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.logistics-details-hero-data > div {
    min-width: 0;
    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.18);
}

.logistics-details-hero-data span {
    display: block;
    margin-bottom: 6px;

    color: #778493;

    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.logistics-details-hero-data strong {
    display: block;

    color: #ffffff;

    font-size: 0.9rem;
    line-height: 1.4;

    overflow-wrap: anywhere;
}


/* ==========================================================
   HAUPTLAYOUT
========================================================== */

.logistics-details-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.8fr);
    gap: 25px;
    align-items: start;
}

.logistics-details-main,
.logistics-details-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}


/* ==========================================================
   PANELS
========================================================== */

.logistics-details-panel,
.logistics-details-side-panel {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(
            145deg,
            rgba(17, 29, 41, 0.97),
            rgba(7, 14, 21, 0.97)
        );

    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}

.logistics-details-panel {
    padding: 26px;
}

.logistics-details-side-panel {
    padding: 22px;
}

.logistics-details-panel-header {
    margin-bottom: 22px;
}

.logistics-details-panel-header > span {
    display: block;
    margin-bottom: 7px;

    color: #4db0ff;

    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.logistics-details-panel-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 1.35rem;
    letter-spacing: 0.035em;
}


/* ==========================================================
   TEXTBEREICHE
========================================================== */

.logistics-details-text {
    color: #aab4bf;
    line-height: 1.75;
}

.logistics-details-text p {
    margin: 0 0 16px;
}

.logistics-details-text p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   ROUTE
========================================================== */

.logistics-route-overview {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 18px;
}

.logistics-route-point {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-width: 0;
}

.logistics-route-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 38px;
    height: 38px;

    border: 1px solid rgba(77, 176, 255, 0.4);
    background: rgba(77, 176, 255, 0.1);
    color: #74c5ff;

    font-size: 0.72rem;
    font-weight: 800;
}

.logistics-route-point > div {
    min-width: 0;
}

.logistics-route-point div > span {
    display: block;
    margin-bottom: 5px;

    color: #71808e;

    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.logistics-route-point strong {
    display: block;
    margin-bottom: 5px;

    color: #ffffff;

    font-size: 0.9rem;
    line-height: 1.35;

    overflow-wrap: anywhere;
}

.logistics-route-point small {
    display: block;

    color: #84909d;
    line-height: 1.4;
}

.logistics-route-line {
    width: 45px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(77, 176, 255, 0.2),
            rgba(77, 176, 255, 0.9),
            rgba(77, 176, 255, 0.2)
        );
}


/* ==========================================================
   FRACHTINFORMATIONEN
========================================================== */

.logistics-cargo-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;

    margin-bottom: 20px;
}

.logistics-cargo-details > div {
    min-width: 0;
    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.18);
}

.logistics-cargo-details span {
    display: block;
    margin-bottom: 6px;

    color: #74818e;

    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.logistics-cargo-details strong {
    display: block;

    color: #ffffff;

    font-size: 0.88rem;
    line-height: 1.4;

    overflow-wrap: anywhere;
}

.logistics-cargo-warning {
    padding: 17px 18px;

    border-left: 3px solid #d4a84f;
    background: rgba(212, 168, 79, 0.075);
}

.logistics-cargo-warning strong {
    display: block;
    margin-bottom: 7px;

    color: #e3c16f;

    font-size: 0.68rem;
    letter-spacing: 0.11em;
}

.logistics-cargo-warning p {
    margin: 0;

    color: #aaa18e;
    line-height: 1.6;
}


/* ==========================================================
   LIEFERBEDINGUNGEN
========================================================== */

.logistics-objective-list {
    display: grid;
    gap: 11px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.logistics-objective-list li {
    position: relative;

    padding: 13px 15px 13px 42px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.16);
    color: #c5ced7;

    line-height: 1.5;
}

.logistics-objective-list li::before {
    content: "✓";

    position: absolute;
    top: 50%;
    left: 15px;

    color: #59cf91;

    font-weight: 900;

    transform: translateY(-50%);
}


/* ==========================================================
   KAMPAGNENAUSWIRKUNG
========================================================== */

.logistics-campaign-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;

    margin-bottom: 18px;
}

.logistics-campaign-results > div {
    padding: 15px;

    border: 1px solid rgba(77, 176, 255, 0.16);
    background: rgba(77, 176, 255, 0.055);
}

.logistics-campaign-results span {
    display: block;
    margin-bottom: 6px;

    color: #7a8998;

    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.logistics-campaign-results strong {
    display: block;

    color: #ffffff;

    font-size: 0.9rem;
    line-height: 1.4;
}

.logistics-campaign-effect {
    margin: 0;

    color: #a3afbb;
    line-height: 1.7;
}


/* ==========================================================
   DATENLISTEN DER SIDEBAR
========================================================== */

.logistics-details-data-list {
    display: grid;
    gap: 0;

    margin: 0;
}

.logistics-details-data-list > div {
    display: grid;
    grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
    gap: 15px;

    padding: 12px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.logistics-details-data-list > div:first-child {
    padding-top: 0;
}

.logistics-details-data-list > div:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.logistics-details-data-list dt {
    color: #74818e;

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.logistics-details-data-list dd {
    min-width: 0;
    margin: 0;

    color: #dbe3eb;

    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.45;

    overflow-wrap: anywhere;
}


/* ==========================================================
   EXTERNE SCHNITTSTELLE
========================================================== */

.logistics-interface-note {
    margin: 18px 0 0;
    padding: 13px 14px;

    border-left: 3px solid #4db0ff;
    background: rgba(77, 176, 255, 0.06);
    color: #8f9ba8;

    font-size: 0.78rem;
    line-height: 1.6;
}


/* ==========================================================
   FAHRER / PILOT
========================================================== */

.logistics-crew-status {
    margin-bottom: 18px;
    padding: 15px;

    border: 1px solid rgba(255, 255, 255, 0.075);
    background: rgba(0, 0, 0, 0.18);
}

.logistics-crew-status span {
    display: block;
    margin-bottom: 5px;

    color: #778493;

    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.logistics-crew-status strong {
    display: block;

    color: #ffffff;

    font-size: 1rem;
}


/* ==========================================================
   TRANSPORTAKTIONEN
========================================================== */

.logistics-detail-actions {
    display: grid;
    gap: 10px;
}

.logistics-detail-actions .button {
    width: 100%;
    min-height: 42px;
    text-align: center;
}

.logistics-detail-start-button {
    border: 1px solid rgba(71, 195, 124, 0.45);
    background: rgba(71, 195, 124, 0.12);
    color: #70dda0;
}

.logistics-detail-start-button:hover:not(:disabled) {
    background: rgba(71, 195, 124, 0.2);
}

.logistics-detail-arrival-button {
    border: 1px solid rgba(212, 168, 79, 0.45);
    background: rgba(212, 168, 79, 0.11);
    color: #e7c56f;
}

.logistics-detail-arrival-button:hover:not(:disabled) {
    background: rgba(212, 168, 79, 0.19);
}

.logistics-detail-complete-button {
    border: 1px solid rgba(90, 205, 145, 0.48);
    background: rgba(90, 205, 145, 0.13);
    color: #7be2aa;
}

.logistics-detail-complete-button:hover:not(:disabled) {
    background: rgba(90, 205, 145, 0.21);
}

.logistics-detail-leave-button {
    border: 1px solid rgba(214, 99, 99, 0.4);
    background: rgba(214, 99, 99, 0.08);
    color: #e58c8c;
}

.logistics-detail-leave-button:hover:not(:disabled) {
    background: rgba(214, 99, 99, 0.16);
}

.logistics-detail-actions .button:disabled {
    border-color: rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.025);
    color: #56616c;

    cursor: not-allowed;
    opacity: 0.75;
}

.logistics-action-note {
    margin: 16px 0 0;

    color: #798694;

    font-size: 0.76rem;
    line-height: 1.55;
}


/* ==========================================================
   STATUSMELDUNGEN
========================================================== */

.logistics-detail-message {
    margin-top: 15px;
    padding: 12px 14px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    font-size: 0.78rem;
    line-height: 1.5;
}

.logistics-detail-message-success {
    border-color: rgba(73, 199, 126, 0.35);
    background: rgba(73, 199, 126, 0.09);
    color: #79dca4;
}

.logistics-detail-message-info {
    border-color: rgba(77, 176, 255, 0.35);
    background: rgba(77, 176, 255, 0.09);
    color: #84ceff;
}

.logistics-detail-message-warning {
    border-color: rgba(212, 168, 79, 0.35);
    background: rgba(212, 168, 79, 0.09);
    color: #dfc071;
}


/* ==========================================================
   ADMINISTRATION
========================================================== */

.logistics-admin-shortcuts {
    display: grid;
    gap: 10px;
}

.logistics-admin-shortcuts .logistics-details-panel-header {
    margin-bottom: 10px;
}

.logistics-detail-admin-button,
.logistics-detail-back-button {
    width: 100%;
    text-align: center;
}

.logistics-detail-admin-button {
    border: 1px solid rgba(77, 176, 255, 0.38);
    background: rgba(77, 176, 255, 0.1);
    color: #80caff;
}

.logistics-detail-admin-button:hover {
    background: rgba(77, 176, 255, 0.18);
}

.logistics-detail-back-button {
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(255, 255, 255, 0.035);
    color: #aab5bf;
}

.logistics-detail-back-button:hover {
    border-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}


/* ==========================================================
   ZUSÄTZLICHER STATUS: ABGESCHLOSSEN
========================================================== */

.logistics-status-completed {
    border-color: rgba(70, 199, 126, 0.48);
    background: rgba(70, 199, 126, 0.12);
    color: #69db9a;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1120px) {

    .logistics-details-layout {
        grid-template-columns: 1fr;
    }

    .logistics-details-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .logistics-action-panel,
    .logistics-admin-shortcuts {
        height: 100%;
    }
}


@media (max-width: 900px) {

    .logistics-details-hero-data {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .logistics-details-hero-data > div:last-child {
        grid-column: 1 / -1;
    }

    .logistics-route-overview {
        grid-template-columns: 1fr;
    }

    .logistics-route-line {
        width: 1px;
        height: 28px;
        margin-left: 18px;

        background:
            linear-gradient(
                180deg,
                rgba(77, 176, 255, 0.2),
                rgba(77, 176, 255, 0.9),
                rgba(77, 176, 255, 0.2)
            );
    }

    .logistics-cargo-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 760px) {

    .logistics-details-page {
        width: min(100% - 24px, 1400px);
        padding-top: 25px;
    }

    .logistics-details-hero {
        padding: 22px 18px;
    }

    .logistics-details-hero-top {
        flex-direction: column;
    }

    .logistics-details-panel,
    .logistics-details-side-panel {
        padding: 20px 17px;
    }

    .logistics-details-sidebar {
        grid-template-columns: 1fr;
    }

    .logistics-campaign-results {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 540px) {

    .logistics-details-hero-data {
        grid-template-columns: 1fr;
    }

    .logistics-details-hero-data > div:last-child {
        grid-column: auto;
    }

    .logistics-cargo-details {
        grid-template-columns: 1fr;
    }

    .logistics-details-data-list > div {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .logistics-details-hero h1 {
        font-size: 1.8rem;
    }

    .logistics-details-badges {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* ==========================================================
   LOGISTICS ADMINISTRATION
========================================================== */

.logistics-admin-page {
    width: min(1500px, calc(100% - 40px));
    margin: 0 auto;
    padding: 50px 0 75px;
}


/* ==========================================================
   SEITENKOPF
========================================================== */

.logistics-admin-header {
    margin-bottom: 35px;
    text-align: center;
}

.logistics-admin-header h1 {
    margin: 8px 0 12px;

    color: #ffffff;

    font-size: clamp(2rem, 4vw, 3.1rem);
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.logistics-admin-header > p:last-child {
    max-width: 820px;
    margin: 0 auto;

    color: #aab5c1;
    line-height: 1.7;
}


/* ==========================================================
   STATUSÜBERSICHT
========================================================== */

.logistics-admin-statistics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 15px;

    margin-bottom: 35px;
}

.logistics-admin-stat-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 145px;
    padding: 20px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(
            145deg,
            rgba(18, 30, 42, 0.98),
            rgba(7, 14, 21, 0.98)
        );

    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

.logistics-admin-stat-label {
    color: #8b97a4;

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.logistics-admin-stat-card strong {
    margin: 13px 0 7px;

    color: #ffffff;

    font-size: 2rem;
    line-height: 1;
}

.logistics-admin-stat-note {
    margin-top: auto;

    color: #687582;

    font-size: 0.72rem;
    line-height: 1.4;
}


/* ==========================================================
   WERKZEUGLEISTE
========================================================== */

.logistics-admin-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 25px;

    margin-bottom: 22px;
    padding: 20px 22px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 19, 28, 0.92);
}

.logistics-admin-toolbar h2 {
    margin: 5px 0 0;

    color: #ffffff;

    font-size: 1.6rem;
}

.logistics-admin-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.logistics-admin-back-button,
.logistics-admin-import-button {
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(255, 255, 255, 0.035);
    color: #b4bec8;
}

.logistics-admin-back-button:hover,
.logistics-admin-import-button:hover {
    border-color: rgba(77, 176, 255, 0.35);
    background: rgba(77, 176, 255, 0.08);
    color: #ffffff;
}


/* ==========================================================
   FILTER
========================================================== */

.logistics-admin-filter-panel {
    display: grid;
    grid-template-columns:
        minmax(150px, 0.65fr)
        minmax(170px, 0.75fr)
        minmax(170px, 0.75fr)
        minmax(280px, 1.85fr);
    gap: 15px;

    margin-bottom: 24px;
    padding: 18px 20px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(
            145deg,
            rgba(16, 27, 38, 0.96),
            rgba(7, 14, 21, 0.96)
        );
}

.logistics-admin-filter-group,
.logistics-admin-search-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.logistics-admin-filter-group label,
.logistics-admin-search-group label {
    color: #7f8c99;

    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.logistics-admin-filter-group select,
.logistics-admin-search-group input {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(0, 0, 0, 0.23);
    color: #ffffff;

    font: inherit;
    outline: none;
}

.logistics-admin-filter-group select:focus,
.logistics-admin-search-group input:focus {
    border-color: #4db0ff;
    box-shadow: 0 0 0 3px rgba(77, 176, 255, 0.1);
}

.logistics-admin-search-group input::placeholder {
    color: #66727e;
}


/* ==========================================================
   ADMIN-LAYOUT
========================================================== */

.logistics-admin-layout {
    display: grid;
    grid-template-columns: minmax(310px, 0.72fr) minmax(0, 1.85fr);
    gap: 24px;
    align-items: start;
}


/* ==========================================================
   TRANSPORTLISTE
========================================================== */

.logistics-admin-list-panel {
    position: sticky;
    top: 20px;

    max-height: calc(100vh - 40px);

    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(
            145deg,
            rgba(16, 28, 39, 0.98),
            rgba(7, 14, 21, 0.98)
        );

    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

.logistics-admin-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;

    padding: 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.14);
}

.logistics-admin-panel-label {
    display: block;
    margin-bottom: 6px;

    color: #4db0ff;

    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.logistics-admin-panel-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 1.25rem;
}

.logistics-admin-list-count {
    flex-shrink: 0;

    padding: 7px 9px;

    border: 1px solid rgba(77, 176, 255, 0.22);
    background: rgba(77, 176, 255, 0.07);
    color: #8dceff;

    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.logistics-admin-list-count span {
    margin-right: 3px;
    color: #ffffff;
}

.logistics-admin-list {
    display: grid;

    max-height: calc(100vh - 155px);
    overflow-y: auto;
}

.logistics-admin-list-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;

    width: 100%;
    padding: 16px 17px;

    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
    border-left: 3px solid transparent;
    background: transparent;
    color: inherit;

    font-family: inherit;
    text-align: left;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.logistics-admin-list-item:hover {
    background: rgba(255, 255, 255, 0.035);
}

.logistics-admin-list-item.active {
    border-left-color: #4db0ff;
    background: rgba(77, 176, 255, 0.085);
}

.logistics-admin-list-item[hidden] {
    display: none;
}

.logistics-admin-list-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.logistics-admin-list-item > strong {
    color: #ffffff;

    font-size: 0.9rem;
    line-height: 1.35;
    letter-spacing: 0.035em;
}

.logistics-admin-list-meta {
    color: #7f8c99;

    font-size: 0.72rem;
    line-height: 1.45;
}

.logistics-admin-sync-state {
    align-self: flex-start;

    padding: 5px 8px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.sync-state-local {
    background: rgba(255, 255, 255, 0.04);
    color: #929daa;
}

.sync-state-received {
    border-color: rgba(210, 165, 71, 0.35);
    background: rgba(210, 165, 71, 0.09);
    color: #e1be6c;
}

.sync-state-active {
    border-color: rgba(66, 196, 123, 0.38);
    background: rgba(66, 196, 123, 0.1);
    color: #70dda0;
}

.sync-state-sent {
    border-color: rgba(77, 176, 255, 0.38);
    background: rgba(77, 176, 255, 0.1);
    color: #82ccff;
}

.sync-state-completed {
    border-color: rgba(66, 196, 123, 0.38);
    background: rgba(66, 196, 123, 0.1);
    color: #70dda0;
}

.sync-state-error {
    border-color: rgba(213, 89, 89, 0.38);
    background: rgba(213, 89, 89, 0.1);
    color: #e58b8b;
}

.logistics-admin-empty-list {
    padding: 30px 18px;
    text-align: center;
}

.logistics-admin-empty-list strong {
    display: block;
    margin-bottom: 8px;

    color: #ffffff;
}

.logistics-admin-empty-list p {
    margin: 0;

    color: #7d8996;
    font-size: 0.78rem;
}


/* ==========================================================
   EDITORBEREICH
========================================================== */

.logistics-editor-panel {
    min-width: 0;

    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(
            145deg,
            rgba(16, 28, 39, 0.98),
            rgba(7, 14, 21, 0.98)
        );

    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.26);
}

#logistics-editor-form {
    min-width: 0;
}

.logistics-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;

    padding: 23px 25px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.14);
}

.logistics-editor-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 1.55rem;
}

.logistics-editor-id {
    color: #75818d;

    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


/* ==========================================================
   FIELDSETS
========================================================== */

.logistics-editor-section {
    min-width: 0;
    margin: 0;
    padding: 26px 25px;

    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.logistics-editor-section:last-of-type {
    border-bottom: none;
}

.logistics-editor-section legend {
    width: 100%;
    margin: 0 0 20px;
    padding: 0;

    color: #ffffff;

    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.035em;
}

.logistics-editor-section legend::after {
    content: "";

    display: block;

    width: 45px;
    height: 2px;
    margin-top: 9px;

    background: #4db0ff;
}

.logistics-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.logistics-editor-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 8px;
}

.logistics-editor-field-wide {
    grid-column: 1 / -1;
}

.logistics-editor-field label {
    color: #8b97a3;

    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.logistics-editor-field input,
.logistics-editor-field select,
.logistics-editor-field textarea {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(0, 0, 0, 0.22);
    color: #ffffff;

    font: inherit;
    line-height: 1.5;

    outline: none;
    resize: vertical;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.logistics-editor-field input,
.logistics-editor-field select {
    min-height: 42px;
}

.logistics-editor-field input::placeholder,
.logistics-editor-field textarea::placeholder {
    color: #606d79;
}

.logistics-editor-field input:focus,
.logistics-editor-field select:focus,
.logistics-editor-field textarea:focus {
    border-color: #4db0ff;
    background: rgba(5, 15, 24, 0.88);
    box-shadow: 0 0 0 3px rgba(77, 176, 255, 0.1);
}

.logistics-editor-field option {
    background: #111c27;
    color: #ffffff;
}


/* ==========================================================
   SCHNITTSTELLENBEREICH
========================================================== */

.logistics-interface-section {
    background:
        linear-gradient(
            135deg,
            rgba(77, 176, 255, 0.035),
            rgba(0, 0, 0, 0)
        );
}

.logistics-interface-section legend::after {
    background:
        linear-gradient(
            90deg,
            #4db0ff,
            rgba(77, 176, 255, 0.15)
        );
}

.logistics-interface-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 20px;
}

.logistics-interface-receive-button,
.logistics-interface-send-button,
.logistics-interface-sync-button,
.logistics-interface-export-button,
.logistics-interface-txt-button {
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(255, 255, 255, 0.035);
    color: #b6c0ca;
}

.logistics-interface-receive-button:hover {
    border-color: rgba(209, 169, 74, 0.45);
    background: rgba(209, 169, 74, 0.1);
    color: #e5c46f;
}

.logistics-interface-send-button:hover {
    border-color: rgba(77, 176, 255, 0.45);
    background: rgba(77, 176, 255, 0.1);
    color: #84ceff;
}

.logistics-interface-sync-button:hover {
    border-color: rgba(77, 176, 255, 0.45);
    background: rgba(77, 176, 255, 0.1);
    color: #84ceff;
}

.logistics-interface-export-button:hover,
.logistics-interface-txt-button:hover {
    border-color: rgba(82, 205, 143, 0.45);
    background: rgba(82, 205, 143, 0.1);
    color: #7de0aa;
}


/* ==========================================================
   EDITOR-AKTIONEN
========================================================== */

.logistics-editor-actions {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding: 22px 25px;

    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.16);
}

.logistics-editor-actions-primary,
.logistics-editor-actions-danger {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.logistics-admin-publish-button {
    border: 1px solid rgba(70, 199, 126, 0.42);
    background: rgba(70, 199, 126, 0.1);
    color: #71dda1;
}

.logistics-admin-publish-button:hover {
    background: rgba(70, 199, 126, 0.18);
}

.logistics-admin-preview-button {
    border: 1px solid rgba(77, 176, 255, 0.38);
    background: rgba(77, 176, 255, 0.09);
    color: #83cdff;
}

.logistics-admin-preview-button:hover {
    background: rgba(77, 176, 255, 0.17);
}

.logistics-admin-complete-button {
    border: 1px solid rgba(82, 205, 143, 0.42);
    background: rgba(82, 205, 143, 0.1);
    color: #79dfa7;
}

.logistics-admin-complete-button:hover {
    background: rgba(82, 205, 143, 0.18);
}

.logistics-admin-delete-button {
    border: 1px solid rgba(214, 89, 89, 0.4);
    background: rgba(214, 89, 89, 0.08);
    color: #e58b8b;
}

.logistics-admin-delete-button:hover {
    background: rgba(214, 89, 89, 0.16);
}


/* ==========================================================
   STATUSMELDUNGEN
========================================================== */

.logistics-admin-message {
    margin: 0 25px 25px;
    padding: 13px 15px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    font-size: 0.79rem;
    line-height: 1.55;
}

.logistics-admin-message-success {
    border-color: rgba(70, 199, 126, 0.35);
    background: rgba(70, 199, 126, 0.09);
    color: #75dca3;
}

.logistics-admin-message-info {
    border-color: rgba(77, 176, 255, 0.35);
    background: rgba(77, 176, 255, 0.09);
    color: #83cdff;
}

.logistics-admin-message-warning {
    border-color: rgba(209, 169, 74, 0.35);
    background: rgba(209, 169, 74, 0.09);
    color: #dfbf70;
}


/* ==========================================================
   WEITERE LOGISTIKSTATUS
========================================================== */

.logistics-status-draft {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: #9ba6b1;
}

.logistics-status-arrived {
    border-color: rgba(91, 190, 227, 0.45);
    background: rgba(91, 190, 227, 0.11);
    color: #79d1ee;
}

.logistics-status-partial {
    border-color: rgba(209, 169, 74, 0.45);
    background: rgba(209, 169, 74, 0.11);
    color: #e4c36e;
}

.logistics-status-failed {
    border-color: rgba(218, 86, 86, 0.45);
    background: rgba(218, 86, 86, 0.11);
    color: #e78686;
}

.logistics-status-cancelled {
    border-color: rgba(145, 120, 160, 0.42);
    background: rgba(145, 120, 160, 0.1);
    color: #c6a9d4;
}


/* ==========================================================
   SCROLLBAR TRANSPORTLISTE
========================================================== */

.logistics-admin-list::-webkit-scrollbar {
    width: 8px;
}

.logistics-admin-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.18);
}

.logistics-admin-list::-webkit-scrollbar-thumb {
    background: rgba(77, 176, 255, 0.25);
}

.logistics-admin-list::-webkit-scrollbar-thumb:hover {
    background: rgba(77, 176, 255, 0.42);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1250px) {

    .logistics-admin-statistics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .logistics-admin-filter-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .logistics-admin-search-group {
        grid-column: 1 / -1;
    }

    .logistics-admin-layout {
        grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.5fr);
    }
}


@media (max-width: 1050px) {

    .logistics-admin-layout {
        grid-template-columns: 1fr;
    }

    .logistics-admin-list-panel {
        position: static;
        max-height: none;
    }

    .logistics-admin-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
    }

    .logistics-admin-list-item {
        border-right: 1px solid rgba(255, 255, 255, 0.065);
    }
}


@media (max-width: 850px) {

    .logistics-admin-statistics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .logistics-admin-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .logistics-admin-toolbar-actions {
        justify-content: flex-start;
    }

    .logistics-admin-filter-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .logistics-admin-search-group {
        grid-column: 1 / -1;
    }

    .logistics-editor-grid {
        grid-template-columns: 1fr;
    }

    .logistics-editor-field-wide {
        grid-column: auto;
    }

    .logistics-editor-actions {
        flex-direction: column;
    }
}


@media (max-width: 650px) {

    .logistics-admin-page {
        width: min(100% - 24px, 1500px);
        padding-top: 35px;
    }

    .logistics-admin-statistics {
        grid-template-columns: 1fr;
    }

    .logistics-admin-filter-panel {
        grid-template-columns: 1fr;
    }

    .logistics-admin-search-group {
        grid-column: auto;
    }

    .logistics-admin-list {
        grid-template-columns: 1fr;
    }

    .logistics-editor-header {
        flex-direction: column;
    }

    .logistics-editor-section {
        padding: 22px 17px;
    }

    .logistics-editor-actions {
        padding: 20px 17px;
    }

    .logistics-editor-actions-primary,
    .logistics-editor-actions-danger,
    .logistics-interface-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .logistics-editor-actions .button,
    .logistics-interface-actions .button {
        width: 100%;
        text-align: center;
    }

    .logistics-admin-message {
        margin: 0 17px 20px;
    }
}


@media (max-width: 460px) {

    .logistics-admin-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .logistics-admin-toolbar-actions .button {
        width: 100%;
        text-align: center;
    }

    .logistics-admin-panel-header {
        flex-direction: column;
    }
}
/* ==========================================================
   LOGISTICS ARCHIVE
========================================================== */

.logistics-archive-page {
    width: min(1450px, calc(100% - 40px));
    margin: 0 auto;
    padding: 50px 0 75px;
}


/* ==========================================================
   SEITENKOPF
========================================================== */

.logistics-archive-header {
    margin-bottom: 35px;
    text-align: center;
}

.logistics-archive-header h1 {
    margin: 8px 0 12px;

    color: #ffffff;

    font-size: clamp(2rem, 4vw, 3.1rem);
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.logistics-archive-header > p:last-child {
    max-width: 820px;
    margin: 0 auto;

    color: #aab5c1;
    line-height: 1.7;
}


/* ==========================================================
   STATISTIK
========================================================== */

.logistics-archive-statistics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 15px;

    margin-bottom: 35px;
}

.logistics-archive-stat-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 145px;
    padding: 20px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(
            145deg,
            rgba(18, 30, 42, 0.98),
            rgba(7, 14, 21, 0.98)
        );

    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

.logistics-archive-stat-card span {
    color: #8b97a4;

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.logistics-archive-stat-card strong {
    margin: 13px 0 7px;

    color: #ffffff;

    font-size: 2rem;
    line-height: 1;
}

.logistics-archive-stat-card small {
    margin-top: auto;

    color: #687582;

    font-size: 0.72rem;
    line-height: 1.4;
}

.logistics-archive-stat-success {
    border-color: rgba(70, 199, 126, 0.24);
}

.logistics-archive-stat-success strong {
    color: #71dda1;
}

.logistics-archive-stat-partial {
    border-color: rgba(209, 169, 74, 0.26);
}

.logistics-archive-stat-partial strong {
    color: #e3c36f;
}

.logistics-archive-stat-delayed {
    border-color: rgba(91, 190, 227, 0.25);
}

.logistics-archive-stat-delayed strong {
    color: #80d3ef;
}

.logistics-archive-stat-failed {
    border-color: rgba(218, 86, 86, 0.25);
}

.logistics-archive-stat-failed strong {
    color: #e78787;
}


/* ==========================================================
   WERKZEUGLEISTE
========================================================== */

.logistics-archive-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 25px;

    margin-bottom: 22px;
    padding: 20px 22px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 19, 28, 0.92);
}

.logistics-archive-toolbar h2 {
    margin: 5px 0 0;

    color: #ffffff;

    font-size: 1.6rem;
}


/* ==========================================================
   FILTER
========================================================== */

.logistics-archive-filter-panel {
    display: grid;
    grid-template-columns:
        minmax(140px, 0.65fr)
        minmax(150px, 0.75fr)
        minmax(150px, 0.75fr)
        minmax(120px, 0.55fr)
        minmax(120px, 0.55fr)
        minmax(280px, 1.6fr);
    gap: 15px;

    margin-bottom: 18px;
    padding: 18px 20px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(
            145deg,
            rgba(16, 27, 38, 0.96),
            rgba(7, 14, 21, 0.96)
        );
}

.logistics-archive-filter-group,
.logistics-archive-search-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.logistics-archive-filter-group label,
.logistics-archive-search-group label {
    color: #7f8c99;

    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.logistics-archive-filter-group select,
.logistics-archive-search-group input {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(0, 0, 0, 0.23);
    color: #ffffff;

    font: inherit;
    outline: none;
}

.logistics-archive-filter-group select:focus,
.logistics-archive-search-group input:focus {
    border-color: #4db0ff;
    box-shadow: 0 0 0 3px rgba(77, 176, 255, 0.1);
}

.logistics-archive-filter-group option {
    background: #111c27;
    color: #ffffff;
}

.logistics-archive-search-group input::placeholder {
    color: #66727e;
}


/* ==========================================================
   ERGEBNISLEISTE
========================================================== */

.logistics-archive-result-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;

    margin-bottom: 18px;

    color: #74808d;

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.logistics-archive-result-bar strong {
    min-width: 32px;
    padding: 6px 9px;

    border: 1px solid rgba(77, 176, 255, 0.24);
    background: rgba(77, 176, 255, 0.08);
    color: #ffffff;

    text-align: center;
}


/* ==========================================================
   ARCHIVLISTE
========================================================== */

.logistics-archive-list {
    display: grid;
    gap: 22px;
}

.logistics-archive-entry {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(
            145deg,
            rgba(17, 29, 41, 0.98),
            rgba(7, 14, 21, 0.98)
        );

    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.23);
    overflow: hidden;
}

.logistics-archive-entry[hidden] {
    display: none;
}

.logistics-archive-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    padding: 14px 18px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.16);
}

.logistics-archive-entry-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.logistics-archive-entry-header time {
    flex-shrink: 0;

    color: #7f8b97;

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
}

.logistics-archive-result,
.logistics-archive-source {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 28px;
    padding: 6px 10px;

    border: 1px solid transparent;

    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


/* Ergebnisfarben */

.logistics-archive-result-success {
    border-color: rgba(70, 199, 126, 0.45);
    background: rgba(70, 199, 126, 0.11);
    color: #71dda1;
}

.logistics-archive-result-partial {
    border-color: rgba(209, 169, 74, 0.45);
    background: rgba(209, 169, 74, 0.11);
    color: #e4c36e;
}

.logistics-archive-result-delayed {
    border-color: rgba(91, 190, 227, 0.45);
    background: rgba(91, 190, 227, 0.11);
    color: #7fd1ed;
}

.logistics-archive-result-failed {
    border-color: rgba(218, 86, 86, 0.45);
    background: rgba(218, 86, 86, 0.11);
    color: #e78686;
}

.logistics-archive-result-cancelled {
    border-color: rgba(145, 120, 160, 0.42);
    background: rgba(145, 120, 160, 0.1);
    color: #c6a9d4;
}


/* Quellenfarben */

.logistics-archive-source-local {
    border-color: rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.04);
    color: #9ca7b2;
}

.logistics-archive-source-external {
    border-color: rgba(77, 176, 255, 0.4);
    background: rgba(77, 176, 255, 0.1);
    color: #82ccff;
}


/* ==========================================================
   ARCHIVEINTRAG – INHALT
========================================================== */

.logistics-archive-entry-body {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(360px, 0.9fr);
    gap: 28px;

    padding: 24px 22px;
}

.logistics-archive-entry-main {
    min-width: 0;
}

.logistics-archive-entry-main h2 {
    margin: 0 0 9px;

    color: #ffffff;

    font-size: 1.45rem;
    letter-spacing: 0.045em;
}

.logistics-archive-route {
    margin: 0 0 14px;

    color: #d4dde6;

    font-size: 0.9rem;
    font-weight: 700;
}

.logistics-archive-summary {
    max-width: 780px;
    margin: 0;

    color: #9eabb7;
    line-height: 1.68;
}


/* ==========================================================
   ARCHIVDATEN
========================================================== */

.logistics-archive-entry-data {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;

    margin: 0;
}

.logistics-archive-entry-data > div {
    min-width: 0;
    padding: 12px 13px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.17);
}

.logistics-archive-entry-data dt {
    margin-bottom: 5px;

    color: #74818e;

    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.logistics-archive-entry-data dd {
    margin: 0;

    color: #ffffff;

    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;

    overflow-wrap: anywhere;
}


/* ==========================================================
   KAMPAGNENAUSWIRKUNG
========================================================== */

.logistics-archive-impact {
    margin: 0 22px 22px;
    padding: 16px 18px;

    border-left: 3px solid #4db0ff;
    background: rgba(77, 176, 255, 0.055);
}

.logistics-archive-impact span {
    display: block;
    margin-bottom: 7px;

    color: #4db0ff;

    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.logistics-archive-impact p {
    margin: 0;

    color: #a3afbb;
    line-height: 1.62;
}


/* ==========================================================
   ARCHIVFUSS
========================================================== */

.logistics-archive-entry-footer {
    display: flex;
    justify-content: flex-end;

    padding: 15px 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.17);
}

.logistics-archive-report-button {
    border: 1px solid rgba(77, 176, 255, 0.35);
    background: rgba(77, 176, 255, 0.08);
    color: #82ccff;
}

.logistics-archive-report-button:hover {
    background: rgba(77, 176, 255, 0.16);
    color: #ffffff;
}


/* ==========================================================
   TRANSPORTBERICHT
========================================================== */

.logistics-archive-report {
    margin: 0 20px 20px;
    padding: 20px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(
            145deg,
            rgba(11, 21, 30, 0.98),
            rgba(5, 11, 17, 0.98)
        );
}

.logistics-archive-report h3 {
    margin: 0 0 14px;

    color: #ffffff;

    font-size: 1rem;
    letter-spacing: 0.045em;
}

.logistics-archive-report p {
    margin: 0 0 13px;

    color: #9ca8b4;
    line-height: 1.68;
}

.logistics-archive-report p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   LEERER ZUSTAND
========================================================== */

.logistics-archive-empty-state {
    margin-top: 22px;
    padding: 45px 25px;

    border: 1px dashed rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.025);

    text-align: center;
}

.logistics-archive-empty-state h2 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 1.2rem;
    letter-spacing: 0.07em;
}

.logistics-archive-empty-state p {
    margin: 0;

    color: #84909c;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1250px) {

    .logistics-archive-statistics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .logistics-archive-filter-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .logistics-archive-search-group {
        grid-column: 1 / -1;
    }
}


@media (max-width: 980px) {

    .logistics-archive-entry-body {
        grid-template-columns: 1fr;
    }

    .logistics-archive-entry-data {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 780px) {

    .logistics-archive-page {
        width: min(100% - 24px, 1450px);
        padding-top: 35px;
    }

    .logistics-archive-statistics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .logistics-archive-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .logistics-archive-filter-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .logistics-archive-search-group {
        grid-column: 1 / -1;
    }

    .logistics-archive-entry-data {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 560px) {

    .logistics-archive-statistics {
        grid-template-columns: 1fr;
    }

    .logistics-archive-filter-panel {
        grid-template-columns: 1fr;
    }

    .logistics-archive-search-group {
        grid-column: auto;
    }

    .logistics-archive-entry-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .logistics-archive-entry-body {
        padding: 20px 17px;
    }

    .logistics-archive-entry-data {
        grid-template-columns: 1fr;
    }

    .logistics-archive-impact {
        margin: 0 17px 17px;
    }

    .logistics-archive-entry-footer {
        justify-content: stretch;
        padding: 15px 17px;
    }

    .logistics-archive-report-button {
        width: 100%;
        text-align: center;
    }

    .logistics-archive-report {
        margin: 0 17px 17px;
        padding: 17px;
    }
}
/* =========================================================
   LOGIN
   ========================================================= */

.login-page {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            rgba(5, 10, 18, 0.88),
            rgba(5, 10, 18, 0.96)
        ),
        url("images/campaign_map.jpg") center / cover fixed no-repeat;
}

.login-main {
    flex: 1;

    display: flex;
    align-items: center;

    padding: 70px 30px;
}

.login-section {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);

    border: 1px solid rgba(95, 173, 255, 0.24);

    background: rgba(8, 15, 25, 0.94);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.login-panel {
    padding: 55px 60px;
}

.login-panel-header {
    margin-bottom: 35px;
}

.login-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: #5fafff;

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.login-panel-header h1 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1;
    letter-spacing: 0.06em;
}

.login-panel-header p {
    max-width: 560px;

    margin: 0;

    color: #9eabb8;

    font-size: 1rem;
    line-height: 1.65;
}

.login-form {
    display: grid;
    gap: 22px;
}

.login-form .form-group {
    display: grid;
    gap: 9px;
}

.login-form .form-group label {
    color: #dce7f2;

    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-form input[type="text"],
.login-form input[type="email"],
.login-form input[type="password"] {
    width: 100%;
    min-height: 52px;

    padding: 0 16px;

    border: 1px solid rgba(134, 165, 196, 0.3);
    border-radius: 2px;

    outline: none;

    background: rgba(3, 8, 14, 0.8);

    color: #ffffff;

    font-family: inherit;
    font-size: 1rem;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.login-form input::placeholder {
    color: #697786;
}

.login-form input:hover {
    border-color: rgba(95, 175, 255, 0.55);
}

.login-form input:focus {
    border-color: #5fafff;

    background: rgba(6, 13, 22, 0.95);

    box-shadow:
        0 0 0 3px rgba(95, 175, 255, 0.12),
        0 0 18px rgba(95, 175, 255, 0.08);
}

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 105px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;

    min-width: 88px;
    min-height: 36px;

    padding: 0 10px;

    border: 1px solid rgba(95, 175, 255, 0.3);
    border-radius: 2px;

    background: rgba(31, 81, 130, 0.25);

    color: #79bcff;

    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.password-toggle:hover {
    border-color: #5fafff;

    background: rgba(41, 112, 180, 0.4);

    color: #ffffff;
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-top: -4px;
}

.login-options .check-line {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #aeb9c5;

    font-size: 0.86rem;

    cursor: pointer;
}

.login-options .check-line input {
    width: 17px;
    height: 17px;

    accent-color: #368ddf;
}

.login-help-link {
    color: #6eb7ff;

    font-size: 0.86rem;
    text-decoration: none;
}

.login-help-link:hover {
    color: #ffffff;

    text-decoration: underline;
}

.login-submit {
    width: 100%;
    min-height: 54px;

    margin-top: 5px;

    font-size: 0.83rem;
    letter-spacing: 0.14em;
}

.login-message {
    margin-top: 22px;
    padding: 15px 17px;

    border-left: 3px solid #5fafff;

    color: #cbd9e8;

    font-size: 0.88rem;
    line-height: 1.55;
}

.login-message-info {
    background: rgba(36, 103, 166, 0.16);
}

.login-message-error {
    border-left-color: #db5555;

    background: rgba(150, 38, 38, 0.16);

    color: #ffd1d1;
}

.login-message-success {
    border-left-color: #46bb75;

    background: rgba(31, 128, 70, 0.16);

    color: #c8f5d9;
}
.login-message-warning {
    border-left: 4px solid #d7a147;

    background: rgba(145, 100, 31, 0.18);

    color: #f1d69b;
}

.login-register {
    margin-top: 35px;
    padding-top: 27px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border-top: 1px solid rgba(134, 165, 196, 0.16);
}

.login-register > span {
    color: #96a4b2;

    font-size: 0.9rem;
}

.login-register .button {
    white-space: nowrap;
}

.login-security {
    position: relative;

    padding: 55px 45px;

    overflow: hidden;

    border-left: 1px solid rgba(95, 173, 255, 0.2);

    background:
        linear-gradient(
            145deg,
            rgba(28, 71, 111, 0.33),
            rgba(5, 11, 19, 0.86)
        );
}

.login-security::before {
    content: "";

    position: absolute;
    top: -120px;
    right: -120px;

    width: 300px;
    height: 300px;

    border: 1px solid rgba(95, 175, 255, 0.11);
    border-radius: 50%;
}

.login-security::after {
    content: "";

    position: absolute;
    right: 45px;
    bottom: 45px;

    width: 90px;
    height: 90px;

    border-right: 1px solid rgba(95, 175, 255, 0.14);
    border-bottom: 1px solid rgba(95, 175, 255, 0.14);
}

.login-security > * {
    position: relative;
    z-index: 1;
}

.login-security-label {
    display: block;

    margin-bottom: 20px;

    color: #69b6ff;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.login-security h2 {
    margin: 0 0 18px;

    color: #ffffff;

    font-size: 1.65rem;
    line-height: 1.25;
}

.login-security > p {
    margin: 0 0 28px;

    color: #a8b6c3;

    font-size: 0.94rem;
    line-height: 1.65;
}

.login-security-status {
    margin-bottom: 28px;
    padding: 15px;

    display: flex;
    align-items: center;
    gap: 13px;

    border: 1px solid rgba(71, 200, 121, 0.22);

    background: rgba(37, 126, 72, 0.11);
}

.status-indicator {
    width: 10px;
    height: 10px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #48d17c;

    box-shadow: 0 0 12px rgba(72, 209, 124, 0.75);
}

.login-security-status div {
    display: grid;
    gap: 3px;
}

.login-security-status strong {
    color: #c8f6da;

    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.login-security-status span:not(.status-indicator) {
    color: #89a999;

    font-size: 0.78rem;
}

.login-security-list {
    margin: 0;
    padding: 0;

    list-style: none;

    display: grid;
    gap: 13px;
}

.login-security-list li {
    position: relative;

    padding-left: 22px;

    color: #bdc9d4;

    font-size: 0.88rem;
    line-height: 1.45;
}

.login-security-list li::before {
    content: "";

    position: absolute;
    top: 0.55em;
    left: 0;

    width: 8px;
    height: 2px;

    background: #5fafff;
}

.login-classification {
    margin-top: 38px;
    padding: 11px 12px;

    border: 1px solid rgba(204, 76, 76, 0.35);

    background: rgba(123, 31, 31, 0.15);

    color: #ec8a8a;

    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-align: center;
}


/* =========================================================
   LOGIN – RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .login-main {
        padding: 45px 20px;
    }

    .login-section {
        grid-template-columns: 1fr;
    }

    .login-panel {
        padding: 45px 35px;
    }

    .login-security {
        padding: 40px 35px;

        border-top: 1px solid rgba(95, 173, 255, 0.2);
        border-left: 0;
    }
}

@media (max-width: 600px) {

    .login-main {
        align-items: flex-start;

        padding: 30px 14px;
    }

    .login-panel,
    .login-security {
        padding: 34px 22px;
    }

    .login-options {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .login-register {
        align-items: stretch;
        flex-direction: column;
    }

    .login-register .button {
        width: 100%;

        text-align: center;
    }

    .password-field input {
        padding-right: 95px;
    }

    .password-toggle {
        min-width: 80px;

        font-size: 0.6rem;
    }
}

/* ======================================================
   FOOTER
====================================================== */

.site-footer {
    margin-top: 60px;
    padding: 18px 40px;

    background: #111820;
    border-top: 1px solid var(--blue-main);

    color: #9aa5b1;
    font-size: 0.9rem;
}

.footer-content {
    max-width: 1600px;
    margin: auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    flex-wrap: wrap;
}

.footer-left,
.footer-center,
.footer-right {
    flex: 1;
}

.footer-center {
    text-align: center;
}

.footer-right {
    text-align: right;
}

@media (max-width: 768px) {

    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-left,
    .footer-center,
    .footer-right {
        text-align: center;
    }

}

/* =========================================================
   LOGIN – KOPFBEREICH UND FOOTER
========================================================= */

/* Allgemeine Header-Regeln auf der Login-Seite überschreiben */

.login-page .site-header {
    min-height: 92px;

    display: block;

    padding: 0;

    background-color: rgba(8, 17, 25, 0.98);

    border-bottom: 3px solid var(--blue-main);
}

.login-page .header-inner {
    width: min(1400px, calc(100% - 40px));
    min-height: 92px;

    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 35px;
}


/* =========================================================
   LOGIN – MARKE
========================================================= */

.login-page .site-brand {
    display: flex;
    flex-direction: column;
    gap: 5px;

    color: inherit;

    text-decoration: none;
}

.login-page .brand-main {
    color: #ffffff;

    font-size: clamp(18px, 2vw, 25px);
    font-weight: 800;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.login-page .brand-sub {
    color: #7f95a5;

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* =========================================================
   LOGIN – NAVIGATION
========================================================= */

.login-page .main-navigation {
    min-height: auto;

    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;

    padding: 0;

    background: transparent;

    border: 1px solid rgba(95, 173, 255, 0.18);

    box-shadow: none;
}

.login-page .main-navigation a {
    min-width: 105px;
    min-height: 48px;

    padding: 14px 22px;

    border: 0;
    border-right: 1px solid rgba(95, 173, 255, 0.15);

    background-color: rgba(13, 27, 38, 0.88);

    color: #dce6ed;

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.1em;
}

.login-page .main-navigation a:last-child {
    border-right: 0;
}

.login-page .main-navigation a:hover {
    color: #ffffff;

    background-color: rgba(54, 119, 165, 0.7);
}

.login-page .main-navigation a.active {
    color: #ffffff;

    background-color: var(--blue-main);
}


/* =========================================================
   LOGIN – MOBILER MENÜBUTTON
========================================================= */

.login-page .menu-toggle {
    display: none;

    width: 46px;
    height: 42px;

    padding: 9px;

    border: 1px solid rgba(95, 173, 255, 0.3);

    background: rgba(22, 48, 66, 0.75);

    cursor: pointer;
}

.login-page .menu-toggle span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 5px 0;

    background-color: #ffffff;
}


/* =========================================================
   LOGIN – FOOTER
========================================================= */

.login-page .site-footer {
    min-height: 72px;

    margin-top: 0;
    padding: 0;

    display: block;

    background-color: rgba(9, 19, 27, 0.98);

    border-top: 3px solid var(--blue-main);
}

.login-page .footer-inner {
    width: min(1400px, calc(100% - 40px));
    min-height: 72px;

    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 30px;
}

.login-page .footer-inner > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;

    text-align: left;
}

.login-page .footer-inner strong {
    color: #d9e3e9;

    font-size: 0.78rem;

    letter-spacing: 0.1em;
}

.login-page .footer-inner span {
    color: #6f8492;

    font-size: 0.72rem;
}

.login-page .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 22px;
}

.login-page .footer-links a {
    color: #8397a5;

    font-size: 0.75rem;

    text-decoration: none;

    transition: color 0.2s ease;
}

.login-page .footer-links a:hover {
    color: #ffffff;
}


/* =========================================================
   LOGIN – SEKUNDÄRER BUTTON
========================================================= */

.login-page .button-secondary {
    border-color: rgba(95, 175, 255, 0.35);

    background-color: rgba(34, 83, 122, 0.28);

    color: #78bdff;
}

.login-page .button-secondary:hover {
    border-color: #5fafff;

    background-color: rgba(41, 112, 180, 0.45);

    color: #ffffff;
}


/* =========================================================
   LOGIN – TABLET
========================================================= */

@media (max-width: 800px) {

    .login-page .header-inner {
        position: relative;

        width: min(100% - 28px, 1400px);
    }

    .login-page .menu-toggle {
        display: block;
    }

    .login-page .main-navigation {
        position: absolute;
        z-index: 20;

        top: 78px;
        right: 0;

        min-width: 190px;

        display: none;
        flex-direction: column;

        background-color: #0d1922;

        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
    }

    .login-page .main-navigation.is-open {
        display: flex;
    }

    .login-page .main-navigation a {
        width: 100%;

        border-right: 0;
        border-bottom: 1px solid rgba(95, 173, 255, 0.15);
    }

    .login-page .main-navigation a:last-child {
        border-bottom: 0;
    }

    .login-page .footer-inner {
        width: min(100% - 28px, 1400px);

        padding: 20px 0;

        align-items: flex-start;
        flex-direction: column;
    }

    .login-page .footer-links {
        justify-content: flex-start;

        gap: 14px 20px;
    }
}


/* =========================================================
   LOGIN – SMARTPHONE
========================================================= */

@media (max-width: 520px) {

    .login-page .site-header,
    .login-page .header-inner {
        min-height: 80px;
    }

    .login-page .brand-main {
        font-size: 15px;

        letter-spacing: 0.08em;
    }

    .login-page .brand-sub {
        font-size: 0.6rem;
    }

    .login-page .main-navigation {
        top: 70px;

        right: 0;
        left: 0;
    }

    .login-page .footer-links {
        flex-direction: column;

        gap: 10px;
    }
}

/* =========================================================
   INTERNE NAVIGATION MIT BENUTZERMENÜ
========================================================= */

.main-navigation {
    position: relative;

    min-height: 62px;

    padding: 0 20px;

    display: block;

    background-color: var(--background-navigation);

    border-bottom: 1px solid var(--border-light);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.navigation-inner {
    width: min(1380px, 100%);
    min-height: 62px;

    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.navigation-links {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

.navigation-links > a {
    min-width: 112px;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 17px 22px;

    color: var(--text-navigation);

    font-size: 14px;
    font-weight: 700;

    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    letter-spacing: 0.6px;

    border-left: 1px solid var(--border-dark);

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.navigation-links > a:last-child {
    border-right: 1px solid var(--border-dark);
}

.navigation-links > a:hover {
    color: #ffffff;
    background-color: var(--blue-hover);
}

.navigation-links > a.active {
    color: #ffffff;
    background-color: var(--blue-main);
}


/* =========================================================
   BENUTZERBEREICH
========================================================= */

.navigation-account {
    position: relative;

    flex: 0 0 auto;
}

.navigation-account summary {
    list-style: none;
}

.navigation-account summary::-webkit-details-marker {
    display: none;
}

.navigation-account-button {
    min-width: 205px;
    min-height: 62px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 8px 15px;

    color: var(--text-navigation);
    background-color: rgba(255, 255, 255, 0.025);

    border-right: 1px solid var(--border-dark);
    border-left: 1px solid var(--border-dark);

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.navigation-account-button:hover,
.navigation-account[open] .navigation-account-button {
    color: #ffffff;

    background-color: rgba(49, 95, 122, 0.55);
}

.navigation-online-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    background-color: #4bc778;

    border-radius: 50%;

    box-shadow: 0 0 8px rgba(75, 199, 120, 0.85);
}

.navigation-avatar {
    width: 36px;
    height: 36px;

    flex: 0 0 auto;

    object-fit: cover;

    border: 1px solid rgba(95, 168, 211, 0.55);
    border-radius: 50%;

    background-color: #071017;
}

.navigation-account-text {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;

    text-align: left;
}

.navigation-account-text strong {
    overflow: hidden;

    color: #ffffff;

    font-size: 13px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.navigation-account-text small {
    color: #8498a6;

    font-size: 10px;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.navigation-account-arrow {
    margin-left: auto;

    color: var(--blue-light);

    font-size: 9px;

    transition: transform 0.2s ease;
}

.navigation-account[open] .navigation-account-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   BENUTZER-DROPDOWN
========================================================= */

.navigation-account-menu {
    position: absolute;
    z-index: 100;

    top: calc(100% + 7px);
    right: 0;

    width: 230px;

    overflow: hidden;

    background-color: #0c1821;

    border: 1px solid var(--border-light);

    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.navigation-account-header {
    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 17px;

    background-color: rgba(49, 95, 122, 0.18);

    border-bottom: 1px solid var(--border-dark);
}

.navigation-account-header strong {
    color: #ffffff;

    font-size: 14px;
}

.navigation-account-header span {
    color: #8396a3;

    font-size: 11px;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.navigation-account-menu > a {
    min-width: 0;
    min-height: 44px;

    display: flex;
    justify-content: flex-start;
    align-items: center;

    padding: 12px 17px;

    color: #c9d4da;
    background: transparent;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;
    text-transform: uppercase;

    letter-spacing: 0.07em;

    border: 0;
    border-bottom: 1px solid rgba(38, 54, 64, 0.75);
}

.navigation-account-menu > a:hover {
    color: #ffffff;

    background-color: rgba(60, 113, 143, 0.55);
}

.navigation-account-menu > a:last-child {
    border-bottom: 0;
}

.navigation-account-menu .navigation-logout {
    color: #ef9a9a;
}

.navigation-account-menu .navigation-logout:hover {
    color: #ffffff;

    background-color: rgba(145, 44, 44, 0.55);
}

/* =========================================================
   NAVIGATION – TABLET
========================================================= */

@media (max-width: 850px) {

    .main-navigation {
        padding: 0 10px;
    }

    .navigation-inner {
        flex-direction: column;
    }

    .navigation-links {
        justify-content: center;
    }

    .navigation-links > a {
        min-width: auto;
        flex: 1 1 auto;

        padding: 15px 14px;

        font-size: 12px;
    }

    .navigation-account {
        align-self: flex-end;

        margin: 7px 0;
    }

    .navigation-account-button {
        min-height: 52px;
    }
}


/* =========================================================
   NAVIGATION – SMARTPHONE
========================================================= */

@media (max-width: 650px) {

    .main-navigation {
        padding: 0;
    }

    .navigation-links {
        width: 100%;
    }

    .navigation-links > a {
        flex: 1 1 50%;

        min-height: 48px;

        padding: 12px 8px;

        font-size: 11px;

        border-bottom: 1px solid var(--border-dark);
    }

    .navigation-account {
        width: 100%;

        margin: 0;
    }

    .navigation-account-button {
        width: 100%;
        min-height: 58px;

        border-top: 1px solid var(--border-dark);
        border-right: 0;
        border-left: 0;
    }

    .navigation-account-menu {
        position: static;

        width: 100%;

        border-right: 0;
        border-left: 0;

        box-shadow: none;
    }
}
/* =========================================================
   NAVIGATION – DESKTOP-KORREKTUR
========================================================= */

@media (min-width: 851px) {

    .navigation-inner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
    }

    .navigation-links {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .navigation-account {
        align-self: stretch;

        margin: 0 0 0 auto;
    }
}

/* Firefox: Standard-Dreieck des Details-Elements entfernen */

.navigation-account-button::marker {
    content: "";
}

.navigation-account-button::-webkit-details-marker {
    display: none;
}