/* =========================================================
   SATzentrale Satellite Tracker
   tracker.css

   Space / Mission Control Design
   ========================================================= */


/* =========================================================
   VARIABLEN
   ========================================================= */

:root {

    --tracker-bg:
        #020711;

    --tracker-panel:
        rgba(7, 17, 30, .94);

    --tracker-panel-soft:
        rgba(11, 27, 44, .82);

    --tracker-panel-hover:
        rgba(16, 39, 61, .92);

    --tracker-border:
        rgba(76, 166, 215, .24);

    --tracker-border-bright:
        rgba(76, 190, 240, .48);

    --tracker-text:
        #e7f7ff;

    --tracker-muted:
        #7893a6;

    --tracker-accent:
        #32c7ff;

    --tracker-accent-dark:
        #0788bd;

    --tracker-accent-soft:
        rgba(50, 199, 255, .12);

    --tracker-active:
        #28e58a;

    --tracker-retired:
        #ffb52e;

    --tracker-failed:
        #ff3f68;

    --tracker-disabled:
        #71808d;

    --tracker-deorbited:
        #b86cff;

    --tracker-grid:
        rgba(67, 150, 198, .055);

    --tracker-shadow:
        0 12px 35px rgba(0, 0, 0, .42);

    --tracker-glow:
        0 0 18px rgba(50, 199, 255, .18);

    --tracker-radius:
        12px;

    --tracker-max-width:
        1500px;
}


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

.satellite-tracker,
.satellite-tracker * {
    box-sizing:
        border-box;
}


/* =========================================================
   HAUPTBEREICH
   ========================================================= */

.satellite-tracker {

    width:
        100%;

    min-height:
        100vh;

    color:
        var(--tracker-text);

    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    line-height:
        1.45;

    position:
        relative;
}


/* =========================================================
   DEZENTER AUSSEN-GLOW
   ========================================================= */

.satellite-tracker::before {

    content:
        "";

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0, 150, 255, .055),
            transparent 28%
        ),

        radial-gradient(
            circle at 85% 70%,
            rgba(110, 50, 255, .045),
            transparent 30%
        );

    z-index:
        0;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.tracker-container {

    position:
        relative;

    z-index:
        1;

    width:
        min(
            calc(100% - 32px),
            var(--tracker-max-width)
        );

    margin:
        0 auto;

    padding:
        24px 0 50px;
}


/* =========================================================
   HEADER
   ========================================================= */

.tracker-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        20px;

    padding:
        2px 0;
}


.tracker-title-area {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;
}


.tracker-title-icon {

    width:
        54px;

    height:
        54px;

    display:
        grid;

    place-items:
        center;

    background:
        #ffffff;

    border:
        1px solid
        rgba(50, 199, 255, .38);

    border-radius:
        12px;

    color:
        var(--tracker-accent);

    font-size:
        28px;

    box-shadow:
        0 0 22px
        rgba(50, 199, 255, .12);
}


.tracker-title {

    margin:
        0;

    color:
        #080808;

    font-size:
        clamp(
            24px,
            3vw,
            34px
        );

    font-weight:
        700;

    letter-spacing:
        -.5px;

    text-shadow:
        0 0 16px
        rgba(50, 199, 255, .12);
}


.tracker-subtitle {

    margin:
        3px 0 0;

    color:
        #1578b3;

    font-size:
        14px;
}


.tracker-update-status {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--tracker-muted);

    font-size:
        13px;
}


