/* ==========================================================================
   GOMMERLIFTRACE — gommerlift.css
   Eigen stylesheet, geen framework, geen build-stap.
   Concept: de pagina is een rit langs de weg. Lichte secties = verweerd
   wegwit, donkere secties = asfalt, ertussen een wegrand met middenlijn.

   Inhoud
     1. Variabelen
     2. Reset & basis
     3. Typografie
     4. Layout (container, secties, sectiekop, infaden)
     5. Gedeelde componenten (knop, kicker, wegrand, bordje, bordplaat,
        karton, routebord, datumbord, kilometerteller, hulpklassen)
     6. Secties (hero, over ons, ervaring, faq, team, contact)
     7. Kerstmodus
     8. Media queries & reduced motion

   Blok 1 t/m 5 is de gedeelde basis: navbar-1.php en footer-1.php kunnen
   dezelfde variabelen, .container, .knop, .kicker en .bordje gebruiken.
   ========================================================================== */


/* ==========================================================================
   1. VARIABELEN
   ========================================================================== */
:root {
    /* Palet */
    --asfalt: #1b1e22;
    --asfalt-2: #2a2e34;
    --asfalt-3: #353a41;
    --wegwit: #f5f2ea;
    --wegwit-2: #ebe6da;
    --markering: #f7c53d;
    --markering-donker: #d9a616;
    --wegwijzer: #0b5cab;
    --wegwijzer-donker: #08427a;
    --karton: #d0ab72;
    --karton-donker: #a97f46;
    --stift: #141618;
    --groen: #2f8f5b;
    --oranje: #ef8f2a;
    --rood: #d23c3c;
    --wit: #ffffff;

    /* Tekst */
    --tekst: #23272c;
    --tekst-zacht: #5a6069;
    --tekst-licht: #f5f2ea;
    --tekst-licht-zacht: #b8bcc3;

    /* Fonts */
    --font-basis: 'Overpass', 'Helvetica Neue', Arial, sans-serif;
    --font-stift: 'Permanent Marker', 'Segoe Print', 'Bradley Hand', cursive;

    /* Maten */
    --navbar-hoogte: 5rem;
    --container: 72rem;
    --container-smal: 52rem;
    --radius: 5px;
    --sectie-ruimte: clamp(3.5rem, 8vw, 6.5rem);
    --overgang: .25s ease;
    --focus: var(--wegwijzer);

    /* Wegmarkering: gestreepte middenlijn (herbruikbaar als achtergrondlaag) */
    --middenlijn: repeating-linear-gradient(90deg, var(--wegwit) 0 2.75rem, transparent 2.75rem 4.75rem);

    /* Asfalttextuur via SVG-data-URI (feTurbulence), geen externe afbeelding */
    --textuur-asfalt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
}


/* ==========================================================================
   2. RESET & BASIS
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--navbar-hoogte);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding-top: var(--navbar-hoogte);              /* ruimte voor de vaste navbar */
    font-family: var(--font-basis);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--tekst);
    background: var(--wegwit);
    overflow-x: hidden;                             /* gedraaide bordjes veroorzaken nooit horizontale scroll */
    -webkit-font-smoothing: antialiased;
}

body.kerstmodus {
    padding-top: 200px;                             /* lampjes (60px) + topbar + navbar */
}

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

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Compatibiliteit: navbar-1.php toggelt mogelijk nog .hidden via JS.
   Eigen definitie, geen Tailwind. Weghalen zodra navbar/footer zijn herschreven. */
.hidden {
    display: none;
}


/* ==========================================================================
   3. TYPOGRAFIE
   ========================================================================== */
h1,
h2,
h3 {
    margin: 0;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.02em;
}

h1 {
    font-size: clamp(2rem, 10vw, 7rem);            /* 14 kapitalen passen ook op 320px */
    text-transform: uppercase;
    letter-spacing: -.03em;
}

h2 {
    font-size: clamp(2rem, 5vw, 3.75rem);
}

h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 800;
}

p {
    margin: 0 0 1rem;
}

.stift {
    font-family: var(--font-stift);
    font-weight: 400;
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.container {
    width: min(100% - 2rem, var(--container));
    margin-inline: auto;
}

.container--smal {
    max-width: var(--container-smal);
}

.sectie {
    position: relative;
    padding-block: var(--sectie-ruimte);
}

.sectie--wegwit {
    background: var(--wegwit);
}

.sectie--wegwit-2 {
    background: var(--wegwit-2);
}

.sectie--asfalt,
.sectie--nacht {
    background: var(--asfalt);
    color: var(--tekst-licht);
    --focus: var(--markering);
}

.sectie--nacht {
    background: linear-gradient(180deg, var(--asfalt) 0%, #121a26 100%);
}

/* Subtiele asfalttextuur op donkere secties */
.sectie--asfalt::before,
.sectie--nacht::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--textuur-asfalt);
    opacity: .07;
    pointer-events: none;
}

.sectie--asfalt > *,
.sectie--nacht > * {
    position: relative;
}

