/* ---------------------------------------------------------------------------
   wereldbol.css - alleen wat de wereldbolpagina extra nodig heeft.

   De rest komt uit busifind.css: de netwerkbalk, de kop, de voet, de kleuren
   en de breedte. Hier staat niets dat daar al staat, zodat een wijziging aan
   de huisstijl vanzelf meekomt.

   DE BOLRUIMTE IS ALTIJD DONKER. BusiFind zelf is een witte site, maar een
   planeet hangt in het zwart en niet op een wit vel. Die acht kleuren staan
   dus los van de rest en wisselen niet mee.

   Server: /public_html/wereld/wereldbol.css
   ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   DONKER, ZOALS BUSIMATCH

   Didier, 21-09-2026. De kleuren hieronder zijn niet verzonnen: ze zijn
   overgenomen uit busimatch.club zelf (--bg, --card, --bd, --tx, --mut, --ac).
   Zo is dit dezelfde donkere wereld en niet iets wat erop lijkt.

   De truc: busifind.css bouwt de hele pagina op acht tokens, en die worden
   hier opnieuw gezet. Daardoor gaan de kop, de tekst, de randen, de voet en
   alles wat er later bij komt vanzelf mee, zonder dat er ergens een regel
   overschreven hoeft te worden.
   ------------------------------------------------------------------------- */

:root {
    /* de kleuren van busimatch.club */
    --bm-bg:        #0a0f1f;
    --bm-card:      #111735;
    --bm-bd:        #1b2450;
    --bm-tx:        #e6ecfb;
    --bm-mut:       #9fb0d0;
    --bm-ac:        #22d3ee;

    /* en de tokens van busifind.css die daarop gezet worden */
    --wit:          var(--bm-card);     /* blokken en kaarten */
    --zwart:        var(--bm-tx);       /* gewone tekst */
    --grijs:        var(--bm-mut);      /* bijschriften */
    --lijn:         var(--bm-bd);       /* randen en scheidingen */
    --veld:         #0d1430;            /* invulvelden, iets dieper dan een blok */
    --turkoois:     var(--bm-ac);
    --marine:       var(--bm-ac);       /* links */

    --ruimte:       #08111e;
    --ruimte2:      #0d1a2c;
    --zee:          #07182c;
    --zee-licht:    #14406a;
    --zee-diep:     #040d1c;
    --meer:         #10365c;
    --meerrand:     rgba(150, 200, 240, .35);
    --land:         #35638f;
    --land-licht:   #5b91bf;
    --landgekozen:  #6e9ac4;
    --landrand:     #7fb4de;
    --raster:       rgba(255, 255, 255, .08);
    --bolrand:      rgba(148, 190, 230, .40);
    --stadstip:     #ffd9b3;
    --stadtekst:    #ffe9d4;
    --speldrand:    #ffffff;
    --provrand:     rgba(206, 232, 255, .46);
    --provgekozen:  #86aed3;
    --straalvlak:   rgba(249, 115, 22, .20);
}

/* De grond van de pagina. `body { background: var(--wit) }` uit busifind.css
   zou nu de KAARTkleur pakken, en dan valt het verschil tussen blok en
   achtergrond weg. Daarom hier apart. */
body { background: var(--bm-bg); color: var(--bm-tx); }

/* De gloed bovenaan mag blijven, maar op een donkere grond is de helft genoeg. */
body::before {
    background:
        radial-gradient(45vw 30vh at 30% 40%, rgba(249, 115, 22, .10), transparent 70%),
        radial-gradient(45vw 30vh at 70% 35%, rgba(34, 211, 238, .08), transparent 70%);
}

/* ---------- kop ---------- */

/* De kop staat sinds 21-09-2026 IN de rechterkolom, boven "wat heb je nodig".
   Zo begint de bol bovenaan de pagina in plaats van onder een blok tekst, en
   dat scheelt hem de hoogte van een heel logo. De kop lijnt links uit, net als
   de blokken eronder: een kolom hoort een rand te hebben. */

.bolkop {
    padding: 0 0 4px;
    text-align: left;
}
.bolkop h1 {
    margin: 12px 0 2px;
    font-size: clamp(19px, 1.6vw, 24px);
    text-align: left;
}
.bolkop p {
    margin: 0;
    max-width: none;
    font-size: 14px;
    text-align: left;
}

