/* BEST | IMPRESSIONS — bedrijfssite
   Boek/schrift-thema: een donkere kaft/rug rondom warme, papiergekleurde
   bladzijdes. Het hoofdmenu oogt als een rij duimregister-tabs aan de
   bovenkant van het boek; de accentkleur (instelbaar in Instellingen) is
   het "goud" van die tabs en de rest van de site. */

:root {
    --ink: #1a1c20;
    --ink-soft: #2a2d33;
    --ink-border: #35393f;
    --paper: #fbf7ec;
    --paper-alt: #f2e9d8;
    --paper-shadow: #e4d6b8;
    --text: #2a2520;
    --text-dim: #6b6153;
    --accent: #d8b280;
    --accent-bright: #e8cfa6;
    --accent-dim: #8c6c42;
    --radius: 6px;
    --max-width: 1180px;
    --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--accent-dim); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 0.6em;
}

h1 { font-size: clamp(2rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; color: var(--text-dim); }

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Header / navigatie: de "kaft" van het boek ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ink);
    border-bottom: 1px solid var(--accent-dim);
}

.site-header .container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 80px;
    padding-top: 8px;
    padding-bottom: 0;
    gap: 20px;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff;
    letter-spacing: 0.01em;
    padding-bottom: 15px;
}
.site-logo-img { height: 58px; width: auto; flex-shrink: 0; }

/* ---------- Navigatie als duimregister-tabs ---------- */

.main-nav > ul {
    list-style: none;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.main-nav > ul > li { position: relative; }

.main-nav a {
    display: block;
    background: var(--ink-soft);
    color: #e8e4da;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    padding: 9px 17px 8px;
    border-radius: 9px 9px 0 0;
    border: 1px solid var(--ink-border);
    border-bottom: none;
    position: relative;
    top: 7px;
    transition: top 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.main-nav a:hover { top: 2px; background: #34383f; color: #fff; text-decoration: none; }

.main-nav a.active {
    top: -6px;
    background: var(--accent);
    color: var(--ink);
    border-color: var(--accent-dim);
    box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.3);
}

.has-submenu { display: flex; align-items: flex-end; }
.submenu-toggle {
    background: var(--ink-soft);
    border: 1px solid var(--ink-border);
    border-left: none;
    border-bottom: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 0.7rem;
    line-height: 1;
    position: relative;
    top: 7px;
    border-radius: 0 9px 0 0;
    align-self: stretch;
}
.submenu-toggle:hover { color: #fff; }
.has-submenu:hover .submenu-toggle,
.has-submenu.open .submenu-toggle { top: -6px; background: var(--accent-dim); color: #fff; }

.submenu {
    list-style: none;
    margin: 0;
    padding: 10px;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--paper);
    border: 1px solid var(--accent-dim);
    border-radius: 4px 10px 10px 10px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}

.has-submenu.open .submenu,
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submenu li { margin: 0; }
.submenu a {
    display: block;
    background: none;
    border: none;
    top: 0;
    padding: 9px 12px;
    font-size: 0.9rem;
    border-radius: 5px;
    color: var(--text);
}
.submenu a:hover, .submenu a.active { background: var(--paper-alt); color: var(--ink); top: 0; box-shadow: none; }

.nav-toggle {
    display: none;
    background: var(--ink-soft);
    border: 1px solid var(--ink-border);
    color: #fff;
    border-radius: var(--radius);
    padding: 8px 12px;
    font-size: 1.1rem;
    cursor: pointer;
    margin-bottom: 14px;
}

/* ---------- De "bladzijdes": boekomslag rondom de inhoud ---------- */

.book-viewport {
    display: flex;
    align-items: stretch;
    background: var(--ink);
    min-height: calc(100vh - 92px);
    position: relative;
}

.book-page {
    flex: 1 1 auto;
    min-width: 0;
    background:
        repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.015) 0px, rgba(0, 0, 0, 0.015) 1px, transparent 1px, transparent 3px),
        radial-gradient(ellipse at top center, rgba(255, 255, 255, 0.5), transparent 65%),
        var(--paper);
    box-shadow: inset 0 0 40px -18px rgba(0, 0, 0, 0.35);
    position: relative;
}

/* Rand van de bladzijdes: suggereert een stapel dunne papieren pagina's aan
   weerszijden van de opengeslagen spread. */
.book-page::after,
.book-page::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 10px;
    background:
        repeating-linear-gradient(180deg, var(--paper-shadow) 0px, var(--paper-shadow) 2px, transparent 2px, transparent 5px);
    opacity: 0.6;
    pointer-events: none;
    z-index: -1;
}
.book-page::before { left: 0; }
.book-page::after { right: 0; }