.sectiekop {
    text-align: center;
    margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.sectiekop .kicker {
    margin-bottom: 1rem;
}

.sectiekop h2 {
    margin: 0 0 .75rem;
}

.sectiekop__sub {
    margin: 0;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 600;
    color: var(--tekst-zacht);
}

.sectie--asfalt .sectiekop__sub,
.sectie--nacht .sectiekop__sub {
    color: var(--tekst-licht-zacht);
}

/* Infaden bij scrollen (klassen gezet door JS, zie index.php) */
.infaden {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}

.infaden.is-zichtbaar {
    opacity: 1;
    transform: none;
}


/* ==========================================================================
   5. GEDEELDE COMPONENTEN
   ========================================================================== */

/* --- Knoppen ------------------------------------------------------------ */
.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 3rem;
    padding: .85rem 1.5rem .7rem;
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform var(--overgang), box-shadow var(--overgang),
                background-color var(--overgang), color var(--overgang);
}

.knop__icoon {
    transition: transform var(--overgang);
}

.knop:hover .knop__icoon,
.knop:focus-visible .knop__icoon {
    transform: translateY(-3px) rotate(-8deg);      /* de duim gaat omhoog */
}

/* Primair: gele bordplaat met stiftzwarte tekst */
.knop--primair {
    background: var(--markering);
    color: var(--stift);
    border-color: var(--stift);
    box-shadow: 0 4px 0 var(--stift);
}

.knop--primair:hover {
    background: var(--markering-donker);
    transform: translateY(-1px);
    box-shadow: 0 5px 0 var(--stift);
}

.knop--primair:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--stift);
}

/* Secundair: omlijnd, wit (voor donkere achtergronden) */
.knop--secundair {
    background: rgba(27, 30, 34, .35);
    color: var(--wit);
    border-color: var(--wit);
}

.knop--secundair:hover {
    background: var(--wit);
    color: var(--stift);
}

/* Secundair op licht: omlijnd blauw */
.knop--secundair-licht {
    background: transparent;
    color: var(--wegwijzer);
    border-color: var(--wegwijzer);
}

.knop--secundair-licht:hover {
    background: var(--wegwijzer);
    color: var(--wit);
}

/* Donker: stiftzwart vlak (bijv. op geel) */
.knop--donker {
    background: var(--stift);
    color: var(--wit);
    border-color: var(--stift);
    box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
}

.knop--donker:hover {
    background: var(--asfalt-2);
    transform: translateY(-1px);
}

.knop--donker:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

/* --- Wegwijzer-kicker (blauw bord met pijlpunt) ------------------------- */
.kicker {
    display: inline-block;
    padding: .5rem 1.9rem .38rem 1rem;
    background: var(--wegwijzer);
    color: var(--wit);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
    word-spacing: .2em;
    text-transform: uppercase;
    line-height: 1.2;
    border-radius: 3px 0 0 3px;
    clip-path: polygon(0 0, calc(100% - .85rem) 0, 100% 50%, calc(100% - .85rem) 100%, 0 100%);
}

/* --- Wegrand: smalle asfaltband met middenlijn tussen secties ----------- */
.wegrand {
    height: 1.75rem;
    background: var(--middenlijn) center / 100% 4px repeat-x, var(--asfalt);
    box-shadow: inset 0 3px 0 rgba(245, 242, 234, .85), inset 0 -3px 0 rgba(245, 242, 234, .85);
}

/* --- Bordje: klein bord / pill ------------------------------------------- */
.bordje {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem .95rem .45rem;
    font-weight: 800;
    font-size: .95rem;
    line-height: 1.2;
    border-radius: var(--radius);
}

.bordje--geel {
    background: var(--markering);
    color: var(--stift);
    border: 2px solid var(--stift);
}

.bordje--blauw {
    background: var(--wegwijzer);
    color: var(--wit);
}

.bordje--wit {
    background: var(--wit);
    color: var(--stift);
    border: 2px solid var(--stift);
}

/* --- Bordplaat: groot bord met harde onderrand ---------------------------- */
.bordplaat {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 3px solid var(--stift);
    border-radius: var(--radius);
    box-shadow: 0 6px 0 var(--stift);
}

.bordplaat--geel {
    background: var(--markering);
    color: var(--stift);
}

.bordplaat--blauw {
    background: var(--wegwijzer);
    color: var(--wit);
    border-color: var(--wegwijzer-donker);
    box-shadow: inset 0 0 0 3px var(--wit), 0 6px 0 var(--wegwijzer-donker);
}

.bordplaat h3 {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .6rem;
}

.bordplaat p {
    margin: 0;
    font-weight: 600;
}

.bordplaat strong {
    font-weight: 900;
}

