/* ============================================================
   iHypotheek, site-stylesheet
   Oranje uit het merkteken, teal voor wat je opschiet, navy
   voor de rustige vlakken.
   ============================================================ */

/* Museo Slab zet de koppen: het schrift van iHypotheek sinds 2013. Zelf
   gehost, zodat er voor de merkletter geen verzoek naar een andere server
   gaat. Drie gewichten, samen zo'n 53 kB.

   `font-display: swap` toont meteen de terugvalletter en wisselt zodra Museo
   Slab binnen is. Zonder dat staat een kop bij een trage verbinding seconden
   onzichtbaar. */
@font-face {
    font-family: "Museo Slab";
    src: url("/assets/fonts/museoslab-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Museo Slab";
    src: url("/assets/fonts/museoslab-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Museo Slab";
    src: url("/assets/fonts/museoslab-900.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* -- merk -- */
    --ih-oranje:      #F38F1B;
    --ih-oranje-diep: #D97709;
    --ih-oranje-was:  #FEF3E4;
    --ih-oranje-was2: #FCE6C8;
    --ih-teal:        #3AAAA5;
    --ih-teal-diep:   #2A8480;
    --ih-teal-was:    #E6F5F4;
    --ih-navy:        #32446E;
    --ih-navy-diep:   #1F2C48;

    /* -- neutraal -- */
    --ih-inkt:      #1B1D21;
    --ih-inkt-zacht:#5B6169;
    --ih-lijn:      #E7E4DE;
    --ih-doek:      #FBFAF8;
    --ih-vlak:      #FFFFFF;
    --ih-vlak-alt:  #F5F2ED;

    /* -- vorm -- */
    --ih-r-sm: 10px;
    --ih-r-md: 14px;
    --ih-r-lg: 20px;
    --ih-r-xl: 28px;
    --ih-r-pil: 999px;

    /* -- diepte -- */
    --ih-schaduw:      0 8px 30px rgba(27, 29, 33, .07);
    --ih-schaduw-kaart:0 18px 50px -14px rgba(27, 29, 33, .22);
    --ih-schaduw-gloed:0 8px 22px rgba(243, 143, 27, .30);

    /* -- ritme -- */
    --ih-sectie: clamp(3.5rem, 7vw, 6rem);

    /* -- beweging -- */
    --ih-ease: cubic-bezier(.22, 1, .36, 1);

    /* -- letters --
       Twee families. Museo Slab zet de koppen en de uitgelichte bedragen: het
       schrift van iHypotheek, dat het oranje van het merk aankan. Inter doet al
       het overige, want een pagina vol bedragen leest het prettigst in een
       rustige schreefloze met echte tabelcijfers. */
    --ih-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
    --ih-font-kop: "Museo Slab", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.ih-body {
    margin: 0;
    font-family: var(--ih-font);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ih-inkt);
    background: var(--ih-doek);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

img { max-width: 100%; height: auto; }
a { color: var(--ih-oranje-diep); text-decoration: none; }
a:hover { color: var(--ih-oranje); }
::selection { background: var(--ih-oranje-was2); color: var(--ih-inkt); }
:focus-visible { outline: 2px solid var(--ih-oranje); outline-offset: 2px; }

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    font-family: var(--ih-font-kop);
    font-weight: 700;
    letter-spacing: -.012em;
    line-height: 1.14;
    text-wrap: balance;
}
h1 {
    font-size: clamp(2.3rem, 4.8vw, 3.6rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.022em;
}
h2 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); font-weight: 900; }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.004em; }
h5 {
    margin: 0 0 .5em;
    font-size: .72rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ih-inkt-zacht);
}
p  { margin: 0 0 1rem; text-wrap: pretty; }

/* Bedragen en looptijden staan vaak onder elkaar. Met tabelcijfers lopen de
   kolommen recht, ook als het ene bedrag drie cijfers heeft en het andere zes. */
.ih-regels, .ih-tabel, .ih-kern__waarde, .ih-veld input { font-variant-numeric: tabular-nums; }

.accent { color: var(--ih-oranje); }
.container { width: min(1140px, 100% - 2.5rem); margin-inline: auto; }
.ih-smal { width: min(760px, 100% - 2.5rem); margin-inline: auto; }

.ih-skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    padding: .7rem 1.1rem; background: var(--ih-inkt); color: #fff;
    border-radius: 0 0 var(--ih-r-sm) 0;
}
.ih-skip:focus { left: 0; }

