/* Aanvullingen op het v2-ontwerp voor onderdelen die in het mockup een plaatje
   waren en hier echt werken.

   Het mockup bouwde de zoekbalk uit div's met vaste tekst erin. Zodra daar
   echte formuliervelden staan, brengen die hun eigen browseropmaak mee: een
   rand, een eigen lettertype en een grijze achtergrond. Deze regels halen dat
   weg zodat een <input> er hetzelfde uitziet als de <span class="vl"> waar hij
   voor in de plaats komt.

   Verder niets. Alles wat het ontwerp zelf regelt, blijft in base/results/
   home/home2/page/place.css staan. */

/* Zes vertrekluchthavens en honderden bestemmingen: die twee velden zijn niet
   verwisselbaar, dus de wisselknop is weg en de kolom ervoor ook. */
.sc-fields{grid-template-columns:1fr 1fr 150px 150px auto}

.sc .fld{cursor:default}
.sc .fld:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,107,69,.11)}
.sc .fld .lb{cursor:default}

.fld input.vl,
.fld select.vl{
  width:100%;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  font:inherit;
  font-size:16.5px;
  font-weight:600;
  letter-spacing:-.012em;
  color:var(--ink);
  appearance:none;
  -webkit-appearance:none;
}
.fld input.vl:focus,
.fld select.vl:focus{outline:none}
.fld input.vl::placeholder{color:var(--ink-4);font-weight:500}
/* Safari geeft een date-invoer een eigen hoogte en een inspringing links. */
.fld input[type="date"].vl{min-height:0;line-height:1.2}
.fld input[type="date"].vl::-webkit-date-and-time-value{text-align:left}

@media(max-width:900px){
  .sc-fields{grid-template-columns:1fr 1fr}
  .sc-fields .btn{grid-column:1/-1}
}

/* ---------- kaartjes zonder foto ---------- */
/* Het ontwerp gaat ervan uit dat elke stad en elk land een foto heeft. Wij
   hebben ze grotendeels nog niet. Een leeg beeldvlak tonen leest als een
   laadfout, dus laten we het vlak weg en krijgt de prijs een plek in de regel
   eronder. */
/* Het grid maakt alle kaartjes in een rij even hoog. Staat er in dezelfde rij
   een kaartje met foto, dan zou de tekst van een kaartje zonder foto tegen de
   bovenrand blijven plakken met een gat eronder. Daarom vult de tekstbak de
   hele kaart en staat hij verticaal gecentreerd. */
.cg{display:flex;flex-direction:column}
.cg .bd{flex:1;display:flex;flex-direction:column;justify-content:center}
.cg .mt .pr{margin-left:auto;font-size:15px;font-weight:800;letter-spacing:-.022em;color:var(--ink)}
.rl .im{width:38px;height:38px;border-radius:8px;flex-shrink:0;background:var(--surface-3)}

/* ---------- links waar het ontwerp knoppen had ---------- */
/* Het mockup maakt van elke kaart een <button> die met JavaScript de rest van
   de pagina omzet. Bij ons zijn het echte links naar echte pagina's; de css
   van het ontwerp mikt op de klassenaam, alleen de display-waarde van een
   <button> moet er nog bij. */
