/* ==================================================================
   Startpagina — stijl "art mode" (variant B)
   Foto schermvullend, één verloopband onderin, geen kaders.
   ================================================================== */

/* ==================================================================
   1. Wallpaper + scrim
   ================================================================== */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background-size: cover; background-position: center center;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    /* verloopband onderin: daar staan status, radio, klok en iconen */
    linear-gradient(0deg,
      rgba(0,0,0,.88) 0%, rgba(0,0,0,.60) 18%, rgba(0,0,0,.18) 40%,
      rgba(0,0,0,0) 55%),
    /* donkere hoek linksboven, zodat de links ook op lichte foto's leesbaar blijven */
    radial-gradient(ellipse 55% 60% at 0% 0%,
      rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,0) 100%),
    /* zachte schaduw links: daar staan zoekbalk en links */
    linear-gradient(90deg,
      rgba(0,0,0,.50) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,0) 70%);
}
body {
  background: #0b0b0d !important;
  font-family: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==================================================================
   2. Glance-chrome weg
   ================================================================== */
.widget-header, .widget-error-header, .footer, .mobile-navigation, .page-header {
  display: none !important;
}
.hp-hero, .hp-hero *,
.hp-search, .hp-search *,
.hp-links, .hp-links * {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* hero-inhoud is volledig position:fixed; de widget zelf mag geen
   hoogte innemen, anders duwt hij zoekbalk en links omlaag */
.hp-hero {
  height: 0 !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important;
  overflow: visible !important;
}

/* ==================================================================
   3. Kolom: alles links uitgelijnd op 48px van de rand
   ================================================================== */
body *:has(.hp-search) {
  padding: 0 !important;
  margin-top: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
.hp-search, .hp-links {
  width: auto !important; min-width: 0 !important; max-width: none !important;
  margin: 0 0 0 48px !important;
  padding: 0 !important;
}
.hp-search { margin-top: 44px !important; }
.hp-links  { margin-top: 52px !important; padding-bottom: 260px !important; }

/* ==================================================================
   4. Zoekbalk: één ronde pil
   ================================================================== */
.hp-search > *, .hp-search > * > *, .hp-search form, .hp-search label {
  display: block !important;
  padding: 0 !important; margin: 0 !important;
  width: 100% !important; max-width: none !important;
  box-sizing: border-box;
}
.hp-search [class*="header"],
.hp-search > *:not(:has(input)) { display: none !important; }
.hp-search svg, .hp-search [class*="icon"] { display: none !important; }

.hp-search input {
  background-color: rgba(11,11,13,.55) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 20px center !important;
  background-size: 19px 19px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 26px !important;
  backdrop-filter: blur(12px);
  height: 52px; padding: 0 20px 0 52px;
  width: 620px !important; max-width: calc(100vw - 96px) !important; min-width: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  box-sizing: border-box;
  font-size: 16px; color: #fff !important;
}
.hp-search input::placeholder { color: rgba(255,255,255,.6); }
.hp-search input:focus { border-color: rgba(255,255,255,.28) !important; outline: 0; }
.hp-search kbd, .hp-search [class*="hint"] { opacity: .2; }

/* ==================================================================
   5. Links: vier platte kolommen, geen kaarten
   ================================================================== */
.hp-links [class*="header"] { display: none !important; }
.hp-links > *:not(:has(ul)) { display: none !important; }

/* Glance zet container-type: inline-size op .widget-content; daardoor
   heeft hij geen eigen breedte meer en klappen de kolommen naar ~20px
   in (alles valt onder elkaar). Dat zetten we hier uit. */
.hp-links .widget-content {
  container-type: normal !important;
  display: block !important;
  width: max-content !important;
  max-width: calc(100vw - 96px) !important;
}
.hp-links .dynamic-columns {
  display: grid !important;
  grid-template-columns: repeat(4, max-content) !important;
  column-gap: 56px !important;
  row-gap: 24px !important;
  width: max-content !important;
  align-items: start;
}
/* scheidingslijnen tussen de groepen weg */
.hp-links .dynamic-columns > *::before,
.hp-links .dynamic-columns > *::after { display: none !important; }
.hp-links :has(> ul) {
  display: block !important;
  padding: 0 !important; margin: 0 !important;
  --acc: #25d3a6;
}
.hp-links :has(> ul):nth-child(2) { --acc: #3d8bff; }
.hp-links :has(> ul):nth-child(3) { --acc: #ffb020; }
.hp-links :has(> ul):nth-child(4) { --acc: #c084fc; }

/* groepskop: stipje + kleine hoofdletters */
.hp-links :has(> ul) > *:not(ul):not(ol) {
  display: flex !important; align-items: center; gap: 8px;
  font-size: 11px !important; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500;
  color: rgba(255,255,255,.62) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.85);
  margin: 0 0 8px !important;
}
.hp-links :has(> ul) > *:not(ul):not(ol)::before {
  content: ""; width: 6px; height: 6px; flex: 0 0 auto;
  border-radius: 50% !important;
  background: var(--acc) !important;
}

.hp-links ul, .hp-links ol {
  display: block !important;
  list-style: none; padding: 0 !important; margin: 0 !important;
}
.hp-links li { display: block !important; padding: 0; }
/* favicons uit; wil je ze terug, haal dan deze regel weg */
.hp-links li img, .hp-links li svg { display: none !important; }
.hp-links a {
  display: block !important;
  font-size: 14.5px; line-height: 28px;
  color: rgba(255,255,255,.78) !important;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 1px 10px rgba(0,0,0,.75);
  transition: color .15s ease;
}
.hp-links a:hover { color: #fff !important; }

/* ==================================================================
   6. App-iconen onderaan: wit en gedimd, bij hover merkkleur + label
   ================================================================== */
.hp-dockrow {
  position: fixed; left: 0; right: 0; bottom: 36px; z-index: 6;
  display: flex; justify-content: center; gap: 12px;
  pointer-events: none;   /* de rij is schermbreed; zonder dit ligt hij over radio en klok */
}
.hp-dockrow > * { pointer-events: auto; }
.hp-tile {
  position: relative;
  width: 48px; height: 48px; flex: 0 0 auto;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  backdrop-filter: blur(10px);
  transition: background .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.hp-tile img {
  width: 22px; height: 22px; display: block;
  filter: brightness(0) invert(1);   /* logo altijd wit */
  opacity: .78;
  transition: opacity .18s ease;
}
.hp-tile:hover, .hp-tile:focus-visible {
  background: var(--c);
  border-color: color-mix(in srgb, var(--c) 70%, #fff 30%);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--c) 45%, transparent);
  outline: 0;
}
.hp-tile:hover img, .hp-tile:focus-visible img { opacity: 1; }

/* label boven het icoon */
.hp-tile::after {
  content: attr(data-t);
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translate(-50%, 4px);
  padding: 5px 10px;
  border-radius: 9px;
  background: rgba(11,11,13,.85);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  font-size: 12.5px; font-weight: 500; line-height: 1.2;
  color: #fff; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.hp-tile:hover::after, .hp-tile:focus-visible::after {
  opacity: 1; transform: translate(-50%, 0);
}

/* ==================================================================
   7. Linksonder: statusregel + radio
   ================================================================== */
.hp-corner-left {
  position: fixed !important; left: 48px; bottom: 36px; z-index: 5;
  display: flex !important; flex-direction: column; gap: 10px;
}
/* apparaatchips zoals op het wallpaper-dashboard: glas, icoon + tijd,
   voortgang als vulling van links (--p). Alles !important op achtergrond,
   rand en radius: sectie 2 zet die binnen .hp-hero op nul. */
.hp-chips {
  display: flex !important; align-items: center; flex-wrap: wrap; gap: 6px;
}
.hp-chip {
  height: 24px; box-sizing: border-box;
  display: inline-flex !important; align-items: center; gap: 5px;
  padding: 0 9px 0 6px !important;
  border-radius: 8px !important;
  font-size: 12px; font-weight: 500; line-height: 1;
  white-space: nowrap; font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.95);
  background: linear-gradient(90deg,
    rgba(255,255,255,.20) var(--p, 0%), rgba(255,255,255,.07) var(--p, 0%)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.hp-chip svg {
  display: block; flex: none; width: 15px; height: 15px;
  color: rgba(255,255,255,.95);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
}
.hp-radiof {
  display: block;
  width: 298px; height: 151px;       /* exact de maat van de mini-speler */
  border: 0 !important;
  background: transparent !important;
  color-scheme: dark;                /* anders tekent de browser een witte achtergrond */
}

/* ==================================================================
   8. Rechtsonder: temperatuur · weer · klok, fotocredit eronder
   ================================================================== */
.hp-corner-right {
  position: fixed !important; right: 48px; bottom: 36px; z-index: 5;
  display: flex !important; flex-direction: column; align-items: flex-end; gap: 8px;
  text-align: right;
}
.hp-clockrow { display: flex !important; align-items: center; gap: 16px; }
.hp-temp { font-size: 16px; color: rgba(255,255,255,.85); text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.hp-dot { opacity: .5; margin: 0 6px; }
.hp-wicon { color: rgba(255,255,255,.9); }
.hp-wicon svg { display: block; width: 26px; height: 26px; }
.hp-klok {
  width: 200px; height: 76px;        /* past bij klok.html#72 */
  border: 0 !important;
  background: transparent !important;
  color-scheme: dark;
  display: block; flex: 0 0 auto;
}

.hp-credit { position: relative; max-width: 380px; cursor: default; }
.hp-cnaam { font-size: 14px; font-weight: 500; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.hp-cloc  { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 2px; }

/* ==================================================================
   9. Detailkaart: verschijnt bij hover over de fototekst
   (de padding-bottom is een brug, zodat de kaart blijft staan
   terwijl je er met de muis naartoe gaat)
   ================================================================== */
.hp-info {
  position: absolute !important; right: 0; bottom: 100%;
  padding-bottom: 14px !important;
  width: 360px;
  opacity: 0; pointer-events: none;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  text-align: left;
}
.hp-credit:hover .hp-info { opacity: 1; pointer-events: auto; transform: none; }
.hp-info-in {
  padding: 16px !important;
  border-radius: 18px !important;
  background: rgba(11,11,13,.72) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  backdrop-filter: blur(14px);
}
.hp-dtitel { font-size: 15px; font-weight: 500; color: #fff; line-height: 1.35; }
.hp-dkop   { font-size: 13px; font-style: italic; color: rgba(255,255,255,.6); margin-top: 3px; }
.hp-doms   { font-size: 13px; color: rgba(255,255,255,.78); line-height: 1.55; margin-top: 8px; }
.hp-dmap {
  display: block; position: relative;
  height: 150px; margin-top: 12px; overflow: hidden;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: #1b1b1d !important;
}
.hp-dmap img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.4);
  filter: grayscale(1) invert(1) brightness(.92) contrast(.95);
}

/* ==================================================================
   11. Mobiele pagina (/m) — art mode-stijl
   De kolom wordt een flexkolom over de volle schermhoogte; nieuws,
   fototekst en apps worden met margin-top:auto naar onderen geduwd.
   ================================================================== */

/* scrim voor de telefoon: boven donker (zoeken + links), midden de foto,
   onder donker (nieuws + apps) */
body:has(.hp-m-search)::after {
  background: linear-gradient(180deg,
    rgba(0,0,0,.58) 0%, rgba(0,0,0,.30) 30%, rgba(0,0,0,.12) 45%,
    rgba(0,0,0,.55) 66%, rgba(0,0,0,.92) 100%);
}
body:has(.hp-m-search) { overflow-x: hidden; }
body *:has(> .hp-m-search), body *:has(.hp-m-search) {
  padding: 0 !important; margin: 0 !important;
  max-width: none !important; width: 100% !important;
}
.page-column:has(> .hp-m-search) {
  display: flex !important; flex-direction: column;
  min-height: 100svh;
  padding: 20px 16px calc(18px + env(safe-area-inset-bottom)) !important;
  box-sizing: border-box;
  gap: 14px;
}
.hp-m-search, .hp-m-top, .hp-m-links, .hp-m-bottom, .hp-m-dock {
  width: 100% !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important;
  box-shadow: none !important; border-radius: 0 !important;
}
.hp-m-top .widget-content, .hp-m-bottom .widget-content,
.hp-m-links .widget-content, .hp-m-dock .widget-content {
  padding: 0 !important; background: none !important;
  border: 0 !important; box-shadow: none !important;
}
.hp-m-bottom { margin-top: auto !important; padding-top: 8px !important; }
/* alles lijnt uit op dezelfde 16px-marge als de zoekbalk */

/* ----- zoekbalk: ronde pil ----- */
.hp-m-search [class*="header"],
.hp-m-search > *:not(:has(input)) { display: none !important; }
.hp-m-search > *, .hp-m-search > * > *, .hp-m-search form, .hp-m-search label {
  display: block !important;
  padding: 0 !important; margin: 0 !important;
  width: 100% !important; max-width: none !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  box-sizing: border-box;
}
.hp-m-search svg, .hp-m-search [class*="icon"] { display: none !important; }
.hp-m-search input {
  height: 48px; width: 100% !important; box-sizing: border-box;
  padding: 0 16px 0 44px;
  border-radius: 24px !important;
  background-color: rgba(11,11,13,.55) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 16px center !important;
  background-size: 18px 18px !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 16px;               /* 16px: anders zoomt iOS in bij focus */
  color: #fff !important;
}
.hp-m-search input::placeholder { color: rgba(255,255,255,.6); }

/* ----- temperatuur + apparaatchips ----- */
.hp-m-status {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.hp-m-status .hp-chips { display: contents !important; }
.hp-m-temp {
  font-size: 13px; color: rgba(255,255,255,.85); margin-right: 4px;
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
}

/* ----- links: 2x2, elke link een eigen glaspil (optie C) ----- */
.hp-m-links [class*="header"] { display: none !important; }
.hp-m-links > *:not(:has(ul)) { display: none !important; }
.hp-m-links .widget-content { container-type: normal !important; display: block !important; }
.hp-m-links .dynamic-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 8px !important; row-gap: 16px !important;
  width: 100% !important;
  margin-top: 4px !important;
}
.hp-m-links .dynamic-columns > * {
  width: auto !important; min-width: 0 !important;
  padding: 0 !important; margin: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  --acc: #25d3a6;
}
.hp-m-links .dynamic-columns > *::before,
.hp-m-links .dynamic-columns > *::after { display: none !important; }
.hp-m-links .dynamic-columns > *:nth-child(2) { --acc: #3d8bff; }
.hp-m-links .dynamic-columns > *:nth-child(3) { --acc: #ffb020; }
.hp-m-links .dynamic-columns > *:nth-child(4) { --acc: #c084fc; }
.hp-m-links :has(> ul) > *:not(ul):not(ol) {
  display: flex !important; align-items: center; gap: 6px;
  font-size: 10px !important; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500;
  color: rgba(255,255,255,.85) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
  margin: 0 0 6px !important;
  padding-left: 4px !important;
}
.hp-m-links :has(> ul) > *:not(ul):not(ol)::before {
  content: ""; width: 5px; height: 5px; flex: 0 0 auto;
  border-radius: 50%; background: var(--acc);
}
.hp-m-links ul, .hp-m-links ol {
  display: flex !important; flex-direction: column; gap: 6px;
  list-style: none; padding: 0 !important; margin: 0 !important;
}
.hp-m-links li { display: block !important; padding: 0 !important; margin: 0 !important; }
.hp-m-links li img, .hp-m-links li svg { display: none !important; }
.hp-m-links li > div { display: block !important; }
/* het (lege) icoonvakje van Glance naast elke link weg: dat gaf de lege balkjes */
.hp-m-links li > div > :not(a) { display: none !important; }
.hp-m-links a {
  height: 36px; box-sizing: border-box;
  display: flex !important; align-items: center;
  padding: 0 12px !important;
  border-radius: 11px !important;
  background: rgba(11,11,13,.5) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 14px; line-height: 1;
  color: #fff !important;
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease;
}
/* aantikken: kort de groepskleur, zoals de app-tegels */
.hp-m-links a:active {
  background: color-mix(in srgb, var(--acc) 45%, rgba(11,11,13,.5)) !important;
}

/* ----- nieuws ----- */
.hp-m-news { margin-bottom: 14px; }
.hp-m-kop {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  color: rgba(255,255,255,.62); text-decoration: none;
  margin-bottom: 2px;
}
.hp-m-kop::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #25d3a6; }
.hp-m-nlijst { list-style: none; margin: 0; padding: 0; }
.hp-m-nlijst li + li { border-top: 1px solid rgba(255,255,255,.07); }
.hp-m-nlijst a { display: block; padding: 8px 0; text-decoration: none; }
.hp-m-ntitel {
  display: block; font-size: 13.5px; line-height: 1.3; color: rgba(255,255,255,.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-m-nmeta { display: block; font-size: 11px; color: rgba(255,255,255,.45); margin-top: 2px; }
.hp-news-oud .hp-m-nlijst { opacity: .55; }

/* ----- fototekst (tik = omschrijving) ----- */
.hp-m-credit { font-size: 12px; color: rgba(255,255,255,.55); }
.hp-m-credit summary { list-style: none; cursor: pointer; }
.hp-m-credit summary::-webkit-details-marker { display: none; }
.hp-m-cnaam { color: #fff; font-weight: 500; }
.hp-m-kop2 { font-size: 12px; font-style: italic; color: rgba(255,255,255,.55); margin-top: 8px; }
.hp-m-oms  { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.75); margin-top: 6px; }

/* ----- app-tegels: 5 per rij, glas, label eronder ----- */
/* tegels vaste breedte, buitenste tegels precies op de 16px-marge */
.hp-m-apps {
  display: grid; grid-template-columns: repeat(5, 52px);
  justify-content: space-between;
  row-gap: 12px;
}
.hp-m-app { min-width: 0; white-space: nowrap; }
.hp-m-app {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 10.5px; color: rgba(255,255,255,.7); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.hp-m-ai {
  width: 52px; height: 52px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background .15s ease;
}
.hp-m-ai img { width: 22px; height: 22px; display: block; filter: brightness(0) invert(1); }
/* bij aantikken kort de merkkleur, zoals de hover op desktop */
.hp-m-app:active .hp-m-ai { background: var(--c); }

/* ==================================================================
   12. UMCU-nieuws rechtsboven (uit sensor.umcu_nieuws, gevuld door
       een Power Automate-flow). Staat binnen .hp-hero, dus overal
       !important op achtergrond, rand en radius (zie sectie 2).
   ================================================================== */
.hp-news {
  position: fixed; right: 48px; top: 44px; z-index: 5;
  width: 360px; box-sizing: border-box;
  padding: 14px 16px 10px;
  border-radius: 18px !important;
  background: rgba(11,11,13,.45) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.hp-news-kop {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  color: rgba(255,255,255,.45); text-decoration: none;
  margin-bottom: 6px;
}
.hp-news-kop::before {
  content: ""; width: 6px; height: 6px; border-radius: 50% !important; background: #25d3a6 !important;
}
.hp-news-kop:hover { color: rgba(255,255,255,.75); }
.hp-news-lijst { list-style: none; margin: 0; padding: 0; }
.hp-news-lijst li + li { border-top: 1px solid rgba(255,255,255,.06) !important; }
.hp-news-lijst a {
  display: block; padding: 7px 0; text-decoration: none;
}
.hp-news-titel {
  display: block;
  font-size: 13.5px; line-height: 1.35; color: rgba(255,255,255,.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .15s ease;
}
.hp-news-meta {
  display: block; margin-top: 2px;
  font-size: 11.5px; color: rgba(255,255,255,.45);
}
.hp-news-lijst a:hover .hp-news-titel { color: #fff; }
.hp-news-melding { font-size: 12.5px; color: rgba(255,255,255,.5); padding: 6px 0; }
/* op smalle vensters botst hij met de zoekbalk: dan weg */
@media (max-width: 1150px) { .hp-news { display: none; } }

/* nieuws niet meer bijgewerkt (flow > 3 uur stil): gedimd + melding */
.hp-news-oud .hp-news-lijst { opacity: .55; }
.hp-news-stil {
  margin-left: auto; letter-spacing: .04em; text-transform: none;
  color: #f0a04b;
}

/* ==================================================================
   13. Apparaat-popups (desktop): hover of tik op een chip linksonder
   De popups komen uit een eigen widget (hp-pops-w, cache 30s) en staan
   allemaal op dezelfde plek boven de chips. Zichtbaar zolang de chip of
   de popup zelf onder de muis is (of de chip focus heeft na een tik).
   ================================================================== */
.hp-pops-w, .hp-pops-w > *, .hp-pops-w .widget-content {
  height: 0 !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important;
  overflow: visible !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  container-type: normal !important;
}
.hp-chip[data-k] { cursor: pointer; outline: none; }
.hp-chip[data-k]:hover, .hp-chip[data-k]:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4) !important;
}
.hp-pop {
  position: fixed; left: 48px; bottom: 236px; z-index: 20;
  width: 360px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 7px;
  font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #ececee; font-variant-numeric: tabular-nums;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  /* bij weggaan even wachten, zodat je van de chip naar de popup kunt bewegen */
  transition: opacity .15s ease .25s, transform .15s ease .25s, visibility 0s linear .4s;
}
/* staat de muis op een (andere) chip, dan verdwijnen de overige popups meteen */
body:has(.hp-chip[data-k]:hover) .hp-pop {
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .1s ease, transform .1s ease, visibility 0s linear .1s;
}
.hp-pop:hover,
body:has(.hp-chip[data-k="was"]:hover) .hp-pop[data-k="was"],
body:has(.hp-chip[data-k="vaat"]:hover) .hp-pop[data-k="vaat"],
body:has(.hp-chip[data-k="droog"]:hover) .hp-pop[data-k="droog"],
body:has(.hp-chip[data-k="pluisje"]:hover) .hp-pop[data-k="pluisje"],
body:has(.hp-chip[data-k="luna"]:hover) .hp-pop[data-k="luna"],
body:has(.hp-chip[data-k="maai"]:hover) .hp-pop[data-k="maai"],
body:not(:has(.hp-chip[data-k]:hover)):has(.hp-chip[data-k="was"]:focus) .hp-pop[data-k="was"],
body:not(:has(.hp-chip[data-k]:hover)):has(.hp-chip[data-k="vaat"]:focus) .hp-pop[data-k="vaat"],
body:not(:has(.hp-chip[data-k]:hover)):has(.hp-chip[data-k="droog"]:focus) .hp-pop[data-k="droog"],
body:not(:has(.hp-chip[data-k]:hover)):has(.hp-chip[data-k="pluisje"]:focus) .hp-pop[data-k="pluisje"],
body:not(:has(.hp-chip[data-k]:hover)):has(.hp-chip[data-k="luna"]:focus) .hp-pop[data-k="luna"],
body:not(:has(.hp-chip[data-k]:hover)):has(.hp-chip[data-k="maai"]:focus) .hp-pop[data-k="maai"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .15s ease, transform .15s ease, visibility 0s;
}
/* onzichtbare brug naar de chips (precies de tussenruimte), zodat de popup
   blijft staan onderweg, maar zonder over de chips zelf te vallen */
.hp-pop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }

.hp-pc {
  padding: 12px !important;
  border-radius: 18px !important;
  background: rgba(14,15,19,.82) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.35) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
}
.hp-prw { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.hp-pr { text-align: right; }
.hp-pg { font-size: 11px; color: #8b93a7; }
.hp-pk { color: var(--k); font-weight: 500; }
.hp-pbig { font-size: 30px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.hp-pbig small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: #8b93a7; margin-left: 2px; }
.hp-pt { font-size: 20px; font-weight: 600; }
.hp-plabel {
  display: flex; justify-content: space-between; margin-bottom: 6px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #9aa1b2;
}
.hp-plabel span { text-transform: none; letter-spacing: 0; color: #8b93a7; }
.hp-pc svg { display: block; overflow: visible; }
.hp-pvakken { display: grid !important; grid-template-columns: 1fr 1fr; gap: 7px; padding: 7px !important; }
.hp-pvak {
  padding: 8px 10px !important; min-width: 0;
  border-radius: 12px !important; background: rgba(255,255,255,.04) !important;
}
.hp-pvak span { font-size: 11px; color: #8b93a7; }
.hp-pvak b {
  display: block; margin-top: 2px; font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-pbron { font-size: 10.5px; color: rgba(255,255,255,.4); text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.hp-pmap {
  display: block; margin-top: 12px; overflow: hidden;
  border-radius: 12px !important; background: #1b1b1d !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
.hp-pmap img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: contain; }
.hp-pbalk {
  height: 5px; margin-top: 14px; overflow: hidden;
  border-radius: 3px !important; background: rgba(255,255,255,.08) !important;
}
.hp-pbalk i { display: block; height: 100%; background: var(--k) !important; border-radius: 3px !important; }

/* detailkaart: titel als link naar de bron, fotocredit klein onderaan */
.hp-dtitel a { color: #fff !important; text-decoration: none; }
.hp-dtitel a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hp-dcredit { font-size: 11.5px; color: rgba(255,255,255,.45); margin-top: 8px; }