/* MadeFlow uitlegpagina, merkkleuren van Jeroen van Eerden (2026-07-02),
   sinds de volledige huisstijl-levering van 7 sep 2026 gevoed uit brand.css.
   Motief: zachte binnenkant + rand in de volle kleur. Groen (Amulet) is de baas. */
:root {
    --green: var(--mf-amulet);
    --green-soft: #E8EFE3;
    --green-ink: var(--mf-amulet-deep);
    --gold: var(--mf-marigold);
    --gold-soft: #F7EBCF;
    --gold-ink: #7a5c1c;
    --purple: var(--mf-rum);
    --purple-soft: #E9E4EE;
    --purple-ink: #4f4159;
    --orange: var(--mf-paarl);
    --orange-soft: #F1DFD3;
    --orange-ink: var(--mf-paarl-deep);
    --dark: var(--mf-siam);
    --cream: var(--mf-spring-wood);
    --cream2: var(--mf-paper);
    --ink: var(--mf-ink);
    --muted: var(--mf-siam-light);
    --line: #E4E0D6;
}
* { box-sizing: border-box; }

/* Toetsenbord en schermlezer. Deze drie regels zijn onzichtbaar voor wie
   met een muis kijkt, en het verschil tussen wel en niet bruikbaar voor
   wie dat niet doet. */
.overslaan {
    position: absolute; left: 12px; top: -60px; z-index: 200;
    background: var(--green-ink); color: #fff; padding: 12px 20px;
    border-radius: 8px; text-decoration: none; font-weight: 600;
    transition: top 150ms ease;
}
.overslaan:focus { top: 12px; }

/* Waar de focus staat moet je kunnen zien; de browser-default verdwijnt
   op gekleurde vlakken. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--green-ink);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Wie in zijn systeem heeft aangegeven minder beweging te willen, krijgt
   die ook niet. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--mf-ff-tekst);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
.w { max-width: 960px; margin: 0 auto; padding: 0 24px; }
.w-narrow { max-width: 680px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { font-family: var(--mf-ff-kop); font-weight: 400; line-height: 1.15; margin: 0; }
/* Amulet is een vlakkleur (2.5 : 1 op papier); tekst krijgt de verdiepte tint. */
/* Outfit heeft geen echte cursief; die haalt de schreefletter erbij. */
em { font-family: var(--mf-ff-kop); font-style: italic; color: var(--green-ink); }
section { padding: 76px 0; }
section + section { border-top: 1px solid var(--line); }
/* De aanloopregel boven een kop: klein, kapitaal, ruime letterafstand.
   Geen eigen lettertype, alleen een vorm. */
.kicker { font-family: var(--mf-ff-tekst); font-size: .8rem; font-weight: 600;
          letter-spacing: .18em; text-transform: uppercase; color: var(--green-ink); }
p { margin: 0 0 16px; }
.muted { color: var(--muted); }

.card { background: var(--cream2); border: 2px solid var(--line); border-radius: 10px; padding: 24px; }
.card.green { background: var(--green-soft); border-color: var(--green); }
.card.gold { background: var(--gold-soft); border-color: var(--gold); }
.card.purple { background: var(--purple-soft); border-color: var(--purple); }
.card.orange { background: var(--orange-soft); border-color: var(--orange); }
.tagline { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; }
.green .tagline { color: var(--green-ink); }
.gold .tagline { color: var(--gold-ink); }
.purple .tagline { color: var(--purple-ink); }
.orange .tagline { color: var(--orange-ink); }
.card h3 { font-size: 1.15rem; margin-bottom: 6px; }
.card p { margin: 0; color: var(--mf-siam); font-size: .95rem; }

nav.uitleg-nav { background: transparent; }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; max-width: 960px; margin: 0 auto; }
/* Op een telefoon passen drie links niet naast het logo: dan onder elkaar,
   logo boven, links eronder op een rij die mag wikkelen. */
