/* =========================================================
   Allgemeines Seitenlayout / Footer
   ========================================================= */

.hero,
.container,
footer {
    margin-left: var(--sidebar-width);
}

footer {
    padding: 25px 80px;

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

    color: var(--muted);

    display: flex;
    justify-content: space-between;
    gap: 20px;
}

/* =========================================================
   Top Meta Bar
   ========================================================= */

.top-meta-bar {
    box-sizing: border-box;

    margin-left: var(--sidebar-width);
    padding: 16px 80px 0;

    width: calc(100% - var(--sidebar-width));
    max-width: 1180px;
}

.top-meta-inner {
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 10px;

    width: 100%;
    padding: 0 2px 12px;

    border: none;
    border-radius: 0;

    background: transparent;
    box-shadow: none;
}

.top-meta-row {
    display: flex;
    align-items: center;

    width: 100%;
}

.top-meta-row-main {
    justify-content: space-between;
    gap: 18px;
}

.top-meta-row-actions {
    justify-content: flex-start;
    gap: 18px;
}

.top-meta-main-left,
.top-meta-main-right,
.top-meta-actions-left,
.top-meta-actions-right {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.top-meta-main-left {
    justify-content: flex-start;
}

.top-meta-main-right {
    justify-content: flex-end;
    margin-left: auto;
}

.top-meta-actions-left {
    justify-content: flex-start;
    margin-left: -40px;
}

.top-meta-actions-right {
    justify-content: flex-end;
    margin-left: auto;
}

.top-meta-inner::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;

    height: 1px;
    background: rgba(80, 150, 220, 0.18);
}

.top-meta-auth {
    display: inline-flex;
    align-items: center;
}

.wg-auth-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 24px;
    padding: 6px 8px;

    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);

    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.82);

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        border-color 160ms ease,
        background 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

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

.wg-auth-dot {
    width: 8px;
    height: 8px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.45);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}

.wg-auth-button--offline {
    border-color: rgba(255, 80, 80, 0.45);
    background: rgba(120, 20, 20, 0.22);
    color: #ffb3b3;
}

.wg-auth-button--offline .wg-auth-dot {
    background: #ff5050;
    box-shadow: 0 0 10px rgba(255, 80, 80, 0.75);
}

.wg-auth-button--online {
    border-color: rgba(68, 255, 140, 0.55);
    background: rgba(20, 120, 65, 0.22);
    color: #9cffbd;
}

.wg-auth-button--online .wg-auth-dot {
    background: #44ff8c;
    box-shadow: 0 0 10px rgba(68, 255, 140, 0.75);
}

.wg-auth-button--loading {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
}

.top-meta-language .language-switch-link,
.top-meta-language .language-switch-link:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 5px 12px;

    border: 1px solid rgba(80, 190, 255, 0.36);
    border-radius: 999px;

    color: #d9f6ff !important;
    background: rgba(8, 24, 38, 0.42);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: none;
    text-decoration: none !important;
}

.language-switch-flag {
    display: block;

    width: 18px;
    height: 12px;

    object-fit: cover;

    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.top-meta-language .language-switch-link:hover,
.top-meta-language .language-switch-link:focus-visible {
    color: #ffffff !important;
    border-color: rgba(90, 210, 255, 0.85);
    background: rgba(18, 56, 82, 0.70);
}

.top-meta-views {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.top-meta-label {
    color: rgba(128, 205, 255, 0.68);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.top-meta-value {
    color: rgba(235, 242, 255, 0.90);
    font-size: 0.74rem;
    font-weight: 900;
}

.top-meta-project-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    white-space: nowrap;
}

.top-meta-status-label {
    color: rgba(128, 205, 255, 0.72);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.top-meta-status-phase {
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.top-meta-status-separator {
    color: rgba(128, 205, 255, 0.45);
    font-size: 0.68rem;
    font-weight: 800;
}

.top-meta-project-status .project-status-badge {
    padding: 3px 8px;

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

.top-meta-legal {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.top-meta-link,
.top-meta-link:visited {
    color: rgba(190, 205, 230, 0.78);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-decoration: none !important;
}

.top-meta-link:hover,
.top-meta-link.active {
    color: var(--text);
}


/* =========================================================
   Latest Update Bar
   ========================================================= */

.latest-update-bar {
    box-sizing: border-box;

    margin-left: var(--sidebar-width);
    padding: 12px 80px 0;

    width: calc(100% - var(--sidebar-width));
    max-width: 1180px;
}

.latest-update-inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 9px;

    width: 100%;
    padding: 8px 13px;

    border: 1px solid rgba(80, 190, 255, 0.32);
    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(8, 24, 38, 0.88),
            rgba(12, 32, 52, 0.62)
        );

    box-shadow: 0 0 18px rgba(0, 190, 255, 0.08);

    overflow: hidden;
}

.latest-update-label {
    color: #5fd6ff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;
}

.latest-update-type {
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
}

.latest-update-title {
    color: #d8e8f5;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.latest-update-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 3px 8px;

    color: #d9f6ff;
    background: rgba(80, 190, 255, 0.10);

    border: 1px solid rgba(80, 190, 255, 0.26);
    border-radius: 999px;

    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.latest-update-link,
.latest-update-link:visited {
    margin-left: auto;

    color: #9ee9ff !important;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
}

.latest-update-link:hover,
.latest-update-link:focus-visible {
    color: #ffffff !important;
}