:root {
    --blue: #0041c0;
    --green: #9bff27;
    --white: #ffffff;
    --url-grey: #cccccc;

    --bg-image: url("background.png");
    --font: "acumin-pro-condensed", "Acumin Pro Condensed", "Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
}
.page {
    --pad-top: max(48px, env(safe-area-inset-top, 0px));
    --pad-bottom: max(13px, env(safe-area-inset-bottom, 0px));
    --units: 53.9;
    --u: clamp(7px, min(calc((100vh - var(--pad-top) - var(--pad-bottom)) / var(--units)), 4vw), 16px);
    --u: clamp(7px, min(calc((100dvh - var(--pad-top) - var(--pad-bottom)) / var(--units)), 4vw), 16px);
}

.countdown__label,
.unit__value,
.unit__label,
.news__heading,
.link,
.footer {
    text-box: trim-both cap alphabetic;
}


@supports not (text-box: trim-both cap alphabetic) {
    .page {
        --units: 57;
    }
}

* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    margin: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--blue) var(--bg-image) center center / cover no-repeat;
    color: var(--white);
    font-family: var(--font);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    display: flex;
    justify-content: center;
}

.page {
    width: min(400px, calc(100% - 28px));
    height: 100%;
    padding-top: var(--pad-top);
    padding-bottom: var(--pad-bottom);
    display: flex;
    flex-direction: column;
}

.news {
    margin-top: calc(var(--u) * 1.75);
}

.social {
    margin-top: auto;
    padding-top: calc(var(--u) * 1.25);
}

.countdown,
.news,
.social,
.footer {
    flex-shrink: 0;
}

a {
    touch-action: manipulation;
}

/* --- Countdown ---------------------------------------------------------- */

.countdown {
    display: flex;
    align-items: stretch;
    gap: calc(var(--u) * 3);
}

.countdown__logo {
    flex-shrink: 0;
    height: calc(var(--u) * 6.113);
    width: auto;
    aspect-ratio: 65 / 90;
}

.countdown__body {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 1);
    min-width: 0;
    flex: 1;
}

.countdown__label {
    margin: 0;
    font-size: calc(var(--u) * 2);
    font-weight: 300;
    line-height: 1;
}

.countdown__units {
    display: flex;
    justify-content: space-between;
    gap: calc(var(--u) * 0.5);
}

.unit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    gap: calc(var(--u) * 0.875);
}

.unit__value {
    color: var(--green);
    font-size: calc(var(--u) * 3);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.unit__label {
    font-size: calc(var(--u) * 1.25);
    font-weight: 300;
    line-height: 1;
}

/* --- Latest News -------------------------------------------------------- */

.news {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 1.25);
    min-height: 0;
}

.news__heading {
    margin: 0;
    font-size: calc(var(--u) * 3);
    font-weight: 300;
    line-height: 1;
}

.news__heading span {
    color: var(--green);
    font-weight: 700;
}

.news__list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 0.5);
}

.post {
    display: flex;
    align-items: stretch;
    height: calc(var(--u) * 5.82);
    gap: calc(var(--u) * 0.5);
    padding: calc(var(--u) * 0.5);
    border-radius: calc(var(--u) * 0.875);
    background: var(--white);
    text-decoration: none;
}

.post__image {
    flex-shrink: 0;
    align-self: center;
    width: calc(var(--u) * 4.82);
    height: calc(var(--u) * 4.82);
    border-radius: calc(var(--u) * 0.625);
    object-fit: cover;
    background: #d9d9d9;
}

.post__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: calc(var(--u) * 0.25);
    min-width: 0;
    flex: 1;
}

.post__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--blue);
    font-size: calc(var(--u) * 1.11);
    font-weight: 400;
    line-height: 1.15;
}

.post__url {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 0.25);
    min-width: 0;
    color: var(--url-grey);
    font-size: calc(var(--u) * 0.875);
    font-weight: 300;
    line-height: 1.15;
}

.post__url img {
    flex-shrink: 0;
    width: calc(var(--u) * 0.75);
    height: calc(var(--u) * 0.75);
}

.post__url span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* --- Buttons ------------------------------------------------------------ */

.links {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 1);
}

.link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--u) * 3.375);
    padding: 0 calc(var(--u) * 1.75);
    border: calc(var(--u) * 0.25) solid var(--green);
    border-radius: 2000px;
    color: var(--white);
    /* 1,385 statt 1,25 – ergibt auf dem Handy 20px statt 18,3px. */
    font-size: calc(var(--u) * 1.385);
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
    .link:hover {
        background: var(--green);
        color: var(--blue);
    }
}

.link:active {
    background: var(--green);
    color: var(--blue);
}

/* --- Social ------------------------------------------------------------- */

.social {
    display: flex;
    justify-content: center;
    gap: calc(var(--u) * 1);
    margin-top: auto;
}

.social__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--u) * 2.5);
    height: calc(var(--u) * 2.5);
    border-radius: 50%;
    background: var(--white);
}

.social__item img {
    width: calc(var(--u) * 1.5625);
    height: calc(var(--u) * 1.5625);
    object-fit: contain;
}

/* --- Footer ------------------------------------------------------------- */

.footer {
    margin: calc(var(--u) * 2) 0 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--u);
    font-weight: 400;
    letter-spacing: calc(var(--u) * 0.04375);
    line-height: 1;
    text-align: center;
}

.footer sup {
    font-size: 0.8em;
    vertical-align: super;
}