/* De rug: een vaste verticale lijn precies in het midden van de bladzijde,
   over de volle hoogte — de tekst in .rich-content vult beide kanten ervan. */
.book-spine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 56px;
    margin-left: -28px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.05) 32%,
        rgba(0, 0, 0, 0.32) 47%,
        rgba(0, 0, 0, 0.32) 53%,
        rgba(0, 0, 0, 0.05) 68%,
        transparent 100%);
    pointer-events: none;
    z-index: -1;
}
.book-spine::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 1px;
    background: rgba(140, 108, 66, 0.4);
}

@media (max-width: 860px) {
    .book-spine { display: none; }
}

.flash-wrap { padding-top: 20px; }

.page-content {
    max-width: 1500px;
    margin: 0 auto;
    padding: 48px 48px 80px;
    position: relative;
    z-index: 2;
}
.page-content h1 { margin-bottom: 0.3em; }
.page-subtitle { font-size: 1.15rem; font-style: italic; color: var(--text-dim); margin-bottom: 1.4em; font-family: var(--font-heading); }

/* De lopende tekst vult beide bladzijdes van de opengeslagen spread, met de
   rug (.book-spine) als vaste scheidslijn in het midden. */
.rich-content {
    columns: 2;
    column-gap: 88px;
}
/* Voorkomt dat samenhorende tekst uit elkaar valt over de kolombreuk: een
   kop blijft bij wat erna komt, en een lijst (met zijn eigen items) blijft
   heel én blijft vastzitten aan de alinea die eraan voorafgaat — zodat een
   bulletlijst niet halverwege naar de andere kolom springt, los van de
   uitleg erboven. */
.rich-content h2, .rich-content h3, .rich-content h4 { break-after: avoid-column; }
.rich-content ul, .rich-content ol, .rich-content blockquote { break-inside: avoid-column; break-before: avoid-column; }
.rich-content li { break-inside: avoid-column; }

@media (max-width: 860px) {
    .rich-content { columns: 1; }
}

/* ---------- Knoppen ---------- */

.btn {
    display: inline-block;
    padding: 13px 24px;
    border-radius: var(--radius);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--accent-dim);
    background: transparent;
    color: var(--text);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { border-color: var(--accent-dim); background: var(--paper-alt); text-decoration: none; }
.btn-solid { background: var(--accent); border-color: var(--accent-dim); color: var(--ink); }
.btn-solid:hover { background: var(--accent-bright); border-color: var(--accent-dim); color: var(--ink); }
.btn-block { display: block; width: 100%; }

/* ---------- Hero (homepage) ---------- */

.hero {
    position: relative;
    padding: 56px 0;
    background-image: linear-gradient(160deg, var(--paper-alt), var(--paper));
    border-bottom: 1px solid var(--paper-shadow);
    text-align: center;
}
/* Met een echte hero-afbeelding (Instellingen of per pagina) toont de foto
   over de volle breedte, met een donkere overlay voor leesbare tekst. */
.hero[style] {
    background: linear-gradient(rgba(26, 28, 32, var(--hero-overlay, 0.55)), rgba(26, 28, 32, var(--hero-overlay, 0.55))),
                var(--hero-image, none) center/cover no-repeat;
}
.hero-inner { max-width: 760px; margin: 0 auto; }
.hero h1 { margin-bottom: 0.4em; }
.hero-subtitle { font-size: 1.2rem; font-style: italic; color: var(--text-dim); max-width: 56ch; margin: 0 auto 2em; font-family: var(--font-heading); }
/* De instelbare titelkleur geldt alleen als er écht een foto achter zit
   (inline style-attribuut) — zonder foto blijft de gewone, altijd-leesbare
   inktkleur op het papier gelden. */