@media (max-width: 620px) {
    .nav-in { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 20px; }
    .nav-in > div:last-child { flex-wrap: wrap; gap: 14px 18px; }
}
.logo { display: flex; align-items: center; }
/* Het woordmerk is onderdeel van het logo-bestand; geen losse tekst ernaast. */
.logo img { height: 30px; width: auto; display: block; }
@media (max-width: 620px) { .logo img { height: 24px; } }
.nav-mail { color: var(--green-ink); text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.nav-mail:hover { text-decoration: underline; }

.hero { background: linear-gradient(180deg, var(--green-soft), var(--cream)); text-align: center; border-bottom: 1px solid var(--line); }
.hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); max-width: 800px; margin: 0 auto; }
.hero .sub { max-width: 640px; margin: 22px auto 0; font-size: 1.15rem; color: var(--mf-siam); }

.grid { display: grid; gap: 16px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .g3 { grid-template-columns: 1fr; } }
.sec-head { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.sec-head h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.sec-head p { color: var(--muted); font-size: 1.05rem; margin-top: 12px; }

.verhaal p { font-size: 1.08rem; }
.verhaal .slotzin { font-family: var(--mf-ff-kop); font-size: 1.35rem; color: var(--green-ink); margin-top: 26px; }

.twee-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
@media (max-width: 820px) { .twee-kolom { grid-template-columns: 1fr; } }
.twee-kolom h2 { font-size: 1.8rem; margin-bottom: 16px; }

.tijden { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 2px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--cream2); }
@media (max-width: 820px) { .tijden { grid-template-columns: 1fr; } }
.tijd { padding: 34px 30px; }
.tijd.oud { background: var(--gold-soft); border-right: 2px solid var(--line); }
@media (max-width: 820px) { .tijd.oud { border-right: 0; border-bottom: 2px solid var(--line); } }
.tijd.nieuw { background: var(--green-soft); }
.tijd .jaartal { font-family: var(--mf-ff-kop); font-size: 2.4rem; }
.tijd.oud .jaartal { color: var(--gold-ink); }
.tijd.nieuw .jaartal { color: var(--green-ink); }
.tijd ul { margin: 14px 0 0; padding: 0; list-style: none; }
.tijd li { padding: 9px 0; border-bottom: 1px solid rgba(0, 0, 0, .06); color: var(--mf-lunar-green); font-size: .98rem; }
.tijd li:last-child { border-bottom: 0; }
.tijden-brug { text-align: center; max-width: 640px; margin: 34px auto 0; font-size: 1.12rem; color: var(--mf-siam); }

.ai-lijst { list-style: none; padding: 0; margin: 18px 0 0; }
.ai-lijst li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.ai-lijst li:last-child { border-bottom: 0; }
.ai-lijst strong { display: block; margin-bottom: 2px; }
.ai-lijst span { color: var(--mf-siam); font-size: .95rem; }

/* Een zachte haak halverwege, op de plek waar de lezer zich afvraagt of
   dit bij hem ook kan. Geen knop: een regel die naar het slot wijst. */
.haak { margin: 30px 0 0; padding: 16px 20px; background: var(--green-soft);
        border-left: 3px solid var(--green); border-radius: 0 10px 10px 0; }
.haak p { margin: 0; font-size: .98rem; color: var(--green-ink); }
.haak a { color: var(--green-ink); font-weight: 600; text-underline-offset: 3px; }

/* Het slot: de enige plek op de pagina die om iets vraagt. Daarom een
   eigen vlak, en de twee kaarten zeggen eerlijk waar het wel en niet
   over gaat, zodat niemand hoeft te gokken wat hij krijgt. */
.slot { background: var(--cream2); text-align: center; border-top: 1px solid var(--line); }
.slot h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); max-width: 680px; margin: 6px auto 0; }
.slot .slot-lead { max-width: 580px; margin: 18px auto 0; color: var(--mf-siam); font-size: 1.08rem; }
.slot-kaarten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 34px 0 0; text-align: left; }
@media (max-width: 700px) { .slot-kaarten { grid-template-columns: 1fr; } }
.slot-kaart { background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; }
.slot-kaart h3 { font-family: var(--mf-ff-tekst); font-size: .74rem; font-weight: 600; letter-spacing: .14em;
                 text-transform: uppercase; color: var(--green-ink); margin: 0 0 9px; }
.slot-kaart p { margin: 0; font-size: .95rem; color: var(--mf-siam); }
.slot-contact { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 32px; }
/* Wit op Amulet haalt 2,7 : 1 en is dus onleesbaar; op Amulet verdiept is het 5,8 : 1. */
.mail-link { display: inline-block; background: var(--green-ink); color: #fff; text-decoration: none;
             font-weight: 600; padding: 14px 26px; border-radius: 8px; }
