/* Navstar Start v3.0 — eigen layout bovenop de gedeelde Navstar-stijl (stijl.css + extra.css).
   Opzet: cyaan topbalk, blauwe kopband (hero) met de Navstar-baan als decoratie, de inhoud
   in witte "lades" die over de band heen vallen, zachte schaduwen, veel lucht. */

/* ---- Login: geen foto, alleen de robotvideo onder de blauwe overlay ---- */
.login-fotozijde-start { background: linear-gradient(135deg, #0088ca, #00527a); }

/* ---- Topbalk ---- */
.topbalk { height: 62px; padding: 0 2rem; box-shadow: none; position: relative; z-index: 5; }
.topmenu { display: flex; gap: .25rem; margin-left: 1.8rem; flex: 1; }
.topmenu a { color: rgba(255, 255, 255, .82); text-decoration: none; font-weight: 600; font-size: .9rem;
  padding: .5rem 1rem; border-radius: 99px; transition: background .15s, color .15s; }
.topmenu a:hover { background: rgba(255, 255, 255, .14); color: var(--wit); }
.topmenu a.actief { background: var(--wit); color: var(--blauw-donker);
  box-shadow: 0 2px 6px rgba(0, 60, 90, .2); }
@media (max-width: 760px) { .topmenu { margin-left: .5rem; gap: 0; }
  .topmenu a { padding: .45rem .6rem; font-size: .82rem; } }

/* ---- Eén tegelkleur: Navstar-blauw; oranje alleen als accent (data-kleur blijft in de HTML, CSP laat geen inline style toe) ---- */
[data-kleur] { --tool-kleur: #0088ca; }
:root { --oranje: #ff9421; --navstar-licht: #eff6f9; }
.app-pagina { background: var(--navstar-licht); }

/* ---- Kopband (hero) ---- */
.hero { position: relative; overflow: hidden; color: var(--wit);
  background: linear-gradient(120deg, #0e93cf 0%, #0088ca 45%, #005f8f 100%);
  padding: 2.6rem 2rem 6.2rem; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .16); pointer-events: none; }
.hero::before { width: 900px; height: 900px; right: -260px; top: -620px; }
.hero::after { width: 560px; height: 560px; right: 60px; top: -400px;
  border-color: rgba(255, 255, 255, .1); }
.hero-bol { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #ff9421;
  right: 579px; top: 31px; box-shadow: 0 0 0 6px rgba(255, 148, 33, .25), 0 4px 12px rgba(0, 0, 0, .25); }
.hero-binnen { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; display: flex;
  align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.hero-datum { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255, 255, 255, .78); margin-bottom: .35rem; }
.hero h1 { font-size: 2.35rem; font-weight: 800; line-height: 1.1; color: var(--wit);
  letter-spacing: -.01em; margin-bottom: 1rem; }
.hero-pillen { display: flex; gap: .5rem; flex-wrap: wrap; }
.hero-pil { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px); border-radius: 99px; padding: .38rem .9rem; color: var(--wit); }
.hero-pil svg { width: 14px; height: 14px; }
.hero-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 1.1rem; }
.hero-tagline { font-family: var(--kop); font-size: 1.05rem; font-weight: 700; color: var(--wit);
  letter-spacing: .01em; }
.hero-tagline em { font-style: normal; background: var(--oranje); color: var(--wit); border-radius: 6px;
  padding: .05rem .45rem; margin-left: .15rem; }
.hero-cijfers { display: flex; gap: 2.2rem; padding-bottom: .4rem; }
.hero-cijfers div { display: flex; flex-direction: column; align-items: flex-start; }
.hero-cijfers strong { font-family: var(--kop); font-size: 2rem; font-weight: 800; line-height: 1;
  color: var(--wit); }
.hero-cijfers span { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .75); margin-top: .3rem; }
.hero-klein { padding: 2rem 2rem 4.6rem; }
.hero-klein h1 { font-size: 1.7rem; margin: 0; }
.hero-klein::before { top: -700px; }
@media (max-width: 760px) { .hero { padding: 1.8rem 1rem 5rem; } .hero h1 { font-size: 1.7rem; }
  .hero-cijfers { gap: 1.4rem; } .hero-cijfers strong { font-size: 1.5rem; } }

/* ---- Inhoud over de kopband heen ---- */
.inhoud.inhoud-breed { max-width: 1280px; margin: -4.2rem auto 0; padding: 0 2rem 2.6rem;
  position: relative; z-index: 2; }
@media (max-width: 760px) { .inhoud.inhoud-breed { padding: 0 1rem 2rem; margin-top: -3.6rem; } }

.lade { background: var(--wit); border-radius: 28px; padding: 1.8rem 2rem 2.2rem;
  box-shadow: 0 2px 4px rgba(16, 26, 43, .03), 0 20px 40px -24px rgba(0, 60, 90, .25);
  border: 1px solid #e4ebed; }
.lade-kop { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.4rem; }
.lade-kop h2 { font-size: 1.15rem; font-weight: 800; color: var(--inkt); letter-spacing: -.01em; }
.lade-kop .info-knop { opacity: .7; }

/* ---- App-tegels: gevuld gekleurd vierkant, groot wit icoon, naam eronder ---- */
.apptegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 1.5rem 1.3rem; }
.apptegel { position: relative; display: flex; flex-direction: column; align-items: center; gap: .7rem;
  text-decoration: none; }
.apptegel-icoon { width: 100%; aspect-ratio: 1; border-radius: 26%; display: flex; align-items: center;
  justify-content: center; color: var(--wit); position: relative; overflow: hidden;
  background: linear-gradient(150deg, #22a7e0 0%, #0088ca 55%, #006a9a 100%);
  box-shadow: 0 12px 24px -12px rgba(0, 106, 154, .55), 0 2px 4px rgba(16, 26, 43, .06);
  transition: transform .18s, box-shadow .18s; }
.apptegel-icoon::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 20% 10%, rgba(255, 255, 255, .24), transparent 55%); }
.apptegel-icoon svg { width: 46%; height: 46%; position: relative; z-index: 1; }
.apptegel:hover .apptegel-icoon { transform: translateY(-5px) scale(1.03);
  box-shadow: 0 0 0 3px var(--oranje), 0 20px 34px -12px rgba(0, 106, 154, .6); }
