/* ═══════════════════════════════════════════════════════════════════════════
   De deur van CallrOS: inloggen, uitnodiging, wachtwoord vergeten, ongeldige
   link. Alles wat je ziet voordat je binnen bent.

   Dit is het ENIGE scherm met de kosmische merkstijl (Cosmos uit het design
   system): de donkere merkgradient, zeventig flonkerende sterren en twee
   gloedbollen. Het pakket is er expliciet over dat die laag nooit achter een
   werkscherm, tabel of formulier met werkdata hoort.

   Alle kleuren komen uit tokens.css, dat deze pagina vóór dit bestand laadt.
   De pagina staat op data-theme="dark", precies zoals Cosmos dat doet: de
   kaart is dan een donker paneel, de knop Soft Violet 400 met Midnight-tekst,
   en de links Violet 300. Geen enkele kleur uit het oude Callr-palet meer
   (Callr Purple, Deep Indigo, Electric Lavender): daar staat een controle op.

   Eén uitzondering op "geen ruwe kleuren", hieronder als --staal-* : de tinten
   waarmee de schuifdeuren van plaatstaal zijn gemaakt. Dat is een materiaal en
   geen merkkleur; het design system kent er geen token voor. Ze staan bij
   elkaar zodat ze te vinden zijn.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Zelf gehoste lettertypen: het portaal stuurt default-src 'self' mee, dus een
   stylesheet van Google Fonts of een woff2 van Fontshare gooit de browser weg. */
