/*
 * De site van ITdocu.
 *
 * Dezelfde kleuren, hetzelfde lettertype en dezelfde poortjes als het product
 * zelf. Dat is met opzet: wie op de site een patchpaneel ziet en daarna inlogt,
 * hoort hetzelfde ding te zien. Een site die er anders uitziet dan het product
 * belooft iets dat je daarna niet krijgt.
 *
 * Eén lichte weergave en geen donkere variant. Ook met opzet: de app is licht,
 * en een site die zich aan het systeem van de bezoeker aanpast terwijl het
 * product dat niet doet, laat het product er onaf uitzien. Alle kleuren staan
 * hier expliciet, dus de pagina hangt nergens van de omgeving af.
 */

:root {
  /* ── Vlakken ── */
  --grond:        #F4F2EE;
  --vlak:         #FFFFFF;
  --paneel:       #33414C;
  --paneel-op:    #43535F;
  --paneel-lijn:  rgba(238, 243, 245, .13);
  --paneel-tekst: #EEF3F5;
  --paneel-poort: #4A5B68;
  --paneel-gat:   #1E2831;

  /* ── Inkt ── */
  --inkt:       #1F2A31;
  --inkt-zacht: #41525E;
  --stil:       #667681;
  --flauw:      #9AA7B0;

  /* ── Lijnen ── */
  --lijn:      #E0DCD5;
  --lijn-fijn: #EDEAE4;
  --hover:     #FAF8F5;

  /* ── De drie lampjes. Alleen voor status. ── */
  --led-goed: #34C07A;
  --led-let:  #EFA02E;
  --led-fout: #E85C50;

  --merk:      #2FA8A0;
  /* Van #1E7C76 naar #1B7570: op crème haalde de oude 4.47 en dat is net onder
   * de 4.5 die leesbare tekst vraagt. Drie stappen donkerder brengt hem op
   * 4.91, en het verschil zie je niet. */
  --merk-diep: #1B7570;
  --merk-vlak: #E6F5F4;
  /* De knop apart: wit op #2FA8A0 is 2.90 en dat is te weinig. Dit verloop
   * begint op een tint waar wit 4.58 haalt en eindigt op 5.17. */
  --merk-knop: #1A837C;

  /* ── Het palet ───────────────────────────────────────────────────────────
   *
   * Vier accenten in plaats van één, en ze zijn niet verzonnen: dit zijn de
   * kleuren die het product zelf al gebruikt. Een poort in het patchpaneel is
   * groen, amber of rood; een lampje bij een onderdeel ook. Het indigo is de
   * enige nieuwe, als tegenwicht voor het warme crème.
   *
   * Elke kleur heeft drie standen: de volle kleur voor vlakken, een diepe voor
   * tekst (die moet leesbaar zijn op crème) en een vlak voor tegeltjes. Dat
   * onderscheid is de reden dat de volle kleuren nergens als tekstkleur worden
   * gebruikt -- #2FA8A0 op #F4F2EE haalt geen 4.5:1.
   */
  --indigo:      #5661D8;
  --indigo-diep: #3B44A8;
  --indigo-vlak: #ECEDFB;

  --amber:      #E08A1E;
  --amber-diep: #9A5B07;
  --amber-vlak: #FBF0DF;

  --koraal:      #E8604F;
  --koraal-diep: #B03828;
  --koraal-vlak: #FCEBE8;

  --groen:      #2FA35F;
  --groen-diep: #1B7440;
  --groen-vlak: #E4F4EA;

  --rond: 12px;
  --schaduw: 0 1px 2px rgba(31, 42, 49, .05), 0 8px 24px rgba(31, 42, 49, .07);
  --schaduw-op: 0 2px 4px rgba(31, 42, 49, .06), 0 16px 40px rgba(31, 42, 49, .10);

  --breed: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font-family: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.mono, code, .num {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

img, svg { max-width: 100%; }
a { color: var(--merk-diep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--inkt); }

:focus-visible { outline: 2px solid var(--merk); outline-offset: 2px; border-radius: 4px; }

/* ── Ritme ─────────────────────────────────────────────────────────────────── */

.omslag { max-width: var(--breed); margin: 0 auto; padding: 0 24px; }
.smal   { max-width: 720px; }

section { padding: 84px 0; position: relative; }

/* ── De was aan de bovenkant ─────────────────────────────────────────────────
 *
 * Twee zachte kleurvelden achter de kop van elke pagina. Vast aan de bovenkant
 * en niet meescrollend: het is een achtergrond, geen element dat aandacht
 * vraagt. Achter alles (z-index -1) en zonder muisgevoeligheid, zodat er niets
 * door verandert behalve de kleur.
 *
 * Op crème mag dit heel licht zijn -- 12% en 9%. Sterker en het wordt een
 * banner; dit hoort iets te zijn wat je pas ziet als je ernaar kijkt.
 */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 860px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(58% 62% at 82% -4%, rgba(86, 97, 216, .26) 0%, transparent 66%),
    radial-gradient(48% 58% at 50% 0%,  rgba(232, 96, 79, .10) 0%, transparent 60%),
    radial-gradient(62% 70% at 2% 2%,   rgba(47, 168, 160, .30) 0%, transparent 64%);
}

section.donker {
  /* Was één vlakke grijsblauwe kleur. Een verloop met een vleugje van het merk
   * erin geeft diepte zonder dat er een tweede kleur bij komt. */
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(47, 168, 160, .18) 0%, transparent 60%),
    linear-gradient(160deg, #3A4A57 0%, var(--paneel) 55%, #2C3944 100%);
  color: var(--paneel-tekst);
}
section.wit    { background: var(--vlak); }

/* Een derde band: getint in plaats van wit of donker. Voor secties die tussen
 * twee witte staan en anders in elkaar overlopen. */
section.getint {
  background:
    linear-gradient(180deg, var(--merk-vlak) 0%, rgba(230, 245, 244, .35) 100%);
}
section.getint.indigo {
  background:
    linear-gradient(180deg, var(--indigo-vlak) 0%, rgba(236, 237, 251, .35) 100%);
}

h1, h2, h3 { text-wrap: balance; letter-spacing: -.02em; margin: 0; }

h1 { font-size: clamp(32px, 4.8vw, 49px); font-weight: 700; line-height: 1.1; }
h2 { font-size: clamp(25px, 3.4vw, 34px); font-weight: 700; line-height: 1.18; }
h3 { font-size: 18px; font-weight: 600; line-height: 1.35; }

.eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--merk-diep);
  margin: 0 0 14px;
}
.donker .eyebrow { color: var(--merk); }

