/* Openbare websitepagina's (functies, prijzen, veelgestelde vragen, zzp) en
   de navigatie van de homepage. Bouwt voort op de stijlen van landing.php in
   app.css en gebruikt de themakleuren, zodat licht en donker vanzelf werken. */

/* Navigatie: actieve pagina, en op smalle schermen zichtbaar onder de kop
   (app.css verbergt hem daar, maar zonder navigatie vind je de pagina's niet). */
.site-header nav a.active{color:var(--cream)}
/* Knop "Probeer … gratis" in de kopbalk: blauw, zoals de knoppen op de pagina's
   (functie.css). Alleen in de kop van de website, niet op de foutpagina's. */
.marketing-page .site-header .outline-button{gap:8px;padding:11px 18px;border:0;border-radius:10px;background:linear-gradient(180deg,#2e6bf0,#2563eb);color:#fff;box-shadow:0 1px 2px rgba(30,64,175,.4),0 6px 16px rgba(37,99,235,.25)}
.marketing-page .site-header .outline-button:hover{color:#fff;transform:translateY(-1px);box-shadow:0 2px 4px rgba(30,64,175,.4),0 10px 22px rgba(37,99,235,.32)}
@media(max-width:980px){
    .marketing-page .site-header{flex-wrap:wrap;height:auto;row-gap:10px;padding-top:14px;padding-bottom:12px}
    .marketing-page .site-header nav{display:flex;order:3;width:100%;margin-left:0;gap:20px;overflow-x:auto;font-size:13px;padding-bottom:2px}
    .marketing-page .site-header__actions{margin-left:auto}
}
.marketing-page footer .footer-legal{flex-wrap:wrap}

/* Kop van een pagina */
.page-hero{max-width:1080px;padding:84px clamp(24px,5vw,78px) 56px}
.page-hero h1{font-family:"Fraunces",serif;font-size:clamp(38px,5vw,64px);line-height:1.02;font-weight:450;letter-spacing:-.04em;margin:24px 0}
.page-hero h1 em{display:block;color:var(--gold);font-weight:400}
.page-lead{max-width:680px;margin:0;color:var(--muted);font-size:16px;line-height:1.7}
.page-lead a,.page-more a,.faq-list a,.page-section-head p a{color:var(--gold-light);text-decoration:underline;text-underline-offset:3px}
.page-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.page-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.page-jump a{padding:8px 13px;border:1px solid var(--line);border-radius:20px;color:var(--cream);font-size:12px;font-weight:600}
.page-jump a:hover{border-color:var(--gold)}

/* Secties en kaarten */
.page-section{padding:64px clamp(24px,5vw,78px);border-top:1px solid var(--line);scroll-margin-top:20px}
.page-section-alt{background:var(--night-soft)}
.page-section-head{max-width:720px;margin-bottom:28px}
.page-section-head h2{font-family:"Fraunces",serif;font-size:clamp(28px,3vw,36px);font-weight:450;letter-spacing:-.02em;margin:0 0 10px}
.page-section-head p{margin:0;color:var(--muted);font-size:15px;line-height:1.65}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.info-card{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:22px}
.info-card h3{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 9px;font-size:16px;font-weight:600}
.info-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
.site-pro{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;background:#3d2f12;color:#e0c66e;font-size:10px;font-weight:700;letter-spacing:.05em;vertical-align:middle}
.page-note{padding:0 clamp(24px,5vw,78px);margin:0 0 36px;color:var(--muted);font-size:13px}
.page-more{margin:26px 0 0;color:var(--muted);font-size:14px}

/* Prijzen */
.plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:940px}
.plan-card{display:flex;flex-direction:column;align-items:flex-start;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:30px}
.plan-card-featured{border-top:2px solid var(--gold)}
.plan-card h2{font-family:"Fraunces",serif;font-size:30px;font-weight:450;margin:12px 0 14px}
.plan-price{display:flex;align-items:flex-end;gap:12px}
.plan-price strong{font-family:"Fraunces",serif;font-size:46px;font-weight:450;line-height:1}
.plan-price span{color:var(--muted);font-size:12px;line-height:1.35}
.plan-seats{margin:14px 0 0;color:var(--muted);font-size:13px}
.check-list{list-style:none;margin:22px 0 26px;padding:0;display:grid;align-content:start;gap:10px;flex:1}
.check-list li{position:relative;padding-left:24px;font-size:14px;line-height:1.5}
.check-list li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:700}

/* Veelgestelde vragen: uitklappen zonder JavaScript */
.faq-list{max-width:860px;display:grid;gap:10px}
.faq-list details{border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 22px;cursor:pointer;list-style:none;font-size:15px;font-weight:600}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:0 0 auto;color:var(--gold);font-size:22px;font-weight:400;line-height:1}
.faq-list details[open] summary::after{content:"−"}
.faq-list details>div{padding:0 22px 20px}
.faq-list details p{margin:0;color:var(--muted);font-size:14px;line-height:1.75}

/* Stappen */
.step-list{list-style:none;counter-reset:stap;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.step-list li{counter-increment:stap;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:22px}
.step-list li::before{content:counter(stap);display:grid;place-items:center;width:32px;height:32px;margin-bottom:14px;border:1px solid var(--gold);border-radius:50%;color:var(--gold);font-weight:700}
.step-list h3{margin:0 0 8px;font-size:16px}
.step-list p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}

/* Afsluitende oproep */
.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;margin:0 clamp(24px,5vw,78px) 84px;padding:34px;border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:14px;background:var(--panel)}
.cta-band h2{font-family:"Fraunces",serif;font-size:30px;font-weight:450;margin:0 0 8px}
.cta-band p{margin:0;color:var(--muted);font-size:15px}
.cta-band .page-actions{margin-top:0}

