/* DE OPMAAK VAN STAYWATT, UIT DE MOCKUPS.
 *
 * =================================================================================================
 * WAAROM DIT EEN EIGEN LAAG IS EN GEEN VERBOUWING VAN home.css
 *
 * home.css, app.css en styles.css komen uit de familie en worden door dertig portals gedeeld.
 * Daar de vorm van Staywatt in schrijven betekent dat de volgende fork die vorm meekrijgt -- en dat
 * is precies hoe de startpagina van aiacta ooit op esgia belandde.
 *
 * Deze laag wordt NA merk.css geladen en overschrijft alleen wat de mockups anders doen: de
 * letters, de donkere hero, de knoppen, de kaarten en de voettekst. Wat er niet in staat, houdt de
 * familievorm.
 *
 * =================================================================================================
 * DE LETTERS
 *
 * Sora voor de koppen, Inter voor de lopende tekst -- zoals in de mockups. Ze staan zelf gehost in
 * /fonts (zie public/fonts/fonts.css); geen verzoek naar Google op elke pagina, want op /privacy
 * staat dat wij niets met derden delen.
 *
 * Beide hebben een echte terugvalstapel. Een pagina die zonder webfont niet leesbaar is, is een
 * pagina die op een trage verbinding niet leesbaar is.
 *
 * =================================================================================================
 * DE AMBER, NOG EEN KEER
 *
 * #FFB020 is een VLAK met donkere tekst erop. Als tekstkleur op papier haalt hij 1,73 : 1 en de eis
 * is 4,5 : 1. In de mockups gebruikt hij hem ook nooit als tekst op licht -- alleen als knopvlak,
 * als accentwoord op de donkere hero, en als kicker in de donkere variant #E09000 (die haalt het
 * wél). Die drie rollen staan hieronder uit elkaar; ze door elkaar halen is de fout die de
 * contrasttoets eerder deze week al een keer ving.
 */

