/* Als het niet werkt — de storingswijzer en de contactpagina eromheen.
   De knooppunten en lijnen van het schema tekent p-alsniet.js (coördinaten in een veld van 1000 × 690). */

.an-kopacties{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:30px}

/* ── Storingswijzer: schema + paneel ── */
.sw{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:14px;align-items:stretch;margin-top:clamp(34px,5vw,56px)}
.sw-schema{overflow:hidden;min-width:0}
.sw-balk{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;padding:13px clamp(14px,2vw,24px);border-bottom:1px solid var(--glas-rand);
  font:500 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-dof)}
.sw-balk-live{display:inline-flex;align-items:center;gap:9px;color:var(--tekst-zacht)}
.sw-balk-tel{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.sw-balk-tel b{font-weight:500;color:var(--lila);margin-left:.5em}

.sw-veld{position:relative;aspect-ratio:1000/690;margin:clamp(12px,2vw,24px);container-type:inline-size;font-size:12px}
.sw-veld::before{content:"";position:absolute;inset:-6%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 45% at 22% 28%,rgba(74,31,184,.32),transparent 70%)}
.sw-lijnen{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}
.sw-lijn{fill:none;stroke:rgba(143,107,255,.22);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .6s}
.sw-lijn.is-lus{stroke-dasharray:5 7}
.sw-aan{fill:none;stroke:rgba(205,191,255,.95);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(143,107,255,.9));transition:opacity .7s}
.sw-aan.is-lus{stroke:var(--oranje);filter:drop-shadow(0 0 6px var(--oranje-gloed))}
.sw-aan.is-uit{opacity:0}
.sw-pijl{fill:none;stroke:rgba(143,107,255,.45);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sw-pijl-aan{stroke:#e6deff}
.sw-pijl-oranje{stroke:var(--oranje)}
.sw-lijnlabel{font:500 12.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;fill:var(--tekst-dof);transition:fill .5s}
.sw-lijnlabel.is-gelopen{fill:var(--lila)}
.sw-luslabel{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;fill:rgba(255,122,26,.6)}
.sw-stip{fill:#fff;filter:drop-shadow(0 0 8px var(--lila)) drop-shadow(0 0 3px #fff)}
.sw-stip.oranje,.sw-zwerver{fill:var(--oranje);filter:drop-shadow(0 0 8px var(--oranje))}

/* knooppunten */
.sw-knoop{position:absolute;z-index:2;width:19%;height:11.0145%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25em;
  padding:.3em .7em;text-align:center;border-radius:14px;background:#0b0618;border:1px solid var(--glas-rand);color:var(--tekst-dof);
  font-size:12px;font-size:clamp(9px,1.72cqw,15.5px);font-weight:600;line-height:1.22;letter-spacing:-.01em;cursor:default;-webkit-tap-highlight-color:transparent;
  transition:color .5s,border-color .5s,background .5s,box-shadow .5s,transform .45s var(--zacht),opacity .5s}
.sw-knoop.sw-handeling{border-radius:99px;border-style:dashed}
.sw-nr{position:absolute;left:11px;top:-.75em;padding:0 .5em;border-radius:6px;background:inherit;font:500 .7em/1.4 var(--mono);letter-spacing:.08em;color:var(--tekst-dof);transition:color .5s}
.sw-knoop.is-geweest{color:var(--tekst-zacht);border-color:rgba(143,107,255,.5)}
.sw-knoop.is-geweest .sw-nr{color:var(--paars-licht)}
.sw-knoop.is-actief{color:var(--tekst);background:#160b30;border-color:rgba(205,191,255,.9);border-style:solid;
  box-shadow:0 0 0 4px rgba(143,107,255,.16),0 0 44px -6px rgba(143,107,255,1);animation:swAdem 2.8s ease-in-out infinite}
.sw-knoop.is-actief .sw-nr{color:var(--lila)}
.sw-knoop.is-optie{cursor:pointer;color:var(--tekst-zacht);border-color:rgba(143,107,255,.55)}
.sw-knoop.is-optie:hover{transform:translateY(-2px);color:var(--tekst);border-color:var(--lila);box-shadow:0 0 30px -8px rgba(143,107,255,.95)}
.sw-knoop.sw-doel{border-color:rgba(255,122,26,.35);color:rgba(255,122,26,.7)}
.sw-knoop.sw-doel .sw-nr{color:rgba(255,122,26,.55)}
.sw-knoop.sw-doel.is-actief{color:#140700;background:var(--oranje);border-color:var(--oranje);
  box-shadow:0 0 0 5px rgba(255,122,26,.2),0 0 60px -2px var(--oranje-gloed);animation:swAdemOranje 2.8s ease-in-out infinite}
.sw-knoop.sw-doel.is-actief .sw-nr{color:rgba(20,7,0,.6)}
.sw-start::after{content:"Start";position:absolute;right:12px;top:-.75em;line-height:1.4;padding:0 .55em;background:#0b0618;border-radius:6px;
  font:500 .66em var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paars-licht)}
.sw.is-uitbeeld .sw-knoop{animation-play-state:paused}
@keyframes swAdem{50%{box-shadow:0 0 0 7px rgba(143,107,255,.08),0 0 60px -2px rgba(143,107,255,1)}}
@keyframes swAdemOranje{50%{box-shadow:0 0 0 9px rgba(255,122,26,.1),0 0 80px 0 var(--oranje-gloed)}}

/* het paneel: één stap tegelijk */
.sw-paneel{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2.4vw,28px);min-width:0;background:rgba(10,5,22,.6)}
.sw-paneel-kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sw-paneel-nr{font:300 clamp(2.4rem,4vw,3.2rem)/1 var(--mono);letter-spacing:-.04em;color:var(--lila);font-variant-numeric:tabular-nums}
.sw-paneel.is-doel .sw-paneel-nr{color:var(--oranje)}
.sw-paneel-titel{font-size:clamp(1.5rem,2.3vw,1.9rem);font-weight:800;letter-spacing:-.04em;line-height:1.08;text-wrap:balance}
.sw-paneel-tekst{margin-top:10px;color:var(--tekst-zacht);font-size:.95rem;line-height:1.55;min-height:4.6em}
.sw-paneel.is-wissel .sw-paneel-titel,.sw-paneel.is-wissel .sw-paneel-tekst,.sw-paneel.is-wissel .sw-paneel-nr{animation:swIn .55s var(--zacht) both}
@keyframes swIn{from{opacity:0;transform:translateY(10px);filter:blur(6px)}}
.sw-antwoorden{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px}
.sw-antwoorden .knop{flex:1 1 120px;padding:.85em 1.2em;font-size:1rem}
.sw-antwoorden .knop[disabled]{cursor:progress;opacity:.5;transform:none}
.sw-wacht{height:2px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden}
.sw-wacht[hidden]{display:none}
.sw-wacht i{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--paars),var(--lila))}
.sw-wacht.is-bezig i{transform:scaleX(1);transition:transform var(--duur,4s) linear}
.sw-paneel-voet{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--glas-rand);
  font:500 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-dof);font-variant-numeric:tabular-nums}
