/* Intranet -- pagina-eigen stijl, bovenop tokens.css (hoofdstijl van de
   nieuwe website). Navigatie is de "zwevende pill" (Menu C) uit
   website-the-spidermonkeys/html/css/nav.css -- zelfde vorm/gedrag als
   webdev.thespidermonkeys.nl en de nieuwe spiderapps.nl-website,
   vereenvoudigd naar drie simpele links (geen submenu's/megamenu/
   WhatsApp-knop, die horen bij de publieke marketingsite). */

body{margin:0;background:var(--tsm-offwhite);color:var(--tsm-navy);
  font-family:var(--tsm-body);font-size:var(--tsm-body-size);line-height:var(--tsm-body-line)}

.pillnav{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:200;
  width:calc(100% - 48px);max-width:1160px;display:flex;align-items:center;gap:18px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--tsm-line);border-radius:44px;padding:10px 10px 10px 22px;
  box-shadow:0 14px 44px rgba(27,29,55,.16)}
.pillnav .plogo{font-family:var(--tsm-display);font-weight:800;font-size:16px;
  letter-spacing:-.3px;color:var(--tsm-navy);text-decoration:none;white-space:nowrap}
.pillnav .plogo b{color:var(--tsm-orange)}
.pillnav .plinks{display:flex;gap:18px;align-items:center;flex:1;margin-left:8px}
.pillnav .plinks a{color:var(--tsm-navy);text-decoration:none;font-weight:600;font-size:13.5px;white-space:nowrap}
.pillnav .plinks a:hover{color:var(--tsm-orange)}
.pillnav .plinks a.pactief{color:#fff;background:var(--tsm-navy);padding:8px 14px;border-radius:999px}
.pillnav .pwie{font-size:12.5px;color:var(--tsm-grey);white-space:nowrap}
.pillnav form{margin:0}
.pillnav .puit{background:none;border:1px solid var(--tsm-line);border-radius:999px;color:var(--tsm-grey);
  cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;padding:9px 16px}
.pillnav .puit:hover{border-color:var(--tsm-orange);color:var(--tsm-orange-600)}
.phamb{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--tsm-line);
  background:#fff;color:var(--tsm-navy);flex-direction:column;justify-content:center;align-items:center;
  gap:4px;cursor:pointer;flex:0 0 auto}
.phamb i{display:block;width:16px;height:2px;background:currentColor;border-radius:2px}
.psheet{display:none;position:fixed;left:14px;right:14px;top:84px;z-index:190;background:#fff;
  border:1px solid var(--tsm-line);border-radius:20px;padding:8px 18px;box-shadow:0 18px 44px rgba(27,29,55,.2)}
.psheet.open{display:block}
.psheet a{display:block;padding:13px 4px;border-bottom:1px solid var(--tsm-line);color:var(--tsm-navy);
  text-decoration:none;font-weight:600;font-size:15px}
.psheet a.pactief{color:var(--tsm-orange)}
.psheet-wie{display:block;padding:10px 4px 4px;color:var(--tsm-grey);font-size:13px}
.psheet form{margin:6px 0 10px}
.psheet .puit{width:100%;background:var(--tsm-navy);border:0;border-radius:12px;color:#fff;
  cursor:pointer;font:inherit;font-size:14px;font-weight:600;padding:11px}
@media (max-width:760px){
  .pillnav{left:14px;right:14px;width:auto;transform:none;padding:9px 10px 9px 18px}
  .pillnav .plinks,.pillnav .pwie,.pillnav form{display:none}
  .phamb{display:flex}
}

main.wrap{max-width:1100px;margin:0 auto;padding:32px 32px 60px}
@media (max-width:720px){main.wrap{padding:24px 16px 48px}}

/* .pillnav is fixed (geen documentflow), dus expliciete ruimte erbovenop
   nodig -- overschrijft padding-top uit de algemene regel hierboven. */
body.heeft-pillnav main.wrap{padding-top:112px}
@media (max-width:760px){body.heeft-pillnav main.wrap{padding-top:96px}}

