/* Bootplein — kaarten. Eén set regels voor alle kaarten en vlakken op de publieke site.
 * Besloten 14 okt 2026 (Stephan), na een telling: vier soorten hover (4px, 3px en 2px optillen, of
 * niets), kaarten die klikbaar waren zonder hover, en kaarten met hover die nergens heen gingen.
 *
 * DE REGELS
 *  1. Elke kaart: wit, 1px lichte rand, hoeken van 16px. Geen verloop (gradient).
 *  2. Schaduw betekent "klikbaar". Alleen een kaart die je kunt aanklikken heeft een schaduw;
 *     zo zie je in één oogopslag wat je kunt indrukken.
 *  3. Hover alleen op klikbare kaarten, en rustig: de rand wordt blauw en de schaduw iets groter.
 *     Er beweegt niets (net als bij de knoppen). Klikbaar is altijd de héle kaart; een knop in
 *     de kaart doet hetzelfde als de kaart.
 *  4. De soorten:
 *       .kaart-klik        klikbare kaart (boot, huurboot, dienst, categorie, dealer, plan …)
 *       .kaart-info        informatie, niet klikbaar (stappen, "Waarom Bootplein", cijfers)
 *       .kaart-paneel      vlak met een formulier of filters erin — wit, zodat de velden opvallen
 *       .kaart-noot        tip of uitleg tussendoor: lichtblauw vlak met blauwe rand
 *     Erbij, op een klikbare kaart:
 *       .kaart-uitgelicht  hoogstens één per rij: effen donkerblauw met witte tekst
 *       .kaart-binnenkort  bestaat nog niet: vaag, geen hover, niet klikbaar
 *       .kaart-aanbevolen  het aanbevolen plan op Tarieven: oranje rand (oranje = adverteren,
 *                          knoppenregel 3); dat is daar de uitgelichte kaart.
 *  5. Uitzondering: kaarten óp een blauw vlak (de cijfers in de hero, "Ben je verhuurder?") zijn
 *     doorschijnend wit en vallen hier buiten. Snel zoeken in de hero houdt zijn schaduw, omdat hij
 *     boven de foto zweeft.
 *
 * Gebruik: class="dealer-kaart kaart-klik". De eigen klasse regelt alleen de binnenkant
 * (ruimte, indeling); rand, hoeken, schaduw en hover komen hier vandaan. Nooit via style="".
 */

.kaart-klik, .kaart-info, .kaart-paneel {
  background: #fff;
  border: 1px solid #e8eef6;
  border-radius: 16px;
}

.kaart-klik {
  box-shadow: 0 4px 24px rgba(16, 40, 80, 0.07);
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.kaart-klik:hover { border-color: #1a7fd4; box-shadow: 0 10px 30px rgba(16, 40, 80, 0.12); }
.kaart-klik:focus-visible { outline: 2px solid #1a7fd4; outline-offset: 2px; }

.kaart-noot { background: #f3f8ff; border: 1px solid #d6e6fb; border-radius: 16px; }

.kaart-uitgelicht { background: #16508c; border-color: #16508c; color: #fff; }
.kaart-uitgelicht:hover { border-color: #4aa9ec; }

.kaart-binnenkort { opacity: 0.6; cursor: default; box-shadow: none; }
.kaart-binnenkort:hover { border-color: #e8eef6; box-shadow: none; }

/* Het aanbevolen plan (Tarieven): oranje rand, ook bij hover. */
.kaart-aanbevolen, .kaart-aanbevolen:hover { border: 2px solid #f5901e; }