/*
 * Staand groot scherm (75" Newline op een vloerstandaard: bovenrand ≈ 2 m, onderrand ≈ 0,4 m).
 * Alleen html.si-scherm in staande stand op een beeldscherm: de liggende touchscreen-tv, telefoon, tablet
 * en de afdruk blijven zoals ze waren.
 *
 * Reikzone: alles wat je aantikt staat tussen ~30% en ~82% van de hoogte (≈ 1,5 m tot 0,7 m).
 * Bovenin alleen wat je leest (logo, titel, resultaat).
 * - Bedieningsbalk: Terug links, Uitloggen rechts (en per pagina Instellingen/Beheer/Metingen), op 76-81%.
 * - Foto en meetpunten (Vormpunten): knoppenkolom aan de rechterrand rond 57%, net als de Vormscan AI (scan.css).
 *
 * Schaal: ontworpen op 1080 x 1920 CSS-px (de Android-app). Elke maat is N * --zs-u; --zs-u is 1px op 1080 x 1920
 * en schaalt mee met het kleinste van breedte/1080 en hoogte/1920. Zo is een kleiner venster (Chrome op een pc
 * met schaalinstelling 125-150 %, adresbalk) een verkleinde kopie van 1080 x 1920: niets schuift over elkaar.
 */
@media screen and (orientation: portrait) {

html.si-scherm {
    --zs-u: min(1px, calc(100vw / 1080), calc(100vh / 1920)); /* 1px op 1080 x 1920 */
    --zs-knop: calc(96 * var(--zs-u));                 /* hoogte van elke knop in de balk */
    --zs-balk: 19vh;                 /* afstand van de balk tot de onderrand */
    --zs-rand: calc(40 * var(--zs-u));                 /* zijmarge */
    --zs-glas: rgba(255, 255, 255, 0.12);
    --zs-glas-aan: rgba(255, 255, 255, 0.24);
    --zs-lijn: rgba(255, 255, 255, 0.14);
    --zs-boven: 24vh;                /* begin van de inhoud onder het logo */
    --zs-onder: calc(var(--zs-balk) + var(--zs-knop) + 28 * var(--zs-u)); /* einde van de inhoud boven de balk */
    /* einde van de inhoud boven de rij Opslaan/Afdrukken (scherm-resultaat) */
    --zs-onder-rij: calc(var(--zs-balk) + 2 * var(--zs-knop) + 48 * var(--zs-u));
}

/* ---------- Bedieningsbalk ---------- */
/* Terug, Uitloggen, Instellingen, Beheer en Metingen worden grote knoppen met tekst. De bestaande elementen en
   hun onclick blijven; alleen plek en vorm veranderen. Foto en meetpunten hebben een eigen kolom (onderaan). */
html.si-scherm body:not(:has(.step01, .step02)) .back,
html.si-scherm body:not(:has(.step01, .step02)) .logout,
html.si-scherm .si-inst-terug,
html.si-scherm .si-balk-home > a[aria-label],
html.si-scherm #admin-btn,
html.si-scherm .step04 > #capture,
html.si-scherm .step04 > #capture2 {
    position: fixed !important;
    top: auto !important;
    bottom: var(--zs-balk) !important;
    z-index: 30;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: calc(14 * var(--zs-u));
    width: auto !important;
    height: var(--zs-knop) !important;
    min-width: var(--zs-knop);
    margin: 0 !important;
    padding: 0 calc(34 * var(--zs-u)) 0 calc(30 * var(--zs-u)) !important;
    border-radius: calc(var(--zs-knop) / 2) !important;
    background: var(--zs-glas) !important;
    color: #fff !important;
    font-size: calc(34 * var(--zs-u)) !important;
    line-height: 1 !important;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, transform .15s ease;
}
html.si-scherm body:not(:has(.step01, .step02)) .back:active,
html.si-scherm body:not(:has(.step01, .step02)) .logout:active,
html.si-scherm .si-inst-terug:active,
html.si-scherm .si-balk-home > a[aria-label]:active,
html.si-scherm #admin-btn:active,
html.si-scherm .step04 > #capture:active,
html.si-scherm .step04 > #capture2:active {
    background: var(--zs-glas-aan) !important;
    transform: scale(.97);
}
/* Tekst naast het icoon (in de letter van de site, niet in die van de iconen). */
html.si-scherm body:not(:has(.step01, .step02)) .back::after,
html.si-scherm body:not(:has(.step01, .step02)) .logout::after,
html.si-scherm .si-inst-terug::after,
html.si-scherm .si-balk-home > a[aria-label]::after,
html.si-scherm #admin-btn::after,
html.si-scherm .step04 > #capture::after,
html.si-scherm .step04 > #capture2::after {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: calc(28 * var(--zs-u));
    letter-spacing: .01em;
}
html.si-scherm body:not(:has(.step01, .step02)) .back::after,
html.si-scherm .si-inst-terug::after { content: "Terug"; }
html.si-scherm body:not(:has(.step01, .step02)) .logout::after { content: "Uitloggen"; }
html.si-scherm .si-balk-home > a[aria-label]::after,
html.si-scherm #admin-btn::after,
html.si-scherm .step04 > #capture::after,
html.si-scherm .step04 > #capture2::after { content: attr(aria-label); }

