/* =========================================================
   Oostakker.online — modern & strak (Fase 1)
   Palet: diepblauw, helderblauw, wit
   ========================================================= */

:root {--blauw: #17497e;
    --blauw-donker: #0f3560;
    --blauw-fel: #2f7de1;
    --blauw-licht: #eaf1fa;
    --inkt: #16202e;
    --inkt-zacht: #5a6676;
    --achtergrond: #fafbfd;
    --wit: #ffffff;
    --lijn: #e3e7ee;
    --fout: #b03030;
    --fout-licht: #faeaea;
    --ok: #1f7a4d;
    --ok-licht: #e6f4ec;
    --radius: 10px;
    --schaduw: 0 1px 3px rgba(22, 32, 46, 0.08);}

* {box-sizing: border-box;}

html {-webkit-text-size-adjust: 100%; scroll-behavior: smooth;}

body {margin: 0;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--inkt);
    background: var(--achtergrond);
    display: flex;
    flex-direction: column;
    min-height: 100vh;}

h1, h2, h3 {font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    line-height: 1.15;
    color: var(--inkt);
    margin: 0 0 0.5em;
    letter-spacing: -0.01em;}

h1 {font-size: 1.9rem; font-weight: 700;}

h2 {font-size: 1.25rem; font-weight: 600;}

h3 {font-size: 1.05rem; font-weight: 600;}

a {color: var(--blauw);}

a:hover {color: var(--blauw-fel);}

.wrap {width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.25rem;}

main {flex: 1; padding-bottom: 3.5rem;}

main > .wrap:first-child {padding-top: 1rem;}

.pagina {padding-top: 1rem;}

/* ---------- Koptekst ---------- */

.inline-form {display: inline;}

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

.btn {display: inline-block;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;}

.btn-primair {background: var(--blauw);
    color: var(--wit);}

.btn-primair:hover {background: var(--blauw-fel); color: var(--wit);}

.btn-ghost {background: transparent;
    color: var(--blauw);
    border-color: var(--blauw);}

.btn-ghost:hover {background: var(--blauw-licht); color: var(--blauw);}

.btn-hero {background: rgba(255, 255, 255, 0.14);
    color: var(--wit);
    border-color: rgba(255, 255, 255, 0.7);}

.btn-hero:hover {background: rgba(255, 255, 255, 0.26); color: var(--wit);}

.btn-klein {padding: 0.35rem 0.85rem; font-size: 0.9rem;}

.btn-breed {width: 100%;}

.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {outline: 3px solid var(--blauw-fel);
    outline-offset: 2px;}

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

.melding {padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    border: 1px solid;}

.melding-ok {background: var(--ok-licht); border-color: var(--ok); color: var(--ok);}

.melding-fout {background: var(--fout-licht); border-color: var(--fout); color: var(--fout);}

/* ---------- Hero: gesplitste banner ---------- */

.hero-split {display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 460px;
    background: var(--blauw-donker);}

.hero-blauw {display: flex;
    align-items: center;
    padding: 3rem clamp(1.5rem, 4vw, 4rem);
    background: linear-gradient(135deg, var(--blauw-donker), var(--blauw));}

.hero-tekstblok {max-width: 34rem;}

.hero-eyebrow {text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 0.6rem;}

.hero-blauw h1 {font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.1;
    color: #fff;
    margin: 0 0 1rem;}

.hero-tekst {font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 1.5rem;}

.hero-acties {display: flex; gap: 0.6rem; flex-wrap: wrap;}

.btn-hero {background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);}

.btn-hero:hover {background: rgba(255, 255, 255, 0.22); color: #fff;}

.hero-fotozijde {background-image: url("/images/hero.jpg");
    background-size: cover;
    background-position: center 55%;
    min-height: 300px;}

@media (max-width: 820px) {
.hero-split {grid-template-columns: 1fr;}

.hero-fotozijde {order: -1; min-height: 260px;}
}

/* ---------- Modules ---------- */

.modules {padding-top: 2.5rem;}

.modules-titel {margin-bottom: 1.25rem;}

.modules-grid {display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;}

.module {background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 12px;
    padding: 1.25rem 1.25rem 1rem;
    box-shadow: var(--schaduw);
    transition: border-color 0.15s ease;}

.module:hover {border-color: var(--blauw-fel);}

.module p {color: var(--inkt-zacht); font-size: 0.95rem; margin-top: 0.25rem;}

/* ---------- Badges ---------- */

.badge {display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--blauw-licht);
    border: 1px solid transparent;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--blauw);}

.badge-ok {background: var(--ok-licht); color: var(--ok);}

.badge-fout {background: var(--fout-licht); color: var(--fout);}

/* ---------- Kaarten en formulieren ---------- */

.kaart {background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--schaduw);
    margin-bottom: 1.25rem;}

.kaart-smal {max-width: 440px; margin: 1.5rem auto;}

.kaart-intro {color: var(--inkt-zacht); margin-top: -0.25rem;}

.kaart-voet {margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lijn);
    font-size: 0.95rem;
    color: var(--inkt-zacht);}

.kaart-kop {display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;}

.kaart-kop h2 {margin: 0;}

.pagina-titel {margin-bottom: 1rem;}

.veld {margin-bottom: 1rem;}

.veld label {display: block;
    font-weight: 500;
    font-size: 0.95rem;
    margin-bottom: 0.3rem;}

.veld input[type="text"], .veld input[type="email"], .veld input[type="password"], .veld input[type="search"], .veld input[type="file"], .veld textarea {width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    background: var(--wit);
    font: inherit;
    color: var(--inkt);}

.veld input:focus, .veld textarea:focus {border-color: var(--blauw-fel);}

.veld input:disabled {background: var(--achtergrond); color: var(--inkt-zacht);}

.veld-checkbox label {font-weight: 400;}

.veld-checkbox input {margin-right: 0.4rem;}

.veld-hint {font-size: 0.85rem; color: var(--inkt-zacht); margin: 0.25rem 0 0;}

.veld-fout {font-size: 0.85rem; color: var(--fout); margin: 0.25rem 0 0; font-weight: 600;}

.optioneel {font-weight: 400; color: var(--inkt-zacht);}

.mt-klein {margin-top: 0.5rem;}

/* ---------- Profielfoto ---------- */

.foto-rij {display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    flex-wrap: wrap;}

.profiel-foto {width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--blauw);
    flex-shrink: 0;}

.profiel-foto-leeg {display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blauw-licht);
    color: var(--blauw);
    font-family: "Space Grotesk", sans-serif;
    font-size: 2.5rem;
    font-weight: 700;}

/* ---------- Beheer ---------- */

.stat-grid {display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;}

.stat {background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: var(--schaduw);
    display: flex;
    flex-direction: column;}

.stat-cijfer {font-family: "Space Grotesk", sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--blauw);}

.stat-label {color: var(--inkt-zacht); font-size: 0.9rem;}

.tabel {width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;}

.tabel th, .tabel td {text-align: left;
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--lijn);
    vertical-align: middle;}

.tabel th {color: var(--inkt-zacht); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;}

.tabel-acties {display: flex; gap: 0.4rem; flex-wrap: wrap;}

.zoek-rij {display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;}

.zoek-rij input[type="search"] {flex: 1;
    min-width: 200px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    font: inherit;}

.paginering {margin-top: 1rem;}

/* ---------- Voettekst ---------- */

.site-footer {background: var(--blauw-donker);
    color: var(--wit);
    padding: 1.75rem 0;
    margin-top: auto;}

.site-footer p {margin: 0.15rem 0;}

.footer-klein {font-size: 0.85rem; opacity: 0.8;}

/* ---------- Kleine schermen ---------- */

@media (max-width: 640px) {
.hero-inner {padding-top: 3.5rem; padding-bottom: 3.5rem;}

.hero h1 {font-size: 2rem;}

h1 {font-size: 1.5rem;}

.tabel {display: block; overflow-x: auto;}
}

@media (prefers-reduced-motion: reduce) {
* {animation: none !important; transition: none !important;}

html {scroll-behavior: auto;}
}

/* ---------- Evenementen (Fase 2) ---------- */

.knoppen-rij {display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;}

.filter-rij {display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem;}

.filter-chip {display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--lijn);
    background: var(--wit);
    color: var(--inkt);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;}

.filter-chip:hover {border-color: var(--blauw-fel); color: var(--blauw);}

.filter-actief {background: var(--blauw);
    border-color: var(--blauw);
    color: var(--wit);}

.filter-actief:hover {color: var(--wit);}

.event-grid {display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1rem;}

.event-kaart {display: block;
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--schaduw);
    text-decoration: none;
    color: var(--inkt);
    transition: border-color 0.15s ease;}

.event-kaart:hover {border-color: var(--blauw-fel); color: var(--inkt);}

.event-kaart-foto {width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;}

.event-kaart-foto-leeg {display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blauw-licht);
    color: var(--blauw);
    font-family: "Space Grotesk", sans-serif;
    font-size: 2.5rem;
    font-weight: 700;}

.event-kaart-inhoud {padding: 0.9rem 1rem 1rem;}

.event-kaart-inhoud h3 {margin: 0.5rem 0 0.4rem;}

.event-meta {margin: 0.15rem 0; font-size: 0.9rem; color: var(--inkt-zacht);}

.event-titel {margin-top: 0.5rem;}

.event-info-rij {margin: 0.75rem 0 1rem;}

.event-omschrijving {margin-bottom: 1rem; white-space: normal;}

.event-fotos {display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;}

.event-fotos img {width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
    display: block;}

.event-foto-beheer {text-align: center;}

.event-foto-beheer .btn {margin-top: 0.4rem;}

.event-acties {margin-top: 0.5rem;}

.kaart-formulier {max-width: 640px;}

.veld-rij {display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;}

.veld select {width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    background: var(--wit);
    font: inherit;
    color: var(--inkt);}

.mt-groot {margin-top: 1.5rem;}

.stat-aandacht {border-color: var(--blauw-fel); text-decoration: none;}

a.stat {text-decoration: none; color: inherit;}

/* Kalender */

.kalender-scroll {overflow-x: auto;}

.kalender {width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 12px;
    overflow: hidden;}

.kalender th {background: var(--blauw);
    color: var(--wit);
    padding: 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;}