/* --- Karton: kartonnen bordje met stift en plakband ------------------------ */
.karton {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .95rem 1.5rem .7rem;
    background-color: var(--karton);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(0, 0, 0, .07)),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 7px);
    color: var(--stift);
    font-family: var(--font-stift);
    font-size: clamp(1.05rem, 2.2vw, 1.4rem);
    line-height: 1.2;
    border: 3px solid var(--karton-donker);
    border-radius: 3px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .4);
    transform: rotate(-2deg);
}

/* plakband */
.karton::before {
    content: '';
    position: absolute;
    top: -.75rem;
    left: 50%;
    width: 5rem;
    height: 1.3rem;
    transform: translateX(-50%) rotate(-3deg);
    background: rgba(255, 250, 220, .6);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

/* Statusbanner: stoplichtlogica als dikke rand + stip */
.status {
    border-width: 4px;
    padding-right: 2.75rem;
}

.status::after {
    content: '';
    position: absolute;
    right: .95rem;
    top: 50%;
    width: .85rem;
    height: .85rem;
    margin-top: -.42rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .25), 0 0 10px currentColor;
}

.status--available { border-color: var(--groen); }
.status--available::after { color: var(--groen); }

.status--limited { border-color: var(--oranje); }
.status--limited::after { color: var(--oranje); }

.status--full { border-color: var(--rood); }
.status--full::after { color: var(--rood); }

/* --- Routebord: geel schild zoals een N-wegnummer ------------------------- */
.routebord {
    display: inline-block;
    padding: .6rem 1.1rem .4rem;
    background: var(--markering);
    color: var(--stift);
    font-weight: 900;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    letter-spacing: .02em;
    line-height: 1;
    border: 3px solid var(--stift);
    border-radius: 6px;
    box-shadow: 0 0 0 3px var(--markering), 0 6px 18px rgba(0, 0, 0, .45);
}

.routebord__woord {
    text-transform: uppercase;
}

/* --- Datumbord: klein wit bordplaatje ------------------------------------- */
.datumbord {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1.1rem .5rem;
    background: var(--wit);
    color: var(--stift);
    font-weight: 800;
    border: 2px solid var(--stift);
    border-radius: var(--radius);
    box-shadow: 0 4px 0 var(--stift);
}

.datumbord i {
    color: var(--wegwijzer);
}

/* --- Kilometerteller (countdown) ------------------------------------------ */
.teller {
    width: min(100%, 34rem);
}

.teller__kop {
    margin-bottom: .75rem;
    color: var(--markering);
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.teller__cellen {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(.4rem, 1.5vw, .9rem);
}

.teller__cel {
    padding: .75rem .25rem .6rem;
    background: var(--asfalt-2);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.teller__cijfer {
    position: relative;
    display: block;
    font-size: clamp(1.75rem, 6vw, 3.5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--wit);
    font-variant-numeric: tabular-nums;
}

/* deellijntje zoals bij mechanische klapcijfers */
.teller__cijfer::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    top: 50%;
    height: 1px;
    background: rgba(0, 0, 0, .6);
}

.teller__label {
    display: block;
    margin-top: .45rem;
    color: var(--markering);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* --- Hulpklassen ------------------------------------------------------------ */
.visueel-verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================================
   6. SECTIES
   ========================================================================== */

/* --- Hero (vertrekpunt) --------------------------------------------------- */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    margin-top: calc(-1 * var(--navbar-hoogte));     /* valt achter de navbar */
    padding-top: var(--navbar-hoogte);
    background: var(--asfalt);
    color: var(--wit);
    overflow: hidden;
    --focus: var(--markering);
}

.hero-slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: var(--asfalt-2) center / cover no-repeat;
    transition: opacity 1.5s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

/* donkere gradient + vignet: witte tekst blijft leesbaar, foto's houden hun kleur */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse at center, transparent 45%, rgba(27, 30, 34, .55) 100%),
        linear-gradient(180deg, rgba(27, 30, 34, .6) 0%, rgba(27, 30, 34, .25) 35%, rgba(27, 30, 34, .4) 70%, rgba(27, 30, 34, .9) 100%);
}

.hero__inhoud {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    padding: clamp(2rem, 6vw, 4rem) 0 clamp(6rem, 10vw, 7.5rem);
}

.hero__tekst {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    text-align: center;
}

.hero__titel {
    color: var(--wit);
    text-shadow: .05em .05em 0 var(--stift), 0 .12em 1.2em rgba(0, 0, 0, .5);
}

.hero__ondertitel {
    max-width: 34ch;
    margin: 0;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}

.hero__locatie {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: -.6rem 0 0;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}

.hero__locatie i {
    color: var(--markering);
}

.hero__knoppen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .9rem;
    margin-top: .4rem;
}

/* thema-aankondiging: tweede kartonnen bordje dat licht wiegt aan het plakband */
.thema {
    margin-top: 1rem;
    transform-origin: 50% -.5rem;
    animation: wieg 6s ease-in-out infinite alternate;
}

.thema__naam {
    text-decoration: underline;
    text-decoration-color: var(--wegwijzer);
    text-decoration-thickness: 3px;
    text-underline-offset: 3px;
}

