/* Master Control (PRAGMATICO-1184): stijl volgens de goedgekeurde mockups Main, Machine en Mobiel. */
:root{
  --bg:#05070b; --tekst:#e8eef5; --zacht:#a9bccb; --dim:#8fa3b3; --dimmer:#6f8496;
  --teal:#39B8BD; --teal-l:#7fe3e7; --teal-xl:#c9fbfc;
  --amber:#f0a43a; --amber-l:#ffc77a;
  --rood:#ff5468; --rood-l:#ff9aa6;
  --grijs:#7d8496; --grijs-l:#c3c8d4;
  --rand:rgba(127,227,231,.16);
  --sans:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--bg);color:var(--tekst);font-family:var(--sans);min-height:100%}
body{overflow-x:hidden;min-height:100vh}
a{color:var(--teal-l)}a:hover{color:var(--teal-xl)}
button{font-family:inherit}
.hidden{display:none!important}
.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--teal-l);outline-offset:3px}

/* ── Achtergrond ─────────────────────────────────────────── */
.bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.glow{position:absolute;width:900px;height:900px;left:50%;top:-380px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(57,184,189,.22),rgba(57,184,189,0) 62%);animation:breathe 7s ease-in-out infinite;transition:background 1.2s}
body.st-warn .glow{background:radial-gradient(circle,rgba(240,164,58,.16),rgba(57,184,189,.06) 40%,rgba(57,184,189,0) 62%)}
body.st-crit .glow{background:radial-gradient(circle,rgba(255,84,104,.22),rgba(255,84,104,0) 62%)}
@keyframes breathe{50%{opacity:.55;transform:translateX(-50%) scale(1.08)}}
.floor{position:absolute;left:-50%;right:-50%;bottom:-10%;height:70%;transform:perspective(600px) rotateX(62deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(57,184,189,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(57,184,189,.16) 1px,transparent 1px);
  background-size:64px 64px;animation:floor 6s linear infinite;
  mask-image:linear-gradient(to top,#000 10%,transparent 85%);-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%)}
@keyframes floor{to{background-position:0 64px}}
.scan{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
body.detail .floor{opacity:.35}

/* ── Gedeelde bouwstenen ─────────────────────────────────── */
.app{position:relative;z-index:1;max-width:1360px;margin:0 auto;padding:24px 32px 40px;display:flex;flex-direction:column;gap:40px}
.view{display:flex;flex-direction:column;gap:40px;min-width:0}
.merk{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--tekst)}
.merk:hover{color:var(--tekst)}
.merk-ring{transform-origin:20px 20px;animation:spin 12s linear infinite}
.merk-tekst{display:flex;flex-direction:column}
.merk-boven{font-weight:700;letter-spacing:.28em;font-size:13px;color:var(--teal-l)}
.merk-naam{font-weight:600;font-size:20px}
.kopbalk{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.kop-rechts{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.klok{font-size:13px;color:var(--dim)}
.knopje{appearance:none;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(127,227,231,.25);background:rgba(255,255,255,.03);color:#cfe9ea;font:600 14px var(--sans);cursor:pointer}
.knopje:hover{background:rgba(57,184,189,.16);color:#fff}

.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap}
.p-ok{background:rgba(57,184,189,.14);color:var(--teal-l)}
.p-warn{background:rgba(240,164,58,.16);color:var(--amber-l)}
.p-crit{background:rgba(255,84,104,.18);color:var(--rood-l)}
.p-stale{background:rgba(125,132,150,.2);color:var(--grijs-l)}
.p-info{background:rgba(255,255,255,.07);color:#a8b0c0}
.p-opgelost{background:rgba(57,184,189,.08);color:#9fd9db}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor;animation:blink 1.6s ease-in-out infinite;flex-shrink:0}
.p-crit .dot{animation-duration:.8s}
@keyframes blink{50%{opacity:.35}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}

h2.sectie{margin:0;font-size:28px;letter-spacing:-.01em}
.kop{font-size:12px;letter-spacing:.24em;font-weight:700;color:var(--teal-l)}
.leeg{padding:22px;border-radius:16px;border:1px dashed rgba(127,227,231,.2);color:var(--dim);font-size:15px}

/* ── Hero ────────────────────────────────────────────────── */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:32px}
.hero-tekst{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:22px}
.big{font-size:clamp(40px,6vw,84px);line-height:.98;letter-spacing:-.035em;font-weight:700;margin:0;overflow-wrap:anywhere}
.grad{background:linear-gradient(90deg,#e8fdfe,#7fe3e7 45%,#39B8BD);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad.warm{background-image:linear-gradient(90deg,#fff1dc,#ffc77a 45%,#f0a43a)}
.grad.heet{background-image:linear-gradient(90deg,#ffe3e7,#ff9aa6 45%,#ff5468)}
.hero-sub{margin:0;font-size:19px;line-height:1.5;color:var(--zacht);max-width:560px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:560px}
.stat{padding:16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);min-width:0}
.stat-w{font-family:var(--mono);font-size:34px;font-weight:700;line-height:1.1;white-space:nowrap}
.stat-w small{font-size:18px;color:var(--dimmer)}
.stat-l{font-size:13px;color:#9fb3c1}
.t-teal{color:var(--teal-l)}.t-amber{color:var(--amber-l)}.t-rood{color:var(--rood-l)}.t-grijs{color:var(--grijs-l)}

/* ── Orbit ───────────────────────────────────────────────── */
.orbit-fig{flex:1 1 520px;min-width:0;margin:0;display:flex;justify-content:center}
.kaartbak{position:relative;width:100%;max-width:580px;aspect-ratio:1/1}
.kaartbak>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring{transform-origin:300px 300px;animation:spin 40s linear infinite}
.ring.r2{animation-duration:70s;animation-direction:reverse}
.sweep{transform-origin:300px 300px;animation:spin 5s linear infinite}
.packet{stroke-dasharray:6 220;animation:flow 2.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-226}}
.core{transform-box:fill-box;transform-origin:center;animation:core 3s ease-in-out infinite}
@keyframes core{50%{transform:scale(1.07)}}
/* Het ankerpunt (left/top) is het midden van de STIP, niet van het hele blok:
   padding 6px + halve stip. Bovenste helft: label boven de stip. */
.knoop{--dot:20px;--anker:calc(-6px - var(--dot) / 2);position:absolute;transform:translate(-50%,var(--anker));display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;text-decoration:none;color:var(--tekst);padding:6px;border-radius:14px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.knoop.k-boven{flex-direction:column-reverse;--anker:calc(-100% + 6px + var(--dot) / 2)}
.knoop:hover{transform:translate(-50%,var(--anker)) scale(1.08);color:var(--tekst)}
.punt{width:var(--dot);height:var(--dot);flex:none;border-radius:50%;position:relative}
.punt::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid currentColor;animation:halo 2.4s ease-out infinite}
@keyframes halo{from{transform:scale(1);opacity:.9}to{transform:scale(2.6);opacity:0}}
.k-ok{color:var(--teal)}.k-ok .punt{background:var(--teal);box-shadow:0 0 18px var(--teal)}
.k-warn{color:var(--amber)}.k-warn .punt{background:var(--amber);box-shadow:0 0 18px var(--amber)}
.k-crit{color:var(--rood)}.k-crit .punt{background:var(--rood);box-shadow:0 0 24px var(--rood)}
.k-crit .punt::after{animation-duration:1.1s}
.k-stale{color:var(--grijs)}.k-stale .punt{background:var(--grijs)}.k-stale .punt::after{display:none}
.knaam{font-weight:600;font-size:15px;color:var(--tekst);white-space:nowrap}
.kinfo{font-size:11px;white-space:nowrap}

/* ── Filters en kaarten ──────────────────────────────────── */
.sectie-kop{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{appearance:none;border:1px solid rgba(127,227,231,.25);background:rgba(255,255,255,.03);color:#cfe9ea;font:600 14px var(--sans);padding:0 18px;min-height:44px;border-radius:999px;cursor:pointer}
.chip.on{background:var(--teal);color:#041416;border-color:var(--teal);box-shadow:0 0 24px rgba(57,184,189,.6)}
.kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
@media (min-width:1100px){.kaarten{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{position:relative;display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:18px;text-decoration:none;color:var(--tekst);min-width:0;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));border:1px solid var(--rand);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s;animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.card:hover{transform:translateY(-6px);border-color:rgba(127,227,231,.6);box-shadow:0 20px 60px -20px rgba(57,184,189,.55);color:var(--tekst)}
.card.c-warn{border-color:rgba(240,164,58,.45);box-shadow:0 0 0 1px rgba(240,164,58,.15),0 0 40px -10px rgba(240,164,58,.45)}
.card.c-crit{border-color:rgba(255,84,104,.55);box-shadow:0 0 0 1px rgba(255,84,104,.2),0 0 50px -10px rgba(255,84,104,.55)}
.card.c-stale{background:repeating-linear-gradient(135deg,rgba(125,132,150,.08) 0 10px,rgba(125,132,150,.02) 10px 20px)}
.card-kop{display:flex;justify-content:space-between;align-items:start;gap:10px}
.card-naam{display:flex;flex-direction:column;gap:4px;min-width:0}
.card-naam b{font-size:20px;font-weight:600}
.card-naam span{font-size:13px;color:var(--dim);line-height:1.35}
.meters{display:grid;grid-template-columns:70px minmax(0,1fr) 54px;gap:8px 10px;align-items:center;font-size:12px;color:#9fb3c1}
.meters .w{text-align:right;color:var(--tekst)}
.bar{height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:6px;transform-origin:left;animation:groei 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes groei{from{transform:scaleX(0)}}
.card-voet{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--dimmer);border-top:1px solid rgba(255,255,255,.06);padding-top:12px}
.card-bk{font-size:12px;color:var(--dim)}
.card-fout{font-size:12px;color:var(--amber-l);overflow-wrap:anywhere}

/* ── Signalen (detailpagina) ─────────────────────────────── */
.sig{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:start;padding:18px 20px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);animation:rise .8s both;text-decoration:none;color:var(--tekst)}
a.sig:hover{background:rgba(255,255,255,.06);color:var(--tekst)}
.sig.l-warn{border-color:rgba(240,164,58,.35)}
.sig.l-crit{border-color:rgba(255,84,104,.5);box-shadow:0 0 40px -16px rgba(255,84,104,.6)}
.sig.dicht{opacity:.8}
.sig-tekst{display:flex;flex-direction:column;gap:6px;min-width:0}
.sig-tekst b{font-size:17px;overflow-wrap:anywhere}
.sig-tekst span{font-size:14px;color:var(--zacht);line-height:1.5}
.sig-tijd{font-size:13px;color:var(--dimmer);white-space:nowrap;text-align:right}

/* ── Mobiel: dienstdoende-signaal (Mobiel-mockup) ───────── */
.alarm{display:none}

/* ── Detail ──────────────────────────────────────────────── */
.terug{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;font-weight:600;font-size:14px;text-decoration:none;border:1px solid rgba(127,227,231,.35);color:#cff6f7;background:rgba(57,184,189,.08)}
.terug:hover{background:rgba(57,184,189,.2);color:#fff}
.d-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.d-bron{font-size:13px;color:var(--dim)}
.d-kop{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px}
.d-titel{display:flex;flex-direction:column;gap:10px;min-width:0}
.d-titel h1{margin:0;font-size:clamp(38px,5vw,72px);letter-spacing:-.035em;line-height:1;overflow-wrap:anywhere}
.d-titel .rol{font-size:17px;color:var(--zacht)}
.d-titel .kenmerk{font-size:13px;color:var(--dim)}
.tegels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;flex:1 1 560px;max-width:720px}
.paneel{position:relative;padding:22px;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));border:1px solid var(--rand);animation:rise .8s cubic-bezier(.2,.8,.2,1) both;min-width:0}
.tegel{padding:14px 16px;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.tegel .w{font-family:var(--mono);font-size:30px;font-weight:700;line-height:1.1;white-space:nowrap}
.tegel .l{font-size:12px;color:var(--dim)}
.tegel svg{width:100%;height:34px;display:block;margin-top:6px}
.spark{fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.teken{stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000);animation:teken 2.2s cubic-bezier(.4,0,.2,1) forwards}
@keyframes teken{to{stroke-dashoffset:0}}
.trend-kop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.trend-kop b{font-size:20px}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{appearance:none;border:1px solid rgba(127,227,231,.25);background:transparent;color:#cfe9ea;font:600 14px var(--sans);padding:0 16px;min-height:44px;border-radius:12px;cursor:pointer}
.tab.on{background:var(--teal);color:#041416;border-color:var(--teal);box-shadow:0 0 22px rgba(57,184,189,.55)}
.trend svg{width:100%;height:auto;display:block}
.lijn{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.vlak{opacity:.18}
.drempel{stroke:var(--amber);stroke-dasharray:6 6;opacity:.7}
.nu{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{r:9;opacity:.4}}
.trend-noot{font-size:13px;color:var(--dim)}
.rij{display:flex;flex-wrap:wrap;gap:20px;align-items:start}
.rij>.breed{flex:999 1 560px}
.rij>.smal{flex:1 1 380px}
.stapel{display:flex;flex-direction:column;gap:12px}
.diensten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.dienst{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);min-width:0}
.dienst>span:nth-child(2){font-size:14px;font-weight:600;overflow-wrap:anywhere}
.dienst>span:last-child{font-size:12px;color:var(--dim)}
.led{width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);animation:blink 2s ease-in-out infinite}
.led.fout{background:var(--rood);box-shadow:0 0 12px var(--rood);animation-duration:.9s}
.led.let{background:var(--amber);box-shadow:0 0 12px var(--amber)}
.led.oud{background:var(--grijs);box-shadow:none;animation:none}
.groot-getal{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.groot-getal .mono{font-size:44px;font-weight:700;color:var(--teal-l);line-height:1}
.groot-getal span:last-child{font-size:14px;color:var(--zacht)}
.fw{display:grid;grid-template-columns:96px minmax(0,1fr) 64px;gap:10px;align-items:center;font-size:13px}
.fw .bar{height:10px;border-radius:10px;background:rgba(255,255,255,.06)}
.fw .bar i{border-radius:10px;background:linear-gradient(90deg,#2d9499,#7fe3e7)}
.fw .bar i.let{background:linear-gradient(90deg,#a8650f,#ffc77a)}
.fw .bar i.fout{background:linear-gradient(90deg,#a3202f,#ff9aa6)}
.fw>span:last-child{text-align:right}
.fw>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw.cert{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 64px}
.noot{margin:0;font-size:14px;color:var(--zacht);line-height:1.55}
.noot b{color:var(--tekst)}
/* back-uptijdlijn */
.tijdlijn{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:4px;align-items:end;height:120px;padding-top:8px}
.tl-dag{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;border-radius:4px;outline:none}
.tl-dag i{display:block;width:100%;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#7fe3e7,#2d9499);transform-origin:bottom;animation:opbouw .9s cubic-bezier(.2,.8,.2,1) both;min-height:4px}
.tl-dag.fout i{background:linear-gradient(180deg,#ff9aa6,#a3202f);height:100%!important;opacity:.85}
.tl-dag.geen i{background:rgba(255,255,255,.07);height:100%!important}
.tl-dag.vandaag i{box-shadow:0 0 18px rgba(127,227,231,.7)}
.tl-dag:hover i,.tl-dag:focus i{filter:brightness(1.3)}
@keyframes opbouw{from{transform:scaleY(0)}}
.tl-as{display:flex;justify-content:space-between;font-size:12px;color:var(--dimmer)}
.tl-info{min-height:22px;font-size:13px;color:var(--zacht)}
.tl-legenda{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--dim)}
.tl-legenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.term{background:#020305;border:1px solid rgba(127,227,231,.2);border-radius:14px;padding:16px;font-size:13px;line-height:1.7;color:#9fe8ea;overflow-x:auto}
.term .c{color:var(--dimmer)}
.caret{display:inline-block;width:9px;height:16px;background:var(--teal-l);vertical-align:-3px;animation:blink 1s steps(2) infinite}

/* ── Login ───────────────────────────────────────────────── */
.login{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.login-radar{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.golf{position:absolute;left:-180px;top:-180px;width:360px;height:360px;border-radius:50%;border:2px solid rgba(57,184,189,.45);animation:golf 3.4s ease-out infinite}
.golf.g2{animation-delay:1.13s}.golf.g3{animation-delay:2.26s}
@keyframes golf{from{transform:scale(.4);opacity:1}to{transform:scale(2.6);opacity:0}}
.login-kern{display:none}
.login-box{position:relative;width:100%;max-width:400px;display:flex;flex-direction:column;gap:16px;padding:28px;border-radius:22px;
  background:rgba(8,12,18,.72);border:1px solid rgba(127,227,231,.25);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 80px -30px rgba(57,184,189,.5);animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.login-uitleg{margin:0;color:var(--zacht);font-size:15px;line-height:1.5}
.veld{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--dim);font-weight:600}
.veld em{font-style:normal;font-weight:400;color:var(--dimmer)}
.veld input{appearance:none;min-height:48px;padding:0 14px;border-radius:12px;border:1px solid rgba(127,227,231,.22);background:rgba(255,255,255,.04);color:var(--tekst);font:500 16px var(--sans);width:100%}
.veld input:focus{outline:none;border-color:var(--teal-l);box-shadow:0 0 0 3px rgba(57,184,189,.25)}
.veld.vraag input{border-color:var(--amber);box-shadow:0 0 0 3px rgba(240,164,58,.2)}
.knop{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:16px;font-weight:700;font-size:16px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;padding:0 18px}
.knop.hoofd{background:var(--teal);color:#041416;box-shadow:0 10px 30px -8px rgba(57,184,189,.8)}
.knop.hoofd:disabled{opacity:.6;cursor:progress}
.knop.twee{background:rgba(255,255,255,.06);color:var(--tekst);border:1px solid rgba(255,255,255,.12)}
.knop.twee:hover{color:#fff;background:rgba(255,255,255,.1)}
.login-fout{margin:0;min-height:20px;font-size:14px;color:var(--rood-l)}
.login-noot{margin:0;font-size:12px;color:var(--dimmer)}

.voet{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;font-size:12px;color:var(--dimmer);border-top:1px solid rgba(255,255,255,.06);padding-top:18px}
.fout-balk{padding:14px 18px;border-radius:14px;border:1px solid rgba(255,84,104,.4);background:rgba(255,84,104,.08);color:var(--rood-l);font-size:14px}

.laden{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;background:var(--bg);transition:opacity .5s}
.laden.weg{opacity:0;pointer-events:none}
.laden-ring{width:56px;height:56px;border-radius:50%;border:2px solid rgba(127,227,231,.15);border-top-color:var(--teal-l);animation:spin 1s linear infinite}

/* Verversing elke 15 s: geen intro-animaties opnieuw afspelen */
.rustig .card,.rustig .sig,.rustig .paneel,.rustig .bar>i,.rustig .tl-dag i,.rustig .alarm,.rustig .band,.rustig .sg-rij,.rustig .nacht i,.rustig .bb-rij{animation:none}
.rustig .teken{animation:none;stroke-dashoffset:0}
.rustig .trend.opnieuw .teken{animation:teken 2.2s cubic-bezier(.4,0,.2,1) forwards;stroke-dashoffset:var(--len,2000)}

/* ── Responsief──────────────────────────────────────────── */
@media (max-width:900px){
  .tegels{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
}
@media (max-width:640px){
  .app{padding:18px 16px 32px;gap:28px}
  .view{gap:28px}
  .merk-naam{font-size:18px}
  .klok{display:none}
  .hero{gap:20px}
  .hero-sub{font-size:16px}
  .stats{gap:8px}
  .stat{padding:12px 10px}
  .stat-w{font-size:24px}
  .stat-w small{font-size:14px}
  .stat-l{font-size:12px}
  .knaam{font-size:12px}
  .kinfo{display:none}
  .knoop{--dot:16px}
  h2.sectie{font-size:24px}
  .sig{grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;padding:16px}
  .sig .pill{grid-column:1;justify-self:start}
  .sig .sig-tijd{grid-column:2;grid-row:1}
  .sig .sig-tekst{grid-column:1/-1}
  .sig-tekst b{font-size:16px}
  .tegel .w{font-size:24px}
  .groot-getal .mono{font-size:36px}
  .fw{grid-template-columns:80px minmax(0,1fr) 52px}
  .fw.cert{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 52px}
  .tijdlijn{gap:2px;height:96px}
  .card{padding:18px}
  /* Mobiel-mockup: het belangrijkste signaal als pulserende kern bovenaan */
  .alarm{display:flex;position:relative;flex-direction:column;align-items:center;gap:14px;padding:150px 0 0;text-align:center;text-decoration:none;color:var(--tekst);overflow:hidden;border-radius:24px}
  .alarm:hover{color:var(--tekst)}
  .alarm-radar{position:absolute;left:50%;top:-110px;width:440px;height:440px;margin-left:-220px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(240,164,58,.22),rgba(240,164,58,0) 60%)}
  .alarm .golf{left:50%;top:10px;width:120px;height:120px;margin-left:-60px;border-color:rgba(240,164,58,.7);animation:golfk 2.6s ease-out infinite}
  .alarm .golf.g2{animation-delay:.85s}.alarm .golf.g3{animation-delay:1.7s}
  @keyframes golfk{from{transform:scale(.6);opacity:1}to{transform:scale(2.6);opacity:0}}
  .alarm-kern{position:absolute;left:50%;top:26px;width:88px;height:88px;margin-left:-44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle,#ffd59a,#f0a43a 55%,#a85f10);box-shadow:0 0 60px rgba(240,164,58,.8);animation:klop 1.3s ease-in-out infinite}
  .alarm.l-crit .alarm-radar{background:radial-gradient(circle,rgba(255,84,104,.26),rgba(255,84,104,0) 60%)}
  .alarm.l-crit .golf{border-color:rgba(255,84,104,.75)}
  .alarm.l-crit .alarm-kern{background:radial-gradient(circle,#ffc2c9,#ff5468 55%,#8f1424);box-shadow:0 0 60px rgba(255,84,104,.85)}
  @keyframes klop{50%{transform:scale(1.06)}}
  .alarm-label{font-size:13px;color:var(--amber-l);position:relative}
  .alarm.l-crit .alarm-label{color:var(--rood-l)}
  .alarm h2{margin:0;font-size:26px;line-height:1.15;letter-spacing:-.02em;position:relative;overflow-wrap:anywhere}
  .alarm-detail{font-size:15px;color:var(--zacht);position:relative;line-height:1.45}
  .alarm-kaart{position:relative;align-self:stretch;text-align:left;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:16px 18px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;font-size:13px}
  .alarm-kaart span:nth-child(odd){color:var(--dim)}
  .alarm .knop{position:relative;align-self:stretch}
  .alarm-meer{position:relative;font-size:13px;color:var(--dim)}
  .login-box{padding:22px}
  .login-radar{top:120px}
}
@media (max-width:380px){
  .stat-w{font-size:21px}
  .merk svg{width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;stroke-dashoffset:0!important}}
/* Rustige sfeerbeweging blijft ook bij verminderde beweging: de radar is de kern
   van het beeld (Guido, 09-10-2026). Alleen intro- en springeffecten gaan uit. */
@media (prefers-reduced-motion:reduce){
  .kaartbak .sweep{animation:spin 8s linear infinite!important}
  .kaartbak .ring{animation:spin 60s linear infinite!important}
  .kaartbak .ring.r2{animation:spin 90s linear infinite reverse!important}
  .kaartbak .packet{animation:flow 3.5s linear infinite!important}
  .kaartbak .punt::after{animation:halo 3s ease-out infinite!important}
  .led{animation:blink 2.5s ease-in-out infinite!important}
}
.dienst.heel{grid-column:1/-1}
@media (max-width:640px){
  .fw.cert{grid-template-columns:minmax(0,1fr) 52px;gap:6px 10px}
  .fw.cert>span:first-child{grid-column:1/-1;white-space:normal;overflow-wrap:anywhere}
}

/* Het overzicht wordt elke 15 s opnieuw opgebouwd. Een negatieve vertraging uit
   de klok laat radar, ringen en pakketjes doorlopen in plaats van terug te springen. */
.kaartbak[style] .sweep,.kaartbak[style] .ring,.kaartbak[style] .packet{animation-delay:var(--t)!important}

/* Sleutels: YubiKey/passkey registreren */
.sleutels{width:min(460px,calc(100vw - 32px));padding:26px;border-radius:22px;border:1px solid var(--rand);background:linear-gradient(160deg,#0d1419,#070b0f);color:var(--tekst);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(57,184,189,.08)}
.sleutels::backdrop{background:rgba(2,5,8,.72);backdrop-filter:blur(4px)}
.sleutels h2{margin:0 0 6px;font:600 22px var(--sans)}
.sleutels-uitleg{margin:0 0 16px;color:#9fb6b8;font-size:14px;line-height:1.5}
.sleutels-lijst{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.sleutels-lijst li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--rand);font:500 14px var(--mono,monospace)}
.sleutels-lijst li.leeg{color:#8aa0a2;font-family:var(--sans)}
.sleutels-veld{display:grid;gap:6px;font-size:13px;color:#9fb6b8}
.sleutels-veld input{min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--rand);background:rgba(255,255,255,.04);color:var(--tekst);font:500 15px var(--sans)}
.sleutels-melding{min-height:20px;margin:12px 0;font-size:14px;color:var(--teal-l)}
.sleutels-knoppen{display:flex;gap:10px;flex-wrap:wrap}
.knopje.primair{background:var(--teal);color:#041014;border-color:var(--teal)}
.knopje.primair:hover{background:var(--teal-l);color:#041014}
.knopje:disabled{opacity:.5;cursor:default}
@media (max-width:640px){#sleutels-knop{padding:0 12px}}

/* ── Applicaties (kaart, detail) ─────────────────────────── */
.card-apps{display:flex;flex-direction:column;gap:8px;min-width:0}
.card-apps-kop{font-size:12px;color:var(--dim)}
.card-apps-kop b{font-weight:700}
.app-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.app-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.4;
  background:rgba(57,184,189,.1);color:var(--teal-l);border:1px solid rgba(57,184,189,.22);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-chip i{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.app-chip.a-warn{background:rgba(240,164,58,.13);color:var(--amber-l);border-color:rgba(240,164,58,.4)}
.app-chip.a-crit{background:rgba(255,84,104,.16);color:var(--rood-l);border-color:rgba(255,84,104,.55);box-shadow:0 0 16px -4px rgba(255,84,104,.6)}
.app-chip.a-crit i{box-shadow:0 0 8px currentColor;animation:blink .8s ease-in-out infinite}
.app-chip.a-onbekend{background:rgba(125,132,150,.14);color:var(--grijs-l);border-color:rgba(125,132,150,.3)}
.apps-lijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:10px}
.app-rij{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:6px 12px;align-items:start;padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);min-width:0;animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.app-rij>.led{margin-top:6px}
.app-rij.a-warn{border-color:rgba(240,164,58,.35)}
.app-rij.a-crit{border-color:rgba(255,84,104,.55);background:rgba(255,84,104,.06);box-shadow:0 0 36px -16px rgba(255,84,104,.7)}
.app-hoofd{display:flex;flex-direction:column;gap:3px;min-width:0}
.app-hoofd b{font-size:16px;overflow-wrap:anywhere}
.app-rol{font-size:12px;color:var(--dim)}
.app-url{font-size:13px;overflow-wrap:anywhere;text-decoration:none}
.app-url:hover{text-decoration:underline}
.app-url.geen{color:var(--dimmer)}
.app-reden{font-size:13px;color:var(--zacht);line-height:1.45;overflow-wrap:anywhere}
.app-rij.a-crit .app-reden{color:var(--rood-l)}
.app-rij.a-warn .app-reden{color:var(--amber-l)}
.app-meting{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:12px;text-align:right;white-space:nowrap}
.app-status{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--teal-l)}
.app-status.a-warn{color:var(--amber-l)}.app-status.a-crit{color:var(--rood-l)}.app-status.a-onbekend{color:var(--grijs-l)}
.app-units{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;min-width:0}
.unit{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:3px 8px;border-radius:8px;font:500 12px var(--mono);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);min-width:0}
.unit span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.unit b{font-weight:700;flex-shrink:0}
.unit.u-ok b{color:var(--teal-l)}
.unit.u-fout{border-color:rgba(255,84,104,.4)}.unit.u-fout b{color:var(--rood-l)}
.unit.u-uit b{color:var(--amber-l)}
.unit.u-onbekend b{color:var(--grijs-l)}
.tl-plan{font-size:13px;color:var(--teal-l)}
.rustig .app-rij{animation:none}
@media (max-width:640px){
  .app-rij{grid-template-columns:12px minmax(0,1fr);padding:12px 14px}
  .app-meting{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 12px;text-align:left;white-space:normal}
}

/* ── Overzicht: banden voor signalen en back-ups ─────────── */
.band{position:relative;display:flex;flex-direction:column;gap:18px;padding:26px 28px;border-radius:24px;min-width:0;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));border:1px solid var(--rand);animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.band::before{content:'';position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(127,227,231,.7),transparent)}
.band-kop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px}
.band-titel{display:flex;flex-direction:column;gap:6px;min-width:0}

/* signalen */
.sg-tellers{display:flex;flex-wrap:wrap;gap:8px}
.sg-teller{display:inline-flex;align-items:baseline;gap:8px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;background:rgba(255,255,255,.05);color:#a8b0c0;border:1px solid rgba(255,255,255,.08)}
.sg-teller b{font-size:17px}
.sg-teller.l-crit{color:var(--rood-l);background:rgba(255,84,104,.12);border-color:rgba(255,84,104,.4);box-shadow:0 0 24px -8px rgba(255,84,104,.7)}
.sg-teller.l-warn{color:var(--amber-l);background:rgba(240,164,58,.1);border-color:rgba(240,164,58,.35)}
.sg-lijst{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.sg-rij{position:relative;display:grid;grid-template-columns:112px minmax(180px,280px) minmax(0,1fr) auto;grid-template-areas:"niveau machines tekst tijd";
  gap:8px 20px;align-items:center;padding:14px 20px 14px 22px;background:rgba(255,255,255,.02);animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.sg-rij+.sg-rij{border-top:1px solid rgba(255,255,255,.06)}
.sg-rij::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--grijs)}
.sg-rij.l-crit{background:linear-gradient(90deg,rgba(255,84,104,.14),rgba(255,84,104,.02) 45%)}
.sg-rij.l-crit::before{background:var(--rood);box-shadow:0 0 14px var(--rood)}
.sg-rij.l-warn{background:linear-gradient(90deg,rgba(240,164,58,.08),rgba(240,164,58,0) 40%)}
.sg-rij.l-warn::before{background:var(--amber);box-shadow:0 0 12px var(--amber)}
.sg-niveau{grid-area:niveau;display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#a8b0c0}
.sg-rij.l-crit .sg-niveau{color:var(--rood-l)}
.sg-rij.l-warn .sg-niveau{color:var(--amber-l)}
.sg-rij.l-crit .dot{animation-duration:.8s}
.sg-rij.l-info .dot{animation:none;box-shadow:none;opacity:.7}
.sg-machines{grid-area:machines;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.sg-tekst{grid-area:tekst;display:flex;flex-direction:column;gap:3px;min-width:0}
.sg-tekst b{font-size:16px;font-weight:600;overflow-wrap:anywhere}
.sg-tekst span{font-size:13px;color:var(--zacht);line-height:1.45;overflow-wrap:anywhere}
.sg-tijd{grid-area:tijd;font-size:12px;color:var(--dimmer);white-space:nowrap;text-align:right}
.m-chip{display:inline-flex;align-items:center;gap:7px;max-width:100%;min-height:32px;padding:0 12px 0 10px;border-radius:999px;font-size:13px;font-weight:600;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid;transition:filter .2s}
.m-chip i{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:currentColor;box-shadow:0 0 10px currentColor}
.m-chip.k-ok{color:var(--teal-l);border-color:rgba(57,184,189,.35);background:rgba(57,184,189,.08)}
.m-chip.k-warn{color:var(--amber-l);border-color:rgba(240,164,58,.4);background:rgba(240,164,58,.09)}
.m-chip.k-crit{color:var(--rood-l);border-color:rgba(255,84,104,.5);background:rgba(255,84,104,.11)}
.m-chip.k-stale{color:var(--grijs-l);border-color:rgba(125,132,150,.4);background:rgba(125,132,150,.1)}
.m-chip.k-stale i{box-shadow:none}
.m-chip:hover{filter:brightness(1.3)}
.m-chip.klein{min-height:26px;font-size:12px;padding:0 10px 0 8px}
.sg-opgelost{display:flex;flex-direction:column;gap:6px}
.sg-opgelost-knop{appearance:none;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:999px;
  border:1px solid rgba(127,227,231,.18);background:transparent;color:#9fd9db;font:600 14px var(--sans);cursor:pointer}
.sg-opgelost-knop:hover{background:rgba(57,184,189,.08)}
.sg-opgelost-knop .pijl{transition:transform .25s;opacity:.7}
.sg-opgelost.open .pijl{transform:rotate(180deg)}
.sg-dicht{display:flex;flex-direction:column}
.sg-dicht[hidden]{display:none}
.sg-d{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 12px;border-top:1px dashed rgba(255,255,255,.07);color:var(--dim);font-size:14px}
.sg-d-titel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-d-tijd{font-size:12px;color:var(--dimmer);white-space:nowrap}
.sg-rustig{display:flex;align-items:center;gap:26px;padding:22px 24px;background:radial-gradient(ellipse at 8% 50%,rgba(57,184,189,.13),transparent 55%)}
.sg-rustig-beeld{width:104px;height:104px;flex-shrink:0;overflow:visible}
.sg-rustig .adem{transform-box:fill-box;transform-origin:center;animation:adem 6s ease-in-out infinite}
@keyframes adem{50%{opacity:.5;transform:scale(1.14)}}
.sg-rustig-tekst{display:flex;flex-direction:column;gap:6px;min-width:0}
.sg-rustig-tekst b{font-size:26px;letter-spacing:-.015em;background:linear-gradient(90deg,#e8fdfe,#7fe3e7 60%,#39B8BD);-webkit-background-clip:text;background-clip:text;color:transparent}
.sg-rustig-tekst span{font-size:15px;color:var(--zacht);line-height:1.5}

/* back-ups naar SAFFIERII */
.bb-band{background:radial-gradient(ellipse 55% 140% at 0% 0%,rgba(57,184,189,.12),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012))}
.bb-samen{display:inline-flex;align-items:baseline;gap:10px;font-size:14px;color:var(--zacht)}
.bb-samen b{font-size:30px;color:var(--teal-l);line-height:1;text-shadow:0 0 24px rgba(57,184,189,.5)}
.bb-samen b small{font-size:16px;color:var(--dimmer);text-shadow:none}
.bb-samen em{font-style:normal;color:var(--rood-l);margin-left:4px}
.bb-tabel{display:flex;flex-direction:column}
.bb-rij{display:grid;grid-template-columns:minmax(150px,1fr) minmax(230px,1.9fr) minmax(150px,1fr) minmax(130px,.85fr) minmax(220px,1.3fr);
  grid-template-areas:"naam nachten laatste groot volgende";gap:8px 24px;align-items:center;padding:14px 12px;border-top:1px solid rgba(255,255,255,.06);
  text-decoration:none;color:var(--tekst);transition:background .2s;animation:rise .7s cubic-bezier(.2,.8,.2,1) both;min-width:0}
a.bb-rij:hover{background:rgba(127,227,231,.045);color:var(--tekst)}
.bb-rij.bb-as{border-top:0;padding-top:0;padding-bottom:8px;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dimmer);animation:none}
.bb-naam{grid-area:naam;display:flex;align-items:center;gap:12px;min-width:0}
.bb-naam>i{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:currentColor;box-shadow:0 0 12px currentColor}
.bb-naam>i.k-stale{box-shadow:none}
.bb-naam>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.bb-naam b{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-rij small{font:500 11px var(--mono);color:var(--dimmer);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bb-nachten{grid-area:nachten;display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:5px;height:38px;align-items:end;min-width:0}
.bb-nachten.as{height:auto;align-items:center;white-space:nowrap}
.nacht{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;border-radius:5px}
.nacht.nu{background:rgba(127,227,231,.07);box-shadow:inset 0 0 0 1px rgba(127,227,231,.14)}
.nacht i{display:block;width:min(100%,12px);border-radius:3px;transform-origin:bottom;animation:opbouw .8s cubic-bezier(.2,.8,.2,1) both}
.n-ok i{background:linear-gradient(180deg,#c9fbfc,#39B8BD 55%,#1f7f84);box-shadow:0 0 10px rgba(57,184,189,.55)}
.n-fout i{height:100%;background:linear-gradient(180deg,#ffc2c9,#ff5468 55%,#a3202f);box-shadow:0 0 14px rgba(255,84,104,.75)}
.n-mist,.n-hol,.n-wacht{align-items:center}
.n-mist i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.14);animation-name:verschijn}
.n-hol i{width:12px;height:12px;border-radius:50%;border:2px solid var(--teal-l);box-shadow:0 0 10px rgba(57,184,189,.55),inset 0 0 5px rgba(57,184,189,.45);animation-name:verschijn}
.n-wacht i{width:12px;height:12px;border-radius:50%;border:1.5px dashed rgba(127,227,231,.6);animation-name:verschijn}
@keyframes verschijn{from{opacity:0;transform:scale(.3)}}
.bb-laatste{grid-area:laatste;display:flex;flex-direction:column;gap:3px;min-width:0}
.bb-laatste b{font-size:14px;font-weight:600;color:var(--teal-l);white-space:nowrap}
.b-oud .bb-laatste b{color:var(--amber-l)}
.b-fout .bb-laatste b{color:var(--rood-l)}
.b-nooit .bb-laatste b,.b-geen .bb-laatste b{color:var(--grijs-l)}
.bb-groot{grid-area:groot;display:flex;flex-direction:column;gap:3px;min-width:0}
.bb-groot b{font-size:15px;font-weight:700;white-space:nowrap}
.bb-groot.onbekend small:first-child{color:var(--dim)}
.bb-volgende{grid-area:volgende;display:flex;align-items:center;gap:12px;min-width:0}
.bb-ring{width:40px;height:40px;flex-shrink:0;overflow:visible}
.bb-ring .baan{fill:none;stroke:rgba(127,227,231,.14);stroke-width:3}
.bb-ring .boog{fill:none;stroke:var(--teal);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(57,184,189,.9))}
.bb-ring .ring-kop{fill:#c9fbfc;filter:drop-shadow(0 0 3px #7fe3e7);animation:kopgloed 3s ease-in-out infinite}
@keyframes kopgloed{50%{opacity:.3}}
.bb-ring.r-eerste .baan{stroke:rgba(127,227,231,.55)}
.bb-ring.r-geen .baan{stroke:rgba(125,132,150,.4)}
.bb-ring.r-laat .boog{stroke:var(--amber);filter:drop-shadow(0 0 3px rgba(240,164,58,.9))}
.bb-v-tekst{display:flex;flex-direction:column;gap:3px;min-width:0}
.bb-v-tekst b{font-size:14px;font-weight:700;white-space:nowrap}
.bb-volgende.geen b{color:var(--grijs-l);font-family:var(--sans);font-weight:600}
.bb-volgende.laat b{color:var(--amber-l)}
.bb-volgende.eerste small{color:var(--teal-l)}
.bb-voet{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:12px;color:var(--dim)}
.bb-leg{display:inline-flex;align-items:center;gap:7px}
.bb-leg i{display:inline-block;flex-shrink:0}
.bb-leg i.n-ok{width:7px;height:14px;border-radius:2px;background:linear-gradient(180deg,#c9fbfc,#39B8BD);box-shadow:0 0 8px rgba(57,184,189,.6)}
.bb-leg i.n-fout{width:7px;height:14px;border-radius:2px;background:linear-gradient(180deg,#ffc2c9,#ff5468);box-shadow:0 0 8px rgba(255,84,104,.6)}
.bb-leg i.n-hol{width:11px;height:11px;border-radius:50%;border:2px solid var(--teal-l)}
.bb-leg i.n-mist{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22)}
.bb-leg i.n-wacht{width:11px;height:11px;border-radius:50%;border:1.5px dashed rgba(127,227,231,.6)}
.bb-drempel{margin-left:auto;color:var(--dimmer)}

@media (max-width:1099px){
  .sg-rij{grid-template-columns:100px minmax(0,1fr) auto;grid-template-areas:"niveau machines tijd" ". tekst tekst"}
  .bb-rij{grid-template-columns:122px minmax(0,1fr) 150px 222px;grid-template-areas:"naam naam laatste volgende" "groot nachten nachten nachten";gap:12px 18px}
  .bb-rij.bb-as{grid-template-columns:122px minmax(0,1fr);grid-template-areas:". nachten"}
  .bb-as>:not(.bb-nachten){display:none}
}
@media (max-width:640px){
  .band{padding:20px 16px;border-radius:20px;gap:16px}
  .sg-rij{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"niveau tijd" "machines machines" "tekst tekst";padding:14px 14px 14px 18px;gap:10px 12px}
  .sg-teller{padding:5px 12px}
  .sg-rustig{flex-direction:column;text-align:center;gap:14px;padding:22px 10px}
  .sg-d{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
  .sg-d .m-chip{grid-column:1/-1;justify-self:start}
  .sg-d-titel{white-space:normal}
  .bb-rij{grid-template-columns:minmax(0,1fr) 30px minmax(0,1.25fr);grid-template-areas:"naam naam laatste" "nachten nachten nachten" "groot volgende volgende";padding:14px 2px;gap:12px 8px}
  .bb-rij.bb-as{grid-template-columns:minmax(0,1fr);grid-template-areas:"nachten"}
  .bb-naam{gap:10px}
  .bb-naam b{font-size:15px}
  .bb-volgende{gap:10px;justify-content:flex-end}
  .bb-ring{width:32px;height:32px}
  .bb-v-tekst b{font-size:13px}
  .bb-v-tekst small{white-space:normal}
  .bb-laatste{align-items:flex-end;text-align:right}
  .bb-nachten{gap:3px;height:32px}
  .bb-samen b{font-size:24px}
  .bb-drempel{margin-left:0}
}

/* Doorlopende sfeer in de banden (ademende kern, gloeiende ringkop) loopt via de klok
   door bij elke verversing. Bij verminderde beweging blijft alleen deze rustige sfeer. */
@media (prefers-reduced-motion:reduce){
  .sg-rustig .adem{animation:adem 8s ease-in-out infinite!important}
  .bb-ring .ring-kop{animation:kopgloed 4s ease-in-out infinite!important}
}
.band[style] .adem,.band[style] .ring-kop{animation-delay:var(--t)!important}