.kalender td {border: 1px solid var(--lijn);
    vertical-align: top;
    padding: 0.4rem;
    height: 92px;
    width: 14.28%;}

.kalender-dag {font-weight: 600; font-size: 0.85rem; color: var(--inkt-zacht);}

.kalender-buiten {background: var(--achtergrond);}

.kalender-buiten .kalender-dag {opacity: 0.4;}

.kalender-vandaag {background: var(--blauw-licht);}

.kalender-vandaag .kalender-dag {color: var(--blauw);}

.kalender-event {display: block;
    background: var(--blauw);
    color: var(--wit);
    border-radius: 6px;
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    margin-top: 0.25rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;}

.kalender-event:hover {background: var(--blauw-fel); color: var(--wit);}

@media (max-width: 640px) {
.veld-rij {grid-template-columns: 1fr; gap: 0;}
}

/* ---------- Tweedehandsmarkt & berichten (Fase 3) ---------- */

.prijs {display: inline-block;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    color: var(--blauw);
    font-size: 1.05rem;}

.prijs-groot {font-size: 1.6rem; margin: 0.25rem 0 0.5rem;}

.contact-blok {margin-top: 1rem;
    padding: 1.25rem;
    background: var(--blauw-licht);
    border-radius: 12px;}

.contact-blok h2 {margin-top: 0;}

.gesprek-lijst {display: flex; flex-direction: column;}

.gesprek {display: block;
    padding: 0.9rem 0.5rem;
    border-bottom: 1px solid var(--lijn);
    text-decoration: none;
    color: var(--inkt);}

.gesprek:last-of-type {border-bottom: none;}

.gesprek:hover {background: var(--achtergrond); color: var(--inkt);}

.gesprek-ongelezen {background: var(--blauw-licht); border-radius: 8px;}

.gesprek-kop {display: flex; justify-content: space-between; gap: 1rem;}

.gesprek-tijd {font-size: 0.8rem; color: var(--inkt-zacht); white-space: nowrap;}

.gesprek-onderwerp {margin: 0.15rem 0; font-size: 0.9rem; color: var(--inkt-zacht);}

.gesprek-preview {margin: 0.1rem 0 0; font-size: 0.9rem; color: var(--inkt-zacht);}

.gesprek-info {display: flex;
    gap: 1rem;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--lijn);
    margin-bottom: 1rem;}

.gesprek-info h1 {margin: 0 0 0.15rem; font-size: 1.3rem;}

.gesprek-foto {width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;}

.chat {display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem;}

.chat-bericht {max-width: 78%; align-self: flex-start;}

.chat-van-mij {align-self: flex-end; text-align: right;}

.chat-ballon {display: inline-block;
    background: var(--achtergrond);
    border: 1px solid var(--lijn);
    border-radius: 14px 14px 14px 4px;
    padding: 0.55rem 0.85rem;
    text-align: left;}

.chat-van-mij .chat-ballon {background: var(--blauw);
    border-color: var(--blauw);
    color: var(--wit);
    border-radius: 14px 14px 4px 14px;}

.chat-tijd {display: block; font-size: 0.72rem; color: var(--inkt-zacht); margin-top: 0.15rem;}

.sr-only-label {position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);}

/* ---------- Moderne zoekertje-detailpagina ---------- */

.listing-detail-pagina {max-width: 980px;}

.listing-broodkruimel {display: flex; align-items: center; gap: 0.55rem;
    margin: 0 0 1rem; color: var(--inkt-zacht); font-size: 0.9rem;}

.listing-broodkruimel a {font-weight: 600; text-decoration: none;}

.listing-status-banner {margin-bottom: 1rem; padding: 0.8rem 1rem;
    border: 1px solid var(--fout); border-radius: 12px;
    background: var(--fout-licht); color: var(--fout); font-weight: 600;}

.listing-detail-grid {display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(290px, 0.82fr);
    grid-template-areas: "galerij samenvatting" "beschrijving samenvatting";
    gap: 1.15rem; align-items: start;}

.listing-galerij-kaart, .listing-samenvatting {background: var(--wit); border: 1px solid var(--lijn);
    border-radius: 18px; box-shadow: var(--schaduw); overflow: hidden;}

.listing-galerij-kaart {grid-area: galerij;}
.listing-samenvatting {grid-area: samenvatting;}

.listing-hoofdfoto {position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
    padding: 0; border: 0; background: var(--achtergrond); cursor: zoom-in; overflow: hidden;}

.listing-hoofdfoto img {display: block; width: 100%; height: 100%; object-fit: contain;
    transition: transform 0.25s ease;}

.listing-hoofdfoto:hover img {transform: scale(1.015);}
.listing-hoofdfoto.is-fout::before {content: "Foto kon niet worden geladen"; position: absolute;
    inset: 0; display: grid; place-items: center; color: var(--inkt-zacht); font: 600 1rem "Inter", sans-serif;}

.listing-zoom-label {position: absolute; right: 1rem; bottom: 1rem; padding: 0.4rem 0.7rem;
    border-radius: 999px; background: rgba(9, 19, 32, 0.78); color: #fff;
    font-size: 0.8rem; font-weight: 600; backdrop-filter: blur(5px);}

.listing-thumbnails {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.65rem;
    padding: 0.75rem; border-top: 1px solid var(--lijn);}

.listing-thumbnail {aspect-ratio: 1 / 1; padding: 0; overflow: hidden; cursor: pointer;
    border: 2px solid transparent; border-radius: 10px; background: var(--achtergrond); opacity: 0.76;
    transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.15s ease;}

.listing-thumbnail:hover, .listing-thumbnail.is-actief {opacity: 1; transform: translateY(-1px);}
.listing-thumbnail.is-actief {border-color: var(--blauw-fel);}
.listing-thumbnail img {display: block; width: 100%; height: 100%; object-fit: cover;}

.listing-geen-foto {min-height: 430px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 0.75rem; color: var(--inkt-zacht); background: var(--achtergrond);}

.listing-geen-foto svg {width: 72px; fill: none; stroke: currentColor; stroke-width: 1.35; opacity: 0.7;}

.listing-samenvatting {padding: clamp(1.2rem, 2.5vw, 1.8rem);}
.listing-verkoper-inline {margin: -0.1rem 0 1.15rem; padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--lijn);}
.listing-badges {display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.8rem;}
.listing-samenvatting h1 {font-size: clamp(1.65rem, 3vw, 2.2rem); overflow-wrap: anywhere;}
.listing-prijs {margin: 0.75rem 0 1.25rem; color: var(--blauw-fel);
    font: 700 clamp(1.7rem, 3vw, 2.25rem)/1 "Space Grotesk", sans-serif;}

.listing-kerninfo {margin: 0 0 1.35rem; border-top: 1px solid var(--lijn);}
.listing-kerninfo div {display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.75rem;
    padding: 0.72rem 0; border-bottom: 1px solid var(--lijn);}
.listing-kerninfo dt {color: var(--inkt-zacht);}
.listing-kerninfo dd {margin: 0; font-weight: 600; overflow-wrap: anywhere;}
.listing-contact-cta {padding-block: 0.8rem;}
.listing-veilig {margin: 0.65rem 0 0; color: var(--inkt-zacht); text-align: center; font-size: 0.82rem;}
.listing-eigenaar-acties {display: grid; gap: 0.65rem;}
.listing-eigenaar-acties > .btn {width: 100%;}
.listing-eigenaar-acties form {margin: 0;}

.listing-beschrijving, .listing-verkoper {max-width: none; border-radius: 18px; padding: clamp(1.2rem, 2.5vw, 1.7rem);}
.listing-beschrijving {grid-area: beschrijving;}
.listing-beschrijving > div {line-height: 1.75; overflow-wrap: anywhere;}
.listing-sectie-label {margin: 0 0 0.35rem; color: var(--blauw-fel); font-size: 0.75rem;
    font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;}
.listing-verkoper-kop {display: flex; align-items: center; gap: 0.85rem;}
.listing-verkoper-kop h2 {margin: 0 0 0.2rem;}
.listing-verkoper-kop p {margin: 0; color: var(--inkt-zacht); font-size: 0.9rem;}
.listing-verkoper-avatar {width: 58px; height: 58px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--blauw-fel); flex: 0 0 auto;}
.listing-verkoper-letter {display: grid; place-items: center; background: var(--blauw-licht);
    color: var(--blauw-fel); font: 700 1.25rem "Space Grotesk", sans-serif;}

.listing-contact-form {display: grid; grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.25fr);
    gap: 1.5rem; align-items: start; max-width: none; margin-top: 1.4rem; border-radius: 18px;
    scroll-margin-top: 1rem;}
.listing-contact-form h2 {margin-bottom: 0.35rem;}
.listing-contact-form p {margin-top: 0;}
.listing-contact-form textarea {resize: vertical;}
.listing-contact-form .veld {margin-bottom: 0.65rem;}
.listing-terug {margin-top: 1.25rem;}

body.lightbox-open {overflow: hidden;}
.listing-lightbox[hidden] {display: none;}
.listing-lightbox {position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
    padding: clamp(0.75rem, 3vw, 2rem); background: rgba(4, 10, 18, 0.94);}
