:root {

    --bg: #070a0f;
    --bg-soft: #090e15;

    --surface: #0d151f;
    --surface-2: #101925;
    --surface-3: #121c29;

    --border: rgba(148, 163, 184, 0.13);
    --border-light: rgba(148, 163, 184, 0.20);

    --text: #f4f7fb;
    --text-soft: #cbd4df;

    --muted: #8492a6;
    --muted-dark: #596679;

    --green: #42dfa0;
    --green-rgb: 66, 223, 160;

    --yellow: #f2bf58;
    --yellow-rgb: 242, 191, 88;

    --red: #f16d7b;
    --red-rgb: 241, 109, 123;

    --blue: #718aff;

    --radius-xl: 23px;
    --radius-lg: 18px;
    --radius-md: 13px;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


* {
    box-sizing: border-box;
}


html {
    min-height: 100%;
    background: var(--bg);
}


body {

    min-height: 100vh;

    margin: 0;

    overflow-x: hidden;

    color: var(--text);

    background:
        radial-gradient(
            circle at 50% -220px,
            rgba(72, 94, 190, 0.17),
            transparent 630px
        ),
        linear-gradient(
            180deg,
            #090d14 0%,
            #070a0f 42%,
            #06090d 100%
        );

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;
}


a {
    color: inherit;
    text-decoration: none;
}


/* ============================================================
   AMBIENT
   ============================================================ */

.ambient {

    position: fixed;

    z-index: 0;

    pointer-events: none;

    border-radius: 50%;

    filter: blur(130px);
}


.ambient-one {

    width: 430px;
    height: 430px;

    top: -260px;
    left: 8%;

    background:
        rgba(75, 96, 205, 0.18);
}


.ambient-two {

    width: 340px;
    height: 340px;

    right: -200px;
    top: 330px;

    background:
        rgba(73, 83, 164, 0.10);
}


/* ============================================================
   SITE
   ============================================================ */

.site {

    position: relative;

    z-index: 1;

    width:
        min(
            1180px,
            calc(100% - 38px)
        );

    margin: 0 auto;

    padding:
        28px
        0
        46px;
}


/* ============================================================
   TOPBAR
   ============================================================ */

.topbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 45px;
}


.brand {

    display: inline-flex;

    align-items: center;

    gap: 11px;
}


.brand-mark {

    display: grid;

    place-items: center;

    width: 39px;
    height: 39px;

    border-radius: 11px;

    background: #f7f9fc;

    color: #080b10;

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

    letter-spacing: -0.06em;
}


.brand-name {

    font-size: 20px;

    font-weight: 800;

    letter-spacing: -0.045em;
}


.brand-section {

    margin-left: -4px;

    color: var(--muted);

    font-size: 12px;

    font-weight: 600;
}


/* ============================================================
   LIVE BADGE
   ============================================================ */

.live-pill {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-width: 145px;

    justify-content: center;

    padding:
        9px
        13px;

    border:
        1px solid
        rgba(var(--green-rgb), 0.16);

    border-radius: 999px;

    background:
        rgba(var(--green-rgb), 0.07);

    color: #75eab6;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.02em;

    transition:
        border-color 250ms ease,
        background 250ms ease;
}


.live-dot {

    position: relative;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 0
        rgba(var(--green-rgb), 0.35);

    animation:
        livePulse 2.2s
        ease-out
        infinite;
}


.live-pill.updated {

    animation:
        liveUpdate 650ms ease;
}


.live-pill.delayed {

    color: #f0cf7e;

    border-color:
        rgba(var(--yellow-rgb), 0.18);

    background:
        rgba(var(--yellow-rgb), 0.07);
}


.live-pill.delayed .live-dot {

    background: var(--yellow);

    animation:
        delayedPulse 2.5s
        ease-out
        infinite;
}


.live-pill.offline {

    color: #ff9aa5;

    border-color:
        rgba(var(--red-rgb), 0.18);

    background:
        rgba(var(--red-rgb), 0.07);
}


.live-pill.offline .live-dot {

    background: var(--red);

    animation: none;
}


/* ============================================================
   HERO
   ============================================================ */

.hero {

    display: grid;

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

    align-items: end;

    gap: 50px;

    padding:
        89px
        0
        42px;
}