.apptegel-titel { font-family: var(--kop); font-size: .95rem; font-weight: 700; color: var(--inkt);
  text-align: center; line-height: 1.2; }
.apptegel:hover .apptegel-titel { color: var(--blauw-donker); }
.apptegel-stip { position: absolute; top: 11px; left: 11px; z-index: 2;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .6) !important; }
.apptegel-stip.rood { background: var(--oranje); }
.apptegel .apptegel-info { position: absolute; top: 6px; right: 8px; z-index: 2;
  color: rgba(255, 255, 255, .85); font-size: 1rem; }
.apptegel .apptegel-info:hover { color: var(--wit); }

/* ---- Snelkoppelingen onder de lade ---- */
.snelnaar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem;
  margin-top: 1.4rem; }
.snelkaart { display: flex; align-items: center; gap: 1rem; background: var(--wit); border-radius: 20px;
  padding: 1.1rem 1.3rem; text-decoration: none; border: 1px solid rgba(226, 232, 240, .9);
  box-shadow: 0 1px 2px rgba(16, 26, 43, .04), 0 12px 28px -18px rgba(0, 60, 90, .35);
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.snelkaart:hover { transform: translateY(-3px); border-color: var(--oranje);
  box-shadow: 0 18px 32px -18px rgba(0, 60, 90, .45); }
.snelkaart-icoon { width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; color: var(--tool-kleur);
  background: color-mix(in srgb, var(--tool-kleur) 12%, white); }
.snelkaart-icoon svg { width: 24px; height: 24px; }
.snelkaart-tekst { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.snelkaart-tekst strong { font-family: var(--kop); font-size: 1.05rem; font-weight: 700; color: var(--inkt); }
.snelkaart-tekst span { font-size: .82rem; color: var(--inkt-zacht); }
.snelkaart-pijl { font-size: 1.3rem; color: var(--oranje); transition: transform .15s; }
.snelkaart:hover .snelkaart-pijl { transform: translateX(4px); }

/* ---- Panelen op de subpagina's ---- */
.paneel { border-radius: 24px; padding: 1.6rem 1.8rem; border: 1px solid rgba(226, 232, 240, .8);
  box-shadow: 0 2px 4px rgba(16, 26, 43, .04), 0 24px 48px -24px rgba(0, 60, 90, .3); }
.paneel h2::before { display: none; }
.paneel h2 { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.prijstabel th { background: #f1f5f9; color: var(--inkt-zacht); font-size: .72rem; letter-spacing: .06em;
  border-bottom: 1px solid var(--rand); }
.prijstabel th:first-child { border-radius: 10px 0 0 10px; }
.prijstabel th:last-child { border-radius: 0 10px 10px 0; }
.prijstabel tbody tr:nth-child(even) { background: transparent; }
.prijstabel tbody tr:hover { background: #f4f9fd; }
.prijstabel td { padding: .6rem .8rem; border-bottom: 1px solid #eef2f6; }

.status-pil.live { background: #e8f6ee; color: #178048; }
.status-pil.test { background: #fff4e0; color: #b45309; }
.status-pil.wacht { background: #e8eefc; color: #3b4fc9; }
.status-pil.intern { background: #eef2f6; color: var(--inkt-zacht); }
.stip { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.stip.groen { background: var(--goed); box-shadow: 0 0 0 3px rgba(46, 204, 113, .25); }
.stip.rood { background: var(--fout); box-shadow: 0 0 0 3px rgba(239, 68, 68, .25); }
.stip.grijs { background: #cbd5e1; }

/* Automatiseringen en rapporten: tabel met rij-icoon */
.automatiseringen td { white-space: normal; vertical-align: middle; }
.automatiseringen .icooncel { width: 2.8rem; padding-right: 0; }
.rij-icoon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; color: var(--wit);
  background: linear-gradient(150deg, #22a7e0, #006a9a); }
.rij-icoon svg { width: 18px; height: 18px; }
.automatiseringen .naamcel { font-weight: 700; color: var(--inkt); white-space: nowrap; }
.automatiseringen .omschrijving { min-width: 18rem; color: var(--inkt-zacht); }

/* ---- Uitleg-ballon (klik-ⓘ) ---- */
.info-knop { background: none; border: 0; color: var(--blauw); font-size: 1rem; cursor: pointer;
  padding: 0 .2rem; line-height: 1; font-family: var(--tekst); }
.info-knop:hover { color: var(--blauw-donker); }
.info-ballon { position: absolute; z-index: 60; background: var(--inkt); color: var(--wit);
  font-size: .82rem; line-height: 1.45; padding: .8rem 1rem; border-radius: 12px;
  box-shadow: 0 12px 30px rgba(13, 39, 64, .25); max-width: 26rem; }
.prijstabel.smal { width: auto; min-width: 32rem; }

/* ---- Voet ---- */
.voetbalk { background: transparent; color: var(--inkt-zacht); padding: 1rem; font-size: .78rem; }