@font-face{font-family:'Inter';font-weight:100 900;font-style:normal;font-display:swap;
  src:url('/fonts/inter-var.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-weight:700;font-style:normal;font-display:swap;
  src:url('/fonts/satoshi-700.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-weight:900;font-style:normal;font-display:swap;
  src:url('/fonts/satoshi-900.woff2') format('woff2')}

:root{
  /* De schuifdeuren dragen sinds 17 oktober 2026 het materiaal van de werkomgeving zelf:
     lichte platen in de grondtinten van het dashboard, met witte panelen erin zoals de
     kaarten daar. Daarom staan hier geen eigen kleuren meer, alleen de curve. */
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:var(--font-body); font-size:var(--fs-ui-body); line-height:1.6;
  color:var(--text-primary); background:var(--midnight); -webkit-font-smoothing:antialiased}
body :focus-visible{outline:none; box-shadow:var(--focus-shadow)}

/* ---- de kosmische grond, components/brand/Cosmos.jsx ---- */
.ruimte{position:fixed; inset:0; overflow:hidden; background:var(--brand-gradient-dark);
  pointer-events:none}
.ster{position:absolute; border-radius:50%; background:var(--soft-white); opacity:.6;
  animation-name:flonker; animation-timing-function:linear; animation-iteration-count:infinite}
@keyframes flonker{0%,100%{opacity:.12}50%{opacity:.85}}
.ster:nth-child(1){width:1.32px;height:1.32px;left:62.17%;top:66.71%;animation-duration:3.71s;animation-delay:3.32s}
.ster:nth-child(2){width:1.98px;height:1.98px;left:74.63%;top:63.15%;animation-duration:4.45s;animation-delay:2.12s}
.ster:nth-child(3){width:0.88px;height:0.88px;left:65.18%;top:6.15%;animation-duration:4.17s;animation-delay:0.65s}
.ster:nth-child(4){width:0.95px;height:0.95px;left:78.62%;top:9.54%;animation-duration:3.04s;animation-delay:3.37s}
.ster:nth-child(5){width:1.44px;height:1.44px;left:44.48%;top:46.34%;animation-duration:4.35s;animation-delay:0.36s}
.ster:nth-child(6){width:1.51px;height:1.51px;left:32.34%;top:54.54%;animation-duration:4.72s;animation-delay:3.5s}
.ster:nth-child(7){width:1.72px;height:1.72px;left:28.89%;top:37.88%;animation-duration:4.64s;animation-delay:0.5s}
.ster:nth-child(8){width:1.96px;height:1.96px;left:86.91%;top:54.42%;animation-duration:2.3s;animation-delay:1.35s}
.ster:nth-child(9){width:1.4px;height:1.4px;left:85.85%;top:34.99%;animation-duration:2.78s;animation-delay:2.12s}
.ster:nth-child(10){width:0.75px;height:0.75px;left:3.17%;top:1.14%;animation-duration:3.15s;animation-delay:2.71s}
.ster:nth-child(11){width:2.06px;height:2.06px;left:1.31%;top:92.47%;animation-duration:4.36s;animation-delay:1.89s}
.ster:nth-child(12){width:1.23px;height:1.23px;left:61.4%;top:53.54%;animation-duration:4.31s;animation-delay:2.83s}
.ster:nth-child(13){width:0.81px;height:0.81px;left:36.95%;top:63.59%;animation-duration:3.08s;animation-delay:3.49s}
.ster:nth-child(14){width:1.01px;height:1.01px;left:41.49%;top:65.56%;animation-duration:4.83s;animation-delay:3.72s}
.ster:nth-child(15){width:1.14px;height:1.14px;left:62.61%;top:47.21%;animation-duration:2.8s;animation-delay:1.58s}
.ster:nth-child(16){width:0.77px;height:0.77px;left:46.53%;top:55.6%;animation-duration:3.01s;animation-delay:2.17s}
.ster:nth-child(17){width:1.61px;height:1.61px;left:2.46%;top:6.29%;animation-duration:2.3s;animation-delay:1.73s}
.ster:nth-child(18){width:0.71px;height:0.71px;left:46.03%;top:85.11%;animation-duration:4.57s;animation-delay:3.33s}
.ster:nth-child(19){width:1.74px;height:1.74px;left:61.74%;top:46.47%;animation-duration:2.2s;animation-delay:0.56s}
.ster:nth-child(20){width:2.13px;height:2.13px;left:7.5%;top:28.64%;animation-duration:3.68s;animation-delay:0.29s}
.ster:nth-child(21){width:2.13px;height:2.13px;left:19.94%;top:54.89%;animation-duration:4.52s;animation-delay:2.32s}
.ster:nth-child(22){width:1.56px;height:1.56px;left:82.69%;top:35.49%;animation-duration:2.81s;animation-delay:0.74s}
.ster:nth-child(23){width:0.62px;height:0.62px;left:30.51%;top:60.9%;animation-duration:2.11s;animation-delay:1.99s}
.ster:nth-child(24){width:1.46px;height:1.46px;left:8.27%;top:88.81%;animation-duration:2.62s;animation-delay:2.21s}
.ster:nth-child(25){width:0.85px;height:0.85px;left:47.2%;top:39.54%;animation-duration:3.62s;animation-delay:3.42s}
.ster:nth-child(26){width:0.63px;height:0.63px;left:27.4%;top:93.22%;animation-duration:2.52s;animation-delay:0.48s}
.ster:nth-child(27){width:2.35px;height:2.35px;left:96.64%;top:49.47%;animation-duration:4.13s;animation-delay:1.27s}
.ster:nth-child(28){width:2.1px;height:2.1px;left:85.42%;top:42.09%;animation-duration:4.75s;animation-delay:1.75s}
.ster:nth-child(29){width:1.59px;height:1.59px;left:83.24%;top:79.19%;animation-duration:2.16s;animation-delay:3.89s}
.ster:nth-child(30){width:1.54px;height:1.54px;left:37.91%;top:79.37%;animation-duration:2.44s;animation-delay:0.78s}
.ster:nth-child(31){width:2.31px;height:2.31px;left:86.71%;top:96.65%;animation-duration:2.4s;animation-delay:0.15s}
.ster:nth-child(32){width:2.33px;height:2.33px;left:87.75%;top:58.09%;animation-duration:3.56s;animation-delay:2.41s}
.ster:nth-child(33){width:1.45px;height:1.45px;left:47.96%;top:23.16%;animation-duration:2.65s;animation-delay:1.27s}
.ster:nth-child(34){width:1.43px;height:1.43px;left:43.48%;top:25.5%;animation-duration:2.06s;animation-delay:1.77s}
.ster:nth-child(35){width:1.25px;height:1.25px;left:85.64%;top:23.6%;animation-duration:3.34s;animation-delay:1.46s}
.ster:nth-child(36){width:0.88px;height:0.88px;left:15.94%;top:49.09%;animation-duration:2.27s;animation-delay:3.05s}
.ster:nth-child(37){width:2.42px;height:2.42px;left:22.97%;top:38.69%;animation-duration:4.32s;animation-delay:1.38s}
.ster:nth-child(38){width:1.43px;height:1.43px;left:12.62%;top:90.89%;animation-duration:4.88s;animation-delay:1.75s}
.ster:nth-child(39){width:1.4px;height:1.4px;left:95.54%;top:63.83%;animation-duration:3.26s;animation-delay:0.91s}
.ster:nth-child(40){width:2.37px;height:2.37px;left:81.09%;top:33.78%;animation-duration:4.0s;animation-delay:3.7s}
.ster:nth-child(41){width:2.03px;height:2.03px;left:21.56%;top:88.2%;animation-duration:4.1s;animation-delay:2.73s}
.ster:nth-child(42){width:1.18px;height:1.18px;left:6.87%;top:24.76%;animation-duration:3.68s;animation-delay:0.06s}
.ster:nth-child(43){width:2.44px;height:2.44px;left:43.29%;top:96.8%;animation-duration:4.56s;animation-delay:1.22s}
.ster:nth-child(44){width:1.29px;height:1.29px;left:11.51%;top:82.79%;animation-duration:4.32s;animation-delay:1.35s}
.ster:nth-child(45){width:0.88px;height:0.88px;left:84.6%;top:51.01%;animation-duration:2.14s;animation-delay:3.76s}
.ster:nth-child(46){width:0.99px;height:0.99px;left:0.9%;top:20.3%;animation-duration:4.63s;animation-delay:3.74s}
.ster:nth-child(47){width:0.56px;height:0.56px;left:60.75%;top:61.74%;animation-duration:4.87s;animation-delay:3.22s}
.ster:nth-child(48){width:0.97px;height:0.97px;left:87.94%;top:70.27%;animation-duration:3.49s;animation-delay:1.84s}
.ster:nth-child(49){width:1.63px;height:1.63px;left:41.28%;top:58.09%;animation-duration:3.71s;animation-delay:0.39s}
.ster:nth-child(50){width:0.58px;height:0.58px;left:2.49%;top:58.04%;animation-duration:2.13s;animation-delay:3.79s}
.ster:nth-child(51){width:1.09px;height:1.09px;left:83.2%;top:93.52%;animation-duration:4.16s;animation-delay:3.35s}
.ster:nth-child(52){width:2.19px;height:2.19px;left:28.69%;top:16.78%;animation-duration:2.01s;animation-delay:1.2s}
.ster:nth-child(53){width:1.77px;height:1.77px;left:46.57%;top:1.62%;animation-duration:3.26s;animation-delay:1.14s}
.ster:nth-child(54){width:1.85px;height:1.85px;left:98.68%;top:28.36%;animation-duration:4.64s;animation-delay:3.77s}
.ster:nth-child(55){width:1.84px;height:1.84px;left:7.95%;top:36.77%;animation-duration:3.43s;animation-delay:3.95s}
.ster:nth-child(56){width:2.01px;height:2.01px;left:57.01%;top:42.23%;animation-duration:3.19s;animation-delay:2.48s}
.ster:nth-child(57){width:2.39px;height:2.39px;left:97.46%;top:20.61%;animation-duration:2.2s;animation-delay:1.76s}
.ster:nth-child(58){width:0.51px;height:0.51px;left:60.5%;top:92.77%;animation-duration:2.88s;animation-delay:1.93s}
.ster:nth-child(59){width:2.4px;height:2.4px;left:1.71%;top:75.1%;animation-duration:2.84s;animation-delay:0.34s}
.ster:nth-child(60){width:2.39px;height:2.39px;left:3.31%;top:14.28%;animation-duration:2.22s;animation-delay:0.35s}
.ster:nth-child(61){width:1.79px;height:1.79px;left:89.39%;top:29.36%;animation-duration:2.24s;animation-delay:1.68s}
.ster:nth-child(62){width:2.09px;height:2.09px;left:31.38%;top:20.76%;animation-duration:2.91s;animation-delay:2.35s}
.ster:nth-child(63){width:1.24px;height:1.24px;left:31.57%;top:54.78%;animation-duration:3.37s;animation-delay:2.83s}
.ster:nth-child(64){width:0.6px;height:0.6px;left:87.34%;top:26.57%;animation-duration:4.63s;animation-delay:1.87s}
.ster:nth-child(65){width:0.63px;height:0.63px;left:57.99%;top:25.93%;animation-duration:2.54s;animation-delay:0.11s}
.ster:nth-child(66){width:2.38px;height:2.38px;left:63.21%;top:86.06%;animation-duration:2.44s;animation-delay:0.3s}
.ster:nth-child(67){width:1.36px;height:1.36px;left:18.08%;top:82.89%;animation-duration:3.26s;animation-delay:3.11s}
.ster:nth-child(68){width:1.96px;height:1.96px;left:44.68%;top:65.9%;animation-duration:4.45s;animation-delay:3.45s}
.ster:nth-child(69){width:0.77px;height:0.77px;left:41.59%;top:7.59%;animation-duration:5.0s;animation-delay:3.84s}
.ster:nth-child(70){width:0.98px;height:0.98px;left:71.09%;top:32.27%;animation-duration:4.06s;animation-delay:2.73s}
/* De gloedbollen van Cosmos: één radiale gloed in Soft Violet, geen effen vlak met blur.
   Dat is wat --brand-glow is, en het scheelt de browser een blurlaag van 46 pixels. */
.bol{position:absolute; border-radius:50%; background:var(--brand-glow);
  animation:drift 12s ease-in-out infinite alternate}
.bol.een{width:520px; height:520px; right:-160px; top:-220px}
.bol.twee{width:380px; height:380px; left:-140px; bottom:-180px; opacity:.6;
  animation-duration:15s}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(22px,-26px)}}