.aps .ap{display:block;color:inherit}
.dfilters a{flex-shrink:0;height:32px;padding:0 13px;border:1px solid var(--line);border-radius:99px;background:var(--surface);font-size:14px;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center}
.dfilters a:hover{border-color:var(--line-3)}
.dfilters a.on{background:var(--dark);border-color:var(--dark);color:#fff}
.collage .cell{display:block}
.dgrid .dc,.dests .dest{color:inherit}
/* Het staafje mag niet meekrimpen met de flexkolom; anders worden zeven
   verschillende hoogtes alsnog zeven gelijke staafjes. */
.wb .cl{flex-shrink:0}

/* ---------- kennisbank: sorteren en filteren als links ---------- */
/* Zelfde reden als bij het bestemmingsgrid: clientside sorteren laat Google
   een andere volgorde zien dan de bezoeker, dus zijn het links. De css van
   het ontwerp mikt op button, dus die regels krijgen hier hun tegenhanger. */
.sorts a{height:32px;padding:0 13px;border:0;border-radius:8px;background:transparent;font-size:14px;font-weight:600;color:var(--ink-3);display:inline-flex;align-items:center;gap:6px}
.sorts a:hover{background:var(--surface-2);color:var(--ink)}
.sorts a.on{background:var(--dark);color:#fff}
.ed-bar a{height:32px;padding:0 13px;border-radius:99px;border:1.4px solid var(--line);background:var(--surface);font-size:14px;font-weight:700;color:var(--ink-2);display:inline-flex;align-items:center;gap:5px}
.ed-bar a:hover{border-color:var(--line-3)}
.ed-bar a.on{background:var(--dark);border-color:var(--dark);color:#fff}
.ed-bar a.on span{color:rgba(255,255,255,.6)!important}

/* ---------- luchthaventabel op smal scherm ---------- */
/* Het ontwerp verbergt de kolomkoppen onder 1140px. De waarden zeggen daarom
   zelf wat ze zijn ("+5% duurder" in plaats van "+5%"), en de landkolom krijgt
   een label mee, zodat er op mobiel niets minder te lezen valt dan op
   desktop. */
@media(max-width:1140px){
  .aptbl.havens .ap-a:not(:empty)::before{content:"Vertrekt uit ";color:var(--ink-4)}
}

/* ---------- suggesties bij het Naar-veld ---------- */
/* Het ontwerp kent geen suggestielijst; het Naar-veld was daar vaste tekst.
   Deze opmaak volgt de vormgeving van de andere v2-kaartjes. */
.sc .fld{position:relative}
.v2-sugg{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:40;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-m);
  box-shadow:var(--sh-2);overflow:hidden;max-height:280px;overflow-y:auto}
.v2-sugg button{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;
  width:100%;padding:9px 13px;border:0;background:transparent;font:inherit;text-align:left}
.v2-sugg button:hover,.v2-sugg button.aan{background:var(--surface-2)}
.v2-sugg b{font-size:15.5px;font-weight:700;letter-spacing:-.018em;color:var(--ink)}
.v2-sugg i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--ink-4);letter-spacing:.06em}
.v2-sugg span{font-size:13px;color:var(--ink-3)}

/* ---------- cabineklasse in de zoekbalk ---------- */
/* Een echte select in de vorm van de .drop-knop uit het ontwerpsysteem (zie
   results.css): rand, afgeronde hoek, klein pijltje. Het pijltje is een eigen
   svg omdat appearance:none het browserpijltje weghaalt; zonder pijltje zag je
   niet dat het een keuzelijst is. De widget leest `class` uit de URL. */
.sc-opts .drop{position:relative;display:inline-flex;align-items:center;height:34px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);
  color:var(--ink-2);transition:border-color .15s}
.sc-opts .drop:hover{border-color:var(--line-3);color:var(--ink)}
.sc-opts .drop:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,107,69,.11)}
.sc-opts .drop select{height:100%;border:0;background:transparent;font:inherit;font-size:14px;
  font-weight:600;letter-spacing:-.01em;color:inherit;padding:0 30px 0 12px;
  appearance:none;-webkit-appearance:none;cursor:pointer;border-radius:9px}
.sc-opts .drop select:focus{outline:none}
.sc .pijl{position:absolute;right:11px;top:50%;margin-top:-6px;color:var(--ink-4);pointer-events:none}

/* Het Vanaf-veld is ook een keuzelijst; hetzelfde pijltje laat dat zien. */
.sc .fld-keuze select.vl{padding-right:22px;cursor:pointer}
.sc .fld-keuze .pijl{right:14px;top:auto;bottom:15px;margin-top:0}

/* ── Woordmerk ────────────────────────────────────────────────────────────
   Het mockup tekende het merk na: een vliegtuigje in een groen blokje en de
   naam in de ontwerpletter. Hier staat het echte woordmerk. Dat is een PNG
   met transparante achtergrond in donkerblauw met een groene punt.

   In de voettekst moet hetzelfde merk wit zijn. In plaats van een tweede
   bestand te onderhouden dat bij elke merkwijziging vergeten wordt, kleurt
   een filter hetzelfde bestand vlak wit: brightness(0) maakt elke pixel
   zwart met behoud van de doorzichtigheid, invert(1) maakt daar wit van. De
   groene punt gaat daarbij mee naar wit, en dat is precies wat "het logo in
   het wit" betekent. */