.listing-lightbox figure {display: grid; grid-template-rows: minmax(0, 1fr) auto; max-width: min(1100px, 88vw);
    max-height: 90vh; margin: 0; color: #fff; text-align: center;}
.listing-lightbox figure img {display: block; max-width: 100%; max-height: calc(90vh - 2.5rem);
    margin: auto; object-fit: contain; border-radius: 10px;}
.listing-lightbox figcaption {padding-top: 0.5rem; font-size: 0.9rem; color: rgba(255,255,255,0.8);}
.listing-lightbox button {position: fixed; display: grid; place-items: center; width: 48px; height: 48px;
    padding: 0; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%;
    background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; font-size: 2rem; line-height: 1;}
.listing-lightbox button:hover {background: rgba(255,255,255,0.24);}
.listing-lightbox-sluit {top: 1rem; right: 1rem;}
.listing-lightbox-vorige {left: 1rem; top: calc(50% - 24px);}
.listing-lightbox-volgende {right: 1rem; top: calc(50% - 24px);}

.gesprek-onderwerp-kaart {display: flex; gap: 0.85rem; align-items: center; margin-top: 0.55rem;
    padding: 0.65rem; border: 1px solid var(--lijn); border-radius: 12px; background: var(--achtergrond);}
.gesprek-onderwerp-kaart .gesprek-foto {width: 72px; height: 58px;}
.gesprek-onderwerp-tekst {min-width: 0;}
.gesprek-onderwerp-tekst strong, .gesprek-onderwerp-tekst span {display: block;}
.gesprek-onderwerp-tekst strong {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.gesprek-onderwerp-prijs {color: var(--blauw-fel); font-weight: 700;}
.gesprek-rij-met-foto {display: flex; align-items: center; gap: 0.75rem;}
.gesprek-lijst-foto {width: 58px; height: 58px; flex: 0 0 auto; border-radius: 10px; object-fit: cover;}
.gesprek-lijst-inhoud {min-width: 0; flex: 1;}

@media (max-width: 820px) {
    .listing-detail-grid {grid-template-columns: 1fr;
        grid-template-areas: "samenvatting" "galerij" "beschrijving";}
    .listing-geen-foto {min-height: 300px;}
    .listing-contact-form {grid-template-columns: 1fr; gap: 0.75rem;}
}

@media (max-width: 520px) {
    .listing-detail-pagina {padding-inline: 0.8rem;}
    .listing-galerij-kaart, .listing-samenvatting, .listing-beschrijving, .listing-verkoper, .listing-contact-form {border-radius: 14px;}
    .listing-hoofdfoto {aspect-ratio: 1 / 1;}
    .listing-thumbnails {gap: 0.4rem; padding: 0.55rem; overflow-x: auto;}
    .listing-thumbnail {min-width: 58px;}
    .listing-kerninfo div {grid-template-columns: 5.5rem minmax(0, 1fr);}
    .listing-lightbox {padding: 0.5rem;}
    .listing-lightbox figure {max-width: 96vw;}
    .listing-lightbox-vorige {left: 0.4rem;}
    .listing-lightbox-volgende {right: 0.4rem;}
    .listing-lightbox button {width: 44px; height: 44px; background: rgba(0,0,0,0.52);}
}

/* ---------- Klusjes & klussers (Fase 4) ---------- */

.klusser-kop {display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.5rem;}

.klusser-kop h3, .klusser-kop h1 {margin: 0 0 0.1rem;}

.klusser-kop-groot {margin-bottom: 1rem;}

.klusser-avatar {width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--blauw);}

.klusser-avatar-groot {width: 84px; height: 84px;}

.klusser-avatar-leeg {display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--blauw-licht);
    color: var(--blauw);
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 1.2rem;}

.klusser-avatar-groot.klusser-avatar-leeg {font-size: 2rem;}

.klusser-diensten {display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.4rem 0;}

.veld-label-tekst {display: block; font-weight: 500; font-size: 0.95rem; margin-bottom: 0.4rem;}

.checkbox-grid {display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.35rem 1rem;}

.checkbox-item {display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 400;
    cursor: pointer;}

/* ---------- Handelaars & reviews (Fase 5) ---------- */

.bedrijf-logo {width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--lijn);
    background: var(--wit);}

.bedrijf-logo-groot {width: 84px; height: 84px;}

.bedrijf-logo-leeg {display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--blauw-licht);
    color: var(--blauw);
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 1.2rem;}

.bedrijf-logo-groot.bedrijf-logo-leeg {font-size: 2rem;}

.sterren {color: #d99a06; font-weight: 600;}

.promo-lijst {margin: 0.75rem 0 1rem; display: flex; flex-direction: column; gap: 0.6rem;}

.promo {background: var(--blauw-licht);
    border: 1px solid var(--blauw);
    border-radius: 10px;
    padding: 0.75rem 1rem;}

.promo p {margin: 0.25rem 0 0;}

.bedrijf-details {display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.25rem 0;}

.bedrijf-kaart {width: 100%;
    height: 280px;
    border: 1px solid var(--lijn);
    border-radius: 12px;}

.uren-tabel {border-collapse: collapse;}

.uren-tabel td {padding: 0.15rem 1.25rem 0.15rem 0; font-size: 0.95rem;}

.uren-tabel td:first-child {color: var(--inkt-zacht);}

.uren-vandaag td {font-weight: 600; color: var(--blauw);}

.uren-rij {display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.35rem;}

.uren-dag {font-weight: 400 !important; margin: 0 !important; font-size: 0.9rem;}

.uren-rij input {width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    font: inherit;}

.ster-keuze {display: flex; flex-direction: column; gap: 0.2rem;}

.ster-keuze .checkbox-item {color: #d99a06; font-weight: 600;}

.review-lijst {margin-top: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem;}

.review {border-bottom: 1px solid var(--lijn); padding-bottom: 1rem;}

.review:last-child {border-bottom: none;}

.review-fotos {display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0;}

.review-fotos img {width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;}

.review-reactie {background: var(--achtergrond);
    border-left: 3px solid var(--blauw);
    border-radius: 0 8px 8px 0;
    padding: 0.6rem 0.9rem;
    margin: 0.5rem 0;}

.review-reactie p {margin: 0.25rem 0 0;}

.review-antwoord summary {list-style: none; display: inline-block;}

.review-antwoord summary::-webkit-details-marker {display: none;}

@media (max-width: 700px) {
.bedrijf-details {grid-template-columns: 1fr;}
}

/* ---------- Afwerking: meldingen, notificaties, zoeken, GDPR (Fase 6) ---------- */

.meld-blok {margin-top: 1rem;}

.meld-knop {cursor: pointer;
    color: var(--inkt-zacht);
    font-size: 0.88rem;
    list-style: none;
    display: inline-block;}

.meld-knop::-webkit-details-marker {display: none;}

.meld-knop:hover {color: var(--fout);}

.meld-formulier {margin-top: 0.6rem;
    padding: 0.9rem;
    background: var(--fout-licht);
    border: 1px solid var(--fout);
    border-radius: 10px;
    max-width: 460px;}

.zoek-groot input[type="search"] {padding: 0.75rem 1rem; font-size: 1.05rem;}

.zoek-sectie {margin: 1.25rem 0 0.5rem;}

.zoek-resultaat {margin: 0.3rem 0;}

.stat-gevaar {border-color: var(--fout);}

.stat-gevaar .stat-cijfer {color: var(--fout);}

.kaart-gevaar {border-color: var(--fout);}

.btn-gevaar {background: var(--fout);
    color: var(--wit);}

.btn-gevaar:hover {background: #8f2626; color: var(--wit);}

.footer-link {color: var(--wit);}

.footer-link:hover {color: var(--wit);}

/* ---------- Logo-update: skyline + Vice City "Hub" ---------- */

/* ---------- Homepagina: nieuws + zijbalk (Fase 7) ---------- */

.home-onder {padding-top: 2rem; padding-bottom: 2rem;}

.home-grid {display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: start;}

.home-nieuws .kaart-kop {margin-bottom: 1rem;}

.artikel-grid {display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;}

.artikel-kaart {display: flex;
    flex-direction: column;
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.15s;}

.artikel-kaart:hover {box-shadow: 0 6px 20px rgba(15, 53, 96, 0.12); transform: translateY(-2px);}

.artikel-foto {width: 100%; height: 150px; object-fit: cover;}

.artikel-inhoud {padding: 0.9rem 1rem 1.1rem;}

.artikel-inhoud h3 {margin: 0 0 0.3rem; font-size: 1.05rem;}

.artikel-tekst {margin: 0.4rem 0 0; color: var(--inkt-zacht); font-size: 0.92rem; line-height: 1.5;}

.artikel-detail-foto {width: 100%; max-height: 420px; object-fit: cover; border-radius: 12px; margin: 0.5rem 0 1rem;}

.home-zijbalk {display: flex; flex-direction: column; gap: 1.25rem;}

.home-zijbalk .kaart {padding: 1.1rem 1.25rem;}

.home-zijbalk h2 {font-size: 1.1rem; margin: 0 0 0.6rem;}

.mini-stats {display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;}

.mini-stat {background: var(--blauw-licht);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;}

.mini-stat-cijfer {font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--blauw);
    line-height: 1;}

.mini-stat span:last-child {font-size: 0.82rem; color: var(--inkt-zacht); margin-top: 0.15rem;}

.zijbalk-item {display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: baseline;
    margin: 0.4rem 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--lijn);
    font-size: 0.92rem;}

.zijbalk-item:last-of-type {border-bottom: none;}

.zijbalk-item .prijs {font-size: 0.85rem; white-space: nowrap;}

.mt-klein {margin-top: 0.75rem;}

@media (max-width: 820px) {
.home-grid {grid-template-columns: 1fr;}

.mini-stats {grid-template-columns: 1fr 1fr 1fr;}
}

/* ---------- Externe nieuwsbronnen (Fase 8) ---------- */

.zijbalk-pers {flex-direction: column; align-items: flex-start; gap: 0.1rem;}

.zijbalk-pers .optioneel {font-size: 0.8rem;}

.pers-samenvatting {margin: -0.2rem 0 0.6rem;
    color: var(--inkt-zacht);
    font-size: 0.88rem;
    line-height: 1.45;}

/* ---------- Babbelbox (Fase 9) ---------- */

.babbel-kaart {max-width: 720px;}

.babbel-regels {margin: 0.75rem 0 1.25rem; padding-left: 1.1rem;}

.babbel-regels li {margin-bottom: 0.35rem;}

.babbel-kop {display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;}

.babbel-kop h2 {margin: 0;}

.babbel-chat {height: 340px;
    overflow-y: auto;
    border: 1px solid var(--lijn);
    border-radius: 12px;
    padding: 0.9rem;
    background: var(--achtergrond);
    margin-bottom: 0.75rem;}

.babbel-verstuur {display: flex;
    gap: 0.5rem;}

.babbel-verstuur input {flex: 1;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    font: inherit;}

.babbel-spinner {display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--blauw-licht);
    border-top-color: var(--blauw);
    border-radius: 50%;
    animation: babbel-draai 0.8s linear infinite;
    vertical-align: -0.1rem;}

@keyframes babbel-draai {
to {transform: rotate(360deg);}
}