.lood { font-size: clamp(17px, 2vw, 20px); color: var(--inkt-zacht); margin: 18px 0 0; }

/* Het vetgedrukte in de regel onder de hero: dat zijn de drie dingen die je
 * krijgt, en die mogen de merkkleur hebben in plaats van bijna-zwart. */
.strepen b { color: var(--merk-diep); }
.donker .lood { color: rgba(238, 243, 245, .78); }

p { margin: 16px 0 0; }
section > .omslag > h2 + p { margin-top: 14px; }

/* ── Kop van de pagina ─────────────────────────────────────────────────────── */

.balk {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(244, 242, 238, .88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--lijn);
}

.balk .omslag {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 66px;
}

.merk { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--inkt); }
.merk img { width: 30px; height: 30px; border-radius: 8px; }
.merk b { font-size: 19px; font-weight: 700; letter-spacing: -.4px; }
.merk b span { font-weight: 350; opacity: .68; }

.balk nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.balk nav a {
  padding: 7px 12px;
  border-radius: 7px;
  color: var(--inkt-zacht);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
}
.balk nav a:hover { background: var(--hover); color: var(--inkt); }

.knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  /* De hoofdknop was bijna zwart. Dat is rustig maar het zegt niets: op een
   * pagina met één accentkleur is de belangrijkste knop juist de plek waar die
   * kleur hoort te staan. */
  border: 1px solid var(--merk-diep);
  border-radius: 9px;
  background: linear-gradient(180deg, var(--merk-knop) 0%, var(--merk-diep) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(27, 117, 112, .28);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.knop:hover {
  background: var(--merk-diep);
  border-color: var(--merk-diep);
  color: #fff;
}

/* De donkere knop blijft bestaan voor waar hij wél hoort: naast een gekleurde
 * knop, als tweede keuze op een donkere band. */
.knop.donkerknop {
  background: var(--inkt); border-color: var(--inkt); box-shadow: none;
}
.knop.donkerknop:hover { background: var(--paneel-op); border-color: var(--paneel-op); }

.knop.stil { background: var(--vlak); color: var(--inkt); border-color: var(--lijn); font-weight: 500; }
.knop.stil:hover { background: var(--hover); border-color: var(--flauw); color: var(--inkt); }

.knop.licht { background: var(--merk); border-color: var(--merk); }
.knop.licht:hover { background: var(--merk-diep); border-color: var(--merk-diep); }

.donker .knop.stil {
  background: transparent; color: var(--paneel-tekst); border-color: var(--paneel-lijn);
}
.donker .knop.stil:hover { background: var(--paneel-op); border-color: rgba(238,243,245,.3); }

.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/*
 * De menuregels verdwijnen ruim voordat het krap wordt.
 *
 * Bij 800 pixels paste de rij nog net niet: het knopje rechts liep buiten de
 * rand, en dat is precies het soort fout waar niemand naar zoekt omdat hij
 * alleen op een middelgroot scherm te zien is. Nu gaan ze eerder weg, en de
 * balk mag daarnaast wikkelen als vangnet.
 */
.balk .omslag { flex-wrap: wrap; }
.balk nav { flex-wrap: wrap; row-gap: 6px; }

@media (max-width: 980px) {
  .balk nav a.verberg { display: none; }
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */

.hero { padding: 76px 0 0; }

.hero .omslag { display: grid; gap: 48px; }

.hero .tekst { max-width: 660px; }

.hero h1 span { color: var(--merk-diep); }

/* De tekening onder de hero loopt door tot onder de rand: het is een apparaat
 * in een rek, en die houden ook niet op bij de rand van je scherm. */
.hero .toonvak {
  margin-top: 8px;
  padding: 26px 26px 0;
  background: var(--paneel);
  border-radius: var(--rond) var(--rond) 0 0;
  box-shadow: var(--schaduw-op);
  overflow-x: auto;
}

.strepen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--lijn);
  font-size: 14.5px;
  color: var(--stil);
}
.strepen b { color: var(--inkt); font-weight: 600; }

