:root {
    --groen: #2f855a;
    --groen-donker: #276749;
    --rood: #c53030;
    --oranje: #dd6b20;
    --grijs: #7c766c;
    --grijs-licht: #f0ebe1;
    --tekst: #37413a;
    --rand: #e8e1d5;
    --achtergrond: #f6f2ea;
    --kaart: #ffffff;
    --schaduw: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .04);

    /* Palet van het huisje — natuurlijk maar bold */
    --groen-diep: #3c473f;
    --groen-diep-2: #333d36;
    --terracotta: #8b4c41;
    --terracotta-hover: #784037;
    --zalm: #e1a697;
    --zand: #d8c7ac;
    --creme: #f6f1e9;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--tekst);
    background: var(--achtergrond);
    line-height: 1.5;
}

/* Kop */
.kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: var(--kaart);
    border-bottom: 1px solid var(--rand);
    flex-wrap: wrap;
    gap: .5rem;
}
.kop-titel {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--groen-diep);
    text-decoration: none;
}
.kop-nav a {
    margin-left: 1rem;
    color: var(--grijs);
    text-decoration: none;
    font-weight: 600;
}
.kop-nav a:hover { color: var(--terracotta); }

/* Inhoud */
.inhoud {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
}
.intro h1 { margin: .5rem 0; font-size: 1.6rem; color: var(--groen-diep); }
.intro p { color: var(--grijs); max-width: 60ch; }

.raster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}
@media (max-width: 780px) {
    .raster { grid-template-columns: 1fr; }
}

.kaart {
    background: var(--kaart);
    border: 1px solid var(--rand);
    border-radius: 18px;
    padding: 1.25rem;
    box-shadow: var(--schaduw);
    margin-bottom: 1.5rem;
}
.kaart h2 { margin-top: 0; font-size: 1.2rem; color: var(--groen-diep); }
.kaart-smal {
    max-width: 420px;
    margin: 2rem auto;
    position: relative;
    overflow: hidden;
}
.kaart-smal::before {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 130px;
    height: 130px;
    background: rgba(225, 166, 151, .22);
    border-radius: 42% 58% 63% 37% / 45% 45% 55% 55%;
    pointer-events: none;
}
.kaart-smal > * { position: relative; z-index: 1; }

/* Formulier */
.formulier label {
    display: block;
    margin-bottom: .9rem;
    font-weight: 600;
    font-size: .9rem;
}
.formulier input,
.formulier textarea {
    width: 100%;
    margin-top: .3rem;
    padding: .6rem .7rem;
    border: 1px solid var(--rand);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 400;
}
.formulier input:focus,
.formulier textarea:focus {
    outline: none;
    border-color: var(--terracotta);
    box-shadow: 0 0 0 3px rgba(139, 76, 65, .15);
}
.twee-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.hint { color: var(--grijs); font-size: .85rem; margin: .25rem 0 1rem; }

.inline-formulier {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-end;
}
.inline-formulier label { margin-bottom: 0; }

