/* ── LETTERTYPEN ──
   Zelf gehost in plaats van via fonts.googleapis.com. Reden: een @import
   bovenaan dit bestand maakte een keten van vier verzoeken achter elkaar —
   pagina, dan deze CSS, dan de CSS van Google, dan pas de lettertypen. Dat
   kostte ongeveer 390 ms voordat er iets te zien was. Nu staan de bestanden
   op onze eigen server en laden ze meteen mee.
   Alleen de latijnse subset: meer heeft Nederlands niet nodig. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
    --blue: #2C3D2E;
    --blue-dark: #1F2C20;
    --blue-light: #3E5340;
    --sand: #F7F3EE;
    --sand-dark: #EDE7DD;
    --accent: #B08D57;
    --accent-hover: #9A7A48;
    --text: #2C2C2C;
    --text-light: #5A5A5A;
    --white: #FFFFFF;
    --shadow: 0 2px 12px rgba(26, 94, 138, 0.08);
    --shadow-lg: 0 8px 32px rgba(26, 94, 138, 0.12);
    --radius: 200px;
    --radius-lg: 4px;
    --hairline: #E3DCD0;
    --transition: 0.25s ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: var(--text);
    background: var(--sand);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    font-family: 'Jost', 'Century Gothic', 'Futura', sans-serif;
    color: var(--blue);
    line-height: 1.2;
    letter-spacing: 0.01em;
}

h1 {
    font-size: 2.4rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

h2 {
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

h3 {
    font-size: 1.35rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

p {
    margin-bottom: 1rem;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--accent);
}

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

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}


/* ── NAV ── */

.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    box-shadow: var(--shadow);
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.nav__logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Jost', 'Century Gothic', 'Futura', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--blue);
    white-space: nowrap;
}

.nav__logo:hover {
    color: var(--blue);
}

.nav__logo img {
    height: 48px;
    width: auto;
}

.nav__links {
    display: flex;
    list-style: none;
    gap: 0.15rem;
    align-items: center;
}

.nav__links>li {
    position: relative;
}

.nav__links a,
.nav__links .nav__parent-label {
    display: block;
    padding: 0.5rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
    border-radius: var(--radius);
    transition: background var(--transition), color var(--transition);
    cursor: pointer;
    white-space: nowrap;
}

.nav__links a:hover,
.nav__links a.active,
.nav__links .nav__parent-label:hover {
    background: var(--sand);
    color: var(--blue);
}

.nav__parent-label::after {
    content: ' \25BE';
    font-size: 0.75em;
    opacity: 0.6;
}


/* Dropdown */

.nav__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius);
    padding: 0.4rem 0;
    min-width: 200px;
    list-style: none;
    z-index: 200;
}

.nav__links>li:hover>.nav__dropdown {
    display: block;
}

.nav__dropdown a {
    padding: 0.5rem 1rem;
    border-radius: 0;
    font-size: 0.88rem;
}

.nav__dropdown a:hover {
    background: var(--sand);
}


/* Hamburger */

.nav__hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.nav__hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--blue);
    transition: transform var(--transition), opacity var(--transition);
}

.nav__hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav__hamburger.open span:nth-child(2) {
    opacity: 0;
}

.nav__hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* Het bureaubladmenu heeft ongeveer 935px nodig; daaronder wordt het het
   uitklapmenu. Bij 900px paste het net niet en schoof de pagina horizontaal. */

@media (max-width: 1000px) {
    .nav__hamburger {
        display: flex;
    }
    .nav__links {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--white);
        box-shadow: var(--shadow-lg);
        padding: 0.25rem 1.5rem 0.75rem;
        gap: 0;
    }
    .nav__links.open {
        display: flex;
    }
    .nav__links>li {
        width: 100%;
    }
    /* Eén vlakke lijst: geen uitklapkoppen, geen niveaus. Alles staat er
     meteen, links uitgelijnd, zodat er niets te zoeken valt.
     De selector moet even specifiek zijn als die van de basisopmaak,
     anders wint daar het 'display: block'. */
    .nav__links .nav__parent-label {
        display: none;
    }
    .nav__dropdown {
        display: block;
        position: static;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        min-width: 0;
    }
    .nav__links a,
    .nav__dropdown a {
        display: block;
        padding: 0.9rem 0;
        font-size: 0.95rem;
        letter-spacing: 0.06em;
        text-align: left;
        border-radius: 0;
        border-bottom: 1px solid var(--hairline);
    }
    /* Laatste regel zonder streep eronder. */
    .nav__links>li:last-child a {
        border-bottom: none;
    }
    .nav__links a:hover,
    .nav__links a.active {
        background: transparent;
        color: var(--accent);
    }
}


