/* Gekopieerd uit NorthByte Lab: /home/user/nb-lab/lab/effecten/E525-storingsdienst/effect.css (03-10-2026), ongewijzigd. */
/* ==========================================================================
   E525 · Storingsknop die weet wie dienst heeft
   Een contactblok dat met de klok meedenkt: tijdens kantoortijd is "Bel
   kantoor" de grote knop, daarbuiten wordt de storingsdienst groot en rood,
   met een ring die drie keer uitdijt. Er staat bij wie er deze week dienst
   heeft, volgens een vast rooster. Alleen transform en opacity.
   Instellen op .e525 met CSS-variabelen:
     --e525-kantoor   kleur van de kantoorknop     (standaard #1f4fa3)
     --e525-storing   kleur van de storingsknop    (standaard #d33a2c)
     --e525-kaart     achtergrond van het blok     (standaard #fff)
   ========================================================================== */

.e525 {
  display: grid; gap: 16px; padding: clamp(20px, 4vw, 34px); border-radius: 26px;
  background: var(--e525-kaart, #fff); color: var(--e525-inkt, #14202f); border: 1px solid rgba(20, 32, 47, .1);
}
.e525-status { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; font-size: 15px; }
.e525-status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #2fbf71; }
[data-e525-stand="storing"] .e525-status::before { background: var(--e525-storing, #d33a2c); }
html:not(.js) .e525-status { display: none; }
.e525-dienst { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 15px; }
.e525-foto { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #14202f; color: #fff; font-weight: 700; }
.e525-knoppen { display: grid; gap: 10px; }
.e525-knop {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 18px; border-radius: 18px;
  border: 1.5px solid rgba(20, 32, 47, .16); color: inherit; text-decoration: none;
}
.e525-knop svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.e525-knop b { display: block; font-size: 17px; }
.e525-knop small { display: block; font-size: 13.5px; opacity: .75; }
.e525-knop:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.e525-hoofd { min-height: 76px; border-color: transparent; color: #fff; }
.e525-kantoor.e525-hoofd { background: var(--e525-kantoor, #1f4fa3); }
.e525-storing.e525-hoofd { background: var(--e525-storing, #d33a2c); }
.e525-hoofd b { font-size: 20px; }
.e525-hoofd::after { content: ""; position: absolute; inset: -2px; border-radius: 20px; border: 2px solid var(--e525-storing, #d33a2c); opacity: 0; pointer-events: none; }
.e525-spoed { margin: 0; font-size: 14.5px; line-height: 1.5; opacity: .85; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e525-aan[data-e525-stand="storing"] .e525-storing.e525-hoofd::after { animation: e525-ring 1.6s ease-out .3s 3; }
  html:not([data-rm]) .e525-wissel .e525-hoofd { animation: e525-in .5s cubic-bezier(.2, .9, .25, 1) both; }
}
@keyframes e525-ring { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.06, 1.3); } }
@keyframes e525-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }