/* Hotelgids voor gasten — licht en rustig: neutrale achtergrond, witte kaarten met een icoon en een serif-kop,
   informatie in grijze vakjes. Kleuren van Korrie (donkergroen, bordeaux) alleen als accent. Eerst voor de telefoon. */
:root{
  --achter:#f3f4f2; --kaart:#fff; --veld:#f4f5f3; --veld-2:#eceeeb;
  --lijn:#e3e6e2; --lijn-2:#d3d8d3;
  --inkt:#131714; --inkt-2:#4b544e; --inkt-3:#7a837d;
  --groen:#174734; --groen-hover:#0f3527; --groen-tekst:#1a5640; --groen-zacht:#e6efe9;
  --bordeaux:#7a1730; --bordeaux-zacht:#f8eaed;
  --oker:#875b05; --oker-zacht:#faf0db;
  --wit:#fff;
  /* Matglas voor wat over de inhoud heen ligt: tabbalk, knoppenrij bovenaan een tab, taalknop */
  --glas:rgba(255,255,255,.6); --glas-rand:rgba(255,255,255,.75); --glas-blur:blur(20px) saturate(1.6);
  --schaduw:0 1px 2px rgba(19,23,20,.04), 0 4px 16px rgba(19,23,20,.05);
  --schaduw-hoog:0 2px 6px rgba(19,23,20,.08), 0 12px 32px rgba(19,23,20,.14);
  --r:20px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; scroll-padding-top:60px; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--achter); color:var(--inkt); font:16px/1.55 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:var(--groen-tekst); text-decoration-thickness:1px; text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; letter-spacing:-.01em; margin:0; color:var(--inkt)}
p{margin:0 0 12px}
b{font-weight:600}
.ico{flex:none; display:block}
:focus-visible{outline:2px solid var(--groen-tekst); outline-offset:2px; border-radius:6px}
.pagina{max-width:560px; margin:0 auto; padding-left:16px; padding-right:16px}
.klein{font-size:14px; color:var(--inkt-3)}
.mono{font-family:var(--mono); letter-spacing:.01em}

/* ---------- Kop ---------- */
.kop{padding:max(28px, env(safe-area-inset-top)) 4px 20px}
.kop-merk{margin:0 0 24px; font:600 12.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--groen-tekst)}
.kop-merk span{font-weight:500; color:var(--inkt-3); letter-spacing:.12em; margin-left:6px}
.kop-merk span::before{content:"·"; margin-right:8px}
.kop-logo{display:block; max-width:200px; max-height:56px; width:auto; height:auto; margin:0 0 24px}
.kop-datum{margin:0 0 2px; color:var(--inkt-3); font-size:15px}
.kop h1{font-size:44px; line-height:1.05; letter-spacing:-.02em; margin-bottom:12px}
.kop-intro{font-size:17px; color:var(--inkt-2); margin:0 0 16px; max-width:32em}
.kop-groet{margin:-4px 0 0; font:italic 500 17px/1.4 var(--serif); color:var(--groen-tekst)}
.kicker{margin:0 0 4px; font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--groen-tekst)}

/* Headerfoto (uit Ops) met een zachte golf naar de achtergrond */
.held{position:relative; height:clamp(220px, 38vh, 340px); overflow:hidden}
.held > img{width:100%; height:100%; object-fit:cover; display:block}
/* Logo op de foto, op matglas. Multiply laat een witte achtergrond van het logo wegvallen tegen het glas. */
.held-logo{position:absolute; z-index:2; top:max(12px, env(safe-area-inset-top)); left:max(12px, env(safe-area-inset-left)); padding:9px 14px; border-radius:16px; background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.7); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); box-shadow:0 4px 18px rgba(19,23,20,.14)}
.held-logo img{display:block; max-width:170px; max-height:40px; width:auto; height:auto; mix-blend-mode:multiply}
.held::after{content:""; position:absolute; left:-5%; right:-5%; bottom:-1px; height:48px; background:var(--achter); border-radius:50% 50% 0 0 / 100% 100% 0 0}
.kop.met-foto{padding-top:4px}