/* ── HERO ── */

.hero {
    background: linear-gradient(90deg, rgba(31, 44, 32, 0.95) 0%, rgba(31, 44, 32, 0.85) 40%, rgba(31, 44, 32, 0.15) 100%), url("../center3.jpg") center / cover no-repeat;
    color: var(--white);
    padding: 6.5rem 0;
    text-align: left;
}

/* Dezelfde herofoto als WebP: 47% kleiner dan de JPEG, en dit is de grootste
   afbeelding van de site. Browsers die WebP niet kennen negeren dit blok en
   houden de JPEG hierboven. */

@supports (background-image: image-set(url("../center3.webp") type("image/webp"))) {
    .hero {
        background: linear-gradient(90deg, rgba(31, 44, 32, 0.95) 0%, rgba(31, 44, 32, 0.85) 40%, rgba(31, 44, 32, 0.15) 100%), image-set(url("../center3.webp") type("image/webp"), url("../center3.jpg") type("image/jpeg")) center / cover no-repeat;
    }
}


.hero .container::before {
    content: 'Familiebedrijf \00B7 Den Dolder';
    display: block;
    font-family: 'Jost', 'Century Gothic', 'Futura', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1.5rem;
}

.hero h1 {
    color: var(--white);
    font-size: 3.1rem;
    font-weight: 400;
    max-width: 640px;
    margin: 0 0 1.5rem;
}

.hero p {
    font-size: 1.1rem;
    opacity: 0.88;
    max-width: 540px;
    margin: 0 0 2.5rem;
    line-height: 1.9;
}

@media (max-width: 700px) {
    .hero {
        padding: 4.5rem 0;
    }
    .hero h1 {
        font-size: 2.2rem;
    }
}


/* ── BUTTONS ── */

.btn {
    display: inline-block;
    padding: 0.95rem 2.5rem;
    font-size: 0.82rem;
    font-weight: 500;
    font-family: 'Jost', 'Century Gothic', 'Futura', sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), transform var(--transition);
}

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

.btn--accent {
    background: var(--accent);
    color: #1F2C20;
}

.btn--accent:hover {
    background: var(--accent-hover);
    color: var(--white);
}

.btn--outline {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}

.btn--outline:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
}

.btn--blue {
    background: var(--blue);
    color: var(--white);
}

.btn--blue:hover {
    background: var(--blue-dark);
    color: var(--white);
}


/* ── SECTIONS ── */

.section {
    padding: 4rem 0;
}

.section--white {
    background: var(--white);
}

.section--sand {
    background: var(--sand);
}

.section--blue {
    background: var(--blue);
    color: var(--white);
}

.section--blue h2,
.section--blue h3 {
    color: var(--white);
}

.section__header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 3rem;
}

.section__header h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 1px;
    background: var(--accent);
    margin: 1.1rem auto 0;
}

.section__header p {
    color: var(--text-light);
    font-size: 1.05rem;
}


/* ── VOORDELEN GRID ── */

.voordelen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

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

.voordeel {
    background: transparent;
    border-top: 1px solid var(--hairline);
    padding: 2rem 0 0;
    text-align: left;
    transition: border-color var(--transition);
}

.voordeel:hover {
    border-top-color: var(--accent);
}

.voordeel__icon {
    width: 52px;
    height: 52px;
    margin: 0 0 1.25rem;
    border-radius: 50%;
    border: 1px solid var(--accent);
    color: var(--accent);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}


/* ── DOELGROEPEN ── */

.doelgroepen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

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

.doelgroep {
    background: transparent;
    border: 1px solid var(--hairline);
    border-left: 2px solid var(--accent);
    padding: 1.75rem 2rem;
}


/* ── REVIEWS (doorloopbare carrousel) ── */

.reviews {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
}

.reviews::-webkit-scrollbar {
    display: none;
}

.reviews .review {
    flex: 0 0 calc((100% - 3rem) / 3);
    scroll-snap-align: start;
}

@media (max-width: 900px) {
    .reviews .review {
        flex-basis: calc((100% - 1.5rem) / 2);
    }
}

@media (max-width: 600px) {
    .reviews .review {
        flex-basis: 100%;
    }
}

.reviews-gemiddelde {
    text-align: center;
    margin-bottom: 2.5rem;
}