/* ── Kaarten ───────────────────────────────────────────────────────────────── */

.raster { display: grid; gap: 18px; margin-top: 40px; }
.raster.twee  { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.raster.drie  { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

/*
 * Voor de schermen: twee brede kolommen en niet drie smalle.
 *
 * Met minmax(280px) paste er op een breed scherm een derde kolom bij, en dan
 * werd elke tabel afgekapt -- en een afgekapte tabel in een etalage leest als
 * een tabel die stuk is. Een scherm laten zien vraagt de breedte van een
 * scherm.
 */
.raster.breed { grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); }

.kaart {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 24px;
  box-shadow: var(--schaduw);
}
.wit .kaart { background: var(--grond); box-shadow: none; }
.donker .kaart {
  background: rgba(255, 255, 255, .045);
  border-color: var(--paneel-lijn);
  box-shadow: none;
}

/* Een streepje bovenaan dat de kleur van het tegeltje herhaalt. Smal en alleen
 * zichtbaar bij aanwijzen: op een kaart die je leest hoort niets te bewegen,
 * maar een kaart waar je met de muis overheen gaat mag antwoorden. */
.raster > .kaart {
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.raster > .kaart::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--merk);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.raster > .kaart:nth-child(4n+2)::after { background: var(--indigo); }
.raster > .kaart:nth-child(4n+3)::after { background: var(--amber); }
.raster > .kaart:nth-child(4n+4)::after { background: var(--koraal); }

.raster > .kaart:hover { transform: translateY(-2px); border-color: var(--flauw); }
.raster > .kaart:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .raster > .kaart, .raster > .kaart::after { transition: none; }
  .raster > .kaart:hover { transform: none; }
}

.kaart h3 { margin-bottom: 6px; }
.kaart p { margin-top: 0; color: var(--inkt-zacht); font-size: 15.5px; }
.donker .kaart p { color: rgba(238, 243, 245, .72); }

.teken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-bottom: 14px;
  border-radius: 9px;
  background: var(--merk-vlak);
  color: var(--merk-diep);
  font-size: 17px;
}
.donker .teken { background: rgba(47, 168, 160, .16); color: var(--merk); }

/* ── Vier kleuren in plaats van één ──────────────────────────────────────────
 *
 * De tegeltjes in een raster wisselen van kleur. Dat is geen versiering om de
 * versiering: een rij van zes identieke groene vierkantjes leest als één blok,
 * en vier kleuren maken er zes losse kaarten van die je één voor één ziet.
 *
 * Op nth-child en niet met klassen in de html: dan geldt het overal waar een
 * raster staat -- ook op de whitepaper en op pagina's die er nog niet zijn --
 * zonder dat iemand eraan hoeft te denken.
 */
.raster > .kaart:nth-child(4n+2) .teken { background: var(--indigo-vlak); color: var(--indigo-diep); }
.raster > .kaart:nth-child(4n+3) .teken { background: var(--amber-vlak);  color: var(--amber-diep); }
.raster > .kaart:nth-child(4n+4) .teken { background: var(--koraal-vlak); color: var(--koraal-diep); }

.donker .raster > .kaart:nth-child(4n+2) .teken {
  background: rgba(86, 97, 216, .22); color: #A8B0F0;
}
.donker .raster > .kaart:nth-child(4n+3) .teken {
  background: rgba(224, 138, 30, .20); color: #F0B662;
}
.donker .raster > .kaart:nth-child(4n+4) .teken {
  background: rgba(232, 96, 79, .20); color: #F09184;
}

/* ── Het probleem: drie regels die verlopen ────────────────────────────────── */

.verval { margin-top: 36px; display: grid; gap: 10px; }

.vervalrij {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 9px;
}
.vervalrij i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.vervalrij .wanneer { font-size: 13.5px; color: var(--stil); }
.vervalrij b { font-weight: 600; }

/* ── Een lijst met vinkjes ─────────────────────────────────────────────────── */

ul.vink { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 11px; }
ul.vink li { position: relative; padding-left: 27px; }
ul.vink li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 15px; height: 15px;
  border-radius: 4px;
  background: var(--merk-vlak);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4 6.6 11 12 5.4' fill='none' stroke='%231E7C76' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
}
.donker ul.vink li::before { background-color: rgba(47, 168, 160, .18); }

/* ── Tabel met de soorten ──────────────────────────────────────────────────── */