/* Knoppen */
.knop {
    display: inline-block;
    padding: .55rem 1rem;
    border: none;
    border-radius: 10px;
    background: var(--terracotta);
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.knop:hover { background: var(--terracotta-hover); }
.knop-groot { width: 100%; padding: .75rem; font-size: 1rem; }
.knop-groen { background: var(--groen); }
.knop-groen:hover { background: var(--groen-donker); }
.knop-grijs { background: var(--grijs); }
.knop-grijs:hover { background: #5f5a51; }
.pijl {
    border: 1px solid var(--rand);
    background: #fff;
    border-radius: 8px;
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--tekst);
}
.pijl:hover { background: var(--grijs-licht); }

/* Kalender */
.kalender-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}
.kalender-kop h2,
.kalender-kop h3 { margin: 0; font-size: 1.1rem; text-transform: capitalize; }
.kalender {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.kal-dagnaam {
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    color: var(--grijs);
    padding-bottom: .25rem;
    text-transform: uppercase;
}
.kal-dag {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: .85rem;
    background: #fff;
    border: 1px solid var(--rand);
}
.kal-nr { position: relative; z-index: 1; }
.poets-mark {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-size: .6rem;
    line-height: 1;
    z-index: 2;
}
.feest-mark {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #805ad5;
    z-index: 2;
}

/* Schoolvakantie: blauwe streep bovenaan de cel */
.kal-dag.vakantie::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 4px;
    right: 4px;
    height: 3px;
    border-radius: 2px;
    background: rgba(66, 153, 225, .55);
}
.kal-dag.feestdag .kal-nr { color: #805ad5; font-weight: 700; }

/* Klikbaar + selectie (aankomst → vertrek) */
.kal-dag.klikbaar { cursor: pointer; }
.kal-dag.klikbaar:hover { border-color: var(--terracotta); box-shadow: 0 0 0 1px var(--terracotta); }
.kal-dag.gekozen-tussen { background: #e7dcc9; border-color: var(--zand); color: var(--tekst); }
.kal-dag.gekozen-start,
.kal-dag.gekozen-eind {
    background: var(--groen-diep);
    border-color: var(--groen-diep);
    color: #fff;
    font-weight: 700;
}
.kal-dag.gekozen-start .kal-nr,
.kal-dag.gekozen-eind .kal-nr { color: #fff; }

/* Keuze-samenvatting in het formulier */
.keuze-vak {
    background: var(--grijs-licht);
    border: 1px dashed var(--rand);
    border-radius: 8px;
    padding: .7rem .9rem;
    margin-bottom: 1rem;
    font-size: .9rem;
    color: var(--grijs);
    line-height: 1.5;
}
.keuze-vak.gekozen-vak {
    background: #f2ead9;
    border-style: solid;
    border-color: var(--zand);
    color: var(--tekst);
}
.knop:disabled { background: #a0aec0; cursor: not-allowed; }
.kal-dag.leeg { background: transparent; border: none; }
.kal-dag.verleden { color: #cbd5e0; background: #fafafa; }
.kal-dag.vrij { background: #f0fff4; border-color: #c6f6d5; }
.kal-dag.bezet { background: #fff5f5; border-color: #feb2b2; color: var(--rood); font-weight: 600; }
.kal-dag.aangevraagd { background: #fffaf0; border-color: #fbd38d; color: var(--oranje); font-weight: 600; }
.kal-dag.vandaag { box-shadow: 0 0 0 2px var(--groen-diep); }

.legende {
    list-style: none;
    display: flex;
    gap: 1rem;
    padding: 0;
    margin: 1rem 0 0;
    font-size: .82rem;
    color: var(--grijs);
    flex-wrap: wrap;
}
.legende li { display: flex; align-items: center; gap: .35rem; }
.stip { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid var(--rand); }
.stip.vrij { background: #f0fff4; border-color: #c6f6d5; }
.stip.bezet { background: #fff5f5; border-color: #feb2b2; }
.stip.aangevraagd { background: #fffaf0; border-color: #fbd38d; }
.stip.gekozen { background: var(--groen-diep); border-color: var(--groen-diep); }
.stip.feestdag { background: #805ad5; border-color: #805ad5; }
.stip.vakantie { background: rgba(66, 153, 225, .55); border-color: #4299e1; }

/* Tabel */
.tabel-wikkel { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabel th, .tabel td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--rand); vertical-align: top; }
.tabel th { color: var(--grijs); font-size: .78rem; text-transform: uppercase; }
.opmerking-cel { max-width: 220px; }
.acties { display: flex; gap: .4rem; white-space: nowrap; }
.acties form { margin: 0; }
.leeg { color: var(--grijs); font-style: italic; }

.badge {
    display: inline-block;
    background: var(--oranje);
    color: #fff;
    border-radius: 999px;
    padding: 0 .5rem;
    font-size: .8rem;
    vertical-align: middle;
}
.tag { padding: .15rem .5rem; border-radius: 6px; font-size: .78rem; font-weight: 600; }
.tag-eigenaar { background: #e9d8fd; color: #6b46c1; }
.tag-gast { background: #c6f6d5; color: var(--groen-donker); }

/* Meldingen */
.meldingen { margin-bottom: 1rem; }
.melding {
    padding: .7rem 1rem;
    border-radius: 8px;
    margin-bottom: .5rem;
    font-size: .92rem;
    font-weight: 500;
}
.melding-fout { background: #fff5f5; color: var(--rood); border: 1px solid #feb2b2; }
.melding-gelukt { background: #f0fff4; color: var(--groen-donker); border: 1px solid #c6f6d5; }
.melding-info { background: #ebf8ff; color: #2b6cb0; border: 1px solid #bee3f8; }

/* Voet */
.voet {
    text-align: center;
    color: var(--grijs);
    font-size: .85rem;
    padding: 2rem 1rem;
}

/* ============ Landingspagina ============ */
.hero {
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 3.5rem);
    background: linear-gradient(150deg, #43503f 0%, var(--groen-diep-2) 100%);
    border-radius: 22px;
    color: var(--creme);
    box-shadow: 0 20px 45px rgba(51, 61, 54, .3);
}
.hero::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(225, 166, 151, .40), transparent 70%);
    pointer-events: none;
}
.hero-inhoud { position: relative; z-index: 1; }
/* Organische blob-vormen in de hero */
.hero .blob { position: absolute; z-index: 0; pointer-events: none; }
.hero .blob-1 {
    width: 200px; height: 200px; left: -50px; bottom: -60px;
    background: rgba(225, 166, 151, .20);
    border-radius: 42% 58% 63% 37% / 45% 45% 55% 55%;
}
.hero .blob-2 {
    width: 130px; height: 130px; right: 20%; top: 14%;
    background: rgba(216, 199, 172, .16);
    border-radius: 58% 42% 38% 62% / 52% 43% 57% 48%;
}
.hero .blob-3 {
    width: 90px; height: 90px; right: 8%; bottom: 12%;
    background: rgba(139, 76, 65, .22);
    border-radius: 47% 53% 40% 60% / 55% 48% 52% 45%;
}
.hero-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .78rem;
    font-weight: 700;
    color: var(--zalm);
    margin-bottom: 1rem;
}
.hero-titel {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.6rem, 8vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -.01em;
    margin: 0 0 1rem;
}
.hero-sub {
    font-size: clamp(1.05rem, 2.4vw, 1.3rem);
    line-height: 1.6;
    max-width: 46ch;
    color: rgba(246, 241, 233, .85);
    margin: 0;
}
.hero-cta {
    display: inline-block;
    margin-top: 1.9rem;
    padding: .9rem 1.7rem;
    background: var(--terracotta);
    color: var(--creme);
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
    transition: transform .1s ease, background .15s ease;
}
.hero-cta:hover { background: var(--terracotta-hover); transform: translateY(-1px); }
.hero-kleuren { display: flex; gap: .5rem; margin-top: 2.3rem; }
.hero-kleuren span { width: 46px; height: 12px; border-radius: 6px; display: block; }

.stappen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-top: 1.5rem;
}
@media (max-width: 720px) { .stappen { grid-template-columns: 1fr; } }
.stap {
    position: relative;
    overflow: hidden;
    background: var(--kaart);
    border: 1px solid var(--rand);
    border-radius: 20px;
    padding: 1.6rem;
}
/* Zachte organische vorm in de hoek van elke stapkaart */
.stap::before {
    content: "";
    position: absolute;
    right: -34px;
    top: -34px;
    width: 100px;
    height: 100px;
    border-radius: 42% 58% 63% 37% / 45% 45% 55% 55%;
    pointer-events: none;
}
.stap:nth-child(1)::before { background: var(--zalm); opacity: .30; }
.stap:nth-child(2)::before { background: var(--zand); opacity: .55; }
.stap:nth-child(3)::before { background: var(--terracotta); opacity: .20; }
.stap-nr {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 42% 58% 63% 37% / 45% 45% 55% 55%;
    background: var(--zand);
    color: #5b4a36;
    font-weight: 700;
    margin-bottom: .8rem;
}
.stap h3, .stap p { position: relative; z-index: 1; }
.stap h3 { margin: .1rem 0 .4rem; font-size: 1.15rem; color: var(--groen-diep); }
.stap p { margin: 0; color: var(--grijs); font-size: .95rem; }

.slot-band {
    position: relative;
    overflow: hidden;
    margin-top: 1.5rem;
    padding: clamp(1.5rem, 4vw, 2.3rem);
    background: var(--zand);
    border-radius: 48px 16px 48px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
}
.slot-band::before {
    content: "";
    position: absolute;
    left: 30%;
    bottom: -60px;
    width: 160px;
    height: 160px;
    background: rgba(139, 76, 65, .14);
    border-radius: 58% 42% 38% 62% / 52% 43% 57% 48%;
    pointer-events: none;
}
.slot-band > * { position: relative; z-index: 1; }
.slot-band h2 { margin: 0 0 .3rem; color: var(--groen-diep); }
.slot-band p { margin: 0; color: #5b4a36; }