.reviews-gemiddelde__stars {
    color: var(--accent);
    font-size: 1.9rem;
    letter-spacing: 6px;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.reviews-gemiddelde p {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 0;
}

.reviews-nav {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.reviews-nav button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.reviews-nav button:hover {
    background: var(--accent);
    color: var(--white);
}

.review {
    background: var(--white);
    border: 1px solid var(--hairline);
    padding: 2rem;
    position: relative;
}

.review::before {
    content: '\201C';
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 4rem;
    color: var(--accent);
    opacity: 0.25;
    position: absolute;
    top: 0.25rem;
    left: 1rem;
    line-height: 1;
}

.review p {
    position: relative;
    z-index: 1;
    font-style: italic;
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review--klik {
    cursor: pointer;
}

.review__meer {
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.75rem;
}

.review-lightbox__panel {
    background: var(--white);
    max-width: 620px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 2.5rem;
}

.review-lightbox__panel .review__stars {
    color: var(--accent);
    letter-spacing: 3px;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.review-lightbox__panel p {
    font-style: italic;
    color: var(--text-light);
    line-height: 1.8;
}

.review-lightbox__panel .review__naam {
    font-weight: 500;
    color: var(--blue);
    margin-top: 1rem;
}

.review-lightbox__panel .review__titel {
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.review__stars {
    color: var(--accent);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.review__titel {
    position: relative;
    z-index: 1;
    font-weight: 600;
    font-style: normal;
    color: var(--blue);
    font-size: 1rem;
    margin-bottom: 0.4rem;
}

.review__naam {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--blue);
    margin-top: 0.75rem;
}


/* ── STAPPEN ── */

.stappen {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    counter-reset: stap;
}

@media (max-width: 800px) {
    .stappen {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.stap {
    text-align: center;
    counter-increment: stap;
}

.stap__nummer {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: 'Jost', 'Century Gothic', 'Futura', sans-serif;
    font-size: 1.35rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}


/* ── FAQ ACCORDION ── */

.faq-list {
    max-width: 760px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--sand-dark);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 1.25rem 2.5rem 1.25rem 0;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: color var(--transition);
}

.faq-question:hover {
    color: var(--blue);
}

.faq-question::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--accent);
    transition: transform var(--transition);
}

.faq-item.open .faq-question::after {
    content: '\2212';
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
}

.faq-item.open .faq-answer {
    /* Ruim boven wat zelfs een langere lijst met meerdere punten nodig
       heeft — een vaste cap die te krap is knipt de tekst gewoon af. */
    max-height: 2000px;
    padding-bottom: 1.25rem;
}

.faq-answer p {
    color: var(--text-light);
    margin-bottom: 0;
}


/* ── CONTENT BLOCKS ── */

.content-block {
    max-width: 760px;
    margin: 0 auto;
}

.content-block h2 {
    margin-top: 2.5rem;
}

.content-block ul {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.content-block li {
    color: var(--text-light);
}

/*
 * De strakkere regelafstand hoort alleen bij de vinklijst. Die heeft eigen
 * binnenruimte van 0,6rem boven en onder, en daar haalt -1rem de lucht uit.
 * Een gewone opsomming heeft die ruimte niet: daar trekt dezelfde regel de
 * tekstregels een volle regelhoogte over elkaar heen — 15px overlap, gemeten
 * op Over ons.
 */
.content-block .feature-list li {
    margin-bottom: -1rem;
}


/* ── IMAGE PLACEHOLDERS ── */

.photo-placeholder {
    background: var(--sand-dark);
    border: 2px dashed #C5BFB5;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9E9789;
    font-size: 0.9rem;
    font-style: italic;
    text-align: center;
    padding: 2rem;
    min-height: 220px;
}


/* ── FOTO BIJ EEN BLOK ──
 *
 * Eén foto per blok, links of rechts, verticaal in het midden. De foto is het
 * eerste kind van het blok; de opmaak maakt daar twee kolommen van waarbij de
 * foto over alle regels heen staat. Zo is er geen omhulsel nodig en blijft de
 * volgorde in de HTML gewoon leesbaar.
 */
.blokfoto {
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
}
.blokfoto img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}
/*
 * De maat zit in de breedte van de kolom, niet in een maat op de foto zelf.
 *
 * Ik heb het eerst met container-query-eenheden geprobeerd (cqw). Dat vroeg om
 * container-type: inline-size op het blok, en dat betekent: bepaal de breedte
 * van dit blok zonder naar de inhoud te kijken. In een kolom die zich juist
 * naar zijn inhoud voegt bleef daar 36 pixels van over, en werden alle foto's
 * negen pixels breed. Vandaar deze vaste ladder van kolombreedtes.
 */
.blokfoto { width: 100%; }

.content-block:has(> .blokfoto) {
    display: grid;
    grid-template-columns: 40% 1fr;
    column-gap: 2.25rem;
    align-items: start;
}
.content-block:has(> .blokfoto--rechts) { grid-template-columns: 1fr 40%; }

.content-block:has(> .blokfoto--m12) { grid-template-columns: 12% 1fr; }
.content-block:has(> .blokfoto--m15) { grid-template-columns: 15% 1fr; }
.content-block:has(> .blokfoto--m20) { grid-template-columns: 20% 1fr; }
.content-block:has(> .blokfoto--m25) { grid-template-columns: 25% 1fr; }
.content-block:has(> .blokfoto--m30) { grid-template-columns: 30% 1fr; }
.content-block:has(> .blokfoto--m35) { grid-template-columns: 35% 1fr; }
.content-block:has(> .blokfoto--m40) { grid-template-columns: 40% 1fr; }
.content-block:has(> .blokfoto--m45) { grid-template-columns: 45% 1fr; }
.content-block:has(> .blokfoto--m50) { grid-template-columns: 50% 1fr; }
.content-block:has(> .blokfoto--m55) { grid-template-columns: 55% 1fr; }

.content-block:has(> .blokfoto--m12.blokfoto--rechts) { grid-template-columns: 1fr 12%; }
.content-block:has(> .blokfoto--m15.blokfoto--rechts) { grid-template-columns: 1fr 15%; }
.content-block:has(> .blokfoto--m20.blokfoto--rechts) { grid-template-columns: 1fr 20%; }
.content-block:has(> .blokfoto--m25.blokfoto--rechts) { grid-template-columns: 1fr 25%; }
.content-block:has(> .blokfoto--m30.blokfoto--rechts) { grid-template-columns: 1fr 30%; }
.content-block:has(> .blokfoto--m35.blokfoto--rechts) { grid-template-columns: 1fr 35%; }
.content-block:has(> .blokfoto--m40.blokfoto--rechts) { grid-template-columns: 1fr 40%; }
.content-block:has(> .blokfoto--m45.blokfoto--rechts) { grid-template-columns: 1fr 45%; }
.content-block:has(> .blokfoto--m50.blokfoto--rechts) { grid-template-columns: 1fr 50%; }
.content-block:has(> .blokfoto--m55.blokfoto--rechts) { grid-template-columns: 1fr 55%; }

.content-block > .blokfoto {
    /* span 100 en niet 1 / -1: dat laatste spant alleen over rijen die vooraf
       zijn vastgelegd, en die zijn er hier niet — de rijen ontstaan vanzelf
       uit de alinea's. De foto bleef daardoor in de eerste rij hangen. */
    grid-row: 1 / span 100;
    grid-column: 1;
    align-self: center;
}

/* Verticaal uitlijnen tegenover de hele tekst van het blok. */
.content-block > .blokfoto--boven  { align-self: start; }
.content-block > .blokfoto--midden { align-self: center; }
.content-block > .blokfoto--onder  { align-self: end; }
.content-block > .blokfoto--rechts { grid-column: 2; }
.content-block:has(> .blokfoto) > *:not(.blokfoto) { grid-column: 2; }
.content-block:has(> .blokfoto--rechts) > *:not(.blokfoto) { grid-column: 1; }

/* De marge boven de eerste en onder de laatste regel telt mee in de hoogte
   van het raster. De foto staat dan wel netjes in het midden van dat raster,
   maar oogt scheef tegenover de tekst. Vandaar deze twee op nul. */
.content-block:has(> .blokfoto) > *:not(.blokfoto):first-of-type { margin-top: 0; }
.content-block:has(> .blokfoto) > *:not(.blokfoto):last-child { margin-bottom: 0; }

@media (max-width: 700px) {
    /* Naast elkaar past niet op een telefoon: onder elkaar, foto bovenaan.
       De ingestelde breedte vervalt daar; een foto van 12% is op een scherm
       van 375 pixels nog geen vijftig pixels breed. */
    .content-block:has(> .blokfoto),
    .content-block:has(> .blokfoto--rechts) {
        display: block;
    }
    .content-block > .blokfoto {
        width: 100% !important;
        margin: 0 0 1.25rem;
    }
}


/*
 * Foto naast een tekstvak, als twee kolommen met de foto verticaal in het
 * midden. Anders dan een zwevende foto, waar de tekst omheen loopt en die
 * bovenaan begint.
 *
 * De !important is hier nodig en niet gemakzucht: de breedte en de kant staan
 * als inline stijl op de foto zelf, en inline wint van een gewone regel. In
 * deze opmaak mag hij juist niet zweven.
 */
.cms-naast {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 1.5rem 0;
}
.cms-naast--rechts { flex-direction: row-reverse; }
.cms-naast > .cms-dynamic-img {
    float: none !important;
    margin: 0 !important;
    flex: 0 0 auto;
}
.cms-naast > *:not(.cms-dynamic-img) {
    flex: 1 1 auto;
    min-width: 0;
    /* Zonder dit staat de tekst niet echt in het midden: koppen dragen hun
       eigen marge boven en onder mee, en die telt mee bij het uitlijnen. Het
       omhulsel zorgt hier voor de ruimte. */
    margin-top: 0;
    margin-bottom: 0;
}
@media (max-width: 700px) {
    /* Naast elkaar past niet op een telefoon; dan onder elkaar, foto eerst. */
    .cms-naast,
    .cms-naast--rechts {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .cms-naast > .cms-dynamic-img { width: 100% !important; }
}


/*
 * Een fotovak dat gevuld is. Het gestippelde kader van de plaatshouder is dan
 * weg; wat overblijft is de foto zelf. Die had nergens een afronding en bleef
 * daardoor vierkant, terwijl alles eromheen ronde hoeken heeft.
 */
.photo-loaded {
    border-radius: 8px;
    overflow: hidden;
}
.photo-loaded img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}


/* ── TWO-COL LAYOUT ── */

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

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

/* Op contact staat de zijkolom (Direct bellen/mailen, maten, foto's) naast
   een veel langer formulier. Verticaal centreren laat hem dan halverwege
   zweven; deze pagina wil hem bovenaan, gelijk met het begin van het
   formulier. */
.two-col--top {
    align-items: start;
}

/*
 * Is het fotovak in het CMS leeg gelaten, dan haalt js/main.js het weg — een
 * gestippeld kader met "Eigen foto: ..." hoort de bezoeker niet te zien. Maar
 * het raster hield zijn tweede kolom, waardoor de halve sectie leeg bleef en
 * alle tekst in de linkerhelft geperst stond.
 * Blijft er één kind over, dan is het voortaan ook één kolom.
 */
.two-col:has(> :only-child) {
    grid-template-columns: 1fr;
}


/* ── CONTACT FORM ── */

.form {
    max-width: 600px;
    margin: 0 auto;
}

.form__group {
    margin-bottom: 1.25rem;
}

.form__label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
}

.form__input,
.form__textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 1rem;
    border: 1px solid #D4CFC7;
    border-radius: var(--radius);
    background: var(--white);
    transition: border-color var(--transition), box-shadow var(--transition);
    /* Zonder dit legt iOS zijn eigen afgeronde hoeken en binnenschaduw over de
     velden heen, wat afwijkt van de rest van het ontwerp. */
    -webkit-appearance: none;
    appearance: none;
}

.form__input:focus,
.form__textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.15);
}