.merk {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}
.merk img { width: 88px; height: 88px; display: block; }
.merknaam {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--bm-tx);
    line-height: 1;
}
.merknaam em { font-style: normal; color: var(--oranje); }
@media (max-width: 1100px) {
    .merk img { width: 72px; height: 72px; }
    .merknaam { font-size: 35px; }
}
@media (max-width: 560px) {
    .merk img { width: 62px; height: 62px; }
    .merknaam { font-size: 31px; }
}

.taalkies {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 12px;
}
.taalkies label {
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grijs);
}
.taalkies select {
    font: inherit;
    font-size: 14px;
    background: var(--wit);
    color: var(--zwart);
    border: 1px solid var(--lijn);
    border-radius: 9px;
    padding: 7px 10px;
    cursor: pointer;
}
.taalkies select:focus-visible { outline: 2px solid var(--oranje); outline-offset: 2px; }

/* ---------- raamwerk ----------

   De bol is waar het hier om gaat, dus die krijgt de ruimte. Op een breed
   scherm mag deze pagina ook buiten de sitebrede 1120 px komen: een wereldbol
   van 500 px is een plaatje, een van 800 px is een instrument. De bediening
   ernaast heeft genoeg aan een vaste kolom. */

.wrap { max-width: 1440px; }

.werk {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 22px;
    align-items: start;
    margin: 18px 0 34px;
}
@media (max-width: 1100px) { .werk { grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; } }
/* Op een telefoon EEN kolom, en nadrukkelijk minmax(0,1fr): een gewone 1fr
   krijgt van de browser een minimumbreedte gelijk aan zijn inhoud, en dan
   schuift de hele pagina opzij zodra iets binnenin breder uitvalt. */
@media (max-width: 880px)  {
    .werk { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .paneel, .bolvak { min-width: 0; }
    .stralen { gap: 5px; }
    .km { padding: 6px 11px; font-size: 13px; }
}

/* ---------- de bol ---------- */

.bolvak {
    position: relative;
    /* De bol is vierkant, dus zonder rem wordt hij op een breed scherm even
       hoog als breed en moet je scrollen om de knoppen ernaast te zien. Nooit
       hoger dan het scherm; wat overblijft in de kolom is witruimte. */
    width: 100%;
    /* min() en niet alleen 92vh: op een telefoon is 92vh breder dan het scherm,
       en dan duwt de bol de hele pagina opzij. */
    max-width: min(100%, 92vh);
    margin-inline: auto;
    background: radial-gradient(120% 100% at 30% 10%, var(--ruimte2) 0%, var(--ruimte) 70%);
    border: 1px solid var(--bm-bd);
    border-radius: var(--radius);
    overflow: hidden;
}
#bol {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    /* zonder dit neemt de browser het slepen over en draait de bol niet mee */
    touch-action: none;
    cursor: grab;
}
#bol:active { cursor: grabbing; }

.hulp {
    position: absolute;
    left: 12px; right: 12px; bottom: 10px;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(214, 230, 246, .62);
    text-align: center;
    pointer-events: none;
    text-wrap: balance;
}
.geenjs {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    margin: 0; padding: 24px;
    color: #dbe7f4; text-align: center;
}
.geenjs a { color: var(--oranje); }

/* de knop naar de motor houdt zijn witte tekst, ook op donker */
.zoekknop { color: #fff; }

/* ---------- bediening ----------

   LET OP DE NAAM. Deze blokken heten .bfblok en NIET .kaart, want .kaart is in
   busifind.css al bezet: dat is het klikbare resultaatkaartje, met
   `display:flex; align-items:center` en een zweefeffect bij hover. Noem je een
   paneelblok .kaart, dan staan de labels gecentreerd, worden ze zo breed als
   hun tekst, en zweven ze als je erover gaat. */

/* BusiFind centreert alles: `body { text-align: center }` is de huisregel van
   busifind.css. Voor een kop klopt dat, voor een invulveld, een label en zeker
   voor het zoekobject niet: die horen links te beginnen. De kop en de knop
   blijven wel gecentreerd, want dat is de huisstijl. */
.paneel, .paneel .lab, .paneel input[type="text"], .tref, #uit,
.onderwater summary, .val { text-align: left; }

.paneel { display: flex; flex-direction: column; gap: 12px; }

.bfblok {
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 13px;
    padding: 14px;
}
.bfblok > .lab {
    display: block;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grijs);
    margin: 0 0 8px;
}
.bfblok input[type="text"] {
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 16px;                 /* onder de 16px zoomt iOS de pagina in */
    background: var(--veld);
    color: var(--zwart);
    border: 1px solid var(--lijn);
    border-radius: 10px;
    padding: 11px 13px;
}
.bfblok input[type="text"]:focus-visible {
    outline: 2px solid var(--oranje);
    outline-offset: 1px;
    border-color: var(--oranje);
}

