/* Plaatshouderpagina voor isoleren.vmdg.dev.
   Bewust klein gehouden: deze pagina verdwijnt zodra de applicatie er staat. */

:root {
    --grond: #f6f5f3;
    --kaart: #ffffff;
    --inkt: #1c1b19;
    --gedempt: #6b6862;
    --lijn: #e3e0da;
    --accent: #2f6f4f;
    --waarschuwing: #a5482a;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grond: #17181a;
        --kaart: #202225;
        --inkt: #eceae6;
        --gedempt: #9b978f;
        --lijn: #33363a;
        --accent: #7fbf9b;
        --waarschuwing: #e08d6f;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--grond);
    color: var(--inkt);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
}

.kaart {
    width: 100%;
    max-width: 34rem;
    padding: 40px;
    background: var(--kaart);
    border: 1px solid var(--lijn);
    border-radius: 12px;
}

.label {
    margin: 0 0 12px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

h1 {
    margin: 0 0 16px;
    font-size: 1.5rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.uitleg {
    margin: 0 0 28px;
    color: var(--gedempt);
}

.status {
    margin: 0;
    border-top: 1px solid var(--lijn);
}

.regel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--lijn);
}

dt {
    color: var(--gedempt);
    font-size: 0.875rem;
}

dd {
    margin: 0;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.vink {
    color: var(--accent);
    font-weight: 700;
}

.kruis {
    color: var(--waarschuwing);
    font-weight: 700;
}

a {
    color: var(--accent);
}

.voet {
    margin: 28px 0 0;
    font-size: 0.8125rem;
    color: var(--gedempt);
}