.form__textarea {
    resize: vertical;
    min-height: 120px;
}

.form-message {
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    scroll-margin-top: 96px;
}

.form-message--success {
    background: #E8F5E9;
    border: 1px solid #A5D6A7;
    color: #2E7D32;
}

.form-message--error {
    background: #FFF3E0;
    border: 1px solid #FFCC80;
    color: #E65100;
}

.form__note {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 1rem;
}


/* ── STAR INPUT ── */

.star-input {
    display: flex;
    gap: 0.25rem;
}

.star-input__star {
    font-size: 1.8rem;
    color: #D4CFC7;
    cursor: pointer;
    transition: color var(--transition);
    line-height: 1;
    user-select: none;
}

.star-input__star.active {
    color: var(--accent);
}


/* ── CTA BANNER ── */

.cta-banner {
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
    color: var(--white);
    text-align: center;
    padding: 4rem 1.5rem;
    border-radius: var(--radius-lg);
    margin: 3rem 0;
    position: relative;
}

.cta-banner::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(176, 141, 87, 0.45);
    border-radius: var(--radius-lg);
    pointer-events: none;
}

.cta-banner h2 {
    color: var(--white);
    margin-bottom: 0.75rem;
}

.cta-banner p {
    opacity: 0.9;
    margin-bottom: 1.5rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}