/* ---- inhoud ----
   Logo van 44 px, dan 32 px lucht, dan een kaart van 400 px: de maatvoering van
   ui_kits/callros/Login.jsx. */
.deur{position:relative; min-height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:24px; gap:32px}
.merk{text-align:center}
.merk img{display:block; height:44px; width:auto; margin:0 auto}

.kaart{width:min(400px,100%); display:flex; flex-direction:column; gap:var(--space-4);
  padding:28px; border-radius:var(--radius-xl); background:var(--surface-panel);
  border:1px solid var(--border-subtle); box-shadow:var(--shadow-3)}
.kaart form{display:flex; flex-direction:column; gap:var(--space-4)}
.kaart h1{margin:0; font-family:var(--font-display); font-weight:700; font-size:24px;
  line-height:1.2; letter-spacing:var(--tracking-heading); color:var(--text-primary)}
.kaart .sub{margin:-10px 0 0; font-size:14px; line-height:1.45; color:var(--text-muted)}

/* ---- velden, components/forms/Field.jsx + Input.jsx ---- */
.veld{display:flex; flex-direction:column; gap:6px}
.veld label{font-size:13px; font-weight:600; line-height:1.3; color:var(--text-primary)}
.veld input{width:100%; height:var(--control-h); padding:0 10px; font-family:var(--font-body);
  font-size:var(--fs-ui-control); color:var(--text-primary); background:var(--surface-panel);
  border:1px solid var(--border-control); border-radius:var(--radius-md);
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out)}
.veld input::placeholder{color:var(--text-muted)}
.veld input:focus{outline:none; border-color:var(--focus-ring);
  box-shadow:0 0 0 1px var(--focus-ring)}