.eyebrow,
.section-kicker,
.overall-caption,
.update-caption {

    color: var(--muted);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.17em;

    text-transform: uppercase;
}


.hero h1 {

    margin:
        13px
        0
        14px;

    font-size:
        clamp(
            44px,
            6vw,
            67px
        );

    line-height: 0.98;

    font-weight: 790;

    letter-spacing: -0.065em;
}


.hero p {

    max-width: 670px;

    margin: 0;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.65;
}


/* ============================================================
   UPDATE CLOCK
   ============================================================ */

.update-panel {

    min-width: 210px;

    padding-bottom: 3px;

    text-align: right;
}


.update-panel strong {

    display: block;

    margin-top: 8px;

    color: var(--text);

    font-size: 13px;

    font-variant-numeric:
        tabular-nums;

    transition:
        color 180ms ease,
        text-shadow 180ms ease;
}


.update-panel strong.flash {

    color: var(--green);

    text-shadow:
        0 0 15px
        rgba(var(--green-rgb), 0.35);
}


.update-panel > span:last-child {

    display: block;

    margin-top: 5px;

    color: var(--muted);

    font-size: 10px;

    font-variant-numeric:
        tabular-nums;
}


/* ============================================================
   WARNING
   ============================================================ */

.warning {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 17px;

    padding:
        15px
        17px;

    border:
        1px solid
        rgba(var(--yellow-rgb), 0.23);

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

    background:
        rgba(var(--yellow-rgb), 0.08);
}


.warning.hidden {
    display: none;
}


.warning-symbol {

    display: grid;

    place-items: center;

    flex:
        0
        0
        30px;

    width: 30px;
    height: 30px;

    border-radius: 9px;

    border:
        1px solid
        rgba(var(--yellow-rgb), 0.28);

    color: var(--yellow);

    font-weight: 900;
}


.warning strong {

    color: #f3d58c;

    font-size: 12px;
}


.warning p {

    margin:
        3px
        0
        0;

    color: #b9a46e;

    font-size: 11px;
}


/* ============================================================
   OVERALL
   ============================================================ */

.overall-card {

    position: relative;

    display: grid;

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

    align-items: center;

    gap: 20px;

    overflow: hidden;

    min-height: 108px;

    padding:
        23px
        26px;

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

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

    background:
        linear-gradient(
            135deg,
            rgba(17, 26, 40, 0.95),
            rgba(10, 15, 23, 0.95)
        );

    box-shadow:
        0 22px 65px
        rgba(0, 0, 0, 0.20);

    transition:
        border-color 350ms ease,
        box-shadow 350ms ease;
}


.overall-card.operational {

    border-color:
        rgba(var(--green-rgb), 0.12);
}


.overall-card.operational::before {

    content: "";

    position: absolute;

    inset: -1px;

    pointer-events: none;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(var(--green-rgb), 0.035) 50%,
            transparent 100%
        );

    transform: translateX(-100%);

    animation:
        statusSweep 8s
        ease-in-out
        infinite;
}


.overall-indicator {

    position: relative;

    display: grid;

    place-items: center;

    width: 42px;
    height: 42px;
}


.overall-ring {

    position: absolute;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background:
        rgba(148, 163, 184, 0.08);
}


.overall-dot {

    position: relative;

    z-index: 2;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: var(--muted);
}


.overall-card.operational .overall-dot {

    background: var(--green);

    box-shadow:
        0 0 18px
        rgba(var(--green-rgb), 0.45);

    animation:
        mainDotPulse 2.3s
        ease-in-out
        infinite;
}


.overall-card.operational .overall-ring {

    background:
        rgba(var(--green-rgb), 0.10);

    animation:
        mainRingPulse 2.3s
        ease-out
        infinite;
}


.overall-card.degraded .overall-dot {
    background: var(--yellow);
}


.overall-card.degraded .overall-ring {
    background:
        rgba(var(--yellow-rgb), 0.10);
}


.overall-card.outage .overall-dot,
.overall-card.partial_outage .overall-dot,
.overall-card.major_outage .overall-dot {
    background: var(--red);
}


.overall-card.outage .overall-ring,
.overall-card.partial_outage .overall-ring,
.overall-card.major_outage .overall-ring {
    background:
        rgba(var(--red-rgb), 0.10);
}


