/* ═══ CaveHosting merkbasis — gedeeld door alle klantgerichte portaalpagina's ═══
   Eén bron voor lettertype, merkkleur en woordmerk, zodat de klant tijdens zijn
   hele reis (bestellen -> overzicht -> beheren) dezelfde CaveHosting ziet.
   De marketingsite (cavehosting.com) is de merkbron: paars accent + logo-icoon. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/Inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/Inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/Inter-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/Inter-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/Inter-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/Inter-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/Inter-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/Inter-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/Outfit-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/Outfit-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/Outfit-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/Outfit-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/Outfit-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/Outfit-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url('/static/fonts/Outfit-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url('/static/fonts/Outfit-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root {
  /* Merkaccent is overal blauw (#5B8CFF, gelijk aan het paneel, de marketingsite en
     de e-mails) — geen paars meer. De namen --ch-paars* blijven staan zodat bestaande
     verwijzingen niet breken; ze zijn nu gewoon blauw. */
  --ch-paars:#5B8CFF; --ch-paars-l:#9CC0FF; --ch-cyaan:#7DD3FC;
  /* Accentkleur ALS ACHTERGROND onder witte tekst. Dezelfde blauwfamilie, maar
     dieper — want #5B8CFF haalt met wit maar 3,16:1 en WCAG AA eist 4,5:1 voor
     normale tekst. Gemeten met tools/visueel.py: het viel op elke primaire knop
     ("Open serverpaneel →", "Kopieer adres") en op de skip-link. Als TEKSTkleur
     op een donkere achtergrond is --ch-paars juist prima (5,8:1), dus die blijft.
     Eén definitie hier; templates verwijzen hiernaar i.p.v. de waarde te herhalen. */
  --ch-knop:#3D6BD6;                    /* 4,92:1 met wit */
  /* Dezelfde logica voor groen en rood ALS ACHTERGROND onder witte tekst. Deze stonden
     alleen in panel.css, dus de klantkant miste ze: een groene knop met witte tekst
     haalde daar de 4,5:1 niet (review 25 juli 2026). Als TEKSTkleur op donker blijven
     --groen/--rood juist wél goed, die laten we ongemoeid. */
  --groen-diep:#15803D;                 /* 4,84:1 met wit */
  --rood-diep:#DC2626;                  /* 4,83:1 met wit */
  /* Lucht boven een nieuwe sectie. Een token en geen los getal, omdat twee plekken
     hem MOETEN delen: `.sectiekop` zet hem, en `.duo` in componenten.css zet hem terug
     nadat `.duo-cel .sectiekop:first-child` hem op nul heeft gezet. Lopen die twee
     uiteen, dan plakt precies één blok tegen de lijst erboven -- wat op 28 juli ook
     gebeurde (gemeten 0px waar elders 30px stond). componenten.css draait ook in het
     adminpaneel, waar dit bestand niet geladen wordt; daar vangt de terugval het op. */
  --sectie-ruimte:30px;
  --ch-merk-accent:#7aa2ff;
  --ch-font:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ch-font-kop:'Outfit', 'Inter', system-ui, sans-serif;

  /* ── Tokens die WOORDELIJK gelijk in meerdere schermbestanden stonden ────────
     Fase 1A, 29 juli 2026. Deze 17 namen werden in twee of drie scherm-CSS'en met
     exact dezelfde waarde onderhouden. Dat is geen stijlkeuze maar een tikfout die
     wacht om te gebeuren: wie er een bijwerkt, laat de andere stil achterlopen —
     precies hoe `--bi-line2` (.24 tegen .26) en `--bi-r` (18px tegen 16px) uit
     elkaar zijn gelopen. Die twee staan NIET hier: ze verschillen echt, en welke
     waarde wint is een ontwerpkeuze die Cihan maakt, niet ik.

     Alle schermen die deze tokens gebruiken laden merk.css (gemeten, niet aangenomen),
     dus de waarde die eruit komt blijft dezelfde. */

  /* BI-portaal — gedeeld door portal_bi en portal_bi_dossier */
  --bi-bg:#080b13; --bi-bg2:#0c1120; --bi-card:#121828; --bi-card2:#161d30;
  --bi-line:rgba(120,150,230,.14);
  --bi-txt:#eaf0ff; --bi-sub:#9aa6c6; --bi-muted:#6b7699;
  --bi-acc:var(--ch-paars); --bi-acc-l:var(--ch-paars-l);
  --bi-gr:#5fe3a1; --bi-am:#ffca6b;

  /* Klantportaal — gedeeld door portal_overzicht, portal_mijn_website, portal_start.
     Het zijn doorverwijzingen naar de merkkleur hierboven; alleen --rood staat op
     zichzelf. */
  --paars:var(--ch-paars); --paars-l:var(--ch-paars-l); --cyaan:var(--ch-cyaan);
  --lijn-a:rgba(91,140,255,.4); --rood:#F0594F;
  /* Het vlak BUITEN het klantframe. Donkerder dan --bg, zodat het frame van
     `.klant-shell` als een kaart op de pagina leest in plaats van als de pagina zelf.
     Stond tot 30 juli 2026 alleen onder `html.s-portal_overzicht` en was daarmee per
     ongeluk schermeigen: `/portal/mijn-website` laadt dezelfde shell, kreeg dus wél
     het frame maar niet de achtergrond eromheen, en toonde een rand zonder verschil.
     Hier verplaatst, waarde ongewijzigd -- het referentiescherm rendert identiek, en
     een scherm dat hem niet gebruikt merkt er niets van. */
  --buiten:#07080C;

  /* ── Eén waarde per token — uit het goedgekeurde ontwerpcontract ──────────
     Besluit Cihan, 29 juli 2026. Deze namen droegen tot vandaag per scherm een
     andere waarde: --card was #14161F, #14171F, #101223 en #0F1020. Niemand
     heeft ooit besloten dat mijn-website een blauwere kaart krijgt -- dat is
     drift, geen ontwerp. De waarden hieronder komen uit
     `Claude design/*.dc.html`; beide contracten leggen dezelfde ladder vast.
     Een scherm mag hier nog van afwijken, maar dan als expliciete uitzondering
     in zijn eigen html.s-<scherm>-blok, zichtbaar naast deze bron. */
  --bg:#0B0D13;
  --bg2:#0D0F16;
  --card:#14161F;
  --card2:#191C26;
  --lijn:#262A36;
  --lijn-sterk:#333847;
  --tekst:#C8CEDC;
  --helder:#E6E8EF;
  --stil:#99A1B3;
  --stiller:#6E7689;
  --groen:#3fc97a;
  --geel:#e0a83f;
  --bi-line2:rgba(120,150,230,.24);
  --bi-r:16px;

  /* ── Kleuren die in twee of meer bestanden stonden ────────────────────────
     Vuistregel Cihan, 29 juli 2026: staat een kleur in twee bestanden of drie
     keer of vaker, dan hoort er een token te zijn. Waarden ongewijzigd — dit is
     tokeniseren, geen herkleuren. scherm-status.css doet NIET mee: status.html
     laadt merk.css niet, en een ongedefinieerd token is een kapotte kleur. */
  --wit:#fff;                     /* tekst en iconen OP een gekleurd vlak */
  --bi-op-accent:#06122e;         /* tekst op de BI-accentknop */
  --accent-mid:#6f9bff;           /* tussen --ch-paars en --ch-paars-l, in verlopen */
  --groen-zacht:#b6f2d4;          /* geslaagd-melding */
  --rood-zacht:#ffc9c9;           /* fout-melding */
  --rood-zachter:#f8b4ae;         /* waarschuwingstekst op donker */
  --border-interactive:#5d6779;   /* rand van een rustige knop — zelfde naam en waarde als in panel.css, bewust */
  --geel-licht:#fbbf24;           /* warme kant van het amberverloop */
  /* Amber ALS TEKST op een amberen tint. Stond op 30 juli 2026 in twee bestanden met
     dezelfde waarde: `.aandacht-n` op het portaaloverzicht en de nieuwe
     `.statuschip-wacht` in componenten.css. Vuistregel Cihan (29 juli): staat een kleur
     in twee bestanden, dan hoort er een token te zijn. Waarde ongewijzigd. */
  --geel-l:#E8B661;
  /* Fout-rood ALS TEKST of accent op donker — niet als vlak onder witte tekst
     (daarvoor is --rood-diep). Stond vijf keer los in drie bestanden: `.btn-gevaar`
     hier, `.statuschip-fout` en `.veld-fout` in componenten.css, en de opzeg-hover
     plus de rode meterbalk op het overzicht. Net als --border-interactive staat deze
     bewust óók in panel.css onder dezelfde naam en waarde: componenten.css draait
     ook in het adminpaneel en op de statuspagina, en die laden merk.css niet. */
  --rood-l:#F0776B;
}
body { font-family:var(--ch-font); }
h1, h2, h3, h4 { font-family:var(--ch-font-kop); letter-spacing:-.01em; }

