/* ==========================================================================
   Hub-faner v3 — farverige grupper, LODRET (24-09-2026)
   Hver undermenu-prik baerer sin fanes farve. Gruppe-knappen arver den
   aktive fans farve, saa farverne aldrig forsvinder — de samler sig.
   Pillen springer op FRA knappen og smelter ned IGEN i den.

   LODRET: punkterne stod foer i én vandret raekke paa 66 px pr. punkt.
   Fritid har seks = ca. 460 px — bredere end en telefon (360-390 px), saa
   bakken stak ud over kanten. Nu staar de under hinanden: farvet ikon,
   navn, en kort note og en lille pil. Listen ruller selv, naar skaermen
   er for lav (hoejden saettes af grupper.js' placer()).
   ========================================================================== */

/* taeppet bag undermenuen */
.hub-taeppe{position:fixed;inset:0;z-index:79;background:rgba(15,63,68,.18);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .3s ease}
.hub-taeppe.vis{opacity:1;pointer-events:auto}

/* pillen der springer op fra knappen */
/* pointer-events: bakken tager KUN imod tryk, naar den er synlig.
   Her stod kun opacity:0, og gennemsigtighed skjuler farven — ikke
   feltet. En lukket menu laa derfor tilbage som et usynligt baand paa
   ca. 220x60 px lige over bundbjaelken og opsnappede tryk resten af
   besoeget. Taeppet nedenfor gjorde det rigtigt fra begyndelsen. */
/* Bakken selv har IKKE overflow: pilen (::after) stikker 7 px ud under
   den og ville blive klippet af. Rulningen sidder paa .hub-liste indeni. */