/* ── FEATURE LIST ── */

.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list li {
    padding: 0.6rem 0 0.6rem 2rem;
    position: relative;
    color: var(--text-light);
}

.feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
}


/* ── FOOTER ── */

.footer {
    background: var(--blue-dark);
    color: rgba(255, 255, 255, 0.8);
    padding: 3rem 0 2rem;
}

.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
}

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

.footer h4 {
    color: var(--white);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.footer a {
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transition);
}

.footer a:hover {
    color: var(--white);
}

.footer__links {
    list-style: none;
}

.footer__links li {
    margin-bottom: 0.4rem;
}

.footer__links a {
    font-size: 0.92rem;
}

.footer__bottom {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.7;
}

.footer__logo {
    font-family: 'Jost', 'Century Gothic', 'Futura', sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 0.75rem;
}


/* ── PAGE HERO (sub pages) ── */

.page-hero {
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
    color: var(--white);
    padding: 4rem 0;
    text-align: left;
}

.page-hero .container::before {
    content: 'Mijn Kamer En Suite';
    display: block;
    font-family: 'Jost', 'Century Gothic', 'Futura', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
}

.page-hero h1 {
    color: var(--white);
    font-size: 2.4rem;
    font-weight: 400;
    max-width: 700px;
    margin: 0 0 0.75rem;
}