.overall-content {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.overall-content strong {

    font-size: 19px;

    font-weight: 750;

    letter-spacing: -0.025em;
}


.overall-content > span:last-child {

    color: var(--muted);

    font-size: 12px;
}


.overall-badge {

    position: relative;

    z-index: 2;

    min-width: 88px;

    padding:
        9px
        13px;

    border-radius: 999px;

    text-align: center;

    font-size: 10px;

    font-weight: 850;

    letter-spacing: 0.08em;
}


.overall-badge.operational {

    color: #76e9b4;

    border:
        1px solid
        rgba(var(--green-rgb), 0.18);

    background:
        rgba(var(--green-rgb), 0.09);

    animation:
        onlineGlow 2.6s
        ease-in-out
        infinite;
}


.overall-badge.degraded,
.overall-badge.unknown {

    color: #f0cf7a;

    background:
        rgba(var(--yellow-rgb), 0.09);
}


.overall-badge.outage,
.overall-badge.partial_outage,
.overall-badge.major_outage {

    color: #ff9aa5;

    background:
        rgba(var(--red-rgb), 0.09);
}


/* ============================================================
   SECTIONS
   ============================================================ */

.content-section {
    padding-top: 58px;
}


.section-heading {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}


.section-heading h2 {

    margin:
        8px
        0
        0;

    font-size: 27px;

    font-weight: 750;

    letter-spacing: -0.04em;
}


.section-meta {

    padding-bottom: 3px;

    color: var(--muted);

    font-size: 10px;
}


/* ============================================================
   RESOLVERS
   ============================================================ */

.resolver-grid {

    display: grid;

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

    gap: 17px;
}


.resolver-card {

    overflow: hidden;

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

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

    background:
        linear-gradient(
            145deg,
            rgba(15, 23, 35, 0.96),
            rgba(10, 15, 23, 0.97)
        );

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.13);

    animation:
        cardEnter 520ms
        cubic-bezier(.2,.7,.3,1)
        both;
}


.resolver-card:nth-child(2) {
    animation-delay: 90ms;
}


.resolver-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding:
        20px
        21px;

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