.logo .wm{display:block;height:28px;width:auto}
body.wt .top .logo .wm{height:30px}
.ft .logo .wm{height:30px;filter:brightness(0) invert(1)}
body.wt .ft .logo .wm{height:32px}
@media(max-width:780px){.logo .wm,body.wt .top .logo .wm{height:26px}}

/* ── Routekiezer als links ────────────────────────────────────────────────
   Het ontwerp maakt hier knoppen van, want in het mockup luistert JavaScript
   naar de klik. Hier is elke route een adres, dus zijn het links met dezelfde
   opmaak. Zelfde patroon als bij .dfilters hierboven. */
.routepick a{flex-shrink:0;height:44px;padding:0 15px 0 5px;border:1.4px solid var(--line);border-radius:99px;background:var(--surface);font-size:15.5px;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:9px}
.routepick a:hover{border-color:var(--line-3)}
.routepick a.on{background:var(--dark);border-color:var(--dark);color:#fff}
.routepick a.on .p{color:rgba(255,255,255,.65)}
.routepick a .th{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--surface-3)}
.routepick a .p{font-size:14px;font-weight:700;color:var(--ink-3)}

/* Kop boven de uitgepakte route: welke route je nu leest. */
.routekop{margin:16px 0 14px;padding:14px 16px;border:1px dashed var(--line);border-radius:var(--r-m);background:var(--surface-2)}
.routekop h3{font-size:20px;letter-spacing:-.025em;margin:0}
.routekop p{margin:5px 0 0;font-size:15px;color:var(--ink-2);line-height:1.55}
.routekop .lnk{margin-left:6px}
/* De koppen binnen de routesectie zijn h4 en moeten er als sectiekop uitzien. */
.sec-hd h4{font-size:20.5px;font-weight:800;letter-spacing:-.027em;margin:0}

/* ── Prijsdalingen ───────────────────────────────────────────────────────
   .dlist en de voetnoot staan niet in het ontwerp; de rijen zelf (.dr) wel. */