/* Woordmerk — exact hetzelfde als in het paneel (zie .sidebar-logo in panel.css):
   logo-icoon + 'Cave' in accent + 'Hosting'. Eén vorm op élke pagina. */
/* min-height 44: het woordmerk is óók een link (terug naar het overzicht) en werd
   gemeten op 161x38px (26 juli 2026, 390px). Alleen een ondergrens, zodat er niets
   van vorm verandert op desktop. */
.ch-merk { display:flex; align-items:center; gap:10px; min-height:44px; font-family:var(--ch-font-kop); font-size:19px; font-weight:800; color:var(--wit); text-decoration:none; padding:4px 6px; border-radius:8px; }
.ch-merk img { border-radius:7px; box-shadow:0 4px 12px rgba(91,140,255,.25); display:block; }
.ch-merk .brand-cave { color:var(--ch-merk-accent); }
.ch-merk .paginanaam { color:#868FB0; font-weight:600; font-size:14px; }

/* Toetsenbordbediening: overal dezelfde, duidelijk zichtbare focusring (WCAG 2.4.7).
   Alleen bij toetsenbordnavigatie, zodat muisklikken geen ring achterlaten. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ch-paars-l);
  outline-offset: 2px;
  border-radius: 6px;
}

/* De skip-link (.ch-skip) stond hier tot 4 september 2026 en is verhuisd naar
   `componenten.css`. Reden: de twee PANEELSCHILLEN (home.html, index.html) laden
   `panel.css` + `componenten.css` en NIET dit bestand — gemeten 4 sep 2026 — dus een
   skip-link daar zou ongestyleerd bovenaan de pagina staan. `componenten.css` wordt
   door alle elf gebruikers van .ch-skip geladen; dit bestand niet. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* Aanraakvlakken op de klantkant (WCAG 2.5.5). Een terug-link van 16px hoog
   raak je met een duim niet; hij krijgt hier zijn vlak zonder groter te oogen. */
.ch-merk .terug-link, .terug-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: 4px;
  border-radius: 8px;
}
.terug-link:hover { background: rgba(255,255,255,.05); }
@media (max-width: 768px) { .terug-link { min-height: 44px; } }

