/* AFIC versie 2 — donker nachtblauw, warme oranje accenten. */
:root { color-scheme: dark; --bg:#0c121b; --surface:#151f2c; --surface-raised:#1c2939; --line:#2b3a4c; --text:#f2f5fa; --muted:#b3bfd0; --accent:#ff973f; }
html, body, .outer, .wrapper { background:var(--bg) !important; color:var(--text); }
body { font-family:'Open Sans',Arial,sans-serif; font-size:15px !important; line-height:1.75; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
::selection { background:#ff973f; color:#101722; }
a:link, a:visited { color:inherit; }
a:hover { color:var(--accent); }
h1,h2,h3,h4,h5,h6,.heading { color:var(--text) !important; letter-spacing:-.035em; line-height:1.2; }
.container { width:calc(100% - 64px) !important; max-width:1240px !important; margin-inline:auto !important; padding:0 !important; }
#topbar { display:none; }
#header { position:relative; z-index:100; background:#0c121bf5 !important; border-bottom:1px solid var(--line); padding:22px 0 !important; margin:0 !important; }
#header .header-wrapper { background:transparent; }
#header .header-wrapper { height:auto !important; min-height:0 !important; padding:0 !important; margin:0 !important; }
#header .container { display:flex; align-items:center; gap:24px; min-height:64px; }
#header .logo { float:none; width:166px; height:auto !important; margin:0 !important; padding:10px 14px !important; flex:0 0 166px; background:#fff !important; border-radius:13px; }
#header .site-logo { display:block; line-height:0; }
#header .site-logo img { display:block; width:100%; height:auto; max-height:50px; object-fit:contain; }
#header .header-contacts { display:flex; flex-direction:column; gap:5px; margin-left:auto; flex-shrink:0; font-size:13px; font-weight:600; color:var(--muted); }
#header .header-contacts a { display:flex; align-items:center; gap:9px; text-decoration:none; white-space:nowrap; }
#header .header-contacts i { font-size:13px; width:15px; text-align:center; color:var(--accent); }
#header #menu-main { position:static !important; display:flex; align-items:center; gap:3px; float:none; width:auto; height:auto; margin:0; padding:0; background:transparent !important; flex:1; justify-content:center; }
#menu-main>li { float:none; margin:0; }
#menu-main>li>a { font-family:inherit; font-size:13px; font-weight:600; line-height:1.3; padding:14px 10px; height:auto; color:#e6ecf4; border-radius:9px; }
#menu-main>li:hover>a,#menu-main>li:focus-within>a { background:var(--surface-raised); color:var(--accent); }
#menu-main>.has-children:before { right:2px; color:#7f8fa5; font-size:8px; }
#menu-main li ul { min-width:248px; padding:8px; background:var(--surface-raised); border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 55px #0005; }
#menu-main li ul li a { width:auto; min-width:225px; color:#e6ecf4; padding:11px 14px; font-weight:400; font-size:13px; border-radius:7px; }
#menu-main li ul li a:hover { background:#2b3b50; color:var(--accent); }
#menu-main .current-menu-item>a { color:var(--accent); }
.slider { position:relative; margin:0 !important; background:var(--bg); overflow:hidden; }
.slider-slides { height:580px !important; }
.slider .slide { height:580px !important; background-size:cover !important; background-position:center !important; isolation:isolate; }
.slider .slide::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(7,13,22,.94) 0%,rgba(7,13,22,.76) 36%,rgba(7,13,22,.16) 80%),linear-gradient(0deg,#0c121b 0%,transparent 22%); }
.slider .slide-body { position:relative; height:100%; padding:0 !important; margin:0 !important; display:flex; align-items:center; }
.slider .slide-body>.container { display:block; }
.slider .slide-caption { float:none !important; width:min(640px,65%) !important; margin:0 !important; padding:0 !important; background:transparent !important; }
.slider .slide-caption::before { content:'FINANCIERINGEN & VERZEKERINGEN'; display:block; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.18em; margin-bottom:24px; }
.slider .slide-title { color:#fff !important; font-size:clamp(36px,4vw,58px) !important; font-weight:700; line-height:1.08 !important; letter-spacing:-.045em; padding:0; margin:0 0 24px !important; }
.slider .slide-content { color:#d1dbe9 !important; font-size:18px !important; line-height:1.8; max-width:550px; }
.slider .slide-content p { margin:0; }
.slider .slide-title,.slider .slide-content,.slider .slide-content p { background:transparent !important; }
.slider .slide-image,.slider-pager { display:none; }
#features { background:var(--bg) !important; padding:48px 0 76px !important; border:0; }
.section-intro { margin-bottom:32px; max-width:780px; }
.section-intro>p { font-size:11px; letter-spacing:.18em; color:var(--accent); font-weight:700; text-transform:uppercase; margin:0 0 12px; }
.section-intro>h2 { font-size:clamp(28px,3vw,40px); margin:0; }
#features .row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; margin:0; }
#features .column { width:auto; float:none; margin:0; padding:0; }
#features .feature { height:100%; margin:0; padding:26px 21px; background:var(--surface); border:1px solid var(--line); border-radius:18px; display:flex; flex-direction:column; transition:border-color .2s,transform .2s; }
#features .feature:hover { border-color:#687787; transform:translateY(-4px); }
.feature-title { font-size:17px !important; letter-spacing:-.025em; margin:0 0 20px; }
.feature-title a { color:var(--text) !important; }
.feature-content { display:flex; flex-direction:column; flex:1; color:var(--muted); font-size:13px; line-height:1.85; }
.feature-content p { margin:0 0 26px; }
.feature-content strong { color:#e2eaf6; }
.features-leesverder { margin-top:auto; padding-top:18px; border-top:1px solid var(--line) !important; }
.features-leesverder a { font-size:11px; font-weight:700; text-decoration:none; letter-spacing:.06em; color:var(--accent) !important; }
.features-leesverder a::after { content:' ↗'; float:right; font-size:16px; }
.pagetitle { position:relative; padding:56px 0 !important; min-height:190px; background-color:var(--surface) !important; background-size:cover !important; isolation:isolate; }
.pagetitle::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#0c121be6,#0c121b66); }
.pagetitle-title { display:block !important; font-size:clamp(28px,3vw,42px) !important; max-width:900px; margin:0 !important; }
.main { background:var(--bg) !important; padding:48px 0 64px !important; }
.content { background:var(--surface) !important; color:var(--muted) !important; border:1px solid var(--line); border-radius:20px; padding:30px !important; margin:0 !important; }
.content>h3 { margin:0 0 28px; font-size:26px !important; }
.content h3,.content h4 { color:#f0f5fc !important; }
.content a { color:var(--accent); }
.content p { line-height:1.85; }
.content hr { border-color:var(--line); }
.content img { border-radius:9px; }
.content .post { padding-bottom:24px; border-bottom:1px solid var(--line); margin-bottom:28px; }
.post-date,.post-byline { color:#95a6bd; }
.content .post-readmore { color:var(--accent); font-weight:600; }
.sidebar { color:var(--muted); padding-left:28px; background:transparent !important; }
.sidebar .widget { background:var(--surface) !important; border:1px solid var(--line); border-radius:18px; overflow:hidden; padding:16px; }
.widget-image-overlay img { width:100%; border-radius:10px; }
.widget-link-first { background:var(--surface-raised) !important; border-radius:10px; padding:16px !important; font-size:13px; line-height:1.8; }
.widget-link-first-text,.widget-link-first-open { color:#dde6f3; }
.widget-link-first-icon { color:var(--accent); }
.button,.button:link,.button:visited,input[type=submit] { display:inline-block; background:var(--accent) !important; color:#111b28 !important; font-weight:700; border:0; border-radius:10px; padding:14px 22px; box-shadow:none; text-transform:none; }
.button:hover,input[type=submit]:hover { background:#ffac67 !important; transform:translateY(-1px); }
.contact-card,.calculator-notice { background:var(--surface-raised); color:var(--muted); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; }
.afic_main { background:transparent; color:var(--muted); font-family:inherit; }
.afic_main_block { background:var(--surface-raised); border:1px solid var(--line); border-radius:14px; padding:18px; }
.afic_main h1 { color:var(--text) !important; font-size:20px; }
.afic_main center { background:#fff; border-radius:9px; padding:8px; margin-bottom:20px; }
.afic_main center img { max-height:66px; width:auto; }
.afic_input_label { color:var(--muted); font-family:inherit; }
.afic_zakelijkprive_keuze { font-size:14px; background:#2c3e54; border-radius:8px; }
.afic_zakelijkprive_keuze_selected { background:var(--accent); color:#152131; }
.afic_zakelijkprive { gap:6px; }
.afic_input_box input { color:var(--text); background:#0f1926; border:1px solid #42556e; border-radius:6px; }
#afic_berekenen_button { background:var(--accent); color:#172131; border-radius:7px; font-size:12px; }
.afic_maandbedrag { border:1px solid #3c4b60; background:#142030; border-radius:9px; overflow:hidden; margin-bottom:9px; }
.afic_maandbedrag_selected { border:1px solid var(--accent); background:#23364c; }
.afic_looptijd_prijs { color:var(--accent); font-size:13px; }
.afic_looptijd_selecteer { color:#dde5f1; background:#2a3b50; }
.afic_summary { background:#0f1926; border-radius:9px; color:var(--muted); }
.afic_input_button input { font-size:12px; }
.ctsc-tablist-nav { border-color:var(--line); }
.ctsc-tablist .ctsc-tablist-nav a { background:var(--surface-raised) !important; border-radius:8px; color:var(--text) !important; border-color:var(--line); }
.ctsc-tablist .ctsc-tablist-nav .ui-tabs-active a { background:var(--accent) !important; color:#152131 !important; }
.ctsc-tablist .ctsc-tab-content { background:transparent !important; color:var(--muted); border-color:var(--line); padding-top:20px; }
table,th,td,.divTable,.divTableRow,.divTableCell { background:transparent !important; color:var(--muted); border-color:var(--line) !important; }
input,textarea,select { color:var(--text); background-color:#0f1926; border-color:var(--line); }
#footer { background:#080e16 !important; padding:56px 0 36px !important; margin:0; border-top:1px solid var(--line); }
#footer>.container { display:grid; grid-template-columns:1fr 2fr; gap:64px; }
#footer .footer_left { width:auto; float:none; margin:0; font-size:12px; line-height:1.85; color:#9caec5; }
#footer .footer_title { color:var(--text); font-size:26px; letter-spacing:-.03em; }
#footer .footer_left img { width:23px; height:23px; border-radius:6px; opacity:.85; }
#footermenu { display:block; float:none; width:auto; margin:0; }
#menu-bottom { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin:0; }
#menu-bottom>li { width:auto; float:none; margin:0; }
#menu-bottom>li>a { color:#e8eef8; font-size:12px; font-weight:700; padding:0 0 15px; }
#menu-bottom .sub-menu { padding:0; margin:0; }
#menu-bottom .sub-menu a { color:#93a5bd; font-size:11px; font-weight:400; padding:4px 0; line-height:1.6; }
#menu-bottom .sub-menu a:hover { color:var(--accent); }
.footer-content { display:none; }
#back-to-top { background:#26374e; border:1px solid #44536a; border-radius:10px; box-shadow:0 5px 20px #0005; }
#menu-mobile { background:var(--bg); color:var(--text); padding:85px 24px 30px; }
#menu-mobile a { color:var(--text); font-size:15px; }
#menu-mobile .menu-category { color:var(--accent); padding:14px 10px; font-size:16px; }
#menu-mobile .sub-menu a { color:var(--muted); font-weight:400; }
#menu-mobile-close::before,#menu-mobile-close::after { background:var(--text); }
#menu-mobile-open::before,#menu-mobile-open::after { border-color:var(--text); }
@media (max-width:1150px) {
 #header .container { flex-wrap:wrap; gap:12px 24px; }
 #header #menu-main { order:3; flex-basis:100%; justify-content:flex-start; }
 #features .row { grid-template-columns:repeat(3,minmax(0,1fr)); }
 #footer>.container { grid-template-columns:1fr; gap:36px; }
}
@media (max-width:800px) {
 .container { width:calc(100% - 36px) !important; }
 #header { padding:14px 0 !important; }
 #header .container { flex-wrap:nowrap; gap:16px; }
 #header .logo { width:136px; flex-basis:136px; padding:8px 10px !important; border-radius:10px; }
 #header #menu-main { display:none; }
 #header .header-contacts { flex-direction:row; gap:16px; margin-left:auto; }
 #header .header-contacts span { display:none; }
 #header .header-contacts i { font-size:14px; }
 #header #menu-mobile-open { display:block; float:none; margin:0; width:25px; height:18px; padding:0; flex:0 0 25px; }
 .slider-slides,.slider .slide { height:490px !important; }
 .slider .slide-caption { width:100% !important; max-width:560px; }
 .slider .slide::before { background:linear-gradient(90deg,#070d16e8,#070d1677),linear-gradient(0deg,#0c121b,transparent 35%); }
 .slider .slide-caption::before { font-size:9px; letter-spacing:.13em; }
 .slider .slide-title { font-size:38px !important; max-width:400px; }
 .slider .slide-content { font-size:16px !important; max-width:420px; }
 #features { padding:30px 0 48px !important; }
 #features .row { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .section-intro>h2 { font-size:29px; }
 .main { padding:24px 0 40px !important; }
 .content { padding:22px !important; }
 .sidebar { width:100% !important; padding:24px 0 0; margin-top:0; }
 .pagetitle { padding:36px 0 !important; min-height:150px; }
 #menu-bottom { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
 #menu-bottom .sub-menu a { font-size:12px; }
}
@media (max-width:520px) {
 #features .row { grid-template-columns:1fr; gap:14px; }
 #features .feature { padding:24px; }
 .feature-title { font-size:20px !important; margin-bottom:14px; }
 .feature-content { font-size:14px; }
 .content { padding:18px !important; }
 .afic_main_block { padding:12px; }
 .afic_looptijd_tekst,.afic_looptijd_prijs,.afic_looptijd_selecteer { font-size:11px; }
 .afic_looptijd_selecteer { width:55px; }
}

/* Correcties: navigatie boven alle afbeeldingen, origineel transparant logo. */
#header { z-index:10000 !important; overflow:visible !important; }
#header .header-wrapper,#header .container,#menu-main { overflow:visible !important; }
#slider,.slider,.pagetitle { z-index:0 !important; }
#menu-main { z-index:10001 !important; }
#menu-main li { position:relative; }
#menu-main li ul { z-index:10002 !important; }
#header .logo { background:transparent !important; padding:0 !important; border-radius:0; flex-basis:190px; width:190px; }
#header .site-logo img { filter:brightness(1.25); max-height:none; }
#features .row { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1000px) { #features .row { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:800px) { #header .logo { flex-basis:146px; width:146px; padding:0 !important; } }
@media (max-width:520px) { #features .row { grid-template-columns:1fr; } }

/* Paginatitels los van de afbeelding; gedeelde boven- en ondernavigatie. */
.page-banner { height:190px; background-size:cover; background-position:center; background-color:var(--surface); border-bottom:1px solid var(--line); }
#menu-bottom>li>.footer-category { display:block; color:var(--text); font-size:12px; font-weight:700; margin:0; padding:0 0 15px; }
#menu-bottom .sub-menu .footer-category { color:#a4b4c9; font-size:12px; font-weight:400; padding:4px 0; }
#menu-bottom .sub-menu a:hover { color:var(--accent); }
.slider-slides { position:relative; isolation:isolate; }
.slider .slide { position:absolute !important; inset:0; opacity:0; visibility:hidden; transition:opacity 1600ms ease-in-out,visibility 0s linear 1600ms; pointer-events:none; z-index:0; }
.slider .slide.is-active { opacity:1; visibility:visible; transition:opacity 1600ms ease-in-out,visibility 0s; pointer-events:auto; z-index:1; }
.slider .slide.is-leaving { visibility:visible; transition:opacity 1600ms ease-in-out,visibility 0s linear 1600ms; z-index:0; }
@media (max-width:800px) { .page-banner { height:145px; } }


/* Homepage: oorspronkelijke tekst terug over de foto; overige pagina’s zonder paginatitel. */
.home .slider-slides,.home .slider .slide { height:580px !important; }
.home .slider .slide::before { background:linear-gradient(90deg,rgba(7,13,22,.94) 0%,rgba(7,13,22,.76) 36%,rgba(7,13,22,.16) 80%),linear-gradient(0deg,#0c121b 0%,transparent 22%); }
.slider .slide .slide-caption { opacity:0; transition:opacity 200ms ease-out; }
.slider .slide.is-active .slide-caption { opacity:1; transition:opacity 650ms ease-out 300ms; }
.slider .slide.is-leaving .slide-caption { opacity:0; transition:opacity 200ms ease-out; }
@media (max-width:800px) {
 .home .slider-slides,.home .slider .slide { height:490px !important; }
 .home .slider .slide::before { background:linear-gradient(90deg,#070d16e8,#070d1677),linear-gradient(0deg,#0c121b,transparent 35%); }
}

/* Paginatitel boven de tekst, één brede inhoudskolom en verfijnde contactkaders. */
.main>.container { max-width:1120px !important; }
.main .content { width:100% !important; float:none !important; display:flow-root; margin:0 !important; }
.page-content { display:flow-root; }
.content-page-title { margin:0 0 28px; padding:0; font-size:clamp(28px,3vw,40px); font-weight:700; color:var(--text); }
.contact-card { border:1px solid rgba(166,185,210,.22) !important; border-left:1px solid rgba(166,185,210,.22) !important; background:#192534 !important; border-radius:13px; padding:24px; box-shadow:none; }
.contact-card h3 { margin:0 0 20px; font-size:22px; }
.contact-card p { margin:14px 0 0; }
.contact-card .contact-note { display:block; color:#9dacc0; font-size:12px; margin-top:10px; }
#content .page-content img.auto-insurance-image { width:380px !important; height:auto !important; max-width:100% !important; margin:0 0 20px 28px; }
#content .page-content img.porsche-insurance-image { width:320px !important; height:auto !important; max-width:42% !important; margin:0 0 22px 32px; object-fit:contain; }
@media (max-width:600px) {
 .contact-card { padding:20px; }
 #content .page-content img.auto-insurance-image { float:none !important; display:block !important; margin:0 auto 22px; }
 #content .page-content img.porsche-insurance-image { float:none !important; display:block !important; max-width:100% !important; margin:0 auto 24px; }
}