.wwveld{position:relative}
.wwveld input{padding-right:76px}
.wwoog{position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0;
  background:none; font-family:var(--font-body); font-size:13px; font-weight:600;
  color:var(--text-link); cursor:pointer; padding:6px 8px; border-radius:var(--radius-sm)}
.wwoog:hover{color:var(--text-link-hover)}

/* ---- meldingen ---- */
.fout,.veldfout{display:block; border-radius:var(--radius-md); font-size:13px; line-height:1.4;
  color:var(--status-error-text); background:var(--status-error-bg);
  border:1px solid var(--status-error-border)}
.fout{margin:0; padding:10px 12px}
.veldfout{margin:0; padding:8px 10px; font-size:12px}
.notitie{margin:0; padding:12px 14px; border-radius:var(--radius-md); font-size:13px;
  line-height:1.5; color:var(--text-secondary); background:var(--surface-sunken);
  border:1px solid var(--border-subtle)}

/* ---- knoppen, components/core/Button.jsx, maat lg ---- */
.knop{display:flex; align-items:center; justify-content:center; width:100%;
  height:var(--control-h-touch); padding:0 18px; border:1px solid transparent;
  border-radius:var(--radius-md); cursor:pointer; font-family:var(--font-body);
  font-size:15px; font-weight:600; line-height:1; text-decoration:none;
  color:var(--text-on-action); background:var(--action-primary);
  transition:background var(--dur-fast) var(--ease-out)}