.resolver-title {

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.resolver-title strong {

    font-size: 17px;

    font-weight: 760;
}


.resolver-title span {

    color: var(--muted);

    font-size: 10px;
}


.node-status {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        7px
        10px;

    border-radius: 999px;

    color: #76e9b4;

    background:
        rgba(var(--green-rgb), 0.09);

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.node-status::before {

    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;

    animation:
        smallDotPulse 2.2s
        ease-in-out
        infinite;
}


.node-status.operational {

    animation:
        onlineTextPulse 3s
        ease-in-out
        infinite;
}


.node-status.degraded,
.node-status.unknown {

    color: #f1cf78;

    background:
        rgba(var(--yellow-rgb), 0.09);
}


.node-status.outage {

    color: #ff98a4;

    background:
        rgba(var(--red-rgb), 0.09);
}


.endpoint-grid {

    display: grid;

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

    gap: 10px;

    padding: 14px;
}


.endpoint-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    min-height: 70px;

    padding:
        14px
        15px;

    border:
        1px solid
        rgba(148, 163, 184, 0.08);

    border-radius: 11px;

    background:
        rgba(13, 20, 30, 0.74);

    transition:
        border-color 150ms ease,
        background 150ms ease,
        transform 150ms ease;
}


.endpoint-card:hover {

    transform:
        translateY(-1px);

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

    background:
        var(--surface-2);
}


.endpoint-name {

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.endpoint-name strong {

    font-size: 12px;

    font-weight: 720;
}


.endpoint-name span {

    color: var(--muted);

    font-size: 9px;
}


.endpoint-state {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--green);

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 0.03em;

    text-transform: uppercase;
}


.endpoint-state::before {

    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;

    box-shadow:
        0 0 0 0
        rgba(var(--green-rgb), 0.28);

    animation:
        endpointPulse 2.4s
        ease-out
        infinite;
}


.endpoint-card:nth-child(2) .endpoint-state::before {
    animation-delay: 300ms;
}


.endpoint-card:nth-child(3) .endpoint-state::before {
    animation-delay: 600ms;
}


.endpoint-card:nth-child(4) .endpoint-state::before {
    animation-delay: 900ms;
}


.endpoint-state.degraded,
.endpoint-state.unknown {
    color: var(--yellow);
}


.endpoint-state.outage {
    color: var(--red);
}


.endpoint-state.degraded::before,
.endpoint-state.unknown::before,
.endpoint-state.outage::before {
    animation: none;
}


.resolver-footer {

    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding:
        12px
        20px;

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

    color: var(--muted);

    font-size: 9px;
}


/* ============================================================
   UPTIME
   ============================================================ */

.uptime-grid {

    display: grid;

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

    gap: 17px;
}


.uptime-card {

    overflow: hidden;

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

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

    background:
        rgba(13, 20, 30, 0.87);

    animation:
        cardEnter 520ms
        cubic-bezier(.2,.7,.3,1)
        both;
}


.uptime-card:nth-child(2) {
    animation-delay: 90ms;
}


.uptime-card-header {

    display: grid;

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

    align-items: center;

    gap: 10px;

    min-height: 64px;

    padding:
        15px
        20px;

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

    background:
        rgba(17, 26, 40, 0.72);
}


.uptime-resolver {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.uptime-resolver strong {

    font-size: 14px;

    font-weight: 750;
}


.uptime-resolver span {

    color: var(--muted);

    font-size: 9px;
}


.uptime-column {

    text-align: right;

    color: var(--muted);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.uptime-row {

    display: grid;

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

    align-items: center;

    gap: 10px;

    min-height: 58px;

    padding:
        12px
        20px;
}


.uptime-row + .uptime-row {

    border-top:
        1px solid
        rgba(148, 163, 184, 0.07);
}


.uptime-name {

    display: flex;

    align-items: center;

    gap: 10px;
}


.uptime-status {

    width: 6px;
    height: 6px;

    flex:
        0
        0
        6px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 0
        rgba(var(--green-rgb), 0.25);

    animation:
        uptimeDotPulse 2.8s
        ease-out
        infinite;
}


.uptime-status.degraded,
.uptime-status.unknown {

    background: var(--yellow);

    animation: none;
}


.uptime-status.outage {

    background: var(--red);

    animation: none;
}


.uptime-name-copy {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.uptime-name-copy strong {

    color: var(--text-soft);

    font-size: 11px;

    font-weight: 690;
}


.uptime-name-copy span {

    color: var(--muted);

    font-size: 9px;
}


.uptime-value {

    text-align: right;

    color: var(--text-soft);

    font-size: 12px;

    font-weight: 720;

    font-variant-numeric:
        tabular-nums;
}


/* ============================================================
   SERVICE INFO
   ============================================================ */

.service-info {

    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr;

    align-items: center;

    gap: 22px;

    margin-top: 58px;

    padding:
        19px
        22px;

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

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

    background:
        rgba(10, 15, 23, 0.62);
}


.service-info-item {

    display: flex;

    flex-direction: column;

    gap: 5px;

    text-align: center;
}


.service-info-item span {

    color: var(--muted);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.12em;
}


.service-info-item strong {

    font-size: 11px;

    font-weight: 650;
}


.info-separator {

    width: 1px;
    height: 28px;

    background: var(--border);
}


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

.footer {

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 20px;

    padding-top: 43px;

    color: var(--muted-dark);

    font-size: 9px;
}


.footer > :nth-child(2) {
    text-align: center;
}


.footer > :last-child {
    text-align: right;
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes livePulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(var(--green-rgb), 0.34);
    }

    70% {
        box-shadow:
            0 0 0 7px
            rgba(var(--green-rgb), 0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(var(--green-rgb), 0);
    }

}


@keyframes delayedPulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(var(--yellow-rgb), 0.28);
    }

    70% {
        box-shadow:
            0 0 0 7px
            rgba(var(--yellow-rgb), 0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(var(--yellow-rgb), 0);
    }

}


@keyframes mainDotPulse {

    0%,
    100% {
        opacity: 1;

        transform:
            scale(1);
    }

    50% {
        opacity: 0.78;

        transform:
            scale(0.84);
    }

}


@keyframes mainRingPulse {

    0% {
        transform:
            scale(0.75);

        opacity: 0.70;
    }

    70% {
        transform:
            scale(1.17);

        opacity: 0.18;
    }

    100% {
        transform:
            scale(1.17);

        opacity: 0;
    }

}


@keyframes endpointPulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(var(--green-rgb), 0.30);
    }

    65% {
        box-shadow:
            0 0 0 6px
            rgba(var(--green-rgb), 0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(var(--green-rgb), 0);
    }

}


@keyframes uptimeDotPulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(var(--green-rgb), 0.24);
    }

    70% {
        box-shadow:
            0 0 0 5px
            rgba(var(--green-rgb), 0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(var(--green-rgb), 0);
    }

}


@keyframes smallDotPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.52;
    }

}