.sw-paneel-voet b{font-weight:500;color:var(--lila);margin-left:.5em}
.sw-opnieuw{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--tekst-dof);padding:.4em 0;transition:color .25s}
.sw-opnieuw:hover{color:var(--tekst)}

@media (max-width:1060px){
  .sw{grid-template-columns:1fr}
  .sw-paneel-tekst{min-height:0}
  .sw-antwoorden{margin-top:4px}
}
/* smal: het schema wordt een plattegrond, het paneel doet het werk */
@media (max-width:720px){
  .sw-balk-tip{display:none}
  .sw-balk{padding:10px 14px}
  .sw-veld{margin:12px 10px}
  .sw-knoop{border-radius:8px;padding:0}
  .sw-knoop .sw-titel,.sw-start::after{display:none}
  .sw-nr{position:static;padding:0;background:none;font-size:9px;letter-spacing:.04em}
  .sw-lijnlabel,.sw-luslabel{display:none}
  .sw-lijn{stroke-width:2.4}
  .sw-aan{stroke-width:3.6}
  .sw-paneel-tekst{min-height:4.8em}
  .sw-antwoorden .knop{flex:1 1 auto}
}

/* ── Contact ── */
.an-tegels,.an-verder{margin-top:clamp(34px,5vw,56px)}
.an-tegel svg{width:54px;height:54px;margin-bottom:10px;fill:none;stroke:var(--paars-licht);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(143,107,255,.55));transition:transform .6s var(--zacht),stroke .3s}
.an-tegel:hover svg{transform:translateY(-3px) scale(1.04);stroke:var(--lila)}
.an-golf{opacity:.25;animation:anGolf 2.6s ease-in-out infinite}
.an-golf-2{animation-delay:-.5s}
@keyframes anGolf{50%{opacity:1}}
.an-tegel p{flex:1}
.an-meta{margin:10px 0 0;padding-top:14px;border-top:1px solid var(--glas-rand)}
.an-meta div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.an-meta dt{font:500 .64rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-dof)}
.an-meta dd{margin:0;font:500 .78rem var(--mono);color:var(--lila);font-variant-numeric:tabular-nums;text-align:right}

/* ── Openingstijden ── */
.an-tijden{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,70px);align-items:center}
.an-nu{display:inline-flex;align-items:center;gap:11px;margin-top:30px;padding:9px 16px 9px 13px;border-radius:99px;border:1px solid var(--glas-rand);
  background:var(--glas);font-size:.9rem;color:var(--tekst-zacht)}
.an-nu.is-dicht .statuslamp{background:var(--tekst-dof);box-shadow:none;animation:none}
.an-tijden-paneel{padding:clamp(10px,1.6vw,18px) clamp(10px,1.6vw,18px) 0}
.an-tabel td{font-variant-numeric:tabular-nums;transition:color .4s}
.an-tabel tbody tr:last-child td{border-bottom:0}
.an-tabel tr.is-vandaag td{color:var(--tekst)}
.an-tabel tr.is-vandaag td:first-child::after{content:"Vandaag";margin-left:.9em;font:500 .6rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--oranje)}
.an-tijden-noot{padding:16px;border-top:1px solid var(--glas-rand);font-size:.86rem;color:var(--tekst-dof)}
@media (max-width:900px){.an-tijden{grid-template-columns:1fr}}
@media (max-width:420px){.an-tabel th,.an-tabel td{padding:12px 10px}}

/* ── Verder en slot ── */
.an-link h3::after{content:"→";display:inline-block;margin-left:.4em;color:var(--tekst-dof);transition:transform .4s var(--zacht),color .3s}
.an-link:hover h3::after{transform:translateX(5px);color:var(--tekst)}
.an-slot{text-align:center;background:radial-gradient(ellipse 70% 70% at 50% 100%,rgba(74,31,184,.35),transparent 70%)}
.an-slot .kop,.an-slot .lead{margin-left:auto;margin-right:auto}
.an-slot .kop{max-width:18ch}
.an-slot-acties{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}

@media (prefers-reduced-motion:reduce){
  .sw-knoop,.an-golf,.sw-paneel.is-wissel *{animation:none!important}
  .an-golf{opacity:.8}
}