:root {
  --sw-night: #0D1B2A;
  --sw-night2: #15263A;
  --sw-amber: #FFB020;      /* vlak */
  --sw-amber-d: #E09000;    /* tekst op papier, en hover */
  --sw-sun: #FFD166;        /* accentwoord op donker, zachte pillen */
  --sw-mist: #9FB0C3;       /* tekst op donker */
  --sw-mist2: #C7D2DF;      /* lopende tekst op donker */
  --sw-mist3: #7E8FA3;      /* kleine tekst op donker */

  /* BRONS IS DE TEKSTKLEUR, AMBER-D IS EEN VLAK.
   * #E09000 stond hier als kickerkleur en haalt 2,43 op papier -- de eis is 4,5. In de mockups
   * staat hij ook nergens als kale tekst; daar is hij hoverkleur. Deze bronsamber komt uit merk.js
   * (KLEUREN.tweede) en haalt 5,13. */
  --sw-brons: #965D00;

  /* #2E9E6B kwam uit de mockups en haalt 3,19 op papier. Dit haalt 5,01 en blijft hetzelfde groen. */
  --sw-groen: #1F7A50;

  --sw-pil-vlak: #FFF3D6;
  --sw-pil-tekst: #8A5A00;
  --sw-nav: #5C6B7C;

  /* AMBER ALS TEKST MAG WEL OP DONKER, EN NERGENS ANDERS.
   * Op het modulevlak (#1E3450) haalt #FFB020 een 6,91 en dat is ruim genoeg. Dat het toch een
   * eigen naam krijgt, is omdat --sw-amber overal een VLAK is: wie die naam als kleur ziet staan,
   * moet twee keer kijken. Deze naam zegt waar hij hoort te staan, en
   * test/staywattkleuren.test.mjs meet het paar.
   * Het modulevlak staat er als eigen token bij, want een achtergrond die alleen in een regel
   * staat, kan de toets niet uitlezen. */
  --sw-amber-op-donker: #FFB020;

  /* De twee zachte vlakken. Ze stonden als losse hexcode in een regel, en dan komt de kleur die
   * erop staat langs geen enkele toets -- precies hoe de kickerkleur en het groen er eerder
   * doorheen glipten. Het vinkvlak is het krapst (4,77 met het groen erop), dus juist daar hoort
   * een meting bij. */
  --sw-vink-vlak: #E9F6EF;
  --sw-note-vlak: #FFF7E6;
  --sw-note-lijn: #F2E2B8;
  --sw-modulevlak: #1E3450;
  --sw-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --sw-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body {
  font-family: var(--sw-body);
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3, .h-display {
  font-family: var(--sw-display);
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.12; }
h2 { font-size: clamp(24px, 3.4vw, 32px); }
h3 { font-size: 19px; }

/* ---------- De kicker: het labeltje boven een sectiekop ---------- */
.eyebrow, .kicker {
  font-family: var(--sw-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sw-brons);
}

/* ---------- Knoppen ---------- */
.btn {
  font-family: var(--sw-body);
  background: var(--sw-amber);
  color: var(--sw-night);
  font-weight: 700;
  border: 0;
  border-radius: 12px;
  padding: 13px 22px;
  font-size: 16px;
  display: inline-block;
  text-decoration: none;
}
.btn:hover { background: var(--sw-amber-d); }
.btn-ghost, .btn.ghost {
  background: transparent;
  border: 1.5px solid var(--lijn, #E7E1D4);
  color: var(--inkt, #152232);
  font-weight: 600;
}
.btn-ghost:hover, .btn.ghost:hover { background: #fff; border-color: var(--sw-amber); }
.btn.dark { background: var(--sw-night); color: #fff; }
.btn.dark:hover { background: var(--sw-night2); }

/* Toetsenbordfocus zichtbaar houden. De mockups zetten hem op amber met een offset; zonder deze
 * regel neemt de browser zijn eigen ring, en die verdwijnt op de donkere hero. */
.btn:focus-visible, a:focus-visible, input:focus-visible, button:focus-visible, select:focus-visible {
  outline: 3px solid var(--sw-amber);
  outline-offset: 2px;
}

/* ---------- Het merk in de kop ---------- */
.sw-bolt {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--sw-amber);
  color: var(--sw-night);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.wm, .woordmerk, .foot-brand { font-family: var(--sw-display); font-weight: 700; letter-spacing: -0.01em; }

/* ---------- De donkere hero ---------- */
.hero {
  background: linear-gradient(180deg, var(--sw-night), var(--sw-night2));
  color: #fff;
  padding: 0;
}
.hero .wrap, .hero .hero-in { padding-top: 64px; padding-bottom: 70px; }
.hero h1 { color: #fff; }
.hero .hero-sub { font-size: 19px; color: var(--sw-mist2); max-width: 560px; }
.hero .hero-klein { font-size: 13.5px; color: var(--sw-mist3); margin-top: 16px; }
.hero .eyebrow, .hero .kicker { color: var(--sw-sun); }
.hero a { color: #fff; }
.hero .btn { color: var(--sw-night); }
.hero .btn-ghost, .hero .btn.ghost { color: #fff; border-color: #3A4B60; background: transparent; }
.hero .btn-ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--sw-amber); }

/* Het accentwoord in de kop -- in de mockups staat "Automatisch." in zonnegeel. */
.hero .h1-accent { color: var(--sw-sun); }

/* De kaart naast de hero staat op papier, ook al is de hero donker. Dat is de mockup: de
 * telefoonpreview is een lichte kaart in een donkere lijst. */
/* .hero-kaart is bij Staywatt geen kaart maar de houder van de telefoon: geen achtergrond, geen
 * rand, geen padding. Wat je ziet is .sw-telefoon hieronder. */
.hero-kaart { background: none; border: 0; padding: 0; box-shadow: none; }

/* ---------- Kaarten ---------- */
.kaart, .card {
  background: #fff;
  border: 1px solid var(--lijn, #E7E1D4);
  border-radius: 16px;
  padding: 20px;
}
.kaart:hover { border-color: var(--sw-amber); }
.kaart .meer { color: var(--sw-brons); font-weight: 600; }

/* Het genummerde stapje uit de mockup: een groot cijfer in amber-donker boven de kop. */
.stapnummer {
  font-family: var(--sw-display);
  font-size: 30px;
  font-weight: 800;
  color: var(--sw-brons);
  line-height: 1;
}

/* ---------- De donkere band ----------
 *
 * ALLEEN .sw-band, en dat is met opzet. `.section.band` bestaat al in home.css en is iets anders:
 * een volle-breedte sectie met een lichte tint, bedoeld om het ritme van de pagina te breken. Ik had
 * ze eerst samengenomen, en toen kreeg de nieuwssectie op de startpagina een donkere achtergrond
 * mét de rondingen en de padding van een kaart -- over de volle breedte.
 *
 * De donkere band uit de mockups is een BLOK BINNEN een sectie. Vandaar de eigen naam. */
.sw-band {
  background: var(--sw-night);
  color: #fff;
  border-radius: 22px;
  padding: 36px;
  margin: 34px 0;
}
.sw-band h2, .sw-band h3 { color: #fff; }
.sw-band p, .sw-band li { color: var(--sw-mist2); }
.sw-band .eyebrow, .sw-band .kicker { color: var(--sw-sun); }
.sw-band a:not(.btn) { color: #fff; }

/* ---------- Pillen ---------- */
.pill, .chip {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--sw-pil-vlak);
  color: var(--sw-pil-tekst);
}
.pill.dark { background: var(--sw-night); color: #fff; }

/* ---------- De voettekst ---------- */
.foot {
  background: var(--sw-night);
  color: var(--sw-mist);
  font-size: 14px;
  margin-top: 70px;
}
.foot a { color: var(--sw-mist); }
.foot a:hover { color: #fff; }
.foot h2, .foot .foot-kop, .foot b, .foot strong { color: #fff; }
.foot .foot-brand, .foot .wm { color: #fff; }
.foot .wm-tag { color: var(--sw-mist); }

/* ---------- Waarschuwingsblok ---------- */
.waarschuwing {
  background: var(--sw-note-vlak);
  border: 1px solid var(--sw-note-lijn);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
}

/* ---------- Smal scherm ----------
 * De mockups zijn op de telefoon bekeken ("Bekijk ook op je telefoon"), en de hero is daar het
 * eerste dat breekt: 46px koptekst naast een kaart van 340px past niet. */
@media (max-width: 760px) {
  .hero .wrap, .hero .hero-in { padding-top: 40px; padding-bottom: 44px; }
  .sw-band { padding: 24px; border-radius: 16px; }
}

/* ---------- De kopbalk ----------
 *
 * home.css zet .top op var(--accent), en bij Staywatt is dat night. Dat gaf een donkere balk
 * bovenop een donkere hero: de twee liepen in elkaar over en de scheiding tussen "waar je bent" en
 * "wat we beloven" verdween. In de mockups is de kopbalk wit met een lijn eronder, en dáárop staat
 * de donkere hero.
 *
 * De knop in de balk moet dan meteen mee. home.css maakt hem wit (`.top .btn`), want daar stond hij
 * op een donkere balk; op een witte balk is wit op wit. In de mockups is dat de amber knop.
 */
.top { background: #fff; color: var(--inkt, #152232); border-bottom: 1px solid var(--lijn, #E7E1D4); }
.top .wm, .top .wm-word { color: var(--inkt, #152232); }
.wm-word { font-family: var(--sw-display); font-weight: 700; }
.topnav a { color: var(--sw-nav); opacity: 1; font-weight: 500; }
.topnav a:hover { color: var(--inkt, #152232); border-bottom-color: var(--sw-amber); }
.topnav a.active { color: var(--inkt, #152232); border-bottom-color: var(--sw-amber); font-weight: 600; }
.topacc .lnk { color: var(--inkt, #152232); opacity: 1; }
.top .btn { background: var(--sw-amber); color: var(--sw-night); border-color: var(--sw-amber); }
.top .btn:hover { background: var(--sw-amber-d); border-color: var(--sw-amber-d); color: var(--sw-night); }

/* De talenbalk stond op accent-donker: opnieuw donker op donker, en nu ook nog tussen een witte
 * kopbalk en de hero in. Hij hoort bij de kopbalk, dus hij staat op papier. */
.langbar { background: var(--tint2, #F3EEE4); border-bottom: 1px solid var(--lijn, #E7E1D4); }
.langbar a { color: var(--inkt, #152232); opacity: .75; }
.langbar a:hover { opacity: 1; }

/* Het woordmerk in de kopbalk is klein geschreven, zoals in de mockups. MERK.naam staat op
 * 'Staywatt' omdat diezelfde waarde in lopende tekst terechtkomt ("Veelgestelde vragen over
 * Staywatt"), en daar is een kleine letter een typefout. Hier is het een vorm, dus hier hoort hij
 * in de opmaak en niet in de gegevens. */
.top .wm-word { text-transform: lowercase; }

/* Het woordmerk is een bliksempje plus het woord, en die twee horen op één regel uit te lijnen.
 * .wm staat in home.css op align-items:baseline -- dat klopt voor twee stukken tekst, maar het
 * vierkantje is een vlak en zakt daarmee onder de basislijn weg. */
.wm { display: inline-flex; align-items: center; gap: 8px; }
.foot .wm, .foot-brand.wm { align-items: center; }

/* =================================================================================================
 * DE ONDERDELEN VAN DE STARTPAGINA UIT DE MOCKUPS
 *
 * De telefoonpreview, de hardwareband met beeld ernaast, de twee prijskaarten en de installatie-
 * blokken. Deze klassen bestaan alleen op de startpagina; ze staan hier en niet in home.css om
 * dezelfde reden als de rest van dit bestand.
 */

/* ---------- De telefoonpreview naast de hero ---------- */
.sw-kaart-kop { font-size: 12px; color: var(--inkt-zacht, #5C6B7C); margin: 0; }
.sw-saldo { font-family: var(--sw-display); font-size: 34px; font-weight: 800; margin: 6px 0 2px; }
.sw-saldo-uitleg { font-size: 13px; color: var(--sw-groen); font-weight: 600; margin: 0; }
.sw-balk { height: 10px; border-radius: 6px; background: #EEE7D8; margin: 14px 0; overflow: hidden; }
.sw-balk-vol { height: 10px; border-radius: 6px; background: var(--sw-amber); }
.sw-koopknoppen { display: flex; gap: 8px; }
.sw-koopknoppen .btn { flex: 1; text-align: center; padding: 11px 12px; font-size: 14px; }
.sw-koopknoppen .btn-ghost { flex: 0 0 auto; }
.sw-kaart-voet { font-size: 12px; color: var(--inkt-zacht, #5C6B7C); margin: 12px 0 0; }
.sw-kaart-noot {
  font-size: 12.5px;
  color: var(--inkt-zacht, #5C6B7C);
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--lijn, #E7E1D4);
}

/* DE KNOPPEN IN DE PREVIEW ZIJN GEEN KNOPPEN.
 * Ze staan in een voorbeeld van de gast-app, en die app is hier niet. Een <a> zonder doel of een
 * <button> die niets doet, is een belofte die breekt zodra iemand erop drukt — en een schermlezer
 * kondigt hem aan als bedienbaar. Het zijn spans, ze zijn niet focusbaar, en de cursor zegt het
 * ook. */
.sw-nep { cursor: default; user-select: none; }

/* ---------- De hardwareband: tekst links, beeld rechts ---------- */
.sw-band-split { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; }
.sw-band-tekst { flex: 1 1 380px; }
.sw-band-beeld { flex: 0 1 300px; text-align: center; }
.sw-fotovak {
  background: var(--sw-night2);
  border: 1px solid #24374D;
  border-radius: 16px;
  padding: 40px 26px;
  font-size: 14px;
  color: var(--sw-mist);
  margin-bottom: 14px;
}

/* De vinklijst uit de mockups. Het vinkje is decoratie: de opsomming zelf draagt de betekenis,
 * dus het staat in ::before en niet in de tekst — een schermlezer die elke regel met "vinkje"
 * begint, leest de lijst dubbel voor. */
.sw-check { list-style: none; padding: 0; margin: 14px 0 0; }
.sw-check li { padding: 6px 0 6px 30px; position: relative; }
.sw-check li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--sw-sun);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- De twee prijskaarten ---------- */
.sw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.sw-uitgelicht { border-color: var(--sw-amber); border-width: 2px; }
.sw-prijs { font-family: var(--sw-display); font-size: 22px; margin: 12px 0 4px; }
.sw-prijs span { font-size: 15px; font-weight: 400; color: var(--inkt-zacht, #5C6B7C); font-family: var(--sw-body); }
.sw-vol { display: block; text-align: center; }
.sw-prijsnoot { margin-top: 18px; }
.sw-prijsnoot a { color: var(--sw-brons); font-weight: 600; }

/* ---------- De installatieblokken ---------- */
.sw-video { padding: 0; overflow: hidden; }
.sw-videovak {
  background: var(--sw-night);
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sw-videovak-licht { background: var(--tint2, #F3EEE4); }
/* "in de maak" en geen speelknop. De video's bestaan nog niet, en een driehoekje dat niets doet is
 * een kapotte pagina — geen mockup. */
.sw-binnenkort {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sw-mist);
  border: 1px solid rgba(159, 176, 195, .4);
  border-radius: 999px;
  padding: 5px 12px;
}
.sw-videovak-licht .sw-binnenkort { color: var(--inkt-zacht, #5C6B7C); border-color: var(--lijn, #E7E1D4); }
.sw-videovoet { padding: 14px 16px; }
.sw-videovoet strong { display: block; }
.sw-videovoet span { color: var(--inkt-zacht, #5C6B7C); font-size: 14px; }

@media (max-width: 760px) {
  .sw-grid2 { grid-template-columns: 1fr; }
}


/* ---------- De telefoon naast de hero ----------
 *
 * TWEE DOZEN, EN DAT IS HET HELE PUNT. De buitenste is de schil van het toestel: bijna zwart, een
 * dunne lijn eromheen, ruime hoeken en een slagschaduw die hem van de donkere hero laat loskomen.
 * De binnenste is het scherm. Als één doos wordt het een kaart met een randje, en dan is het geen
 * telefoon meer -- dat was mijn eerste versie.
 */
.sw-telefoon {
  background: #0A1420;
  border: 1px solid #24374D;
  border-radius: 34px;
  padding: 16px;
  max-width: 300px;
  margin: 0 auto;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}
.sw-scherm {
  background: var(--papier, #FBF8F2);
  color: var(--inkt, #152232);
  border-radius: 22px;
  padding: 18px;
}
.sw-scherm .btn { border-radius: 10px; }
.sw-telefoon-noot {
  max-width: 300px;
  margin: 14px auto 0;
  font-size: 12.5px;
  color: var(--sw-mist);
  text-align: center;
}

/* ---------- De hero-verhouding en de knoppen ín de telefoon ----------
 *
 * home.css zet .hero-in op 1.35fr / 1fr. Op 1120px houdt de rechterkolom dan ongeveer 200px over,
 * en de telefoon uit de mockups is 300px breed. Hij werd daardoor samengeknepen tot een smal
 * strookje waarin "genoeg voor ± 2 nachten" over twee regels brak. In de mockup krijgt de
 * rechterkolom 340px; die verhouding halen we hier terug.
 */
.hero-in { grid-template-columns: 1fr 340px; }

/* DE GHOST-KNOP IN DE TELEFOON STAAT OP PAPIER, NIET OP DE HERO.
 *
 * `.hero .btn-ghost` maakt de tekst wit en de rand blauwgrijs -- dat klopt voor de knop náást de
 * telefoon, die op de donkere hero staat. De knop "Meer" staat op het lichte scherm ín de telefoon,
 * en daar is wit op papier onleesbaar. Precies dezelfde soort fout als de witte knop op de witte
 * kopbalk eerder vandaag: een regel die klopt voor de ene achtergrond, meegenomen naar de andere. */
.hero .sw-scherm .btn-ghost {
  color: var(--inkt, #152232);
  border-color: var(--lijn, #E7E1D4);
  background: #fff;
}
.hero .sw-scherm .btn-ghost:hover { border-color: var(--sw-amber); }

@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; }
}

/* De pil en de kop plakten aan elkaar. In de mockup staat de kop op margin:18px 0 14px onder de
 * pil; hier erfde hij de krappere marge van home.css. De pil is een los blokje boven de kop en
 * heeft die lucht nodig om als label te lezen in plaats van als eerste regel. */
.hero .pill { display: inline-block; margin-bottom: 4px; }
.hero h1 { margin: 18px 0 14px; }

/* De twee prijskaarten zijn even hoog (grid), maar hun knoppen stonden niet op één lijn: de
 * rechterkaart heeft meer tekst, dus zakte zijn knop lager. Kaartinhoud als kolom, en de laatste
 * alinea -- die met de knop -- geduwd naar de onderkant. Zo staan ze naast elkaar, ongeacht hoeveel
 * tekst erboven staat. */
.sw-grid2 > .kaart { display: flex; flex-direction: column; }
.sw-grid2 > .kaart > p:last-child { margin-top: auto; margin-bottom: 0; padding-top: 14px; }

/* =================================================================================================
 * DE ONDERDELEN VAN DE BINNENPAGINA'S
 *
 * Hoe het werkt, prijzen, hardware, voor parken, kennisbank en hulp gebruiken hetzelfde stel: een
 * pagina-kop met pil, rijen van twee of drie kaarten, de vinklijst, het gele notitieblok en een
 * tabel. Eén keer hier, niet zes keer per pagina.
 */

/* De kop van een binnenpagina: pil, h1, ondertitel. */
.sw-paginakop { padding: 44px 0 30px; }
.sw-paginakop .pill { margin-bottom: 14px; }
.sw-paginakop h1 { margin: 0 0 14px; }
.sw-paginakop .sub { color: var(--inkt-zacht, #5C6B7C); font-size: 18px; max-width: 640px; margin: 0; }

.sw-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.sw-grid2 > .kaart > *:first-child { margin-top: 0; }

/* DE VINKLIJST STAAT STANDAARD OP LICHT.
 * Hij stond eerst alleen in de donkere hardwareband, met een lichte cirkel op donker. Op de
 * prijzen- en hardwarepagina staat dezelfde lijst op een witte kaart, en daar is die cirkel
 * onzichtbaar. Licht is nu de standaard; de donkere band overschrijft hem. */
.sw-check li::before {
  background: var(--sw-vink-vlak);
  color: var(--sw-groen);
}
.sw-band .sw-check li::before,
.sw-band-tekst .sw-check li::before {
  background: rgba(255, 255, 255, 0.12);
  color: var(--sw-sun);
}

/* Het notitieblok uit de mockups: een zachte gele kader met een korte opmerking. */
.sw-note {
  background: var(--sw-note-vlak);
  border: 1px solid var(--sw-note-lijn);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  margin: 16px 0 0;
}

/* Het grote bedrag op een prijskaart. */
.sw-bedrag { font-family: var(--sw-display); font-size: 34px; font-weight: 700; margin: 6px 0 4px; }
.sw-bedrag span { font-size: 15px; font-weight: 400; color: var(--inkt-zacht, #5C6B7C); font-family: var(--sw-body); }

/* De tabel: kopregels klein en in kapitalen, lijnen tussen de rijen. */
.sw-tabel { border-collapse: collapse; width: 100%; font-size: 15px; }
.sw-tabel th, .sw-tabel td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--lijn, #E7E1D4); }
.sw-tabel th {
  color: var(--inkt-zacht, #5C6B7C);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* Een tabel mag de pagina nooit zijwaarts laten schuiven; hij schuift zelf maar binnen zijn kader. */
.sw-tabelhouder { overflow-x: auto; }

@media (max-width: 760px) {
  .sw-grid3 { grid-template-columns: 1fr; }
  .sw-paginakop { padding: 30px 0 20px; }
}

/* ---------- Etiketten, stapregels en productvakken ----------
 * Voor /hardware, /voor-parken, /hulp en de kennisbank.
 */

/* Het etiket uit de mockups: een omlijnd pilletje, gebruikt als onderwerpsrijtje. */
.sw-tag {
  display: inline-block;
  border: 1px solid var(--lijn, #E7E1D4);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  color: var(--inkt-zacht, #5C6B7C);
  margin: 0 6px 8px 0;
  background: #fff;
  text-decoration: none;
}
a.sw-tag:hover { border-color: var(--sw-amber); color: var(--inkt, #152232); }

/* Een stapregel: een genummerd blokje links, tekst rechts, een lijn ertussen. */
.sw-stap { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--lijn, #E7E1D4); }
.sw-stap:last-child { border-bottom: none; }
.sw-stapvak {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--sw-night);
  color: var(--sw-sun);
  font-family: var(--sw-display);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sw-stap b { display: block; }
.sw-stap .sw-stapuitleg { color: var(--inkt-zacht, #5C6B7C); font-size: 14px; }

/* Het productvak op /hardware: een donkere lijst met daarin de omtrek van de module. */
.sw-modulevak {
  background: var(--sw-night2);
  border-radius: 14px;
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sw-module {
  height: 150px;
  background: var(--sw-modulevlak);
  border-radius: 12px;
  border: 2px solid #2E4A6B;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sw-module-breed { width: 120px; }
.sw-module-smal { width: 70px; }
.sw-module .sw-vonk { color: var(--sw-amber-op-donker); font-size: 26px; }
.sw-module .sw-type { font-size: 12px; color: var(--sw-mist); font-family: var(--sw-body); }

/* De zoekbalk boven /hulp. */
.sw-zoekrij { display: flex; gap: 10px; margin: 22px auto; max-width: 560px; }
.sw-zoekrij input {
  flex: 1;
  border: 1px solid var(--lijn, #E7E1D4);
  border-radius: 12px;
  padding: 14px 16px;
  font: inherit;
  background: #fff;
  color: var(--inkt, #152232);
}
.sw-midden { text-align: center; max-width: 720px; margin: 0 auto; }
.sw-midden .sub { margin-left: auto; margin-right: auto; }

/* Een kaart die als geheel een link is. */
a.kaart { text-decoration: none; color: inherit; display: block; }
a.kaart h3 { color: var(--inkt, #152232); }