@keyframes onlineGlow {

    0%,
    100% {
        box-shadow:
            0 0 0
            rgba(var(--green-rgb), 0);
    }

    50% {
        box-shadow:
            0 0 20px
            rgba(var(--green-rgb), 0.08);
    }

}


@keyframes onlineTextPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.78;
    }

}


@keyframes statusSweep {

    0%,
    74% {
        transform:
            translateX(-110%);
    }

    100% {
        transform:
            translateX(110%);
    }

}


@keyframes liveUpdate {

    0% {
        box-shadow:
            0 0 0 0
            rgba(var(--green-rgb), 0);
    }

    35% {
        box-shadow:
            0 0 0 5px
            rgba(var(--green-rgb), 0.08);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(var(--green-rgb), 0);
    }

}


@keyframes cardEnter {

    from {

        opacity: 0;

        transform:
            translateY(8px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }

}


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

@media (max-width: 820px) {

    .hero {

        grid-template-columns: 1fr;

        gap: 24px;

        padding-top: 70px;
    }


    .update-panel {
        text-align: left;
    }


    .resolver-grid,
    .uptime-grid {

        grid-template-columns:
            1fr;
    }


    .section-heading {

        flex-direction: column;

        align-items: start;

        gap: 7px;
    }


    .service-info {

        grid-template-columns:
            1fr;

        gap: 16px;
    }


    .info-separator {

        width: 100%;
        height: 1px;
    }


    .footer {

        display: flex;

        flex-direction: column;

        gap: 7px;

        text-align: center;
    }


    .footer > :last-child {
        text-align: center;
    }

}


@media (max-width: 560px) {

    .site {

        width:
            calc(100% - 22px);

        padding-top: 18px;
    }


    .brand-section {
        display: none;
    }


    .live-pill {

        min-width: auto;

        padding:
            8px
            10px;
    }


    .hero {

        padding-top: 58px;
    }


    .hero h1 {
        font-size: 42px;
    }


    .overall-card {

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

        padding:
            20px
            18px;
    }


    .overall-badge {

        grid-column:
            1 / -1;

        width: max-content;

        margin-left: 62px;
    }


    .endpoint-grid {

        grid-template-columns:
            1fr;
    }


    .uptime-card-header,
    .uptime-row {

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

        padding-left: 15px;
        padding-right: 15px;
    }

}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

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

    *,
    *::before,
    *::after {

        animation:
            none !important;

        transition:
            none !important;
    }

}


/* ============================================================
   V6 - STABLE REFRESH
   Cards werden bei Statusupdates nicht erneut eingeblendet.
   ============================================================ */

.resolver-card,
.uptime-card {
    animation: none !important;
}


/*
 * Nur der kleine Live-Indikator signalisiert eine
 * erfolgreiche Minuten-Aktualisierung.
 */

.live-pill.synced {
    animation:
        syncPulse 650ms
        ease-out;
}


@keyframes syncPulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(var(--green-rgb), 0);
    }

    35% {
        box-shadow:
            0 0 0 7px
            rgba(var(--green-rgb), 0.08);

        border-color:
            rgba(var(--green-rgb), 0.30);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(var(--green-rgb), 0);
    }

}


/*
 * Uhr bleibt stabil breit.
 * Dadurch springt das Layout nicht bei wechselnden Sekunden.
 */

#last-update-time,
#last-update-relative {
    font-variant-numeric:
        tabular-nums;
}


#last-update-time {
    min-width: 86px;
}


#last-update-relative {
    white-space: nowrap;
}


@media (max-width: 560px) {

    #last-update-relative {
        white-space: normal;
    }

}