/* Tabs: één tegelijk. De CSS kiest al op basis van het adres (#verblijf, #wifi), zodat er niets knippert;
   het script zet daarnaast "actief" voor oudere browsers. Elke regel apart: een onbekende selector maakt anders de hele regel ongeldig. */
.tab{display:none; padding-bottom:calc(104px + env(safe-area-inset-bottom))}
.tab.actief{display:block}
.tab:target{display:block}
.tab:has(:target){display:block}
body:not(:has(:target)) #welkom{display:block}
/* Zodra het script draait, toont alleen de actieve tab (ook als het adres met pushState is gezet). */
body.met-script .tab:not(.actief){display:none !important}
.tab-kop{padding:max(28px, env(safe-area-inset-top)) 4px 14px}
.tab-kop h1{font-size:36px; line-height:1.1; letter-spacing:-.02em}
/* Tabbalk: zwevend, los van de rand, de inhoud schemert erdoorheen */
.tabbalk{position:fixed; left:12px; right:12px; bottom:max(10px, env(safe-area-inset-bottom)); z-index:10; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:6px 4px; border:1px solid var(--glas-rand); border-radius:26px; background:var(--glas); -webkit-backdrop-filter:var(--glas-blur); backdrop-filter:var(--glas-blur); box-shadow:0 0 0 1px rgba(19,23,20,.06), 0 8px 28px rgba(19,23,20,.14)}
.tabbalk a{display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--inkt-3); font-size:12.5px; font-weight:600; text-decoration:none}
.tabbalk span{display:grid; place-items:center; width:52px; height:32px; border-radius:999px}
.tabbalk a.aan{color:var(--groen-tekst)}
.tabbalk a.aan span{background:rgba(23,71,52,.1)}
body.chat-open .tabbalk{visibility:hidden}

/* Knoppenrij om binnen een tab naar een onderdeel te springen */
/* Knoppen bovenaan een tab blijven bij het scrollen bovenaan staan, op glas */
.chips{position:sticky; top:0; z-index:6; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 -16px 14px; padding:10px 16px; background:rgba(243,244,242,.72); -webkit-backdrop-filter:var(--glas-blur); backdrop-filter:var(--glas-blur)}
.chips::-webkit-scrollbar{display:none}
.chips a{flex:none; display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid var(--lijn-2); border-radius:999px; background:var(--wit); color:var(--inkt); font-size:14.5px; font-weight:600; text-decoration:none; white-space:nowrap}
.chips a span{font-weight:500; color:var(--inkt-3)}
/* Groen = het onderdeel dat je aantikte of nu leest (het script houdt dat bij; zonder script de eerste) */
.chips a.aan{background:var(--groen); border-color:var(--groen); color:var(--wit)}
.chips a.aan span{color:rgba(255,255,255,.75)}

/* Taalknop rechtsboven (scrolt mee weg, zodat hij niet over de tekst valt) */
.taal{position:absolute; z-index:12; top:max(12px, env(safe-area-inset-top)); right:max(12px, env(safe-area-inset-right))}
.taal summary{display:flex; align-items:center; gap:6px; padding:7px 12px 7px 10px; border:1px solid var(--glas-rand); border-radius:999px; background:var(--glas); -webkit-backdrop-filter:var(--glas-blur); backdrop-filter:var(--glas-blur); font:700 13.5px/1 var(--sans); color:var(--inkt); box-shadow:0 4px 18px rgba(19,23,20,.14); cursor:pointer; list-style:none}
.taal summary::-webkit-details-marker{display:none}
.taal-menu{position:absolute; right:0; top:calc(100% + 6px); display:flex; flex-direction:column; min-width:150px; padding:6px; background:var(--kaart); border:1px solid var(--lijn); border-radius:14px; box-shadow:var(--schaduw-hoog)}
.taal-menu a{padding:9px 12px; border-radius:9px; color:var(--inkt); font-weight:500; text-decoration:none}
.taal-menu a:hover{background:var(--veld)}
.taal-menu a.aan{background:var(--groen-zacht); color:var(--groen-tekst); font-weight:700}
body.chat-open .taal{visibility:hidden}

