/*
 * Wat de echte site meer nodig heeft dan de demo, op de tokens van site.css. De demo
 * werkte met een script (resources/demo/bediening.js in mahaweb); deze site werkt
 * zonder: een keuze is een radio of een vinkje in een label, een tab is een link, en
 * verwijderen vraagt eerst met een details. Ook: de meldingen na een handeling, een
 * fout bij een veld, een wagen zonder foto, de fiche op A5, en "Website door MahaWeb".
 */

/* Naar de inhoud: alleen zichtbaar als iemand er met het toetsenbord op komt. */
.site .naar-inhoud {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--rand);
  background: var(--antraciet);
  color: var(--wit);
  font-weight: 700;
  text-decoration: none;
}
.site .naar-inhoud:focus { top: 1rem; }

/* De melding bovenaan elke pagina (Instellingen, Teksten). */
.site .melding-bovenaan {
  max-width: none;
  margin: 0;
  padding: 0.6rem 1.25rem;
  background: var(--antraciet);
  color: var(--wit);
  font-weight: 700;
  text-align: center;
}
/* De kleur die Hassan kiest (App\Site\Meldingkleur), op de balk, op het voorbeeld in het beheer en
   als staal bij de keuze. Elke tekst haalt het contrast van WCAG AA op zijn kleur. */
