/* ============================================================ overrides.css — MASTER (v107) — Romantischerijn finetune Fixes: - Subpages: ruimte onder nav - Subpages: 2 kolommen (Schwerin-style floats) - Affiliate banners desktop naast elkaar - Mobiel: nav-balk zichtbaar + sticky, hamburger binnen beeld, logo groter - Global: afbeeldingen responsive ============================================================ */ :root{ --wrap-max: 1200px; --wrap-pad: 16px; --gap: 26px; --radius-card: 16px; --radius-media: 18px; --footer-safe: 64px; } /* ankers onder sticky header */ [id]{ scroll-margin-top: 120px; } /* wrapper consistent */ .wrapper, #main.wrapper{ max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); } /* ============================================================ GLOBAL IMAGE RESPONSIVE (zeker op mobiel) ============================================================ */ img{ max-width: 100% !important; height: auto !important; } /* ============================================================ NAV — mobiel balk terug zichtbaar + sticky/fixed gedrag robuust ============================================================ */ /* altijd bovenop */ #sfNav.sf-nav{ z-index: 7000 !important; } /* MOBIEL: maak er weer écht een balk van (achtergrond + hoogte) */ @media (max-width: 980px){ /* sticky/fixed nav (zoals jij wilt) */ #sfNav.sf-nav{ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; background: #fff !important; border-bottom: 1px solid #e6e6e6 !important; box-shadow: 0 6px 18px rgba(0,0,0,.08) !important; height: var(--nav-h-mobile, 92px) !important; display: flex !important; align-items: center !important; padding: 0 14px !important; box-sizing: border-box !important; } /* Logo netjes in de balk, iets groter */ #sfNav .sf-nav__logo{ display: inline-flex !important; align-items: center !important; height: 100% !important; margin: 0 !important; } #sfNav .sf-nav__logo img{ max-height: 58px !important; /* groter logo */ width: auto !important; height: auto !important; display: block !important; } /* Hamburger altijd binnen beeld rechts */ #sfNav .sf-nav__toggle{ position: absolute !important; right: 22px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 7100 !important; } } /* Subpagina’s: geef #main “lucht” onder de nav (desktop + mobiel) */ @media (min-width: 981px){ body.sf-subpage #main{ margin-top: calc(var(--nav-h-desktop, 84px) + 22px) !important; } } @media (max-width: 980px){ body.sf-subpage #main{ margin-top: calc(var(--nav-h-mobile, 92px) + 16px) !important; } } /* Homepage: zorg dat hero niet onder fixed nav schuift (mobiel) */ @media (max-width: 980px){ body:not(.sf-subpage) #hero{ margin-top: var(--nav-h-mobile, 92px) !important; } } /* ============================================================ SUBPAGES — 2 kolommen (desktop) — SCHWERIN STYLE (FLOATS) Vereist: Structuur: #main bevat #content + (1 of meer)