.dlist{display:flex;flex-direction:column;gap:6px}
.drops .dropnoot{margin:14px 0 0;font-size:13px;line-height:1.55;color:rgba(255,255,255,.62)}
.drops .btn.gh{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.drops .btn.gh:hover{background:rgba(255,255,255,.18)}

/* ── Logo's in de maatschappijenmuur ─────────────────────────────────────
   Het ontwerp zet er twee letters in een donker rondje neer. Wij hebben van
   elke maatschappij een beeldmerk. Het rondje blijft, met een lichte vulling
   zodat een logo met een witte achtergrond niet in de tegel wegvalt. */
.alc .lg{width:24px;height:24px;border-radius:50%;object-fit:contain;background:#fff;flex-shrink:0;border:1px solid var(--line)}

/* ── Inklapbare lijsten ──────────────────────────────────────────────────
   Zie static/v2/inklap.js voor waarom de lijst altijd volledig in de HTML
   staat en dit alleen een visuele vouw is. De maxHeight komt van het script;
   hier staat wat er gebeurt zodra hij er staat. */
.inklap{position:relative}
.inklap.is-in [data-inklap-lijst]{overflow:hidden}
.inklap.is-in::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:52px;
  height:74px;
  pointer-events:none;
  backdrop-filter:blur(2.5px);
  -webkit-backdrop-filter:blur(2.5px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 62%);
  mask-image:linear-gradient(to bottom,transparent,#000 62%);
  background:linear-gradient(to bottom,rgba(250,250,248,0),var(--bg) 88%);
}
.inklapknop{
  display:block;
  margin:14px auto 0;
  height:38px;
  padding:0 20px;
  border:1.4px solid var(--line);
  border-radius:99px;
  background:var(--surface);
  font-family:inherit;
  font-size:14.5px;
  font-weight:700;
  color:var(--ink-2);
  cursor:pointer;
}
.inklapknop:hover{border-color:var(--line-3);color:var(--ink)}
/* In de donkere maatschappijenkaart is de achtergrond niet de paginakleur. */
.tblock .inklap.is-in::after{background:linear-gradient(to bottom,rgba(255,255,255,0),var(--surface) 88%)}

/* ── Mobiel: niets mag horizontaal buiten het scherm vallen ───────────────
   Gemeten op 375 pixels, niet bekeken: de pagina schoof 63 pixels opzij en
   dat is op elke v2-pagina zo. Drie oorzaken, alle drie hetzelfde soort
   fout.

   1. Een raster- of flexvak krimpt standaard niet onder de breedte van zijn
      eigen inhoud (min-width:auto). Eén lange regel in de zoekbalk of in de
      hero rekt daarmee de hele kolom op. `min-width:0` geeft de vakken hun
      krimp terug.
   2. In de rij "de acht voordeligste bestemmingen" staat soms een
      luchthavennaam als "Verona Villafranca Valerio Catullo". Die rekt de
      rij tot 410 pixels. Nu krijgt de naam een beletselteken.
   3. De voettekst hield op elke breedte vier kolommen aan.

   Op desktop verandert er niets: `min-width:0` doet daar niets zolang de
   inhoud past, en de voettekst-kolommen wisselen pas onder 820 pixels. */
.hero-in>*,.sc-fields>*,.rt-grid>*,.dests>*,.guide>*{min-width:0}
.rt-grid .rt .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Het bronbijschrift rechts in een sectiekop. Dat was kale grijze tekst van
   12,5 pixels, en omdat de inleiding links op 64 tekens is gemaximeerd en de
   sectie 1.320 pixels breed is, stond het met zevenhonderd pixels leegte
   ertussen tegen de rechterrand aan. Het las als iets wat per ongeluk was
   blijven staan in plaats van als een label bij de tabel eronder. Als
   omrand plaatje hoort het ergens bij. */
.sec-hd .src{flex:0 1 auto;align-self:flex-end;background:var(--surface-2);
  border:1px solid var(--line);border-radius:99px;padding:5px 13px;
  font-weight:600;line-height:1.35;max-width:34ch;text-align:right}

@media(max-width:760px){
  /* Op een telefoon staat het onder de inleiding en hoort het links te
     beginnen, net als alle andere tekst. */
  /* flex:none zou hier betekenen dat het bijschrift niet mag krimpen, en met
     een regel van veertig tekens is dat 413 pixels op een scherm van 375: de
     hele pagina schoof dan 52 pixels opzij. Gemeten, niet geschat. */
  .sec-hd .src{align-self:flex-start;text-align:left;max-width:100%}
}

/* ---------- datatabellen ----------
   De negen tabellen die contenttokens opbouwt: maanden, vertrekhavens,
   reisduur, verblijfsduur, schoolvakanties, klimaat, prijs naast weer.

   Hier stond alleen `overflow-x:auto` en verder niets, dus de tabel zelf had
   nul opmaak en kwam eruit als kale browser-HTML: kolommen tegen elkaar
   ("september 2026€242"), geen lijnen, geen ritme, cijfers links uitgelijnd
   zodat je ze niet kon vergelijken. Naast de luchthaventabel ernaast, die wel
   volledig is opgemaakt, zag dat eruit als een half afgemaakte pagina.

   Alle negen hebben dezelfde vorm: eerste kolom een label, alle volgende
   kolommen getallen. Daarom kan de uitlijning hier in een keer goed. */
.tbl{max-width:100%;overflow-x:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-l);margin:18px 0}
.tbl table{width:100%;border-collapse:collapse;font-size:15.5px}
.tbl thead th{background:var(--surface-2);border-bottom:1px solid var(--line);
  padding:11px 16px;text-align:right;white-space:nowrap;
  font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4)}
.tbl thead th:first-child{text-align:left}
.tbl tbody tr{border-bottom:1px solid var(--line)}
.tbl tbody tr:last-child{border-bottom:0}
.tbl tbody tr:hover{background:var(--surface-2)}

/* De rijkop links en zwaar, de rest rechts uitgelijnd. Cijfers vergelijk je
   per kolom, en dat kan alleen als de eenheden onder elkaar staan;
   tabular-nums zorgt dat een 1 net zo breed is als een 8. */