.mail-link:hover { filter: brightness(1.08); }
.slot-tel { display: inline-block; padding: 14px 24px; border: 1px solid var(--line); border-radius: 8px;
            color: var(--green-ink); text-decoration: none; font-weight: 600; background: var(--cream); }
.slot-tel:hover { border-color: var(--green-ink); }
.slot-wie { max-width: 520px; margin: 22px auto 0; font-size: .9rem; color: var(--muted); }

footer.uitleg-footer { padding: 36px 0; text-align: center; color: var(--muted); font-size: .9rem; }
footer.uitleg-footer .flinks { margin-top: 10px; }
footer.uitleg-footer a { color: var(--green-ink); text-decoration: none; margin: 0 10px; }
footer.uitleg-footer a:hover { text-decoration: underline; }

/* height:auto hoort hierbij: de width- en height-attributen in de HTML zijn
   er om de plek alvast te reserveren tijdens het laden, niet om de maat te
   bepalen. Zonder deze regel wint het attribuut en worden foto's uitgerekt. */
img { max-width: 100%; height: auto; display: block; }
.foto-band { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.foto-band img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 10px; border: 2px solid var(--line); }
figure { margin: 0; }
figcaption { font-family: var(--mf-ff-tekst); font-size: .72rem; font-weight: 600;
             letter-spacing: .16em; text-transform: uppercase; color: var(--dark);
             margin-top: 12px; text-align: center; }
.foto-portret img { width: 100%; border-radius: 10px; border: 2px solid var(--gold); background: var(--gold-soft); }
.brood-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
@media (max-width: 820px) { .brood-strip { grid-template-columns: 1fr; } }
.brood-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 2px solid var(--line); }
.schermen { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 34px; }
@media (max-width: 820px) { .schermen { grid-template-columns: 1fr; } }
.schermen img { width: 100%; border-radius: 10px; border: 2px solid var(--line); background: #fff; }
.portret-rond { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid var(--green); margin: 0 auto 18px; }
.foto-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 34px; }
@media (max-width: 820px) { .foto-rij { grid-template-columns: 1fr; } }
.foto-rij img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 2px solid var(--line); }
.kolom-beeld { margin-top: 24px; }
.kolom-beeld.crop-43 img { aspect-ratio: 4 / 3; object-fit: cover; }
.kolom-beeld.crop-45 img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center 30%; }
.kolom-beeld img, .kolom-beeld svg { width: 100%; height: auto; border-radius: 10px; border: 2px solid var(--line); background: var(--cream2); display: block; }
.kolom-beeld svg text { font-family: var(--mf-ff-tekst); }