.tracker-update-dot {

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        var(--tracker-active);

    box-shadow:
        0 0 0 4px
        rgba(40, 229, 138, .10),

        0 0 10px
        rgba(40, 229, 138, .55);
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.tracker-toolbar {

    display:
        grid;

    grid-template-columns:
        minmax(240px, 1fr)
        auto
        auto;

    gap:
        10px;

    margin-bottom:
        18px;
}


.tracker-search {

    position:
        relative;
}


.tracker-search input {

    width:
        100%;

    height:
        46px;

    padding:
        0 16px 0 42px;

    border:
        1px solid
        var(--tracker-border);

    border-radius:
        9px;

    background:
        rgba(5, 16, 28, .82);

    color:
        var(--tracker-text);

    font-size:
        14px;

    outline:
        none;

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


.tracker-search input::placeholder {

    color:
        #5e7485;
}


.tracker-search input:focus {

    border-color:
        var(--tracker-accent);

    background:
        rgba(7, 23, 38, .95);

    box-shadow:
        0 0 0 3px
        rgba(50, 199, 255, .09),

        0 0 18px
        rgba(50, 199, 255, .08);
}


.tracker-search::before {

    content:
        "⌕";

    position:
        absolute;

    left:
        15px;

    top:
        50%;

    transform:
        translateY(-52%);

    color:
        var(--tracker-accent);

    font-size:
        22px;

    pointer-events:
        none;
}


.tracker-select,
.tracker-button {

    height:
        46px;

    border:
        1px solid
        var(--tracker-border);

    border-radius:
        9px;

    background:
        rgba(5, 16, 28, .9);

    color:
        var(--tracker-text);

    padding:
        0 14px;

    font-size:
        14px;

    cursor:
        pointer;

    outline:
        none;
}


.tracker-select:hover,
.tracker-button:hover {

    border-color:
        var(--tracker-border-bright);

    background:
        rgba(12, 31, 48, .95);
}


.tracker-button {

    font-weight:
        600;

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


.tracker-button:hover {

    box-shadow:
        0 0 14px
        rgba(50, 199, 255, .08);
}


/* =========================================================
   MAIN GRID
   ========================================================= */

.tracker-main-grid {

    display:
        grid;

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

    gap:
        18px;

    align-items:
        start;
}


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

.tracker-panel {

    background:
        linear-gradient(
            145deg,
            rgba(7, 20, 34, .96),
            rgba(3, 11, 21, .96)
        );

    border:
        1px solid
        var(--tracker-border);

    border-radius:
        var(--tracker-radius);

    box-shadow:
        var(--tracker-shadow);

    overflow:
        hidden;

    backdrop-filter:
        blur(8px);
}


.tracker-panel-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        15px 18px;

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

    background:
        linear-gradient(
            90deg,
            rgba(12, 36, 55, .85),
            rgba(5, 18, 31, .75)
        );
}


.tracker-panel-title {

    margin:
        0;

    color:
        #dff6ff;

    font-size:
        15px;

    font-weight:
        700;

    letter-spacing:
        .15px;
}


.tracker-panel-body {

    padding:
        18px;
}


/* =========================================================
   MAP PANEL
   ========================================================= */

.tracker-map-panel {

    min-height:
        800px;
}


/* =========================================================
   MAP
   ========================================================= */

.tracker-map {

    position:
        relative;

    width:
        100%;

    min-height:
        760px;

    overflow:
        hidden;

    background:
        #01050b;
}


/* =========================================================
   SCROLLBEREICH
   ========================================================= */

.tracker-map-scroll {

    position:
        relative;

    width:
        100%;

    height:
        760px;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    scrollbar-width:
        auto;

    scrollbar-color:
        #245a77 #06121e;
}


.tracker-map-scroll::-webkit-scrollbar {

    height:
        14px;
}


.tracker-map-scroll::-webkit-scrollbar-track {

    background:
        #06121e;

    border-top:
        1px solid
        rgba(60, 140, 180, .18);
}


.tracker-map-scroll::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            90deg,
            #17415b,
            #287c9f,
            #17415b
        );

    border:
        3px solid
        #06121e;

    border-radius:
        10px;
}


.tracker-map-scroll::-webkit-scrollbar-thumb:hover {

    background:
        #35a4cf;
}

/* =====================================================
   ZOOM-BUTTONS
   ===================================================== */

.tracker-map-zoom-controls {
    position: fixed;

    bottom: 55px;
    left: 50%;

    transform:
        translateX(-50%);

    z-index: 100;

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 6px 8px;

    background:
        rgba(15, 15, 15, 0.88);

    border:
        1px solid rgba(255, 255, 255, 0.20);

    border-radius: 10px;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.35);
}


/* =====================================================
   ZOOM-BUTTON
   ===================================================== */

.tracker-map-zoom-button {

    width: 40px;
    height: 40px;

    padding: 0;

    border: none;

    border-radius: 7px;

    background:
        rgba(255, 255, 255, 0.12);

    color: #ffffff;

    font-size: 25px;

    font-weight: bold;

    line-height: 1;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition:
        background 0.2s ease,
        transform 0.15s ease;
}


.tracker-map-zoom-button:hover {

    background:
        rgba(255, 255, 255, 0.22);

    transform:
        scale(1.05);
}


.tracker-map-zoom-button:active {

    transform:
        scale(0.95);
}