@keyframes wieg {
    from { transform: rotate(-1.5deg); }
    to   { transform: rotate(1.5deg); }
}

/* indicators als wegmarkering: streepjes, de actieve langer en geel */
.hero__indicators {
    position: absolute;
    left: 50%;
    bottom: 2.5rem;
    z-index: 3;
    display: flex;
    gap: .15rem;
    transform: translateX(-50%);
}

.indicator {
    display: grid;
    place-items: center;
    width: 2.75rem;                                  /* tikdoel 44px */
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.indicator::before {
    content: '';
    width: 1.5rem;
    height: 5px;
    background: rgba(255, 255, 255, .75);
    border-radius: 2px;
    transition: width var(--overgang), background-color var(--overgang);
}

.indicator:hover::before {
    background: var(--wit);
}

.indicator.active::before {
    width: 2.5rem;
    background: var(--markering);
}

/* asfaltstrook onderaan: de pagina rijdt hier de weg op */
.hero__asfalt {
    position: relative;
    z-index: 2;
    height: 2rem;
    background: var(--middenlijn) center / 100% 4px repeat-x, var(--asfalt);
    box-shadow: inset 0 3px 0 rgba(245, 242, 234, .85);
}

/* --- Over ons (afslag 1): reisdagboek --------------------------------------- */
.dagboek {
    position: relative;
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--wit);
    border-left: 4px solid var(--wegwijzer);
    border-radius: 0 var(--radius) var(--radius) 0;
    box-shadow: 0 12px 30px rgba(20, 22, 24, .08), 0 2px 6px rgba(20, 22, 24, .06);
}

/* De inhoud komt uit de database (geen eigen klassen) → elementniveau */
.dagboek__tekst {
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    line-height: 1.7;
}

.dagboek__tekst p {
    margin: 0 0 1.1em;
}

.dagboek__tekst p:last-child {
    margin-bottom: 0;
}

.dagboek__tekst strong {
    color: var(--wegwijzer);
    font-weight: 800;
}

.dagboek__tekst em {
    font-style: italic;
}

.dagboek__tekst a {
    color: var(--wegwijzer);
    font-weight: 700;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.dagboek__tekst a:hover {
    color: var(--wegwijzer-donker);
}

.dagboek__tekst ul,
.dagboek__tekst ol {
    margin: 0 0 1.1em;
    padding-left: 1.4em;
}

.dagboek__tekst li {
    margin-bottom: .35em;
}

.dagboek__tekst h3 {
    margin: 1.5em 0 .5em;
    color: var(--stift);
}

.dagboek__tekst h3:first-child {
    margin-top: 0;
}

.dagboek .bordplaat {
    margin-top: 2rem;
}

/* --- De ervaring (afslag 2): zes pitstops langs de route -------------------- */
.pitstops {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem 2rem;
    padding-top: 2rem;
    margin-bottom: clamp(3rem, 6vw, 4.5rem);
    --lijn: rgba(245, 242, 234, .6);
}

/* mobiel: verticale routelijn links, achter de kaarten door de paaltjes */
.pitstops::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(2.25rem - 2px);
    width: 4px;
    background: repeating-linear-gradient(180deg, var(--lijn) 0 1rem, transparent 1rem 1.75rem);
}

.pitstop {
    position: relative;
    padding: 2rem 1.5rem 1.5rem;
    background: var(--wegwit);
    color: var(--tekst);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    transition: transform var(--overgang), box-shadow var(--overgang);
}

.pitstop:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

/* genummerd paaltje */
.pitstop__paal {
    position: absolute;
    top: -1.6rem;
    left: 1.25rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding-top: .12em;
    background: var(--markering);
    color: var(--stift);
    font-size: .95rem;
    font-weight: 900;
    line-height: 1;
    border: 2px solid var(--stift);
    border-radius: 4px;
    box-shadow: 0 3px 0 var(--stift);
}

.pitstop__icoon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    background: var(--asfalt);
    color: var(--markering);
    font-size: 1.5rem;
    border-radius: var(--radius);
    transition: transform var(--overgang);
}

.pitstop:hover .pitstop__icoon {
    transform: scale(1.08) rotate(-4deg);
}

.pitstop__titel {
    margin-bottom: .4rem;
}

.pitstop__tekst {
    margin: 0;
    color: var(--tekst-zacht);
}

/* "Wat is liften?" — asfaltpaneel met grote gele duim */
.liften {
    display: grid;
    gap: 1.5rem;
    align-items: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--asfalt-2);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}

.liften__duim {
    display: grid;
    place-items: center;
    justify-self: center;
    width: clamp(5rem, 12vw, 7.5rem);
    aspect-ratio: 1;
    background: var(--markering);
    color: var(--stift);
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    border: 4px solid var(--stift);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--markering), 0 12px 30px rgba(0, 0, 0, .5);
    transform: rotate(-8deg);
}

.liften__tekst {
    text-align: center;
}

.liften__tekst h3 {
    margin-bottom: .75rem;
    font-size: clamp(1.6rem, 3.5vw, 2.25rem);
}

