/* AeroStoffeer Machelen — classic desktop UI stylesheet
   Palette: chrome gray #A8A8A8, window beige #EFE9DC, teal #0A6E6E, button #000080, ink #111111 */

:root{
  --chrome:#A8A8A8;
  --beige:#EFE9DC;
  --teal:#0A6E6E;
  --btn:#000080;
  --ink:#111111;
  --light:#FFFFFF;
}

*{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  padding:0;
  background:var(--chrome);
  color:var(--ink);
  font-family:Tahoma, Geneva, Verdana, sans-serif;
  font-size:15px;
  line-height:1.55;
}

h1,h2,h3,.tb-title,.dialog-head,legend,.btn,.menubar{
  font-family:Arial, Helvetica, sans-serif;
}

.mono{font-family:"Courier New", Courier, monospace;}

a{color:var(--btn);}
a:hover{color:var(--teal);}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--beige);color:var(--ink);
  padding:8px 12px;border:3px solid var(--ink);z-index:50;
}
.skip:focus{left:8px;top:8px;}

/* ---------- window shell ---------- */
.win{
  max-width:1080px;
  margin:20px auto 34px;
  background:var(--beige);
  border:3px solid var(--ink);
  box-shadow:8px 8px 0 rgba(17,17,17,.55);
}

/* ---------- title bar ---------- */
.titlebar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--teal);
  border-bottom:3px solid var(--ink);
  padding:7px 8px;
}
.tb-left{display:flex;align-items:center;gap:8px;min-width:0;}
.tb-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;background:var(--ink);
  border:2px solid var(--beige);flex:none;
}
.tb-title{
  color:var(--beige);font-weight:bold;font-size:15px;letter-spacing:.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tb-btns{display:flex;gap:5px;flex:none;}
.tb-sq{
  width:22px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--chrome);color:var(--ink);font-size:12px;line-height:1;
  border-top:2px solid var(--light);border-left:2px solid var(--light);
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
}

/* ---------- menu bar ---------- */
.menubar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--chrome);
  border-bottom:3px solid var(--ink);
  padding:5px 8px;
}
.menubar ul{
  list-style:none;display:flex;flex-wrap:wrap;gap:2px;margin:0;padding:0;
}
.menubar a{
  display:block;padding:4px 10px;color:var(--ink);text-decoration:none;font-size:14px;
  border:2px solid transparent;
}
.menubar a:hover,.menubar a:focus{
  background:var(--beige);
  border-top-color:var(--light);border-left-color:var(--light);
  border-right-color:var(--ink);border-bottom-color:var(--ink);
}
.menubar a.active{
  background:var(--teal);color:var(--beige);
  border-top-color:var(--ink);border-left-color:var(--ink);
  border-right-color:var(--light);border-bottom-color:var(--light);
}
.menu-right{
  margin-left:auto;font-size:12px;font-family:"Courier New",Courier,monospace;
  background:var(--beige);padding:3px 8px;
  border-top:2px solid var(--ink);border-left:2px solid var(--ink);
  border-right:2px solid var(--light);border-bottom:2px solid var(--light);
}
.menu-toggle{display:none;}

/* ---------- panels ---------- */
main{padding:14px;}
.panel{
  background:var(--beige);
  padding:16px;
  margin:0 0 14px;
  border:3px solid var(--ink);
}
.inset{
  border-top:3px solid #6f6f6f;border-left:3px solid #6f6f6f;
  border-right:3px solid var(--light);border-bottom:3px solid var(--light);
  outline:1px solid var(--ink);
}
.outset{
  border-top:3px solid var(--light);border-left:3px solid var(--light);
  border-right:3px solid #6f6f6f;border-bottom:3px solid #6f6f6f;
  outline:1px solid var(--ink);
}