.page-hero p {
    opacity: 0.85;
    max-width: 560px;
    margin: 0;
    font-size: 1.05rem;
}


/* ── VOOR VLOERENLEGGERS BENEFITS ── */

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

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

.benefit {
    background: var(--white);
    border: 1px solid var(--hairline);
    border-top: 2px solid var(--accent);
    padding: 1.75rem;
}

.benefit h3 {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
}

.benefit p {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 0;
}


/* ── GALERIE ── */

.galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 900px) {
    .galerie {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.galerie__item {
    margin: 0;
    border: 1px solid var(--hairline);
    padding: 0.75rem;
    background: var(--white);
    cursor: pointer;
    transition: border-color var(--transition);
}

.galerie__item:hover {
    border-color: var(--accent);
}

.galerie__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.galerie__item figcaption {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-light);
    padding: 0.75rem 0.25rem 0.25rem;
    text-align: center;
}

.galerie__leeg {
    text-align: center;
    color: var(--text-light);
    font-style: italic;
    padding: 2rem 0;
}


/* ── LIGHTBOX ── */

.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(31, 44, 32, 0.94);
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

.lightbox.open {
    display: flex;
}

.lightbox figure {
    margin: 0;
    max-width: 900px;
    max-height: 100%;
    text-align: center;
}

.lightbox img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border: 6px solid var(--white);
}

.lightbox figcaption {
    color: var(--white);
    font-style: italic;
    font-size: 0.95rem;
    margin-top: 1rem;
    opacity: 0.9;
}

.lightbox__close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    color: var(--white);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition);
}

.lightbox__close:hover {
    background: rgba(255, 255, 255, 0.15);
}

.lightbox__pijl {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(31, 44, 32, 0.4);
    color: var(--white);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition);
}

.lightbox__pijl:hover {
    background: rgba(255, 255, 255, 0.15);
}

.lightbox__pijl--vorige {
    left: 1rem;
}

.lightbox__pijl--volgende {
    right: 1rem;
}

@media (max-width: 700px) {
    .lightbox__pijl {
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }
    .lightbox__pijl--vorige {
        left: 0.4rem;
    }
    .lightbox__pijl--volgende {
        right: 0.4rem;
    }
}


/* ── UTILITY ── */

.text-center {
    text-align: center;
}

.mt-2 {
    margin-top: 2rem;
}