.hero[style] h1, .hero[style] .hero-subtitle { color: var(--hero-text); opacity: 1; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* De ingevulde knop (.btn-solid) staat altijd op de effen accentkleur en
   blijft dus altijd leesbaar; alleen de kaderknop erover heen krijgt de
   instelbare knoptekstkleur, want die staat direct op de achtergrondfoto. */
.hero[style] .btn:not(.btn-solid) { color: var(--hero-btn-text); }

/* ---------- Hub-pagina hero ---------- */

.hub-hero {
    background-color: var(--paper-alt);
    border-bottom: 1px solid var(--paper-shadow);
    padding: 56px 0;
}
/* Met een echte hero-afbeelding toont de foto over de volle breedte, met
   een donkere overlay voor leesbare tekst — zelfde patroon als .hero. */
.hub-hero[style] {
    background-image: linear-gradient(rgba(26, 28, 32, var(--hero-overlay, 0.55)), rgba(26, 28, 32, var(--hero-overlay, 0.55))),
                       var(--hero-image, none);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.hub-hero .eyebrow {
    color: var(--accent-dim);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.8rem;
    margin-bottom: 10px;
}
/* Zelfde uitzondering als bij .hero: instelbare kleur alleen met een echte
   foto erachter. */
.hub-hero[style] h1, .hub-hero[style] .eyebrow { color: var(--hero-text); }
.hub-hero .rich-content { max-width: 70ch; }
.hub-hero h1:last-child { margin-bottom: 0; }

/* ---------- Sectiekoppen ---------- */

.section-heading { text-align: center; margin: 56px 0 28px; }
section.container:first-of-type .section-heading:first-child { margin-top: 56px; }

/* ---------- 360°-foto's ---------- */

.panorama-section { margin: 40px 0; }
/* Flexbox + justify-content:center in plaats van CSS grid met 1fr-kolommen:
   zo houden de foto's hun eigen (kleinere) grootte aan en wordt de hele
   groep gecentreerd wanneer ze samen niet de volle breedte vullen, in
   plaats van dat elke foto uitgerekt wordt om de rij op te vullen. */
.panorama-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}
.panorama-block { flex: 0 1 380px; max-width: 380px; }
/* .panorama-block .panorama-viewer (2 klassen) in plaats van alleen
   .panorama-viewer: pannellum.css laadt ná style.css en zet zelf ook een
   hoogte op .pnlm-container met gelijke specificiteit (1 klasse) — bij
   gelijke specificiteit wint de laatst-geladen regel, dus zonder deze extra
   klasse zou pannellum's eigen "height:100%" onze vaste hoogte overschrijven. */
.panorama-block .panorama-viewer {
    position: relative;
    width: 100%;
    height: 260px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ink);
    border: 1px solid var(--paper-shadow);
}
.panorama-caption { margin-top: 8px; font-size: 0.88rem; color: var(--text-dim); text-align: center; }
@media (max-width: 640px) {
    .panorama-block { flex: 1 1 100%; max-width: 100%; }
    .panorama-block .panorama-viewer { height: 220px; }
}

/* ---------- Kaartenraster ---------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
    margin-bottom: 16px;
}

.card {
    display: block;
    background: var(--paper);
    border: 1px solid var(--paper-shadow);
    border-radius: 4px;
    padding: 28px 24px;
    color: var(--text);
    box-shadow: 2px 3px 0 var(--paper-shadow);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
a.card:hover { border-color: var(--accent-dim); transform: translateY(-3px); box-shadow: 3px 6px 0 var(--accent-dim); text-decoration: none; }
.card h3 { margin-bottom: 8px; color: var(--ink); }
.card p { margin: 0; font-size: 0.94rem; }

/* Kaarten met een bannerafbeelding van de betreffende pagina: foto boven,
   tekst eronder — de kaart zelf verliest zijn eigen padding, die verhuist
   naar .card-body zodat de foto tot de rand loopt. */
.card.has-thumb { padding: 0; overflow: hidden; }
.card-thumb { aspect-ratio: 16 / 9; background: var(--paper-alt); }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.has-thumb .card-body { padding: 20px 24px 24px; }

/* Voor kaarten zonder link — geen kader/vlak, zodat ze niet als aanklikbaar ogen. */
.card-plain { display: block; color: var(--text); }
.card-plain h3 { margin-bottom: 8px; color: var(--ink); }
.card-plain p { margin: 0; font-size: 0.94rem; }

.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 10px;
    background: var(--accent-dim);
    color: var(--paper);
    margin-bottom: 16px;
}
.card-icon svg { width: 24px; height: 24px; }

/* Geüploade merkillustraties tonen groter en zonder gekleurd vlak — die
   iconen zijn al een volledig, kleurrijk beeld op zichzelf. */
.card-icon:has(img) {
    width: 64px; height: 64px;
    background: none;
    border-radius: 0;
}
.card-icon img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- CTA-banner ---------- */