.hero-intro h1{margin:0 0 8px}
.hero-intro p{color:var(--tsm-grey);margin:0 0 28px}
.hero-intro-met-icoon{display:flex;align-items:center;gap:16px}
.hero-intro-met-icoon h1{margin:0 0 4px}
.hero-intro-met-icoon p{margin:0}
.hero-intro-met-icoon .kaart-icoon{width:56px;height:56px;font-size:18px}

.kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.kaart{display:block;background:#fff;border:1px solid var(--tsm-line);border-radius:14px;
  padding:18px 20px;text-decoration:none;color:var(--tsm-navy);transition:border-color .15s ease}
.kaart:hover{border-color:var(--tsm-orange)}
.kaart b{display:block;font-family:var(--tsm-display);font-size:16px;margin-bottom:4px}
.kaart > span{font-size:13px;color:var(--tsm-grey)}

.kaart-icoon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:10px;margin-bottom:12px;overflow:hidden;flex:0 0 auto;background:var(--tsm-offwhite)}
.kaart-icoon img{width:100%;height:100%;object-fit:contain;padding:4px}
.kaart-icoon.kaart-avatar{color:#fff;font-family:var(--tsm-display);font-weight:700;font-size:14px;letter-spacing:.02em}

/* Sommige klantlogo's zijn een brede wordmark (geen icoon-vorm) -- die
   passen niet mooi in het vierkante icoonvakje (worden dan een piepklein
   streepje midden in veel lege ruimte). Die krijgen een breed, laag kaartje
   op ware verhouding in plaats van een geforceerd vierkant. */
.kaart-icoon-lang{width:auto;max-width:150px;height:36px;justify-content:flex-start;
  background:transparent;border-radius:0;padding:0;overflow:visible}
.kaart-icoon-lang img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;padding:0}
.hero-intro-met-icoon .kaart-icoon-lang{height:52px;max-width:220px}

.snelkoppelingen{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 36px}
.snelknop{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--tsm-line);
  border-radius:999px;padding:9px 16px;text-decoration:none;color:var(--tsm-navy);font-weight:600;font-size:13.5px}
.snelknop:hover{border-color:var(--tsm-orange);color:var(--tsm-orange-600)}
.snelknop-actief{background:var(--tsm-navy);border-color:var(--tsm-navy);color:#fff}
.snelknop-actief:hover{color:#fff}

table.tickets{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--tsm-line);
  border-radius:12px;overflow:hidden;font-size:14px}
table.tickets th{text-align:left;background:var(--tsm-offwhite);padding:10px 14px;
  font-family:var(--tsm-display);font-weight:700;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--tsm-grey);white-space:nowrap}
table.tickets td{padding:10px 14px;border-top:1px solid var(--tsm-line);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:260px}
@media (max-width:760px){table.tickets{display:block;overflow-x:auto;border-radius:10px}
  table.tickets thead,table.tickets tbody{display:table;width:100%;min-width:640px}}
.tickets-rij{cursor:pointer}
.tickets-rij:hover{background:var(--tsm-offwhite)}
.badge-status{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:var(--tsm-offwhite);color:var(--tsm-navy)}

.ticket-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:24px}
.ticket-kop h1{margin:0 0 6px;font-size:24px}
.ticket-kop p{margin:0;color:var(--tsm-grey);font-size:13.5px}
.ticket-samenvatting{background:#fff;border:1px solid var(--tsm-line);border-left:4px solid var(--tsm-orange);
  border-radius:10px;padding:16px 18px;margin-bottom:28px;font-size:14.5px;white-space:pre-wrap}
.ticket-sectiekop{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--tsm-grey);
  font-family:var(--tsm-display);margin:0 0 12px}