.dialog{padding:0;background:var(--beige);}
.dialog-head{
  background:var(--chrome);
  border-bottom:3px solid var(--ink);
  padding:6px 12px;font-size:13px;font-weight:bold;text-transform:uppercase;letter-spacing:.8px;
}
.dialog-body{display:flex;gap:16px;padding:18px;}
.dialog-ico{flex:none;}
.dialog h1{
  margin:0 0 10px;font-size:28px;line-height:1.2;
}
.dialog p{margin:0 0 10px;max-width:72ch;}

.status-line{
  display:inline-block;font-size:12.5px;
  background:var(--chrome);color:var(--ink);
  padding:4px 9px;margin:4px 0 12px;
  border-top:2px solid #6f6f6f;border-left:2px solid #6f6f6f;
  border-right:2px solid var(--light);border-bottom:2px solid var(--light);
}

/* ---------- buttons ---------- */
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;}
.btn{
  display:inline-block;cursor:pointer;text-decoration:none;font-size:14px;font-weight:bold;
  padding:11px 20px;
  border-top:3px solid var(--light);border-left:3px solid var(--light);
  border-right:3px solid #4a4a4a;border-bottom:3px solid #4a4a4a;
  outline:1px solid var(--ink);
}
.btn-primary{background:var(--btn);color:var(--beige);}
.btn-primary:hover{background:var(--teal);color:var(--beige);}
.btn-secondary{background:var(--chrome);color:var(--ink);}
.btn-secondary:hover{background:var(--beige);color:var(--ink);}
.btn:active{
  border-top-color:#4a4a4a;border-left-color:#4a4a4a;
  border-right-color:var(--light);border-bottom-color:var(--light);
}

/* ---------- tiles ---------- */
.grid{display:grid;gap:14px;}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));}
.ticker{margin-bottom:14px;}
.tile{background:var(--chrome);padding:10px 12px;}
.tile-k{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1px;}
.tile-v{display:block;font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:17px;}

/* ---------- sections ---------- */
.sec-h{
  margin:0 0 10px;font-size:20px;
  border-bottom:3px solid var(--ink);padding-bottom:6px;
}
.sec-intro{margin:0 0 14px;max-width:80ch;}

/* fieldsets */
.fs{
  margin:0;padding:12px 14px 10px;
  background:var(--beige);
  border:3px solid var(--ink);
}
.fs legend{
  background:var(--teal);color:var(--beige);
  padding:3px 10px;font-size:13px;font-weight:bold;letter-spacing:.4px;
  border:2px solid var(--ink);
}
.fs-foot{
  margin:10px 0 0;font-size:12px;
  background:var(--chrome);padding:3px 8px;display:inline-block;
  border:2px solid var(--ink);
}

ul.ck{list-style:none;margin:0;padding:0;}
ul.ck li{position:relative;padding:3px 0 3px 22px;}
ul.ck li::before{
  content:"";position:absolute;left:0;top:9px;
  width:9px;height:9px;background:var(--teal);
  border:2px solid var(--ink);
}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.step{background:var(--beige);padding:12px;}
.step-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;background:var(--btn);color:var(--beige);
  font-family:Arial,Helvetica,sans-serif;font-weight:bold;
  border:2px solid var(--ink);
}
.step h3{margin:8px 0 4px;font-size:16px;}
.step p{margin:0;font-size:13.5px;}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:14px;}
.tbl td,.tbl th{
  border:2px solid var(--ink);padding:6px 8px;text-align:left;background:var(--beige);
}
.tbl th{background:var(--chrome);font-family:Arial,Helvetica,sans-serif;font-size:13px;}
.tbl-wide td:last-child,.tbl-wide th:last-child{text-align:right;white-space:nowrap;}

/* sub panels */
.sub{padding:14px;background:var(--beige);}
.sub-h{margin:0 0 8px;font-size:17px;}
.small{font-size:12.5px;}
.addr{font-size:13px;line-height:1.7;margin:0 0 8px;}
.more{margin:16px 0 0;}