.waarvak { position: relative; }
#lijst {
    position: absolute;
    z-index: 5;
    left: 0; right: 0; top: calc(100% + 5px);
    background: var(--wit);
    border: 1px solid #d3d8e4;
    border-radius: 11px;
    box-shadow: 0 14px 32px rgba(17, 17, 17, .14);
    overflow: hidden auto;
    max-height: 300px;
}
.tref {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    text-align: inherit;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--lijn);
    padding: 9px 13px;
    cursor: pointer;
    font: inherit;
    color: var(--zwart);
}
.tref:last-child { border-bottom: 0; }
.tref:hover, .tref:focus-visible { background: #1a2246; outline: none; }
.tref .tn { font-weight: 700; font-size: 15px; }
.tref .tl { font-size: 12.5px; color: var(--grijs); }

.stralen { display: flex; flex-wrap: wrap; gap: 6px; }
.km {
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    background: var(--veld);
    color: var(--grijs);
    border: 1px solid var(--lijn);
    border-radius: 999px;
    padding: 7px 13px;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.km:hover { border-color: var(--oranje); color: var(--bm-tx); }
.km:focus-visible { outline: 2px solid var(--oranje); outline-offset: 2px; }
.km.aan { background: var(--oranje); border-color: var(--oranje); color: var(--wit); }

/* de knop naar de zoekmotor */
.zoekknop {
    display: block;
    text-align: center;
    text-decoration: none;
    font-weight: 800;
    font-size: 16px;
    background: var(--oranje);
    color: var(--wit);
    border-radius: 12px;
    padding: 14px 18px;
}
.zoekknop:hover { background: #ea6a0c; }
.zoekknop:focus-visible { outline: 2px solid var(--zwart); outline-offset: 2px; }
.zoekknop.uit { background: #161d3d; color: #5b6a92; pointer-events: none; }

/* De samenvatting van de zoekvraag: een zin, geen JSON. */
.onderwater { border-top: 1px solid var(--lijn); padding-top: 12px; }
.onderwater .lab {
    display: block;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grijs);
    margin: 0 0 6px;
}
#uit {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    color: var(--zwart);
    text-align: left;
}
#uit.leeg { color: var(--grijs); font-style: italic; font-size: 14.5px; }

.val {
    margin: 9px 0 0;
    font-size: 12.5px;
    color: #fdba74;
    background: #2a1b10;
    border-left: 3px solid var(--oranje);
    padding: 8px 10px;
    border-radius: 0 7px 7px 0;
}

#opnieuw {
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    background: none;
    border: 1px solid var(--lijn);
    border-radius: 10px;
    color: var(--grijs);
    padding: 9px 15px;
    cursor: pointer;
    align-self: flex-start;
}
#opnieuw:hover { border-color: var(--oranje); color: var(--bm-tx); }
#opnieuw:focus-visible { outline: 2px solid var(--oranje); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* De weg terug naar de zoekbalk over leden, cursussen en tools. Klein en
   onderaan: wie hier komt wil iets LATEN doen, niet bladeren. */
.netwerklink {
    margin: 2px 0 0;
    text-align: left;
    font-size: 13.5px;
}
.netwerklink a { color: var(--bm-mut); text-decoration: none; border-bottom: 1px solid var(--bm-bd); }
.netwerklink a:hover { color: var(--oranje); border-bottom-color: var(--oranje); }

/* ---------------------------------------------------------------------------
   VANGNET VOOR DE CENTRALE VOET

   De voet uit busiverse.network/voet.js is een component dat we hier niet in
   de hand hebben; hij komt binnen met eigen inline stijlen. Mocht hij op een
   smal scherm breder uitvallen dan het scherm, dan schuift HIJ in plaats van
   de hele pagina. Kost niets als het niet nodig is.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
    /* voet.js hangt #bvFoot aan de BODY, niet in onze #bv-voet, dus daar moet
       de rem op. Alleen de voet schuift; de pagina blijft staan. */
    #bv-voet, #bvFoot {
        max-width: 100vw;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------------------------------------------------------------------------
   DE RESULTATEN

   Ze staan onder de knop, in dezelfde kolom. Een aanbieder is een kaartje met
   een gezicht, een naam, waar hij zit en hoe ver dat is. Staat er niets, dan
   zeggen we dat ronduit: nepresultaten verzinnen om een netwerk groter te doen
   lijken is precies wat een zoekmachine kapotmaakt.
   -------------------------------------------------------------------------- */

#res { margin-top: 14px; text-align: left; }

.resbezig, .reskop {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grijs);
}