.liften__tekst p {
    margin-bottom: 1.25rem;
    font-size: 1.05rem;
    color: var(--tekst-licht-zacht);
}

/* Optionele strook "Spelregels van de weg" */
.spelregels {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: 2rem;
    border-top: 1px dashed rgba(245, 242, 234, .3);
}

.spelregels__titel {
    margin-bottom: 1.25rem;
    text-align: center;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--markering);
}

.spelregels__lijst {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.spelregel {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius);
    font-weight: 600;
}

.spelregel__picto {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--wegwijzer);
    color: var(--wit);
    font-size: 1.1rem;
    border-radius: var(--radius);
}

.spelregel__oordeel {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-left: auto;
    font-size: .85rem;
    border-radius: 50%;
    color: var(--wit);
}

.spelregel--ok .spelregel__oordeel {
    background: var(--groen);
}

.spelregel--nee .spelregel__oordeel {
    background: var(--rood);
}

/* --- FAQ (afslag 3): bordplaten aan een bewegwijzeringspaal ---------------- */
.faq-lijst {
    position: relative;
    display: grid;
    gap: .9rem;
    padding-left: 1.5rem;
}

/* de paal */
.faq-lijst::before {
    content: '';
    position: absolute;
    top: -1.5rem;
    bottom: -1.5rem;
    left: .35rem;
    width: .6rem;
    background: linear-gradient(90deg, #a2a8b0, #6b7079 55%, #565b63);
    border-radius: .3rem;
}

.faq-item {
    background: var(--wit);
    border-left: 6px solid var(--wegwijzer);
    border-radius: 0 var(--radius) var(--radius) 0;
    box-shadow: 0 6px 18px rgba(20, 22, 24, .08);
    transition: box-shadow var(--overgang);
}

.faq-item.is-open {
    box-shadow: 0 12px 30px rgba(11, 92, 171, .18);
}

.faq-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 3rem;
    padding: 1.1rem 1.25rem .95rem;
    background: none;
    border: 0;
    text-align: left;
    font-size: clamp(1.02rem, 1.8vw, 1.15rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--stift);
    cursor: pointer;
    transition: background-color var(--overgang);
}

.faq-toggle:hover {
    background: rgba(11, 92, 171, .05);
}

.faq-chevron {
    flex: none;
    color: var(--wegwijzer);
    transition: transform .3s ease;
}

.faq-item.is-open .faq-chevron {
    transform: rotate(180deg);
}

/* antwoord schuift open via grid-rows 0fr → 1fr */
.faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s ease;
}

.faq-antwoord {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s .35s;
}

.faq-item.is-open .faq-content {
    grid-template-rows: 1fr;
}

.faq-item.is-open .faq-antwoord {
    visibility: visible;
    transition-delay: 0s;
}

.faq-antwoord__tekst {
    margin: 0 1.25rem;
    padding: .9rem 0 1.25rem;
    border-top: 1px solid var(--wegwit-2);
    color: var(--tekst-zacht);
    line-height: 1.65;
}

/* --- Team (afslag 4): polaroids van een roadtrip --------------------------- */
.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem 2rem;
    justify-items: center;
    padding: 1rem 0;
}

.team-grid--hoofd {
    margin-bottom: 2.5rem;
}

.polaroid {
    position: relative;
    width: 100%;
    max-width: 18rem;
    padding: .8rem .8rem 1.1rem;
    background: var(--wit);
    box-shadow: 0 12px 30px rgba(20, 22, 24, .18), 0 2px 6px rgba(20, 22, 24, .1);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}

/* plakband */
.polaroid::before {
    content: '';
    position: absolute;
    top: -.75rem;
    left: 50%;
    z-index: 1;
    width: 5.5rem;
    height: 1.5rem;
    transform: translateX(-50%) rotate(-4deg);
    background: rgba(255, 250, 220, .6);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

/* licht afwisselende draaiing, trekt recht bij hover */
.team-grid .polaroid:nth-child(4n+1) { transform: rotate(-2deg); }
.team-grid .polaroid:nth-child(4n+2) { transform: rotate(1.5deg); }
.team-grid .polaroid:nth-child(4n+3) { transform: rotate(-1deg); }
.team-grid .polaroid:nth-child(4n+4) { transform: rotate(2deg); }

.team-grid .polaroid:hover,
.team-grid .polaroid:focus-within {
    z-index: 2;
    transform: rotate(0) translateY(-.4rem);
    box-shadow: 0 22px 45px rgba(20, 22, 24, .22);
}

.polaroid__foto {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--asfalt);
}

.polaroid__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* zonder foto: rolicoon groot op asfaltdonker vlak */
.polaroid__icoon {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: var(--asfalt) var(--textuur-asfalt);
    background-blend-mode: soft-light;
    color: var(--markering);
    font-size: 4.5rem;
}

.polaroid__onderschrift {
    padding-top: .9rem;
    text-align: center;
}