.tracker-map-zoom-button:disabled {

    opacity: 0.35;

    cursor:
        not-allowed;

    transform:
        none;
}


/* =====================================================
   ZOOM-ANZEIGE
   ===================================================== */

.tracker-map-zoom-indicator {

    min-width: 75px;

    text-align: center;

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;
}

/* =========================================================
   ZEICHENFLÄCHE
   ========================================================= */

.tracker-map-canvas {

    position:
        relative;

    height:
        760px;

    min-width:
        2200px;

    overflow:
        hidden;

    background:

        /* Sterne – Ebene 1 */
        radial-gradient(
            circle at 7% 18%,
            rgba(255,255,255,.75) 0 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle at 16% 71%,
            rgba(160,215,255,.65) 0 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle at 25% 28%,
            rgba(255,255,255,.55) 0 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle at 37% 83%,
            rgba(255,255,255,.60) 0 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle at 48% 14%,
            rgba(180,230,255,.70) 0 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle at 58% 67%,
            rgba(255,255,255,.55) 0 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle at 69% 33%,
            rgba(170,220,255,.65) 0 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle at 81% 77%,
            rgba(255,255,255,.65) 0 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle at 91% 22%,
            rgba(190,230,255,.65) 0 1px,
            transparent 1.5px
        ),

        /* Sterne – Ebene 2 */
        radial-gradient(
            circle at 11% 46%,
            rgba(255,255,255,.45) 0 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle at 32% 52%,
            rgba(140,210,255,.45) 0 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle at 53% 41%,
            rgba(255,255,255,.45) 0 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle at 74% 57%,
            rgba(160,220,255,.45) 0 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle at 94% 65%,
            rgba(255,255,255,.45) 0 1px,
            transparent 1.5px
        ),

        /* Weltraum-Glow */
        radial-gradient(
            ellipse at 50% 48%,
            rgba(11, 68, 105, .28) 0%,
            rgba(3, 24, 43, .20) 30%,
            transparent 70%
        ),

        /* Grundfarbe */
        linear-gradient(
            180deg,
            #010711 0%,
            #020b17 50%,
            #01050c 100%
        );
}


/* =========================================================
   TECHNISCHES HINTERGRUND-GITTER
   ========================================================= */

.tracker-map-background {

    position:
        absolute;

    inset:
        0;

    background-image:

        linear-gradient(
            var(--tracker-grid) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            var(--tracker-grid) 1px,
            transparent 1px
        );

    background-size:
        100px 100px;

    pointer-events:
        none;

    opacity:
        .85;
}


/* =========================================================
   ZUSÄTZLICHE FEINLINIEN
   ========================================================= */

.tracker-map-background::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background-image:

        linear-gradient(
            rgba(65, 145, 190, .025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(65, 145, 190, .025) 1px,
            transparent 1px
        );

    background-size:
        20px 20px;
}


/* =========================================================
   ORBITLINIE
   ========================================================= */

.tracker-orbit-line {

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        390px;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(50, 199, 255, .38) 8%,
            #31c7ff 25%,
            #55d4ff 50%,
            #31c7ff 75%,
            rgba(50, 199, 255, .38) 92%,
            transparent 100%
        );

    box-shadow:
        0 0 7px
        rgba(50, 199, 255, .65),

        0 0 20px
        rgba(50, 199, 255, .22);

    z-index:
        4;
}


/* =========================================================
   0° MITTELLINIE
   ========================================================= */

.tracker-map-center-line {

    position:
        absolute;

    top:
        60px;

    bottom:
        55px;

    width:
        1px;

    background:
        rgba(70, 203, 255, .38);

    border-left:
        1px dashed
        rgba(70, 203, 255, .45);

    box-shadow:
        0 0 8px
        rgba(50, 199, 255, .15);

    z-index:
        2;

    pointer-events:
        none;
}


/* =========================================================
   0° LABEL
   ========================================================= */

.tracker-map-zero-label {

    position:
        absolute;

    top:
        42px;

    transform:
        translateX(-50%);

    padding:
        4px 11px;

    background:
        rgba(3, 22, 36, .94);

    border:
        1px solid
        rgba(60, 200, 255, .55);

    border-radius:
        5px;

    color:
        #69d8ff;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .4px;

    box-shadow:
        0 0 12px
        rgba(50, 199, 255, .14);

    z-index:
        8;
}


/* =========================================================
   OST / WEST
   ========================================================= */