html.si-scherm body:not(:has(.step01, .step02)) .back,
html.si-scherm .si-inst-terug { left: var(--zs-rand) !important; right: auto !important; }
html.si-scherm body:not(:has(.step01, .step02)) .logout { right: var(--zs-rand) !important; left: auto !important; }
/* Home: Instellingen en Beheer als één rij links (flex, geen vaste afstand per knop), Uitloggen rechts.
   De tussenruimte geeft op 1080 x 1920 precies de goedgekeurde plek van Beheer (x = 400). */
html.si-scherm .si-balk-home {
    position: fixed;
    left: var(--zs-rand);
    bottom: var(--zs-balk);
    z-index: 30;
    display: flex;
    gap: calc(70.6 * var(--zs-u));
}
html.si-scherm .si-balk-home > a[aria-label] { position: static !important; }
/* Formulier: "Metingen" in het midden. */
html.si-scherm #admin-btn { left: 50% !important; transform: translateX(-50%); }
html.si-scherm #admin-btn:active { transform: translateX(-50%) scale(.97); }
/* Home heeft een eigen uitlogicoon op dezelfde plek: dat van de layout weg (anders twee knoppen over elkaar). */
html.si-scherm body:has(.home) a.dropdown-item > .logout { display: none !important; }
/* De lege link rond het uitlogicoon van de layout neemt geen ruimte. */
html.si-scherm a.dropdown-item:has(> .logout) { position: static; padding: 0; width: 0; height: 0; }

/* ---------- Logo bovenin op pagina's met bediening ---------- */
/* Lijst, formulier, instellingen en inloggen: het logo bovenin (te hoog om aan te tikken, wel goed te lezen),
   zodat de reikzone vrij is voor de bediening. */
html.si-scherm body:has(.si-lijst, .step03, .si-inst, .login) .footer {
    top: 4vh;
    bottom: auto;
    font-size: 1em;
}
html.si-scherm body:has(.si-lijst, .step03, .si-inst, .login) .footer .text {
    font-size: calc(28 * var(--zs-u));
    margin-top: calc(12 * var(--zs-u));
}

/* ---------- Screensaver ---------- */
/* "Start de meting" (groen, layout/index.blade.php) groot genoeg om vanaf een meter te lezen. */
html.si-scherm #inactivityBanner .si-banner-start {
    margin-top: calc(40 * var(--zs-u));
    padding: calc(32 * var(--zs-u)) calc(80 * var(--zs-u));
    border-radius: calc(64 * var(--zs-u));
    font-size: calc(48 * var(--zs-u));
    letter-spacing: .02em;
}

/* ---------- Home ---------- */
html.si-scherm .home .header-text {
    top: 13vh;
    margin-top: 0 !important;
    font-size: calc(64 * var(--zs-u));
}
html.si-scherm .home [ckass="container"] {
    max-width: 96% !important;
    margin-top: 28vh !important;
}
html.si-scherm .home .container {
    height: auto !important;
    margin-top: 7vh !important;
}
/* Start: groot, in het groen van het logo (zoals "Start de meting"), donkere tekst. */
html.si-scherm #gegevens-aanmaken-btn {
    background-color: #b7c335 !important;
    color: #14161e !important;
    min-width: calc(520 * var(--zs-u));
    min-height: calc(128 * var(--zs-u));
    padding: 0 calc(96 * var(--zs-u)) !important;
    border-radius: calc(64 * var(--zs-u)) !important;
    font-size: calc(48 * var(--zs-u));
    letter-spacing: .02em;
}