.hub-bakke{pointer-events:none;position:fixed;z-index:81;bottom:96px;
  background:rgba(255,254,250,.97);
  backdrop-filter:blur(20px) saturate(1.12);-webkit-backdrop-filter:blur(20px) saturate(1.12);
  border:1px solid var(--kant,#E7E2D7);border-radius:24px;
  box-shadow:0 30px 60px -18px rgba(15,63,68,.42),0 4px 14px -6px rgba(15,63,68,.18);
  padding:7px;width:max-content;min-width:232px;
  max-width:min(320px,calc(100vw - 20px));
  transform-origin:var(--pil,50%) 100%;
  opacity:0;transform:translateY(18px) scale(.84);
  transition:transform .44s cubic-bezier(.3,1.4,.45,1),opacity .22s ease}
.hub-bakke.vis{pointer-events:auto;opacity:1;transform:translateY(0) scale(1)}
/* lukning: smelter ned i knappen — punkterne synker i omvendt kaskade */
.hub-bakke.borte{opacity:0;transform:translateY(14px) scale(.86);
  transition:transform .26s cubic-bezier(.5,0,.75,.4),opacity .18s ease}
.hub-bakke.borte .hub-punkt{transition:transform .2s cubic-bezier(.5,0,.75,.4),opacity .14s;
  transform:translateY(6px) scale(.96);opacity:0}
.hub-bakke.borte .hub-punkt:nth-child(1){transition-delay:0s,0s}
.hub-bakke.borte .hub-punkt:nth-child(2){transition-delay:.02s,.02s}
.hub-bakke.borte .hub-punkt:nth-child(3){transition-delay:.04s,.04s}
.hub-bakke.borte .hub-punkt:nth-child(4){transition-delay:.06s,.06s}
.hub-bakke.borte .hub-punkt:nth-child(5){transition-delay:.08s,.08s}
.hub-bakke.borte .hub-punkt:nth-child(6){transition-delay:.1s,.1s}
.hub-bakke.borte .hub-punkt:nth-child(7){transition-delay:.12s,.12s}

/* pilen der peger ned mod gruppe-knappen */
.hub-bakke::after{content:"";position:absolute;bottom:-7px;left:var(--pil,50%);
  width:14px;height:14px;transform:translateX(-50%) rotate(45deg);
  background:rgba(255,254,250,.97);border-right:1px solid var(--kant,#E7E2D7);
  border-bottom:1px solid var(--kant,#E7E2D7);border-bottom-right-radius:4px}

/* listen: én raekke pr. punkt, ruller selv paa en lav skaerm */
.hub-liste{display:flex;flex-direction:column;gap:2px;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  border-radius:17px;scrollbar-width:thin}

/* punkterne: farvet ikon-felt, navn + note, lille pil */
.hub-punkt{display:flex;flex-direction:row;align-items:center;gap:12px;
  border:none;background:none;cursor:pointer;font-family:inherit;text-align:left;
  padding:7px 10px 7px 7px;border-radius:16px;width:100%;min-height:52px;
  color:#23403F;flex:none;
  opacity:0;transform:translateY(10px) scale(.96);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .26s,background .2s}
.hub-bakke.vis .hub-punkt{opacity:1;transform:none}
/* kaskaden starter NEDERST — naermest knappen og tommelfingeren */
.hub-bakke.vis .hub-punkt:nth-last-child(1){transition-delay:.05s,.04s,0s}
.hub-bakke.vis .hub-punkt:nth-last-child(2){transition-delay:.09s,.07s,0s}
.hub-bakke.vis .hub-punkt:nth-last-child(3){transition-delay:.13s,.1s,0s}
.hub-bakke.vis .hub-punkt:nth-last-child(4){transition-delay:.17s,.13s,0s}
.hub-bakke.vis .hub-punkt:nth-last-child(5){transition-delay:.21s,.16s,0s}
.hub-bakke.vis .hub-punkt:nth-last-child(6){transition-delay:.25s,.19s,0s}
.hub-bakke.vis .hub-punkt:nth-last-child(7){transition-delay:.29s,.22s,0s}
.hub-punkt:hover{background:color-mix(in srgb,var(--pf,#17767E) 7%,transparent)}
/* .vis-reglen ovenfor er mere specifik end :active alene — derfor her */
.hub-bakke.vis .hub-punkt:active{transform:scale(.97)}
.hub-punkt:focus-visible{outline:2px solid var(--pf,#17767E);outline-offset:-2px}
.hub-punkt .hub-ikon{flex:none;width:38px;height:38px;border-radius:13px;display:grid;
  place-items:center;color:var(--pf,#17767E);
  background:color-mix(in srgb,var(--pf,#17767E) 12%,#fff);
  border:1.5px solid color-mix(in srgb,var(--pf,#17767E) 28%,#fff);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .25s,color .25s}
.hub-punkt:hover .hub-ikon{transform:scale(1.07) rotate(-4deg)}
.hub-punkt .hub-ikon svg{width:20px;height:20px}
.hub-punkt .hub-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.hub-punkt .hub-mrk{font-size:14.5px;font-weight:650;letter-spacing:-.01em;line-height:1.2}
.hub-punkt .hub-note{font-size:11.5px;font-weight:500;color:#6E8285;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-punkt .hub-pil{flex:none;color:#A9B8BA;transition:transform .25s,color .25s}
.hub-punkt:hover .hub-pil{transform:translateX(2px);color:var(--pf,#17767E)}
/* det punkt, man staar paa */
.hub-punkt.her{background:color-mix(in srgb,var(--pf,#17767E) 10%,transparent)}
.hub-punkt.her .hub-ikon{background:var(--pf);color:#fff;border-color:var(--pf);
  box-shadow:0 8px 18px -8px var(--pf)}
.hub-punkt.her .hub-mrk{font-weight:800;color:var(--pf)}
.hub-punkt.her .hub-pil{color:var(--pf)}

/* gruppe-knappen i bjælken: farve-prikker over symbolet viser, hvilke
   faner der bor indeni — og hvilken en, man er paa */
nav.bund button.hub{position:relative}
nav.bund button.hub .hub-prikker{position:absolute;top:3px;left:50%;
  transform:translateX(-50%);display:flex;gap:3px;align-items:center;z-index:2}
nav.bund button.hub .hub-prikker i{width:4.5px;height:4.5px;border-radius:50%;
  background:var(--pf);opacity:.7;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .25s}
nav.bund button.hub .hub-prikker i.her{transform:scale(1.7);opacity:1}
nav.bund button.hub.aaben .hub-prikker i{opacity:1}
nav.bund button.hub.aaben .pille{background:rgba(23,118,126,.1)}
/* naara et barn er aktivt, baerer knappen dets farve */
nav.bund button.hub.har-barn .pille{color:var(--hub-f)}
nav.bund button.hub.har-barn .mrk{color:var(--hub-f);font-weight:800}
nav.bund button.hub.har-barn::after{content:"";position:absolute;left:50%;
  bottom:2px;width:16px;height:3px;border-radius:99px;transform:translateX(-50%);
  background:var(--hub-f);opacity:.85}

/* HER LAA .hub-sum: en samlet taeller paa gruppe-knappen. Kilden til
   tallet fandtes aldrig — se grupper.js. Fjernet med den. */

@media (prefers-reduced-motion:reduce){
  .hub-bakke,.hub-punkt,.hub-taeppe,.hub-prikker i,.hub-ikon,.hub-pil{transition-duration:.01s!important}
}