.polaroid__naam {
    margin-bottom: .5rem;
    font-family: var(--font-stift);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.1;
    color: var(--stift);
}

.polaroid__rol {
    display: inline-block;
    margin: 0 0 .6rem;
    padding: .38rem .7rem .25rem;
    background: var(--wegwijzer);
    color: var(--wit);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: 3px;
}

.polaroid__tekst {
    margin: 0;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--tekst-zacht);
}

/* --- Contact (eindbestemming): de nachtrit --------------------------------- */
.contact-grid {
    display: grid;
    gap: 2rem;
}

.wegwijzers {
    display: grid;
    align-content: start;
    gap: 1rem;
}

/* contactitems als wegwijzers (pijlvorm) */
.wegwijzer-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 2.25rem 1rem 1.25rem;
    background: var(--asfalt-2);
    border-left: 5px solid var(--markering);
    clip-path: polygon(0 0, calc(100% - 1.1rem) 0, 100% 50%, calc(100% - 1.1rem) 100%, 0 100%);
    transition: transform var(--overgang), background-color var(--overgang);
}

.wegwijzer-item:hover {
    transform: translateX(6px);
    background: var(--asfalt-3);
}

.wegwijzer-item__icoon {
    flex: none;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    background: var(--markering);
    color: var(--stift);
    font-size: 1.2rem;
    border-radius: var(--radius);
}

.wegwijzer-item__titel {
    margin-bottom: .2rem;
    font-size: 1.05rem;
}

.wegwijzer-item p,
.wegwijzer-item a {
    margin: 0;
    color: var(--tekst-licht-zacht);
    text-decoration: none;
}

.wegwijzer-item a:hover {
    color: var(--markering);
    text-decoration: underline;
}

/* CTA als verlicht tankstationbord */
.tankstation {
    position: relative;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: var(--markering);
    color: var(--stift);
    border: 3px solid var(--stift);
    border-radius: var(--radius);
    box-shadow: 0 0 0 4px var(--markering), 0 0 70px rgba(247, 197, 61, .35), 0 25px 50px rgba(0, 0, 0, .45);
}

.tankstation h3 {
    margin-bottom: 1rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.tankstation p {
    margin-bottom: 1.5rem;
    font-weight: 600;
}


/* ==========================================================================
   7. KERSTMODUS
   ========================================================================== */
.kerst-lampjes {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
    height: 60px;
    pointer-events: none;
}

/* het snoer */
.kerst-lampjes::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--asfalt-2);
}

.kerst-lamp {
    position: relative;
    width: 16px;
    height: 26px;
    margin-top: 14px;
    background: currentColor;
    border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%;
    box-shadow: 0 0 12px 2px currentColor;
    animation: twinkle 1.5s ease-in-out infinite;
}

/* de fitting */
.kerst-lamp::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 3px;
    width: 10px;
    height: 8px;
    background: var(--asfalt-3);
    border-radius: 2px;
}