.tbl tbody th{padding:11px 16px;text-align:left;white-space:nowrap;
  font-weight:700;letter-spacing:-.018em;color:var(--ink)}
.tbl tbody td{padding:11px 16px;text-align:right;white-space:nowrap;
  color:var(--ink-2);font-variant-numeric:tabular-nums}

/* De tweede kolom is in elke tabel het bedrag of de kernwaarde waar de lezer
   op scant. Die mag zwaarder dan de kolommen erachter. */
.tbl tbody td:first-of-type{font-weight:700;color:var(--ink);
  font-size:16.5px;letter-spacing:-.024em}

@media(max-width:760px){
  .tbl table{font-size:14.5px}
  .tbl thead th,.tbl tbody th,.tbl tbody td{padding:10px 12px}
  /* Zes kolommen passen niet op 375 pixels, dus de tabel schuift. Zonder een
     vastgezette eerste kolom schuift de maandnaam mee weg en weet je bij de
     laatste kolom niet meer naar welke rij je kijkt. */
  .tbl tbody th{position:sticky;left:0;background:var(--surface);
    box-shadow:1px 0 0 var(--line)}
  .tbl tbody tr:hover th{background:var(--surface-2)}
  .tbl thead th:first-child{position:sticky;left:0;background:var(--surface-2);
    box-shadow:1px 0 0 var(--line)}
}
@media(max-width:820px){
  .ft-in{grid-template-columns:1fr 1fr;gap:26px}
}
@media(max-width:560px){
  /* Twee fotokaarten naast elkaar op een telefoon laat 133 pixels over voor
     stadsnaam en prijs samen; die passen daar niet in. */
  .dests{grid-template-columns:1fr}
  /* Vier weekdagkaarten naast elkaar passen niet: base.css zet de tussenruimte
     op veertien pixels en place.css rekent nog met zeven. */
  .dows{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .ft-in{grid-template-columns:1fr;gap:22px}
}

/* ── Hoofdmenu op smalle schermen ─────────────────────────────────────────
   home.css en results.css zetten allebei `.top nav{display:none}` onder 820
   pixels. Die twee bestanden worden op elke v2-pagina geladen, dus het hele
   hoofdmenu was sitebreed onzichtbaar op een telefoon: geen Vluchten, geen
   Bestemmingen, geen Maatschappijen, geen Kennisbank. Alleen het logo en de
   zoekknop bleven over, en de rest van de site was vanaf een telefoon niet
   meer te bereiken zonder eerst helemaal naar de voettekst te scrollen.

   Dat is precies wat niet mag: een bezoeker op een telefoon hoort dezelfde
   links te krijgen als een bezoeker op een laptop. Vijf items passen niet op
   375 pixels, dus krijgt de balk een eigen rij en mag hij zelf schuiven. Alle
   items blijven zo bereikbaar, en de pagina schuift niet mee. */
@media(max-width:820px){
  .top nav,body.wt .top nav{display:flex;grid-column:1/-1;order:3;
    justify-self:stretch;margin:2px 0 0;padding-bottom:2px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a,body.wt .top nav a{flex:0 0 auto;font-size:14.5px;padding:7px 11px}
  body.wt .top{grid-template-columns:1fr auto;row-gap:0;height:auto;
    padding-block:10px;align-items:center}
}

/* ---------- enkele reizen op de bestemmingspagina ---------- */
/* Eigen kolom in plaats van .ap-a, omdat daar op smal scherm "Vertrekt uit"
   voor komt. Op mobiel krijgt hij net als .ap-a de volle breedte. */
.aptbl .ap-e{font-size:14px;color:var(--ink-3);font-weight:600}
.aptbl .ap-r{font-weight:500;color:var(--ink-4)}
.aptbl .ap-r a{color:var(--ink);font-weight:700}
@media(max-width:1140px){
  .aptbl .ap-e{grid-column:1/-1;font-size:13.5px}
}

/* ---------- antwoord onder de kop ---------- */
/* De eerste zin onder de kop van een datablok is het antwoord, met stad,
   bedrag en datum. Hij staat vóór de uitleg en leest als lopende tekst, iets
   donkerder dan de toelichting eronder. Zie core/services/antwoorden.py. */
.sec-hd p.antw{color:var(--ink);font-size:17px;line-height:1.5;margin:8px 0 6px;max-width:72ch}
.sec-hd p.antw b{font-weight:700}

/* ---------- zoekbalk op mobiel ---------- */
/* De hero heeft een decoratieve gloed die 160px buiten het blok steekt. Met
   overflow:hidden is dat blok nog steeds verschuifbaar: zodra een veld in de
   zoekbalk focus kreeg, schoof de browser de hele hero 78px opzij en stond het
   formulier half buiten beeld. clip knipt af zonder te kunnen verschuiven. */
.hero{overflow:hidden;overflow:clip}

/* Het Naar-veld is op mobiel een halve kolom; de suggesties krijgen meer ruimte
   en groeien vanaf de rechterrand naar links, binnen het scherm. */
/* De suggestielijst staat vast op het scherm; zoekbalk.js zet top, left en
   width onder het Naar-veld. Zo knipt de hero hem niet af. */
.sc .fld .v2-sugg{position:fixed;right:auto;z-index:60}

/* Retour / Enkele reis en de klassekeuze op één rij. */
.sc-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.sc-kop .sc-tabs,.sc-kop .sc-opts{margin-bottom:0}

/* Maatschappijenoverzicht: de filterknoppen uit het ontwerp zijn hier links
   (filter in de URL), dus dezelfde opmaak op a. */
.ml-bar .grp a{display:inline-flex;align-items:center;height:34px;padding:0 15px;border-radius:99px;font-size:15px;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.ml-bar .grp a:hover{color:var(--ink)}
.ml-bar .grp a.on{background:var(--ink);color:#fff}
@media(max-width:760px){.ml-bar .grp{flex-wrap:wrap;border-radius:20px}}
.ml-c{color:inherit;text-decoration:none}
.ml-a .row a{display:block;border-radius:11px}
.ml-logo.breed{width:132px}
.ml-logo.breed img{padding:4px 10px}
.ml-logo.breed.sm{width:96px}
.ml-logo.breed.sm img{padding:3px 7px}
@media(max-width:760px){.ml-logo.breed{width:112px}.ml-logo.breed img{padding:4px 8px}}
.al-mark.breed{width:132px;object-fit:contain;padding:4px 10px;background:#fff;border:1px solid var(--line)}
@media(max-width:760px){.al-mark.breed{width:112px;padding:4px 8px}}

/* Footer, onderste regel: de juridische links naast elkaar met een punt
   ertussen. De kolomlinks erboven zijn blokken (.ft a), deze niet. */
.ft-bot{align-items:center}
.ft .ft-jur{display:flex;flex-wrap:wrap;align-items:center;gap:0}
.ft .ft-jur a{display:inline;padding:0;font-size:inherit;font-weight:500}
.ft .ft-jur a+a::before{content:"·";margin:0 9px;color:rgba(255,255,255,.35)}

/* Header rechts: in het grid (1fr auto 1fr) doet margin-left:auto niets; de
   laatste kolom moet zelf naar rechts. */
body.wt .top .rt{justify-self:end}
.top .rt-uit{margin:0}

/* Inlogpagina */
.inlog{max-width:420px;margin:48px auto 72px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-2);padding:30px 28px}
.inlog h1{font-size:32px;letter-spacing:-.035em;margin:0 0 6px}
.inlog .sub{color:var(--ink-3);font-size:16px;margin:0 0 22px}
.inlog label{display:block;font-size:14px;font-weight:700;color:var(--ink-2);margin:14px 0 6px}
.inlog input{width:100%;height:46px;border:1px solid var(--line-2);border-radius:10px;padding:0 14px;font-size:16px;background:var(--surface);color:var(--ink)}
.inlog input:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.inlog .btn.go{width:100%;height:46px;margin-top:22px;font-size:16px}
.inlog .fout{background:var(--high-bg);border:1px solid var(--high-bd);color:var(--high-ink);border-radius:10px;padding:10px 14px;font-size:15px;margin-bottom:6px}

/* ── Klantenservice ────────────────────────────────────────────────────────
   /klantenservice-overview/ en de rubrieken eronder. De pagina's zijn
   opgebouwd uit onderdelen die de kennisbank ook gebruikt (ed-hero, ed-cats,
   ed-qa, ed-idx, ed-ask); hieronder alleen wat daar niet in zat. */

/* De vragenrij heeft drie kolommen in plaats van de vijf van .ed-r: er is geen
   leestijd en geen teller, wel een rubriek en een doorverwijzing. */
.ks-r{grid-template-columns:150px 1fr auto}
.ks-r .m{color:var(--brand)}

/* Het contactblok is hoger dan een regel tekst, dus niet verticaal centreren
   zoals .ed-ask doet: dan zweven de gegevens naast het formulier. */
.ks-ask{align-items:start}
.ks-ask h3{letter-spacing:-.03em}

/* Contactgegevens als paren. Een <dl> en geen tabel: het is een opsomming van
   label en waarde, geen kruistabel. */
.ks-nap{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin:18px 0 0}
.ks-nap>div{min-width:0}
.ks-nap dt{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ks-nap dd{margin:3px 0 0;font-size:16px;font-weight:700;color:#fff;overflow-wrap:anywhere}
.ks-nap dd a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.ks-nap dd a:hover{border-bottom-color:#fff}

/* Het serviceformulier staat er als uitgeschakelde voorbeeldweergave; zie de
   toelichting in templates/v2/_klantenservice_contact.html. De velden zijn
   zichtbaar gedempt, zodat niemand erin probeert te typen. */
.ks-form{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-m);padding:18px}
.ks-let-op{margin:0 0 14px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.72)}
.ks-let-op b{color:#fff}
.ks-form .rw{margin-bottom:10px}
.ks-form .lb{display:block;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:5px}
.ks-form input,.ks-form select,.ks-form textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.5);
  font:inherit;
  font-size:16px;
  font-weight:600;
  padding:0 12px;
  height:42px;
  opacity:1;
  -webkit-text-fill-color:rgba(255,255,255,.5);
}
.ks-form textarea{height:auto;padding:10px 12px;resize:none}
.ks-form .btn.go.is-uit{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:44px;
  margin-top:4px;
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.6);
  cursor:not-allowed;
}

@media(max-width:900px){
  .ks-r{grid-template-columns:1fr;gap:5px}
  .ks-r .c{grid-column:auto}
  .ks-nap{grid-template-columns:1fr}
}

/* Vragenlijst van de klantenservice: een kolom.
   In twee kolommen laat een opengeklapte vraag een gat naast zich achter,
   omdat de rij zo hoog wordt als het langste antwoord. Bij een accordeon die
   je juist openklapt is dat elke keer raak. Een kolom leest bovendien beter:
   het antwoord krijgt de volle breedte in plaats van de halve. */
.ks-qa{grid-template-columns:1fr}
.ks-qa .ed-q summary{font-size:17.5px;padding:16px 0}
.ks-qa .ed-q .an{max-width:74ch}

/* ── Gecontroleerd door ───────────────────────────────────────────────────
   Wie een datapagina nakijkt, onderaan land-, bestemmings-, vertrek- en
   maatschappijpagina's.

   Waarom deze regels hier staan en niet in auteur.css: dit blok komt via een
   gedeelde include op vier paginasoorten terecht, en die laden auteur.css
   niet. Het stond daar wel, en dus verscheen het op Eindhoven als losse tekst
   over de volle breedte met een vierkante foto. eigen.css wordt door
   basis.html op elke pagina geladen, dus hoort een gedeeld onderdeel hier. */
/* Dezelfde breedte en zijmarge als een gewone sectie. Die maten staan in
   home.css onder .sec, maar dit blok verschijnt ook op pagina's die dat
   stijlblad niet laden, dus staan ze hier los. */
.gecontroleerd-wrap{max-width:1360px;margin:0 auto;padding:34px 20px 8px}
.gecontroleerd{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface-2)}
.gecontroleerd img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0}
.gecontroleerd p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.gecontroleerd a{color:var(--brand);font-weight:600}
@media (max-width:620px){
  .gecontroleerd{align-items:flex-start}
}