/* bestelklaar.nl – tijdelijke pagina. Kleuren alleen via variabelen (logo-kleuren, zoals de site). Mobiel eerst. */
:root {
    --bk-brand: #DB4838;
    --bk-brand-strong: #C43A2B;   /* knop: witte tekst 5,3:1 */
    --bk-ink: #3E3E40;
    --bg: #ffffff;
    --text: var(--bk-ink);
    --muted: #6b6b70;
    --on-brand: #ffffff;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1f1f21;
        --text: #f2f2f3;
        --muted: #b4b4b9;
    }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    line-height: 1.5;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 16px 24px;
    text-align: center;
}

h1 { margin: 0 0 16px; }

h1 img {
    display: block;
    width: min(320px, 80vw);
    height: auto;
}

.lead {
    margin: 0;
    max-width: 30ch;
    font-size: 1.25rem;
    font-weight: 600;
    text-wrap: balance;
}

.soon { margin: 0 0 16px; color: var(--muted); }

.button {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--bk-brand-strong);
    color: var(--on-brand);
    font-weight: 600;
    text-decoration: none;
}

.button:hover, .button:focus-visible { background: var(--bk-brand); }
.button:focus-visible { outline: 3px solid var(--bk-brand); outline-offset: 3px; }

footer {
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    text-align: center;
    color: var(--muted);
    font-size: .9rem;
}

footer p { margin: 0; }
footer a { color: inherit; }

@media (min-width: 700px) {
    h1 img { width: 420px; }
    .lead { font-size: 1.5rem; }
}