/* ── Knopbasis voor de klantkant — ÉÉN bron ────────────────────────────────────
   Gemeten 26 juli 2026: `.btn` werd op ZES plekken gedefinieerd, en de gedeelde
   bronnen (`panel.css`, `merk.css`) zetten alléén de 44px-vloer — géén uiterlijk.
   Elk klantscherm verzon daarom zijn eigen knop:

     portal_bi          radius 12px · min-height 48 · font 15   · gradient + glow
     portal_bi_dossier  radius 10px · min-height 40 · font 13,5 · gradient
     portal_website     radius 99px · min-height 50 · rand 2px  · glow op hover

   Dezelfde klassenaam, drie verschillende knoppen. Dit blok is de canonieke basis;
   de per-scherm-duplicaten zijn weg. Wat hier staat volgt het ontwerpsysteem:
   `--ch-knop` (#3D6BD6, 4,92:1 met wit — de merkkleur zelf haalt 3,16:1 en mag dus
   nooit een knopachtergrond onder witte tekst zijn), radius 12px in plaats van een
   volledige pil, en GEEN gradient of glow (regel 1.5, en het gebenchmarkte palet
   zette schaduwen bewust uit).

   Alleen basis en varianten. Een scherm mag nog steeds een eigen MAAT geven
   (`.btn-sm`), maar niet een eigen kleur of vorm — dat is precies de divergentie. */
/* De MAAT leest sinds 1 augustus 2026 uit de maatladder van de klantschil
   (`componenten.css`, `.klant-shell`). Buiten die schil — `portal_order`,
   `portal_bi`, `portal_return`, `portal_website`, `kennisbank` — bestaat het token
   niet en geldt de letterlijke terugval, dus die schermen renderen ongewijzigd.
   Binnen de schil wordt de knop één maat kleiner (13px/9-16 i.p.v. 14px/11-20), wat
   hem tussen de klantmaat en de paneelmaat (12,5px/7-13) in zet. De 44px-vloer blijft
   staan: dat is WCAG 2.5.5 en geen smaak. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: var(--m-knop-pad, 11px 20px); border-radius: 12px;
  border: 1px solid transparent; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: var(--m-knop, 14px); line-height: 1.2;
  text-decoration: none; max-width: 100%;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
/* GEEN `white-space: nowrap` in de basis. Dat stond hier eerst en gaf meteen een
   regressie: `klant-mijn-website` had géén eigen .btn-uiterlijk, dus knoplabels mochten
   daar afbreken. Met nowrap konden ze niet meer krimpen en werd de pagina 410px breed op
   een venster van 390px — gemeten in de render, niet beredeneerd. Precies het geval
   "lange Nederlandse en Turkse teksten" uit de eisen: een knop die niet mag afbreken
   dwingt de hele pagina breder. `max-width:100%` houdt hem binnen zijn kolom. */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* De BETEKENISLAAG (welke kleur hoort bij primair, rustig, gevaar en status) stond
   hier tot 30 juli 2026 en is verhuisd naar `componenten.css`, sectie "KNOPPEN — één
   familie, vier betekenissen". Reden: hij was hier alleen voor de KLANTKANT geldig,
   terwijl `panel.css` er een eigen — en onderling tegenstrijdige — set van had. Gemeten
   verschil: `.btn-start` was #1A7F50 vlak in het adminpaneel, een verloop met glans in
   het serverpaneel en primair blauw in het portaal. Dezelfde klassenaam, drie
   betekenissen.

   Wat hier BLIJFT is de vorm van de klantknop (hierboven) en zijn maat (hieronder).
   Die is bewust klantkant-specifiek: 12px radius en 14px/700 leest ruim op een
   bestelpagina, terwijl het paneel met 9px/13px veel meer knoppen per rij kwijt moet.
   Verhuist die maat ook, dan herschikt élke knoprij in het paneel — dat is een herbouw
   en die staat achter Cihans oordeel op de componentenkit. */