/* v10: uitlegpagina met techniek, werkwijze en veiligheid */
.g2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .g2 { grid-template-columns: 1fr; } }
.ai-lijst strong .wie { margin-left: 8px; vertical-align: middle; }
.hero .inhoud a { color: var(--green-ink); }
.stroom { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:8px; }
@media (max-width:820px) { .stroom { grid-template-columns:1fr 1fr; } }
.stap { background:var(--cream2); border:2px solid var(--line); border-radius: 10px; padding:16px 14px; display:flex; flex-direction:column; gap:6px; min-height:190px; }
.stap .nr { font-family:var(--mf-ff-kop); font-size:1.6rem; color:var(--muted); line-height:1; }
.stap h3 { font-size:1.05rem; }
.stap p { font-size:.86rem; color:var(--mf-siam); margin:0; flex-grow:1; }
.wie { display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border-radius:4px; padding:4px 10px; width:max-content; }
.wie.hand { background:var(--gold-soft); color:var(--gold-ink); }
.wie.machine { background:var(--green-soft); color:var(--green-ink); }
.wie.ai { background:var(--purple-soft); color:var(--purple-ink); }
.legenda { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:0 0 22px; }
.legenda span { font-size:.85rem; color:var(--mf-siam); }
.legenda .wie { margin-right:4px; }
.arch { background:var(--cream2); border:2px solid var(--line); border-radius: 10px; padding:28px; margin-top:8px; }
.arch-rij { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:820px) { .arch-rij { grid-template-columns:1fr; } }
.arch-laag { border-radius: 10px; padding:14px 16px; border:1.5px solid var(--line); background:var(--cream); }
.arch-laag h3 { margin:0 0 4px; font-family:var(--mf-ff-tekst); font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.arch-laag div { font-size:.92rem; color:var(--mf-lunar-green); }
.arch-band { text-align:center; font-family:var(--mf-ff-tekst); font-size:.74rem; font-weight:600;
            letter-spacing:.16em; text-transform:uppercase; color:var(--dark); margin:12px 0; }
.arch-laag.groen { background:var(--green-soft); border-color:var(--green); }
.arch-laag.paars { background:var(--purple-soft); border-color:var(--purple); }
.arch-laag.goud { background:var(--gold-soft); border-color:var(--gold); }
.cijfers { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:30px; }
@media (max-width:820px) { .cijfers { grid-template-columns:1fr 1fr; } }
.cijfer { text-align:center; padding:18px 10px; border-radius: 10px; background:var(--cream2); border:2px solid var(--line); }
.cijfer b { display:block; font-family:var(--mf-ff-kop); font-weight:400; font-size:2rem; color:var(--green-ink); line-height:1.1; }
.cijfer span { font-size:.85rem; color:var(--mf-siam); }
.loop { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:8px; }
@media (max-width:820px) { .loop { grid-template-columns:1fr; } }
.poort { border-radius: 10px; padding:16px 14px; background:var(--cream2); border:2px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.poort.mens { border-color:var(--gold); background:var(--gold-soft); }
.poort .lbl { font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.poort.mens .lbl { color:var(--gold-ink); }
.poort h3 { font-size:1.02rem; }
.poort p { font-size:.86rem; color:var(--mf-siam); margin:0; }
.poort code { font-family:ui-monospace,Menlo,monospace; font-size:.82rem; background:rgba(0,0,0,.05); padding:1px 5px; border-radius: 6px; }
table.tijd { width:100%; border-collapse:collapse; margin-top:8px; background:var(--cream2); border:2px solid var(--line); border-radius: 10px; overflow:hidden; }
table.tijd th, table.tijd td { padding:11px 14px; border-bottom:1px solid var(--line); text-align:left; font-size:.95rem; vertical-align:top; }
table.tijd th { font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); background:var(--cream); }
table.tijd td.n { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
table.tijd tr.totaal td { font-weight:700; background:var(--green-soft); border-bottom:0; }
.schatting { font-family:var(--mf-ff-tekst); font-size:.74rem; font-weight:600; letter-spacing:.16em;
            text-transform:uppercase; color:var(--gold-ink); text-align:center; margin-top:14px; }
.wrap-x { overflow-x:auto; }
.stappen { counter-reset:s; display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.stappen .s { display:grid; grid-template-columns:56px 1fr; gap:14px; align-items:start; }
.stappen .s::before { counter-increment:s; content:counter(s); font-family:var(--mf-ff-kop); font-size:2rem; color:var(--green-ink); line-height:1; }
.stappen h3 { font-size:1.1rem; margin-bottom:4px; }
.stappen p { font-size:.98rem; color:var(--mf-lunar-green); margin:0; }
.kolom-beeld.crop-staand img { aspect-ratio:4/5; object-fit:cover; object-position:center 40%; }
.tijdlijn { list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; }
.tijdlijn li { display:grid; grid-template-columns:110px 1fr; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.tijdlijn li:last-child { border-bottom:0; }
.tijdlijn b { font-family:var(--mf-ff-kop); font-weight:400; font-size:1.05rem; color:var(--gold-ink); }
.tijdlijn span { font-size:.95rem; color:var(--mf-lunar-green); }
.borg { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.borg li { display:grid; grid-template-columns:22px 1fr; gap:8px; font-size:.93rem; color:var(--mf-lunar-green); align-items:start; }
.borg li svg { margin-top:4px; }
.quote { font-family:var(--mf-ff-kop); font-style:italic; font-size:1.3rem; line-height:1.45; color:var(--green-ink); border-left:3px solid var(--green); padding:6px 0 6px 20px; margin:22px 0; }
.inhoud { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px auto 0; }
.inhoud a { text-decoration: none; background: var(--cream2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 16px; font-size: .9rem; font-weight: 600; color: var(--green-ink); }
p a { color: var(--green-ink); }