/* ---------------- knoppen ---------------- */
.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .72rem 1.25rem;
    border: 0; border-radius: var(--ih-r-pil);
    font-family: inherit; font-size: .98rem; font-weight: 600;
    cursor: pointer; transition: transform .18s var(--ih-ease), box-shadow .18s var(--ih-ease), background .18s;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--ih-oranje); color: #fff; box-shadow: var(--ih-schaduw-gloed); }
.btn--primary:hover { background: var(--ih-oranje-diep); color: #fff; }
.btn--teal { background: var(--ih-teal); color: #fff; }
.btn--teal:hover { background: var(--ih-teal-diep); color: #fff; }
.btn--dark { background: var(--ih-inkt); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }
.btn--stil { background: var(--ih-vlak); color: var(--ih-inkt); border: 1px solid var(--ih-lijn); }
.btn--stil:hover { border-color: var(--ih-oranje); color: var(--ih-oranje-diep); }
.btn--breed { width: 100%; justify-content: center; }

/* ---------------- kop ---------------- */
.ih-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(251, 250, 248, .88);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--ih-lijn);
}
.ih-header__row { display: flex; align-items: center; gap: 1rem; min-height: 66px; }
.ih-logo {
    display: flex; align-items: center; gap: .55rem;
    font-family: var(--ih-font-kop); font-weight: 900;
    font-size: 1.2rem; letter-spacing: -.015em; color: var(--ih-inkt);
}
.ih-logo:hover { color: var(--ih-oranje); }
.ih-logo img { border-radius: 8px; }

.ih-nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.ih-nav__list { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.ih-nav__link {
    display: block; padding: .45rem .75rem; border-radius: var(--ih-r-pil);
    color: var(--ih-inkt-zacht); font-size: .96rem; font-weight: 500;
}
.ih-nav__link:hover { color: var(--ih-inkt); background: var(--ih-vlak-alt); }
.ih-nav__item.is-active .ih-nav__link { color: var(--ih-oranje-diep); background: var(--ih-oranje-was); }
.ih-nav__toggle {
    margin-left: auto; display: none; background: none; border: 0;
    font-size: 1.6rem; color: var(--ih-inkt); cursor: pointer; padding: .2rem .4rem;
}

@media (max-width: 900px) {
    .ih-nav__toggle { display: block; }
    .ih-nav {
        position: fixed; inset: 66px 0 auto; margin: 0;
        flex-direction: column; align-items: stretch; gap: .8rem;
        padding: 1rem 1.25rem 1.6rem;
        background: var(--ih-vlak); border-bottom: 1px solid var(--ih-lijn);
        box-shadow: var(--ih-schaduw);
        display: none;
    }
    .ih-nav.is-open { display: flex; }
    .ih-nav__list { flex-direction: column; gap: .1rem; }
    .ih-nav__link { padding: .7rem .8rem; font-size: 1.05rem; }
}

/* ---------------- hero ---------------- */
.ih-hero { padding: clamp(3rem, 6vw, 5rem) 0 var(--ih-sectie); position: relative; overflow: hidden; }
.ih-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ih-hero__lede { font-size: 1.18rem; color: var(--ih-inkt-zacht); max-width: 34rem; }
.ih-hero__acties { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.ih-hero__bewijs { margin-top: 1.6rem; font-size: .92rem; color: var(--ih-inkt-zacht); display: flex; flex-wrap: wrap; gap: 1.2rem; }
.ih-hero__bewijs span { display: inline-flex; align-items: center; gap: .4rem; }
.ih-hero__bewijs i { color: var(--ih-teal); }
@media (max-width: 880px) { .ih-hero__grid { grid-template-columns: 1fr; } }

.ih-eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .3rem .8rem; margin-bottom: 1rem;
    border-radius: var(--ih-r-pil);
    background: var(--ih-oranje-was); color: var(--ih-oranje-diep);
    font-size: .82rem; font-weight: 600; letter-spacing: .01em;
}

/* ---------------- secties ---------------- */
.ih-sectie { padding: var(--ih-sectie) 0; }
.ih-sectie--vlak { background: var(--ih-vlak-alt); }
.ih-sectie--navy { background: var(--ih-navy-diep); color: #fff; }
.ih-sectie--navy h2, .ih-sectie--navy h3 { color: #fff; }
.ih-sectie--navy p { color: rgba(255,255,255,.76); }
.ih-sectie__kop { max-width: 44rem; margin-bottom: 2.4rem; }
.ih-sectie__kop p { color: var(--ih-inkt-zacht); font-size: 1.08rem; }

/* ---------------- roosters en kaarten ---------------- */
.ih-rooster { display: grid; gap: 1rem; }
.ih-rooster--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ih-rooster--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ih-rooster--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.ih-kaart {
    display: block; padding: 1.4rem;
    background: var(--ih-vlak); border: 1px solid var(--ih-lijn);
    border-radius: var(--ih-r-lg);
    transition: transform .2s var(--ih-ease), box-shadow .2s var(--ih-ease), border-color .2s;
}
a.ih-kaart:hover { transform: translateY(-3px); box-shadow: var(--ih-schaduw-kaart); border-color: transparent; color: var(--ih-inkt); }
/* De kop van een kaart is geen link op zichzelf, dus hij houdt de tekstkleur. */
.ih-kaart h3 { margin-bottom: .35rem; font-size: 1.1rem; color: var(--ih-inkt); }
a.ih-kaart:hover h3 { color: var(--ih-oranje-diep); }
.ih-kaart p { margin: 0; font-size: .95rem; color: var(--ih-inkt-zacht); }
.ih-kaart__icoon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin-bottom: .9rem;
    border-radius: 12px; font-size: 1.15rem;
    background: var(--ih-oranje-was); color: var(--ih-oranje-diep);
}
.ih-kaart__telling { font-size: .85rem; color: var(--ih-inkt-zacht); font-variant-numeric: tabular-nums; }

/* ---------------- rekenformulier ---------------- */
.ih-reken { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .ih-reken { grid-template-columns: 1fr; } }

/* Vakjes in een grid of flexbox krijgen standaard min-width:auto, en voor een
   invoerveld is dat de breedte van een stuk of twintig tekens. Op een smal
   scherm kan een formulier daarmee zijn kolom oprekken. Deze regels zetten die
   ondergrens terug op nul. */
.ih-reken > *, .ih-rooster > * { min-width: 0; }
.ih-veld__invoer { min-width: 0; }
.ih-veld input, .ih-veld select { min-width: 0; }

.ih-paneel {
    padding: 1.5rem;
    background: var(--ih-vlak); border: 1px solid var(--ih-lijn);
    border-radius: var(--ih-r-lg);
}
.ih-paneel + .ih-paneel { margin-top: 1rem; }
.ih-paneel__kop { margin: 0 0 1.1rem; font-size: 1.05rem; font-weight: 700; }

.ih-veld { margin-bottom: 1rem; }
.ih-veld:last-child { margin-bottom: 0; }
.ih-veld label { display: block; margin-bottom: .3rem; font-size: .92rem; color: var(--ih-inkt-zacht); font-weight: 500; }
.ih-veld__invoer { position: relative; display: flex; align-items: center; }
.ih-veld__pre, .ih-veld__post {
    position: absolute; color: var(--ih-inkt-zacht); font-size: .95rem; pointer-events: none;
}
.ih-veld__pre { left: .85rem; }
.ih-veld__post { right: .85rem; }
.ih-veld input[type="number"], .ih-veld select {
    width: 100%; padding: .7rem .9rem;
    font-family: inherit; font-size: 1rem; color: var(--ih-inkt);
    background: var(--ih-vlak-alt);
    border: 1px solid transparent; border-radius: var(--ih-r-sm);
    font-variant-numeric: tabular-nums;
    appearance: none;
}
/* Deze twee moeten de padding-shorthand hierboven overtroeven. Die staat op
   `.ih-veld input[type="number"]` en weegt zwaarder dan `.ih-veld--euro input`,
   dus het type hoort er ook hier bij; anders schuift het euroteken over het
   bedrag heen. */
.ih-veld--euro input[type="number"] { padding-left: 2.25rem; }
.ih-veld--post input[type="number"] { padding-right: 3.4rem; }
.ih-veld--post select { padding-right: 3.4rem; }
.ih-veld input:focus, .ih-veld select:focus { outline: 0; border-color: var(--ih-oranje); background: var(--ih-vlak); }
.ih-veld small { display: block; margin-top: .3rem; font-size: .82rem; color: var(--ih-inkt-zacht); }

/* ---------------- uitkomsten ---------------- */
.ih-kern { margin-bottom: 1rem; }
.ih-kern__label { font-size: .92rem; color: var(--ih-inkt-zacht); }
.ih-kern__waarde {
    font-family: var(--ih-font-kop);
    font-size: clamp(2.1rem, 4.2vw, 2.9rem);
    font-weight: 900;
    letter-spacing: -.02em;
    color: var(--ih-teal);
    line-height: 1.08;
}
.ih-kern__bij { font-size: .88rem; color: var(--ih-inkt-zacht); margin-top: .25rem; }

.ih-regels { list-style: none; margin: 0; padding: 0; }
.ih-regels li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .5rem 0; border-bottom: 1px solid var(--ih-lijn);
}
.ih-regels li:last-child { border-bottom: 0; }
.ih-regels .lbl { color: var(--ih-inkt-zacht); font-size: .96rem; }
.ih-regels .wrd { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.ih-regels li.is-sterk .lbl { color: var(--ih-inkt); font-weight: 700; }
.ih-regels li.is-sterk .wrd { font-weight: 700; }
.ih-regels li.is-positief .wrd { color: var(--ih-teal-diep); }
.ih-regels li.is-negatief .wrd { color: #C0392B; }
.ih-regels .toelichting {
    flex: 1 0 100%; margin: .2rem 0 0; font-size: .84rem; color: var(--ih-inkt-zacht);
}

/* ---------------- schema-tabel ---------------- */
.ih-tabelwrap { overflow-x: auto; border: 1px solid var(--ih-lijn); border-radius: var(--ih-r-lg); background: var(--ih-vlak); }
.ih-tabel { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ih-tabel th, .ih-tabel td { padding: .55rem .8rem; text-align: right; white-space: nowrap; }
.ih-tabel th:first-child, .ih-tabel td:first-child { text-align: left; }
.ih-tabel thead th { background: var(--ih-vlak-alt); font-weight: 700; font-size: .82rem; letter-spacing: .02em; }
.ih-tabel tbody tr + tr td { border-top: 1px solid var(--ih-lijn); }
.ih-tabel td { font-variant-numeric: tabular-nums; }
.ih-tabel .rente { color: var(--ih-oranje-diep); }
.ih-tabel .aflos { color: var(--ih-teal-diep); }

/* ---------------- staafje rente/aflossing ---------------- */
.ih-balk { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: .8rem 0 .5rem; }
.ih-balk__rente { background: var(--ih-oranje); }
.ih-balk__aflos { background: var(--ih-teal); }
.ih-legenda { display: flex; gap: 1.2rem; font-size: .85rem; color: var(--ih-inkt-zacht); }
.ih-legenda span { display: inline-flex; align-items: center; gap: .4rem; }
.ih-legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---------------- artikel ---------------- */
.ih-artikel { padding: clamp(2.5rem, 5vw, 4rem) 0 var(--ih-sectie); }
.ih-artikel h2 { margin-top: 2.4rem; font-size: 1.5rem; }
.ih-artikel__intro { font-size: 1.15rem; color: var(--ih-inkt-zacht); }
.ih-kruimels { font-size: .88rem; color: var(--ih-inkt-zacht); margin-bottom: 1rem; }
.ih-kruimels a { color: var(--ih-inkt-zacht); }
.ih-kruimels a:hover { color: var(--ih-oranje-diep); }

.ih-verwant { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ih-lijn); }

/* ---------------- begrippen en vragen ---------------- */
.ih-begrip { border-bottom: 1px solid var(--ih-lijn); }
.ih-begrip summary {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 1rem 0; cursor: pointer; font-weight: 700; list-style: none;
}
.ih-begrip summary::-webkit-details-marker { display: none; }
.ih-begrip summary:hover { color: var(--ih-oranje-diep); }

/* Het pijltje is met randen getekend en niet met een letter uit de
   pictogrammenbibliotheek. Die bibliotheek laadt later dan de pagina, en tot
   dat moment stond hier een leeg vierkantje dat vervolgens versprong. */
.ih-begrip summary::after {
    content: ""; flex: 0 0 auto;
    width: .5rem; height: .5rem; margin-right: .25rem;
    border-right: 2px solid var(--ih-inkt-zacht);
    border-bottom: 2px solid var(--ih-inkt-zacht);
    transform: rotate(45deg) translate(-.1rem, -.1rem);
    transition: transform .28s var(--ih-ease);
}
.ih-begrip[open] summary::after {
    transform: rotate(225deg) translate(-.1rem, -.1rem);
}

.ih-begrip__body { padding-bottom: 1.1rem; color: var(--ih-inkt-zacht); }
.ih-begrip__ook { font-size: .85rem; color: var(--ih-inkt-zacht); opacity: .8; }

/* Een open details springt normaal gesproken open. Waar de browser een hoogte
   naar `auto` kan animeren, laten we hem uitvouwen; elders blijft het gedrag
   zoals het was. */
@supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .ih-begrip::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size .28s var(--ih-ease), content-visibility .28s allow-discrete;
    }
    .ih-begrip[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .ih-begrip::details-content { transition: none; }
    .ih-begrip summary::after { transition: none; }
}

/* ---------------- download en voet ---------------- */
.ih-download { padding: var(--ih-sectie) 0; background: var(--ih-navy-diep); color: #fff; text-align: center; }
.ih-download h2 { color: #fff; }
.ih-download p { color: rgba(255,255,255,.76); max-width: 34rem; margin-inline: auto; }
.ih-download img { border-radius: 16px; margin-bottom: 1rem; }
.ih-download__actions { display: flex; justify-content: center; gap: .7rem; flex-wrap: wrap; margin-top: 1.4rem; }
.ih-download .btn--dark { background: #fff; color: var(--ih-navy-diep); }
.ih-download .btn--dark:hover { background: var(--ih-oranje); color: #fff; }

.ih-footer { padding: 3rem 0 2rem; background: var(--ih-vlak); border-top: 1px solid var(--ih-lijn); font-size: .94rem; }
.ih-footer__top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; }
@media (max-width: 820px) { .ih-footer__top { grid-template-columns: 1fr 1fr; } }
.ih-footer__logo {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--ih-font-kop); font-weight: 900;
    font-size: 1.1rem; color: var(--ih-inkt); margin-bottom: .6rem;
}
.ih-footer__logo img { border-radius: 7px; }
.ih-footer__lede { color: var(--ih-inkt-zacht); max-width: 26rem; }
.ih-footer ul { list-style: none; margin: 0; padding: 0; }
.ih-footer ul li { margin-bottom: .35rem; }
.ih-footer ul a { color: var(--ih-inkt-zacht); }
.ih-footer ul a:hover { color: var(--ih-oranje-diep); }
.ih-footer__disclaimer {
    margin: 2rem 0 0; padding: .9rem 1.1rem;
    background: var(--ih-vlak-alt); border-radius: var(--ih-r-md);
    font-size: .88rem; color: var(--ih-inkt-zacht);
}
.ih-footer__bottom {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
    margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--ih-lijn);
    font-size: .86rem; color: var(--ih-inkt-zacht);
}

/* ---------------- verschijnen ---------------- */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ih-ease), transform .6s var(--ih-ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
html:not(.ih-js) [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
    [data-reveal] { opacity: 1; transform: none; }
}

/* ---------------- contactformulier ---------------- */
.ih-tabs {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin: 2rem 0 1rem;
}
.ih-tab {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem 1rem;
    background: var(--ih-vlak); color: var(--ih-inkt-zacht);
    border: 1px solid var(--ih-lijn); border-radius: var(--ih-r-pil);
    font-family: inherit; font-size: .94rem; font-weight: 500;
    cursor: pointer; transition: all .18s var(--ih-ease);
}
.ih-tab:hover { color: var(--ih-inkt); border-color: var(--ih-oranje); }
.ih-tab.is-active {
    background: var(--ih-oranje); color: #fff; border-color: var(--ih-oranje);
    box-shadow: var(--ih-schaduw-gloed);
}

.ih-formulier__uitleg {
    margin: 0 0 1.2rem; padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--ih-lijn);
    color: var(--ih-inkt-zacht); font-size: .96rem;
}
.ih-formulier__klein {
    margin: .9rem 0 0; font-size: .84rem; color: var(--ih-inkt-zacht);
}
.ih-formulier input[type="text"],
.ih-formulier input[type="email"],
.ih-formulier textarea,
.ih-formulier select {
    width: 100%; padding: .7rem .9rem;
    font-family: inherit; font-size: 1rem; color: var(--ih-inkt);
    background: var(--ih-vlak-alt);
    border: 1px solid transparent; border-radius: var(--ih-r-sm);
    min-width: 0;
}
.ih-formulier textarea { resize: vertical; line-height: 1.55; }
.ih-formulier input:focus, .ih-formulier textarea:focus, .ih-formulier select:focus {
    outline: 0; border-color: var(--ih-oranje); background: var(--ih-vlak);
}
.ih-formulier .is-fout input,
.ih-formulier .is-fout textarea { border-color: #C0392B; background: #FDF2F1; }

/* Het veld dat mensen niet zien en robots wel. Niet display:none: sommige
   robots slaan verborgen velden over, maar dit staat er gewoon, buiten beeld. */
.ih-honingpot {
    position: absolute; left: -9999px; width: 1px; height: 1px;
    overflow: hidden;
}

.ih-formulier__melding {
    margin: 1rem 0 0; padding: .8rem 1rem;
    border-radius: var(--ih-r-md); font-size: .94rem;
}
.ih-formulier__melding.is-goed { background: var(--ih-teal-was); color: var(--ih-teal-diep); }
.ih-formulier__melding.is-fout { background: #FDF2F1; color: #A93226; }
.ih-formulier__melding.is-bezig { background: var(--ih-vlak-alt); color: var(--ih-inkt-zacht); }

.ih-formulier button[disabled] { opacity: .6; cursor: progress; transform: none; }