.soorten { display: grid; gap: 8px; margin-top: 32px;
           grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.soort {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 9px;
}
/*
 * ── Waarom deze tien een eigen tint krijgen ──
 *
 * In het product zelf is kleur voorbehouden aan status: groen, oranje en rood
 * betekenen daar iets, en tien gekleurde vakjes zouden die betekenis verdunnen.
 * Op een website geldt dat niet -- daar is dit geen gereedschap maar een
 * uitstalling, en dan mag een rij van tien identieke grijze vakjes wel wat
 * leven hebben.
 *
 * Geen tien willekeurige kleuren. Eén reeks waarin verwante dingen bij elkaar
 * liggen: ijzer koel, kabels blauwgroen, contracten en termijnen warm. Zo zegt
 * de kleur ook iets, ook al hoeft niemand dat te weten.
 *
 * Alleen het pictogram en zijn achtergrond zijn gekleurd; het vak blijft wit.
 * De tekst moet leesbaar blijven, en tien pastelvlakken achter tien stukjes
 * tekst is precies hoe een pagina rommelig wordt.
 */
.soort .glief {
  font-size: 19px;
  width: 36px; height: 36px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--tint-vlak, var(--hover));
  color: var(--tint-inkt, var(--merk-diep));
  transition: transform .16s ease;
}
.soort b { font-weight: 600; font-size: 15px; }
.soort span { display: block; font-size: 13px; color: var(--stil); }

/* Een tik omhoog bij aanwijzen. Niets dat beweegt zonder dat je iets doet, en
 * uit voor wie dat heeft aangegeven. */
.soort { transition: border-color .16s ease, transform .16s ease; }
.soort:hover { border-color: var(--tint-lijn, var(--flauw)); transform: translateY(-2px); }
.soort:hover .glief { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .soort, .soort .glief { transition: none; }
  .soort:hover, .soort:hover .glief { transform: none; }
}

/*
 * De reeks.
 *
 * De eerste versie was zo bleek dat je hem op een scherm nauwelijks zag -- dan
 * doet hij niets en kost hij wel regels. Deze zijn steviger: het vlak duidelijk
 * getint, de letter er donker op, zodat het pictogram op een badge staat in
 * plaats van in een vaag vlekje. Nog steeds gedempt genoeg om naast de rest van
 * de pagina te kunnen staan.
 */