.cta-banner {
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%),
                var(--hero-image, none) center/cover no-repeat;
    background-blend-mode: multiply;
    border-top: 1px solid var(--accent-dim);
    border-bottom: 1px solid var(--accent-dim);
    padding: 64px 0;
    text-align: center;
    margin-top: 56px;
}
.cta-banner h2 { max-width: 46ch; margin-left: auto; margin-right: auto; color: #fff; }
.cta-banner p { max-width: 56ch; margin-left: auto; margin-right: auto; font-size: 1.05rem; color: #cfc9bd; }
.cta-banner .hero-actions { margin-top: 24px; }
.cta-banner .btn { color: var(--hero-btn-text); border-color: var(--accent); }
.cta-banner .btn-solid { color: var(--ink); }

/* ---------- Contact ---------- */

.contact-embed { max-width: 640px; margin: 0 auto 64px; }
.contact-form { margin-top: 8px; }

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

/* Het grote contactformulier (Contact-pagina) splitst zelf over de twee
   bladzijdes: Naam/e-mail/bedrijf/telefoon links, onderwerp/bericht/versturen
   rechts — met dezelfde kolomafstand als de lopende tekst, zodat de kolommen
   precies op de rug uitkomen. Het kleinere formulier op de homepage
   (.contact-embed) blijft op de linkerbladzijde staan. */
.contact-form-split { display: block; }
@media (min-width: 861px) {
    .contact-form-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 88px;
        align-items: start;
    }
    .contact-embed { max-width: calc(50% - 44px); margin: 0 0 64px; }
}

.optional { font-weight: 400; color: var(--text-dim); text-transform: none; letter-spacing: 0; }

/* ---------- Formulieren ---------- */

label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-heading);
    color: var(--text-dim);
    margin-bottom: 6px;
}
input[type=text], input[type=email], input[type=password], input[type=tel], textarea, select {
    width: 100%;
    background: #fff;
    border: 1px solid var(--paper-shadow);
    border-radius: var(--radius);
    padding: 12px 14px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    margin-bottom: 16px;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent-dim);
}
textarea { min-height: 140px; resize: vertical; }
.field-honeypot { position: absolute; left: -9999px; }

/* ---------- Rijke tekstinhoud ---------- */

.rich-content::after { content: ""; display: table; clear: both; }
.rich-content p { margin: 0 0 1em; color: var(--text-dim); }
.rich-content ul, .rich-content ol { color: var(--text-dim); padding-left: 1.3em; margin-bottom: 1em; }
.rich-content li { margin-bottom: 0.4em; }
.rich-content h2 { margin-top: 1.2em; }
.rich-content strong { color: var(--text); }

.rich-content .ql-img-float-left,
.rich-content img.ql-img-float-left { float: left; width: 38%; margin: 6px 28px 16px 0; }
.rich-content .ql-img-float-right,
.rich-content img.ql-img-float-right { float: right; width: 38%; margin: 6px 0 16px 28px; }
.rich-content .ql-img-float-center,
.rich-content img.ql-img-float-center { float: none; clear: both; display: block; width: 60%; margin: 6px auto 16px; }

.rich-content .ql-img-width-25 { width: 25%; }
.rich-content .ql-img-width-40 { width: 40%; }
.rich-content .ql-img-width-60 { width: 60%; }
.rich-content .ql-img-width-100 { width: 100%; }

.rich-content .ql-img-float-left img, .rich-content .ql-img-float-right img, .rich-content .ql-img-float-center img,
.rich-content .ql-img-width-25 img, .rich-content .ql-img-width-40 img,
.rich-content .ql-img-width-60 img, .rich-content .ql-img-width-100 img { display: block; width: 100%; border-radius: 6px; }
.rich-content img.ql-img-float-left, .rich-content img.ql-img-float-right, .rich-content img.ql-img-float-center { border-radius: 6px; }

@media (max-width: 640px) {
    .rich-content .ql-img-float-left, .rich-content .ql-img-float-right, .rich-content .ql-img-float-center,
    .rich-content img.ql-img-float-left, .rich-content img.ql-img-float-right, .rich-content img.ql-img-float-center { float: none; width: 100%; margin: 0 0 16px; }
}
.rich-content blockquote {
    border-left: 3px solid var(--accent);
    margin: 1.4em 0;
    padding: 0.2em 1.2em;
    color: var(--text-dim);
    font-style: italic;
}

/* ---------- Nieuws (blog) ---------- */