/* ---------- Babbelbox: geslachtsvoorkeur ---------- */

.babbel-voorkeur {display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 0.3rem;}

.babbel-voorkeur .checkbox-item {font-size: 1rem;}

/* ---------- Herdenken (Fase 10) ---------- */

.graf-lijst {display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1rem;}

.graf-kaart {display: flex;
    flex-direction: column;
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.15s;}

.graf-kaart:hover {box-shadow: 0 6px 20px rgba(15, 53, 96, 0.12); transform: translateY(-2px);}

.graf-foto {width: 100%; height: 180px; object-fit: cover; background: var(--achtergrond);}

.graf-foto-leeg {display: flex;
    align-items: center;
    justify-content: center;
    color: #b8a06a;
    background: linear-gradient(135deg, #f4ecd8, #e7dcc0);
    font-size: 2.5rem;}

.graf-inhoud {padding: 0.9rem 1rem 1.1rem;}

.graf-inhoud h3 {margin: 0 0 0.3rem; font-size: 1.05rem;}

.graf-detail {text-align: center; padding: 2rem 1.5rem;}

.graf-eyebrow {text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    color: var(--inkt-zacht);
    margin: 0 0 0.4rem;
    font-weight: 500;}

.graf-titel {font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin: 0 0 0.3rem;
    color: var(--blauw-donker);}

.graf-spanne {font-size: 1.1rem; color: var(--inkt-zacht); margin: 0 0 1.5rem;}

.graf-grid {display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    text-align: left;
    margin-top: 1rem;}

.graf-grid > div:first-child {display: flex; justify-content: center;}

.graf-foto-groot {width: 100%;
    max-width: 320px;
    max-height: 400px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--lijn);}

.graf-foto-groot.graf-foto-leeg {aspect-ratio: 3/4;
    font-size: 4rem;}

.kaarsje-teller {font-size: 1.1rem;
    color: #a86b1a;
    font-weight: 600;
    margin: 0.4rem 0 1rem;}

.herinnering-lijst {margin-top: 1.25rem; display: flex; flex-direction: column; gap: 1rem;}

.herinnering {padding: 0.9rem 1.1rem;
    background: var(--achtergrond);
    border-left: 3px solid var(--blauw);
    border-radius: 0 10px 10px 0;}

.herinnering p {margin: 0.3rem 0; line-height: 1.55;}

@media (max-width: 700px) {
.graf-grid {grid-template-columns: 1fr;}
}

/* ---------- Donkere modus (Fase 11) ---------- */

/* Kleuren donker: dieper blauw, hoge leesbaarheid, geen puur zwart */

:root[data-thema="donker"] {--achtergrond: #0e1620;
    --wit: #1a2331;
    --lijn: #2b3648;
    --inkt: #e8ecf3;
    --inkt-zacht: #a8b4c5;
    --blauw: #4a9eff;
    --blauw-donker: #2f7de1;
    --blauw-licht: #1a2c44;
    --blauw-fel: #6bb2ff;
    --ok: #4ade80;
    --ok-licht: #143a26;
    --fout: #f87171;
    --fout-licht: #3a1a1e;
    --schaduw: rgba(0, 0, 0, 0.4);}

:root[data-thema="donker"] body {background: var(--achtergrond);
    color: var(--inkt);}

:root[data-thema="donker"] .kaart, :root[data-thema="donker"] .event-kaart, :root[data-thema="donker"] .artikel-kaart, :root[data-thema="donker"] .graf-kaart, :root[data-thema="donker"] .module, :root[data-thema="donker"] .stat {background: var(--wit);
    border-color: var(--lijn);
    color: var(--inkt);}

:root[data-thema="donker"] input[type="text"], :root[data-thema="donker"] input[type="email"], :root[data-thema="donker"] input[type="password"], :root[data-thema="donker"] input[type="search"], :root[data-thema="donker"] input[type="url"], :root[data-thema="donker"] input[type="number"], :root[data-thema="donker"] input[type="date"], :root[data-thema="donker"] input[type="tel"], :root[data-thema="donker"] select, :root[data-thema="donker"] textarea, :root[data-thema="donker"] .babbel-verstuur input, :root[data-thema="donker"] .uren-rij input {background: #0e1620;
    color: var(--inkt);
    border-color: var(--lijn);}

:root[data-thema="donker"] .site-footer {background: #0a1119;
    color: var(--inkt-zacht);}

:root[data-thema="donker"] .filter-chip {background: var(--wit);
    color: var(--inkt);
    border-color: var(--lijn);}

:root[data-thema="donker"] .filter-chip.filter-actief, :root[data-thema="donker"] .filter-chip:hover {background: var(--blauw-licht);
    border-color: var(--blauw);
    color: var(--blauw-fel);}

:root[data-thema="donker"] .chat-ballon, :root[data-thema="donker"] .babbel-chat {background: #0e1620; border-color: var(--lijn);}

:root[data-thema="donker"] .chat-van-mij .chat-ballon {background: var(--blauw-donker); color: #fff;}

:root[data-thema="donker"] .badge {background: var(--blauw-licht); color: var(--blauw-fel);}

:root[data-thema="donker"] .kaarsje-teller {color: #f5c366;}

:root[data-thema="donker"] .graf-foto-leeg {background: linear-gradient(135deg, #2a2418, #1a1810);
    color: #d4b872;}

:root[data-thema="donker"] .promo {background: var(--blauw-licht);
    border-color: var(--blauw);}

:root[data-thema="donker"] .review-reactie, :root[data-thema="donker"] .herinnering {background: #0e1620;
    border-left-color: var(--blauw);}

:root[data-thema="donker"] .mini-stat {background: var(--blauw-licht);}

:root[data-thema="donker"] .mini-stat-cijfer {color: var(--blauw-fel);}

:root[data-thema="donker"] .meld-formulier {background: var(--fout-licht);
    border-color: var(--fout);}

:root[data-thema="donker"] .melding-fout {background: var(--fout-licht);
    border-color: var(--fout);
    color: #fda4a4;}

:root[data-thema="donker"] .melding-ok {background: var(--ok-licht);
    border-color: var(--ok);
    color: #86efac;}

/* Foto's een tikje minder fel maken in donker */

:root[data-thema="donker"] .hero-foto, :root[data-thema="donker"] .artikel-foto, :root[data-thema="donker"] .graf-foto, :root[data-thema="donker"] .event-kaart-foto img {filter: brightness(0.9);}

/* Themaschakelaar */

/* ---------- Opgeschoonde navigatie met dropdowns ---------- */

/* Mobiel: dropdowns stapelen verticaal, geen absolute positionering */

/* Donkere modus */

/* ---------- Banner bewerken (voor beheerders) ---------- */

.hero-blauw, .hero-fotozijde {position: relative;}

.hero-bewerk-knop {position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 5;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #16202e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    border: none;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;}

.hero-bewerk-knop:hover {background: #fff;
    transform: scale(1.08);}

.hero-bewerk-foto {top: 1rem; right: 1rem;}

/* Kleurkiezer op de bewerkpagina */

.kleur-rij {display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;}

.kleur-rij input[type="color"] {width: 3.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--lijn);
    border-radius: 8px;
    cursor: pointer;
    background: none;}

.kleur-rij input[type="text"] {width: 8rem;
    font-family: "Space Grotesk", monospace;
    text-transform: uppercase;}

.kleur-suggesties {display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;}

.kleur-suggestie {width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--lijn);
    cursor: pointer;
    transition: transform 0.12s, border-color 0.12s;}

.kleur-suggestie:hover {transform: scale(1.15);
    border-color: var(--inkt);}

/* ---------- Buurtwall ---------- */

.wall-sectie {padding: 2rem 1rem;}

.wall-nieuw {max-width: 700px; margin: 0 auto 1.5rem;}

.wall-nieuw summary {list-style: none; cursor: pointer;}

.wall-nieuw summary::-webkit-details-marker {display: none;}

.wall-grid {display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 560px;
    margin: 0 auto;}

.wall-post {background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;}

.wall-kop {display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--lijn);
    position: relative;}

.wall-kop > div:not(.wall-verwijder) {flex: 1; min-width: 0;}

.wall-kop strong {display: block; color: var(--inkt);}

.wall-avatar {width: 2.4rem; height: 2.4rem; border-radius: 50%;
    object-fit: cover; border: 2px solid var(--blauw);
    flex-shrink: 0;}

.wall-avatar-leeg {display: inline-flex; align-items: center; justify-content: center;
    background: var(--blauw); color: #fff; font-weight: 700;}

.wall-locatie {margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--blauw);}

.wall-tijd {margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--inkt-zacht);}

.wall-verwijder {margin: 0;}

.wall-foto {width: 100%;
    max-height: 500px;
    object-fit: cover;
    display: block;
    background: var(--achtergrond);}

.wall-bijschrift {padding: 0.75rem 1rem 0.25rem; margin: 0; line-height: 1.5;}

.wall-acties {display: flex;
    gap: 1rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--lijn);
    border-bottom: 1px solid var(--lijn);
    font-size: 0.9rem;
    color: var(--inkt-zacht);
    align-items: center;}

.wall-like-knop {background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--inkt-zacht);
    transition: background 0.15s, transform 0.15s;}

.wall-like-knop:hover:not(.wall-uit) {background: var(--blauw-licht); transform: scale(1.03);}

.wall-like-knop .wall-hart {filter: grayscale(1); opacity: 0.5; transition: filter 0.2s, opacity 0.2s, transform 0.2s;}

.wall-like-knop.wall-geliked .wall-hart {filter: none; opacity: 1; transform: scale(1.15);}

.wall-like-knop.wall-geliked {color: #e11d48; font-weight: 600;}

.wall-uit {cursor: default; opacity: 0.7;}

.wall-comments {padding: 0.5rem 1rem;}

.wall-comment {padding: 0.35rem 0;
    font-size: 0.9rem;
    line-height: 1.4;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;}

.wall-comment strong {color: var(--inkt); flex-shrink: 0;}

.wall-comment-verwijder {background: none; border: none; cursor: pointer;
    color: var(--inkt-zacht); font-size: 0.75rem; padding: 0 0.3rem;
    margin-left: auto;}

.wall-comment-verwijder:hover {color: var(--fout);}

.wall-reageer {display: flex;
    gap: 0.5rem;
    padding: 0.6rem 1rem 0.85rem;
    border-top: 1px solid var(--lijn);}

.wall-reageer input {flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--lijn);
    border-radius: 8px;
    font: inherit;
    background: var(--achtergrond);}

.wall-reageer button {background: var(--blauw);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;}

/* Bewerkbare tekstblokken */

.content-blok {position: relative;
    display: block;}

.content-blok-tekst {display: block;}

.content-blok-bewerk {position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--wit);
    color: var(--blauw-donker);
    border: 1px solid var(--lijn);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.85rem;
    opacity: 0.4;
    transition: opacity 0.15s, transform 0.15s, background 0.15s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);}