.btn-sm { min-height: 44px; padding: var(--m-knop-sm-pad, 8px 14px);
          font-size: var(--m-knop-sm, 13px); }

/* ── Aanraakvlakken op de HELE klantkant (WCAG 2.5.5) ──────────────────────────
   Review 25 juli 2026: panel.css had deze regel al voor het beheerpaneel, maar de
   klantschermen (portaal, mijn-website, website-pakketten, 'zo speel je', BI) laden
   alléén merk.css. Daardoor viel juist de OMZETKANT buiten ons vangnet: op telefoon
   waren NL/EN/TR, '▶ Start je server', het oog-icoon bij wachtwoorden en '📦 Zet klaar'
   allemaal kleiner dan 44px — gemeten in een echte browser op 390px.
   992px i.p.v. 768px, gelijk aan panel.css: tussen 769 en 992px is een tablet ook
   aanraakbediening. Alleen een hoogte-ondergrens, zodat niets van vorm verandert. */
@media (max-width: 992px) {
  button,
  .btn,
  a.btn,
  input[type="submit"],
  input[type="button"],
  select {
    min-height: 44px;
  }
  /* Een link midden in een lopende zin is door WCAG zelf uitgezonderd — die
     oprekken trekt de zin uit elkaar. Daarom alleen losstaande link-knoppen. */
  a.knop, a.button, a[role="button"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* De gedeelde COMPONENTFAMILIES (.alert, .statuschip, .veld/.invoer, .toast, .ico)
   staan sinds 26 juli 2026 in `componenten.css`. Reden: ze zijn ook nodig in het
   ADMINpaneel en serverpaneel, en die laden `panel.css` met een eigen knoppen-,
   body- en kopsysteem. merk.css daar meeladen botste meetbaar: de `.btn`-regels
   kruisten met `.btn-muted` en leverden een contrastbevinding van 4,06:1 op
   "Vernieuwen". De componenten hebben NUL botsingen met panel.css (gemeten),
   dus die apart zetten geeft ze overal zonder de merkbasis op te dringen. */

/* ═══ Per-scherm-paletten — ÉÉN bestand, zodat het verschil zichtbaar is ═══
   Fase 1A, 29 juli 2026. Zes klantschermen hadden elk een eigen :root met
   dezelfde tokennamen en ANDERE waarden: --card was #14161F, #14171F, #101223
   en #0F1020 op vier schermen, en componenten.css leest `var(--card)` op elk
   van die schermen. Zolang die blokken over zes bestanden verspreid stonden,
   was dat verschil alleen te zien door zes bestanden naast elkaar te leggen.

   Ze staan hier nu onder elkaar. Er is GEEN waarde gewijzigd -- dat zou een
   ontwerpkeuze zijn en die ligt bij Cihan. Wat je hieronder ziet is de vraag
   in zijn scherpste vorm: horen dit vier kaartkleuren te zijn, of één?

   `html.s-<scherm>` en niet `body.s-<scherm>`: :root IS het html-element, en
   scherm-portal_overzicht.css zet `html { background:var(--buiten) }`. Op body
   gescoopt zou dat token voor die regel onzichtbaar zijn. ═══════════════ */

html.s-portal_bi { --bi-cy:var(--ch-cyaan); --bi-r-s:12px; --bi-shadow:0 24px 60px -30px rgba(0,0,0,.8) }



html.s-portal_overzicht { --card3:#1C202A; --grad:linear-gradient(135deg,#6F9BFF 0%,#3B6FE0 100%) }


html.s-portal_website { --border:#262A36; --border-a:rgba(91,140,255,.45); --accent:var(--ch-paars); --accent-l:var(--ch-paars-l); --cyan:#38BDF8; --cyan-l:var(--ch-cyaan); --green:#3fc97a; --text:#C8CEDC; --bright:#E6E8EF; --muted:#99A1B3; --grad:linear-gradient(135deg,#5B8CFF 0%,#38BDF8 100%); --grad-text:linear-gradient(135deg,#9CC0FF 0%,#7DD3FC 100%); --glow:rgba(91,140,255,.22) }