.tracker-direction-label {

    position:
        absolute;

    top:
        14px;

    padding:
        5px 13px;

    background:
        rgba(3, 15, 26, .88);

    border:
        1px solid
        rgba(70, 150, 190, .30);

    border-radius:
        6px;

    color:
        #82aabd;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1px;

    box-shadow:
        0 4px 15px
        rgba(0,0,0,.25);

    z-index:
        7;
}


.tracker-direction-east {

    left:
        20px;
}


.tracker-direction-west {

    right:
        20px;
}


/* =========================================================
   GRADUATION / SKALA
   ========================================================= */

.tracker-map-tick {

    position:
        absolute;

    top:
        354px;

    width:
        1px;

    height:
        72px;

    background:
        rgba(93, 170, 205, .36);

    z-index:
        5;

    pointer-events:
        none;
}


/* Größere Hauptmarkierung */

.tracker-map-tick:nth-of-type(5n) {

    width:
        2px;

    background:
        rgba(85, 205, 245, .70);

    box-shadow:
        0 0 5px
        rgba(50, 199, 255, .25);
}


/* =========================================================
   SKALENBESCHRIFTUNG
   ========================================================= */

.tracker-map-tick-label {

    position:
        absolute;

    top:
        77px;

    left:
        50%;

    transform:
        translateX(-50%);

    white-space:
        nowrap;

    color:
        #7fa6b9;

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        .15px;

    text-shadow:
        0 1px 3px
        rgba(0,0,0,.8);
}


/* =========================================================
   AGENDA-SATELLIT
   ========================================================= */

.tracker-agenda-item {

    position:
        absolute;

    top:
        0;

    width:
        1px;

    height:
        760px;

    z-index:
        12;

    --agenda-offset:
        0px;
}


/* =========================================================
   SATELLITEN-LABEL
   ========================================================= */