.content-blok:hover .content-blok-bewerk {opacity: 1; transform: scale(1.05);}

.content-blok-bewerk:hover {background: var(--blauw-licht);}

/* ---------- Cookiebanner ---------- */

.cookiebanner {position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 1000;
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    padding: 1rem 1.25rem;
    max-width: 720px;
    margin: 0 auto;}

.cookiebanner-inhoud {display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;}

.cookiebanner-tekst {flex: 1;
    min-width: 250px;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--inkt);}

.cookiebanner .btn {flex-shrink: 0;}

/* ---------- Vermist/gevonden ---------- */

.vermist-lijst {display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;}

.vermist-kaart {display: flex;
    flex-direction: column;
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, transform 0.15s;}

.vermist-kaart:hover {box-shadow: 0 6px 20px rgba(15, 53, 96, 0.12); transform: translateY(-2px);}

.vermist-foto {width: 100%;
    height: 180px;
    object-fit: cover;
    background: var(--achtergrond);}

.vermist-foto-leeg {display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--inkt-zacht);}

.vermist-inhoud {padding: 0.9rem 1rem 1.1rem;}

.vermist-inhoud h3 {margin: 0.3rem 0 0.2rem;}

.vermist-badge {display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--blauw-licht);
    color: var(--blauw-donker);}

.vermist-badge-groot {font-size: 0.9rem; padding: 0.35rem 0.9rem; margin-bottom: 0.5rem;}

.vermist-vermist .vermist-badge {background: #fde8e8; color: #b91c1c;}

.vermist-gevonden .vermist-badge {background: #d1fae5; color: #065f46;}

.vermist-foto-groot {width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 10px;
    margin: 1rem 0;
    background: var(--achtergrond);}

/* ---------- Home hoogtepunten (zoekertjes + klussen boven wall) ---------- */

.home-hoogtepunten {padding: 2rem 1rem 0.5rem;}

.home-hoogtepunten-grid {display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    max-width: 1100px;
    margin: 0 auto;}

.hoogtepunten-lijst {list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;}

.hoogtepunten-lijst li {display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--lijn);}

.hoogtepunten-lijst li:last-child {border-bottom: none;}

.hoogtepunten-lijst a {color: var(--inkt);
    text-decoration: none;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}

.hoogtepunten-lijst a:hover {color: var(--blauw);}

@media (max-width: 700px) {
.home-hoogtepunten-grid {grid-template-columns: 1fr;}
}

/* ---------- Hero linker foto (Fase 12) ---------- */

.hero-blauw {position: relative; overflow: hidden;}

.hero-blauw-foto, .hero-blauw-overlay {position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;}

.hero-blauw-foto {background-size: cover;
    background-position: center;}

.hero-blauw-overlay {/* De opacity komt inline uit de blade — 0 tot 1 */}

.hero-blauw > .hero-bewerk-knop, .hero-blauw > .hero-tekstblok {position: relative;
    z-index: 2;}

/* Huidige foto in het bewerkformulier */

.hero-huidige-foto {margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--achtergrond);
    border: 1px solid var(--lijn);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 1rem;}

.hero-huidige-foto img {width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--lijn);}

input[type="range"] {width: 100%;
    max-width: 400px;}

/* ---------- Hero rechter tekstblok ---------- */

.hero-fotozijde {position: relative; overflow: hidden;}

.hero-fotozijde > .hero-blauw-overlay, .hero-fotozijde > .hero-tekstblok-rechts, .hero-fotozijde > .hero-bewerk-knop {position: relative;
    z-index: 2;}

.hero-fotozijde > .hero-blauw-overlay {position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;}

.hero-tekstblok-rechts {position: absolute !important;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 3rem;
    color: #fff;
    z-index: 2;}

.hero-tekstblok-rechts h2 {font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.5rem, 3.5vw, 2.6rem);
    line-height: 1.1;
    margin: 0 0 0.5rem;
    color: #fff;}

.hero-tekstblok-rechts .hero-eyebrow {color: rgba(255, 255, 255, 0.85);}

.hero-tekstblok-rechts .hero-tekst {color: rgba(255, 255, 255, 0.92);}

@media (max-width: 900px) {
.hero-tekstblok-rechts {padding: 1.5rem;}
}

/* ---------- Scheidingslijn tussen linker- en rechterkant van de hero ---------- */

.hero-split {position: relative;}

.hero-split::after {content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
    z-index: 3;
    pointer-events: none;}

/* Op mobiel: geen absolute lijn, maar een echte border tussen de twee helften */

@media (max-width: 900px) {
.hero-split::after {display: none;}

.hero-split > .hero-blauw {border-bottom: 2px solid rgba(255, 255, 255, 0.4);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);}
}

/* ---------- Hamburgermenu (mobiel) ---------- */

/* Kruisje animatie als menu open is */

@media (max-width: 900px) {
/* Dropdowns worden gewone secties in het mobiele menu */

/* Backdrop achter het menu */
}

/* Donkere modus */

/* ---------- PWA install-banner ---------- */

.pwa-banner {position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 998;
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(15, 53, 96, 0.2);
    padding: 1rem 1.25rem;
    max-width: 500px;
    margin: 0 auto;
    animation: pwaSlideIn 0.4s ease-out;}

@keyframes pwaSlideIn {
from {transform: translateY(20px); opacity: 0;}

to {transform: translateY(0); opacity: 1;}
}

.pwa-banner-inhoud {display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;}

.pwa-banner-icoon {width: 3rem;
    height: 3rem;
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}

.pwa-banner-tekst {flex: 1;
    min-width: 180px;}

.pwa-banner-tekst strong {display: block;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1rem;
    color: var(--inkt);}

.pwa-banner-tekst p {margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--inkt-zacht);
    line-height: 1.4;}

.pwa-banner-knoppen {display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
    flex-wrap: wrap;}

/* Als de cookiebanner ook openstaat, PWA-banner iets hoger zetten */