/* Snel bij de hand: regels met een rond icoon, de waarde groot, en een ronde knop */
.snel{padding:16px}
/* Snel bij de hand: wifi als balk, daaronder tegels (een tik belt of opent de route) */
.snel-wifi{display:flex; align-items:center; gap:12px; padding:10px 10px 10px 14px; border-radius:16px; background:var(--groen-zacht); color:var(--groen-tekst); margin-bottom:8px}
.snel-wifi > div{flex:1; min-width:0; display:flex; flex-direction:column}
.snel-wifi .veld-naam{color:var(--groen-tekst)}
.snel-wifi b{font-size:20px; line-height:1.3; color:var(--inkt); overflow-wrap:anywhere}
.snel-wifi .rond-knop{border-color:transparent}
.snel-tegels{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.snel-tegels > :last-child:nth-child(odd){grid-column:1 / -1}
.tegel{position:relative; display:flex; flex-direction:column; gap:1px; min-height:96px; padding:12px; border:1px solid var(--lijn); border-radius:16px; background:var(--wit); color:var(--inkt); text-decoration:none}
a.tegel:hover{background:var(--veld)}
.tegel-ico{display:grid; place-items:center; width:34px; height:34px; margin-bottom:6px; border-radius:50%; background:var(--groen-zacht); color:var(--groen-tekst)}
.tegel > .ico{position:absolute; top:12px; right:12px; color:var(--inkt-3)}
.tegel b{font-size:16.5px; line-height:1.25; overflow-wrap:anywhere}
.tegel .veld-naam{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.tegel-knop{align-self:flex-start; margin-top:6px; padding:3px 10px; border:0; border-radius:999px; background:var(--groen-zacht); color:var(--groen-tekst); font:600 13px/1.3 var(--sans); cursor:pointer}
.tegel .tegel-knop[aria-expanded=true]{background:var(--groen); color:var(--wit)}
.snel-tegels + .bijboek-tekst{margin:8px 0 0}
.snel .kicker{margin-bottom:10px}
.snel-rij{display:flex; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--lijn)}
.snel .kicker + .snel-rij{border-top:0}
.snel-rij > div{flex:1; min-width:0; display:flex; flex-direction:column}
.snel-rij b{font-size:20px; line-height:1.3; overflow-wrap:anywhere}
.snel-rij b.snel-naam{font-size:17px}
.rond{width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--groen-zacht); color:var(--groen-tekst)}
.rond-knop{width:44px; height:44px; flex:none; display:grid; place-items:center; border:1px solid var(--lijn-2); border-radius:50%; background:var(--wit); color:var(--inkt); cursor:pointer}
.rond-knop:hover{background:var(--veld)}
.rond-knop .ico + .ico{display:none}
.rond-knop.gekopieerd{background:var(--groen-zacht); border-color:transparent; color:var(--groen-tekst)}
.rond-knop.gekopieerd .ico:first-child{display:none}
.rond-knop.gekopieerd .ico + .ico{display:block}