/* accordion */
.acc-wrap{display:grid;gap:8px;}
.acc{border:3px solid var(--ink);background:var(--beige);}
.acc-q{
  width:100%;text-align:left;cursor:pointer;
  font-family:Arial,Helvetica,sans-serif;font-size:14.5px;font-weight:bold;
  background:var(--chrome);color:var(--ink);
  padding:10px 12px;border:0;border-bottom:3px solid var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.acc-q::after{content:"[+]";font-family:"Courier New",Courier,monospace;}
.acc-q[aria-expanded="true"]{background:var(--teal);color:var(--beige);}
.acc-q[aria-expanded="true"]::after{content:"[-]";}
.acc-a{padding:12px;}
.acc-a p{margin:0;}

/* cta */
.cta{text-align:center;}
.cta-h{margin:0 0 8px;font-size:22px;}
.cta p{margin:0 auto 14px;max-width:62ch;}
.cta .btnrow{justify-content:center;}

/* ---------- form ---------- */
.form{padding:16px;background:var(--beige);}
.form-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.field{margin:0 0 12px;}
.field label{display:block;font-size:13px;font-weight:bold;margin-bottom:4px;}
.field input,.field select,.field textarea{
  width:100%;font-family:Tahoma,Geneva,Verdana,sans-serif;font-size:14px;
  padding:7px 8px;background:var(--light);color:var(--ink);
  border-top:2px solid #6f6f6f;border-left:2px solid #6f6f6f;
  border-right:2px solid var(--light);border-bottom:2px solid var(--light);
  outline:1px solid var(--ink);
}
.field textarea{resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--teal);
}
.field.check label{font-weight:normal;font-size:13px;display:flex;gap:8px;align-items:flex-start;}
.field.check input{width:auto;outline:none;}
.field.err input,.field.err textarea,.field.err select{background:#EFE9DC;outline:2px solid var(--teal);}
.form-status{
  margin:14px 0 0;font-size:12.5px;background:var(--chrome);display:inline-block;
  padding:5px 9px;
  border-top:2px solid #6f6f6f;border-left:2px solid #6f6f6f;
  border-right:2px solid var(--light);border-bottom:2px solid var(--light);
}

/* legal */
.legal .fs{margin-bottom:12px;}
.legal p{max-width:85ch;}

/* ---------- status bar ---------- */
.statusbar{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:4px;
  background:var(--chrome);
  border-top:3px solid var(--ink);
  padding:6px;
  font-size:12px;
}
.sb-cell{
  background:var(--beige);padding:4px 9px;
  border-top:2px solid #6f6f6f;border-left:2px solid #6f6f6f;
  border-right:2px solid var(--light);border-bottom:2px solid var(--light);
}
.sb-cell a{text-decoration:none;}
.sb-cell a:hover{text-decoration:underline;}
.sb-social{display:flex;gap:10px;}
.sb-grow{margin-left:auto;}

/* ---------- responsive ---------- */
@media (max-width:760px){
  body{font-size:14.5px;}
  .win{margin:10px;box-shadow:5px 5px 0 rgba(17,17,17,.55);}
  main{padding:10px;}
  .panel{padding:12px;}
  .dialog h1{font-size:22px;}
  .dialog-body{flex-direction:column;gap:10px;padding:14px;}
  .menubar{align-items:flex-start;}
  .menu-toggle{
    display:block;cursor:pointer;font-size:14px;font-weight:bold;
    background:var(--beige);color:var(--ink);padding:6px 12px;
    border-top:2px solid var(--light);border-left:2px solid var(--light);
    border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  }
  .menubar ul{display:none;width:100%;flex-direction:column;gap:0;}
  .menubar ul.open{display:flex;}
  .menubar ul li a{border:2px solid var(--ink);background:var(--beige);margin-top:4px;}
  .menu-right{margin-left:0;order:3;}
  .btn{width:100%;text-align:center;}
  .sb-grow{margin-left:0;}
  .statusbar{font-size:11.5px;}
}

@media (max-width:420px){
  .tb-title{font-size:12.5px;}
  .dialog h1{font-size:19px;}
}