.post-list { margin: 32px 0; }
.post-card {
    background: var(--paper);
    border: 1px solid var(--paper-shadow);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 18px;
    box-shadow: 2px 3px 0 var(--paper-shadow);
    break-inside: avoid-column;
}
@media (min-width: 861px) {
    .post-list { columns: 2; column-gap: 88px; }
}
.post-card .meta { font-size: 0.72rem; color: var(--accent-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px; }
.post-card h2 { margin-bottom: 5px; font-size: 1.05rem; }
.post-card h2 a { color: var(--ink); }
.post-card h2 a:hover { color: var(--accent-dim); text-decoration: none; }
.post-card .excerpt { margin-bottom: 6px; font-size: 0.88rem; }
.post-card > a:last-child { font-size: 0.85rem; }

.post-single .meta { font-size: 0.88rem; color: var(--accent-dim); margin-bottom: 24px; font-style: italic; font-family: var(--font-heading); }
/* Nieuwsberichten niet als 2-koloms boekspread: dat botste met afbeeldingen
   in de tekst (overlappende regels, zie sessie-feedback). Gewoon
   doorlopende tekst op leesbare breedte, en de rug (die de scheiding
   tussen de 2 kolommen markeert) heeft hier dus ook geen functie meer. */
.post-single .content {
    /* "column-count: auto" i.p.v. "columns: 1": met een expliciete 1 blijft
       dit een multicolumn-container (ook met maar 1 kolom), en dan wordt
       een zwevende afbeelding niet meer door de tekst omzeild maar
       overlapt hij de regels erna. Met "auto" is er helemaal geen
       multicolumn-context, dus werkt float gewoon normaal. */
    column-count: auto;
    max-width: 760px;
    margin: 0 auto 40px;
    padding: 36px 40px;
    border: 1px solid var(--paper-shadow);
    border-radius: 14px;
    box-shadow: 2px 3px 0 var(--paper-shadow);
}
@media (max-width: 640px) {
    .post-single .content { padding: 24px 20px; }
}
.book-page:has(.post-single) .book-spine { display: none; }
/* Afbeeldingen in de berichttekst krijgen een kader, in dezelfde stijl als
   de kaarten op het nieuwsoverzicht (post-card), zodat ze als een apart
   "blokje" ogen in plaats van los in de tekst te zweven. */
.post-single .content img {
    border: 1px solid var(--paper-shadow);
    border-radius: 12px;
    box-shadow: 2px 3px 0 var(--paper-shadow);
}
.post-nav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid var(--paper-shadow);
    padding-top: 20px;
    font-size: 0.92rem;
}

/* ---------- Footer: de "achterkaft" ---------- */

.site-footer {
    background: var(--ink);
    border-top: 1px solid var(--accent-dim);
    padding-top: 40px;
    color: #b7b0a2;
    font-size: 0.9rem;
}
.footer-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 32px;
    padding-bottom: 32px;
}
.footer-about .site-logo { margin-bottom: 10px; padding-bottom: 0; color: #fff; }
.footer-about p { max-width: 40ch; color: #b7b0a2; }
.footer-links h4 { color: var(--accent); font-family: var(--font-heading); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.footer-links a { display: block; margin-bottom: 6px; color: #b7b0a2; }
.footer-links a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--ink-border); padding: 20px 0; text-align: center; font-size: 0.85rem; }

/* ---------- Meldingen ---------- */

.flash { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 20px; font-size: 0.9rem; }
.flash-success { background: rgba(216, 178, 128, 0.16); border: 1px solid var(--accent-dim); color: var(--accent-dim); }
.flash-error { background: rgba(180, 70, 60, 0.1); border: 1px solid #a4453a; color: #8c342a; }

/* ---------- Responsief ---------- */

@media (max-width: 860px) {
    .nav-toggle { display: inline-flex; }
    .site-header .container { align-items: center; }
    .site-logo { font-size: 1.05rem; gap: 8px; padding-bottom: 0; }
    .site-logo-img { height: 48px; }
    .main-nav {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--ink-soft);
        border-bottom: 1px solid var(--accent-dim);
        max-height: 80vh;
        overflow-y: auto;
    }
    .main-nav.open { display: block; }
    .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 20px; }
    .main-nav > ul > li { border-bottom: 1px solid var(--ink-border); }
    .main-nav a { top: 0; border-radius: 4px; }
    .main-nav a.active { box-shadow: none; }
    .has-submenu { flex-wrap: wrap; }
    .has-submenu > a { flex: 1; }
    .submenu-toggle { top: 0; }
    .has-submenu:hover .submenu-toggle, .has-submenu.open .submenu-toggle { top: 0; }
    .submenu {
        position: static;
        opacity: 1; visibility: visible; transform: none;
        display: none;
        width: 100%;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0 0 8px 12px;
        border-radius: 0;
    }
    .has-submenu.open .submenu { display: block; }
    .hero { padding: 56px 0 44px; }
    .post-nav { flex-direction: column; gap: 8px; }
}