/* Een bewegend stripverhaal: decor, tekstballon en werkblad zijn losse lagen. */
:root{--strip-inkt:#302b27;--strip-papier:#fff8e8;--strip-zacht:#f1e3c8;--strip-rand:#524333}
.moderne-wereld{--ink:var(--strip-inkt);--muted:#655749;--gold:#704317;--border:#9a8364;--cyan:#386259;color-scheme:light}
.moderne-wereld :is(h1,h2,h3){font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif}
.moderne-wereld :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid #9e491f;outline-offset:4px;box-shadow:0 0 0 7px #fff8e8}
.moderne-wereld .site-header{background:transparent}
.moderne-wereld .brand{color:#fff8e8;text-shadow:1px 2px 2px #201d18,0 0 10px #201d18}
.moderne-wereld .brand small{color:#fff8e8}.moderne-wereld .brand-mark{background:#fff8e8;color:#704317;border:2px solid var(--strip-inkt);box-shadow:2px 2px 0 #302b2755;text-shadow:none}
.moderne-wereld .menu-schakelaar,.moderne-wereld .site-header .top-nav{background:var(--strip-papier);color:var(--strip-inkt);border:2px solid var(--strip-inkt);border-radius:5px 11px 6px 9px;box-shadow:3px 4px 0 #302b2755}
.moderne-wereld .top-nav a,.moderne-wereld .top-nav .telegram-link{color:var(--strip-inkt);background:transparent;border-color:#302b2726}
.moderne-wereld .top-nav a:hover,.moderne-wereld .top-nav a[aria-current=page]{color:#713718;background:#f2deb6}
.moderne-wereld .site-footer{color:#fff8e8;text-shadow:0 1px 4px #161d22}
.moderne-wereld .site-footer a,.moderne-wereld .wereld-bewegingsknop{background:#fff8e8;color:var(--strip-inkt);border:1px solid var(--strip-rand);border-radius:3px;padding:6px 10px;text-shadow:none}
.startpagina .stad-bord{position:relative;background:var(--strip-papier);color:var(--strip-inkt);border:2px solid var(--strip-inkt);border-radius:48% 44% 45% 38% / 22% 26% 26% 24%;padding:9px 16px;box-shadow:2px 3px 0 #302b2766}
.startpagina .stad-bord::before{content:'';position:absolute;left:46%;top:-10px;width:14px;height:14px;transform:skew(-20deg) rotate(45deg);background:var(--strip-papier);border-left:2px solid var(--strip-inkt);border-top:2px solid var(--strip-inkt)}
.startpagina .stad-bord strong{font-weight:750}.startpagina .stad-ingang:hover .stad-bord,.startpagina .stad-ingang:focus .stad-bord{background:#fff8e8;border-color:#302b27}
.startpagina .stad-welkom{top:106px;max-width:300px}.startpagina .stad-welkom p{display:inline-block;background:#f4d38e;color:#302b27;padding:5px 8px;text-shadow:none;border:1px solid #302b27;transform:none}
.startpagina .stad-welkom h1{font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;font-weight:800;letter-spacing:-.04em}
.startpagina .stad-richting button{background:#fff8e8;color:#302b27;border:2px solid #302b27;box-shadow:2px 2px 0 #302b2744}
.startpagina .drone-metgezel{background:#fff8e8;color:#302b27;border:2px solid #302b27;border-radius:30% 30% 30% 8%;box-shadow:3px 3px 0 #302b2733}
.startpagina .stad-zonder-js{background:#fff8e8;color:#302b27;border:2px solid #302b27}
.startpagina .start-inhoud{animation:none}
/* Geen dekkende blauwe plaat meer achter de hele werkruimte. */
body.inhoudpagina{background:#736651;color:var(--strip-inkt);isolation:isolate}
body.inhoudpagina::before{background:linear-gradient(#28272018,#29221c48),url('/beelden/stad/uitvindersstad.webp?v=stad-20260926-1') var(--kamer-blik) center/auto 100vh no-repeat;opacity:1}
.inhoudpagina .wereld-route{padding-bottom:24px;align-items:center}.inhoudpagina .wereld-route>a{display:inline-flex;background:#f4d38e;border:2px solid #302b27;color:#302b27;padding:6px 12px;box-shadow:2px 3px 0 #302b2755;transform:rotate(-1deg)}
.inhoudpagina .wereld-route>span{display:none}
.inhoudpagina .set-en-inhoud{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,80px);padding:4px 0 32px}
.inhoudpagina .set-en-inhoud>main{width:100%;max-width:720px;justify-self:end}
.inhoudpagina .set-verkenner{overflow:visible;margin:0;top:24px;background:none;border:0;border-radius:0;box-shadow:none}
.inhoudpagina .set-plaat{height:clamp(250px,48vh,600px);border:3px solid #302b27;outline:6px solid #fff8e8;border-radius:2px;box-shadow:10px 12px 0 #302b2740;overflow:hidden;aspect-ratio:auto;background:#a79a79}
.inhoudpagina .set-plaat>img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.03);animation:strip-decor 22s ease-in-out infinite alternate}
.inhoudpagina .set-plaat::after{display:none}
.inhoudpagina .set-bordje{left:12px;right:auto;top:12px;bottom:auto;max-width:calc(100% - 24px);display:block;padding:8px 13px;background:#f4d38e;color:#302b27;border:2px solid #302b27;filter:none;box-shadow:3px 3px 0 #302b2733}
.inhoudpagina .set-bordje .eyebrow{display:none}.inhoudpagina .set-bordje strong{font:800 clamp(1rem,1.5vw,1.45rem)/1.3 ui-rounded,'Trebuchet MS',system-ui}
.inhoudpagina .set-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;padding:0;background:none;border:0;box-shadow:none}
.inhoudpagina .set-voorwerp{flex:0 1 auto;max-width:100%;padding:10px 16px;background:#fff8e8;color:#302b27;border:2px solid #302b27;border-radius:5px 12px 5px 10px;box-shadow:3px 3px 0 #302b2744;font-weight:650;transform:rotate(-1deg)}
.inhoudpagina .set-voorwerp:nth-child(even){transform:rotate(1deg)}.inhoudpagina .set-voorwerp svg,.inhoudpagina .set-voorwerp>span:last-child{color:#704317}
.inhoudpagina :is(.portal-card,.panel-frame,.idea-card){background:var(--strip-papier);color:var(--strip-inkt);border:2px solid var(--strip-inkt);border-radius:3px 8px 4px 6px;box-shadow:4px 5px 0 #302b2740;backdrop-filter:none}
.inhoudpagina .panel-frame::after{display:none}
.inhoudpagina .portal-hero,.inhoudpagina .workspace-copy{position:relative;overflow:visible;background:var(--strip-papier);border:2px solid var(--strip-inkt);border-radius:30px 35px 32px 9px;padding:22px 26px;box-shadow:4px 5px 0 #302b2738;margin:0 0 28px;max-width:620px}
.inhoudpagina .portal-hero::before,.inhoudpagina .workspace-copy::before{content:'';position:absolute;left:28px;bottom:-12px;width:18px;height:20px;background:var(--strip-papier);border-right:2px solid var(--strip-inkt);border-bottom:2px solid var(--strip-inkt);transform:skew(-18deg) rotate(35deg)}
.inhoudpagina :is(.portal-hero,.workspace-copy) h1{font:800 clamp(1.65rem,2.4vw,2.65rem)/1.1 ui-rounded,'Trebuchet MS',system-ui;letter-spacing:-.04em;margin:0 0 14px}
.inhoudpagina :is(.portal-card,.portal-hero,.workspace-copy,.idea-card,.privacy-card) p{color:#514536;line-height:1.65}
.inhoudpagina .eyebrow{color:#77461f;letter-spacing:.09em;font-weight:750}.inhoudpagina .workspace-copy>p:not(.eyebrow){color:#514536;font-size:.88rem}.inhoudpagina .privacy-belofte svg{color:#704317}
.inhoudpagina .workspace{padding:0;border:0;background:transparent;box-shadow:none;overflow:visible}
.inhoudpagina .workspace>.idea-form{padding:24px;background:linear-gradient(90deg,#e8d8b8 0 5px,transparent 5px),#fff8e8;border:2px solid #302b27;border-radius:2px 6px 5px 3px;box-shadow:4px 5px 0 #302b2740}
.inhoudpagina .idea-form{gap:16px}.inhoudpagina .idea-form label>span{color:#40382e;font-weight:700}.inhoudpagina .idea-form label small{color:#6b5b49}
.inhoudpagina :is(.idea-form input,.idea-form textarea,.idea-form select,.beheer-zoek input,.beheer-zoek select,.beheer-rolform select){background:#fffdf6;color:#302b27;border:1.5px solid #887354;border-radius:3px;box-shadow:none;color-scheme:light}
.inhoudpagina .idea-form :is(input,textarea)::placeholder{color:#756551}.inhoudpagina .idea-form :is(input,textarea,select):focus-visible{outline:3px solid #9e491f;outline-offset:2px;box-shadow:none}
.inhoudpagina .idea-form textarea{background:repeating-linear-gradient(transparent 0 26px,#af936b2b 26px 27px),#fffdf6;line-height:27px}
.moderne-wereld .button{border:2px solid #524333;border-radius:4px 8px 4px 7px;box-shadow:2px 3px 0 #302b2730;min-height:44px}
.moderne-wereld .button-primary{background:#f4d38e;color:#302b27;border-color:#302b27}.moderne-wereld .button-primary:hover{background:#ffe3a5}
.moderne-wereld .button-ghost{background:#fff8e8;color:#40382e;border-color:#887354}.moderne-wereld .button-ghost:hover{background:#f2e3c7}
.moderne-wereld .button-danger{background:#ffe4d8;color:#842d1c;border-color:#9b5745}
.inhoudpagina :is(.muted,.idea-meta,.media-uitleg,.media-toestemming,.media-bijlage figcaption,.media-concept figcaption,.drone-metgezel small,.login-stappen){color:#655749}
.inhoudpagina :is(.form-status,.media-status,.stat-getal,.login-code){color:#704317}
.inhoudpagina .media-werkbalk{background:#f1e3c8;border:1px dashed #887354;border-radius:4px;padding:14px}
.inhoudpagina :is(.media-bijlage,.media-concept){background:#f1e3c8;border-color:#887354}
.inhoudpagina :is(.media-bijlage img,.media-concept img){background:#fffdf6}
.inhoudpagina [data-media][aria-pressed=true]{background:#f4d38e;color:#302b27;border-color:#704317}
.inhoudpagina :is(.empty-state,.error-state,.wereld-bewaard,#portaal-status:not(:empty),.privacy-note){background:#fff8e8;color:#655749;border:1px dashed #887354;border-radius:5px;box-shadow:3px 3px 0 #302b2722}
.inhoudpagina .error-state{color:#842d1c;border-color:#9b5745}.inhoudpagina .loading{background:#fff8e8;color:#514536;padding:12px}
.inhoudpagina :is(.tag,.idea-stage,.role-badge){background:#f1e3c8;color:#61451e;border:1px solid #b29a73}
.inhoudpagina .reaction-button{background:#fffdf6;color:#514536;border:1px solid #887354}.inhoudpagina .reaction-button.active{background:#f4d38e;color:#302b27}
.inhoudpagina .drone-metgezel{margin-top:18px;border:2px solid #302b27;border-radius:8px 28px 28px 28px;background:#fff8e8;color:#302b27;max-width:360px}
.inhoudpagina .drone-voorbeeld{background:radial-gradient(ellipse,#e4cd98,transparent 68%)}
.inhoudpagina :is(.denktank-aanpak,.denktank-voorbeelden){padding:14px 18px;background:#fff8e8;border:2px solid #302b27;box-shadow:3px 3px 0 #302b2733;margin-bottom:18px}
.inhoudpagina .denktank-aanpak{background:#f4d38e;gap:14px}.inhoudpagina :is(.denktank-aanpak span,.denktank-aanpak b,.denktank-voorbeelden p){color:#514536}
.inhoudpagina .thema-filters a{background:#fff8e8;color:#514536;border:1px solid #524333;border-radius:3px}.inhoudpagina .thema-filters a[aria-current=page]{background:#f4d38e;color:#302b27;border:2px solid #302b27}
.inhoudpagina main>.muted,.inhoudpagina .section-heading{background:#fff8e8;padding:12px 16px;border:1px solid #524333;border-radius:4px}.inhoudpagina .section-heading h2{font-size:1.4rem}
.schets-venster{background:#fff8e8;color:#302b27;border:3px solid #302b27;border-radius:4px;box-shadow:8px 8px 0 #302b2744;color-scheme:light}
.schets-venster::backdrop{background:#211f1aaa}.schets-venster p,.schets-venster .schets-status{color:#655749}
.schets-gereedschap :is(input,select,.button){background:#fffdf6;color:#302b27;border-color:#887354}.schets-gereedschap [aria-pressed=true]{background:#f4d38e;color:#302b27;border-color:#302b27}
/* Eén korte bladwissel; geen flitsen of geblokkeerde bediening. */
.strip-overgang{position:fixed;inset:-20%;z-index:100;pointer-events:none;visibility:hidden;background:linear-gradient(105deg,transparent 35%,#302b2766 36%,#fff8e8 37%,#e5cb97 60%,#302b27 60.3%,transparent 61%);transform:translateX(160%) rotate(-5deg)}
.strip-vertrek .strip-overgang{visibility:visible;animation:strip-omslaan .32s ease-in both}
.strip-keuze{animation:strip-puls .3s ease-out}
.strip-klaar .inhoudpagina .set-plaat{animation:strip-kader .38s ease-out both}
.strip-klaar .inhoudpagina :is(.workspace-copy,.portal-hero){animation:strip-ballon .38s .06s ease-out both}
.strip-klaar .inhoudpagina .workspace>.idea-form{animation:strip-kader .38s .1s ease-out both}
.inhoudpagina .set-en-inhoud,.inhoudpagina main{animation:none}
@keyframes strip-decor{from{transform:scale(1.03) translateX(-.4%)}to{transform:scale(1.08) translateX(.4%)}}
@keyframes strip-kader{from{opacity:.35;translate:8px 0}to{opacity:1;translate:0 0}}
@keyframes strip-ballon{from{opacity:0;translate:0 7px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@keyframes strip-omslaan{to{transform:translateX(-100%) rotate(-5deg)}}
@keyframes strip-puls{50%{filter:drop-shadow(0 0 12px #ffe2a0);scale:1.025}}
.beweging-uit :is(.strip-overgang,.strip-keuze,.inhoudpagina .set-plaat,.inhoudpagina .set-plaat>img,.inhoudpagina .workspace-copy,.inhoudpagina .portal-hero,.inhoudpagina .workspace>.idea-form){animation:none!important;transition:none!important}
.strip-pauze .set-plaat>img{animation-play-state:paused}
@media(max-width:900px){.inhoudpagina .set-en-inhoud{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:24px}.inhoudpagina .set-plaat{height:330px}}
@media(max-width:760px){.inhoudpagina .set-en-inhoud{display:block}.inhoudpagina .set-en-inhoud>main{max-width:none}.inhoudpagina .set-verkenner{position:relative;top:0;margin-bottom:24px}.inhoudpagina .set-plaat{height:clamp(180px,29vh,260px);outline-width:4px;box-shadow:5px 6px 0 #302b2740}.inhoudpagina .set-links{gap:10px;margin-top:16px}.inhoudpagina .set-voorwerp{flex:1 1 125px;padding:8px 10px;font-size:.74rem}.inhoudpagina .portal-hero,.inhoudpagina .workspace-copy{padding:20px;border-radius:24px 28px 26px 6px}.inhoudpagina .workspace>.idea-form{padding:18px}.inhoudpagina .wereld-route{padding-bottom:20px}.startpagina .stad-welkom{top:88px;max-width:245px}.startpagina .stad-welkom h1{font-size:1.65rem}.inhoudpagina .site-footer{gap:14px}.inhoudpagina .set-bordje strong{font-size:1rem}}
@media(max-height:500px){.startpagina .stad-welkom{top:74px}.startpagina .stad-welkom h1{font-size:1.4rem}}
@media(prefers-reduced-motion:reduce){.strip-overgang,.strip-keuze,.inhoudpagina .set-plaat,.inhoudpagina .set-plaat>img,.inhoudpagina .workspace-copy,.inhoudpagina .portal-hero,.inhoudpagina .workspace>.idea-form{animation:none!important;transition:none!important}}
