/* software-op-maat-aalst: CSS van de secties op deze pagina (docs/prototype/aalst.html, inline <style>).
   Het prototype zet deze regels niet in een @layer; zo blijft het hier ook (ze winnen van .chain in styles.css,
   zoals in het prototype). De regio, de FAQ en de afsluiter zijn gedeelde blokken. */
/* ---------- hero: de skyline van Aalst ---------- */
.sky{display: block; width: 100%; height: auto;}
.sky .back{fill: #E4DCCD;}
.sky .old{fill: var(--color-ink-2);}
.sky .row{fill: #6B645A;}
.sky .detail{fill: #E4DCCD;}
.sky .quay{fill: var(--color-ink-2);}
.sky .water{fill: #D6DFDC;}
.sky .ripple{fill: none; stroke: #A9BCB9; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 26 18; animation: ripple 6s linear infinite;}
.sky .ripple.r2{animation-duration: 9s; stroke-dasharray: 40 30;}
@keyframes ripple{ to { stroke-dashoffset: -88; } }
.sky .river-name{fill: #7E9694; font-family: var(--font-serif); font-style: italic; font-size: 18px;}
.sky .kmo .body{fill: #CDC4B2; transition: fill .6s;}
.sky .kmo .roof{fill: #B9AF9B; transition: fill .6s;}
.sky .kmo .win{fill: #E9E2D4; transition: fill .5s;}
.sky .kmo.lit .body{fill: #D8CDB6;}
.sky .kmo.lit .win{fill: var(--color-postit);}
.sky .kmo .awning{fill: #B9AF9B; transition: fill .6s;}
.sky .kmo.lit .awning{fill: var(--color-accent);}
.sky .tag{opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s cubic-bezier(.2,.8,.2,1); transform-box: fill-box;}
.sky .kmo.lit + .tag, .sky .tag.lit{opacity: 1; transform: none;}
.sky .tag line{stroke: var(--color-ink); stroke-width: 1.5; stroke-dasharray: 3 3;}
.sky .tag rect{fill: var(--color-ink);}
.sky .tag text{fill: var(--color-paper); font-family: var(--font-sans); font-size: 15px; font-weight: 600;}
.sky .tag circle{fill: var(--color-accent);}
.sky-legend li{transition: opacity .5s, background-color .5s, border-color .5s; opacity: .45;}
.sky-legend li.lit{opacity: 1; background: var(--color-postit); border-color: #E2C94F;}
@media (max-width: 1023px){
.sky .tag{display: none;}
}
/* hero blijft staan terwijl de kmo's oplichten (alleen op brede, liggende schermen) */
@media (min-width: 1024px) and (orientation: landscape){
.hero-track{height: 190vh;}
.hero-stick{position: sticky; top: 64px; min-height: calc(100vh - 64px); display: flex; flex-direction: column; justify-content: space-between;}
}
.scroll-cue{font-family: var(--font-hand); color: var(--color-ink-3);}
/* ---------- wat er veranderd is: de offerte ---------- */
.offerte{background: #fff; border-radius: 6px; box-shadow: var(--shadow-lift); transform: rotate(-1.2deg); padding: 26px 26px 22px; position: relative;}
.offerte::before{content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 24px; margin-left: -45px; background: rgb(247 226 122 / .75); transform: rotate(2deg);}
.offerte .ln{display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--color-rule); font-size: 14.5px;}
.offerte .track{position: relative; height: 14px;}
.offerte .bar{position: absolute; left: 0; top: 0; height: 14px; border-radius: 3px; background: #C9C0AE; width: var(--w);}
.offerte .bar.code{background: var(--color-ink);}
.offerte .bar.new{background: var(--color-accent); top: 20px; width: 0; transition: width 1s cubic-bezier(.2,.8,.2,1) 1.3s;}
.offerte .ln.prog .track{height: 34px;}
.offerte .strike{position: absolute; left: -4px; top: 6px; height: 2.5px; width: calc(var(--w) + 8px); background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform .6s ease-out .7s;}
.offerte .hand{font-family: var(--font-hand); font-size: 17px; line-height: 1.1; opacity: 0; transition: opacity .6s;}
.offerte .hand.ai{color: var(--color-accent); position: absolute; top: 15px; left: calc(var(--n) + 10px); transition-delay: 2s; white-space: nowrap;}
.offerte .hand.keep{color: var(--color-ok); transition-delay: 2.5s;}
.reveal.in .offerte .strike, .offerte.in .strike{transform: scaleX(1);}
.reveal.in .offerte .bar.new{width: var(--n);}
.reveal.in .offerte .hand{opacity: 1;}
/* ---------- sectoren: voorwerpen ---------- */
.obj-wrap{display: grid; place-items: center; min-height: 230px; padding: 28px 16px; border-radius: var(--radius-card); background: var(--color-paper-2); position: relative; overflow: hidden;}
.o-clip{width: 230px; background: #fff; border-radius: 6px; padding: 30px 14px 14px; box-shadow: var(--shadow-soft); position: relative; transform: rotate(-2deg); font-size: 12px;}
.o-clip::before{content: ""; position: absolute; top: -8px; left: 50%; width: 70px; height: 22px; margin-left: -35px; border-radius: 5px; background: #9A9182;}
.o-clip .t{font-weight: 700; margin-bottom: 6px;}
.o-clip .l{display: flex; justify-content: space-between; border-bottom: 1px solid #EEE; padding: 4px 0;}
.o-clip .l s{color: var(--color-ink-3);}
.o-clip .l i{font-family: var(--font-hand); font-style: normal; color: var(--color-accent);}
.o-mail{width: 240px; background: #fff; border-radius: 8px; box-shadow: var(--shadow-soft); font-size: 12px; padding: 12px 14px; line-height: 1.4;}
.o-mail + .o-mail{margin-top: -18px; margin-left: 40px; transform: rotate(2deg);}
.o-mail .from{color: var(--color-ink-3);}
.o-mail .subj{font-weight: 700; margin: 3px 0 5px;}
.o-postit{position: absolute; width: 128px; padding: 12px; background: var(--color-postit); box-shadow: 0 10px 20px rgb(25 23 20 / .15); font-family: var(--font-hand); font-size: 16px; line-height: 1.2; transform: rotate(4deg);}
.o-pdf{width: 200px; background: #fff; border-radius: 4px; box-shadow: var(--shadow-soft); padding: 12px; font-size: 12px; transform: rotate(-3deg);}
.o-pdf .ic{display: inline-block; background: #C0392B; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 3px; margin-right: 6px;}
.o-pdf .pg{height: 120px; margin-top: 10px; background: repeating-linear-gradient(#fff 0 10px, #EEE 10px 12px);}
.o-cal{width: 290px; max-width: 100%; background: #fff; border-radius: 8px; box-shadow: var(--shadow-soft); padding: 12px; font-size: 11.5px;}
.o-cal .g{display: grid; grid-template-columns: 5.6em repeat(4, minmax(0, 1fr)); gap: 3px; margin-top: 8px;}
.o-cal .g span{padding: 4px; border-radius: 3px; background: #F2EEE6; min-height: 22px;}
.o-cal .g .h{background: none; color: var(--color-ink-3); font-weight: 600;}
.o-cal .g .b{background: #CFE0F2;}
.o-cal .g .x{background: #F6C9BA; font-weight: 700; color: #8A2A12;}
/* ---------- bewijs: de keten bij Steen Foodmasters ---------- */
.chain{position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;}
.chain::before{content: ""; position: absolute; left: 12%; right: 12%; top: 58px; border-top: 2px dashed #6E675C;}
.station{position: relative; text-align: center;}
.station .disc{width: 116px; height: 116px; margin: 0 auto; border-radius: 50%; background: #2A2722; border: 2px solid #3A362F; display: grid; place-items: center; transition: border-color .4s, background-color .4s;}
.station svg{width: 64px; height: 64px; stroke: #CFC7B8; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s;}
.station.on .disc{border-color: var(--color-accent); background: #33241D;}
.station.on svg{stroke: var(--color-paper);}
.station b{display: block; margin-top: 14px; color: var(--color-paper); font-weight: 600;}
.station span{display: block; font-size: 14px; color: #B9B1A2;}
.slip{position: absolute; top: -22px; left: 12%; z-index: 2; transform: translateX(-50%); background: var(--color-postit); color: var(--color-ink); font-family: var(--font-hand); font-size: 15px; padding: 3px 10px; border-radius: 3px; box-shadow: 0 6px 14px rgb(0 0 0 / .3); transition: left 1s cubic-bezier(.5,0,.3,1); white-space: nowrap;}
@media (max-width: 767px){
.chain{grid-template-columns: minmax(0, 1fr); gap: 18px;}
.chain::before{left: 39px; right: auto; top: 30px; bottom: 30px; border-top: 0; border-left: 2px dashed #6E675C;}
.station{display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 16px; align-items: center; text-align: left;}
.station .disc{width: 80px; height: 80px;}
.station svg{width: 46px; height: 46px;}
.station b{margin-top: 0;}
.slip{display: none;}
}
/* ---------- aanbod ---------- */
.ticket{position: relative; background: var(--color-card); border: 1.5px solid var(--color-ink); border-radius: 18px;}
.ticket .stub{border-top: 2px dashed var(--color-rule); position: relative;}
.ticket .stub::before, .ticket .stub::after{content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--color-paper); border: 1.5px solid var(--color-ink);}
.ticket .stub::before{left: -13px; clip-path: inset(0 0 0 50%);}
.ticket .stub::after{right: -13px; clip-path: inset(0 50% 0 0);}
@media (prefers-reduced-motion: reduce){
.sky .tag{opacity: 1; transform: none;}
.offerte .strike{transform: scaleX(1);}
.offerte .bar.new{width: var(--n);}
.offerte .hand{opacity: 1;}
}
/* dienstpagina's: overal dezelfde ruimte rond de hero. Kruimelpad tot de eerste tekst 32px (gsm) en 48px (desktop),
   laatste regel van de hero tot de titel van het volgende blok 112px en 144px. De marges hieronder corrigeren de
   eigen opbouw van deze hero naar die maten; in Wagtail wordt het één gedeelde instelling op de heroblokken. */
.svc-hero{margin-top:0px;margin-bottom:32px}
@media (min-width:768px) and (max-width:1023px){
.svc-hero{margin-top:-16px;margin-bottom:0px}
}
@media (min-width:1024px){
.svc-hero{margin-top:0px;margin-bottom:32px}
}
/* kleine desktop (1024 tot 1279px): de hero bouwt hier anders op, dus een eigen correctie */
@media (min-width:1024px) and (max-width:1279px){
.svc-hero{margin-top:0px;margin-bottom:16px}
}
@media (min-width:1280px) and (max-width:1439px){
.svc-hero{margin-top:0px;margin-bottom:21px}
}
/* omzetting naar Wagtail: .chain bestaat ook in styles.css (de kleine keten van Steen Foodmasters, een lichte kaart).
   In het prototype erfde deze keten daardoor een lichte achtergrond, waarop de lichte tekst van de haltes
   onleesbaar werd. Hier staat ze, zoals bedoeld, rechtstreeks op de donkere sectie. */
#chain.chain{border-radius:0;background:none;box-shadow:none;overflow:visible}