.s-ijzer   { --tint-vlak: #D3E2EC; --tint-inkt: #2C4A5F; --tint-lijn: #A6C3D5; }
.s-draad   { --tint-vlak: #C9E6E1; --tint-inkt: #135E58; --tint-lijn: #9BCFC7; }
.s-werk    { --tint-vlak: #DBD9F1; --tint-inkt: #3C3A78; --tint-lijn: #BAB6E2; }
.s-web     { --tint-vlak: #D2E7D6; --tint-inkt: #2B5C37; --tint-lijn: #AACFB3; }
.s-termijn { --tint-vlak: #F6E3C3; --tint-inkt: #7A5010; --tint-lijn: #E4C58F; }
.s-ding    { --tint-vlak: #F3D9D7; --tint-inkt: #7C3532; --tint-lijn: #E0B4B0; }
.s-rest    { --tint-vlak: #E4E2DC; --tint-inkt: #4E535A; --tint-lijn: #CBC7BF; }

/* ── De patchtekening, precies als in het product ──────────────────────────── */

.paneel {
  background: var(--paneel);
  border-radius: var(--rond);
  padding: 14px 16px 16px;
  margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(238, 243, 245, .07);
}
.hero .paneel { box-shadow: none; }

/* Ruimte tussen de switch en het paneel, zodat de kabels een eigen strook
 * hebben. Met de oude twaalf pixels liepen ze dwars door de kop van het paneel
 * eronder, en dan lees je geen van beide. */
.hero .paneel + .paneel { margin-top: 42px; }

.paneelkop { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.paneelkop b {
  color: var(--paneel-tekst); font-size: 13px;
  text-transform: uppercase; letter-spacing: 1.3px;
}
.paneelkop span {
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
  color: rgba(238, 243, 245, .42);
}
.paneelkop .rechts { margin-left: auto; }

.poorten { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.blok { display: grid; grid-template-columns: repeat(6, 34px); gap: 6px; flex: 0 0 auto; }

.poort {
  position: relative;
  height: 44px;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr 3px;
  align-items: center;
  justify-items: center;
  padding: 2px 0 5px;
  border-radius: 5px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: linear-gradient(180deg, #556775 0%, var(--paneel-poort) 100%);
  color: var(--paneel-tekst);
  border: 1px solid rgba(0, 0, 0, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11), 0 1px 1px rgba(0, 0, 0, .18);
}

.poort.leeg {
  background: var(--paneel-gat);
  color: rgba(238, 243, 245, .38);
  border: 1px solid transparent;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .4),
              inset 0 -1px 0 rgba(255, 255, 255, .08),
              0 0 0 1px rgba(255, 255, 255, .13);
}

.poort::after {
  content: '';
  grid-row: 2;
  width: 13px; height: 3px;
  border-radius: 2px;
  background: transparent;
}
.poort.gebruik::after      { background: var(--led-goed); box-shadow: 0 0 6px rgba(52,192,122,.85); }
.poort.vrij::after         { background: rgba(238, 243, 245, .26); }
.poort.stuk                { color: #FFD9D4; }
.poort.stuk::after         { background: var(--led-fout); box-shadow: 0 0 6px rgba(232,92,80,.85); }
.poort.gereserveerd::after { background: var(--led-let); box-shadow: 0 0 6px rgba(239,160,46,.75); }
.poort.vrij {
  background: linear-gradient(180deg, #4A5A67 0%, #414F5B 100%);
  color: rgba(238, 243, 245, .72);
}
.poort .poe {
  position: absolute; top: 3px; right: 4px;
  font-size: 8px; font-weight: 700; line-height: 1; color: var(--led-let);
}

.sfpblok { margin-left: 14px; padding-left: 14px; border-left: 1px dashed var(--paneel-lijn); }
.blok.sfpblok { grid-template-columns: repeat(4, 28px); }

.paneeluitleg {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--paneel-lijn);
  font-size: 11.5px; color: rgba(238, 243, 245, .5);
}
.paneeluitleg span { display: inline-flex; align-items: center; gap: 6px; }
.paneeluitleg i { width: 13px; height: 2.5px; border-radius: 2px; display: inline-block; }
.paneeluitleg i.gat {
  width: 11px; height: 11px; border-radius: 3px;
  background: var(--paneel-gat); box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
}

/* De lijn tussen de switch en het paneel. Op de site vast getekend: het is een
 * plaatje van wat het product doet, en geen bediening. */
.tekenvak { position: relative; }
.lijnen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.lijn {
  fill: none; stroke: var(--merk);
  /* Dikker dan de 1.5 van eerst: een patchkabel is geen haarlijn, en op een
   * donker paneel verdwijnt een dunne streep. */
  stroke-width: 2.5; stroke-linecap: round; opacity: .55;
}
.lijn.sterk { stroke-width: 3.5; opacity: .95; }

/* ── Netwerk: een subnet met zijn bezetting ────────────────────────────────── */

.subnet {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 16px 18px;
  box-shadow: var(--schaduw);
}
.wit .subnet { background: var(--grond); box-shadow: none; }

.subnetkop { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.subnetkop b { font-size: 16px; }
.subnetkop .waar { color: var(--stil); font-size: 13px; }

.vulbalk { width: 120px; height: 7px; background: var(--lijn-fijn); border-radius: 999px; overflow: hidden; }
.vulbalk i { display: block; height: 100%; background: var(--merk); border-radius: 999px; }
.vultekst { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--stil); }

.vrijrij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.vrijkop { font-size: 12.5px; color: var(--stil); margin-right: 2px; }
.vrijknop {
  font-family: "IBM Plex Mono", monospace; font-size: 12px;
  padding: 3px 9px;
  border: 1px dashed var(--lijn); border-radius: 999px;
  background: var(--vlak); color: var(--inkt-zacht);
}

/* ── Wat er nieuw is ──────────────────────────────────────────────────────── */

.uitgave {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--lijn);
}
.uitgave:first-of-type { border-top: 0; }

.uitgave .kop { position: sticky; top: 90px; align-self: start; }
.uitgave .nr {
  font-family: "IBM Plex Mono", monospace;
  font-size: 15px; font-weight: 600;
}
.uitgave .datum { font-size: 13px; color: var(--stil); }

.uitgave ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.uitgave li {
  display: grid; grid-template-columns: 16px 1fr; gap: 10px;
  color: var(--inkt-zacht); font-size: 15.5px;
}
.uitgave li::before {
  content: '';
  width: 5px; height: 5px; margin-top: 10px;
  border-radius: 50%;
  background: var(--merk);
}

.merkje {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--merk-vlak);
  color: var(--merk-diep);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  font-weight: 600;
}

/* ── Voet ─────────────────────────────────────────────────────────────────── */

footer {
  background: var(--paneel);
  color: rgba(238, 243, 245, .68);
  padding: 56px 0 40px;
  font-size: 14.5px;
}
footer a { color: var(--paneel-tekst); text-decoration: none; }
footer a:hover { color: var(--merk); text-decoration: underline; }

.voetraster {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.voetraster h4 {
  margin: 0 0 10px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px;
  color: rgba(238, 243, 245, .42);
  font-weight: 600;
}
.voetraster ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }

.voetonder {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid var(--paneel-lijn);
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  font-size: 13px; color: rgba(238, 243, 245, .45);
}

@media (max-width: 640px) {
  section { padding: 58px 0; }
  .hero { padding: 44px 0 0; }
  .poorten { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .uitgave { grid-template-columns: 1fr; gap: 10px; }
  .uitgave .kop { position: static; }
  /* De lijnen zitten nu in hun eigen mediaquery hieronder: ze moeten al
   * eerder weg dan de rest. */
}

/* ── Schermen laten zien ─────────────────────────────────────────────────────
 *
 * Geen plaatjes maar de echte html met de echte stijl. Dat is niet alleen
 * scherper op elk scherm: een plaatje veroudert zodra het product verandert, en
 * dan staat er op de site een scherm dat niemand meer krijgt. Dit verandert mee.
 */
.schermvak {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
  overflow: hidden;
}
.donker .schermvak { background: var(--paneel-op); border-color: var(--paneel-lijn); }

/* De balk erboven met drie bolletjes: dan leest het als een venster en niet als
 * een blok tekst dat toevallig een rand heeft. */
.schermbalk {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: var(--hover);
  border-bottom: 1px solid var(--lijn);
}
.donker .schermbalk { background: rgba(0, 0, 0, .18); border-color: var(--paneel-lijn); }
.schermbalk i { width: 9px; height: 9px; border-radius: 50%; background: var(--lijn); }
.donker .schermbalk i { background: var(--paneel-lijn); }
.schermbalk span {
  margin-left: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  color: var(--stil);
}
.donker .schermbalk span { color: rgba(238, 243, 245, .45); }

.schermlijf { padding: 18px; overflow-x: auto; }

.schermuitleg {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--stil);
}

/* ── Een tabel zoals in het product ── */
table.proef { width: 100%; border-collapse: collapse; font-size: 14px; }
table.proef th {
  text-align: left;
  padding: 0 10px 8px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--flauw);
  font-weight: 600;
  border-bottom: 1px solid var(--lijn);
}
table.proef td { padding: 9px 10px; border-bottom: 1px solid var(--lijn-fijn); }
table.proef tr:last-child td { border-bottom: 0; }
table.proef .r { text-align: right; }

.lamp { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--stil); }
.lamp i { width: 7px; height: 7px; border-radius: 50%; }

.merkje2 {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  background: var(--hover);
  color: var(--inkt-zacht);
  font-size: 11.5px;
}

.standje {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.standje.uit  { background: #F1F0EE; color: var(--stil); border: 1px solid var(--lijn); }
.standje.gaat { background: #FDF1DE; color: #8A5A12; border: 1px solid #F2DDB8; }

/* ── Het verschil uit het logboek ── */
.vregel {
  display: grid;
  grid-template-columns: minmax(80px, auto) 1fr auto 1fr;
  gap: 8px;
  align-items: baseline;
  font-size: 12.5px;
  line-height: 1.6;
  font-family: "IBM Plex Mono", monospace;
}
.vveld { color: var(--stil); font-weight: 600; }
.vwas { color: var(--stil); text-decoration: line-through; }
.vpijl { color: var(--flauw); }
.vwordt { color: var(--inkt); font-weight: 500; }

/* ── De tijdlijn van het dagboek ── */
.dbregel {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 14px;
  padding: 11px 0 11px 14px;
  border-left: 2px solid var(--lijn-fijn);
}
.dbdatum {
  color: var(--stil);
  font-size: 12.5px;
  font-family: "IBM Plex Mono", monospace;
}
.dbwaar { font-weight: 600; font-size: 13.5px; }
.dbtekst { color: var(--inkt-zacht); font-size: 14px; line-height: 1.55; }

/* ── De telefoon ─────────────────────────────────────────────────────────────
 *
 * Een omlijsting eromheen, want anders leest een smalle kolom als een smalle
 * kolom en niet als een toestel. De inhoud erin is dezelfde tekst en dezelfde
 * kleur als in de app; het is geen foto maar een weergave, en die verandert mee
 * als de app verandert.
 */
.toestellen {
  display: grid;
  gap: 26px;
  margin-top: 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  max-width: 860px;
}

.toestel {
  background: var(--paneel);
  border: 8px solid #10161C;
  border-radius: 34px;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--schaduw-op);
}

.toestelkop {
  display: flex;
  justify-content: center;
  padding: 9px 0 3px;
}
.toestelkop i {
  width: 62px; height: 15px;
  border-radius: 999px;
  background: #10161C;
  display: block;
}

.toestellijf { padding: 14px 15px 20px; color: var(--paneel-tekst); }

.toestellijf h4 {
  margin: 0 0 3px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.3px;
}
.toestellijf .sub2 {
  margin: 0 0 14px;
  font-size: 12px;
  color: rgba(238, 243, 245, .5);
}

.tregel {
  padding: 9px 11px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, .06);
  border-radius: 9px;
  font-size: 13px;
}
.tregel b { display: block; font-weight: 600; }
.tregel span { color: rgba(238, 243, 245, .55); font-size: 11.5px;
               font-family: "IBM Plex Mono", monospace; }

.tletop {
  padding: 10px 11px;
  margin-bottom: 10px;
  border-radius: 9px;
  background: rgba(239, 160, 46, .14);
  border: 1px solid rgba(239, 160, 46, .3);
  font-size: 12.5px;
  color: #F6D9A6;
}
.tletop b { display: block; font-size: 10px; letter-spacing: 1.2px; margin-bottom: 3px; }

.tvrij { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.tvrij span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  padding: 3px 8px;
  border: 1px dashed rgba(238, 243, 245, .28);
  border-radius: 999px;
  color: rgba(238, 243, 245, .8);
}

.toestelnaam {
  margin-top: 12px;
  font-size: 13px;
  color: var(--stil);
  text-align: center;
}
.donker .toestelnaam { color: rgba(238, 243, 245, .5); }

/* ── Zo gaat het: de animatie op de beginpagina ──────────────────────────────
 *
 * Vier stappen die elkaar afwisselen in een raam dat op de app lijkt. Eén
 * tijdlijn van 16 seconden, elke stap vier seconden, en daarna van voren af
 * aan. Alles met keyframes en niets met JavaScript: dan blijft het staan als er
 * iets misgaat met een script, en het kost de browser bijna niets.
 *
 * De stappen liggen op elkaar (grid, zelfde cel) in plaats van naast elkaar.
 * Zo is het raam even hoog als de hoogste stap en springt er niets.
 */
.film { margin-top: 40px; }

.filmraam {
  position: relative;
  display: grid;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  box-shadow: var(--schaduw-op);
  overflow: hidden;
  min-height: 330px;
}

.filmbalk {
  grid-area: 1 / 1;
  align-self: start;
  display: flex; align-items: center; gap: 7px;
  padding: 11px 16px;
  background: var(--grond);
  border-bottom: 1px solid var(--lijn-fijn);
  z-index: 2;
}
.stip { width: 9px; height: 9px; border-radius: 50%; background: var(--lijn); }
.filmadres {
  margin-left: 10px; font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px; color: var(--flauw);
}

.stap {
  grid-area: 1 / 1;
  padding: 62px 26px 26px;
  opacity: 0;
  animation: filmstap 16s infinite;
}
.stap.s1 { animation-delay: 0s; }
.stap.s2 { animation-delay: 4s; }
.stap.s3 { animation-delay: 8s; }
.stap.s4 { animation-delay: 12s; }

/* 0-2% opkomen, tot 24% blijven staan, dan weg. 25% van 16s is vier seconden. */
@keyframes filmstap {
  0%   { opacity: 0; transform: translateY(6px); }
  3%   { opacity: 1; transform: none; }
  22%  { opacity: 1; transform: none; }
  25%  { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 0; transform: translateY(-4px); }
}

/* ── Gedeeld door de stappen ── */
.filmkop {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 17px; font-weight: 600; margin-bottom: 14px;
}
.lampje { width: 9px; height: 9px; border-radius: 50%; background: var(--flauw); }
.lampje.goed { background: var(--led-goed); }

.veldrij {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--lijn-fijn);
  font-size: 15px;
}
.veldrij span { color: var(--stil); }

/* ── Stap 1: de reden ── */
.filmvraag {
  margin: 18px 0 10px;
  font-weight: 600;
}
.knoprij { display: flex; gap: 8px; flex-wrap: wrap; }
.filmknop {
  padding: 7px 13px; border-radius: 8px;
  border: 1px solid var(--lijn); background: var(--vlak);
  font-size: 13.5px; color: var(--inkt-zacht);
}
/* Eén knop licht op alsof hij wordt aangewezen: dat is de reden die gekozen
 * wordt, en in de stap erna zie je hem terug in de logregel. */
.filmknop.aan {
  border-color: var(--merk-diep); color: #fff;
  background: var(--merk-diep);
  animation: aanwijzen 4s infinite;
}
@keyframes aanwijzen {
  0%, 45%  { box-shadow: 0 0 0 0 rgba(27, 117, 112, .40); }
  62%      { box-shadow: 0 0 0 8px rgba(27, 117, 112, 0); }
  100%     { box-shadow: 0 0 0 0 rgba(27, 117, 112, 0); }
}

/* ── Stap 2: het wachtwoord en de logregel ── */
.geheimvak {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 16px 0 14px; padding: 13px 15px;
  background: var(--grond); border: 1px solid var(--lijn); border-radius: 9px;
}
.geheimvak code {
  font-family: "IBM Plex Mono", monospace; font-size: 17px; color: var(--inkt);
}
.kopieer {
  margin-left: auto; font-size: 13px; color: var(--merk-diep); font-weight: 600;
}
.logregel {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 14px; border-radius: 9px;
  background: var(--merk-vlak);
  font-size: 14.5px; color: var(--inkt);
}
.logregel i { font-style: normal; color: var(--merk-diep); font-weight: 600; }

/* ── Stap 3: de poort die wordt aangewezen ── */
.filmpaneel { margin: 4px 0 12px; }
.poort.kiezen {
  /* Van vrij naar gekozen: een ring die twee keer aanzwelt, zodat het oog er
   * heen gaat zonder dat er iets beweegt. */
  animation: poortwijzen 4s infinite;
}
@keyframes poortwijzen {
  0%, 25% { box-shadow: 0 0 0 0 rgba(47, 168, 160, .55); }
  45%     { box-shadow: 0 0 0 9px rgba(47, 168, 160, 0); }
  55%     { box-shadow: 0 0 0 0 rgba(47, 168, 160, .55); }
  75%     { box-shadow: 0 0 0 9px rgba(47, 168, 160, 0); }
  100%    { box-shadow: 0 0 0 0 rgba(47, 168, 160, 0); }
}

/* ── Stap 4: de weg die de kabel aflegt ── */
.pad {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 6px 0 16px;
}
.padstuk {
  padding: 7px 12px; border-radius: 8px;
  background: var(--grond); border: 1px solid var(--lijn);
  font-family: "IBM Plex Mono", monospace; font-size: 13px;
}
.padstuk.sterk {
  background: var(--merk-vlak); border-color: var(--merk);
  color: var(--merk-diep); font-weight: 600;
}
.padpijl { color: var(--flauw); }

/* ── De stappen eronder ── */
.filmstappen {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin: 18px 0 0; padding: 0; list-style: none;
  counter-reset: stap;
}
.filmstappen li {
  counter-increment: stap;
  padding-top: 11px;
  border-top: 3px solid var(--lijn);
  font-size: 13.5px; color: var(--stil);
}
.filmstappen li::before {
  content: counter(stap);
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px; color: var(--flauw); margin-bottom: 2px;
}
/* De streep boven de stap die nu speelt, kleurt mee. */
.filmstappen li:nth-child(1) { animation: streep 16s infinite 0s; }
.filmstappen li:nth-child(2) { animation: streep 16s infinite 4s; }
.filmstappen li:nth-child(3) { animation: streep 16s infinite 8s; }
.filmstappen li:nth-child(4) { animation: streep 16s infinite 12s; }
@keyframes streep {
  0%, 24%  { border-top-color: var(--merk); color: var(--inkt); }
  25%,100% { border-top-color: var(--lijn); color: var(--stil); }
}

@media (max-width: 700px) {
  .filmstappen { grid-template-columns: repeat(2, 1fr); }
  .stap { padding: 58px 18px 22px; }
}

/* Wie beweging heeft uitgezet, krijgt de eerste stap stil te zien. Niets
 * verbergen: een lege doos is erger dan een stilstaand beeld. */
@media (prefers-reduced-motion: reduce) {
  .stap, .filmknop.aan, .poort.kiezen, .filmstappen li { animation: none; }
  .stap { opacity: 0; }
  .stap.s1 { opacity: 1; }
}

/* ── De patchkabels: alleen zolang ze kloppen ───────────────────────────────
 *
 * De coördinaten in de svg zijn opgemeten beeldpunten. Dat kan, want de poorten
 * liggen op een vast raster — maar alleen zolang er niets omvouwt. Nagemeten:
 * tot en met 800px staan de panelen op dezelfde plek (onder 163, boven 205);
 * bij 760 breken de poorten naar een extra rij en schuift alles 56 pixels op.
 *
 * Onder de 800 dus weg. Een lijn die ergens middenin het paneel zweeft is
 * erger dan geen lijn.
 */
@media (max-width: 800px) {
  .lijnen { display: none; }
  .hero .paneel + .paneel { margin-top: 12px; }
}

/* ── Prijzen ────────────────────────────────────────────────────────────────
 *
 * Drie kaarten naast elkaar, met het bedrag als grootste ding op de kaart. Dat
 * is waar iemand naar zoekt; de uitleg leest hij pas daarna.
 *
 * De centen kleiner dan de euro's: "29,95" met even grote cijfers leest als één
 * lang getal en daar struikel je over. Dit is de vorm die een prijskaartje al
 * honderd jaar heeft.
 */
.prijzen { margin-top: 34px; margin-bottom: 34px; }

.kaart.prijs { display: flex; flex-direction: column; position: relative; }

/* Met .kaart ervoor, anders wint `.kaart p { font-size: 15.5px }` op
 * specificiteit en blijft het bedrag even groot als de uitleg eronder. */
.kaart .prijskop {
  margin: 0; font-weight: 600; font-size: 15px; color: var(--stil);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.kaart .bedrag {
  margin: 6px 0 0;
  font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05;
  color: var(--inkt);
  font-variant-numeric: tabular-nums;
}
/* De centen klein en opgetild, en strak tegen de komma aan. Zonder die
 * negatieve marge staat er zichtbaar "29, 95" met een gat erin. */
.kaart .bedrag span {
  font-size: .5em; font-weight: 600; vertical-align: .62em; margin-left: -.08em;
}

.kaart .pertijd { margin: 3px 0 0; font-size: 13.5px; color: var(--stil); }
.kaart.prijs > p:last-child { margin-top: 16px; }

/* De middelste steekt eruit, maar niet met een andere kleur -- dan lijkt het
 * een andere soort. Alleen een rand en een merkje. */
.kaart.prijs.gekozen {
  border-color: var(--merk);
  box-shadow: 0 0 0 1px var(--merk), var(--schaduw);
}
/* In de kaart en niet eroverheen. Er staat `overflow: hidden` op een kaart in
 * een raster -- dat houdt het streepje bij het aanwijzen binnen de ronde
 * hoeken -- en een merkje dat erbuiten hangt wordt daardoor afgesneden. */
.kaart.prijs .merkje {
  margin: 0;
  padding: 3px 11px; border-radius: 20px;
  background: var(--merk-diep); color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
}

.prijsvoet { font-size: 14px; color: var(--stil); margin: 0 0 18px; }