body:has(#cookiebanner:not([hidden])) .pwa-banner {bottom: 6rem;}

/* Fullscreen als PWA */

@media all and (display-mode: standalone) {
/* iOS safe-area voor de notch */
}

/* ---------- Notificaties verwijderen ---------- */

.notificatie-acties {display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;}

.notificatie-verwijder {background: none;
    border: none;
    cursor: pointer;
    color: var(--inkt-zacht);
    font-size: 0.9rem;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
    line-height: 1;}

.notificatie-verwijder:hover {background: var(--fout-licht, #fde8e8);
    color: var(--fout, #b91c1c);}

/* ---------- Mobiel: rechterkant van de hero verbergen ---------- */

@media (max-width: 900px) {
.hero-fotozijde {display: none;}

/* De scheidingslijn onder de linkerkant is dan ook overbodig */

.hero-split > .hero-blauw {border-bottom: none;
        box-shadow: none;}
}

/* =========================================================
   Oostakker.online — Modern homepage redesign (2026)
   Toegevoegd door ChatGPT. Bestaande functionele styles blijven behouden.
   ========================================================= */

:root {--modern-bg: #06111f;
    --modern-bg-2: #081828;
    --modern-panel: rgba(10, 27, 45, .86);
    --modern-panel-2: rgba(12, 31, 51, .94);
    --modern-line: rgba(255,255,255,.10);
    --modern-line-strong: rgba(255,255,255,.16);
    --modern-text: #f7f9fc;
    --modern-muted: #9ba9ba;
    --modern-blue: #278cff;
    --modern-blue-2: #176fe8;}

.wrap {max-width: 1380px; padding-left: 24px; padding-right: 24px;}

/* ---------- Moderne header ---------- */

/* ---------- Hero ---------- */

.home-hero {position: relative;
    min-height: 910px;
    overflow: hidden;
    isolation: isolate;
    background: var(--modern-bg);}

.home-hero::before {content:"";
    position:absolute;
    z-index:-3;
    inset:0;
    background-image: var(--home-hero-image);
    background-size:cover;
    background-position:center 54%;
    transform:scale(1.01);}

.home-hero::after {content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    background: linear-gradient(0deg, #06111f 0%, rgba(6,17,31,.35) 20%, transparent 48%);}

.home-hero-shade {position:absolute;
    z-index:-2;
    inset:0;
    background:
        linear-gradient(90deg, rgba(3,14,27,.98) 0%, rgba(3,14,27,.92) 27%, rgba(3,14,27,.58) 52%, rgba(3,14,27,.12) 78%, rgba(3,14,27,.23) 100%),
        linear-gradient(180deg, rgba(3,14,27,.18), rgba(3,14,27,.02) 52%, rgba(3,14,27,.45));}

.home-hero-inner {position:relative; z-index:2;}

.home-hero-copy {width:min(720px, 62vw); padding-top: 285px; padding-bottom: 330px;}

.home-kicker {display:inline-flex; align-items:center; gap:10px; margin:0 0 22px; color:#3194ff; font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;}

.home-kicker::after {content:""; width:78px; height:1px; background:linear-gradient(90deg,#3194ff,transparent);}

.home-hero h1 {margin:0; max-width:760px; color:#fff; font-family:"Space Grotesk",sans-serif; font-size:clamp(3.6rem,5.8vw,5.5rem); line-height:.99; letter-spacing:-.055em; text-wrap:balance; text-shadow:0 10px 30px rgba(0,0,0,.25);}

.home-hero-text {max-width:620px; margin:26px 0 0; color:#c7d0dc; font-size:1.08rem; line-height:1.65;}

.home-hero-actions {display:flex; flex-wrap:wrap; gap:14px; margin-top:34px;}

.home-btn {min-height:56px; display:inline-flex; align-items:center; justify-content:center; gap:11px; padding:0 25px; border:1px solid transparent; border-radius:999px; color:#fff !important; text-decoration:none; font-weight:700; font-size:.95rem; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;}

.home-btn:hover {transform:translateY(-2px);}

.home-btn-primary {background:linear-gradient(135deg,#3294ff,#176fe8); box-shadow:0 14px 34px rgba(39,140,255,.30);}

.home-btn-primary:hover {box-shadow:0 17px 40px rgba(39,140,255,.38);}

.home-btn-secondary {background:rgba(5,18,31,.44); border-color:rgba(255,255,255,.17); backdrop-filter:blur(12px);}

.home-btn-secondary:hover {background:rgba(255,255,255,.075);}

.home-btn svg {width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

.home-hero-edit {top: 182px; right: 28px;}

/* ---------- Shortcut cards ---------- */

.home-shortcuts-wrap {position:absolute; left:50%; transform:translateX(-50%); bottom:32px; z-index:4; width:100%;}

.home-shortcuts {display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px;}

.home-shortcut {position:relative; min-height:210px; padding:24px; overflow:hidden; border:1px solid var(--modern-line); border-radius:21px; background:linear-gradient(145deg,rgba(14,34,55,.90),rgba(6,20,35,.94)); box-shadow:0 24px 55px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.035); backdrop-filter:blur(20px); color:#fff !important; text-decoration:none; transition:transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, background .22s ease;}

.home-shortcut:hover {transform:translateY(-7px); border-color:var(--modern-line-strong); background:linear-gradient(145deg,rgba(19,43,69,.96),rgba(8,25,43,.96));}

.home-shortcut-icon {width:50px; height:50px; display:grid; place-items:center; margin-bottom:20px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.045);}

.home-shortcut-icon svg {width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round;}

.home-shortcut-blue .home-shortcut-icon {color:#36a5ff}

.home-shortcut-cyan .home-shortcut-icon {color:#34d3ff}

.home-shortcut-purple .home-shortcut-icon {color:#ba78ff}

.home-shortcut-red .home-shortcut-icon {color:#ff6c7e}

.home-shortcut-gold .home-shortcut-icon {color:#ffc640}

.home-shortcut-teal .home-shortcut-icon {color:#42dad2}

.home-shortcut h2 {margin:0 0 9px; color:#fff; font-size:1.1rem;}

.home-shortcut p {margin:0; max-width:220px; color:#9aa8b8; font-size:.85rem; line-height:1.55;}

.home-shortcut-arrow {position:absolute; right:19px; bottom:18px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:#d8e0e9; background:rgba(255,255,255,.035); transition:.18s ease;}

.home-shortcut:hover .home-shortcut-arrow {transform:translateX(3px); color:#fff; background:var(--modern-blue);}

/* ---------- Home content panels ---------- */

.home-dashboard {padding:48px 0 76px; color:var(--modern-text); background:linear-gradient(180deg,#06111f 0%,#071522 100%);}

.home-dashboard-grid {display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) minmax(260px,.75fr); gap:18px; align-items:stretch;}

.home-panel {display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid var(--modern-line); border-radius:20px; background:linear-gradient(145deg,rgba(11,30,49,.91),rgba(7,21,36,.94)); box-shadow:0 20px 45px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.025);}

.home-panel-head {min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; border-bottom:1px solid rgba(255,255,255,.07);}

.home-panel-head > div {display:flex; align-items:center; gap:9px; min-width:0;}

.home-panel-head h2 {margin:0; color:#fff; font-size:1.04rem; white-space:nowrap;}

.home-panel-head > a {color:#4098ff; text-decoration:none; font-size:.75rem; white-space:nowrap;}

.home-panel-icon {width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:rgba(39,140,255,.10);color:#4098ff;font-size:.9rem;}

.home-feed-list {flex:1; padding:0 18px;}

.home-feed-item {min-height:106px; display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.065); color:inherit !important; text-decoration:none;}

.home-feed-item:last-child {border-bottom:0;}

.home-feed-thumb {width:80px; height:70px; flex:0 0 80px; overflow:hidden; display:grid; place-items:center; border-radius:9px; background:linear-gradient(135deg,#173452,#0c2238); color:#4d9eff; font-family:"Space Grotesk",sans-serif; font-size:1.5rem; font-weight:700;}

.home-feed-thumb img {width:100%;height:100%;object-fit:cover;}

.home-feed-thumb-tool svg {width:27px;height:27px;fill:none;stroke:#ff7182;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

.home-feed-copy {min-width:0; flex:1;}

.home-feed-title-row {display:flex;align-items:center;gap:8px;min-width:0;}

.home-feed-title-row h3 {margin:0; color:#fff; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.home-tag {flex:0 0 auto; padding:3px 6px; border-radius:6px; background:rgba(45,132,245,.18); color:#9cc9ff; font-size:.62rem; font-weight:700;}

.home-tag-green {background:rgba(38,185,130,.15); color:#75e7bb;}

.home-feed-copy p {margin:5px 0 7px; color:#99a7b7; font-size:.71rem; line-height:1.45; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.home-feed-meta {display:flex; align-items:center; gap:18px; min-width:0; color:#8e9bab; font-size:.68rem;}

.home-feed-meta strong {color:#fff; font-weight:600;}

.home-feed-meta span:last-child {margin-left:auto;}

.home-panel-footer-link {margin:0 18px 16px; min-height:40px; display:grid;place-items:center;border:1px solid rgba(255,255,255,.085);border-radius:10px;color:#fff !important;text-decoration:none;font-size:.76rem;font-weight:600;transition:.18s ease;}

.home-panel-footer-link:hover {background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.15);}

.home-empty {margin:auto; padding:32px 16px; color:#92a0b1; text-align:center; font-size:.85rem;}

.home-empty a {color:#479cff;}

.home-events-panel .home-panel-head {border-bottom:0;}

.home-event-list {flex:1; padding:0 18px;}

.home-event-item {display:flex;align-items:center;gap:13px;padding:14px 0;border-top:1px solid rgba(255,255,255,.065);color:inherit !important;text-decoration:none;}

.home-event-date {width:58px;height:65px;flex:0 0 58px;display:grid;place-content:center;text-align:center;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(255,255,255,.025);}

.home-event-date strong {color:#fff;font-size:1.45rem;line-height:1;}

.home-event-date small {margin-top:5px;color:#9ba8b7;font-size:.63rem;}

.home-event-copy {min-width:0;display:flex;flex-direction:column;gap:3px;}

.home-event-copy strong {color:#fff;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.home-event-copy small {color:#94a1b1;font-size:.67rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- Community stats ---------- */

.home-community {margin-top:28px; padding:34px 38px; border:1px solid var(--modern-line); border-radius:20px; background:linear-gradient(100deg,rgba(12,31,51,.92),rgba(6,20,35,.88)); box-shadow:inset 0 1px rgba(255,255,255,.025);}

.home-community-copy h2 {margin:0 0 5px;color:#fff;font-size:1.35rem;}

.home-community-copy p {margin:0;color:#9aa8b8;font-size:.84rem;}

.home-stat-row {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:30px;}

.home-stat {display:flex;align-items:center;gap:15px;padding:0 26px;border-left:1px solid rgba(255,255,255,.07);}

.home-stat:first-child {padding-left:0;border-left:0;}

.home-stat-icon {width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border-radius:13px;background:rgba(39,140,255,.09);color:#3b98ff;font-size:1.4rem;}

.home-stat div {display:flex;flex-direction:column;}

.home-stat strong {color:#fff;font-family:"Space Grotesk",sans-serif;font-size:1.7rem;line-height:1.05;}

.home-stat span:last-child {margin-top:4px;color:#a1adba;font-size:.78rem;}

/* Wall op de homepage sluit visueel aan */

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
.wrap {padding-left:18px;padding-right:18px;}

.home-shortcuts {grid-template-columns:repeat(3,minmax(0,1fr));}

.home-hero {min-height:1110px;}

.home-hero-copy {padding-bottom:560px;}

.home-dashboard-grid {grid-template-columns:1fr 1fr;}

.home-events-panel {grid-column:1 / -1;}

.home-event-list {display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}

.home-event-item {border-top:0;}
}

@media (max-width: 900px) {
.home-hero {min-height:1220px;}

.home-hero-shade {background:linear-gradient(180deg,rgba(3,14,27,.62) 0%,rgba(3,14,27,.82) 38%,rgba(3,14,27,.97) 74%,#06111f 100%);}

.home-hero-copy {width:100%;padding-top:180px;padding-bottom:700px;}

.home-hero h1 {font-size:clamp(3rem,10vw,4.6rem);max-width:650px;}

.home-shortcuts {grid-template-columns:repeat(2,minmax(0,1fr));}

.home-shortcut {min-height:180px;}

.home-dashboard-grid {grid-template-columns:1fr;}

.home-events-panel {grid-column:auto;}

.home-event-list {display:block;}

.home-event-item {border-top:1px solid rgba(255,255,255,.065);}

.home-stat-row {grid-template-columns:1fr 1fr;gap:22px 0;}

.home-stat:nth-child(3) {border-left:0;padding-left:0;}
}

@media (max-width: 600px) {
.wrap {padding-left:14px;padding-right:14px;}

.home-hero {min-height:1360px;}

.home-hero-copy {padding-top:150px;padding-bottom:950px;}

.home-kicker {font-size:.62rem;letter-spacing:.12em;}

.home-kicker::after {width:40px;}

.home-hero h1 {font-size:clamp(2.7rem,13vw,3.6rem);}

.home-hero-text {font-size:.96rem;line-height:1.55;}

.home-hero-actions {flex-direction:column;align-items:stretch;}

.home-btn {width:100%;}

.home-shortcuts-wrap {bottom:22px;}

.home-shortcuts {grid-template-columns:1fr;gap:10px;}

.home-shortcut {min-height:150px;padding:18px;}

.home-shortcut-icon {width:43px;height:43px;margin-bottom:12px;}

.home-shortcut h2 {font-size:1rem;}

.home-shortcut p {font-size:.78rem;max-width:80%;}

.home-dashboard {padding-top:28px;}

.home-panel-head {padding:14px;}

.home-feed-list {padding:0 14px;}

.home-feed-thumb {width:64px;height:60px;flex-basis:64px;}

.home-feed-meta {gap:9px;}

.home-feed-meta span:last-child {display:none;}

.home-panel-footer-link {margin-left:14px;margin-right:14px;}

.home-community {padding:25px 20px;}

.home-stat-row {grid-template-columns:1fr;gap:18px;}

.home-stat, .home-stat:nth-child(3) {border-left:0;padding-left:0;}

.home-stat strong {font-size:1.45rem;}
}

/* =========================================================
   MOBILE HOTFIX — header, menu en hero
   2026-08-29
   ========================================================= */

@media (max-width: 900px) {
/* De header moet op mobiel compact blijven. */

/* Belangrijk: oude mobiele nav-regels volledig overschrijven. */

/* Hero begint onder de compacte header, zonder enorme lege ruimte. */

.home-hero {min-height: auto !important;
        padding-bottom: 26px;}

.home-hero-copy {width: 100% !important;
        padding-top: 175px !important;
        padding-bottom: 38px !important;}

.home-shortcuts-wrap {position: relative !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        padding-top: 6px;}

.home-shortcuts {grid-template-columns: repeat(2,minmax(0,1fr)) !important;}
}

@media (max-width: 600px) {
.wrap {padding-left: 14px; padding-right: 14px;}

.home-hero::before {background-position: 68% center;}

.home-hero-shade {background:
            linear-gradient(180deg, rgba(3,14,27,.42) 0%, rgba(3,14,27,.70) 27%, rgba(3,14,27,.94) 59%, #06111f 100%) !important;}

.home-hero-copy {padding-top: 165px !important;
        padding-bottom: 30px !important;}

.home-kicker {margin-bottom: 16px;
        font-size: .64rem;}

.home-hero h1 {display: block !important;
        margin: 0 !important;
        color: #fff !important;
        font-size: clamp(2.55rem, 12vw, 3.35rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -.05em !important;
        visibility: visible !important;
        opacity: 1 !important;}

.home-hero-text {margin-top: 20px;
        font-size: .96rem;
        line-height: 1.55;}

.home-hero-actions {margin-top: 26px;
        gap: 11px;}

.home-btn {min-height: 54px;
        width: 100%;}

.home-hero-edit {top: 112px;
        right: 18px;
        transform: scale(.85);
        transform-origin: top right;}

.home-shortcuts {grid-template-columns: 1fr !important;
        gap: 10px !important;}

.home-shortcut {min-height: 145px !important;
        padding: 18px !important;}
}

/* =========================================================
   MOBILE NAVBAR FIX — compact menu + profile dropdown in flow
   2026-08-29
   ========================================================= */

@media (max-width: 900px) {
/* Rechterdeel wordt: acties op één rij + profiel eronder. */

/* Profiel komt op een eigen volle rij zodat niets rechts uit beeld schuift. */

/* Login-versie eveneens netjes onder de acties. */

/* Dropdown van Ontdek blijft gewoon in de menuflow. */
}

/* =========================================================
   MOBILE HOME COMPACT FIX — hero + shortcut cards
   2026-08-29
   Keeps desktop/tablet untouched.
   ========================================================= */

@media (max-width: 600px) {
/* Keep the photographic part of the hero compact. The section can
       continue below it, but the large photo no longer stretches behind
       every shortcut card. */

.home-hero {min-height: 0 !important;
        padding: 0 0 18px !important;
        background: #06111f !important;
        overflow: visible !important;}

.home-hero::before {top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        height: 660px !important;
        background-size: cover !important;
        background-position: 67% center !important;}

.home-hero::after {top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        height: 665px !important;
        background: linear-gradient(180deg, rgba(3,14,27,.10) 0%, rgba(3,14,27,.20) 45%, #06111f 100%) !important;}

.home-hero-shade {top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        height: 665px !important;
        background: linear-gradient(180deg, rgba(3,14,27,.30) 0%, rgba(3,14,27,.48) 43%, rgba(3,14,27,.82) 76%, #06111f 100%) !important;}

.home-hero-inner {min-height: 0 !important;}

.home-hero-copy {width: 100% !important;
        max-width: none !important;
        padding-top: 150px !important;
        padding-bottom: 28px !important;}

.home-kicker {margin-bottom: 14px !important;
        font-size: .60rem !important;
        letter-spacing: .11em !important;}

.home-kicker::after {width: 34px !important;}

.home-hero h1 {max-width: 560px !important;
        font-size: clamp(2.35rem, 10.7vw, 3.05rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -.045em !important;}

.home-hero-text {max-width: 560px !important;
        margin-top: 16px !important;
        font-size: .88rem !important;
        line-height: 1.48 !important;}

.home-hero-actions {margin-top: 21px !important;
        gap: 9px !important;}

.home-btn {min-height: 48px !important;
        padding: 0 18px !important;
        font-size: .91rem !important;}

.home-btn svg {width: 18px !important;
        height: 18px !important;}

.home-hero-edit {top: 104px !important;
        right: 16px !important;
        width: 42px !important;
        height: 42px !important;
        transform: none !important;
        font-size: 1rem !important;}

/* Shortcuts are normal content below the compact hero instead of
       oversized tiles floating through the background image. */

.home-shortcuts-wrap {position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        z-index: 5 !important;
        width: 100% !important;
        padding-top: 4px !important;}

.home-shortcuts {display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;}

.home-shortcut {display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) 34px !important;
        grid-template-rows: auto auto !important;
        column-gap: 13px !important;
        row-gap: 3px !important;
        align-items: center !important;
        min-height: 96px !important;
        padding: 13px 13px !important;
        border-radius: 16px !important;}

.home-shortcut-icon {grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        width: 46px !important;
        height: 46px !important;
        margin: 0 !important;
        border-radius: 13px !important;}

.home-shortcut-icon svg {width: 23px !important;
        height: 23px !important;}

.home-shortcut h2 {grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: end !important;
        margin: 0 !important;
        font-size: .99rem !important;
        line-height: 1.2 !important;}

.home-shortcut p {grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: start !important;
        max-width: none !important;
        margin: 0 !important;
        font-size: .76rem !important;
        line-height: 1.35 !important;}

.home-shortcut-arrow {position: static !important;
        grid-column: 3 !important;
        grid-row: 1 / 3 !important;
        width: 32px !important;
        height: 32px !important;
        justify-self: end !important;
        font-size: 1rem !important;}

/* Reduce the jump from the shortcuts to the feed below. */

.home-dashboard {padding-top: 28px !important;}
}

@media (max-width: 380px) {
.home-hero::before, .home-hero::after, .home-hero-shade {height: 620px !important;}

.home-hero-copy {padding-top: 142px !important;}

.home-hero h1 {font-size: 2.25rem !important;}

.home-shortcut {grid-template-columns: 42px minmax(0,1fr) 30px !important;
        column-gap: 10px !important;
        min-height: 92px !important;
        padding: 12px !important;}

.home-shortcut-icon {width: 42px !important;
        height: 42px !important;}
}

/* =========================================================
   MOBILE PROFILE DROPDOWN VISIBILITY FIX — 2026-08-29
   ========================================================= */

@media (max-width: 900px) {
/* Het mobiele menu moet zelf kunnen meegroeien/scrollen wanneer het
       profielmenu openklapt. */

/* Zeer expliciet: wanneer de profielgroep open is moet de dropdown
       onderdeel van de normale document-flow zijn, niet absoluut/verborgen. */
}

/* Virtueel dorp — integration tweak */

@media (min-width:1181px) {
.home-shortcuts .home-shortcut {padding:20px;}

.home-shortcuts .home-shortcut h2 {font-size:1rem;}

.home-shortcuts .home-shortcut p {font-size:.79rem;}
}

/* =========================================================
   DESKTOP HOME POLISH — reference layout "foto 1"
   2026-08-29
   Desktop only: compact one-row header, shorter hero, wider content,
   six compact shortcut cards and a balanced 3-column dashboard.
   Mobile/tablet rules below 1180px remain untouched.
   ========================================================= */

@media (min-width: 1181px) {
/* Header: logo, navigation and account controls on one clean row. */

/* Hero: photo remains prominent without swallowing the full viewport. */

.home-hero {min-height: 700px;}

.home-hero::before {background-position: center 57%;}

.home-hero::after {background: linear-gradient(0deg, #06111f 0%, rgba(6,17,31,.36) 16%, rgba(6,17,31,.02) 43%);}

.home-hero-shade {background:
            linear-gradient(90deg, rgba(3,14,27,.98) 0%, rgba(3,14,27,.92) 24%, rgba(3,14,27,.57) 46%, rgba(3,14,27,.10) 75%, rgba(3,14,27,.20) 100%),
            linear-gradient(180deg, rgba(3,14,27,.10), rgba(3,14,27,.02) 55%, rgba(3,14,27,.37));}

.home-hero-copy {width: min(650px, 48vw);
        padding-top: 150px;
        padding-bottom: 245px;}

.home-kicker {margin-bottom: 15px;
        font-size: .69rem;}

.home-kicker::after {width: 54px;}

.home-hero h1 {max-width: 650px;
        font-size: clamp(3.25rem, 4vw, 4.65rem);
        line-height: 1.01;}

.home-hero-text {max-width: 570px;
        margin-top: 18px;
        font-size: .98rem;
        line-height: 1.58;}

.home-hero-actions {margin-top: 24px;
        gap: 12px;}

.home-btn {min-height: 50px;
        padding: 0 23px;
        font-size: .88rem;}

.home-hero-edit {top: 92px;
        right: 30px;}

/* Six shortcut cards in one row, compact like the reference. */

.home-shortcuts-wrap {bottom: 22px;}

.home-shortcuts {grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px;}

.home-shortcuts .home-shortcut {min-height: 165px;
        padding: 18px 17px;
        border-radius: 17px;}

.home-shortcut-icon {width: 42px;
        height: 42px;
        margin-bottom: 13px;
        border-radius: 12px;}

.home-shortcut-icon svg {width: 22px;
        height: 22px;}

.home-shortcut h2 {margin-bottom: 6px;
        font-size: .98rem;}

.home-shortcut p {max-width: 190px;
        font-size: .76rem;
        line-height: 1.45;}

.home-shortcut-arrow {right: 13px;
        bottom: 12px;
        width: 30px;
        height: 30px;}

/* Dashboard immediately follows the hero and uses the available width. */

.home-dashboard {padding: 22px 0 42px;}

.home-dashboard-grid {grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.18fr) minmax(300px, .86fr);
        gap: 14px;}

.home-panel {border-radius: 16px;}

.home-panel-head {min-height: 56px;
        padding: 12px 15px;}

.home-panel-head h2 {font-size: .94rem;}

.home-feed-list {padding: 0 15px;}

.home-feed-item {min-height: 92px;
        gap: 12px;
        padding: 11px 0;}

.home-feed-thumb {width: 70px;
        height: 62px;
        flex-basis: 70px;}

.home-feed-title-row h3 {font-size: .86rem;}

.home-feed-copy p, .home-feed-meta {font-size: .72rem;}

.home-panel-footer-link {margin: 10px 15px 14px;
        min-height: 38px;
        font-size: .75rem;}

.home-event-item {min-height: 88px;
        padding: 11px 15px;}

.home-event-date {width: 58px;
        min-width: 58px;
        height: 62px;
        border-radius: 12px;}

.home-event-date strong {font-size: 1.35rem;}

.home-event-copy strong {font-size: .84rem;}

.home-event-copy small {font-size: .70rem;}

/* Keep the wall aligned with the wider desktop home. */
}

/* On very wide screens, prevent the hero text from growing too far away
   from the visual focal point. */

@media (min-width: 1700px) {
.home-hero-copy {padding-top: 158px;}
}

/* =========================================================
   DEFINITIEVE DESKTOP HERO — volledige foto, geen harde crop
   2026-08-29
   Alleen desktop. Mobiele hero-regels blijven ongemoeid.
   ========================================================= */

@media (min-width: 901px) {
.home-hero {min-height: 760px !important;
        background: #06111f !important;}

/* Toon de volledige breedte van de ingestelde hero-afbeelding.
       Geen scale/cover meer: daardoor verdwijnt de agressieve crop. */

.home-hero::before {inset: 0 !important;
        transform: none !important;
        background-image: var(--home-hero-image) !important;
        background-repeat: no-repeat !important;
        background-size: 100% auto !important;
        background-position: center top !important;
        background-color: #06111f !important;}

/* Zachtere overlay links; geen harde donkere verticale vlek. */

.home-hero-shade {background:
            linear-gradient(90deg,
                rgba(3,14,27,.91) 0%,
                rgba(3,14,27,.76) 24%,
                rgba(3,14,27,.38) 47%,
                rgba(3,14,27,.10) 68%,
                rgba(3,14,27,.08) 100%),
            linear-gradient(180deg,
                rgba(3,14,27,.08) 0%,
                rgba(3,14,27,.02) 48%,
                rgba(6,17,31,.72) 78%,
                #06111f 100%) !important;}

.home-hero::after {background: linear-gradient(0deg,
            #06111f 0%,
            rgba(6,17,31,.68) 10%,
            rgba(6,17,31,.16) 28%,
            transparent 47%) !important;}

.home-hero-copy {width: min(650px, 48vw) !important;
        padding-top: 190px !important;
        padding-bottom: 300px !important;}

.home-hero h1 {max-width: 650px !important;
        font-size: clamp(3.15rem, 4.25vw, 4.9rem) !important;
        line-height: 1.01 !important;}

.home-hero-text {max-width: 570px !important;}

.home-shortcuts-wrap {bottom: 24px !important;}

.home-shortcut {min-height: 188px !important;
        padding: 20px !important;}

.home-shortcut-icon {width: 44px !important;
        height: 44px !important;
        margin-bottom: 16px !important;}

.home-shortcut-icon svg {width: 23px !important;
        height: 23px !important;}
}

/* Op erg brede schermen voorkomen dat de foto onnatuurlijk uitrekt. */

@media (min-width: 1700px) {
.home-hero::before {background-size: cover !important;
        background-position: center 48% !important;}
}

/* 2026-08-29: home hero shortcut cards intentionally removed */

.home-shortcuts-wrap, .home-shortcuts, .home-shortcut {display: none !important;}

/* 2026-08-29 — definitieve brede hero-afbeelding */

@media (min-width: 901px) {
.home-hero {min-height: 650px !important;
    background: #06111f !important;}

.home-hero::before {background-image: url("/images/hero-wide.jpg") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
    inset: 0 !important;}

.home-hero-copy {padding-top: 145px !important;
    padding-bottom: 165px !important;}

.home-hero-shade {background: linear-gradient(90deg, rgba(3,14,27,.90) 0%, rgba(3,14,27,.70) 28%, rgba(3,14,27,.26) 52%, rgba(3,14,27,.05) 75%) !important;}

.home-hero::after {background: linear-gradient(0deg, #06111f 0%, rgba(6,17,31,.48) 8%, transparent 30%) !important;}
}

/* =========================================================
   2026-08-29 — HERO: echte door gebruiker aangeleverde foto
   De bronfoto is 1536×512 (3:1). Desktop volgt daarom dezelfde
   verhouding zodat de foto niet meer wordt ingezoomd/gecropt.
   ========================================================= */

html, body {max-width: 100%;
    overflow-x: hidden;}

@media (min-width: 901px) {
.home-hero {width: 100% !important;
        min-height: 0 !important;
        height: clamp(360px, 33.333vw, 512px) !important;
        overflow: hidden !important;
        background: #06111f !important;}

.home-hero::before {inset: 0 !important;
        background-image: url("/images/hero-wide.jpg") !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center center !important;
        transform: none !important;
        filter: none !important;}

/* De foto is links al donker. Alleen een zachte leesbaarheidslaag. */

.home-hero-shade {background: linear-gradient(
            90deg,
            rgba(3, 14, 27, .48) 0%,
            rgba(3, 14, 27, .25) 29%,
            rgba(3, 14, 27, .08) 49%,
            rgba(3, 14, 27, 0) 72%
        ) !important;}

.home-hero::after {background: linear-gradient(
            0deg,
            rgba(6, 17, 31, .68) 0%,
            rgba(6, 17, 31, .18) 11%,
            transparent 27%
        ) !important;}

.home-hero-inner {height: 100% !important;
        display: flex !important;
        align-items: center !important;}

.home-hero-copy {padding-top: 46px !important;
        padding-bottom: 24px !important;
        max-width: 610px !important;}
}

/* Op mobiel blijft de foto bruikbaar als echte fotografische achtergrond,
   zonder blur of kunstmatige uitrekking. */

@media (max-width: 900px) {
.home-hero::before {background-image: url("/images/hero-wide.jpg") !important;
        background-size: cover !important;
        background-position: 68% center !important;
        background-repeat: no-repeat !important;
        filter: none !important;
        transform: none !important;}
}

/* =========================================================
   2026-08-29 FINAL HERO CACHE + WIDE FIX
   - uses Blade-provided cache-busted --home-hero-image
   - never references the old hero-wide.jpg
   - desktop keeps the user's 3:1 composition intact
   ========================================================= */

@media (min-width: 901px) {
.home-hero {position: relative !important;
        width: 100% !important;
        height: clamp(430px, 33.333vw, 620px) !important;
        min-height: 430px !important;
        max-height: 620px !important;
        overflow: hidden !important;
        background: #06111f !important;}

.home-hero::before {content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background-image: var(--home-hero-image) !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
        background-position: center center !important;
        filter: none !important;
        transform: none !important;}

.home-hero-shade {background: linear-gradient(
            90deg,
            rgba(3,14,27,.62) 0%,
            rgba(3,14,27,.36) 27%,
            rgba(3,14,27,.10) 48%,
            rgba(3,14,27,0) 70%
        ) !important;}

.home-hero::after {background: linear-gradient(
            0deg,
            rgba(6,17,31,.38) 0%,
            rgba(6,17,31,.08) 13%,
            transparent 26%
        ) !important;}

.home-hero-inner {height: 100% !important;
        display: flex !important;
        align-items: center !important;}

.home-hero-copy {width: min(620px, 43vw) !important;
        max-width: 620px !important;
        padding: 34px 0 18px !important;}
}

@media (max-width: 900px) {
.home-hero {min-height: 410px !important;
        height: auto !important;}

.home-hero::before {background-image: var(--home-hero-image) !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: 73% center !important;
        filter: none !important;
        transform: none !important;}
}

/* =========================================================
   OOSTAKKER HERO — FINAL AUTHORITATIVE OVERRIDE
   Latest user-supplied photo: 1536x714.
   This block intentionally comes LAST.
   ========================================================= */

.home-hero {position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    background: #06111f !important;}

.home-hero::before {content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: var(--home-hero-image) !important;
    background-repeat: no-repeat !important;
    filter: none !important;
    transform: none !important;}

.home-hero-shade {position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg,
        rgba(2,12,25,.22) 0%,
        rgba(2,12,25,.12) 30%,
        rgba(2,12,25,.02) 52%,
        rgba(2,12,25,0) 72%) !important;}

.home-hero::after {content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 110px !important;
    pointer-events: none !important;
    background: linear-gradient(to bottom, transparent, rgba(6,17,31,.55)) !important;}

.home-hero-inner, .home-hero-edit {position: relative !important;
    z-index: 2 !important;}

@media (min-width: 901px) {
.home-hero {height: clamp(500px, 40vw, 680px) !important;
        min-height: 500px !important;
        max-height: 680px !important;}

.home-hero::before {background-size: cover !important;
        background-position: center 50% !important;}

.home-hero-inner {height: 100% !important;
        display: flex !important;
        align-items: center !important;}

.home-hero-copy {width: min(610px, 42vw) !important;
        max-width: 610px !important;
        padding: 20px 0 !important;}
}

@media (max-width: 900px) {
.home-hero {height: 430px !important;
        min-height: 430px !important;}

.home-hero::before {background-size: cover !important;
        background-position: 76% center !important;}

.home-hero-shade {background: linear-gradient(90deg,
            rgba(2,12,25,.68) 0%,
            rgba(2,12,25,.40) 52%,
            rgba(2,12,25,.10) 100%) !important;}

.home-hero::after {height: 85px !important;}
}