:root{--ink:#102f48;--deep:#174a70;--mid:#3e769b;--pale:#c9dfec;--paper:rgba(224,239,247,.88);--line:rgba(20,73,108,.38);--link:#003f78}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font:16px/1.55 Verdana,Arial,sans-serif;background:#a9c9dc url('asset_wolken/cloudbg.jpg') center top/cover repeat-y;overflow-x:hidden}a{color:var(--link)}a:hover,a:focus-visible{color:#001e3a}.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.6rem;z-index:20}.page{width:min(940px,calc(100% - 28px));margin:22px auto 42px}.masthead,.panel,.quick,footer{background:var(--paper);border:1px solid var(--line);box-shadow:0 2px 10px rgba(0,35,58,.12)}.masthead{padding:24px 28px 20px;text-align:center;border-radius:7px 7px 0 0}.brand{font-weight:bold;letter-spacing:.12em;color:var(--deep)}h1{margin:.15rem 0 0;font:700 clamp(1.8rem,5vw,2.7rem) Georgia,serif;color:var(--deep)}.masthead p{margin:.25rem 0 0}.quick{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;padding:10px 14px;border-top:0}.quick a{padding:.35rem .7rem;font-size:.9rem}.panel{margin-top:16px;padding:22px 26px;border-radius:5px}h2{margin:0 0 14px;font:700 1.35rem Georgia,serif;color:var(--deep);border-bottom:1px solid var(--line);padding-bottom:7px}h2 span{font-size:.8em;font-weight:normal}.cloud-list{margin:0;padding-left:1.35rem}.cloud-list li{padding:.34rem .15rem}.cloud-list.compact li{padding:.24rem .15rem}.photo{font-weight:700}.intro,.note{background:rgba(255,255,255,.35);padding:10px 12px;border-left:3px solid var(--mid)}code{font-size:.9em}.info p{margin:.5rem 0}footer{text-align:center;margin-top:16px;padding:12px;font-size:.78rem;border-radius:5px}.lightbox{position:fixed;inset:0;z-index:100;background:rgba(4,18,29,.92);display:grid;place-items:center;padding:50px 18px 24px}.lightbox[hidden]{display:none}.lightbox img{max-width:min(1200px,96vw);max-height:82vh;object-fit:contain;box-shadow:0 5px 30px #000}.lightbox p{position:absolute;bottom:8px;color:#fff;margin:0;font-size:.9rem}.close{position:fixed;right:max(16px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));width:46px;height:46px;border:2px solid #fff;border-radius:50%;background:#153f5d;color:#fff;font:32px/38px Arial;cursor:pointer;z-index:101}.close:hover,.close:focus-visible{background:#fff;color:#153f5d}@media(max-width:600px){html{scroll-behavior:auto}body{background-size:auto 100vh;background-attachment:scroll}.page{width:calc(100% - 16px);margin:8px auto 24px}.masthead{padding:18px 14px}.panel{padding:17px 15px}.quick{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}.quick a{white-space:nowrap}.cloud-list{padding-left:1.2rem}.cloud-list li{padding:.46rem .1rem}.lightbox{padding:58px 8px 20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* vaste homeknop linksboven */
.home-button {
    position: fixed !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: auto !important;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.92);
    border: 2px solid var(--deep);
    border-radius: 50%;
    color: var(--deep);
    text-decoration: none;
    font-size: 24px;
    line-height: 1;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0,35,58,.25);
}

.home-button:hover,
.home-button:focus-visible {
    background: #fff;
    color: var(--ink);
    transform: scale(1.06);
}

/* miniaturen bij fotolinks */
.cloud-list a{display:inline-flex;align-items:center;gap:.55rem;vertical-align:middle}
.cloud-list .thumb{width:92px;height:68px;object-fit:cover;border:1px solid var(--line);border-radius:3px;box-shadow:0 1px 4px rgba(0,35,58,.14);flex:0 0 auto}
@media(max-width:600px){.cloud-list .thumb{width:76px;height:56px}}
