/* ========================================================================== AD SOLEM — vormgeving Teksten staan in de HTML-bestanden. Dit bestand is voor kleuren, maten, lettertypes en layout. Wijzig je dit bestand? Verhoog dan het versienummer achter "stijl.css?v=" in de van elke pagina (cache-busting). ========================================================================== */ /* --- Lettertypes (zelf gehost: geen verzoek naar Google, sneller, AVG-proof) --- */ @font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/lora.woff2) format('woff2')} @font-face{font-family:'Lora';font-style:italic;font-weight:400 700;font-display:swap;src:url(../fonts/lora-italic.woff2) format('woff2')} @font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/public-sans.woff2) format('woff2')} :root{ --goud:#d9a514; /* accentkleur (zonnebloem) */ --goud-donker:#a37c0f; --goud-hover:#c1930f; --zand:#f7f1e2; /* zachte vlakken */ --papier:#fdfbf5; /* achtergrond */ --lijn:#ece5d4; --tekst:#2e2a24; --tekst-zacht:#5c5548; --tekst-licht:#8a7d5e; --serif:'Lora',Georgia,serif; --sans:'Public Sans',system-ui,-apple-system,sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--papier);color:var(--tekst);font-family:var(--sans);line-height:1.6} a{color:var(--goud-donker);text-decoration:none} a:hover{color:#7c5e0b} :focus-visible{outline:3px solid var(--goud);outline-offset:3px;border-radius:4px} img{display:block;width:100%;height:100%;object-fit:cover} h1,h2,h3{font-family:var(--serif);margin:0;text-wrap:pretty} p{margin:0;text-wrap:pretty} ul{margin:0;padding-left:20px} /* --- Toegankelijkheid: link om het menu over te slaan (toetsenbord/screenreader) --- */ .skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--goud);color:#fff;padding:10px 16px;border-radius:999px;font-weight:600} .skip:focus{left:16px;color:#fff} /* --- Header / navigatie --- */ .header{position:sticky;top:0;z-index:10;background:var(--papier);display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 56px;border-bottom:1px solid var(--lijn);flex-wrap:wrap} .logo{display:flex;align-items:center;gap:10px;color:inherit} .logo:hover{color:inherit} .logo-zon{width:26px;height:26px;border-radius:50%;flex:none; background:radial-gradient(circle at 50% 50%, var(--goud) 0 34%, transparent 36%), conic-gradient(#e9c14a 0 10%, var(--goud) 10% 20%, #e9c14a 20% 30%, var(--goud) 30% 40%, #e9c14a 40% 50%, var(--goud) 50% 60%, #e9c14a 60% 70%, var(--goud) 70% 80%, #e9c14a 80% 90%, var(--goud) 90% 100%)} .logo-naam{font-family:var(--serif);font-size:20px;font-weight:600} .nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .nav a{font-size:14px;color:var(--tekst-zacht);padding:10px 16px;border-radius:999px;white-space:nowrap} .nav a:hover{color:var(--goud-donker)} .nav a[aria-current="page"]{background:var(--zand);color:var(--goud-donker);font-weight:600} .nav .knop-contact{background:var(--goud);color:#fff;font-weight:600;padding:10px 20px;margin-left:10px} .nav .knop-contact:hover{background:var(--goud-hover);color:#fff} /* --- Bouwstenen --- */ .kopje{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--goud-donker);font-weight:600} .knop{display:inline-block;font:inherit;font-size:15px;font-weight:600;background:var(--goud);color:#fff;border:0;padding:13px 26px;border-radius:999px;cursor:pointer;white-space:nowrap;line-height:1.6} .knop:hover{background:var(--goud-hover);color:#fff} .knop-lijn{background:none;border:1px solid #d8cfba;color:var(--tekst-zacht);font-weight:400} .knop-lijn:hover{background:none;border-color:var(--goud-donker);color:var(--goud-donker)} .kaart{background:var(--zand);border-radius:14px;padding:40px} .kaart h2{font-size:24px;font-weight:600;margin-bottom:12px} .kaart p{font-size:15.5px;line-height:1.75;color:var(--tekst-zacht)} .kaart p + p{margin-top:14px} .kaart-wit{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:36px} .chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0} .chip{background:#fff;border-radius:999px;padding:8px 16px;font-size:13.5px;color:var(--tekst-zacht)} .chip-lijn{background:none;border:1px solid #d8cfba;padding:10px 20px;font-size:14.5px} .chip-vlak{background:var(--zand);border-radius:8px;padding:8px 16px;font-size:13.5px;color:var(--tekst-zacht)} .foto{border-radius:14px;overflow:hidden;background:var(--zand)} /* --- Pagina's --- */ .hero{padding:88px 56px 64px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px} .hero h1{font-size:46px;font-weight:500;line-height:1.2;max-width:660px} .hero p{font-size:17px;line-height:1.7;color:var(--tekst-zacht);max-width:600px} .hero .kopje{font-size:12px;line-height:1.4} .hero .kopje + .kopje{margin-top:-14px;color:var(--tekst-licht)} .hero-knoppen{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap;justify-content:center} .band{padding:0 56px 72px;max-width:1240px;margin:0 auto} .band .foto{height:420px;border-radius:16px} .duo{padding:0 56px 72px;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px} .duo h2{font-size:24px;font-weight:600;margin-bottom:12px} .duo p{font-size:15.5px;line-height:1.7;color:var(--tekst-zacht)} .duo p + p{margin-top:12px} .blok-wit{padding:64px 56px;background:#fff;border-top:1px solid var(--lijn)} .split{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:340px 1fr;gap:52px;align-items:center} .split .foto{height:440px} .split h2{font-size:32px;font-weight:500} .split p{font-size:16px;line-height:1.75;color:var(--tekst-zacht)} .stapel{display:flex;flex-direction:column;gap:16px} .stapel .kopje{font-family:var(--serif);font-size:16px;font-weight:600;text-transform:none;letter-spacing:normal} .themas{padding:56px;display:flex;flex-direction:column;align-items:center;gap:32px} .themas h2{font-size:28px;font-weight:500} .themas-kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%;max-width:1100px;text-align:left} .themas-kaarten .kaart-wit{padding:20px} .themas-kaarten .kaart-wit h3{font-family:var(--sans);font-size:16px;font-weight:600;margin-bottom:10px;color:var(--goud-donker)} .themas-kaarten .kaart-wit p.compact{font-size:11.5px;line-height:1.55;font-style:italic} .themas-kaarten .kaart-wit p.compact a{font-style:normal} .pagina-kop{padding:72px 56px 48px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px} .pagina-kop h1{font-size:40px;font-weight:500;max-width:620px} .pagina-kop .intro{font-size:16px;color:var(--tekst-zacht);max-width:500px} .inhoud{padding:0 56px 80px;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:32px} .inhoud-smal{max-width:880px;gap:24px} .aanbod-blok{background:var(--zand);border-radius:16px;padding:48px;display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:center} .aanbod-blok.omgekeerd{grid-template-columns:300px 1fr} .aanbod-blok h2{font-size:28px;font-weight:600;margin-bottom:14px} .aanbod-blok p{font-size:15.5px;line-height:1.75;color:var(--tekst-zacht)} .aanbod-blok p + p{margin-top:14px} .aanbod-blok .foto{height:280px;border-radius:12px} .aanbod-blok.omgekeerd .foto{height:360px} .cta{border:1px solid var(--lijn);background:#fff;border-radius:16px;padding:40px 48px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap} .cta h2{font-size:22px;font-weight:600;margin-bottom:8px} .cta p{font-size:15px;color:var(--tekst-zacht)} .over{padding:72px 56px 96px;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:380px 1fr;gap:60px;align-items:start} .over-fotos{display:flex;flex-direction:column;gap:20px} .over-fotos .foto:first-child{height:480px} .over-fotos .foto:last-child{height:260px} .over-tekst{display:flex;flex-direction:column;gap:20px} .over-tekst h1{font-size:40px;font-weight:500} .over-tekst h2{font-size:22px;font-weight:600} .over-tekst p{font-size:16px;line-height:1.75;color:var(--tekst-zacht)} .over-tekst .kaart{padding:32px} .over-tekst .kaart .kopje{margin-bottom:10px} .over-tekst .kaart p{font-size:15.5px;line-height:1.7} .over-tekst .chips{gap:10px} .over-tekst .chip{font-size:13px;padding:7px 16px} .tarief-rij{display:grid;grid-template-columns:1fr 1fr;gap:24px} .tarief-kaart{background:var(--zand);border-radius:14px;padding:36px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:8px} .tarief-bedrag{font-family:var(--serif);font-size:44px;line-height:1.1} .tarief-kaart .toelichting{font-size:15px;color:var(--tekst-zacht)} .tarief-kaart .klein{font-size:13.5px;color:var(--tekst-licht)} .kaart-wit h2{font-size:22px;font-weight:600;margin-bottom:12px} .kaart-wit h2.klein-kop{font-family:var(--sans);font-size:16px;margin-bottom:10px} .kaart-wit p{font-size:15px;line-height:1.75;color:var(--tekst-zacht)} .kaart-wit p + p{margin-top:10px} .kaart-wit p.compact{font-size:14.5px;line-height:1.65} .kaart-wit .chips{margin-top:14px;gap:10px} .kaart-wit .klein{font-size:13.5px;color:var(--tekst-licht)} .contact{padding:0 56px 80px;max-width:960px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:32px;align-items:start} .contact-gegevens{display:flex;flex-direction:column;gap:20px} .gegeven{background:var(--zand);border-radius:14px;padding:32px;display:flex;flex-direction:column;gap:6px;font-style:normal} .gegeven .label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--goud-donker);font-weight:600} .gegeven .waarde{font-family:var(--serif);font-size:24px} .gegeven .waarde-klein{font-family:var(--serif);font-size:19px} .gegeven span{font-size:15px;color:var(--tekst-zacht)} .gegeven .mail{font-size:16px} form{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:40px;display:flex;flex-direction:column;gap:18px} form h2{font-size:22px;font-weight:600} form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--tekst-zacht)} form input,form textarea{border:1px solid #d8cfba;border-radius:8px;padding:12px 14px;font-size:15px;font-family:inherit;background:var(--papier);font-weight:400;color:var(--tekst)} form textarea{resize:vertical} form .privacy{font-size:12.5px;color:var(--tekst-licht)} .footer{background:var(--tekst);color:#f3eee1;padding:52px 56px;display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap} .footer .kolom{display:flex;flex-direction:column;gap:6px;font-style:normal} .footer .kolom:last-child{text-align:right} .footer .merk{font-family:var(--serif);font-size:22px} .footer span{font-size:14px;color:#b8ad94} .footer .tel{color:#e9c14a;font-size:17px;font-weight:600} .footer a{color:#e9c14a} .footer a:hover{color:#fff} .footer .footer-nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px} .footer .footer-nav a{font-size:14px;color:#b8ad94} .footer .footer-nav a:hover{color:#fff} .footer-logos{display:flex;gap:14px;align-items:center;margin-top:6px;justify-content:flex-end} .footer-logos img{height:40px;width:auto;display:block} .fout{padding:96px 56px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;min-height:50vh} .fout h1{font-size:36px;font-weight:500} .fout p{color:var(--tekst-zacht);max-width:480px} /* --- Smalle schermen (telefoon / tablet) --- */ @media (max-width:900px){ .header{padding:16px 24px} .hero{padding:56px 24px 40px} .hero h1{font-size:32px} .band,.duo,.inhoud{padding-left:24px;padding-right:24px} .band .foto{height:240px} .blok-wit{padding:48px 24px} .themas{padding:40px 24px} .pagina-kop{padding:48px 24px 32px} .pagina-kop h1{font-size:30px} .duo,.split,.tarief-rij,.contact,.over,.aanbod-blok,.aanbod-blok.omgekeerd,.themas-kaarten{grid-template-columns:1fr} .aanbod-blok{padding:32px} .aanbod-blok.omgekeerd .foto,.aanbod-blok .foto,.split .foto{height:260px} .aanbod-blok.omgekeerd .foto{order:-1} .over{padding:48px 24px 64px} .cta{padding:32px} .contact{padding:0 24px 56px} .footer{padding:40px 24px} .footer .kolom:last-child{text-align:left} .footer-logos{justify-content:flex-start} .fout{padding:64px 24px} } @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* --- Contactformulier: spamval (onzichtbaar voor mensen) en foutmelding --- */ .hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden} .fout-melding{background:#fbeaea;border:1px solid #e6b8b8;color:#7a2e2e;border-radius:8px;padding:12px 14px;font-size:14px}