.mt-3 {
    margin-top: 3rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.mb-3 {
    margin-bottom: 3rem;
}


/* ── ANIMATIONS ── */

@media (prefers-reduced-motion: no-preference) {
    .voordeel,
    .doelgroep,
    .review,
    .stap,
    .benefit {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .voordeel.visible,
    .doelgroep.visible,
    .review.visible,
    .stap.visible,
    .benefit.visible {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Dynamic CMS images */

/*
 * Foto's die vanuit het CMS tussen de tekst belanden. Op volle breedte werden
 * ze reusachtig: in een tekstkolom van 760px is een foto van 760px breed al
 * gauw een halve schermhoogte hoog, en breekt hij het verhaal doormidden.
 * Ze staan nu rechts naast de tekst, die er omheen loopt. Op een telefoon is
 * daar geen ruimte voor; daar gaan ze weer over de volle breedte.
 */
.cms-dynamic-img {
    float: right;
    width: 42%;
    max-width: 320px;
    margin: 0.4rem 0 1.25rem 2rem;
    border-radius: 8px;
    overflow: hidden;
}

.cms-dynamic-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Een zwevende foto valt buiten de hoogte van zijn omhulsel. Zonder dit
   loopt hij door over de volgende sectie heen. flow-root sluit hem in.
   Alleen bij blokken die zo'n foto bevatten: flow-root schakelt ook het
   samenvallen van marges uit, en dat zou anders de witruimte op elke pagina
   veranderen voor een probleem dat daar niet speelt. */
/* Niet bij .cms-naast: daar zweeft niets en moet display:flex blijven staan.
   Zonder deze uitzondering wint flow-root, omdat die regel verderop in het
   bestand staat en even zwaar weegt — en dan staan foto en tekst onder
   elkaar in plaats van naast elkaar. */
*:has(> .cms-dynamic-img):not(.cms-naast) {
    display: flow-root;
}

/* In een sectiekop staat de tekst gecentreerd. Een foto die daar rechts
   zweeft staat scheef tegenover die middenlijn; daar blijft hij midden staan,
   alleen niet meer op volle breedte. */
.section__header .cms-dynamic-img {
    float: none;
    width: 100%;
    max-width: 420px;
    margin: 1.5rem auto 0;
}

@media (max-width: 700px) {
    .cms-dynamic-img {
        float: none;
        width: 100%;
        max-width: none;
        margin: 1.5rem 0;
    }
}


/* ── MOBIELE TYPOGRAFIE ── */

@media (max-width: 700px) {
    html {
        font-size: 15px;
    }
    /* iPhone-Safari zoomt de pagina in zodra een invoerveld kleiner is dan
     16px. De bezoeker moet daarna zelf terugknijpen — precies op het moment
     dat hij het contactformulier invult. Vandaar deze uitzondering. */
    .form__input,
    .form__textarea,
    select {
        font-size: 16px;
    }
    /* Tikdoelen. Apple houdt 44 punten aan als minimum voor een vinger, en
     onze bezoekers zijn doorgaans niet de jongste. Vooral het menu en de
     telefoonlinks moeten ruim genoeg zijn om raak te tikken. */
    .nav__hamburger {
        padding: 0.85rem 0.75rem;
        margin-right: -0.75rem;
    }
    .footer__links a,
    .footer p a {
        display: inline-block;
        padding: 0.4rem 0;
    }
    .form__note a {
        display: inline-block;
        padding: 0.25rem 0;
    }
    h1 {
        font-size: 1.85rem;
    }
    h2 {
        font-size: 1.45rem;
    }
    h3 {
        font-size: 1.15rem;
    }
    .hero h1 {
        font-size: 1.9rem;
    }
    .hero p {
        font-size: 1rem;
        line-height: 1.75;
    }
    .hero {
        padding: 3.5rem 0;
    }
    .page-hero h1 {
        font-size: 1.65rem;
    }
    .page-hero p {
        font-size: 0.95rem;
    }
    .page-hero {
        padding: 2.75rem 0;
    }
    .section {
        padding: 2.75rem 0;
    }
    .section__header p {
        font-size: 0.95rem;
    }
    .cta-banner h2 {
        font-size: 1.4rem;
    }
    .cta-banner {
        padding: 2.75rem 1.25rem;
    }
    .reviews-gemiddelde__stars {
        font-size: 1.5rem;
    }
}


/* ── SPAMVELD ──
   Onzichtbaar veld in de formulieren. Bezoekers zien en bereiken het niet,
   geautomatiseerde spamscripts vullen het wel in — die inzending negeren wij. */

.veld-verborgen {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ── WERKGEBIED ── */

.werkgebied {
    margin: -0.4rem 0 1.1rem;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid var(--hairline);
    background: var(--sand);
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-light);
}

.werkgebied[hidden] {
    display: none;
}

.werkgebied--binnen {
    border-left-color: #2e7d4f;
    color: var(--text);
}

.werkgebied--buiten {
    border-left-color: var(--accent);
    background: #FBF5EA;
    color: var(--text);
}


/* ── FOTO'S MEESTUREN BIJ HET CONTACTFORMULIER ── */

.foto-kiezer__invoer {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.foto-kiezer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 1.6rem 1rem;
    border: 1px dashed var(--hairline);
    border-radius: var(--radius);
    background: var(--white);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--transition), background var(--transition);
}

.foto-kiezer:hover,
.foto-kiezer__invoer:focus-visible+.foto-kiezer {
    border-color: var(--accent);
    background: var(--sand);
}

.foto-kiezer--sleep {
    border-color: var(--accent);
    border-style: solid;
    background: var(--sand);
}

.foto-kiezer__icoon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 0.4rem;
    border-radius: 50%;
    background: var(--sand-dark);
    color: var(--blue);
    font-size: 1.25rem;
    line-height: 1;
}

.foto-kiezer:hover .foto-kiezer__icoon {
    background: var(--accent);
    color: var(--white);
}

.foto-kiezer__titel {
    font-family: 'Jost', 'Century Gothic', 'Futura', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue);
}

.foto-kiezer__hint {
    font-size: 0.82rem;
    color: var(--text-light);
}

.foto-camera {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--white);
    font-family: 'Jost', 'Century Gothic', 'Futura', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.foto-camera:hover {
    border-color: var(--accent);
    background: var(--sand);
}

.foto-camera[hidden] {
    display: none;
}

.foto-camera__icoon {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--blue);
    border-radius: 50%;
    font-size: 0;
}