============================================================ */ @media (min-width: 920px){ body.sf-subpage #content{ float: left !important; width: 60% !important; max-width: none !important; margin: 0 !important; } body.sf-subpage #main > aside{ float: right !important; width: 35% !important; max-width: 35% !important; margin: 0 0 18px 0 !important; /* maps nooit naast booking */ clear: right !important; display: block !important; } body.sf-subpage #main > aside iframe{ width: 100% !important; max-width: 100% !important; display: block !important; } body.sf-subpage #main::after{ content:""; display: table; clear: both; } } /* ============================================================ AFFILIATE BANNERS — desktop naast elkaar, mobiel onder elkaar ============================================================ */ @media (min-width: 920px){ body.sf-subpage #content a[rel~="nofollow"]{ display: inline-block !important; vertical-align: top !important; width: calc(50% - 10px) !important; margin-right: 16px !important; } body.sf-subpage #content a[rel~="nofollow"]:last-of-type{ margin-right: 0 !important; } body.sf-subpage #content a[rel~="nofollow"] img{ display: block !important; width: 100% !important; height: auto !important; } } @media (max-width: 919px){ body.sf-subpage #content a[rel~="nofollow"]{ display: block !important; width: 100% !important; margin: 10px 0 !important; } body.sf-subpage #content a[rel~="nofollow"] img{ display: block !important; width: 100% !important; height: auto !important; } } /* ============================================================ HERO (homepage) ============================================================ */ #hero{ margin-top: var(--nav-h-desktop, 84px); background-size: cover; background-position: center; min-height: 460px; padding: 48px 0; display: flex; align-items: center; } @media (max-width: 980px){ #hero{ min-height: 340px; padding: 28px 0; } } #hero .wrapper{ width: 100%; display: flex !important; justify-content: flex-start !important; text-align: left !important; } .hero-box{ background: rgba(0,0,0,.20); color: #fff; border-radius: var(--radius-card); box-shadow: 0 14px 34px rgba(0,0,0,.18); padding: 26px 30px; max-width: 560px; margin-left: 0; margin-right: auto; } @media (max-width: 980px){ .hero-box{ background: rgba(0,0,0,.26); } } .hero-box h1, .hero-box p{ color: #fff; margin: 0; } .hero-box h1{ margin-bottom: 10px; } /* ============================================================ TEGELS (homepage) ============================================================ */ .sf-tiles{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--gap) !important; margin-top: 26px !important; } .sf-tiles .grid_4{ float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; background: #fff !important; border: 1px solid #eee !important; border-radius: var(--radius-card) !important; box-shadow: 0 10px 26px rgba(0,0,0,.06) !important; overflow: hidden !important; transition: transform .18s ease, box-shadow .18s ease !important; } .sf-tiles .grid_4:hover{ transform: translateY(-4px) !important; box-shadow: 0 16px 34px rgba(0,0,0,.10) !important; } .sf-tiles .grid_4 h2{ margin: 0 !important; padding: 16px 18px 10px !important; } .sf-tiles .grid_4 p{ margin: 0 !important; padding: 0 18px 18px !important; } .sf-tiles .grid_4 img{ width: 100% !important; height: 180px !important; object-fit: cover !important; display: block !important; } @media (max-width: 980px){ .sf-tiles{ grid-template-columns: 1fr !important; } .sf-tiles .grid_4 img{ height: 210px !important; } } /* ============================================================ PREFOOTER IMAGE - Desktop/mobile switch - Hard scoped ============================================================ */ .sf-prefooter-image{ max-width: var(--wrap-max); margin: 36px auto; padding-left: var(--wrap-pad); padding-right: var(--wrap-pad); } /* basis */ .sf-prefooter-image img{ width: 100% !important; height: auto !important; border-radius: var(--radius-media); } /* DESKTOP zichtbaar */ .sf-prefooter-image img.sf-prefooter-desktop{ display: block !important; } /* MOBILE verborgen */ .sf-prefooter-image img.sf-prefooter-mobile{ display: none !important; } @media (max-width: 980px){ .sf-prefooter-image{ padding-left: 0px; padding-right: 0px; margin: 10px auto; } } /* ============================================================ MOBIEL ============================================================ */ @media (max-width: 980px){ /* desktop weg */ .sf-prefooter-image img.sf-prefooter-desktop{ display: none !important; } /* mobiel tonen */ .sf-prefooter-image img.sf-prefooter-mobile{ display: block !important; } } /* ============================================================ LINKBLOCKS ============================================================ */ .sf-linkblocks{ max-width: var(--wrap-max); margin: 40px auto 70px; padding-left: var(--wrap-pad); padding-right: var(--wrap-pad); display: flex; align-items: flex-start; justify-content: flex-start; gap: 88px; } .sf-linkblocks .grid_2, .sf-linkblocks .grid_3{ float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; } @media (max-width: 980px){ .sf-linkblocks{ flex-direction: column; gap: 32px; } } .sf-linkblocks h3{ margin: 0 0 10px; } .sf-linkblocks ul{ margin: 0; padding-left: 18px; } .sf-linkblocks li{ margin: 6px 0; } /* ============================================================ FOOTER ============================================================ */ footer{ border-top: 1px solid #e6e6e6; margin-top: 40px; } #colophon{ padding: 18px 0; text-align: center; } /* ============================================================ BACK TO TOP ============================================================ */ .sf-top{ position: fixed !important; right: 18px !important; bottom: var(--footer-safe) !important; width: 44px !important; height: 44px !important; border-radius: 999px !important; border: 1px solid #ddd !important; background: #fff !important; color: #000 !important; font-size: 18px !important; cursor: pointer !important; z-index: 99999 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(10px) !important; transition: opacity .25s ease, transform .25s ease !important; } .sf-top.show{ opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } .sf-top.show:hover{ transform: translateY(-2px) !important; } /* ============================================================ MOBIEL MENU BULLETS FIX ============================================================ */ @media (max-width: 820px){ #sfNav .sf-nav__list li::after, #sfNav .sf-nav__list a::before, #sfNav .sf-nav__list a::after{ content: none !important; } #sfNav .sf-nav__list{ list-style: none !important; } #sfNav .sf-nav__list li{ list-style: none !important; position: relative !important; } #sfNav .sf-nav__list li::before{ content: "\2022" !important; position: absolute !important; left: 10px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 16px !important; line-height: 1 !important; color: #cfcfcf !important; font-family: Arial, sans-serif !important; } #sfNav .sf-nav__list a{ padding-left: 26px !important; } } /* ============================================================ SUBPAGE ADDON v16 — DEFINITIEF Scope: body.sf-subpage Fix: - “Meer padding boven” was in werkelijkheid top-margin van eerste child - Daarom: eerste child margin-top = 0 (booking + maps + algemeen) - Booking: bottom = top (10px) - Maps: extra bottom (24px) - Desktop: floats rechts, stacked - Mobiel: onder elkaar + booking fit + extra padding links ============================================================ */ :root{ --sub-gap: 18px; --sub-sidebar-w: 340px; --card-radius: 16px; --card-border: #eee; --card-shadow: 0 10px 26px rgba(0,0,0,.06); /* BASIS card padding */ --pad-top: 10px; --pad-right: 12px; --pad-left: 14px; /* Booking: bottom = top */ --pad-bottom-booking: 10px; /* Maps: ruimer onderin */ --pad-bottom-maps: 24px; /* Mobiel booking */ --pad-left-booking-mobile: 18px; --booking-scale-mobile: .88; --booking-shift-mobile: -1%; } /* Lege asides weg */ body.sf-subpage aside:empty{ display: none !important; } /* Cards algemeen: padding-top is altijd 10px */ body.sf-subpage aside:not(:empty){ background: #fff !important; border: 1px solid var(--card-border) !important; border-radius: var(--card-radius) !important; box-shadow: var(--card-shadow) !important; /* zet padding expliciet per kant (ipv shorthand “misinterpreted”) */ padding-top: var(--pad-top) !important; padding-right: var(--pad-right) !important; padding-left: var(--pad-left) !important; /* default bottom (valt terug op booking tenzij maps) */ padding-bottom: var(--pad-bottom-booking) !important; overflow: hidden !important; box-sizing: border-box !important; } /* === HIER zit de echte fix: top-margin van eerste child killen === */ body.sf-subpage aside:not(:empty) > :first-child{ margin-top: 0 !important; } /* Voor de zekerheid ook headings in cards */ body.sf-subpage aside:not(:empty) h1, body.sf-subpage aside:not(:empty) h2, body.sf-subpage aside:not(:empty) h3{ margin-top: 0 !important; } /* Iframes strak (geen eigen margins) */ body.sf-subpage aside iframe{ width: 100% !important; max-width: 100% !important; display: block !important; border: 0 !important; margin: 0 !important; } /* Maps: extra bottom padding (alleen maps) */ body.sf-subpage aside:has(iframe[src*="google.com/maps"]), body.sf-subpage aside:has(iframe[src*="maps.google"]), body.sf-subpage aside:has(iframe[id*="map"]), body.sf-subpage aside:has(iframe[class*="map"]){ padding-bottom: var(--pad-bottom-maps) !important; } /* Desktop: floats rechts */ @media (min-width: 981px){ body.sf-subpage #content{ overflow: hidden; } body.sf-subpage aside{ float: right !important; clear: right !important; width: var(--sub-sidebar-w) !important; max-width: var(--sub-sidebar-w) !important; margin: 0 0 var(--sub-gap) var(--sub-gap) !important; } } /* Mobiel: onder elkaar + booking fit + extra padding links */ @media (max-width: 980px){ body.sf-subpage aside{ float: none !important; clear: none !important; width: auto !important; max-width: none !important; margin: 0 0 14px !important; } /* booking extra padding links */ body.sf-subpage aside:has(iframe[src*="booking"]), body.sf-subpage aside:has(iframe[id*="booking"]), body.sf-subpage aside:has(iframe[class*="booking"]){ padding-left: var(--pad-left-booking-mobile) !important; padding-right: var(--pad-right) !important; } /* booking iframe fit */ body.sf-subpage iframe[src*="booking"], body.sf-subpage iframe[id*="booking"], body.sf-subpage iframe[class*="booking"]{ transform: scale(var(--booking-scale-mobile)) translateX(var(--booking-shift-mobile)) !important; transform-origin: top left !important; width: calc(100% / var(--booking-scale-mobile)) !important; max-width: none !important; height: 240px !important; } } /* ============================================================ BOOKING BOTTOM FINAL FIX - Maakt ALLEEN de onderkant van booking strakker - Bovenkant blijft exact zoals nu goed is - Werkt desktop + mobiel ============================================================ */ body.sf-subpage aside:has(iframe[src*="booking"]):not(:has(iframe[src*="maps"])), body.sf-subpage aside:has(iframe[id*="booking"]):not(:has(iframe[id*="map"])), body.sf-subpage aside:has(iframe[class*="booking"]):not(:has(iframe[class*="map"])){ padding-bottom: 0px !important; } /* Mobiel: minder lege ruimte onder booking door lagere iframe hoogte */ @media (max-width: 980px){ body.sf-subpage iframe[src*="booking"], body.sf-subpage iframe[id*="booking"], body.sf-subpage iframe[class*="booking"]{ height: 230px !important; /* was 240px; probeer 220/210/200 */ } } /* ============================================================ SUBPAGES — Affiliate banners NIET upscalen (zoals home) Doel: - Op subpages banners niet vergroten (geen wazige upscaling) - Wel responsive: op smalle schermen schalen ze terug Scope: alleen subpages ============================================================ */ body.sf-subpage #content a[rel~="nofollow"]{ display: inline-block !important; vertical-align: top !important; /* geen geforceerde kolombreedtes die upscalen */ width: auto !important; max-width: 360px !important; /* pas aan indien je home smaller/groter is */ margin: 6px 12px 6px 0 !important; text-decoration: none !important; } body.sf-subpage #content a[rel~="nofollow"] > img{ display: block !important; /* sleutel: niet opblazen */ width: auto !important; height: auto !important; /* maar wél terugschalen als nodig */ max-width: 100% !important; border-radius: 12px !important; } /* Mobiel: banners mogen gewoon 100% breed, maar nog steeds niet forceren als 'width:auto' voldoende is */ @media (max-width: 980px){ body.sf-subpage #content a[rel~="nofollow"]{ max-width: 520px !important; margin-right: 0 !important; } } /* ============================================================ SUBPAGES — CONTENT ZONE ZACHTE ACHTERGROND - Alleen subpages - Contentkolom licht getint - Sidebar-cards blijven wit ============================================================ */ body.sf-subpage{ background: #ffffff; /* pagina zelf wit houden */ } /* Contentkolom */ body.sf-subpage #content{ background: #faf9f7; /* zachte off-white (warm) */ padding: 28px 28px 34px; /* iets meer ademruimte */ border-radius: 18px; /* heel subtiel afgerond */ } /* Desktop: content staat los van sidebar */ @media (min-width: 981px){ body.sf-subpage #content{ margin-right: 0; /* geen overlap met sidebar */ } } /* Mobiel: minder padding zodat het niet “kaart-achtig” wordt */ @media (max-width: 980px){ body.sf-subpage #content{ padding: 20px 16px 26px; border-radius: 14px; } } /* ============================================================ SUBPAGES — Affiliate blok als card (tekst + banners) Gebruik: wrap met

...

============================================================ */ body.sf-subpage #content .sf-affcard{ background: #fff; border: 1px solid #eee; border-radius: 16px; box-shadow: 0 10px 26px rgba(0,0,0,.06); padding: 14px 14px 16px; margin: 18px 0 22px; /* los van de content erboven/onder */ } /* Tekst boven de banners */ body.sf-subpage #content .sf-affcard p{ margin: 0 0 10px; } /* Banners: niet upscalen, wel netjes */ body.sf-subpage #content .sf-affcard a[rel~="nofollow"]{ display: inline-block; vertical-align: top; margin: 6px 12px 6px 0; width: auto; max-width: 360px; text-decoration: none; } body.sf-subpage #content .sf-affcard a[rel~="nofollow"] > img{ display: block; width: auto; height: auto; max-width: 100%; border-radius: 12px; } /* Desktop: 2 naast elkaar als er ruimte is */ @media (min-width: 981px){ body.sf-subpage #content .sf-affcard a[rel~="nofollow"]{ width: calc(50% - 10px); max-width: 360px; } } /* Mobiel: onder elkaar */ @media (max-width: 980px){ body.sf-subpage #content .sf-affcard{ padding: 12px 12px 14px; } body.sf-subpage #content .sf-affcard a[rel~="nofollow"]{ width: 100%; max-width: 520px; margin-right: 0; } } /* ============================================================ SUBPAGES — Contentfoto’s (rustiger & consistenter) ============================================================ */ body.sf-subpage #content img{ max-width: 100%; height: auto; display: block; border-radius: 14px; /* subtiel afgerond */ margin: 16px 0 20px; /* ademruimte rond foto */ } /* Mobiel: iets subtieler */ @media (max-width: 980px){ body.sf-subpage #content img{ border-radius: 12px; margin: 14px 0 18px; } } /* ============================================================ MASTER – DESKTOP GUTTER TUSSEN #content EN ASIDE + BOOKING FIX - behoudt jouw bestaande card-padding (GEEN padding overrides) - echte gutter tussen main en aside - Booking iframe niet afgesneden (zoekknop zichtbaar) - eerste lege aside verbergen ============================================================ */ @media (min-width: 1024px){ :root{ --sf-aside-w: 360px; /* sidebarbreedte (330 kan, 360 is vaak fijner voor Booking) */ --sf-gutter: 24px; /* ruimte tussen kolommen (24/32) */ } /* Wrapper clearfix */ div#main.wrapper.sf-subpage-main::after{ content: "" !important; display: table !important; clear: both !important; } /* MAIN kolom (#content) */ div#main.wrapper.sf-subpage-main > section#content{ float: left !important; width: calc(100% - var(--sf-aside-w) - var(--sf-gutter) - 1px) !important; /* safety */ margin-right: var(--sf-gutter) !important; /* echte gutter */ box-sizing: border-box !important; } /* SIDEBAR kolom: alle directe asides rechts */ div#main.wrapper.sf-subpage-main > aside{ float: right !important; width: var(--sf-aside-w) !important; box-sizing: border-box !important; clear: right !important; } /* Eerste aside is in jouw HTML het lege slot -> altijd verbergen */ div#main.wrapper.sf-subpage-main > aside:first-of-type{ display: none !important; } /* ============================================================ BOOKING IFRAME FIX (zonder card-padding te veranderen) - voorkom afsnijden door overflow - iframe altijd responsief binnen de beschikbare binnenbreedte ============================================================ */ /* Niets in de booking-card mag de iframe "knippen" */ div#main.wrapper.sf-subpage-main > aside:has(iframe[name="sbox_iframe"]){ overflow: visible !important; } /* Booking iframe: altijd 100% van de beschikbare binnenruimte */ div#main.wrapper.sf-subpage-main > aside iframe[name="sbox_iframe"]{ width: 100% !important; max-width: 100% !important; display: block !important; border: 0 !important; } /* (Optioneel) als je 'm nét iets smaller wilt, zet 4px i.p.v. 0 */ /* div#main.wrapper.sf-subpage-main > aside iframe[name="sbox_iframe"]{ max-width: calc(100% - 4px) !important; margin-left: auto !important; margin-right: auto !important; } */ } /* ========================================================= HERO – foto intact, alleen tekstvlak donkerder Weekendjeduitsland ========================================================= */ /* 1) Zorg dat er géén pseudo overlay actief is */ #hero::before, #hero:before { content: none !important; } /* 2) Zet blend overlay uit (anders wordt hele panorama donkerder) */ #hero { background-blend-mode: normal !important; background-color: transparent !important; filter: none !important; opacity: 1 !important; } /* 3) Donkere transparante achtergrond achter de tekst */ #hero .hero-box { background: rgba(0, 0, 0, 0.52) !important; /* 0.35 subtiel / 0.45 goed / 0.55 stevig */ color: #fff; } /* 4) Klein extraatje voor leesbaarheid */ #hero .hero-box h1, #hero .hero-box p { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } /* LINKBLOCKS onderaan – netjes verdelen */ .sf-linkblocks{ display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: 32px !important; } /* floats neutraliseren */ .sf-linkblocks .grid_3{ float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= LINKBLOCKS onderaan – force grid (wint altijd) ========================================================= */ #main #content .sf-linkblocks{ /* override op alles wat eerder flex was */ display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; /* 5 kolommen */ gap: 28px !important; max-width: var(--wrap-max) !important; margin: 40px auto 70px !important; padding: 0 var(--wrap-pad) !important; align-items: start !important; } /* oude float/grid opruimen */ #main #content .sf-linkblocks > .grid_3{ float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; } /* clearfix niet nodig bij grid */ #main #content .sf-linkblocks > .sf-clear{ display: none !important; } /* Responsive terugschakelen */ @media (max-width: 1200px){ #main #content .sf-linkblocks{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 980px){ #main #content .sf-linkblocks{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 560px){ #main #content .sf-linkblocks{ grid-template-columns: 1fr !important; } } /* ============================================================ SIDEBAR PROMO IMAGE ============================================================ */ body.sf-subpage #main > aside.sf-sidebar-promo{ background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: hidden !important; } body.sf-subpage #main > aside.sf-sidebar-promo img{ display: block !important; width: 100% !important; height: auto !important; border-radius: 16px !important; margin: 0 !important; } /* Merk kleur Weekendjeduitsland.com */ :root { --wd-green: #4e6849; --wd-green-dark: #3d5339; --wd-green-soft: #eef3ed; } /* Algemene H1 en H2 */ h1, h2 { color: var(--wd-green-dark); } /* Hero H1 wit houden */ #hero h1, .hero-box h1 { color: #ffffff; } /* H2 in homepage tegels */ .sf-tiles h2 { color: var(--wd-green-dark); } /* Tegels iets moderner */ .sf-tiles .grid_4 { position: relative; border-radius: 14px; overflow: hidden; background: #ffffff; } /* Groene lijn bovenin tegel */ .sf-tiles .grid_4::before { content: ""; display: block; height: 4px; background: var(--wd-green-soft); width: 100%; } /* Afbeeldingen tegels netjes */ .sf-tiles img { display: block; } /* Links in tegels */ .sf-tiles a, .sf-tiles a:visited { color: #4e6849; } .sf-tiles a:hover, .sf-tiles a:focus { color: #3d5339; } /* Onderste linkblokken */ .sf-linkblocks { background: var(--wd-green-soft); border-radius: 14px; margin-top: 30px; padding: 35px 28px 42px 38px !important; box-sizing: border-box; overflow: hidden; } /* De grid zelf iets losser binnen het vlak */ .sf-linkblocks .grid_1 { margin-bottom: 22px !important; } /* Extra lucht onder de laatste rij */ .sf-linkblocks .sf-clear { height: 0 px; !important; clear: both; } /* Eerste kolom linkblokken iets naar rechts */ .sf-linkblocks .grid_1:first-child { margin-left: 18px !important; } /* Kopjes linkblokken */ .sf-linkblocks h3 { color: var(--wd-green-dark); } /* Links linkblokken */ .sf-linkblocks a, .sf-linkblocks a:visited { color: var(--wd-green-dark); } .sf-linkblocks a:hover { color: var(--wd-green); } /* Footer volledig groen */ footer { background: var(--wd-green-dark); color: #ffffff; margin-top: 30px; padding-top: 20px; padding-bottom: 20px; } /* Footer links wit */ footer a, footer a:visited { color: #ffffff; } footer a:hover { color: #f1f1f1; text-decoration: underline; } /* Statcounter tekst */ #attribution { color: rgba(255,255,255,0.75) !important; } /* Back-to-top knop */ .sf-top { background: var(--wd-green); color: #ffffff; } .sf-top:hover { background: var(--wd-green-dark); } /* Hero-box subtiel sterker */ .hero-box { border-left: 5px solid var(--wd-green); } /* Algemene linkkleur subtiel groener */ a, a:visited { color: var(--wd-green-dark); } a:hover, a:focus { color: var(--wd-green); } /* H2 tegels strakker links uitlijnen */ .sf-tiles h2.first-header { text-align: left !important; margin-left: 0 !important; padding-left: 5 !important; } /* Ruimte tussen content/linkblokken en footer forceren */ #main.wrapper { margin-bottom: 0 !important; padding-bottom: 0 !important; } #content.wide-content { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* laatste blok in content */ #content > *:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* linkblokken zelf */ .sf-linkblocks { margin-bottom: 0 !important; } /* footer direct aansluiten */ footer { margin-top: 0 !important; padding-top: 14px !important; padding-bottom: 14px !important; } /* ============================================================ DEFINITIEVE HOMEPAGE LINKBLOKKEN + FOOTER FIX ============================================================ */ #main #content .sf-linkblocks { background: var(--wd-green-soft) !important; border-radius: 14px !important; /* boven | rechts | onder | links */ margin: 30px auto 28px !important; padding: 22px 28px 24px 38px !important; box-sizing: border-box !important; overflow: hidden !important; } /* Grid-kolommen binnen linkblokken resetten */ #main #content .sf-linkblocks > .grid_1, #main #content .sf-linkblocks > .grid_2, #main #content .sf-linkblocks > .grid_3 { padding: 0 !important; margin: 0 !important; } /* Clear-div geen extra hoogte geven */ #main #content .sf-linkblocks > .sf-clear { display: none !important; } /* Footer directer laten aansluiten */ footer { margin-top: 0 !important; } /* Tekstblok onder prefooter afbeelding smaller */ .sf-prefooter-image + h2, .sf-prefooter-image + h2 + p{ max-width: 1090px; margin-left: auto; margin-right: auto; } /* Minder ruimte tussen laatste tegels en prefooter afbeelding */ .sf-prefooter-image{ margin-top: 10px; } /* Algemene interne linksectie */ #content .sf-site-links{ margin: 34px 0 10px 0; padding: 24px 28px; background: #f7f4ee; border-radius: 16px; box-sizing: border-box; } #content .sf-site-links h2{ margin-top: 0; margin-bottom: 14px; } #content .sf-site-links p{ margin-bottom: 0; }