/* ===== 1april mobiel-responsive laag — Lex 2026-06-03 ===== */ /* Geladen NA style.css. Desktop blijft ongewijzigd; alles in @media */ /* werkt pas <=800px. !important is nodig omdat sommige paginatypes */ /* style.css een 2e keer in de laden (na deze head-link), wat */ /* anders de desktop-breedtes zou herstellen. */ #m-topbar { display: none; } #menu .mlabel { display: none; } @media (max-width: 800px) { html { overflow-y: auto; } body { font-size: 95%; -webkit-text-size-adjust: 100%; } /* alle content-media schalen mee */ div#right img, div#left img, div#right video, div#right iframe, div#right embed, div#right object { max-width: 100% !important; height: auto !important; } /* ---------- container + kolommen ---------- */ div#container { width: 100% !important; max-width: 968px !important; border-left: 0 !important; display: flex !important; flex-direction: column !important; } div#container div#header { order: 0; } div#container div#right { order: 1; } /* content boven... */ div#container div#left { order: 2; } /* ...sidebar eronder */ div#container div#footer { order: 3; } .clear { display: none !important; } div#container div#left, div#container div#right { float: none !important; width: auto !important; box-sizing: border-box !important; border: 0 !important; padding: 12px 14px !important; } div#container div#right { border-top: 2px solid #0b4b60 !important; min-height: 0 !important; } /* ---------- mobiele header / topbar ---------- */ div#container div#header { height: auto !important; width: 100% !important; background: #0b4b60 !important; overflow: hidden !important; } #m-topbar { display: flex !important; align-items: center; justify-content: space-between; padding: 0 14px; min-height: 54px; } #m-logo { color: #fff; font-size: 22px; font-weight: bold; text-decoration: none; line-height: 54px; } #m-nav-toggle { color: #fff; font-size: 30px; line-height: 54px; text-decoration: none; padding: 0 6px; user-select: none; } /* desktop-header-onderdelen standaard verbergen op mobiel */ div#header ul#menu, div#header div#search, div#header ul#language { display: none !important; position: static !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; float: none !important; width: auto !important; margin: 0 !important; } div#header div#breadcrumb { display: none !important; } /* open-staat: paneel tonen */ div#header.m-open { padding-bottom: 12px !important; } div#header.m-open ul#menu, div#header.m-open div#search, div#header.m-open ul#language { display: block !important; } /* menu-items als volle-breedte tekstlinks */ div#header.m-open ul#menu li { float: none !important; } div#header.m-open ul#menu li a { display: block !important; height: auto !important; width: auto !important; background: none !important; /* PNG-knop weg */ padding: 13px 14px !important; color: #fff !important; font-size: 18px; text-decoration: none; border-top: 1px solid rgba(255,255,255,.18); } #menu .mlabel { display: inline !important; } /* tekstlabel tonen */ /* zoekbalk in paneel */ div#header.m-open div#search { padding: 10px 14px !important; } div#header.m-open div#search form { display: flex; gap: 6px; } div#header.m-open div#search input.textField { flex: 1 1 auto; width: auto !important; box-sizing: border-box; padding: 9px; } div#header.m-open div#search input.submitField { width: auto !important; min-width: 84px; height: auto !important; padding: 9px 12px; background-position: 6px center; } /* taalvlaggen in paneel */ div#header.m-open ul#language { padding: 8px 14px !important; } div#header.m-open ul#language li { display: inline-block !important; margin: 0 12px 0 0 !important; } /* ---------- content: vaste-breedte elementen vloeiend ---------- */ div#right .box, div#right .crushBox, div#right div.reply, div#right table.reply-joke, .box, .crushBox { width: auto !important; max-width: 100% !important; box-sizing: border-box !important; } .box .text, .box .photo, .crushBox .text, .crushBox .photo, .crushBox .text .links, .crushBox .text .rechts, .box .text p span { float: none !important; width: auto !important; } .crushBox .photobox { float: none !important; margin: 0 0 8px !important; } .crushBox h3 { width: auto !important; } div#right div.purple-circle { float: none !important; width: auto !important; max-width: 100% !important; height: auto !important; padding: 18px !important; margin: 12px 0 !important; background-size: cover; border-radius: 8px; } img.float { float: none !important; display: block; margin: 0 0 10px !important; } /* tabellen die als layout gebruikt worden */ div#right table.reply-joke, div#right table.reply-joke tbody, div#right table.reply-joke tr, div#right table.reply-joke td { display: block !important; width: auto !important; } div#right table.reply-joke tr td.first { width: auto !important; } /* formulieren */ div#right input.input-joke, input.input-joke, #right textarea.textarea-joke, div#right textarea.textarea-joke, div#left textarea.textarea-joke { width: 100% !important; box-sizing: border-box !important; } /* footer vloeiend */ div#container div#footer { height: auto !important; background-size: cover; background-position: center; padding: 16px 14px !important; line-height: 1.5; } /* leesbaarheid / tap-targets */ div#left ul li a { font-size: 1.1em; } div#left ul li { line-height: 1.5; } h1 { font-size: 1.5em !important; line-height: 1.3 !important; } h2 { font-size: 1.3em !important; line-height: 1.3 !important; } p { padding: 5px 0 10px 0 !important; } }