:root{
    color-scheme:light dark;
    /* Stairway huisstijl */
    --petrol:#085067;      /* Stairway hoofdkleur petrol */
    --petrol-d:#063b4d;
    --sw-magenta:#bd0060;  /* Stairway magenta */
    --sw-plum:#2c1c3d;     /* Stairway donkerpaars */
    --ink:#085067;         /* tekst = petrol */
    --paper:#ffffff;
    --paper-2:#eef3f5;     /* lichte petrol-tint */
    --lf:#bd0060;          /* magenta — Lokerse Feesten */
    --fonne:#085067;       /* petrol — Fonnefeesten */
    --line:#d5e1e6;
    --muted:#5b727c;
    --accent:#bd0060;
    --barbg:#085067;       /* footer-bar = petrol */
    --bartext:#ffffff;
    --headbg:#085067;      /* header petrol vlak */
    --headtext:#ffffff;
    --headstripe:rgba(255,255,255,.05);
    --main:#bd0060;--club:#085067;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --ink:#e6eef1;
      --paper:#0a1d24;       /* diep petrol */
      --paper-2:#0f2b35;
      --lf:#ff4fa3;          /* helderder magenta */
      --fonne:#3fb6d4;       /* helderder petrol/cyaan */
      --line:#1c3b46;
      --muted:#9fb6bf;
      --accent:#ff4fa3;
      --barbg:#06151b;
      --bartext:#e6eef1;
      --headbg:#06151b;
      --headtext:#e6eef1;
      --headstripe:rgba(255,255,255,.045);
      --main:#ff4fa3;--club:#3fb6d4;
    }
  }
  html{-webkit-text-size-adjust:100%;background:var(--paper)}
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;
    background:var(--paper);color:var(--ink);line-height:1.5;padding-bottom:130px;
    -webkit-font-smoothing:antialiased;overflow-x:hidden}
  .wrap{max-width:780px;margin:0 auto;padding:0 18px}
  /* Stairway merkbalk bovenaan */
  .swbar{background:var(--sw-magenta);color:#fff}
  .swbar .wrap{display:flex;align-items:center;gap:8px;justify-content:center;
    padding-top:10px;padding-bottom:10px;flex-wrap:wrap;text-align:center}
  .swbar a{color:#fff;font-weight:800;text-decoration:none;font-size:13px;letter-spacing:.01em}
  .swbar a:hover{text-decoration:underline}
  .swbar .lbl{font-size:13px;font-weight:500;letter-spacing:.01em;color:rgba(255,255,255,.92)}

  header{background:var(--headbg);color:var(--headtext);padding:28px 18px 28px;
    border-bottom:4px solid var(--sw-magenta);
    background-image:repeating-linear-gradient(135deg,transparent 0 24px,var(--headstripe) 24px 25px)}
  .brandrow{display:flex;align-items:center;gap:16px;margin-bottom:24px}
  .brandrow .logo-link{display:inline-block;line-height:0}
  .brandrow .logo{height:40px;width:auto;display:block}
  .brandrow .divider{flex:1;height:1px;background:rgba(255,255,255,.2)}
  .brandrow .tagline{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    color:#fff;font-weight:700;white-space:nowrap;
    background:var(--sw-magenta);padding:5px 11px;border-radius:20px}
  .eyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase;
    color:#ff7ab8;margin-bottom:12px;font-weight:700}
  .weather-now{display:inline-flex;align-items:center;gap:10px;
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
    border-radius:24px;padding:8px 16px 8px 12px;margin:0 0 16px}
  .weather-now .wn-ico{font-size:24px;line-height:1}
  .weather-now .wn-temp{font-size:20px;font-weight:800;color:#fff;letter-spacing:.01em}
  .weather-now .wn-desc{font-size:13px;color:rgba(255,255,255,.85);font-weight:600}
  .countdown{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px}
  .cd-unit{display:inline-flex;flex-direction:column;align-items:center;min-width:54px;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
    border-radius:12px;padding:9px 6px}
  .cd-unit b{font-size:26px;font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em;
    font-variant-numeric:tabular-nums}
  .cd-unit span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(255,255,255,.6);margin-top:5px;font-weight:700}
  .cd-label{font-size:13px;font-weight:700;color:#ff7ab8;letter-spacing:.04em}
  @media(max-width:420px){
    .cd-unit{min-width:44px;padding:7px 4px}
    .cd-unit b{font-size:21px}
    .countdown{gap:8px}
  }
  h1{font-size:clamp(30px,8vw,52px);line-height:1.04;font-weight:800;letter-spacing:-.02em;
    margin-bottom:14px;color:var(--headtext)}
  h1 .a{color:#ff5fa8} h1 .b{color:#5fd2ee}
  .sub{font-size:15px;color:rgba(255,255,255,.85);max-width:56ch}
  .sub b{color:#fff;font-weight:700}
  /* festival-keuze: losse, afgeronde knoppen met ruimte */
  .tabs{display:flex;gap:12px;margin-top:26px}
  .tab{flex:1;text-align:center;padding:16px 10px;cursor:pointer;
    font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;
    background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.25);
    color:rgba(255,255,255,.92);border-radius:14px;
    transition:background .18s,color .18s,border-color .18s,transform .12s}
  .tab:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.45)}
  .tab[data-fest="lf"].active{background:var(--lf);color:#fff;border-color:var(--lf);
    box-shadow:0 6px 18px -6px rgba(189,0,96,.7)}
  .tab[data-fest="fonne"].active{background:var(--sw-magenta);color:#fff;border-color:var(--sw-magenta);
    box-shadow:0 6px 18px -6px rgba(189,0,96,.7)}
  .tab[data-fest="kermis"].active{background:var(--sw-magenta);color:#fff;border-color:var(--sw-magenta);
    box-shadow:0 6px 18px -6px rgba(189,0,96,.7)}
  /* Kermis-statuspagina */
  .kermis-wrap{text-align:center;padding:30px 18px 10px}
  .kermis-title{font-size:clamp(22px,6vw,32px);font-weight:800;letter-spacing:-.01em;
    color:var(--ink);margin-bottom:8px}
  .kermis-sub{font-size:14.5px;color:var(--muted);max-width:48ch;margin:0 auto 26px}
  .molen{width:200px;height:200px;margin:0 auto 22px;display:block;color:var(--petrol);
    transition:filter .4s,opacity .4s}
  .molen:not(.draait){filter:grayscale(1) brightness(1.1);opacity:.55}
  .molen.draait .molen-rad{transform-box:fill-box;transform-origin:center;
    animation:molenspin 6s linear infinite}
  @keyframes molenspin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
  .kermis-status{display:inline-block;font-size:20px;font-weight:800;letter-spacing:.01em;
    padding:12px 26px;border-radius:30px;margin-bottom:10px}
  .kermis-status.open{background:#e6f7ec;color:#1a8a4a}
  .kermis-status.dicht{background:#f3eef0;color:var(--muted)}
  @media (prefers-color-scheme:dark){
    .kermis-status.open{background:rgba(63,182,107,.18);color:#6fe0a0}
    .kermis-status.dicht{background:rgba(255,255,255,.06);color:var(--muted)}
  }
  .kermis-detail{font-size:15px;color:var(--ink);font-weight:600;margin-bottom:24px;min-height:22px}
  .kermis-uren{max-width:420px;margin:0 auto;text-align:left;
    background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
  .kermis-uren h3{font-size:13px;letter-spacing:.04em;text-transform:uppercase;
    color:var(--muted);margin-bottom:12px}
  .kermis-uren table{width:100%;border-collapse:collapse;font-size:14px}
  .kermis-uren td{padding:6px 0;border-bottom:1px solid var(--line)}
  .kermis-uren tr:last-child td{border-bottom:none}
  .kermis-uren td:last-child{text-align:right;font-weight:700;font-feature-settings:"tnum"}
  .kermis-uren tr.nu td{color:var(--sw-magenta)}
  .kermis-voorbehoud{font-size:12.5px;color:var(--muted);max-width:46ch;margin:18px auto 0;font-style:italic}
  .tab .ct{display:block;font-size:11px;opacity:.85;margin-top:4px;letter-spacing:.04em;font-weight:600}
  .panel{display:none;padding-top:18px}
  .panel.active{display:block}
  /* Zoekvak */
  .searchwrap{padding:18px 0 4px}
  .searchbox{display:flex;align-items:center;gap:10px;background:var(--paper-2);
    border:1.5px solid var(--line);border-radius:14px;padding:12px 16px;
    transition:border-color .15s}
  .searchbox:focus-within{border-color:var(--lf)}
  .search-ico{font-size:16px;opacity:.7;flex:none}
  .searchbox input{flex:1;border:none;background:transparent;font-size:16px;
    color:var(--ink);font-family:inherit;outline:none;min-width:0}
  .searchbox input::placeholder{color:var(--muted)}
  .search-clear{flex:none;border:none;background:transparent;color:var(--muted);
    font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
  .search-clear:hover{color:var(--lf)}
  .panel-search{padding-top:14px}
  .search-head{font-size:13px;color:var(--muted);font-weight:700;
    padding:6px 0 10px;letter-spacing:.02em}
  /* festival-badge in zoekresultaten */
  .fbadge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;padding:2px 7px;border-radius:20px;margin-left:8px;
    vertical-align:middle}
  .fbadge.lf{background:rgba(189,0,96,.12);color:var(--lf)}
  .fbadge.fonne{background:rgba(8,80,103,.12);color:var(--petrol)}
  @media (prefers-color-scheme:dark){
    .fbadge.fonne{background:rgba(63,182,212,.16);color:#7fd4e8}
  }
  .search-day{font-size:12px;color:var(--muted);font-weight:700;margin-left:8px}
  .search-empty{padding:30px 4px;text-align:center;color:var(--muted);font-size:15px}
  .toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 0;
    border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:5}
  .toolbar .count{font-size:12px;letter-spacing:.04em;
    color:var(--muted);margin-right:auto;text-transform:uppercase;font-weight:700}
  .toolbar .count b{color:var(--ink)}
  .minibtn{font-size:12px;font-weight:700;
    padding:7px 13px;border:1.5px solid var(--petrol);background:transparent;cursor:pointer;
    letter-spacing:.03em;color:var(--ink);border-radius:20px}
  .minibtn:hover{background:var(--petrol);color:#fff}
  .minetoggle{border-color:#1a8a4a;color:#1a8a4a}
  .minetoggle:hover{background:#1a8a4a;color:#fff}
  .minetoggle.active{background:#1a8a4a;color:#fff;border-color:#1a8a4a}
  .mine-empty{padding:24px 4px;text-align:center;color:var(--muted);font-size:15px;line-height:1.5}
  @media (prefers-color-scheme:dark){
    .minetoggle{border-color:#6fe0a0;color:#6fe0a0}
    .minetoggle:hover,.minetoggle.active{background:#1a8a4a;color:#fff}
  }
  .stagefilter{display:flex;gap:6px;flex-wrap:wrap;padding:10px 0 2px}
  .chip{font-size:11px;font-weight:700;letter-spacing:.04em;
    padding:6px 12px;border:1.5px solid var(--line);cursor:pointer;color:var(--muted);
    background:var(--paper);text-transform:uppercase;border-radius:20px}
  .chip.on{background:var(--petrol);color:#fff;border-color:var(--petrol)}
  .day{margin:22px 0 6px}
  .day-head{display:flex;align-items:baseline;gap:9px;padding-bottom:7px;
    border-bottom:2px solid currentColor;margin-bottom:2px}
  .lf .day-head{color:var(--lf)} .fonne .day-head{color:var(--fonne)}
  .day-dow{font-size:15px;font-weight:800;letter-spacing:.01em;text-transform:capitalize}
  .day-num{font-size:24px;font-weight:800;line-height:1;letter-spacing:-.02em}
  .day-month{font-size:15px;font-weight:800;letter-spacing:.01em;text-transform:lowercase}
  .day-weather{margin-left:auto;display:none;align-items:center;gap:5px;font-weight:700;
    font-size:13px;color:var(--muted);white-space:nowrap}
  .day-weather.show{display:inline-flex}
  .day-weather .wx-icon{font-size:15px}
  .day-weather .wx-temp small{font-weight:600;opacity:.7}
  .day-weather .wx-pop{font-size:12px;opacity:.85}
  .act{display:flex;align-items:center;gap:12px;padding:10px 4px;
    border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
  .act:hover{background:var(--paper-2)}
  .act.hidden{display:none}
  .promo.hidden{display:none}
  .box{width:20px;height:20px;flex:none;border:2px solid var(--ink);position:relative;
    background:var(--paper);transition:background .12s}
  .lf .act.on .box{background:var(--lf);border-color:var(--lf)}
  .fonne .act.on .box{background:var(--fonne);border-color:var(--fonne)}
  .act.on .box::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
    border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(43deg)}
  .act .info{flex:1;min-width:0}
  .act .name{font-size:16px;font-weight:600;line-height:1.2}
  .act .meta{font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px;color:var(--muted);
    letter-spacing:.02em;margin-top:1px}
  .act .stage-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px;vertical-align:middle}
  .act .stage-dot.stage-main{background:var(--main)}
  .act .stage-dot.stage-club{background:var(--club)}
  .act .stage-dot.stage-kermis{background:#f0a500}
  .livecount{color:var(--sw-magenta);font-weight:700}
  .fonne .livecount{color:var(--fonne)}
  /* "jij gaat"-markering voor je eigen keuzes */
  .minetag{color:#1a8a4a;font-weight:800}
  .act.mine{position:relative}
  .act.mine::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
    border-radius:3px;background:#1a8a4a}
  @media (prefers-color-scheme:dark){
    .minetag{color:#6fe0a0}
    .act.mine::before{background:#6fe0a0}
  }
  /* Conflict-markering: optreden overlapt qua tijd met een ander gekozen optreden */
  .act.conflict .time{color:#b06a00;font-weight:700}
  .act.conflict .time::after{content:" ⚠ overlap";font-size:10px;font-weight:800;
    letter-spacing:.02em;white-space:nowrap}
  .conflict-warn{display:flex;align-items:center;gap:10px;max-width:780px;
    margin:14px auto 0;padding:12px 16px;border-radius:12px;
    background:#fff4e0;border:1px solid #f0c275;color:#8a5200;font-size:13.5px;font-weight:600}
  .conflict-warn .cw-icon{font-size:16px;flex:none}
  @media (prefers-color-scheme:dark){
    .act.conflict .time{color:#f0a500}
    .conflict-warn{background:rgba(240,165,0,.12);border-color:rgba(240,165,0,.4);color:#f0c275}
  }
  /* Demografie-blokje */
  .demo{position:relative;margin:18px 0 4px;padding:16px 18px;border-radius:14px;
    background:var(--paper-2);border:1px solid var(--line)}
  .demo-close{position:absolute;top:8px;right:10px;background:none;border:none;
    font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:4px}
  .demo-close:hover{color:var(--ink)}
  .demo-intro{font-size:13.5px;color:var(--muted);margin-bottom:14px;max-width:60ch;padding-right:24px}
  .demo-fields{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
  .demo-field{display:flex;flex-direction:column;gap:6px}
  .demo-field label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
    font-weight:700;color:var(--muted)}
  .demo-seg{display:flex;gap:6px}
  .demo-seg button{font-size:13px;font-weight:600;padding:8px 13px;border:1.5px solid var(--line);
    background:var(--paper);color:var(--ink);border-radius:20px;cursor:pointer}
  .demo-seg button.on{background:var(--sw-magenta);color:#fff;border-color:var(--sw-magenta)}
  .demo-field select,.demo-field input{font-size:14px;padding:8px 11px;border:1.5px solid var(--line);
    border-radius:10px;background:var(--paper);color:var(--ink);font-family:inherit;min-width:140px}
  .demo-actions{display:flex;gap:10px;align-items:center;margin-top:14px}
  .demo-save{font-size:13.5px;font-weight:800;padding:9px 18px;border:none;border-radius:20px;
    background:var(--sw-magenta);color:#fff;cursor:pointer}
  .demo-save:hover{filter:brightness(1.08)}
  .demo-skip{font-size:13px;font-weight:600;padding:9px 12px;border:none;background:none;
    color:var(--muted);cursor:pointer;text-decoration:underline}
  .demo-skip:hover{color:var(--ink)}
  @media(max-width:520px){
    .demo-fields{gap:12px}
    .demo-field select,.demo-field input{min-width:120px}
  }
  .act .time{font-family:"Helvetica Neue",Arial,sans-serif;font-size:13px;font-weight:700;
    white-space:nowrap;text-align:right}
  .act .time small{display:block;font-weight:400;font-size:10px;color:var(--muted)}
  .act .addbtn{flex:none;font-size:11px;font-weight:700;
    letter-spacing:.02em;padding:7px 11px;border:1.5px solid var(--lf);background:transparent;
    color:var(--lf);cursor:pointer;white-space:nowrap;border-radius:20px;transition:background .12s,color .12s}
  .fonne .act .addbtn{border-color:var(--fonne);color:var(--fonne)}
  .lf .act .addbtn:hover{background:var(--lf);color:#fff}
  .fonne .act .addbtn:hover{background:var(--fonne);color:#fff}
  .act .addbtn.done{background:var(--fonne);border-color:var(--fonne);color:#fff}
  .lf .act .addbtn.done{background:var(--lf);border-color:var(--lf)}
  .legend{font-size:13px;color:var(--muted);margin:18px 0 0;padding:14px;
    background:var(--paper-2);border-left:3px solid var(--accent)}
  .legend b{color:var(--ink)}
  /* Stairway promo-kaart tussen de dagen */
  .promo{display:flex;gap:16px;align-items:stretch;text-decoration:none;
    margin:22px 0;border-radius:16px;overflow:hidden;
    background:var(--petrol);color:#fff;
    background-image:linear-gradient(135deg,var(--petrol) 0%,#0a6079 100%);
    box-shadow:0 10px 26px -14px rgba(8,80,103,.7);
    transition:transform .15s,box-shadow .15s}
  .promo:hover{transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(8,80,103,.8)}
  .promo-mark{flex:none;width:62px;display:flex;flex-direction:column;justify-content:center;
    gap:4px;padding:0 0 0 18px}
  .promo-mark span{display:block;background:#ff4f9a;border-radius:2px;height:7px}
  .promo-mark span:nth-child(1){width:14px}
  .promo-mark span:nth-child(2){width:22px}
  .promo-mark span:nth-child(3){width:30px}
  .promo-mark span:nth-child(4){width:38px}
  .promo-body{padding:18px 20px 18px 0;flex:1;min-width:0}
  .promo-tag{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    color:#ff7ab5;margin-bottom:7px}
  .promo-title{font-size:18px;font-weight:800;line-height:1.2;margin-bottom:7px;color:#fff;letter-spacing:-.01em}
  .promo-text{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.85);margin-bottom:12px}
  .promo-cta{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.01em;
    color:#fff;background:var(--sw-magenta);padding:9px 16px;border-radius:24px;
    transition:filter .15s}
  .promo:hover .promo-cta{filter:brightness(1.12)}
  .bar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--barbg);color:var(--bartext);
    border-top:1px solid var(--line);
    padding:13px 18px;display:flex;gap:14px;align-items:center}
  .bar .selinfo{font-size:13px;line-height:1.25}
  .bar .selinfo b{font-size:20px;display:block;font-weight:800}
  .bar .selinfo .lab{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sw-magenta);font-weight:700}
  .bar .spacer{flex:1}
  .gen{font-weight:800;font-size:15px;letter-spacing:.02em;
    padding:14px 24px;border:none;cursor:pointer;background:var(--lf);color:#fff;border-radius:6px}
  .gen:disabled{background:#7e8aa0;cursor:not-allowed;color:#dfe4ee}
  .gen:not(:disabled):hover{filter:brightness(1.08)}
  .gen.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.5);color:#fff}
  .gen.ghost:disabled{background:transparent;border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.4)}
  .gen.ghost:not(:disabled):hover{background:rgba(255,255,255,.12);filter:none}
  .hint{font-size:11px;color:var(--muted);
    text-align:center;padding:14px 18px 0}
  .swfoot{margin-top:30px;background:var(--petrol);color:#fff;
    background-image:repeating-linear-gradient(135deg,transparent 0 24px,rgba(31,191,143,.07) 24px 25px);
    border-top:3px solid var(--sw-magenta)}
  .swfoot .wrap{padding-top:30px;padding-bottom:34px}
  .swfoot .footlogo{display:inline-block;margin-bottom:16px;line-height:0}
  .swfoot .footlogo img{height:40px;width:auto;display:block}
  .swfoot .foottext{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.86);max-width:60ch}
  .swfoot .foottext b{color:#fff}
  .swfoot .foottext a{color:var(--sw-magenta);font-weight:700;text-decoration:none;white-space:nowrap}
  .swfoot .foottext a:hover{text-decoration:underline}
  .swfoot .footmeta{font-size:11.5px;color:rgba(255,255,255,.5);margin-top:16px;letter-spacing:.01em}
  @media(max-width:520px){
    .act{gap:10px;padding:11px 4px}
    .act .name{font-size:15px}.day-num{font-size:24px}
    .act .time{font-size:12px}
    .act .addbtn{padding:8px 9px;font-size:11px}
    .tab{font-size:12.5px;padding:14px 6px;letter-spacing:.02em}
    .tabs{gap:10px}
    .bar{flex-wrap:wrap;gap:9px}.bar .selinfo b{font-size:17px}.gen{flex:1}
    .promo{gap:10px}
    .promo-mark{width:46px;padding-left:14px}
    .promo-body{padding-right:16px}
    .promo-title{font-size:16.5px}
  }
  @media(max-width:380px){
    .act .addbtn{padding:7px 7px}
    .act .time small{font-size:9px}
    .tab{font-size:11.5px}
    .brandrow{gap:10px;flex-wrap:wrap}
    .brandrow .tagline{letter-spacing:.12em;padding:5px 9px}
  }
  @media(max-width:340px){
    .brandrow .divider{display:none}
  }