.site .melding--donker { background: var(--antraciet); color: var(--wit); }
.site .melding--rood { background: var(--rood); color: var(--wit); }
.site .melding--groen { background: var(--groen); color: var(--wit); }
.site .melding--blauw { background: #1D4ED8; color: var(--wit); }
.site .melding--geel { background: #FFD43B; color: var(--antraciet); }
.site .kleurstaal { flex: none; width: 1rem; height: 1rem; margin-right: 0.45rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(22, 25, 30, 0.2); }
.site label.chip:has(input:checked) .kleurstaal { box-shadow: 0 0 0 2px var(--wit); }

/* Het logo als bestand, in plaats van de wagen van de demo. */
.site .merk-logo { display: block; width: auto; height: 2.6rem; max-width: 11rem; object-fit: contain; }
.site .voet .merk-logo, .site .beheerkop .merk-logo { height: 2.2rem; }
.site .logo-op .merk-logo { height: 3.4rem; }
.site .fiche-kop .merk-logo { height: calc(var(--f) * 6); max-width: none; }

/* Een wagen die nog geen foto heeft: de wagen van het logo, licht, met wat er komt. */
.site .foto-volgt {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.35rem;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #E9ECEF;
  color: #B9C1C9;
  font-size: 0.875rem;
  font-weight: 700;
}
.site .foto-volgt svg { width: 42%; height: auto; }
.site .foto-volgt span { color: var(--staal); }
.site .raamkaart-foto .foto-volgt, .site .ook-foto .foto-volgt { aspect-ratio: 16 / 10; }

/* Ook te koop met de voorfoto (Mahir, 28 oktober 2026): de rode lijn onder de foto, zoals bij Nieuw binnen. */
.site .ook-kaart { overflow: hidden; padding-top: 0; border-top: 1px solid var(--lijn); }
.site .ook-kaart:has(a:hover) { border-top-color: var(--mist); }
.site .ook-foto { position: relative; margin: 0 -1.2rem 0.9rem; border-bottom: 0.3125rem solid var(--rood); background: #E9ECEF; }
.site .ook-kaart:has(a:hover) .ook-foto { border-bottom-color: var(--rood-diep); }
.site .ook-foto img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 78%; }
.site .ook-foto .label { position: absolute; top: 0.6rem; left: 0.6rem; box-shadow: 0 1px 0 rgba(22, 25, 30, 0.12); }
.site .galerij-foto--leeg { display: block; }
.site .fiche-foto .foto-volgt { height: 100%; aspect-ratio: auto; }

/* Een keuze zonder script: een radio of een vinkje in een chip. */
.site label.chip { cursor: pointer; user-select: none; }
.site label.chip:has(input:checked) { border-color: var(--antraciet); background: var(--antraciet); color: var(--wit); }
.site label.chip:has(input:focus-visible) { outline: 3px solid var(--antraciet); outline-offset: 2px; }
.site a.chip { text-decoration: none; color: inherit; }
.site a.chip.chip--aan { color: var(--wit); }

/* Een schakelaar zonder script: een vinkje met de schakelaar van de demo erachter. */
.site .schakelaar-vak { display: inline-flex; cursor: pointer; }
.site .schakelaar-vak:has(input:checked) .schakelaar::before { background: var(--groen); box-shadow: inset 0 0 0 0.2rem var(--groen), inset 1.1rem 0 0 0.2rem var(--wit); }
.site .schakelaar-vak:has(input:focus-visible) .schakelaar { outline: 3px solid var(--antraciet); outline-offset: 2px; border-radius: var(--rand); }
.site button.schakelaar { border: 0; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; }

/* De lijsten van een filter en een sortering als links. */
.site .keuzelijst-lijst li:has(> a) { padding: 0; }
.site .keuzelijst-lijst li > a { display: flex; justify-content: space-between; gap: 1rem; width: 100%; padding: 0.55rem 0.75rem; color: inherit; text-decoration: none; }
.site .keuzelijst-lijst .gekozen > a { color: var(--wit); }

/* Een fout bij een veld, en een veld dat niet in orde is. */
.site .veld-fout { margin-top: 0.35rem; color: var(--rood-diep); font-size: 0.9375rem; font-weight: 600; }
.site .invoer[aria-invalid="true"] { border-color: var(--rood); }

/* De bevestiging na het versturen: in de demo verscheen ze met :target. */
.site .bevestiging.is-zichtbaar { display: grid; }

/* Een melding na een handeling in het beheer. */
.site .melding {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: var(--rand);
  border: 1px solid;
  font-weight: 600;
}
.site .melding .ic { margin-top: 0.15rem; }
.site .melding--goed { background: var(--groen-zacht); border-color: #B9DCC6; color: #14432A; }
.site .melding--fout { background: var(--rood-zacht); border-color: #F4C2C5; color: var(--rood-diep); }

/* Verwijderen in twee stappen: de details opent de vraag. */
.site .wis-vraag { position: relative; }
.site .wis-vraag > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; font-weight: 700; font-size: 0.95rem; color: var(--rood-diep); }
.site .wis-vraag > summary::-webkit-details-marker { display: none; }
.site .wis-vraag-vak {
  position: absolute;
  z-index: 20;
  right: 0;
  top: 100%;
  width: min(20rem, 80vw);
  padding: 1rem;
  border: 1px solid var(--lijn);
  border-radius: var(--rand);
  background: var(--wit);
  box-shadow: 0 10px 30px rgba(22, 25, 30, 0.16);
}
.site .wis-vraag-vak p { margin-bottom: 0.75rem; font-size: 0.95rem; }
.site .knop--wis { background: var(--rood-diep); color: var(--wit); }
.site .knop--wis:hover { background: var(--nacht); }
.site .wis-vraag--klein > summary { width: 2.75rem; justify-content: center; color: var(--staal); }
.site .wis-paneel { margin-top: 1.5rem; }
.site .wis-paneel .wis-vraag-vak { left: 0; right: auto; }

/* De kop van het beheer: afmelden is een formulier. */
.site .beheer-uit .afmelden { display: inline; }
.site .beheer-uit .afmelden button { border: 0; background: none; font: inherit; font-weight: 600; font-size: 0.95rem; line-height: 2.75rem; padding: 0 0.85rem; border-radius: var(--rand); color: var(--mist); cursor: pointer; }
.site .beheer-uit .afmelden button:hover { background: rgba(255, 255, 255, 0.1); }
.site .tekstknop { border: 0; padding: 0; background: none; font: inherit; color: var(--antraciet); font-weight: 700; text-decoration: underline; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; }

/* De werkbalk boven de wagens: zoeken en sorteren met een gewone knop. */
.site .werkbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.site .werkbalk .zoekveld { flex: 1 1 18rem; }
.site .werkbalk-sorteer { width: auto; min-width: 13rem; }
.site .rijen-leeg, .site .rij-leeg { padding: 1.5rem 1.25rem; color: var(--staal); }
.site .kruimel--beheer { margin-bottom: 0.75rem; }
.site .kruimel--beheer a { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; }

/* De editor van een wagen, als pagina in de plaats van een venster. */
.site .formsectie-paneel .formsectie + .formsectie { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--lijn); }
.site .formsectie h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.site .bewerk-voet { position: sticky; bottom: 0; z-index: 10; display: flex; gap: 0.75rem; margin-top: 1.5rem; padding: 1rem 0; background: var(--grijs); border-top: 1px solid var(--lijn); }
@media (min-width: 64rem) { .site .bewerk { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .site .bewerk-zij { position: sticky; top: 1rem; } }
.site .uit-bewijs { margin-left: 0.35rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--groen-zacht); color: #14432A; font-size: 0.75rem; font-weight: 700; }
.site .gescand { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 1.25rem; padding: 1rem; border-radius: var(--rand); background: var(--groen-zacht); border: 1px solid #B9DCC6; color: #14432A; }
.site .scan { margin-bottom: 1.5rem; }
.site .scan-inhoud { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 64rem) { .site .scan-inhoud { grid-template-columns: auto minmax(0, 1fr) auto auto; } }
.site .scan h2 { font-size: 1.2rem; }
.site .scan-kies { cursor: pointer; }
.site .scan-kies:has(input:focus-visible) { outline: 3px solid var(--antraciet); outline-offset: 2px; }

/* De foto's van een wagen in de editor. */
.site .fotolijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0.75rem 0 1rem; }
.site .fotolijst-item { position: relative; }
.site .fotolijst-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.4rem; background: #E9ECEF; }
.site .fotolijst-item--voor { grid-column: 1 / -1; }
.site .fotolijst-item .label { position: absolute; left: 0.5rem; top: 0.5rem; }
.site .fotolijst-acties { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }
.site .fotolijst-acties button { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.6rem; border: 1px solid var(--lijn); border-radius: var(--rand); background: var(--wit); font: inherit; font-size: 0.875rem; font-weight: 700; color: var(--antraciet); cursor: pointer; }
.site .fotolijst-acties .fotolijst-wis { margin-left: auto; color: var(--rood-diep); }
.site .upload { cursor: pointer; }
.site .upload:has(input:focus-visible) { outline: 3px solid var(--antraciet); outline-offset: 2px; }
.site .upload--klein { padding: 1rem; }
/* Het gekozen bestand staat in het vak, in de woorden van de browser ("logo.png", "3 bestanden"):
   tot 28 oktober 2026 zat de kiezer verborgen, en zag wie een logo koos niets veranderen. Zonder
   JavaScript, zoals de site. Zijn eigen knop valt weg: het hele vak is de knop. */
.site .upload-bestand { order: 1; max-width: 100%; field-sizing: content; font: inherit; font-size: 0.9375rem; color: var(--staal); cursor: pointer; }
.site .upload-bestand::file-selector-button { display: none; }
.site .upload--klein .upload-bestand { grid-column: 2; }
/* Wat er bij een melding meegaat, geplakt of gekozen (js/plakken.js): een klein beeld, de naam en
   een knop om het weg te halen, en daaronder wat er net gebeurde. Leeg staat er niets. */
.site .plaklijst { display: grid; gap: 0.5rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.site .plaklijst li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; }
.site .plaklijst img { width: 3.5rem; height: 2.625rem; object-fit: cover; border-radius: 0.25rem; background: #E9ECEF; }
.site .plaklijst span { overflow-wrap: anywhere; font-size: 0.9375rem; color: var(--antraciet); }
.site .plaklijst button { min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.75rem; border: 1px solid var(--lijn); border-radius: var(--rand); background: var(--wit); font: inherit; font-size: 0.875rem; font-weight: 700; color: var(--rood-diep); cursor: pointer; }
.site .plakstand { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--staal); }
.site .plaklijst:empty, .site .plakstand:empty { display: none; }
/* De scan vraagt een foto: zodra er een gekozen is, zegt de knop het. */
.site .scan-gekozen { display: none; }
.site .scan-kies:has(input:valid) .scan-leeg { display: none; }
.site .scan-kies:has(input:valid) .scan-gekozen { display: contents; }

/* Aanvragen */
.site a.aanvraag { color: inherit; }
.site .aanvraag[aria-current] { background: var(--grijs); box-shadow: inset 4px 0 0 var(--antraciet); }
.site .detailfotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1.25rem; }
.site .detailfoto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.4rem; background: #E9ECEF; }
.site .detailfoto--groot { grid-column: 1 / -1; }
.site .gegevens { display: grid; gap: 0.35rem 1.5rem; margin-bottom: 1.25rem; }
@media (min-width: 48rem) { .site .gegevens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site .gegevens div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--lijn); }
.site .gegevens dt { color: var(--staal); }
.site .gegevens dd { font-weight: 700; text-align: right; }
.site .aanvraag-detail .knoppen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0; }
.site .notitieblok { display: grid; gap: 0.5rem; margin-top: 1rem; }
.site .notitieblok .knop { justify-self: start; }
.site .mailregel { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; color: var(--staal); font-size: 0.95rem; }
.site .detail-wis { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--lijn); }
.site .detail-wis .wis-vraag-vak { left: 0; right: auto; }