/* Lopende tekst (uitlegpagina's zoals btw verlegd) */
.page-text{max-width:760px}
.page-text h2{font-family:"Fraunces",serif;font-size:clamp(24px,2.6vw,30px);font-weight:450;letter-spacing:-.02em;margin:38px 0 12px}
.page-text h2:first-child{margin-top:0}
.page-text p,.page-list li{color:var(--muted);font-size:15px;line-height:1.75}
.page-text p{margin:0 0 14px}
.page-text strong{color:var(--cream)}
.page-text a{color:var(--gold-light);text-decoration:underline;text-underline-offset:3px}
.page-list{margin:0 0 16px;padding-left:22px;display:grid;gap:8px}
.page-text .page-note-small{margin-top:28px;font-size:13px}

/* Vakgebieden (bouwpagina) */
.trade-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;max-width:900px}
.trade-list li{padding:9px 16px;border:1px solid var(--line);border-radius:20px;background:var(--panel);font-size:14px;font-weight:600}

/* Voorbeeldfactuur (btw verlegd) */
.example-invoice{max-width:760px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:26px;overflow-x:auto}
.example-client{margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--muted)}
.example-client strong{color:var(--cream)}
.example-invoice table{width:100%;border-collapse:collapse;font-size:13px}
.example-invoice th{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);color:var(--muted);font-weight:600}
.example-invoice td{padding:10px;border-bottom:1px solid var(--line)}
.example-invoice th:nth-child(n+2),.example-invoice td:nth-child(n+2){text-align:right;white-space:nowrap}
.example-invoice dl{margin:16px 0 0 auto;max-width:300px;display:grid;gap:6px;font-size:14px}
.example-invoice dl div{display:flex;justify-content:space-between;gap:20px}
.example-invoice dt{color:var(--muted)}
.example-invoice dd{margin:0}
.example-invoice .example-total{padding-top:8px;border-top:1px solid var(--line);font-weight:700}
.example-invoice .example-total dt{color:var(--cream)}
.example-note{margin:16px 0 0;color:var(--gold);font-size:13px;font-weight:600}
.page-text + .example-invoice{margin:6px 0 38px}