.reslijst { display: flex; flex-direction: column; gap: 8px; }

.reskaart {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 12px;
    background: var(--bm-card);
    border: 1px solid var(--lijn);
    border-radius: 12px;
    text-decoration: none;
    color: var(--zwart);
}
.reskaart:hover { border-color: var(--oranje); }
.reskaart:focus-visible { outline: 2px solid var(--oranje); outline-offset: 2px; }
.reskaart img {
    width: 44px; height: 44px;
    border-radius: 10px;
    object-fit: cover;
    flex: none;
}
.restekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resnaam  { font-weight: 700; font-size: 15px; }
.resregel { font-size: 13.5px; color: var(--grijs); }
.resplek  { font-size: 12.5px; color: var(--grijs); font-variant-numeric: tabular-nums; }
.resvak   { font-size: 12.5px; color: var(--bm-ac); }

.resleeg {
    background: var(--bm-card);
    border: 1px solid var(--lijn);
    border-radius: 12px;
    padding: 14px;
}
.resleegkop { margin: 0 0 10px; font-size: 15px; color: var(--zwart); }
.resknoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.resknop {
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    background: var(--oranje);
    color: #fff;
    border-radius: 9px;
    padding: 9px 13px;
}
.resknop:hover { background: #ea6a0c; }
.resknop:focus-visible { outline: 2px solid var(--zwart); outline-offset: 2px; }
.resknop.leeg { background: none; border: 1px solid var(--lijn); color: var(--grijs); }
.resknop.leeg:hover { border-color: var(--oranje); color: var(--zwart); }

/* De bedrijven die GEEN lid zijn. Visueel rustiger dan een lid: geen accent,
   geen avatar, en er staat bij dat ze geen lid zijn. Wie zichzelf herkent
   krijgt een knop om zijn plek op te eisen. */
.resbuiten { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lijn); }
.reskaart.extern {
    background: transparent;
    border-style: dashed;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.reskaart.extern:hover { border-color: var(--bm-ac); }
.resweb { font-size: 12.5px; color: var(--bm-ac); text-decoration: none; }
.resweb:hover { text-decoration: underline; }
.resclaim {
    flex: none;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    color: var(--oranje);
    border: 1px solid var(--lijn);
    border-radius: 8px;
    padding: 7px 10px;
    white-space: nowrap;
}
.resclaim:hover { border-color: var(--oranje); background: var(--bm-card); }
.resbron { margin: 9px 0 0; font-size: 11.5px; color: var(--grijs); }


/* =========================================================================
   NIEUWE HOMEPAGE (22-09-2026)

   Didier: "de bol is te dominant". De bol en de zoekvelden staan nu naast
   elkaar en zijn EVEN HOOG: de hoogte van de rij komt van de zoekvelden, en de
   bol vult dat vak (canvas absoluut in .bolvak, dus hij duwt de rij niet
   groter). globe.js meet het canvas en neemt min(breedte, hoogte) als bol.
   ========================================================================= */

/* ---------- kop: logo | boodschap | taal ---------- */
.bfkop {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: 18px 0 6px;
    text-align: left;
}
.bfkop .merk img { width: 64px; height: 64px; }
.bfkop .merknaam { font-size: 32px; }
.bfkop-tekst h1 {
    margin: 0;
    font-size: clamp(20px, 2.3vw, 30px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--bm-tx);
    text-wrap: balance;
}
.bfkop-tekst h1 .acc, .bfuitleg h2 .acc { color: var(--oranje); }
.bfkop-tekst p { margin: 6px 0 0; color: var(--bm-mut); font-size: 15px; max-width: none; }
.bfkop .taalkies { margin-top: 0; }

/* ---------- bol links, zoekvelden rechts, even hoog ---------- */
.werk {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: stretch;
    gap: 20px;
    margin: 14px 0 26px;
}
.bolvak {
    max-width: none;
    min-height: 340px;
    height: 100%;
}
.bolvak #bol {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}
.paneel { gap: 10px; }
.paneel .bfblok { padding: 12px 14px; }
.onderwater { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.onderwater #uit { flex: 1 1 200px; margin: 0; }
.onderwater #opnieuw { margin-left: auto; }

/* de resultaten staan nu onder de rij, over de volle breedte */
#res { margin: 0 0 26px; text-align: left; }

/* ---------- uitleg in vier stappen ---------- */
.bfuitleg { margin: 10px 0 30px; }
.bfuitleg h2 {
    margin: 0 0 16px;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 800;
    text-wrap: balance;
}
.stappen {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    text-align: left;
}
.stappen li {
    display: grid;
    gap: 6px;
    align-content: start;
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 13px;
    padding: 16px;
}
.stappen .nr {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 800; color: #fff;
    background: linear-gradient(135deg, #f97316, #7c3aed);
}
.stappen b { font-size: 16px; color: var(--bm-tx); }
.stappen span:not(.nr) { color: var(--bm-mut); font-size: 14px; line-height: 1.45; }
.blijft {
    margin-top: 12px;
    display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
    padding: 14px 16px;
    border-radius: 13px;
    border: 1px dashed rgba(34, 211, 238, .55);
    background: rgba(34, 211, 238, .06);
    text-align: left;
}
.blijft b { color: var(--bm-ac); }
.blijft span { color: var(--bm-mut); font-size: 14px; }

/* ---------- twee richtingen + gevonden worden ---------- */
.bftwee {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 30px;
    text-align: left;
}
.richting {
    display: grid; gap: 4px;
    padding: 16px;
    border-radius: 13px;
    border: 1px solid var(--lijn);
    background: var(--wit);
}
.richting b { font-size: 18px; }
.richting span { color: var(--bm-mut); }
.richting.r-zoek b::before { content: "\1F50E\00A0"; }
.richting.r-bied b::before { content: "\1F91D\00A0"; }
.gevonden {
    grid-column: 1 / -1;
    padding: 22px;
    border-radius: 16px;
    border: 1px solid rgba(249, 115, 22, .5);
    background: linear-gradient(135deg, rgba(249, 115, 22, .10), rgba(124, 58, 237, .10));
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 10px 26px;
}
.gevonden h2 { grid-column: 1; margin: 0; font-size: clamp(20px, 2.1vw, 26px); font-weight: 800; }
.gevonden > p { grid-column: 1; margin: 0; color: var(--bm-tx); opacity: .9; }
.gevonden .knoppen { grid-column: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.gevonden .waarom { grid-column: 2; grid-row: 1 / span 3; font-size: 14px; }
.gevonden .waarom b { display: block; margin-bottom: 6px; }
.gevonden .waarom ul { margin: 0; padding-left: 18px; color: var(--bm-mut); display: grid; gap: 3px; }
.bfk {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--lijn);
    background: var(--wit);
    color: var(--bm-tx);
    border-radius: 999px;
    padding: 10px 18px;
    font: inherit; font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.bfk.hoofd { border: 0; background: linear-gradient(135deg, #f97316, #7c3aed); color: #fff; }
.bfk:hover { filter: brightness(1.08); }
.bfk:focus-visible { outline: 2px solid var(--bm-ac); outline-offset: 2px; }
.netwerklink { margin: 0 0 18px; }

/* ---------- BusiBot voor gasten ---------- */
.bfbot {
    position: fixed; right: 16px; bottom: 16px; z-index: 9999;
    width: min(400px, calc(100vw - 32px));
    height: min(620px, calc(100vh - 32px));
    display: none; flex-direction: column;
    background: #0d1430;
    color: var(--bm-tx);
    border: 1px solid rgba(249, 115, 22, .55);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    text-align: left;
    overflow: hidden;
}
.bfbot.op { display: flex; }
.bfbot-kop { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--lijn); }
.bfbot-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #f97316, #7c3aed); }
.bfbot-x { margin-left: auto; background: none; border: 0; color: var(--bm-mut); font-size: 22px; cursor: pointer; line-height: 1; }
.bfbot-x:hover { color: #fff; }
.bfbot-log { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.bfbot-m { max-width: 86%; padding: 8px 12px; border-radius: 12px; white-space: pre-line; line-height: 1.45; font-size: 14.5px; }
.bfbot-m.b { background: var(--wit); border: 1px solid var(--lijn); align-self: flex-start; }
.bfbot-m.u { background: rgba(249, 115, 22, .18); align-self: flex-end; }
.bfbot-m.wacht { opacity: .65; font-style: italic; }
.bfbot-draft { margin: 0 12px 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(34, 211, 238, .5); background: rgba(34, 211, 238, .06); max-height: 45%; overflow-y: auto; font-size: 14px; }
.bfbot-dt { font-weight: 800; margin-bottom: 6px; }
.bfbot-dg { margin: 4px 0; }
.bfbot-dg ul { margin: 2px 0 0; padding-left: 18px; }
.bfbot-dg small { color: var(--bm-mut); }
.bfbot-dg input { width: 100%; padding: 4px 7px; border-radius: 7px; border: 1px solid var(--lijn); background: var(--veld); color: var(--bm-tx); font: inherit; }
.bfbot-db { margin: 6px 0; color: var(--bm-mut); font-size: 13px; }
.bfbot-rij { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.bfbot-k { display: inline-block; padding: 8px 14px; border-radius: 999px; font-weight: 700; text-decoration: none; color: var(--bm-tx); border: 1px solid var(--lijn); background: var(--wit); font-size: 14px; }
.bfbot-k.hoofd { border: 0; background: linear-gradient(135deg, #f97316, #7c3aed); color: #fff; }
.bfbot-l { background: none; border: 0; color: var(--bm-ac); cursor: pointer; font: inherit; font-size: 13px; padding: 2px 4px; }
.bfbot-in { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--lijn); }
.bfbot-in input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--lijn); background: var(--veld); color: var(--bm-tx); }
.bfbot-in button { border: 0; border-radius: 10px; padding: 0 14px; font-weight: 700; background: #f97316; color: #fff; cursor: pointer; }
.bfbot-in button:disabled { opacity: .5; cursor: default; }
.bfbot-priv { margin: 0; padding: 0 12px 10px; font-size: 11.5px; color: var(--bm-mut); }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
    .stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gevonden { grid-template-columns: minmax(0, 1fr); }
    .gevonden .waarom { grid-column: 1; grid-row: auto; }
}

/* ---------- telefoon: velden, compacte bol, knop, uitleg ---------- */
@media (max-width: 880px) {
    .bfkop { grid-template-columns: auto auto; gap: 10px 14px; }
    .bfkop .merk { grid-column: 1; }
    .bfkop .taalkies { grid-column: 2; justify-self: end; }
    .bfkop-tekst { grid-column: 1 / -1; grid-row: 2; }
    .bfkop .merk img { width: 48px; height: 48px; }
    .bfkop .merknaam { font-size: 26px; }
    .bfkop .taalkies label { display: none; }

    /* het paneel lost op in de rij, zodat de bol TUSSEN de velden en de knop
       kan staan, zoals gevraagd: velden, bol, zoekknop */
    .werk { display: flex; flex-direction: column; gap: 10px; }
    .paneel { display: contents; }
    .vak-wat { order: 1; } .vak-waar { order: 2; } .vak-straal { order: 3; }
    .bolvak { order: 4; height: min(78vw, 360px); min-height: 0; }
    .zoekknop { order: 5; }
    .onderwater { order: 6; }
    .stappen { grid-template-columns: minmax(0, 1fr); }
    .bftwee { grid-template-columns: minmax(0, 1fr); }
    .gevonden { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .bfk, .bfbot { transition: none; } }