/* ---------- Metingen (lijst) ---------- */
html.si-scherm .si-lijst {
    margin: 0;
}
html.si-scherm .si-lijst > .col-12 {
    position: fixed;
    top: var(--zs-boven);
    bottom: var(--zs-onder);
    left: var(--zs-rand);
    right: var(--zs-rand);
    width: auto !important;
    margin: 0 !important;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: calc(22 * var(--zs-u));
}
html.si-scherm .si-lijst-titel {
    display: flex;
    align-items: baseline;
    gap: calc(16 * var(--zs-u));
    margin: 0;
    color: #fff;
    font-size: calc(40 * var(--zs-u));
    font-weight: 700;
}
html.si-scherm .si-lijst-titel span {
    font-size: calc(26 * var(--zs-u));
    font-weight: 500;
    opacity: .65;
}
/* Zoeken en Nieuw op één rij. */
html.si-scherm .si-lijst form {
    display: flex;
    gap: calc(16 * var(--zs-u));
    margin: 0;
}
html.si-scherm .si-lijst form .input-group {
    flex: 1 1 auto;
    width: auto !important;
    margin: 0 !important;
    height: calc(88 * var(--zs-u));
    flex-wrap: nowrap;
}
html.si-scherm .si-lijst form .input-group > * {
    height: calc(88 * var(--zs-u));
}
html.si-scherm .si-lijst form .input-group-text {
    padding: 0 calc(28 * var(--zs-u));
    font-size: calc(30 * var(--zs-u));
}
html.si-scherm .si-lijst form .input-group-text:first-child { border-radius: calc(44 * var(--zs-u)) 0 0 calc(44 * var(--zs-u)) !important; }
html.si-scherm .si-lijst form .input-group-text:last-child { border-radius: 0 calc(44 * var(--zs-u)) calc(44 * var(--zs-u)) 0 !important; min-width: calc(96 * var(--zs-u)); justify-content: center; cursor: pointer; }
html.si-scherm .si-lijst form input {
    font-size: calc(30 * var(--zs-u));
    padding: 0 calc(12 * var(--zs-u));
}
html.si-scherm .si-lijst-nieuw {
    display: inline-flex;
    align-items: center;
    gap: calc(14 * var(--zs-u));
    height: calc(88 * var(--zs-u));
    padding: 0 calc(40 * var(--zs-u));
    border-radius: calc(44 * var(--zs-u));
    background: var(--si-accent, #19a79f);
    color: #00211f;
    font-size: calc(30 * var(--zs-u));
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
html.si-scherm .si-lijst-nieuw:active { filter: brightness(1.1); }
/* Oude paginering (rij met cijfers) weg; de grote paginering staat onder de lijst. */
html.si-scherm .si-pagina-oud { display: none; }

html.si-scherm .si-lijst .lists {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: calc(18 * var(--zs-u));
}
html.si-scherm .si-lijst .listitem {
    position: relative;
    width: auto;
    margin: 0;
    float: none;
    border: 1px solid var(--zs-lijn);
    border-radius: calc(22 * var(--zs-u));
    background: rgba(255, 255, 255, 0.06) !important;
    transition: background-color .15s ease;
}
html.si-scherm .si-lijst .listitem:has(.si-kaart-link:active) {
    background: rgba(255, 255, 255, 0.13) !important;
}
html.si-scherm .si-lijst .listitem .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: calc(10 * var(--zs-u));
    padding: calc(18 * var(--zs-u)) calc(22 * var(--zs-u));
    text-align: left !important;
}
/* Hele kaart klikbaar (bekijken); de actieknoppen liggen erboven. */
html.si-scherm .si-kaart-link {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
html.si-scherm .si-kaart-naam {
    display: flex;
    align-items: center;
    gap: calc(14 * var(--zs-u));
    font-size: calc(30 * var(--zs-u));
}
html.si-scherm .si-kaart-naam .card-title {
    font-size: calc(30 * var(--zs-u));
    line-height: 1.15;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
html.si-scherm .si-kaart-pijl {
    display: inline-block;
    font-size: calc(24 * var(--zs-u));
    opacity: .55;
    color: #fff;
}
html.si-scherm .si-kaart-meta {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: calc(22 * var(--zs-u));
}
html.si-scherm .si-lijst .si-acties {
    position: relative;
    z-index: 2;
    margin: 0;
    gap: calc(12 * var(--zs-u));
}
html.si-scherm .si-lijst .si-acties .btn {
    flex: 1 1 0;
    max-width: none;
    aspect-ratio: auto;
    height: calc(76 * var(--zs-u));
    flex-direction: column;
    gap: calc(6 * var(--zs-u));
    padding: 0 calc(4 * var(--zs-u));
    border: 0 !important;
    border-radius: calc(16 * var(--zs-u));
    background: var(--zs-glas) !important;
    color: #fff !important;
    font-size: calc(26 * var(--zs-u));
}
html.si-scherm .si-lijst .si-acties .btn:active { background: var(--zs-glas-aan) !important; }
html.si-scherm .si-lijst .si-acties .si-label {
    display: block;
    font-size: calc(19 * var(--zs-u));
    font-weight: 600;
    line-height: 1;
}
/* Bekijken = de kaart zelf. */
html.si-scherm .si-lijst .si-acties .si-actie-bekijken { display: none; }
html.si-scherm .si-lijst .si-acties .si-actie-advies i { color: var(--si-accent, #19a79f); }
html.si-scherm .si-lijst .si-acties .btn-danger i { color: #ff8f86; }
html.si-scherm .si-lijst-leeg {
    display: block;
    margin: calc(40 * var(--zs-u)) 0 0;
    text-align: center;
    font-size: calc(30 * var(--zs-u));
    opacity: .75;
}

/* Paginering: Vorige | Pagina 3 van 15 | Volgende */
html.si-scherm .si-pagina {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(16 * var(--zs-u));
    padding: calc(8 * var(--zs-u));
    border-radius: calc(52 * var(--zs-u));
    background: rgba(255, 255, 255, 0.05);
}
html.si-scherm .si-pagina-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(14 * var(--zs-u));
    min-width: calc(260 * var(--zs-u));
    height: calc(88 * var(--zs-u));
    padding: 0 calc(32 * var(--zs-u));
    border-radius: calc(44 * var(--zs-u));
    background: #fff;
    color: #000e2a;
    font-size: calc(28 * var(--zs-u));
    font-weight: 600;
    text-decoration: none;
}
html.si-scherm a.si-pagina-knop:active { background: rgba(255, 255, 255, 0.85); }
html.si-scherm .si-pagina-knop.is-uit { background: transparent; color: #fff; opacity: .3; }
html.si-scherm .si-pagina-stand {
    color: #fff;
    font-size: calc(28 * var(--zs-u));
    white-space: nowrap;
}

/* ---------- Gegevens (formulier) ---------- */
/* Breedte schaalt mee (Bootstrap springt anders van 960 naar 720/540 px); onderaan ruimte voor de balk,
   zodat het formulier nooit onder Terug/Metingen/Uitloggen valt. */
html.si-scherm .step03 .container {
    height: auto !important;
    max-width: calc(960 * var(--zs-u));
    padding: var(--zs-boven) calc(12 * var(--zs-u)) var(--zs-onder);
}
html.si-scherm .step03 .card-title {
    margin-top: 0 !important;
    margin-bottom: calc(24 * var(--zs-u));
    font-size: calc(40 * var(--zs-u));
    font-weight: 700;
}
html.si-scherm .step03 .card-text { display: none; } /* geen introtekst */
html.si-scherm .step03 form { margin-top: 0; }
html.si-scherm .step03 .input-group { margin-bottom: calc(18 * var(--zs-u)) !important; }
html.si-scherm .step03 .input-group > * {
    height: calc(92 * var(--zs-u));
    font-size: calc(32 * var(--zs-u));
}
html.si-scherm .step03 .input-group-text {
    min-width: calc(92 * var(--zs-u));
    justify-content: center;
    font-size: calc(30 * var(--zs-u));
}
html.si-scherm .step03 #confirmPictureButton {
    min-height: calc(112 * var(--zs-u));
    margin-top: calc(32 * var(--zs-u));
    border-radius: calc(56 * var(--zs-u)) !important;
    font-size: calc(36 * var(--zs-u));
    font-weight: 700;
    white-space: nowrap; /* "Start de meting" op één regel */
}

/* ---------- Resultaat en advies ---------- */
html.si-scherm .step04 .container {
    max-width: calc(960 * var(--zs-u));
    padding-left: calc(12 * var(--zs-u));
    padding-right: calc(12 * var(--zs-u));
}
/* Het advies eindigt boven de bediening: past het niet (ander venster), dan schuift het binnen dit vlak.
   Bovenkant van het vlak op 1080 x 1920: 45 px. */
html.si-scherm .step04 .info > .resultsfade {
    max-height: calc(100vh - 45 * var(--zs-u) - var(--zs-onder));
    overflow-y: auto;
    scrollbar-width: thin;
}
html.si-scherm .step04:has(> #capture) .info > .resultsfade {
    max-height: calc(100vh - 45 * var(--zs-u) - var(--zs-onder-rij));
}
html.si-scherm .step04 .info h1 {
    margin-top: calc(40 * var(--zs-u));
    font-size: calc(64 * var(--zs-u));
}
html.si-scherm .step04 .info h1 .card-title { font-size: calc(64 * var(--zs-u)); }
html.si-scherm .step04 .info > div:not(.resultsfade) > table {
    width: min(820 * var(--zs-u), 80%) !important;
    font-size: calc(36 * var(--zs-u));
}
html.si-scherm .step04 .info table td { padding: calc(4 * var(--zs-u)) 0; }
html.si-scherm .step04 .pie { margin-top: calc(64 * var(--zs-u)); }
/* Advies (graph en scherm-resultaat) */
html.si-scherm .step04 .resultsfade > p { font-size: calc(30 * var(--zs-u)); margin-top: calc(24 * var(--zs-u)); }
html.si-scherm .step04 .resultsfade img[src*="slaapvormfoto"] { height: calc(380 * var(--zs-u)) !important; }
html.si-scherm .step04 .resultsfade table { font-size: calc(34 * var(--zs-u)); margin-top: calc(50 * var(--zs-u)) !important; }
/* Vaste marges uit de view (style-attribuut) schalen mee, anders past het advies niet in een kleiner venster. */
html.si-scherm .step04 .resultsfade > div:first-of-type {
    margin-left: calc(20 * var(--zs-u)) !important;
    margin-right: calc(20 * var(--zs-u)) !important;
}
html.si-scherm .step04 .resultsfade img[src*="slaapvormfoto"] { margin-bottom: calc(20 * var(--zs-u)) !important; }
html.si-scherm .step04 .resultsfade #mattress-img { margin: calc(20 * var(--zs-u)) 0 !important; }
html.si-scherm .step04 .resultsfade > div:last-child { padding: calc(20 * var(--zs-u)) !important; }
html.si-scherm .step04 .resultsfade .c-progress-bar {
    width: 100%;
    height: calc(26 * var(--zs-u));
    margin-bottom: calc(18 * var(--zs-u)) !important;
}
/* "We zijn even aan het overleggen...": binnen de breedte van het vlak, op twee regels als het nodig is
   (stond als één regel van 100vw breed in een smaller vlak en werd links en rechts afgekapt). */
html.si-scherm .step04 .contentheader .header-text {
    left: 0;
    right: 0;
    width: auto;
    padding: 0 calc(24 * var(--zs-u));
    font-size: calc(56 * var(--zs-u));
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: break-word;
}
/* Opslaan en Afdrukken (scherm-resultaat): een rij boven de balk, in het midden. */
html.si-scherm .step04 > #capture,
html.si-scherm .step04 > #capture2 {
    bottom: calc(var(--zs-balk) + var(--zs-knop) + 24 * var(--zs-u)) !important;
}
html.si-scherm .step04 > #capture { left: auto !important; right: calc(50% + 12 * var(--zs-u)) !important; background: var(--si-accent, #19a79f) !important; color: #00211f !important; }
html.si-scherm .step04 > #capture2 { left: calc(50% + 12 * var(--zs-u)) !important; }

/* ---------- Inloggen ---------- */
html.si-scherm body:has(.login) .header-text {
    top: 23vh;
    font-size: calc(52 * var(--zs-u));
}
html.si-scherm .login .card {
    top: 54%;
    width: min(760 * var(--zs-u), 86vw) !important;
    border-radius: calc(28 * var(--zs-u));
}
html.si-scherm .login .card-body { padding: calc(36 * var(--zs-u)); }
html.si-scherm .login .input-group { margin-bottom: calc(20 * var(--zs-u)) !important; }
html.si-scherm .login .input-group > * {
    height: calc(92 * var(--zs-u));
    font-size: calc(32 * var(--zs-u));
}
html.si-scherm .login .input-group-text {
    min-width: calc(92 * var(--zs-u));
    justify-content: center;
}
html.si-scherm .login .btn {
    min-height: calc(100 * var(--zs-u));
    border-radius: calc(50 * var(--zs-u)) !important;
    font-size: calc(36 * var(--zs-u));
    font-weight: 700;
}
html.si-scherm .login .card p.text-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(12 * var(--zs-u));
    margin-top: calc(20 * var(--zs-u)) !important;
    font-size: calc(26 * var(--zs-u)) !important;
}
html.si-scherm .login .card p a.forgot-password {
    color: rgba(255, 255, 255, 0.8) !important;
}
html.si-scherm .login .forgot-password {
    display: inline-flex;
    align-items: center;
    min-height: calc(72 * var(--zs-u));
    padding: 0 calc(20 * var(--zs-u));
}

/* ---------- Instellingen ---------- */
html.si-scherm .si-inst {
    top: var(--zs-boven);
    bottom: var(--zs-onder);
    max-width: calc(960 * var(--zs-u));
    padding: 0 0 calc(40 * var(--zs-u)) !important;
}
html.si-scherm .si-inst h1 { font-size: calc(44 * var(--zs-u)); margin-bottom: calc(24 * var(--zs-u)); }
html.si-scherm .si-inst .si-uitleg { display: none; } /* geen introtekst */
html.si-scherm .si-inst h2 { font-size: calc(32 * var(--zs-u)); margin-bottom: calc(18 * var(--zs-u)); }
html.si-scherm .si-inst .si-keuzes { gap: calc(16 * var(--zs-u)); }
html.si-scherm .si-inst .si-keuze {
    min-height: calc(112 * var(--zs-u));
    padding: calc(26 * var(--zs-u)) calc(30 * var(--zs-u));
    align-items: center;
}
html.si-scherm .si-inst .si-keuze .si-rondje { flex-basis: calc(34 * var(--zs-u)); height: calc(34 * var(--zs-u)); margin-top: 0; }
html.si-scherm .si-inst .si-keuze strong { font-size: calc(32 * var(--zs-u)); }
html.si-scherm .si-inst .si-keuze span.si-tekst { font-size: calc(24 * var(--zs-u)); }
html.si-scherm .si-inst .si-melding { font-size: calc(26 * var(--zs-u)); }
html.si-scherm .si-inst .si-weergave { margin: 0 0 calc(28 * var(--zs-u)); font-size: calc(26 * var(--zs-u)); }
html.si-scherm .si-inst .si-weergave button { min-height: calc(72 * var(--zs-u)); padding: 0 calc(28 * var(--zs-u)); }
/* Terug staat in de balk (si-inst-terug uit toetsenbord.js); de knop onderaan het scrollvlak is dubbel. */
html.si-scherm .si-inst .si-terug { display: none; }

/* ---------- Foto en meetpunten (Vormpunten) ---------- */
/* Knoppenkolom aan de rechterrand, midden rond 57% (zoals .si-kolom van de Vormscan AI). photo.js en points.js
   tonen en verbergen de knoppen met style.display; hier alleen plek, maat en tekst. In de Vormscan AI (si-nieuw,
   si-controle) blijft alles van scan.css. */
html.si-scherm body:not(.si-nieuw) .step01 :is(#capture, #capture2, #removePicture, #switchCamera, #aspectRatioBtn),
html.si-scherm body:not(.si-controle) .step02 #capture,
html.si-scherm body:not(.si-nieuw) .step01 ~ .back,
html.si-scherm body:not(.si-controle) .step02 ~ .back {
    position: fixed !important;
    left: auto !important;
    right: 2.2vh !important;
    width: max(280 * var(--zs-u), 14.6vh) !important;
    height: max(96 * var(--zs-u), 5vh) !important;
    margin: 0 !important;
    padding: 0 calc(14 * var(--zs-u)) !important;
    z-index: 30;
    align-items: center;
    justify-content: center;
    gap: calc(14 * var(--zs-u));
    border-radius: calc(48 * var(--zs-u)) !important;
    font-size: calc(32 * var(--zs-u)) !important;
    line-height: max(96 * var(--zs-u), 5vh);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 calc(6 * var(--zs-u)) calc(24 * var(--zs-u)) rgba(0, 0, 0, 0.35);
}
html.si-scherm body:not(.si-nieuw) .step01 :is(#capture, #capture2, #removePicture, #switchCamera, #aspectRatioBtn) i,
html.si-scherm body:not(.si-controle) .step02 #capture i {
    margin-right: calc(10 * var(--zs-u));
}
html.si-scherm body:not(.si-nieuw) .step01 :is(#capture, #capture2, #removePicture, #switchCamera, #aspectRatioBtn)::after,
html.si-scherm body:not(.si-controle) .step02 #capture::after,
html.si-scherm body:not(.si-nieuw) .step01 ~ .back::after,
html.si-scherm body:not(.si-controle) .step02 ~ .back::after {
    content: attr(aria-label);
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: calc(24 * var(--zs-u));
    vertical-align: middle;
}
html.si-scherm body:not(.si-nieuw) .step01 ~ .back::after,
html.si-scherm body:not(.si-controle) .step02 ~ .back::after {
    content: "Terug";
    margin-left: calc(12 * var(--zs-u));
}
/* Terug: een dichte witte knop zoals Verhouding (de half doorzichtige donkere viel weg tegen de achtergrond
   en leek half over de rand van de foto te hangen). */
html.si-scherm body:not(.si-nieuw) .step01 ~ .back,
html.si-scherm body:not(.si-controle) .step02 ~ .back {
    top: auto !important;
    background: #fff !important;
    color: #000e2a !important;
}
/* Volgorde in de kolom (boven naar onder): Gebruik foto, Foto maken/Opnieuw, Andere camera, Verhouding, Terug. */
html.si-scherm body:not(.si-nieuw) .step01 #capture2 { top: calc(57% - 216 * var(--zs-u)) !important; }
html.si-scherm body:not(.si-nieuw) .step01 :is(#capture, #removePicture) { top: calc(57% - 104 * var(--zs-u)) !important; }
html.si-scherm body:not(.si-nieuw) .step01 #switchCamera { top: calc(57% + 8 * var(--zs-u)) !important; }
html.si-scherm body:not(.si-nieuw) .step01 #aspectRatioBtn { top: calc(57% + 120 * var(--zs-u)) !important; }
html.si-scherm body:not(.si-nieuw) .step01 ~ .back { bottom: calc(43% - 328 * var(--zs-u)) !important; }
html.si-scherm body:not(.si-nieuw) .step01 #aspectPanel {
    position: fixed;
    left: auto;
    right: calc(2.2vh + max(280 * var(--zs-u), 14.6vh) + 20 * var(--zs-u));
    top: calc(57% + 40 * var(--zs-u));
    width: calc(360 * var(--zs-u));
    font-size: calc(24 * var(--zs-u));
    z-index: 30;
}
/* Meetpunten: Bevestigen in het midden van de kolom, Terug eronder. */
html.si-scherm body:not(.si-controle) .step02 #capture { top: calc(57% - 104 * var(--zs-u)) !important; }
html.si-scherm body:not(.si-controle) .step02 ~ .back { bottom: calc(43% - 104 * var(--zs-u)) !important; }
/* Hoofdactie (Foto maken, Gebruik foto, Bevestigen) in de winkelkleur. */
html.si-scherm body:not(.si-nieuw) .step01 :is(#capture, #capture2),
html.si-scherm body:not(.si-controle) .step02 #capture {
    background: var(--si-accent, #19a79f) !important;
    color: #00211f !important;
}
html.si-scherm body:not(.si-nieuw) .step01 #capture2.disabled { opacity: .4; }
/* Overige knoppen wit met donkere tekst. */
html.si-scherm body:not(.si-nieuw) .step01 :is(#removePicture, #switchCamera, #aspectRatioBtn) {
    background: #fff !important;
    color: #000e2a !important;
}

}

/* Verborgen zoekknop neemt geen plek in de zoekrij. */
html.si-scherm .si-lijst #submitBtn { position: absolute; width: 0; padding: 0; border: 0; }