/* Twee velden naast elkaar (postcode en woonplaats) */

.form__rij {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 1rem;
}

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

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

.foto-lijst:empty {
    margin-top: 0;
}

.foto-item {
    position: relative;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
}

.foto-item img {
    width: 100%;
    height: 76px;
    object-fit: cover;
    display: block;
}

.foto-item__naam {
    display: block;
    padding: 0.3rem 0.4rem;
    font-size: 0.7rem;
    line-height: 1.3;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.foto-item__weg {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(31, 44, 32, 0.78);
    color: var(--white);
    font-size: 0.95rem;
    line-height: 22px;
    cursor: pointer;
    transition: background var(--transition);
}

.foto-item__weg:hover {
    background: var(--blue);
}

.foto-teller {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-light);
}

.form__status {
    margin-left: 0.9rem;
    font-size: 0.88rem;
    color: var(--text-light);
}


/* ── MENU: RUSTIGE HOEKEN ──
   De navigatie erfde var(--radius), waardoor elk item een volle pil werd en
   het uitklapmenu een blok met ronde uiteinden. Voor kleine tekstitems is dat
   te veel; 10px is dezelfde maat als de grote vlakken in het contactformulier.
   Staat achteraan omdat de basisopmaak van het menu bovenaan het bestand
   staat: bij gelijke specificiteit wint de laatste regel. */
.nav__links a,
.nav__links .nav__parent-label,
.nav__dropdown {
  border-radius: 10px;
}
/* In het uitklapmenu lopen de regels tot de rand; daar hoort geen afronding. */
.nav__dropdown a { border-radius: 0; }

/* ── COOKIEMELDING ──
   Weigeren moet net zo eenvoudig zijn als aanvaarden. Beide knoppen zijn
   daarom even groot en even opvallend: geen grijs weggemoffeld "weigeren"
   naast een felgekleurd "accepteren". Weigeren staat bovendien vooraan. */
.cookiemelding {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 300;
  max-width: 640px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.cookiemelding[hidden] { display: none; }
.cookiemelding__tekst {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-light);
}
.cookiemelding__knoppen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.cookiemelding__knop {
  padding: 0.75rem 1rem;
  /* Op mobiel wordt de basisletter 15px en zakt de knop naar 42px. Apple
     houdt 44 punten aan als minimum voor een vinger, en juist deze knop moet
     in één keer raak zijn. */
  min-height: 44px;
  font-family: 'Jost', 'Century Gothic', 'Futura', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--white);
  border: 1px solid var(--blue);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.cookiemelding__knop:hover {
  background: var(--blue);
  color: var(--white);
}
@media (max-width: 460px) {
  .cookiemelding__knoppen { grid-template-columns: 1fr; }
}

/* ── MAXIMALE AFRONDING IN HET CONTACTFORMULIER ──
   Een browser verkleint een te grote radius vanzelf tot de helft van de
   kortste zijde, dus 999px levert altijd de rondst mogelijke hoek op —
   ongeacht hoe hoog of breed het element toevallig is. Zo blijft het
   formulier rond wanneer --radius elders lager wordt gezet, en blijft het
   omschrijvingsveld rond wanneer de bezoeker het uitrekt.
   Dit blok staat bewust achteraan: de foto-onderdelen hierboven zetten hun
   eigen radius, en bij gelijke specificiteit wint de laatste regel. */

.form__input,
.form-message,
.form .btn {
    border-radius: 999px;
}


/* De twee grote vlakken blijven rustig: een pilvorm rond een blok tekst of
   een sleepvak leest slecht. De cameraknop en de miniaturen volgen het
   fotovak, anders staan er drie verschillende hoeken onder elkaar. */

.form__textarea,
.foto-kiezer,
.foto-camera,
.foto-item {
    border-radius: 10px;
}