.tracker-agenda-label {

    position:
        absolute;

    z-index:
        20;

    left:
        50%;

    width:
        155px;

    min-height:
        76px;

    transform:
        translateX(-50%)
        translateY(
            var(--agenda-offset)
        );

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        8px 10px;

    background:
        linear-gradient(
            145deg,
            rgba(7, 24, 39, .96),
            rgba(3, 13, 24, .96)
        );

    border:
        1px solid
        rgba(65, 171, 218, .38);

    border-radius:
        8px;

    box-shadow:
        0 6px 18px
        rgba(0,0,0,.42),

        0 0 14px
        rgba(40, 170, 230, .07);

    color:
        var(--tracker-text);

    cursor:
        pointer;

    text-align:
        center;

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


.tracker-agenda-label:hover {

    border-color:
        rgba(70, 210, 255, .75);

    box-shadow:
        0 8px 22px
        rgba(0,0,0,.48),

        0 0 18px
        rgba(50, 199, 255, .16);
}


/* =========================================================
   SATELLITENNAME
   ========================================================= */

.tracker-agenda-name {

    display:
        block;

    width:
        100%;

    overflow:
        hidden;

    color:
        #e9f8ff;

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1.25;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =========================================================
   POSITION
   ========================================================= */

.tracker-agenda-position {

    display:
        block;

    margin-top:
        3px;

    color:
        #42ccff;

    font-size:
        14px;

    font-weight:
        800;

    white-space:
        nowrap;

    text-shadow:
        0 0 7px
        rgba(50, 199, 255, .35);
}


/* =========================================================
   OPERATOR
   ========================================================= */

.tracker-agenda-operator {

    display:
        block;

    width:
        100%;

    margin-top:
        4px;

    overflow:
        hidden;

    color:
        #8caabd;

    font-size:
        10px;

    font-weight:
        600;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =========================================================
   POSITIONSQUELLE
   ========================================================= */

.tracker-agenda-source {

    display:
        block;

    margin-top:
        2px;

    color:
        #58788b;

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        .5px;
}


/* =========================================================
   VERBINDUNGSLINIE
   ========================================================= */

.tracker-agenda-connector {

    position:
        absolute;

    left:
        0;

    width:
        2px;

    background:
        linear-gradient(
            180deg,
            rgba(50, 199, 255, .12),
            rgba(50, 199, 255, .65),
            rgba(50, 199, 255, .12)
        );

    box-shadow:
        0 0 6px
        rgba(50, 199, 255, .22);

    z-index:
        15;

    pointer-events:
        none;
}


/*
 * Die JS-Lanes werden über
 * --agenda-offset gesteuert.
 *
 * Deshalb wird die Verbindungslinie
 * ebenfalls relativ zum jeweiligen Label
 * positioniert.
 */

.tracker-agenda-item
.tracker-agenda-connector {

    top:
        calc(
            167px +
            var(--agenda-offset)
        );

    height:
        calc(
            223px -
            var(--agenda-offset)
        );
}


/* =========================================================
   SATELLITENPUNKT
   ========================================================= */

.tracker-agenda-point {

    position:
        absolute;

    left:
        0;

    top:
        390px;

    width:
        18px;

    height:
        18px;

    transform:
        translate(
            -50%,
            -50%
        );

    border:
        2px solid
        rgba(235, 250, 255, .95);

    border-radius:
        50%;

    background:
        var(--tracker-accent);

    box-shadow:
        0 0 0 4px
        rgba(50,199,255,.10),

        0 0 10px
        rgba(50,199,255,.85),

        0 0 24px
        rgba(50,199,255,.35),

        0 3px 10px
        rgba(0,0,0,.55);

    cursor:
        pointer;

    z-index:
        30;

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}


.tracker-agenda-point:hover {

    transform:
        translate(
            -50%,
            -50%
        )
        scale(1.35);

    box-shadow:
        0 0 0 7px
        rgba(50,199,255,.12),

        0 0 15px
        rgba(50,199,255,.95),

        0 0 30px
        rgba(50,199,255,.42),

        0 4px 12px
        rgba(0,0,0,.55);
}


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

.tracker-agenda-point.active {

    background:
        var(--tracker-active);

    box-shadow:
        0 0 0 4px
        rgba(40,229,138,.10),

        0 0 12px
        rgba(40,229,138,.85),

        0 0 25px
        rgba(40,229,138,.32),

        0 3px 10px
        rgba(0,0,0,.55);
}


.tracker-agenda-point.retired {

    background:
        var(--tracker-retired);

    box-shadow:
        0 0 0 4px
        rgba(255,181,46,.10),

        0 0 12px
        rgba(255,181,46,.85),

        0 0 25px
        rgba(255,181,46,.30),

        0 3px 10px
        rgba(0,0,0,.55);
}


.tracker-agenda-point.failed {

    background:
        var(--tracker-failed);

    box-shadow:
        0 0 0 4px
        rgba(255,63,104,.10),

        0 0 12px
        rgba(255,63,104,.90),

        0 0 25px
        rgba(255,63,104,.35),

        0 3px 10px
        rgba(0,0,0,.55);
}


.tracker-agenda-point.disabled {

    background:
        var(--tracker-disabled);

    box-shadow:
        0 0 0 4px
        rgba(113,128,141,.10),

        0 0 9px
        rgba(113,128,141,.60),

        0 3px 10px
        rgba(0,0,0,.55);
}


.tracker-agenda-point.deorbited {

    background:
        var(--tracker-deorbited);

    box-shadow:
        0 0 0 4px
        rgba(184,108,255,.10),

        0 0 12px
        rgba(184,108,255,.85),

        0 0 25px
        rgba(184,108,255,.32),

        0 3px 10px
        rgba(0,0,0,.55);
}


/* =========================================================
   AUSGEWÄHLTER SATELLIT
   ========================================================= */

.tracker-agenda-item.selected
.tracker-agenda-label {

    border:
        2px solid
        var(--tracker-accent);

    background:
        linear-gradient(
            145deg,
            rgba(8, 38, 58, .98),
            rgba(3, 18, 31, .98)
        );

    box-shadow:
        0 0 20px
        rgba(50,199,255,.20),

        0 10px 25px
        rgba(0,0,0,.55);

    z-index:
        110;

    transform:
        translateX(-50%)
        translateY(
            var(--agenda-offset)
        )
        scale(1.05);
}


.tracker-agenda-item.selected
.tracker-agenda-point {

    transform:
        translate(
            -50%,
            -50%
        )
        scale(1.35);

    box-shadow:
        0 0 0 7px
        rgba(50,199,255,.15),

        0 0 18px
        rgba(50,199,255,1),

        0 0 34px
        rgba(50,199,255,.45),

        0 4px 14px
        rgba(0,0,0,.55);
}


/* =========================================================
   LEERE MAP
   ========================================================= */

.tracker-map-empty {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    padding:
        18px 25px;

    background:
        rgba(4, 18, 30, .94);

    border:
        1px solid
        rgba(60, 170, 215, .35);

    border-radius:
        9px;

    color:
        var(--tracker-muted);

    font-size:
        13px;

    box-shadow:
        0 0 20px
        rgba(0,0,0,.35);

    z-index:
        50;
}


/* =========================================================
   SELECTED SATELLITE
   ========================================================= */

.tracker-selected {

    border:
        2px solid
        var(--tracker-accent);

    box-shadow:
        0 0 18px
        rgba(50,199,255,.18);
}


/* =========================================================
   SATELLITE INFO
   ========================================================= */

.tracker-satellite-header {

    padding:
        20px;

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

    background:
        linear-gradient(
            145deg,
            rgba(8, 29, 47, .72),
            rgba(4, 15, 26, .55)
        );
}


.tracker-satellite-name {

    margin:
        0 0 7px;

    color:
        #effaff;

    font-size:
        24px;

    font-weight:
        700;
}


.tracker-satellite-id {

    color:
        var(--tracker-muted);

    font-size:
        12px;
}


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

.tracker-status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    margin-top:
        12px;

    padding:
        5px 9px;

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .4px;
}


.tracker-status::before {

    content:
        "";

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        currentColor;

    box-shadow:
        0 0 7px
        currentColor;
}


.tracker-status-active {

    color:
        var(--tracker-active);

    background:
        rgba(40,229,138,.08);

    border:
        1px solid
        rgba(40,229,138,.18);
}


.tracker-status-retired {

    color:
        var(--tracker-retired);

    background:
        rgba(255,181,46,.08);

    border:
        1px solid
        rgba(255,181,46,.18);
}


.tracker-status-failed {

    color:
        var(--tracker-failed);

    background:
        rgba(255,63,104,.08);

    border:
        1px solid
        rgba(255,63,104,.18);
}


.tracker-status-disabled {

    color:
        var(--tracker-disabled);

    background:
        rgba(113,128,141,.08);

    border:
        1px solid
        rgba(113,128,141,.18);
}


.tracker-status-deorbited {

    color:
        var(--tracker-deorbited);

    background:
        rgba(184,108,255,.08);

    border:
        1px solid
        rgba(184,108,255,.18);
}


/* =========================================================
   DATA GRID
   ========================================================= */

.tracker-data-grid {

    display:
        grid;

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

    gap:
        10px;

    padding:
        18px;
}


.tracker-data-card {

    min-width:
        0;

    padding:
        13px;

    background:
        rgba(7, 23, 38, .72);

    border:
        1px solid
        var(--tracker-border);

    border-radius:
        9px;

    transition:
        border-color .18s ease,
        background .18s ease;
}


.tracker-data-card:hover {

    border-color:
        rgba(70, 185, 230, .38);

    background:
        rgba(9, 29, 47, .82);
}


.tracker-data-label {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--tracker-muted);

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        .6px;
}


.tracker-data-value {

    display:
        block;

    overflow:
        hidden;

    color:
        #e7f7ff;

    font-size:
        15px;

    font-weight:
        700;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =========================================================
   POSITION
   ========================================================= */

.tracker-position-card {

    grid-column:
        1 / -1;

    background:
        linear-gradient(
            135deg,
            rgba(6, 40, 62, .78),
            rgba(5, 22, 37, .72)
        );

    border-color:
        rgba(50, 190, 240, .32);

    box-shadow:
        inset 0 0 20px
        rgba(50,199,255,.025);
}


.tracker-position-value {

    font-size:
        27px;

    color:
        #43ccff;

    text-shadow:
        0 0 10px
        rgba(50,199,255,.22);
}


.tracker-data-source {

    display:
        block;

    margin-top:
        5px;

    color:
        #658598;

    font-size:
        10px;
}


/* =========================================================
   SATELLITENLISTE
   ========================================================= */

.tracker-list {

    max-height:
        620px;

    overflow-y:
        auto;

    scrollbar-width:
        thin;

    scrollbar-color:
        #22536d #06131f;
}


.tracker-list::-webkit-scrollbar {

    width:
        8px;
}


.tracker-list::-webkit-scrollbar-track {

    background:
        #06131f;
}


.tracker-list::-webkit-scrollbar-thumb {

    background:
        #22536d;

    border-radius:
        8px;
}


.tracker-list-item {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    width:
        100%;

    padding:
        11px 14px;

    border:
        0;

    border-bottom:
        1px solid
        rgba(76,166,215,.12);

    background:
        transparent;

    color:
        var(--tracker-text);

    text-align:
        left;

    cursor:
        pointer;

    transition:
        background .15s ease,
        padding-left .15s ease;
}


.tracker-list-item:hover {

    background:
        rgba(28, 79, 106, .18);

    padding-left:
        17px;
}


.tracker-list-item.selected {

    background:
        rgba(31, 111, 148, .18);

    box-shadow:
        inset 3px 0
        var(--tracker-accent);
}


.tracker-list-status {

    width:
        8px;

    height:
        8px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    box-shadow:
        0 0 7px
        currentColor;
}


.tracker-list-status.active {

    background:
        var(--tracker-active);

    color:
        var(--tracker-active);
}


.tracker-list-status.retired {

    background:
        var(--tracker-retired);

    color:
        var(--tracker-retired);
}


.tracker-list-status.failed {

    background:
        var(--tracker-failed);

    color:
        var(--tracker-failed);
}


.tracker-list-status.disabled {

    background:
        var(--tracker-disabled);

    color:
        var(--tracker-disabled);
}


.tracker-list-status.deorbited {

    background:
        var(--tracker-deorbited);

    color:
        var(--tracker-deorbited);
}


.tracker-list-name {

    flex:
        1;

    min-width:
        0;

    overflow:
        hidden;

    color:
        #dceff7;

    font-size:
        13px;

    font-weight:
        600;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.tracker-list-position {

    flex:
        0 0 auto;

    color:
        #65c7eb;

    font-size:
        11px;

    font-weight:
        700;

    white-space:
        nowrap;
}


/* =========================================================
   ORBIT INFORMATION
   ========================================================= */

.tracker-orbit-grid {

    display:
        grid;

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

    gap:
        10px;
}


.tracker-orbit-item {

    padding:
        12px;

    background:
        rgba(6, 22, 36, .68);

    border:
        1px solid
        var(--tracker-border);

    border-radius:
        8px;
}


.tracker-orbit-label {

    color:
        var(--tracker-muted);

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        .5px;
}


.tracker-orbit-value {

    margin-top:
        4px;

    color:
        #dff6ff;

    font-size:
        15px;

    font-weight:
        700;
}


/* =========================================================
   LEGEND
   ========================================================= */

.tracker-legend {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

    padding:
        12px 18px;

    border-top:
        1px solid
        var(--tracker-border);

    background:
        rgba(5, 17, 29, .72);
}


.tracker-legend-item {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    color:
        var(--tracker-muted);

    font-size:
        11px;
}


.tracker-legend-dot {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    box-shadow:
        0 0 7px
        currentColor;
}


.tracker-legend-dot.active {

    background:
        var(--tracker-active);

    color:
        var(--tracker-active);
}


.tracker-legend-dot.retired {

    background:
        var(--tracker-retired);

    color:
        var(--tracker-retired);
}


.tracker-legend-dot.failed {

    background:
        var(--tracker-failed);

    color:
        var(--tracker-failed);
}


.tracker-legend-dot.disabled {

    background:
        var(--tracker-disabled);

    color:
        var(--tracker-disabled);
}


.tracker-legend-dot.deorbited {

    background:
        var(--tracker-deorbited);

    color:
        var(--tracker-deorbited);
}


/* =========================================================
   LETZTE AKTUALISIERUNG
   ========================================================= */

.tracker-last-updated {

    padding:
        12px 18px;

    border-top:
        1px solid
        var(--tracker-border);

    color:
        #5e7c8e;

    font-size:
        10px;

    text-align:
        right;
}


/* =========================================================
   LOADING
   ========================================================= */

.tracker-loading {

    display:
        grid;

    place-items:
        center;

    min-height:
        250px;

    color:
        var(--tracker-muted);

    font-size:
        14px;
}


.tracker-spinner {

    width:
        30px;

    height:
        30px;

    margin-bottom:
        12px;

    border:
        3px solid
        rgba(50,199,255,.12);

    border-top-color:
        var(--tracker-accent);

    border-radius:
        50%;

    box-shadow:
        0 0 12px
        rgba(50,199,255,.18);

    animation:
        tracker-spin .8s linear infinite;
}


@keyframes tracker-spin {

    to {

        transform:
            rotate(360deg);
    }
}


/* =========================================================
   ERROR
   ========================================================= */

.tracker-error {

    margin:
        18px;

    padding:
        14px 16px;

    border:
        1px solid
        rgba(255,63,104,.30);

    border-radius:
        8px;

    background:
        rgba(65, 10, 25, .55);

    color:
        #ff9eb3;

    font-size:
        13px;

    box-shadow:
        0 0 15px
        rgba(255,63,104,.06);
}


/* =========================================================
   EMPTY
   ========================================================= */

.tracker-empty {

    padding:
        35px 20px;

    color:
        var(--tracker-muted);

    text-align:
        center;

    font-size:
        13px;
}


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

.tracker-footer {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    margin-top:
        16px;

    color:
        #587383;

    font-size:
        11px;
}


/* =========================================================
   FOCUS
   ========================================================= */

.tracker-button:focus-visible,
.tracker-select:focus-visible,
.tracker-search input:focus-visible,
.tracker-agenda-label:focus-visible,
.tracker-agenda-point:focus-visible,
.tracker-list-item:focus-visible {

    outline:
        2px solid
        var(--tracker-accent);

    outline-offset:
        2px;
}


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

@media (max-width:1100px) {

    .tracker-main-grid {

        grid-template-columns:
            1fr;
    }


    .tracker-list {

        max-height:
            400px;
    }
}


@media (max-width:760px) {

    .tracker-container {

        width:
            min(
                calc(100% - 20px),
                var(--tracker-max-width)
            );

        padding-top:
            15px;
    }


    .tracker-header {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .tracker-toolbar {

        grid-template-columns:
            1fr;
    }


    .tracker-map-panel {

        min-height:
            760px;
    }


    .tracker-map {

        min-height:
            700px;
    }


    .tracker-map-scroll {

        height:
            700px;
    }


    .tracker-map-canvas {

        height:
            700px;
    }


    .tracker-data-grid {

        grid-template-columns:
            1fr;
    }


    .tracker-orbit-grid {

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


    .tracker-agenda-label {

        width:
            140px;
    }
}

/* =========================================================
   ZOOM-ANZEIGE
   ========================================================= */

.tracker-map-zoom-indicator {

    position:
        absolute;

    top:
        14px;

    left:
        50%;

    transform:
        translateX(-50%);

    z-index:
        100;

    padding:
        5px 11px;

    background:
        rgba(3, 17, 29, .90);

    border:
        1px solid
        rgba(60, 190, 235, .38);

    border-radius:
        6px;

    color:
        #62d4ff;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .8px;

    box-shadow:
        0 0 14px
        rgba(40, 180, 230, .10);

    pointer-events:
        none;
}


/* =========================================================
   5°-ZWISCHENMARKIERUNG
   ========================================================= */

.tracker-map-tick-minor {

    height:
        48px;

    top:
        366px;

    background:
        rgba(90, 170, 205, .28);
}


/* =========================================================
   10°-HAUPTMARKIERUNG
   ========================================================= */

.tracker-map-tick-major {

    width:
        2px;

    height:
        68px;

    top:
        356px;

    background:
        rgba(85, 205, 245, .72);

    box-shadow:
        0 0 5px
        rgba(50, 199, 255, .25);
}


/* =========================================================
   0°-MARKIERUNG
   ========================================================= */

.tracker-map-tick-zero {

    width:
        2px;

    height:
        78px;

    top:
        351px;

    background:
        #42ccff;

    box-shadow:
        0 0 9px
        rgba(50, 199, 255, .65);
}


@media (max-width:480px) {

    .tracker-title-icon {

        width:
            45px;

        height:
            45px;

        font-size:
            23px;
    }


    .tracker-title {

        font-size:
            23px;
    }


    .tracker-orbit-grid {

        grid-template-columns:
            1fr;
    }


    .tracker-footer {

        flex-direction:
            column;
    }


    .tracker-agenda-label {

        width:
            125px;

        padding:
            7px 6px;
    }


    .tracker-agenda-name {

        font-size:
            11px;
    }


    .tracker-agenda-position {

        font-size:
            12px;
    }


    .tracker-agenda-operator {

        font-size:
            9px;
    }


    .tracker-agenda-source {

        font-size:
            8px;
    }
}


/* =========================================================
   REDUZIERTE ANIMATION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .tracker-spinner {

        animation:
            none;
    }


    .tracker-agenda-label,
    .tracker-agenda-point,
    .tracker-list-item,
    .tracker-data-card {

        transition:
            none;
    }
}