.tijdlijn{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.tijdlijn-item{display:flex;gap:12px;background:#fff;border:1px solid var(--tsm-line);border-radius:10px;padding:14px 16px}
.tijdlijn-avatar{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;
  border-radius:50%;color:#fff;font-family:var(--tsm-display);font-weight:700;font-size:12px;letter-spacing:.02em}
.tijdlijn-item-inhoud{min-width:0;flex:1}
.tijdlijn-item-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.tijdlijn-item-kop b{font-family:var(--tsm-display)}
.tijdlijn-item-datum{color:var(--tsm-grey);margin-left:auto}
.tijdlijn-item-tekst{margin-top:8px;font-size:14px;color:var(--tsm-navy);line-height:1.55;overflow-wrap:anywhere}
.tijdlijn-item-tekst p{margin:0 0 10px}
.tijdlijn-item-tekst p:last-child{margin-bottom:0}
.tijdlijn-item-tekst img{max-width:100%;height:auto;border-radius:6px;margin:6px 0}
.tijdlijn-item-tekst table{max-width:100%;display:block;overflow-x:auto;border-collapse:collapse;font-size:13px}
.tijdlijn-item-tekst td,.tijdlijn-item-tekst th{border:1px solid var(--tsm-line);padding:6px 9px}
.tijdlijn-item-tekst a{color:var(--tsm-orange-600)}
.tijdlijn-item-tekst blockquote{margin:8px 0;padding:2px 0 2px 12px;border-left:3px solid var(--tsm-line);color:var(--tsm-grey)}
.tijdlijn-item-leeg{color:var(--tsm-grey);font-style:italic}
.badge-zichtbaarheid{display:inline-block;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em}
.badge-prive{background:var(--tsm-navy);color:#fff}
.badge-zichtbaar{background:var(--tsm-orange-tint);color:var(--tsm-orange-600)}
.badge-tijd{display:inline-block;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:700;
  background:var(--tsm-offwhite);color:var(--tsm-navy)}

.ticket-formulieren{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
@media (max-width:820px){.ticket-formulieren{grid-template-columns:1fr}}
.ticket-form{background:#fff;border:1px solid var(--tsm-line);border-radius:12px;padding:18px 20px}
.ticket-form h3{margin:0 0 12px;font-size:15px;font-family:var(--tsm-display)}
.ticket-form textarea,.ticket-form input[type=number]{width:100%;box-sizing:border-box;border:1px solid var(--tsm-line);
  border-radius:8px;padding:9px 12px;font:inherit;font-size:13.5px;margin-bottom:10px;resize:vertical}
.ticket-form-rij{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.ticket-form-rij label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--tsm-navy)}
.ticket-form .login-knop{margin-top:0;padding:9px 20px;font-size:13.5px}

.terug{display:inline-block;margin-bottom:18px;color:var(--tsm-grey);text-decoration:none;font-size:13.5px}
.terug:hover{color:var(--tsm-orange)}

.leeg{color:var(--tsm-grey);font-size:14px;padding:20px 0}
.fout{background:var(--tsm-orange-tint);color:var(--tsm-orange-600);border-radius:10px;
  padding:12px 16px;margin-bottom:20px;font-size:14px}

.login-wrap{max-width:380px;margin:100px auto 0;text-align:center}
.login-wrap h1{font-size:28px}
.login-knop{display:inline-flex;align-items:center;gap:10px;background:var(--tsm-navy);color:#fff;
  text-decoration:none;font-family:var(--tsm-display);font-weight:700;font-size:14.5px;
  padding:14px 26px;border-radius:12px;margin-top:18px}
.login-knop:hover{background:var(--tsm-navy-soft)}

/* "Ons"-pagina: bedrijfsinformatie als eigen HTML-experience, geen
   PowerPoint-viewer. Herbruikt de bestaande kaart/kaarten-stijl waar het
   past, met een paar eigen onderdelen (waardenraster, dienstenladder,
   fout/goed-tabel). */
.ons-hero{max-width:760px;margin-bottom:8px}
.ons-kicker{font-family:var(--tsm-display);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--tsm-orange-600);margin:0 0 10px}
.ons-hero h1{font-size:34px;margin:0 0 12px;line-height:1.2}
.ons-intro{color:var(--tsm-grey);font-size:15px;margin:0}

.ons-blok{margin-top:44px;padding-top:36px;border-top:1px solid var(--tsm-line)}
.ons-blok h2{font-size:20px;margin:0 0 6px}
.ons-sub{color:var(--tsm-grey);font-size:13.5px;margin:0 0 18px}
.ons-dna{margin-top:16px;font-size:14px;color:var(--tsm-navy)}

.ons-2koloms{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.ons-2koloms{grid-template-columns:1fr}}
.ons-kaart{background:#fff;border:1px solid var(--tsm-line);border-radius:12px;padding:18px 20px}
.ons-kaart b{display:block;font-family:var(--tsm-display);font-size:14.5px;margin-bottom:8px}
.ons-kaart p{margin:0;font-size:14px;color:var(--tsm-navy);line-height:1.55}
.ons-lijst{margin:0;padding-left:18px;font-size:14px;line-height:1.7}

.ons-waarden{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:820px){.ons-waarden{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ons-waarden{grid-template-columns:1fr}}
.ons-waarde{background:#fff;border:1px solid var(--tsm-line);border-radius:12px;padding:18px 20px}
.ons-waarde-nr{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--tsm-navy);color:#fff;font-family:var(--tsm-display);font-weight:700;
  font-size:12px;margin-bottom:10px}
.ons-waarde b{display:block;font-family:var(--tsm-display);font-size:14px;margin-bottom:6px}
.ons-waarde p{margin:0;font-size:13.5px;color:var(--tsm-grey);line-height:1.5}

.ons-propositie{font-family:var(--tsm-display);font-size:18px;font-weight:600;line-height:1.4;
  max-width:720px;margin:0 0 22px}
.ons-ladder{display:flex;flex-direction:column;gap:8px}
.ons-trede{display:flex;align-items:baseline;gap:14px;background:#fff;border:1px solid var(--tsm-line);
  border-radius:10px;padding:12px 18px}
.ons-trede-label{flex:0 0 auto;width:70px;font-family:var(--tsm-display);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;color:var(--tsm-orange-600)}
.ons-trede b{flex:0 0 auto;width:200px;font-family:var(--tsm-display);font-size:14px}
.ons-trede p{margin:0;font-size:13.5px;color:var(--tsm-grey)}
@media (max-width:700px){.ons-trede{flex-wrap:wrap}.ons-trede b{width:auto}}

.ons-chips{display:flex;flex-wrap:wrap;gap:8px}
.ons-chip{display:inline-block;padding:8px 16px;border-radius:999px;background:#fff;
  border:1px solid var(--tsm-line);font-size:13.5px;font-weight:600;color:var(--tsm-navy)}
.ons-chip-eigen{background:var(--tsm-navy);border-color:var(--tsm-navy);color:#fff}

.ons-foutgoed{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--tsm-line);
  border-radius:12px;overflow:hidden;font-size:13.5px}
.ons-foutgoed th{text-align:left;background:var(--tsm-offwhite);padding:10px 16px;
  font-family:var(--tsm-display);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--tsm-grey)}
.ons-foutgoed td{padding:12px 16px;border-top:1px solid var(--tsm-line);vertical-align:top;line-height:1.5}
.ons-foutgoed td:first-child{color:var(--tsm-grey);text-decoration:line-through;width:38%}
.ons-regel{margin-top:16px;font-size:13.5px;color:var(--tsm-navy)}

.ons-praktisch{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:700px){.ons-praktisch{grid-template-columns:1fr}}
.ons-praktisch>div{background:#fff;border:1px solid var(--tsm-line);border-radius:10px;padding:14px 18px}
.ons-praktisch span{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--tsm-grey);margin-bottom:4px}
.ons-praktisch b{font-family:var(--tsm-display);font-size:14px;font-weight:600}
.ons-onbekend{color:var(--tsm-orange-600);font-weight:600}

.ons-voetnoot{margin-top:40px;padding-top:20px;border-top:1px solid var(--tsm-line);
  font-size:12.5px;color:var(--tsm-grey)}