.kerst-lamp:nth-child(8n+1) { color: #ff3b3b; animation-delay: 0s; }
.kerst-lamp:nth-child(8n+2) { color: #3ddc5a; animation-delay: .2s; }
.kerst-lamp:nth-child(8n+3) { color: #3b8bff; animation-delay: .4s; }
.kerst-lamp:nth-child(8n+4) { color: #ffe23b; animation-delay: .6s; }
.kerst-lamp:nth-child(8n+5) { color: #ff4fd8; animation-delay: .8s; }
.kerst-lamp:nth-child(8n+6) { color: #3be8ff; animation-delay: 1s; }
.kerst-lamp:nth-child(8n+7) { color: #ffa53b; animation-delay: 1.2s; }
.kerst-lamp:nth-child(8n+8) { color: #ff6b9d; animation-delay: 1.4s; }

.kerst-balk {
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 9998;
    width: 100%;
    padding: .7rem 0 .6rem;
    overflow: hidden;
    background: linear-gradient(90deg, #c41e3a 0%, #165b33 50%, #c41e3a 100%);
    color: var(--wit);
    font-weight: 700;
}

.kerst-balk__loop {
    display: flex;
    width: max-content;
    animation: kerst-scroll 30s linear infinite;
}

.kerst-balk__tekst {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0 3rem;
    white-space: nowrap;
}

.kerst-balk__icoon {
    color: var(--markering);
    animation: kerst-stuiter 2s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.85); }
}

@keyframes kerst-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes kerst-stuiter {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}


/* ==========================================================================
   8. MEDIA QUERIES & REDUCED MOTION
   ========================================================================== */

/* Smalle schermen: knoppen onder elkaar, bordjes compacter */
@media (max-width: 480px) {
    .hero__knoppen {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .hero__knoppen .knop {
        width: 100%;
    }

    .karton {
        padding: .85rem 1rem .6rem;
        font-size: 1rem;
    }

    .status {
        padding-right: 2.5rem;
    }
}

/* Pitstops: 2 kolommen, horizontale routelijn door de paaltjes */
@media (min-width: 640px) {
    .pitstops {
        grid-template-columns: repeat(2, 1fr);
        padding: 2rem .5rem .75rem;
        margin-inline: -.5rem;
        overflow: hidden;
    }

    .pitstops::before {
        display: none;
    }

    .pitstop::before {
        content: '';
        position: absolute;
        top: calc(-.6rem - 2px);
        left: -1rem;
        right: -1rem;
        height: 4px;
        background: repeating-linear-gradient(90deg, var(--lijn) 0 1rem, transparent 1rem 1.75rem);
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-grid[data-cols="1"] {
        grid-template-columns: 1fr;
    }
}

/* Tablet en groter */
@media (min-width: 768px) {
    .liften {
        grid-template-columns: auto 1fr;
        gap: 2.5rem;
    }

    .liften__tekst {
        text-align: left;
    }

    .spelregels__lijst {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero__indicators {
        gap: .35rem;
    }
}

/* Contact naast elkaar */
@media (min-width: 860px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
        align-items: start;
    }
}

/* Pitstops in 3 kolommen */
@media (min-width: 960px) {
    .pitstops {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Team: hoofdteam 4 breed, extra-grid volgens data-cols */
@media (min-width: 1000px) {
    .team-grid--hoofd {
        grid-template-columns: repeat(4, 1fr);
    }

    .team-grid[data-cols="3"] {
        grid-template-columns: repeat(3, 1fr);
        max-width: 60rem;
        margin-inline: auto;
    }

    .team-grid[data-cols="2"] {
        max-width: 42rem;
        margin-inline: auto;
    }

    .team-grid[data-cols="1"] {
        max-width: 20rem;
        margin-inline: auto;
    }
}

/* Reduced motion: geen wieg-, kantel-, fade- of scrollanimaties */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .infaden {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .thema,
    .kerst-lamp,
    .kerst-balk__icoon {
        animation: none;
    }

    .kerst-balk__loop {
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        animation: none;
    }

    .kerst-balk__tekst:nth-child(2) {
        display: none;
    }

    .hero-slide,
    .indicator::before,
    .knop,
    .knop__icoon,
    .pitstop,
    .pitstop__icoon,
    .polaroid,
    .faq-item,
    .faq-toggle,
    .faq-chevron,
    .faq-content,
    .faq-antwoord,
    .wegwijzer-item {
        transition: none;
    }

    /* polaroids liggen recht, ook bij hover: geen kantel of sprong */
    .team-grid .polaroid:nth-child(n),
    .team-grid .polaroid:hover,
    .team-grid .polaroid:focus-within {
        transform: none;
    }

    .pitstop:hover,
    .pitstop:hover .pitstop__icoon,
    .knop:hover .knop__icoon,
    .knop:focus-visible .knop__icoon,
    .wegwijzer-item:hover {
        transform: none;
    }
}


/* ==========================================================================
   9. AANPASSINGEN (Claude) — hero lichter, Over Ons foto naast tekst,
      teamfoto's premium, en de premium "lift"-animatie op de duim.
      Staat bewust als laatste blok zodat het eerdere regels overschrijft.
   ========================================================================== */

/* --- 9.1 Hero iets lichter: minder donkere overlay, foto komt beter door ---- */
.hero-overlay {
    background:
        radial-gradient(ellipse at center, transparent 58%, rgba(27, 30, 34, .32) 100%),
        linear-gradient(180deg, rgba(27, 30, 34, .42) 0%, rgba(27, 30, 34, .10) 40%, rgba(27, 30, 34, .20) 68%, rgba(27, 30, 34, .70) 100%);
}

/* --- 9.2 Inschrijfstatus-band (verplaatst uit Over Ons) --------------------- */
.status-band { padding-block: clamp(2rem, 5vw, 3.25rem); }
.status-band .bordplaat { margin: 0 auto; text-align: center; max-width: 44rem; }
.status-band .bordplaat h3 { display: flex; align-items: center; justify-content: center; gap: .6rem; }

/* --- 9.3 Over Ons: tekst-box + losse polaroid-foto ernaast.
       De footer-JS haalt de enige foto uit de tekst en plaatst 'm in .over-foto,
       met .over-layout als 2-koloms grid → korter en netter. --------------- */
/* bredere sectie zodat de tekst-box breder en lager wordt */
#over-ons > .container { max-width: 92rem; }

.over-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) {
    .over-layout { grid-template-columns: minmax(0, 1fr) 36rem; gap: 2.5rem; align-items: stretch; }
}

/* Leukere, thematische tekst-box: warm "logboek"-papier + gele wegmarkering-streep */
.over-layout .dagboek {
    margin: 0;
    background: linear-gradient(180deg, #fffdf7 0%, #f7f2e7 100%);
    border: 1px solid rgba(20, 22, 24, .08);
    border-left: 0;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(20, 22, 24, .12), 0 3px 8px rgba(20, 22, 24, .06);
    padding: clamp(1.9rem, 3.2vw, 3rem) clamp(1.6rem, 3vw, 2.75rem) clamp(1.6rem, 3vw, 2.5rem);
    position: relative;
    overflow: hidden;
}
.over-layout .dagboek::before {   /* wegmarkering-streep bovenaan */
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: repeating-linear-gradient(90deg, var(--markering) 0 24px, transparent 24px 44px);
}

.over-foto {
    position: relative; justify-self: center; margin: 0; max-width: 34rem;
    background: var(--wit); padding: .8rem .8rem 1.2rem; border-radius: 2px;
    box-shadow: 0 16px 38px rgba(20, 22, 24, .22), 0 2px 6px rgba(20, 22, 24, .12);
    transform: rotate(-2.4deg);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease;
}
.over-foto::before {   /* plakband */
    content: ''; position: absolute; top: -.75rem; left: 50%; z-index: 1;
    width: 6rem; height: 1.6rem; transform: translateX(-50%) rotate(-4deg);
    background: rgba(255, 250, 220, .6); box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.over-foto img { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: 1px; }
.over-foto:hover { transform: rotate(0) translateY(-.4rem); box-shadow: 0 26px 54px rgba(20, 22, 24, .28); }
/* Desktop: foto vult altijd de volle hoogte van de tekst-box */
@media (min-width: 860px) {
    .over-foto { position: relative; top: 0; height: 100%; display: flex; flex-direction: column; }
    .over-foto img { aspect-ratio: auto; height: auto; flex: 1 1 auto; min-height: 0; }
}

/* Fallback als JS uitstaat: editor-grepen weg, foto niet enorm groot */
.dagboek__tekst .image-resize-handle { display: none !important; }
.dagboek__tekst p:empty { display: none; }
.dagboek__tekst img { max-width: 20rem; height: auto; border-radius: 4px; }

/* --- 9.4 Teamfoto's: iets groter + subtiele premium beeldbewerking + crisp -- */
.polaroid { max-width: 19.5rem; }
.polaroid__foto img {
    filter: saturate(1.06) contrast(1.03);
    transform: translateZ(0);        /* eigen laag → scherpere rasterisatie ook bij lichte rotatie */
    backface-visibility: hidden;
    image-rendering: auto;
}

/* --- 9.5 Premium "lift"-effect op de grote duim ---------------------------- */
.liften__duim {
    position: relative;
    overflow: visible;
    animation: gl-duim-bob 3.8s ease-in-out infinite;
    will-change: transform;
}
.liften__duim i {
    position: relative;
    z-index: 2;
    display: inline-block;
    transform-origin: 62% 78%;
    animation: gl-duim-thumb 3.8s ease-in-out infinite;
}
/* signaal-ring die naar buiten pulseert (liften: aandacht trekken) */
.liften__duim::before {
    content: "";
    position: absolute; inset: -2px;
    border-radius: 50%;
    border: 3px solid var(--markering);
    z-index: 0; pointer-events: none;
    animation: gl-duim-signal 3.8s ease-out infinite;
}
/* glans die over de bordplaat veegt (premium sheen) */
.liften__duim::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    z-index: 1; pointer-events: none;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .55) 50%, transparent 58%);
    background-size: 260% 100%;
    background-repeat: no-repeat;
    background-position: 160% 0;
    animation: gl-duim-shine 4.6s ease-in-out infinite;
}
/* Interactie: "een auto stopt" — duim gaat vol omhoog, sterker glow, rechter */
.liften:hover .liften__duim,
.liften:focus-within .liften__duim {
    animation-play-state: paused;
    transform: rotate(0) scale(1.06);
    box-shadow: 0 0 0 4px var(--markering), 0 0 34px rgba(247, 197, 61, .6), 0 14px 34px rgba(0, 0, 0, .55);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.liften:hover .liften__duim i,
.liften:focus-within .liften__duim i {
    animation: none;
    transform: rotate(-14deg) translateY(-5px);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes gl-duim-bob {
    0%, 100% { transform: rotate(-8deg) translateY(0); }
    50%      { transform: rotate(-4deg) translateY(-7px); }
}
@keyframes gl-duim-thumb {
    0%, 52%, 100% { transform: rotate(0) translateY(0); }
    64%           { transform: rotate(-15deg) translateY(-5px); }  /* duim omhoog! */
    84%           { transform: rotate(-15deg) translateY(-5px); }
}
@keyframes gl-duim-signal {
    0%   { transform: scale(.82); opacity: .5; }
    70%  { opacity: 0; }
    100% { transform: scale(1.75); opacity: 0; }
}
@keyframes gl-duim-shine {
    0%, 42%   { background-position: 160% 0; }
    62%       { background-position: -60% 0; }
    100%      { background-position: -60% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .liften__duim,
    .liften__duim i { animation: none !important; }
    .liften__duim { transform: rotate(-8deg); }
    .liften__duim::before,
    .liften__duim::after { display: none; }
    .dagboek__tekst .image-resize-container { transition: none; }
}