/* BoemeldonckFM — Bel de studio: de pagina waarmee een luisteraar inbelt (telefoon eerst). Zelfde stijl als de site: plat. */
:root {
    --suede: #7f1015; --suede-donker: #560608; --rood: #c41e26; --geel: #ffd400; --groen: #2a9d3a; --blauw: #2f6fb0;
    --zwart: #111; --vlak: #1c1c1c; --vlak2: #262626; --lijn: rgba(255, 255, 255, .12);
    --tekst: #fff; --stil: rgba(255, 255, 255, .72); --zwak: rgba(255, 255, 255, .45);
    --kop: "Anton", Impact, "Arial Narrow", sans-serif;
    color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--zwart); color: var(--tekst); }
body { font: 16px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; min-height: 100vh; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.verborgen { display: none !important; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }

/* kopbalk zoals op de site */
.kop { display: flex; align-items: center; gap: 12px; padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); background: var(--suede); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.kop-merk { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.kop-merk img { height: 44px; width: 44px; border-radius: 50%; display: block; }
.kop-merk .merk-woord { height: 24px; width: auto; border-radius: 0; }
.kop-label { margin-left: auto; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
@media (max-width: 330px) { .kop-merk .merk-woord { display: none; } }

main { max-width: 520px; margin: 0 auto; padding: 20px 16px; }
.scherm { display: grid; gap: 14px; }
.kaart { background: var(--vlak); border-radius: 8px; padding: 18px; display: grid; gap: 14px; }
.kaart > b { font-family: var(--kop); font-weight: 400; font-size: 26px; line-height: 1.05; text-transform: uppercase; }
.kaart p { margin: 0; color: var(--stil); }

/* intro */
.intro { padding: 4px 0 6px; }
.intro h1 { margin: 6px 0 6px; font-family: var(--kop); font-weight: 400; font-size: clamp(44px, 13vw, 64px); line-height: .95; text-transform: uppercase; }
.intro p { margin: 0; color: var(--stil); font-size: 17px; }
.live-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; background: var(--rood); padding: 4px 10px; border-radius: 4px; }
.live-label i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: puls 1.4s infinite; }
.live-label.uit { background: var(--vlak2); color: var(--stil); }
.live-label.uit i { background: var(--zwak); animation: none; }
@keyframes puls { 50% { opacity: .3; } }

/* velden */
.vak { display: grid; gap: 6px; }
.vak > span { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--stil); text-transform: uppercase; }
.vak em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--zwak); font-weight: 600; }
.vak input:not([type=range]) { width: 100%; padding: 14px; border-radius: 8px; border: 0; background: var(--vlak2); font-size: 17px; outline: none; }
.vak input:not([type=range]):focus { box-shadow: inset 0 0 0 2px var(--rood); }
input[type=range] { width: 100%; accent-color: var(--rood); height: 28px; margin: 0; }

.stappen { margin: 0; padding: 0; list-style: none; counter-reset: stap; display: grid; gap: 10px; }
.stappen li { counter-increment: stap; display: grid; grid-template-columns: 28px 1fr; gap: 10px; color: var(--stil); font-size: 15px; }
.stappen li::before { content: counter(stap); width: 28px; height: 28px; border-radius: 50%; background: var(--vlak2); color: var(--tekst); font-weight: 900; font-size: 14px; display: grid; place-items: center; }
.stappen b { color: var(--tekst); }

/* knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--vlak2); font-weight: 800; font-size: 16px; cursor: pointer; text-decoration: none; }
.knop:hover { background: #303030; }
.knop:active { transform: scale(.98); }
.knop.hoofd { background: var(--rood); }
.knop.hoofd:hover { background: #d4232c; }
.knop.groot { min-height: 64px; font-size: 20px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.knop svg { width: 24px; height: 24px; fill: currentColor; }
.knop:disabled { opacity: .55; cursor: default; transform: none; }
.fout { margin: 0; color: #ff8a8a; font-weight: 600; }
.fout:empty { display: none; }
.klein { font-size: 13px; color: var(--zwak) !important; }
.dicht { border-left: 6px solid var(--zwak); }

/* aan de lijn: de status is het grootste op het scherm */
.status { border-radius: 8px; padding: 18px; background: var(--vlak); display: grid; gap: 4px; border-left: 6px solid var(--zwak); }
.status-boven { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--stil); }
.lamp { width: 10px; height: 10px; border-radius: 50%; background: var(--zwak); }
.klok { margin-left: auto; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.status-groot { font-family: var(--kop); font-size: 96px; line-height: 1; margin-top: 6px; }
.status-groot:empty { display: none; }
.status-titel { font-family: var(--kop); font-weight: 400; font-size: 32px; line-height: 1.05; text-transform: uppercase; margin-top: 6px; }
.status-sub { color: var(--stil); }
.wacht-balk { height: 4px; border-radius: 2px; background: var(--vlak2); overflow: hidden; margin-top: 12px; }
.wacht-balk i { display: block; height: 100%; width: 30%; background: var(--geel); animation: loop 1.8s ease-in-out infinite; }
@keyframes loop { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }

.status.wacht { border-left-color: var(--geel); }
.status.wacht .lamp { background: var(--geel); animation: puls 1.4s infinite; }
.status.gesprek { border-left-color: var(--blauw); }
.status.gesprek .lamp { background: var(--blauw); }
.status.gesprek .wacht-balk, .status.lucht .wacht-balk, .status.weg .wacht-balk { display: none; }
.status.lucht { background: var(--rood); border-left-color: #fff; }
.status.lucht .status-boven, .status.lucht .status-sub { color: #fff; }
.status.lucht .lamp { background: #fff; animation: puls 1s infinite; }
.status.lucht .status-titel { font-size: 44px; }
.status.weg .lamp { background: #ff8a8a; animation: puls .8s infinite; }

.talkback { padding: 12px 16px; border-radius: 8px; background: var(--geel); color: #1a1400; font-weight: 900; text-align: center; text-transform: uppercase; letter-spacing: .06em; }
.bericht { padding: 14px 16px; border-radius: 8px; background: #13283d; border-left: 6px solid var(--blauw); display: grid; gap: 2px; cursor: pointer; }
.bericht small { font-size: 11px; font-weight: 900; letter-spacing: .14em; color: #a9cdf0; text-transform: uppercase; }
.bericht b { font-size: 22px; line-height: 1.25; }

.mic-rij { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.meter { position: relative; height: 14px; border-radius: 7px; background: var(--vlak2); overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; width: calc(var(--h, 0) * 100%); background: var(--groen); border-radius: 7px; }
.meter i.hard { background: var(--geel); }
.knop.mic { min-width: 150px; }
.knop.mic.uit { background: #3a1111; color: #ff9a9a; }
.stuur-rij { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.knop.ophangen { background: transparent; color: #ff8a8a; box-shadow: inset 0 0 0 2px #5a2020; }
.knop.ophangen:hover { background: #2a1010; }

.einde { text-align: left; border-left: 6px solid var(--rood); }