.knop:hover{background:var(--action-primary-hover)}
.knop:active{background:var(--action-primary-active)}
.knop.rand{background:var(--action-secondary); color:var(--text-primary);
  border-color:var(--border-default); box-shadow:var(--shadow-1)}
.knop.rand:hover{background:var(--action-secondary-hover)}
.knoppen{display:flex; flex-direction:column; gap:var(--space-2)}

/* ---- voetnoot ---- */
.voetnoot{margin:0; padding-top:var(--space-4); border-top:1px solid var(--border-subtle);
  font-size:13px; color:var(--text-muted)}
/* De regel met "Wachtwoord vergeten", op de plek waar het ontwerp hem zet: in het formulier,
   vlak boven de knop. Zonder scheidingslijn, de kaart blijft één geheel. */
.hulpregel{display:flex; justify-content:flex-end; align-items:center; margin:0}
.hulpregel a{font-size:13px; font-weight:600; color:var(--text-link); text-decoration:none}
.hulpregel a:hover{color:var(--text-link-hover)}
.voetnoot a{color:var(--text-link); font-weight:600; text-decoration:none}
.voetnoot a:hover{color:var(--text-link-hover); text-decoration:underline}
/* Alleen een link in de voetnoot, rechts uitgelijnd zoals in het ontwerp. */
.voetnoot.rechts{display:flex; justify-content:flex-end}

@media (max-width:420px){
  .deur{padding:24px 16px; gap:24px}
  .kaart{padding:22px 18px}
  .merk img{height:36px}
}

/* ---- de sluis: twee stalen deuren die opengaan ----

   Van ons, niet uit het pakket, en op 17 oktober 2026 bewust behouden: de deur hoort bij
   binnenkomen bij Callr. Wel omgebouwd. Hij draaide op donker staal met Electric Lavender en
   Deep Indigo uit het oude palet; nu zijn het lichte platen in hetzelfde materiaal als de
   werkomgeving erachter, met Soft Violet als licht. Je schuift de werkomgeving open en komt
   in de kosmos uit, in plaats van andersom.

   Twee dingen zijn met opzet zo gebouwd:

   1. De ruststand is OPEN. De bladen staan van zichzelf buiten beeld; de animatie zet ze
      tijdelijk terug naar dicht en laat ze daarna weer los. Draait de browser geen animaties,
      dan zie je meteen het inlogscherm. Andersom zou één mislukte animatie een dichte deur
      opleveren waar niemand meer langs komt, en dit is het enige scherm waar dat echt niet mag.
   2. pointer-events:none op alles. Wie meteen begint te typen merkt er niets van. */

.sluis{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:50}

/* De donkere ruimte achter de deuren. Dit is wat de inlogkaart verbergt zolang de deur dicht
   is; hij lost op terwijl de bladen uit elkaar gaan. */
.koker{position:absolute; inset:0;
  background:
    radial-gradient(ellipse 34% 60% at 50% 50%, rgba(141,114,202,.34), rgba(15,23,42,0) 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, rgba(15,23,42,0) 40%, var(--midnight-950) 100%),
    var(--brand-gradient-dark);
  animation:koker-weg 1.3s var(--ease) .55s both}
@keyframes koker-weg{from{opacity:1}to{opacity:0}}

/* ---- de platen ----
   Twee witte sluisdeuren, gerenderd in plaats van nagebouwd: public/merk/deur/blad-links.webp
   en blad-rechts.webp. In het beeld zitten de verzonken vlakken, het licht in de naad en
   de vier merken van Callr, die er met hun echte bestanden in zijn gelegd.
   Zie archief/deur-render/ voor de prompt en het inlegscript.

   Geen kozijn eromheen: de bladen beslaan het hele scherm en schuiven eraf. Alleen de naad
   ligt er in CSS overheen, want die flakkert mee met het opengaan. */