/* Weer in het kort op Welkom */
.weer-mini{display:block; color:inherit; text-decoration:none}
.weer-nu{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.weer-nu .weer-ico{flex:none; color:var(--inkt-2)}
.weer-nu b{font:600 30px/1 var(--serif)}
.weer-nu span{font-size:14.5px; line-height:1.4; color:var(--inkt-2)}
.weer-nu .weer-wanneer{font:600 14.5px/1.4 var(--sans); color:var(--inkt)}
.weer-mini-cijfers{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.weer-mini-cijfers > span{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 8px 8px 14px; background:var(--veld); border-radius:12px; font-weight:600}
.weer-mini .kicker{margin-bottom:10px}
.weer-mini .weer-nu > b{font-size:36px}
.weer-mini-label{margin:4px 0 8px; font-size:13.5px; color:var(--inkt-3)}
.weer-mini .meer{margin-top:12px}
.dagen{list-style:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin:0 0 12px; padding:0}
.dagen li{display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px; background:var(--veld); border-radius:12px; min-width:0}
.dagen li.vandaag{background:var(--groen-zacht)}
.dagen .dag{font-size:13px; font-weight:600; color:var(--inkt-2)}
.dagen .weer-ico{color:var(--inkt-2); margin:2px 0}
.dagen b{font-size:16px; line-height:1.2}
.dagen .min{font-size:13px; color:var(--inkt-3)}
.dagen .mm{font-size:11.5px; white-space:nowrap}
.cijfer.klein{width:32px; height:32px; border-radius:9px; font-size:17px; font-style:normal}

/* Tip bij het weer en op het beginscherm zetten */
.weertip h2{margin-bottom:4px}
.weertip .snel-rij:first-of-type{border-top:0}
.weertip .meer{margin-top:10px}
.beginscherm{position:relative; display:flex; gap:14px; align-items:flex-start}
.beginscherm img{flex:none; width:56px; height:56px; border-radius:14px; border:1px solid var(--lijn)}
.beginscherm-stap{font-size:14.5px; line-height:1.7}
/* Het icoon van de knop die de gast moet zoeken, als een toetsje in de tekst */
.knop-ico{display:inline-grid; place-items:center; width:24px; height:24px; margin:0 2px; vertical-align:-6px; border:1px solid var(--lijn-2); border-radius:7px; background:var(--wit); color:var(--groen-tekst)}
.beginscherm h2{font-size:19px; margin:0 32px 4px 0}
.beginscherm p{color:var(--inkt-2); margin-bottom:8px}
.beginscherm-sluit{position:absolute; top:10px; right:10px; width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:50%; background:none; color:var(--inkt-3); cursor:pointer}
.beginscherm-sluit:hover{background:var(--veld)}

/* Korrie */
.korrie-kaart{display:flex; gap:14px; align-items:flex-start}
.korrie-kaart img{flex:none; width:64px; height:64px; border-radius:50%}
.korrie-kaart h2{margin-bottom:4px}
.korrie-kaart p{color:var(--inkt-2); margin-bottom:12px}
.korrie-kaart.groot img{width:72px; height:72px}
.knop.klein{min-height:40px; padding:0 16px; font-size:15px}

/* ---------- Kaarten ---------- */
.kaart{background:var(--kaart); border:1px solid var(--lijn); border-radius:var(--r); padding:18px 18px 16px; margin:0 0 14px; box-shadow:var(--schaduw); scroll-margin-top:72px}
.kaart > :last-child{margin-bottom:0}
.kaart-kop{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.kaart-ico{width:36px; height:36px; display:grid; place-items:center; flex:none; border-radius:50%; background:var(--groen-zacht); color:var(--groen-tekst)}
.kaart h2{font-size:22px; line-height:1.2}
.sub,.onder{color:var(--inkt-2)}
.onder{margin:12px 0 0}

/* Informatie in grijze vakjes, zoals een ingevuld formulier */
.veld{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; margin:0 0 8px; background:var(--veld); border-radius:12px}
.veld > div{display:flex; flex-direction:column; min-width:0}
.veld-naam{font-size:13px; color:var(--inkt-3)}
.veld b{font-size:17px; overflow-wrap:anywhere}
.twee{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.twee .veld{margin:0}
.regels{white-space:pre-line; color:var(--inkt-2)}
.tijden{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px}
.tijden .veld{margin:0}
.tekst{color:var(--inkt-2)}
.punten{list-style:none; margin:0; padding:0}
.punten li{position:relative; padding:0 0 8px 18px}
.punten li::before{content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:2px; background:var(--groen-tekst); opacity:.55}
.huisregels{list-style:none; margin:0; padding:0}
.huisregels li{display:flex; align-items:flex-start; gap:10px; padding:7px 0; color:var(--inkt-2)}
.teken{flex:none; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; margin-top:-1px}
.wel .teken{background:var(--groen-zacht); color:var(--groen-tekst)}
.niet .teken{background:var(--bordeaux-zacht); color:var(--bordeaux)}
.arts{color:var(--inkt-2)}
.arts a{font-weight:600}
p.veld-naam{margin:0 0 2px}

/* Knoppen: groen (hoofdknop) en licht (zoals Kopieer) */
.knop{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border:0; border-radius:999px; background:var(--groen); color:var(--wit); font:600 16px/1 var(--sans); text-decoration:none; cursor:pointer}
.knop:hover{background:var(--groen-hover)}
.knop-licht,.kopieer{display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 16px; border:1px solid var(--lijn-2); border-radius:999px; background:var(--wit); color:var(--inkt); font:600 15px/1 var(--sans); text-decoration:none; cursor:pointer; white-space:nowrap}
.knop-licht:hover,.kopieer:hover{background:var(--veld)}
.knop-licht .ico{color:var(--groen-tekst)}
.knop-licht.klein{min-height:34px; padding:0 12px; font-size:14px}
.knop-licht.rood{color:var(--bordeaux)}
.knop-licht.rood .ico{color:var(--bordeaux)}
.kopieer{min-height:34px; padding:0 14px; font-size:14px; flex:none}
.kopieer.gekopieerd{background:var(--groen-zacht); border-color:transparent; color:var(--groen-tekst)}
.tekstlink{display:inline-flex; align-items:center; gap:6px; font-weight:600; text-decoration:none}
.tekstlink:hover{text-decoration:underline}

/* Wifi-code voor de camera */
.wifi-qr summary{display:inline-flex; align-items:center; gap:8px; margin-top:4px; color:var(--groen-tekst); font-size:15px; font-weight:600; cursor:pointer; list-style:none}
.wifi-qr summary::-webkit-details-marker{display:none}
.wifi-qr .qr{width:200px; margin:12px 0 8px; padding:10px; background:var(--wit); border:1px solid var(--lijn); border-radius:14px}
.wifi-qr .qr svg{display:block; width:100%; height:auto}

/* Noodgeval binnen de receptiekaart */
.knop-licht + .nood{margin-top:16px}
.nood{padding-top:14px; border-top:1px solid var(--lijn)}
.nood h3{display:flex; align-items:center; gap:8px; font:600 15px/1.3 var(--sans); color:var(--bordeaux); margin-bottom:6px}
.nood p{color:var(--inkt-2)}
.nood .knop-licht{margin:0 0 10px}
.nood .klein a{color:var(--bordeaux); font-weight:600}

/* Lijsten binnen een kaart (restaurants, routes): regels met een lijn ertussen */
.lijst{list-style:none; margin:0; padding:0}
.lijst > li{padding:16px 0; border-top:1px solid var(--lijn)}
.lijst > li:first-child{border-top:0; padding-top:4px}
.rij-kop{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 10px}
.lijst h3{font-size:19px; line-height:1.25}
.lijst h4{font-size:18px; line-height:1.3}
.meta{margin:2px 0 6px; color:var(--inkt-3); font-size:14.5px}
.stand{display:inline-block; padding:3px 10px; border-radius:999px; background:var(--veld-2); color:var(--inkt-2); font-size:13px; font-weight:600; white-space:nowrap}
.s-open{background:var(--groen-zacht); color:var(--groen-tekst)}
.s-straks{background:var(--oker-zacht); color:var(--oker)}
.is-geweest h3,.is-geweest .rest-tijden{color:var(--inkt-3)}
.plek-labels{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:6px}
.plekken h4{font-size:19px; line-height:1.25}
/* Alle / In Gulpen / Buiten Gulpen: een schuifknop, alleen met script (zonder script staat alles er gewoon). */
.gebied-filter{display:none}
body.met-script .gebied-filter{display:flex; gap:2px; padding:3px; margin:2px 0 12px; border-radius:999px; background:var(--veld-2)}
.gebied-filter button{flex:1 1 auto; padding:8px 10px; border:0; border-radius:999px; background:none; color:var(--inkt-2); font:600 14px/1.2 var(--sans); white-space:nowrap; cursor:pointer}
.gebied-filter button[aria-pressed=true]{background:var(--wit); color:var(--inkt); box-shadow:0 1px 2px rgba(19,23,20,.1), 0 2px 8px rgba(19,23,20,.06)}
.plekken > li{border-top:0; padding-top:4px}
.plekken > li:not([hidden]) ~ li{border-top:1px solid var(--lijn); padding-top:16px}
.tip-knop{display:inline-flex; align-items:center; gap:4px; padding:3px 10px 3px 8px; border:0; border-radius:999px; background:var(--bordeaux-zacht); color:var(--bordeaux); font:700 13px/1.3 var(--sans); cursor:pointer}
.tip-knop[aria-expanded=true]{background:var(--bordeaux); color:var(--wit)}
.tip-tekst{margin:8px 0 6px; padding:10px 12px; border-radius:12px; background:var(--bordeaux-zacht); color:var(--inkt)}
.tip-tekst b{color:var(--bordeaux)}
.bijboek-knop[aria-expanded=true]{background:var(--groen-zacht); border-color:transparent; color:var(--groen-tekst)}
.bijboek-tekst{margin:8px 0 4px; padding:10px 12px; border-radius:12px; background:var(--groen-zacht); color:var(--inkt)}

.rest-tijden{margin:0 0 6px; font-weight:500}
.rest-tip{color:var(--inkt-2); margin:0 0 10px}
.knoppen{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 6px}
details summary{cursor:pointer; list-style:none}
details summary::-webkit-details-marker{display:none}
.week summary,.dicht summary{display:inline-flex; align-items:center; gap:6px; color:var(--inkt-3); font-size:14px; padding:4px 0}
.week summary::after,.dicht summary::after{content:"+"; font-size:17px; line-height:1}
.week[open] summary::after,.dicht[open] summary::after{content:"−"}
.week dl{margin:8px 0 2px; padding:8px 12px; background:var(--veld); border-radius:12px; font-size:14.5px}
.week dl div{display:flex; justify-content:space-between; gap:12px; padding:3px 0}
.week dt{color:var(--inkt-2)}
.week dd{margin:0; text-align:right}
.week .vandaag{font-weight:600}
.week .vandaag dt{color:var(--inkt)}
.dicht{margin-top:6px; padding-top:12px; border-top:1px solid var(--lijn)}
.dicht ul{list-style:none; margin:8px 0 0; padding:0}
.dicht li{display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 12px; padding:6px 0; color:var(--inkt-2)}
.dicht li span{color:var(--inkt-3); font-size:14.5px}

/* Wandelen en fietsen: weerbericht met een cijfer, daaronder de routes */
.weer-dag{margin:0 0 2px; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--inkt-3)}
.weer-zin{font-size:17px; color:var(--inkt); margin-bottom:14px}
.cijfers{border-collapse:separate; border-spacing:0 8px; width:100%; margin:-8px 0 4px}
.cijfers caption{text-align:left; font-size:14px; color:var(--inkt-3); padding-bottom:2px}
.cijfers thead th{font-size:13.5px; font-weight:600; color:var(--inkt-2); padding:6px 0 0; text-align:center; width:30%}
.cijfers tbody th,.cijfers tbody td{background:var(--veld); padding:10px 0}
.cijfers tbody th{text-align:left; font-weight:600; padding-left:14px; border-radius:12px 0 0 12px}
.cijfers tbody td:last-child{border-radius:0 12px 12px 0}
.cijfers tbody th span{display:block; font-size:13px; font-weight:400; color:var(--inkt-3)}
.cijfers td{text-align:center}
.cijfer{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; font:600 22px/1 var(--serif); font-variant-numeric:lining-nums}
.c-goed{background:var(--groen-zacht); color:var(--groen-tekst)}
.c-matig{background:var(--oker-zacht); color:var(--oker)}
.c-slecht{background:var(--bordeaux-zacht); color:var(--bordeaux)}
.beste{margin:4px 0 12px; color:var(--inkt-2)}
.beste b{color:var(--inkt)}
.uren{list-style:none; display:flex; margin:0 0 12px; padding:6px 4px; overflow-x:auto; scrollbar-width:none; background:var(--veld); border-radius:12px}
.uren::-webkit-scrollbar{display:none}
.uren li{flex:1 0 54px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px}
.uur{font-size:13px; color:var(--inkt-3)}
.uren .weer-ico{color:var(--inkt-2)}
.uren b{font-size:16px}
.mm{font-size:12.5px; color:var(--inkt-3)}
.mm.nat{color:var(--groen-tekst); font-weight:600}
.bron{font-size:13px; color:var(--inkt-3)}
.bron a{color:inherit}
.tussenkop{font-size:19px; margin:22px 0 4px; padding-top:16px; border-top:1px solid var(--lijn)}
.routes p:not(.meta){color:var(--inkt-2); margin-bottom:8px}

/* Op je kamer: uitklapbare uitleg */
.uitleg{border-top:1px solid var(--lijn)}
.kaart-kop + .uitleg{border-top:0}
.uitleg summary{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; font:600 17px/1.3 var(--sans)}
.uitleg summary::after{content:""; flex:none; width:8px; height:8px; margin-right:6px; border-right:2px solid var(--inkt-3); border-bottom:2px solid var(--inkt-3); transform:rotate(45deg) translateY(-3px); transition:transform .15s}
.uitleg[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.uitleg-tekst{padding:0 0 12px; color:var(--inkt-2)}
.uitleg-tekst ol{margin:0 0 12px; padding:0; list-style:none; counter-reset:stap}
.uitleg-tekst ol li{counter-increment:stap; position:relative; padding:0 0 10px 38px}
.uitleg-tekst ol li::before{content:counter(stap); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%; background:var(--groen-zacht); color:var(--groen-tekst); font:600 14px/26px var(--sans); text-align:center}
.uitleg-tekst ul{margin:0 0 12px; padding-left:20px}
.uitleg-tekst p:last-child{margin-bottom:0}


/* ---------- Voet ---------- */
.voet{padding-top:20px; text-align:center; color:var(--inkt-3); font-size:14.5px}
.voet-groet{font:600 22px/1.2 var(--serif); color:var(--inkt); margin-bottom:6px}
.voet a{color:inherit}


/* ---------- Chat met Korrie ---------- */
body.chat-open{overflow:hidden}
.chat{position:fixed; z-index:20; inset:0; display:flex; flex-direction:column; background:var(--achter)}
.chat-kop{display:flex; align-items:center; gap:10px; padding:max(10px, env(safe-area-inset-top)) 12px 10px 14px; border-bottom:1px solid var(--lijn); background:var(--kaart)}
.chat-kop img{width:40px; height:40px; border-radius:50%; flex:none}
.chat-naam{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25}
.chat-naam b{font:600 18px/1.2 var(--serif)}
.chat-naam span{font-size:13px; color:var(--inkt-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chat-nieuw{border:1px solid var(--lijn-2); background:var(--wit); color:var(--inkt-2); border-radius:999px; padding:7px 12px; font:600 13.5px/1.2 var(--sans); cursor:pointer; white-space:nowrap}
.chat-sluit{width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:50%; background:none; color:var(--inkt-2); cursor:pointer}
.chat-sluit:hover,.chat-nieuw:hover{background:var(--veld)}
.chat-berichten{flex:1; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:12px; padding:16px 14px 20px}
.ai-melding{align-self:center; max-width:420px; margin:0 0 4px; text-align:center; font-size:13px; line-height:1.45; color:var(--inkt-3)}
.bericht{display:flex; max-width:86%}
.bericht.gast{align-self:flex-end}
.bericht.korrie{align-self:flex-start; flex-direction:column; align-items:flex-start; gap:6px}
.ballon{padding:10px 14px; border-radius:18px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:16px; line-height:1.5}
.gast .ballon{background:var(--groen); color:var(--wit); border-bottom-right-radius:6px}
.korrie .ballon{background:var(--kaart); border:1px solid var(--lijn); border-bottom-left-radius:6px}
.doorgegeven{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; background:var(--groen-zacht); color:var(--groen-tekst); font-size:13.5px; font-weight:600}
.doorgegeven::before{content:"✓"}
.wacht .ballon{display:flex; gap:5px; align-items:center; min-height:44px}
.wacht i{width:7px; height:7px; border-radius:50%; background:var(--inkt-3); opacity:.35; animation:puntje 1.2s infinite ease-in-out}
.wacht i:nth-child(2){animation-delay:.15s}
.wacht i:nth-child(3){animation-delay:.3s}
@keyframes puntje{0%,60%,100%{opacity:.35; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.wacht i{animation:none; opacity:.7}}
.chat-keuzes{display:flex; flex-wrap:wrap; gap:8px}
.keuze{border:1px solid var(--lijn-2); background:var(--wit); color:var(--groen-tekst); border-radius:999px; padding:8px 14px; font:600 14.5px/1.3 var(--sans); text-align:left; cursor:pointer}
.keuze:hover{background:var(--groen-zacht); border-color:transparent}
.chat-fout{margin:0; padding:8px 16px; background:var(--bordeaux-zacht); color:var(--bordeaux); font-size:14.5px}
.chat-invoer{display:flex; gap:8px; align-items:flex-end; margin:0; padding:10px 12px max(10px, env(safe-area-inset-bottom)); border-top:1px solid var(--lijn); background:var(--kaart)}
.chat-invoer textarea{flex:1; min-height:46px; max-height:132px; resize:none; padding:11px 16px; border:1px solid var(--lijn-2); border-radius:23px; background:var(--veld); color:var(--inkt); font:16px/1.45 var(--sans)}
.chat-invoer textarea:focus{outline:none; border-color:var(--groen-tekst); background:var(--wit)}
.chat-invoer button{flex:none; width:46px; height:46px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--groen); color:var(--wit); cursor:pointer}
.chat-invoer button:disabled{opacity:.5; cursor:default}

/* Groter scherm: de chat als paneel rechtsonder in plaats van over het hele scherm */
@media (min-width:720px){
  .kop{padding-top:48px}
  .kop h1{font-size:52px}
  .tabbalk{left:50%; right:auto; width:540px; bottom:16px; transform:translateX(-50%)}
  .held{max-width:560px; margin:16px auto 0; border-radius:var(--r) var(--r) 0 0}
  .chat{inset:auto 24px 24px auto; width:400px; height:min(640px, calc(100vh - 48px)); border:1px solid var(--lijn); border-radius:var(--r); overflow:hidden; box-shadow:var(--schaduw-hoog)}
  body.chat-open{overflow:auto}
}
@media (max-width:350px){
  .twee{grid-template-columns:minmax(0,1fr)}
  .kop h1{font-size:38px}
}