html[data-theme="light"] .site-pro{background:#f8eddf;color:#8a572e}
html[data-theme="light"] .page-section-alt{background:#eeeff5}

@media(max-width:760px){
    .page-hero{padding-top:52px;padding-bottom:40px}
    .page-section{padding-top:46px;padding-bottom:46px}
    .plan-grid,.step-list{grid-template-columns:1fr}
    .plan-card{padding:24px}
    .cta-band{padding:24px}
}

/* Logo in kop en voet: op de donkere weergave de lichte variant, en andersom. */
.site-logo{display:inline-flex;align-items:center;flex:0 0 auto}
.site-logo img{display:block;width:auto;height:26px}
.site-logo .site-logo-light{display:none}
html[data-theme="light"] .site-logo .site-logo-light{display:block}
html[data-theme="light"] .site-logo .site-logo-dark{display:none}
footer .site-logo img{height:22px}
@media(max-width:640px){.site-header .site-logo img{height:22px}}

/* Logo rechts, direct links naast het menu. */
@media(min-width:981px){
    .marketing-page .site-header .site-logo{margin-left:auto}
    .marketing-page .site-header nav{margin-left:0}
}
/* Extra ruimte tussen logo en menu; alleen als er plek is. */
@media(min-width:1280px){
    .marketing-page .site-header .site-logo{margin-right:142px}
}
/* Menutekst: vet en blauw bij aanwijzen. De onzichtbare vette kopie (::after)
   houdt de breedte vast, zodat het menu niet verspringt. */
.site-header nav a,.site-header .quiet-link{display:inline-flex;flex-direction:column;align-items:center}
.site-header nav a::after,.site-header .quiet-link::after{content:attr(data-label);height:0;overflow:hidden;visibility:hidden;font-weight:700;pointer-events:none}
.site-header nav a:hover,.site-header .quiet-link:hover{font-weight:700;color:#4b9be6}
html[data-theme="light"] .site-header nav a,html[data-theme="light"] .site-header .quiet-link{color:#000}
html[data-theme="light"] .site-header nav a:hover,html[data-theme="light"] .site-header nav a.active,html[data-theme="light"] .site-header .quiet-link:hover{color:#0068c3}
@media(max-width:640px){.site-header .quiet-link{display:none}}

/* Uitlegpagina's */
.page-text h3{margin:22px 0 8px;font-size:16px;font-weight:600}
.guide-card{display:block;color:inherit;transition:border-color .15s}
.guide-card:hover{border-color:var(--gold)}
.guide-card h3::after{content:" →";color:var(--gold)}
.guide-steps{list-style:none;counter-reset:stap;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.guide-steps li{counter-increment:stap;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:22px}
.guide-steps li::before{content:counter(stap);display:grid;place-items:center;width:32px;height:32px;margin-bottom:14px;border:1px solid var(--gold);border-radius:50%;color:var(--gold);font-weight:700}
.guide-steps h3{margin:0 0 8px;font-size:16px}
.guide-steps p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}

/* Voettekst: slogan, links en © staan op de onderkant van het woord
   "software" in het logo (niet op het midden van het logo). */
@media(min-width:641px){
    .marketing-page footer{align-items:flex-end}
    .marketing-page footer .footer-legal{align-items:flex-end}
    .marketing-page footer p,.marketing-page footer small,.marketing-page footer .footer-legal{line-height:1;margin-bottom:2px}
}
/* Links en © even groot als de slogan (12px). */
.marketing-page footer .footer-legal,.marketing-page footer small{font-size:12px}

/* Gratis factuur-maker (/gratis-factuur-maken) */
.free-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.free-invoice-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;max-width:1100px}
.free-invoice-block{margin:0;min-width:0}
.free-invoice-block legend{padding:0 8px;font-family:"Fraunces",serif;font-size:20px;font-weight:450}
.free-invoice-wide{grid-column:1/-1}
.free-invoice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.free-invoice-grid .span-2{grid-column:1/-1}
.free-invoice-meta{grid-template-columns:repeat(3,minmax(0,1fr))}
.free-invoice-form small{font-weight:400;color:var(--muted)}
.free-invoice-kor{margin:16px 0}
.free-invoice-lines{display:grid;gap:10px}
.free-invoice-line{display:grid;grid-template-columns:minmax(0,3fr) 90px 130px 110px;gap:10px}
.free-invoice-line[hidden]{display:none}
.free-invoice-add{margin-top:12px}
.free-invoice-notes{margin-top:16px}
.free-invoice-submit{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:20px}
.free-invoice-total{margin:0 auto 0 0;font-size:15px}
.free-invoice-error{max-width:1100px;margin:0 0 16px}
.free-invoice-cta{margin-top:26px}
@media(max-width:860px){
    .free-invoice-form{grid-template-columns:1fr}
    .free-invoice-meta{grid-template-columns:1fr}
    .free-invoice-line{grid-template-columns:repeat(3,minmax(0,1fr));padding-bottom:10px;border-bottom:1px solid var(--line)}
    .free-invoice-line label:first-child{grid-column:1/-1}
}

/* Uitlegpagina's: voorbeeldtekst, tabel, rekenhulp en het uitgewerkte factuurvoorbeeld */
.example-text{margin:0 0 20px;padding:18px 22px;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;background:var(--panel)}
.example-text p{margin:0 0 10px;font-size:14px;line-height:1.7}
.example-text p:last-child{margin-bottom:0}
.guide-table{width:100%;max-width:760px;margin:0 0 16px;border-collapse:collapse;font-size:14px}
.guide-table th{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:600}
.guide-table td{padding:10px 12px;border-bottom:1px solid var(--line);color:var(--muted);line-height:1.5}
.guide-table td strong{color:var(--cream)}
.rate-calc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px;align-items:start;max-width:980px}
.rate-calc-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.rate-calc-form label:first-child{grid-column:1/-1}
.rate-calc-form small{font-weight:400;color:var(--muted)}
.rate-calc-label{margin:0;color:var(--muted);font-size:13px}
.rate-calc-amount{margin:6px 0 16px}
.rate-calc-amount strong{font-family:"Fraunces",serif;font-size:44px;font-weight:450;color:var(--gold)}
.rate-calc-amount span{color:var(--muted);font-size:13px}
.rate-calc-result dl{margin:0;display:grid;gap:8px;font-size:14px}
.rate-calc-result dl div{display:flex;justify-content:space-between;gap:16px;padding-top:8px;border-top:1px solid var(--line)}
.rate-calc-result dt{color:var(--muted)}
.rate-calc-result dd{margin:0;font-weight:600}
.rate-calc-result .rate-calc-note{margin:16px 0 0;font-size:12px;line-height:1.6}
.example-invoice-full{max-width:820px}
.example-head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:18px}
.example-head p,.example-title{margin:0;font-size:13px;line-height:1.7;color:var(--muted)}
.example-head strong,.example-title strong{color:var(--cream)}
.example-title{margin-bottom:14px}
.example-mark{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:8px;border-radius:50%;background:var(--gold);color:#1a1a1a;font-size:11px;font-weight:700;vertical-align:middle}
.example-invoice-full .example-note{color:var(--muted);font-weight:400}
/* Echte voorbeeldfactuur (afbeelding van de PDF) met downloadlink */
.example-figure{max-width:520px;margin:28px 0 0}
.example-section-head{margin-top:56px}
.example-figure img{display:block;width:100%;height:auto;border-radius:10px;background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.example-figure figcaption{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.6}
.example-figure figcaption a{color:var(--gold-light);text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){
    .rate-calc,.rate-calc-form,.example-head{grid-template-columns:1fr}
}
/* Vergelijkingstabel */
.compare-wrap{overflow-x:auto}
.compare-table{max-width:900px;min-width:520px}
.compare-table th:nth-child(2),.compare-table td:nth-child(2){color:var(--cream)}

/* ============ Kopbalk: logo links, menu rechts (variant C, gekozen door René 27-10-2026) ============
   Volle breedte, wit (licht) of bijna zwart (donker) met een dun lijntje
   eronder. Logo en knoppen staan in lijn met de inhoud van de pagina (1120px).
   Variant B (zwevende balk) eerst geprobeerd en vervangen. Lettertype Inter
   uit functie.css (wordt op alle websitepagina's geladen). */
.marketing-page .site-header{height:72px;gap:40px;padding:0 max(clamp(20px,4vw,40px),calc((100% - 1120px) / 2));border-bottom:1px solid #23242b;background:#0e0f12;font-family:"Inter",system-ui,sans-serif}
html[data-theme="light"] .marketing-page .site-header{border-color:#e2e8f0;background:#fff}
.marketing-page .site-header nav{gap:32px;font-size:15px;font-weight:500}
.marketing-page .site-header nav a,.marketing-page .site-header .quiet-link{color:#9ca3af;font-size:15px;font-weight:500}
html[data-theme="light"] .marketing-page .site-header nav a,html[data-theme="light"] .marketing-page .site-header .quiet-link{color:#334155}
.marketing-page .site-header nav a:hover,.marketing-page .site-header .quiet-link:hover{font-weight:500;color:#6d9cff}
html[data-theme="light"] .marketing-page .site-header nav a:hover,html[data-theme="light"] .marketing-page .site-header .quiet-link:hover{color:#2563eb}
.marketing-page .site-header nav a.active{color:#f4f5f8;font-weight:600}
html[data-theme="light"] .marketing-page .site-header nav a.active{color:#2563eb}
.marketing-page .site-header nav a::after,.marketing-page .site-header .quiet-link::after{font-weight:600}
.marketing-page .site-header__actions{gap:18px}
.marketing-page .site-header__actions>.theme-toggle{width:38px;height:38px;padding:0;border:1px solid #2a2b33;border-radius:10px;background:transparent;color:#9ca3af;box-shadow:none}
html[data-theme="light"] .marketing-page .site-header__actions>.theme-toggle{border-color:#e2e8f0;background:#fff;color:#334155;box-shadow:none}
.marketing-page .site-header__actions>.theme-toggle:hover{border-color:#6d9cff;color:#6d9cff}
html[data-theme="light"] .marketing-page .site-header__actions>.theme-toggle:hover{border-color:#2563eb;color:#2563eb;background:#fff}
.marketing-page .site-header__actions>.theme-toggle .theme-toggle-label{display:none}
.marketing-page .site-header .outline-button{font-size:14px;padding:11px 18px}
/* Pagina-achtergrond gelijk aan de kopbalk, geen grijze strook. */
body.marketing-page{background:#0e0f12}
html[data-theme="light"] body.marketing-page{background:#fff}
@media(min-width:981px){
    .marketing-page .site-header .site-logo{margin-left:0;margin-right:auto}
    .marketing-page .site-header nav{margin-left:0}
}
@media(max-width:980px){
    .marketing-page .site-header{height:auto;gap:12px;padding-top:12px;padding-bottom:10px}
    .marketing-page .site-header__actions{gap:10px}
}
@media(max-width:640px){
    .marketing-page .site-header .outline-button{font-size:13px;padding:10px 13px}
    .marketing-page .site-header__actions>.theme-toggle{width:36px;height:36px}
}