/* Meldingen aan MahaWeb */
.site .nieuwe-melding { margin-bottom: 1.5rem; background: none; border: 0; }
.site .nieuwe-melding > summary { list-style: none; cursor: pointer; width: max-content; }
.site .nieuwe-melding > summary::-webkit-details-marker { display: none; }
.site .nieuwe-melding[open] > summary { margin-bottom: 1rem; }
.site .nieuwe-melding[open] > form { background: var(--wit); border: 1px solid var(--lijn); border-radius: 0.6rem; }
.site a.melding-open { color: inherit; text-decoration: none; }
.site .badge { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 0.65rem; border-radius: 999px; background: var(--grijs); border: 1px solid var(--lijn); font-size: 0.8125rem; font-weight: 700; color: var(--staal); }
.site .meldinggroepen { display: grid; gap: 1.5rem; }
.site .meldinggroep-kop { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.75rem; align-items: center; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--lijn); }
.site .meldinggroep-kop h2 { font-size: 1.2rem; }
.site .meldinggroep-kop p { grid-column: 2; color: var(--staal); font-size: 0.95rem; }
.site .melding:where(.meldingen *) { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--lijn); border-radius: 0; font-weight: 400; display: block; }
.site .stand-blok { margin-bottom: 1.5rem; }
.site .stand-uitleg { padding: 0.85rem 1rem; border-radius: var(--rand); background: var(--wit); border: 1px solid var(--lijn); max-width: none; }
.site .stand-uitleg--wacht { background: #EEF3FA; border-color: #D3E2F3; }
.site .stand-uitleg--klaar { background: var(--groen-zacht); border-color: #B9DCC6; }
.site .reageren { display: grid; gap: 0.6rem; }
.site .reageren .knop { justify-self: start; }

/* Een datum als dag, maand en jaar (beheer/wagens/datum): drie keuzelijsten naast elkaar. */
.site .datumveld { min-width: 0; margin: 0; padding: 0; border: 0; }
.site .datumveld legend { padding: 0; }
.site .datumdelen { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 0.5rem; }

/* De sleutel van MahaWeb: eerst dat ze werkt, een andere pas op vraag. */
.site .sleutel-werkt { margin: 0 0 1.25rem; }
.site .andere-sleutel { margin-bottom: 0.5rem; }

/* Gebruikers: een lijst om te lezen, en Wijzigen opent het formulier. */
.site .rollen-uitleg { display: grid; gap: 0.5rem; margin: 0; padding: 1rem 1.25rem; border-bottom: 1px solid var(--lijn); background: var(--grijs); }
.site .rollen-uitleg div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; }
.site .rollen-uitleg dt { min-width: 7.5rem; }
.site .rollen-uitleg dd { margin: 0; color: var(--staal); font-size: 0.95rem; }
.site .gebruikers { margin: 0; padding: 0; list-style: none; }
.site .gebruiker { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: 0.75rem 1rem; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--lijn); }
.site .gebruiker:last-child { border-bottom: 0; }
.site .gebruiker-letter { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--antraciet); color: var(--wit); font-weight: 800; }
.site .gebruiker-wie { display: grid; gap: 0.1rem; min-width: 0; }
.site .gebruiker-wie strong { font-weight: 800; overflow-wrap: anywhere; }
.site .gebruiker-wie span { color: var(--staal); overflow-wrap: anywhere; }
.site .gebruiker-u { margin-left: 0.4rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--grijs); font-size: 0.8125rem; font-weight: 600; }
.site .gebruiker-acties { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.site .gebruiker-acties form { margin: 0; }
.site .gebruiker-wijzig { position: relative; }
.site .gebruiker-wijzig > summary { list-style: none; cursor: pointer; }
.site .gebruiker-wijzig > summary::-webkit-details-marker { display: none; }
.site .gebruiker-vak { left: 0; right: auto; display: grid; gap: 1rem; width: min(22rem, 85vw); }
@media (min-width: 48rem) { .site .gebruiker-acties { grid-column: 2 / -1; } }

/* Instellingen */
.site .tabs--instellingen { margin-bottom: 1.5rem; }
.site .paneel-kop--tussen { border-top: 1px solid var(--lijn); }
.site .zaakfotos { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .site .zaakfotos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site .zaakfoto { display: grid; gap: 0.6rem; align-content: start; }
.site .zaakfoto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0.4rem; }
.site .zaakfoto img.zaakfoto-rechtop { width: min(100%, 15rem); aspect-ratio: 4 / 5; }
/* Welk deel van een eigen foto in beeld blijft (App\Site\Uitsnede). Na site.css, en dus ook
   na de uitsnede waarop de held en de paginakop voor de voorbeeldfoto afgesteld zijn. */
.site .uitsnede--boven img { object-position: 50% 0; }
.site .uitsnede--midden img { object-position: 50% 50%; }
.site .uitsnede--onder img { object-position: 50% 100%; }
/* In het beheer: de foto van de startpagina zo smal als de band op een groot scherm, en de
   keuze van de uitsnede meteen in het voorbeeld, zonder JavaScript. */
.site .zaakfoto img.zaakfoto-band { aspect-ratio: 3 / 1; }
.site .zaakfoto:has(input[value="boven"]:checked) img { object-position: 50% 0; }
.site .zaakfoto:has(input[value="onder"]:checked) img { object-position: 50% 100%; }
.site .foto-te-klein { color: var(--rood-diep); font-weight: 600; }
.site .keuzes li[aria-current] { background: var(--antraciet); color: var(--wit); font-weight: 700; }
.site .keuzes li[aria-current] a, .site .keuzes li[aria-current] .wis { color: var(--wit); }
.site .keuze-kies { flex: 1; color: inherit; text-decoration: none; padding: 0.3rem 0; }
.site .keuze-naam { flex: 1; }
.site .keuzes-leeg { color: var(--staal); }
.site .keuzes li .wis-vraag { margin-left: auto; }
.site .toevoegen { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.site .uitzondering-nieuw { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--lijn); }
.site .uitzondering-nieuw h3 { font-size: 1.1rem; margin-bottom: 0.75rem; }
.site .uren-bewerk .dag { grid-template-columns: 6.5rem auto 1fr; }
.site .uren-bewerk .dag .veld-fout { grid-column: 1 / -1; }
/* De uren van een gesloten dag blijven bewerkbaar, dus ook leesbaar: 0.45 gaf 2,7:1, 0.65 haalt de 4,5:1 van WCAG. */
.site .uren-bewerk .dag:not(:has(input[type="checkbox"]:checked)) .tijden { opacity: 0.65; }
.site .beoordeling { border: 0; padding: 0; margin: 0 0 1.5rem; }
.site .beoordeling legend { font-weight: 800; margin-bottom: 0.6rem; }
.site .rij--gebruiker { grid-template-columns: 1fr; }
@media (min-width: 64rem) { .site .rij--gebruiker { grid-template-columns: minmax(0, 1.4fr) 12rem auto; } .site .rij--gebruiker .rij-gegevens, .site .rij--gebruiker .rij-acties { grid-column: auto; } }
.site .rij--gebruiker .rij-naam .invoer { margin-bottom: 0.25rem; }

/* Openingsuren op de site: de uitzonderingen van de komende twee weken. */
.site .uren-uitzonderingen { display: grid; gap: 0.35rem; margin-bottom: 0.75rem; }
.site .uren-uitzonderingen li { padding: 0.5rem 0.75rem; border-radius: var(--rand); background: var(--rood-zacht); color: var(--rood-diep); font-size: 0.95rem; }
.site .uren-uitzonderingen span { display: block; font-size: 0.875rem; }
.site .band--donker .uren-uitzonderingen li { background: rgba(255, 255, 255, 0.08); color: var(--wit); }
.site .voet-uitzondering { margin-top: 0.5rem; color: var(--wit); font-size: 0.9rem; }

/* Een wagen die nog niet op de site staat, bekeken vanuit het beheer. */
.site .beheer-voorbeeld { max-width: none; padding: 0.75rem 1.25rem; background: #FFF4D6; color: #5A4300; font-weight: 600; text-align: center; }

/* Website door MahaWeb, zoals bij movetoswim: het logo en de tinten van mahaweb.be op donker. */
.site .voet-mahaweb { display: flex; justify-content: flex-end; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.site .mahaweb-credit { display: inline-flex; align-items: center; gap: 10px; min-height: 2.75rem; text-decoration: none; transition: opacity 0.2s; }
.site .mahaweb-credit:hover { opacity: 0.82; }
.site .mahaweb-by { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.site .mahaweb-merk { display: inline-flex; align-items: center; gap: 6px; }
.site .mahaweb-logo { display: block; width: auto; height: 18px; }
.site .mahaweb-naam { font-size: 1rem; font-weight: 800; line-height: 1; letter-spacing: -0.01em; color: #F2EBDD; }
.site .mahaweb-naam-accent { color: #3090E9; }
.site .mahaweb-logo .merk-pijl { fill: #F2EBDD; }
.site .mahaweb-logo .merk-voor { fill: #2A8CE8; }
.site .mahaweb-logo .merk-piek { fill: #57A6EE; }
.site .mahaweb-logo .merk-zij { fill: #1458A8; }
.site .mahaweb-logo path { stroke: var(--nacht); stroke-width: 22px; paint-order: stroke; }

/* De fiche op A5, als flyer. */
.site .tabs--fiche { margin: 0; }
.site .tabs--fiche a, .site .tabs--fiche strong { line-height: 2.4rem; }
@page fiche-a5 { size: A5; margin: 0; }
@media print {
  .site .fichescherm--a5 { page: fiche-a5; padding: 7mm; }
  .site .fichescherm--a5 .fiche { --f: min(0.37rem, calc((100vw - 14mm) / 100 - 0.03rem)); }
}

/* Wat er niet op papier hoort, ook op de gewone pagina's (de offerte, regel 30). */
@media print {
  .site .kop, .site .voet, .site .belbalk, .site .melding-bovenaan, .site .naar-inhoud,
  .site .formkaart, .site .knoppen, .site .wagen-knoppen, .site .vraagkaart, .site .filterbalk,
  .site .aanbod-kop .keuzelijst, .site .lichtbak, .site .galerij-duimen { display: none !important; }
  .site .band { padding-block: 1rem; }
}

/*
 * Een kop komt uit Instellingen, Teksten, en daar staat geen zacht afbreekstreepje in
 * zoals in de demo ("Tweedehands­wagens"). Een lang woord mag dus afbreken, met een
 * streepje waar de browser het Nederlands kent, en anders gewoon: liever dan een pagina
 * die op een gsm over de rand loopt.
 */
.site h1, .site h2, .site h3 { hyphens: auto; overflow-wrap: anywhere; }
.site .held-raster > *, .site .velden-twee > *, .site .kolommen > *, .site .bewerk > * { min-width: 0; }
.site select.invoer { width: 100%; min-width: 0; max-width: 100%; }
.site .werkbalk select.werkbalk-sorteer { width: auto; flex: 0 1 auto; }
.site .fiche-balk .tabs a { color: var(--antraciet); text-decoration: none; }

/*
 * Wat de browsertests op een gsm van 320 en 390 breed vonden (ops/e2e): een lijn tussen
 * een label en zijn waarde die niet mag breken (in het Frans "Première immatriculation"),
 * een lang woord in het voorbeeld van een kop, en een telling naast een titel. Een vak
 * in een raster of een rij mag smaller worden dan zijn langste woord; dat woord breekt dan.
 */
.site .wagen-info > *, .site .wagen-hoofd > *, .site .wagen-zij > *, .site .specpanelen > *,
.site .wagen-notitie > *, .site .eigenschappen div > *, .site .tekstblok-taal > *,
.site .aanvragen > *, .site .zijblok > *, .site .gegevens div > * { min-width: 0; }
.site .gegevens dd { overflow-wrap: anywhere; }
.site .eigenschappen dd { text-align: right; overflow-wrap: anywhere; }
/* Onder de 64rem van site.css, waar het voorbeeld naast het formulier komt: dit blad komt erna. */
@media (max-width: 63.99rem) { .site .tekstblok-taal { grid-template-columns: minmax(0, 1fr); } }
.site .tekstvoorbeeld-kop { hyphens: auto; overflow-wrap: anywhere; }
.site .lijst > summary strong { min-width: 0; overflow-wrap: anywhere; }
.site .lijst > summary small { white-space: normal; text-align: right; }

/*
 * De tabs van Instellingen staan op een gsm in twee kolommen (site.css). Een kolom van 1fr
 * wordt niet smaller dan haar breedste tab, en "Mail en MahaWeb" liep op 320 breed in een
 * Chromium op Linux 2 px over de rand: laat de kolommen krimpen en de tekst breken.
 */
@media (max-width: 29.99rem) {
  .site .tabs--instellingen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site .tabs--instellingen a, .site .tabs--instellingen strong { white-space: normal; line-height: 1.25; padding: 0.7rem 0.75rem; text-align: center; }
}

/* Een formulier dat onderweg is (js/inzending.js): de knop zegt "Even geduld…" en vraagt geen tweede klik. */
.site form[aria-busy="true"] [type="submit"] { cursor: progress; opacity: 0.7; }

/* Het gesprek van een melding staat in een eigen vak (js/gesprek.js vervangt het), en dan volgt het
   paneel Reageren niet meer rechtstreeks op een paneel: zelfde ruimte als .paneel + .paneel. */
.site .gesprek-live + .paneel { margin-top: 1.5rem; }

/*
 * De splash op het eigen domein tot het live gaan (App\Http\Middleware\Splash): op nacht, zoals de
 * voet, met de naam bovenaan, de drie talen en de knoppen om de zaak nu al te bereiken.
 */
.site.splash { display: flex; flex-direction: column; background: var(--nacht); color: var(--mist); }
.site .splash-inhoud { flex: 1; display: flex; align-items: center; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.site .splash-inhoud .merk { margin-bottom: clamp(2rem, 1rem + 4vw, 4rem); color: var(--wit); }
.site .splash-inhoud .merk-naam span { color: var(--mist); }
.site .splash-inhoud h1 { max-width: 13em; margin-bottom: 1.25rem; color: var(--wit); }
.site .splash-inhoud .inleiding { color: var(--mist); }
.site .splash-talen { display: grid; gap: 0.75rem; max-width: 40rem; margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.site .splash-talen strong { color: var(--wit); }
.site .splash-inhoud .knoppen { margin-top: 2rem; }
/* Het adres breekt anders op 320 breed op zijn streepje, en heel past het daar net. */
.site .splash-mail { padding-inline: 0.85rem; font-size: 0.9375rem; white-space: nowrap; }
.site .splash-adres { margin-top: 1.5rem; font-style: normal; }
.site .splash-voet { padding-bottom: 1.5rem; font-size: 0.9375rem; }
.site .splash-voet-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.site .splash-voet .voet-mahaweb { margin-top: 0; padding-top: 0; border-top: 0; }