.poort{position:absolute; inset:0; z-index:1}

.deurblad{position:absolute; top:-1%; height:102%; width:50%; overflow:hidden;
  background-repeat:no-repeat; background-size:cover;
  box-shadow:0 0 90px rgba(2,6,23,.55); backface-visibility:hidden}

/* Het beeld is in het midden doorgeknipt. Elk blad houdt zijn NAADKANT vast en snijdt aan de
   buitenkant af: dat is de kant die van het scherm af schuift, en de naad is de kant waar
   het op moet sluiten. */
.deurblad.links{left:0; transform:translate3d(-102%,0,0);
  background-image:url('/merk/deur/blad-links.webp'); background-position:right center;
  animation:blad-links 2.55s cubic-bezier(.5,0,.2,1) both}
.deurblad.rechts{right:0; transform:translate3d(102%,0,0);
  background-image:url('/merk/deur/blad-rechts.webp'); background-position:left center;
  animation:blad-rechts 2.55s cubic-bezier(.5,0,.2,1) both}

/* Dicht tot 22 procent van de looptijd, daarna twee seconden schuiven. */
@keyframes blad-links{
  0%,22% {transform:translate3d(0,0,0)}
  100%   {transform:translate3d(-102%,0,0)}
}
@keyframes blad-rechts{
  0%,22% {transform:translate3d(0,0,0)}
  100%   {transform:translate3d(102%,0,0)}
}

/* ---- de naad ----
   Licht dat achter de deur vandaan komt. Hij staat er vanaf het eerste moment, want dat is
   wat de dichte deur levend maakt: er brandt iets aan de andere kant. Bij het losbreken
   flakkert hij op, en zodra de kier zelf breed genoeg is om licht door te laten dooft hij. */
.naad{position:absolute; top:0; bottom:0; left:50%; width:3px; margin-left:-1.5px; opacity:0;
  z-index:2;
  background:linear-gradient(180deg,
    rgba(141,114,202,0) 0%, var(--violet-400) 14%, var(--violet-200) 50%,
    var(--violet-400) 86%, rgba(141,114,202,0) 100%);
  box-shadow:0 0 18px 4px rgba(141,114,202,.6), 0 0 60px 16px rgba(141,114,202,.35),
    0 0 140px 50px rgba(141,114,202,.18);
  animation:naad-licht 2.55s var(--ease) both}
@keyframes naad-licht{
  0%   {opacity:0;   transform:scaleX(1)}
  10%  {opacity:.85; transform:scaleX(1)}
  18%  {opacity:.7;  transform:scaleX(1)}
  24%  {opacity:1;   transform:scaleX(3)}
  38%  {opacity:.55; transform:scaleX(1.4)}
  60%  {opacity:0;   transform:scaleX(1)}
  100% {opacity:0;   transform:scaleX(1)}
}

/* Logo en kaart komen op zodra de kier breed genoeg is. Eerder zie je ze door de spleet al
   staan voordat de deur open is, en dan is er niets onthuld.

   ALLEEN met de sluis ervoor. Zonder die klasse staat de kaart er meteen. Tot 17 oktober
   2026 stond de vertraging op élke pagina van de deur, ook op wachtwoord vergeten en op een
   verlopen link, waar niets opengaat. Dan kijk je een seconde lang naar een lege sterrenhemel
   voordat het formulier verschijnt, en dat leest als een trage server. */
.deur.metsluis{animation:binnen 1s var(--ease) 1.05s both}
@keyframes binnen{
  from{opacity:0; transform:translateY(12px) scale(.98)}
  to  {opacity:1; transform:none}
}

@media (prefers-reduced-motion:reduce){
  .ster,.bol{animation:none !important}
  .ster{opacity:.5}
  *{transition:none !important}
  /* De sluis valt helemaal weg. Zijn ruststand is al open, dus er hoeft niets hersteld te
     worden: animatie uit betekent hier dat je meteen binnen bent. */
  .sluis{display:none}
  .deur{animation:none !important; opacity:1; transform:none}
}